init
This commit is contained in:
Robert Clarke
commit
536c3856e1
89 changed files with 8421 additions and 0 deletions
300
sass/_vendor/darkly/_overrides.scss
Normal file
300
sass/_vendor/darkly/_overrides.scss
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
// Overrides
|
||||
@if $bulmaswatch-import-font {
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic);
|
||||
}
|
||||
|
||||
hr {
|
||||
height: $border-width;
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 200ms ease;
|
||||
border-width: $border-width;
|
||||
color: $white;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
background-color: lighten($color, 7.5%);
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 2px rgba($color, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $grey-lighter;
|
||||
}
|
||||
|
||||
.button,
|
||||
.control.has-icons-left .icon,
|
||||
.control.has-icons-right .icon,
|
||||
.input,
|
||||
.pagination-ellipsis,
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.select,
|
||||
.select select,
|
||||
.textarea {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all 200ms ease;
|
||||
box-shadow: none;
|
||||
border-width: $border-width;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.select {
|
||||
&:after,
|
||||
select {
|
||||
border-width: $border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
&.has-addons {
|
||||
.button,
|
||||
.input,
|
||||
.select {
|
||||
margin-right: -$border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
|
||||
.card {
|
||||
$card-border-color: lighten($grey-darker, 5);
|
||||
box-shadow: none;
|
||||
border: $border-width solid $card-border-color;
|
||||
background-color: $grey-darker;
|
||||
border-radius: $radius;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
background-color: rgba($black-bis, 0.2);
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: rgba($black-bis, 0.2);
|
||||
}
|
||||
|
||||
.card-footer,
|
||||
.card-footer-item {
|
||||
border-width: $border-width;
|
||||
border-color: $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
a:not(.button) {
|
||||
color: $color-invert;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
a {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
background-color: $grey-darker;
|
||||
}
|
||||
|
||||
.modal-card-foot,
|
||||
.modal-card-head {
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-weight: $weight-bold;
|
||||
background-color: $grey-dark;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
border-width: $border-width;
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: $radius;
|
||||
|
||||
&.is-transparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
.navbar-dropdown {
|
||||
a.navbar-item.is-active {
|
||||
background-color: $link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
background-color: $navbar-background-color;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero .navbar,
|
||||
body > .navbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
border-width: $border-width;
|
||||
}
|
||||
|
||||
.panel-block,
|
||||
.panel-heading,
|
||||
.panel-tabs {
|
||||
border-width: $border-width;
|
||||
|
||||
&:first-child {
|
||||
border-top-width: $border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
.panel-tabs {
|
||||
a {
|
||||
border-width: $border-width;
|
||||
margin-bottom: -$border-width;
|
||||
|
||||
&.is-active {
|
||||
border-bottom-color: $link-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-block {
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
|
||||
.panel-icon {
|
||||
color: $link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.panel-icon {
|
||||
color: $link-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
a {
|
||||
border-bottom-width: $border-width;
|
||||
margin-bottom: -$border-width;
|
||||
}
|
||||
|
||||
ul {
|
||||
border-bottom-width: $border-width;
|
||||
}
|
||||
|
||||
&.is-boxed {
|
||||
a {
|
||||
border-width: $border-width;
|
||||
}
|
||||
|
||||
li.is-active a {
|
||||
background-color: darken($grey-darker, 4);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-toggle {
|
||||
li a {
|
||||
border-width: $border-width;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
// Colors
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar {
|
||||
.navbar-dropdown {
|
||||
.navbar-item:hover {
|
||||
background-color: $navbar-dropdown-item-hover-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
105
sass/_vendor/darkly/_variables.scss
Normal file
105
sass/_vendor/darkly/_variables.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
////////////////////////////////////////////////
|
||||
// DARKLY
|
||||
////////////////////////////////////////////////
|
||||
$grey-lighter: #dbdee0;
|
||||
$grey-light: #8c9b9d;
|
||||
$grey: darken($grey-light, 18);
|
||||
$grey-dark: darken($grey, 18);
|
||||
$grey-darker: darken($grey, 23);
|
||||
|
||||
$orange: #e67e22;
|
||||
$yellow: #f1b70e;
|
||||
$green: #2ecc71;
|
||||
$turquoise: #1abc9c;
|
||||
$blue: #3498db;
|
||||
$purple: #8e44ad;
|
||||
$red: #e74c3c;
|
||||
$white-ter: #ecf0f1;
|
||||
$primary: #375a7f !default;
|
||||
$yellow-invert: #fff;
|
||||
|
||||
$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
|
||||
|
||||
$radius-small: 3px;
|
||||
$radius: .4em;
|
||||
$radius-large: 8px;
|
||||
$size-6: 15px;
|
||||
$size-7: .85em;
|
||||
$title-weight: 500;
|
||||
$subtitle-weight: 400;
|
||||
$subtitle-color: $grey-dark;
|
||||
|
||||
$border-width: 2px;
|
||||
$border: $grey;
|
||||
|
||||
$body-background-color: darken($grey-darker, 4);
|
||||
$body-size: 15px;
|
||||
|
||||
$background: $grey-darker;
|
||||
$footer-background-color: $background;
|
||||
$button-background-color: $background;
|
||||
$button-border-color: lighten($button-background-color, 15);
|
||||
|
||||
$title-color: #fff;
|
||||
$subtitle-color: $grey-light;
|
||||
$subtitle-strong-color: $grey-light;
|
||||
|
||||
$text: #fff;
|
||||
$text-light: lighten($text, 10);
|
||||
$text-strong: darken($text, 5);
|
||||
|
||||
$box-color: $text;
|
||||
$box-background-color: $grey-dark;
|
||||
$box-shadow: none;
|
||||
|
||||
$link: $turquoise;
|
||||
$link-hover: lighten($link, 5);
|
||||
$link-focus: darken($link, 5);
|
||||
$link-active: darken($link, 5);
|
||||
$link-focus-border: $grey-light;
|
||||
|
||||
$button-color: $primary;
|
||||
$button-hover-color: darken($text, 5); // text-dark
|
||||
$button-focus: darken($text, 5); // text-dark
|
||||
$button-active-color: darken($text, 5); // text-dark
|
||||
$button-disabled-background-color: $grey-light;
|
||||
|
||||
$input-hover-color: $grey-light;
|
||||
$input-disabled-background-color: $grey-light;
|
||||
$input-disabled-border: $grey-lighter;
|
||||
|
||||
$table-color: $text;
|
||||
$table-head: $grey-lighter;
|
||||
$table-background-color: $grey-dark;
|
||||
$table-cell-border: 1px solid $grey;
|
||||
|
||||
$table-row-hover-background-color: $grey-darker;
|
||||
$table-striped-row-even-background-color: $grey-darker;
|
||||
$table-striped-row-even-hover-background-color: lighten($grey-darker, 2);
|
||||
|
||||
$pagination-color: $link;
|
||||
$pagination-border-color: $border;
|
||||
|
||||
$navbar-height: 4rem;
|
||||
|
||||
$navbar-background-color: $primary;
|
||||
$navbar-item-color: $text;
|
||||
$navbar-item-hover-color: $link;
|
||||
$navbar-item-hover-background-color: transparent;
|
||||
$navbar-item-active-color: $link;
|
||||
$navbar-dropdown-arrow: #fff;
|
||||
$navbar-divider-background-color: rgba(0, 0, 0, 0.2);
|
||||
$navbar-dropdown-border-top: 1px solid $navbar-divider-background-color;
|
||||
$navbar-dropdown-background-color: $primary;
|
||||
$navbar-dropdown-item-hover-color: $grey-lighter;
|
||||
$navbar-dropdown-item-hover-background-color: transparent;
|
||||
$navbar-dropdown-item-active-background-color: transparent;
|
||||
$navbar-dropdown-item-active-color: $link;
|
||||
|
||||
$dropdown-content-background-color: $background;
|
||||
$dropdown-item-color: $text;
|
||||
|
||||
$progress-value-background-color: $grey-lighter;
|
||||
|
||||
$bulmaswatch-import-font: true !default;
|
||||
Loading…
Add table
Add a link
Reference in a new issue