2016-02-17 08:56:02 +01:00
|
|
|
// This is a standard color scheme for UXBOX UI
|
|
|
|
|
// Hope you like ir and feel free to create your own one!
|
|
|
|
|
|
2016-02-20 10:15:49 +01:00
|
|
|
// Main interaction color
|
2016-02-17 08:56:02 +01:00
|
|
|
$main-ui-color: $color-primary;
|
2016-02-19 19:41:33 +01:00
|
|
|
$intense-main-ui-color: darken($main-ui-color, 25%);
|
|
|
|
|
|
2016-02-20 10:15:49 +01:00
|
|
|
// Set the UI flavour
|
2016-02-19 19:41:33 +01:00
|
|
|
$ui-flavour: #90969d;
|
2016-02-17 08:56:02 +01:00
|
|
|
|
2016-02-20 10:15:49 +01:00
|
|
|
// Change next colors for more customization
|
2016-02-17 08:56:02 +01:00
|
|
|
// Background colors
|
2016-02-20 10:15:49 +01:00
|
|
|
$primary-ui-bg: $color-white;
|
2016-02-19 19:41:33 +01:00
|
|
|
$secondary-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
|
|
|
|
|
$dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
|
2016-02-17 08:56:02 +01:00
|
|
|
|
|
|
|
|
// Border color
|
2016-02-19 19:41:33 +01:00
|
|
|
$intense-ui-border: $ui-flavour;
|
|
|
|
|
$medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
|
|
|
|
|
$soft-ui-border: lighten($medium-ui-border, 18%);
|
2016-02-17 08:56:02 +01:00
|
|
|
|
|
|
|
|
// Icon colors
|
2016-02-19 19:41:33 +01:00
|
|
|
$intense-ui-icons: mix($ui-flavour, $color-black, $mix-percentage-dark);
|
|
|
|
|
$medium-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-light);
|
|
|
|
|
$soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
|
2016-02-17 08:56:02 +01:00
|
|
|
|
|
|
|
|
// Text colors
|
2016-02-19 19:41:33 +01:00
|
|
|
$intense-ui-text: mix($ui-flavour, $color-black, $mix-percentage-darker);
|
|
|
|
|
$medium-ui-text: $ui-flavour;
|
|
|
|
|
$soft-ui-text: mix($ui-flavour, $color-white, $mix-percentage-light);
|
2016-02-17 08:56:02 +01:00
|
|
|
|
|
|
|
|
// Canvas colors
|
2016-02-19 19:41:33 +01:00
|
|
|
$canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
|
|
|
|
|
$scrollbar-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
|
