creinartz

.btn {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    margin: $gutter-quarter 0;
    padding: 14px $gutter-three-quarters;
    vertical-align: middle;
    border-top: 0;
    border-right: 0;

creinartz

<!--  -->
<button class="btn btn--primary btn--regular ">Primary Button</button>
<!--  -->

creinartz

@import 'settings/global.scss'
@import 'settings/colors.scss'
// …
@import 'tools/rtl.scss'
// …
@import 'tools/zindex.scss'
// …
@import 'components/gallery.scss'

creinartz

@import 'settings/global.scss'
@import 'settings/colors.scss'
// …
@import 'tools/rtl.scss'
@import 'tools/zindex.scss'
// …
@import 'generic/normalize.scss'
// …
@import 'elements/base.scss'
// …

creinartz

/*
### basic spacing
*/
$gutter: 16px !default;
$gutter-half: ($gutter / 2) !default; // 8px
$gutter-third: ($gutter / 3) !default; // 5,33px
$gutter-quarter: ($gutter / 4) !default; // 4px
$gutter-sixth: ($gutter / 6) !default; // 3px
$gutter-eighth: ($gutter / 8) !default; // 2px

creinartz

{
  "plugins": [
    "stylelint-declaration-use-variable"
  ],
  "rules": {
    "color-hex-case": ["lower", {"severity": "warning"} ],
    "color-hex-length": ["short", {"severity": "warning"} ],
    "color-named": ["never", {"severity": "warning"} ],
    "time-no-imperceptible": [true, {"severity": "warning"} ],
    "max-nesting-depth": [5, {"severity": "warning"} ],