github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-28 03:13:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 fix size variables

Browse Source
This commit is contained in:
elhombretecla 2021-10-05 10:16:44 +02:00 committed by Andrés Moya
parent 790d532cee
commit 5de2ff40d8
31 changed files with 218 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/resources/styles/common/dependencies/helpers.scss
View File

@ -6,16 +6,9 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Padding & Margin sizes // Padding & Margin sizes
$x-small: 4px;
$small: 8px;
$medium: 16px;
$big: 20px;
$x-big: 32px;
// New sizes
$size-1: 0.25rem; $size-1: 0.25rem;
$size-2: 0.5rem; $size-2: 0.5rem;
$size-3: 0.8rem; $size-3: 0.75rem;
$size-4: 1rem; $size-4: 1rem;
$size-5: 1.5rem; $size-5: 1.5rem;
$size-6: 2rem; $size-6: 2rem;
@ -38,7 +31,7 @@ $br-huge: 12px;
.row-flex { .row-flex {
align-items: center; align-items: center;
display: flex; display: flex;
margin-bottom: $x-small; margin-bottom: $size-1;
&.column { &.column {
flex-direction: column; flex-direction: column;
@ -59,7 +52,7 @@ $br-huge: 12px;
} }
.column-half { .column-half {
margin-right: $small; margin-right: $size-2;
} }
// Display // Display

30
frontend/resources/styles/common/framework.scss
View File

@ -84,7 +84,7 @@
@extend %btn; @extend %btn;
background: $color-gray-60; background: $color-gray-60;
color: $color-gray-20; color: $color-gray-20;
padding: $x-small; padding: $size-1;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
} }
@ -102,7 +102,7 @@
background: $color-white; background: $color-white;
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
color: $color-black; color: $color-black;
padding: $x-small; padding: $size-1;
svg { svg {
fill: $color-black; fill: $color-black;
} }
@ -119,7 +119,7 @@
@extend %btn; @extend %btn;
background: transparent; background: transparent;
color: $color-gray-20; color: $color-gray-20;
padding: $x-small; padding: $size-1;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
} }
@ -280,7 +280,7 @@ ul.slider-dots {
li { li {
align-items: center; align-items: center;
display: flex; display: flex;
padding: $small 0; padding: $size-2 0;
&::before { &::before {
background-color: $color-complete; background-color: $color-complete;
@ -317,7 +317,7 @@ ul.slider-dots {
cursor: pointer; cursor: pointer;
font-size: $fs14; font-size: $fs14;
font-weight: bold; font-weight: bold;
margin: 0 $small $small 0; margin: 0 $size-2 $size-2 0;
padding: 4px 8px; padding: 4px 8px;
text-transform: uppercase; text-transform: uppercase;
@ -392,7 +392,7 @@ ul.slider-dots {
font-size: $fs12; font-size: $fs12;
height: 20px; height: 20px;
position: absolute; position: absolute;
right: $small; right: $size-2;
text-align: right; text-align: right;
top: 26%; top: 26%;
width: 18px; width: 18px;
@ -480,7 +480,7 @@ select {
color: $color-gray-60; color: $color-gray-60;
font-family: "worksans", sans-serif; font-family: "worksans", sans-serif;
font-size: $fs14; font-size: $fs14;
margin-bottom: $medium; margin-bottom: $size-4;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
} }
@ -515,7 +515,7 @@ input[type="checkbox"]:focus {
background-color: $color-white; background-color: $color-white;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
padding: $small $big $small $small; padding: $size-2 $size-5 $size-2 $size-2;
position: relative; position: relative;
@include placeholder { @include placeholder {
@ -572,7 +572,7 @@ input.element-name {
cursor: pointer; cursor: pointer;
&.small { &.small {
padding: $x-small $big $x-small $x-small; padding: $size-1 $size-5 $size-1 $size-1;
} }
} }
@ -971,7 +971,7 @@ input[type=range]:focus::-ms-fill-upper {
content: attr(alt); content: attr(alt);
font-size: $fs11; font-size: $fs11;
font-weight: bold; font-weight: bold;
padding: $x-small; padding: $size-1;
position: absolute; position: absolute;
left: 130%; left: 130%;
text-align: center; text-align: center;
@ -1098,7 +1098,7 @@ input[type=range]:focus::-ms-fill-upper {
flex-direction: column; flex-direction: column;
.actions { .actions {
margin-top: $medium; margin-top: $size-4;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
@ -1114,7 +1114,7 @@ input[type=range]:focus::-ms-fill-upper {
justify-content: flex-start; justify-content: flex-start;
.btn-secondary { .btn-secondary {
margin-left: $medium; margin-left: $size-4;
} }
} }
} }
@ -1167,7 +1167,7 @@ input[type=range]:focus::-ms-fill-upper {
padding-right: 64px; padding-right: 64px;
.icon { .icon {
margin-right: $medium; margin-right: $size-4;
} }
.content { .content {
@ -1187,7 +1187,7 @@ input[type=range]:focus::-ms-fill-upper {
display: flex; display: flex;
.icon { .icon {
padding: $small; padding: $size-2;
width: 48px; width: 48px;
height: 48px; height: 48px;
justify-content: center; justify-content: center;
@ -1198,7 +1198,7 @@ input[type=range]:focus::-ms-fill-upper {
color: $color-black; color: $color-black;
display: flex; display: flex;
font-size: $fs14; font-size: $fs14;
padding: $small; padding: $size-2;
width: 100%; width: 100%;
align-items: center; align-items: center;
} }

20
frontend/resources/styles/main/layouts/login.scss
View File

@ -64,7 +64,7 @@
width: 100%; width: 100%;
*:not(:last-child) { *:not(:last-child) {
margin-bottom: $medium; margin-bottom: $size-4;
} }
} }
@ -72,7 +72,7 @@
width: 412px; width: 412px;
.auth-buttons { .auth-buttons {
margin-top: $x-big; margin-top: $size-6;
} }
form { form {
@ -81,12 +81,12 @@
} }
.btn-google-auth { .btn-google-auth {
margin-bottom: $medium; margin-bottom: $size-4;
text-decoration: none; text-decoration: none;
} }
.btn-gitlab-auth { .btn-gitlab-auth {
margin-bottom: $medium; margin-bottom: $size-4;
text-decoration: none; text-decoration: none;
.logo { .logo {
@ -97,7 +97,7 @@
} }
.btn-github-auth { .btn-github-auth {
margin-bottom: $medium; margin-bottom: $size-4;
text-decoration: none; text-decoration: none;
.logo { .logo {
@ -119,13 +119,13 @@
font-size: $fs14; font-size: $fs14;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin-top: $medium; margin-top: $size-4;
margin-bottom: $medium; margin-bottom: $size-4;
&.demo { &.demo {
justify-content: center; justify-content: center;
margin-top: $big; margin-top: $size-5;
} }
.link-entry { .link-entry {
@ -141,11 +141,11 @@
} }
.terms-login { .terms-login {
bottom: $big; bottom: $size-5;
font-size: $fs14; font-size: $fs14;
position: absolute; position: absolute;
span { span {
margin: 0 $small; margin: 0 $size-2;
} }
} }

6
frontend/resources/styles/main/partials/activity-bar.scss
View File

@ -24,7 +24,7 @@
color: $color-gray-40; color: $color-gray-40;
font-size: $fs16; font-size: $fs16;
font-weight: bold; font-weight: bold;
margin-bottom: $x-small; margin-bottom: $size-1;
} }
.date-ribbon { .date-ribbon {
@ -41,14 +41,14 @@
border-bottom: 1px solid $color-gray-10; border-bottom: 1px solid $color-gray-10;
display: flex; display: flex;
font-size: $fs13; font-size: $fs13;
padding: $small; padding: $size-2;
width: 100%; width: 100%;
img.activity-author { img.activity-author {
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
height: 30px; height: 30px;
margin-right: $medium; margin-right: $size-4;
width: 30px; width: 30px;
} }

2
frontend/resources/styles/main/partials/color-bullet.scss
View File

@ -78,7 +78,7 @@ ul.palette-menu .color-bullet {
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
border-radius: 10px; border-radius: 10px;
height: 20px; height: 20px;
margin-right: $x-small; margin-right: $size-1;
width: 20px; width: 20px;
} }

24
frontend/resources/styles/main/partials/colorpicker.scss
View File

@ -13,7 +13,7 @@
.colorpicker-content { .colorpicker-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $small; padding: $size-2;
& > * { & > * {
width: 200px; width: 200px;
@ -21,7 +21,7 @@
.top-actions { .top-actions {
display: flex; display: flex;
margin-bottom: $x-small; margin-bottom: $size-1;
justify-content: space-between; justify-content: space-between;
.picker-btn { .picker-btn {
@ -50,7 +50,7 @@
margin: 0; margin: 0;
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
border-radius: 2px; border-radius: 2px;
margin-left: $x-small; margin-left: $size-1;
} }
.active { .active {
@ -69,8 +69,8 @@
.gradient-stops { .gradient-stops {
height: 10px; height: 10px;
display: flex; display: flex;
margin-top: $small; margin-top: $size-2;
margin-bottom: $medium; margin-bottom: $size-4;
.gradient-background-wrapper { .gradient-background-wrapper {
height: 100%; height: 100%;
@ -282,7 +282,7 @@
border-radius: 2px; border-radius: 2px;
font-size: $fs11; font-size: $fs11;
height: 1.5rem; height: 1.5rem;
padding: 0 $x-small; padding: 0 $size-1;
color: $color-gray-40; color: $color-gray-40;
} }
@ -303,9 +303,9 @@
background-position: 95% 48%; background-position: 95% 48%;
background-size: 10px; background-size: 10px;
margin: 0; margin: 0;
margin-bottom: $small; margin-bottom: $size-2;
width: 100%; width: 100%;
padding: $x-small 0.25rem; padding: $size-1 0.25rem;
font-size: 0.75rem; font-size: 0.75rem;
color: $color-gray-40; color: $color-gray-40;
cursor: pointer; cursor: pointer;
@ -444,7 +444,7 @@
.colorpicker-tabs { .colorpicker-tabs {
display: flex; display: flex;
margin-bottom: $small; margin-bottom: $size-2;
border-radius: 5px; border-radius: 5px;
border: 1px solid $color-gray-10; border: 1px solid $color-gray-10;
height: 2rem; height: 2rem;
@ -480,7 +480,7 @@
.color-data { .color-data {
align-items: center; align-items: center;
display: flex; display: flex;
margin-bottom: $small; margin-bottom: $size-2;
position: relative; position: relative;
.color-name { .color-name {
@ -498,7 +498,7 @@
color: $color-white; color: $color-white;
height: 20px; height: 20px;
margin: 5px 0 0 0; margin: 5px 0 0 0;
padding: 0 $x-small; padding: 0 $size-1;
width: 84px; width: 84px;
font-size: $fs13; font-size: $fs13;
@ -523,7 +523,7 @@
.type { .type {
color: $color-gray-10; color: $color-gray-10;
margin-right: $x-small; margin-right: $size-1;
} }
.number { .number {

16
frontend/resources/styles/main/partials/comments.scss
View File

@ -73,7 +73,7 @@
min-height: 32px; min-height: 32px;
outline: none; outline: none;
overflow: hidden; overflow: hidden;
padding: $small; padding: $size-2;
resize: none; resize: none;
width: 100%; width: 100%;
border-radius: 2px; border-radius: 2px;
@ -104,7 +104,7 @@
.comment { .comment {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $medium $small; padding: $size-4 $size-2;
.author { .author {
display: flex; display: flex;
@ -183,11 +183,11 @@
} }
.content { .content {
margin: $medium 0; margin: $size-4 0;
font-size: $fs14; font-size: $fs14;
color: $color-black; color: $color-black;
.text { .text {
margin: 0 $small 0 26px; margin: 0 $size-2 0 26px;
white-space: pre-wrap; white-space: pre-wrap;
display: inline-block; display: inline-block;
} }
@ -295,7 +295,7 @@
.comment { .comment {
cursor: pointer; cursor: pointer;
.author { .author {
margin-bottom: $medium; margin-bottom: $size-4;
.name { .name {
display: flex; display: flex;
@ -317,7 +317,7 @@
color: $color-white; color: $color-white;
&.replies { &.replies {
margin: 0 $small 0 26px; margin: 0 $size-2 0 26px;
display: flex; display: flex;
.total-replies { .total-replies {
margin-right: 9px; margin-right: 9px;
@ -455,13 +455,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: $fs12; font-size: $fs12;
padding: $big; padding: $size-5;
text-align: center; text-align: center;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
height: 24px; height: 24px;
margin-bottom: $big; margin-bottom: $size-5;
width: 24px; width: 24px;
} }
} }

2
frontend/resources/styles/main/partials/context-menu.scss
View File

@ -82,7 +82,7 @@
height: 10px; height: 10px;
width: 10px; width: 10px;
transform: rotate(180deg); transform: rotate(180deg);
margin-right: $small; margin-right: $size-2;
} }
} }
} }

22
frontend/resources/styles/main/partials/dashboard-fonts.scss
View File

@ -7,13 +7,13 @@
max-width: 1000px; max-width: 1000px;
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: $big; margin-top: $size-5;
flex-direction: column; flex-direction: column;
h3 { h3 {
font-size: $fs14; font-size: $fs14;
color: $color-gray-30; color: $color-gray-30;
margin: $x-small; margin: $size-1;
} }
.font-item { .font-item {
@ -28,7 +28,7 @@
font-size: $fs12; font-size: $fs12;
background-color: $color-white; background-color: $color-white;
align-items: center; align-items: center;
padding: 0px $big; padding: 0px $size-5;
> .family { > .family {
min-width: 200px; min-width: 200px;
@ -49,14 +49,14 @@
border: 1px solid $color-gray-30; border: 1px solid $color-gray-30;
border-radius: $br-small; border-radius: $br-small;
width: 130px; width: 130px;
padding: $x-small; padding: $size-1;
margin: 0px; margin: 0px;
} }
} }
} }
.font-item { .font-item {
margin-top: $big; margin-top: $size-5;
color: $color-gray-40; color: $color-gray-40;
font-size: $fs14; font-size: $fs14;
background-color: $color-white; background-color: $color-white;
@ -65,7 +65,7 @@
width: 100%; width: 100%;
min-height: 97px; min-height: 97px;
align-items: center; align-items: center;
padding: $big; padding: $size-5;
justify-content: space-between; justify-content: space-between;
&:not(:first-child) { &:not(:first-child) {
@ -76,7 +76,7 @@
border: 1px solid $color-gray-30; border: 1px solid $color-gray-30;
border-radius: $br-small; border-radius: $br-small;
margin: 0px; margin: 0px;
padding: $small; padding: $size-2;
font-size: $fs12; font-size: $fs12;
} }
@ -135,7 +135,7 @@
justify-content: flex-end; justify-content: flex-end;
.icon { .icon {
width: $big; width: $size-5;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
@ -169,9 +169,9 @@
.dashboard-fonts-hero { .dashboard-fonts-hero {
font-size: $fs14; font-size: $fs14;
padding: $x-big; padding: $size-6;
background-color: $color-white; background-color: $color-white;
margin-top: $x-big; margin-top: $size-6;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -193,7 +193,7 @@
.desc { .desc {
h2 { h2 {
margin-bottom: $medium; margin-bottom: $size-4;
color: $color-black; color: $color-black;
} }
width: 80%; width: 80%;

16
frontend/resources/styles/main/partials/dashboard-grid.scss
View File

@ -28,7 +28,7 @@
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
height: 200px; height: 200px;
margin: $medium; margin: $size-4;
max-width: 260px; max-width: 260px;
min-width: 260px; min-width: 260px;
position: relative; position: relative;
@ -85,7 +85,7 @@
&.small-item { &.small-item {
max-width: 12%; max-width: 12%;
min-width: 190px; min-width: 190px;
padding: $medium; padding: $size-4;
justify-content: center; justify-content: center;
} }
@ -97,7 +97,7 @@
.item-info { .item-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $small; padding: $size-2;
text-align: left; text-align: left;
width: 100%; width: 100%;
@ -109,7 +109,7 @@
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
height: 27px; height: 27px;
padding-right: $small; padding-right: $size-2;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
@ -141,8 +141,8 @@
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
top: $x-small; top: $size-1;
right: $x-small; right: $size-1;
height: 32px; height: 32px;
width: 32px; width: 32px;
display: flex; display: flex;
@ -205,7 +205,7 @@
.project-th-icon { .project-th-icon {
align-items: center; align-items: center;
display: flex; display: flex;
margin-right: $small; margin-right: $size-2;
&.menu { &.menu {
margin-right: 0; margin-right: 0;
@ -296,7 +296,7 @@
// STYLES FOR LIBRARIES // STYLES FOR LIBRARIES
&.library { &.library {
padding: $medium; padding: $size-4;
} }
.grid-item-th { .grid-item-th {

12
frontend/resources/styles/main/partials/dashboard-header.scss
View File

@ -9,13 +9,13 @@
background-color: $color-white; background-color: $color-white;
display: flex; display: flex;
height: 63px; height: 63px;
padding: $x-small $medium $x-small $small; padding: $size-1 $size-4 $size-1 $size-2;
position: relative; position: relative;
z-index: 10; z-index: 10;
justify-content: space-between; justify-content: space-between;
.element-name { .element-name {
margin-right: $small; margin-right: $size-2;
} }
.btn-secondary { .btn-secondary {
@ -27,7 +27,7 @@
svg { svg {
fill: $color-black; fill: $color-black;
height: 14px; height: 14px;
margin-right: $x-small; margin-right: $size-1;
width: 14px; width: 14px;
} }
@ -52,7 +52,7 @@
color: $color-gray-30; color: $color-gray-30;
display: flex; display: flex;
height: 40px; height: 40px;
padding: $x-small $big; padding: $size-1 $size-5;
flex-basis: 140px; flex-basis: 140px;
&:hover { &:hover {
@ -90,7 +90,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
margin-left: $small; margin-left: $size-2;
z-index: 10; z-index: 10;
svg { svg {
@ -109,7 +109,7 @@
} }
.pin-icon { .pin-icon {
margin: 0 $small 0 $big; margin: 0 $size-2 0 $size-5;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
} }

2
frontend/resources/styles/main/partials/dashboard-settings.scss
View File

@ -64,7 +64,7 @@
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
height: 120px; height: 120px;
margin-right: $medium; margin-right: $size-4;
width: 120px; width: 120px;
} }

8
frontend/resources/styles/main/partials/dashboard-sidebar.scss
View File

@ -188,7 +188,7 @@
border-radius: $br-small; border-radius: $br-small;
content: ""; content: "";
height: 26px; height: 26px;
margin-right: $small; margin-right: $size-2;
width: 4px; width: 4px;
} }
@ -284,7 +284,7 @@
display: flex; display: flex;
height: 22px; height: 22px;
margin-left: auto; margin-left: auto;
padding: 0 $small; padding: 0 $size-2;
width: 32px; width: 32px;
svg { svg {
@ -390,7 +390,7 @@
svg { svg {
height: 10px; height: 10px;
margin-left: auto; margin-left: auto;
margin-right: $small; margin-right: $size-2;
width: 10px; width: 10px;
} }
} }
@ -409,7 +409,7 @@
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
margin-right: $small; margin-right: $size-2;
height: 12px; height: 12px;
width: 12px; width: 12px;

16
frontend/resources/styles/main/partials/dashboard.scss
View File

@ -9,7 +9,7 @@
border-top-right-radius: $br-huge; border-top-right-radius: $br-huge;
border-top-left-radius: $br-huge; border-top-left-radius: $br-huge;
flex: 1 0 0; flex: 1 0 0;
margin-right: $medium; margin-right: $size-4;
overflow-y: auto; overflow-y: auto;
user-select: none; user-select: none;
@ -19,7 +19,7 @@
} }
.dashboard-project-row { .dashboard-project-row {
margin-bottom: $medium; margin-bottom: $size-4;
.project { .project {
align-items: center; align-items: center;
@ -27,9 +27,9 @@
border-radius: $br-small; border-radius: $br-small;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-left: $medium; margin-left: $size-4;
margin-top: $medium; margin-top: $size-4;
padding: $x-small $x-small $x-small $small; padding: $size-1 $size-1 $size-1 $size-2;
width: fit-content; width: fit-content;
height: 40px; height: 40px;
@ -44,11 +44,11 @@
line-height: 1rem; line-height: 1rem;
font-weight: 500; font-weight: 500;
color: $color-black; color: $color-black;
margin-right: $medium; margin-right: $size-4;
} }
.edit-wrapper { .edit-wrapper {
margin-right: $medium; margin-right: $size-4;
} }
.info { .info {
@ -138,7 +138,7 @@
border: 1px solid $color-gray-10; border: 1px solid $color-gray-10;
border-radius: $br-small; border-radius: $br-small;
display: flex; display: flex;
padding-right: $big; padding-right: $size-5;
position: relative; position: relative;
input.element-title { input.element-title {

32
frontend/resources/styles/main/partials/modal.scss
View File

@ -664,7 +664,7 @@
.libraries-search { .libraries-search {
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
margin: $size-4; margin: $size-4;
padding: $x-small $small; padding: $size-1 $size-2;
display: flex; display: flex;
align-items: center; align-items: center;
@ -720,7 +720,7 @@
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
padding: $x-big; padding: $size-6;
width: 230px; width: 230px;
&.welcome { &.welcome {
@ -733,7 +733,7 @@
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $x-big; padding: $size-6;
.modal-title h2 { .modal-title h2 {
color: $color-black; color: $color-black;
@ -746,19 +746,19 @@
color: $color-black; color: $color-black;
font-size: $fs12; font-size: $fs12;
font-weight: bold; font-weight: bold;
margin-top: $small; margin-top: $size-2;
padding: 2px $x-small; padding: 2px $size-1;
width: max-content; width: max-content;
} }
.modal-content { .modal-content {
border: none; border: none;
padding: $big 0; padding: $size-5 0;
p { p {
color: $color-black; color: $color-black;
font-size: 16px; font-size: 16px;
margin-top: $small; margin-top: $size-2;
} }
} }
@ -771,7 +771,7 @@
cursor: pointer; cursor: pointer;
font-family: "worksans", sans-serif; font-family: "worksans", sans-serif;
font-size: $fs13; font-size: $fs13;
margin-left: $big; margin-left: $size-5;
&:hover { &:hover {
color: $color-black; color: $color-black;
@ -789,9 +789,9 @@
background-color: $color-gray-10; background-color: $color-gray-10;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
height: $small; height: $size-2;
margin-left: $small; margin-left: $size-2;
width: $small; width: $size-2;
&.current { &.current {
background-color: $color-primary; background-color: $color-primary;
@ -824,7 +824,7 @@
} }
&.final { &.final {
padding: $big 0 0 0; padding: $size-5 0 0 0;
.modal-left, .modal-left,
.modal-right { .modal-right {
@ -834,12 +834,12 @@
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
overflow: visible; overflow: visible;
padding: $x-big 40px; padding: $size-6 40px;
text-align: center; text-align: center;
h2 { h2 {
font-weight: 900; font-weight: 900;
margin-bottom: $big; margin-bottom: $size-5;
font-size: $fs24; font-size: $fs24;
} }
@ -856,7 +856,7 @@
img { img {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
border-radius: $br-medium; border-radius: $br-medium;
margin-bottom: $x-big; margin-bottom: $size-6;
margin-top: -90px; margin-top: -90px;
width: 150px; width: 150px;
} }
@ -872,7 +872,7 @@
margin-top: auto; margin-top: auto;
.custom-input { .custom-input {
margin-bottom: $medium; margin-bottom: $size-4;
input { input {
width: 200px; width: 200px;

10
frontend/resources/styles/main/partials/project-bar.scss
View File

@ -30,7 +30,7 @@
border-bottom: 1px solid $color-gray-10; border-bottom: 1px solid $color-gray-10;
font-size: $fs14; font-size: $fs14;
font-weight: bold; font-weight: bold;
padding: 0 $small; padding: 0 $size-2;
width: 100%; width: 100%;
} }
@ -38,7 +38,7 @@
.btn-warning { .btn-warning {
font-size: $fs13; font-size: $fs13;
margin-bottom: .5rem; margin-bottom: .5rem;
padding: 8px $small; padding: 8px $size-2;
width: 90%; width: 90%;
} }
@ -53,13 +53,13 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
padding: $x-small $small; padding: $size-1 $size-2;
position: relative; position: relative;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
height: 12px; height: 12px;
margin-right: $x-small; margin-right: $size-1;
width: 12px; width: 12px;
} }
@ -86,7 +86,7 @@
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
height: 12px; height: 12px;
margin-right: $small; margin-right: $size-2;
width: 12px; width: 12px;
&:hover { &:hover {

4
frontend/resources/styles/main/partials/sidebar-align-options.scss
View File

@ -11,7 +11,7 @@
height: 40px; height: 40px;
.align-group { .align-group {
padding: 0 $x-small; padding: 0 $size-1;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
width: 50%; width: 50%;
@ -28,7 +28,7 @@
height: 30px; height: 30px;
justify-content: center; justify-content: center;
margin: 5px 0; margin: 5px 0;
padding: $small $x-small; padding: $size-2 $size-1;
width: 25%; width: 25%;
svg { svg {

40
frontend/resources/styles/main/partials/sidebar-assets.scss
View File

@ -14,7 +14,7 @@
.assets-bar-title { .assets-bar-title {
color: $color-gray-10; color: $color-gray-10;
font-size: $fs14; font-size: $fs14;
margin: $small $small 0 $small; margin: $size-2 $size-2 0 $size-2;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@ -43,8 +43,8 @@
.search-block { .search-block {
border: 1px solid $color-gray-30; border: 1px solid $color-gray-30;
margin: $small $small 0 $small; margin: $size-2 $size-2 0 $size-2;
padding: $x-small $small; padding: $size-1 $size-2;
display: flex; display: flex;
align-items: center; align-items: center;
@ -92,8 +92,8 @@
color: $color-gray-10; color: $color-gray-10;
border: 1px solid transparent; border: 1px solid transparent;
border-bottom-color: $color-gray-40; border-bottom-color: $color-gray-40;
padding: $x-small; padding: $size-1;
margin: $small $small $medium $small; margin: $size-2 $size-2 $size-4 $size-2;
&:focus { &:focus {
color: lighten($color-gray-10, 8%); color: lighten($color-gray-10, 8%);
@ -107,7 +107,7 @@
} }
.collapse-library { .collapse-library {
margin-right: $small; margin-right: $size-2;
&.open svg { &.open svg {
transform: rotate(90deg); transform: rotate(90deg);
@ -122,7 +122,7 @@
background-color: $color-gray-60; background-color: $color-gray-60;
display: flex; display: flex;
align-items: center; align-items: center;
padding: $medium $small 0 $small; padding: $size-4 $size-2 0 $size-2;
.selected-count { .selected-count {
color: $color-primary; color: $color-primary;
@ -131,7 +131,7 @@
.listing-option-btn { .listing-option-btn {
cursor: pointer; cursor: pointer;
margin-left: $small; margin-left: $size-2;
&.first { &.first {
margin-left: auto; margin-left: auto;
@ -147,7 +147,7 @@
.asset-section { .asset-section {
background-color: $color-gray-60; background-color: $color-gray-60;
padding: $small; padding: $size-2;
font-size: $fs12; font-size: $fs12;
color: $color-gray-20; color: $color-gray-20;
/* TODO: see if this is useful, or is better to leave only /* TODO: see if this is useful, or is better to leave only
@ -188,8 +188,8 @@
.group-title { .group-title {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
margin-top: $small; margin-top: $size-2;
margin-bottom: $x-small; margin-bottom: $size-1;
color: $color-white; color: $color-white;
& svg { & svg {
@ -226,7 +226,7 @@
} }
.asset-title + .asset-grid { .asset-title + .asset-grid {
margin-top: $small; margin-top: $size-2;
} }
.asset-grid { .asset-grid {
@ -241,7 +241,7 @@
grid-auto-rows: 10vh; grid-auto-rows: 10vh;
.grid-cell { .grid-cell {
padding: $x-small; padding: $size-1;
& svg { & svg {
height: 10vh; height: 10vh;
@ -258,7 +258,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: $small; padding: $size-2;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -316,14 +316,14 @@
} }
.asset-title + .asset-enum { .asset-title + .asset-enum {
margin-top: $small; margin-top: $size-2;
} }
.asset-enum { .asset-enum {
.enum-item { .enum-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: $small; margin-bottom: $size-2;
cursor: pointer; cursor: pointer;
& > svg, & > svg,
@ -333,11 +333,11 @@
border: 2px solid transparent; border: 2px solid transparent;
height: 24px; height: 24px;
width: 24px; width: 24px;
margin-right: $small; margin-right: $size-2;
} }
.item-name { .item-name {
width: calc(100% - 24px - #{$small}); width: calc(100% - 24px - #{$size-2});
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -378,14 +378,14 @@
align-items: center; align-items: center;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $br-small; border-radius: $br-small;
margin-top: $x-small; margin-top: $size-1;
padding: 2px; padding: 2px;
font-size: $fs12; font-size: $fs12;
color: $color-white; color: $color-white;
cursor: pointer; cursor: pointer;
& span { & span {
margin-left: $x-small; margin-left: $size-1;
color: $color-gray-30; color: $color-gray-30;
text-transform: uppercase; text-transform: uppercase;
} }

78
frontend/resources/styles/main/partials/sidebar-element-options.scss
View File

@ -14,7 +14,7 @@
border: 1px solid $color-gray-60; border: 1px solid $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
display: flex; display: flex;
margin: $x-small; margin: $size-1;
li { li {
align-items: center; align-items: center;
@ -24,7 +24,7 @@
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
padding: $small; padding: $size-2;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
@ -60,13 +60,13 @@
.element-set { .element-set {
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
color: $color-gray-20; color: $color-gray-20;
padding: $small $x-small; padding: $size-2 $size-1;
.element-set-title { .element-set-title {
color: $color-gray-20; color: $color-gray-20;
display: flex; display: flex;
font-size: $fs13; font-size: $fs13;
padding: $x-small; padding: $size-1;
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
@ -79,14 +79,14 @@
} }
.element-list { .element-list {
margin-bottom: $small; margin-bottom: $size-2;
li { li {
align-items: center; align-items: center;
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: $small; padding: $size-2;
width: 100%; width: 100%;
.list-icon { .list-icon {
@ -94,7 +94,7 @@
svg { svg {
fill: $color-gray-30; fill: $color-gray-30;
height: 15px; height: 15px;
margin-right: $x-small; margin-right: $size-1;
width: 15px; width: 15px;
} }
@ -120,7 +120,7 @@
svg { svg {
fill: $color-gray-60; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $size-1;
width: 15px; width: 15px;
&:hover { &:hover {
@ -184,7 +184,7 @@
.element-set-content { .element-set-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $x-small; padding: $size-1;
width: 100%; width: 100%;
.input-text { .input-text {
@ -193,9 +193,9 @@
border-bottom-color: $color-gray-40; border-bottom-color: $color-gray-40;
color: $color-white; color: $color-white;
font-size: $fs12; font-size: $fs12;
margin: $x-small; margin: $size-1;
min-width: 0; min-width: 0;
padding: $x-small; padding: $size-1;
width: 100%; width: 100%;
&:focus { &:focus {
@ -305,12 +305,12 @@
border: 1px solid $color-gray-40; border: 1px solid $color-gray-40;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
padding: $x-small $big $x-small $x-small; padding: $size-1 $size-5 $size-1 $size-1;
position: relative; position: relative;
.dropdown-button { .dropdown-button {
position: absolute; position: absolute;
right: $x-small; right: $size-1;
top: 7px; top: 7px;
svg { svg {
@ -356,7 +356,7 @@
cursor: pointer; cursor: pointer;
font-size: $fs14; font-size: $fs14;
display: flex; display: flex;
padding: $small; padding: $size-2;
span { span {
color: $color-gray-20; color: $color-gray-20;
@ -409,7 +409,7 @@
border: 1px solid transparent; border: 1px solid transparent;
position: relative; position: relative;
height: 38px; height: 38px;
margin-right: $small; margin-right: $size-2;
max-height: 30px; max-height: 30px;
position: relative; position: relative;
width: 60%; width: 60%;
@ -528,7 +528,7 @@
fill: $color-gray-20; fill: $color-gray-20;
height: 16px; height: 16px;
width: 16px; width: 16px;
margin-right: $small; margin-right: $size-2;
} }
.row-actions { .row-actions {
@ -538,7 +538,7 @@
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
height: 12px; height: 12px;
margin-right: $x-small; margin-right: $size-1;
width: 12px; width: 12px;
} }
@ -577,8 +577,8 @@
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: flex-end; justify-content: flex-end;
margin: $small 0 $small $small; margin: $size-2 0 $size-2 $size-2;
padding: 0 $x-small; padding: 0 $size-1;
&:first-child { &:first-child {
justify-content: flex-start; justify-content: flex-start;
@ -590,7 +590,7 @@
display: flex; display: flex;
height: 20px; height: 20px;
justify-content: center; justify-content: center;
margin-right: $small; margin-right: $size-2;
position: relative; position: relative;
width: 20px; width: 20px;
@ -679,7 +679,7 @@
} }
.orientation-icon { .orientation-icon {
margin-left: $small; margin-left: $size-2;
display: flex; display: flex;
align-items: center; align-items: center;
@ -700,7 +700,7 @@
.navigate-icon { .navigate-icon {
background-color: $color-gray-60; background-color: $color-gray-60;
cursor: pointer; cursor: pointer;
margin-left: $small; margin-left: $size-2;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -726,7 +726,7 @@
width: 100%; width: 100%;
&:first-child { &:first-child {
margin-right: $small; margin-right: $size-2;
} }
.icon-before { .icon-before {
@ -1210,7 +1210,7 @@
position: relative; position: relative;
.backend-filters { .backend-filters {
padding: $small $medium; padding: $size-2 $size-4;
// width: 220px; // width: 220px;
top: 40px; top: 40px;
right: 20px; right: 20px;
@ -1218,15 +1218,15 @@
.backend-filter { .backend-filter {
display: flex; display: flex;
align-items: center; align-items: center;
padding: $small 0; padding: $size-2 0;
cursor: pointer; cursor: pointer;
.checkbox-icon { .checkbox-icon {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: $medium; width: $size-4;
height: $medium; height: $size-4;
border: 1px solid $color-gray-30; border: 1px solid $color-gray-30;
border-radius: $br-small; border-radius: $br-small;
@ -1239,7 +1239,7 @@
} }
.backend-name { .backend-name {
margin-left: $small; margin-left: $size-2;
color: $color-gray-50; color: $color-gray-50;
} }
@ -1271,7 +1271,7 @@
align-items: center; align-items: center;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-left: $small; margin-left: $size-2;
svg { svg {
width: 16px; width: 16px;
@ -1303,9 +1303,9 @@
} }
.font-item { .font-item {
padding-left: $big; padding-left: $size-5;
height: $x-big; height: $size-6;
max-height: $x-big; max-height: $size-6;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1329,7 +1329,7 @@
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
// border: 1px solid red; // border: 1px solid red;
width: $big width: $size-5
} }
.label { .label {
@ -1458,13 +1458,13 @@
.input-select { .input-select {
font-size: $fs11; font-size: $fs11;
margin: 0 $x-small; margin: 0 $size-1;
} }
svg { svg {
width: 15px; width: 15px;
height: 15px; height: 15px;
margin-left: $medium; margin-left: $size-4;
fill: $color-gray-20; fill: $color-gray-20;
} }
@ -1481,7 +1481,7 @@
cursor: pointer; cursor: pointer;
span { span {
margin-left: $small; margin-left: $size-2;
} }
&:hover, &:hover,
@ -1502,9 +1502,9 @@
color: $color-gray-10; color: $color-gray-10;
cursor: pointer; cursor: pointer;
font-size: $fs11; font-size: $fs11;
margin: $x-small; margin: $size-1;
overflow: hidden; overflow: hidden;
padding: $x-small; padding: $size-1;
padding-right: 20px; padding-right: 20px;
position: relative; position: relative;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -1544,6 +1544,6 @@
& li img { & li img {
width: 16px; width: 16px;
margin-right: $small; margin-right: $size-2;
} }
} }

4
frontend/resources/styles/main/partials/sidebar-icons.scss
View File

@ -7,7 +7,7 @@
.figures-catalog { .figures-catalog {
width: 100%; width: 100%;
padding: $medium $medium 0 $medium; padding: $size-4 $size-4 0 $size-4;
select { select {
color: $color-gray-10; color: $color-gray-10;
@ -27,7 +27,7 @@
flex-shrink: 0; flex-shrink: 0;
height: 54px; height: 54px;
justify-content: center; justify-content: center;
margin: $medium 0 0 $medium; margin: $size-4 0 0 $size-4;
width: 54px; width: 54px;
svg { svg {

14
frontend/resources/styles/main/partials/sidebar-interactions.scss
View File

@ -7,12 +7,12 @@
.interactions-help { .interactions-help {
font-size: $fs12; font-size: $fs12;
padding: 7px $medium; padding: 7px $size-4;
margin: 0 -7px; margin: 0 -7px;
text-align: center; text-align: center;
&.separator { &.separator {
padding-bottom: $medium; padding-bottom: $size-4;
border-bottom: 1px solid $color-black; border-bottom: 1px solid $color-black;
} }
} }
@ -20,7 +20,7 @@
.interactions-help-icon { .interactions-help-icon {
height: 32px; height: 32px;
width: 32px; width: 32px;
margin: $medium auto; margin: $size-4 auto;
svg { svg {
fill: $color-gray-40; fill: $color-gray-40;
@ -59,14 +59,14 @@
&.separator { &.separator {
border-top: 1px solid $color-black; border-top: 1px solid $color-black;
margin-top: $x-small; margin-top: $size-1;
} }
} }
.interactions-pos-buttons { .interactions-pos-buttons {
margin-top: $small; margin-top: $size-2;
padding-top: $small; padding-top: $size-2;
padding-bottom: $small; padding-bottom: $size-2;
justify-content: space-between; justify-content: space-between;
.element-set-actions-button { .element-set-actions-button {

2
frontend/resources/styles/main/partials/sidebar-layers.scss
View File

@ -9,7 +9,7 @@
align-items: center; align-items: center;
display: flex; display: flex;
height: 32px; height: 32px;
padding: $x-small $small; padding: $size-1 $size-2;
transition: none; transition: none;
width: 100%; width: 100%;

10
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View File

@ -21,7 +21,7 @@
svg { svg {
fill: $color-gray-30; fill: $color-gray-30;
height: 13px; height: 13px;
margin-right: $x-small; margin-right: $size-1;
width: 13px; width: 13px;
} }
@ -46,7 +46,7 @@
svg { svg {
fill: $color-gray-60; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $size-1;
width: 15px; width: 15px;
} }
@ -110,7 +110,7 @@
.element-list-body { .element-list-body {
align-items: center; align-items: center;
display: flex; display: flex;
padding: $x-small $small; padding: $size-1 $size-2;
transition: none; transition: none;
width: 100%; width: 100%;
@ -146,7 +146,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
padding: $x-small; padding: $size-1;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
@ -175,7 +175,7 @@
} }
.collapse-pages { .collapse-pages {
margin-left: $small; margin-left: $size-2;
svg { svg {
transform: rotate(90deg); transform: rotate(90deg);

2
frontend/resources/styles/main/partials/sidebar-tools.scss
View File

@ -18,7 +18,7 @@
flex-shrink: 0; flex-shrink: 0;
height: 54px; height: 54px;
justify-content: center; justify-content: center;
margin: $medium 0 0 $medium; margin: $size-4 0 0 $size-4;
width: 54px; width: 54px;
svg { svg {

4
frontend/resources/styles/main/partials/sidebar.scss
View File

@ -82,7 +82,7 @@ $width-settings-bar: 16rem;
align-items: center; align-items: center;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: $small; padding: $size-2;
overflow: hidden; overflow: hidden;
svg { svg {
@ -141,7 +141,7 @@ $width-settings-bar: 16rem;
} }
.tool-window-icon { .tool-window-icon {
margin-right: $small; margin-right: $size-2;
display: none; display: none;
} }

2
frontend/resources/styles/main/partials/tool-bar.scss
View File

@ -24,7 +24,7 @@
li { li {
cursor: pointer; cursor: pointer;
margin-bottom: $big; margin-bottom: $size-5;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;

4
frontend/resources/styles/main/partials/user-settings.scss
View File

@ -165,7 +165,7 @@
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
height: 120px; height: 120px;
margin-right: $medium; margin-right: $size-4;
width: 120px; width: 120px;
} }
} }
@ -179,7 +179,7 @@
h2 { h2 {
font-size: $fs14; font-size: $fs14;
font-weight: normal; font-weight: normal;
margin-bottom: $medium; margin-bottom: $size-4;
} }
} }
} }

16
frontend/resources/styles/main/partials/viewer-header.scss
View File

@ -4,7 +4,7 @@
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
height: 48px; height: 48px;
padding: 0 $medium 0 55px; padding: 0 $size-4 0 55px;
position: relative; position: relative;
z-index: 12; z-index: 12;
justify-content: space-between; justify-content: space-between;
@ -50,7 +50,7 @@
position: relative; position: relative;
> * { > * {
margin-left: $big; margin-left: $size-5;
} }
.btn-primary { .btn-primary {
@ -73,7 +73,7 @@
> span { > span {
color: $color-gray-10; color: $color-gray-10;
font-size: $fs13; font-size: $fs13;
margin-right: $x-small; margin-right: $size-1;
} }
> .icon { > .icon {
@ -107,7 +107,7 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
padding: $x-small; padding: $size-1;
position: relative; position: relative;
.icon { .icon {
@ -118,7 +118,7 @@
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
height: 12px; height: 12px;
margin-right: $small; margin-right: $size-2;
width: 12px; width: 12px;
} }
} }
@ -129,7 +129,7 @@
> span { > span {
color: $color-gray-20; color: $color-gray-20;
margin-right: $x-small; margin-right: $size-1;
font-size: $fs14; font-size: $fs14;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -146,7 +146,7 @@
display: flex; display: flex;
span { span {
color: $color-white; color: $color-white;
margin-right: $x-small; margin-right: $size-1;
} }
.counters { .counters {
@ -192,7 +192,7 @@
margin: 0; margin: 0;
li { li {
margin-left: $small; margin-left: $size-2;
position: relative; position: relative;
img { img {

20
frontend/resources/styles/main/partials/workspace-header.scss
View File

@ -10,7 +10,7 @@
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
height: 48px; height: 48px;
padding: $x-small $medium $x-small 55px; padding: $size-1 $size-4 $size-1 55px;
position: relative; position: relative;
z-index: 12; z-index: 12;
justify-content: space-between; justify-content: space-between;
@ -56,7 +56,7 @@
} }
.shared-badge { .shared-badge {
margin-left: $x-small; margin-left: $size-1;
height: 16px; height: 16px;
width: 16px; width: 16px;
display: flex; display: flex;
@ -81,7 +81,7 @@
position: relative; position: relative;
> * { > * {
margin-left: $big; margin-left: $size-5;
} }
.zoom-dropdown { .zoom-dropdown {
@ -93,13 +93,13 @@
.project-tree { .project-tree {
align-items: center; align-items: center;
display: flex; display: flex;
margin-left: $x-small; margin-left: $size-1;
padding: $x-small; padding: $size-1;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
height: 20px; height: 20px;
margin-right: $small; margin-right: $size-2;
width: 20px; width: 20px;
} }
@ -112,7 +112,7 @@
&.project-name { &.project-name {
color: $color-gray-20; color: $color-gray-20;
margin-right: $x-small; margin-right: $size-1;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -147,7 +147,7 @@
li { li {
cursor: pointer; cursor: pointer;
font-size: $fs14; font-size: $fs14;
padding: $small; padding: $size-2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -159,7 +159,7 @@
span { span {
color: $color-gray-60; color: $color-gray-60;
margin: 0 $x-small; margin: 0 $size-1;
} }
.shortcut { .shortcut {
@ -183,7 +183,7 @@
margin: 0; margin: 0;
li { li {
margin-left: $small; margin-left: $size-2;
position: relative; position: relative;
img { img {

8
frontend/resources/styles/main/partials/workspace.scss
View File

@ -18,12 +18,12 @@
top: 40px; top: 40px;
width: 240px; width: 240px;
z-index: 12; z-index: 12;
padding: $x-small 0; padding: $size-1 0;
li { li {
align-items: center; align-items: center;
font-size: $fs14; font-size: $fs14;
padding: $x-small $medium; padding: $size-1 $size-4;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -261,8 +261,8 @@
border-radius: $br-small; border-radius: $br-small;
color: $color-black; color: $color-black;
font-size: $fs12; font-size: $fs12;
margin-left: $small; margin-left: $size-2;
padding: $x-small; padding: $size-1;
} }
} }

4
frontend/resources/styles/main/partials/zoom-widget.scss
View File

@ -6,7 +6,7 @@
span { span {
color: $color-gray-10; color: $color-gray-10;
font-size: $fs14; font-size: $fs14;
margin-left: $x-small; margin-left: $size-1;
} }
.icon svg { .icon svg {
@ -31,7 +31,7 @@
cursor: pointer; cursor: pointer;
font-size: $fs14; font-size: $fs14;
display: flex; display: flex;
padding: $small; padding: $size-2;
span { span {
color: $color-gray-20; color: $color-gray-20;