mirror of
https://github.com/esphome/esphome.git
synced 2024-11-30 10:44:13 +01:00
6 lines
5.9 KiB
CSS
6 lines
5.9 KiB
CSS
|
/* Materializecss Stepper - By Kinark 2016
|
||
|
|
// https://github.com/Kinark/Materialize-stepper
|
||
|
|
// CSS.min v2.1.3
|
||
|
|
*/
|
||
|
|
label.invalid{font-size:12.8px;font-size:.8rem;font-weight:500;color:red!important;top:50px!important}label.invalid.active{-webkit-transform:translateY(0)!important;transform:translateY(0)!important}ul.stepper{counter-reset:section;overflow-y:auto;overflow-x:hidden}.card-content ul.stepper{margin:1em -24px;padding:0 24px}@media only screen and (min-width:993px){ul.stepper.horizontal{position:relative;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between;min-height:458px}.card-content ul.stepper.horizontal{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;overflow:hidden}.card-content ul.stepper.horizontal:first-child{margin-top:-24px}ul.stepper.horizontal:before{content:'';background-color:transparent;width:100%;min-height:84px;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:absolute;left:0}}ul.stepper .wait-feedback{left:0;right:0;top:0;z-index:2;position:absolute;width:100%;height:100%;text-align:center;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}ul.stepper .step{position:relative}ul.stepper .step.feedbacking .step-content>:not(.wait-feedback){opacity:.1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"}@media only screen and (min-width:993px){ul.stepper.horizontal .step{position:static;margin:0;width:100%;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:center;-webkit-box-align:center;align-items:center;height:84px!important}ul.stepper.horizontal>.step:last-of-type,ul.stepper.horizontal>.step[data-last=true]{width:auto!important}ul.stepper.horizontal .step:not(:last-of-type):after,ul.stepper.horizontal>.step.active:not(:last-of-type):after{content:'';position:static;display:inline-block;width:100%;height:1px}}ul.stepper>li:not(:last-of-type){margin-bottom:10px;-webkit-transition:margin-bottom .4s;transition:margin-bottom .4s}ul.stepper .step:not(:last-of-type).active{margin-bottom:36px}ul.stepper .step:before{position:absolute;top:12px;counter-increment:section;content:counter(section);height:28px;width:28px;color:#fff;background-color:rgba(0,0,0,.3);border-radius:50%;text-align:center;line-height:28px;font-weight:400}ul.stepper .step.active:before,ul.stepper .step.done:before{background-color:#2196f3}ul.stepper .step.done:before{content:'\e5ca';font-size:16px;font-family:'Material Icons'}ul.stepper .step.wrong:before{content:'\e001';font-size:24px;font-family:'Material Icons';background-color:red!important}ul.stepper .step-title{margin:0 -24px;cursor:pointer;padding:15.5px 44px 24px 64px;display:block}@media only screen and (min-width:993px){ul.stepper.horizontal .step.active .step-title:before,ul.stepper.horizontal .step.done .step-title:before{background-color:#2196f3}ul.stepper.horizontal .step.done .step-title:before{content:'\e5ca';font-size:16px;font-family:'Material Icons'}ul.stepper.horizontal .step.wrong .step-title:before{content:'\e001';font-size:24px;font-family:'Material Icons';background-color:red!important}ul.stepper.horizontal .step-title{line-height:84px;height:84px;margin:0;padding:0 25px 0 65px;display:inline-block;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-ms-flex-negative:0;flex-shrink:0}ul.stepper.horizontal .step:before{content:none}ul.stepper.horizontal .step .step-title:before{position:absolute;top:28.5px;left:19px;counter-increment:section;content:counter(section);height:28px;width:28px;color:#fff;background-color:rgba(0,0,0,.3);border-radius:50%;text-align:center;line-height:28px;font-weight:400}ul.stepper.horizontal .step-title:after{top:15px}}ul.stepper .step-title:after{content:attr(data-step-label);display:block;position:absolute;font-size:12.8px;font-size:.8rem;color:#424242;font-weight:400}ul.stepper .step-title:hover{background-color:rgba(0,0,0,.06)}ul.stepper .step.active .step-title{font-weight:500}ul.stepper .step-conte
|