Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
4
public/scss/abstracts/_abstracts.scss
Normal file
4
public/scss/abstracts/_abstracts.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import './variable';
|
||||
@import './inheritance';
|
||||
@import './mixin';
|
||||
@import './maps';
|
||||
193
public/scss/abstracts/_bs-custom.scss
Normal file
193
public/scss/abstracts/_bs-custom.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
//to ignore cli warning about deprecated mixin
|
||||
$enable-deprecation-messages: false;
|
||||
$ignore-warning : true;
|
||||
|
||||
// Custom class not bootstrap
|
||||
$fn:'HelveticaNeue'; // fn = font normal
|
||||
$fm:'HelveticaNeueMed'; // fm = font Medium
|
||||
$border-radius: 0.75rem;
|
||||
// Body
|
||||
$body-bg : #f5f5f5;
|
||||
$body-color: #888888;
|
||||
$headings-color: #000;
|
||||
// Typography
|
||||
$font-family-base: 'Roboto', sans-serif;
|
||||
$headings-font-weight : 600;
|
||||
// $headings-font-family: $fm;
|
||||
|
||||
$font-size-base : 0.875rem !default;
|
||||
$font-weight-base : 400 !default;
|
||||
// $line-height-base: 1.6;
|
||||
$h1-font-size : 2.25rem;
|
||||
$h2-font-size : 1.875rem;
|
||||
$h3-font-size : 1.5rem;
|
||||
$h4-font-size : 1.125rem;
|
||||
$h5-font-size : 1rem;
|
||||
$h6-font-size : 0.938rem;
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
$white : #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black : #000 !default;
|
||||
|
||||
|
||||
$blue : #5e72e4;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink : #e83e8c !default;
|
||||
$red : #EE3232;
|
||||
$orange: #ff9900 !default;
|
||||
$yellow: #FFFA6F;
|
||||
$green : #297F00;
|
||||
$teal : #20c997 !default;
|
||||
$cyan : #3065D0;
|
||||
|
||||
|
||||
|
||||
$grays: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$grays: map-merge((
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900),
|
||||
$grays);
|
||||
|
||||
|
||||
$muted : #89879f;
|
||||
$text-muted: #89879f;
|
||||
$mine-shaft: #262626;
|
||||
$ebony-clay: #232833;
|
||||
|
||||
$colors: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$colors: map-merge((
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800),
|
||||
$colors);
|
||||
|
||||
|
||||
|
||||
$primary : #F93A0B !default;
|
||||
$secondary: #145650 !default;
|
||||
$success : #2adb7b !default;
|
||||
$info : #D653C1 !default;
|
||||
$warning : #ffa755 !default;
|
||||
$danger : #f72b50 !default;
|
||||
$light : #e8e8e8 !default;
|
||||
$dark : #6e6e6e;
|
||||
|
||||
|
||||
:root{
|
||||
--primary: #{$primary};
|
||||
--secondary: #{$secondary};
|
||||
--primary-hover: #{darken($primary, 10)};
|
||||
--primary-dark: #{darken($primary, 30)};
|
||||
--rgba-primary-1: #{rgba($primary, 0.1)};
|
||||
--rgba-primary-2: #{rgba($primary, 0.2)};
|
||||
--rgba-primary-3: #{rgba($primary, 0.3)};
|
||||
--rgba-primary-4: #{rgba($primary, 0.4)};
|
||||
--rgba-primary-5: #{rgba($primary, 0.5)};
|
||||
--rgba-primary-6: #{rgba($primary, 0.6)};
|
||||
--rgba-primary-7: #{rgba($primary, 0.7)};
|
||||
--rgba-primary-8: #{rgba($primary, 0.8)};
|
||||
--rgba-primary-9: #{rgba($primary, 0.9)};
|
||||
--font-family-base: #{$font-family-base};
|
||||
--font-family-title: #{$font-family-base};
|
||||
--title: #{$headings-color};
|
||||
|
||||
|
||||
|
||||
// sidebar header
|
||||
--dz-sidebar-width: 16.5rem;
|
||||
--dz-header-height: 4.5rem;
|
||||
--dz-sidebar-pos : absolute;
|
||||
--dz-header-pos : relative;
|
||||
--dz-side-nav-padding : .85rem 1.5rem;
|
||||
--dz-side-nav-margin : 0 0;
|
||||
--dz-side-nav-size : 0.9375rem;
|
||||
--dz-side-ico-size : 1.2rem;
|
||||
--dz-side-ico-height : auto;
|
||||
--dz-side-ico-width : auto;
|
||||
--dz-side-sub_nav-padding : .4rem 1rem .4rem 4rem;
|
||||
--dz-side-sub_nav-size : 0.85rem;
|
||||
--dz-head-title-size : 1.25rem;
|
||||
--dz-side-menu-direction : column;
|
||||
--dz-side-menu-padding : 0 0;
|
||||
--dz-side-profile : block;
|
||||
--dz-side-info : block;
|
||||
--dz-side-copyright : block;
|
||||
|
||||
|
||||
// list
|
||||
|
||||
--dz-list-space-x : 1.25rem;
|
||||
--dz-list-space-y : .5rem;
|
||||
--dz-list-size : .875rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
$theme-colors: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$theme-colors: map-merge(("primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark),
|
||||
$theme-colors);
|
||||
|
||||
|
||||
// $base-font-size : 0.8125rem !default;
|
||||
$heading-primary-size: 1.8rem;
|
||||
$sub-heading-size : 1.6rem !default;
|
||||
|
||||
$grid-gutter-width: 30px;
|
||||
|
||||
$dropdown-lik-color: $body-color;
|
||||
|
||||
|
||||
$border-color : #EEEEEE;
|
||||
$headings-color:#3d4465 !default;
|
||||
$rounded : 1.75rem ;
|
||||
|
||||
$radius-sm:0.375rem;
|
||||
|
||||
$grid-breakpoints: (xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1440);
|
||||
154
public/scss/abstracts/_inheritance.scss
Normal file
154
public/scss/abstracts/_inheritance.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
%gradient_one {
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
}
|
||||
|
||||
%gradient-1 {
|
||||
background: #f0a907;
|
||||
background: -moz-linear-gradient(top, #f0a907 0%, #f53c79 100%);
|
||||
background: -webkit-linear-gradient(top, #f0a907 0%,#f53c79 100%);
|
||||
background: linear-gradient(to bottom, #f0a907 0%,#f53c79 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0a907', endColorstr='#f53c79',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-2 {
|
||||
background: #4dedf5;
|
||||
background: -moz-linear-gradient(top, #4dedf5 0%, #480ceb 100%);
|
||||
background: -webkit-linear-gradient(top, #4dedf5 0%,#480ceb 100%);
|
||||
background: linear-gradient(to bottom, #4dedf5 0%,#480ceb 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dedf5', endColorstr='#480ceb',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-3 {
|
||||
background: #51f5ae;
|
||||
background: -moz-linear-gradient(top, #51f5ae 0%, #3fbcda 100%);
|
||||
background: -webkit-linear-gradient(top, #51f5ae 0%,#3fbcda 100%);
|
||||
background: linear-gradient(to bottom, #51f5ae 0%,#3fbcda 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51f5ae', endColorstr='#3fbcda',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-4 {
|
||||
background: #f25521;
|
||||
background: -moz-linear-gradient(left, #f25521 0%, #f9c70a 100%);
|
||||
background: -webkit-linear-gradient(left, #f25521 0%,#f9c70a 100%);
|
||||
background: linear-gradient(to right, #f25521 0%,#f9c70a 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25521', endColorstr='#f9c70a',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-5 {
|
||||
background: #f53c79;
|
||||
background: -moz-linear-gradient(left, #f53c79 0%, #f0a907 100%);
|
||||
background: -webkit-linear-gradient(left, #f53c79 0%,#f0a907 100%);
|
||||
background: linear-gradient(to right, #f53c79 0%,#f0a907 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f53c79', endColorstr='#f0a907',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-6 {
|
||||
background: #36b9d8;
|
||||
background: -moz-linear-gradient(left, #36b9d8 0%, #4bffa2 100%);
|
||||
background: -webkit-linear-gradient(left, #36b9d8 0%,#4bffa2 100%);
|
||||
background: linear-gradient(to right, #36b9d8 0%,#4bffa2 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36b9d8', endColorstr='#4bffa2',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-7 {
|
||||
background: #4400eb;
|
||||
background: -moz-linear-gradient(left, #4400eb 0%, #44e7f5 100%);
|
||||
background: -webkit-linear-gradient(left, #4400eb 0%,#44e7f5 100%);
|
||||
background: linear-gradient(to right, #4400eb 0%,#44e7f5 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4400eb', endColorstr='#44e7f5',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-8 {
|
||||
background: #F7B00F;
|
||||
background: -moz-linear-gradient(top, #F7B00F 0%, #F25521 100%);
|
||||
background: -webkit-linear-gradient(top, #F7B00F 0%,#F25521 100%);
|
||||
background: linear-gradient(to bottom, #F7B00F 0%,#F25521 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7B00F', endColorstr='#F25521',GradientType=1 );
|
||||
|
||||
// background: linear-gradient(top, #f25521 0%, #f9c70a 100%);
|
||||
}
|
||||
|
||||
%gradient-9 {
|
||||
background: #f31e7a !important;
|
||||
background: -moz-linear-gradient(left, #f31e7a 0%, #fd712c 100%);
|
||||
background: -webkit-linear-gradient(left, #f31e7a 0%,#fd712c 100%);
|
||||
background: linear-gradient(to right, #f31e7a 0%,#fd712c 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f31e7a', endColorstr='#fd712c',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-10 {
|
||||
background: #f25521 !important;
|
||||
background: -moz-linear-gradient(left, #f25521 0%, #f9c70a 100%);
|
||||
background: -webkit-linear-gradient(left, #f25521 0%,#f9c70a 100%);
|
||||
background: linear-gradient(to top, #f25521 0%,#f9c70a 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25521', endColorstr='#f9c70a',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-11 {
|
||||
background: #3398fb;
|
||||
background: -moz-linear-gradient(left, #3398fb 0%, #8553ee 100%);
|
||||
background: -webkit-linear-gradient(left, #3398fb 0%,#8553ee 100%);
|
||||
background: linear-gradient(to right, #3398fb 0%,#8553ee 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3398fb', endColorstr='#8553ee',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-12 {
|
||||
background: #36e1b4;
|
||||
background: -moz-linear-gradient(left, #36e1b4 0%, #11cae7 100%);
|
||||
background: -webkit-linear-gradient(left, #36e1b4 0%,#11cae7 100%);
|
||||
background: linear-gradient(to right, #36e1b4 0%,#11cae7 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36e1b4', endColorstr='#11cae7',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-13 {
|
||||
background: #ffbf31;
|
||||
background: -moz-linear-gradient(left, #ffbf31 0%, #ff890e 100%);
|
||||
background: -webkit-linear-gradient(left, #ffbf31 0%,#ff890e 100%);
|
||||
background: linear-gradient(to right, #ffbf31 0%,#ff890e 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf31', endColorstr='#ff890e',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-14 {
|
||||
background: #23bdb8;
|
||||
background: -moz-linear-gradient(-45deg, #23bdb8 0%, #43e794 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #23bdb8 0%,#43e794 100%);
|
||||
background: linear-gradient(135deg, #23bdb8 0%,#43e794 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23bdb8', endColorstr='#43e794',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-15 {
|
||||
background: #9a56ff;
|
||||
background: -moz-linear-gradient(-45deg, #9a56ff 0%, #e36cd9 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #9a56ff 0%,#e36cd9 100%);
|
||||
background: linear-gradient(135deg, #9a56ff 0%,#e36cd9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a56ff', endColorstr='#e36cd9',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-16 {
|
||||
background: #f48665;
|
||||
background: -moz-linear-gradient(-45deg, #f48665 0%, #fda23f 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #f48665 0%,#fda23f 100%);
|
||||
background: linear-gradient(135deg, #f48665 0%,#fda23f 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48665', endColorstr='#fda23f',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-17 {
|
||||
background: #e36cd9;
|
||||
background: -moz-linear-gradient(-45deg, #e36cd9 0%, #fe60ae 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #e36cd9 0%,#fe60ae 100%);
|
||||
background: linear-gradient(135deg, #e36cd9 0%,#fe60ae 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e36cd9', endColorstr='#fe60ae',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-18 {
|
||||
background: #a15cff;
|
||||
background: -moz-linear-gradient(left, #a15cff 0%, #ce82fd 100%);
|
||||
background: -webkit-linear-gradient(left, #a15cff 0%,#ce82fd 100%);
|
||||
background: linear-gradient(to right, #a15cff 0%,#ce82fd 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a15cff', endColorstr='#ce82fd',GradientType=1 );
|
||||
}
|
||||
|
||||
%text-gradient {
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
22
public/scss/abstracts/_maps.scss
Normal file
22
public/scss/abstracts/_maps.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
$borders: (
|
||||
"right", "left", "top", "bottom", ""
|
||||
);
|
||||
|
||||
|
||||
$theme_backgrounds: (
|
||||
"color_1": $color_pallate_1,
|
||||
"color_2": $color_pallate_2,
|
||||
"color_3": $color_pallate_3,
|
||||
"color_4": $color_pallate_4,
|
||||
"color_5": $color_pallate_5,
|
||||
"color_6": $color_pallate_6,
|
||||
"color_7": $color_pallate_7,
|
||||
"color_8": $color_pallate_8,
|
||||
"color_9": $color_pallate_9,
|
||||
"color_10": $color_pallate_10,
|
||||
"color_11": $color_pallate_11,
|
||||
"color_12": $color_pallate_12,
|
||||
"color_13": $color_pallate_13,
|
||||
"color_14": $color_pallate_14,
|
||||
"color_15": $color_pallate_15
|
||||
);
|
||||
112
public/scss/abstracts/_mixin.scss
Normal file
112
public/scss/abstracts/_mixin.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
//MEDIA QUERY MANAGER
|
||||
|
||||
/*
|
||||
0 - 600: Phone
|
||||
600 - 900: Tablet portrait
|
||||
900 - 1200: Tablet landscape
|
||||
1200 - 1800: Normal styles
|
||||
1800+ : Big Desktop
|
||||
1em = 16px
|
||||
The smaller device rules always should write below the bigger device rules
|
||||
Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
|
||||
*/
|
||||
|
||||
@mixin respond($breakpoint) {
|
||||
|
||||
@if($breakpoint == "phone") {
|
||||
|
||||
@media only screen and (max-width: 35.9375rem) { @content; } //575
|
||||
}
|
||||
|
||||
@if($breakpoint == "phone-land") {
|
||||
|
||||
@media only screen and (max-width: 47.9375rem) { @content; } //767
|
||||
}
|
||||
|
||||
@if($breakpoint == "tab-port") {
|
||||
|
||||
@media only screen and (max-width: 61.9375rem) { @content; } //991
|
||||
}
|
||||
|
||||
@if($breakpoint == "tab-land") {
|
||||
|
||||
@media only screen and (max-width: 74.9375rem) { @content; } //1199
|
||||
}
|
||||
|
||||
@if ($breakpoint == "laptop") {
|
||||
@media only screen and (max-width: 1480px) { @content; } //1480
|
||||
}
|
||||
|
||||
@if ($breakpoint == "desktop") {
|
||||
|
||||
@media only screen and (min-width: 75rem) { @content; } //1200
|
||||
}
|
||||
|
||||
@if($breakpoint == "big-desktop") {
|
||||
|
||||
@media only screen and (min-width: 112.5rem) { @content; } //1800
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
//don't use it untill you need this too much
|
||||
@mixin custommq($min: null, $max: null) {
|
||||
@if ($min != null and $max != null) {
|
||||
@media only screen and (min-width: $min) and (max-width: $max) { @content; }
|
||||
}
|
||||
|
||||
@if ($min == null and $max != null) {
|
||||
@media only screen and (max-width: $max) { @content; }
|
||||
}
|
||||
|
||||
@if ($min != null and $max == null) {
|
||||
@media only screen and (min-width: $min) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
// transition
|
||||
@mixin transitionSlow{
|
||||
-webkit-transition: all 0.8s;
|
||||
-ms-transition: all 0.8s;
|
||||
transition: all 0.8s;
|
||||
}
|
||||
@mixin transitionMedium{
|
||||
-webkit-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
@mixin transitionFast{
|
||||
-webkit-transition: all 0.2s;
|
||||
-ms-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@mixin transformScale{
|
||||
transform:scale(1);
|
||||
-moz-transform:scale(1);
|
||||
-webkit-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
}
|
||||
@mixin transformScaleXS{
|
||||
transform:scale(0.8);
|
||||
-moz-transform:scale(0.8);
|
||||
-webkit-transform:scale(0.8);
|
||||
-ms-transform:scale(0.8);
|
||||
-o-transform:scale(0.8);
|
||||
}
|
||||
@mixin transformScaleSM{
|
||||
transform:scale(1.2);
|
||||
-moz-transform:scale(1.2);
|
||||
-webkit-transform:scale(1.2);
|
||||
-ms-transform:scale(1.2);
|
||||
-o-transform:scale(1.2);
|
||||
}
|
||||
@mixin transformScaleMD{
|
||||
transform:scale(1.5);
|
||||
-moz-transform:scale(1.5);
|
||||
-webkit-transform:scale(1.5);
|
||||
-ms-transform:scale(1.5);
|
||||
-o-transform:scale(1.5);
|
||||
}
|
||||
171
public/scss/abstracts/_variable.scss
Normal file
171
public/scss/abstracts/_variable.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
//customize bootstrap
|
||||
@import './bs-custom';
|
||||
|
||||
$strong:#646c9a;
|
||||
//$border: #e6e6e6;
|
||||
$shadow: 0rem 0rem 2.5rem 0rem rgba(82,63,105,0.1);
|
||||
//$body-bg: #f5f5f5;
|
||||
|
||||
|
||||
///////////////
|
||||
// Solid Color
|
||||
///////////////
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$charade: #23252F;
|
||||
|
||||
/////////////////////////
|
||||
// Light Version Color
|
||||
/////////////////////////
|
||||
|
||||
$text-dark: #312a2a;
|
||||
$text-gray: #737B8B;
|
||||
$text: #888888;
|
||||
$border: #e6e6e6;
|
||||
$body-bg: #f5f5f5;
|
||||
$card: #fff;
|
||||
//$dark_bg_lighter: #1E2A4A;
|
||||
|
||||
|
||||
/////////////////////////
|
||||
// Dark Version Color
|
||||
/////////////////////////
|
||||
$d-ctd: #ddd;
|
||||
$d-ctl: #828690;
|
||||
$d-text-dark : #fff;
|
||||
$d-text-gray : #b3b3b3;
|
||||
$d-text : #828690;
|
||||
$d-border: #2e2e42;
|
||||
$d-bg: #17171E;
|
||||
$dark-card: #212130;
|
||||
$dark_bg_lighter: #1E2A4A;
|
||||
|
||||
/////////////////////////
|
||||
// Primary Light
|
||||
/////////////////////////
|
||||
$primary-light: lighten($primary, 65%);
|
||||
$secondary-light: lighten($secondary, 70%);
|
||||
$success-light: lighten($success, 42%);
|
||||
$warning-light: lighten($warning, 25%);
|
||||
$danger-light: lighten($danger, 38%);
|
||||
$info-light: lighten($info, 38%);
|
||||
$dark-light: lighten($dark, 50%);
|
||||
|
||||
/////////////////////////
|
||||
// Opacity
|
||||
/////////////////////////
|
||||
$primary-opacity: rgba($primary, 0.1);
|
||||
$secondary-opacity: rgba($secondary, 0.15);
|
||||
$success-opacity: rgba($success, 0.1);
|
||||
$warning-opacity: rgba($warning, 0.1);
|
||||
$danger-opacity: rgba($danger, 0.15);
|
||||
$info-opacity: rgba($info, 0.1);
|
||||
$dark-opacity: rgba($dark, 0.15);
|
||||
|
||||
////////////////////////
|
||||
// Light Version Color
|
||||
////////////////////////
|
||||
$l-ctd: #464a53;
|
||||
$l-ctl: #828690;
|
||||
$l-border: #eaeaea;
|
||||
$l-bg: #f2f4fa;
|
||||
$heading: #333;
|
||||
|
||||
///////////////////
|
||||
// Material Colors
|
||||
///////////////////
|
||||
$dusty-gray: #999999;
|
||||
$gallery: #EEEEEE;
|
||||
$gray: #898989;
|
||||
$input-border-color: $border;
|
||||
|
||||
|
||||
///////////////////
|
||||
// Social Colors
|
||||
///////////////////
|
||||
$facebook: #3b5998;
|
||||
$twitter: #1da1f2;
|
||||
$youtube: #FF0000;
|
||||
$google-plus: #db4439;
|
||||
$linkedin: #007bb6;
|
||||
$instagram: #c32aa3;
|
||||
$pinterest: #bd081c;
|
||||
$google: #4285f4;
|
||||
$snapchat: #fffc00;
|
||||
$whatsapp: #25d366;
|
||||
$tumblr: #35465d;
|
||||
$reddit: #ff4500;
|
||||
$spotify: #1ed760;
|
||||
$yahoo: #430297;
|
||||
$dribbble: #ea4c89;
|
||||
$skype: #00aff0;
|
||||
$quora: #aa2200;
|
||||
$riverBed: #4C585C;
|
||||
$vimeo: #1ab7ea;
|
||||
|
||||
|
||||
///////////////////
|
||||
// Misc Colors
|
||||
///////////////////
|
||||
$iron: #DDDFE1;
|
||||
$grey: #D2D6DE;
|
||||
$pale-sky: #6a707e;
|
||||
$athensGray: #F0F0F2;
|
||||
$sky: #2290FF;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$color_pallate_1: $white;
|
||||
$color_pallate_2: #6610f2;
|
||||
$color_pallate_3: $primary;
|
||||
$color_pallate_4: #4d06a5;
|
||||
$color_pallate_5: #dc3545;
|
||||
$color_pallate_6: #fd7e14;
|
||||
$color_pallate_7: #ffc107;
|
||||
$color_pallate_8: #fff;
|
||||
$color_pallate_9: #20c997;
|
||||
$color_pallate_10: #17a2b8;
|
||||
$color_pallate_11: #94618E;
|
||||
$color_pallate_12:#343a40 ;
|
||||
$color_pallate_13: #2a2a2a;
|
||||
$color_pallate_14: #4885ed;
|
||||
$color_pallate_15: #4cb32b;
|
||||
|
||||
//utility variables
|
||||
$radius: 0.5rem;
|
||||
|
||||
|
||||
$loader--width: 15.625rem;
|
||||
$loader-dot--size: 1.25rem;
|
||||
$dlab-pos-right: right;
|
||||
$dlab-pos-left: left;
|
||||
$dlab-row : row wrap;
|
||||
|
||||
:root{
|
||||
--card : #{$card};
|
||||
--text-dark : #{$text-dark};
|
||||
--text-gray : #{$text-gray};
|
||||
--text : #{$text};
|
||||
--body-bg : #{$body-bg};
|
||||
--light : #{$body-bg};
|
||||
--border : #{$border};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user