mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-31 19:50:44 +00:00
refactor: simplify css variables 2
This commit is contained in:
Johannes Millan
parent
5a399300e5
commit
bba8e2faf1
19 changed files with 47 additions and 307 deletions
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../../../common';
|
||||
|
||||
:host {
|
||||
//border: 1px solid var(--color-overlay-light-20);
|
||||
//border: 1px solid var(--c-light-20);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: 8px;
|
||||
min-height: 200px;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
right: -24px;
|
||||
bottom: 0;
|
||||
left: -24px;
|
||||
background: var(--color-overlay-dark-50);
|
||||
background: var(--c-dark-50);
|
||||
z-index: 10;
|
||||
|
||||
mat-progress-spinner {
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
import {
|
||||
animate,
|
||||
keyframes,
|
||||
query,
|
||||
stagger,
|
||||
style,
|
||||
transition,
|
||||
trigger,
|
||||
} from '@angular/animations';
|
||||
import { ANI_FAST_TIMING } from '../../../ui/animations/animation.const';
|
||||
|
||||
const ANI = [
|
||||
query(':enter', style({ opacity: 0, width: 0 }), { optional: true }),
|
||||
query(
|
||||
':enter',
|
||||
stagger('40ms', [
|
||||
animate(
|
||||
ANI_FAST_TIMING,
|
||||
keyframes([
|
||||
style({ opacity: 0, width: 0, transform: 'scale(0)', offset: 0 }),
|
||||
style({ opacity: 1, width: '*', transform: 'scale(1)', offset: 0.99 }),
|
||||
style({ width: 'auto', offset: 1.0 }),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
{ optional: true },
|
||||
),
|
||||
query(
|
||||
':leave',
|
||||
stagger('-40ms', [
|
||||
style({ transform: 'scale(1)', opacity: 1, width: '*' }),
|
||||
animate(ANI_FAST_TIMING, style({ transform: 'scale(0)', width: 0 })),
|
||||
]),
|
||||
{ optional: true },
|
||||
),
|
||||
];
|
||||
|
||||
export const improvementBannerAnimation = trigger('improvementBanner', [
|
||||
transition(':increment, :decrement', ANI),
|
||||
transition('* <=> ALWAYS', ANI),
|
||||
transition('* <=> BLOCK', []),
|
||||
]);
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<div
|
||||
[@improvementBanner]="improvements.length"
|
||||
class="improvements"
|
||||
>
|
||||
@for (improvement of improvements; track trackById($index, improvement)) {
|
||||
<div
|
||||
class="improvement"
|
||||
mat-ripple
|
||||
>
|
||||
<button
|
||||
(click)="dismiss(improvement)"
|
||||
[matTooltip]="T.G.DISMISS | translate"
|
||||
class="dismiss"
|
||||
disableRipple
|
||||
mat-icon-button
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<div class="title">{{ improvement?.title }}</div>
|
||||
<button
|
||||
(click)="check(improvement)"
|
||||
[matTooltip]="T.F.METRIC.BANNER.CHECK | translate"
|
||||
class="check"
|
||||
disableRipple
|
||||
mat-icon-button
|
||||
>
|
||||
<mat-icon>check</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
@import '../../../../common';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.improvements {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: -4px;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
|
||||
@include mq(xs) {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.improvement {
|
||||
align-items: center;
|
||||
border-radius: 16px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; /* Safari */
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
margin: 4px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
padding: 7px 0;
|
||||
overflow: hidden;
|
||||
transition: var(--transition-fast);
|
||||
background: transparent;
|
||||
|
||||
border: 1px solid;
|
||||
color: var(--improvement-text);
|
||||
border-color: var(--improvement-border);
|
||||
|
||||
&:active {
|
||||
box-shadow: var(--whiteframe-shadow-2dp);
|
||||
}
|
||||
|
||||
.title {
|
||||
transition: inherit;
|
||||
max-width: 300px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: inherit;
|
||||
opacity: 0;
|
||||
transform: scale(0.1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform-origin: center center;
|
||||
|
||||
color: var(--improvement-button-text);
|
||||
|
||||
&.dismiss {
|
||||
transform: translateX(-11px);
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
&.check {
|
||||
transform: translateX(11px);
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 22px;
|
||||
max-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
opacity: 0.4;
|
||||
transform: scale(1);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
transform-origin: center center;
|
||||
transform: scaleX(0.857142857142857);
|
||||
}
|
||||
}
|
||||
|
||||
.hover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
// import {async, ComponentFixture, TestBed} from '@angular/core/testing';
|
||||
//
|
||||
// import {ImprovementBannerComponent} from './improvement-banner.component';
|
||||
//
|
||||
// describe('ImprovementBannerComponent', () => {
|
||||
// let component: ImprovementBannerComponent;
|
||||
// let fixture: ComponentFixture<ImprovementBannerComponent>;
|
||||
//
|
||||
// beforeEach(async(() => {
|
||||
// TestBed.configureTestingModule({
|
||||
// declarations: [ImprovementBannerComponent]
|
||||
// })
|
||||
// .compileComponents();
|
||||
// }));
|
||||
//
|
||||
// beforeEach(() => {
|
||||
// fixture = TestBed.createComponent(ImprovementBannerComponent);
|
||||
// component = fixture.componentInstance;
|
||||
// fixture.detectChanges();
|
||||
// });
|
||||
//
|
||||
// it('should create', () => {
|
||||
// expect(component).toBeTruthy();
|
||||
// });
|
||||
// });
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
|
||||
import { Improvement } from '../improvement/improvement.model';
|
||||
import { ImprovementService } from '../improvement/improvement.service';
|
||||
import { improvementBannerAnimation } from './improvement-banner.ani';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { T } from '../../../t.const';
|
||||
import { DateService } from 'src/app/core/date/date.service';
|
||||
import { MatRipple } from '@angular/material/core';
|
||||
import { MatIconButton } from '@angular/material/button';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { TranslatePipe } from '@ngx-translate/core';
|
||||
|
||||
@Component({
|
||||
selector: 'improvement-banner',
|
||||
templateUrl: './improvement-banner.component.html',
|
||||
styleUrls: ['./improvement-banner.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
animations: [improvementBannerAnimation],
|
||||
imports: [MatRipple, MatIconButton, MatTooltip, MatIcon, TranslatePipe],
|
||||
})
|
||||
export class ImprovementBannerComponent implements OnDestroy {
|
||||
improvementService = inject(ImprovementService);
|
||||
private _dateService = inject(DateService);
|
||||
|
||||
T: typeof T = T;
|
||||
improvements: Improvement[] = [];
|
||||
|
||||
private _subs: Subscription = new Subscription();
|
||||
|
||||
constructor() {
|
||||
this._subs.add(
|
||||
this.improvementService.improvementBannerImprovements$.subscribe(
|
||||
(val) => (this.improvements = val || []),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._subs.unsubscribe();
|
||||
}
|
||||
|
||||
dismiss(improvement: Improvement): void {
|
||||
this.improvementService.hideImprovement(improvement.id);
|
||||
}
|
||||
|
||||
check(improvement: Improvement): void {
|
||||
this.improvementService.addCheckedDay(improvement.id, this._dateService.todayStr());
|
||||
this.improvementService.hideImprovement(improvement.id);
|
||||
}
|
||||
|
||||
trackById(i: number, improvement: Improvement): string {
|
||||
return improvement.id;
|
||||
}
|
||||
}
|
||||
|
|
@ -295,7 +295,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
//// background: var(--color-overlay-light-10);
|
||||
//// background: var(--c-light-10);
|
||||
//
|
||||
//
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: var(--color-overlay-dark-20);
|
||||
background: var(--c-dark-20);
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -43,7 +43,7 @@ body.isDarkTheme :host {
|
|||
background: var(--palette-primary-900);
|
||||
|
||||
&:before {
|
||||
background: var(--color-overlay-dark-50);
|
||||
background: var(--c-dark-50);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//box-shadow: 0 -3px 5px 0 var(--color-overlay-dark-40);
|
||||
//box-shadow: 0 -3px 5px 0 var(--c-dark-40);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
|
|||
//border: 1px solid;
|
||||
//border-right: 0;
|
||||
//border-bottom: 0;
|
||||
//box-shadow: 0px 8px 10px -5px var(--color-overlay-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--divider-color) !important;
|
||||
//box-shadow: 0px 8px 10px -5px var(--c-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--divider-color) !important;
|
||||
|
||||
@include mq(sm, max) {
|
||||
// NOTE: prevents overlapping with nav when open
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
:host > div > textarea {
|
||||
appearance: none;
|
||||
//background: var(--color-overlay-dark-50);
|
||||
//background: var(--c-dark-50);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
.run-all:hover {
|
||||
background: var(--color-overlay-light-10, rgba(76, 175, 80, 0.1));
|
||||
background: var(--c-light-10, rgba(76, 175, 80, 0.1));
|
||||
}
|
||||
|
||||
.console {
|
||||
|
|
|
|||
|
|
@ -92,23 +92,21 @@
|
|||
// -----------------------------
|
||||
// Overlay Colors
|
||||
// -----------------------------
|
||||
--color-overlay-dark-10: rgba(0, 0, 0, 0.1);
|
||||
--color-overlay-dark-20: rgba(0, 0, 0, 0.2);
|
||||
--color-overlay-dark-30: rgba(0, 0, 0, 0.3);
|
||||
--color-overlay-dark-40: rgba(0, 0, 0, 0.4);
|
||||
--color-overlay-dark-50: rgba(0, 0, 0, 0.5);
|
||||
--color-overlay-dark-60: rgba(0, 0, 0, 0.6);
|
||||
--color-overlay-dark-80: rgba(0, 0, 0, 0.8);
|
||||
--color-overlay-dark-90: rgba(0, 0, 0, 0.9);
|
||||
--color-overlay-light-05: rgba(255, 255, 255, 0.05);
|
||||
--color-overlay-light-10: rgba(255, 255, 255, 0.1);
|
||||
--color-overlay-light-20: rgba(255, 255, 255, 0.2);
|
||||
--color-overlay-light-30: rgba(255, 255, 255, 0.3);
|
||||
--color-overlay-light-33: rgba(255, 255, 255, 0.33);
|
||||
--color-overlay-light-40: rgba(255, 255, 255, 0.4);
|
||||
--color-overlay-light-50: rgba(255, 255, 255, 0.5);
|
||||
--color-overlay-light-70: rgba(255, 255, 255, 0.7);
|
||||
--color-overlay-light-90: rgba(255, 255, 255, 0.9);
|
||||
--c-dark-10: rgba(0, 0, 0, 0.1);
|
||||
--c-dark-20: rgba(0, 0, 0, 0.2);
|
||||
--c-dark-30: rgba(0, 0, 0, 0.3);
|
||||
--c-dark-40: rgba(0, 0, 0, 0.4);
|
||||
--c-dark-50: rgba(0, 0, 0, 0.5);
|
||||
--c-dark-60: rgba(0, 0, 0, 0.6);
|
||||
--c-dark-80: rgba(0, 0, 0, 0.8);
|
||||
--c-dark-90: rgba(0, 0, 0, 0.9);
|
||||
--c-light-05: rgba(255, 255, 255, 0.05);
|
||||
--c-light-10: rgba(255, 255, 255, 0.1);
|
||||
--c-light-33: rgba(255, 255, 255, 0.33);
|
||||
--c-light-40: rgba(255, 255, 255, 0.4);
|
||||
--c-light-50: rgba(255, 255, 255, 0.5);
|
||||
--c-light-70: rgba(255, 255, 255, 0.7);
|
||||
--c-light-90: rgba(255, 255, 255, 0.9);
|
||||
|
||||
// Legacy palette references
|
||||
--c-primary: var(--palette-primary-500);
|
||||
|
|
@ -228,9 +226,8 @@
|
|||
0 3px 1px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
|
||||
0 2px 2px 0 rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
|
||||
0 1px 5px 0 rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
|
||||
--shadow-bottom: 0 10px 6px -6px var(--color-overlay-dark-30);
|
||||
--shadow-bottom-boxed:
|
||||
0 10px 6px -6px var(--color-overlay-dark-30), 0 0 1px var(--color-overlay-dark-30);
|
||||
--shadow-bottom: 0 10px 6px -6px var(--c-dark-30);
|
||||
--shadow-bottom-boxed: 0 10px 6px -6px var(--c-dark-30), 0 0 1px var(--c-dark-30);
|
||||
|
||||
// ===============================
|
||||
// ANIMATION & TRANSITIONS
|
||||
|
|
@ -345,7 +342,7 @@ body {
|
|||
--divider-color: rgba(0, 0, 0, 0.12);
|
||||
|
||||
// Backdrop
|
||||
--c-backdrop: var(--color-overlay-dark-60);
|
||||
--c-backdrop: var(--c-dark-60);
|
||||
|
||||
// Note colors
|
||||
--standard-note-bg: #ffffff;
|
||||
|
|
@ -386,19 +383,19 @@ body {
|
|||
|
||||
// Improvement banner
|
||||
--improvement-text: rgba(44, 44, 44, 1);
|
||||
--improvement-border: var(--color-overlay-light-33);
|
||||
--improvement-border: var(--c-light-33);
|
||||
--improvement-button-text: rgba(44, 44, 44, 1);
|
||||
|
||||
// Select/Options
|
||||
--select-hover-bg: var(--color-overlay-dark-10);
|
||||
--options-border-color: var(--color-overlay-dark-10);
|
||||
--select-hover-bg: var(--c-dark-10);
|
||||
--options-border-color: var(--c-dark-10);
|
||||
|
||||
// Attachments
|
||||
--attachment-bg: var(--card-bg);
|
||||
--attachment-border: var(--extra-border-color);
|
||||
--attachment-control-bg: var(--color-overlay-light-40);
|
||||
--attachment-control-border: var(--color-overlay-light-50);
|
||||
--attachment-control-hover-bg: var(--color-overlay-light-90);
|
||||
--attachment-control-bg: var(--c-light-40);
|
||||
--attachment-control-border: var(--c-light-50);
|
||||
--attachment-control-hover-bg: var(--c-light-90);
|
||||
|
||||
// Hover controls
|
||||
--hover-controls-border: 1px solid;
|
||||
|
|
@ -452,7 +449,7 @@ body.isDarkTheme {
|
|||
--divider-color: rgba(255, 255, 255, 0.12);
|
||||
|
||||
// Backdrop
|
||||
--c-backdrop: var(--color-overlay-dark-60);
|
||||
--c-backdrop: var(--c-dark-60);
|
||||
|
||||
// Note colors
|
||||
--standard-note-bg: var(--dark16);
|
||||
|
|
@ -479,7 +476,7 @@ body.isDarkTheme {
|
|||
--scrollbar-track: #222;
|
||||
|
||||
// Grid colors
|
||||
--grid-color: var(--color-overlay-light-10);
|
||||
--grid-color: var(--c-light-10);
|
||||
|
||||
// Chip colors
|
||||
--chip-outline-color: rgba(125, 125, 125, 0.4);
|
||||
|
|
@ -493,19 +490,19 @@ body.isDarkTheme {
|
|||
|
||||
// Improvement banner
|
||||
--improvement-text: var(--text-color-most-intense);
|
||||
--improvement-border: var(--color-overlay-light-33);
|
||||
--improvement-border: var(--c-light-33);
|
||||
--improvement-button-text: white;
|
||||
|
||||
// Select/Options
|
||||
--select-hover-bg: var(--color-overlay-light-10);
|
||||
--options-border-color: var(--color-overlay-light-10);
|
||||
--select-hover-bg: var(--c-light-10);
|
||||
--options-border-color: var(--c-light-10);
|
||||
|
||||
// Attachments
|
||||
--attachment-bg: var(--bg-lighter);
|
||||
--attachment-border: transparent;
|
||||
--attachment-control-bg: var(--color-overlay-dark-40);
|
||||
--attachment-control-border: var(--color-overlay-dark-50);
|
||||
--attachment-control-hover-bg: var(--color-overlay-dark-90);
|
||||
--attachment-control-bg: var(--c-dark-40);
|
||||
--attachment-control-border: var(--c-dark-50);
|
||||
--attachment-control-hover-bg: var(--c-dark-90);
|
||||
|
||||
// Hover controls
|
||||
--hover-controls-border: none;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
flex-direction: column; /* make main axis vertical */
|
||||
justify-content: center; /* center items vertically, in this case */
|
||||
align-items: center; /* center items horizontally, in this case */
|
||||
//background: var(--color-overlay-dark-20);
|
||||
//background: var(--c-dark-20);
|
||||
animation: var(--transition-standard) fadeIn;
|
||||
z-index: var(--z-backdrop);
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid var(--color-overlay-dark-10);
|
||||
border: 4px solid var(--c-dark-10);
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: globalErrorAlertSpin 1s linear infinite;
|
||||
|
|
|
|||
|
|
@ -34,5 +34,5 @@
|
|||
margin-bottom: 4px;
|
||||
border-radius: 6px;
|
||||
// NOTE bg color is set in material overwrite file since otherwise it does not seem to work
|
||||
background: var(--color-overlay-light-05) !important;
|
||||
background: var(--c-light-05) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
border-radius: 3px;
|
||||
border: 1px solid var(--extra-border-color);
|
||||
box-shadow:
|
||||
0 1px 1px var(--color-overlay-dark-20),
|
||||
0 2px 0 0 var(--color-overlay-light-70) inset;
|
||||
0 1px 1px var(--c-dark-20),
|
||||
0 2px 0 0 var(--c-light-70) inset;
|
||||
color: var(--text-color);
|
||||
display: inline-block;
|
||||
font-size: 0.85em;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
//$shadow-edit-on-click-light: 0 0 4px 0 var(--color-overlay-dark-80), var(--whiteframe-shadow-14dp);
|
||||
//$shadow-edit-on-click-light: 0 0 4px 0 var(--c-dark-80), var(--whiteframe-shadow-14dp);
|
||||
//$shadow-edit-on-click-dark: 0 0 4px 0 var(--bg)-lightest, var(--whiteframe-shadow-14dp);
|
||||
$shadow-edit-on-click-dark: var(--whiteframe-shadow-15dp);
|
||||
$shadow-edit-on-click-light: var(--whiteframe-shadow-7dp);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue