first commit

This commit is contained in:
2022-04-13 13:51:55 +07:00
commit 47e209c023
3107 changed files with 238911 additions and 0 deletions

View File

@ -0,0 +1,4 @@
@import './variable';
@import './inheritance';
@import './mixin';
@import './maps';

View File

@ -0,0 +1,145 @@
//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 : #F9F9F9;
$body-color: #7e7e7e;
// Typography
$font-family-base: 'Roboto',
sans-serif;
$headings-font-weight : 500;
// $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 : #0B2A97 !default;
/*$primary : #7356f1 !default;*/
$secondary: #A02CFA !default;
$success : #2BC155 !default;
$info : #1EA7C5 !default;
$warning : #FFBC11 !default;
$danger : #F94687 !default;
$light : #F4F5F9 !default;
$dark : #B1B1B1;
$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 : 0.75rem ;
$grid-breakpoints: (xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440);

View 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;
}

View 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
);

View File

@ -0,0 +1,115 @@
//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: 575px) { @content; }
}
@if($breakpoint == "phone-land") {
@media only screen and (max-width: 767px) { @content; }
}
@if($breakpoint == "tab-port") {
@media only screen and (max-width: 991px) { @content; }
}
@if($breakpoint == "tab-land") {
@media only screen and (max-width: 1199px) { @content; }
}
@if ($breakpoint == "laptop") {
@media only screen and (max-width: 1400px) { @content; }
}
@if ($breakpoint == "desktop") {
@media only screen and (min-width: 1200px) { @content; }
}
@if($breakpoint == "mid-desktop") {
@media only screen and (max-width: 1600px) { @content; }
}
@if($breakpoint == "big-desktop") {
@media only screen and (min-width: 1800px) { @content; }
}
}
//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);
}

View File

@ -0,0 +1,122 @@
//customize bootstrap
@import './bs-custom';
$strong:#646c9a;
$border: #f0f1f5;
$shadow: 0px 0Epx 40px 0px rgba(82,63,105,0.1);
$body-bg: #F9F9F9;
///////////////
// Solid Color
///////////////
$white: #fff;
$black: #000;
$charade: #23252F;
/////////////////////////
// Dark Version Color
/////////////////////////
$d-ctd: #ddd;
$d-ctl: #828690;
$d-border: #333a54;
$d-bg: #181f39;
$dark-card: #1e2746;
$dark_bg_lighter: #1E2A4A;
/////////////////////////
// Primary Light
/////////////////////////
$primary-light: lighten($primary, 60%);
$secondary-light: lighten($secondary, 36%);
$success-light: lighten($success, 47%);
$warning-light: lighten($warning, 40%);
$danger-light: lighten($danger, 35%);
$info-light: lighten($info, 35%);
$dark-light: lighten($dark, 25%);
/////////////////////////
// Opacity
/////////////////////////
$primary-opacity: rgba($primary, 0.2);
$secondary-opacity: rgba($secondary, 0.5);
$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.35);
////////////////////////
// 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 for coller pallate
$color_pallate_1: $white;
$color_pallate_2: #143b64;
$color_pallate_3: $primary;
$color_pallate_4: #4527a0;
$color_pallate_5: #c62828;
$color_pallate_6: #283593;
$color_pallate_7: #7356f1;
$color_pallate_8: #3695eb;
$color_pallate_9: #00838f;
$color_pallate_10: #ff8f16;
$color_pallate_11: #6673fd;
$color_pallate_12: #558b2f;
$color_pallate_13: #2a2a2a;
$color_pallate_14: #1367c8;
$color_pallate_15: #ed0b4c;
//utility variables
$radius: 1.25rem;