@trilogy-ds/styles 0.0.1-beta-3 → 0.0.1-beta.10

package/framework/src/components/_price.scss

@@ -1,209 +1,158 @@
 $price-levels: (
-  ($text-64),
-  ($text-56),
-  ($text-44),
-  ($text-32),
-  ($text-28),
-  ($text-24),
-  ($text-20),
+    ($text-64),
+    ($text-56),
+    ($text-44),
+    ($text-32),
+    ($text-28),
+    ($text-24),
+    ($text-20),
 );
 
-
 .price {
-    display: inline-flex;
-    // flex-wrap: wrap;
-    &:not(.is-inlined){
-        font-size: 44px;
-    }
+  display: inline-flex;
+  font-weight: $weight-semibold;
+  line-height: 0.8;
+  margin-bottom: 0;
 
+  &:not(.is-inlined) {
+    font-size: 44px;
+  }
 
-    @each $price-level in $price-levels {
-        $i: index($price-levels, $price-level);
-        $font-size: nth($price-level , 1);
+  @each $price-level in $price-levels {
+    $i: index($price-levels, $price-level);
+    $font-size: nth($price-level, 1);
 
-        &.is-level-#{$i} {
-            font-size: $font-size;
+    &.is-level-#{$i} {
+      font-size: $font-size;
 
-            @if $i > 4 {
-                .price-details {
-                    padding-left: 2px !important;
-                }
-            }
-          }
+      @if $i > 4 {
+        .price-details {
+          padding-left: 2px !important;
+        }
+      }
+    }
 
     // the details : cents + period
 
     .price-details {
-        padding-left: $spacing-1;
-
-        .cents,
-        .centimes,
-        .periode,
-        .period {
-            line-height: 1;
-            display: block;
-        }
-
-        .cents,
-        .centimes {
-            font-weight: 600;
-            font-size: 0.475em;
-            vertical-align: top;
-            text-align: left;
-
-            sup {
-                font-weight: $weight-medium;
-                padding-left: 2px;
-                top: -0.3em;
-            }
+      padding-left: $spacing-1;
+
+      .cents,
+      .centimes,
+      .periode,
+      .period {
+        line-height: 1;
+        display: block;
+      }
+
+      .cents,
+      .centimes {
+        font-weight: 600;
+        font-size: 0.475em;
+        vertical-align: top;
+        text-align: left;
+
+        sup {
+          font-weight: $weight-medium;
+          padding-left: 2px;
+          top: -0.3em;
         }
+      }
 
-        .period,
-        .periode {
-            font-size: 0.375em;
-            margin-top: 0;
-            padding-left: 0.1em;
-            text-align: left;
-        }
+      .period,
+      .periode {
+        font-size: 0.375em;
+        margin-top: 0;
+        padding-left: 0.1em;
+        text-align: left;
+      }
     }
 
 
-    }
-
-    // FIXME : le nom de cette classe devrait être préfixé de "price-"
-    .main,
-    .price-main {
-        font-weight: $weight-semibold;
-        line-height: 0.8;
-        margin-bottom: 0;
-    }
+  }
 
+  &.is-inverted {
+    color: getColor('background');
+  }
 
