feature: css variables
This commit is contained in:
Gaëlle Morin
Jean-Baptiste Pasquier
parent
607de5dc13
commit
0496ee9014
10
client.sample.css
Normal file
10
client.sample.css
Normal file
@ -0,0 +1,10 @@
|
||||
:root {
|
||||
--color-primary: #FF6765;
|
||||
--color-secondary: #46271B;
|
||||
--color-complementary: #5BB4CE;
|
||||
--color-complementary-darken: #35A0C0;
|
||||
|
||||
--color-black-s: 45%;
|
||||
--color-black-h: 16;
|
||||
--color-black-l: 6%;
|
||||
}
|
||||
176
client.sample.happy-dev.css
Normal file
176
client.sample.happy-dev.css
Normal file
@ -0,0 +1,176 @@
|
||||
:root {
|
||||
--color-primary: #FFB700;
|
||||
--color-secondary: #3C3F57;
|
||||
--color-complementary: #6259E5;
|
||||
--color-complementary-darken: #36383B;
|
||||
--color-white: #FFFFFF;
|
||||
|
||||
--color-black-h: 216;
|
||||
--color-black-s: 4%;
|
||||
--color-black-l: 22%;
|
||||
|
||||
--color-main-background: var(--color-grey-13);
|
||||
--color-main-text: #7A7F85;
|
||||
--color-highlight-primary: var(--color-primary);
|
||||
--color-user-panel: var(--color-black);
|
||||
--color-bell: var(--color-secondary);
|
||||
--color-avatar-background: #E4E8ED;
|
||||
--color-title: #36383B;
|
||||
--color-h1: var(--color-title);
|
||||
--color-h2: var(--color-title);
|
||||
|
||||
/* Header's elements */
|
||||
--color-header-background: var(--color-white);
|
||||
--color-bell: var(--color-complementary-darken);
|
||||
--color-user-panel-header-text: var(--color-complementary-darken);
|
||||
--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-complementary);
|
||||
--color-user-panel-list-border: #E4E8ED;
|
||||
|
||||
/* Left menu */
|
||||
--color-menu-highlight-primary: #FFD759;
|
||||
--color-menu-background: var(--color-secondary);
|
||||
--color-menu-text: var(--color-white);
|
||||
--color-menu-text-active: var(--color-secondary);
|
||||
--color-menu-background-active: var(--color-menu-highlight-primary);
|
||||
--color-menu-badge-background: var(--color-menu-highlight-primary);
|
||||
--color-menu-badge-text-active: var(--color-menu-highlight-primary);
|
||||
--color-menu-badge-background-active: var(--color-secondary);
|
||||
--color-menu-icon-background-active: var(--color-secondary);
|
||||
|
||||
/* Right menu */
|
||||
--color-right-menu-background: #DAE2F3;
|
||||
--color-right-menu-text: var(--color-secondary);
|
||||
--color-right-menu-link-border: #BDC2D7;
|
||||
--color-right-menu-active-text: var(--color-primary);
|
||||
--color-right-menu-active-background: var(--color-secondary);
|
||||
--color-right-menu-active-icon: var(--color-primary);
|
||||
|
||||
/* Scrollbar */
|
||||
--color-scrollbar-right-background: var(--color-white);
|
||||
--color-scrollbar-right-track: var(--color-grey-6);
|
||||
--color-scrollbar-left-background: var(--color-secondary);
|
||||
--color-scrollbar-left-track: var(--color-grey-11);
|
||||
|
||||
/* Tags */
|
||||
--color-tag-admin-text: var(--color-complementary);
|
||||
--color-tag-admin-border: var(--color-complementary);
|
||||
--color-tag-group-text: #9BA0A7;
|
||||
--color-tag-group-border: var(--color-primary);
|
||||
|
||||
/* Form elements */
|
||||
--color-button-white: var(--color-white);
|
||||
--color-button-primary: var(--color-primary);
|
||||
--color-button-secondary: var(--color-complementary);
|
||||
--color-button-complementary: var(--color-secondary);
|
||||
|
||||
--color-input-background: #EDF1FA;
|
||||
--color-input-text: var(--color-secondary);
|
||||
--color-input-icon: var(--color-complementary);
|
||||
--color-input-active: var(--color-complementary);
|
||||
--color-fieldset: var(--color-title);
|
||||
--color-fieldset-border: #DAE2F3;
|
||||
--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-dark: var(--color-complementary);
|
||||
--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-primary);
|
||||
|
||||
/* Table */
|
||||
--color-table-header-background: #BDC2D7;
|
||||
--color-table-header-text: var(--color-white);
|
||||
--color-table-border: #BDC2D7;
|
||||
|
||||
/* User thumb */
|
||||
--color-user-thumb-name: #7A7F85;
|
||||
|
||||
--color-backlink: var(--color-secondary);
|
||||
--color-content-header: #DAE2F3;
|
||||
|
||||
/* Chat */
|
||||
--color-chat-white: var(--color-white);
|
||||
--color-chat-primary: var(--color-primary);
|
||||
--color-chat-complementary: var(--color-complementary);
|
||||
--color-chat-secondary: var(--color-secondary);
|
||||
--color-chat-complementary-darken: var(--color-complementary-darken);
|
||||
--color-chat-grey-1: var(--color-grey-4);
|
||||
--color-chat-grey-2: var(--color-grey-6);
|
||||
--color-chat-grey-3: var(--color-grey-10);
|
||||
}
|
||||
|
||||
/* Button to edit a channel or a project (in project-profile) */
|
||||
#project sib-link[next="project-edit"],
|
||||
#circle sib-link[next="circle-edit"] {
|
||||
background: var(--color-complementary);
|
||||
border: 1px solid var(--color-complementary);
|
||||
}
|
||||
|
||||
#project sib-link[next="project-edit"]:hover,
|
||||
#circle sib-link[next="circle-edit"]:hover {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-complementary);
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
/* Button to delete a channel */
|
||||
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-complementary);
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button {
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover {
|
||||
background: var(--color-complementary);
|
||||
border: 1px solid var(--color-complementary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* Button with a pen to edit a user */
|
||||
#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link {
|
||||
background: var(--color-complementary);
|
||||
border: 1px solid var(--color-complementary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link:hover {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-complementary);
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
/* Button to join a channel */
|
||||
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form {
|
||||
background: var(--color-complementary);
|
||||
border: 1px solid var(--color-complementary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-complementary);
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover input {
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
274
package-lock.json
generated
274
package-lock.json
generated
@ -36,21 +36,22 @@
|
||||
}
|
||||
},
|
||||
"@babel/core": {
|
||||
"version": "7.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.4.tgz",
|
||||
"integrity": "sha512-0LiLrB2PwrVI+a2/IEskBopDYSd8BCb3rOvH7D5tzoWd696TBEduBvuLVm4Nx6rltrLZqvI3MCalB2K2aVzQjA==",
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
|
||||
"integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.8.3",
|
||||
"@babel/generator": "^7.8.4",
|
||||
"@babel/helpers": "^7.8.4",
|
||||
"@babel/parser": "^7.8.4",
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/traverse": "^7.8.4",
|
||||
"@babel/types": "^7.8.3",
|
||||
"@babel/generator": "^7.9.0",
|
||||
"@babel/helper-module-transforms": "^7.9.0",
|
||||
"@babel/helpers": "^7.9.0",
|
||||
"@babel/parser": "^7.9.0",
|
||||
"@babel/template": "^7.8.6",
|
||||
"@babel/traverse": "^7.9.0",
|
||||
"@babel/types": "^7.9.0",
|
||||
"convert-source-map": "^1.7.0",
|
||||
"debug": "^4.1.0",
|
||||
"gensync": "^1.0.0-beta.1",
|
||||
"json5": "^2.1.0",
|
||||
"json5": "^2.1.2",
|
||||
"lodash": "^4.17.13",
|
||||
"resolve": "^1.3.2",
|
||||
"semver": "^5.4.1",
|
||||
@ -73,24 +74,24 @@
|
||||
}
|
||||
},
|
||||
"@babel/generator": {
|
||||
"version": "7.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.4.tgz",
|
||||
"integrity": "sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz",
|
||||
"integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.3",
|
||||
"@babel/types": "^7.9.5",
|
||||
"jsesc": "^2.5.1",
|
||||
"lodash": "^4.17.13",
|
||||
"source-map": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"@babel/helper-function-name": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz",
|
||||
"integrity": "sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
|
||||
"integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
|
||||
"requires": {
|
||||
"@babel/helper-get-function-arity": "^7.8.3",
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/types": "^7.8.3"
|
||||
"@babel/types": "^7.9.5"
|
||||
}
|
||||
},
|
||||
"@babel/helper-get-function-arity": {
|
||||
@ -101,6 +102,64 @@
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-member-expression-to-functions": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
|
||||
"integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-imports": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
|
||||
"integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-transforms": {
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
|
||||
"integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.8.3",
|
||||
"@babel/helper-replace-supers": "^7.8.6",
|
||||
"@babel/helper-simple-access": "^7.8.3",
|
||||
"@babel/helper-split-export-declaration": "^7.8.3",
|
||||
"@babel/template": "^7.8.6",
|
||||
"@babel/types": "^7.9.0",
|
||||
"lodash": "^4.17.13"
|
||||
}
|
||||
},
|
||||
"@babel/helper-optimise-call-expression": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
|
||||
"integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-replace-supers": {
|
||||
"version": "7.8.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz",
|
||||
"integrity": "sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==",
|
||||
"requires": {
|
||||
"@babel/helper-member-expression-to-functions": "^7.8.3",
|
||||
"@babel/helper-optimise-call-expression": "^7.8.3",
|
||||
"@babel/traverse": "^7.8.6",
|
||||
"@babel/types": "^7.8.6"
|
||||
}
|
||||
},
|
||||
"@babel/helper-simple-access": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz",
|
||||
"integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==",
|
||||
"requires": {
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-split-export-declaration": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
|
||||
@ -109,52 +168,57 @@
|
||||
"@babel/types": "^7.8.3"
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
|
||||
"integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g=="
|
||||
},
|
||||
"@babel/helpers": {
|
||||
"version": "7.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.4.tgz",
|
||||
"integrity": "sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==",
|
||||
"version": "7.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.2.tgz",
|
||||
"integrity": "sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==",
|
||||
"requires": {
|
||||
"@babel/template": "^7.8.3",
|
||||
"@babel/traverse": "^7.8.4",
|
||||
"@babel/types": "^7.8.3"
|
||||
"@babel/traverse": "^7.9.0",
|
||||
"@babel/types": "^7.9.0"
|
||||
}
|
||||
},
|
||||
"@babel/highlight": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz",
|
||||
"integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==",
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
|
||||
"integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.9.0",
|
||||
"chalk": "^2.0.0",
|
||||
"esutils": "^2.0.2",
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@babel/parser": {
|
||||
"version": "7.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz",
|
||||
"integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw=="
|
||||
"version": "7.9.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
|
||||
"integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA=="
|
||||
},
|
||||
"@babel/template": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.3.tgz",
|
||||
"integrity": "sha512-04m87AcQgAFdvuoyiQ2kgELr2tV8B4fP/xJAVUL3Yb3bkNdMedD3d0rlSQr3PegP0cms3eHjl1F7PWlvWbU8FQ==",
|
||||
"version": "7.8.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
|
||||
"integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.8.3",
|
||||
"@babel/parser": "^7.8.3",
|
||||
"@babel/types": "^7.8.3"
|
||||
"@babel/parser": "^7.8.6",
|
||||
"@babel/types": "^7.8.6"
|
||||
}
|
||||
},
|
||||
"@babel/traverse": {
|
||||
"version": "7.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.4.tgz",
|
||||
"integrity": "sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz",
|
||||
"integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.8.3",
|
||||
"@babel/generator": "^7.8.4",
|
||||
"@babel/helper-function-name": "^7.8.3",
|
||||
"@babel/generator": "^7.9.5",
|
||||
"@babel/helper-function-name": "^7.9.5",
|
||||
"@babel/helper-split-export-declaration": "^7.8.3",
|
||||
"@babel/parser": "^7.8.4",
|
||||
"@babel/types": "^7.8.3",
|
||||
"@babel/parser": "^7.9.0",
|
||||
"@babel/types": "^7.9.5",
|
||||
"debug": "^4.1.0",
|
||||
"globals": "^11.1.0",
|
||||
"lodash": "^4.17.13"
|
||||
@ -176,11 +240,11 @@
|
||||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.3.tgz",
|
||||
"integrity": "sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==",
|
||||
"version": "7.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
|
||||
"integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
|
||||
"requires": {
|
||||
"esutils": "^2.0.2",
|
||||
"@babel/helper-validator-identifier": "^7.9.5",
|
||||
"lodash": "^4.17.13",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
@ -233,21 +297,14 @@
|
||||
}
|
||||
},
|
||||
"ajv": {
|
||||
"version": "6.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
|
||||
"integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
|
||||
"version": "6.12.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
|
||||
"integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
"json-schema-traverse": "^0.4.1",
|
||||
"uri-js": "^4.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
|
||||
"integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"align-text": {
|
||||
@ -1301,10 +1358,15 @@
|
||||
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
|
||||
"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
|
||||
},
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
|
||||
"integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
|
||||
},
|
||||
"fast-json-stable-stringify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
|
||||
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
|
||||
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
@ -2001,12 +2063,12 @@
|
||||
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
|
||||
},
|
||||
"globule": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/globule/-/globule-1.3.0.tgz",
|
||||
"integrity": "sha512-YlD4kdMqRCQHrhVdonet4TdRtv1/sZKepvoxNT4Nrhrp5HI8XFfc8kFlGlBn2myBo80aGp8Eft259mbcUJhgSg==",
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/globule/-/globule-1.3.1.tgz",
|
||||
"integrity": "sha512-OVyWOHgw29yosRHCHo7NncwR1hW5ew0W/UrvtwvjefVJeQ26q4/8r8FmPsSF1hJ93IgWkyv16pCTz6WblMzm/g==",
|
||||
"requires": {
|
||||
"glob": "~7.1.1",
|
||||
"lodash": "~4.17.10",
|
||||
"lodash": "~4.17.12",
|
||||
"minimatch": "~3.0.2"
|
||||
}
|
||||
},
|
||||
@ -2126,9 +2188,9 @@
|
||||
}
|
||||
},
|
||||
"in-publish": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
|
||||
"integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
|
||||
"integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ=="
|
||||
},
|
||||
"include-media": {
|
||||
"version": "1.4.9",
|
||||
@ -2279,12 +2341,9 @@
|
||||
"optional": true
|
||||
},
|
||||
"is-finite": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
|
||||
"integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
|
||||
"integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
@ -2391,9 +2450,9 @@
|
||||
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
|
||||
"integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
|
||||
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
|
||||
},
|
||||
"js-stringify": {
|
||||
"version": "1.0.2",
|
||||
@ -2436,17 +2495,17 @@
|
||||
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
|
||||
},
|
||||
"json5": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz",
|
||||
"integrity": "sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==",
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
|
||||
"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
|
||||
"requires": {
|
||||
"minimist": "^1.2.0"
|
||||
"minimist": "^1.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
|
||||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -2609,9 +2668,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
|
||||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -2762,9 +2821,9 @@
|
||||
}
|
||||
},
|
||||
"node-sass": {
|
||||
"version": "4.13.1",
|
||||
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
|
||||
"integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.0.tgz",
|
||||
"integrity": "sha512-AxqU+DFpk0lEz95sI6jO0hU0Rwyw7BXVEv6o9OItoXLyeygPeaSpiV4rwQb10JiTghHaa0gZeD21sz+OsQluaw==",
|
||||
"requires": {
|
||||
"async-foreach": "^0.1.3",
|
||||
"chalk": "^1.1.1",
|
||||
@ -3235,9 +3294,9 @@
|
||||
"integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
|
||||
},
|
||||
"psl": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz",
|
||||
"integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ=="
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
|
||||
"integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
|
||||
},
|
||||
"pug": {
|
||||
"version": "2.0.4",
|
||||
@ -3516,9 +3575,9 @@
|
||||
}
|
||||
},
|
||||
"request": {
|
||||
"version": "2.88.0",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
|
||||
"integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
|
||||
"version": "2.88.2",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
|
||||
"integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
|
||||
"requires": {
|
||||
"aws-sign2": "~0.7.0",
|
||||
"aws4": "^1.8.0",
|
||||
@ -3527,7 +3586,7 @@
|
||||
"extend": "~3.0.2",
|
||||
"forever-agent": "~0.6.1",
|
||||
"form-data": "~2.3.2",
|
||||
"har-validator": "~5.1.0",
|
||||
"har-validator": "~5.1.3",
|
||||
"http-signature": "~1.2.0",
|
||||
"is-typedarray": "~1.0.0",
|
||||
"isstream": "~0.1.2",
|
||||
@ -3537,7 +3596,7 @@
|
||||
"performance-now": "^2.1.0",
|
||||
"qs": "~6.5.2",
|
||||
"safe-buffer": "^5.1.2",
|
||||
"tough-cookie": "~2.4.3",
|
||||
"tough-cookie": "~2.5.0",
|
||||
"tunnel-agent": "^0.6.0",
|
||||
"uuid": "^3.3.2"
|
||||
}
|
||||
@ -3737,9 +3796,9 @@
|
||||
"integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg=="
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
||||
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
|
||||
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
|
||||
},
|
||||
"slash": {
|
||||
"version": "2.0.0",
|
||||
@ -4113,19 +4172,12 @@
|
||||
"integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo="
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "2.4.3",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
|
||||
"integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
|
||||
"integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
|
||||
"requires": {
|
||||
"psl": "^1.1.24",
|
||||
"punycode": "^1.4.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"punycode": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
|
||||
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
|
||||
}
|
||||
"psl": "^1.1.28",
|
||||
"punycode": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"trim-newlines": {
|
||||
|
||||
@ -50,10 +50,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/cli": "^7.7.0",
|
||||
"@babel/core": "^7.7.0",
|
||||
"@babel/core": "^7.9.0",
|
||||
"copyfiles": "^2.1.1",
|
||||
"include-media": "^1.4.9",
|
||||
"node-sass": "^4.13.0",
|
||||
"node-sass": "^4.14.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"pug": "^2.0.4",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
|
||||
@mixin window-style-modal($background: var(--color-white), $shadow: hsla(212, 7%, 55%, 0.19)) {
|
||||
box-shadow: 0 0 8px 0 $shadow;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@ -1,32 +1,127 @@
|
||||
// Color Variables
|
||||
$color-43-100-50: hsl(43, 100%, 50%);
|
||||
$color-45-95-54: hsl(45, 95%, 54%);
|
||||
$color-46-100-67: hsl(46, 100%, 67%);
|
||||
$color-46-100-50: hsl(46, 100%, 50%);
|
||||
$color-0-0-100: hsl(0, 0%, 100%);
|
||||
$color-218-100-98: hsl(218, 100%, 98%);
|
||||
$color-210-17-91: hsl(210, 17%, 91%);
|
||||
$color-222-52-90: hsl(222, 52%, 90%);
|
||||
$color-210-25-95: hsl(210, 25%, 95%);
|
||||
$color-222-57-95: hsl(222, 57%, 95%);
|
||||
$color-213-20-91: hsl(213, 20%, 91%);
|
||||
$color-221-51-90: hsl(221, 51%, 90%);
|
||||
$color-228-25-79: hsl(228, 25%, 79%);
|
||||
$color-0-0-85: hsl(0, 0%, 85%);
|
||||
$color-229-25-79: hsl(229, 25%, 79%);
|
||||
$color-215-9-73: hsl(215, 9%, 73%);
|
||||
$color-244-10-70: hsl(244, 10%, 70%);
|
||||
$color-215-6-63: hsl(215, 6%, 63%);
|
||||
$color-210-5-56: hsl(210, 5%, 56%);
|
||||
$color-210-4-50: hsl(210, 4%, 50%);
|
||||
: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);
|
||||
--color-avatar-background: var(--color-grey-11);
|
||||
--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);
|
||||
|
||||
/* tags */
|
||||
--color-tag-admin-text: var(--color-complementary);
|
||||
--color-tag-admin-border: var(--color-complementary);
|
||||
--color-tag-group-text: var(--color-primary);
|
||||
--color-tag-group-border: var(--color-primary);
|
||||
|
||||
/* 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-dark: var(--color-secondary);
|
||||
--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);
|
||||
}
|
||||
|
||||
/* Variables for event */
|
||||
$color-212-4-50: hsl(212.7,4.3%,50%);
|
||||
$color-213-4-50: hsl(213, 4%, 50%);
|
||||
$color-213-13-86: hsla(213, 13%, 86%, 0.2);
|
||||
$color-0-0-29: hsl(0, 0%, 29%);
|
||||
$color-0-0-22: hsl(0,0%,22.7%);
|
||||
$color-203-87-19: hsl(203, 87.8%, 19.2%);
|
||||
$color-233-18-29: hsl(233, 18%, 29%);
|
||||
$color-233-20-17: hsl(233, 20%, 17%);
|
||||
$color-216-4-22: hsl(216, 4%, 22%);
|
||||
$color-244-73-62: hsl(244, 73%, 62%);
|
||||
$color-357-67-45: hsl(357,67.5%,45.9%);
|
||||
$color-357-67-45: hsl(357,67.5%,45.9%);
|
||||
@ -8,7 +8,7 @@
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-dark,
|
||||
.button-secondary,
|
||||
.bordered;
|
||||
margin-left: auto;
|
||||
margin-top: 3.2rem;
|
||||
@ -20,7 +20,7 @@
|
||||
&.with-form {
|
||||
|
||||
h1 {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-title);
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
color: $color-233-18-29;
|
||||
border-bottom: 1px solid var(--color-fieldset-border);
|
||||
color: var(--color-title);
|
||||
display: flex;
|
||||
flex: 1 0 100%;
|
||||
font-size: 1.8rem;
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
[name$='border-top'] {
|
||||
border-top: 1px solid $color-221-51-90;
|
||||
border-top: 1px solid var(--color-grey-10);
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@ -72,11 +72,11 @@
|
||||
|
||||
input:not([type='file']),
|
||||
textarea {
|
||||
-webkit-tap-highlight-color: $color-244-73-62;
|
||||
background-color: $color-222-57-95;
|
||||
-webkit-tap-highlight-color: var(--color-grey-7);
|
||||
background-color: var(--color-input-background);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid $color-222-57-95;
|
||||
color: $color-233-18-29;
|
||||
border: 2px solid var(--color-input-background);
|
||||
color: var(--color-input-text);
|
||||
/*flex: 1 1 0; Problem on Firefox for input type date*/
|
||||
line-height: 1;
|
||||
min-width: 0;
|
||||
@ -85,11 +85,11 @@
|
||||
|
||||
input:not([type="search"]):not([type="file"]),
|
||||
textarea {
|
||||
border: 2px solid $color-222-57-95;
|
||||
border: 2px solid var(--color-input-background);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-bottom: 2px solid $color-244-73-62;
|
||||
border-bottom: 2px solid var(--color-input-active);
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,9 +127,10 @@
|
||||
|
||||
>.ss-single-selected {
|
||||
align-items: center;
|
||||
background-color: #ebeffa;
|
||||
background-color: var(--color-input-background);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
color: var(--color-input-text);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-height: 4.2rem;
|
||||
@ -140,11 +141,15 @@
|
||||
margin: 0 18px 0 0;
|
||||
|
||||
span {
|
||||
border: solid $color-244-73-62;
|
||||
border: solid var(--color-input-icon);
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-list {
|
||||
color: var(--color-select-list);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,7 +159,7 @@
|
||||
.btn-margin-left,
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.button-blue,
|
||||
.button-complementary,
|
||||
.bordered;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
@ -172,7 +177,7 @@
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-dark,
|
||||
.button-secondary,
|
||||
.bordered;
|
||||
margin-left: auto;
|
||||
margin-top: 3.2rem;
|
||||
@ -184,7 +189,7 @@
|
||||
font-weight: 600;
|
||||
|
||||
&.is-dark label {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-label-dark);
|
||||
margin-top: 3rem;
|
||||
|
||||
&>*:nth-child(2) {
|
||||
@ -193,7 +198,7 @@
|
||||
}
|
||||
|
||||
&.is-light label {
|
||||
color: $color-244-10-70;
|
||||
color: var(--color-label-light);
|
||||
margin-top: 1.8rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -230,9 +235,10 @@
|
||||
}
|
||||
|
||||
.ss-single-selected {
|
||||
background-color: $color-222-57-95;
|
||||
background-color: var(--color-input-background);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
color: var(--color-input-text);
|
||||
display: flex;
|
||||
font-weight: normal;
|
||||
margin-top: 0.8rem;
|
||||
@ -240,13 +246,18 @@
|
||||
padding-left: 1rem;
|
||||
text-transform: none;
|
||||
|
||||
.ss-disabled {
|
||||
color: var(--color-grey-5);
|
||||
}
|
||||
|
||||
.ss-arrow span {
|
||||
border: solid $color-244-73-62;
|
||||
border: solid var(--color-input-icon);
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ss-content .ss-list .ss-option {
|
||||
color: var(--color-input-text);
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
@ -258,7 +269,7 @@
|
||||
background-position: right 12px top 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.4rem;
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-input-icon);
|
||||
cursor: default;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1.6rem;
|
||||
@ -308,7 +319,7 @@
|
||||
input[type='file'] {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 20%;
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-input-text);
|
||||
cursor: pointer;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
@ -342,7 +353,7 @@
|
||||
|
||||
.ss-multi-selected {
|
||||
align-items: center;
|
||||
background-color: $color-222-57-95;
|
||||
background-color: var(--color-input-background);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
display: flex;
|
||||
@ -355,10 +366,10 @@
|
||||
margin: 0 18px 0 0;
|
||||
|
||||
span.ss-plus {
|
||||
background: $color-244-73-62;
|
||||
background: var(--color-input-icon);
|
||||
|
||||
&::after {
|
||||
background: $color-244-73-62;
|
||||
background: var(--color-input-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -377,7 +388,7 @@
|
||||
top: calc(-6rem + 7px);
|
||||
|
||||
&::before {
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-grey-5);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@ -392,6 +403,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-list {
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -414,9 +429,9 @@
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
background-color: transparent;
|
||||
border: 1px solid $color-244-73-62;
|
||||
color: $color-244-73-62;
|
||||
background-color: var(--color-select-add-button-background);
|
||||
border: 1px solid var(--color-select-add-button);
|
||||
color: var(--color-select-add-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
max-height: 83px;
|
||||
height: 83px;
|
||||
align-items: center;
|
||||
background-color: $color-0-0-100;
|
||||
color: $color-216-4-22;
|
||||
background-color: var(--color-header-background);
|
||||
color: var(--color-black);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
@ -22,14 +22,14 @@
|
||||
#search-input {
|
||||
border-radius: 10em;
|
||||
padding: 0.64rem 1.28rem;
|
||||
border: 1px solid $color-215-9-73;
|
||||
border: 1px solid var(--color-grey-10);
|
||||
height: 3.8rem;
|
||||
width: 28rem;
|
||||
-webkit-appearance: textfield;
|
||||
|
||||
& ~ #close-search-icon,
|
||||
& ~ #search-icon {
|
||||
color: $color-215-9-73;
|
||||
color: var(--color-grey-10);
|
||||
display: block;
|
||||
font-size: 1.7rem;
|
||||
margin: auto;
|
||||
@ -37,7 +37,7 @@
|
||||
right: 3.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-webkit-text-stroke: 1px $color-215-9-73;
|
||||
-webkit-text-stroke: 1px var(--color-grey-10);
|
||||
}
|
||||
|
||||
& ~ #close-search-icon {
|
||||
@ -57,6 +57,7 @@
|
||||
}
|
||||
|
||||
sib-notifications {
|
||||
color: var(--color-bell);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding: 0;
|
||||
@ -126,8 +127,8 @@
|
||||
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
|
||||
|
||||
&:focus {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-user-panel-header-background-open);
|
||||
color: var(--color-user-panel-header-text-open);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -143,7 +144,7 @@
|
||||
|
||||
hubl-user-avatar {
|
||||
align-items: center;
|
||||
background-color: $color-213-20-91;
|
||||
background-color: var(--color-avatar-background);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
height: 4.8rem;
|
||||
@ -198,7 +199,7 @@
|
||||
top: 83px;
|
||||
|
||||
> nav {
|
||||
background-color: $color-0-0-100;
|
||||
background-color: var(--color-user-panel-list-background);
|
||||
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -213,20 +214,20 @@
|
||||
li {
|
||||
|
||||
sib-link {
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-grey-4);
|
||||
display: block;
|
||||
border-bottom: 1px solid $color-213-20-91;
|
||||
border-bottom: 1px solid var(--color-user-panel-list-border);
|
||||
margin-right: 0;
|
||||
padding: 1.6rem 1.3rem;
|
||||
&:hover {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-user-panel-list-text-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-grey-4);
|
||||
padding: 1.6rem 1.3rem;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
@ -235,8 +236,8 @@
|
||||
}
|
||||
|
||||
&[open] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-user-panel-header-background);
|
||||
color: var(--color-user-panel-header-text);
|
||||
|
||||
#user-controls__profile {
|
||||
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
:root {
|
||||
font-size: 10px;
|
||||
font-family: Open Sans, sans-serif;
|
||||
--sib-notifications-theme: #{$color-46-100-50};
|
||||
--sib-notifications-theme: var(--color-primary);
|
||||
|
||||
body {
|
||||
background-color: $color-210-25-95;
|
||||
color: $color-213-4-50;
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
font-size: 1.6rem;
|
||||
min-height: 100vh;
|
||||
overflow-wrap: break-word;
|
||||
@ -43,16 +43,16 @@ nav, .views-container {
|
||||
/* Custom scrollbar of the left-menu */
|
||||
nav {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $color-244-10-70 $color-233-18-29;
|
||||
scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $color-233-18-29;
|
||||
background: var(--color-scrollbar-left-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color-244-10-70;
|
||||
background-color: var(--color-scrollbar-left-track);
|
||||
border-radius: 6px;
|
||||
border: 3px solid $color-233-18-29;
|
||||
border: 3px solid var(--color-scrollbar-left-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -63,16 +63,16 @@ nav {
|
||||
/* Custom scrollbar of the content */
|
||||
.views-container {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $color-244-10-70 white;
|
||||
scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: white;
|
||||
background: var(--color-scrollbar-right-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color-244-10-70;
|
||||
background-color: var(--color-scrollbar-right-track);
|
||||
border-radius: 6px;
|
||||
border: 3px solid white;
|
||||
border: 3px solid var(--color-scrollbar-right-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -118,7 +118,7 @@ h6 {
|
||||
}
|
||||
|
||||
h1, .h1-like {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-h1);
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -128,7 +128,7 @@ h1, .h1-like {
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-h2);
|
||||
font-size: 1.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -140,7 +140,7 @@ h2, .h2-like {
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-title);
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
@ -168,7 +168,7 @@ h5 {
|
||||
margin: 2rem 1rem 5rem 2rem;
|
||||
|
||||
&.full-width {
|
||||
background: $color-0-0-100;
|
||||
background: var(--color-white);
|
||||
flex: 1;
|
||||
font-size: 1.6rem;
|
||||
margin: 0 auto;
|
||||
@ -182,11 +182,11 @@ h5 {
|
||||
|
||||
/* Header inside circle, project view */
|
||||
.content-box__header {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
border-bottom: 1px solid var(--color-content-header);
|
||||
padding: 3rem;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
background: $color-221-51-90;
|
||||
background: var(--color-grey-10);
|
||||
}
|
||||
|
||||
sib-display {
|
||||
@ -198,7 +198,7 @@ h5 {
|
||||
.mobile-sidebar-button {
|
||||
@include breakpoint(sm) {
|
||||
float: right;
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-secondary);
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold!important;
|
||||
|
||||
@ -220,7 +220,7 @@ h5 {
|
||||
font-size: 1.8rem;
|
||||
|
||||
&:not(:empty)::before {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-grey-4);
|
||||
content: ' - ';
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
@ -228,12 +228,12 @@ h5 {
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $color-215-6-63;
|
||||
color: var(--color-grey-4);
|
||||
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-grey-4);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@ -246,7 +246,7 @@ h5 {
|
||||
}
|
||||
|
||||
.modal {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
margin: 75px;
|
||||
padding: 40px;
|
||||
max-height: 85vh;
|
||||
@ -263,14 +263,14 @@ h5 {
|
||||
top: 32px;
|
||||
|
||||
button {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.backlink {
|
||||
@include icon('arrow-left-circle');
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-backlink);
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
text-decoration: underline;
|
||||
@ -288,7 +288,7 @@ h5 {
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-grey-1);
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -311,7 +311,7 @@ h5 {
|
||||
}
|
||||
|
||||
.section {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
border-bottom: 1px solid var(--color-grey-10);
|
||||
padding: 4.5rem;
|
||||
}
|
||||
|
||||
@ -407,61 +407,61 @@ a,
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&.button-yellow {
|
||||
background-color: white;
|
||||
&.button-primary{
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-43-100-50;
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-43-100-50;
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-blue {
|
||||
background-color: white;
|
||||
&.button-secondary {
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-244-73-62;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-244-73-62;
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-dark {
|
||||
color: $color-233-18-29;
|
||||
background-color: white;
|
||||
&.button-complementary {
|
||||
color: var(--color-complementary);
|
||||
background-color: var(--color-white);
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-233-18-29;
|
||||
border: 1px solid var(--color-complementary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-233-18-29;
|
||||
color: white;
|
||||
background-color: var(--color-complementary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@ -470,64 +470,69 @@ a,
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
&.button-yellow {
|
||||
background-color: $color-43-100-50;
|
||||
&.button-primary {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: $color-43-100-50;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-43-100-50;
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-blue {
|
||||
background-color: $color-244-73-62;
|
||||
&.button-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-244-73-62;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-dark {
|
||||
background-color: $color-233-18-29;
|
||||
&.button-complementary {
|
||||
background-color: var(--color-complementary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-233-18-29;
|
||||
border: 1px solid var(--color-complementary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
#main__menu {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-menu-background);
|
||||
color: var(--color-menu-text);
|
||||
display: block;
|
||||
max-width: 250px;
|
||||
min-height: calc(100vh - 83px); /* 83px = nav height */
|
||||
@ -36,17 +36,14 @@
|
||||
padding: 1.2rem;
|
||||
|
||||
&[active] {
|
||||
background-color: $color-46-100-67;
|
||||
color: $color-233-18-29;
|
||||
background-color: var(--color-menu-highlight-primary);
|
||||
|
||||
.menu-icon:before {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-menu-icon-background-active);
|
||||
}
|
||||
|
||||
.menu-notification > sib-display > div:first-child {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
background-color: var(--color-menu-badge-background);
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +78,6 @@
|
||||
|
||||
.menu-chevron {
|
||||
align-items: center;
|
||||
color: $color-244-10-70;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
@ -136,7 +132,7 @@
|
||||
sib-display>div {
|
||||
|
||||
.create {
|
||||
color: $color-244-10-70;
|
||||
color: var(--color-white);
|
||||
margin: 1rem 1rem 2.2rem 3.2rem;
|
||||
}
|
||||
|
||||
@ -147,7 +143,7 @@
|
||||
}
|
||||
|
||||
>div {
|
||||
color: $color-244-10-70;
|
||||
color: var(--color-grey-6);
|
||||
cursor: pointer;
|
||||
>hubl-menu-fix-url-circle>sib-display>div,
|
||||
>hubl-menu-fix-url-project>sib-display>div {
|
||||
@ -163,8 +159,8 @@
|
||||
&>sib-display[active]>div,
|
||||
&>sib-display>div>hubl-menu-fix-url-circle>sib-display[active]>div,
|
||||
&>sib-display>div>hubl-menu-fix-url-project>sib-display[active]>div {
|
||||
background-color: $color-46-100-67;
|
||||
color: $color-233-18-29;
|
||||
background-color: var(--color-menu-highlight-primary);
|
||||
color: var(--color-menu-text-active);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@ -195,7 +191,7 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding-bottom: 0;
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -204,7 +200,8 @@
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: $color-213-13-86;
|
||||
background-color: var(--color-grey-11);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -22,19 +22,19 @@
|
||||
text-align: center;
|
||||
|
||||
&.grey-color {
|
||||
background: $color-228-25-79;
|
||||
color: white;
|
||||
background: var(--color-table-header-background);
|
||||
color: var(--color-table-header-text);
|
||||
}
|
||||
|
||||
>* {
|
||||
border-right: 1px solid white;
|
||||
//flex: 1;
|
||||
border-right: 1px solid var(--color-table-border);
|
||||
flex: 1;
|
||||
padding: 2.1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
>*:last-of-type {
|
||||
border-right: 1px solid $color-228-25-79;
|
||||
border-right: 1px solid --color-table-header-background;
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,12 +43,12 @@
|
||||
>div:first-of-type>sib-display>div,
|
||||
hubl-team-template-edit[name='members'] {
|
||||
display: flex;
|
||||
border-left: 1px solid $color-228-25-79;
|
||||
border-left: 1px solid var(--color-table-border);
|
||||
}
|
||||
|
||||
.border {
|
||||
border-bottom: 1px solid $color-228-25-79;
|
||||
border-right: 1px solid $color-228-25-79;
|
||||
border-bottom: 1px solid var(--color-table-border);
|
||||
border-right: 1px solid var(--color-table-border);
|
||||
}
|
||||
|
||||
.cell {
|
||||
@ -94,7 +94,7 @@
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-blue,
|
||||
.button-secondary,
|
||||
.bordered,
|
||||
.btn-margin-left;
|
||||
}
|
||||
@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.cell-with-name {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-secondary);
|
||||
font-weight: 600;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
%user-thumb__picture {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
background-color: $color-213-20-91;
|
||||
background-color: var(--color-avatar-background);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
grid-column: 1 / span 1;
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
%user-thumb__name {
|
||||
color: #7A7F85;
|
||||
color: var(--color-user-thumb-name);
|
||||
font-weight: 600;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@ -88,7 +88,7 @@
|
||||
margin-right: 1.6rem;
|
||||
|
||||
&::before {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-icon);
|
||||
margin-right: 0.50rem;
|
||||
}
|
||||
}
|
||||
@ -99,7 +99,7 @@
|
||||
display: flex;
|
||||
|
||||
&::before {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-icon);
|
||||
font-size: 1.9rem;
|
||||
font-weight: bold;
|
||||
margin-left: 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#job-offers {
|
||||
/* #job-offers {
|
||||
|
||||
details {
|
||||
|
||||
@ -119,4 +119,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
%filters {
|
||||
/*%filters {
|
||||
display: grid;
|
||||
grid-gap: 0px 15px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -56,4 +56,4 @@
|
||||
sib-form[naked] {
|
||||
@extend %filters;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -27,13 +27,12 @@
|
||||
}
|
||||
|
||||
nav {
|
||||
background: $color-210-25-95;
|
||||
background: var(--color-right-menu-background);
|
||||
transition: all 0.5s;
|
||||
width: 25rem;
|
||||
|
||||
>sib-router {
|
||||
background-color: $color-222-52-90;
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-right-menu-text);
|
||||
flex: 0 0 auto;
|
||||
font-weight: 600;
|
||||
|
||||
@ -47,7 +46,7 @@
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-229-25-79;
|
||||
border-bottom: 1px solid var(--color-right-menu-link-border);
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 2.15rem 2.55rem;
|
||||
@ -104,7 +103,7 @@
|
||||
}
|
||||
|
||||
&[name='admin-users']>li::before {
|
||||
background-color: $color-233-18-29;
|
||||
background-color: var(--color-secondary);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
@ -124,14 +123,14 @@
|
||||
}
|
||||
|
||||
&[active] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
background-color: var(--color-right-menu-active-background);
|
||||
color: var(--color-right-menu-active-text);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active-color[active] {
|
||||
>li::before {
|
||||
background-color: #ffd857;
|
||||
background-color: var(--color-right-menu-active-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -157,7 +156,7 @@
|
||||
|
||||
@include breakpoint(sm) {
|
||||
display: block;
|
||||
background: $color-221-51-90;
|
||||
background: var(--color-right-menu-background);
|
||||
bottom: 0;
|
||||
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
|
||||
min-width: 60%;
|
||||
@ -168,4 +167,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@ sib-multiple[name*='skills'] {
|
||||
}
|
||||
|
||||
.skill {
|
||||
background-color: $color-43-100-50;
|
||||
border: 1px solid $color-43-100-50;
|
||||
background-color: var(--color-skill-background);
|
||||
border: 1px solid var(--color-skill-background);
|
||||
border-radius: 2em;
|
||||
color: $color-0-0-100;
|
||||
color: var(--color-skill-text);
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
%tag-role {
|
||||
border: 1px solid $color-45-95-54;
|
||||
border: 1px solid var(--color-tag-group-border);
|
||||
border-radius: 3px;
|
||||
color: $color-210-4-50;
|
||||
color: var(--color-tag-group-text);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
margin-right: 0.6rem;
|
||||
@ -9,9 +9,9 @@
|
||||
}
|
||||
|
||||
%tag-admin {
|
||||
border: 1px solid $color-244-73-62;
|
||||
border: 1px solid var(--color-tag-admin-border);
|
||||
border-radius: 3px;
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-tag-admin-text);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
margin-left: 0.6rem;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.job-offers__container {
|
||||
/*.job-offers__container {
|
||||
@extend %grid-layer;
|
||||
}
|
||||
|
||||
@ -202,5 +202,5 @@ sib-action[name='edit'] {
|
||||
@include icon('pencil');
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#member-profile {
|
||||
/*#member-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
@ -149,4 +149,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
%member-info {
|
||||
/*%member-info {
|
||||
|
||||
sib-multiple[name^='user.'],
|
||||
>member-info>div,
|
||||
@ -239,4 +239,4 @@ member-info-groups {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
.button-question__color {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.customer-box {
|
||||
@ -14,7 +14,7 @@
|
||||
margin: 1.6rem 0;
|
||||
|
||||
>* {
|
||||
border: 1px solid $color-221-51-90;
|
||||
border: 1px solid var(--color-grey-8);
|
||||
flex: 0 1 50%;
|
||||
padding: 1.7rem 2rem;
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
span::before {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-primary);
|
||||
font-size: 2.2rem;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
@ -103,7 +103,7 @@
|
||||
font-weight: bold;
|
||||
|
||||
&.link-color {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
&.norm-weight {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.user-profile__container {
|
||||
/*.user-profile__container {
|
||||
|
||||
.user-bio {
|
||||
display: grid;
|
||||
@ -42,10 +42,10 @@
|
||||
}
|
||||
|
||||
.info-form {
|
||||
grid-area: information;
|
||||
grid-area: information; */
|
||||
|
||||
/* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
|
||||
[name="account.picture"] {
|
||||
/*[name="account.picture"] {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -60,9 +60,9 @@
|
||||
p {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
/* Fin commentaire sur upload photos */
|
||||
}
|
||||
/*}
|
||||
|
||||
[name^="inline-"] {
|
||||
display: flex;
|
||||
@ -73,4 +73,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
div.admin-header__title Canaux
|
||||
|
||||
sib-link(
|
||||
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus'
|
||||
class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
|
||||
next='admin-circle-create'
|
||||
) Créer un canal
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
sib-widget(name='hubl-admin-circle-leave-button')
|
||||
template
|
||||
sib-delete(
|
||||
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
|
||||
class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
|
||||
data-src="${src}"
|
||||
data-label='Quitter'
|
||||
)
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
sib-widget(name='hubl-admin-circle-join-button')
|
||||
template
|
||||
sib-form.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-arrow-right-circle.flex(
|
||||
sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
|
||||
data-src='${value}'
|
||||
|
||||
fields='user.username'
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
div.admin-header
|
||||
div.admin-header__title Projets
|
||||
sib-link(
|
||||
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus'
|
||||
class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
|
||||
next='admin-project-create'
|
||||
) Créer un projet
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
sib-widget(name="hubl-admin-project-leave-button")
|
||||
template
|
||||
sib-delete(
|
||||
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
|
||||
class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
|
||||
data-src="${src}"
|
||||
data-label='Quitter'
|
||||
)
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
template
|
||||
sib-ac-checker(data-src="${src}", permission='acl:Write')
|
||||
sib-link(
|
||||
class='button rounded reversed button-blue bordered icon-pencil'
|
||||
class='button rounded reversed button-primary bordered icon-pencil'
|
||||
data-src="${src}"
|
||||
next="${value}"
|
||||
)
|
||||
@ -30,7 +30,7 @@
|
||||
div.admin-header__title Utilisateurs
|
||||
sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
|
||||
sib-link(
|
||||
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus'
|
||||
class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
|
||||
next='admin-users-create'
|
||||
) Ajouter un utilisateur
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ div.content-box__info
|
||||
data-src="${value['@id']}"
|
||||
)
|
||||
sib-delete(
|
||||
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
|
||||
class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
|
||||
data-src="${value['@id']}"
|
||||
data-label='Quitter le canal'
|
||||
)
|
||||
|
||||
@ -18,7 +18,7 @@ sib-router(default-route='circle-profile', hidden)
|
||||
widget-creationDate='sib-display-date'
|
||||
)
|
||||
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
|
||||
sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
|
||||
sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
|
||||
|
||||
|
||||
h2 Membres :
|
||||
@ -34,7 +34,7 @@ sib-router(default-route='circle-profile', hidden)
|
||||
div.box-button
|
||||
sib-ac-checker(permission='acl:Delete', bind-resources)
|
||||
sib-delete(
|
||||
class='button text-bold text-uppercase button-blue bordered with-icon icon-trash'
|
||||
class='button text-bold text-uppercase button-primary bordered with-icon icon-trash'
|
||||
bind-resources
|
||||
data-label='Supprimer le canal'
|
||||
)
|
||||
@ -42,14 +42,14 @@ sib-router(default-route='circle-profile', hidden)
|
||||
sib-widget(name='hubl-circle-leave-button')
|
||||
template
|
||||
sib-delete(
|
||||
class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
|
||||
class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
|
||||
data-src="${src}"
|
||||
data-label='Quitter le canal'
|
||||
)
|
||||
|
||||
sib-widget(name='hubl-circle-join-button')
|
||||
template
|
||||
button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.flex
|
||||
button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
|
||||
sib-form(
|
||||
data-src=''
|
||||
nested-field='members'
|
||||
|
||||
@ -22,7 +22,7 @@ sib-router(default-route='project-profile', hidden)
|
||||
widget-creationDate='sib-display-date'
|
||||
)
|
||||
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
|
||||
sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
|
||||
sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
|
||||
|
||||
|
||||
.space-between
|
||||
@ -68,7 +68,7 @@ sib-router(default-route='project-profile', hidden)
|
||||
sib-widget(name='hubl-project-leave-button')
|
||||
template
|
||||
sib-delete(
|
||||
class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
|
||||
class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
|
||||
data-src="${src}"
|
||||
data-label='Quitter le groupe'
|
||||
)
|
||||
|
||||
23
styling.md
Normal file
23
styling.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Documentation
|
||||
|
||||
## Define your own colors
|
||||
|
||||
We use css variables to apply colors in the application.
|
||||
|
||||
The file can be found in src/styles/etc/
|
||||
|
||||
Example of use:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: #FFD759;
|
||||
--color-secondary: #FFB700;
|
||||
--color-complementary: #3C3F57;
|
||||
--color-complementary-darken: #27293A;
|
||||
}
|
||||
```
|
||||
|
||||
Users can find example files at the root of the application. Use
|
||||
|
||||
- client.sample.happy-dev.css : for a more advanced example of customization.
|
||||
- client.sample.css : to set five basic colors and let the default setup apply the colors.
|
||||
Loading…
Reference in New Issue
Block a user