3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-06 07:55:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Apply prettier to resources styles

Browse source
This commit is contained in:
Alejandro Alonso 2022-01-12 11:27:43 +01:00
parent cd55ed7c8d
commit 6413c9dddd
54 changed files with 1437 additions and 1342 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
frontend/resources/styles/common/base.scss
View file

@ -10,7 +10,7 @@ body {
color: $color-gray-20; color: $color-gray-20;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: 'worksans', sans-serif; font-family: "worksans", sans-serif;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
@ -30,7 +30,6 @@ body {
object { object {
transition: none; transition: none;
} }
} }
img { img {
@ -39,11 +38,9 @@ img {
} }
svg { svg {
* { * {
transition: none; transition: none;
} }
} }
*:focus { *:focus {
@ -51,7 +48,6 @@ svg {
box-shadow: 0; box-shadow: 0;
} }
a { a {
cursor: pointer; cursor: pointer;
color: $color-primary-dark; color: $color-primary-dark;
@ -59,7 +55,6 @@ a {
&:hover { &:hover {
color: $color-primary; color: $color-primary;
} }
} }
p { p {
@ -71,16 +66,14 @@ p {
font-size: $fs16; font-size: $fs16;
line-height: $base-lh; line-height: $base-lh;
} }
} }
li { li {
line-height: $base-lh-sm; line-height: $base-lh-sm;
@include bp(baby-bear) { @include bp(baby-bear) {
line-height: $base-lh line-height: $base-lh;
} }
} }
ul { ul {
@ -114,9 +107,7 @@ h1 {
font-size: $fs44; font-size: $fs44;
line-height: $title-lh; line-height: $title-lh;
} }
} }
} }
h2 { h2 {
font-size: $fs24; font-size: $fs24;
@ -127,13 +118,12 @@ h2 {
font-size: $fs32; font-size: $fs32;
line-height: $title-lh; line-height: $title-lh;
} }
} }
h3 { h3 {
font-size: $fs24; font-size: $fs24;
font-weight: 300; font-weight: 300;
padding: .5rem 0; padding: 0.5rem 0;
} }
h4 { h4 {
@ -142,33 +132,65 @@ h4 {
} }
@-webkit-keyframes rotation { @-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);} from {
to {-webkit-transform: rotate(359deg);} -webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
} }
@-webkit-keyframes rotation-negative { @-webkit-keyframes rotation-negative {
from {-webkit-transform: rotate(0deg);} from {
to {-webkit-transform: rotate(-359deg);} -webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-359deg);
}
} }
@keyframes tooltipAppear { @keyframes tooltipAppear {
0% {opacity: 0; display: none;} 0% {
1% {display: block; opacity: 0; left: 3rem} opacity: 0;
100% {opacity: 1; left: 2rem} display: none;
}
1% {
display: block;
opacity: 0;
left: 3rem;
}
100% {
opacity: 1;
left: 2rem;
}
} }
@keyframes show { @keyframes show {
0% {opacity: 0; display: none;} 0% {
1% {display: block; opacity: 0;} opacity: 0;
100% {opacity: 1;} display: none;
}
1% {
display: block;
opacity: 0;
}
100% {
opacity: 1;
}
} }
@keyframes hide { @keyframes hide {
0% {opacity: 1; display: block;} 0% {
99% {opacity: 0; display: block} opacity: 1;
100% {display: none;} display: block;
}
99% {
opacity: 0;
display: block;
}
100% {
display: none;
}
} }
.hide { .hide {
@ -182,7 +204,7 @@ h4 {
} }
.show { .show {
animation: show .4s linear ; animation: show 0.4s linear;
display: block !important; display: block !important;
} }
@ -215,13 +237,13 @@ hr {
margin: 1rem 0; margin: 1rem 0;
} }
input[type=number]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
input[type=number] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }

633
frontend/resources/styles/common/dependencies/animations.scss
View file

File diff suppressed because it is too large Load diff

