@kokoccc/vuetify 1.0.1

package/src/styles/settings/_light.scss

@@ -0,0 +1,134 @@
+@import '../tools/_functions.sass';
+
+$material-light: () !default;
+$material-light: map-deep-merge(
+  (
+    'status-bar': (
+      'regular': map-get($grey, 'lighten-2'),
+      'lights-out': rgba(map-get($shades, 'white'), 0.7)
+    ),
+    'app-bar': map-get($grey, 'lighten-4'),
+    'background': map-get($shades, 'white'),
+    'bottom-navigation': map-get($shades, 'white'),
+    'surface': map-get($shades, 'white'),
+    'calendar': (
+      'background-color': map-get($shades, 'white'),
+      'outside-background-color': #f7f7f7,
+      'weeknumber-background-color': #f1f3f4,
+      'line-color': map-get($grey, 'lighten-2'),
+      'interval-color': map-get($grey, 'darken-3'),
+      'interval-line-color': map-get($grey, 'lighten-2'),
+      'text-color': map-get($shades, 'black'),
+      'past-color': rgba(map-get($shades, 'black'), .38)
+    ),
+    'cards': map-get($shades, 'white'),
+    'chips': #e0e0e0,
+    'code': (
+      'background': rgba(map-get($shades, 'black'), 0.05),
+      'color': currentColor
+    ),
+    'kbd': (
+      'background': #212529,
+      'color': map-get($shades, 'white')
+    ),
+    'dividers': rgba(map-get($shades, 'black'), 0.12),
+    'text': (
+      'theme': map-get($shades, 'white'),
+      'primary': rgba(map-get($shades, 'black'), 0.87),
+      'secondary': rgba(map-get($shades, 'black'), 0.6),
+      'disabled': rgba(map-get($shades, 'black'), 0.38),
+      'link': map-get($blue, 'darken-2'),
+      'link-hover': map-get($grey, 'darken-3')
+    ),
+    'icons': (
+      'active': rgba(map-get($shades, 'black'), 0.54),
+      'inactive': rgba(map-get($shades, 'black'), 0.38)
+    ),
+    'inputs': (
+      'box': rgba(map-get($shades, 'black'), 0.04),
+      'solo-inverted': rgba(map-get($shades, 'black'), 0.06),
+      'solo-inverted-focused': map-get($grey, 'darken-3'),
+      'solo-inverted-focused-label': rgba(map-get($shades, 'white'), .7),
+      'solo-inverted-focused-placeholder': rgba(map-get($shades, 'white'), 0.5),
+      'solo-inverted-focused-text': map-get($shades, 'white')
+    ),
+    'buttons': (
+      'disabled': rgba(map-get($shades, 'black'), 0.26),
+      'focused': rgba(map-get($shades, 'black'), 0.12),
+      'focused-alt': rgba(map-get($shades, 'white'), 0.6),
+      'pressed': rgba(#999, 0.4)
+    ),
+    'expansion-panels': (
+      'focus': map-get($grey, 'lighten-3')
+    ),
+    'navigation-drawer': map-get($shades, 'white'),
+    'selection-controls': (
+      'disabled': rgba(map-get($shades, 'black'), 0.26),
+      'thumb': (
+        'inactive': map-get($shades, 'white'),
+        'disabled': map-get($grey, 'lighten-5')
+      ),
+      'track': (
+        'inactive': rgba(map-get($shades, 'black'), 0.38),
+        'disabled': rgba(map-get($shades, 'black'), 0.12)
+      )
+    ),
+    'slider': (
+      'active': rgba(map-get($shades, 'black'), 0.38),
+      'inactive': rgba(map-get($shades, 'black'), 0.26),
+      'disabled': rgba(map-get($shades, 'black'), 0.26),
+      'discrete': map-get($shades, 'black')
+    ),
+    'skeleton': linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)),
+    'states': (
+      'hover': 0.04,
+      'focus': 0.12,
+      'selected': 0.08,
+      'activated': 0.12,
+      'pressed': 0.16,
+      'dragged': 0.08
+    ),
+    'tabs': rgba(0, 0, 0, 0.54),
+    'toggle-buttons': (
+      'color': map-get($shades, 'black')
+    ),
+    'text-fields': (
+      'filled': rgba(map-get($shades, 'black'), 0.06),
+      'filled-hover': rgba(map-get($shades, 'black'), 0.12),
+      'outlined': rgba(map-get($shades, 'black'), 0.38),
+      'outlined-disabled': rgba(map-get($shades, 'black'), 0.26),
+      'outlined-hover': rgba(map-get($shades, 'black'), 0.86)
+    ),
+    'toolbar': map-get($shades, 'white'),
+    'input-bottom-line': rgba(map-get($shades, 'black'), 0.42),
+    'stepper': (
+      'active': rgba(map-get($shades, 'white'), 1),
+      'completed': rgba(map-get($shades, 'black'), 0.87),
+      'hover': rgba(map-get($shades, 'black'), 0.54)
+    ),
+    'table': (
+      'active': map-get($grey, 'lighten-4'),
+      'hover': map-get($grey, 'lighten-3'),
+      'group': map-get($grey, 'lighten-3')
+    ),
+    'picker': (
+      'body': map-get($shades, 'white'),
+      'clock': map-get($grey, 'lighten-2'),
+      'indeterminateTime': map-get($grey, 'lighten-1'),
+      'title': map-get($grey, 'lighten-2')
+    ),
+    'color-picker': (
+      'checkerboard': rgba(map-get($shades, 'white'), 0)
+    ),
+    'bg-color': map-get($shades, 'white'),
+    'fg-color': map-get($shades, 'black'),
+    'text-color': map-get($shades, 'black'),
+    'primary-text-percent': 0.87,
+    'secondary-text-percent': 0.6,
+    'disabledORhints-text-percent': 0.38,
+    'divider-percent': 0.12,
+    'active-icon-percent': 0.54,
+    'inactive-icon-percent': 0.38
+  ),
+  $material-light
+);

