active_frontend 16.4.1 → 17.0.0

data/vendor/assets/stylesheets/blocks/_typography.scss

@@ -35,7 +35,7 @@ abbr {
   cursor: help;
 }
 blockquote {
-  border-left: 3px solid color(primary);
+  border-left: 3.5px solid color(primary);
   padding: 10px 0 10px 20px;
 
   > cite {
@@ -170,14 +170,19 @@ sup { vertical-align: text-top; }
 
 // Colors
 // ==================================================
+@each $name, $color in $colors-brand {
+  .text-color-#{$name}-100 { color: color-100($name); }
+  .text-color-#{$name}-200 { color: color-200($name); }
+  .text-color-#{$name}-300 { color: color-300($name); }
+  .text-color-#{$name}-400 { color: color-400($name); }
+  .text-color-#{$name}-500 { color: color-500($name); }
+  .text-color-#{$name}-600 { color: color-600($name); }
+  .text-color-#{$name}-700 { color: color-700($name); }
+  .text-color-#{$name}-800 { color: color-800($name); }
+  .text-color-#{$name}-900 { color: color-900($name); }
+}
 @each $name, $color in $colors {
-  .text-color-tintiest-#{$name} { color: tintiest-color($name); }
-  .text-color-tint-#{$name} { color: tint-color($name); }
-  .text-color-tintish-#{$name} { color: tintish-color($name); }
   .text-color-#{$name} { color: $color; }
-  .text-color-shadeish-#{$name} { color: shadeish-color($name); }
-  .text-color-shade-#{$name} { color: shade-color($name); }
-  .text-color-shadiest-#{$name} { color: shadiest-color($name); }
 
   @if ($pseudo-elements) {
     .text-color-hover-#{$name} {

data/vendor/assets/stylesheets/components/_alert.scss

@@ -3,6 +3,7 @@
 // Alert
 // Colors
 // Styles
+// Media Queries
 
 // Alert
 // ==================================================
@@ -11,9 +12,9 @@
   border: 0;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: color(haze);
+  border-color: color(light-haze);
   box-sizing: border-box;
-  color: color(slate);
+  color: color(black);
   display: block;
   padding: 13px 20px;
   width: 100%;
@@ -29,12 +30,17 @@
     position: absolute;
     width: inherit;
   }
+  &.fixed,
+  &.floating { position: fixed; }
   &.fixed {
     left: 0;
-    position: fixed;
-    right: 0;
     top: 0;
   }
+  &.floating {
+    left: 160px;
+    top: 49px;
+    width: calc(100% - 320px);
+  }
 }
 
 // Colors
@@ -42,7 +48,7 @@
 @each $name, $color in $colors {
   .alert-color-#{$name} {
     background: color($name);
-    border-color: darker-color($name);
+    border-color: color($name);
     color: text-color-on($name);
 
     &.alert-outline {
@@ -59,3 +65,15 @@
   border-width: 1px;
 }
 .alert-outline { background: color(transparent); }
+
+// Media Queries
+// ==================================================
+@media only screen and (max-width: breakpoint-max-width(s)) {
+  .alert {
+    &.floating {
+      left: 10px;
+      top: 26px;
+      width: calc(100% - 20px);
+    }
+  }
+}

data/vendor/assets/stylesheets/components/_card.scss

@@ -31,7 +31,7 @@
       width: 1%;
 
       > a {
-        padding: 15px 0 14px;
+        padding: 16px 0;
         text-align: center;
       }
     }
@@ -44,19 +44,21 @@
     border-width: 0;
   }
 }
+.card-header,
 .card-body,
-.card-footer { padding: 10px 15px; }
+.card-footer { padding: 12px 20px; }
 .card-header {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   font-weight: text-weight(semibold);
-  padding: 9px 15px 11px;
+  padding-bottom: 13px;
+  padding-top: 11px;
 }
 .card-wizard {
   border-collapse: separate;
   box-sizing: border-box;
   display: table;
-  font-size: text-size(s);
+  font-size: text-size(xs);
   font-weight: text-weight(normal);
   list-style-type: none;
   margin: 0;
@@ -67,8 +69,10 @@
 
   > a,
   > li {
+    background: color(light-haze);
+    color: color(gray);
     display: table-cell;
-    padding: 9px 0;
+    padding: 2px 0;
     text-align: center;
     vertical-align: middle;
     width: 1%;
@@ -77,29 +81,23 @@
       border-left-style: solid;
       border-left-width: 1px;
     }
-
-    &.current {
-      background: background-hover-color(light-haze);
-      color: color(primary);
-    }
-    &.completed {
-      background: color(light-haze);
-      color: color(gray);
-    }
+    &.current,
+    &.completed { background: color(white); }
+    &.current { color: color(primary); }
   }
 
   &.dark {
     > a,
     > li {
-      &.current { background: background-hover-color(slate); }
-      &.completed { background: color(slate); }
+      &.current,
+      &.completed { background: color(light-slate); }
     }
   }
   &.light {
     > a,
     > li {
-      &.current { background: background-hover-color(haze); }
-      &.completed { background: color(haze); }
+      &.current,
+      &.completed { background: color(dark-haze); }
     }
   }
 }
