Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Dan Percic 2021-09-21 01:24:54 +03:00
parent 90287baf62
commit dde0d7e7a5
24 changed files with 124 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/styles/_mixins.scss → src/assets/styles/_common-mixins.scss
View File

@ -1,5 +1,3 @@
@import 'variables';
@mixin line-clamp($lines) {
display: -webkit-box;
-webkit-line-clamp: $lines;
@ -23,7 +21,7 @@
}
@mixin scroll-bar {
scrollbar-color: $grey-5 $grey-2;
scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-filter-bg);
scrollbar-width: thin;
&::-webkit-scrollbar {
@ -32,19 +30,19 @@
/* Track */
&::-webkit-scrollbar-track {
background: $grey-2;
background: var(--iqser-filter-bg);
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $grey-5;
background: var(--iqser-quick-filter-border);
}
}
@mixin inset-shadow {
box-shadow: inset 0 4px 3px -2px $grey-4;
box-shadow: inset 0 4px 3px -2px var(--iqser-btn-bg-hover);
}
@mixin drop-shadow {
box-shadow: 0 4px 3px 2px $grey-4;
box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover);
}

25
src/assets/styles/_common-variables.scss Normal file
View File

@ -0,0 +1,25 @@
@use 'sass:meta';
:root {
--iqser-primary: lightblue;
--iqser-primary-2: orange;
--iqser-accent: blue;
--iqser-disabled: #9398a0;
--iqser-not-disabled-table-item: #f9fafb;
--iqser-btn-bg-hover: #e2e4e9;
--iqser-btn-bg: #f0f1f4;
--iqser-warn: #fdbd00;
--iqser-white: white;
--iqser-separator: rgba(226, 228, 233, 0.9);
--iqser-quick-filter-border: #d3d5da;
--iqser-filter-bg: #f4f5f7;
--iqser-helpmode-primary: green;
}
@mixin configure($args...) {
:root {
@each $name, $value in meta.keywords($args) {
--#{$name}: #{$value};
}
}
}

10
src/assets/styles/_variables.scss
View File

@ -1,10 +0,0 @@
// This rebel line is crying (in WebStorm) but it actually works
@import '../../../../../apps/red-ui/src/assets/styles/variables';
$btn-bg-hover: #e2e4e9 !default;
$btn-bg: #f0f1f4 !default;
$warn: #fdbd00 !default;
$white: white !default;
$separator: rgba(226, 228, 233, 0.9) !default;
$quick-filter-border: #d3d5da !default;
$filter-bg: #f4f5f7 !default;

30
src/assets/styles/_buttons.scss → src/assets/styles/common-buttons.scss
View File

