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

Theme

Browse Source
This commit is contained in:
Adina Țeudan 2022-06-28 23:24:27 +03:00
parent 9714c93fc3
commit c56c44fb24
12 changed files with 43 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@
} }
@mixin drop-shadow { @mixin drop-shadow {
box-shadow: 0 2px 6px 0 var(--iqser-shadow); box-shadow: 0 1px 6px 0 var(--iqser-shadow);
} }
@mixin clear-btn { @mixin clear-btn {

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

@ -21,13 +21,18 @@
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-text); color: var(--iqser-text);
opacity: 0.3; opacity: 0.3;
} }
} }
.mat-flat-button.mat-primary, .mat-flat-button.mat-primary,
.mat-button.primary { .mat-button.primary {
padding: 0 14px; padding: 0 14px;
@ -84,6 +89,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);
} }
} }

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

@ -79,12 +79,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
min-width: fit-content; min-width: fit-content;
@include mixins.line-clamp(1);
mat-icon { mat-icon {
width: 10px; width: 10px;
height: 10px; height: 11px;
line-height: 13px;
margin-right: 6px; margin-right: 6px;
} }

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

@ -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;
} }
@ -130,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);
} }
} }
@ -144,11 +144,15 @@ 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); color: var(--iqser-text);

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

@ -125,7 +125,7 @@ section.settings {
background-color: var(--iqser-background); background-color: var(--iqser-background);
max-width: 650px; max-width: 650px;
height: fit-content; height: fit-content;
box-shadow: 0 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.19); @include common-mixins.drop-shadow;
position: unset; position: unset;
.heading-l { .heading-l {

4
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 {

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-4); // todo 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);

20
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;
@ -48,11 +48,11 @@
&:not(.list-can-receive):not(.list-dragging) { &:not(.list-can-receive):not(.list-dragging) {
background: repeating-linear-gradient( background: repeating-linear-gradient(
-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);
} }
} }

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 {