active_frontend 15.1.6 → 16.0.0

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

@@ -16,7 +16,7 @@
 table {
   background: color(trasparent);
   border-collapse: collapse;
-  border-color: color(dark-haze);
+  border-color: color(haze);
   border-spacing: 0;
 }
 caption,
@@ -24,9 +24,10 @@ thead,
 tfoot { font-weight: text-weight(semibold); }
 caption,
 td,
-th { vertical-align: middle; }
-td { padding: 8px; }
-th { padding: 10px 10px 8px; }
+th {
+  padding: 8px;
+  vertical-align: middle;
+}
 thead {
   tr:not(:last-child) {
     th { text-align: center; }
@@ -52,7 +53,7 @@ thead {
   &.dark {
     tbody {
       tr:nth-child(odd) {
-        td { background: color(light-black); }
+        td { background: color(light-slate); }
       }
     }
   }
@@ -68,14 +69,14 @@ thead {
   .table-hover {
     tbody {
       tr:hover {
-        td { background: color(haze); }
+        td { background: background-hover-color(light-haze); }
       }
     }
 
     &.dark {
       tbody {
         tr:hover {
-          td { background: background-hover-color(black); }
+          td { background: background-hover-color(slate); }
         }
       }
     }
@@ -90,14 +91,14 @@ thead {
   .table-highlight {
     tbody {
       tr {
-        td:hover { background: color(haze); }
+        td:hover { background: background-hover-color(light-haze); }
       }
     }
 
     &.dark {
       tbody {
         tr {
-          td:hover { background: background-hover-color(black); }
+          td:hover { background: background-hover-color(slate); }
         }
       }
     }
@@ -161,7 +162,7 @@ thead {
     th:first-child { border-left-width: 0; }
   }
 
-  &.dark { border-color: color(dark-black); }
+  &.dark { border-color: color(dark-slate); }
 }
 .table-line {
   tbody,
@@ -213,11 +214,13 @@ thead {
   .table-responsive {
     @include overflow-scrolling(touch);
     background: color(transparent);
-    border: 1px solid color(dark-haze);
+    border: 1px solid color(haze);
     border-radius: border-radius(b);
     max-height: 300px;
     overflow: scroll;
 
+    &.dark { border-color: color(dark-slate); }
+
     td,
     th { white-space: nowrap; }
     tr {
@@ -236,7 +239,6 @@ thead {
       caption {
         border-bottom-style: solid;
         border-bottom-width: 3px;
-        padding: 10px 10px 8px;
       }
     }
     .table-line {

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

@@ -62,7 +62,7 @@ ins,
 u { text-decoration: underline; }
 mark {
   background: color(transparent);
-  border-bottom: 3px solid color(secondary);
+  border-bottom: 3px solid color(yellow);
 }
 p { margin-bottom: 20px; }
 q {
@@ -154,12 +154,31 @@ sup { vertical-align: text-top; }
 // ==================================================
 @each $name in line-through, none, overline, underline {
   .text-decoration-#{$name} { text-decoration: $name; }
+
+  @if ($pseudo-elements) {
+    .text-decoration-hover-#{$name} {
+      &:hover { text-decoration: $name; }
+    }
+    .text-decoration-focus-#{$name} {
+      &:focus { text-decoration: $name; }
+    }
+    .text-decoration-active-#{$name} {
+      &:active { text-decoration: $name; }
+    }
+  }
 }
 
 // Colors
 // ==================================================
 @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} {
       &:hover { color: $color; }

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

@@ -8,7 +8,7 @@
 // ==================================================
 .ad {
   background: color(light-haze);
-  border: 1px solid color(dark-haze);
+  border: 1px solid color(haze);
   box-sizing: border-box;
   display: block;
   height: 220px;

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

@@ -11,9 +11,9 @@
   border: 0;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: dark-color(light-haze);
+  border-color: color(haze);
   box-sizing: border-box;
-  color: color(black);
+  color: color(slate);
   display: block;
   padding: 13px 20px;
   width: 100%;
@@ -42,7 +42,7 @@
 @each $name, $color in $colors {
   .alert-color-#{$name} {
     background: color($name);
-    border-color: dark-color($name);
+    border-color: darker-color($name);
     color: text-color-on($name);
 
     &.alert-outline {

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

@@ -20,7 +20,7 @@
     padding: 0;
     vertical-align: top;
   }
-  th.calendar-widget-header { padding: 6px 0 5px; }
+  th.calendar-widget-header { padding: 6px 0; }
   thead {
     tr:first-child {
       th:first-child { border-top-left-radius: border-radius(b); }
@@ -90,7 +90,7 @@
   width: 100%;
 }
 .calendar-widget-header,
-.calendar-widget-content { border: 1px solid color(dark-haze); }
+.calendar-widget-content { border: 1px solid color(haze); }
 .calendar-state-highlight { background: color(light-haze); }
 .calendar-cell-overlay {
   background: color(primary);
@@ -99,17 +99,17 @@
 .calendar-event {
   @include transition(none);
   background: color(primary);
-  border: 1px solid darker-color(primary);
+  border: 1px solid color(primary);
   border-radius: border-radius(b);
-  color: color(white);
+  color: text-color-on(primary);
   cursor: default;
   font-size: text-size(s);
-  padding: 0 3px 1px;
+  padding: 1px 3px 0;
 
   @each $name, $color in map-keys($colors) {
     &.calendar-event-color-#{$name} {
       background: color($name);
-      border-color: darker-color($name);
+      border-color: color($name);
       color: text-color-on($name);
     }
   }

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

@@ -8,7 +8,7 @@
 // ==================================================
 .card {
   border: 1px solid;
-  border-color: color(dark-haze);
+  border-color: color(haze);
   border-radius: border-radius(b);
 
   > img {
@@ -25,19 +25,20 @@
     border-width: 0;
   }
 }
-.card-header,
 .card-body,
 .card-footer { padding: 10px 15px; }
 .card-header {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   font-weight: text-weight(semibold);
+  padding: 9px 15px 11px;
 }
 .card-wizard {
   border-collapse: separate;
   box-sizing: border-box;
   display: table;
   font-size: text-size(s);
+  font-weight: text-weight(normal);
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -48,7 +49,7 @@
   > a,
   > li {
     display: table-cell;
-    padding: 8px 0 10px;
+    padding: 9px 0;
     text-align: center;
     vertical-align: middle;
     width: 1%;
@@ -59,7 +60,7 @@
     }
 
     &.current {
-      background: color(haze);
+      background: background-hover-color(light-haze);
       color: color(primary);
     }
     &.completed {
@@ -71,14 +72,14 @@
   &.dark {
     > a,
     > li {
-      &.current { background: color(light-black); }
-      &.completed { background: color(black); }
+      &.current { background: background-hover-color(slate); }
+      &.completed { background: color(slate); }
     }
   }
   &.light {
     > a,
     > li {
-      &.current { background: color(dark-haze); }
+      &.current { background: background-hover-color(haze); }
       &.completed { background: color(haze); }
     }
   }
@@ -95,7 +96,25 @@
     border-top-width: 1px;
   }
 }
-.card-footer {
+.card-footer,
+.card-actions {
   border-top-style: solid;
   border-top-width: 1px;
 }
+.card-actions {
+  display: table;
+  width: 100%;
+
+  a {
+    display: table-cell;
+    line-height: 1;
+    padding: 15px 0;
+    text-align: center;
+    width: 1%;
+
+    &:not(:last-child) {
+      border-right-style: solid;
+      border-right-width: 1px;
+    }
+  }
+}

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

@@ -14,7 +14,7 @@
 
   &.dark { border-color: color(white); }
   &.light,
-  &.white { border-color: color(black); }
+  &.white { border-color: color(slate); }
 }
 .carousel-inner {
   overflow: inherit;

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

@@ -29,6 +29,7 @@
        &.choicepicker-fuzzy { padding: 10px 10px 5px; }
 
        > label {
+         cursor: pointer;
          font-weight: text-weight(normal);
          margin: 0 0 0 10px;
        }

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

@@ -9,7 +9,7 @@
 // Cohort
 // ==================================================
 .cohort-container {
-  border: 1px solid color(dark-haze);
+  border: 1px solid color(haze);
   border-radius: border-radius(b);
 }
 .cohort-title {

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

@@ -31,10 +31,10 @@
       }
     }
     td {
-      color: color(white);
+      color: color(dark-haze);
 
       &.today {
-        background: color(light-black);
+        background: color(light-slate);
         color: color(primary);
       }
       @if ($pseudo-elements) {
@@ -49,7 +49,7 @@
           &:active,
           &.active {
             background: color(primary);
-            color: color(white);
+            color: text-color-on(primary);
           }
         }
         &.old,
@@ -57,7 +57,7 @@
           color: color(light-gray);
 
           &:hover,
-          &:focus { color: color(white); }
+          &:focus { color: color(dark-haze); }
         }
         &.disabled {
           background: color(transparent) !important;
@@ -87,7 +87,7 @@
           &.active,
           &.focused {
             background: color(primary);
-            color: color(white);
+            color: text-color-on(primary);
           }
           &.disabled {
             background: color(transparent) !important;

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

@@ -10,10 +10,10 @@
 // ==================================================
 .dropmenu {
   @include transition(all 0.09s ease-in-out);
-  background: color(black);
-  border: 1px solid color(dark-black);
+  background: color(slate);
+  border: 1px solid color(dark-slate);
   border-radius: border-radius(b);
-  color: color(gray);
+  color: color(dark-haze);
   display: none;
   float: left;
   font-size: text-size(b);
@@ -56,7 +56,7 @@
     }
     &::after {
       border-bottom: 6px solid;
-      border-bottom-color: color(black);
+      border-bottom-color: color(slate);
       border-left: 6px solid color(transparent);
       border-right: 6px solid color(transparent);
       left: 10px;
@@ -140,7 +140,7 @@
         left: 9px;
       }
       &::after {
-        border-top: 6px solid color(black);
+        border-top: 6px solid color(slate);
         bottom: -6px;
         left: 10px;
       }

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

@@ -25,7 +25,7 @@
 
   &.white {
     background: transparentize(color(white), 0.15);
-    color: color(black);
+    color: color(slate);
   }
 
   > i {

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

@@ -5,7 +5,7 @@
 // Footer
 // ==================================================
 .footer {
-  border-top: 1px solid color(dark-haze);
+  border-top: 1px solid color(haze);
   margin-top: 40px;
   padding: 40px 0 20px;
 }

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

@@ -8,9 +8,10 @@
 // Header
 // ==================================================
 .header {
-  background: color(white);
-  border-bottom: 1px solid color(dark-haze);
+  background: color(transparent);
+  border-bottom: 1px solid color(transparent);
   box-sizing: border-box;
+  color: color(white);
   height: 76px;
   line-height: 1;
   padding: 18px 0;

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

@@ -11,13 +11,13 @@
   background: color(haze);
   border: 1px solid color(haze);
   border-radius: border-radius(b);
-  color: color(black);
+  color: color(slate);
   display: inline-block;
   font-size: text-size(s);
   font-weight: text-weight(semibold);
   line-height: 1;
   overflow: hidden;
-  padding: 6px 10px 7px;
+  padding: 6px 10px;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
@@ -58,6 +58,8 @@
       &.label-outline { border-color: color($name); }
     }
   }
+  .badge-banner-color-#{$name},
+  .label-banner-color-#{$name} { border-left-color: color($name); }
 }
 
 // Sizes
@@ -78,12 +80,12 @@
 .badge-size-m { min-width: 16px; }
 .badge-size-l { padding: 15px; }
 .badge-size-m { padding: 10px; }
-.label-size-l { padding: 13px 20px; }
+.label-size-l { padding: 15px 20px; }
 .label-size-m { padding: 10px 15px; }
 .badge-size-s,
 .label-size-s {
   font-size: text-size(xs);
-  padding: 4px 8px 5px;
+  padding: 4px 8px;
 
   > img,
   > svg {
@@ -93,7 +95,7 @@
 }
 .badge-size-s {
   min-width: 0;
-  padding: 4px 6px;
+  padding: 4px 6px 4px 7px;
 }
 
 // Styles
@@ -107,3 +109,5 @@
 }
 .badge-outline,
 .label-outline { background: color(transparent); }
+.badge-banner,
+.label-banner { border-left-width: 3px; }