Merged PR 796451: Add common style constants to CSS library
This commit is contained in:
Andy Zhu
Родитель
f7f1aca0ee
Коммит
345aa8165e
|
|
@ -1,5 +1,11 @@
|
|||
// import color overrides
|
||||
// Note: overrides must be imported before the default colors
|
||||
@import "color.overrides";
|
||||
|
||||
// import default colors
|
||||
@import "../src/colors";
|
||||
|
||||
// import mixins
|
||||
@import "../src/mixins";
|
||||
|
||||
$icon-size: 76px;
|
||||
|
|
|
|||
|
|
@ -1210,6 +1210,11 @@
|
|||
"remove-trailing-separator": "1.1.0"
|
||||
}
|
||||
},
|
||||
"normalize.css": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://msazure.pkgs.visualstudio.com/_packaging/IoTCentral/npm/registry/normalize.css/-/normalize.css-3.0.3.tgz",
|
||||
"integrity": "sha1-rMACYuI1osqpE2Oi5eO/pPitBcY="
|
||||
},
|
||||
"npmlog": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://msazure.pkgs.visualstudio.com/_packaging/IoTCentral/npm/registry/npmlog/-/npmlog-4.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
"scripts": {
|
||||
"build": "node-sass-chokidar example/ -o example/"
|
||||
},
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"normalize.css": "^3.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"node-sass-chokidar": "^1.2.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -27,82 +27,89 @@ $color-white: #FFFFFF;
|
|||
// Chart & Measurement Colors
|
||||
|
||||
$color-green-100: #01b8aa;
|
||||
$color-green-101: #99E3DD;
|
||||
$color-green-102: #6be8dc;
|
||||
$color-green-103: #67D4CC;
|
||||
$color-green-104: #59cec3;
|
||||
$color-green-105: #34C6BB;
|
||||
$color-green-106: #08bca6;
|
||||
$color-green-107: #0aa58e;
|
||||
$color-green-108: #12937d;
|
||||
$color-green-109: #018A80;
|
||||
$color-green-110: #015C55;
|
||||
$color-lightgrey-200: #374649;
|
||||
$color-lightgrey-201: #FFFFFF;
|
||||
$color-lightgrey-202: #F2F2F2;
|
||||
$color-lightgrey-203: #E6E6E6;
|
||||
$color-lightgrey-204: #CCCCCC;
|
||||
$color-lightgrey-205: #B3B3B3;
|
||||
$color-lightgrey-206: #999999;
|
||||
$color-lightgrey-207: #AFB5B6;
|
||||
$color-lightgrey-208: #879092;
|
||||
$color-lightgrey-209: #5F6B6D;
|
||||
$color-lightgrey-210: #293537;
|
||||
$color-red-300: #FD625E;
|
||||
$color-red-301: #FEC0BF;
|
||||
$color-red-302: #FEA19E;
|
||||
$color-red-303: #FD817E;
|
||||
$color-red-304: #fd625e;
|
||||
$color-red-305: #ff7878;
|
||||
$color-red-306: #fc5454;
|
||||
$color-red-307: #fc3232;
|
||||
$color-red-308: #e81818;
|
||||
$color-red-309: #BE4A47;
|
||||
$color-red-310: #b21f1f;
|
||||
$color-yellow-400: #F2C80F;
|
||||
$color-yellow-401: #FAE99F;
|
||||
$color-yellow-402: #F7DE6F;
|
||||
$color-yellow-403: #fcdf65;
|
||||
$color-yellow-404: #FFD629;
|
||||
$color-yellow-405: #F5D33F;
|
||||
$color-yellow-406: #ffce00;
|
||||
$color-yellow-407: #e5bd13;
|
||||
$color-yellow-408: #c9a611;
|
||||
$color-yellow-409: #B6960B;
|
||||
$color-yellow-410: #796408;
|
||||
$color-lightblue-600: #8AD4EB;
|
||||
$color-lightblue-601: #caf8ff;
|
||||
$color-lightblue-602: #b0f8ff;
|
||||
$color-lightblue-603: #D0EEF7;
|
||||
$color-lightblue-604: #B9E5F3;
|
||||
$color-lightblue-605: #B7DDE9;
|
||||
$color-lightblue-606: #A1DDEF;
|
||||
$color-lightblue-607: #8BC5D7;
|
||||
$color-lightblue-608: #689FB0;
|
||||
$color-lightblue-609: #456A76;
|
||||
$color-lightblue-610: #17323B;
|
||||
$color-orange-700: #FE9666;
|
||||
$color-orange-701: #ffcdbb;
|
||||
$color-orange-702: #FFD5C2;
|
||||
$color-orange-703: #FEC0A3;
|
||||
$color-orange-704: #FEAB85;
|
||||
$color-orange-705: #f7a389;
|
||||
$color-orange-706: #F98855;
|
||||
$color-orange-707: #f9724e;
|
||||
$color-orange-708: #BF714D;
|
||||
$color-orange-709: #A47159;
|
||||
$color-orange-710: #7F4B33;
|
||||
$color-purple-800: #A66999;
|
||||
$color-purple-801: #CAA5C2;
|
||||
$color-purple-802: #B887AD;
|
||||
$color-purple-803: #efa5e1;
|
||||
$color-purple-804: #ea78d9;
|
||||
$color-purple-805: #e247db;
|
||||
$color-purple-806: #DBC3D6;
|
||||
$color-purple-807: #d313d3;
|
||||
$color-purple-808: #921e9b;
|
||||
$color-purple-809: #7D4F73;
|
||||
$color-purple-810: #53354D;
|
||||
$color-green-200: #6be8dc;
|
||||
$color-green-300: #59cec3;
|
||||
$color-green-400: #08bca6;
|
||||
$color-green-500: #0aa58e;
|
||||
$color-green-600: #12937d;
|
||||
$color-green-700: #99E3DD;
|
||||
$color-green-800: #67D4CC;
|
||||
$color-green-900: #34C6BB;
|
||||
$color-green-1000: #018A80;
|
||||
$color-green-1100: #015C55;
|
||||
|
||||
$color-lightgrey-100: #ffffff;
|
||||
$color-lightgrey-200: #f2f2f2;
|
||||
$color-lightgrey-300: #e6e6e6;
|
||||
$color-lightgrey-400: #cccccc;
|
||||
$color-lightgrey-500: #b3b3b3;
|
||||
$color-lightgrey-600: #999999;
|
||||
$color-lightgrey-700: #374649;
|
||||
$color-lightgrey-800: #AFB5B6;
|
||||
$color-lightgrey-900: #879092;
|
||||
$color-lightgrey-1000: #5F6B6D;
|
||||
$color-lightgrey-1100: #293537;
|
||||
$color-lightgrey-1200: #1C2325;
|
||||
|
||||
$color-red-100: #fd625e;
|
||||
$color-red-200: #ff7878;
|
||||
$color-red-300: #fc5454;
|
||||
$color-red-400: #fc3232;
|
||||
$color-red-500: #e81818;
|
||||
$color-red-600: #b21f1f;
|
||||
$color-red-700: #FEC0BF;
|
||||
$color-red-800: #FEA19E;
|
||||
$color-red-900: #FD817E;
|
||||
$color-red-1000: #BE4A47;
|
||||
$color-red-1100: #7F312F;
|
||||
|
||||
$color-yellow-100: #f2c80f;
|
||||
$color-yellow-200: #fcdf65;
|
||||
$color-yellow-300: #ffd629;
|
||||
$color-yellow-400: #ffce00;
|
||||
$color-yellow-500: #e5bd13;
|
||||
$color-yellow-600: #c9a611;
|
||||
$color-yellow-700: #FAE99F;
|
||||
$color-yellow-800: #F7DE6F;
|
||||
$color-yellow-900: #F5D33F;
|
||||
$color-yellow-1000: #B6960B;
|
||||
$color-yellow-1100: #796408;
|
||||
|
||||
$color-lightblue-100: #8ad4eb;
|
||||
$color-lightblue-200: #caf8ff;
|
||||
$color-lightblue-300: #b0f8ff;
|
||||
$color-lightblue-400: #73f8ff;
|
||||
$color-lightblue-500: #27e2dd;
|
||||
$color-lightblue-600: #1bb2a7;
|
||||
$color-lightblue-700: #D0EEF7;
|
||||
$color-lightblue-800: #B9E5F3;
|
||||
$color-lightblue-900: #A1DDEF;
|
||||
$color-lightblue-1000: #689FB0;
|
||||
$color-lightblue-1100: #456A76;
|
||||
|
||||
$color-orange-100: #fe9666;
|
||||
$color-orange-200: #ffcdbb;
|
||||
$color-orange-300: #f7a389;
|
||||
$color-orange-400: #f9724e;
|
||||
$color-orange-500: #DC5F31;
|
||||
$color-orange-600: #db220f;
|
||||
$color-orange-700: #FFD5C2;
|
||||
$color-orange-800: #FEC0A3;
|
||||
$color-orange-900: #FEAB85;
|
||||
$color-orange-1000: #BF714D;
|
||||
$color-orange-1100: #7F4B33;
|
||||
|
||||
$color-purple-100: #a66999;
|
||||
$color-purple-200: #efa5e1;
|
||||
$color-purple-300: #ea78d9;
|
||||
$color-purple-400: #e247db;
|
||||
$color-purple-500: #d313d3;
|
||||
$color-purple-600: #921e9b;
|
||||
$color-purple-700: #DFC5D9;
|
||||
$color-purple-800: #CAA5C2;
|
||||
$color-purple-900: #B887AD;
|
||||
$color-purple-1000: #7D4F73;
|
||||
$color-purple-1100: #53354D;
|
||||
|
||||
|
||||
// Alert Colors
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
/**
|
||||
* General constants
|
||||
*/
|
||||
|
||||
// Gutters
|
||||
|
||||
$gutter-xxsmall: 8px;
|
||||
$gutter-xsmall: 12px;
|
||||
$gutter-small: 16px;
|
||||
$gutter-normal: 20px;
|
||||
$gutter-big: 32px;
|
||||
$gutter-bigger: 40px;
|
||||
|
||||
// Grid size
|
||||
|
||||
$grid-size: 4px;
|
||||
|
||||
|
||||
// Z Index
|
||||
|
||||
$z-index-large-step: 1000;
|
||||
$z-index-medium-step: 100;
|
||||
$z-index-small-step: 10;
|
||||
|
||||
$z-index-content-layer: 0; // this constant is here for informative purposes - we should always assume content starts at 0
|
||||
$z-index-flyout-layer: $z-index-content-layer + 6 * $z-index-large-step;
|
||||
$z-index-interruptable-layer: $z-index-content-layer + 9 * $z-index-large-step;
|
||||
|
||||
$z-index-chart-tooltip: $z-index-content-layer + 1 * $z-index-small-step;
|
||||
$z-index-content-sidebar: $z-index-content-layer + 1 * $z-index-medium-step;
|
||||
$z-index-content-global-nav: $z-index-content-layer + 2 * $z-index-medium-step;
|
||||
$z-index-flyouts-masthead: $z-index-flyout-layer + 5 * $z-index-medium-step;
|
||||
$z-index-flyouts-dropdown: $z-index-flyout-layer + 6 * $z-index-medium-step;
|
||||
$z-index-flyouts-inline-btn: $z-index-flyout-layer + 7 * $z-index-medium-step;
|
||||
$z-index-tutorial-tips: $z-index-flyout-layer + 8 * $z-index-medium-step;
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
$icon-font-family: "icons";
|
||||
$icon-size-base: 16px;
|
||||
$icon-size-xsmall: $icon-size-base;
|
||||
$icon-size-small: 1 * $icon-size-base;
|
||||
$icon-size-medium: 2 * $icon-size-base;
|
||||
$icon-size-large: 3 * $icon-size-base;
|
||||
$icon-size-xlarge: 4 * $icon-size-base;
|
||||
$icon-size-xxlarge: 5 * $icon-size-base;
|
||||
|
||||
|
||||
// The basis for larger building blocks
|
||||
|
||||
$input-height: 8*$grid-size;
|
||||
$option-height: 8*$grid-size;
|
||||
$dropdown-max-height: 50*$grid-size;
|
||||
|
||||
|
||||
// Layout
|
||||
|
||||
$layout-nav-item-height: 48px;
|
||||
$layout-header-large-height: $layout-nav-item-height * 3;
|
||||
$layout-header-medium-height: $layout-nav-item-height * 2;
|
||||
$layout-header-small-height: $layout-nav-item-height;
|
||||
$layout-split-panel-width: 300px;
|
||||
$layout-thumbnail-size: 100px;
|
||||
$layout-centered-text-width: 400px;
|
||||
$layout-masthead-height: 48px;
|
||||
$layout-nav-collapsed-width: 48px;
|
||||
$layout-chart-y-axis-width: $gutter-bigger;
|
||||
$layout-chart-x-axis-height: $gutter-big;
|
||||
$layout-chart-axis-tick-size: 6px;
|
||||
|
||||
$nav-expanded-width: 220px;
|
||||
$nav-collapsed-width: $layout-nav-item-height;
|
||||
|
||||
|
||||
// Text overflow
|
||||
|
||||
.inline-text-overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
// Hidden
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -8,6 +8,11 @@
|
|||
/// @type String
|
||||
$default-prefix: 'theme' !default;
|
||||
|
||||
/// Interaction constants
|
||||
///
|
||||
$interaction-timing: 200ms;
|
||||
$clickable-scale: 0.9;
|
||||
|
||||
/// Creates theme variations
|
||||
///
|
||||
/// @param {Map} $themes - Theme map to loop through. Optional.
|
||||
|
|
@ -41,4 +46,47 @@ $default-prefix: 'theme' !default;
|
|||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
/// Clickable button animation
|
||||
///
|
||||
/// @param {Number} $scale - Clickable scale
|
||||
/// @param {Number} $duration - Interaction timing.
|
||||
///
|
||||
@mixin clickable($scale: $clickable-scale, $duration: $interaction-timing) {
|
||||
transition-property: transform, background-color !important;
|
||||
transition-duration: $duration !important;
|
||||
|
||||
transform: scale(1);
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
transform: scale($scale);
|
||||
}
|
||||
}
|
||||
|
||||
/// Right to left
|
||||
///
|
||||
@mixin rtl() {
|
||||
:global(.rtl) & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Box sizing
|
||||
///
|
||||
/// @param {String} $boxmodel - The box model e.g. border-box
|
||||
///
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
|
||||
/// WebKit-style focus
|
||||
///
|
||||
@mixin tab-focus() {
|
||||
// WebKit-specific. Other browsers will keep their default outline style.
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
/**
|
||||
* Normalize
|
||||
*/
|
||||
|
||||
@import "~normalize.css/normalize";
|
||||
@import "constants";
|
||||
@import "typography";
|
||||
@import "mixins";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: $font-family-default;
|
||||
font-size: $font-size-default;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// override bootstrap's vertical margins for headings since we override
|
||||
// heading sizes in overrides.scss
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: $gutter-small / 2;
|
||||
margin-bottom: $gutter-small / 2;
|
||||
}
|
||||
|
||||
// Headings
|
||||
// -------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $font-family-default;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: ($gutter-small / 2);
|
||||
margin-bottom: ($gutter-small / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-top: ($gutter-small / 2);
|
||||
margin-bottom: ($gutter-small / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
h2, .h2 { font-size: $font-size-h2; }
|
||||
h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 ($line-height-computed / 2);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:focus {
|
||||
@include tab-focus;
|
||||
}
|
||||
}
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: ($line-height-computed / 2);
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-top: 0; // Remove browser default
|
||||
margin-bottom: $line-height-computed;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* Typography constants
|
||||
*/
|
||||
|
||||
$font-size-h1: 36px;
|
||||
$font-size-h2: 24px;
|
||||
$font-size-h3: 18px;
|
||||
$font-size-h4: 18px;
|
||||
$font-size-h5: 16px;
|
||||
$font-size-default: 14px;
|
||||
$font-size-small: 12px;
|
||||
$font-size-xsmall: 10px;
|
||||
|
||||
$font-family-default: "Segoe UI Regular", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
|
||||
$font-family-light: "Segoe UI Semilight", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
|
||||
$font-family-din-regular: join('DIN-Regular', $font-family-default);
|
||||
|
||||
$headings-font-weight: normal;
|
||||
$headings-line-height: 1.5;
|
||||
|
||||
// Unit-less line-height for use in components like buttons. Taken from bootstrap.
|
||||
$line-height-base: 1.428571429 !default; // ~20/14
|
||||
|
||||
// Computed line-height (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: floor(($font-size-default * $line-height-base)) !default; // ~20px
|
||||
|
|
@ -48,8 +48,8 @@ $theme-dark: map-merge((
|
|||
color-bg-gallery-tile-banner: $color-black,
|
||||
color-bg-gallery-tile-default: $color-grey-1200,
|
||||
color-bg-gallery-tile-blue: $color-blue-400,
|
||||
color-bg-gallery-tile-red: $color-red-310,
|
||||
color-bg-gallery-tile-yellow: $color-yellow-409,
|
||||
color-bg-gallery-tile-red: $color-red-600,
|
||||
color-bg-gallery-tile-yellow: $color-yellow-1000,
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-1500,
|
||||
|
|
@ -70,6 +70,16 @@ $theme-dark: map-merge((
|
|||
color-text-clear: $color-white,
|
||||
color-text-placeholder: $color-grey-400,
|
||||
|
||||
// Dropdowns
|
||||
color-dropdown-rest: $color-grey-1500,
|
||||
color-dropdown-hover: $color-grey-1500,
|
||||
color-dropdown-focus: $color-grey-1400,
|
||||
color-dropdown-pressed: $color-grey-700,
|
||||
color-dropdown-disabled: $color-grey-1500,
|
||||
color-border-dropdown-rest: $color-blue-100,
|
||||
color-border-dropdown-focus: $color-grey-100,
|
||||
color-dropdown-disabled-text: $color-grey-500,
|
||||
|
||||
// Radio button
|
||||
color-bg-radio-btn-rest: $color-grey-1400,
|
||||
color-bg-radio-btn-hover: $color-grey-1400,
|
||||
|
|
@ -94,7 +104,7 @@ $theme-dark: map-merge((
|
|||
color-bg-toggle-btn-focus-off: $color-white,
|
||||
color-bg-toggle-btn-disabled-on: $color-grey-300,
|
||||
color-bg-toggle-btn-disabled-off: $color-grey-100,
|
||||
color-border-toggle-btn-rest-on: $color-white,
|
||||
color-border-toggle-btn-rest-on: $color-blue-500,
|
||||
color-border-toggle-btn-rest-off: $color-grey-600,
|
||||
color-border-toggle-btn-hover-on: $color-blue-300,
|
||||
color-border-toggle-btn-hover-off: $color-grey-600,
|
||||
|
|
@ -111,6 +121,24 @@ $theme-dark: map-merge((
|
|||
color-circle-toggle-btn-disabled-on: $color-grey-500,
|
||||
color-circle-toggle-btn-disabled-off: $color-grey-500,
|
||||
|
||||
// Checkbox
|
||||
color-bg-checkbox-focused: $color-grey-1400,
|
||||
color-bg-checkbox-selected-hover: $color-blue-300,
|
||||
color-bg-checkbox-pressed-selected: $color-blue-100,
|
||||
color-bg-checkbox-disabled: $color-grey-1100,
|
||||
color-border-checkbox-hover: $color-grey-600,
|
||||
color-border-checkbox-focused: $color-grey-600,
|
||||
color-border-checkbox-selected-hover: $color-blue-300,
|
||||
color-border-checkbox-pressed-selected: $color-blue-100,
|
||||
color-border-checkbox-disabled-selected: $color-grey-1100,
|
||||
color-border-checkbox-disabled: $color-grey-1000,
|
||||
|
||||
// Calendar
|
||||
color-bg-calendar-btn-current: $color-blue-100,
|
||||
color-bg-calendar-btn-hover: $color-grey-700,
|
||||
color-bg-calendar-btn-focus: $color-transparent,
|
||||
color-border-calendar-btn-focus: $color-grey-600,
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-700,
|
||||
color-border-hover: $color-blue-100,
|
||||
|
|
@ -144,12 +172,28 @@ $theme-dark: map-merge((
|
|||
color-bg-btn-primary-pressed-selected: $color-blue-300,
|
||||
color-bg-btn-primary-disabled: $color-grey-1100,
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-307,
|
||||
color-bg-btn-danger-hover: $color-red-308,
|
||||
color-bg-btn-danger-focus: $color-red-307,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-310,
|
||||
color-bg-btn-danger-rest: $color-red-400,
|
||||
color-bg-btn-danger-hover: $color-red-500,
|
||||
color-bg-btn-danger-focus: $color-red-400,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-600,
|
||||
color-bg-btn-danger-disabled: $color-grey-200,
|
||||
|
||||
// Layout Buttons
|
||||
color-bg-btn-layout-rest: $color-grey-1500,
|
||||
color-bg-btn-layout-hover: $color-grey-700,
|
||||
color-bg-btn-layout-focus: $color-grey-1400,
|
||||
color-bg-btn-layout-pressed-selected: $color-grey-1000,
|
||||
color-bg-btn-layout-disabled: $color-grey-1100,
|
||||
color-bg-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-rest: $color-blue-100,
|
||||
color-border-btn-layout-hover: $color-grey-700,
|
||||
color-border-btn-layout-focus: $color-white,
|
||||
color-border-btn-layout-pressed-selected: $color-grey-1000,
|
||||
color-border-btn-layout-disabled: $color-grey-1100,
|
||||
color-border-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
|
||||
// Hyperlinks
|
||||
color-text-hyperlink-rest: $color-blue-500,
|
||||
color-text-hyperlink-hover: $color-blue-600,
|
||||
|
|
@ -173,6 +217,7 @@ $theme-dark: map-merge((
|
|||
color-text-pivot-tab-device-focus: $color-white,
|
||||
color-text-pivot-tab-device-press: $color-grey-100,
|
||||
color-text-pivot-tab-device-selected: $color-white,
|
||||
color-border-pivot-tab: $color-blue-100,
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400,
|
||||
|
|
@ -188,47 +233,47 @@ $theme-dark: map-merge((
|
|||
color-picker-border-outer: $color-error-global-100,
|
||||
|
||||
// Data color
|
||||
data-color-1: #01b8aa,
|
||||
data-color-2: #6be8dc,
|
||||
data-color-3: #59cec3,
|
||||
data-color-4: #08bca6,
|
||||
data-color-5: #0aa58e,
|
||||
data-color-6: #12937d,
|
||||
data-color-7: #ffffff,
|
||||
data-color-8: #f2f2f2,
|
||||
data-color-9: #e6e6e6,
|
||||
data-color-10: #cccccc,
|
||||
data-color-11: #b3b3b3,
|
||||
data-color-12: #999999,
|
||||
data-color-13: #fd625e,
|
||||
data-color-14: #ff7878,
|
||||
data-color-15: #fc5454,
|
||||
data-color-16: #fc3232,
|
||||
data-color-17: #e81818,
|
||||
data-color-18: #b21f1f,
|
||||
data-color-19: #f2c80f,
|
||||
data-color-20: #fcdf65,
|
||||
data-color-21: #ffd629,
|
||||
data-color-22: #ffce00,
|
||||
data-color-23: #e5bd13,
|
||||
data-color-24: #c9a611,
|
||||
data-color-25: #8ad4eb,
|
||||
data-color-26: #caf8ff,
|
||||
data-color-27: #b0f8ff,
|
||||
data-color-28: #73f8ff,
|
||||
data-color-29: #27e2dd,
|
||||
data-color-30: #1bb2a7,
|
||||
data-color-31: #fe9666,
|
||||
data-color-32: #ffcdbb,
|
||||
data-color-33: #f7a389,
|
||||
data-color-34: #f98855,
|
||||
data-color-35: #f9724e,
|
||||
data-color-36: #bf714d,
|
||||
data-color-37: #a66999,
|
||||
data-color-38: #efa5e1,
|
||||
data-color-39: #ea78d9,
|
||||
data-color-40: #e247db,
|
||||
data-color-41: #d313d3,
|
||||
data-color-42: #921e9b,
|
||||
data-color-1: $color-green-100,
|
||||
data-color-2: $color-green-200,
|
||||
data-color-3: $color-green-300,
|
||||
data-color-4: $color-green-400,
|
||||
data-color-5: $color-green-500,
|
||||
data-color-6: $color-green-600,
|
||||
data-color-7: $color-lightgrey-100,
|
||||
data-color-8: $color-lightgrey-200,
|
||||
data-color-9: $color-lightgrey-300,
|
||||
data-color-10: $color-lightgrey-400,
|
||||
data-color-11: $color-lightgrey-500,
|
||||
data-color-12: $color-lightgrey-600,
|
||||
data-color-13: $color-red-100,
|
||||
data-color-14: $color-red-200,
|
||||
data-color-15: $color-red-300,
|
||||
data-color-16: $color-red-400,
|
||||
data-color-17: $color-red-500,
|
||||
data-color-18: $color-red-600,
|
||||
data-color-19: $color-yellow-100,
|
||||
data-color-20: $color-yellow-200,
|
||||
data-color-21: $color-yellow-300,
|
||||
data-color-22: $color-yellow-400,
|
||||
data-color-23: $color-yellow-500,
|
||||
data-color-24: $color-yellow-600,
|
||||
data-color-25: $color-lightblue-100,
|
||||
data-color-26: $color-lightblue-200,
|
||||
data-color-27: $color-lightblue-300,
|
||||
data-color-28: $color-lightblue-400,
|
||||
data-color-29: $color-lightblue-500,
|
||||
data-color-30: $color-lightblue-600,
|
||||
data-color-31: $color-orange-100,
|
||||
data-color-32: $color-orange-200,
|
||||
data-color-33: $color-orange-300,
|
||||
data-color-34: $color-orange-400,
|
||||
data-color-35: $color-orange-500,
|
||||
data-color-36: $color-orange-600,
|
||||
data-color-37: $color-purple-100,
|
||||
data-color-38: $color-purple-200,
|
||||
data-color-39: $color-purple-300,
|
||||
data-color-40: $color-purple-400,
|
||||
data-color-41: $color-purple-500,
|
||||
data-color-42: $color-purple-600,
|
||||
|
||||
), $theme-dark);
|
||||
Двоичный файл не отображается.
Двоичный файл не отображается.
|
|
@ -12,11 +12,11 @@ $theme-light: map-merge((
|
|||
|
||||
// Layouts
|
||||
color-bg-navbar: $color-grey-900,
|
||||
color-bg-navbar-hover: $color-grey-200,
|
||||
color-bg-navbar-hover: $color-grey-600,
|
||||
color-bg-header: $color-grey-100,
|
||||
color-bg-header-hover: $color-grey-200,
|
||||
color-bg-header-hover: $color-grey-600,
|
||||
color-bg-masthead: $color-grey-1300,
|
||||
color-bg-masthead-hover: $color-grey-200,
|
||||
color-bg-masthead-hover: $color-grey-600,
|
||||
|
||||
// Surfaces
|
||||
color-bg-panel-primary: $color-grey-100,
|
||||
|
|
@ -48,8 +48,8 @@ $theme-light: map-merge((
|
|||
color-bg-gallery-tile-banner: $color-black,
|
||||
color-bg-gallery-tile-default: $color-grey-200,
|
||||
color-bg-gallery-tile-blue: $color-blue-100,
|
||||
color-bg-gallery-tile-red: $color-red-308,
|
||||
color-bg-gallery-tile-yellow: $color-yellow-407,
|
||||
color-bg-gallery-tile-red: $color-red-500,
|
||||
color-bg-gallery-tile-yellow: $color-yellow-500,
|
||||
|
||||
// Dashboard Tiles
|
||||
color-bg-dashboard-tile: $color-grey-100,
|
||||
|
|
@ -70,6 +70,16 @@ $theme-light: map-merge((
|
|||
color-text-clear: $color-black,
|
||||
color-text-placeholder: $color-grey-400,
|
||||
|
||||
// Dropdowns
|
||||
color-dropdown-rest: $color-white,
|
||||
color-dropdown-hover: $color-grey-100,
|
||||
color-dropdown-focus: $color-grey-100,
|
||||
color-dropdown-pressed: $color-grey-200,
|
||||
color-dropdown-disabled: $color-white,
|
||||
color-border-dropdown-rest: $color-blue-100,
|
||||
color-border-dropdown-focus: $color-grey-600,
|
||||
color-dropdown-disabled-text: $color-grey-400,
|
||||
|
||||
// Radio button
|
||||
color-bg-radio-btn-rest: $color-white,
|
||||
color-bg-radio-btn-hover: $color-white,
|
||||
|
|
@ -111,6 +121,24 @@ $theme-light: map-merge((
|
|||
color-circle-toggle-btn-disabled-on: $color-grey-500,
|
||||
color-circle-toggle-btn-disabled-off: $color-grey-500,
|
||||
|
||||
// Checkbox
|
||||
color-bg-checkbox-focused: $color-white,
|
||||
color-bg-checkbox-selected-hover: $color-blue-300,
|
||||
color-bg-checkbox-pressed-selected: $color-blue-100,
|
||||
color-bg-checkbox-disabled: $color-white,
|
||||
color-border-checkbox-hover: $color-grey-1200,
|
||||
color-border-checkbox-focused: $color-grey-1200,
|
||||
color-border-checkbox-selected-hover: $color-blue-300,
|
||||
color-border-checkbox-pressed-selected: $color-blue-100,
|
||||
color-border-checkbox-disabled-selected: $color-grey-300,
|
||||
color-border-checkbox-disabled: $color-grey-300,
|
||||
|
||||
// Calendar
|
||||
color-bg-calendar-btn-current: $color-blue-100,
|
||||
color-bg-calendar-btn-hover: $color-grey-200,
|
||||
color-bg-calendar-btn-focus: $color-transparent,
|
||||
color-border-calendar-btn-focus: $color-grey-600,
|
||||
|
||||
// General Borders
|
||||
color-border-rest: $color-grey-300,
|
||||
color-border-hover: $color-blue-100,
|
||||
|
|
@ -144,12 +172,28 @@ $theme-light: map-merge((
|
|||
color-bg-btn-primary-pressed-selected: $color-blue-300,
|
||||
color-bg-btn-primary-disabled: $color-grey-100,
|
||||
|
||||
color-bg-btn-danger-rest: $color-red-307,
|
||||
color-bg-btn-danger-hover: $color-red-308,
|
||||
color-bg-btn-danger-focus: $color-red-307,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-310,
|
||||
color-bg-btn-danger-rest: $color-red-400,
|
||||
color-bg-btn-danger-hover: $color-red-500,
|
||||
color-bg-btn-danger-focus: $color-red-400,
|
||||
color-bg-btn-danger-pressed-selected: $color-red-600,
|
||||
color-bg-btn-danger-disabled: $color-grey-200,
|
||||
|
||||
// Layout Buttons
|
||||
color-bg-btn-layout-rest: $color-white,
|
||||
color-bg-btn-layout-hover: $color-grey-600,
|
||||
color-bg-btn-layout-focus: $color-grey-100,
|
||||
color-bg-btn-layout-pressed-selected: $color-grey-300,
|
||||
color-bg-btn-layout-disabled: $color-grey-200,
|
||||
color-bg-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-rest: $color-blue-100,
|
||||
color-border-btn-layout-hover: $color-grey-600,
|
||||
color-border-btn-layout-focus: $color-grey-600,
|
||||
color-border-btn-layout-pressed-selected: $color-grey-300,
|
||||
color-border-btn-layout-disabled: $color-grey-200,
|
||||
color-border-btn-layout-header-pressed-selected: $color-grey-1200,
|
||||
color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
|
||||
|
||||
// Hyperlinks
|
||||
color-text-hyperlink-rest: $color-blue-200,
|
||||
color-text-hyperlink-hover: $color-blue-400,
|
||||
|
|
@ -173,6 +217,7 @@ $theme-light: map-merge((
|
|||
color-text-pivot-tab-device-focus: $color-grey-1200,
|
||||
color-text-pivot-tab-device-press: $color-black,
|
||||
color-text-pivot-tab-device-selected: $color-grey-1200,
|
||||
color-border-pivot-tab: $color-blue-100,
|
||||
|
||||
// Charts
|
||||
color-chart-X-Y-lines: $color-grey-400,
|
||||
|
|
@ -188,47 +233,47 @@ $theme-light: map-merge((
|
|||
color-picker-border-outer: $color-error-global-100,
|
||||
|
||||
// Data colors
|
||||
data-color-1: #01B8AA,
|
||||
data-color-2: #99E3DD,
|
||||
data-color-3: #67D4CC,
|
||||
data-color-4: #34C6BB,
|
||||
data-color-5: #018A80,
|
||||
data-color-6: #015C55,
|
||||
data-color-7: #374649,
|
||||
data-color-8: #AFB5B6,
|
||||
data-color-9: #879092,
|
||||
data-color-10: #5F6B6D,
|
||||
data-color-11: #293537,
|
||||
data-color-12: #1C2325,
|
||||
data-color-13: #FD625E,
|
||||
data-color-14: #FEC0BF,
|
||||
data-color-15: #FEA19E,
|
||||
data-color-16: #FD817E,
|
||||
data-color-17: #BE4A47,
|
||||
data-color-18: #7F312F,
|
||||
data-color-19: #F2C80F,
|
||||
data-color-20: #FAE99F,
|
||||
data-color-21: #F7DE6F,
|
||||
data-color-22: #F5D33F,
|
||||
data-color-23: #B6960B,
|
||||
data-color-24: #796408,
|
||||
data-color-25: #8AD4EB,
|
||||
data-color-26: #D0EEF7,
|
||||
data-color-27: #B9E5F3,
|
||||
data-color-28: #A1DDEF,
|
||||
data-color-29: #689FB0,
|
||||
data-color-30: #456A76,
|
||||
data-color-31: #FE9666,
|
||||
data-color-32: #FFD5C2,
|
||||
data-color-33: #FEC0A3,
|
||||
data-color-34: #FEAB85,
|
||||
data-color-35: #BF714D,
|
||||
data-color-36: #7F4B33,
|
||||
data-color-37: #A66999,
|
||||
data-color-38: #DBC3D6,
|
||||
data-color-39: #CAA5C2,
|
||||
data-color-40: #B887AD,
|
||||
data-color-41: #7D4F73,
|
||||
data-color-42: #53354D,
|
||||
data-color-1: $color-green-100,
|
||||
data-color-2: $color-green-700,
|
||||
data-color-3: $color-green-800,
|
||||
data-color-4: $color-green-900,
|
||||
data-color-5: $color-green-1000,
|
||||
data-color-6: $color-green-1100,
|
||||
data-color-7: $color-lightgrey-700,
|
||||
data-color-8: $color-lightgrey-800,
|
||||
data-color-9: $color-lightgrey-900,
|
||||
data-color-10: $color-lightgrey-1000,
|
||||
data-color-11: $color-lightgrey-1100,
|
||||
data-color-12: $color-lightgrey-1200,
|
||||
data-color-13: $color-red-100,
|
||||
data-color-14: $color-red-700,
|
||||
data-color-15: $color-red-800,
|
||||
data-color-16: $color-red-900,
|
||||
data-color-17: $color-red-1000,
|
||||
data-color-18: $color-red-1100,
|
||||
data-color-19: $color-yellow-100,
|
||||
data-color-20: $color-yellow-700,
|
||||
data-color-21: $color-yellow-800,
|
||||
data-color-22: $color-yellow-900,
|
||||
data-color-23: $color-yellow-1000,
|
||||
data-color-24: $color-yellow-1100,
|
||||
data-color-25: $color-lightblue-100,
|
||||
data-color-26: $color-lightblue-700,
|
||||
data-color-27: $color-lightblue-800,
|
||||
data-color-28: $color-lightblue-900,
|
||||
data-color-29: $color-lightblue-1000,
|
||||
data-color-30: $color-lightblue-1100,
|
||||
data-color-31: $color-orange-100,
|
||||
data-color-32: $color-orange-700,
|
||||
data-color-33: $color-orange-800,
|
||||
data-color-34: $color-orange-900,
|
||||
data-color-35: $color-orange-1000,
|
||||
data-color-36: $color-orange-1100,
|
||||
data-color-37: $color-purple-100,
|
||||
data-color-38: $color-purple-700,
|
||||
data-color-39: $color-purple-800,
|
||||
data-color-40: $color-purple-900,
|
||||
data-color-41: $color-purple-1000,
|
||||
data-color-42: $color-purple-1100,
|
||||
|
||||
), $theme-light);
|
||||
Загрузка…
Ссылка в новой задаче