152 lines
4.7 KiB
SCSS
152 lines
4.7 KiB
SCSS
@import '_components/include-dark';
|
|
|
|
// * Custom colors
|
|
// *******************************************************************************
|
|
|
|
$facebook: #3b5998 !default;
|
|
$twitter: #1da1f2 !default;
|
|
$google-plus: #dd4b39 !default;
|
|
$instagram: #e1306c !default;
|
|
$linkedin: #0077b5 !default;
|
|
$github: #d5d5e2 !default;
|
|
$dribbble: #ea4c89 !default;
|
|
$pinterest: #cb2027 !default;
|
|
$slack: #4a154b !default;
|
|
$reddit: #ff4500 !default;
|
|
$youtube: #ff0000 !default;
|
|
$vimeo: #1ab7ea !default;
|
|
|
|
$custom-colors: (
|
|
'facebook': $facebook,
|
|
'twitter': $twitter,
|
|
'google-plus': $google-plus,
|
|
'instagram': $instagram,
|
|
'linkedin': $linkedin,
|
|
'github': $github,
|
|
'dribbble': $dribbble,
|
|
'pinterest': $pinterest,
|
|
'slack': $slack,
|
|
'reddit': $reddit,
|
|
'youtube': $youtube,
|
|
'vimeo': $vimeo
|
|
) !default;
|
|
|
|
:root {
|
|
@each $color, $value in $custom-colors {
|
|
--#{$prefix}#{$color}: #{$value};
|
|
}
|
|
}
|
|
|
|
@each $color-name, $color-value in $custom-colors {
|
|
@include bg-variant('.bg-#{$color-name}', $color-value);
|
|
@include bg-label-variant('.bg-label-#{$color-name}', $color-value);
|
|
@include bg-label-hover-variant('.bg-label-hover-#{$color-name}', $color-value);
|
|
|
|
@include border-label-variant('.border-label-#{$color-name}', $color-value);
|
|
@include border-light-variant('.border-light-#{$color-name}', $color-value);
|
|
|
|
@include template-button-variant('.btn-#{$color-name}', $color-value);
|
|
@include template-button-label-variant('.btn-label-#{$color-name}', $color-value);
|
|
@include template-button-outline-variant('.btn-outline-#{$color-name}', $color-value);
|
|
@include template-button-text-variant('.btn-text-#{$color-name}', $color-value);
|
|
}
|
|
|
|
// * Bootstrap colors (Uncomment required colors)
|
|
// *******************************************************************************
|
|
|
|
$bootstrap-colors: (
|
|
// blue: $blue,
|
|
// indigo: $indigo,
|
|
// purple: $purple,
|
|
// pink: $pink,
|
|
// orange: $orange,
|
|
// teal: $teal
|
|
) !default;
|
|
|
|
@each $color-name, $color-value in $bootstrap-colors {
|
|
@include bg-variant('.bg-#{$color-name}', $color-value);
|
|
@include bg-label-variant('.bg-label-#{$color-name}', $color-value);
|
|
@include border-label-variant('.border-label-#{$color-name}', $color-value);
|
|
@include border-light-variant('.border-light-#{$color-name}', $color-value);
|
|
@include bg-label-hover-variant('.bg-label-hover-#{$color-name}', $color-value);
|
|
@include bg-gradient-variant('.bg-gradient-#{$color-name}', $color-value);
|
|
|
|
.border-#{$color-name} {
|
|
border-color: $color-value !important;
|
|
}
|
|
|
|
@include template-button-variant('.btn-#{$color-name}', $color-value);
|
|
@include template-button-label-variant('.btn-label-#{$color-name}', $color-value);
|
|
@include template-button-outline-variant('.btn-outline-#{$color-name}', $color-value);
|
|
}
|
|
|
|
// * Buttons
|
|
// *******************************************************************************
|
|
|
|
@include template-button-variant('.btn-white', $white, $body-color);
|
|
@include template-button-label-variant('.btn-label-white', $white, $body-color);
|
|
@include template-button-outline-variant('.btn-outline-white', $white, $body-color);
|
|
|
|
// ! ToDo: Custom colors (checkbox & radio)
|
|
// *******************************************************************************
|
|
|
|
$form-control-colors: (
|
|
black: #000,
|
|
white: #fff,
|
|
silver: #eee,
|
|
gray: #777,
|
|
gold: #ffeb3b,
|
|
pink: #e91e63,
|
|
red: #f44336
|
|
) !default;
|
|
|
|
@each $color-name, $color-value in $form-control-colors {
|
|
@include template-form-check-variant('.form-check-#{$color-name}', $color-value);
|
|
}
|
|
|
|
// * Navbar
|
|
// *******************************************************************************
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@if $color !=primary and $color !=light {
|
|
@include template-navbar-style('.navbar.bg-#{$color}', $value);
|
|
}
|
|
}
|
|
|
|
@include template-navbar-style('.navbar.bg-white', #fff, $color: black, $active-color: #4e5155);
|
|
@include template-navbar-style(
|
|
'.navbar.bg-light',
|
|
rgba-to-hex($light, $rgba-to-hex-bg),
|
|
$color: $headings-color,
|
|
$active-color: $white
|
|
);
|
|
@include template-navbar-style(
|
|
'.navbar.bg-lighter',
|
|
rgba-to-hex($gray-60, $rgba-to-hex-bg),
|
|
$color: $headings-color,
|
|
$active-color: $white
|
|
);
|
|
|
|
// * Footer
|
|
// *******************************************************************************
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@if $color !=primary and $color !=light {
|
|
@include template-footer-style('.footer.bg-#{$color}', $value);
|
|
}
|
|
}
|
|
|
|
@include template-footer-style('.footer.bg-white', #fff, $color: $black, $active-color: #4e5155);
|
|
@include template-footer-style(
|
|
'.footer.bg-light',
|
|
rgba-to-hex($light, $rgba-to-hex-bg),
|
|
$color: $headings-color,
|
|
$active-color: $headings-color
|
|
);
|
|
@include template-footer-style(
|
|
'.footer.bg-lighter',
|
|
rgba-to-hex($gray-60, $rgba-to-hex-bg),
|
|
$color: $headings-color,
|
|
$active-color: $body-color
|
|
);
|