You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
4.0 KiB
182 lines
4.0 KiB
/**
|
|
* variables
|
|
*
|
|
*
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://github.com/tentakelfabrik/plain-ui-css
|
|
*
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
* grid
|
|
*
|
|
*/
|
|
|
|
$grid__columns: 12 !default; // number of columns
|
|
|
|
$grid__xs: 576px !default;
|
|
$grid__sm: 768px !default;
|
|
$grid__md: 992px !default;
|
|
$grid__lg: 1200px !default;
|
|
$grid__xlg: 1600px !default;
|
|
|
|
$grid__xxs-max: ($grid__xs - 1);
|
|
$grid__xs-max: ($grid__sm - 1);
|
|
$grid__sm-max: ($grid__md - 1);
|
|
$grid__md-max: ($grid__lg - 1);
|
|
$grid__lg-max: ($grid__xlg - 1);
|
|
|
|
$grid__breakpoints: (
|
|
xxs: 0px,
|
|
xs: $grid__xs,
|
|
sm: $grid__sm,
|
|
md: $grid__md,
|
|
lg: $grid__lg,
|
|
xlg: $grid__xlg
|
|
);
|
|
|
|
$grid__spacing: 15px !default;
|
|
|
|
// Custom properties so others can reference the variables.
|
|
:root {
|
|
--grid-columns: #{ $grid__columns };
|
|
--grid-grid-spacing: #{ $grid__spacing };
|
|
--grid-xs: #{ $grid__xs };
|
|
--grid-sm: #{ $grid__sm };
|
|
--grid-md: #{ $grid__md };
|
|
--grid-lg: #{ $grid__lg };
|
|
--grid-xlg: #{ $grid__xlg };
|
|
--grid-xxs-max: #{ $grid__xxs-max };
|
|
--grid-xs-max: #{ $grid__xs-max };
|
|
--grid-sm-max: #{ $grid__sm-max };
|
|
--grid-md-max: #{ $grid__md-max };
|
|
--grid-lg-max: #{ $grid__lg-max };
|
|
}
|
|
|
|
|
|
/**
|
|
* fonts
|
|
*
|
|
*/
|
|
|
|
$direction: ltr !default;
|
|
|
|
$font-family: 'IBM Plex Mono', sans-serif !default;
|
|
$font-weight: normal !default;
|
|
|
|
$font-size: 0.9rem !default;
|
|
$font-size-breakpoints: (
|
|
$grid__md: 1rem
|
|
) !default;
|
|
|
|
$font-sizes: (
|
|
'default': $font-size,
|
|
'small' : $font-size * 0.75,
|
|
'medium' : $font-size * 1.5,
|
|
'large' : $font-size * 2,
|
|
'big' : $font-size * 3
|
|
) !default;
|
|
|
|
$line-height: 1.618;
|
|
$line-height__breakpoints: (
|
|
$grid__md: 1.8
|
|
) !default;
|
|
|
|
|
|
/**
|
|
* colors
|
|
*
|
|
*
|
|
*/
|
|
|
|
$color__white: #ffffff !default;
|
|
$color__black: #212121 !default;
|
|
|
|
$color__primary: #3e3e3e !default;
|
|
$color__primary-contrast: $color__primary !default;
|
|
|
|
$color__active: lighten($color__primary, 20%) !default;
|
|
$color__active-contrast: #ffffff !default;
|
|
|
|
$color__background: $color__primary !default;
|
|
$color__background-contrast: #ffffff !default;
|
|
$color__background-alpha: rgba(0,0,0,.7) !default;
|
|
|
|
$color__body: #f9f9f9 !default;
|
|
$color__text: #363636 !default;
|
|
$color__text-contrast: #ffffff !default;
|
|
|
|
$color__border: $color__primary !default;
|
|
$color__border-contrast: #ffffff !default;
|
|
|
|
$color__success: #64ac64 !default;
|
|
$color__success-contrast: lighten($color__success, 20%) !default;
|
|
$color__warning: #f0ad4e !default;
|
|
$color__warning-contrast: lighten($color__warning, 20%) !default;
|
|
$color__danger: #d95959 !default;
|
|
$color__danger-contrast: lighten($color__danger, 20%) !default;
|
|
$color__info: #0090d4 !default;
|
|
$color__info-contrast: lighten($color__info, 20%) !default;
|
|
|
|
$color__link: $color__text !default;
|
|
$color__link-hover: $color__danger !default;
|
|
|
|
$colors: (
|
|
'--body': $color__body,
|
|
'--text': $color__text,
|
|
'--text-contrast': $color__text-contrast,
|
|
'--primary': $color__primary,
|
|
'--primary-contrast': $color__primary-contrast,
|
|
'--active': #{$color__active},
|
|
'--active-contrast': $color__active-contrast,
|
|
'--link': $color__link,
|
|
'--link-hover': $color__link-hover,
|
|
'--danger': $color__danger,
|
|
'--danger-contrast': $color__danger-contrast,
|
|
'--info': $color__info,
|
|
'--info-constrast': $color__info-contrast,
|
|
'--success': $color__success,
|
|
'--success-contrast': $color__success-contrast,
|
|
'--warning': $color__warning,
|
|
'--warning-contrast': $color__warning-contrast,
|
|
'--background': $color__background,
|
|
'--background-contrast': $color__background-contrast,
|
|
'--background-alpha': $color__background-alpha,
|
|
'--border': $color__border,
|
|
'--border-contrast': $color__border-contrast
|
|
) !default;
|
|
|
|
|
|
/**
|
|
* margin
|
|
*
|
|
*/
|
|
|
|
$margin: 0 0 1rem !default;
|
|
$margin-breakpoints: (
|
|
$grid__md: 0 0 1.2rem
|
|
) !default;
|
|
|
|
|
|
/**
|
|
* padding
|
|
*
|
|
*/
|
|
|
|
$padding: 0.6rem 0.8rem !default;
|
|
$padding-breakpoints: (
|
|
$grid__md: 0.7rem 1rem 0.9rem
|
|
) !default;
|
|
|
|
|
|
/**
|
|
* border
|
|
*
|
|
*/
|
|
|
|
$border-radius: 2px !default;
|
|
$border: 1px solid var(--border) !default; |