feature: css variables
This commit is contained in:
Jean-Baptiste Pasquier
committed by
Rachel
Rachel
parent
607de5dc13
commit
beed19cb42
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user