176
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -8,35 +8,35 @@
// Colors // Colors
$color-white: #ffffff; $color-white: #ffffff;
$color-black: #000000; $color-black: #000000;
$color-canvas: #E8E9EA; $color-canvas: #e8e9ea;
$color-dashboard: #F6F6F6; $color-dashboard: #f6f6f6;
// Main color // Main color
$color-primary: #31EFB8; $color-primary: #31efb8;
// Secondary colors // Secondary colors
$color-success: #58C35C; $color-success: #58c35c;
$color-complete: #a599c6; $color-complete: #a599c6;
$color-warning: #FC8802; $color-warning: #fc8802;
$color-danger: #E65244; $color-danger: #e65244;
$color-info: #59b9e2; $color-info: #59b9e2;
$color-ocean: #4285f4; $color-ocean: #4285f4;
$color-component: #76B0B8; $color-component: #76b0b8;
$color-component-highlight: #1890ff; $color-component-highlight: #1890ff;
$color-pink: #feecfc; $color-pink: #feecfc;
// Gray scale // Gray scale
$color-gray-10: #E3E3E3; $color-gray-10: #e3e3e3;
$color-gray-20: #b1b2b5; $color-gray-20: #b1b2b5;
$color-gray-30: #7B7D85; $color-gray-30: #7b7d85;
$color-gray-40: #64666A; $color-gray-40: #64666a;
$color-gray-50: #303236; $color-gray-50: #303236;
$color-gray-60: #1F1F1F; $color-gray-60: #1f1f1f;
// UI colors // UI colors
$color-select: #1FDEA7; $color-select: #1fdea7;
$color-distance: #DB00FF; $color-distance: #db00ff;
$color-snap: #D383DA; $color-snap: #d383da;
// Mixing Color variable for creating both light and dark colors // Mixing Color variable for creating both light and dark colors
$mix-percentage-dark: 81%; $mix-percentage-dark: 81%;
@ -46,46 +46,142 @@ $mix-percentage-lighter: 20%;
$mix-percentage-lightest: 10%; $mix-percentage-lightest: 10%;
// Lighter colors // Lighter colors
$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d $color-success-light: mix(
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de $color-success,
$color-white,
$mix-percentage-light
); //#79cf7d
$color-success-lighter: mix(
$color-success,
$color-white,
$mix-percentage-lighter
); //#def3de
$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); //#b7add1 $color-complete-light: mix(
$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4 $color-complete,
$color-white,
$mix-percentage-light
); //#b7add1
$color-complete-lighter: mix(
$color-complete,
$color-white,
$mix-percentage-lighter
); //#edebf4
$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); //#5af2c6 $color-primary-light: mix(
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1 $color-primary,
$color-white,
$mix-percentage-light
); //#5af2c6
$color-primary-lighter: mix(
$color-primary,
$color-white,
$mix-percentage-lighter
); //#d6fcf1
$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); //#fda035 $color-warning-light: mix(
$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc; $color-warning,
$color-white,
$mix-percentage-light
); //#fda035
$color-warning-lighter: mix(
$color-warning,
$color-white,
$mix-percentage-lighter
); //#fee7cc;
$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); //#eb7569 $color-danger-light: mix(
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda $color-danger,
$color-white,
$mix-percentage-light
); //#eb7569
$color-danger-lighter: mix(
$color-danger,
$color-white,
$mix-percentage-lighter
); //#fadcda
$color-info-light: mix($color-info, $color-white, $mix-percentage-light); //#7ac7e8 $color-info-light: mix(
$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9; $color-info,
$color-white,
$mix-percentage-light
); //#7ac7e8
$color-info-lighter: mix(
$color-info,
$color-white,
$mix-percentage-lighter
); //#def1f9;
// Darker colors // Darker colors
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b; $color-success-dark: mix(
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537; $color-success,
$color-black,
$mix-percentage-dark
); //#479e4b;
$color-success-darker: mix(
$color-success,
$color-black,
$mix-percentage-darker
); // #357537;
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0 $color-complete-dark: mix(
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77 $color-complete,
$color-black,
$mix-percentage-dark
); //#867ca0
$color-complete-darker: mix(
$color-complete,
$color-black,
$mix-percentage-darker
); //#635c77
$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //#28c295; $color-primary-dark: mix(
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e $color-primary,
$color-black,
$mix-percentage-dark
); //#28c295;
$color-primary-darker: mix(
$color-primary,
$color-black,
$mix-percentage-darker
); // #1d8f6e
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02; $color-warning-dark: mix(
$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201 $color-warning,
$color-black,
$mix-percentage-dark
); // #cc6e02;
$color-warning-darker: mix(
$color-warning,
$color-black,
$mix-percentage-darker
); //#975201
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237 $color-danger-dark: mix(
$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);// #8a3129; $color-danger,
$color-black,
$mix-percentage-dark
); //#ba4237
$color-danger-darker: mix(
$color-danger,
$color-black,
$mix-percentage-darker
); // #8a3129;
$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);// #4896b7 $color-info-dark: mix(
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88; $color-info,
$color-black,
$mix-percentage-dark
); // #4896b7
$color-info-darker: mix(
$color-info,
$color-black,
$mix-percentage-darker
); // #356f88;
// bg transparent // bg transparent
$color-dark-bg: rgba(0,0,0,.4); $color-dark-bg: rgba(0, 0, 0, 0.4);
$color-light-bg: rgba(255,255,255,.6); $color-light-bg: rgba(255, 255, 255, 0.6);
// Transform scss variables into css variables to use them onto cljs files // Transform scss variables into css variables to use them onto cljs files
:root { :root {

14
frontend/resources/styles/common/dependencies/fonts.scss
View file

@ -59,13 +59,23 @@ $title-lh-sm: 1.15;
// Source Sans Pro // Source Sans Pro
@include font-face("sourcesanspro", "sourcesanspro-extralight", "200"); @include font-face("sourcesanspro", "sourcesanspro-extralight", "200");
@include font-face("sourcesanspro","sourcesanspro-extralightitalic", "200", italic); @include font-face(
"sourcesanspro",
"sourcesanspro-extralightitalic",
"200",
italic
);
@include font-face("sourcesanspro", "sourcesanspro-light", "300"); @include font-face("sourcesanspro", "sourcesanspro-light", "300");
@include font-face("sourcesanspro", "sourcesanspro-lightitalic", "300", italic); @include font-face("sourcesanspro", "sourcesanspro-lightitalic", "300", italic);
@include font-face("sourcesanspro", "sourcesanspro-regular", normal); @include font-face("sourcesanspro", "sourcesanspro-regular", normal);
@include font-face("sourcesanspro", "sourcesanspro-italic", normal, italic); @include font-face("sourcesanspro", "sourcesanspro-italic", normal, italic);
@include font-face("sourcesanspro", "sourcesanspro-semibold", "600"); @include font-face("sourcesanspro", "sourcesanspro-semibold", "600");
@include font-face("sourcesanspro","sourcesanspro-semibolditalic", "600", italic); @include font-face(
"sourcesanspro",
"sourcesanspro-semibolditalic",
"600",
italic
);
@include font-face("sourcesanspro", "sourcesanspro-bold", bold); @include font-face("sourcesanspro", "sourcesanspro-bold", bold);
@include font-face("sourcesanspro", "sourcesanspro-bolditalic", bold, italic); @include font-face("sourcesanspro", "sourcesanspro-bolditalic", bold, italic);
@include font-face("sourcesanspro", "sourcesanspro-black", "900"); @include font-face("sourcesanspro", "sourcesanspro-black", "900");

70
frontend/resources/styles/common/dependencies/mixin.scss
View file

@ -9,31 +9,34 @@
/// @group Mixins /// @group Mixins
/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile). /// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
@mixin bp($point) { @mixin bp($point) {
$bp-mobile: "(min-width: 720px)"; $bp-mobile: "(min-width: 720px)";
$bp-tablet: "(min-width: 1020px)"; $bp-tablet: "(min-width: 1020px)";
$bp-desktop: "(min-width: 1366px)"; $bp-desktop: "(min-width: 1366px)";
@if $point == mobile { @if $point == mobile {
@media #{$bp-desktop} { @content; } @media #{$bp-desktop} {
@content;
} }
@else if $point == tablet { } @else if $point == tablet {
@media #{$bp-tablet} { @content; } @media #{$bp-tablet} {
@content;
}
} @else if $point == desktop {
@media #{$bp-mobile} {
@content;
} }
@else if $point == desktop {
@media #{$bp-mobile} { @content; }
} }
} }
// Advanced positioning // Advanced positioning
// ---------------- // ----------------
@mixin position($type, @mixin position(
$type,
$top: $position-default, $top: $position-default,
$right: $position-default, $right: $position-default,
$bottom: $position-default, $bottom: $position-default,
$left: $position-default) { $left: $position-default
) {
position: $type; position: $type;
$allowed_types: absolute relative fixed; $allowed_types: absolute relative fixed;
@if not index($allowed_types, $type) { @if not index($allowed_types, $type) {
@ -43,17 +46,31 @@
#{nth($data, 1)}: nth($data, 2); #{nth($data, 1)}: nth($data, 2);
} }
} }
@mixin absolute($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) { @mixin absolute(
$top: $position-default,
$right: $position-default,
$bottom: $position-default,
$left: $position-default
) {
@include position(absolute, $top, $right, $bottom, $left); @include position(absolute, $top, $right, $bottom, $left);
} }
@mixin relative($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) { @mixin relative(
$top: $position-default,
$right: $position-default,
$bottom: $position-default,
$left: $position-default
) {
@include position(relative, $top, $right, $bottom, $left); @include position(relative, $top, $right, $bottom, $left);
} }
@mixin fixed($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) { @mixin fixed(
$top: $position-default,
$right: $position-default,
$bottom: $position-default,
$left: $position-default
) {
@include position(fixed, $top, $right, $bottom, $left); @include position(fixed, $top, $right, $bottom, $left);
} }
/// Center an element vertically and horizontally with an absolute position. /// Center an element vertically and horizontally with an absolute position.
/// @group Mixins /// @group Mixins
@ -62,8 +79,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
/// This mixing allow you to add placeholder colors in all available browsers /// This mixing allow you to add placeholder colors in all available browsers
/// @group Mixins /// @group Mixins
@ -72,11 +87,13 @@
@content; @content;
} }
&:-moz-placeholder { /* Firefox 18- */ &:-moz-placeholder {
/* Firefox 18- */
@content; @content;
} }
&::-moz-placeholder { /* Firefox 19+ */ &::-moz-placeholder {
/* Firefox 19+ */
@content; @content;
} }
@ -101,12 +118,20 @@
/// @parameter $weight [normal] - With this variable you can add how much weight you want to add to this specific font. EX: Bold /// @parameter $weight [normal] - With this variable you can add how much weight you want to add to this specific font. EX: Bold
/// @parameter $style [normal] - With this variable you can add a font style to this specific font. EX: Italic /// @parameter $style [normal] - With this variable you can add a font style to this specific font. EX: Italic
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal") ) { @mixin font-face(
$style-name,
$file,
$weight: unquote("normal"),
$style: unquote("normal")
) {
$filepath: "/fonts/" + $file; $filepath: "/fonts/" + $file;
@font-face { @font-face {
font-family: "#{$style-name}"; font-family: "#{$style-name}";
src: url($filepath + ".eot"); src: url($filepath + ".eot");
src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg'); src: url($filepath + ".eot?#iefix") format("embedded-opentype"),
url($filepath + ".woff") format("woff"),
url($filepath + ".ttf") format("truetype"),
url($filepath + ".svg#" + $style-name + "") format("svg");
font-weight: unquote($weight); font-weight: unquote($weight);
font-style: unquote($style); font-style: unquote($style);
} }
@ -117,14 +142,14 @@
.icon-tooltip { .icon-tooltip {
display: block; display: block;
left: 2rem; left: 2rem;
animation: tooltipAppear .2s linear ; animation: tooltipAppear 0.2s linear;
} }
} }
&.active { &.active {
.icon-tooltip { .icon-tooltip {
display: block; display: block;
left: 2rem; left: 2rem;
animation: tooltipAppear .2s linear ; animation: tooltipAppear 0.2s linear;
} }
} }
} }
@ -148,5 +173,4 @@
position: absolute; position: absolute;
right: 2px; right: 2px;
} }
} }

5
frontend/resources/styles/common/dependencies/reset.scss
View file

@ -11,7 +11,6 @@ img {
display: block; display: block;
} }
// #Reset & Basics (Inspired by E. Meyers) // #Reset & Basics (Inspired by E. Meyers)
//================================================== //==================================================
a, a,
@ -136,7 +135,7 @@ blockquote:before,
blockquote:after, blockquote:after,
q:before, q:before,
q:after { q:after {
content: ''; content: "";
} }
table { table {
@ -145,5 +144,5 @@ table {
} }
select { select {
-webkit-appearance:none -webkit-appearance: none;
} }

153
frontend/resources/styles/common/framework.scss
View file

@ -19,7 +19,7 @@
justify-content: center; justify-content: center;
min-width: 25px; min-width: 25px;
padding: 0 1rem; padding: 0 1rem;
transition: all .4s; transition: all 0.4s;
text-decoration: none !important; text-decoration: none !important;
svg { svg {
height: 16px; height: 16px;
@ -76,7 +76,7 @@
color: $color-primary-dark; color: $color-primary-dark;
flex-shrink: 0; flex-shrink: 0;
&:hover { &:hover {
background: rgba(49,239,184,.12); background: rgba(49, 239, 184, 0.12);
} }
} }
@ -148,7 +148,6 @@
} }
} }
.btn-gray { .btn-gray {
@extend %btn; @extend %btn;
background: $color-gray-30; background: $color-gray-30;
@ -171,7 +170,7 @@
.btn-option { .btn-option {
display: flex; display: flex;
a { a {
margin-right: .5rem; margin-right: 0.5rem;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -179,7 +178,7 @@
&.column { &.column {
flex-direction: column; flex-direction: column;
a { a {
margin-bottom: .5rem; margin-bottom: 0.5rem;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -193,11 +192,11 @@
max-width: 400px; max-width: 400px;
} }
&.mb { &.mb {
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
} }
input[type=button][disabled], input[type="button"][disabled],
.btn-disabled { .btn-disabled {
background-color: $color-gray-10; background-color: $color-gray-10;
color: $color-gray-40; color: $color-gray-40;
@ -254,11 +253,9 @@ ul.slider-dots {
&:hover { &:hover {
background-color: $color-gray-10; background-color: $color-gray-10;
} }
} }
&.dots-purple { &.dots-purple {
li { li {
border-color: $color-complete; border-color: $color-complete;
@ -266,17 +263,13 @@ ul.slider-dots {
&:hover { &:hover {
background-color: $color-complete; background-color: $color-complete;
} }
} }
} }
} }
// Doted list // Doted list
.doted-list { .doted-list {
li { li {
align-items: center; align-items: center;
display: flex; display: flex;
@ -295,9 +288,7 @@ ul.slider-dots {
&.not-included { &.not-included {
text-decoration: line-through; text-decoration: line-through;
} }
} }
} }
// Tags // Tags
@ -332,7 +323,6 @@ ul.slider-dots {
&:hover { &:hover {
background-color: $color-primary-dark; background-color: $color-primary-dark;
} }
} }
&.tag-green { &.tag-green {
@ -342,7 +332,6 @@ ul.slider-dots {
&:hover { &:hover {
background-color: $color-success-dark; background-color: $color-success-dark;
} }
} }
&.tag-purple { &.tag-purple {
@ -352,7 +341,6 @@ ul.slider-dots {
&:hover { &:hover {
background-color: $color-complete-dark; background-color: $color-complete-dark;
} }
} }
&.tag-orange { &.tag-orange {
@ -362,7 +350,6 @@ ul.slider-dots {
&:hover { &:hover {
background-color: $color-warning-dark; background-color: $color-warning-dark;
} }
} }
&.tag-red { &.tag-red {
@ -372,11 +359,8 @@ ul.slider-dots {
&:hover { &:hover {
background-color: $color-danger-dark; background-color: $color-danger-dark;
} }
} }
} }
} }
// Input elements // Input elements
@ -425,49 +409,42 @@ ul.slider-dots {
} }
&.percentail { &.percentail {
&::after { &::after {
content: "%"; content: "%";
} }
} }
&.milliseconds { &.milliseconds {
&::after { &::after {
content: "ms"; content: "ms";
} }
} }
&.degrees { &.degrees {
&::after { &::after {
content: "dg"; content: "dg";
} }
} }
&.height { &.height {
&::after { &::after {
content: "H"; content: "H";
} }
} }
&.width { &.width {
&::after { &::after {
content: "W"; content: "W";
} }
} }
&.Xaxis { &.Xaxis {
&::after { &::after {
content: "X"; content: "X";
} }
} }
&.Yaxis { &.Yaxis {
&::after { &::after {
content: "Y"; content: "Y";
} }
@ -524,7 +501,7 @@ input[type="checkbox"]:focus {
position: relative; position: relative;
@include placeholder { @include placeholder {
transition: all .3s ease; transition: all 0.3s ease;
} }
&:focus { &:focus {
@ -534,9 +511,8 @@ input[type="checkbox"]:focus {
@include placeholder { @include placeholder {
opacity: 0; opacity: 0;
transform: translateY(-20px); transform: translateY(-20px);
transition: all .3s ease; transition: all 0.3s ease;
} }
} }
&.success { &.success {
@ -550,7 +526,6 @@ input[type="checkbox"]:focus {
border-color: $color-danger; border-color: $color-danger;
color: $color-danger-dark; color: $color-danger-dark;
} }
} }
// Element-name // Element-name
@ -579,10 +554,8 @@ input.element-name {
&.small { &.small {
padding: $size-1 $size-5 $size-1 $size-1; padding: $size-1 $size-5 $size-1 $size-1;
} }
} }
// Input radio // Input radio
.input-radio, .input-radio,
@ -618,11 +591,9 @@ input.element-name {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
} }
.input-radio { .input-radio {
label { label {
margin-bottom: 6px; margin-bottom: 6px;
@ -630,36 +601,27 @@ input.element-name {
border-radius: 99px; border-radius: 99px;
transition: box-shadow 0.2s linear 0s, color 0.2s linear 0s; transition: box-shadow 0.2s linear 0s, color 0.2s linear 0s;
} }
} }
input[type=radio]:checked { input[type="radio"]:checked {
& + label { & + label {
&:before { &:before {
box-shadow: inset 0 0 0 5px $color-gray-20; box-shadow: inset 0 0 0 5px $color-gray-20;
} }
}
} }
} input[type="radio"] {
input[type=radio] {
display: none; display: none;
} }
input[type=radio][disabled] { input[type="radio"][disabled] {
& + label { & + label {
opacity: 0.65; opacity: 0.65;
} }
} }
} }
input[type=radio]:checked + label:before{ input[type="radio"]:checked + label:before {
.input-radio.radio-success & { .input-radio.radio-success & {
box-shadow: inset 0 0 0 5px $color-success; box-shadow: inset 0 0 0 5px $color-success;
} }
@ -683,23 +645,17 @@ input[type=radio]:checked + label:before{
.input-radio.radio-complete & { .input-radio.radio-complete & {
box-shadow: inset 0 0 0 5px $color-complete; box-shadow: inset 0 0 0 5px $color-complete;
} }
} }
// Input checkbox // Input checkbox
.input-checkbox { .input-checkbox {
input[type="radio"][disabled] {
input[type=radio][disabled] {
& + label { & + label {
&:after { &:after {
background-color: $color-gray-10; background-color: $color-gray-10;
} }
} }
} }
label { label {
@ -726,17 +682,14 @@ input[type=radio]:checked + label:before{
&:after { &:after {
border-radius: 3px; border-radius: 3px;
} }
} }
input[type=checkbox] { input[type="checkbox"] {
display: none; display: none;
} }
&.checkbox-circle { &.checkbox-circle {
label { label {
&:after { &:after {
border-radius: 99px; border-radius: 99px;
} }
@ -744,15 +697,11 @@ input[type=radio]:checked + label:before{
&:before { &:before {
border-radius: 99px; border-radius: 99px;
} }
}
} }
} input[type="checkbox"]:checked {
input[type=checkbox]:checked {
& + label { & + label {
&:before { &:before {
border-width: 10px; border-width: 10px;
} }
@ -762,26 +711,20 @@ input[type=radio]:checked + label:before{
color: #ffffff; color: #ffffff;
font-size: $fs16; font-size: $fs16;
} }
}
} }
} input[type="checkbox"][disabled] {
input[type=checkbox][disabled] {
& + label { & + label {
opacity: 0.65; opacity: 0.65;
&:before { &:before {
background-color: #eceff3; background-color: #eceff3;
} }
} }
} }
&.right { &.right {
label { label {
margin-right: 35px; margin-right: 35px;
padding-left: 0 !important; padding-left: 0 !important;
@ -790,11 +733,9 @@ input[type=radio]:checked + label:before{
right: -35px; right: -35px;
left: auto; left: auto;
} }
} }
input[type=checkbox]:checked { input[type="checkbox"]:checked {
& + label { & + label {
position: relative; position: relative;
@ -804,17 +745,12 @@ input[type=radio]:checked + label:before{
right: -27px; right: -27px;
left: auto; left: auto;
} }
}
}
}
} }
} input[type="checkbox"]:checked + label {
}
}
input[type=checkbox]:checked + label{
.input-checkbox.check-success &:before { .input-checkbox.check-success &:before {
border-color: $color-success; border-color: $color-success;
} }
@ -847,22 +783,21 @@ input[type=checkbox]:checked + label{
.input-checkbox.check-info &::after { .input-checkbox.check-info &::after {
color: $color-white; color: $color-white;
} }
} }
// Input slidebar // Input slidebar
input[type=range] { input[type="range"] {
background-color: transparent; background-color: transparent;
-webkit-appearance: none; -webkit-appearance: none;
margin: 10px 0 10px 3px; margin: 10px 0 10px 3px;
max-width: 70px; max-width: 70px;
width: 100%; width: 100%;
} }
input[type=range]:focus { input[type="range"]:focus {
outline: none; outline: none;
} }
input[type=range]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: 6px; height: 6px;
cursor: pointer; cursor: pointer;
@ -872,7 +807,7 @@ input[type=range]::-webkit-slider-runnable-track {
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
input[type=range]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000; border: 0px solid #000000;
height: 18px; height: 18px;
@ -883,10 +818,10 @@ input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -6px; margin-top: -6px;
} }
input[type=range]:focus::-webkit-slider-runnable-track { input[type="range"]:focus::-webkit-slider-runnable-track {
background: $color-gray-60; background: $color-gray-60;
} }
input[type=range]::-moz-range-track { input[type="range"]::-moz-range-track {
width: 100%; width: 100%;
height: 8px; height: 8px;
cursor: pointer; cursor: pointer;
@ -896,7 +831,7 @@ input[type=range]::-moz-range-track {
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
input[type=range]::-moz-range-thumb { input[type="range"]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000; border: 0px solid #000000;
height: 24px; height: 24px;
@ -905,7 +840,7 @@ input[type=range]::-moz-range-thumb {
background: $color-gray-20; background: $color-gray-20;
cursor: pointer; cursor: pointer;
} }
input[type=range]::-ms-track { input[type="range"]::-ms-track {
width: 100%; width: 100%;
height: 8px; height: 8px;
cursor: pointer; cursor: pointer;
@ -915,19 +850,19 @@ input[type=range]::-ms-track {
border-width: 39px 0; border-width: 39px 0;
color: transparent; color: transparent;
} }
input[type=range]::-ms-fill-lower { input[type="range"]::-ms-fill-lower {
background: $color-gray-60; background: $color-gray-60;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
} }
input[type=range]::-ms-fill-upper { input[type="range"]::-ms-fill-upper {
background: $color-gray-60; background: $color-gray-60;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
} }
input[type=range]::-ms-thumb { input[type="range"]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000; border: 0px solid #000000;
height: 24px; height: 24px;
@ -936,10 +871,10 @@ input[type=range]::-ms-thumb {
background: $color-gray-20; background: $color-gray-20;
cursor: pointer; cursor: pointer;
} }
input[type=range]:focus::-ms-fill-lower { input[type="range"]:focus::-ms-fill-lower {
background: $color-gray-60; background: $color-gray-60;
} }
input[type=range]:focus::-ms-fill-upper { input[type="range"]:focus::-ms-fill-upper {
background: $color-gray-60; background: $color-gray-60;
} }
@ -961,7 +896,6 @@ input[type=range]:focus::-ms-fill-upper {
background-color: darken($color-gray-20, 14%); background-color: darken($color-gray-20, 14%);
outline: 2px solid $color-primary; outline: 2px solid $color-primary;
} }
} }
// Tooltip // Tooltip
@ -984,7 +918,7 @@ input[type=range]:focus::-ms-fill-upper {
top: 0; top: 0;
white-space: nowrap; white-space: nowrap;
z-index: 20; z-index: 20;
@include animation(.3s,.6s,fadeIn); @include animation(0.3s, 0.6s, fadeIn);
} }
} }
@ -1086,7 +1020,7 @@ input[type=range]:focus::-ms-fill-upper {
} }
&.hide { &.hide {
@include animation(0, .6s, fadeOutUp); @include animation(0, 0.6s, fadeOutUp);
} }
.icon { .icon {
@ -1137,7 +1071,7 @@ input[type=range]:focus::-ms-fill-upper {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
opacity: .35; opacity: 0.35;
svg { svg {
fill: $color-black; fill: $color-black;
@ -1147,7 +1081,7 @@ input[type=range]:focus::-ms-fill-upper {
} }
&:hover { &:hover {
opacity: .8; opacity: 0.8;
} }
} }
@ -1186,7 +1120,8 @@ input[type=range]:focus::-ms-fill-upper {
} }
} }
&.floating, &.inline { &.floating,
&.inline {
min-height: 40px; min-height: 40px;
.wrapper { .wrapper {
@ -1282,7 +1217,7 @@ input[type=range]:focus::-ms-fill-upper {
background-color: $color-info; background-color: $color-info;
color: $color-info-darker; color: $color-info-darker;
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
padding: .8rem; padding: 0.8rem;
text-align: center; text-align: center;
p { p {
margin: 0; margin: 0;

1
frontend/resources/styles/main-default.scss
View file

@ -4,7 +4,6 @@
// //
// Copyright (c) UXBOX Labs SL // Copyright (c) UXBOX Labs SL
//################################################# //#################################################
// Import libraries // Import libraries
//################################################# //#################################################

7
frontend/resources/styles/main/layouts/login.scss
View file

@ -22,7 +22,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
background-color:#FEECFD; background-color: #feecfd;
background-image: url("/images/login-pink.svg"); background-image: url("/images/login-pink.svg");
background-position: center; background-position: center;
background-size: 96%; background-size: 96%;
@ -33,12 +33,12 @@
width: 280px; width: 280px;
font-size: $fs18; font-size: $fs18;
margin-top: 2vh; margin-top: 2vh;
color: #2C233E; color: #2c233e;
} }
.logo { .logo {
svg { svg {
fill: #2C233E; fill: #2c233e;
max-width: 11vw; max-width: 11vw;
height: 80px; height: 80px;
} }
@ -122,7 +122,6 @@
margin-top: $size-4; margin-top: $size-4;
margin-bottom: $size-4; margin-bottom: $size-4;
&.demo { &.demo {
justify-content: center; justify-content: center;
margin-top: $size-5; margin-top: $size-5;

3
frontend/resources/styles/main/layouts/not-found.scss
View file

@ -17,7 +17,6 @@
height: 55px; height: 55px;
width: 170px; width: 170px;
} }
} }
.not-found-content { .not-found-content {
@ -29,7 +28,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.container { .container {
max-width: 600px; max-width: 600px;
} }
@ -80,4 +78,3 @@
} }
} }
} }

3
frontend/resources/styles/main/layouts/viewer.scss
View file

@ -31,7 +31,6 @@
left: 0; left: 0;
top: 48px; top: 48px;
} }
} }
& .viewer-header:hover { & .viewer-header:hover {
@ -57,5 +56,3 @@
background-color: rgb(0, 0, 0, 0.2); background-color: rgb(0, 0, 0, 0.2);
} }
} }

