mirror of
https://github.com/penpot/penpot.git
synced 2025-08-02 11:48:30 +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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue