active_frontend 13.3.0 → 14.0.0

data/vendor/assets/stylesheets/{_mixin.scss → _utility.scss}

@@ -1,10 +1,90 @@
-/* Table of Contents
-==================================================
-# Mixin */
+// Table of Contents
+// ==================================================
+// Helper Functions
+// Attribute Functions
+// Attribute Mixins
+// Vendor Mixins
 
-/* # Mixin
-================================================== */
-@mixin animation($animation) {
+// Helper Funtions
+// ==================================================
+@function dasherize($selector, $key) {
+  @if $key {
+    @return #{$selector}-#{$key};
+  } @else {
+    @return #{$selector};
+  }
+}
+@function text-color-on($color) {
+  @if index($colors-black-text, $color) {
+    @return color(black);
+  } @else {
+    @return color(white);
+  }
+}
+
+// Attribute Funtions
+// ==================================================
+@function background-hover-color($color) {
+  @return darken(color($color), 1.75%);
+}
+@function border-radius($size) {
+  @return map-get($common-border-radiuses, $size);
+}
+@function darkest-color($color) {
+  @return darken(color($color), 12.5%);
+}
+@function darksome-color($color) {
+  @return darken(color($color), 10%);
+}
+@function dark-color($color) {
+  @return darken(color($color), 7.5%);
+}
+@function darker-color($color) {
+  @return darken(color($color), 5%);
+}
+@function darkish-color($color) {
+  @return darken(color($color), 2.5%);
+}
+@function color($color) {
+  @return map-get($colors, $color);
+}
+@function lightish-color($color) {
+  @return lighten(color($color), 2.5%);
+}
+@function lighter-color($color) {
+  @return lighten(color($color), 5%);
+}
+@function light-color($color) {
+  @return lighten(color($color), 7.5%);
+}
+@function lightsome-color($color) {
+  @return lighten(color($color), 10%);
+}
+@function lightest-color($color) {
+  @return lighten(color($color), 12.5%);
+}
+@function progress-size($size) {
+  @return map-get($progress-sizes, $size);
+}
+@function text-family($family) {
+  @return map-get($font-families, $family);
+}
+@function text-line-height($line-height) {
+  @return map-get($font-line-heights, $line-height);
+}
+@function text-size($size) {
+  @return map-get($font-sizes, $size);
+}
+@function text-space($space) {
+  @return map-get($font-spaces, $space);
+}
+@function text-weight($weight) {
+  @return map-get($font-weights, $weight);
+}
+
+// Vendor Mixins
+// ==================================================
+@mixin animation($animation...) {
   -webkit-animation: $animation;
       -ms-animation: $animation;
           animation: $animation;
@@ -49,15 +129,16 @@
       -ms-backface-visibility: $visibility;
           backface-visibility: $visibility;
 }
+@mixin background-image($background-image...) {
+  background-image: -webkit-linear-gradient($background-image);
+  background-image: -ms-linear-gradient($background-image);
+  background-image: linear-gradient($background-image);
+}
 @mixin background-size($size) {
   -webkit-background-size: $size;
       -ms-background-size: $size;
           background-size: $size;
 }
-@mixin dimensions($height, $width) {
-  height: $height;
-  width: $width;
-}
 @mixin overflow-scrolling($scroll) {
   -webkit-overflow-scrolling: $scroll;
       -ms-overflow-scrolling: $scroll;
@@ -73,6 +154,11 @@
       -ms-text-size-adjust: $size;
           text-size-adjust: $size;
 }
+@mixin text-decoration-skip($object) {
+  -webkit-text-decoration-skip: $object;
+      -ms-text-decoration-skip: $object;
+          text-decoration-skip: $object;
+}
 @mixin transform($transform) {
   -webkit-transform: $transform;
       -ms-transform: $transform;

data/vendor/assets/stylesheets/_variable.scss

@@ -1,21 +1,203 @@
-/* Table of Contents
-==================================================
-# Variables Color
-# Variables Typography */
+// Table of Contents
+// ==================================================
+// Animation
+// Color
+// Common
+// Font
+// Grid
+// Progress
 
-/* # Variables Color
-================================================== */
-$color-primary: $color-blue;
-$color-secondary: $color-green;
-$color-tertiary: $color-red;
+// Animation
+// ==================================================
+$animation-delays: (
+  xxl: 2s,
+  xl: 1.75s,
+  l: 1.5s,
+  m: 1.25s,
+  b: 1s,
+  s: 0.75s,
+  xs: 0.5s,
+  xxs: 0.25s,
+  n: 0
+);
+$animation-durations: (
+  xxl: 2s,
+  xl: 1.75s,
+  l: 1.5s,
+  m: 1.25s,
+  b: 1s,
+  s: 0.75s,
+  xs: 0.5s,
+  xxs: 0.25s
+);
 
-/* # Variables Typography
-================================================== */
-$typography-gotham-round: true;
-$typography-gotham: true;
-$typography-base-font: 'Gotham Round';
-$typography-heading-font: 'Gotham';
-$typography-heading: $typography-heading-font, 'Helvetica', Helvetica, Arial, sans-serif;
-$typography-monospace: Monaco, Menlo, Consolas, 'Courier New', monospace;
-$typography-sans-serif: $typography-base-font, 'Helvetica', Helvetica, Arial, sans-serif;
-$typography-serif: 'Times New Roman', Times, serif;
+// Color
+// ==================================================
+$colors-brand: (
+  lime: rgba(171,208,38,1),
+  green: rgba(114,201,20,1),
+  teal: rgba(50,201,234,1),
+  blue: rgba(0,124,255,1),
+  indigo: rgba(92,92,235,1),
+  purple: rgba(140,75,251,1),
+  pink: rgba(255,95,132,1),
+  red: rgba(245,47,46,1),
+  orange: rgba(254,146,26,1),
+  yellow: rgba(255,214,19,1)
+);
+$colors-grayscale: (
+  transparent: rgba(0,0,0,0),
+  dark-black: rgba(31,45,61,1),
+  black: rgba(39,52,72,1),
+  light-black: rgba(50,65,86,1),
+  dark-gray: rgba(104,120,143,1),
+  gray: rgba(132,146,166,1),
+  light-gray: rgba(155,167,186,1),
+  dark-haze: rgba(227,232,240,1),
+  haze: rgba(239,242,248,1),
+  light-haze: rgba(249,250,252,1),
+  white: rgba(255,255,255,1)
+);
+$colors-global: (
+  primary: map-get($colors-brand, blue),
+  secondary: map-get($colors-brand, green),
+  tertiary: map-get($colors-brand, red),
+  quaditiary: map-get($colors-brand, yellow)
+);
+$colors: map-merge(map-merge($colors-brand, $colors-grayscale), $colors-global);
+$colors-black-text: transparent, dark-haze, haze, light-haze, white;
+
+// Common
+// ==================================================
+$common-border-radiuses: (
+  xl: 999px,
+  l: 10px,
+  m: 6px,
+  b: 3px,
+  s: 2px,
+  n: 0
+);
+$common-margins-and-paddings: (
+  xxxl: 100px,
+  xxl: 80px,
+  xl: 60px,
+  l: 40px,
+  m: 30px,
+  b: 20px,
+  s: 10px,
+  xs: 5px,
+  null: 0
+);
+$common-display-types: block, inline, inline-block, table, table-cell, table-row;
+$common-visibility-types: collapse, hidden, visible;
+
+// Font
+// ==================================================
+$font-families: (
+  monospace: (Menlo, Monaco, Courier, Consolas, monospace),
+  sans-serif: ('Fakt Soft Pro', Verdana, Tahoma, sans-serif),
+  serif: (Georgia, 'Times New Roman', serif)
+);
+$font-indents: (
+  xxxl: 25px,
+  xxl: 20px,
+  xl: 15px,
+  l: 10px,
+  m: 5px,
+  b: 0,
+  s: -5px,
+  xs: -10px,
+  xxs: -15px,
+  xxxs: -20px
+);
+$font-line-heights: (
+  xxxl: 64px,
+  xxl: 50px,
+  xl: 36px,
+  l: 26px,
+  m: 24px,
+  b: 22px,
+  s: 18px,
+  xs: 16px,
+  xxs: 14px,
+  xxxs: 12px,
+  i: 1,
+  n: 0
+);
+$font-sizes: (
+  xxxl: 56px,
+  xxl: 42px,
+  xl: 28px,
+  l: 20px,
+  m: 18px,
+  b: 16px,
+  s: 14px,
+  xs: 12px,
+  xxs: 10px,
+  xxxs: 8px
+);
+$font-spaces: (
+  xxl: 10px,
+  xl: 6px,
+  l: 2px,
+  m: 1px,
+  b: 0,
+  s: -1px,
+  xs: -2px
+);
+$font-weights: (
+  bold: 700,
+  semibold: 500,
+  normal: 400,
+  semilight: 300
+);
+
+// Grid
+// ==================================================
+$grid-column-widths: (
+  one: 10%,
+  two: 20%,
+  three: 30%,
+  four: 40%,
+  five: 50%,
+  six: 60%,
+  seven: 70%,
+  eight: 80%,
+  nine: 90%,
+  ten: 100%,
+  one-fourth: 25%,
+  one-third: 33.33333%,
+  one-half: 50%,
+  two-thirds: 66.66666%,
+  three-fourths: 75%
+);
+$grid-container-widths: (
+  l: (calc(100% - 60px), 1360px),
+  m: (calc(100% - 40px), 1180px),
+  b: (calc(100% - 20px), 960px),
+  s: (calc(100% - 10px), 760px),
+  null: (100%, null)
+);
+$grid-row-margins: (
+  xxxl: 100px,
+  xxl: 80px,
+  xl: 60px,
+  l: 40px,
+  m: 30px,
+  b: 20px,
+  s: 10px,
+  xs: 5px,
+  null: 0
+);
+$grid-container-types: container, container-fixed;
+$grid-row-types: row, row-responsive;
+
+// Progress
+// ==================================================
+$progress-sizes: (
+  l: 40px,
+  m: 32px,
+  b: 24px,
+  s: 16px,
+  xs: 8px
+);

data/vendor/assets/stylesheets/active_frontend.scss

@@ -1,61 +1,58 @@
-/* Table of Contents
-==================================================
-# Required Imports
-# Optional Imports */
+// Table of Contents
+// ==================================================
+// Global Imports
+// Specific Imports
 
-/* # Required Imports
-================================================== */
-@import 'mixin';
-@import 'color';
+// Global Imports
+// ==================================================
+@import 'utility';
 @import 'variable';
 
-/* # Optional Imports
-================================================== */
-@import 'reset';
-@import 'ad';
-@import 'affix';
-@import 'alert';
-@import 'animation';
-@import 'breadcrumb';
-@import 'button';
-@import 'canvas';
-@import 'carousel';
-@import 'chart';
-@import 'code';
-@import 'collapse';
-@import 'colorpicker';
-@import 'datepicker';
-@import 'dropdown';
-@import 'footer';
-@import 'form';
-@import 'grid';
-@import 'header';
-@import 'icon';
-@import 'image';
-@import 'label_and_badge';
-@import 'link';
-@import 'list';
-@import 'loader';
-@import 'map';
-@import 'missive';
-@import 'modal';
-@import 'nav_and_tab';
-@import 'navbar';
-@import 'pagination';
-@import 'panel';
-@import 'placeholder';
-@import 'popover';
-@import 'progress';
-@import 'sidebar';
-@import 'slider';
-@import 'spinner';
-@import 'subheader';
-@import 'swoggle';
-@import 'table';
-@import 'timepicker';
-@import 'toolbar';
-@import 'tooltip';
-@import 'transition';
-@import 'trunk';
-@import 'typography';
-@import 'typeahead';
+// Specific Imports
+// ==================================================
+@import 'blocks/reset';
+@import 'blocks/anchor';
+@import 'blocks/code';
+@import 'blocks/list';
+@import 'blocks/table';
+@import 'blocks/button';
+@import 'blocks/form';
+@import 'blocks/multimedia';
+@import 'blocks/icon';
+@import 'components/layout';
+@import 'components/grid';
+@import 'components/animation';
+@import 'components/transition';
+@import 'components/spinner';
+@import 'components/affix';
+@import 'components/sidebar';
+@import 'components/header';
+@import 'components/footer';
+@import 'components/navbar';
+@import 'components/modal';
+@import 'components/card';
+@import 'components/alert';
+@import 'components/missive';
+@import 'components/nav_and_tab';
+@import 'components/carousel';
+@import 'components/collapse';
+@import 'components/tooltip';
+@import 'components/popover';
+@import 'components/dropmenu';
+@import 'components/colorpicker';
+@import 'components/datepicker';
+@import 'components/timepicker';
+@import 'components/typeahead';
+@import 'components/ad';
+@import 'components/label_and_badge';
+@import 'components/breadcrumb';
+@import 'components/pagination';
+@import 'components/progress';
+@import 'components/placeholder';
+@import 'components/milestone';
+@import 'components/switch';
+@import 'components/calendar';
+@import 'components/map';
+@import 'components/chart';
+@import 'blocks/common';
+@import 'blocks/typography';