0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00

🎉 fix size variables

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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