@ -1,5 +1,3 @@
@import 'variables';
.mat-button,
.mat-flat-button {
border-radius: 17px !important;
@ -36,19 +34,19 @@
padding: 0 14px;
transition: background-color 0.2s, color 0.2s;
background-color: $primary;
background-color: var(--iqser-primary);
&.mat-button-disabled {
background-color: $primary;
background-color: var(--iqser-primary);
.mat-button-wrapper {
color: $white;
color: var(--iqser-white);
opacity: 0.5;
}
}
&:not(.mat-button-disabled):hover {
background-color: $primary-2;
background-color: var(--iqser-primary-2);
}
}
@ -64,30 +62,31 @@ iqser-circle-button {
transition: background-color 0.2s;
&.overlay {
background: rgba($primary, 0.1);
// TODO
background: rgba(var(--iqser-primary), 0.1);
}
&:not(.overlay):hover {
background-color: $btn-bg;
background-color: var(--iqser-btn-bg);
}
&.primary {
font-weight: 500 !important;
background-color: $primary;
color: $white;
background-color: var(--iqser-primary);
color: var(--iqser-white);
&:hover {
background-color: $primary-2;
background-color: var(--iqser-primary-2);
}
}
&.dark-bg:hover {
background-color: $btn-bg-hover;
background-color: var(--iqser-btn-bg-hover);
}
}
.dot {
background: $primary;
background: var(--iqser-primary);
height: 10px;
width: 10px;
border-radius: 50%;
@ -102,10 +101,11 @@ iqser-circle-button,
iqser-icon-button {
&[aria-expanded='true'] {
button {
background: rgba($primary, 0.1);
// TODO
background: rgba(var(--iqser-primary), 0.1);
&.primary {
background: $primary-2;
background: var(--iqser-primary-2);
}
}
}

6
src/assets/styles/_dialogs.scss → src/assets/styles/common-dialogs.scss
View File

@ -1,7 +1,5 @@
@import 'apps/red-ui/src/assets/styles/variables';
.mat-dialog-container {
color: $accent;
color: var(--iqser-accent);
padding: 0 !important;
border-radius: 8px !important;
}
@ -27,7 +25,7 @@
.dialog-actions {
height: 81px;
box-sizing: border-box;
border-top: 1px solid $separator;
border-top: 1px solid var(--iqser-separator);
padding: 0 32px;
align-items: center;

4
src/assets/styles/_full-pages.scss → src/assets/styles/common-full-pages.scss
View File

@ -1,5 +1,3 @@
@use 'variables';
.full-page-section,
.full-page-content {
position: fixed;
@ -8,7 +6,7 @@
.full-page-section {
opacity: 0.7;
background: variables.$white;
background: var(--iqser-white);
z-index: 900;
}

43
src/assets/styles/_inputs.scss → src/assets/styles/common-inputs.scss
View File

@ -1,5 +1,4 @@
@import 'variables';
@import 'mixins';
@use 'common-mixins' as mixins;
form .iqser-input-group:not(first-of-type) {
margin-top: 14px;
@ -22,10 +21,10 @@ form .iqser-input-group:not(first-of-type) {
position: absolute;
right: 1px;
bottom: 1px;
background: $quick-filter-border;
background: var(--iqser-quick-filter-border);
height: 34px;
width: 34px;
border-left: 1px solid $quick-filter-border;
border-left: 1px solid var(--iqser-quick-filter-border);
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
cursor: pointer;
@ -35,13 +34,13 @@ form .iqser-input-group:not(first-of-type) {
justify-content: center;
&:hover {
background: $btn-bg;
background: var(--iqser-btn-bg);
}
mat-icon {
width: 14px;
height: 14px;
color: $accent;
color: var(--iqser-accent);
}
&.disabled {
@ -60,7 +59,7 @@ form .iqser-input-group:not(first-of-type) {
.mat-form-field-label {
opacity: 0.7 !important;
color: $accent !important;
color: var(--iqser-accent) !important;
transform: translateY(-1.34em) !important;
}
@ -83,9 +82,9 @@ form .iqser-input-group:not(first-of-type) {
}
.mat-button-toggle-checked {
background: $primary;
background: var(--iqser-primary);
transition: background-color 0.25s ease;
color: $white;
color: var(--iqser-white);
}
input,
@ -94,7 +93,7 @@ form .iqser-input-group:not(first-of-type) {
box-sizing: border-box;
padding-left: 11px;
padding-right: 11px;
border: 1px solid $quick-filter-border;
border: 1px solid var(--iqser-quick-filter-border);
font-family: Inter, sans-serif;
font-size: 13px;
background-color: #ffffff;
@ -108,26 +107,28 @@ form .iqser-input-group:not(first-of-type) {
}
&:focus:not(:disabled):not(.mat-select-disabled) {
border-color: $accent;
border-color: var(--iqser-accent);
}
&::placeholder {
color: $accent;
color: var(--iqser-accent);
opacity: 0.7;
}
&.ng-invalid.ng-touched {
border-color: rgba($primary, 0.3);
// TODO
border-color: rgba(var(--iqser-primary, 0.3));
&:focus {
border-color: $primary;
border-color: var(--iqser-primary);
}
}
&:disabled,
&.mat-select-disabled {
background-color: $filter-bg;
color: rgba($accent, 0.3);
background-color: var(--iqser-filter-bg);
// TODO
color: rgba(var(--iqser-accent, 0.3));
}
}
@ -154,7 +155,7 @@ form .iqser-input-group:not(first-of-type) {
resize: vertical;
padding-top: 7px;
padding-bottom: 7px;
@include scroll-bar;
@include mixins.scroll-bar;
&.has-scrollbar {
border-top-right-radius: 0;
@ -168,7 +169,7 @@ form .iqser-input-group:not(first-of-type) {
letter-spacing: 0;
line-height: 14px;
margin-bottom: 2px;
color: $accent;
color: var(--iqser-accent);
&.mat-checkbox-layout {
opacity: 1;
@ -178,7 +179,7 @@ form .iqser-input-group:not(first-of-type) {
&.required label:after {
content: ' *';
color: $primary;
color: var(--iqser-primary);
}
&.datepicker-wrapper {
@ -196,10 +197,10 @@ form .iqser-input-group:not(first-of-type) {
position: absolute;
right: 0;
top: 1px;
color: $accent;
color: var(--iqser-accent);
&.mat-datepicker-toggle-active {
color: $primary;
color: var(--iqser-primary);
}
.mat-icon-button {

0
src/assets/styles/_layout.scss → src/assets/styles/common-layout.scss
View File

7
src/assets/styles/common-styles.scss Normal file
View File

@ -0,0 +1,7 @@
@use 'common-inputs';
@use 'common-buttons';
@use 'common-texts';
@use 'common-tables';
@use 'common-full-pages';
@use 'common-layout';
@use 'common-dialogs';

0
src/assets/styles/_tables.scss → src/assets/styles/common-tables.scss
View File

18
src/assets/styles/_texts.scss → src/assets/styles/common-texts.scss
View File

@ -1,5 +1,4 @@
@import 'variables';
@import 'mixins';
@use 'common-mixins' as mixins;
.all-caps-label {
text-transform: uppercase;
@ -24,17 +23,18 @@
}
&.primary {
color: $primary;
color: var(--iqser-primary);
opacity: 1;
}
}
a {
color: $primary;
color: var(--iqser-primary);
transition: color 0.1s;
&:hover {
color: lighten($primary, 10%);
color: var(--iqser-primary);
filter: brightness(140%);
}
&.with-underline {
@ -48,7 +48,7 @@ a {
pre {
font-family: Inter, sans-serif;
color: $accent;
color: var(--iqser-accent);
}
.heading-xl {
@ -102,17 +102,17 @@ pre {
}
.large-label {
color: $accent;
color: var(--iqser-accent);
font-size: 13px;
line-height: 16px;
}
.clamp-1 {
@include line-clamp(1);
@include mixins.line-clamp(1);
}
.clamp-2 {
@include line-clamp(2);
@include mixins.line-clamp(2);
}
.text-overflow {

7
src/assets/styles/common.scss
View File

@ -1,7 +0,0 @@
@import 'inputs';
@import 'buttons';
@import 'texts';
@import 'tables';
@import 'full-pages';
@import 'layout';
@import 'dialogs';

10
src/lib/buttons/circle-button/circle-button.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../assets/styles/common';
:host {
height: var(--size);
width: var(--size);
@ -26,15 +24,15 @@
}
&.primary.mat-button-disabled {
background-color: $btn-bg;
color: $white !important;
background-color: var(--iqser-btn-bg);
color: var(--iqser-white) !important;
}
&.warn:not([disabled]) {
background-color: $warn;
background-color: var(--iqser-warn);
&:hover {
background-color: $warn;
background-color: var(--iqser-warn);
}
}
}

6
src/lib/buttons/icon-button/icon-button.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../assets/styles/common';
button {
padding: 0 14px;
width: 100%;
@ -9,10 +7,10 @@ button {
}
&.show-bg {
background-color: $btn-bg;
background-color: var(--iqser-btn-bg);
&:not(.mat-button-disabled):hover {
background-color: $btn-bg-hover;
background-color: var(--iqser-btn-bg-hover);
}
}

4
src/lib/empty-states/empty-state/empty-state.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../assets/styles/common';
.empty-state {
display: flex;
flex-direction: column;
@ -13,7 +11,7 @@
}
.heading-l {
color: $grey-7;
color: var(--iqser-disabled);
}
> .heading-l,

8
src/lib/error/full-page-error/full-page-error.component.scss
View File

@ -1,13 +1,11 @@
@use '../../../assets/styles/variables';
.offline-box {
position: fixed;
bottom: 20px;
right: 20px;
height: 40px;
width: 300px;
background: variables.$white;
border: 1px solid variables.$separator;
background: var(--iqser-white);
border: 1px solid var(--iqser-separator);
border-radius: 10px;
padding: 14px;
@ -36,7 +34,7 @@
}
.error {
color: variables.$primary;
color: var(--iqser-primary);
}
}

4
src/lib/filtering/popup-filter/popup-filter.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../assets/styles/variables';
.filter-menu-options,
.filter-menu-header {
display: flex;
@ -27,7 +25,7 @@
}
.filter-options {
background-color: $filter-bg;
background-color: var(--iqser-filter-bg);
padding-bottom: 8px;
}

10
src/lib/filtering/quick-filters/quick-filters.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../assets/styles/variables';
:host {
display: flex;
flex: 1;
@ -8,9 +6,9 @@
.quick-filter {
box-sizing: border-box;
border: 1px solid $quick-filter-border;
border: 1px solid var(--iqser-quick-filter-border);
border-radius: 17px;
background-color: $btn-bg;
background-color: var(--iqser-btn-bg);
padding: 0 14px;
height: 34px;
display: flex;
@ -19,11 +17,11 @@
transition: background-color 0.2s;
&:hover {
background-color: $white;
background-color: var(--iqser-white);
}
&.active {
background-color: $white;
background-color: var(--iqser-white);
font-weight: 600;
border: none;
}

12
src/lib/help-mode/help-mode/help-mode.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../../apps/red-ui/src/assets/styles/variables';
.help-button {
width: 44px;
height: 40px;
@ -7,7 +5,7 @@
bottom: 20px;
right: 0;
z-index: 1;
background: $green-2;
background: var(--iqser-helpmode-primary);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25);
@ -40,10 +38,10 @@
box-sizing: border-box;
height: 100%;
width: 100%;
border-left: 8px solid $green-2;
border-right: 8px solid $green-2;
border-top: 8px solid $green-2;
border-bottom: 60px solid $green-2;
border-left: 8px solid var(--iqser-helpmode-primary);
border-right: 8px solid var(--iqser-helpmode-primary);
border-top: 8px solid var(--iqser-helpmode-primary);
border-bottom: 60px solid var(--iqser-helpmode-primary);
z-index: 10;
position: absolute;
display: flex;

10
src/lib/inputs/round-checkbox/round-checkbox.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../assets/styles/common';
:host {
cursor: pointer;
}
@ -12,22 +10,22 @@
&.inactive {
border: 1px solid #d3d5da;
background-color: $white;
background-color: var(--iqser-white);
}
.mat-icon {
color: $primary;
color: var(--iqser-primary);
width: var(--size);
height: var(--size);
}
&.with-bg {
.mat-icon {
color: $white;
color: var(--iqser-white);
}
&.inactive {
border: 1px solid $btn-bg;
border: 1px solid var(--iqser-btn-bg);
background-color: transparent;
}
}

6
src/lib/listing/scroll-button/scroll-button.component.scss
View File

@ -1,7 +1,5 @@
@import '../../../assets/styles/common';
.scroll-button {
background-color: $white;
background-color: var(--iqser-white);
position: absolute;
right: 0;
height: 40px;
@ -26,5 +24,5 @@
mat-icon {
width: 22px;
height: 22px;
color: $grey-7;
color: var(--iqser-disabled);
}

4
src/lib/listing/table-column-name/table-column-name.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../assets/styles/common';
:host {
display: flex;
height: 30px;
@ -38,7 +36,7 @@
.sort-arrows-container {
display: none;
color: $primary;
color: var(--iqser-primary);
margin-left: 8px;
mat-icon {

8
src/lib/listing/table-header/table-header.component.scss
View File

@ -1,8 +1,6 @@
@import '../../../assets/styles/common';
.table-header {
display: flex;
border-bottom: 1px solid $separator;
border-bottom: 1px solid var(--iqser-separator);
&.no-data.selection-enabled:not([synced='true']) {
padding-left: 30px;
@ -10,12 +8,12 @@
}
.header-item {
background-color: $btn-bg;
background-color: var(--iqser-btn-bg);
height: 50px;
display: flex;
align-items: center;
z-index: 1;
border-bottom: 1px solid $separator;
border-bottom: 1px solid var(--iqser-separator);
box-sizing: border-box;
padding: 0 24px;

17
src/lib/listing/table/table.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../assets/styles/common';
@use '../../../assets/styles/common-mixins' as mixins;
:host cdk-virtual-scroll-viewport {
height: calc(100vh - 50px - 31px - 111px);
@ -25,7 +25,7 @@
justify-content: center;
position: relative;
box-sizing: border-box;
border-bottom: 1px solid $separator;
border-bottom: 1px solid var(--iqser-separator);
height: var(--itemSize);
padding: 0 10px;
@ -61,18 +61,17 @@
}
&.disabled > div {
background-color: $grey-2;
color: $grey-7;
background-color: var(--iqser-filter-bg);
color: var(--iqser-disabled);
.action-buttons {
color: initial;
}
}
.table-item-title {
font-weight: 600;
@include line-clamp(1);
@include mixins.line-clamp(1);
}
.action-buttons {
@ -87,7 +86,7 @@
padding-left: 100px;
padding-right: 21px;
z-index: 1;
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%);
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-filter-bg) 35%);
mat-icon {
width: 14px;
@ -114,14 +113,14 @@
}
&:hover:not(.disabled) > div {
background-color: $grey-8;
background-color: var(--iqser-not-disabled-table-item);
}
}
}
&:hover {
overflow-y: auto !important;
@include scroll-bar;
@include mixins.scroll-bar;
&.has-scrollbar {
.table-item {