2
frontend/resources/styles/main/partials/activity-bar.scss
View file

@ -65,7 +65,6 @@
font-weight: bold; font-weight: bold;
margin: 0 3px; margin: 0 3px;
} }
} }
.activity-time { .activity-time {
@ -75,5 +74,4 @@
} }
} }
} }
} }

27
frontend/resources/styles/main/partials/af-signup-questions.scss
View file

@ -12,9 +12,10 @@
padding: 3rem; padding: 3rem;
width: 100% !important; width: 100% !important;
h1, h3 { h1,
font-family: 'worksans', sans-serif !important; h3 {
margin-bottom: .8rem; font-family: "worksans", sans-serif !important;
margin-bottom: 0.8rem;
font-weight: 500 !important; font-weight: 500 !important;
} }
@ -26,8 +27,9 @@
font-weight: 500; font-weight: 500;
} }
p, label { p,
font-family: 'worksans', sans-serif !important; label {
font-family: "worksans", sans-serif !important;
font-size: $fs14; font-size: $fs14;
} }
@ -37,7 +39,7 @@
} }
button { button {
font-family: 'worksans', sans-serif !important; font-family: "worksans", sans-serif !important;
} }
.af-choice, .af-choice,
@ -51,7 +53,7 @@
width: 100%; width: 100%;
label { label {
font-family: 'worksans', sans-serif !important; font-family: "worksans", sans-serif !important;
font-size: $fs14; font-size: $fs14;
padding-left: 0; padding-left: 0;
} }
@ -76,7 +78,7 @@
.af-dropdown-text, .af-dropdown-text,
.text { .text {
font-family: 'worksans', sans-serif !important; font-family: "worksans", sans-serif !important;
} }
.af-step-next { .af-step-next {
@ -156,7 +158,7 @@
&:hover { &:hover {
background-color: transparent; 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 { &::before {
@ -177,7 +179,6 @@
.af-field-previous_design_tool .af-choice-option:nth-child(1) label { .af-field-previous_design_tool .af-choice-option:nth-child(1) label {
background-image: url("../images/form/figma.png"); background-image: url("../images/form/figma.png");
} }
.af-field-previous_design_tool .af-choice-option:nth-child(2) label { .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-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-use_of_penpot .af-choice-option:nth-child(5) input:checked + label {
&::before { &::before {
background-color: $color-primary; background-color: $color-primary;
} }

9
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -31,7 +31,6 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
} }
.color-cell.current { .color-cell.current {
@ -56,7 +55,7 @@ ul.palette-menu .color-bullet {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: .6rem; padding: 0.6rem;
svg { svg {
fill: $color-gray-10; fill: $color-gray-10;
@ -95,7 +94,8 @@ ul.palette-menu .color-bullet {
flex-direction: row; flex-direction: row;
overflow: hidden; 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; background-color: $color-white;
& > * { & > * {
@ -108,7 +108,7 @@ ul.palette-menu .color-bullet {
background: transparent; background: transparent;
&::before { &::before {
content: "?" content: "?";
} }
} }
@ -151,7 +151,6 @@ ul.palette-menu .color-bullet {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
} }
} }

21
frontend/resources/styles/main/partials/color-palette.scss
View file

@ -5,7 +5,7 @@
// Copyright (c) UXBOX Labs SL // Copyright (c) UXBOX Labs SL
.color-palette { .color-palette {
@include animation(0,.5s,fadeInUp); @include animation(0, 0.5s, fadeInUp);
align-items: center; align-items: center;
background-color: $color-gray-50; background-color: $color-gray-50;
border-top: 1px solid $color-gray-60; border-top: 1px solid $color-gray-60;
@ -23,7 +23,7 @@
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
height: 1rem; height: 1rem;
margin: 0 .5rem; margin: 0 0.5rem;
width: 1rem; width: 1rem;
} }
@ -37,14 +37,13 @@
} }
} }
.left-arrow { .left-arrow {
transform: rotate(180deg); transform: rotate(180deg);
padding-top: 10px; padding-top: 10px;
} }
&.fade-out-down { &.fade-out-down {
@include animation(0,.5s,fadeOutDown); @include animation(0, 0.5s, fadeOutDown);
} }
&.left-sidebar-open { &.left-sidebar-open {
@ -61,13 +60,13 @@
.color-palette-actions { .color-palette-actions {
align-self: stretch; align-self: stretch;
border: 1px solid #1F1F1F; border: 1px solid #1f1f1f;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
margin-right: .5rem; margin-right: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
.color-palette-buttons { .color-palette-buttons {
@ -82,7 +81,7 @@
& svg { & svg {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
fill: #AFB2BF; fill: #afb2bf;
} }
} }
@ -94,7 +93,7 @@
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
padding: .6rem; padding: 0.6rem;
svg { svg {
fill: $color-gray-10; fill: $color-gray-10;
height: 20px; height: 20px;
@ -132,7 +131,7 @@
position: relative; position: relative;
align-items: center; align-items: center;
display: flex; display: flex;
transition: all .6s ease; transition: all 0.6s ease;
width: 100%; width: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -232,7 +231,7 @@
position: relative; position: relative;
.input-text { .input-text {
font-size: $fs12; font-size: $fs12;
margin: 0 .5rem; margin: 0 0.5rem;
max-width: 100px; max-width: 100px;
} }
&::after { &::after {
@ -288,6 +287,4 @@ ul.palette-menu {
flex-direction: row; flex-direction: row;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
} }

57
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -76,7 +76,8 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
border: 1px solid $color-gray-10; 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 { .gradient-background {
@ -102,7 +103,8 @@
margin-left: -7px; margin-left: -7px;
box-shadow: 0 2px 2px rgb(0 0 0 / 15%); 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; background-color: $color-white;
&.active { &.active {
@ -142,7 +144,11 @@
border: 1px solid $color-gray-10; 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; align-self: center;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -158,8 +164,14 @@
&.hue { &.hue {
background: linear-gradient( background: linear-gradient(
var(--gradient-direction), var(--gradient-direction),
#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #f00 0%,
#00f 67%, #f0f 83%, #f00 100%); #ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
#f00 100%
);
} }
&.saturation { &.saturation {
@ -167,29 +179,36 @@
var(--gradient-direction), var(--gradient-direction),
var(--saturation-grad-from) 0%, var(--saturation-grad-from) 0%,
var(--saturation-grad-to) 100% var(--saturation-grad-to) 100%
) );
} }
&.opacity { &.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 { &::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 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 { &.value {
background: linear-gradient(var(--gradient-direction), #FFF 0%, #000 100%); background: linear-gradient(
var(--gradient-direction),
#fff 0%,
#000 100%
);
} }
.handler { .handler {
background-color: $color-white;; background-color: $color-white;
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px; box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
transform: translate(-6px, -2px); transform: translate(-6px, -2px);
left: 50%; left: 50%;
@ -218,7 +237,8 @@
border-radius: 6px; border-radius: 6px;
z-index: 1; z-index: 1;
border: 1px solid $color-white; 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); transform: translate(-6px, -6px);
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -245,7 +265,8 @@
display: grid; display: grid;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
grid-template-areas: "color hue" grid-template-areas:
"color hue"
"color opacity"; "color opacity";
grid-template-columns: 2.5rem 1fr; grid-template-columns: 2.5rem 1fr;
height: 3.5rem; height: 3.5rem;
@ -327,7 +348,6 @@
max-height: 5.5rem; max-height: 5.5rem;
} }
.selected-colors::after { .selected-colors::after {
content: ""; content: "";
flex: auto; flex: auto;
@ -367,7 +387,8 @@
border-radius: 6px; border-radius: 6px;
z-index: 1; z-index: 1;
border: 1px solid $color-white; 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); transform: translate(-6px, -6px);
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -431,7 +452,6 @@
} }
.inputs-area { .inputs-area {
.input-text { .input-text {
color: $color-gray-60; color: $color-gray-60;
font-size: $fs12; font-size: $fs12;
@ -439,7 +459,6 @@
padding: 5px; padding: 5px;
width: 100%; width: 100%;
} }
} }
.colorpicker-tabs { .colorpicker-tabs {
@ -473,7 +492,6 @@
:hover svg { :hover svg {
fill: $color-primary; fill: $color-primary;
} }
} }
} }
@ -535,4 +553,3 @@
height: 10px; height: 10px;
} }
} }

17
frontend/resources/styles/main/partials/comments.scss
View file

@ -8,7 +8,7 @@
pointer-events: auto; pointer-events: auto;
background-color: $color-gray-10; background-color: $color-gray-10;
color: $color-gray-60; color: $color-gray-60;
border: 1px solid #B1B2B5; border: 1px solid #b1b2b5;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 4px 4px rgba($color-black, 0.25); box-shadow: 0px 4px 4px rgba($color-black, 0.25);
@ -124,7 +124,6 @@
@include text-ellipsis; @include text-ellipsis;
width: 174px; width: 174px;
} }
.timeago { .timeago {
margin-top: -2px; margin-top: -2px;
@ -178,7 +177,6 @@
fill: $color-black; fill: $color-black;
} }
} }
} }
} }
@ -194,13 +192,12 @@
} }
} }
.comment-options-dropdown { .comment-options-dropdown {
top: 7px; top: 7px;
right: 7px; right: 7px;
width: 150px; width: 150px;
border: 1px solid #B1B2B5; border: 1px solid #b1b2b5;
} }
} }
@ -241,13 +238,10 @@
} }
} }
.comment-threads-section { .comment-threads-section {
pointer-events: auto; pointer-events: auto;
.thread-groups { .thread-groups {
hr { hr {
border: 0; border: 0;
height: 1px; height: 1px;
@ -332,7 +326,6 @@
} }
} }
.viewer-comments-container { .viewer-comments-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -389,7 +382,9 @@
&.open { &.open {
background-color: $color-black; background-color: $color-black;
svg { fill: $color-primary; } svg {
fill: $color-primary;
}
} }
} }
@ -419,7 +414,6 @@
align-items: center; align-items: center;
} }
svg { svg {
width: 15px; width: 15px;
height: 15px; height: 15px;
@ -465,4 +459,3 @@
width: 24px; width: 24px;
} }
} }

1
frontend/resources/styles/main/partials/context-menu.scss
View file

@ -100,4 +100,3 @@
font-weight: bold; font-weight: bold;
} }
} }

13
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -63,7 +63,6 @@
.placeholder-label { .placeholder-label {
font-size: $fs14; font-size: $fs14;
} }
} }
&.overlay { &.overlay {
@ -133,7 +132,6 @@
font-weight: 400; font-weight: 400;
} }
} }
} }
.item-badge { .item-badge {
@ -170,7 +168,6 @@
background-color: $color-white; background-color: $color-white;
border: 2px solid $color-primary; border: 2px solid $color-primary;
} }
} }
// PROJECTS, ELEMENTS & ICONS GRID // PROJECTS, ELEMENTS & ICONS GRID
@ -225,13 +222,9 @@
> svg { > svg {
fill: $color-primary-dark; fill: $color-primary-dark;
} }
} }
} }
} }
} }
.project-th-actions.force-display { .project-th-actions.force-display {
@ -247,11 +240,9 @@
&:hover { &:hover {
border-color: $color-primary; border-color: $color-primary;
} }
} }
.grid-item-image { .grid-item-image {
svg { svg {
max-height: 100px; max-height: 100px;
max-width: 100px; max-width: 100px;
@ -259,7 +250,6 @@
min-width: 40px; min-width: 40px;
width: 8vw; width: 8vw;
} }
} }
.color-swatch { .color-swatch {
@ -291,7 +281,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
// STYLES FOR LIBRARIES // STYLES FOR LIBRARIES
@ -355,7 +344,6 @@
} }
} }
svg { svg {
width: 36px; width: 36px;
height: 36px; height: 36px;
@ -373,4 +361,3 @@
margin-right: calc(100% - 148px); margin-right: calc(100% - 148px);
} }
} }

5
frontend/resources/styles/main/partials/dashboard-header.scss
View file

@ -58,7 +58,6 @@
&:hover { &:hover {
color: $color-black; color: $color-black;
} }
} }
&.active { &.active {
@ -115,7 +114,9 @@
} }
&.active { &.active {
svg { fill: $color-gray-50; } svg {
fill: $color-gray-50;
}
} }
} }
} }

9
frontend/resources/styles/main/partials/dashboard-settings.scss
View file

@ -5,7 +5,6 @@
// //
// Copyright (c) UXBOX Labs SL // Copyright (c) UXBOX Labs SL
.dashboard-sidebar { .dashboard-sidebar {
&.settings { &.settings {
.back-to-dashboard { .back-to-dashboard {
@ -34,7 +33,6 @@
} }
} }
.dashboard-settings { .dashboard-settings {
display: flex; display: flex;
width: 100%; width: 100%;
@ -88,7 +86,7 @@
z-index: 14; z-index: 14;
} }
input[type=file] { input[type="file"] {
width: 120px; width: 120px;
height: 120px; height: 120px;
position: absolute; position: absolute;
@ -99,7 +97,9 @@
} }
&:hover { &:hover {
.update-overlay {opacity: 0.8}; .update-overlay {
opacity: 0.8;
}
} }
} }
} }
@ -118,5 +118,4 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
} }

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

