autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
hubl/src/styles/abstracts/_variables.scss

144 lines
7.0 KiB
SCSS
Raw Normal View History

css: refactoring & fixing - day 1
2019-05-13 16:50:34 +00:00
// Color Variables
feature: css variables
2020-05-11 18:20:13 +00:00
:root {
--color-primary: #FF6765;
--color-secondary: #46271B;
--color-complementary: #5BB4CE;
--color-complementary-darken: #35A0C0;
--color-white: hsl(0, 0%, 100%);
--color-black-h: 16;
--color-black-s: 45%;
--color-black-l: 6%;
--color-black: hsl(var(--color-black-h), var(--color-black-s), var(--color-black-l)); /* 180D09 */
/* Fifty shades of greys */
--color-grey-1: hsl(calc(var(--color-black-h) + 200), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 16%)); /*hsl(216, 4%, 22%); #36383B */
--color-grey-2: hsl(calc(var(--color-black-h) + 217), calc(var(--color-black-s) - 27%), calc(var(--color-black-l) + 23%)); /*hsl(233, 18%, 29%); #3C3F57 */
--color-grey-3: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 23%)); /*hsl(0, 0%, 29%); #4A4A4A */
--color-grey-4: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 43%), calc(var(--color-black-l) + 43%)); /*hsl(0, 2%, 49%); #807A7A */
--color-grey-5: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 44%)); /*hsl(213, 4%, 50%); #7A7F85 */
--color-grey-6: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 57%)); /*hsl(0, 4%, 63%); #A59D9D */
--color-grey-7: hsl(calc(var(--color-black-h) + 228), calc(var(--color-black-s) + 35%), calc(var(--color-black-l) + 64%)); /*hsl(244, 10%, 70%); #ABAABA */
--color-grey-8: hsl(calc(var(--color-black-h) + 212), calc(var(--color-black-s) - 20%), calc(var(--color-black-l) + 73%)); /*hsl(228, 25%, 79%); #BDC2D7 */
--color-grey-9: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 36%), calc(var(--color-black-l) + 76%)); /*hsl(0, 9%, 82%); #D6CECE */
--color-grey-10: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 42%), calc(var(--color-black-l) + 87%)); /*hsl(0, 3%, 93%); #EEEDED */
--color-grey-11: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 32%), calc(var(--color-black-l) + 80%)); /*hsl(213, 13%, 86%); #D7DBE0 */
--color-grey-12: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 25%), calc(var(--color-black-l) + 85%)); /*hsl(213, 20%, 91%); #E4E8ED */
--color-grey-13: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 90%)); /*hsl(0, 0%, 96%); #F4F4F4 */
/* CUSTOM COLORS FOR CLIENT */
--color-main-background: var(--color-grey-13);
--color-main-text: var(--color-grey-4);
--color-highlight-primary: var(--color-primary);
--color-user-panel: var(--color-black);
--color-bell: var(--color-secondary);
update: header ok
2020-05-13 07:25:33 +00:00
--color-avatar-background: var(--color-grey-10);
feature: css variables
2020-05-11 18:20:13 +00:00
--color-title: var(--color-secondary);
--color-h1: var(--color-secondary);
--color-h2: var(--color-secondary);
/* Header's elements */
--color-header-background: var(--color-white);
--color-bell: var(--color-secondary);
--color-user-panel-header-text: var(--color-secondary);
--color-user-panel-header-background: var(--color-white);
--color-user-panel-header-text-open: var(--color-white);
--color-user-panel-header-background-open: var(--color-secondary);
--color-user-panel-list-background: var(--color-white);
--color-user-panel-list-text-hover: var(--color-primary);
--color-user-panel-list-border: var(--color-grey-12);
/* Left menu */
--color-menu-highlight-primary: var(--color-highlight-primary);
--color-menu-background: var(--color-secondary);
--color-menu-text: var(--color-white);
--color-menu-text-active: var(--color-white);
--color-menu-background-active: var(--color-menu-highlight-primary);
--color-menu-badge-background: var(--color-secondary);
--color-menu-badge-text-active: var(--color-menu-text-active);
--color-menu-badge-background-active: var(--color-complementary);
--color-menu-icon-background-active: var(--color-secondary);
/* Right menu */
--color-right-menu-background: var(--color-grey-10);
--color-right-menu-text: var(--color-secondary);
--color-right-menu-link-border: var(--color-grey-9);
--color-right-menu-active-text: var(--color-white);
--color-right-menu-active-background: var(--color-secondary);
--color-right-menu-active-icon: var(--color-white);
/* Scrollbar */
--color-scrollbar-right-background: var(--color-white);
--color-scrollbar-right-track: var(--color-grey-9);
--color-scrollbar-left-background: var(--color-secondary);
--color-scrollbar-left-track: var(--color-grey-11);
update: table - scrollvar ok
2020-06-10 10:22:22 +00:00
--color-scrollbar-table-background: var(--color-grey-10);
--color-scrollbar-table-track: var(--color-secondary);
feature: css variables
2020-05-11 18:20:13 +00:00
/* tags */
--color-tag-admin-text: var(--color-complementary);
--color-tag-admin-border: var(--color-complementary);
/* Form elements */
--color-button-white: var(--color-white);
--color-button-primary: var(--color-primary);
--color-button-secondary: var(--color-secondary);
--color-button-complementary: var(--color-complementary);
--color-input-background: var(--color-grey-10);
--color-input-text: var(--color-secondary);
--color-input-icon: var(--color-secondary);
--color-input-active: var(--color-secondary);
--color-fieldset: var(--color-title);
--color-fieldset-border: var(--color-grey-10);
--color-button-modal: var(--color-title);
--color-select-list: var(--color-secondary);
--color-select-add-button: var(--color-button-secondary);
--color-select-add-button-background: var(--color-button-white);
--color-label-light: var(--color-grey-6);
/* skill */
--color-skill-background: var(--color-primary);
--color-skill-text: var(--color-white);
/* icon */
--color-icon: var(--color-complementary);
/* Table */
--color-table-header-background: var(--color-grey-6);
--color-table-header-text: var(--color-white);
--color-table-border: var(--color-grey-8);
/* User thumb */
--color-user-thumb-name: var(--color-grey-4);
--color-backlink: var(--color-secondary);
--color-content-header: var(--color-grey-9);
feature: job board : colors variables
2020-06-16 00:01:21 +00:00
Merge branch 'release/job-board' into feature/job-board
2020-06-16 15:25:45 +00:00
/* job board */
--color-job-board-primary: var(--color-primary) !important;
--color-job-board-secondary: var(--color-secondary)!important;
--color-job-board-complementary: var(--color-complementary)!important;
--color-job-board-complementary-darken: var(--color-complementary-darken)!important;
--color-job-board-white: var(--color-white)!important;
--color-job-board-black-1: var(--color-black)!important;
--color-job-board-grey-10: #E4E8ED !important; // for some reason with the var it doesh't work var(--color-grey-12) !important;
fix: colors for directory
2020-06-12 23:50:44 +00:00
/* directory */
hotfix: variable color
2020-06-13 14:33:45 +00:00
--color-directory-primary: var(--color-primary)!important;
--color-directory-secondary: var(--color-secondary)!important;
--color-directory-complementary: var(--color-complementary)!important;
--color-directory-complementary-darken: var(--color-complementary-darken)!important;
--color-directory-white: var(--color-white)!important;
--color-directory-black: var(--color-black)!important;
feature: css variables
2020-05-11 18:20:13 +00:00
}
/* Variables for event */
ui : update Fonts + colors
2020-02-04 12:38:28 +00:00
$color-212-4-50: hsl(212.7,4.3%,50%);
$color-0-0-22: hsl(0,0%,22.7%);
init css file + font
2020-02-04 11:25:58 +00:00
$color-203-87-19: hsl(203, 87.8%, 19.2%);
feature: job board : colors variables
2020-06-16 00:01:21 +00:00
$color-357-67-45: hsl(357,67.5%,45.9%);