package/src/styles/settings/_theme.scss

@@ -0,0 +1 @@
+$material-theme: $material-light !default;

package/src/styles/settings/_utilities.scss

@@ -0,0 +1,432 @@
+@import '../tools/_functions.sass';
+
+$utilities: () !default;
+$utilities: map-deep-merge(
+  (
+    // Display utilities
+    "overflow": (
+      property: overflow,
+      values: auto hidden visible,
+    ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden
+    ),
+    "display": (
+      responsive: true,
+      print: true,
+      property: display,
+      class: d,
+      values: none inline inline-block block table table-row table-cell flex inline-flex
+    ),
+    "float": (
+      responsive: true,
+      print: true,
+      property: float,
+      class: float,
+      values: none left right
+    ),
+    "float:rtl": (
+      responsive: true,
+      print: true,
+      property: float,
+      class: float,
+      values: (
+        end: left,
+        start: right,
+      )
+    ),
+    "float:ltr": (
+      responsive: true,
+      print: true,
+      property: float,
+      class: float,
+      values: (
+        end: right,
+        start: left,
+      )
+    ),
+
+    // Flex utilities
+    "flex": (
+      responsive: true,
+      property: flex,
+      values: (fill: 1 1 auto)
+    ),
+    "flex-direction": (
+      responsive: true,
+      property: flex-direction,
+      class: flex,
+      values: row column row-reverse column-reverse
+    ),
+    "flex-grow": (
+      responsive: true,
+      property: flex-grow,
+      class: flex,
+      values: (
+        grow-0: 0,
+        grow-1: 1,
+      )
+    ),
+    "flex-shrink": (
+      responsive: true,
+      property: flex-shrink,
+      class: flex,
+      values: (
+        shrink-0: 0,
+        shrink-1: 1,
+      )
+    ),
+    "flex-wrap": (
+      responsive: true,
+      property: flex-wrap,
+      class: flex,
+      values: wrap nowrap wrap-reverse
+    ),
+    "justify-content": (
+      responsive: true,
+      property: justify-content,
+      class: justify,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        space-between: space-between,
+        space-around: space-around,
+      )
+    ),
+    "align-items": (
+      responsive: true,
+      property: align-items,
+      class: align,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      )
+    ),
+    "align-content": (
+      responsive: true,
+      property: align-content,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        space-between: space-between,
+        space-around: space-around,
+        stretch: stretch,
+      )
+    ),
+    "align-self": (
+      responsive: true,
+      property: align-self,
+      values: (
+        auto: auto,
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      )
+    ),
+    "order": (
+      responsive: true,
+      property: order,
+      values: (
+        first: -1,
+        0: 0,
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        6: 6,
+        7: 7,
+        8: 8,
+        9: 9,
+        10: 10,
+        11: 11,
+        12: 12,
+        last: 13,
+      ),
+    ),
+
+    // Margin utilities
+    "margin": (
+      responsive: true,
+      property: margin,
+      class: ma,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-x": (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-y": (
+      responsive: true,
+      property: margin-top margin-bottom,
+      class: my,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-top": (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-right": (
+      responsive: true,
+      property: margin-right,
+      class: mr,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-bottom": (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-left": (
+      responsive: true,
+      property: margin-left,
+      class: ml,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-start": (
+      responsive: true,
+      property: (ltr: margin-left, rtl: margin-right),
+      class: ms,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-end": (
+      responsive: true,
+      property: (ltr: margin-right, rtl: margin-left),
+      class: me,
+      values: map-merge($spacers, (auto: auto))
+    ),
+
+    // Negative margin utilities
+    "negative-margin": (
+      responsive: true,
+      property: margin,
+      class: ma,
+      values: $negative-spacers
+    ),
+    "negative-margin-x": (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
+      values: $negative-spacers
+    ),
+    "negative-margin-y": (
+      responsive: true,
+      property: margin-top margin-bottom,
+      class: my,
+      values: $negative-spacers
+    ),
+    "negative-margin-top": (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values: $negative-spacers
+    ),
+    "negative-margin-right": (
+      responsive: true,
+      property: margin-right,
+      class: mr,
+      values: $negative-spacers
+    ),
+    "negative-margin-bottom": (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: $negative-spacers
+    ),
+    "negative-margin-left": (
+      responsive: true,
+      property: margin-left,
+      class: ml,
+      values: $negative-spacers
+    ),
+    "negative-margin-start": (
+      responsive: true,
+      property: (ltr: margin-left, rtl: margin-right),
+      class: ms,
+      values: $negative-spacers
+    ),
+    "negative-margin-end": (
+      responsive: true,
+      property: (ltr: margin-right, rtl: margin-left),
+      class: me,
+      values: $negative-spacers
+    ),
+
+    // Padding utilities
+    "padding": (
+      responsive: true,
+      property: padding,
+      class: pa,
+      values: $spacers
+    ),
+    "padding-x": (
+      responsive: true,
+      property: padding-right padding-left,
+      class: px,
+      values: $spacers
+    ),
+    "padding-y": (
+      responsive: true,
+      property: padding-top padding-bottom,
+      class: py,
+      values: $spacers
+    ),
+    "padding-top": (
+      responsive: true,
+      property: padding-top,
+      class: pt,
+      values: $spacers
+    ),
+    "padding-right": (
+      responsive: true,
+      property: padding-right,
+      class: pr,
+      values: $spacers
+    ),
+    "padding-bottom": (
+      responsive: true,
+      property: padding-bottom,
+      class: pb,
+      values: $spacers
+    ),
+    "padding-left": (
+      responsive: true,
+      property: padding-left,
+      class: pl,
+      values: $spacers
+    ),
+    "padding-start": (
+      responsive: true,
+      property: (ltr: padding-left, rtl: padding-right),
+      class: ps,
+      values: $spacers
+    ),
+    "padding-end": (
+      responsive: true,
+      property: (ltr: padding-right, rtl: padding-left),
+      class: pe,
+      values: $spacers
+    ),
+
+    // Border
+    "rounded": (
+      property: border-radius,
+      class: rounded,
+      values: $rounded
+    ),
+    "rounded-top": (
+      property: border-top-left-radius border-top-right-radius,
+      class: rounded-t,
+      values: $rounded
+    ),
+    "rounded-right": (
+      property: border-top-right-radius border-bottom-right-radius,
+      class: rounded-r,
+      values: $rounded
+    ),
+    "rounded-bottom": (
+      property: border-bottom-left-radius border-bottom-right-radius,
+      class: rounded-b,
+      values: $rounded
+    ),
+    "rounded-left": (
+      property: border-top-left-radius border-bottom-left-radius,
+      class: rounded-l,
+      values: $rounded
+    ),
+    "rounded-top-left": (
+      property: border-top-left-radius,
+      class: rounded-tl,
+      values: $rounded
+    ),
+    "rounded-top-right": (
+      property: border-top-right-radius,
+      class: rounded-tr,
+      values: $rounded
+    ),
+    "rounded-bottom-right": (
+      property: border-bottom-right-radius,
+      class: rounded-br,
+      values: $rounded
+    ),
+    "rounded-bottom-left": (
+      property: border-bottom-left-radius,
+      class: rounded-bl,
+      values: $rounded
+    ),
+
+    // Text
+    "text-align": (
+      responsive: true,
+      property: text-align,
+      class: text,
+      values: left right center justify start end
+    ),
+    "text-decoration": (
+      property: text-decoration,
+      class: text-decoration,
+      values: line-through none overline underline
+    ),
+    "white-space": (
+      property: white-space,
+      class: text,
+      values: (
+        wrap: normal,
+        no-wrap: nowrap,
+        pre: pre,
+        pre-line: pre-line,
+        pre-wrap: pre-wrap,
+      )
+    ),
+    "overflow-wrap": (
+      property: overflow-wrap word-break, // word-break for IE & < Edge 18
+      class: text,
+      values: (break: break-word)
+    ),
+    "text-overflow": (
+      property: white-space overflow text-overflow,
+      class: text,
+      values: (truncate: nowrap hidden ellipsis)
+    ),
+    "text-transform": (
+      property: text-transform,
+      class: text,
+      values: none capitalize lowercase uppercase
+    ),
+    "typography": (
+      responsive: true,
+      property: (
+        font-size,
+        font-weight,
+        line-height,
+        letter-spacing,
+        font-family,
+        text-transform
+      ),
+      class: text,
+      unimportant: (
+        font-weight,
+        line-height
+      ),
+      values: $typography
+    )
+  ),
+  $utilities
+);