@ -278,7 +278,8 @@
border-color: $color-black; border-color: $color-black;
} }
.search, .clear-search { .search,
.clear-search {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -354,12 +355,11 @@
justify-content: center; justify-content: center;
} }
input[type=submit] { input[type="submit"] {
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
.profile-section { .profile-section {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@ -400,7 +400,7 @@
bottom: 45px; bottom: 45px;
min-width: 189px; min-width: 189px;
@include animation(0,.2s,fadeInUp); @include animation(0, 0.2s, fadeInUp);
li { li {
height: 40px; height: 40px;

9
frontend/resources/styles/main/partials/dashboard-team.scss
View file

@ -1,4 +1,3 @@
.dashboard-invite-modal { .dashboard-invite-modal {
top: 65px; top: 65px;
right: 13px; right: 13px;
@ -31,7 +30,7 @@
.action-buttons { .action-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
input[type=submit] { input[type="submit"] {
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
@ -98,11 +97,9 @@
} }
} }
} }
} }
.dashboard-team-settings { .dashboard-team-settings {
.team-settings { .team-settings {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -173,7 +170,9 @@
background: $color-primary-dark; background: $color-primary-dark;
z-index: 14; z-index: 14;
svg { fill: $color-white; } svg {
fill: $color-white;
}
} }
&:hover { &:hover {

5
frontend/resources/styles/main/partials/dashboard.scss
View file

@ -71,7 +71,9 @@
} }
&.active { &.active {
svg { fill: $color-gray-50; } svg {
fill: $color-gray-50;
}
} }
} }
} }
@ -133,7 +135,6 @@
} }
} }
.edit-wrapper { .edit-wrapper {
border: 1px solid $color-gray-10; border: 1px solid $color-gray-10;
border-radius: $br-small; border-radius: $br-small;

3
frontend/resources/styles/main/partials/debug-icons-preview.scss
View file

@ -7,7 +7,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.icon-item, .cursor-item { .icon-item,
.cursor-item {
padding: 10px; padding: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

5
frontend/resources/styles/main/partials/dropdown.scss
View file

@ -36,14 +36,15 @@
} }
} }
&.with-check { &.with-check {
> li { > li {
padding: 5px 10px; padding: 5px 10px;
} }
> li:not(.selected) { > li:not(.selected) {
svg { display: none; } svg {
display: none;
}
} }
svg { svg {

3
frontend/resources/styles/main/partials/exception-page.scss
View file

@ -20,7 +20,6 @@
height: 55px; height: 55px;
width: 170px; width: 170px;
} }
} }
.exception-content { .exception-content {
@ -32,7 +31,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.container { .container {
max-width: 600px; max-width: 600px;
} }
@ -83,4 +81,3 @@
} }
} }
} }

6
frontend/resources/styles/main/partials/forms.scss
View file

@ -51,13 +51,13 @@ textarea {
h1 { h1 {
font-size: $fs36; font-size: $fs36;
color: #2C233E; color: #2c233e;
margin-bottom: 20px; margin-bottom: 20px;
} }
.subtitle { .subtitle {
font-size: $fs24; font-size: $fs24;
color: #2C233E; color: #2c233e;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -261,7 +261,6 @@ textarea {
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
padding-left: 15px; padding-left: 15px;
} }
.input-container { .input-container {
@ -319,4 +318,3 @@ textarea {
} }
} }
} }

1
frontend/resources/styles/main/partials/handoff.scss
View file

@ -272,7 +272,6 @@
.typography-sample { .typography-sample {
font-size: $fs16; font-size: $fs16;
} }
} }
.download-button { .download-button {

6
frontend/resources/styles/main/partials/left-toolbar.scss
View file

@ -57,7 +57,6 @@ $width-left-toolbar: 48px;
svg { svg {
fill: $color-gray-50; fill: $color-gray-50;
} }
} }
&.selected { &.selected {
@ -66,15 +65,10 @@ $width-left-toolbar: 48px;
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
} }
&.panels { &.panels {
margin-top: auto; margin-top: auto;
} }
} }

4
frontend/resources/styles/main/partials/loader.scss
View file

@ -1,7 +1,7 @@
// full width BG // full width BG
.loader-content { .loader-content {
align-items: center; align-items: center;
background-color: rgba(255,255,255, .85); background-color: rgba(255, 255, 255, 0.85);
display: flex; display: flex;
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;
@ -38,5 +38,5 @@ svg#loader-pencil {
} }
#loader-line { #loader-line {
animation: linePencil .8s infinite linear; animation: linePencil 0.8s infinite linear;
} }

72
frontend/resources/styles/main/partials/modal.scss
View file

@ -1,4 +1,5 @@
.modal-wrapper {} .modal-wrapper {
}
.modal-overlay { .modal-overlay {
align-items: center; align-items: center;
@ -13,7 +14,7 @@
z-index: 1000; z-index: 1000;
&.transparent { &.transparent {
background-color: rgba($color-white, 0) background-color: rgba($color-white, 0);
} }
} }
@ -134,7 +135,6 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
} }
.btn-disabled { .btn-disabled {
@ -144,7 +144,7 @@
.change-email-modal { .change-email-modal {
h2 { h2 {
font-size: $fs18 font-size: $fs18;
} }
h3 { h3 {
@ -230,7 +230,8 @@
font-size: $fs12; font-size: $fs12;
} }
.detail, .explain { .detail,
.explain {
padding: 0 1rem; padding: 0 1rem;
} }
@ -256,7 +257,7 @@
padding: 0.3rem 1.25rem; padding: 0.3rem 1.25rem;
&[disabled] { &[disabled] {
border: 1px solid #E3E3E3; border: 1px solid #e3e3e3;
} }
&:hover { &:hover {
@ -352,7 +353,7 @@
width: 14px; width: 14px;
fill: $color-gray-20; fill: $color-gray-20;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-top: 1px padding-top: 1px;
} }
} }
@ -424,7 +425,8 @@
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 2rem; margin-left: 2rem;
.icon-chain, .icon-unchain { .icon-chain,
.icon-unchain {
width: 10px; width: 10px;
height: 10px; height: 10px;
margin-right: 2px; margin-right: 2px;
@ -481,7 +483,8 @@
font-weight: 700; font-weight: 700;
} }
h3, p { h3,
p {
font-size: $fs12; font-size: $fs12;
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
@ -716,7 +719,7 @@
//- ONBOARDING //- ONBOARDING
.onboarding { .onboarding {
background-color: $color-white; 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; display: flex;
min-height: 420px; min-height: 420px;
flex-direction: row; flex-direction: row;
@ -850,19 +853,18 @@
align-items: center; align-items: center;
h1 { h1 {
font-family: 'worksans', sans-serif; font-family: "worksans", sans-serif;
font-weight: 700; font-weight: 700;
font-size: 27px; font-size: 27px;
margin-bottom: $size-3; margin-bottom: $size-3;
text-align: center; text-align: center;
} }
p { p {
font-family: 'worksans', sans-serif; font-family: "worksans", sans-serif;
font-weight: 500; font-weight: 500;
font-size: $fs18; font-size: $fs18;
text-align: center; text-align: center;
} }
} }
.modal-columns { .modal-columns {
@ -895,7 +897,7 @@
.modal-left { .modal-left {
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: $br-medium; border-radius: $br-medium;
transition: all ease .3s; transition: all ease 0.3s;
&:hover { &:hover {
background-color: $color-primary; background-color: $color-primary;
} }
@ -991,7 +993,8 @@
background-color: $color-white; background-color: $color-white;
flex-grow: 1; flex-grow: 1;
p, h3 { p,
h3 {
color: $color-gray-60; color: $color-gray-60;
text-align: center; text-align: center;
} }
@ -1005,7 +1008,6 @@
font-size: $fs16; font-size: $fs16;
} }
.templates { .templates {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1057,12 +1059,10 @@
justify-content: flex-end; justify-content: flex-end;
margin-top: $size-2; margin-top: $size-2;
} }
} }
} }
} }
.onboarding-team { .onboarding-team {
display: flex; display: flex;
min-width: 620px; min-width: 620px;
@ -1104,8 +1104,10 @@
margin-right: 13px; margin-right: 13px;
} }
input { margin-bottom: unset; } input {
input[type=submit] { margin-bottom: unset;
}
input[type="submit"] {
} }
.btn-primary { .btn-primary {
@ -1147,19 +1149,17 @@
cursor: pointer; cursor: pointer;
} }
} }
} }
} }
.questions-form { .questions-form {
.modal-overlay { .modal-overlay {
z-index: 2001; z-index: 2001;
} }
.modal-container { .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-repeat: no-repeat;
background-position: 10% 50px, 90% 50px; background-position: 10% 50px, 90% 50px;
background-size: 65px; background-size: 65px;
@ -1170,13 +1170,13 @@
width: 100vw; width: 100vw;
.af-form { .af-form {
--primary-color: #00C38B; --primary-color: #00c38b;
--input-background-color: #ffffff; --input-background-color: #ffffff;
--label-font-size: $fs16; --label-font-size: $fs16;
--field-error-font-color: #E65244; --field-error-font-color: #e65244;
--message-success-font-color: #49D793; --message-success-font-color: #49d793;
--message-fail-font-color: #E65244; --message-fail-font-color: #e65244;
--invalid-field-border-color: #E65244; --invalid-field-border-color: #e65244;
--dropdown-background-color: #ffffff; --dropdown-background-color: #ffffff;
--primary-font-color: #000; --primary-font-color: #000;
--input-border-color: rgb(224, 230, 240); --input-border-color: rgb(224, 230, 240);
@ -1186,8 +1186,18 @@
--checkbox-border-radius: 3px; --checkbox-border-radius: 3px;
--dropdown-option-background-color: rgba(0, 195, 139, 1); --dropdown-option-background-color: rgba(0, 195, 139, 1);
--dropdown-option-active-background-color: rgba(0, 138, 98, 1); --dropdown-option-active-background-color: rgba(0, 138, 98, 1);
--invalid-field-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1); --invalid-field-background-color: rgba(
--message-fail-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1); 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); --message-success-background-color: rgba(171, 232, 197, 1);
} }
} }

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

