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 {
box-shadow: 0 2px 6px 0 var(--iqser-shadow);
box-shadow: 0 1px 6px 0 var(--iqser-shadow);
}
@mixin clear-btn {

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

@ -21,13 +21,18 @@
margin: auto;
}
}
}
.mat-button,
.mat-icon-button,
.mat-flat-button {
&.mat-button-disabled .mat-button-wrapper {
color: var(--iqser-text);
opacity: 0.3;
}
}
.mat-flat-button.mat-primary,
.mat-button.primary {
padding: 0 14px;
@ -84,6 +89,7 @@ iqser-circle-button {
&.help:hover {
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;
align-items: center;
min-width: fit-content;
@include mixins.line-clamp(1);
mat-icon {
width: 10px;
height: 10px;
line-height: 13px;
height: 11px;
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 {
opacity: 0.7 !important;
color: var(--iqser-accent) !important;
color: var(--iqser-text) !important;
transform: translateY(-1.34em) !important;
}
@ -130,8 +130,8 @@ form .iqser-input-group:not(first-of-type) {
&:disabled,
&.mat-select-disabled {
background-color: var(--iqser-grey-2);
color: rgba(var(--iqser-accent-rgb), 0.3);
background-color: var(--iqser-alt-background);
color: rgba(var(--iqser-text-rgb), 0.3);
}
}
@ -144,11 +144,15 @@ form .iqser-input-group:not(first-of-type) {
max-width: 150px;
}
mat-select {
mat-select, .mat-select.mat-select-disabled {
.mat-select-trigger {
height: 32px;
}
.mat-select-placeholder {
color: rgba(var(--iqser-text-rgb), 0.4);
}
.mat-select-value {
vertical-align: middle;
color: var(--iqser-text);

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

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

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

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

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

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

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

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

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

@ -5,7 +5,7 @@ label {
.option {
padding: 16px;
border-radius: 8px;
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
&.active {
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;
flex-direction: column;
flex: 1;
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
border-radius: 6px;
padding-top: 18px;
position: relative;
@ -48,11 +48,11 @@
&:not(.list-can-receive):not(.list-dragging) {
background: repeating-linear-gradient(
-45deg,
var(--iqser-separator),
var(--iqser-separator) 1px,
var(--iqser-white) 1px,
var(--iqser-white) 8px
-45deg,
var(--iqser-separator),
var(--iqser-separator) 1px,
var(--iqser-background) 1px,
var(--iqser-background) 8px
);
> .heading,
@ -76,8 +76,8 @@
}
.item {
background-color: var(--iqser-white);
border: 2px solid var(--iqser-white);
background-color: var(--iqser-background);
border: 2px solid var(--iqser-background);
&:last-child {
margin-bottom: 8px;
@ -99,7 +99,7 @@
}
.add-btn {
background-color: var(--iqser-grey-6);
background-color: var(--iqser-btn-bg);
padding: 10px;
text-align: center;
cursor: pointer;
@ -110,7 +110,7 @@
}
&: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';
const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
@Directive({
selector: '[iqserDragDropFileUpload]',
})
export class DragDropFileUploadDirective {
@Output() readonly fileDropped = new EventEmitter();
@HostBinding('style.background-color') private _background = DEFAULT_BACKGROUND_COLOR;
@HostBinding('class.drag-over') private _dragOver = false;
@HostListener('dragover', ['$event'])
onDragOver(event: DragEvent) {
event.preventDefault();
event.stopPropagation();
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) {
event.preventDefault();
event.stopPropagation();
this._background = DEFAULT_BACKGROUND_COLOR;
this._dragOver = false;
}
@HostListener('drop', ['$event'])
@ -31,7 +28,7 @@ export class DragDropFileUploadDirective {
event.preventDefault();
event.stopPropagation();
if (event?.dataTransfer?.types.includes('Files')) {
this._background = DEFAULT_BACKGROUND_COLOR;
this._dragOver = false;
const files = event.dataTransfer.files;
if (files.length > 0) {
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,
.file-area {
display: flex;
align-items: center;
border-radius: 8px;
width: 100%;
background: var(--iqser-grey-2);
background: var(--iqser-alt-background);
&.drag-over {
background-color: var(--iqser-file-drop-drag-over);
}
}
.upload-area {