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.
142 lines
3.5 KiB
142 lines
3.5 KiB
/**
|
|
* variables
|
|
*
|
|
*
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://github.com/tentakelfabrik/plain-ui-css
|
|
*
|
|
*/
|
|
|
|
|
|
/**
|
|
* breakpoints
|
|
*
|
|
*/
|
|
|
|
$plain-ui__xs : 576px !default;
|
|
$plain-ui__sm : 768px !default;
|
|
$plain-ui__md : 992px !default;
|
|
$plain-ui__lg : 1200px !default;
|
|
$plain-ui__xlg: 1600px !default;
|
|
|
|
/**
|
|
* fonts
|
|
*
|
|
*/
|
|
|
|
$plain-ui__direction: ltr !default;
|
|
|
|
$plain-ui__font-family: 'IBM Plex Mono', sans-serif !default;
|
|
$plain-ui__font-weight: normal !default;
|
|
$plain-ui__font-size: 1rem !default;
|
|
$plain-ui__font-size-breakpoints: (
|
|
$plain-ui__md: 1.1rem
|
|
) !default;
|
|
|
|
$plain-ui__font-sizes: (
|
|
'default': $plain-ui__font-size,
|
|
'small' : $plain-ui__font-size * 0.75,
|
|
'medium' : $plain-ui__font-size * 1.5,
|
|
'large' : $plain-ui__font-size * 2,
|
|
'big' : $plain-ui__font-size * 3
|
|
) !default;
|
|
|
|
$plain-ui__line-height: 1.618;
|
|
$plain-ui__line-height__breakpoints: (
|
|
$plain-ui__md: 1.8
|
|
) !default;
|
|
|
|
|
|
/**
|
|
* colors
|
|
*
|
|
*
|
|
*/
|
|
|
|
$plain-ui__primary: #3e3e3e !default;
|
|
$plain-ui__primary-secondary: #ffffff !default;
|
|
|
|
$plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default;
|
|
$plain-ui__secondary: #b3b2af !default;
|
|
|
|
$plain-ui__success: #64ac64 !default;
|
|
$plain-ui__success-light: lighten($plain-ui__success, 20%) !default;
|
|
$plain-ui__warning: #f0ad4e !default;
|
|
$plain-ui__warning-light: lighten($plain-ui__warning, 20%) !default;
|
|
$plain-ui__danger: #d95959 !default;
|
|
$plain-ui__danger-light: lighten($plain-ui__danger, 20%) !default;
|
|
$plain-ui__info: #0090d4 !default;
|
|
$plain-ui__info-light: lighten($plain-ui__info, 20%) !default;
|
|
|
|
$plain-ui__body: #f9f9f9 !default;
|
|
$plain-ui__text: #363636 !default;
|
|
$plain-ui__text-secondary: #ffffff !default;
|
|
$plain-ui__background: #f9f9f9 !default;
|
|
$plain-ui__background--secondary: #ffffff !default;
|
|
$plain-ui__border: $plain-ui__primary !default;
|
|
$plain-ui__border-secondary: #ffffff !default;
|
|
$plain-ui__link: $plain-ui__text !default;
|
|
$plain-ui__link-hover: $plain-ui__danger !default;
|
|
|
|
$plain-ui__colors: (
|
|
'primary' : --primary,
|
|
'success' : --success,
|
|
'white' : --white
|
|
) !default;
|
|
|
|
:root {
|
|
--body: #{$plain-ui__body};
|
|
--text: #{$plain-ui__text};
|
|
--text-secondary: #{$plain-ui__text-secondary};
|
|
--primary: #{$plain-ui__primary};
|
|
--primary-secondary: #{$plain-ui__primary-secondary};
|
|
--active: #{$plain-ui__active};
|
|
--active-secondary: #{$plain-ui__active-secondary};
|
|
--link: #{$plain-ui__link};
|
|
--link-hover: #{$plain-ui__link-hover};
|
|
--danger: #{$plain-ui__danger};
|
|
--danger-activ: #{$plain-ui__danger-activ};
|
|
--danger-secondary: #{$plain-ui__danger-secondary};
|
|
--info: #{$plain-ui__danger};
|
|
--info-activ: #{$plain-ui__danger-activ};
|
|
--info-secondary: #{$plain-ui__danger-secondary};
|
|
--success: #{$plain-ui__success};
|
|
--success-activ: #{$plain-ui__success-activ};
|
|
--success-secondary: #{$plain-ui__success-secondary};
|
|
--white: #ffffff;
|
|
--black: #212121;
|
|
--background: #{$plain-ui__primary};
|
|
--background-secondary: #{$plain-ui__border-secondary};
|
|
--border: #{$plain-ui__border};
|
|
--border-secondary: #{$plain-ui__border-secondary};
|
|
}
|
|
|
|
/**
|
|
* margin
|
|
*
|
|
*/
|
|
|
|
$plain-ui__margin: 0 0 1rem !default;
|
|
$plain-ui__margin-breakpoints: (
|
|
$plain-ui__md: 0 0 0.8rem
|
|
) !default;
|
|
|
|
/**
|
|
* padding
|
|
*
|
|
*/
|
|
|
|
$plain-ui__padding: 0.6rem 0.8rem !default;
|
|
$plain-ui__padding-breakpoints: (
|
|
$plain-ui__md: 0.8rem 1rem
|
|
) !default;
|
|
|
|
/**
|
|
* border
|
|
*
|
|
*/
|
|
|
|
$plain-ui__border-radius: 2px;
|
|
$plain-ui__border: 1px solid var(--primary);
|