app/assets/stylesheets/angle/app/utils-definitions.scss
//
// Utilities classes to simplify
// components constructions
// ------------------------------
$margin-base: 10px;
$margin-sm: 5px;
$margin-lg: 15px;
$margin-xl: 30px;
$padding-xl: 30px;
$padding-lg: 15px;
$padding-base: 10px;
$padding-sm: 5px;
$text-alpha: rgba(255,255,255,.5);
$text-alpha-inverse: rgba(0,0,0,.5);
$text-sm: $font-size-base * .85;
$text-md: $font-size-base * 1.9;
$text-lg: $font-size-base * 3;
$border-color: rgba(0,0,0,.12);
$wd-xxs: 60px;
$wd-xs: 90px;
$wd-sm: 150px;
$wd-sd: 200px; // sd == standard
$wd-md: 240px;
$wd-lg: 280px;
$wd-xl: 320px;
$wd-xxl: 360px;
$wd-wide: 100%;
$wd-auto: auto;
$wd-zero: 0;
// Background helpers
// Generates classes for
// .brand
// .brand-light
// .brand-dark
$colors: (
'primary-light': $brand-primary-light,
'primary': $brand-primary,
'primary-dark': $brand-primary-dark,
'success-light': $brand-success-light,
'success': $brand-success,
'success-dark': $brand-success-dark,
'info-light': $brand-info-light,
'info': $brand-info,
'info-dark': $brand-info-dark,
'warning-light': $brand-warning-light,
'warning': $brand-warning,
'warning-dark': $brand-warning-dark,
'danger-light': $brand-danger-light,
'danger': $brand-danger,
'danger-dark': $brand-danger-dark,
'green-light': $brand-green-light,
'green': $brand-green,
'green-dark': $brand-green-dark,
'pink-light': $brand-pink-light,
'pink': $brand-pink,
'pink-dark': $brand-pink-dark,
'purple-light': $brand-purple-light,
'purple': $brand-purple,
'purple-dark': $brand-purple-dark,
'inverse-light': $brand-inverse-light,
'inverse': $brand-inverse,
'inverse-dark': $brand-inverse-dark,
'yellow-light': $brand-yellow-light,
'yellow': $brand-yellow,
'yellow-dark': $brand-yellow-dark,
);
@function color($key) {
@return map-get($colors, $key);
}
@mixin bgcolor-variant($bgcolor, $text-color: #fff)
{
$amountOfLight: 10%;
& {
background-color: color($bgcolor);
color: $text-color !important;
}
&-light {
$col: color($bgcolor + '-light');
background-color: #{$col};
color: $text-color !important;
}
&-dark {
$col: color($bgcolor + '-dark');
background-color: #{$col};
color: $text-color !important;
}
small {
color: inherit;
}
}
@mixin make-bg($bgcolor, $text-color: #fff)
{
background-color: $bgcolor;
color: $text-color !important;
}
// Common thumbnail sizes (ideal for images)
@mixin thumnbail-size($sz: 8px)
{
width: $sz !important;
height: $sz !important;
}