@ -37,13 +37,11 @@
.btn-primary, .btn-primary,
.btn-warning { .btn-warning {
font-size: $fs12; font-size: $fs12;
margin-bottom: .5rem; margin-bottom: 0.5rem;
padding: 8px $size-2; padding: 8px $size-2;
width: 90%; width: 90%;
} }
} }
} }
.tree-view { .tree-view {
@ -69,11 +67,9 @@
&:hover, &:hover,
&.current { &.current {
span { span {
color: $color-primary; color: $color-primary;
} }
} }
.options { .options {
@ -92,11 +88,7 @@
&:hover { &:hover {
fill: $color-gray-40; fill: $color-gray-40;
} }
} }
} }
} }
} }

6
frontend/resources/styles/main/partials/share-link.scss
View file

@ -29,7 +29,6 @@
font-size: $fs14; font-size: $fs14;
margin-bottom: 16px; margin-bottom: 16px;
} }
.actions { .actions {
display: flex; display: flex;
@ -38,7 +37,6 @@
} }
} }
.modal-content { .modal-content {
padding: 26px; padding: 26px;
@ -60,7 +58,6 @@
} }
} }
.share-link-section { .share-link-section {
margin-top: 12px; margin-top: 12px;
label { label {
@ -93,7 +90,8 @@
padding-left: 20px; padding-left: 20px;
display: flex; display: flex;
> .input-checkbox, > .input-radio { > .input-checkbox,
> .input-radio {
display: flex; display: flex;
user-select: none; user-select: none;

14
frontend/resources/styles/main/partials/sidebar-assets.scss
View file

@ -217,7 +217,7 @@
& svg { & svg {
width: 0.7rem; width: 0.7rem;
height: 0.7rem; height: 0.7rem;
fill: #F0F0F0; fill: #f0f0f0;
} }
&:hover svg { &:hover svg {
@ -359,8 +359,7 @@
} }
.enum-item:hover, .enum-item:hover,
.enum-item.selected, .enum-item.selected {
{
color: $color-primary; color: $color-primary;
} }
} }
@ -405,7 +404,9 @@
border-color: $color-black; border-color: $color-black;
background-color: $color-gray-60; background-color: $color-gray-60;
.input-text, .input-select, .adv-typography-name { .input-text,
.input-select,
.adv-typography-name {
background-color: $color-gray-60; background-color: $color-gray-60;
} }
} }
@ -420,7 +421,8 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
& .sketch-picker, .chrome-picker { & .sketch-picker,
.chrome-picker {
box-shadow: none !important; box-shadow: none !important;
border: 1px solid $color-gray-10 !important; border: 1px solid $color-gray-10 !important;
border-radius: 0 !important; border-radius: 0 !important;
@ -444,7 +446,6 @@
&:hover { &:hover {
fill: $color-danger; fill: $color-danger;
} }
} }
} }
@ -461,7 +462,6 @@
font-weight: normal; font-weight: normal;
} }
.libraries-wrapper { .libraries-wrapper {
overflow: auto; overflow: auto;
display: flex; display: flex;

60
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -34,11 +34,9 @@
} }
&:hover { &:hover {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
&.selected { &.selected {
@ -47,15 +45,12 @@
svg { svg {
fill: $color-white; fill: $color-white;
} }
} }
&:last-child { &:last-child {
border: none; border: none;
} }
} }
} }
.element-set { .element-set {
@ -85,14 +80,12 @@
width: 100%; width: 100%;
.list-icon { .list-icon {
svg { svg {
fill: $color-gray-30; fill: $color-gray-30;
height: 15px; height: 15px;
margin-right: $size-1; margin-right: $size-1;
width: 15px; width: 15px;
} }
} }
span { span {
@ -111,7 +104,6 @@
margin-left: auto; margin-left: auto;
a { a {
svg { svg {
fill: $color-gray-60; fill: $color-gray-60;
height: 15px; height: 15px;
@ -121,59 +113,43 @@
&:hover { &:hover {
fill: $color-gray-20; fill: $color-gray-20;
} }
} }
} }
} }
&:hover { &:hover {
.list-icon { .list-icon {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
span { span {
color: $color-primary; color: $color-primary;
} }
} }
&.selected { &.selected {
.list-icon { .list-icon {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
span { span {
color: $color-primary; color: $color-primary;
font-weight: bold; font-weight: bold;
} }
} }
} }
&:hover { &:hover {
.list-actions { .list-actions {
display: flex; display: flex;
@include animation(0s,.3s,fadeIn); @include animation(0s, 0.3s, fadeIn);
} }
} }
} }
} }
.element-set-content { .element-set-content {
@ -272,7 +248,6 @@
&:hover { &:hover {
fill: $color-primary; fill: $color-primary;
} }
} }
&.selected { &.selected {
@ -325,7 +300,6 @@
&:hover { &:hover {
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
} }
} }
.custom-select-dropdown { .custom-select-dropdown {
@ -458,12 +432,11 @@
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
&.input-option { &.input-option {
height: 26px; height: 26px;
border-bottom: 1px solid #64666A; border-bottom: 1px solid #64666a;
width: 100%; width: 100%;
margin-left: 0.25rem; margin-left: 0.25rem;
@ -598,20 +571,15 @@
&:hover, &:hover,
&.current { &.current {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
} }
.element-color-picker { .element-color-picker {
@ -640,9 +608,7 @@
transition: none; transition: none;
top: 30%; top: 30%;
} }
} }
} }
.radius-options { .radius-options {
@ -751,7 +717,8 @@
fill: $color-gray-20; fill: $color-gray-20;
} }
&:hover svg, &.is-active svg { &:hover svg,
&.is-active svg {
fill: $color-primary; fill: $color-primary;
} }
} }
@ -797,7 +764,6 @@
&:hover { &:hover {
background: $color-gray-60; background: $color-gray-60;
.custom-select, .custom-select,
.editable-select, .editable-select,
input { input {
@ -809,7 +775,7 @@
min-width: 4.75rem; min-width: 4.75rem;
height: 2rem; height: 2rem;
border-color: transparent; border-color: transparent;
border-bottom: 1px solid #65666A; border-bottom: 1px solid #65666a;
max-height: 30px; max-height: 30px;
&:hover { &:hover {
@ -898,7 +864,6 @@
} }
} }
.element-set-options-group { .element-set-options-group {
display: flex; display: flex;
padding: 3px; padding: 3px;
@ -906,7 +871,7 @@
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background: #1F1F1F; background: #1f1f1f;
} }
&.selected { &.selected {
@ -1124,7 +1089,7 @@
color: $color-gray-30; color: $color-gray-30;
&::after { &::after {
content: ':'; content: ":";
margin-right: 0.25rem; margin-right: 0.25rem;
} }
} }
@ -1249,7 +1214,6 @@
} }
} }
} }
} }
input { input {
@ -1275,7 +1239,7 @@
svg { svg {
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: $color-gray-20 fill: $color-gray-20;
} }
&.active { &.active {
@ -1315,7 +1279,9 @@
background-color: $color-black; background-color: $color-black;
color: $color-primary; color: $color-primary;
.icon svg {fill: $color-primary;} .icon svg {
fill: $color-primary;
}
} }
&:hover { &:hover {
@ -1328,7 +1294,7 @@
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
// border: 1px solid red; // border: 1px solid red;
width: $size-5 width: $size-5;
} }
.label { .label {
@ -1371,7 +1337,7 @@
align-items: center; align-items: center;
&::after { &::after {
content: ' '; content: " ";
background-color: $color-gray-30; background-color: $color-gray-30;
} }

3
frontend/resources/styles/main/partials/sidebar-icons.scss
View file

@ -14,7 +14,6 @@
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
} }
} }
.figure-btn { .figure-btn {
@ -47,7 +46,5 @@
svg { svg {
fill: $color-white; fill: $color-white;
} }
} }
} }

3
frontend/resources/styles/main/partials/sidebar-interactions.scss
View file

@ -95,7 +95,7 @@
} }
} }
& input[type=radio]:checked { & input[type="radio"]:checked {
& + label { & + label {
&:before { &:before {
background-color: $color-primary; background-color: $color-primary;
@ -212,4 +212,3 @@
} }
} }
} }

8
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -42,7 +42,6 @@
.element-icon, .element-icon,
.element-actions { .element-actions {
svg { svg {
fill: $color-gray-60; fill: $color-gray-60;
} }
@ -110,7 +109,6 @@
} }
.element-list li.component { .element-list li.component {
.element-list-body { .element-list-body {
span.element-name { span.element-name {
color: $color-component; color: $color-component;
@ -254,7 +252,9 @@ span.element-name {
} }
&.inverse { &.inverse {
svg { transform: rotate(270deg); } svg {
transform: rotate(270deg);
}
} }
&:hover { &:hover {
@ -266,7 +266,7 @@ span.element-name {
.icon-layer { .icon-layer {
> svg { > svg {
background-color: rgba(255,255,255,.6); background-color: rgba(255, 255, 255, 0.6);
border-radius: $br-small; border-radius: $br-small;
flex-shrink: 0; flex-shrink: 0;
fill: $color-black !important; fill: $color-black !important;

16
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View file

@ -9,7 +9,6 @@
flex: none !important; flex: none !important;
.element-list { .element-list {
li { li {
align-items: center; align-items: center;
display: flex; display: flex;
@ -17,14 +16,12 @@
width: 100%; width: 100%;
.page-icon { .page-icon {
svg { svg {
fill: $color-gray-30; fill: $color-gray-30;
height: 13px; height: 13px;
margin-right: $size-1; margin-right: $size-1;
width: 13px; width: 13px;
} }
} }
span { span {
@ -42,23 +39,19 @@
margin-left: auto; margin-left: auto;
a { a {
svg { svg {
fill: $color-gray-60; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $size-1; margin-left: $size-1;
width: 15px; width: 15px;
} }
} }
} }
&:hover { &:hover {
background-color: $color-primary; background-color: $color-primary;
.page-icon { .page-icon {
svg { svg {
fill: $color-gray-60; fill: $color-gray-60;
} }
@ -66,35 +59,27 @@
span { span {
color: $color-gray-60; color: $color-gray-60;
} }
} }
.page-actions { .page-actions {
display: flex; display: flex;
} }
} }
&.selected { &.selected {
.page-icon { .page-icon {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
span { span {
color: $color-primary; color: $color-primary;
} }
} }
&:hover { &:hover {
.page-icon { .page-icon {
svg { svg {
fill: $color-gray-60; fill: $color-gray-60;
} }
@ -104,7 +89,6 @@
color: $color-gray-60; color: $color-gray-60;
} }
} }
} }
.element-list-body { .element-list-body {

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

@ -37,7 +37,5 @@
svg { svg {
fill: $color-white; fill: $color-white;
} }
} }
} }

21
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -35,35 +35,34 @@ $width-settings-bar: 16rem;
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
&[data-layout*='sitemap-pages'] { &[data-layout*="sitemap-pages"] {
grid-template-rows: auto; grid-template-rows: auto;
} }
&[data-layout*='layers'] { &[data-layout*="layers"] {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
} }
&[data-layout*='libraries'] { &[data-layout*="libraries"] {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
} }
&[data-layout*='layers'][data-layout*='sitemap-pages'] { &[data-layout*="layers"][data-layout*="sitemap-pages"] {
grid-template-rows: 11.5rem 1fr; grid-template-rows: 11.5rem 1fr;
} }
&[data-layout*='libraries'][data-layout*='sitemap-pages'] { &[data-layout*="libraries"][data-layout*="sitemap-pages"] {
grid-template-rows: 11.5rem 1fr; grid-template-rows: 11.5rem 1fr;
} }
&[data-layout*='layers'][data-layout*='libraries'] { &[data-layout*="layers"][data-layout*="libraries"] {
grid-template-rows: auto 30% 1fr; grid-template-rows: auto 30% 1fr;
} }
&[data-layout*='layers'][data-layout*='libraries'][data-layout*='sitemap-pages'] { &[data-layout*="layers"][data-layout*="libraries"][data-layout*="sitemap-pages"] {
grid-template-rows: 11.5rem 25% 1fr; grid-template-rows: 11.5rem 25% 1fr;
} }
flex-direction: column; flex-direction: column;
padding-top: 48px; padding-top: 48px;
height: 100%; height: 100%;
@ -151,13 +150,10 @@ $width-settings-bar: 16rem;
transform: rotate(45deg); transform: rotate(45deg);
&:hover { &:hover {
svg { svg {
fill: $color-danger; fill: $color-danger;
} }
} }
} }
} }
} }
@ -199,11 +195,8 @@ $width-settings-bar: 16rem;
padding-bottom: 1px; padding-bottom: 1px;
&.open { &.open {
ul { ul {
li { li {
.element-list-body { .element-list-body {
border-style: dashed; border-style: dashed;
} }

4
frontend/resources/styles/main/partials/tab-container.scss
View file

@ -1,4 +1,3 @@
.tab-container { .tab-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -39,6 +38,7 @@
overflow-y: auto; overflow-y: auto;
} }
.tab-element, .tab-element-content { .tab-element,
.tab-element-content {
height: 100%; height: 100%;
} }

4
frontend/resources/styles/main/partials/texts.scss
View file

@ -1,5 +1,6 @@
foreignObject { foreignObject {
.text-editor, .rich-text { .text-editor,
.rich-text {
color: $color-black; color: $color-black;
height: 100%; height: 100%;
white-space: pre-wrap; white-space: pre-wrap;
@ -59,4 +60,3 @@ foreignObject {
} }
} }
} }

8
frontend/resources/styles/main/partials/tool-bar.scss
View file

@ -33,25 +33,17 @@
} }
&:hover { &:hover {
svg { svg {
fill: $color-white; fill: $color-white;
} }
} }
&.current { &.current {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
} }
} }
} }
} }

11
frontend/resources/styles/main/partials/user-settings.scss
View file

@ -93,7 +93,6 @@
} }
} }
.settings-profile { .settings-profile {
.forms-container { .forms-container {
margin-top: 80px; margin-top: 80px;
@ -126,7 +125,7 @@
z-index: 14; z-index: 14;
} }
input[type=file] { input[type="file"] {
width: 120px; width: 120px;
height: 120px; height: 120px;
position: absolute; position: absolute;
@ -137,8 +136,12 @@
} }
&:hover { &:hover {
img {display: none;} img {
.update-overlay {opacity: 1}; display: none;
}
.update-overlay {
opacity: 1;
}
} }
} }
} }

3
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -115,7 +115,8 @@
} }
} }
.breadcrumb, .current-frame { .breadcrumb,
.current-frame {
display: flex; display: flex;
position: relative; position: relative;

22
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -35,17 +35,13 @@
fill: $color-gray-30; fill: $color-gray-30;
height: 30px; height: 30px;
width: 28px; width: 28px;
} }
&:hover { &:hover {
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
} }
} }
} }
@ -138,7 +134,7 @@
left: 40px; left: 40px;
width: 270px; width: 270px;
z-index: 12; z-index: 12;
@include animation(0,.2s,fadeInDown); @include animation(0, 0.2s, fadeInDown);
background-color: $color-white; background-color: $color-white;
border-radius: $br-small; border-radius: $br-small;
@ -208,13 +204,21 @@
display: flex; display: flex;
&.error { &.error {
.label { color: $color-danger; } .label {
.icon svg { fill: $color-danger; } color: $color-danger;
}
.icon svg {
fill: $color-danger;
}
} }
&.pending { &.pending {
.label { color: $color-warning; } .label {
.icon svg { fill: $color-warning; } color: $color-warning;
}
.icon svg {
fill: $color-warning;
}
} }
} }

7
frontend/resources/styles/main/partials/workspace.scss
View file

@ -56,7 +56,6 @@
height: 10px; height: 10px;
} }
} }
} }
} }
@ -181,10 +180,10 @@
.viewport-controls { .viewport-controls {
position: absolute; position: absolute;
} }
} }
.page-canvas, .page-layout { .page-canvas,
.page-layout {
overflow: visible; overflow: visible;
} }
@ -224,7 +223,6 @@
stroke: $color-gray-20; stroke: $color-gray-20;
} }
} }
} }
.workspace-frame-label { .workspace-frame-label {
@ -335,4 +333,3 @@
margin-right: 0; margin-right: 0;
} }
} }

1
frontend/resources/styles/main/partials/zoom-widget.scss
View file

@ -42,7 +42,6 @@
&:hover { &:hover {
background-color: $color-primary-lighter; background-color: $color-primary-lighter;
} }
} }
} }
} }