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

Initial theme

Browse Source
This commit is contained in:
Adina Țeudan 2022-06-27 21:02:56 +03:00
parent f9e2488338
commit a6d244a3a9
22 changed files with 81 additions and 51 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"?>
<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">
<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">
<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
>
<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" 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>

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"?>
<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="#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-view" transform="translate(10.000000, 10.000000)">
<path

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 938 B

After

Width:  |  Height:  |  Size: 943 B

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

@ -21,7 +21,7 @@
}
@mixin scroll-bar {
scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
scrollbar-color: var(--iqser-grey-5) var(--iqser-grey-2);
scrollbar-width: thin;
&::-webkit-scrollbar {
@ -35,7 +35,7 @@
/* Handle */
&::-webkit-scrollbar-thumb {
background: var(--iqser-quick-filter-border);
background: var(--iqser-grey-5);
}
}

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

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

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

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

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

@ -30,7 +30,7 @@
.breadcrumb {
text-decoration: none;
color: var(--iqser-accent);
color: var(--iqser-text);
font-weight: 600;
width: fit-content;
white-space: nowrap;

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

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

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

@ -24,6 +24,7 @@
&.gray-dark {
background-color: var(--iqser-grey-6);
color: var(--iqser-accent);
}
&.gray-primary {
@ -33,6 +34,7 @@
&.lightgray-dark {
background-color: var(--iqser-grey-4);
color: var(--iqser-accent);
}
&.lightgray-primary {
@ -57,6 +59,7 @@
&.white-dark {
border: 1px solid var(--iqser-grey-4);
color: var(--iqser-accent);
}
&.inactive {
@ -97,6 +100,7 @@
&.warn {
background-color: rgba(var(--iqser-yellow-rgb), 0.7);
color: var(--iqser-accent);
}
&.error {

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

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

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

@ -21,10 +21,10 @@ form .iqser-input-group:not(first-of-type) {
position: absolute;
left: 114px;
bottom: 1px;
background: var(--iqser-quick-filter-border);
background: var(--iqser-grey-5);
height: 34px;
width: 34px;
border-left: 1px solid var(--iqser-quick-filter-border);
border-left: 1px solid var(--iqser-inputs-border);
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
cursor: pointer;
@ -97,10 +97,11 @@ form .iqser-input-group:not(first-of-type) {
box-sizing: border-box;
padding-left: 11px;
padding-right: 11px;
border: 1px solid var(--iqser-quick-filter-border);
border: 1px solid var(--iqser-inputs-border);
font-family: Inter, sans-serif;
font-size: 13px;
background-color: #ffffff;
background-color: var(--iqser-background);
color: var(--iqser-text);
border-radius: 8px;
outline: none;
margin-top: 3px;
@ -111,11 +112,11 @@ form .iqser-input-group:not(first-of-type) {
}
&:focus:not(:disabled):not(.mat-select-disabled) {
border-color: var(--iqser-accent);
border-color: var(--iqser-text);
}
&::placeholder {
color: var(--iqser-accent);
color: var(--iqser-text);
opacity: 0.7;
}
@ -150,6 +151,11 @@ form .iqser-input-group:not(first-of-type) {
.mat-select-value {
vertical-align: middle;
color: var(--iqser-text);
}
.mat-select-arrow {
color: rgba(var(--iqser-text-rgb), 0.7);
}
}

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

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

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

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

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

@ -2,6 +2,7 @@
.mat-select-panel {
padding: 7px 0 !important;
background-color: var(--iqser-background);
@include common-mixins.scroll-bar;
.mat-option {
@ -15,7 +16,7 @@
&.mat-selected:not(.mat-option-multiple) {
background-color: rgba(var(--iqser-primary-rgb), 0.2);
color: var(--iqser-accent);
color: var(--iqser-text);
}
}
}

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

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

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

@ -26,7 +26,7 @@
}
&[disabled] {
color: rgba(var(--iqser-accent-rgb), 0.3);
color: rgba(var(--iqser-text-rgb), 0.3);
cursor: not-allowed;
}
}

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

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

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

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

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

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

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

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

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

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

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

@ -17,6 +17,7 @@
border-bottom: 1px solid var(--iqser-separator);
height: var(--itemSize);
padding: 0 10px;
background-color: var(--iqser-background);
&.center {
align-items: center;

0
test.json Normal file
View File