active_frontend 13.3.0 → 14.0.0

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

@@ -0,0 +1,15 @@
+// Table of Contents
+// ==================================================
+// Anchor
+
+// Anchor
+// ==================================================
+a {
+  @include text-decoration-skip(objects);
+  @include transition(all 0.3s ease-in-out);
+  background: color(transparent);
+  color: inherit;
+  outline-width: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+}

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

@@ -0,0 +1,278 @@
+// Table of Contents
+// ==================================================
+// Button
+// Colors
+// Styles
+// Sizes
+// Groups
+// Data Toggles
+// Media Queries
+
+// scss-lint:disable NestingDepth
+
+// Button
+// ==================================================
+.btn {
+  @include appearance(none);
+  @include transition(all 0.3s ease-in-out);
+  background: color(haze);
+  border: 1px solid darker-color(haze);
+  border-radius: border-radius(b);
+  box-sizing: border-box;
+  color: color(black);
+  cursor: pointer;
+  display: inline-block;
+  font-size: text-size(b);
+  font-weight: text-weight(semibold);
+  line-height: 1;
+  padding: 11px 20px;
+  text-align: center;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:hover,
+  &.active,
+  &:focus { background: darkish-color(haze); }
+  &:active,
+  &.disabled,
+  &[disabled] { background: lightish-color(haze); }
+
+  .badge,
+  .label {
+    font-size: text-size(xxxs);
+    padding: 2px 1px 1px;
+    min-width: 9px;
+    vertical-align: top;
+  }
+}
+
+// Colors
+// ==================================================
+@each $name, $color in map-keys($colors) {
+  .btn-color-#{$name} {
+    background: color($name);
+    border-color: darker-color($name);
+    color: text-color-on($name);
+
+    &.btn-link,
+    &.btn-outline { color: color($name); }
+    &.btn-link {
+      &:hover,
+      &.active,
+      &:focus { color: darkish-color($name); }
+      &:active,
+      &.disabled,
+      &[disabled] { color: lightish-color($name); }
+    }
+    &.btn-outline {
+      border-color: color($name);
+
+      &:hover,
+      &:active,
+      &.active,
+      &:focus,
+      &.disabled,
+      &[disabled] {
+        border-color: darker-color($name);
+        color: text-color-on($name);
+      }
+    }
+
+    &:hover,
+    &.active,
+    &:focus { background: darkish-color($name); }
+    &:active,
+    &.disabled,
+    &[disabled] { background: lightish-color($name); }
+  }
+}
+
+// Styles
+// ==================================================
+.btn-link,
+.btn-outline { background: color(transparent); }
+.btn-link {
+  border-color: color(transparent);
+  border-radius: 0;
+  padding: 0;
+
+  &:hover,
+  &:active,
+  &.active,
+  &:focus,
+  &.disabled,
+  &[disabled] { background: inherit; }
+}
+.btn-block {
+  display: block;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+// Sizes
+// ==================================================
+.btn-size-l,
+.btn-size-m { font-size: text-size(m); }
+.btn-size-l { padding: 19px 30px 20px; }
+.btn-size-m { padding: 15px 25px 16px; }
+.btn-size-s {
+  font-size: text-size(s);
+  padding: 7px 15px 8px;
+}
+.btn-icon {
+  min-width: 42px;
+  padding: 11px 0;
+
+  &.btn-size-l,
+  &.btn-size-m { font-size: text-size(l); }
+  &.btn-size-l {
+    min-width: 60px;
+    padding: 18px 0;
+  }
+  &.btn-size-m {
+    min-width: 52px;
+    padding: 14px 0;
+  }
+  &.btn-size-s {
+    min-width: 32px;
+    padding: 7px 0 8px;
+  }
+}
+
+// Groups
+// ==================================================
+.btn-group {
+  display: inline-block;
+  font-size: 0;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+
+  > .btn {
+    border-radius: 0;
+    margin-left: -1px;
+    position: relative;
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus { z-index: 2; }
+    &:first-child {
+      border-bottom-left-radius: border-radius(b);
+      border-top-left-radius: border-radius(b);
+      margin-left: 0;
+    }
+    &:last-child,
+    &.dropdown-toggle {
+      border-bottom-right-radius: border-radius(b);
+      border-top-right-radius: border-radius(b);
+    }
+  }
+
+  + .btn-group { margin-left: 5px; }
+  &.pull-right + .btn-group.pull-right {
+    margin-right: 10px;
+    margin-left: 0;
+  }
+}
+.btn-group-vertical {
+  > .btn {
+    display: block;
+    margin-left: 0;
+    margin-top: -1px;
+    width: 100%;
+
+    &:first-child {
+      border-radius: 0;
+      border-top-right-radius: border-radius(b);
+      border-top-left-radius: border-radius(b);
+      margin-top: 0;
+    }
+    &:last-child {
+      border-radius: 0;
+      border-bottom-right-radius: border-radius(b);
+      border-bottom-left-radius: border-radius(b);
+    }
+  }
+}
+.btn-group-block {
+  border-collapse: separate;
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+
+  > .btn {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &:not(.btn-group-vertical) {
+    > .btn {
+      border-right-width: 0;
+      display: table-cell;
+      width: 1%;
+
+      &:last-child { border-right-width: 1px; }
+    }
+  }
+}
+
+// Data Toggles
+// ==================================================
+[data-toggle='buttons'] {
+  .btn {
+    input[type='checkbox'],
+    input[type='radio'] {
+      opacity: 0;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+}
+
+// Media Queries
+// ==================================================
+@media only screen and (max-width: 767px) {
+  .btn-group-responsive {
+    > .btn {
+      border-radius: 0;
+      display: block;
+      margin-left: 0;
+      margin-top: -1px;
+      width: 100%;
+
+      &:first-child {
+        border-top-right-radius: border-radius(b);
+        border-top-left-radius: border-radius(b);
+        margin-left: 0;
+      }
+      &:last-child {
+        border-bottom-right-radius: border-radius(b);
+        border-bottom-left-radius: border-radius(b);
+      }
+    }
+
+    &.btn-group-vertical {
+      > .btn {
+        display: inline-block;
+        margin-left: -1px;
+        margin-top: 0;
+        max-width: initial;
+        width: initial;
+
+        &:first-child {
+          border-bottom-left-radius: border-radius(b);
+          border-top-right-radius: 0;
+          border-top-left-radius: border-radius(b);
+        }
+        &:last-child {
+          border-bottom-right-radius: border-radius(b);
+          border-bottom-left-radius: 0;
+          border-top-right-radius: border-radius(b);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,144 @@
+// Table of Contents
+// ==================================================
+// Reset
+// Pygments
+
+// scss-lint:disable MergeableSelector
+
+// Reset
+// ==================================================
+code,
+kbd,
+pre,
+samp {
+  background: color(light-haze);
+  border: 1px solid color(dark-haze);
+  border-radius: border-radius(b);
+  color: color(black);
+  font-family: text-family(monospace);
+  font-size: text-size(xs);
+  line-height: text-line-height(xs);
+}
+code,
+kbd { padding: 3px 7px; }
+code {
+  color: color(red);
+
+  &.dark,
+  &.light,
+  &.white { color: color(red); }
+}
+kbd {
+  border-bottom-width: 3px;
+  box-shadow: inset 0 0 0 2px color(white);
+  padding-bottom: 3px;
+  text-transform: uppercase;
+
+  &.dark { box-shadow: inset 0 0 0 2px color(light-black); }
+}
+pre,
+samp {
+  display: block;
+  padding: 20px;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+pre { white-space: pre; }
+samp { white-space: pre-wrap; }
+
+// Pygments
+// ==================================================
+pre,
+samp {
+  .c {
+    color: color(light-gray);
+    font-style: italic;
+  } // Comment
+  .err {
+    color: color(red);
+    background: color(black);
+  } // Error
+  .k { color: color(blue); } // Keyword
+  .cm {
+    color: color(light-gray);
+    font-style: italic;
+  } // Comment.Multiline
+  .cp { color: color(green); } // Comment.Preproc
+  .c1 {
+    color: color(light-gray);
+    font-style: italic;
+  } // Comment.Single
+  .cs {
+    color: color(blue);
+    font-style: italic;
+  } // Comment.Special
+  .gd { color: color(red); } // Generic.Deleted
+  .ge { font-style: italic; } // Generic.Emph
+  .gr { color: color(red); } // Generic.Error
+  .gh {
+    color: color(blue);
+    font-weight: bold;
+  } // Generic.Heading
+  .gi { color: color(green); } // Generic.Inserted
+  .go { color: color(gray); } // Generic.Output
+  .gp { color: color(black); } // Generic.Prompt
+  .gs { font-weight: bold; } // Generic.Strong
+  .gu {
+    color: color(black);
+    font-weight: bold;
+  } // Generic.Subheading
+  .gt { color: color(red); } // Generic.Traceback
+  .kc { color: color(blue); } // Keyword.Constant
+  .kd { color: color(red); } // Keyword.Declaration
+  .kn { color: color(blue); } // Keyword.Namespace
+  .kp { color: color(blue); } // Keyword.Pseudo
+  .kr { color: color(blue); } // Keyword.Reserved
+  .kt { color: color(green); } // Keyword.Type
+  .m { color: color(green); } // Literal.Number
+  .s { color: color(blue); } // Literal.String
+  .sa { color: color(green); } // Literal.String.Alternate
+  .na { color: color(blue); } // Name.Attribute
+  .nb { color: color(green); } // Name.Builtin
+  .nc { color: color(green); } // Name.Class
+  .no { color: color(red); } // Name.Constant
+  .nd { color: color(gray); } // Name.Decorator
+  .ni {
+    color: color(red);
+    font-weight: bold;
+  } // Name.Entity
+  .nf { color: color(green); } // Name.Function
+  .nn { color: color(green); } // Name.Namespace
+  .nt {
+    color: color(blue);
+    font-weight: bold;
+  } // Name.Tag
+  .nv { color: color(red); } // Name.Variable
+  .ow { color: color(blue); } // Operator.Word
+  .w { color: color(gray); } // Text.Whitespace
+  .mf { color: color(green); } // Literal.Number.Float
+  .mh { color: color(green); } // Literal.Number.Hex
+  .mi { color: color(green); } // Literal.Number.Integer
+  .mo { color: color(green); } // Literal.Number.Oct
+  .sb { color: color(blue); } // Literal.String.Backtick
+  .sc { color: color(blue); } // Literal.String.Char
+  .sd { color: color(blue); } // Literal.String.Doc
+  .s2 { color: color(blue); } // Literal.String.Double
+  .se { color: color(blue); } // Literal.String.Escape
+  .sh { color: color(blue); } // Literal.String.Heredoc
+  .si { color: color(blue); } // Literal.String.Interpol
+  .sx { color: color(blue); } // Literal.String.Other
+  .sr { color: color(green); } // Literal.String.Regex
+  .s1 { color: color(blue); } // Literal.String.Single
+  .ss { color: color(blue); } // Literal.String.Symbol
+  .bp { color: color(green); } // Name.Builtin.Pseudo
+  .vc { color: color(red); } // Name.Variable.Class
+  .vg { color: color(red); } // Name.Variable.Global
+  .vi { color: color(red); } // Name.Variable.Instance
+  .il { color: color(green); } // Literal.Number.Integer.Long
+
+  &.dark {
+    .err { background: color(gray); }
+    .gp,
+    .gu { color: inherit; }
+  }
+}

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

@@ -0,0 +1,127 @@
+// Table of Contents
+// ==================================================
+// Visibility
+// Scrollbars
+// Pushes
+// Pulls
+// Paddings
+// Margins
+// Displays
+// Colors
+// Box shadows
+// Border radiuses
+// Border colors
+// Background colors
+
+// Visibility
+// ==================================================
+@each $name in $common-visibility-types {
+  .visibility-#{$name} { visibility: $name; }
+}
+
+// Scrollbars
+// ==================================================
+.scrollbar {
+  &::-webkit-scrollbar {
+    background: color(transparent);
+    border-radius: 999px;
+    width: 6px;
+  }
+  &::-webkit-scrollbar:hover { background: rgba(color(transparent), 0.15); }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(color(transparent), 0.5);
+    border-radius: 999px;
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background: rgba(color(transparent), 0.6);
+    border-radius: 999px;
+  }
+}
+
+// Pushes
+// ==================================================
+@each $name, $margin in (center: (0 auto), left: (0 auto 0 0), right: (0 0 0 auto)) {
+  .push-#{$name} { margin: $margin; }
+}
+
+// Pulls
+// ==================================================
+@each $name in left, none, right {
+  .pull-#{$name} { float: $name; }
+}
+
+// Paddings
+// ==================================================
+@each $name, $size in $common-margins-and-paddings {
+  .padding-size-#{$name} { padding: $size; }
+  .padding-size-bottom-#{$name} { padding-bottom: $size; }
+  .padding-size-left-#{$name} { padding-left: $size; }
+  .padding-size-right-#{$name} { padding-right: $size; }
+  .padding-size-top-#{$name} { padding-top: $size; }
+}
+
+// Margins
+// ==================================================
+@each $name, $size in $common-margins-and-paddings {
+  .margin-size-#{$name} { margin: $size; }
+  .margin-size-bottom-#{$name} { margin-bottom: $size; }
+  .margin-size-left-#{$name} { margin-left: $size; }
+  .margin-size-right-#{$name} { margin-right: $size; }
+  .margin-size-top-#{$name} { margin-top: $size; }
+}
+
+// Displays
+// ==================================================
+@each $name in $common-display-types {
+  .display-#{$name} { display: $name; }
+}
+
+// Colors
+// ==================================================
+.dark,
+.primary { color: color(white); }
+.dark {
+  background: color(black);
+  border-color: color(dark-black);
+}
+.primary {
+  background: color(primary);
+  border-color: darker-color(primary);
+}
+.light,
+.white {
+  border-color: color(dark-haze);
+  color: color(black);
+}
+.light { background: color(light-haze); }
+.white { background: color(white); }
+
+// Box shadows
+// ==================================================
+.box-shadow-bottom { box-shadow: 0 2px 3px color(dark-haze); }
+.box-shadow-left { box-shadow: -2px 0 3px color(dark-haze); }
+.box-shadow-right { box-shadow: 2px 0 3px color(dark-haze); }
+.box-shadow-top { box-shadow: 0 -2px 3px color(dark-haze); }
+.box-shadow { box-shadow: 0 0 3px color(dark-haze); }
+
+// Border radiuses
+// ==================================================
+@each $name, $radius in $common-border-radiuses {
+  .border-radius-#{$name} { border-radius: $radius; }
+}
+
+// Border colors
+// ==================================================
+@each $name, $color in $colors {
+  .border-color-#{$name} { border-color: $color; }
+  .border-color-bottom-#{$name} { border-bottom-color: $color; }
+  .border-color-left-#{$name} { border-left-color: $color; }
+  .border-color-right-#{$name} { border-right-color: $color; }
+  .border-color-top-#{$name} { border-top-color: $color; }
+}
+
+// Background colors
+// ==================================================
+@each $name, $color in $colors {
+  .background-color-#{$name} { background-color: $color; }
+}