+  &.has-suptitle {
+    display: flex;
+    flex-wrap: wrap;
 
-
-
-    // rendre les is-n deprecated dans 4 versions -  v1.18.11 -
-
-    &.is-1 {
-        font-size: 56px;
+    .price-suptitle {
+      flex-basis: 100%;
+      font-size: 0.375em;
     }
+  }
 
-    &.is-2 {
-        font-size: 44px;
+  &.has-description {
+    .cents,
+    .centimes {
+      align-items: flex-start;
+      display: flex;
     }
 
-    &.is-3 {
-        font-size: 32px;
+    .icon {
+      height: inherit;
+      width: inherit;
     }
+  }
 
-    &.is-4 {
-        font-size: 29px;
-    }
-
-    &.is-5 {
-        font-size: 23px;
+  &.is-inlined {
+    .price-details {
+      display: inline-flex;
+      margin-left: 0;
+      padding-left: 0 !important;
+
+      .cents,
+      .centimes,
+      .periode,
+      .period {
+        font-size: inherit;
+        line-height: 0.8;
+        padding-left: 0;
+      }
     }
 
-    &.is-6 {
-        font-size: 14px;
+    &.is-striked {
+      &::before {
+        transform: rotate(-12deg);
+      }
     }
+  }
 
-    &.is-huge {
-        font-size: 62px;
-    }
+  &.is-striked {
+    position: relative;
+    color: getBGColor('font');
 
-    &.is-main-price {
-        color: getColor('alternate');
+    &::before {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 50%;
+      right: 0;
+      border-top: 2px solid;
+      border-color: getColor('font');
+      border-radius: 5px;
+      transform: rotate(-20deg);
     }
 
     &.is-inverted {
-        color: getColor('background');
-    }
-
-    &.has-suptitle {
-        display: flex;
-        flex-wrap: wrap;
-
-        .price-suptitle {
-            flex-basis: 100%;
-            font-size: 0.375em;
-        }
-    }
-
-    &.has-description {
-        .cents,
-        .centimes {
-            align-items: flex-start;
-            display: flex;
-        }
+      color: getBGColor('font');
 
-        .icon {
-            height: inherit;
-            width: inherit;
-        }
+      &::before {
+        border-color: getColor('background');
+      }
     }
 
-    &.is-inlined {
-        .price-details {
-            display: inline-flex;
-            margin-left: 0;
-            padding-left: 0 !important;
-            .cents,
-            .centimes,
-            .periode,
-            .period {
-                font-size: inherit;
-                line-height: 0.8;
-                padding-left: 0;
-            }
-        }
-
-        &.is-striked {
-            &::before {
-                transform: rotate(-12deg);
-            }
-        }
-    }
-
-    &.is-striked {
-        position: relative;
-        color: getVariantColor('font', 2);
-
-        &::before {
-            position: absolute;
-            content: "";
-            left: 0;
-            top: 50%;
-            right: 0;
-            border-top: 2px solid;
-            border-color: getColor('font');
-            border-radius: 5px;
-            transform: rotate(-20deg);
-        }
-
-        &.is-main-price {
-            color: getVariantColor('alternate', 2);
-            &::before {
-                border-color: getColor('alternate');
-            }
-        }
-
-        &.is-inverted {
-            color: getVariantColor('background', 2);
-
-            &::before {
-                border-color: getColor('background');
-            }
-        }
-
-        &.has-suptitle {
-            display: inline-flex;
-            margin-top: 0.55em;
+    &.has-suptitle {
+      display: inline-flex;
+      margin-top: 0.55em;
 
-            .price-suptitle {
-                position: absolute;
-                top: -1.4em;
-            }
-        }
+      .price-suptitle {
+        position: absolute;
+        top: -1.4em;
+      }
     }
+  }
 }

package/framework/src/components/_product-tour.scss

@@ -1,5 +1,3 @@
-$product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-background defaults
-
 .product-tour {
     position: absolute;
     z-index: zindex('modal');
@@ -124,7 +122,7 @@ $product-tour-target-outline: rgba(10,10,10,.86); // comes from Bulma's .modal-b
 
 .product-tour-target {
     &-active {
-        outline: 999em solid $product-tour-target-outline !important;
+        outline: 999em solid getColor('main') !important;
         outline-offset: 10px !important;
         z-index: zindex('modal');
     }

package/framework/src/components/_segmented-control.scss

@@ -1,60 +1,48 @@
 .segmented-control {
-    border-radius: 6px;
-    padding: $spacing-1;
-    border: 1px solid getColor('grey-light');
-    background-color: getColor('grey-lighter');
-    display: inline-block;
-    margin: 16px 0;
+  border-radius: 6px;
+  padding: $spacing-1;
+  background-color: getBGColor('neutral');
+  display: inline-block;
+  margin: 16px 0;
 
-    @include mobile {
-        display: flex;
-        margin: 24px auto;
-        width: 100%;
-    }
+  @include mobile {
+    display: flex;
+    margin: 24px auto;
+    width: 100%;
+  }
 
-    .segmented-control-item {
-        padding: 0 $spacing-5;
-        border-radius: 4px;
-        font-size: 16px;
-        text-align: center;
-        border: 2px solid transparent;
-        height: 42px;
-        color: getColor('font');
-        background-color: getColor('grey-lighter');
-        font-family: $body-family;
+  .segmented-control-item {
+    padding: 0 $spacing-5;
+    border-radius: $radius-small;
+    font-size: 16px;
+    text-align: center;
+    border: 2px solid transparent;
+    height: 42px;
+    color: getColor('font');
+    background-color: getBGColor('neutral');
+    font-family: $body-family;
 
-        &:not(:last-child) {
-            margin-right: 4px;
-        }
-
-        @include mobile {
-            padding: 0 $spacing-4;
-            flex: 1 1 0;
-            width: 0;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
 
-        &:hover {
-            cursor: pointer;
-            background-color: transparent;
-            color: getColor('alternate');
-            border-color: currentColor;
-        }
+    @include mobile {
+      padding: 0 $spacing-4;
+      flex: 1 1 0;
+      width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
 
-        &.is-active {
-            background-color: getColor('alternate');
-            color: invertColor('alternate');
-            font-weight: 600;
-        }
+    #{$hoverSelector} {
+      cursor: pointer;
+      @include hoverRules()
+    }
 
-        &[disabled] {
-            background-color: getColor('grey-disabled');
-            border-color: getColor('grey-disabled');
-            color: getColor('grey-darker');
-            &:hover {
-                cursor: not-allowed;
-            }
-        }
+    &.is-active {
+      background-color: getColor('main');
+      color: invertColor('main');
+      font-weight: 600;
     }
+  }
 }

package/framework/src/components/_slider.scss

@@ -1,92 +1,92 @@
 [data-slider] {
-    position: relative;
+  position: relative;
 
-    [data-slider-pages] {
-        overflow: hidden;
-    }
+  [data-slider-pages] {
+    overflow: hidden;
+  }
 
-    [data-slider-page] {
-        &.column:not(.is-12-mobile) {
-            min-width: 0;
-        }
+  [data-slider-page] {
+    &.column:not(.is-12-mobile) {
+      min-width: 0;
     }
+  }
 
-    [data-slides-container] {
-        display: flex;
-    }
+  [data-slides-container] {
+    display: flex;
+  }
 
-    [data-slide] {
-        flex: 0 0 100%;
-    }
+  [data-slide] {
+    flex: 0 0 100%;
+  }
 
-    [data-slider-dots] {
-        position: absolute;
-        left: 50%;
-        bottom: -20px;
-        transform: translateX(-50%);
+  [data-slider-dots] {
+    position: absolute;
+    left: 50%;
+    bottom: -20px;
+    transform: translateX(-50%);
 
-        &:not(.is-inverted) {
-            .slider-dot {
-                background-color: getColor('background');
-            }
-        }
+    &:not(.is-inverted) {
+      .slider-dot {
+        background-color: getColor('background');
+      }
+    }
 
-        .slider-dot {
-            width: 7px;
-            height: 7px;
-            background-color: getColor('grey');
-            border-radius: 100%;
-            margin: 4px;
-            padding: 0;
-            opacity: 1;
+    .slider-dot {
+      width: 7px;
+      height: 7px;
+      background-color: getColor('neutral');
+      border-radius: 100%;
+      margin: 4px;
+      padding: 0;
+      opacity: 1;
 
-            &.is-active {
-                background-color: getColor('alternate');
-            }
-        }
+      &.is-active {
+        background-color: getColor('main');
+      }
     }
+  }
 
-    [data-slider-prev],
-    [data-slider-next] {
-        display: none;
+  [data-slider-prev],
+  [data-slider-next] {
+    display: none;
 
-        @include desktop {
-            box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
-            display: flex;
-            position: absolute;
-            z-index: zindex("tiny");
-            top: 50%;
-            left: 30px;
-            transform: translateY(-50%);
-            cursor: pointer;
-        }
+    @include desktop {
+      box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
+      display: flex;
+      position: absolute;
+      z-index: zindex("tiny");
+      top: 50%;
+      left: 30px;
+      transform: translateY(-50%);
+      cursor: pointer;
     }
+  }
 
-    [data-slider-next] {
-        left: auto;
-        right: 30px;
-    }
+  [data-slider-next] {
+    left: auto;
+    right: 30px;
+  }
 
-    &.is-motionless-desktop {
-        @include desktop {
-            pointer-events: none;
+  &.is-motionless-desktop {
+    @include desktop {
+      pointer-events: none;
 
-            a,
-            .link,
-            .button {
-                pointer-events: auto;
-            }
+      a,
+      .link,
+      .button {
+        pointer-events: auto;
+      }
 
-            [data-slider-page] {
-                min-width: auto;
-            }
-        }
+      [data-slider-page] {
+        min-width: auto;
+      }
     }
+  }
 
-    > .pricing-table {
-        @include mobile {
-            flex-direction: row;
-            flex-wrap: nowrap;
-        }
+  > .pricing-table {
+    @include mobile {
+      flex-direction: row;
+      flex-wrap: nowrap;
     }
+  }
 }