3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-05 16:55:54 +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

96
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;
} }
@ -191,7 +213,7 @@ h4 {
text-align: center; text-align: center;
} }
.hidden-input { .hidden-input {
display: none; display: none;
} }
@ -215,17 +237,17 @@ 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;
} }
[contenteditable] { [contenteditable] {
-webkit-user-select: text; -webkit-user-select: text;
user-select: text; user-select: text;
} }

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

File diff suppressed because it is too large Load diff

294
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,121 +46,217 @@ $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 {
// Colors // Colors
--color-white: #{$color-white}; --color-white: #{$color-white};
--color-black: #{$color-black}; --color-black: #{$color-black};
--color-canvas: #{$color-canvas}; --color-canvas: #{$color-canvas};
--color-dashboard: #{$color-dashboard}; --color-dashboard: #{$color-dashboard};
// Main color; // Main color;
--color-primary: #{$color-primary}; --color-primary: #{$color-primary};
// Secondary colors; // Secondary colors;
--color-success: #{$color-success}; --color-success: #{$color-success};
--color-complete: #{$color-complete}; --color-complete: #{$color-complete};
--color-warning: #{$color-warning}; --color-warning: #{$color-warning};
--color-danger: #{$color-danger}; --color-danger: #{$color-danger};
--color-info: #{$color-info}; --color-info: #{$color-info};
--color-ocean: #{$color-ocean}; --color-ocean: #{$color-ocean};
--color-component: #{$color-component}; --color-component: #{$color-component};
--color-component-highlight: #{$color-component-highlight}; --color-component-highlight: #{$color-component-highlight};
--color-pink: #{$color-pink}; --color-pink: #{$color-pink};
// Gray scale; // Gray scale;
--color-gray-10: #{$color-gray-10}; --color-gray-10: #{$color-gray-10};
--color-gray-20: #{$color-gray-20}; --color-gray-20: #{$color-gray-20};
--color-gray-30: #{$color-gray-30}; --color-gray-30: #{$color-gray-30};
--color-gray-40: #{$color-gray-40}; --color-gray-40: #{$color-gray-40};
--color-gray-50: #{$color-gray-50}; --color-gray-50: #{$color-gray-50};
--color-gray-60: #{$color-gray-60}; --color-gray-60: #{$color-gray-60};
// UI colors // UI colors
--color-distance: #{$color-distance}; --color-distance: #{$color-distance};
--color-select: #{$color-select}; --color-select: #{$color-select};
--color-snap: #{$color-snap}; --color-snap: #{$color-snap};
// Lighter colors // Lighter colors
--color-success-light : #{$color-success-light}; --color-success-light: #{$color-success-light};
--color-success-lighter : #{$color-success-lighter}; --color-success-lighter: #{$color-success-lighter};
--color-complete-light : #{$color-complete-light}; --color-complete-light: #{$color-complete-light};
--color-complete-lighter : #{$color-complete-lighter}; --color-complete-lighter: #{$color-complete-lighter};
--color-primary-light: #{$color-primary-light}; --color-primary-light: #{$color-primary-light};
--color-primary-lighter : #{$color-primary-lighter}; --color-primary-lighter: #{$color-primary-lighter};
--color-warning-light : #{$color-warning-light}; --color-warning-light: #{$color-warning-light};
--color-warning-lighter : #{$color-warning-lighter}; --color-warning-lighter: #{$color-warning-lighter};
--color-danger-light : #{$color-danger-light}; --color-danger-light: #{$color-danger-light};
--color-danger-lighter : #{$color-danger-lighter}; --color-danger-lighter: #{$color-danger-lighter};
--color-info-light : #{$color-info-light}; --color-info-light: #{$color-info-light};
--color-info-lighter : #{$color-info-lighter}; --color-info-lighter: #{$color-info-lighter};
// Darker colors // Darker colors
--color-success-dark : #{$color-success-dark}; --color-success-dark: #{$color-success-dark};
--color-success-darker : #{$color-success-darker}; --color-success-darker: #{$color-success-darker};
--color-complete-dark : #{$color-complete-dark}; --color-complete-dark: #{$color-complete-dark};
--color-complete-darker : #{$color-complete-darker}; --color-complete-darker: #{$color-complete-darker};
--color-primary-dark : #{$color-primary-dark}; --color-primary-dark: #{$color-primary-dark};
--color-primary-darker : #{$color-primary-darker}; --color-primary-darker: #{$color-primary-darker};
--color-warning-dark : #{$color-warning-dark}; --color-warning-dark: #{$color-warning-dark};
--color-warning-darker : #{$color-warning-darker}; --color-warning-darker: #{$color-warning-darker};
--color-danger-dark : #{$color-danger-dark}; --color-danger-dark: #{$color-danger-dark};
--color-danger-darker : #{$color-danger-darker}; --color-danger-darker: #{$color-danger-darker};
--color-info-dark : #{$color-info-dark}; --color-info-dark: #{$color-info-dark};
--color-info-darker : #{$color-info-darker}; --color-info-darker: #{$color-info-darker};
// bg transparent // bg transparent
--color-dark-bg : #{$color-dark-bg}; --color-dark-bg: #{$color-dark-bg};
--color-light-bg : #{$color-light-bg}; --color-light-bg: #{$color-light-bg};
} }

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

@ -13,7 +13,7 @@ $fs12: 0.75rem;
$fs13: 0.8125rem; $fs13: 0.8125rem;
$fs14: 0.875rem; $fs14: 0.875rem;
$fs15: 0.9375rem; $fs15: 0.9375rem;
$fs16: 1rem ; $fs16: 1rem;
$fs18: 1.125rem; $fs18: 1.125rem;
$fs19: 1.1875rem; $fs19: 1.1875rem;
$fs20: 1.25rem; $fs20: 1.25rem;
@ -40,33 +40,43 @@ $title-lh: 1.25;
$title-lh-sm: 1.15; $title-lh-sm: 1.15;
// Work Sans // Work Sans
@include font-face("worksans","WorkSans-Thin", "100"); @include font-face("worksans", "WorkSans-Thin", "100");
@include font-face("worksans","WorkSans-ThinItalic", "100", italic); @include font-face("worksans", "WorkSans-ThinItalic", "100", italic);
@include font-face("worksans","WorkSans-ExtraLight", "200"); @include font-face("worksans", "WorkSans-ExtraLight", "200");
@include font-face("worksans","WorkSans-ExtraLightitalic", "200", italic); @include font-face("worksans", "WorkSans-ExtraLightitalic", "200", italic);
@include font-face("worksans","WorkSans-Light", "300"); @include font-face("worksans", "WorkSans-Light", "300");
@include font-face("worksans","WorkSans-LightItalic", "300", italic); @include font-face("worksans", "WorkSans-LightItalic", "300", italic);
@include font-face("worksans","WorkSans-Regular", normal); @include font-face("worksans", "WorkSans-Regular", normal);
@include font-face("worksans","WorkSans-Italic", normal, italic); @include font-face("worksans", "WorkSans-Italic", normal, italic);
@include font-face("worksans","WorkSans-Medium", "500"); @include font-face("worksans", "WorkSans-Medium", "500");
@include font-face("worksans","WorkSans-MediumItalic", "500", italic); @include font-face("worksans", "WorkSans-MediumItalic", "500", italic);
@include font-face("worksans","WorkSans-SemiBold", "600"); @include font-face("worksans", "WorkSans-SemiBold", "600");
@include font-face("worksans","WorkSans-SemiBoldItalic", "600", italic); @include font-face("worksans", "WorkSans-SemiBoldItalic", "600", italic);
@include font-face("worksans","WorkSans-Bold", bold); @include font-face("worksans", "WorkSans-Bold", bold);
@include font-face("worksans","WorkSans-BoldItalic", bold, italic); @include font-face("worksans", "WorkSans-BoldItalic", bold, italic);
@include font-face("worksans","WorkSans-Black", "900"); @include font-face("worksans", "WorkSans-Black", "900");
@include font-face("worksans","WorkSans-BlackItalic","900", italic); @include font-face("worksans", "WorkSans-BlackItalic", "900", italic);
// 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(
@include font-face("sourcesanspro","sourcesanspro-light", "300"); "sourcesanspro",
@include font-face("sourcesanspro","sourcesanspro-lightitalic", "300", italic); "sourcesanspro-extralightitalic",
@include font-face("sourcesanspro","sourcesanspro-regular", normal); "200",
@include font-face("sourcesanspro","sourcesanspro-italic", normal, italic); italic
@include font-face("sourcesanspro","sourcesanspro-semibold", "600"); );
@include font-face("sourcesanspro","sourcesanspro-semibolditalic", "600", italic); @include font-face("sourcesanspro", "sourcesanspro-light", "300");
@include font-face("sourcesanspro","sourcesanspro-bold", bold); @include font-face("sourcesanspro", "sourcesanspro-lightitalic", "300", italic);
@include font-face("sourcesanspro","sourcesanspro-bolditalic", bold, italic); @include font-face("sourcesanspro", "sourcesanspro-regular", normal);
@include font-face("sourcesanspro","sourcesanspro-black", "900"); @include font-face("sourcesanspro", "sourcesanspro-italic", normal, italic);
@include font-face("sourcesanspro","sourcesanspro-blackitalic", "900", italic); @include font-face("sourcesanspro", "sourcesanspro-semibold", "600");
@include font-face(
"sourcesanspro",
"sourcesanspro-semibolditalic",
"600",
italic
);
@include font-face("sourcesanspro", "sourcesanspro-bold", bold);
@include font-face("sourcesanspro", "sourcesanspro-bolditalic", bold, italic);
@include font-face("sourcesanspro", "sourcesanspro-black", "900");
@include font-face("sourcesanspro", "sourcesanspro-blackitalic", "900", italic);

16
frontend/resources/styles/common/dependencies/helpers.scss
View file

@ -21,11 +21,11 @@ $br-huge: 12px;
// Alignments // Alignments
.text-left { .text-left {
text-align: left; text-align: left;
} }
.text-right { .text-right {
text-align: right; text-align: right;
} }
.row-flex { .row-flex {
@ -43,12 +43,12 @@ $br-huge: 12px;
} }
.row-grid-2 { .row-grid-2 {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
} }
.column-half { .column-half {
@ -57,13 +57,13 @@ $br-huge: 12px;
// Display // Display
.hidden { .hidden {
display: none; display: none;
} }
.hide { .hide {
opacity: 0; opacity: 0;
} }
.display { .display {
opacity: 1 !important; opacity: 1 !important;
} }

112
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 {
@media #{$bp-tablet} {
@content;
}
} @else if $point == desktop {
@media #{$bp-mobile} {
@content;
}
} }
@else if $point == tablet {
@media #{$bp-tablet} { @content; }
}
@else if $point == desktop {
@media #{$bp-mobile} { @content; }
}
} }
// Advanced positioning // Advanced positioning
// ---------------- // ----------------
@mixin position($type, @mixin position(
$top: $position-default, $type,
$right: $position-default, $top: $position-default,
$bottom: $position-default, $right: $position-default,
$left: $position-default) { $bottom: $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,45 +46,59 @@
#{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
@mixin centerer { @mixin centerer {
@include absolute(50%,null,null,50%); @include absolute(50%, null, null, 50%);
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
@mixin placeholder { @mixin placeholder {
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
@content; @content;
} }
&:-moz-placeholder { /* Firefox 18- */ &:-moz-placeholder {
@content; /* Firefox 18- */
@content;
} }
&::-moz-placeholder { /* Firefox 19+ */ &::-moz-placeholder {
@content; /* Firefox 19+ */
@content;
} }
&:-ms-input-placeholder { &:-ms-input-placeholder {
@content; @content;
} }
} }
@ -89,9 +106,9 @@
/// @group Mixins /// @group Mixins
@mixin hide-text { @mixin hide-text {
font: 0/0 a; font: 0/0 a;
color: transparent; color: transparent;
text-shadow: none; text-shadow: none;
} }
/// Shortcut mixin to add new font-face compatible with all browser. To work you need to add the follow formats of font:".eot", ".woff", ".ttf" and "svg". /// Shortcut mixin to add new font-face compatible with all browser. To work you need to add the follow formats of font:".eot", ".woff", ".ttf" and "svg".
@ -101,15 +118,23 @@
/// @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(
$filepath: "/fonts/" + $file; $style-name,
@font-face { $file,
font-family: "#{$style-name}"; $weight: unquote("normal"),
src: url($filepath + ".eot"); $style: unquote("normal")
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); $filepath: "/fonts/" + $file;
font-style: unquote($style); @font-face {
} font-family: "#{$style-name}";
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");
font-weight: unquote($weight);
font-style: unquote($style);
}
} }
@mixin tooltipShow { @mixin tooltipShow {
@ -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;
} }
} }

33
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,
@ -95,14 +94,14 @@ u,
ul, ul,
var, var,
video { video {
border: 0; border: 0;
font: inherit; font: inherit;
font-size: 100%; font-size: 100%;
line-height: $base-lh; line-height: $base-lh;
margin: 0; margin: 0;
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
vertical-align: baseline; vertical-align: baseline;
} }
article, article,
@ -116,34 +115,34 @@ hgroup,
menu, menu,
nav, nav,
section { section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
ol, ol,
ul { ul {
list-style: none; list-style: none;
} }
blockquote, blockquote,
q { q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:before,
blockquote:after, blockquote:after,
q:before, q:before,
q:after { q:after {
content: ''; content: "";
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
select { select {
-webkit-appearance:none -webkit-appearance: none;
} }

2
frontend/resources/styles/common/dependencies/z-index.scss
View file

@ -5,7 +5,7 @@
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> // Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$autocomplete:30000; $autocomplete: 30000;
$index-lightbox-shadow: 60000; $index-lightbox-shadow: 60000;
$index-lightbox: 60001; $index-lightbox: 60001;
$index-lightbox-close-x: 200; $index-lightbox-close-x: 200;

223
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
@ -310,7 +301,7 @@ ul.slider-dots {
margin-right: 0; margin-right: 0;
} }
.tag { .tag {
background-color: $color-gray-20; background-color: $color-gray-20;
border-radius: 3px; border-radius: 3px;
color: $color-white; color: $color-white;
@ -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
@ -404,8 +388,8 @@ ul.slider-dots {
} }
.after { .after {
width: auto; width: auto;
right: 6px; right: 6px;
} }
&.mini { &.mini {
@ -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,
@ -594,15 +567,15 @@ input.element-name {
margin-top: 10px; margin-top: 10px;
padding-left: 0px; padding-left: 0px;
label{ label {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 15px; margin-right: 15px;
font-size: $fs12; font-size: $fs12;
&:before{ &:before {
content:""; content: "";
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
@ -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,76 +601,61 @@ 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;
} }
.input-radio.radio-primary &{ .input-radio.radio-primary & {
box-shadow: inset 0 0 0 5px $color-primary; box-shadow: inset 0 0 0 5px $color-primary;
} }
.input-radio.radio-info &{ .input-radio.radio-info & {
box-shadow: inset 0 0 0 5px $color-info; box-shadow: inset 0 0 0 5px $color-info;
} }
.input-radio.radio-warning &{ .input-radio.radio-warning & {
box-shadow: inset 0 0 0 5px $color-warning; box-shadow: inset 0 0 0 5px $color-warning;
} }
.input-radio.radio-danger &{ .input-radio.radio-danger & {
box-shadow: inset 0 0 0 5px $color-danger; box-shadow: inset 0 0 0 5px $color-danger;
} }
.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,98 +697,81 @@ 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;
} }
&::after { &::after {
content:"✓"; content: "✓";
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;
&:before { &:before {
right:-35px; right: -35px;
left:auto; left: auto;
} }
} }
input[type=checkbox]:checked { input[type="checkbox"]:checked {
& + label { & + label {
position: relative; position: relative;
&::after { &::after {
content:"✓"; content: "✓";
position: absolute; position: absolute;
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;
} }
.input-checkbox.check-primary &:before{ .input-checkbox.check-primary &:before {
border-color: $color-primary; border-color: $color-primary;
} }
.input-checkbox.check-complete &:before{ .input-checkbox.check-complete &:before {
border-color: $color-complete; border-color: $color-complete;
} }
.input-checkbox.check-warning &:before{ .input-checkbox.check-warning &:before {
border-color: $color-warning; border-color: $color-warning;
} }
.input-checkbox.check-danger &:before{ .input-checkbox.check-danger &:before {
border-color: $color-danger; border-color: $color-danger;
} }
.input-checkbox.check-info &:before{ .input-checkbox.check-info &:before {
border-color: $color-info; border-color: $color-info;
} }
@ -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,32 +871,31 @@ 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;
} }
// Scroll bar (chrome) // Scroll bar (chrome)
::-webkit-scrollbar { ::-webkit-scrollbar {
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
height: 8px; height: 8px;
width: 8px; width: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $color-gray-20; background-color: $color-gray-20;
&:hover {
background-color: darken($color-gray-20, 14%);
outline: 2px solid $color-primary;
}
&:hover {
background-color: darken($color-gray-20, 14%);
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);
} }
} }
@ -1025,7 +959,7 @@ input[type=range]:focus::-ms-fill-upper {
} }
} }
&.tooltip-right { &.tooltip-right {
&:hover { &:hover {
&::after { &::after {
top: 15%; top: 15%;
@ -1034,7 +968,7 @@ input[type=range]:focus::-ms-fill-upper {
} }
} }
&.tooltip-left { &.tooltip-left {
&:hover { &:hover {
&::after { &::after {
left: unset; left: unset;
@ -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,13 +1081,13 @@ input[type=range]:focus::-ms-fill-upper {
} }
&:hover { &:hover {
opacity: .8; opacity: 0.8;
} }
} }
&.fixed { &.fixed {
border-radius: $br-small; border-radius: $br-small;
box-shadow: 0px 4px 4px rgba(0,0,0,0.2); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
height: 48px; height: 48px;
max-width: 1000px; max-width: 1000px;
min-width: 500px; min-width: 500px;
@ -1186,7 +1120,8 @@ input[type=range]:focus::-ms-fill-upper {
} }
} }
&.floating, &.inline { &.floating,
&.inline {
min-height: 40px; min-height: 40px;
.wrapper { .wrapper {
@ -1212,25 +1147,25 @@ input[type=range]:focus::-ms-fill-upper {
&.error { &.error {
.content { .content {
background-color: lighten($color-danger,30%); background-color: lighten($color-danger, 30%);
} }
} }
&.success { &.success {
.content { .content {
background-color: lighten($color-success,30%); background-color: lighten($color-success, 30%);
} }
} }
&.warning { &.warning {
.content { .content {
background-color: lighten($color-warning,30%); background-color: lighten($color-warning, 30%);
} }
} }
&.info { &.info {
.content { .content {
background-color: lighten($color-info,30%); background-color: lighten($color-info, 30%);
} }
} }
} }
@ -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 @@
} }
} }
} }
} }

37
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 {
@ -109,13 +111,13 @@
border-color: #c5c6c9 !important; border-color: #c5c6c9 !important;
} }
.af-choice-option input:checked+label:before, .af-choice-option input:checked + label:before,
.af-legal input:checked+label:before { .af-legal input:checked + label:before {
background-color: $color-primary; background-color: $color-primary;
} }
.af-field-use_of_penpot .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 { .af-field-previous_design_tool .af-choice-option input:checked + label {
&::before { &::before {
background-color: transparent; background-color: transparent;
border: 2px solid $color-primary !important; border: 2px solid $color-primary !important;
@ -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-field-use_of_penpot .af-choice-option:nth-child(5) input:checked+label { .af-choice-option:nth-child(7)
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;
} }
} }
} }
} }

139
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;
@ -18,12 +18,12 @@
& .right-arrow, & .right-arrow,
& .left-arrow { & .left-arrow {
cursor: pointer; cursor: pointer;
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,53 +37,52 @@
} }
} }
.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 {
left: 303px; left: 303px;
width: calc(100% - 303px); width: calc(100% - 303px);
} }
& .context-menu-items { & .context-menu-items {
bottom: 1.5rem; bottom: 1.5rem;
top: initial; top: initial;
min-width: 10rem; min-width: 10rem;
} }
} }
.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 {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
} }
.color-palette-actions-button { .color-palette-actions-button {
cursor: pointer; cursor: pointer;
& svg { & svg {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
fill: #AFB2BF; fill: #afb2bf;
} }
} }
.btn-palette { .btn-palette {
@ -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;
@ -124,7 +123,7 @@
padding: 0.25rem; padding: 0.25rem;
&.size-small { &.size-small {
height: 3.5rem; height: 3.5rem;
} }
} }
@ -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;
} }
@ -146,11 +145,11 @@
position: relative; position: relative;
&.cell-big { &.cell-big {
flex-basis: 66px; flex-basis: 66px;
} }
&.cell-small { &.cell-small {
flex-basis: 52px; flex-basis: 52px;
} }
.color-text { .color-text {
@ -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 {
@ -251,43 +250,41 @@
} }
ul.palette-menu { ul.palette-menu {
left: 8px; left: 8px;
top: auto; top: auto;
bottom: 4.5rem; bottom: 4.5rem;
color: $color-black; color: $color-black;
li { li {
position: relative; position: relative;
padding: 5px 1.5rem; padding: 5px 1.5rem;
} }
hr { hr {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
svg { svg {
width: 9px; width: 9px;
height: 9px; height: 9px;
position: absolute; position: absolute;
left: 0.5rem; left: 0.5rem;
top: 10px; top: 10px;
} }
hr { hr {
border-color: $color-gray-20; border-color: $color-gray-20;
} }
.palette-library { .palette-library {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.color-sample {
display: flex;
flex-direction: row;
margin-top: 0.5rem;
}
.color-sample {
display: flex;
flex-direction: row;
margin-top: 0.5rem;
}
} }

69
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;
@ -157,9 +163,15 @@
&.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%;
@ -229,7 +249,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 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 { &::after {
@ -237,7 +257,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 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; display: grid;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
grid-template-areas: "color hue" grid-template-areas:
"color opacity"; "color hue"
"color opacity";
grid-template-columns: 2.5rem 1fr; grid-template-columns: 2.5rem 1fr;
height: 3.5rem; height: 3.5rem;
grid-row-gap: 0.5rem; grid-row-gap: 0.5rem;
@ -296,7 +317,7 @@
padding-top: 0.5rem; padding-top: 0.5rem;
margin-top: 0.25rem; margin-top: 0.25rem;
width: 200px; width: 200px;
select { select {
background-image: url(/images/icons/arrow-down.svg); background-image: url(/images/icons/arrow-down.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -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;
} }
} }
} }
@ -517,7 +535,7 @@
} }
} }
::placeholder{ ::placeholder {
color: $color-gray-10; color: $color-gray-10;
} }
@ -535,4 +553,3 @@
height: 10px; height: 10px;
} }
} }

23
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%;
@ -345,8 +338,8 @@
.workspace-comments-container { .workspace-comments-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
grid-column: 1/span 2; grid-column: 1 / span 2;
grid-row: 1/span 2; grid-row: 1 / span 2;
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
@ -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;
@ -439,7 +433,7 @@
.thread-group .section-title { .thread-group .section-title {
color: $color-black; color: $color-black;
} }
.comment { .comment {
.author .name .fullname { .author .name .fullname {
color: $color-gray-40; color: $color-gray-40;
@ -465,4 +459,3 @@
width: 24px; width: 24px;
} }
} }

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

@ -5,99 +5,98 @@
// Copyright (c) UXBOX Labs SL // Copyright (c) UXBOX Labs SL
.context-menu { .context-menu {
position: relative; position: relative;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
z-index: 100; z-index: 100;
} }
.context-menu.is-open { .context-menu.is-open {
position: relative; position: relative;
display: block; display: block;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.context-menu.fixed { .context-menu.fixed {
position: fixed; position: fixed;
} }
.context-menu-items { .context-menu-items {
background: $color-white; background: $color-white;
border-radius: $br-small; border-radius: $br-small;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
left: -$size-4; left: -$size-4;
max-height: 30rem; max-height: 30rem;
min-width: 7rem; min-width: 7rem;
overflow: auto; overflow: auto;
position: absolute; position: absolute;
top: $size-3; top: $size-3;
& .separator { & .separator {
border-top: 1px solid $color-gray-10; border-top: 1px solid $color-gray-10;
padding: 0px; padding: 0px;
margin: 2px; margin: 2px;
} }
&.min-width { &.min-width {
min-width: 13rem; min-width: 13rem;
} }
} }
.context-menu-action { .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; color: $color-black;
display: block; background-color: $color-primary-lighter;
font-size: $fs14; }
padding: $size-2 $size-4;
text-align: left;
white-space: nowrap;
&:hover { &.submenu {
color: $color-black; display: flex;
background-color: $color-primary-lighter; align-items: center;
justify-content: space-between;
& span {
margin-left: 0.5rem;
} }
&.submenu { & svg {
display: flex; height: 10px;
align-items: center; width: 10px;
justify-content: space-between;
& span {
margin-left: 0.5rem;
}
& svg {
height: 10px;
width: 10px;
}
} }
}
&.submenu-back { &.submenu-back {
color: $color-black; color: $color-black;
display: flex; display: flex;
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
& svg { & svg {
height: 10px; height: 10px;
width: 10px; width: 10px;
transform: rotate(180deg); transform: rotate(180deg);
margin-right: $size-2; margin-right: $size-2;
}
} }
}
} }
.context-menu.is-selectable { .context-menu.is-selectable {
& .context-menu-action { & .context-menu-action {
padding-left: 1.5rem; padding-left: 1.5rem;
} }
& .context-menu-item.is-selected .context-menu-action { & .context-menu-item.is-selected .context-menu-action {
background-image: url(/images/icons/tick.svg); background-image: url(/images/icons/tick.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 5% 48%; background-position: 5% 48%;
background-size: 10px; background-size: 10px;
font-weight: bold; font-weight: bold;
} }
} }

17
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 {
@ -90,8 +89,8 @@
} }
.grid-item-icon { .grid-item-icon {
width:90px; width: 90px;
height:90px; height: 90px;
} }
.item-info { .item-info {
@ -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;

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

@ -1,13 +1,14 @@
.debug-preview { .debug-preview {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: scroll; overflow: scroll;
} }
.debug-icons-preview { .debug-icons-preview {
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;
@ -22,6 +23,6 @@
} }
} }
.cursor-item { .cursor-item {
height: auto; height: auto;
} }
} }

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 {

40
frontend/resources/styles/main/partials/editable-label.scss
View file

@ -1,30 +1,30 @@
.editable-label { .editable-label {
display: flex; display: flex;
&.is-hidden { &.is-hidden {
display: none; display: none;
} }
} }
.editable-label-input { .editable-label-input {
border: 0; border: 0;
height: 30px; height: 30px;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
width: 100%; width: 100%;
background-color: $color-white; background-color: $color-white;
} }
.editable-label-close { .editable-label-close {
background-color: $color-white; background-color: $color-white;
cursor: pointer; cursor: pointer;
padding: 3px 5px; padding: 3px 5px;
& svg { & svg {
fill: $color-gray-30; fill: $color-gray-30;
height: 15px; height: 15px;
transform: rotate(45deg) translateY(7px); transform: rotate(45deg) translateY(7px);
width: 15px; width: 15px;
margin: 0; margin: 0;
} }
} }

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 {
} }
} }
} }

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

@ -59,7 +59,7 @@
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
} }
& :last-child{ & :last-child {
border-bottom: none; border-bottom: none;
} }
@ -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;
} }

80
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);
@ -1184,15 +1184,25 @@
--button-border-radius: 3px; --button-border-radius: 3px;
--message-border-radius: 3px; --message-border-radius: 3px;
--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,
--message-success-background-color: rgba(171,232,197,1); 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 { .modal-overlay {
background-color: rgba(0,0,0,0.9); background-color: rgba(0, 0, 0, 0.9);
} }
} }

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

@ -16,7 +16,7 @@
z-index: 9; z-index: 9;
&.toggle { &.toggle {
left:-201px; left: -201px;
} }
.project-bar-inside { .project-bar-inside {
@ -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;

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

@ -217,11 +217,11 @@
& svg { & svg {
width: 0.7rem; width: 0.7rem;
height: 0.7rem; height: 0.7rem;
fill: #F0F0F0; fill: #f0f0f0;
} }
&:hover svg { &:hover svg {
fill: $color-primary; fill: $color-primary;
} }
} }
@ -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;
} }
} }
@ -413,58 +414,57 @@
} }
.modal-create-color { .modal-create-color {
position: relative; position: relative;
background-color: $color-white; background-color: $color-white;
padding: 4rem; padding: 4rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
& .sketch-picker, .chrome-picker { & .sketch-picker,
box-shadow: none !important; .chrome-picker {
border: 1px solid $color-gray-10 !important; box-shadow: none !important;
border-radius: 0 !important; border: 1px solid $color-gray-10 !important;
border-radius: 0 !important;
& input { & input {
background-color: $color-white; background-color: $color-white;
}
} }
}
& .close { & .close {
position: absolute; position: absolute;
right: 1rem; right: 1rem;
transform: rotate(45deg); transform: rotate(45deg);
top: 1rem; top: 1rem;
svg { svg {
fill: $color-black; fill: $color-black;
height: 20px; height: 20px;
width: 20px; width: 20px;
&:hover { &:hover {
fill: $color-danger; fill: $color-danger;
} }
}
} }
}
& .btn-primary { & .btn-primary {
width: 10rem; width: 10rem;
padding: 0.5rem; padding: 0.5rem;
margin-top: 1rem; margin-top: 1rem;
} }
} }
.modal-create-color-title { .modal-create-color-title {
color: $color-black; color: $color-black;
font-size: 24px; font-size: 24px;
font-weight: normal; font-weight: normal;
} }
.libraries-wrapper { .libraries-wrapper {
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} }

282
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 {
@ -426,8 +400,8 @@
} }
input.input-text { input.input-text {
border: none; border: none;
background: none; background: none;
} }
.input-select { .input-select {
@ -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;
@ -488,7 +461,7 @@
} }
} }
.element-set-content .grid-option-main { .element-set-content .grid-option-main {
.editable-select { .editable-select {
height: 2rem; height: 2rem;
} }
@ -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 {
@ -978,34 +943,34 @@
} }
.shadow-options .color-row-wrap { .shadow-options .color-row-wrap {
margin-left: 6px; margin-left: 6px;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.element-set-actions-button { .element-set-actions-button {
display: flex; display: flex;
min-width: 30px; min-width: 30px;
min-height: 30px; min-height: 30px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
svg { svg {
width: 12px; width: 12px;
height: 12px; height: 12px;
fill: $color-gray-20; fill: $color-gray-20;
stroke: $color-gray-20; stroke: $color-gray-20;
} }
&:hover svg, &:hover svg,
&.active svg { &.active svg {
fill: $color-primary; fill: $color-primary;
stroke: $color-primary; stroke: $color-primary;
} }
&.actions-inside { &.actions-inside {
position: absolute; position: absolute;
right: 0; right: 0;
} }
} }
.element-set-label { .element-set-label {
@ -1015,8 +980,8 @@
} }
.element-set-actions { .element-set-actions {
display: flex; display: flex;
visibility: hidden; visibility: hidden;
} }
.row-flex-removable:hover .element-set-actions, .row-flex-removable:hover .element-set-actions,
@ -1029,44 +994,44 @@
} }
.typography-entry { .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; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex: 1;
height: 100%;
.typography-selection-wrapper { &.is-selectable {
display: flex; cursor: pointer;
flex-direction: row;
align-items: center;
flex: 1;
height: 100%;
&.is-selectable {
cursor: pointer;
}
} }
}
.typography-sample { .typography-sample {
font-size: 17px; font-size: 17px;
color: $color-white; color: $color-white;
margin: 0 0.5rem; margin: 0 0.5rem;
font-family: sourcesanspro; font-family: sourcesanspro;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
.typography-name { .typography-name {
flex-grow: 1; flex-grow: 1;
font-size: 11px; font-size: 11px;
margin-top: 4px; margin-top: 4px;
white-space: nowrap; white-space: nowrap;
} }
.element-set-actions-button svg { .element-set-actions-button svg {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
} }
.spacing-options { .spacing-options {
@ -1075,75 +1040,75 @@
} }
.asset-section { .asset-section {
.typography-entry { .typography-entry {
margin: 0.25rem 0; margin: 0.25rem 0;
} }
.element-set-content .font-option, .element-set-content .font-option,
.element-set-content .size-option { .element-set-content .size-option {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
.element-set-content .variant-option { .element-set-content .variant-option {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
} }
.row-flex input.adv-typography-name { .row-flex input.adv-typography-name {
font-size: 14px; font-size: 14px;
color: $color-gray-10; color: $color-gray-10;
width: 100%; width: 100%;
max-width: none; max-width: none;
margin: 0; margin: 0;
background-color: #303236; background-color: #303236;
border-top: none; border-top: none;
border-left: none; border-left: none;
border-right: none; border-right: none;
} }
.size-option .custom-select-dropdown { .size-option .custom-select-dropdown {
cursor: pointer; cursor: pointer;
max-height: 16rem; max-height: 16rem;
min-width: 6rem; min-width: 6rem;
left: initial; left: initial;
top: 0; top: 0;
} }
.typography-read-only-data { .typography-read-only-data {
font-size: 12px; font-size: 12px;
color: $color-white; color: $color-white;
.typography-name { .typography-name {
font-size: 14px; font-size: 14px;
}
.row-flex {
padding: 0.5rem 0;
}
.label {
color: $color-gray-30;
&::after {
content: ":";
margin-right: 0.25rem;
} }
}
.row-flex { .go-to-lib-button {
padding: 0.5rem 0; transition: border 0.3s, color 0.3s;
} text-align: center;
background: $color-gray-50;
.label { padding: 0.5rem;
color: $color-gray-30; border-radius: 2px;
cursor: pointer;
&::after { font-size: 14px;
content: ':'; margin-top: 1rem;
margin-right: 0.25rem;
} &: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 { .multiple-typography {
@ -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 @@
} }
} }
} }

16
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;
@ -228,9 +226,9 @@ span.element-name {
&.selected { &.selected {
display: flex; display: flex;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
} }
} }
} }
} }
@ -254,7 +252,9 @@ span.element-name {
} }
&.inverse { &.inverse {
svg { transform: rotate(270deg); } svg {
transform: rotate(270deg);
}
} }
&:hover { &:hover {
@ -265,8 +265,8 @@ 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;
} }
} }
} }

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

@ -6,7 +6,7 @@
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-settings-bar: 16rem; $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 { .settings-bar {
background-color: $color-gray-50; background-color: $color-gray-50;
@ -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,20 +150,17 @@ $width-settings-bar: 16rem;
transform: rotate(45deg); transform: rotate(45deg);
&:hover { &:hover {
svg { svg {
fill: $color-danger; fill: $color-danger;
} }
} }
} }
} }
} }
.assets-bar .tool-window { .assets-bar .tool-window {
flex: none; flex: none;
height: auto; height: auto;
} }
} }
} }
@ -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;
} }

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

@ -1,44 +1,44 @@
.tab-container { .tab-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.tab-container-tabs { .tab-container-tabs {
background: $color-gray-60; background: $color-gray-60;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 12px; font-size: 12px;
height: 2.5rem; height: 2.5rem;
padding: 0 0.25rem; padding: 0 0.25rem;
} }
.tab-container-tab-title { .tab-container-tab-title {
align-items: center; align-items: center;
background: $color-gray-60; background: $color-gray-60;
border-radius: 2px 2px 0px 0px; border-radius: 2px 2px 0px 0px;
color: $color-white; color: $color-white;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0.5rem 0.25rem 0 0.25rem ; margin: 0.5rem 0.25rem 0 0.25rem;
width: 100%; width: 100%;
&.current{ &.current {
background: $color-gray-50; background: $color-gray-50;
} }
} }
.tab-container-content { .tab-container-content {
flex: 1; flex: 1;
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.tab-element, .tab-element-content { .tab-element,
height: 100%; .tab-element-content {
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;
}
} }
} }
} }

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

@ -1,7 +1,7 @@
.viewer-header { .viewer-header {
align-items: center; align-items: center;
background-color: $color-gray-50; background-color: $color-gray-50;
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
height: 48px; height: 48px;
padding: 0 $size-4 0 55px; padding: 0 $size-4 0 55px;
@ -115,7 +115,8 @@
} }
} }
.breadcrumb, .current-frame { .breadcrumb,
.current-frame {
display: flex; display: flex;
position: relative; position: relative;

2
frontend/resources/styles/main/partials/viewer-thumbnails.scss
View file

@ -1,6 +1,6 @@
.viewer-thumbnails { .viewer-thumbnails {
grid-row: 1 / span 1; grid-row: 1 / span 1;
grid-column: 1 / span 1; grid-column: 1 / span 1;
background-color: $color-gray-50; background-color: $color-gray-50;
overflow: hidden; overflow: hidden;

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

@ -7,7 +7,7 @@
.workspace-header { .workspace-header {
align-items: center; align-items: center;
background-color: $color-gray-50; background-color: $color-gray-50;
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
height: 48px; height: 48px;
padding: $size-1 $size-4 $size-1 55px; padding: $size-1 $size-4 $size-1 55px;
@ -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;
} }
} }
} }
} }
@ -116,19 +112,19 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $color-primary; color: $color-primary;
} }
} }
} }
.file-name { .file-name {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
border-bottom: 1px solid $color-gray-10; border-bottom: 1px solid $color-gray-10;
background: $color-gray-50; background: $color-gray-50;
color: $color-gray-10; color: $color-gray-10;
margin-bottom: -1px; margin-bottom: -1px;
} }
} }
@ -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;
}
} }
} }

9
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 {
@ -242,7 +240,7 @@
font-family: worksans; font-family: worksans;
padding: 2px 12px; padding: 2px 12px;
border-radius: 4px; border-radius: 4px;
display:flex; display: flex;
align-items: center; align-items: center;
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
@ -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;
} }
} }
} }
} }