Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrated to new design tokens of v4

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-25 17:37:08 +03:00
parent a7bec8d7a5
commit cafcd0449e
51 changed files with 1084 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/layout/_content.scss
View File

@@ -4,7 +4,7 @@
min-height: 100vh;
justify-content: space-between;
padding: 7rem 2rem 2rem 4rem;
transition: margin-left $transitionDuration;
transition: margin-left var(--layout-section-transition-duration);
}
.layout-main {

2
src/assets/layout/_footer.scss
View File

@@ -1,5 +1,5 @@
.layout-footer {
transition: margin-left $transitionDuration;
transition: margin-left var(--layout-section-transition-duration);
display: flex;
align-items: center;
justify-content: center;

4
src/assets/layout/_main.scss
View File

@@ -4,11 +4,11 @@
html {
height: 100%;
font-size: $scale;
font-size: 14px;
}
body {
font-family: var(--font-family);
font-family: 'CircularStd', sans-serif;
color: var(--text-color);
background-color: var(--surface-ground);
margin: 0;

23
src/assets/layout/_menu.scss
View File

@@ -7,11 +7,16 @@
user-select: none;
top: 7rem;
left: 2rem;
transition: transform $transitionDuration, left $transitionDuration;
transition:
transform var(--layout-section-transition-duration),
left var(--layout-section-transition-duration);
background-color: var(--surface-overlay);
border-radius: $borderRadius;
border-radius: var(--content-border-radius);
padding: 0.5rem 1.5rem;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
}
.layout-menu {
@@ -24,7 +29,7 @@
font-size: 0.857rem;
text-transform: uppercase;
font-weight: 700;
color: var(--surface-900);
color: var(--text-color);
margin: 0.75rem 0;
}
@@ -64,8 +69,10 @@
color: var(--text-color);
cursor: pointer;
padding: 0.75rem 1rem;
border-radius: $borderRadius;
transition: background-color $transitionDuration, box-shadow $transitionDuration;
border-radius: var(--content-border-radius);
transition:
background-color var(--element-transition-duration),
box-shadow var(--element-transition-duration);
.layout-menuitem-icon {
margin-right: 0.5rem;
@@ -74,7 +81,7 @@
.layout-submenu-toggler {
font-size: 75%;
margin-left: auto;
transition: transform $transitionDuration;
transition: transform var(--element-transition-duration);
}
&.active-route {
@@ -93,7 +100,7 @@
ul {
overflow: hidden;
border-radius: $borderRadius;
border-radius: var(--content-border-radius);
li {
a {

18
src/assets/layout/_mixins.scss
View File

@@ -1,13 +1,15 @@
@mixin focused() {
outline: 0 none;
outline-offset: 0;
transition: box-shadow .2s;
box-shadow: var(--focus-ring);
outline-width: var(--focus-ring-width);
outline-style: var(--focus-ring-style);
outline-color: var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
box-shadow: var(--focus-ring-shadow);
transition:
box-shadow var(--transition-duration),
outline-color var(--transition-duration);
}
@mixin focused-inset() {
outline: 0 none;
outline-offset: 0;
transition: box-shadow .2s;
box-shadow: inset var(--focus-ring);
outline-offset: -1px;
box-shadow: inset var(--focus-ring-shadow);
}

6
src/assets/layout/_responsive.scss
View File

@@ -1,10 +1,10 @@
@media screen and (min-width: 1960px) {
.layout-main, .landing-wrapper {
.layout-main,
.landing-wrapper {
width: 1504px;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 992px) {
@@ -93,7 +93,7 @@
.layout-mask {
display: block;
animation: fadein $transitionDuration;
animation: fadein var(--layout-section-transition-duration);
}
}
}

42
src/assets/layout/_topbar.scss
View File

@@ -7,15 +7,18 @@
width: 100%;
padding: 0 2rem;
background-color: var(--surface-card);
transition: left $transitionDuration;
transition: left var(--layout-section-transition-duration);
display: flex;
align-items: center;
box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
.layout-topbar-logo {
display: flex;
align-items: center;
color: var(--surface-900);
color: var(--text-color);
font-size: 1.5rem;
font-weight: 500;
width: 300px;
@@ -23,7 +26,7 @@
img {
height: 2.5rem;
margin-right: .5rem;
margin-right: 0.5rem;
}
&:focus {
@@ -41,7 +44,7 @@
width: 3rem;
height: 3rem;
cursor: pointer;
transition: background-color $transitionDuration;
transition: background-color var(--element-transition-duration);
&:hover {
color: var(--text-color);
@@ -111,7 +114,10 @@
position: absolute;
flex-direction: column;
background-color: var(--surface-overlay);
box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
border-radius: 12px;
padding: 1rem;
right: 2rem;
@@ -122,7 +128,7 @@
animation: scalein 0.15s linear;
&.layout-topbar-menu-mobile-active {
display: block
display: block;
}
.layout-topbar-button {
@@ -136,7 +142,7 @@
i {
font-size: 1rem;
margin-right: .5rem;
margin-right: 0.5rem;
}
span {
@@ -153,13 +159,15 @@
top: calc(100% + 2px);
right: 0;
width: 16rem;
padding: .75rem;
background-color: var(--overlay-background);
padding: 0.75rem;
background-color: var(--surface-overlay);
border-radius: 6px;
border: 1px solid var(--border-color);
border: 1px solid var(--surface-border);
transform-origin: top;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
.config-panel-content {
display: flex;
flex-direction: column;
@@ -167,7 +175,7 @@
}
.config-panel-label {
font-size: .875rem;
font-size: 0.875rem;
color: var(--text-secondary-color);
font-weight: 600;
line-height: 1;
@@ -175,9 +183,9 @@
.config-panel-colors {
> div {
padding-top: .5rem;
padding-top: 0.5rem;
display: flex;
gap: .5rem;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: space-between;
@@ -205,4 +213,4 @@
flex-direction: column;
gap: 0.5rem;
}
}
}

21
src/assets/layout/_typography.scss
View File

@@ -1,9 +1,14 @@
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1.5rem 0 1rem 0;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
color: var(--surface-900);
font-weight: 700;
line-height: 1.5;
color: var(--text-color);
&:first-child {
margin-top: 0;
@@ -35,16 +40,16 @@ h6 {
}
mark {
background: #FFF8E1;
padding: .25rem .4rem;
border-radius: $borderRadius;
background: #fff8e1;
padding: 0.25rem 0.4rem;
border-radius: var(--content-border-radius);
font-family: monospace;
}
blockquote {
margin: 1rem 0;
padding: 0 2rem;
border-left: 4px solid #90A4AE;
border-left: 4px solid #90a4ae;
}
hr {

7
src/assets/layout/_utils.scss
View File

@@ -1,17 +1,16 @@
/* Utils */
.clearfix:after {
content: " ";
content: ' ';
display: block;
clear: both;
}
.card {
background: var(--surface-card);
border: 1px solid var(--surface-border);
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--card-shadow);
border-radius: $borderRadius;
border-radius: var(--content-border-radius);
&:last-child {
margin-bottom: 0;
@@ -24,4 +23,4 @@
&.p-toast-top-center {
top: 100px;
}
}
}

4
src/assets/layout/_variables.scss
View File

@@ -1,4 +0,0 @@
/* General */
$scale:14px; /* main font size */
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */

4
src/assets/layout/layout.scss
View File

@@ -1,4 +1,6 @@
@import './_variables';
@import './variables/_common';
@import './variables/_light';
@import './variables/_dark';
@import './_mixins';
@import './_preloading';
@import './_main';

21
src/assets/layout/variables/_common.scss Normal file
View File

@@ -0,0 +1,21 @@
:root {
--primary-color: var(--p-primary-color);
--primary-contrast-color: var(--p-primary-contrast-color);
--text-color: var(--p-text-color);
--text-color-secondary: var(--p-text-muted-color);
--surface-border: var(--p-content-border-color);
--surface-card: var(--p-content-background);
--surface-hover: var(--p-content-hover-background);
--surface-overlay: var(--p-overlay-popover-background);
--transition-duration: var(--p-transition-duration);
--maskbg: var(--p-mask-background);
--card-shadow: var(--p-card-shadow);
--content-border-radius: var(--p-content-border-radius);
--layout-section-transition-duration: 0.2s;
--element-transition-duration: var(--p-transition-duration);
--focus-ring-width: var(--p-focus-ring-width);
--focus-ring-style: var(--p-focus-ring-style);
--focus-ring-color: var(--p-focus-ring-color);
--focus-ring-offset: var(--p-focus-ring-offset);
--focus-ring-shadow: var(--p-focus-ring-shadow);
}

3
src/assets/layout/variables/_dark.scss Normal file
View File

@@ -0,0 +1,3 @@
:root[class*='app-dark'] {
--surface-ground: var(--p-surface-950);
}

3
src/assets/layout/variables/_light.scss Normal file
View File

@@ -0,0 +1,3 @@
:root {
--surface-ground: var(--p-surface-50);
}