diff --git a/assets/_types.scss b/assets/_types.scss new file mode 100644 index 00000000..f64ce649 --- /dev/null +++ b/assets/_types.scss @@ -0,0 +1,52 @@ +//// +// A collection of function for advanced type checking +// @author Kitty Giraudel +//// + +@function is-number($value) { + @return type-of($value) == 'number'; +} + +@function is-time($value) { + @return is-number($value) and index('ms' 's', unit($value)) != null; +} + +@function is-duration($value) { + @return is-time($value); +} + +@function is-angle($value) { + @return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value)) != null; +} + +@function is-frequency($value) { + @return is-number($value) and index('Hz' 'kHz', unit($value)) != null; +} + +@function is-integer($value) { + @return is-number($value) and round($value) == $value; +} + +@function is-relative-length($value) { + @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null; +} + +@function is-absolute-length($value) { + @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null; +} + +@function is-percentage($value) { + @return is-number($value) and unit($value) == '%'; +} + +@function is-length($value) { + @return is-relative-length($value) or is-absolute-length($value); +} + +@function is-resolution($value) { + @return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null; +} + +@function is-position($value) { + @return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null; +} diff --git a/assets/table/_mixins.scss b/assets/table/_mixins.scss index f190bf89..5e7618bc 100644 --- a/assets/table/_mixins.scss +++ b/assets/table/_mixins.scss @@ -1,4 +1,5 @@ @use './variables' as *; +@use '../types'; @mixin cell-like($default-color: $neutral-color) { position: relative; @@ -21,3 +22,38 @@ } } } + +@mixin -shrink-template-columns($template-columns: null) { + @if $template-columns { + @if types.is-integer($template-columns) { + grid-template-columns: repeat($template-columns, auto); + } @else { + grid-template-columns: $template-columns; + } + } +} + +/** + * Performs table shrinking, useful for fancy semi-responsive behavior + * $default-template-columns defines the default (full-size) template, + * you can send either a full definition or just a number (it will use auto with a number) + * If you don't pass this, we won't define any grid-template-columns, allowing user overrides + * $shrinking-rules defines how you want the table to react to smaller screens + * this should be a list in the following format: + * breakpoint selector template-columns + * e.g.: 1150px '.setup' 8 + * The template-columns portion accepts both formats $default-template-columns does + */ +@mixin shrink($default-template-columns: null, $shrinking-rules: [ ]) { + @include -shrink-template-columns($default-template-columns); + + @each $breakpoint, $selector, $template-columns in $shrinking-rules { + @media (max-width: $breakpoint) { + @include -shrink-template-columns($template-columns); + + ::v-deep #{$selector} { + display: none; + } + } + } +} diff --git a/stylelint.config.js b/stylelint.config.js index 656be0f6..59a98c76 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -5,8 +5,22 @@ module.exports = { // add your custom config here // https://stylelint.io/user-guide/configuration rules: { + 'at-rule-empty-line-before': [ + 'always', + { + except: [ 'blockless-after-same-name-blockless', 'first-nested' ], + ignore: [ 'after-comment' ], + ignoreAtRules: [ 'if', 'else' ], + }, + ], // SCSS uses @rules. Some are unknown. 'at-rule-no-unknown': null, + 'block-closing-brace-newline-after': [ + 'always', + { + ignoreAtRules: [ 'if', 'else' ], + }, + ], 'declaration-block-single-line-max-declarations': 0, // Allow ::v-deep ( >>> and /deep/ both fail more fundamentally ) 'selector-pseudo-element-no-unknown': [