Initial commit.
This commit is contained in:
Leo
96
scss/_variables.scss
Normal file
96
scss/_variables.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
// 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: #0d6efd !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #d63384 !default;
|
||||
$red: #da0000 !default; // Customized
|
||||
$orange: hsla(30, 100%, 50%, 1) !default; // The Gold color from God
|
||||
$green: hsl(134, 87%, 30%) !default; // Customized
|
||||
$green: #198754 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #0dcaf0 !default;
|
||||
|
||||
$primary: $purple;
|
||||
$info: $blue;
|
||||
$warning: $orange;
|
||||
|
||||
// Customize the light and dark text colors for use in our color contrast function.
|
||||
$primary-50: #f1e8ff;
|
||||
$secondary-50: #e9eff2;
|
||||
$success-50: #d9ffe1;
|
||||
$info-50: hsl(215, 100%, 97%);
|
||||
$warning-50: hsl(50, 100%, 96%);
|
||||
$danger-50: hsl(350, 100%, 96%);
|
||||
|
||||
// Custom schematic colors
|
||||
// TODO: Remove this section
|
||||
$primary-lighter: #af83ff;
|
||||
$primary-lightest: #f1e8ff;
|
||||
$secondary-lighter: #e3e6e8;
|
||||
$secondary-lightest: #e9eff2;
|
||||
$success-lighter: #42ad5b;
|
||||
$success-lightest: #d9ffe1;
|
||||
$info-lighter: #67a3fb;
|
||||
$info-lightest: hsla(215, 100%, 97%, 1);
|
||||
$warning-lighter: #ffb972;
|
||||
$warning-lightest: hsla(50, 100%, 96%, 1);
|
||||
$danger-lighter: #ff7991;
|
||||
$danger-lightest: hsl(350, 100%, 96%);
|
||||
|
||||
// Options
|
||||
$enable-shadows: true;
|
||||
|
||||
// Body
|
||||
$body-bg: hsl(260, 27%, 94%);
|
||||
|
||||
// Links
|
||||
$link-decoration: none;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "Roboto", sans-serif !default;
|
||||
$font-size-base: 0.9rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
$h1-font-size: $font-size-base * 1.6 !default;
|
||||
$h2-font-size: $font-size-base * 1.4 !default;
|
||||
$h3-font-size: $font-size-base * 1.3 !default;
|
||||
$h4-font-size: $font-size-base * 1.2 !default;
|
||||
$h5-font-size: $font-size-base * 1.1 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
$headings-font-weight: bold; // Make headings bold
|
||||
|
||||
// Code
|
||||
$code-font-size: 100%;
|
||||
$code-color: $primary;
|
||||
|
||||
// Forms
|
||||
$input-bg: $white;
|
||||
$input-transition: null;
|
||||
|
||||
// Buttons
|
||||
$btn-box-shadow: null;
|
||||
$enable-gradients: true;
|
||||
$btn-transition: none;
|
||||
|
||||
// Navs
|
||||
$nav-link-transition: none;
|
||||
|
||||
// Navbar
|
||||
$navbar-dark-color: rgba($white, .8) !default;
|
||||
$navbar-dark-hover-color: $white!default;
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-divider: quote(">");
|
||||
184
scss/bootstrap/_buttons.scss
Normal file
184
scss/bootstrap/_buttons.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
// Default buttons
|
||||
.btn {
|
||||
// Remove border
|
||||
&-primary, &-secondary, &-success, &-info, &-warning, &-danger, &-light, &-dark {
|
||||
// border-color: transparent;
|
||||
}
|
||||
|
||||
// Tertiary
|
||||
&-tertiary {
|
||||
color: $gray-600;
|
||||
background-color: $gray-200;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: $black;
|
||||
background-color: $gray-300;
|
||||
border-color: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $green-600;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $orange-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline buttons
|
||||
.btn-outline {
|
||||
&-success:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-warning:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Tertiary
|
||||
&-tertiary {
|
||||
color: $gray-600;
|
||||
border-color: $gray-400;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
background-color: $gray-200;
|
||||
border-color: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tender class
|
||||
.btn-tender {
|
||||
&-primary {
|
||||
color: $primary;
|
||||
background-color: $primary-50;
|
||||
border-color: $purple-400;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
color: $gray-800;
|
||||
background-color: $gray-200;
|
||||
border-color: $gray-500;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Tertiary
|
||||
&-tertiary {
|
||||
color: $gray-700;
|
||||
background-color: $gray-100;
|
||||
border-color: $gray-400;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: $black;
|
||||
background-color: $gray-200;
|
||||
border-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
color: $success;
|
||||
background-color: $success-50;
|
||||
border-color: $green-400;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
color: $info;
|
||||
background-color: $info-50;
|
||||
border-color: $blue-400;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: $warning;
|
||||
background-color: $warning-50;
|
||||
border-color: $orange-400;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
color: $danger;
|
||||
background-color: $danger-50;
|
||||
border-color: $red-400;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Phantom class
|
||||
.btn-phantom {
|
||||
&-primary, &-secondary, &-success, &-info, &-warning, &-danger {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&-primary:hover {
|
||||
color: $primary;
|
||||
background-color: $primary-50;
|
||||
}
|
||||
&-secondary:hover {
|
||||
color: $black;
|
||||
background-color: $secondary-50;
|
||||
}
|
||||
&-tertiary:hover {
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
}
|
||||
&-success:hover {
|
||||
color: $success;
|
||||
background-color: $success-50;
|
||||
}
|
||||
&-info:hover {
|
||||
color: $info;
|
||||
background-color: $info-50;
|
||||
}
|
||||
&-warning:hover {
|
||||
color: $warning;
|
||||
background-color: $warning-50;
|
||||
}
|
||||
&-danger:hover {
|
||||
color: $danger;
|
||||
background-color: $danger-50;
|
||||
}
|
||||
}
|
||||
5
scss/bootstrap/_code.scss
Normal file
5
scss/bootstrap/_code.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
code {
|
||||
padding: 0.2rem 0.3rem;
|
||||
background-color: $primary-lightest;
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
3
scss/bootstrap/_form-control.scss
Normal file
3
scss/bootstrap/_form-control.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.form-control {
|
||||
background-clip: inherit; // Remove weird border in input boxes
|
||||
}
|
||||
19
scss/bootstrap/_nav.scss
Normal file
19
scss/bootstrap/_nav.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// Beautiful nav tabs
|
||||
.nav-tabs {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.nav-tabs .nav-link {
|
||||
border: none;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid $primary;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
58
scss/bootstrap/_navbar.scss
Normal file
58
scss/bootstrap/_navbar.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
.navbar {
|
||||
z-index: 1040;
|
||||
background-image: none;
|
||||
|
||||
.nav-link {
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Make dropdown menus auto drop
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
// z-index: 10000;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
// transition: all .15s linear;
|
||||
// animation: disappear 0.15s linear;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
pointer-events: auto;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
// transition: all .15s linear;
|
||||
animation: appear 0.15s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*@keyframes disappear {
|
||||
0% {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
transform: scale(0);
|
||||
}
|
||||
}*/
|
||||
}
|
||||
}
|
||||
27
scss/elements/footer.scss
Normal file
27
scss/elements/footer.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
#footer {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1.5rem;
|
||||
color: $gray-500;
|
||||
background-color: $gray-800;
|
||||
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: $font-size-base * 1.25;
|
||||
|
||||
&.small {
|
||||
font-size: $font-size-base * 1.5;
|
||||
font-variant: all-small-caps;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $gray-500;
|
||||
padding: 0.25rem 0;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
scss/elements/radio.scss
Normal file
20
scss/elements/radio.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
.essence-radio {
|
||||
margin: 0.5rem 0;
|
||||
padding-left: 0;
|
||||
|
||||
.form-check-input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.form-check-input[type=radio]:checked + label {
|
||||
background-color: $primary-50;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
89
scss/elements/sidebar.scss
Normal file
89
scss/elements/sidebar.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
#wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
||||
min-height: 100vh;
|
||||
width: 200px;
|
||||
padding: 5px 10px;
|
||||
|
||||
background-color: $white;
|
||||
|
||||
transition: none;
|
||||
|
||||
&-brand {
|
||||
margin: 10px;
|
||||
font-size: 1.125rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
margin: 10px 10px 5px;
|
||||
font-weight: bold;
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
&-link {
|
||||
padding: 10px 10px;
|
||||
border-radius: 5px;
|
||||
color: $secondary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background-color: $primary-lightest;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn-collapse {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar-collapsed-shown {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapsed {
|
||||
width: 60px;
|
||||
padding: 5px 5px;
|
||||
overflow-y: overlay;
|
||||
|
||||
transition: width 0.25s;
|
||||
|
||||
.sidebar-brand {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
padding: 10px 15px;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapsed-hidden {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-collapsed-shown {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
22
scss/essence.scss
Normal file
22
scss/essence.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
// Variables
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import 'variables';
|
||||
|
||||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
// Bootstrap components
|
||||
@import 'bootstrap/buttons';
|
||||
@import 'bootstrap/nav';
|
||||
@import 'bootstrap/navbar';
|
||||
|
||||
@import 'bootstrap/code';
|
||||
@import 'bootstrap/form-control';
|
||||
|
||||
// Vendor
|
||||
@import "vendors/prismjs";
|
||||
|
||||
// Essence components
|
||||
@import 'elements/sidebar';
|
||||
@import 'elements/footer';
|
||||
@import 'elements/radio';
|
||||
138
scss/vendors/prismjs.scss
vendored
Normal file
138
scss/vendors/prismjs.scss
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* Prism Substance Theme, based on Material Theme.
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2d3748;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Purple (keywords) */
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #d9a9ff; // #cc99cd;
|
||||
}
|
||||
|
||||
/* Yellow (classes, properties) */
|
||||
.token.entity,
|
||||
.token.name,
|
||||
.token.class-name,
|
||||
.token.class,
|
||||
.token.package,
|
||||
.token.scope,
|
||||
.token.attr-name {
|
||||
color: #ffe484; // #FFCB6B;
|
||||
}
|
||||
|
||||
/* Blue (functions) */
|
||||
.token.function-name,
|
||||
.token.boolean,
|
||||
.token.function {
|
||||
color: #82AAFF;
|
||||
}
|
||||
|
||||
/* Red (tags) */
|
||||
.token.tag,
|
||||
.token.namespace,
|
||||
.token.selector,
|
||||
.token.deleted {
|
||||
color: #ff8383; // #F07178;
|
||||
}
|
||||
|
||||
/* Green (strings, attribute values) */
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.property,
|
||||
.token.attr-value,
|
||||
.token.regex {
|
||||
color: #b5f4a5; // #C3E88D;
|
||||
}
|
||||
|
||||
/* Orange (numbers) */
|
||||
.token.number,
|
||||
.token.constant {
|
||||
color: #F78C6C;
|
||||
}
|
||||
|
||||
/* Cyan (signs) */
|
||||
.token.symbol,
|
||||
.token.punctuation,
|
||||
.token.operator,
|
||||
.token.url,
|
||||
.token.unit,
|
||||
.token.hexcode,
|
||||
.token.doctype-tag {
|
||||
color: #89DDFF;
|
||||
}
|
||||
|
||||
/* White (variables, CSS pseudo classes) */
|
||||
.token.variable,
|
||||
.token.pseudo-class {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Gray (comments) */
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #99a3d0; // Palelight
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
Reference in New Issue
Block a user