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

Merge branch 'theme'

Browse Source
This commit is contained in:
Adina Țeudan 2022-06-29 19:55:04 +03:00
commit f12e9a2094
44 changed files with 177 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/icons/help-outline.svg
View File

@ -1,10 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
<g id="Help-Mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> >
<g id="01.-Help-button" transform="translate(-1408.000000, -645.000000)" fill="#283241" fill-rule="nonzero"> <g fill="none" fill-rule="evenodd" id="Help-Mode" stroke="none" stroke-width="1">
<g fill="currentColor" fill-rule="nonzero" id="01.-Help-button" transform="translate(-1408.000000, -645.000000)">
<g id="help-button" transform="translate(1294.000000, 635.000000)"> <g id="help-button" transform="translate(1294.000000, 635.000000)">
<g id="help" transform="translate(114.000000, 10.000000)"> <g id="help" transform="translate(114.000000, 10.000000)">
<path d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path> <path
d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
</g> </g>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
src/assets/icons/list.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg"> <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1"> <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
<g fill="#283241" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)"> <g fill="currentColor" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)">
<g id="list" transform="translate(969.000000, 284.000000)"> <g id="list" transform="translate(969.000000, 284.000000)">
<g id="list-view" transform="translate(10.000000, 10.000000)"> <g id="list-view" transform="translate(10.000000, 10.000000)">
<path <path

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 938 B

After

Width:  |  Height:  |  Size: 943 B

6
src/assets/icons/sort-asc.svg
View File

@ -2,9 +2,9 @@
<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg"> <svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1"> <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)"> <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
<polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon> <polygon id="Fill-1"
<polygon fill="#28324180" id="Fill-1" points="1215 338 1218 334 1212 334" style="fill: var(--iqser-primary)"></polygon>
points="1215 330 1218 326 1212 326" <polygon fill="currentColor" id="Fill-1" points="1215 330 1218 326 1212 326"
transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon> transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 B

After

Width:  |  Height:  |  Size: 687 B

6
src/assets/icons/sort-desc.svg
View File

@ -2,9 +2,9 @@
<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg"> <svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1"> <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)"> <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
<polygon fill="#28324180" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon> <polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
<polygon fill="currentColor" id="Fill-1" <polygon id="Fill-1" points="1215 330 1218 326 1212 326"
points="1215 330 1218 326 1212 326" style="fill: var(--iqser-primary)"
transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon> transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 B

After

Width:  |  Height:  |  Size: 687 B

18
src/assets/styles/_common-mixins.scss
View File

@ -21,30 +21,34 @@
} }
@mixin scroll-bar { @mixin scroll-bar {
scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2); scrollbar-color: var(--iqser-inputs-outline) var(--iqser-alt-background);
scrollbar-width: thin; scrollbar-width: thin;
::-webkit-scrollbar-corner {
background: var(--iqser-alt-background);
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 11px; width: 11px;
} }
/* Track */ /* Track */
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: var(--iqser-grey-2); background: var(--iqser-alt-background);
} }
/* Handle */ /* Handle */
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: var(--iqser-quick-filter-border); background: var(--iqser-inputs-outline);
} }
} }
@mixin inset-shadow { @mixin inset-shadow {
box-shadow: inset 0 4px 3px -2px var(--iqser-btn-bg-hover); box-shadow: inset 0 4px 3px -2px var(--iqser-shadow);
} }
@mixin drop-shadow { @mixin drop-shadow {
box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover); box-shadow: 0 1px 6px 0 var(--iqser-shadow);
} }
@mixin clear-btn { @mixin clear-btn {
@ -59,9 +63,9 @@
@mixin clear-a { @mixin clear-a {
text-decoration: none; text-decoration: none;
color: initial; color: var(--iqser-text);
&:hover { &:hover {
color: initial; color: var(--iqser-text);
} }
} }

37
src/assets/styles/_common-variables.scss
View File

@ -1,11 +1,13 @@
@use 'sass:meta'; @use 'sass:meta';
:root { body {
--iqser-primary: lightblue; --iqser-primary: lightblue;
--iqser-primary-rgb: 220, 230, 234; --iqser-primary-rgb: 220, 230, 234;
--iqser-primary-2: orange; --iqser-primary-2: orange;
--iqser-accent: blue; --iqser-accent: blue;
--iqser-accent-rgb: 123, 234, 111; --iqser-accent-rgb: 123, 234, 111;
--iqser-background: white;
--iqser-text: black;
--iqser-disabled: #9398a0; --iqser-disabled: #9398a0;
--iqser-not-disabled-table-item: #f9fafb; --iqser-not-disabled-table-item: #f9fafb;
--iqser-btn-bg-hover: #e2e4e9; --iqser-btn-bg-hover: #e2e4e9;
@ -15,18 +17,15 @@
--iqser-black: black; --iqser-black: black;
--iqser-light: white; --iqser-light: white;
--iqser-separator: rgba(226, 228, 233, 0.9); --iqser-separator: rgba(226, 228, 233, 0.9);
--iqser-quick-filter-border: #d3d5da; --iqser-grey-1: #283241; // ebony clay
--iqser-grey-1: #283241; --iqser-grey-10: #313d4e; // oxford blue - manual only
--iqser-grey-2: #f4f5f7; --iqser-grey-7: #9398a0; // manatee
--iqser-grey-3: #aaacb3; --iqser-grey-3: #aaacb3; // aluminium
--iqser-grey-4: #e2e4e9; --iqser-grey-5: #d3d5da; // iron
--iqser-grey-5: #d3d5da; --iqser-grey-4: #e2e4e9; // athens gray
--iqser-grey-6: #f0f1f4; --iqser-grey-6: #f0f1f4; // athens gray
--iqser-grey-7: #9398a0; --iqser-grey-2: #f4f5f7; // athens gray
--iqser-grey-8: #f9fafb; --iqser-grey-8: #f9fafb; // athens gray
--iqser-grey-9: #f5f5f7;
--iqser-grey-10: #313d4e;
--iqser-grey-11: #ecedf0;
--iqser-green-1: #00ff00; --iqser-green-1: #00ff00;
--iqser-green-2: #5ce594; --iqser-green-2: #5ce594;
--iqser-orange-1: #ff801a; --iqser-orange-1: #ff801a;
@ -44,8 +43,16 @@
--iqser-helpmode-primary: green; --iqser-helpmode-primary: green;
} }
@mixin configure($args...) { @mixin configureLight($args...) {
:root { body.light {
@each $name, $value in meta.keywords($args) {
--#{$name}: #{$value};
}
}
}
@mixin configureDark($args...) {
body.dark {
@each $name, $value in meta.keywords($args) { @each $name, $value in meta.keywords($args) {
--#{$name}: #{$value}; --#{$name}: #{$value};
} }

2
src/assets/styles/common-base-screen.scss
View File

@ -8,6 +8,7 @@
padding: 0 24px; padding: 0 24px;
border-bottom: 1px solid var(--iqser-separator); border-bottom: 1px solid var(--iqser-separator);
box-sizing: border-box; box-sizing: border-box;
background-color: var(--iqser-background);
> *:not(:last-child) { > *:not(:last-child) {
margin-right: 50px; margin-right: 50px;
@ -28,6 +29,7 @@
letter-spacing: 0; letter-spacing: 0;
line-height: 20px; line-height: 20px;
white-space: nowrap; white-space: nowrap;
color: var(--iqser-text);
} }
.menu { .menu {

4
src/assets/styles/common-breadcrumbs.scss
View File

@ -18,7 +18,7 @@
color: var(--iqser-primary); color: var(--iqser-primary);
&[aria-expanded='true'] .mat-button-wrapper > span { &[aria-expanded='true'] .mat-button-wrapper > span {
color: var(--iqser-accent); color: var(--iqser-text);
} }
} }
} }
@ -30,7 +30,7 @@
.breadcrumb { .breadcrumb {
text-decoration: none; text-decoration: none;
color: var(--iqser-accent); color: var(--iqser-text);
font-weight: 600; font-weight: 600;
width: fit-content; width: fit-content;
white-space: nowrap; white-space: nowrap;

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

@ -21,9 +21,13 @@
margin: auto; margin: auto;
} }
} }
}
.mat-button,
.mat-icon-button,
.mat-flat-button {
&.mat-button-disabled .mat-button-wrapper { &.mat-button-disabled .mat-button-wrapper {
color: var(--iqser-accent); color: var(--iqser-text);
opacity: 0.3; opacity: 0.3;
} }
} }
@ -84,6 +88,7 @@ iqser-circle-button {
&.help:hover { &.help:hover {
background-color: var(--iqser-helpmode-primary); background-color: var(--iqser-helpmode-primary);
color: var(--iqser-grey-1);
} }
} }