@@ -126,8 +124,9 @@
 
   a {
     display: table-cell;
+    font-size: text-size(b);
     line-height: 1;
-    padding: 15px 0;
+    padding: 17px 0;
     text-align: center;
     width: 1%;
 

data/vendor/assets/stylesheets/components/_carousel.scss

@@ -96,7 +96,7 @@
   z-index: 15;
 
   li {
-    border-radius: border-radius(xl);
+    border-radius: border-radius(xxl);
     border-style: solid;
     border-width: 2px;
     cursor: pointer;

data/vendor/assets/stylesheets/components/_cohort.scss

@@ -22,7 +22,7 @@
   text-align: center;
 }
 .cohort-table {
-  background: light-color(light-haze);
+  background: color(light-haze);
   border-spacing: 0;
   border-collapse: collapse;
   font-size: text-size(b);
@@ -92,13 +92,13 @@
 .cohort-highish,
 .cohort-high,
 .cohort-highest { color: color(white); }
-.cohort-lowest { background: tintiest-color(primary); }
-.cohort-low { background: tint-color(primary); }
-.cohort-lowish { background: tintish-color(primary); }
+.cohort-lowest { background: color-100(primary); }
+.cohort-low { background: color-200(primary); }
+.cohort-lowish { background: color-300(primary); }
 .cohort-medium { background: color(primary); }
-.cohort-highish { background: shadeish-color(primary); }
-.cohort-high { background: shade-color(primary); }
-.cohort-highest { background: shadiest-color(primary); }
+.cohort-highish { background: color-700(primary); }
+.cohort-high { background: color-800(primary); }
+.cohort-highest { background: color-900(primary); }
 
 // Media Queries
 // ==================================================

data/vendor/assets/stylesheets/components/_feedback.scss

@@ -5,7 +5,7 @@
 // Feedback
 // ==================================================
 .feedback {
-  background: transparentize(color(black), 0.15);
+  background: color-transparentize(slate, 0.15);
   border-radius: border-radius(b);
   bottom: 0;
   color: color(white);
@@ -24,8 +24,8 @@
   z-index: 2040;
 
   &.white {
-    background: transparentize(color(white), 0.15);
-    color: color(slate);
+    background: color-transparentize(white, 0.15);
+    color: color(black);
   }
 
   > i {

data/vendor/assets/stylesheets/components/_header.scss

@@ -97,7 +97,7 @@
 
       .indicator {
         background: color(red);
-        border-radius: border-radius(xl);
+        border-radius: border-radius(xxl);
         height: 5px;
         margin-left: 17px;
         position: absolute;

data/vendor/assets/stylesheets/components/_label_and_badge.scss

@@ -11,7 +11,7 @@
   background: color(haze);
   border: 1px solid color(haze);
   border-radius: border-radius(b);
-  color: color(slate);
+  color: color(black);
   display: inline-block;
   font-size: text-size(s);
   font-weight: text-weight(semibold);
@@ -32,7 +32,7 @@
   }
 }
 .badge {
-  border-radius: border-radius(xl);
+  border-radius: border-radius(xxl);
   min-width: 14px;
   padding: 5px 6px 7px;
 }
@@ -50,8 +50,8 @@
     &.label-outline { color: color($name); }
     &.badge-color-tint,
     &.label-color-tint {
-      background: tint($name, 80%);
-      border-color: tint($name, 80%);
+      background: color-50($name);
+      border-color: color-50($name);
       color: color($name);
 
       &.badge-outline,

data/vendor/assets/stylesheets/components/_milestone.scss

@@ -21,7 +21,7 @@
     > [class*=' icon-'],
     > [class^='icon-weather-'],
     > [class*=' icon-weather-'] {
-      border-radius: border-radius(xl);
+      border-radius: border-radius(xxl);
       box-sizing: border-box;
       float: left;
       font-size: text-size(xs);

data/vendor/assets/stylesheets/components/_modal.scss

@@ -117,7 +117,7 @@
 // Backdrop
 // ==================================================
 .modal-backdrop {
-  background: transparentize(color(black), 0.15);
+  background: color-transparentize(slate, 0.15);
   bottom: 0;
   height: 100%;
   left: 0;
@@ -132,7 +132,7 @@
     &.in { opacity: 1; }
   }
 
-  &.white { background: transparentize(color(white), 0.15); }
+  &.white { background: color-transparentize(white, 0.15); }
 }
 
 // Media Queries

data/vendor/assets/stylesheets/components/_nav_and_tab.scss

@@ -31,7 +31,7 @@
     &:last-child { border-bottom: 0; }
 
     > a {
-      padding: 13px 15px;
+      padding: 15px 20px;
 
       &:active { color: color(primary); }
     }
@@ -46,21 +46,21 @@
       > li {
         > a {
           display: block;
-          padding: 7px 15px;
+          padding: 12px 20px;
         }
 
         &:first-child {
-          > a { padding-top: 15px; }
+          > a { padding-top: 19px; }
         }
         &:last-child {
-          > a { padding-bottom: 13px; }
+          > a { padding-bottom: 17px; }
         }
       }
     }
 
     &.nav-header {
       background: color(light-haze);
-      padding: 13px 15px;
+      padding: 17px 20px;
     }
   }
 
@@ -88,7 +88,7 @@
   .divider {
     border-bottom-style: solid;
     border-bottom-width: 1px;
-    margin: 5px 15px;
+    margin: 5px 20px;
     overflow: hidden;
   }
 }
@@ -212,7 +212,7 @@
     > a,
     &.nav-tab {
       border-bottom: 2px solid color(transparent);
-      padding-bottom: 15px;
+      padding-bottom: 20px;
 
       @if ($pseudo-elements) {
         &:hover,

data/vendor/assets/stylesheets/components/_navbar.scss

@@ -37,7 +37,7 @@
       &:hover,
       &.active,
       &:active,
-      &:focus { background: darkish-color(primary); }
+      &:focus { background: color-600(primary); }
     }
 
     > i {

data/vendor/assets/stylesheets/components/_pagination.scss

@@ -7,7 +7,7 @@
 // Pagination
 // ==================================================
 .pagination {
-  color: color(slate);
+  color: color(black);
   list-style: none;
   padding: 0;
 
@@ -20,7 +20,7 @@
 
     a,
     &.active {
-      border-radius: border-radius(xl);
+      border-radius: border-radius(xxl);
       display: inline-block;
       min-width: 8px;
       padding: 8px 12px;
@@ -32,8 +32,8 @@
 
       @if ($pseudo-elements) {
         &:hover,
-        &:focus { background: darkish-color(haze); }
-        &:active { background: lightish-color(haze); }
+        &:active,
+        &:focus { background: color(dark-haze); }
       }
     }
 
@@ -72,8 +72,8 @@
 
         @if ($pseudo-elements) {
           &:hover,
-          &:focus { background: darkish-color(light-slate); }
-          &:active { background: lightish-color(light-slate); }
+          &:active,
+          &:focus { background: color(dark-slate); }
         }
       }
     }
@@ -85,8 +85,8 @@
 
         @if ($pseudo-elements) {
           &:hover,
-          &:focus { background: darkish-color(dark-haze); }
-          &:active { background: lightish-color(dark-haze); }
+          &:active,
+          &:focus { background: color(light-haze); }
         }
       }
     }

data/vendor/assets/stylesheets/components/_placeholder.scss

@@ -5,7 +5,6 @@
 // Placeholder
 // ==================================================
 .placeholder {
-  color: color(gray);
   text-align: center;
   width: 100%;
 
@@ -15,7 +14,6 @@
     line-height: 1;
     margin-bottom: 20px;
   }
-
   > img {
     max-width: 280px;
     margin: 0 auto 20px;

data/vendor/assets/stylesheets/components/_popover.scss

@@ -10,7 +10,7 @@
   background: color(white);
   border: 1px solid color(haze);
   border-radius: border-radius(b);
-  color: color(slate);
+  color: color(black);
   display: none;
   left: 0;
   position: absolute;
@@ -160,6 +160,8 @@
   border-top-right-radius: border-radius(b);
   display: block;
   font-weight: text-weight(semibold);
+  padding-bottom: 11px;
+  padding-top: 9px;
 }
 .popover-nav {
   border-top-style: solid;