Skip to content

GitLab

Verified Commit 4e03f820 authored by Roberto Bochet's avatar Roberto Bochet
Browse files

Remove material-kit and implement buttons

parent db28e50b
Hide whitespace changes
Inline Side-by-side
assets/_sass/_config.scss
View file @ 4e03f820
/***************
COLOR VARIABLES
***************/
// Better default colors
// Cool
$blueish_gray: #292d32;
$aqua: #7FDBFF;
$blue: #0074D9;
$navy: #001F3F;
$teal: #39CCCC;
$green: #d4e157;
$olive: #3D9970;
$lime: #01FF70;
// Warm
$yellow: #fdd835;
$orange: #FF851B;
$red: #FF4136;
$fuchsia: #F012BE;
$purple: #B10DC9;
$maroon: #85144B;
// Gray Scale
$white: #fff;
$silver: #ddd;
$grey: #aaa;
$black: #111;
// Custom colors
$poul_yellow: #ffc500;
$coding_gym_blue: #47c1c7;
// Background colors
$bg_black: black;
$bg_very_dark: #101010;
$bg_darker: #101010;
$bg_a_bit_less_dark: #1b1b1b;
$bg_dark: #212121;
$bg_kinda_dark: #232323;
$bg_blueish_gray: $blueish_gray;
$bg_yellow: $poul_yellow;
$bg_red: $red;
// Color variables
$accent-color: $poul_yellow;
$primary-color: $bg_very_dark;
$secondary-color: $bg_dark;
$tertiary-color: #aaa;
$link-color: $accent-color;
$background-color: $bg_very_dark;
$bad-color: $red; // Bad color for errors, validation etc.
$good-color: $green; // Good color for success etc.
$info-color: $blue; // Good color for success etc.
$warning-color: $yellow; // Good color for success etc.
$subtle-color: $grey; // Subtle color for subtle text
/***************
CONSISTENT SETTINGS
***************/
......
assets/_sass/modules/_colors.scss → assets/_sass/colors/_backgrounds.scss
View file @ 4e03f820
/***************
BACKGROUND
***************/
%bg-light {
color: $black;
......@@ -80,6 +83,10 @@
}
}
/***************
SPECIFIC
***************/
body > div, .band {
@extend .bg-white
}
......
assets/_sass/colors/_buttons.scss 0 → 100644
View file @ 4e03f820
.btn {
& {
color: #fff !important;
background-color: #999;
border-color: #999;
box-shadow: 0 2px 2px 0 rgba(153,153,153,0.14),0 3px 1px -2px rgba(153,153,153,0.2),0 1px 5px 0 rgba(153,153,153,0.12);
&:hover {
color: #fff;
background-color: #919191;
border-color: #7a7a7a;
box-shadow: 0 14px 26px -12px rgba(153,153,153,0.42),0 4px 23px 0px rgba(0,0,0,0.12),0 8px 10px -5px rgba(153,153,153,0.2);
}
&:focus, &.focus {
box-shadow: 0 0 0 0.2rem #7a7a7a;
}
&:disabled, &.disabled {
color: #212529;
background-color: #999;
border-color: #999;
}
}
&-yellow {
color: #fff !important;
background-color: #ffc500;
border-color: #ffc500;
box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
&:hover {
color: #fff !important;
background-color: #ffc500;
border-color: #7f6200;
box-shadow: 0 14px 26px -12px rgba(255, 202, 43, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);
}
&:focus, &.focus {
box-shadow: 0 0 0 0.2rem rgba(127, 98, 0, 1);
}
&:disabled, &.disabled {
color: #212529 !important;
background-color: #ffc500;
border-color: #ffc500;
}
}
&-green {
color: #fff !important;
background-color: #387002;
border-color: #387002;
box-shadow: 0 2px 2px 0 rgba(28, 56, 1, 0.14), 0 3px 1px -2px rgba(28, 56, 1, 0.2), 0 1px 5px 0 rgba(28, 56, 1, 0.12);
&:hover {
color: #fff !important;
background-color: #387002;
border-color: #1c3801;
box-shadow: 0 14px 26px -12px rgba(43, 187, 3, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);
}
&:focus, &.focus {
box-shadow: 0 0 0 0.2rem rgb(28, 56, 1);
}
&:disabled, &.disabled {
color: #212529 !important;
background-color: #387002;
border-color: #1c3801;
}
}
&-red {
color: #fff !important;
background-color: #d32f2f;
border-color: #d32f2f;
box-shadow: 0 2px 2px 0 rgba(105, 23, 23, 0.14), 0 3px 1px -2px rgba(105, 23, 23, 0.2), 0 1px 5px 0 rgba(105, 23, 23, 0.12);
&:hover {
color: #fff !important;
background-color: #d32f2f;
border-color: #691717;
box-shadow: 0 14px 26px -12px rgba(213, 7, 7, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);
}
&:focus, &.focus {
box-shadow: 0 0 0 0.2rem rgb(105, 23, 23);
}
&:disabled, &.disabled {
color: #212529 !important;
background-color: #d32f2f;
border-color: #691717;
}
}
}
\ No newline at end of file
assets/_sass/colors/_colors.scss 0 → 100644
View file @ 4e03f820
/***************
COLOR VARIABLES
***************/
// Better default colors
// Cool
$blueish_gray: #292d32;
$aqua: #7FDBFF;
$blue: #0074D9;
$navy: #001F3F;
$teal: #39CCCC;
$green: #d4e157;
$olive: #3D9970;
$lime: #01FF70;
// Warm
$yellow: #fdd835;
$orange: #FF851B;
$red: #FF4136;
$fuchsia: #F012BE;
$purple: #B10DC9;
$maroon: #85144B;
// Gray Scale
$white: #fff;
$silver: #ddd;
$grey: #aaa;
$black: #111;
// Custom colors
$poul_yellow: #ffc500;
$coding_gym_blue: #47c1c7;
// Background colors
$bg_black: black;
$bg_very_dark: #101010;
$bg_darker: #101010;
$bg_a_bit_less_dark: #1b1b1b;
$bg_dark: #212121;
$bg_kinda_dark: #232323;
$bg_blueish_gray: $blueish_gray;
$bg_yellow: $poul_yellow;
$bg_red: $red;
// Color variables
$accent-color: $poul_yellow;
$primary-color: $bg_very_dark;
$secondary-color: $bg_dark;
$tertiary-color: #aaa;
$link-color: $accent-color;
$background-color: $bg_very_dark;
$bad-color: $red; // Bad color for errors, validation etc.
$good-color: $green; // Good color for success etc.
$info-color: $blue; // Good color for success etc.
$warning-color: $yellow; // Good color for success etc.
$subtle-color: $grey; // Subtle color for subtle text
\ No newline at end of file
assets/_sass/modules/_buttons.scss
View file @ 4e03f820
/***************
BUTTON DEFAULTS
***************/
%btn {
background-color: $accent-color;
display: inline-block;
position: relative;
font-family: $sans-serif;
text-decoration: none;
color: $white;
font-size: 1em;
line-height: 1.2em;
font-weight: normal;
padding: .5em 1.5em;
border: 0;
border-radius: 4px;
cursor: pointer;
margin-bottom: .5em;
transition: background-color 0.14s ease-in-out;
// hovering on the btn
&:hover, &:focus {
color: $white;
text-decoration: none;
background-color: darken($accent-color, 10%);
} // end hover
// clicking on the button
&:active {
top: 1px; // adds a tiny hop to the click
} // end active
} // end .button
// Default button class
.button {
@extend %btn;
&-secondary {
@extend %btn;
background-color: $secondary-color;
&:hover {
background-color: darken($secondary-color, 10%);
}
}
&-tertiary {
@extend %btn;
background-color: $tertiary-color;
&:hover {
background-color: darken($tertiary-color, 10%);
}
}
}
// Outline Button
.button__outline {
@extend %btn;
background-color: transparent;
border: 3px solid $accent-color;
color: $accent-color;
&:hover {
background-color: $accent-color;
color: $white;
}
}
.btn {
display: inline-block;
position: relative;
text-decoration: none;
font-size: 1rem;
padding: 1rem 1.50rem;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.14s ease-in-out, 0.5s linear width, 0.5s linear padding;
&:active {
top: 1px; // adds a tiny hop to the click
}
}
\ No newline at end of file
assets/_sass/modules/animations.scss 0 → 100644
View file @ 4e03f820
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
\ No newline at end of file
assets/css/style.scss
View file @ 4e03f820
......@@ -4,25 +4,21 @@
// Reset using Normalize
@import "normalize";
// Import fonts from Google
//@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,800);
//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic);
// Site configuration
@import "config";
@import "colors/colors";
// Import Partials
@import "partials/typography";
@import "partials/mixins";
// Import Material Kit
.material-kit {
@import "material-kit/assets/scss/material-kit";
}
@import "colors/backgrounds";
@import "colors/buttons";
@import "material-tweaks";
// Modules
@import "modules/animations";
@import "modules/fonts";
@import "modules/buttons";
@import "modules/forms";
......@@ -31,7 +27,7 @@
@import "modules/alerts";
@import "modules/post";
@import "modules/hq_map";
@import "modules/colors";
@import "modules/bits";
// Layout
@import "layout/layout";
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment