clash-and-dashboard/src/styles/variables.scss

/**
 * Clash Dashboard
 * Style Common Variables
 */

$background: #f4f5f6;

// primary colors
$color-primary: #57befc;
$color-primary-dark: #2c8af8;
$color-primary-darken: #54759a;
$color-primary-light: #7fcae4;
$color-primary-lightly: #e4eaef;

// common colors
$color-gray: #d8dee2;
$color-gray-dark: #b7c5d6;
$color-gray-darken: #909399;
$color-white: #fff;
$color-green: #67c23a;
$color-orange: #e6a23c;
$color-red: #f56c6c;
$color-black-light: #546b87;
$color-black: #000;

// response break point
@mixin response($name) {
    @if map-has-key($breakpoints, $name) {
        @media #{inspect(map-get($breakpoints, $name))} {
            @content;
        }
    }
}

$breakpoints: (
    'xxs': (
        max-width: 760px
    ),
    'xs': (
        max-width: 860px
    ),
    'sm': (
        max-width: 960px
    ),
    'md': (
        min-width: 961px
    )
    and
    (
        max-width: 1340px
    ),
    'lg': (
        min-width: 1341px
    )
    and
    (
        max-width: 1600px
    ),
    'xl': (
        min-width: 1601px
    )
    and
    (
        max-width: 2000px
    ),
    'xxl': (
        min-width: 2001px
    )
);