2
src/assets/styles/common-checkbox.scss
View File

@ -19,7 +19,7 @@
.mat-checkbox-label { .mat-checkbox-label {
font-size: 13px; font-size: 13px;
color: var(--iqser-accent); color: var(--iqser-text);
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -0,0 +1,7 @@
.color-picker {
background-color: var(--iqser-background) !important;
input {
color: var(--iqser-text) !important;
}
}

19
src/assets/styles/common-components.scss
View File

@ -23,20 +23,22 @@
} }
&.gray-dark { &.gray-dark {
background-color: var(--iqser-grey-6); background-color: var(--iqser-user-avatar-1);
color: var(--iqser-text);
} }
&.gray-primary { &.gray-primary {
background-color: var(--iqser-grey-6); background-color: var(--iqser-user-avatar-1);
color: var(--iqser-primary); color: var(--iqser-primary);
} }
&.lightgray-dark { &.lightgray-dark {
background-color: var(--iqser-grey-4); background-color: var(--iqser-user-avatar-2);
color: var(--iqser-text);
} }
&.lightgray-primary { &.lightgray-primary {
background-color: var(--iqser-grey-4); background-color: var(--iqser-user-avatar-2);
color: var(--iqser-primary); color: var(--iqser-primary);
} }
@ -56,11 +58,12 @@
} }
&.white-dark { &.white-dark {
border: 1px solid var(--iqser-grey-4); background-color: var(--iqser-user-avatar-2);
color: var(--iqser-accent);
} }
&.inactive { &.inactive {
background-color: var(--iqser-grey-6); background-color: var(--iqser-user-avatar-1);
color: var(--iqser-grey-7); color: var(--iqser-grey-7);
} }
} }
@ -79,8 +82,7 @@
mat-icon { mat-icon {
width: 10px; width: 10px;
height: 10px; height: 11px;
line-height: 13px;
margin-right: 6px; margin-right: 6px;
} }
@ -97,6 +99,7 @@
&.warn { &.warn {
background-color: rgba(var(--iqser-yellow-rgb), 0.7); background-color: rgba(var(--iqser-yellow-rgb), 0.7);
color: var(--iqser-accent);
} }
&.error { &.error {

3
src/assets/styles/common-dialogs.scss
View File

@ -2,7 +2,8 @@
.mat-dialog-container { .mat-dialog-container {
display: flex !important; display: flex !important;
color: var(--iqser-accent); color: var(--iqser-text);
background-color: var(--iqser-background);
padding: 0 !important; padding: 0 !important;
border-radius: 8px !important; border-radius: 8px !important;
@include common-mixins.scroll-bar; @include common-mixins.scroll-bar;

2
src/assets/styles/common-file-drop.scss
View File

@ -9,7 +9,7 @@
z-index: 1000; z-index: 1000;
padding: 12px; padding: 12px;
opacity: 0.7; opacity: 0.7;
background: var(--iqser-white); background: var(--iqser-background);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;

2
src/assets/styles/common-full-pages.scss
View File

@ -6,7 +6,7 @@
.full-page-section { .full-page-section {
opacity: 0.7; opacity: 0.7;
background: var(--iqser-white); background: var(--iqser-background);
z-index: 900; z-index: 900;
} }

33
src/assets/styles/common-inputs.scss
View File

@ -21,10 +21,10 @@ form .iqser-input-group:not(first-of-type) {
position: absolute; position: absolute;
left: 114px; left: 114px;
bottom: 1px; bottom: 1px;
background: var(--iqser-quick-filter-border); background: var(--iqser-grey-5);
height: 34px; height: 34px;
width: 34px; width: 34px;
border-left: 1px solid var(--iqser-quick-filter-border); border-left: 1px solid var(--iqser-inputs-outline);
border-top-right-radius: 7px; border-top-right-radius: 7px;
border-bottom-right-radius: 7px; border-bottom-right-radius: 7px;
cursor: pointer; cursor: pointer;
@ -59,7 +59,7 @@ form .iqser-input-group:not(first-of-type) {
.mat-form-field-label { .mat-form-field-label {
opacity: 0.7 !important; opacity: 0.7 !important;
color: var(--iqser-accent) !important; color: var(--iqser-text) !important;
transform: translateY(-1.34em) !important; transform: translateY(-1.34em) !important;
} }
@ -97,10 +97,11 @@ form .iqser-input-group:not(first-of-type) {
box-sizing: border-box; box-sizing: border-box;
padding-left: 11px; padding-left: 11px;
padding-right: 11px; padding-right: 11px;
border: 1px solid var(--iqser-quick-filter-border); border: 1px solid var(--iqser-inputs-outline);
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
font-size: 13px; font-size: 13px;
background-color: #ffffff; background-color: var(--iqser-background);
color: var(--iqser-text);
border-radius: 8px; border-radius: 8px;
outline: none; outline: none;
margin-top: 3px; margin-top: 3px;
@ -111,11 +112,11 @@ form .iqser-input-group:not(first-of-type) {
} }
&:focus:not(:disabled):not(.mat-select-disabled) { &:focus:not(:disabled):not(.mat-select-disabled) {
border-color: var(--iqser-accent); border-color: var(--iqser-text);
} }
&::placeholder { &::placeholder {
color: var(--iqser-accent); color: var(--iqser-text);
opacity: 0.7; opacity: 0.7;
} }
@ -129,8 +130,8 @@ form .iqser-input-group:not(first-of-type) {
&:disabled, &:disabled,
&.mat-select-disabled { &.mat-select-disabled {
background-color: var(--iqser-grey-2); background-color: var(--iqser-alt-background);
color: rgba(var(--iqser-accent-rgb), 0.3); color: rgba(var(--iqser-text-rgb), 0.3);
} }
} }
@ -143,13 +144,23 @@ form .iqser-input-group:not(first-of-type) {
max-width: 150px; max-width: 150px;
} }
mat-select { mat-select,
.mat-select.mat-select-disabled {
.mat-select-trigger { .mat-select-trigger {
height: 32px; height: 32px;
} }
.mat-select-placeholder {
color: rgba(var(--iqser-text-rgb), 0.4);
}
.mat-select-value { .mat-select-value {
vertical-align: middle; vertical-align: middle;
color: var(--iqser-text);
}
.mat-select-arrow {
color: rgba(var(--iqser-text-rgb), 0.7);
} }
} }
@ -171,7 +182,7 @@ form .iqser-input-group:not(first-of-type) {
letter-spacing: 0; letter-spacing: 0;
line-height: 14px; line-height: 14px;
margin-bottom: 2px; margin-bottom: 2px;
color: var(--iqser-accent); color: var(--iqser-text);
&.mat-checkbox-layout { &.mat-checkbox-layout {
opacity: 1; opacity: 1;

13
src/assets/styles/common-layout.scss
View File

@ -6,7 +6,8 @@ body {
padding: 0; padding: 0;
height: 100vh; height: 100vh;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
color: var(--iqser-accent); color: var(--iqser-text);
background-color: var(--iqser-background);
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
display: flex; display: flex;
@ -44,7 +45,7 @@ section.settings {
height: 50px; height: 50px;
width: 100vw; width: 100vw;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--iqser-white); background-color: var(--iqser-background);
border-bottom: 1px solid var(--iqser-separator); border-bottom: 1px solid var(--iqser-separator);
.filters { .filters {
@ -121,10 +122,10 @@ section.settings {
border-radius: 8px; border-radius: 8px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 70px; margin-bottom: 70px;
background-color: var(--iqser-white); background-color: var(--iqser-background);
max-width: 650px; max-width: 650px;
height: fit-content; height: fit-content;
box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); @include common-mixins.drop-shadow;
position: unset; position: unset;
.heading-l { .heading-l {
@ -158,9 +159,9 @@ section.settings {
} }
.right-container { .right-container {
border-left: 1px solid var(--iqser-grey-4); border-left: 1px solid var(--iqser-separator);
box-sizing: border-box; box-sizing: border-box;
background: var(--iqser-white); background: var(--iqser-background);
overflow: hidden; overflow: hidden;
transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;

8
src/assets/styles/common-loading.scss
View File

@ -6,15 +6,15 @@
@keyframes dots { @keyframes dots {
0%, 0%,
20% { 20% {
color: rgba(40, 50, 65, 0); color: rgba(var(--iqser-accent-rgb), 0);
text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0); text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
} }
40% { 40% {
color: #283241; color: #283241;
text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0); text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
} }
60% { 60% {
text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0); text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
} }
80%, 80%,
100% { 100% {

9
src/assets/styles/common-menu.scss
View File

@ -2,11 +2,12 @@
.mat-menu-panel { .mat-menu-panel {
border-radius: 8px !important; border-radius: 8px !important;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
max-width: none !important; max-width: none !important;
min-width: 180px !important; min-width: 180px !important;
margin-top: 10px; margin-top: 10px;
background-color: var(--iqser-popup-background);
@include common-mixins.scroll-bar; @include common-mixins.scroll-bar;
@include common-mixins.drop-shadow;
.mat-menu-content:not(:empty) { .mat-menu-content:not(:empty) {
padding-top: 8px; padding-top: 8px;
@ -23,7 +24,7 @@
.mat-menu-item { .mat-menu-item {
font-size: 13px; font-size: 13px;
color: var(--iqser-accent); color: var(--iqser-text);
padding: 0 26px 0 8px; padding: 0 26px 0 8px;
margin: 0 8px 2px 8px; margin: 0 8px 2px 8px;
border-radius: 4px; border-radius: 4px;
@ -32,6 +33,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
mat-icon {
color: var(--iqser-text);
}
.dot { .dot {
right: 8px; right: 8px;
} }

5
src/assets/styles/common-select.scss
View File

@ -2,20 +2,21 @@
.mat-select-panel { .mat-select-panel {
padding: 7px 0 !important; padding: 7px 0 !important;
background-color: var(--iqser-background);
@include common-mixins.scroll-bar; @include common-mixins.scroll-bar;
.mat-option { .mat-option {
margin: 1px 8px; margin: 1px 8px;
border-radius: 4px; border-radius: 4px;
color: var(--iqser-text);
&:hover:not(.mat-option-disabled), &:hover:not(.mat-option-disabled),
&:focus:not(.mat-option-disabled) { &:focus:not(.mat-option-disabled) {
background-color: var(--iqser-grey-6); background-color: var(--iqser-btn-bg);
} }
&.mat-selected:not(.mat-option-multiple) { &.mat-selected:not(.mat-option-multiple) {
background-color: rgba(var(--iqser-primary-rgb), 0.2); background-color: rgba(var(--iqser-primary-rgb), 0.2);
color: var(--iqser-accent);
} }
} }
} }

4
src/assets/styles/common-side-nav.scss
View File

@ -5,7 +5,7 @@ iqser-side-nav {
flex-direction: column; flex-direction: column;
min-width: 200px; min-width: 200px;
max-width: 200px; max-width: 200px;
background-color: var(--iqser-grey-2); background-color: var(--iqser-side-nav);
border-right: 1px solid var(--iqser-separator); border-right: 1px solid var(--iqser-separator);
box-sizing: border-box; box-sizing: border-box;
padding: 8px; padding: 8px;
@ -24,7 +24,7 @@ iqser-side-nav {
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
font-weight: 500; font-weight: 500;
color: var(--iqser-accent); color: var(--iqser-text);
text-decoration: none; text-decoration: none;
display: flex; display: flex;
align-items: center; align-items: center;

2
src/assets/styles/common-slider.scss
View File

@ -22,7 +22,7 @@
height: 4px !important; height: 4px !important;
margin-top: 1px; margin-top: 1px;
border-radius: 3px; border-radius: 3px;
background-color: var(--iqser-grey-4) !important; background-color: var(--iqser-toggle-bg) !important;
} }
.mat-slider-focus-ring { .mat-slider-focus-ring {

1
src/assets/styles/common-styles.scss
View File

@ -29,3 +29,4 @@
@use 'common-file-drop'; @use 'common-file-drop';
@use 'common-side-nav'; @use 'common-side-nav';
@use 'common-radio'; @use 'common-radio';
@use 'common-color-picker';

4
src/assets/styles/common-tabs.scss
View File

@ -16,7 +16,7 @@
cursor: pointer; cursor: pointer;
&:not([disabled]):not(.active):hover { &:not([disabled]):not(.active):hover {
background-color: var(--iqser-grey-6); background-color: var(--iqser-tab-hover);
} }
&.active { &.active {
@ -26,7 +26,7 @@
} }
&[disabled] { &[disabled] {
color: rgba(var(--iqser-accent-rgb), 0.3); color: rgba(var(--iqser-text-rgb), 0.3);
cursor: not-allowed; cursor: not-allowed;
} }
} }

8
src/assets/styles/common-texts.scss
View File

@ -52,7 +52,7 @@ a {
pre { pre {
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
color: var(--iqser-accent); color: var(--iqser-text);
} }
.heading-xl { .heading-xl {
@ -95,7 +95,7 @@ pre {
} }
.link-action { .link-action {
color: var(--iqser-accent); color: var(--iqser-text);
font-size: 11px; font-size: 11px;
line-height: 14px; line-height: 14px;
text-decoration: underline; text-decoration: underline;
@ -103,12 +103,12 @@ pre {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: var(--iqser-accent); color: var(--iqser-text);
} }
} }
.large-label { .large-label {
color: var(--iqser-accent); color: var(--iqser-text);
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
} }

2
src/assets/styles/common-toggle-button.scss
View File

@ -6,7 +6,7 @@
.mat-button-toggle:not(.mat-button-toggle-checked) { .mat-button-toggle:not(.mat-button-toggle-checked) {
.mat-button-toggle-button { .mat-button-toggle-button {
background: var(--iqser-grey-6); background: var(--iqser-btn-bg);
color: var(--iqser-grey-7); color: var(--iqser-grey-7);
} }
} }

8
src/assets/styles/common-toggle.scss
View File

@ -3,7 +3,7 @@
height: 16px !important; height: 16px !important;
width: 30px !important; width: 30px !important;
border-radius: 16px !important; border-radius: 16px !important;
background-color: var(--iqser-grey-4); background-color: var(--iqser-toggle-bg);
} }
.mat-slide-toggle-thumb-container { .mat-slide-toggle-thumb-container {
@ -17,7 +17,7 @@
height: 12px !important; height: 12px !important;
width: 12px !important; width: 12px !important;
box-shadow: none; box-shadow: none;
background-color: var(--iqser-grey-2); background-color: var(--iqser-alt-background);
} }
.mat-ripple { .mat-ripple {
@ -27,11 +27,11 @@
&.mat-primary.mat-checked { &.mat-primary.mat-checked {
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
background-color: var(--iqser-primary); background-color: var(--iqser-primary);
border: 1px solid var(--iqser-white); border: 1px solid var(--iqser-background);
} }
.mat-slide-toggle-thumb { .mat-slide-toggle-thumb {
background-color: var(--iqser-white); background-color: var(--iqser-background);
} }
.mat-slide-toggle-thumb-container { .mat-slide-toggle-thumb-container {

10
src/lib/buttons/help-button/help-button.component.html
View File

@ -1,14 +1,6 @@
<iqser-icon-button
*ngIf="dialogButton"
(action)="activateHelpMode()"
icon="iqser:help-outline"
type="help"
[label]="'help-mode.button-text' | translate"
></iqser-icon-button>
<iqser-circle-button <iqser-circle-button
*ngIf="!dialogButton"
(action)="activateHelpMode()" (action)="activateHelpMode()"
[tooltip]="'help-mode.button-text' | translate"
icon="iqser:help-outline" icon="iqser:help-outline"
type="help" type="help"
[tooltip]="'help-mode.button-text' | translate"
></iqser-circle-button> ></iqser-circle-button>

3
src/lib/buttons/help-button/help-button.component.ts
View File

@ -8,7 +8,6 @@ import { HelpModeService } from '@iqser/common-ui';
styleUrls: ['./help-button.component.scss'], styleUrls: ['./help-button.component.scss'],
}) })
export class HelpButtonComponent implements OnInit, OnDestroy { export class HelpButtonComponent implements OnInit, OnDestroy {
@Input() dialogButton = true;
@Input() helpButtonKey?: string; @Input() helpButtonKey?: string;
constructor(private readonly _helpModeService: HelpModeService) {} constructor(private readonly _helpModeService: HelpModeService) {}
@ -27,6 +26,6 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
window.open(url, '_blank'); window.open(url, '_blank');
return; return;
} }
this._helpModeService.activateHelpMode(this.dialogButton); this._helpModeService.activateHelpMode();
} }
} }

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

@ -28,7 +28,7 @@
} }
.filter-options { .filter-options {
background-color: var(--iqser-grey-2); background-color: var(--iqser-side-nav);
padding-bottom: 8px; padding-bottom: 8px;
} }

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

@ -6,7 +6,7 @@
.quick-filter { .quick-filter {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--iqser-quick-filter-border); border: 1px solid var(--iqser-inputs-outline);
border-radius: 17px; border-radius: 17px;
background-color: var(--iqser-btn-bg); background-color: var(--iqser-btn-bg);
padding: 0 14px; padding: 0 14px;
@ -17,11 +17,11 @@
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &:hover {
background-color: var(--iqser-white); background-color: var(--iqser-background);
} }
&.active { &.active {
background-color: var(--iqser-white); background-color: var(--iqser-background);
font-weight: 600; font-weight: 600;
border: none; border: none;
} }

2
src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
View File

@ -1,5 +1,5 @@
section { section {
background: var(--iqser-grey-11); background: var(--iqser-btn-bg-hover);
align-items: center; align-items: center;
.content { .content {

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

@ -23,10 +23,11 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
pointer-events: visiblePainted; pointer-events: visiblePainted;
color: var(--iqser-grey-1);
a { a {
color: black;
text-decoration: underline; text-decoration: underline;
color: var(--iqser-grey-1);
} }
.close { .close {

2
src/lib/inputs/details-radio/details-radio.component.scss
View File

@ -5,7 +5,7 @@ label {
.option { .option {
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
background-color: var(--iqser-grey-2); background-color: var(--iqser-alt-background);
&.active { &.active {
background-color: rgba(var(--iqser-primary-rgb), 0.1); background-color: rgba(var(--iqser-primary-rgb), 0.1);

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

@ -9,8 +9,8 @@
border-radius: 50%; border-radius: 50%;
&.inactive { &.inactive {
border: 1px solid #d3d5da; border: 1px solid var(--iqser-inputs-outline);
background-color: var(--iqser-white); background-color: var(--iqser-background);
} }
.mat-icon { .mat-icon {

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

@ -1,12 +1,14 @@
@use '../../../assets/styles/common-mixins' as mixins;
.scroll-button { .scroll-button {
background-color: var(--iqser-white); background-color: var(--iqser-popup-background);
position: absolute; position: absolute;
right: 0; right: 0;
height: 40px; height: 40px;
width: 44px; width: 44px;
border: none; border: none;
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25); @include mixins.drop-shadow;
&.bottom { &.bottom {
bottom: 30px; bottom: 30px;

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

@ -36,7 +36,7 @@
.sort-arrows-container { .sort-arrows-container {
display: none; display: none;
color: var(--iqser-primary); color: rgba(var(--iqser-text-rgb), 0.5);
margin-left: 8px; margin-left: 8px;
mat-icon { mat-icon {

1
src/lib/listing/table-content/table-content.component.scss
View File

@ -3,6 +3,7 @@
:host cdk-virtual-scroll-viewport { :host cdk-virtual-scroll-viewport {
height: calc(100vh - 50px - 31px - 111px); height: calc(100vh - 50px - 31px - 111px);
overflow-y: hidden !important; overflow-y: hidden !important;
background-color: var(--iqser-background);
@include mixins.scroll-bar; @include mixins.scroll-bar;
&.no-data { &.no-data {

3
src/lib/listing/table-content/table-item/table-item.component.scss
View File

@ -17,6 +17,7 @@
border-bottom: 1px solid var(--iqser-separator); border-bottom: 1px solid var(--iqser-separator);
height: var(--itemSize); height: var(--itemSize);
padding: 0 10px; padding: 0 10px;
background-color: var(--iqser-background);
&.center { &.center {
align-items: center; align-items: center;
@ -68,7 +69,7 @@
padding-left: 100px; padding-left: 100px;
padding-right: 21px; padding-right: 21px;
z-index: 1; z-index: 1;
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%); background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-side-nav) 35%);
mat-icon { mat-icon {
width: 14px; width: 14px;

14
src/lib/listing/workflow/workflow.component.scss
View File

@ -16,7 +16,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
background-color: var(--iqser-grey-2); background-color: var(--iqser-alt-background);
border-radius: 6px; border-radius: 6px;
padding-top: 18px; padding-top: 18px;
position: relative; position: relative;
@ -51,8 +51,8 @@
-45deg, -45deg,
var(--iqser-separator), var(--iqser-separator),
var(--iqser-separator) 1px, var(--iqser-separator) 1px,
var(--iqser-white) 1px, var(--iqser-background) 1px,
var(--iqser-white) 8px var(--iqser-background) 8px
); );
> .heading, > .heading,
@ -76,8 +76,8 @@
} }
.item { .item {
background-color: var(--iqser-white); background-color: var(--iqser-background);
border: 2px solid var(--iqser-white); border: 2px solid var(--iqser-background);
&:last-child { &:last-child {
margin-bottom: 8px; margin-bottom: 8px;
@ -99,7 +99,7 @@
} }
.add-btn { .add-btn {
background-color: var(--iqser-grey-6); background-color: var(--iqser-btn-bg);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -110,7 +110,7 @@
} }
&:hover { &:hover {
background-color: var(--iqser-grey-4); background-color: var(--iqser-btn-bg-hover);
} }
} }

6
src/lib/misc/progress-bar/progress-bar.component.scss
View File

@ -3,11 +3,11 @@
} }
.wrapper { .wrapper {
background-color: var(--iqser-grey-6); background-color: var(--iqser-btn-bg);
.indicator { .indicator {
width: calc(100% / var(--total) * var(--count)); width: calc(100% / var(--total) * var(--count));
background-color: var(--iqser-grey-7); background-color: var(--iqser-loading-progress);
} }
} }
@ -28,5 +28,5 @@
} }
.active .indicator { .active .indicator {
background-color: rgba(var(--iqser-primary-rgb), 0.4); background-color: rgba(var(--iqser-primary-rgb), 0.7);
} }

13
src/lib/upload-file/drag-drop-file-upload.directive.ts
View File

@ -1,21 +1,18 @@
import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core'; import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
@Directive({ @Directive({
selector: '[iqserDragDropFileUpload]', selector: '[iqserDragDropFileUpload]',
}) })
export class DragDropFileUploadDirective { export class DragDropFileUploadDirective {
@Output() readonly fileDropped = new EventEmitter(); @Output() readonly fileDropped = new EventEmitter();
@HostBinding('style.background-color') private _background = DEFAULT_BACKGROUND_COLOR; @HostBinding('class.drag-over') private _dragOver = false;
@HostListener('dragover', ['$event']) @HostListener('dragover', ['$event'])
onDragOver(event: DragEvent) { onDragOver(event: DragEvent) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (event.dataTransfer?.types.includes('Files')) { if (event.dataTransfer?.types.includes('Files')) {
this._background = DRAG_OVER_BACKGROUND_COLOR; this._dragOver = true;
} }
} }
@ -23,7 +20,7 @@ export class DragDropFileUploadDirective {
onDragLeave(event: DragEvent) { onDragLeave(event: DragEvent) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
this._background = DEFAULT_BACKGROUND_COLOR; this._dragOver = false;
} }
@HostListener('drop', ['$event']) @HostListener('drop', ['$event'])
@ -31,7 +28,7 @@ export class DragDropFileUploadDirective {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (event?.dataTransfer?.types.includes('Files')) { if (event?.dataTransfer?.types.includes('Files')) {
this._background = DEFAULT_BACKGROUND_COLOR; this._dragOver = false;
const files = event.dataTransfer.files; const files = event.dataTransfer.files;
if (files.length > 0) { if (files.length > 0) {
this.fileDropped.emit({ target: { files } }); this.fileDropped.emit({ target: { files } });

8
src/lib/upload-file/upload-file.component.scss
View File

@ -1,12 +1,14 @@
@import '../../assets/styles/common-variables';
.upload-area, .upload-area,
.file-area { .file-area {
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
width: 100%; width: 100%;
background: var(--iqser-grey-2); background: var(--iqser-alt-background);
&.drag-over {
background-color: var(--iqser-file-drop-drag-over);
}
} }
.upload-area { .upload-area {

0
test.json Normal file
View File