From 157f371bff8ba85b4c9c2d68ff7247376b91d560 Mon Sep 17 00:00:00 2001 From: Nazar Semets Date: Tue, 20 May 2025 18:56:50 +0300 Subject: [PATCH] fix(styles): fixed styles --- .../create-view-link-dialog.component.ts | 4 +- .../contributors/contributors.component.ts | 2 - src/assets/styles/_base.scss | 96 +++++++++++++ src/assets/styles/_common.scss | 41 ++++++ src/assets/styles/_mixins.scss | 6 + src/assets/styles/_variables.scss | 1 + src/assets/styles/overrides/checkbox.scss | 4 +- src/assets/styles/overrides/datepicker.scss | 6 +- src/assets/styles/styles.scss | 132 +----------------- 9 files changed, 154 insertions(+), 138 deletions(-) create mode 100644 src/assets/styles/_base.scss diff --git a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts index 0ca384c5e..1f50a0349 100644 --- a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts +++ b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts @@ -8,11 +8,9 @@ import { InputText } from 'primeng/inputtext'; import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { SearchInputComponent } from '@osf/shared'; - @Component({ selector: 'osf-create-view-link-dialog', - imports: [Button, SearchInputComponent, TranslatePipe, InputText, ReactiveFormsModule, FormsModule, Checkbox], + imports: [Button, TranslatePipe, InputText, ReactiveFormsModule, FormsModule, Checkbox], templateUrl: './create-view-link-dialog.component.html', styleUrl: './create-view-link-dialog.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/project/contributors/contributors.component.ts b/src/app/features/project/contributors/contributors.component.ts index 880872ad8..51e6f4695 100644 --- a/src/app/features/project/contributors/contributors.component.ts +++ b/src/app/features/project/contributors/contributors.component.ts @@ -7,7 +7,6 @@ import { Select } from 'primeng/select'; import { TableModule, TablePageEvent } from 'primeng/table'; import { Tooltip } from 'primeng/tooltip'; -import { DatePipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, output, signal } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; @@ -30,7 +29,6 @@ import { IS_WEB, IS_XSMALL } from '@shared/utils/breakpoints.tokens'; Select, TranslatePipe, FormsModule, - DatePipe, TableModule, ViewOnlyTableComponent, Tooltip, diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss new file mode 100644 index 000000000..13c4a5e92 --- /dev/null +++ b/src/assets/styles/_base.scss @@ -0,0 +1,96 @@ +@use "assets/styles/variables" as var; +@use "assets/styles/mixins" as mix; + +@layer reset, base, primeng; + +@layer base { + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } +} + +@layer reset { + html, + body { + font-family: var.$openSans; + font-weight: 400; + font-size: var.$base-font-size; + max-height: 100vh; + max-width: 100vw; + } + + h1 { + font-size: 1.7rem; + } + + h2 { + font-size: 1.3rem; + } + + h3 { + font-size: 1rem; + } + + h1, + h2, + h3 { + font-weight: 700; + text-transform: capitalize; + color: var.$dark-blue-1; + } + + li { + list-style: none; + } + + .inside-list { + li { + list-style: inside; + } + } + + a, + a:visited { + text-decoration: none; + color: var.$pr-blue-1; + } + + a:hover { + text-decoration: underline; + } + + i { + @include mix.flex-center; + } + + button { + color: var.$white; + } + + dl { + margin-bottom: 1.7rem; + padding: 0; + } + + dt { + display: inline; + font-weight: bold; + } + + dd { + margin: 0; + display: inline; + + &::after { + content: ""; + display: block; + } + } + + i, + svg { + outline: none; + } +} diff --git a/src/assets/styles/_common.scss b/src/assets/styles/_common.scss index c0a8fc27a..ba99c6733 100644 --- a/src/assets/styles/_common.scss +++ b/src/assets/styles/_common.scss @@ -1,3 +1,7 @@ +@use "assets/styles/variables" as var; + +// ------------------------- Custom scrollbar styles ------------------------- + .custom-scrollbar { overflow: auto; scrollbar-width: thin; @@ -19,3 +23,40 @@ border-radius: 4px; border: 2px solid var(--dark-blue-1); } + +// ------------------------- Highlight color ------------------------- + +.highlight { + color: var.$pr-blue-1; +} + +// ------------------------- Copy notification ------------------------- + +.copy-notification { + position: absolute; + top: -45px; + left: 50%; + transform: translateX(-50%); + padding: 10px; + opacity: 0; + transition: opacity 0.3s ease; + white-space: nowrap; + border-radius: 8px; + box-shadow: 0 0 4px 0 #00000029; + background: var.$white; + + &.visible { + opacity: 1; + } + + &:after { + content: ""; + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); + border-width: 5px 5px 0; + border-style: solid; + border-color: var.$grey-1 transparent transparent; + } +} diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss index ef98f300e..b78b2b1c3 100644 --- a/src/assets/styles/_mixins.scss +++ b/src/assets/styles/_mixins.scss @@ -1,3 +1,9 @@ +@use "assets/styles/variables" as var; + +@function rem($px) { + @return ($px / var.$base-font-size) * 1rem; +} + @mixin flex-center { display: flex; justify-content: center; diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss index 9cff6f9af..15136834c 100644 --- a/src/assets/styles/_variables.scss +++ b/src/assets/styles/_variables.scss @@ -2,6 +2,7 @@ // Fonts $openSans: var(--openSans); +$base-font-size: 14px; // Colors // Primary Blue diff --git a/src/assets/styles/overrides/checkbox.scss b/src/assets/styles/overrides/checkbox.scss index d3e82f89d..0c66f2114 100644 --- a/src/assets/styles/overrides/checkbox.scss +++ b/src/assets/styles/overrides/checkbox.scss @@ -9,7 +9,7 @@ .p-checkbox-box { width: 1.4rem; height: 1.4rem; - background: white; + background: var.$white; border-color: var.$grey-2; } @@ -20,7 +20,7 @@ } .p-checkbox-icon { - color: white; + color: var.$white; font-size: 1.4rem; width: 0.7rem; } diff --git a/src/assets/styles/overrides/datepicker.scss b/src/assets/styles/overrides/datepicker.scss index ede25d9fc..346f7f0c2 100644 --- a/src/assets/styles/overrides/datepicker.scss +++ b/src/assets/styles/overrides/datepicker.scss @@ -35,7 +35,7 @@ &:hover { background: var.$pr-blue-2; - color: white; + color: var.$white; } } @@ -44,12 +44,12 @@ &:hover { background: var.$pr-blue-2; - color: white; + color: var.$white; } } .p-datepicker-today > .p-datepicker-day-selected { background: var.$pr-blue-1; - color: white; + color: var.$white; } } diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss index 86c58ddac..a45c85b76 100644 --- a/src/assets/styles/styles.scss +++ b/src/assets/styles/styles.scss @@ -1,7 +1,11 @@ @use "primeicons/primeicons.css"; + @use "fonts"; @use "variables" as var; @use "mixins" as mix; +@use "common"; +@use "base"; + @use "./overrides/button"; @use "./overrides/input"; @use "./overrides/checkbox"; @@ -30,132 +34,4 @@ @use "./overrides/menu"; @use "./overrides/spinner"; @use "./overrides/password"; -@use "./common"; @use "./overrides/tooltip"; - -@layer base, primeng, reset; - -@layer base { - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } -} - -@layer reset { - html, - body { - font-family: var.$openSans; - font-weight: 400; - font-size: 14px; - max-height: 100vh; - max-width: 100vw; - } - - h1 { - font-size: 1.7rem; - } - - h2 { - font-size: 1.3rem; - } - - h3 { - font-size: 1rem; - } - - h1, - h2, - h3 { - font-weight: 700; - text-transform: capitalize; - color: var.$dark-blue-1; - } - - li { - list-style: none; - } - - .inside-list { - li { - list-style: inside; - } - } - - a, - a:visited { - text-decoration: none; - color: var.$pr-blue-1; - } - - a:hover { - text-decoration: underline; - } - - i { - @include mix.flex-center; - } - - button { - color: white; - } - - dl { - margin-bottom: 1.7rem; - padding: 0; - } - - dt { - display: inline; - font-weight: bold; - } - - dd { - margin: 0; - display: inline; - - &::after { - content: ""; - display: block; - } - } - - .copy-notification { - position: absolute; - top: -45px; - left: 50%; - transform: translateX(-50%); - padding: 10px; - opacity: 0; - transition: opacity 0.3s ease; - white-space: nowrap; - border-radius: 8px; - box-shadow: 0 0 4px 0 #00000029; - background: var.$white; - - &.visible { - opacity: 1; - } - - &:after { - content: ""; - position: absolute; - bottom: -5px; - left: 50%; - transform: translateX(-50%); - border-width: 5px 5px 0; - border-style: solid; - border-color: var.$grey-1 transparent transparent; - } - } - - i, - svg { - outline: none; - } -} - -.highlight { - color: var.$pr-blue-1; -}