Skip to content

Instantly share code, notes, and snippets.

@erkie

erkie/buttons.scss

Created December 13, 2018 09:11
Show Gist options
  • Save erkie/c69b97c98879b521f55b5460d1d4eb8f to your computer and use it in GitHub Desktop.
Save erkie/c69b97c98879b521f55b5460d1d4eb8f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. erkie created this gist Dec 13, 2018.
    279 changes: 279 additions & 0 deletions buttons.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,279 @@
    .button--base {
    cursor: pointer;
    padding: 20px;

    &.button--large {
    padding: 40px;
    }

    &.button--small {
    padding: 5px;
    }
    }

    $button-colors: (
    light: (
    primary: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    secondary: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    success: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    danger: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    warning: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    info: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    light: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    dark: (
    border: #fff,
    background: #000,
    color: #fff
    )
    ),
    dark: (
    primary: (
    border: #000,
    background: #fff,
    color: #000
    ),
    secondary: (
    border: #000,
    background: #fff,
    color: #000
    ),
    success: (
    border: #000,
    background: #fff,
    color: #000
    ),
    danger: (
    border: #000,
    background: #fff,
    color: #000
    ),
    warning: (
    border: #000,
    background: #fff,
    color: #000
    ),
    info: (
    border: #000,
    background: #fff,
    color: #000
    ),
    light: (
    border: #000,
    background: #fff,
    color: #000
    ),
    dark: (
    border: #000,
    background: #fff,
    color: #000
    )
    ),
    light-old: (
    primary: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    secondary: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    success: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    danger: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    warning: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    info: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    light: (
    border: #fff,
    background: #000,
    color: #fff
    ),
    dark: (
    border: #fff,
    background: #000,
    color: #fff
    )
    ),
    dark-old: (
    primary: (
    border: #000,
    background: #fff,
    color: #000
    ),
    secondary: (
    border: #000,
    background: #fff,
    color: #000
    ),
    success: (
    border: #000,
    background: #fff,
    color: #000
    ),
    danger: (
    border: #000,
    background: #fff,
    color: #000
    ),
    warning: (
    border: #000,
    background: #fff,
    color: #000
    ),
    info: (
    border: #000,
    background: #fff,
    color: #000
    ),
    light: (
    border: #000,
    background: #fff,
    color: #000
    ),
    dark: (
    border: #000,
    background: #fff,
    color: #000
    )
    ),
    orange: (
    primary: (
    border: orange,
    background: #fff,
    color: orange
    ),
    secondary: (
    border: orange,
    background: #fff,
    color: orange
    ),
    success: (
    border: orange,
    background: #fff,
    color: orange
    ),
    danger: (
    border: orange,
    background: #fff,
    color: orange
    ),
    warning: (
    border: orange,
    background: #fff,
    color: orange
    ),
    info: (
    border: orange,
    background: #fff,
    color: orange
    ),
    light: (
    border: orange,
    background: #fff,
    color: orange
    ),
    dark: (
    border: orange,
    background: #fff,
    color: orange
    )
    ),
    xmas: (
    primary: (
    border: red,
    background: green,
    color: red
    ),
    secondary: (
    border: red,
    background: green,
    color: red
    ),
    success: (
    border: red,
    background: green,
    color: red
    ),
    danger: (
    border: red,
    background: green,
    color: red
    ),
    warning: (
    border: red,
    background: green,
    color: red
    ),
    info: (
    border: red,
    background: green,
    color: red
    ),
    light: (
    border: red,
    background: green,
    color: red
    ),
    dark: (
    border: red,
    background: green,
    color: red
    )
    )
    );

    @each $theme, $colors in $button-colors {
    @each $button-style, $color in $colors {
    .theme-#{$theme} .btn-#{$button-style} {
    @extend .button--base;

    color: map-get($color, color);
    border-color: map-get($color, border);
    background: map-get($color, background)
    }
    }
    }