Add custom SASS theme
Alexandre Iooss
3 years ago
parent
86ac613791
commit
f440afcfb9
@ -0,0 +1,34 @@
|
||||
#autoComplete {
|
||||
position: relative;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
#autoComplete_list {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
.autoComplete_result {
|
||||
margin: 0.15rem auto;
|
||||
padding: 0.6rem;
|
||||
max-width: 280px;
|
||||
list-style: none;
|
||||
color: #7b7b7b;
|
||||
transition: all 0.1s ease-in-out;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.autoComplete_result:hover,
|
||||
.autoComplete_result:focus,
|
||||
.autoComplete_selected {
|
||||
background-color: rgba(255, 248, 248, 0.9);
|
||||
}
|
||||
|
||||
.autoComplete_highlighted {
|
||||
color: rgba(255, 122, 122, 1);
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
// Based on DARKLY
|
||||
// From https://github.com/jenil/bulmaswatch/blob/gh-pages/darkly/_variables.scss
|
||||
|
||||
$grey-lighter: #dbdee0;
|
||||
$grey-light: #8c9b9d;
|
||||
$grey: darken($grey-light, 18);
|
||||
$grey-dark: darken($grey, 18);
|
||||
$grey-darker: darken($grey, 23);
|
||||
$background-base-color: rgb(50, 40, 40);
|
||||
$primary: #ff3b3b !default;
|
||||
|
||||
$size-6: 15px;
|
||||
$size-7: 0.85em;
|
||||
$title-weight: 500;
|
||||
$subtitle-weight: 400;
|
||||
$subtitle-color: $grey-dark;
|
||||
|
||||
$body-background-color: darken($background-base-color, 3);
|
||||
$body-size: 15px;
|
||||
|
||||
$footer-background-color: $background-base-color;
|
||||
$footer-padding: 1rem;
|
||||
|
||||
$subtitle-color: $grey-light;
|
||||
$subtitle-strong-color: $grey-light;
|
||||
|
||||
$text: #fff;
|
||||
$text-light: lighten($text, 10);
|
||||
$text-strong: darken($text, 5);
|
||||
|
||||
$box-background-color: $background-base-color;
|
||||
|
||||
$link: lighten($primary, 10);
|
||||
$link-hover: lighten($link, 5);
|
||||
$link-focus: darken($link, 5);
|
||||
$link-active: darken($link, 5);
|
||||
$link-focus-border: $grey-light;
|
||||
|
||||
$input-placeholder-color: #ccc;
|
||||
|
||||
$navbar-height: 3rem;
|
||||
$navbar-background-color: darken($background-base-color, 6);
|
||||
$navbar-item-hover-background-color: $background-base-color;
|
||||
@ -0,0 +1,60 @@
|
||||
@import "blumatheme";
|
||||
@import "bulma/bulma";
|
||||
@import "autocomplete";
|
||||
|
||||
.divider {
|
||||
height: 3px;
|
||||
border-radius: 50px;
|
||||
background: $primary;
|
||||
width: 120px;
|
||||
&.is-centered {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 30px 5px;
|
||||
width: 300px;
|
||||
background-color: lighten($background-base-color, 3);
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
.card-title h4 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-icon img {
|
||||
height: 120px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.card-text {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.content h2:before,
|
||||
.content h3:before {
|
||||
content: "#";
|
||||
color: $grey;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-left: -2rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
border-radius: 0.6em;
|
||||
|
||||
&.is-info .message-body {
|
||||
color: #eef6fc;
|
||||
background-color: #155681;
|
||||
}
|
||||
|
||||
&.is-danger .message-body {
|
||||
color: #fdeeed;
|
||||
background-color: #5e2f29;
|
||||
}
|
||||
|
||||
&.is-warning .message-body {
|
||||
color: #fef9ec;
|
||||
background-color: #94761b;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue