mirror of
https://github.com/penpot/penpot.git
synced 2025-05-05 21:55:54 +02:00
✨ Apply prettier to resources styles
This commit is contained in:
Alejandro Alonso
parent
cd55ed7c8d
commit
6413c9dddd
54 changed files with 1437 additions and 1342 deletions
|
|
@ -10,7 +10,7 @@ body {
|
|||
color: $color-gray-20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'worksans', sans-serif;
|
||||
font-family: "worksans", sans-serif;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -30,7 +30,6 @@ body {
|
|||
object {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -39,11 +38,9 @@ img {
|
|||
}
|
||||
|
||||
svg {
|
||||
|
||||
* {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
*:focus {
|
||||
|
|
@ -51,7 +48,6 @@ svg {
|
|||
box-shadow: 0;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: $color-primary-dark;
|
||||
|
|
@ -59,7 +55,6 @@ a {
|
|||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -71,16 +66,14 @@ p {
|
|||
font-size: $fs16;
|
||||
line-height: $base-lh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: $base-lh-sm;
|
||||
|
||||
@include bp(baby-bear) {
|
||||
line-height: $base-lh
|
||||
line-height: $base-lh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -114,9 +107,7 @@ h1 {
|
|||
font-size: $fs44;
|
||||
line-height: $title-lh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: $fs24;
|
||||
|
|
@ -127,13 +118,12 @@ h2 {
|
|||
font-size: $fs32;
|
||||
line-height: $title-lh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $fs24;
|
||||
font-weight: 300;
|
||||
padding: .5rem 0;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -142,33 +132,65 @@ h4 {
|
|||
}
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(359deg);}
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotation-negative {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(-359deg);}
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(-359deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltipAppear {
|
||||
0% {opacity: 0; display: none;}
|
||||
1% {display: block; opacity: 0; left: 3rem}
|
||||
100% {opacity: 1; left: 2rem}
|
||||
0% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
1% {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
left: 3rem;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes show {
|
||||
0% {opacity: 0; display: none;}
|
||||
1% {display: block; opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
0% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
1% {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
0% {opacity: 1; display: block;}
|
||||
99% {opacity: 0; display: block}
|
||||
100% {display: none;}
|
||||
0% {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
|
|
@ -182,7 +204,7 @@ h4 {
|
|||
}
|
||||
|
||||
.show {
|
||||
animation: show .4s linear ;
|
||||
animation: show 0.4s linear;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
|
@ -191,7 +213,7 @@ h4 {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -215,17 +237,17 @@ hr {
|
|||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -8,35 +8,35 @@
|
|||
// Colors
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-canvas: #E8E9EA;
|
||||
$color-dashboard: #F6F6F6;
|
||||
$color-canvas: #e8e9ea;
|
||||
$color-dashboard: #f6f6f6;
|
||||
|
||||
// Main color
|
||||
$color-primary: #31EFB8;
|
||||
$color-primary: #31efb8;
|
||||
|
||||
// Secondary colors
|
||||
$color-success: #58C35C;
|
||||
$color-complete : #a599c6;
|
||||
$color-warning: #FC8802;
|
||||
$color-danger: #E65244;
|
||||
$color-success: #58c35c;
|
||||
$color-complete: #a599c6;
|
||||
$color-warning: #fc8802;
|
||||
$color-danger: #e65244;
|
||||
$color-info: #59b9e2;
|
||||
$color-ocean: #4285f4;
|
||||
$color-component: #76B0B8;
|
||||
$color-component: #76b0b8;
|
||||
$color-component-highlight: #1890ff;
|
||||
$color-pink: #feecfc;
|
||||
|
||||
// Gray scale
|
||||
$color-gray-10: #E3E3E3;
|
||||
$color-gray-10: #e3e3e3;
|
||||
$color-gray-20: #b1b2b5;
|
||||
$color-gray-30: #7B7D85;
|
||||
$color-gray-40: #64666A;
|
||||
$color-gray-30: #7b7d85;
|
||||
$color-gray-40: #64666a;
|
||||
$color-gray-50: #303236;
|
||||
$color-gray-60: #1F1F1F;
|
||||
$color-gray-60: #1f1f1f;
|
||||
|
||||
// UI colors
|
||||
$color-select: #1FDEA7;
|
||||
$color-distance: #DB00FF;
|
||||
$color-snap: #D383DA;
|
||||
$color-select: #1fdea7;
|
||||
$color-distance: #db00ff;
|
||||
$color-snap: #d383da;
|
||||
|
||||
// Mixing Color variable for creating both light and dark colors
|
||||
$mix-percentage-dark: 81%;
|
||||
|
|
@ -46,121 +46,217 @@ $mix-percentage-lighter: 20%;
|
|||
$mix-percentage-lightest: 10%;
|
||||
|
||||
// Lighter colors
|
||||
$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d
|
||||
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
|
||||
$color-success-light: mix(
|
||||
$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-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4
|
||||
$color-complete-light: mix(
|
||||
$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-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
|
||||
$color-primary-light: mix(
|
||||
$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-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc;
|
||||
$color-warning-light: mix(
|
||||
$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-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
|
||||
$color-danger-light: mix(
|
||||
$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-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9;
|
||||
$color-info-light: mix(
|
||||
$color-info,
|
||||
$color-white,
|
||||
$mix-percentage-light
|
||||
); //#7ac7e8
|
||||
$color-info-lighter: mix(
|
||||
$color-info,
|
||||
$color-white,
|
||||
$mix-percentage-lighter
|
||||
); //#def1f9;
|
||||
|
||||
// Darker colors
|
||||
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
|
||||
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537;
|
||||
$color-success-dark: mix(
|
||||
$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-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
|
||||
$color-complete-dark: mix(
|
||||
$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-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
|
||||
$color-primary-dark: mix(
|
||||
$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-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201
|
||||
$color-warning-dark: mix(
|
||||
$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-darker: mix($color-danger, $color-black, $mix-percentage-darker);// #8a3129;
|
||||
$color-danger-dark: mix(
|
||||
$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-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
|
||||
$color-info-dark: mix(
|
||||
$color-info,
|
||||
$color-black,
|
||||
$mix-percentage-dark
|
||||
); // #4896b7
|
||||
$color-info-darker: mix(
|
||||
$color-info,
|
||||
$color-black,
|
||||
$mix-percentage-darker
|
||||
); // #356f88;
|
||||
|
||||
// bg transparent
|
||||
$color-dark-bg: rgba(0,0,0,.4);
|
||||
$color-light-bg: rgba(255,255,255,.6);
|
||||
$color-dark-bg: rgba(0, 0, 0, 0.4);
|
||||
$color-light-bg: rgba(255, 255, 255, 0.6);
|
||||
|
||||
// Transform scss variables into css variables to use them onto cljs files
|
||||
:root {
|
||||
// Colors
|
||||
--color-white: #{$color-white};
|
||||
--color-black: #{$color-black};
|
||||
--color-canvas: #{$color-canvas};
|
||||
--color-dashboard: #{$color-dashboard};
|
||||
// Colors
|
||||
--color-white: #{$color-white};
|
||||
--color-black: #{$color-black};
|
||||
--color-canvas: #{$color-canvas};
|
||||
--color-dashboard: #{$color-dashboard};
|
||||
|
||||
// Main color;
|
||||
--color-primary: #{$color-primary};
|
||||
// Main color;
|
||||
--color-primary: #{$color-primary};
|
||||
|
||||
// Secondary colors;
|
||||
--color-success: #{$color-success};
|
||||
--color-complete: #{$color-complete};
|
||||
--color-warning: #{$color-warning};
|
||||
--color-danger: #{$color-danger};
|
||||
--color-info: #{$color-info};
|
||||
--color-ocean: #{$color-ocean};
|
||||
--color-component: #{$color-component};
|
||||
--color-component-highlight: #{$color-component-highlight};
|
||||
--color-pink: #{$color-pink};
|
||||
// Secondary colors;
|
||||
--color-success: #{$color-success};
|
||||
--color-complete: #{$color-complete};
|
||||
--color-warning: #{$color-warning};
|
||||
--color-danger: #{$color-danger};
|
||||
--color-info: #{$color-info};
|
||||
--color-ocean: #{$color-ocean};
|
||||
--color-component: #{$color-component};
|
||||
--color-component-highlight: #{$color-component-highlight};
|
||||
--color-pink: #{$color-pink};
|
||||
|
||||
// Gray scale;
|
||||
--color-gray-10: #{$color-gray-10};
|
||||
--color-gray-20: #{$color-gray-20};
|
||||
--color-gray-30: #{$color-gray-30};
|
||||
--color-gray-40: #{$color-gray-40};
|
||||
--color-gray-50: #{$color-gray-50};
|
||||
--color-gray-60: #{$color-gray-60};
|
||||
// Gray scale;
|
||||
--color-gray-10: #{$color-gray-10};
|
||||
--color-gray-20: #{$color-gray-20};
|
||||
--color-gray-30: #{$color-gray-30};
|
||||
--color-gray-40: #{$color-gray-40};
|
||||
--color-gray-50: #{$color-gray-50};
|
||||
--color-gray-60: #{$color-gray-60};
|
||||
|
||||
// UI colors
|
||||
--color-distance: #{$color-distance};
|
||||
--color-select: #{$color-select};
|
||||
--color-snap: #{$color-snap};
|
||||
// UI colors
|
||||
--color-distance: #{$color-distance};
|
||||
--color-select: #{$color-select};
|
||||
--color-snap: #{$color-snap};
|
||||
|
||||
// Lighter colors
|
||||
--color-success-light : #{$color-success-light};
|
||||
--color-success-lighter : #{$color-success-lighter};
|
||||
// Lighter colors
|
||||
--color-success-light: #{$color-success-light};
|
||||
--color-success-lighter: #{$color-success-lighter};
|
||||
|
||||
--color-complete-light : #{$color-complete-light};
|
||||
--color-complete-lighter : #{$color-complete-lighter};
|
||||
--color-complete-light: #{$color-complete-light};
|
||||
--color-complete-lighter: #{$color-complete-lighter};
|
||||
|
||||
--color-primary-light: #{$color-primary-light};
|
||||
--color-primary-lighter : #{$color-primary-lighter};
|
||||
--color-primary-light: #{$color-primary-light};
|
||||
--color-primary-lighter: #{$color-primary-lighter};
|
||||
|
||||
--color-warning-light : #{$color-warning-light};
|
||||
--color-warning-lighter : #{$color-warning-lighter};
|
||||
--color-warning-light: #{$color-warning-light};
|
||||
--color-warning-lighter: #{$color-warning-lighter};
|
||||
|
||||
--color-danger-light : #{$color-danger-light};
|
||||
--color-danger-lighter : #{$color-danger-lighter};
|
||||
--color-danger-light: #{$color-danger-light};
|
||||
--color-danger-lighter: #{$color-danger-lighter};
|
||||
|
||||
--color-info-light : #{$color-info-light};
|
||||
--color-info-lighter : #{$color-info-lighter};
|
||||
--color-info-light: #{$color-info-light};
|
||||
--color-info-lighter: #{$color-info-lighter};
|
||||
|
||||
// Darker colors
|
||||
--color-success-dark : #{$color-success-dark};
|
||||
--color-success-darker : #{$color-success-darker};
|
||||
// Darker colors
|
||||
--color-success-dark: #{$color-success-dark};
|
||||
--color-success-darker: #{$color-success-darker};
|
||||
|
||||
--color-complete-dark : #{$color-complete-dark};
|
||||
--color-complete-darker : #{$color-complete-darker};
|
||||
--color-complete-dark: #{$color-complete-dark};
|
||||
--color-complete-darker: #{$color-complete-darker};
|
||||
|
||||
--color-primary-dark : #{$color-primary-dark};
|
||||
--color-primary-darker : #{$color-primary-darker};
|
||||
--color-primary-dark: #{$color-primary-dark};
|
||||
--color-primary-darker: #{$color-primary-darker};
|
||||
|
||||
--color-warning-dark : #{$color-warning-dark};
|
||||
--color-warning-darker : #{$color-warning-darker};
|
||||
--color-warning-dark: #{$color-warning-dark};
|
||||
--color-warning-darker: #{$color-warning-darker};
|
||||
|
||||
--color-danger-dark : #{$color-danger-dark};
|
||||
--color-danger-darker : #{$color-danger-darker};
|
||||
--color-danger-dark: #{$color-danger-dark};
|
||||
--color-danger-darker: #{$color-danger-darker};
|
||||
|
||||
--color-info-dark : #{$color-info-dark};
|
||||
--color-info-darker : #{$color-info-darker};
|
||||
--color-info-dark: #{$color-info-dark};
|
||||
--color-info-darker: #{$color-info-darker};
|
||||
|
||||
// bg transparent
|
||||
--color-dark-bg : #{$color-dark-bg};
|
||||
--color-light-bg : #{$color-light-bg};
|
||||
}
|
||||
// bg transparent
|
||||
--color-dark-bg: #{$color-dark-bg};
|
||||
--color-light-bg: #{$color-light-bg};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ $fs12: 0.75rem;
|
|||
$fs13: 0.8125rem;
|
||||
$fs14: 0.875rem;
|
||||
$fs15: 0.9375rem;
|
||||
$fs16: 1rem ;
|
||||
$fs16: 1rem;
|
||||
$fs18: 1.125rem;
|
||||
$fs19: 1.1875rem;
|
||||
$fs20: 1.25rem;
|
||||
|
|
@ -40,33 +40,43 @@ $title-lh: 1.25;
|
|||
$title-lh-sm: 1.15;
|
||||
|
||||
// Work Sans
|
||||
@include font-face("worksans","WorkSans-Thin", "100");
|
||||
@include font-face("worksans","WorkSans-ThinItalic", "100", italic);
|
||||
@include font-face("worksans","WorkSans-ExtraLight", "200");
|
||||
@include font-face("worksans","WorkSans-ExtraLightitalic", "200", italic);
|
||||
@include font-face("worksans","WorkSans-Light", "300");
|
||||
@include font-face("worksans","WorkSans-LightItalic", "300", italic);
|
||||
@include font-face("worksans","WorkSans-Regular", normal);
|
||||
@include font-face("worksans","WorkSans-Italic", normal, italic);
|
||||
@include font-face("worksans","WorkSans-Medium", "500");
|
||||
@include font-face("worksans","WorkSans-MediumItalic", "500", italic);
|
||||
@include font-face("worksans","WorkSans-SemiBold", "600");
|
||||
@include font-face("worksans","WorkSans-SemiBoldItalic", "600", italic);
|
||||
@include font-face("worksans","WorkSans-Bold", bold);
|
||||
@include font-face("worksans","WorkSans-BoldItalic", bold, italic);
|
||||
@include font-face("worksans","WorkSans-Black", "900");
|
||||
@include font-face("worksans","WorkSans-BlackItalic","900", italic);
|
||||
@include font-face("worksans", "WorkSans-Thin", "100");
|
||||
@include font-face("worksans", "WorkSans-ThinItalic", "100", italic);
|
||||
@include font-face("worksans", "WorkSans-ExtraLight", "200");
|
||||
@include font-face("worksans", "WorkSans-ExtraLightitalic", "200", italic);
|
||||
@include font-face("worksans", "WorkSans-Light", "300");
|
||||
@include font-face("worksans", "WorkSans-LightItalic", "300", italic);
|
||||
@include font-face("worksans", "WorkSans-Regular", normal);
|
||||
@include font-face("worksans", "WorkSans-Italic", normal, italic);
|
||||
@include font-face("worksans", "WorkSans-Medium", "500");
|
||||
@include font-face("worksans", "WorkSans-MediumItalic", "500", italic);
|
||||
@include font-face("worksans", "WorkSans-SemiBold", "600");
|
||||
@include font-face("worksans", "WorkSans-SemiBoldItalic", "600", italic);
|
||||
@include font-face("worksans", "WorkSans-Bold", bold);
|
||||
@include font-face("worksans", "WorkSans-BoldItalic", bold, italic);
|
||||
@include font-face("worksans", "WorkSans-Black", "900");
|
||||
@include font-face("worksans", "WorkSans-BlackItalic", "900", italic);
|
||||
|
||||
// Source Sans Pro
|
||||
@include font-face("sourcesanspro","sourcesanspro-extralight", "200");
|
||||
@include font-face("sourcesanspro","sourcesanspro-extralightitalic", "200", italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-light", "300");
|
||||
@include font-face("sourcesanspro","sourcesanspro-lightitalic", "300", italic);
|
||||
@include font-face("sourcesanspro","sourcesanspro-regular", normal);
|
||||
@include font-face("sourcesanspro","sourcesanspro-italic", normal, 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);
|
||||
@include font-face("sourcesanspro", "sourcesanspro-extralight", "200");
|
||||
@include font-face(
|
||||
"sourcesanspro",
|
||||
"sourcesanspro-extralightitalic",
|
||||
"200",
|
||||
italic
|
||||
);
|
||||
@include font-face("sourcesanspro", "sourcesanspro-light", "300");
|
||||
@include font-face("sourcesanspro", "sourcesanspro-lightitalic", "300", italic);
|
||||
@include font-face("sourcesanspro", "sourcesanspro-regular", normal);
|
||||
@include font-face("sourcesanspro", "sourcesanspro-italic", normal, 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);
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@ $br-huge: 12px;
|
|||
|
||||
// Alignments
|
||||
.text-left {
|
||||
text-align: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
|
|
@ -43,12 +43,12 @@ $br-huge: 12px;
|
|||
}
|
||||
|
||||
.row-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.column-half {
|
||||
|
|
@ -57,13 +57,13 @@ $br-huge: 12px;
|
|||
|
||||
// Display
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.display {
|
||||
opacity: 1 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,31 +9,34 @@
|
|||
/// @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).
|
||||
@mixin bp($point) {
|
||||
|
||||
$bp-mobile: "(min-width: 720px)";
|
||||
$bp-tablet: "(min-width: 1020px)";
|
||||
$bp-desktop: "(min-width: 1366px)";
|
||||
|
||||
@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
|
||||
// ----------------
|
||||
@mixin position($type,
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default) {
|
||||
@mixin position(
|
||||
$type,
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
position: $type;
|
||||
$allowed_types: absolute relative fixed;
|
||||
@if not index($allowed_types, $type) {
|
||||
|
|
@ -43,45 +46,59 @@
|
|||
#{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);
|
||||
}
|
||||
@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);
|
||||
}
|
||||
@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);
|
||||
}
|
||||
|
||||
|
||||
/// Center an element vertically and horizontally with an absolute position.
|
||||
/// @group Mixins
|
||||
|
||||
@mixin centerer {
|
||||
@include absolute(50%,null,null,50%);
|
||||
transform: translate(-50%,-50%);
|
||||
@include absolute(50%, null, null, 50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/// This mixing allow you to add placeholder colors in all available browsers
|
||||
/// @group Mixins
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content;
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-moz-placeholder { /* Firefox 18- */
|
||||
@content;
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
@content;
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
@content;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
@content;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -89,9 +106,9 @@
|
|||
/// @group Mixins
|
||||
|
||||
@mixin hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
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".
|
||||
|
|
@ -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 $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") ) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
@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 font-face(
|
||||
$style-name,
|
||||
$file,
|
||||
$weight: unquote("normal"),
|
||||
$style: unquote("normal")
|
||||
) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
@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 {
|
||||
|
|
@ -117,14 +142,14 @@
|
|||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear .2s linear ;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear .2s linear ;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -148,5 +173,4 @@
|
|||
position: absolute;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ img {
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// #Reset & Basics (Inspired by E. Meyers)
|
||||
//==================================================
|
||||
a,
|
||||
|
|
@ -95,14 +94,14 @@ u,
|
|||
ul,
|
||||
var,
|
||||
video {
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
line-height: $base-lh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
line-height: $base-lh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article,
|
||||
|
|
@ -116,34 +115,34 @@ hgroup,
|
|||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance:none
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
$autocomplete:30000;
|
||||
$autocomplete: 30000;
|
||||
$index-lightbox-shadow: 60000;
|
||||
$index-lightbox: 60001;
|
||||
$index-lightbox-close-x: 200;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
justify-content: center;
|
||||
min-width: 25px;
|
||||
padding: 0 1rem;
|
||||
transition: all .4s;
|
||||
transition: all 0.4s;
|
||||
text-decoration: none !important;
|
||||
svg {
|
||||
height: 16px;
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
color: $color-primary-dark;
|
||||
flex-shrink: 0;
|
||||
&:hover {
|
||||
background: rgba(49,239,184,.12);
|
||||
background: rgba(49, 239, 184, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,7 +148,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-gray {
|
||||
@extend %btn;
|
||||
background: $color-gray-30;
|
||||
|
|
@ -171,7 +170,7 @@
|
|||
.btn-option {
|
||||
display: flex;
|
||||
a {
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -179,7 +178,7 @@
|
|||
&.column {
|
||||
flex-direction: column;
|
||||
a {
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -193,11 +192,11 @@
|
|||
max-width: 400px;
|
||||
}
|
||||
&.mb {
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=button][disabled],
|
||||
input[type="button"][disabled],
|
||||
.btn-disabled {
|
||||
background-color: $color-gray-10;
|
||||
color: $color-gray-40;
|
||||
|
|
@ -254,11 +253,9 @@ ul.slider-dots {
|
|||
&:hover {
|
||||
background-color: $color-gray-10;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.dots-purple {
|
||||
|
||||
li {
|
||||
border-color: $color-complete;
|
||||
|
||||
|
|
@ -266,17 +263,13 @@ ul.slider-dots {
|
|||
&:hover {
|
||||
background-color: $color-complete;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Doted list
|
||||
|
||||
.doted-list {
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -295,9 +288,7 @@ ul.slider-dots {
|
|||
&.not-included {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Tags
|
||||
|
|
@ -310,7 +301,7 @@ ul.slider-dots {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
.tag {
|
||||
background-color: $color-gray-20;
|
||||
border-radius: 3px;
|
||||
color: $color-white;
|
||||
|
|
@ -332,7 +323,6 @@ ul.slider-dots {
|
|||
&:hover {
|
||||
background-color: $color-primary-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.tag-green {
|
||||
|
|
@ -342,7 +332,6 @@ ul.slider-dots {
|
|||
&:hover {
|
||||
background-color: $color-success-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.tag-purple {
|
||||
|
|
@ -352,7 +341,6 @@ ul.slider-dots {
|
|||
&:hover {
|
||||
background-color: $color-complete-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.tag-orange {
|
||||
|
|
@ -362,7 +350,6 @@ ul.slider-dots {
|
|||
&:hover {
|
||||
background-color: $color-warning-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.tag-red {
|
||||
|
|
@ -372,11 +359,8 @@ ul.slider-dots {
|
|||
&:hover {
|
||||
background-color: $color-danger-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Input elements
|
||||
|
|
@ -404,8 +388,8 @@ ul.slider-dots {
|
|||
}
|
||||
|
||||
.after {
|
||||
width: auto;
|
||||
right: 6px;
|
||||
width: auto;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
&.mini {
|
||||
|
|
@ -425,49 +409,42 @@ ul.slider-dots {
|
|||
}
|
||||
|
||||
&.percentail {
|
||||
|
||||
&::after {
|
||||
content: "%";
|
||||
}
|
||||
}
|
||||
|
||||
&.milliseconds {
|
||||
|
||||
&::after {
|
||||
content: "ms";
|
||||
}
|
||||
}
|
||||
|
||||
&.degrees {
|
||||
|
||||
&::after {
|
||||
content: "dg";
|
||||
}
|
||||
}
|
||||
|
||||
&.height {
|
||||
|
||||
&::after {
|
||||
content: "H";
|
||||
}
|
||||
}
|
||||
|
||||
&.width {
|
||||
|
||||
&::after {
|
||||
content: "W";
|
||||
}
|
||||
}
|
||||
|
||||
&.Xaxis {
|
||||
|
||||
&::after {
|
||||
content: "X";
|
||||
}
|
||||
}
|
||||
|
||||
&.Yaxis {
|
||||
|
||||
&::after {
|
||||
content: "Y";
|
||||
}
|
||||
|
|
@ -524,7 +501,7 @@ input[type="checkbox"]:focus {
|
|||
position: relative;
|
||||
|
||||
@include placeholder {
|
||||
transition: all .3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -534,9 +511,8 @@ input[type="checkbox"]:focus {
|
|||
@include placeholder {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
transition: all .3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.success {
|
||||
|
|
@ -550,7 +526,6 @@ input[type="checkbox"]:focus {
|
|||
border-color: $color-danger;
|
||||
color: $color-danger-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Element-name
|
||||
|
|
@ -579,10 +554,8 @@ input.element-name {
|
|||
&.small {
|
||||
padding: $size-1 $size-5 $size-1 $size-1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Input radio
|
||||
|
||||
.input-radio,
|
||||
|
|
@ -594,15 +567,15 @@ input.element-name {
|
|||
margin-top: 10px;
|
||||
padding-left: 0px;
|
||||
|
||||
label{
|
||||
label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
font-size: $fs12;
|
||||
|
||||
&:before{
|
||||
content:"";
|
||||
&:before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
|
|
@ -618,11 +591,9 @@ input.element-name {
|
|||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.input-radio {
|
||||
|
||||
label {
|
||||
margin-bottom: 6px;
|
||||
|
||||
|
|
@ -630,76 +601,61 @@ input.element-name {
|
|||
border-radius: 99px;
|
||||
transition: box-shadow 0.2s linear 0s, color 0.2s linear 0s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=radio]:checked {
|
||||
|
||||
input[type="radio"]:checked {
|
||||
& + label {
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
input[type=radio][disabled] {
|
||||
|
||||
input[type="radio"][disabled] {
|
||||
& + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
input[type=radio]:checked + label:before{
|
||||
|
||||
.input-radio.radio-success &{
|
||||
input[type="radio"]:checked + label:before {
|
||||
.input-radio.radio-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;
|
||||
}
|
||||
|
||||
.input-radio.radio-info &{
|
||||
.input-radio.radio-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;
|
||||
}
|
||||
|
||||
.input-radio.radio-danger &{
|
||||
.input-radio.radio-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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Input checkbox
|
||||
|
||||
.input-checkbox {
|
||||
|
||||
input[type=radio][disabled] {
|
||||
|
||||
input[type="radio"][disabled] {
|
||||
& + label {
|
||||
|
||||
&:after {
|
||||
background-color: $color-gray-10;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -726,17 +682,14 @@ input[type=radio]:checked + label:before{
|
|||
&:after {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.checkbox-circle {
|
||||
|
||||
label {
|
||||
|
||||
&:after {
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
|
@ -744,98 +697,81 @@ input[type=radio]:checked + label:before{
|
|||
&:before {
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked {
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
& + label {
|
||||
|
||||
&:before {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content:"✓";
|
||||
content: "✓";
|
||||
color: #ffffff;
|
||||
font-size: $fs16;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=checkbox][disabled] {
|
||||
|
||||
input[type="checkbox"][disabled] {
|
||||
& + label {
|
||||
opacity: 0.65;
|
||||
|
||||
&:before {
|
||||
background-color: #eceff3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.right {
|
||||
|
||||
label {
|
||||
margin-right: 35px;
|
||||
padding-left:0 !important;
|
||||
padding-left: 0 !important;
|
||||
|
||||
&:before {
|
||||
right:-35px;
|
||||
left:auto;
|
||||
right: -35px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked {
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
& + label {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content:"✓";
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
right: -27px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label{
|
||||
|
||||
.input-checkbox.check-success &:before{
|
||||
input[type="checkbox"]:checked + label {
|
||||
.input-checkbox.check-success &:before {
|
||||
border-color: $color-success;
|
||||
}
|
||||
|
||||
.input-checkbox.check-primary &:before{
|
||||
.input-checkbox.check-primary &:before {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
.input-checkbox.check-complete &:before{
|
||||
.input-checkbox.check-complete &:before {
|
||||
border-color: $color-complete;
|
||||
}
|
||||
|
||||
.input-checkbox.check-warning &:before{
|
||||
.input-checkbox.check-warning &:before {
|
||||
border-color: $color-warning;
|
||||
}
|
||||
|
||||
.input-checkbox.check-danger &:before{
|
||||
.input-checkbox.check-danger &:before {
|
||||
border-color: $color-danger;
|
||||
}
|
||||
|
||||
.input-checkbox.check-info &:before{
|
||||
.input-checkbox.check-info &:before {
|
||||
border-color: $color-info;
|
||||
}
|
||||
|
||||
|
|
@ -847,22 +783,21 @@ input[type=checkbox]:checked + label{
|
|||
.input-checkbox.check-info &::after {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Input slidebar
|
||||
|
||||
input[type=range] {
|
||||
input[type="range"] {
|
||||
background-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
margin: 10px 0 10px 3px;
|
||||
max-width: 70px;
|
||||
width: 100%;
|
||||
}
|
||||
input[type=range]:focus {
|
||||
input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
cursor: pointer;
|
||||
|
|
@ -872,7 +807,7 @@ input[type=range]::-webkit-slider-runnable-track {
|
|||
border-radius: 25px;
|
||||
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;
|
||||
border: 0px solid #000000;
|
||||
height: 18px;
|
||||
|
|
@ -883,10 +818,10 @@ input[type=range]::-webkit-slider-thumb {
|
|||
-webkit-appearance: none;
|
||||
margin-top: -6px;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
input[type="range"]:focus::-webkit-slider-runnable-track {
|
||||
background: $color-gray-60;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
|
|
@ -896,7 +831,7 @@ input[type=range]::-moz-range-track {
|
|||
border-radius: 25px;
|
||||
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;
|
||||
border: 0px solid #000000;
|
||||
height: 24px;
|
||||
|
|
@ -905,7 +840,7 @@ input[type=range]::-moz-range-thumb {
|
|||
background: $color-gray-20;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-ms-track {
|
||||
input[type="range"]::-ms-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
|
|
@ -915,19 +850,19 @@ input[type=range]::-ms-track {
|
|||
border-width: 39px 0;
|
||||
color: transparent;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower {
|
||||
input[type="range"]::-ms-fill-lower {
|
||||
background: $color-gray-60;
|
||||
border: 0px solid #000101;
|
||||
border-radius: 50px;
|
||||
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;
|
||||
border: 0px solid #000101;
|
||||
border-radius: 50px;
|
||||
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;
|
||||
border: 0px solid #000000;
|
||||
height: 24px;
|
||||
|
|
@ -936,32 +871,31 @@ input[type=range]::-ms-thumb {
|
|||
background: $color-gray-20;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
input[type="range"]:focus::-ms-fill-lower {
|
||||
background: $color-gray-60;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
input[type="range"]:focus::-ms-fill-upper {
|
||||
background: $color-gray-60;
|
||||
}
|
||||
|
||||
// Scroll bar (chrome)
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: $color-gray-20;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-gray-20, 14%);
|
||||
outline: 2px solid $color-primary;
|
||||
}
|
||||
background-color: $color-gray-20;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-gray-20, 14%);
|
||||
outline: 2px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip
|
||||
|
|
@ -984,7 +918,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
top: 0;
|
||||
white-space: nowrap;
|
||||
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 {
|
||||
&::after {
|
||||
top: 15%;
|
||||
|
|
@ -1034,7 +968,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
}
|
||||
}
|
||||
|
||||
&.tooltip-left {
|
||||
&.tooltip-left {
|
||||
&:hover {
|
||||
&::after {
|
||||
left: unset;
|
||||
|
|
@ -1086,7 +1020,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
}
|
||||
|
||||
&.hide {
|
||||
@include animation(0, .6s, fadeOutUp);
|
||||
@include animation(0, 0.6s, fadeOutUp);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -1137,7 +1071,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
opacity: .35;
|
||||
opacity: 0.35;
|
||||
|
||||
svg {
|
||||
fill: $color-black;
|
||||
|
|
@ -1147,13 +1081,13 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
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;
|
||||
max-width: 1000px;
|
||||
min-width: 500px;
|
||||
|
|
@ -1186,7 +1120,8 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
}
|
||||
}
|
||||
|
||||
&.floating, &.inline {
|
||||
&.floating,
|
||||
&.inline {
|
||||
min-height: 40px;
|
||||
|
||||
.wrapper {
|
||||
|
|
@ -1212,25 +1147,25 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
|
||||
&.error {
|
||||
.content {
|
||||
background-color: lighten($color-danger,30%);
|
||||
background-color: lighten($color-danger, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.content {
|
||||
background-color: lighten($color-success,30%);
|
||||
background-color: lighten($color-success, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.content {
|
||||
background-color: lighten($color-warning,30%);
|
||||
background-color: lighten($color-warning, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
.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;
|
||||
color: $color-info-darker;
|
||||
margin-bottom: 1.2rem;
|
||||
padding: .8rem;
|
||||
padding: 0.8rem;
|
||||
text-align: center;
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
//
|
||||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
|
||||
//#################################################
|
||||
// Import libraries
|
||||
//#################################################
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color:#FEECFD;
|
||||
background-color: #feecfd;
|
||||
background-image: url("/images/login-pink.svg");
|
||||
background-position: center;
|
||||
background-size: 96%;
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
width: 280px;
|
||||
font-size: $fs18;
|
||||
margin-top: 2vh;
|
||||
color: #2C233E;
|
||||
color: #2c233e;
|
||||
}
|
||||
|
||||
.logo {
|
||||
svg {
|
||||
fill: #2C233E;
|
||||
fill: #2c233e;
|
||||
max-width: 11vw;
|
||||
height: 80px;
|
||||
}
|
||||
|
|
@ -122,7 +122,6 @@
|
|||
margin-top: $size-4;
|
||||
margin-bottom: $size-4;
|
||||
|
||||
|
||||
&.demo {
|
||||
justify-content: center;
|
||||
margin-top: $size-5;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
height: 55px;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
|
@ -80,4 +78,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
left: 0;
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
& .viewer-header:hover {
|
||||
|
|
@ -57,5 +56,3 @@
|
|||
background-color: rgb(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@
|
|||
font-weight: bold;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
|
|
@ -75,5 +74,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,10 @@
|
|||
padding: 3rem;
|
||||
width: 100% !important;
|
||||
|
||||
h1, h3 {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
margin-bottom: .8rem;
|
||||
h1,
|
||||
h3 {
|
||||
font-family: "worksans", sans-serif !important;
|
||||
margin-bottom: 0.8rem;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
|
|
@ -26,8 +27,9 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
p, label {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
p,
|
||||
label {
|
||||
font-family: "worksans", sans-serif !important;
|
||||
font-size: $fs14;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
}
|
||||
|
||||
button {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
font-family: "worksans", sans-serif !important;
|
||||
}
|
||||
|
||||
.af-choice,
|
||||
|
|
@ -51,7 +53,7 @@
|
|||
width: 100%;
|
||||
|
||||
label {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
font-family: "worksans", sans-serif !important;
|
||||
font-size: $fs14;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
|
||||
.af-dropdown-text,
|
||||
.text {
|
||||
font-family: 'worksans', sans-serif !important;
|
||||
font-family: "worksans", sans-serif !important;
|
||||
}
|
||||
|
||||
.af-step-next {
|
||||
|
|
@ -109,13 +111,13 @@
|
|||
border-color: #c5c6c9 !important;
|
||||
}
|
||||
|
||||
.af-choice-option input:checked+label:before,
|
||||
.af-legal input:checked+label:before {
|
||||
.af-choice-option input:checked + label:before,
|
||||
.af-legal input:checked + label:before {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.af-field-use_of_penpot .af-choice-option input:checked+label,
|
||||
.af-field-previous_design_tool .af-choice-option input:checked+label {
|
||||
.af-field-use_of_penpot .af-choice-option input:checked + label,
|
||||
.af-field-previous_design_tool .af-choice-option input:checked + label {
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
border: 2px solid $color-primary !important;
|
||||
|
|
@ -156,7 +158,7 @@
|
|||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 10px 20px rgba(0,0,0,.2);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -177,7 +179,6 @@
|
|||
|
||||
.af-field-previous_design_tool .af-choice-option:nth-child(1) label {
|
||||
background-image: url("../images/form/figma.png");
|
||||
|
||||
}
|
||||
|
||||
.af-field-previous_design_tool .af-choice-option:nth-child(2) label {
|
||||
|
|
@ -242,9 +243,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.af-field-previous_design_tool .af-choice-option:nth-child(7) input:checked+label,
|
||||
.af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked+label {
|
||||
|
||||
.af-field-previous_design_tool
|
||||
.af-choice-option:nth-child(7)
|
||||
input:checked
|
||||
+ label,
|
||||
.af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked + label {
|
||||
&::before {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-cell.current {
|
||||
|
|
@ -56,7 +55,7 @@ ul.palette-menu .color-bullet {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: .6rem;
|
||||
padding: 0.6rem;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
|
|
@ -95,7 +94,8 @@ ul.palette-menu .color-bullet {
|
|||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: $color-white;
|
||||
|
||||
& > * {
|
||||
|
|
@ -108,7 +108,7 @@ ul.palette-menu .color-bullet {
|
|||
background: transparent;
|
||||
|
||||
&::before {
|
||||
content: "?"
|
||||
content: "?";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +151,6 @@ ul.palette-menu .color-bullet {
|
|||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
.color-palette {
|
||||
@include animation(0,.5s,fadeInUp);
|
||||
@include animation(0, 0.5s, fadeInUp);
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-top: 1px solid $color-gray-60;
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
|
||||
& .right-arrow,
|
||||
& .left-arrow {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 1rem;
|
||||
margin: 0 .5rem;
|
||||
margin: 0 0.5rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -37,53 +37,52 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.left-arrow {
|
||||
transform: rotate(180deg);
|
||||
padding-top: 10px;
|
||||
transform: rotate(180deg);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
&.fade-out-down {
|
||||
@include animation(0,.5s,fadeOutDown);
|
||||
@include animation(0, 0.5s, fadeOutDown);
|
||||
}
|
||||
|
||||
&.left-sidebar-open {
|
||||
left: 303px;
|
||||
width: calc(100% - 303px);
|
||||
left: 303px;
|
||||
width: calc(100% - 303px);
|
||||
}
|
||||
|
||||
& .context-menu-items {
|
||||
bottom: 1.5rem;
|
||||
top: initial;
|
||||
min-width: 10rem;
|
||||
bottom: 1.5rem;
|
||||
top: initial;
|
||||
min-width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-actions {
|
||||
align-self: stretch;
|
||||
border: 1px solid #1F1F1F;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
margin-right: .5rem;
|
||||
padding: 0.5rem;
|
||||
align-self: stretch;
|
||||
border: 1px solid #1f1f1f;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.color-palette-buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.color-palette-buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-actions-button {
|
||||
cursor: pointer;
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: #AFB2BF;
|
||||
}
|
||||
cursor: pointer;
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: #afb2bf;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-palette {
|
||||
|
|
@ -94,7 +93,7 @@
|
|||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
padding: .6rem;
|
||||
padding: 0.6rem;
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
height: 20px;
|
||||
|
|
@ -124,7 +123,7 @@
|
|||
padding: 0.25rem;
|
||||
|
||||
&.size-small {
|
||||
height: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,7 +131,7 @@
|
|||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
transition: all .6s ease;
|
||||
transition: all 0.6s ease;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
@ -146,11 +145,11 @@
|
|||
position: relative;
|
||||
|
||||
&.cell-big {
|
||||
flex-basis: 66px;
|
||||
flex-basis: 66px;
|
||||
}
|
||||
|
||||
&.cell-small {
|
||||
flex-basis: 52px;
|
||||
flex-basis: 52px;
|
||||
}
|
||||
|
||||
.color-text {
|
||||
|
|
@ -232,7 +231,7 @@
|
|||
position: relative;
|
||||
.input-text {
|
||||
font-size: $fs12;
|
||||
margin: 0 .5rem;
|
||||
margin: 0 0.5rem;
|
||||
max-width: 100px;
|
||||
}
|
||||
&::after {
|
||||
|
|
@ -251,43 +250,41 @@
|
|||
}
|
||||
|
||||
ul.palette-menu {
|
||||
left: 8px;
|
||||
top: auto;
|
||||
bottom: 4.5rem;
|
||||
color: $color-black;
|
||||
left: 8px;
|
||||
top: auto;
|
||||
bottom: 4.5rem;
|
||||
color: $color-black;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 5px 1.5rem;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
padding: 5px 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
hr {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 10px;
|
||||
}
|
||||
svg {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: $color-gray-20;
|
||||
}
|
||||
hr {
|
||||
border-color: $color-gray-20;
|
||||
}
|
||||
|
||||
.palette-library {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.color-sample {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.palette-library {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.color-sample {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid $color-gray-10;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
}
|
||||
|
||||
.gradient-background {
|
||||
|
|
@ -102,7 +103,8 @@
|
|||
margin-left: -7px;
|
||||
box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
|
||||
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: $color-white;
|
||||
|
||||
&.active {
|
||||
|
|
@ -142,7 +144,11 @@
|
|||
|
||||
border: 1px solid $color-gray-10;
|
||||
|
||||
background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
rgba(var(--color), 0) 0%,
|
||||
rgba(var(--color), 1) 100%
|
||||
);
|
||||
align-self: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -158,8 +164,14 @@
|
|||
&.hue {
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
|
||||
#00f 67%, #f0f 83%, #f00 100%);
|
||||
#f00 0%,
|
||||
#ff0 17%,
|
||||
#0f0 33%,
|
||||
#0ff 50%,
|
||||
#00f 67%,
|
||||
#f0f 83%,
|
||||
#f00 100%
|
||||
);
|
||||
}
|
||||
|
||||
&.saturation {
|
||||
|
|
@ -167,29 +179,36 @@
|
|||
var(--gradient-direction),
|
||||
var(--saturation-grad-from) 0%,
|
||||
var(--saturation-grad-to) 100%
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.opacity {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") var(--background-repeat) center;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
var(--background-repeat) center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
rgba(var(--color), 0) 0%,
|
||||
rgba(var(--color), 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.value {
|
||||
background: linear-gradient(var(--gradient-direction), #FFF 0%, #000 100%);
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
#fff 0%,
|
||||
#000 100%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.handler {
|
||||
background-color: $color-white;;
|
||||
background-color: $color-white;
|
||||
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
|
||||
transform: translate(-6px, -2px);
|
||||
left: 50%;
|
||||
|
|
@ -218,7 +237,8 @@
|
|||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
border: 1px solid $color-white;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
|
||||
rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
transform: translate(-6px, -6px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
|
@ -229,7 +249,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -237,7 +257,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -245,8 +265,9 @@
|
|||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-areas: "color hue"
|
||||
"color opacity";
|
||||
grid-template-areas:
|
||||
"color hue"
|
||||
"color opacity";
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
height: 3.5rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
|
|
@ -327,7 +348,6 @@
|
|||
max-height: 5.5rem;
|
||||
}
|
||||
|
||||
|
||||
.selected-colors::after {
|
||||
content: "";
|
||||
flex: auto;
|
||||
|
|
@ -367,7 +387,8 @@
|
|||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
border: 1px solid $color-white;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
|
||||
rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
transform: translate(-6px, -6px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
|
@ -431,7 +452,6 @@
|
|||
}
|
||||
|
||||
.inputs-area {
|
||||
|
||||
.input-text {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs12;
|
||||
|
|
@ -439,7 +459,6 @@
|
|||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.colorpicker-tabs {
|
||||
|
|
@ -473,7 +492,6 @@
|
|||
:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -517,7 +535,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
::placeholder{
|
||||
::placeholder {
|
||||
color: $color-gray-10;
|
||||
}
|
||||
|
||||
|
|
@ -535,4 +553,3 @@
|
|||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
pointer-events: auto;
|
||||
background-color: $color-gray-10;
|
||||
color: $color-gray-60;
|
||||
border: 1px solid #B1B2B5;
|
||||
border: 1px solid #b1b2b5;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 4px 4px rgba($color-black, 0.25);
|
||||
|
||||
|
|
@ -124,7 +124,6 @@
|
|||
|
||||
@include text-ellipsis;
|
||||
width: 174px;
|
||||
|
||||
}
|
||||
.timeago {
|
||||
margin-top: -2px;
|
||||
|
|
@ -178,7 +177,6 @@
|
|||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -194,13 +192,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.comment-options-dropdown {
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
width: 150px;
|
||||
|
||||
border: 1px solid #B1B2B5;
|
||||
border: 1px solid #b1b2b5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -241,13 +238,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.comment-threads-section {
|
||||
pointer-events: auto;
|
||||
|
||||
.thread-groups {
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
|
|
@ -332,7 +326,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.viewer-comments-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -345,8 +338,8 @@
|
|||
.workspace-comments-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-column: 1/span 2;
|
||||
grid-row: 1/span 2;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -389,7 +382,9 @@
|
|||
|
||||
&.open {
|
||||
background-color: $color-black;
|
||||
svg { fill: $color-primary; }
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -419,7 +414,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -465,4 +459,3 @@
|
|||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,99 +5,98 @@
|
|||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
.context-menu {
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.context-menu.is-open {
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.context-menu.fixed {
|
||||
position: fixed;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.context-menu-items {
|
||||
background: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
left: -$size-4;
|
||||
max-height: 30rem;
|
||||
min-width: 7rem;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $size-3;
|
||||
background: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
left: -$size-4;
|
||||
max-height: 30rem;
|
||||
min-width: 7rem;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $size-3;
|
||||
|
||||
& .separator {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding: 0px;
|
||||
margin: 2px;
|
||||
}
|
||||
& .separator {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding: 0px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&.min-width {
|
||||
min-width: 13rem;
|
||||
}
|
||||
&.min-width {
|
||||
min-width: 13rem;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-action {
|
||||
color: $color-black;
|
||||
display: block;
|
||||
font-size: $fs14;
|
||||
padding: $size-2 $size-4;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
display: block;
|
||||
font-size: $fs14;
|
||||
padding: $size-2 $size-4;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
background-color: $color-primary-lighter;
|
||||
&.submenu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
&.submenu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.submenu-back {
|
||||
color: $color-black;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
&.submenu-back {
|
||||
color: $color-black;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
transform: rotate(180deg);
|
||||
margin-right: $size-2;
|
||||
}
|
||||
& svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
transform: rotate(180deg);
|
||||
margin-right: $size-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu.is-selectable {
|
||||
& .context-menu-action {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
& .context-menu-action {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
& .context-menu-item.is-selected .context-menu-action {
|
||||
background-image: url(/images/icons/tick.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5% 48%;
|
||||
background-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
& .context-menu-item.is-selected .context-menu-action {
|
||||
background-image: url(/images/icons/tick.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5% 48%;
|
||||
background-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@
|
|||
.placeholder-label {
|
||||
font-size: $fs14;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.overlay {
|
||||
|
|
@ -90,8 +89,8 @@
|
|||
}
|
||||
|
||||
.grid-item-icon {
|
||||
width:90px;
|
||||
height:90px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
|
|
@ -133,7 +132,6 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-badge {
|
||||
|
|
@ -170,7 +168,6 @@
|
|||
background-color: $color-white;
|
||||
border: 2px solid $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// PROJECTS, ELEMENTS & ICONS GRID
|
||||
|
|
@ -225,13 +222,9 @@
|
|||
> svg {
|
||||
fill: $color-primary-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.project-th-actions.force-display {
|
||||
|
|
@ -247,11 +240,9 @@
|
|||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-item-image {
|
||||
|
||||
svg {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
|
|
@ -259,7 +250,6 @@
|
|||
min-width: 40px;
|
||||
width: 8vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
|
|
@ -291,7 +281,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// STYLES FOR LIBRARIES
|
||||
|
|
@ -355,7 +344,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
|
@ -373,4 +361,3 @@
|
|||
margin-right: calc(100% - 148px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
&:hover {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -115,7 +114,9 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
svg { fill: $color-gray-50; }
|
||||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
//
|
||||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
|
||||
.dashboard-sidebar {
|
||||
&.settings {
|
||||
.back-to-dashboard {
|
||||
|
|
@ -34,7 +33,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.dashboard-settings {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -88,7 +86,7 @@
|
|||
z-index: 14;
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
input[type="file"] {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
|
|
@ -99,7 +97,9 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
.update-overlay {opacity: 0.8};
|
||||
.update-overlay {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -118,5 +118,4 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -278,7 +278,8 @@
|
|||
border-color: $color-black;
|
||||
}
|
||||
|
||||
.search, .clear-search {
|
||||
.search,
|
||||
.clear-search {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -354,12 +355,11 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
input[type="submit"] {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.profile-section {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -400,7 +400,7 @@
|
|||
bottom: 45px;
|
||||
min-width: 189px;
|
||||
|
||||
@include animation(0,.2s,fadeInUp);
|
||||
@include animation(0, 0.2s, fadeInUp);
|
||||
|
||||
li {
|
||||
height: 40px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
.dashboard-invite-modal {
|
||||
top: 65px;
|
||||
right: 13px;
|
||||
|
|
@ -31,7 +30,7 @@
|
|||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
input[type=submit] {
|
||||
input[type="submit"] {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -98,11 +97,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-team-settings {
|
||||
|
||||
.team-settings {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -173,7 +170,9 @@
|
|||
background: $color-primary-dark;
|
||||
z-index: 14;
|
||||
|
||||
svg { fill: $color-white; }
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,9 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
svg { fill: $color-gray-50; }
|
||||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -133,7 +135,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.edit-wrapper {
|
||||
border: 1px solid $color-gray-10;
|
||||
border-radius: $br-small;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
.debug-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
.debug-icons-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.icon-item, .cursor-item {
|
||||
.icon-item,
|
||||
.cursor-item {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -22,6 +23,6 @@
|
|||
}
|
||||
}
|
||||
.cursor-item {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,14 +36,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
&.with-check {
|
||||
> li {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
> li:not(.selected) {
|
||||
svg { display: none; }
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
.editable-label {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-label-input {
|
||||
border: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: $color-white;
|
||||
border: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.editable-label-close {
|
||||
background-color: $color-white;
|
||||
cursor: pointer;
|
||||
padding: 3px 5px;
|
||||
background-color: $color-white;
|
||||
cursor: pointer;
|
||||
padding: 3px 5px;
|
||||
|
||||
& svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
& svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
height: 55px;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.exception-content {
|
||||
|
|
@ -32,7 +31,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
|
@ -83,4 +81,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@ textarea {
|
|||
|
||||
h1 {
|
||||
font-size: $fs36;
|
||||
color: #2C233E;
|
||||
color: #2c233e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: $fs24;
|
||||
color: #2C233E;
|
||||
color: #2c233e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -261,7 +261,6 @@ textarea {
|
|||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 15px;
|
||||
|
||||
}
|
||||
|
||||
.input-container {
|
||||
|
|
@ -319,4 +318,3 @@ textarea {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
border-bottom: 1px solid $color-gray-60;
|
||||
}
|
||||
|
||||
& :last-child{
|
||||
& :last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
@ -272,7 +272,6 @@
|
|||
.typography-sample {
|
||||
font-size: $fs16;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.download-button {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@ $width-left-toolbar: 48px;
|
|||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -66,15 +65,10 @@ $width-left-toolbar: 48px;
|
|||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.panels {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// full width BG
|
||||
.loader-content {
|
||||
align-items: center;
|
||||
background-color: rgba(255,255,255, .85);
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
|
|
@ -38,5 +38,5 @@ svg#loader-pencil {
|
|||
}
|
||||
|
||||
#loader-line {
|
||||
animation: linePencil .8s infinite linear;
|
||||
animation: linePencil 0.8s infinite linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.modal-wrapper {}
|
||||
.modal-wrapper {
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
align-items: center;
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
z-index: 1000;
|
||||
|
||||
&.transparent {
|
||||
background-color: rgba($color-white, 0)
|
||||
background-color: rgba($color-white, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -134,7 +135,6 @@
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
|
||||
.change-email-modal {
|
||||
h2 {
|
||||
font-size: $fs18
|
||||
font-size: $fs18;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -230,7 +230,8 @@
|
|||
font-size: $fs12;
|
||||
}
|
||||
|
||||
.detail, .explain {
|
||||
.detail,
|
||||
.explain {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -256,7 +257,7 @@
|
|||
padding: 0.3rem 1.25rem;
|
||||
|
||||
&[disabled] {
|
||||
border: 1px solid #E3E3E3;
|
||||
border: 1px solid #e3e3e3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -352,7 +353,7 @@
|
|||
width: 14px;
|
||||
fill: $color-gray-20;
|
||||
margin-left: 0.5rem;
|
||||
padding-top: 1px
|
||||
padding-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -424,7 +425,8 @@
|
|||
flex-wrap: wrap;
|
||||
margin-left: 2rem;
|
||||
|
||||
.icon-chain, .icon-unchain {
|
||||
.icon-chain,
|
||||
.icon-unchain {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 2px;
|
||||
|
|
@ -481,7 +483,8 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3, p {
|
||||
h3,
|
||||
p {
|
||||
font-size: $fs12;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
|
|
@ -716,7 +719,7 @@
|
|||
//- ONBOARDING
|
||||
.onboarding {
|
||||
background-color: $color-white;
|
||||
box-shadow: 0 10px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
min-height: 420px;
|
||||
flex-direction: row;
|
||||
|
|
@ -850,19 +853,18 @@
|
|||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-family: 'worksans', sans-serif;
|
||||
font-family: "worksans", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 27px;
|
||||
margin-bottom: $size-3;
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
font-family: 'worksans', sans-serif;
|
||||
font-family: "worksans", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: $fs18;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modal-columns {
|
||||
|
|
@ -895,7 +897,7 @@
|
|||
.modal-left {
|
||||
background-repeat: no-repeat;
|
||||
border-radius: $br-medium;
|
||||
transition: all ease .3s;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
|
@ -991,7 +993,8 @@
|
|||
background-color: $color-white;
|
||||
flex-grow: 1;
|
||||
|
||||
p, h3 {
|
||||
p,
|
||||
h3 {
|
||||
color: $color-gray-60;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1005,7 +1008,6 @@
|
|||
font-size: $fs16;
|
||||
}
|
||||
|
||||
|
||||
.templates {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1057,12 +1059,10 @@
|
|||
justify-content: flex-end;
|
||||
margin-top: $size-2;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.onboarding-team {
|
||||
display: flex;
|
||||
min-width: 620px;
|
||||
|
|
@ -1104,8 +1104,10 @@
|
|||
margin-right: 13px;
|
||||
}
|
||||
|
||||
input { margin-bottom: unset; }
|
||||
input[type=submit] {
|
||||
input {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
input[type="submit"] {
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
|
|
@ -1147,19 +1149,17 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.questions-form {
|
||||
.modal-overlay {
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background-image: url("../images/deco-left.png"), url("../images/deco-right.png");
|
||||
background-image: url("../images/deco-left.png"),
|
||||
url("../images/deco-right.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10% 50px, 90% 50px;
|
||||
background-size: 65px;
|
||||
|
|
@ -1170,13 +1170,13 @@
|
|||
width: 100vw;
|
||||
|
||||
.af-form {
|
||||
--primary-color: #00C38B;
|
||||
--primary-color: #00c38b;
|
||||
--input-background-color: #ffffff;
|
||||
--label-font-size: $fs16;
|
||||
--field-error-font-color: #E65244;
|
||||
--message-success-font-color: #49D793;
|
||||
--message-fail-font-color: #E65244;
|
||||
--invalid-field-border-color: #E65244;
|
||||
--field-error-font-color: #e65244;
|
||||
--message-success-font-color: #49d793;
|
||||
--message-fail-font-color: #e65244;
|
||||
--invalid-field-border-color: #e65244;
|
||||
--dropdown-background-color: #ffffff;
|
||||
--primary-font-color: #000;
|
||||
--input-border-color: rgb(224, 230, 240);
|
||||
|
|
@ -1184,15 +1184,25 @@
|
|||
--button-border-radius: 3px;
|
||||
--message-border-radius: 3px;
|
||||
--checkbox-border-radius: 3px;
|
||||
--dropdown-option-background-color: rgba(0,195,139,1);
|
||||
--dropdown-option-active-background-color: rgba(0,138,98,1);
|
||||
--invalid-field-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1);
|
||||
--message-fail-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1);
|
||||
--message-success-background-color: rgba(171,232,197,1);
|
||||
--dropdown-option-background-color: rgba(0, 195, 139, 1);
|
||||
--dropdown-option-active-background-color: rgba(0, 138, 98, 1);
|
||||
--invalid-field-background-color: rgba(
|
||||
238.51780000000002,
|
||||
205.7178,
|
||||
204.11780000000002,
|
||||
1
|
||||
);
|
||||
--message-fail-background-color: rgba(
|
||||
238.51780000000002,
|
||||
205.7178,
|
||||
204.11780000000002,
|
||||
1
|
||||
);
|
||||
--message-success-background-color: rgba(171, 232, 197, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
z-index: 9;
|
||||
|
||||
&.toggle {
|
||||
left:-201px;
|
||||
left: -201px;
|
||||
}
|
||||
|
||||
.project-bar-inside {
|
||||
|
|
@ -37,13 +37,11 @@
|
|||
.btn-primary,
|
||||
.btn-warning {
|
||||
font-size: $fs12;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 8px $size-2;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tree-view {
|
||||
|
|
@ -69,11 +67,9 @@
|
|||
|
||||
&:hover,
|
||||
&.current {
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options {
|
||||
|
|
@ -92,11 +88,7 @@
|
|||
&:hover {
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
font-size: $fs14;
|
||||
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
|
|
@ -38,7 +37,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.modal-content {
|
||||
padding: 26px;
|
||||
|
||||
|
|
@ -60,7 +58,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.share-link-section {
|
||||
margin-top: 12px;
|
||||
label {
|
||||
|
|
@ -93,7 +90,8 @@
|
|||
padding-left: 20px;
|
||||
display: flex;
|
||||
|
||||
> .input-checkbox, > .input-radio {
|
||||
> .input-checkbox,
|
||||
> .input-radio {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -217,11 +217,11 @@
|
|||
& svg {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
fill: #F0F0F0;
|
||||
fill: #f0f0f0;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -359,8 +359,7 @@
|
|||
}
|
||||
|
||||
.enum-item:hover,
|
||||
.enum-item.selected,
|
||||
{
|
||||
.enum-item.selected {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -405,7 +404,9 @@
|
|||
border-color: $color-black;
|
||||
background-color: $color-gray-60;
|
||||
|
||||
.input-text, .input-select, .adv-typography-name {
|
||||
.input-text,
|
||||
.input-select,
|
||||
.adv-typography-name {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
|
@ -413,58 +414,57 @@
|
|||
}
|
||||
|
||||
.modal-create-color {
|
||||
position: relative;
|
||||
background-color: $color-white;
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: $color-white;
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
& .sketch-picker, .chrome-picker {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $color-gray-10 !important;
|
||||
border-radius: 0 !important;
|
||||
& .sketch-picker,
|
||||
.chrome-picker {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $color-gray-10 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
& input {
|
||||
background-color: $color-white;
|
||||
}
|
||||
& input {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
& .close {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
transform: rotate(45deg);
|
||||
top: 1rem;
|
||||
& .close {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
transform: rotate(45deg);
|
||||
top: 1rem;
|
||||
|
||||
svg {
|
||||
fill: $color-black;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
svg {
|
||||
fill: $color-black;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .btn-primary {
|
||||
width: 10rem;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
& .btn-primary {
|
||||
width: 10rem;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-create-color-title {
|
||||
color: $color-black;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: $color-black;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
.libraries-wrapper {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,11 +34,9 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -47,15 +45,12 @@
|
|||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-set {
|
||||
|
|
@ -85,14 +80,12 @@
|
|||
width: 100%;
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
margin-right: $size-1;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -111,7 +104,6 @@
|
|||
margin-left: auto;
|
||||
|
||||
a {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 15px;
|
||||
|
|
@ -121,59 +113,43 @@
|
|||
&:hover {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
@include animation(0s,.3s,fadeIn);
|
||||
@include animation(0s, 0.3s, fadeIn);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-set-content {
|
||||
|
|
@ -272,7 +248,6 @@
|
|||
&:hover {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -325,7 +300,6 @@
|
|||
&:hover {
|
||||
border: 1px solid $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
|
|
@ -426,8 +400,8 @@
|
|||
}
|
||||
|
||||
input.input-text {
|
||||
border: none;
|
||||
background: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.input-select {
|
||||
|
|
@ -458,12 +432,11 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
&.input-option {
|
||||
height: 26px;
|
||||
border-bottom: 1px solid #64666A;
|
||||
border-bottom: 1px solid #64666a;
|
||||
width: 100%;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
|
|
@ -488,7 +461,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.element-set-content .grid-option-main {
|
||||
.element-set-content .grid-option-main {
|
||||
.editable-select {
|
||||
height: 2rem;
|
||||
}
|
||||
|
|
@ -598,20 +571,15 @@
|
|||
|
||||
&:hover,
|
||||
&.current {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.element-color-picker {
|
||||
|
|
@ -640,9 +608,7 @@
|
|||
transition: none;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.radius-options {
|
||||
|
|
@ -751,7 +717,8 @@
|
|||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
&:hover svg, &.is-active svg {
|
||||
&:hover svg,
|
||||
&.is-active svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -797,7 +764,6 @@
|
|||
&:hover {
|
||||
background: $color-gray-60;
|
||||
|
||||
|
||||
.custom-select,
|
||||
.editable-select,
|
||||
input {
|
||||
|
|
@ -809,7 +775,7 @@
|
|||
min-width: 4.75rem;
|
||||
height: 2rem;
|
||||
border-color: transparent;
|
||||
border-bottom: 1px solid #65666A;
|
||||
border-bottom: 1px solid #65666a;
|
||||
max-height: 30px;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -898,7 +864,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.element-set-options-group {
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
|
|
@ -906,7 +871,7 @@
|
|||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #1F1F1F;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
|
@ -978,34 +943,34 @@
|
|||
}
|
||||
|
||||
.shadow-options .color-row-wrap {
|
||||
margin-left: 6px;
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 6px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.element-set-actions-button {
|
||||
display: flex;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-20;
|
||||
stroke: $color-gray-20;
|
||||
}
|
||||
display: flex;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-20;
|
||||
stroke: $color-gray-20;
|
||||
}
|
||||
|
||||
&:hover svg,
|
||||
&.active svg {
|
||||
fill: $color-primary;
|
||||
stroke: $color-primary;
|
||||
}
|
||||
&:hover svg,
|
||||
&.active svg {
|
||||
fill: $color-primary;
|
||||
stroke: $color-primary;
|
||||
}
|
||||
|
||||
&.actions-inside {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
&.actions-inside {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.element-set-label {
|
||||
|
|
@ -1015,8 +980,8 @@
|
|||
}
|
||||
|
||||
.element-set-actions {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.row-flex-removable:hover .element-set-actions,
|
||||
|
|
@ -1029,44 +994,44 @@
|
|||
}
|
||||
|
||||
.typography-entry {
|
||||
margin: 0.5rem 0.3rem;
|
||||
margin: 0.5rem 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.typography-selection-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
.typography-selection-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
&.is-selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.is-selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.typography-sample {
|
||||
font-size: 17px;
|
||||
color: $color-white;
|
||||
margin: 0 0.5rem;
|
||||
.typography-sample {
|
||||
font-size: 17px;
|
||||
color: $color-white;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
font-family: sourcesanspro;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
font-family: sourcesanspro;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.typography-name {
|
||||
flex-grow: 1;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.typography-name {
|
||||
flex-grow: 1;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.element-set-actions-button svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.element-set-actions-button svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.spacing-options {
|
||||
|
|
@ -1075,75 +1040,75 @@
|
|||
}
|
||||
|
||||
.asset-section {
|
||||
.typography-entry {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.typography-entry {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.element-set-content .font-option,
|
||||
.element-set-content .size-option {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.element-set-content .variant-option {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.element-set-content .font-option,
|
||||
.element-set-content .size-option {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.element-set-content .variant-option {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.row-flex input.adv-typography-name {
|
||||
font-size: 14px;
|
||||
color: $color-gray-10;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
background-color: #303236;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
font-size: 14px;
|
||||
color: $color-gray-10;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
background-color: #303236;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.size-option .custom-select-dropdown {
|
||||
cursor: pointer;
|
||||
max-height: 16rem;
|
||||
min-width: 6rem;
|
||||
left: initial;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
max-height: 16rem;
|
||||
min-width: 6rem;
|
||||
left: initial;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.typography-read-only-data {
|
||||
font-size: 12px;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
color: $color-white;
|
||||
|
||||
.typography-name {
|
||||
font-size: 14px;
|
||||
.typography-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $color-gray-30;
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $color-gray-30;
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.go-to-lib-button {
|
||||
transition: border 0.3s, color 0.3s;
|
||||
text-align: center;
|
||||
background: $color-gray-50;
|
||||
padding: 0.5rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
.go-to-lib-button {
|
||||
transition: border 0.3s, color 0.3s;
|
||||
text-align: center;
|
||||
background: $color-gray-50;
|
||||
padding: 0.5rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-typography {
|
||||
|
|
@ -1249,7 +1214,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -1275,7 +1239,7 @@
|
|||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $color-gray-20
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -1315,7 +1279,9 @@
|
|||
background-color: $color-black;
|
||||
color: $color-primary;
|
||||
|
||||
.icon svg {fill: $color-primary;}
|
||||
.icon svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -1328,7 +1294,7 @@
|
|||
// justify-content: center;
|
||||
align-items: center;
|
||||
// border: 1px solid red;
|
||||
width: $size-5
|
||||
width: $size-5;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -1371,7 +1337,7 @@
|
|||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
background-color: $color-gray-30;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.figure-btn {
|
||||
|
|
@ -47,7 +46,5 @@
|
|||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
& input[type=radio]:checked {
|
||||
& input[type="radio"]:checked {
|
||||
& + label {
|
||||
&:before {
|
||||
background-color: $color-primary;
|
||||
|
|
@ -212,4 +212,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
|
||||
.element-icon,
|
||||
.element-actions {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
|
@ -110,7 +109,6 @@
|
|||
}
|
||||
|
||||
.element-list li.component {
|
||||
|
||||
.element-list-body {
|
||||
span.element-name {
|
||||
color: $color-component;
|
||||
|
|
@ -228,9 +226,9 @@ span.element-name {
|
|||
&.selected {
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -254,7 +252,9 @@ span.element-name {
|
|||
}
|
||||
|
||||
&.inverse {
|
||||
svg { transform: rotate(270deg); }
|
||||
svg {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -265,8 +265,8 @@ span.element-name {
|
|||
}
|
||||
|
||||
.icon-layer {
|
||||
> svg {
|
||||
background-color: rgba(255,255,255,.6);
|
||||
> svg {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: $br-small;
|
||||
flex-shrink: 0;
|
||||
fill: $color-black !important;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
flex: none !important;
|
||||
|
||||
.element-list {
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -17,14 +16,12 @@
|
|||
width: 100%;
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 13px;
|
||||
margin-right: $size-1;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -42,23 +39,19 @@
|
|||
margin-left: auto;
|
||||
|
||||
a {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 15px;
|
||||
margin-left: $size-1;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
|
@ -66,35 +59,27 @@
|
|||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
|
@ -104,7 +89,6 @@
|
|||
color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-list-body {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,5 @@
|
|||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
$width-settings-bar: 16rem;
|
||||
// This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
|
||||
// This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
|
||||
|
||||
.settings-bar {
|
||||
background-color: $color-gray-50;
|
||||
|
|
@ -35,35 +35,34 @@ $width-settings-bar: 16rem;
|
|||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
||||
&[data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: auto;
|
||||
&[data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'] {
|
||||
grid-template-rows: auto 1fr;
|
||||
&[data-layout*="layers"] {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='libraries'] {
|
||||
grid-template-rows: auto 1fr;
|
||||
&[data-layout*="libraries"] {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'][data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
&[data-layout*="layers"][data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='libraries'][data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
&[data-layout*="libraries"][data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: 11.5rem 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'][data-layout*='libraries'] {
|
||||
grid-template-rows: auto 30% 1fr;
|
||||
&[data-layout*="layers"][data-layout*="libraries"] {
|
||||
grid-template-rows: auto 30% 1fr;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'][data-layout*='libraries'][data-layout*='sitemap-pages'] {
|
||||
grid-template-rows: 11.5rem 25% 1fr;
|
||||
&[data-layout*="layers"][data-layout*="libraries"][data-layout*="sitemap-pages"] {
|
||||
grid-template-rows: 11.5rem 25% 1fr;
|
||||
}
|
||||
|
||||
|
||||
flex-direction: column;
|
||||
padding-top: 48px;
|
||||
height: 100%;
|
||||
|
|
@ -151,20 +150,17 @@ $width-settings-bar: 16rem;
|
|||
transform: rotate(45deg);
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-bar .tool-window {
|
||||
flex: none;
|
||||
height: auto;
|
||||
flex: none;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -199,11 +195,8 @@ $width-settings-bar: 16rem;
|
|||
padding-bottom: 1px;
|
||||
|
||||
&.open {
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
|
||||
.element-list-body {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-container-tabs {
|
||||
background: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.25rem;
|
||||
background: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
align-items: center;
|
||||
background: $color-gray-60;
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5rem 0.25rem 0 0.25rem ;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: $color-gray-60;
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5rem 0.25rem 0 0.25rem;
|
||||
width: 100%;
|
||||
|
||||
&.current{
|
||||
background: $color-gray-50;
|
||||
}
|
||||
&.current {
|
||||
background: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-container-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tab-element, .tab-element-content {
|
||||
height: 100%;
|
||||
.tab-element,
|
||||
.tab-element-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
foreignObject {
|
||||
.text-editor, .rich-text {
|
||||
.text-editor,
|
||||
.rich-text {
|
||||
color: $color-black;
|
||||
height: 100%;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -59,4 +60,3 @@ foreignObject {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,25 +33,17 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.current {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.settings-profile {
|
||||
.forms-container {
|
||||
margin-top: 80px;
|
||||
|
|
@ -126,7 +125,7 @@
|
|||
z-index: 14;
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
input[type="file"] {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
|
|
@ -137,8 +136,12 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
img {display: none;}
|
||||
.update-overlay {opacity: 1};
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
.update-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.viewer-header {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 48px;
|
||||
padding: 0 $size-4 0 55px;
|
||||
|
|
@ -115,7 +115,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.breadcrumb, .current-frame {
|
||||
.breadcrumb,
|
||||
.current-frame {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.viewer-thumbnails {
|
||||
grid-row: 1 / span 1;
|
||||
grid-column: 1 / span 1;
|
||||
grid-column: 1 / span 1;
|
||||
|
||||
background-color: $color-gray-50;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.workspace-header {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 48px;
|
||||
padding: $size-1 $size-4 $size-1 55px;
|
||||
|
|
@ -35,17 +35,13 @@
|
|||
fill: $color-gray-30;
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,19 +112,19 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-name {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
background: $color-gray-50;
|
||||
color: $color-gray-10;
|
||||
margin-bottom: -1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
background: $color-gray-50;
|
||||
color: $color-gray-10;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +134,7 @@
|
|||
left: 40px;
|
||||
width: 270px;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
@include animation(0, 0.2s, fadeInDown);
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
|
|
@ -208,13 +204,21 @@
|
|||
display: flex;
|
||||
|
||||
&.error {
|
||||
.label { color: $color-danger; }
|
||||
.icon svg { fill: $color-danger; }
|
||||
.label {
|
||||
color: $color-danger;
|
||||
}
|
||||
.icon svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.pending {
|
||||
.label { color: $color-warning; }
|
||||
.icon svg { fill: $color-warning; }
|
||||
.label {
|
||||
color: $color-warning;
|
||||
}
|
||||
.icon svg {
|
||||
fill: $color-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@
|
|||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,10 +180,10 @@
|
|||
.viewport-controls {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-canvas, .page-layout {
|
||||
.page-canvas,
|
||||
.page-layout {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +223,6 @@
|
|||
stroke: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.workspace-frame-label {
|
||||
|
|
@ -242,7 +240,7 @@
|
|||
font-family: worksans;
|
||||
padding: 2px 12px;
|
||||
border-radius: 4px;
|
||||
display:flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
|
|
@ -335,4 +333,3 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue