reafctors: converted sass colors in _index.scss
removed unused colors and classes
This commit is contained in:
William Grant
parent
b4df5148ee
commit
6cdfa47008
|
|
@ -59,43 +59,6 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 0 0 1em;
|
||||
background: $color-dark-75;
|
||||
font-weight: bold;
|
||||
line-height: 3;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h4.section-toggle,
|
||||
.section-toggle h4 {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.section-toggle::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
line-height: 3;
|
||||
text-align: center;
|
||||
-webkit-transition: all 0.35s;
|
||||
-o-transition: all 0.35s;
|
||||
transition: all 0.35s;
|
||||
content: '+';
|
||||
}
|
||||
|
||||
.section-toggle-visible::after {
|
||||
transform: rotate(315deg);
|
||||
}
|
||||
|
||||
.section-conversations-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -118,56 +81,6 @@ h4.section-toggle,
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
$search-x-size: 16px;
|
||||
$search-padding-inline-end: 12px;
|
||||
$search-padding-inline-start: 30px;
|
||||
|
||||
input.search {
|
||||
border: 1px solid $color-black-02;
|
||||
padding: 0 $search-padding-inline-end 0 $search-padding-inline-start;
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: 8px;
|
||||
outline: 0;
|
||||
height: 32px;
|
||||
width: calc(100% - 16px);
|
||||
outline-offset: -2px;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: normal;
|
||||
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
|
||||
&:focus {
|
||||
outline: solid 1px $blue;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-image: url('../images/x.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: $search-x-size;
|
||||
|
||||
&.ltr {
|
||||
background-position: right $search-padding-inline-end center;
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
background-position: left $search-padding-inline-start center;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
width: $search-x-size;
|
||||
height: $search-x-size;
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 10px;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -800,7 +800,7 @@
|
|||
}
|
||||
|
||||
.module-image__border-overlay--dark {
|
||||
background-color: $color-black-02;
|
||||
background-color: var(--color-light-black-color);
|
||||
}
|
||||
|
||||
.module-image__loading-placeholder {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@ $color-dark-55: #88898c;
|
|||
$color-dark-60: #797a7c;
|
||||
$color-dark-70: #414347;
|
||||
$color-dark-72: #31343c;
|
||||
$color-dark-75: #292c33;
|
||||
$color-dark-85: #1a1c20;
|
||||
$color-dark-90: #121417;
|
||||
$color-black-008: rgba($color-black, 0.08);
|
||||
|
|
@ -47,7 +46,6 @@ $color-black-008-no-tranparency: #ededed;
|
|||
$color-black-016-no-tranparency: #d9d9d9;
|
||||
$color-black-012: rgba($color-black, 0.12);
|
||||
$color-black-015: rgba($color-black, 0.15);
|
||||
$color-black-02: rgba($color-black, 0.2);
|
||||
$color-black-04: rgba($color-black, 0.4);
|
||||
$color-black-06: rgba($color-black, 0.6);
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,17 @@ const borderDarkThemeColor = '#ffffff0F';
|
|||
// THEME INDEPEDENT COLORS
|
||||
const sessionBlack = '#282829';
|
||||
const avatarBorderColor = '#00000059';
|
||||
|
||||
// Blacks
|
||||
const blackColor = '#000000';
|
||||
|
||||
// Blues
|
||||
const lightBlueColor = '#a2d2f4';
|
||||
|
||||
// Grays
|
||||
const grayColor = '#616161';
|
||||
const lightGrayColor = '#8b8e91';
|
||||
const lightestGrayColor = '#f3f3f3';
|
||||
const lightBlueColor = '#a2d2f4';
|
||||
|
||||
// DARK COLORS
|
||||
const darkColorAccent = accentDarkTheme;
|
||||
|
|
@ -87,6 +94,11 @@ export const switchHtmlToDarkTheme = () => {
|
|||
);
|
||||
document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack);
|
||||
document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
|
||||
document.documentElement.style.setProperty(
|
||||
'--color-light-black-color',
|
||||
`rgba(${blackColor}, 0.2)`
|
||||
);
|
||||
|
||||
document.documentElement.style.setProperty('--color-gray-color', grayColor);
|
||||
document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
|
||||
document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
|
||||
|
|
@ -240,6 +252,10 @@ export const switchHtmlToLightTheme = () => {
|
|||
// TODO: This might be wrong. Didn't merge correctly.
|
||||
document.documentElement.style.setProperty('--color-sent-message-text', black);
|
||||
document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
|
||||
document.documentElement.style.setProperty(
|
||||
'--color-light-black-color',
|
||||
`rgba(${blackColor}, 0.2)`
|
||||
);
|
||||
document.documentElement.style.setProperty('--color-gray-color', grayColor);
|
||||
document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
|
||||
document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
|
||||
|
|
|
|||
Loading…
Reference in New Issue