/** * Features classes * * @author splitfire - http://splitfire.fr * @version 1.0 * */ /* * * Présentation de l'offre actuel de l'utisateur * */ //liste des options .features_subscription { font-size:1.2em; color:black; font-weight: bold; @include mq($to: tablet){font-size:.9em;} & > li { margin:0 0 1.2em 0; } } //Montant de l'abonnement .features_price--number { font-size:3em; color:$toolbarActionColor; font-weight: bold; @include mq($to: tablet) { display: block; text-align: center; } } .feature-period { @include mq($to: tablet) { display: block; text-align: center; font-size: .8em; } } //Date de son abonnement .features_price--date { margin:10px 0 0 0; font-size:.8em; } /* * * Gestion des options type: stockage, collaborateurs. * */ .feature-slider { position: relative; margin: 0 80px; @include mq($to: tablet){margin:0} & .ui-slider-range { background-image: none; background-color: $toolbarActionColor; transition : width 0.2s linear; } & .ui-slider-handle { background: none; border: none; outline: none; background-color: #fafafa; border: 1px solid #666; border-radius: 12px; transition : left 0.2s linear; } } //container des options et label .features_option_label { @include mq($to: tablet) { @include after(); margin:0 0 0 10px; } } .feature_option { margin: 80px 0 50px 0; @include mq($to: tablet){margin:0} &:first-child { margin-top: 50px; @include mq($to: tablet){margin:0} } } .feature_option_large { margin: 50px 0; @include mq($to: tablet){ margin: 15px 0;} } // label liste des options .features_label { @include mq($to: tablet) { float:left; margin:0; } } .feature-select { @include mq($to: tablet) { float: left; } } // Légende des libéllé d'options .ui-slider-legend { margin-top: -32px; & .ui-slider-legend--item { position: absolute; text-align: center; color: $toolbarActionColor; font-size: 1.3em; font-weight: bold; cursor: pointer; white-space: nowrap; &.active { color: black; } } } // Légende des prix d'options .ui-slider-price { margin-top: 50px; & .ui-slider-price--item { position: absolute; text-align: center; color: #666; cursor: pointer; white-space: nowrap; &.active { font-weight: bold; } } }