active_frontend 13.3.0 → 14.0.0

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

@@ -0,0 +1,179 @@
+// Table of Contents
+// ==================================================
+// Reset
+// Base
+
+// Reset
+// ==================================================
+a,
+abbr,
+address,
+area,
+article,
+aside,
+audio,
+b,
+bdi,
+bdo,
+blockquote,
+body,
+br,
+button,
+canvas,
+caption,
+cite,
+code,
+col,
+colgroup,
+datalist,
+dd,
+del,
+details,
+dfn,
+dialog,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hr,
+html,
+i,
+iframe,
+img,
+input,
+ins,
+kbd,
+keygen,
+label,
+legend,
+li,
+main,
+map,
+mark,
+menu,
+menuitem,
+meter,
+nav,
+object,
+ol,
+optgroup,
+option,
+output,
+p,
+pre,
+progress,
+q,
+rp,
+rt,
+ruby,
+s,
+samp,
+section,
+select,
+small,
+span,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+textarea,
+tfoot,
+th,
+thead,
+time,
+tr,
+u,
+ul,
+var,
+video,
+wbr {
+  border-color: inherit;
+  color: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-smooth: always;
+  font-style: inherit;
+  font-variant: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: inherit;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+main,
+menu,
+nav,
+section,
+summary { display: block; }
+template,
+[hidden] { display: none; }
+[disabled] {
+  cursor: not-allowed;
+  &:active { pointer-events: none; }
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+// Base
+// ==================================================
+html,
+body {
+  @include overflow-scrolling(touch);
+  @include tap-highlight-color(color(transparent));
+  @include text-size-adjust(100%);
+  height: 100%;
+  width: 100%;
+}
+body {
+  background: color(white);
+  border-color: color(dark-haze);
+  color: color(black);
+  font-family: text-family(sans-serif);
+  font-size: text-size(b);
+  font-variant: normal;
+  font-weight: normal;
+  letter-spacing: 0;
+  line-height: text-line-height(b);
+  text-align: left;
+  text-decoration: none;
+  text-transform: none;
+}
+::-moz-selection {
+  background: color(primary);
+  color: color(white);
+}
+::selection {
+  background: color(primary);
+  color: color(white);
+}

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

@@ -0,0 +1,211 @@
+// Table of Contents
+// ==================================================
+// Reset
+// Table
+// Styles
+// Decorations
+// Alignments
+// Media Queries
+
+// scss-lint:disable NestingDepth
+// scss-lint:disable SelectorDepth
+
+// Reset
+// ==================================================
+table {
+  background: color(trasparent);
+  border-collapse: collapse;
+  border-color: color(dark-haze);
+  border-spacing: 0;
+  max-width: 100%;
+}
+caption,
+thead,
+tfoot { font-weight: text-weight(semibold); }
+caption,
+td,
+th {
+  padding: 6px 10px 5px;
+  vertical-align: middle;
+}
+thead {
+  tr:not(:last-child) {
+    th { text-align: center; }
+  }
+  th {
+    &.sort { cursor: pointer; }
+  }
+}
+
+// Table
+// ==================================================
+.table { width: 100%; }
+
+// Styles
+// ==================================================
+.table-stripe {
+  thead,
+  tfoot {
+    td,
+    th { background: color(light-haze); }
+  }
+  tbody {
+    tr:nth-child(even) {
+      td { background: color(light-haze); }
+    }
+  }
+
+  &.dark {
+    thead,
+    tfoot {
+      td,
+      th { background: color(light-black); }
+    }
+    tbody {
+      tr:nth-child(even) {
+        td { background: color(light-black); }
+      }
+    }
+  }
+  &.light {
+    thead,
+    tfoot {
+      td,
+      th { background: color(haze); }
+    }
+    tbody {
+      tr:nth-child(even) {
+        td { background: color(haze); }
+      }
+    }
+  }
+}
+.table-hover {
+  tbody {
+    tr:hover {
+      td { background: color(haze); }
+    }
+  }
+
+  &.dark {
+    tbody {
+      tr:hover {
+        td { background: background-hover-color(black); }
+      }
+    }
+  }
+  &.light {
+    tbody {
+      tr:hover {
+        td { background: background-hover-color(haze); }
+      }
+    }
+  }
+}
+.table-scroll {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+// Decorations
+// ==================================================
+.table-line,
+.table-encase,
+.table-border {
+  border-collapse: separate;
+
+  td,
+  th {
+    border-top-style: solid;
+    border-top-width: 1px;
+  }
+  thead + tbody,
+  tbody + tfoot {
+    tr:first-child {
+      td { border-top-width: 3px; }
+    }
+  }
+}
+.table-encase,
+.table-border {
+  border-style: solid;
+  border-width: 1px;
+  border-top-width: 0;
+  border-left-width: 0;
+
+  &.dark { border-color: color(dark-black); }
+}
+.table-line {
+  tbody,
+  tfoot {
+    tr:last-child {
+      td {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+      }
+    }
+  }
+  tbody + tfoot {
+    tr:first-child {
+      td { border-top-width: 2px; }
+    }
+  }
+}
+.table-encase {
+  tr {
+    td,
+    th {
+      &:first-child {
+        border-left-style: solid;
+        border-left-width: 1px;
+      }
+    }
+  }
+}
+.table-border {
+  td,
+  th {
+    border-left-style: solid;
+    border-left-width: 1px;
+  }
+}
+
+// Alignments
+// ==================================================
+@each $name in bottom, middle, top {
+  .table-vertical-align-#{$name} {
+    td,
+    th { vertical-align: $name; }
+  }
+}
+
+// Media Queries
+// ==================================================
+@media only screen and (max-width: 960px) {
+  .table-responsive {
+    @include overflow-scrolling(touch);
+    background: color(transparent);
+    border: 2px solid color(dark-haze);
+    max-height: 300px;
+    overflow: scroll;
+
+    td,
+    th { white-space: nowrap; }
+
+    .table-line,
+    .table-encase,
+    .table-border {
+      caption {
+        border-style: solid;
+        border-width: 1px;
+        border-bottom-width: 2px;
+      }
+    }
+
+    .table-line {
+      border-left: 1px solid;
+      border-right: 1px solid;
+      border-color: inherit;
+    }
+  }
+}

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

@@ -0,0 +1,204 @@
+// Table of Contents
+// ==================================================
+// Font-face
+// Reset
+// Whitespace
+// Weights
+// Variants
+// Transformations
+// Styles
+// Sizes
+// Modifiers
+// Line Heights
+// Letter Spacing
+// Indents
+// Families
+// Decorations
+// Colors
+// Alignments
+
+// Font-face
+// ==================================================
+@if index(text-family(sans-serif), 'Fakt Pro') {
+  @each $name, $weight in $font-weights {
+    @font-face {
+      font-display: swap;
+      font-family: 'Fakt Pro';
+      font-style: normal;
+      font-weight: $weight;
+      src: url(font-path('fakt-pro/fakt-pro-#{$name}.woff')) format('woff');
+    }
+  }
+}
+@if index(text-family(sans-serif), 'Fakt Soft Pro') {
+  @each $name, $weight in $font-weights {
+    @font-face {
+      font-display: swap;
+      font-family: 'Fakt Soft Pro';
+      font-style: normal;
+      font-weight: $weight;
+      src: url(font-path('fakt-soft-pro/fakt-soft-pro-#{$name}.woff')) format('woff');
+    }
+  }
+}
+
+// Reset
+// ==================================================
+$font-headings: h1, h2, h3, h4, h5, h6;
+@each $heading in $font-headings {
+  $i: index($font-headings, $heading);
+  $name: nth(map-keys($font-sizes), $i);
+
+  #{$heading} {
+    font-size: text-size($name);
+    font-weight: text-weight(semibold);
+    line-height: text-line-height($name);
+    margin-bottom: #{30 - (5 * $i)}px;
+  }
+}
+abbr {
+  border-bottom: 1px dotted;
+  cursor: help;
+}
+blockquote {
+  border-left: 3px solid color(primary);
+  padding: 10px 0 10px 20px;
+
+  > cite {
+    display: block;
+    margin-top: 5px;
+  }
+}
+cite,
+small {
+  font-size: text-size(xs);
+  line-height: text-line-height(xs);
+}
+del,
+s { text-decoration: line-through; }
+b { font-weight: text-weight(bold); }
+address,
+dfn,
+i,
+em { font-style: italic; }
+em,
+mark,
+strong { font-weight: text-weight(semibold); }
+ins,
+u { text-decoration: underline; }
+mark {
+  background: color(transparent);
+  border-bottom: 3px solid color(yellow);
+}
+p { margin-bottom: 20px; }
+q {
+  &::before,
+  &::after { content: ''; }
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+sub { vertical-align: text-bottom; }
+sup { vertical-align: text-top; }
+
+// Whitespace
+// ==================================================
+@each $name in normal, nowrap, pre, pre-line, pre-wrap {
+  .text-whitespace-#{$name} { white-space: $name; }
+}
+
+// Weights
+// ==================================================
+@each $name, $weight in $font-weights {
+  .text-weight-#{$name} { font-weight: $weight; }
+}
+
+// Variants
+// ==================================================
+@each $name in normal, small-caps {
+  .text-variant-#{$name} { font-variant: $name; }
+}
+
+// Transformations
+// ==================================================
+@each $name in capitalize, none, lowercase, uppercase {
+  .text-transform-#{$name} { text-transform: $name; }
+}
+
+// Styles
+// ==================================================
+@each $name in italic, normal, oblique {
+  .text-style-#{$name} { font-style: $name; }
+}
+
+// Sizes
+// ==================================================
+@each $name, $size in $font-sizes {
+  .text-size-#{$name} {
+    font-size: text-size($name);
+    line-height: text-line-height($name);
+  }
+}
+
+// Modifiers
+// ==================================================
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+// Line Heights
+// ==================================================
+@each $name, $size in $font-line-heights {
+  .text-line-height-#{$name} { line-height: $size; }
+}
+
+// Letter Spacing
+// ==================================================
+@each $name, $space in $font-spaces {
+  .text-letter-spacing-#{$name} { letter-spacing: $space; }
+}
+
+// Indents
+// ==================================================
+@each $name, $indent in $font-indents {
+  .text-indent-#{$name} { text-indent: $indent; }
+}
+
+// Families
+// ==================================================
+@each $name, $family in $font-families {
+  .text-family-#{$name} { font-family: $family; }
+}
+
+// Decorations
+// ==================================================
+@each $name in line-through, none, overline, underline {
+  .text-decoration-#{$name} { text-decoration: $name; }
+}
+
+// Colors
+// ==================================================
+@each $name, $color in $colors {
+  .text-color-#{$name} { color: $color; }
+  .text-color-hover-#{$name} {
+    &:hover { color: $color; }
+  }
+  .text-color-focus-#{$name} {
+    &:focus { color: $color; }
+  }
+  .text-color-active-#{$name} {
+    &:active { color: $color; }
+  }
+}
+
+// Alignments
+// ==================================================
+@each $name in center, justify, left, right {
+  .text-align-#{$name} { text-align: $name; }
+}