mirror of
https://github.com/penpot/penpot.git
synced 2025-06-03 04:41:37 +02:00
✨ Apply prettier to resources styles
This commit is contained in:
Alejandro Alonso
parent
cd55ed7c8d
commit
6413c9dddd
54 changed files with 1437 additions and 1342 deletions
|
|
@ -22,7 +22,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color:#FEECFD;
|
||||
background-color: #feecfd;
|
||||
background-image: url("/images/login-pink.svg");
|
||||
background-position: center;
|
||||
background-size: 96%;
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
width: 280px;
|
||||
font-size: $fs18;
|
||||
margin-top: 2vh;
|
||||
color: #2C233E;
|
||||
color: #2c233e;
|
||||
}
|
||||
|
||||
.logo {
|
||||
svg {
|
||||
fill: #2C233E;
|
||||
fill: #2c233e;
|
||||
max-width: 11vw;
|
||||
height: 80px;
|
||||
}
|
||||
|
|
@ -122,7 +122,6 @@
|
|||
margin-top: $size-4;
|
||||
margin-bottom: $size-4;
|
||||
|
||||
|
||||
&.demo {
|
||||
justify-content: center;
|
||||
margin-top: $size-5;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
height: 55px;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
|
@ -80,4 +78,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
left: 0;
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
& .viewer-header:hover {
|
||||
|
|
@ -57,5 +56,3 @@
|
|||
background-color: rgb(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@
|
|||
font-weight: bold;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
|
|
@ -75,5 +74,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,10 @@
|
|||
padding: 3rem;
|
||||
width: 100% !important;
|
||||
|
||||
h1, h3 {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
margin-bottom: .8rem;
|
||||
h1,
|
||||
h3 {
|
||||
font-family: "worksans", sans-serif !important;
|
||||
margin-bottom: 0.8rem;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
|
|
@ -26,8 +27,9 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
p, label {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
p,
|
||||
label {
|
||||
font-family: "worksans", sans-serif !important;
|
||||
font-size: $fs14;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
}
|
||||
|
||||
button {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
font-family: "worksans", sans-serif !important;
|
||||
}
|
||||
|
||||
.af-choice,
|
||||
|
|
@ -51,7 +53,7 @@
|
|||
width: 100%;
|
||||
|
||||
label {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
font-family: "worksans", sans-serif !important;
|
||||
font-size: $fs14;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
|
||||
.af-dropdown-text,
|
||||
.text {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
font-family: "worksans", sans-serif !important;
|
||||
}
|
||||
|
||||
.af-step-next {
|
||||
|
|
@ -109,13 +111,13 @@
|
|||
border-color: #c5c6c9 !important;
|
||||
}
|
||||
|
||||
.af-choice-option input:checked+label:before,
|
||||
.af-legal input:checked+label:before {
|
||||
.af-choice-option input:checked + label:before,
|
||||
.af-legal input:checked + label:before {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.af-field-use_of_penpot .af-choice-option input:checked+label,
|
||||
.af-field-previous_design_tool .af-choice-option input:checked+label {
|
||||
.af-field-use_of_penpot .af-choice-option input:checked + label,
|
||||
.af-field-previous_design_tool .af-choice-option input:checked + label {
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
border: 2px solid $color-primary !important;
|
||||
|
|
@ -156,7 +158,7 @@
|
|||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 10px 20px rgba(0,0,0,.2);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -177,7 +179,6 @@
|
|||
|
||||
.af-field-previous_design_tool .af-choice-option:nth-child(1) label {
|
||||
background-image: url("../images/form/figma.png");
|
||||
|
||||
}
|
||||
|
||||
.af-field-previous_design_tool .af-choice-option:nth-child(2) label {
|
||||
|
|
@ -242,9 +243,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.af-field-previous_design_tool .af-choice-option:nth-child(7) input:checked+label,
|
||||
.af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked+label {
|
||||
|
||||
.af-field-previous_design_tool
|
||||
.af-choice-option:nth-child(7)
|
||||
input:checked
|
||||
+ label,
|
||||
.af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked + label {
|
||||
&::before {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-cell.current {
|
||||
|
|
@ -56,7 +55,7 @@ ul.palette-menu .color-bullet {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: .6rem;
|
||||
padding: 0.6rem;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
|
|
@ -95,7 +94,8 @@ ul.palette-menu .color-bullet {
|
|||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: $color-white;
|
||||
|
||||
& > * {
|
||||
|
|
@ -108,7 +108,7 @@ ul.palette-menu .color-bullet {
|
|||
background: transparent;
|
||||
|
||||
&::before {
|
||||
content: "?"
|
||||
content: "?";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +151,6 @@ ul.palette-menu .color-bullet {
|
|||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
.color-palette {
|
||||
@include animation(0,.5s,fadeInUp);
|
||||
@include animation(0, 0.5s, fadeInUp);
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-top: 1px solid $color-gray-60;
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
|
||||
& .right-arrow,
|
||||
& .left-arrow {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 1rem;
|
||||
margin: 0 .5rem;
|
||||
margin: 0 0.5rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -37,53 +37,52 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.left-arrow {
|
||||
transform: rotate(180deg);
|
||||
padding-top: 10px;
|
||||
transform: rotate(180deg);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
&.fade-out-down {
|
||||
@include animation(0,.5s,fadeOutDown);
|
||||
@include animation(0, 0.5s, fadeOutDown);
|
||||
}
|
||||
|
||||
&.left-sidebar-open {
|
||||
left: 303px;
|
||||
width: calc(100% - 303px);
|
||||
left: 303px;
|
||||
width: calc(100% - 303px);
|
||||
}
|
||||
|
||||
& .context-menu-items {
|
||||
bottom: 1.5rem;
|
||||
top: initial;
|
||||
min-width: 10rem;
|
||||
bottom: 1.5rem;
|
||||
top: initial;
|
||||
min-width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-actions {
|
||||
align-self: stretch;
|
||||
border: 1px solid #1F1F1F;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
margin-right: .5rem;
|
||||
padding: 0.5rem;
|
||||
align-self: stretch;
|
||||
border: 1px solid #1f1f1f;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.color-palette-buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.color-palette-buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-actions-button {
|
||||
cursor: pointer;
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: #AFB2BF;
|
||||
}
|
||||
cursor: pointer;
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: #afb2bf;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-palette {
|
||||
|
|
@ -94,7 +93,7 @@
|
|||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
padding: .6rem;
|
||||
padding: 0.6rem;
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
height: 20px;
|
||||
|
|
@ -124,7 +123,7 @@
|
|||
padding: 0.25rem;
|
||||
|
||||
&.size-small {
|
||||
height: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,7 +131,7 @@
|
|||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
transition: all .6s ease;
|
||||
transition: all 0.6s ease;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
@ -146,11 +145,11 @@
|
|||
position: relative;
|
||||
|
||||
&.cell-big {
|
||||
flex-basis: 66px;
|
||||
flex-basis: 66px;
|
||||
}
|
||||
|
||||
&.cell-small {
|
||||
flex-basis: 52px;
|
||||
flex-basis: 52px;
|
||||
}
|
||||
|
||||
.color-text {
|
||||
|
|
@ -232,7 +231,7 @@
|
|||
position: relative;
|
||||
.input-text {
|
||||
font-size: $fs12;
|
||||
margin: 0 .5rem;
|
||||
margin: 0 0.5rem;
|
||||
max-width: 100px;
|
||||
}
|
||||
&::after {
|
||||
|
|
@ -251,43 +250,41 @@
|
|||
}
|
||||
|
||||
ul.palette-menu {
|
||||
left: 8px;
|
||||
top: auto;
|
||||
bottom: 4.5rem;
|
||||
color: $color-black;
|
||||
left: 8px;
|
||||
top: auto;
|
||||
bottom: 4.5rem;
|
||||
color: $color-black;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 5px 1.5rem;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
padding: 5px 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
hr {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 10px;
|
||||
}
|
||||
svg {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: $color-gray-20;
|
||||
}
|
||||
hr {
|
||||
border-color: $color-gray-20;
|
||||
}
|
||||
|
||||
.palette-library {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.color-sample {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.palette-library {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.color-sample {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid $color-gray-10;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
}
|
||||
|
||||
.gradient-background {
|
||||
|
|
@ -102,7 +103,8 @@
|
|||
margin-left: -7px;
|
||||
box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
|
||||
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: $color-white;
|
||||
|
||||
&.active {
|
||||
|
|
@ -142,7 +144,11 @@
|
|||
|
||||
border: 1px solid $color-gray-10;
|
||||
|
||||
background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
rgba(var(--color), 0) 0%,
|
||||
rgba(var(--color), 1) 100%
|
||||
);
|
||||
align-self: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -157,9 +163,15 @@
|
|||
|
||||
&.hue {
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
|
||||
#00f 67%, #f0f 83%, #f00 100%);
|
||||
var(--gradient-direction),
|
||||
#f00 0%,
|
||||
#ff0 17%,
|
||||
#0f0 33%,
|
||||
#0ff 50%,
|
||||
#00f 67%,
|
||||
#f0f 83%,
|
||||
#f00 100%
|
||||
);
|
||||
}
|
||||
|
||||
&.saturation {
|
||||
|
|
@ -167,29 +179,36 @@
|
|||
var(--gradient-direction),
|
||||
var(--saturation-grad-from) 0%,
|
||||
var(--saturation-grad-to) 100%
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.opacity {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") var(--background-repeat) center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
var(--background-repeat) center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
rgba(var(--color), 0) 0%,
|
||||
rgba(var(--color), 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.value {
|
||||
background: linear-gradient(var(--gradient-direction), #FFF 0%, #000 100%);
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
#fff 0%,
|
||||
#000 100%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.handler {
|
||||
background-color: $color-white;;
|
||||
background-color: $color-white;
|
||||
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
|
||||
transform: translate(-6px, -2px);
|
||||
left: 50%;
|
||||
|
|
@ -218,7 +237,8 @@
|
|||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
border: 1px solid $color-white;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
|
||||
rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
transform: translate(-6px, -6px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
|
@ -229,7 +249,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -237,7 +257,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -245,8 +265,9 @@
|
|||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-areas: "color hue"
|
||||
"color opacity";
|
||||
grid-template-areas:
|
||||
"color hue"
|
||||
"color opacity";
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
height: 3.5rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
|
|
@ -296,7 +317,7 @@
|
|||
padding-top: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
width: 200px;
|
||||
|
||||
|
||||
select {
|
||||
background-image: url(/images/icons/arrow-down.svg);
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -327,7 +348,6 @@
|
|||
max-height: 5.5rem;
|
||||
}
|
||||
|
||||
|
||||
.selected-colors::after {
|
||||
content: "";
|
||||
flex: auto;
|
||||
|
|
@ -367,7 +387,8 @@
|
|||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
border: 1px solid $color-white;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
|
||||
rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
transform: translate(-6px, -6px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
|
@ -431,7 +452,6 @@
|
|||
}
|
||||
|
||||
.inputs-area {
|
||||
|
||||
.input-text {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs12;
|
||||
|
|
@ -439,7 +459,6 @@
|
|||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.colorpicker-tabs {
|
||||
|
|
@ -473,7 +492,6 @@
|
|||
:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -517,7 +535,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
::placeholder{
|
||||
::placeholder {
|
||||
color: $color-gray-10;
|
||||
}
|
||||
|
||||
|
|
@ -535,4 +553,3 @@
|
|||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
pointer-events: auto;
|
||||
background-color: $color-gray-10;
|
||||
color: $color-gray-60;
|
||||
border: 1px solid #B1B2B5;
|
||||
border: 1px solid #b1b2b5;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 4px 4px rgba($color-black, 0.25);
|
||||
|
||||
|
|
@ -124,7 +124,6 @@
|
|||
|
||||
@include text-ellipsis;
|
||||
width: 174px;
|
||||
|
||||
}
|
||||
.timeago {
|
||||
margin-top: -2px;
|
||||
|
|
@ -178,7 +177,6 @@
|
|||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -194,13 +192,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.comment-options-dropdown {
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
width: 150px;
|
||||
|
||||
border: 1px solid #B1B2B5;
|
||||
border: 1px solid #b1b2b5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -241,13 +238,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.comment-threads-section {
|
||||
pointer-events: auto;
|
||||
|
||||
.thread-groups {
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
|
|
@ -332,7 +326,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.viewer-comments-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -345,8 +338,8 @@
|
|||
.workspace-comments-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-column: 1/span 2;
|
||||
grid-row: 1/span 2;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -389,7 +382,9 @@
|
|||
|
||||
&.open {
|
||||
background-color: $color-black;
|
||||
svg { fill: $color-primary; }
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -419,7 +414,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -439,7 +433,7 @@
|
|||
.thread-group .section-title {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
|
||||
.comment {
|
||||
.author .name .fullname {
|
||||
color: $color-gray-40;
|
||||
|
|
@ -465,4 +459,3 @@
|
|||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,99 +5,98 @@
|
|||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
.context-menu {
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.context-menu.is-open {
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.context-menu.fixed {
|
||||
position: fixed;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.context-menu-items {
|
||||
background: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
left: -$size-4;
|
||||
max-height: 30rem;
|
||||
min-width: 7rem;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $size-3;
|
||||
background: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
left: -$size-4;
|
||||
max-height: 30rem;
|
||||
min-width: 7rem;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $size-3;
|
||||
|
||||
& .separator {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding: 0px;
|
||||
margin: 2px;
|
||||
}
|
||||
& .separator {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding: 0px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&.min-width {
|
||||
min-width: 13rem;
|
||||
}
|
||||
&.min-width {
|
||||
min-width: 13rem;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-action {
|
||||
color: $color-black;
|
||||
display: block;
|
||||
font-size: $fs14;
|
||||
padding: $size-2 $size-4;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
display: block;
|
||||
font-size: $fs14;
|
||||
padding: $size-2 $size-4;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
background-color: $color-primary-lighter;
|
||||
&.submenu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
&.submenu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.submenu-back {
|
||||
color: $color-black;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
&.submenu-back {
|
||||
color: $color-black;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
transform: rotate(180deg);
|
||||
margin-right: $size-2;
|
||||
}
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
transform: rotate(180deg);
|
||||
margin-right: $size-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu.is-selectable {
|
||||
& .context-menu-action {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
& .context-menu-action {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
& .context-menu-item.is-selected .context-menu-action {
|
||||
background-image: url(/images/icons/tick.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5% 48%;
|
||||
background-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
& .context-menu-item.is-selected .context-menu-action {
|
||||
background-image: url(/images/icons/tick.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5% 48%;
|
||||
background-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@
|
|||
.placeholder-label {
|
||||
font-size: $fs14;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.overlay {
|
||||
|
|
@ -90,8 +89,8 @@
|
|||
}
|
||||
|
||||
.grid-item-icon {
|
||||
width:90px;
|
||||
height:90px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
|
|
@ -133,7 +132,6 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-badge {
|
||||
|
|
@ -170,7 +168,6 @@
|
|||
background-color: $color-white;
|
||||
border: 2px solid $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// PROJECTS, ELEMENTS & ICONS GRID
|
||||
|
|
@ -225,13 +222,9 @@
|
|||
> svg {
|
||||
fill: $color-primary-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.project-th-actions.force-display {
|
||||
|
|
@ -247,11 +240,9 @@
|
|||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-item-image {
|
||||
|
||||
svg {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
|
|
@ -259,7 +250,6 @@
|
|||
min-width: 40px;
|
||||
width: 8vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
|
|
@ -291,7 +281,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// STYLES FOR LIBRARIES
|
||||
|
|
@ -355,7 +344,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
|
@ -373,4 +361,3 @@
|
|||
margin-right: calc(100% - 148px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
&:hover {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -115,7 +114,9 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
svg { fill: $color-gray-50; }
|
||||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
//
|
||||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
|
||||
.dashboard-sidebar {
|
||||
&.settings {
|
||||
.back-to-dashboard {
|
||||
|
|
@ -34,7 +33,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.dashboard-settings {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -88,7 +86,7 @@
|
|||
z-index: 14;
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
input[type="file"] {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
|
|
@ -99,7 +97,9 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
.update-overlay {opacity: 0.8};
|
||||
.update-overlay {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -118,5 +118,4 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -278,7 +278,8 @@
|
|||
border-color: $color-black;
|
||||
}
|
||||
|
||||
.search, .clear-search {
|
||||
.search,
|
||||
.clear-search {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -354,12 +355,11 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
input[type="submit"] {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.profile-section {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -400,7 +400,7 @@
|
|||
bottom: 45px;
|
||||
min-width: 189px;
|
||||
|
||||
@include animation(0,.2s,fadeInUp);
|
||||
@include animation(0, 0.2s, fadeInUp);
|
||||
|
||||
li {
|
||||
height: 40px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
.dashboard-invite-modal {
|
||||
top: 65px;
|
||||
right: 13px;
|
||||
|
|
@ -31,7 +30,7 @@
|
|||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
input[type=submit] {
|
||||
input[type="submit"] {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -98,11 +97,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-team-settings {
|
||||
|
||||
.team-settings {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -173,7 +170,9 @@
|
|||
background: $color-primary-dark;
|
||||
z-index: 14;
|
||||
|
||||
svg { fill: $color-white; }
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,9 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
svg { fill: $color-gray-50; }
|
||||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -133,7 +135,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.edit-wrapper {
|
||||
border: 1px solid $color-gray-10;
|
||||
border-radius: $br-small;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
.debug-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
.debug-icons-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.icon-item, .cursor-item {
|
||||
.icon-item,
|
||||
.cursor-item {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -22,6 +23,6 @@
|
|||
}
|
||||
}
|
||||
.cursor-item {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,14 +36,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
&.with-check {
|
||||
> li {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
> li:not(.selected) {
|
||||
svg { display: none; }
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
.editable-label {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-label-input {
|
||||
border: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: $color-white;
|
||||
border: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.editable-label-close {
|
||||
background-color: $color-white;
|
||||
cursor: pointer;
|
||||
padding: 3px 5px;
|
||||
background-color: $color-white;
|
||||
cursor: pointer;
|
||||
padding: 3px 5px;
|
||||
|
||||
& svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
& svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
height: 55px;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.exception-content {
|
||||
|
|
@ -32,7 +31,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
|
@ -83,4 +81,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@ textarea {
|
|||
|
||||
h1 {
|
||||
font-size: $fs36;
|
||||
color: #2C233E;
|
||||
color: #2c233e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: $fs24;
|
||||
color: #2C233E;
|
||||
color: #2c233e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -261,7 +261,6 @@ textarea {
|
|||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 15px;
|
||||
|
||||
}
|
||||
|
||||
.input-container {
|
||||
|
|
@ -319,4 +318,3 @@ textarea {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
border-bottom: 1px solid $color-gray-60;
|
||||
}
|
||||
|
||||
& :last-child{
|
||||
& :last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
@ -272,7 +272,6 @@
|
|||
.typography-sample {
|
||||
font-size: $fs16;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.download-button {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@ $width-left-toolbar: 48px;
|
|||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -66,15 +65,10 @@ $width-left-toolbar: 48px;
|
|||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.panels {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// full width BG
|
||||
.loader-content {
|
||||
align-items: center;
|
||||
background-color: rgba(255,255,255, .85);
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
|
|
@ -38,5 +38,5 @@ svg#loader-pencil {
|
|||
}
|
||||
|
||||
#loader-line {
|
||||
animation: linePencil .8s infinite linear;
|
||||
animation: linePencil 0.8s infinite linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.modal-wrapper {}
|
||||
.modal-wrapper {
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
align-items: center;
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
z-index: 1000;
|
||||
|
||||
&.transparent {
|
||||
background-color: rgba($color-white, 0)
|
||||
background-color: rgba($color-white, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -134,7 +135,6 @@
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
|
||||
.change-email-modal {
|
||||
h2 {
|
||||
font-size: $fs18
|
||||
font-size: $fs18;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -230,7 +230,8 @@
|
|||
font-size: $fs12;
|
||||
}
|
||||
|
||||
.detail, .explain {
|
||||
.detail,
|
||||
.explain {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -256,7 +257,7 @@
|
|||
padding: 0.3rem 1.25rem;
|
||||
|
||||
&[disabled] {
|
||||
border: 1px solid #E3E3E3;
|
||||
border: 1px solid #e3e3e3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -352,7 +353,7 @@
|
|||
width: 14px;
|
||||
fill: $color-gray-20;
|
||||
margin-left: 0.5rem;
|
||||
padding-top: 1px
|
||||
padding-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -424,7 +425,8 @@
|
|||
flex-wrap: wrap;
|
||||
margin-left: 2rem;
|
||||
|
||||
.icon-chain, .icon-unchain {
|
||||
.icon-chain,
|
||||
.icon-unchain {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 2px;
|
||||
|
|
@ -481,7 +483,8 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3, p {
|
||||
h3,
|
||||
p {
|
||||
font-size: $fs12;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
|
|
@ -716,7 +719,7 @@
|
|||
//- ONBOARDING
|
||||
.onboarding {
|
||||
background-color: $color-white;
|
||||
box-shadow: 0 10px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
min-height: 420px;
|
||||
flex-direction: row;
|
||||
|
|
@ -850,19 +853,18 @@
|
|||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-family: 'worksans', sans-serif;
|
||||
font-family: "worksans", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 27px;
|
||||
margin-bottom: $size-3;
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
font-family: 'worksans', sans-serif;
|
||||
font-family: "worksans", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: $fs18;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modal-columns {
|
||||
|
|
@ -895,7 +897,7 @@
|
|||
.modal-left {
|
||||
background-repeat: no-repeat;
|
||||
border-radius: $br-medium;
|
||||
transition: all ease .3s;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
|
@ -991,7 +993,8 @@
|
|||
background-color: $color-white;
|
||||
flex-grow: 1;
|
||||
|
||||
p, h3 {
|
||||
p,
|
||||
h3 {
|
||||
color: $color-gray-60;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1005,7 +1008,6 @@
|
|||
font-size: $fs16;
|
||||
}
|
||||
|
||||
|
||||
.templates {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1057,12 +1059,10 @@
|
|||
justify-content: flex-end;
|
||||
margin-top: $size-2;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.onboarding-team {
|
||||
display: flex;
|
||||
min-width: 620px;
|
||||
|
|
@ -1104,8 +1104,10 @@
|
|||
margin-right: 13px;
|
||||
}
|
||||
|
||||
input { margin-bottom: unset; }
|
||||
input[type=submit] {
|
||||
input {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
input[type="submit"] {
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
|
|
@ -1147,19 +1149,17 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.questions-form {
|
||||
.modal-overlay {
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background-image: url("../images/deco-left.png"), url("../images/deco-right.png");
|
||||
background-image: url("../images/deco-left.png"),
|
||||
url("../images/deco-right.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10% 50px, 90% 50px;
|
||||
background-size: 65px;
|
||||
|
|
@ -1170,13 +1170,13 @@
|
|||
width: 100vw;
|
||||
|
||||
.af-form {
|
||||
--primary-color: #00C38B;
|
||||
--primary-color: #00c38b;
|
||||
--input-background-color: #ffffff;
|
||||
--label-font-size: $fs16;
|
||||
--field-error-font-color: #E65244;
|
||||
--message-success-font-color: #49D793;
|
||||
--message-fail-font-color: #E65244;
|
||||
--invalid-field-border-color: #E65244;
|
||||
--field-error-font-color: #e65244;
|
||||
--message-success-font-color: #49d793;
|
||||
--message-fail-font-color: #e65244;
|
||||
--invalid-field-border-color: #e65244;
|
||||
--dropdown-background-color: #ffffff;
|
||||
--primary-font-color: #000;
|
||||
--input-border-color: rgb(224, 230, 240);
|
||||
|
|
@ -1184,15 +1184,25 @@
|
|||
--button-border-radius: 3px;
|
||||
--message-border-radius: 3px;
|
||||
--checkbox-border-radius: 3px;
|
||||
--dropdown-option-background-color: rgba(0,195,139,1);
|
||||
--dropdown-option-active-background-color: rgba(0,138,98,1);
|
||||
--invalid-field-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1);
|
||||
--message-fail-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1);
|
||||
--message-success-background-color: rgba(171,232,197,1);
|
||||
--dropdown-option-background-color: rgba(0, 195, 139, 1);
|
||||
--dropdown-option-active-background-color: rgba(0, 138, 98, 1);
|
||||
--invalid-field-background-color: rgba(
|
||||
238.51780000000002,
|
||||
205.7178,
|
||||
204.11780000000002,
|
||||
1
|
||||
);
|
||||
--message-fail-background-color: rgba(
|
||||
238.51780000000002,
|
||||
205.7178,
|
||||
204.11780000000002,
|
||||
1
|
||||
);
|
||||
--message-success-background-color: rgba(171, 232, 197, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
z-index: 9;
|
||||
|
||||
&.toggle {
|
||||
left:-201px;
|
||||
left: -201px;
|
||||
}
|
||||
|
||||
.project-bar-inside {
|
||||
|
|
@ -37,13 +37,11 @@
|
|||
.btn-primary,
|
||||
.btn-warning {
|
||||
font-size: $fs12;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 8px $size-2;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tree-view {
|
||||
|
|
@ -69,11 +67,9 @@
|
|||
|
||||
&:hover,
|
||||
&.current {
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options {
|
||||
|
|
@ -92,11 +88,7 @@
|
|||
&:hover {
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
font-size: $fs14;
|
||||
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
|
|
@ -38,7 +37,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.modal-content {
|
||||
padding: 26px;
|
||||
|
||||
|
|
@ -60,7 +58,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.share-link-section {
|
||||
margin-top: 12px;
|
||||
label {
|
||||
|
|
@ -93,7 +90,8 @@
|
|||
padding-left: 20px;
|
||||
display: flex;
|
||||
|
||||
> .input-checkbox, > .input-radio {
|
||||
> .input-checkbox,
|
||||
> .input-radio {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -217,11 +217,11 @@
|
|||
& svg {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
fill: #F0F0F0;
|
||||
fill: #f0f0f0;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -359,8 +359,7 @@
|
|||
}
|
||||
|
||||
.enum-item:hover,
|
||||
.enum-item.selected,
|
||||
{
|
||||
.enum-item.selected {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -405,7 +404,9 @@
|
|||
border-color: $color-black;
|
||||
background-color: $color-gray-60;
|
||||
|
||||
.input-text, .input-select, .adv-typography-name {
|
||||
.input-text,
|
||||
.input-select,
|
||||
.adv-typography-name {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
|
@ -413,58 +414,57 @@
|
|||
}
|
||||
|
||||
.modal-create-color {
|
||||
position: relative;
|
||||
background-color: $color-white;
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: $color-white;
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
& .sketch-picker, .chrome-picker {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $color-gray-10 !important;
|
||||
border-radius: 0 !important;
|
||||
& .sketch-picker,
|
||||
.chrome-picker {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $color-gray-10 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
& input {
|
||||
background-color: $color-white;
|
||||
}
|
||||
& input {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
& .close {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
transform: rotate(45deg);
|
||||
top: 1rem;
|
||||
& .close {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
transform: rotate(45deg);
|
||||
top: 1rem;
|
||||
|
||||
svg {
|
||||
fill: $color-black;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
svg {
|
||||
fill: $color-black;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .btn-primary {
|
||||
width: 10rem;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
& .btn-primary {
|
||||
width: 10rem;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-create-color-title {
|
||||
color: $color-black;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: $color-black;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
.libraries-wrapper {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,11 +34,9 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -47,15 +45,12 @@
|
|||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-set {
|
||||
|
|
@ -85,14 +80,12 @@
|
|||
width: 100%;
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
margin-right: $size-1;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -111,7 +104,6 @@
|
|||
margin-left: auto;
|
||||
|
||||
a {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 15px;
|
||||
|
|
@ -121,59 +113,43 @@
|
|||
&:hover {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
@include animation(0s,.3s,fadeIn);
|
||||
@include animation(0s, 0.3s, fadeIn);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-set-content {
|
||||
|
|
@ -272,7 +248,6 @@
|
|||
&:hover {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -325,7 +300,6 @@
|
|||
&:hover {
|
||||
border: 1px solid $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
|
|
@ -426,8 +400,8 @@
|
|||
}
|
||||
|
||||
input.input-text {
|
||||
border: none;
|
||||
background: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.input-select {
|
||||
|
|
@ -458,12 +432,11 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
&.input-option {
|
||||
height: 26px;
|
||||
border-bottom: 1px solid #64666A;
|
||||
border-bottom: 1px solid #64666a;
|
||||
width: 100%;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
|
|
@ -488,7 +461,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.element-set-content .grid-option-main {
|
||||
.element-set-content .grid-option-main {
|
||||
.editable-select {
|
||||
height: 2rem;
|
||||
}
|
||||
|
|
@ -598,20 +571,15 @@
|
|||
|
||||
&:hover,
|
||||
&.current {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.element-color-picker {
|
||||
|
|
@ -640,9 +608,7 @@
|
|||
transition: none;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.radius-options {
|
||||
|
|
@ -751,7 +717,8 @@
|
|||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
&:hover svg, &.is-active svg {
|
||||
&:hover svg,
|
||||
&.is-active svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -797,7 +764,6 @@
|
|||
&:hover {
|
||||
background: $color-gray-60;
|
||||
|
||||
|
||||
.custom-select,
|
||||
.editable-select,
|
||||
input {
|
||||
|
|
@ -809,7 +775,7 @@
|
|||
min-width: 4.75rem;
|
||||
height: 2rem;
|
||||
border-color: transparent;
|
||||
border-bottom: 1px solid #65666A;
|
||||
border-bottom: 1px solid #65666a;
|
||||
max-height: 30px;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -898,7 +864,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.element-set-options-group {
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
|
|
@ -906,7 +871,7 @@
|
|||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #1F1F1F;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -978,34 +943,34 @@
|
|||
}
|
||||
|
||||
.shadow-options .color-row-wrap {
|
||||
margin-left: 6px;
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 6px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.element-set-actions-button {
|
||||
display: flex;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-20;
|
||||
stroke: $color-gray-20;
|
||||
}
|
||||
display: flex;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-20;
|
||||
stroke: $color-gray-20;
|
||||
}
|
||||
|
||||
&:hover svg,
|
||||
&.active svg {
|
||||
fill: $color-primary;
|
||||
stroke: $color-primary;
|
||||
}
|
||||
&:hover svg,
|
||||
&.active svg {
|
||||
fill: $color-primary;
|
||||
stroke: $color-primary;
|
||||
}
|
||||
|
||||
&.actions-inside {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
&.actions-inside {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.element-set-label {
|
||||
|
|
@ -1015,8 +980,8 @@
|
|||
}
|
||||
|
||||
.element-set-actions {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.row-flex-removable:hover .element-set-actions,
|
||||
|
|
@ -1029,44 +994,44 @@
|
|||
}
|
||||
|
||||
.typography-entry {
|
||||
margin: 0.5rem 0.3rem;
|
||||
margin: 0.5rem 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.typography-selection-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
.typography-selection-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
&.is-selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.is-selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.typography-sample {
|
||||
font-size: 17px;
|
||||
color: $color-white;
|
||||
margin: 0 0.5rem;
|
||||
.typography-sample {
|
||||
font-size: 17px;
|
||||
color: $color-white;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
font-family: sourcesanspro;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
font-family: sourcesanspro;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.typography-name {
|
||||
flex-grow: 1;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.typography-name {
|
||||
flex-grow: 1;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.element-set-actions-button svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.element-set-actions-button svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.spacing-options {
|
||||
|
|
@ -1075,75 +1040,75 @@
|
|||
}
|
||||
|
||||
.asset-section {
|
||||
.typography-entry {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.typography-entry {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.element-set-content .font-option,
|
||||
.element-set-content .size-option {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.element-set-content .variant-option {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.element-set-content .font-option,
|
||||
.element-set-content .size-option {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.element-set-content .variant-option {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.row-flex input.adv-typography-name {
|
||||
font-size: 14px;
|
||||
color: $color-gray-10;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
background-color: #303236;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
font-size: 14px;
|
||||
color: $color-gray-10;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
background-color: #303236;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.size-option .custom-select-dropdown {
|
||||
cursor: pointer;
|
||||
max-height: 16rem;
|
||||
min-width: 6rem;
|
||||
left: initial;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
max-height: 16rem;
|
||||
min-width: 6rem;
|
||||
left: initial;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.typography-read-only-data {
|
||||
font-size: 12px;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
color: $color-white;
|
||||
|
||||
.typography-name {
|
||||
font-size: 14px;
|
||||
.typography-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $color-gray-30;
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $color-gray-30;
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.go-to-lib-button {
|
||||
transition: border 0.3s, color 0.3s;
|
||||
text-align: center;
|
||||
background: $color-gray-50;
|
||||
padding: 0.5rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
.go-to-lib-button {
|
||||
transition: border 0.3s, color 0.3s;
|
||||
text-align: center;
|
||||
background: $color-gray-50;
|
||||
padding: 0.5rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-typography {
|
||||
|
|
@ -1249,7 +1214,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -1275,7 +1239,7 @@
|
|||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $color-gray-20
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -1315,7 +1279,9 @@
|
|||
background-color: $color-black;
|
||||
color: $color-primary;
|
||||
|
||||
.icon svg {fill: $color-primary;}
|
||||
.icon svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -1328,7 +1294,7 @@
|
|||
// justify-content: center;
|
||||
align-items: center;
|
||||
// border: 1px solid red;
|
||||
width: $size-5
|
||||
width: $size-5;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -1371,7 +1337,7 @@
|
|||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
background-color: $color-gray-30;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.figure-btn {
|
||||
|
|
@ -47,7 +46,5 @@
|
|||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
& input[type=radio]:checked {
|
||||
& input[type="radio"]:checked {
|
||||
& + label {
|
||||
&:before {
|
||||
background-color: $color-primary;
|
||||
|
|
@ -212,4 +212,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
|
||||
.element-icon,
|
||||
.element-actions {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
|
@ -110,7 +109,6 @@
|
|||
}
|
||||
|
||||
.element-list li.component {
|
||||
|
||||
.element-list-body {
|
||||
span.element-name {
|
||||
color: $color-component;
|
||||
|
|
@ -228,9 +226,9 @@ span.element-name {
|
|||
&.selected {
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -254,7 +252,9 @@ span.element-name {
|
|||
}
|
||||
|
||||
&.inverse {
|
||||
svg { transform: rotate(270deg); }
|
||||
svg {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -265,8 +265,8 @@ span.element-name {
|
|||
}
|
||||
|
||||
.icon-layer {
|
||||
> svg {
|
||||
background-color: rgba(255,255,255,.6);
|
||||
> svg {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: $br-small;
|
||||
flex-shrink: 0;
|
||||
fill: $color-black !important;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
flex: none !important;
|
||||
|
||||
.element-list {
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -17,14 +16,12 @@
|
|||
width: 100%;
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 13px;
|
||||
margin-right: $size-1;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -42,23 +39,19 @@
|
|||
margin-left: auto;
|
||||
|
||||
a {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 15px;
|
||||
margin-left: $size-1;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
|
@ -66,35 +59,27 @@
|
|||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
|
@ -104,7 +89,6 @@
|
|||
color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-list-body {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,5 @@
|
|||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
$width-settings-bar: 16rem;
|
||||
// This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
|
||||
// This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
|
||||
|
||||
.settings-bar {
|
||||
background-color: $color-gray-50;
|
||||
|
|
@ -35,35 +35,34 @@ $width-settings-bar: 16rem;
|
|||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
||||
&[data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: auto;
|
||||
&[data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'] {
|
||||
grid-template-rows: auto 1fr;
|
||||
&[data-layout*="layers"] {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='libraries'] {
|
||||
grid-template-rows: auto 1fr;
|
||||
&[data-layout*="libraries"] {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'][data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
&[data-layout*="layers"][data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='libraries'][data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
&[data-layout*="libraries"][data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'][data-layout*='libraries'] {
|
||||
grid-template-rows: auto 30% 1fr;
|
||||
&[data-layout*="layers"][data-layout*="libraries"] {
|
||||
grid-template-rows: auto 30% 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'][data-layout*='libraries'][data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: 11.5rem 25% 1fr;
|
||||
&[data-layout*="layers"][data-layout*="libraries"][data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: 11.5rem 25% 1fr;
|
||||
}
|
||||
|
||||
|
||||
flex-direction: column;
|
||||
padding-top: 48px;
|
||||
height: 100%;
|
||||
|
|
@ -151,20 +150,17 @@ $width-settings-bar: 16rem;
|
|||
transform: rotate(45deg);
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-bar .tool-window {
|
||||
flex: none;
|
||||
height: auto;
|
||||
flex: none;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -199,11 +195,8 @@ $width-settings-bar: 16rem;
|
|||
padding-bottom: 1px;
|
||||
|
||||
&.open {
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
|
||||
.element-list-body {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-container-tabs {
|
||||
background: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.25rem;
|
||||
background: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
align-items: center;
|
||||
background: $color-gray-60;
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5rem 0.25rem 0 0.25rem ;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: $color-gray-60;
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5rem 0.25rem 0 0.25rem;
|
||||
width: 100%;
|
||||
|
||||
&.current{
|
||||
background: $color-gray-50;
|
||||
}
|
||||
&.current {
|
||||
background: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-container-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tab-element, .tab-element-content {
|
||||
height: 100%;
|
||||
.tab-element,
|
||||
.tab-element-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
foreignObject {
|
||||
.text-editor, .rich-text {
|
||||
.text-editor,
|
||||
.rich-text {
|
||||
color: $color-black;
|
||||
height: 100%;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -59,4 +60,3 @@ foreignObject {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,25 +33,17 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.current {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.settings-profile {
|
||||
.forms-container {
|
||||
margin-top: 80px;
|
||||
|
|
@ -126,7 +125,7 @@
|
|||
z-index: 14;
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
input[type="file"] {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
|
|
@ -137,8 +136,12 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
img {display: none;}
|
||||
.update-overlay {opacity: 1};
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
.update-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.viewer-header {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 48px;
|
||||
padding: 0 $size-4 0 55px;
|
||||
|
|
@ -115,7 +115,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.breadcrumb, .current-frame {
|
||||
.breadcrumb,
|
||||
.current-frame {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.viewer-thumbnails {
|
||||
grid-row: 1 / span 1;
|
||||
grid-column: 1 / span 1;
|
||||
grid-column: 1 / span 1;
|
||||
|
||||
background-color: $color-gray-50;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.workspace-header {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 48px;
|
||||
padding: $size-1 $size-4 $size-1 55px;
|
||||
|
|
@ -35,17 +35,13 @@
|
|||
fill: $color-gray-30;
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,19 +112,19 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-name {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
background: $color-gray-50;
|
||||
color: $color-gray-10;
|
||||
margin-bottom: -1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
background: $color-gray-50;
|
||||
color: $color-gray-10;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +134,7 @@
|
|||
left: 40px;
|
||||
width: 270px;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
@include animation(0, 0.2s, fadeInDown);
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
|
|
@ -208,13 +204,21 @@
|
|||
display: flex;
|
||||
|
||||
&.error {
|
||||
.label { color: $color-danger; }
|
||||
.icon svg { fill: $color-danger; }
|
||||
.label {
|
||||
color: $color-danger;
|
||||
}
|
||||
.icon svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.pending {
|
||||
.label { color: $color-warning; }
|
||||
.icon svg { fill: $color-warning; }
|
||||
.label {
|
||||
color: $color-warning;
|
||||
}
|
||||
.icon svg {
|
||||
fill: $color-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@
|
|||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,10 +180,10 @@
|
|||
.viewport-controls {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-canvas, .page-layout {
|
||||
.page-canvas,
|
||||
.page-layout {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +223,6 @@
|
|||
stroke: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.workspace-frame-label {
|
||||
|
|
@ -242,7 +240,7 @@
|
|||
font-family: worksans;
|
||||
padding: 2px 12px;
|
||||
border-radius: 4px;
|
||||
display:flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
|
|
@ -335,4 +333,3 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue