kazhnuz/bluesky-bootstrap-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: new palette system

Browse source
This commit is contained in:
Kazhnuz 2019-11-06 12:18:15 +01:00
parent 7b41164742
commit 7198ffb55f
7 changed files with 587 additions and 516 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
scss/_global.scss
View file

@ -11,8 +11,10 @@
/* 02.1 - Wrapper et page totale */
$background-color: get-color("skyblue");
#wrapper {
background: #64b5f6 url('img/background.png') center bottom repeat-x;
background: $background-color url('img/background.png') center bottom repeat-x;
}
/* 02.1 - Header */

137
scss/_palette.scss
View file

@ -1,48 +1,85 @@
/* --- COLORS --- */
@use "sass:map";
$color-blue: #4e63c9;
$color-violet: #ce4dcd;
$color-purple: #7951c0;
$color-red: #e33d22;
$color-orange: #eb790a;
$color-green: #75b82d;
$color-skyblue: #42a0f3;
$color-dark: #2D2D2D;
$color-light: #eeeeec;
$color-turquoise: #46bd9e;
$color-yellow: #f6d32d;
$color-brown: #986a44;
$color-grey: #77767b;
// BASE PALETTE
$color-primary: $color-purple;
$color-secondary: $color-blue;
$color-warning: $color-orange;
$color-danger: $color-red;
$color-info: $color-skyblue;
$color-success: $color-green;
$palette: ("blue":#4e63c9, "violet":#ce4dcd, "purple":#7951c0, "red":#e33d22, "orange":#eb790a, "green":#75b82d, "skyblue":#42a0f3, "dark": #2D2D2D, "light":#eeeeec, "turquoise": #46bd9e, "yellow": #f6d32d, "brown":#986a44, "grey":#77767b);
$color-link: $color-blue;
$color-selection: $color-blue;
$color-mark: $color-yellow;
$semantics: ("primary":"purple", "secondary":"blue", "warning":"orange", "danger":"red", "info":"skyblue", "success":"green");
$whiteness_value: 0.8;
// FUNCTIONS TO GET MORE EASILY COLORS
@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map.get($palette, map.get($semantics, $name));
} @else {
@return map.get($palette, $name);
}
}
@function list-colors() {
$newmap: map.merge($palette, $semantics);
@return $newmap;
}
@function luminance($color) {
$c_red: red($color);
$c_grn: green($color);
$c_blu: blue($color);
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
@return $luminance
}
$color-primary: get-color("primary");
$color-secondary: get-color("secondary");
$color-warning: get-color("warning");
$color-danger: get-color("danger");
$color-info: get-color("info");
$color-success: get-color("success");
$color-link: get-color("blue");
$color-selection: get-color("blue");
$color-mark: get-color("yellow");
@mixin text-color($text-color) {
color: $text-color;
}
@mixin background-color($background-color, $text-color) {
@mixin background-color($background-color, $light-color, $dark-color) {
background-color: $background-color!important;
color: $text-color;
@if (luminance($background-color ) < 255 * $whiteness_value) {
color: $light-color;
} @else {
color: $dark-color;
}
}
.text {
@each $name, $color in list-colors() {
&-#{$name} { @include text-color(get-color($name)); }
}
}
.bg {
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name), #FFF, #000); }
}
}
// Direct uses of colors
a, a:hover, a:active {
color: $color-link;
}
::selection {
@include background-color($color-selection, #FFF);
@include background-color($color-selection, #FFF, #000);
}
::-moz-selection {
@include background-color($color-selection, #FFF);
@include background-color($color-selection, #FFF, #000);
}
mark {
@ -52,49 +89,3 @@ mark {
blockquote, pre {
border-color: $color-primary;
}
.text {
&-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); }
&-purple { @include text-color($color-purple); }
&-red { @include text-color($color-red); }
&-orange { @include text-color($color-orange); }
&-green { @include text-color($color-green); }
&-skyblue { @include text-color($color-skyblue); }
&-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); }
&-turquoise { @include text-color($color-turquoise); }
&-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); }
&-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); }
&-danger { @include text-color($color-danger); }
&-info { @include text-color($color-info); }
&-success { @include text-color($color-success); }
}
.bg {
&-blue { @include background-color($color-blue, #FFF); }
&-violet { @include background-color($color-violet, #FFF); }
&-purple { @include background-color($color-purple, #FFF); }
&-red { @include background-color($color-red, #FFF); }
&-orange { @include background-color($color-orange, #FFF); }
&-green { @include background-color($color-green, #FFF); }
&-skyblue { @include background-color($color-skyblue, #FFF); }
&-dark { @include background-color($color-dark, #FFF); }
&-light { @include background-color($color-light, #111); }
&-turquoise { @include background-color($color-turquoise, #FFF); }
&-yellow { @include background-color($color-yellow, #FFF); }
&-brown { @include background-color($color-brown, #FFF); }
&-grey { @include background-color($color-grey, #FFF); }
&-primary { @include background-color($color-primary, #FFF); }
&-secondary { @include background-color($color-secondary, #FFF); }
&-warning { @include background-color($color-warning, #FFF); }
&-danger { @include background-color($color-danger, #FFF); }
&-info { @include background-color($color-info, #FFF); }
&-success { @include background-color($color-success, #FFF); }
}

85
scss/components/_buttons.scss
View file

@ -8,31 +8,27 @@
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
@mixin button-lighten($background-color, $text-color) {
background-color: lighten($background-color, 10%);
color:$text-color;
}
// Colorization functions
@mixin button-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus {
@include button-lighten($background-color, $text-color);
}
@mixin colorize-button() {
@each $name, $color in list-colors() {
&-#{$name} { @include button-color(get-color($name), #FFF, #000); }
}
}
@mixin badge-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
@mixin button-color($background-color, $light-color, $dark-color) {
@include background-color($background-color, $light-color, $dark-color);
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include button-lighten($background-color, $text-color);
@include button-hover($background-color, $light-color, $dark-color);
}
}
}
@mixin button-hover($background-color, $light-color, $dark-color) {
@include background-color(lighten($background-color, 10%), $light-color, $dark-color);
}
// 11.1 - Buttons
.btn {
@ -58,6 +54,8 @@
outline: none;
}
}
@include colorize-button();
}
.btn-group {
@ -76,57 +74,12 @@
}
}
.btn {
&-blue { @include button-color($color-blue, #FFF); }
&-violet { @include button-color($color-violet, #FFF); }
&-purple { @include button-color($color-purple, #FFF); }
&-red { @include button-color($color-red, #FFF); }
&-orange { @include button-color($color-orange, #FFF); }
&-green { @include button-color($color-green, #FFF); }
&-skyblue { @include button-color($color-skyblue, #FFF); }
&-dark { @include button-color($color-dark, #FFF); }
&-light { @include button-color($color-light, #111); }
&-turquoise { @include button-color($color-turquoise, #FFF); }
&-yellow { @include button-color($color-yellow, #FFF); }
&-brown { @include button-color($color-brown, #FFF); }
&-grey { @include button-color($color-grey, #FFF); }
&-primary { @include button-color($color-primary, #FFF); }
&-secondary { @include button-color($color-secondary, #FFF); }
&-warning { @include button-color($color-warning, #FFF); }
&-danger { @include button-color($color-danger, #FFF); }
&-info { @include button-color($color-info, #FFF); }
&-success { @include button-color($color-success, #FFF); }
}
/* 11.2 - Badges */
.badge {
font-weight:400;
}
.badge {
&-blue { @include badge-color($color-blue, #FFF); }
&-violet { @include badge-color($color-violet, #FFF); }
&-purple { @include badge-color($color-purple, #FFF); }
&-red { @include badge-color($color-red, #FFF); }
&-orange { @include badge-color($color-orange, #FFF); }
&-green { @include badge-color($color-green, #FFF); }
&-skyblue { @include badge-color($color-skyblue, #FFF); }
&-dark { @include badge-color($color-dark, #FFF); }
&-light { @include badge-color($color-light, #111); }
&-turquoise { @include badge-color($color-turquoise, #FFF); }
&-yellow { @include badge-color($color-yellow, #FFF); }
&-brown { @include badge-color($color-brown, #FFF); }
&-grey { @include badge-color($color-grey, #FFF); }
&-primary { @include badge-color($color-primary, #FFF); }
&-secondary { @include badge-color($color-secondary, #FFF); }
&-warning { @include badge-color($color-warning, #FFF); }
&-danger { @include badge-color($color-danger, #FFF); }
&-info { @include badge-color($color-info, #FFF); }
&-success { @include badge-color($color-success, #FFF); }
@include colorize-button();
}
/* 11.3 - Réseaux sociaux */
@ -141,9 +94,9 @@
}
.btn {
&-facebook {@include button-color(#3B5998, #FFF);}
&-twitter {@include button-color(#55ACEE, #FFF);}
&-googleplus {@include button-color(#d34836, #FFF);}
&-diaspora {@include button-color(#313739, #FFF);}
&-mastodon {@include button-color(#282c37, #FFF);}
&-facebook {@include button-color(#3B5998, #FFF, #000);}
&-twitter {@include button-color(#55ACEE, #FFF, #000);}
&-googleplus {@include button-color(#d34836, #FFF, #000);}
&-diaspora {@include button-color(#313739, #FFF, #000);}
&-mastodon {@include button-color(#282c37, #FFF, #000);}
}

89
scss/components/_cards.scss
View file

@ -41,13 +41,43 @@ $card-color-default: white;
box-shadow: $large-shadow, $inset-shadow;
}
@mixin card-color($background-color, $text-color) {
& > .card-header { background-color: $background-color; color:$text-color; }
// CARD COLORIZATION
@mixin colorize-card() {
@each $name, $color in list-colors() {
&-#{$name} { @include card-color(get-color($name), #FFF, #000); }
}
}
@mixin card-color($background-color, $light-color, $dark-color) {
& > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); }
&.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); }
}
// ALERT COLORIZATION
@mixin colorize-alert() {
@each $name, $color in list-colors() {
&-#{$name} { @include alert-color(get-color($name)); }
}
}
@mixin alert-color($background-color) {
background-color: lighten($background-color, 35%);
color: darken($background-color, 80%);
@if (luminance($background-color) > 128 * 0.8) {
color: darken($background-color, 70%);
a, .alert-link {
color:darken($background-color, 70%);
font-weight:bold;
}
} @else {
color: lighten($background-color, 80%);
a, .alert-link {
color:lighten($background-color, 85%);
font-weight:bold;
}
}
}
/* 10.1 - Cards */
@ -59,35 +89,14 @@ $card-color-default: white;
color:#333;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
@include colorize-card();
}
.card-body {
@include card-element();
}
.card {
&-blue { @include card-color($color-blue, #FFF); }
&-violet { @include card-color($color-violet, #FFF); }
&-purple { @include card-color($color-purple, #FFF); }
&-red { @include card-color($color-red, #FFF); }
&-orange { @include card-color($color-orange, #FFF); }
&-green { @include card-color($color-green, #FFF); }
&-skyblue { @include card-color($color-skyblue, #FFF); }
&-dark { @include card-color($color-dark, #FFF); }
&-light { @include card-color($color-light, #111); }
&-turquoise { @include card-color($color-turquoise, #FFF); }
&-yellow { @include card-color($color-yellow, #FFF); }
&-brown { @include card-color($color-brown, #FFF); }
&-grey { @include card-color($color-grey, #FFF); }
&-primary { @include card-color($color-primary, #FFF); }
&-secondary { @include card-color($color-secondary, #FFF); }
&-warning { @include card-color($color-warning, #FFF); }
&-danger { @include card-color($color-danger, #FFF); }
&-info { @include card-color($color-info, #FFF); }
&-success { @include card-color($color-success, #FFF); }
}
/* 10.1.1 - Headers */
.card-header, .card-footer {
@ -172,32 +181,6 @@ a.list-group-item:hover {
.alert {
@include card-self-contained();
color:rgba(0, 0, 0, 0.7);
}
.alert a, .alert-link {
color:rgba(0, 0, 0, 0.7);
font-weight:bold;
}
.alert {
&-blue { @include alert-color($color-blue); }
&-violet { @include alert-color($color-violet); }
&-purple { @include alert-color($color-purple); }
&-red { @include alert-color($color-red); }
&-orange { @include alert-color($color-orange); }
&-green { @include alert-color($color-green); }
&-skyblue { @include alert-color($color-skyblue); }
&-dark { @include alert-color($color-dark); }
&-light { @include alert-color($color-light); }
&-turquoise { @include alert-color($color-turquoise); }
&-yellow { @include alert-color($color-yellow); }
&-brown { @include alert-color($color-brown); }
&-grey { @include alert-color($color-grey); }
&-primary { @include alert-color($color-primary); }
&-secondary { @include alert-color($color-secondary); }
&-warning { @include alert-color($color-warning); }
&-danger { @include alert-color($color-danger); }
&-info { @include alert-color($color-info); }
&-success { @include alert-color($color-success); }
@include colorize-alert();
}

2
scss/components/_previews.scss
View file

@ -28,7 +28,7 @@
line-height: 1.5em !important;
padding:0.2em;
text-align:justify;
background-color: $color-light;
background-color: get-color("light");
color:rgba(0,0,0,0.4);
position: relative;

782
style.css
View file

File diff suppressed because it is too large Load diff

2
style.css.map
View file

File diff suppressed because one or more lines are too long