organize sass
This commit is contained in:
+6
@@ -1,3 +1,9 @@
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
|
||||
@import "bootstrap-customizations/variables";
|
||||
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
|
||||
// padding right for icons (must not use space next to it!)
|
||||
.fa-pr::before {
|
||||
margin-right: $sp1;
|
||||
}
|
||||
|
||||
.fa-large.fa-pr::before {
|
||||
margin-right: $sp2;
|
||||
}
|
||||
|
||||
.fa-large {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
// generic hiding class
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// fadeout styles for hiding flash messages
|
||||
.fadeout {
|
||||
transition: opacity .5s ease-in-out;
|
||||
opacity: 1;
|
||||
|
||||
&.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Vendored
+9
-163
@@ -1,170 +1,16 @@
|
||||
|
||||
// Fonts
|
||||
//@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
|
||||
|
||||
// Variables
|
||||
@import "bst-base";
|
||||
|
||||
$sp0: 0;
|
||||
$sp1_2: $spacer*.25;
|
||||
$sp1: $spacer*.5;
|
||||
$sp3_4: $spacer*.75;
|
||||
$sp1: $spacer*.5;
|
||||
$sp2: $spacer*1;
|
||||
$sp3: $spacer*1.5;
|
||||
$sp4: $spacer*2;
|
||||
|
||||
|
||||
// Body
|
||||
$body-bg: white;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "IBM Plex Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
$font-size-base: 1rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
$link-color: $gray-800;
|
||||
$link-decoration: none;
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
$card-cap-bg: lighten($primary, 5);
|
||||
$card-border-color: $primary;
|
||||
//$card-border-width: 2px;
|
||||
$card-border-radius: 5px;
|
||||
$card-inner-border-radius: 2px;
|
||||
|
||||
$list-group-hover-bg: rgba($primary, .1);
|
||||
|
||||
$tooltip-max-width: 300px;
|
||||
$tooltip-bg: darken($primary, 20%);
|
||||
$tooltip-arrow-color: $tooltip-bg;
|
||||
|
||||
$pagination-padding-y-sm: $sp1_2;
|
||||
$pagination-padding-x-sm: $sp3_4;
|
||||
|
||||
|
||||
@import "bst-modules";
|
||||
|
||||
|
||||
// generic hiding class
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// padding right for icons (must not use space next to it!)
|
||||
.fa-pr::before {
|
||||
margin-right: $sp1;
|
||||
}
|
||||
|
||||
.fa-large.fa-pr::before {
|
||||
margin-right: $sp2;
|
||||
}
|
||||
|
||||
.fa-large {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.card-header .fa-large {
|
||||
margin: -.6em 0; // fix alignment
|
||||
}
|
||||
|
||||
@import "bootstrap";
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
// help bubble icon
|
||||
.form-help {
|
||||
display: inline-block;
|
||||
margin-top: $form-text-margin-top;
|
||||
}
|
||||
@import "helpers";
|
||||
@import "fa-utils";
|
||||
|
||||
// tooltip tweaking
|
||||
.tooltip-inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
box-shadow: 0 2px 5px rgba(black, .3);
|
||||
}
|
||||
|
||||
// layout tweaks
|
||||
.page-navbar {
|
||||
background: white;
|
||||
border-bottom: 1px solid $primary;
|
||||
|
||||
box-shadow: 0 -3px 8px rgba(black, 1);
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
font-size: 95%;
|
||||
background: $body-bg;
|
||||
border-top: 2px dotted $gray-200;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 2px 3px rgba(black, .3);
|
||||
}
|
||||
|
||||
.pagination-outline-light {
|
||||
.page-link {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
border: $pagination-border-width solid white;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: rgba(black, .2);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
outline: 0 none;
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(white, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
font-weight: normal;
|
||||
|
||||
&.active .page-link {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: rgba(black, .2);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
color: rgba(white, .6);
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// special styles for buttons in card header
|
||||
.card-header .btn {
|
||||
@extend .btn-sm;
|
||||
@extend .btn-outline-light;
|
||||
}
|
||||
|
||||
.fadeout {
|
||||
transition: opacity .5s ease-in-out;
|
||||
opacity: 1;
|
||||
|
||||
&.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@import "bootstrap-customizations/paginate";
|
||||
@import "bootstrap-customizations/card";
|
||||
@import "bootstrap-customizations/tooltip";
|
||||
@import "bootstrap-customizations/navbar";
|
||||
@import "bootstrap-customizations/footer";
|
||||
@import "bootstrap-customizations/help";
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
|
||||
.card-header {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 2px 3px rgba(black, .3);
|
||||
}
|
||||
|
||||
.card-header-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// special styles for buttons in card header
|
||||
.card-header .btn {
|
||||
@extend .btn-sm;
|
||||
@extend .btn-outline-light;
|
||||
}
|
||||
|
||||
.card-header .fa-large {
|
||||
margin: -.6em 0; // fix icon alignment
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
|
||||
.page-footer {
|
||||
font-size: 95%;
|
||||
background: $body-bg;
|
||||
border-top: 2px dotted $gray-200;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// help bubble icon
|
||||
.form-help {
|
||||
display: inline-block;
|
||||
margin-top: $form-text-margin-top;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// layout tweaks
|
||||
.page-navbar {
|
||||
background: white;
|
||||
border-bottom: 1px solid $primary;
|
||||
|
||||
box-shadow: 0 -3px 8px rgba(black, 1);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.pagination-outline-light {
|
||||
.page-link {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
border: $pagination-border-width solid white;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: rgba(black, .2);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
outline: 0 none;
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(white, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
font-weight: normal;
|
||||
|
||||
&.active .page-link {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: rgba(black, .2);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
color: rgba(white, .6);
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
// tooltip tweaking
|
||||
.tooltip-inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
box-shadow: 0 2px 5px rgba(black, .3);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
$sp0: 0;
|
||||
$sp1_2: $spacer*.25;
|
||||
$sp1: $spacer*.5;
|
||||
$sp3_4: $spacer*.75;
|
||||
$sp1: $spacer*.5;
|
||||
$sp2: $spacer*1;
|
||||
$sp3: $spacer*1.5;
|
||||
$sp4: $spacer*2;
|
||||
|
||||
// Body
|
||||
$body-bg: white;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "IBM Plex Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
$font-size-base: 1rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
$link-color: $gray-800;
|
||||
$link-decoration: none;
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
$card-cap-bg: lighten($primary, 5);
|
||||
$card-border-color: $primary;
|
||||
//$card-border-width: 2px;
|
||||
$card-border-radius: 5px;
|
||||
$card-inner-border-radius: 2px;
|
||||
|
||||
$list-group-hover-bg: rgba($primary, .1);
|
||||
|
||||
$tooltip-max-width: 300px;
|
||||
$tooltip-bg: darken($primary, 20%);
|
||||
$tooltip-arrow-color: $tooltip-bg;
|
||||
|
||||
$pagination-padding-y-sm: $sp1_2;
|
||||
$pagination-padding-x-sm: $sp3_4;
|
||||
Reference in New Issue
Block a user