organize sass

pull/26/head
Ondřej Hruška 6 years ago
parent 8d59e8c470
commit 7040de3ea9
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 6
      resources/assets/sass/_bootstrap.scss
  2. 4
      resources/assets/sass/_bst-base.scss
  3. 13
      resources/assets/sass/_fa-utils.scss
  4. 14
      resources/assets/sass/_helpers.scss
  5. 172
      resources/assets/sass/app.scss
  6. 24
      resources/assets/sass/bootstrap-customizations/_card.scss
  7. 6
      resources/assets/sass/bootstrap-customizations/_footer.scss
  8. 5
      resources/assets/sass/bootstrap-customizations/_help.scss
  9. 7
      resources/assets/sass/bootstrap-customizations/_navbar.scss
  10. 36
      resources/assets/sass/bootstrap-customizations/_paginate.scss
  11. 9
      resources/assets/sass/bootstrap-customizations/_tooltip.scss
  12. 36
      resources/assets/sass/bootstrap-customizations/_variables.scss

@ -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/root";
@import "~bootstrap/scss/reboot"; @import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type"; @import "~bootstrap/scss/type";

@ -1,4 +0,0 @@
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

@ -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;
}

@ -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;
}
}

@ -1,170 +1,16 @@
// Fonts
//@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables // Variables
@import "bst-base"; @import "bootstrap";
$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
}
html { html {
overflow-y: scroll; overflow-y: scroll;
} }
// help bubble icon @import "helpers";
.form-help { @import "fa-utils";
display: inline-block;
margin-top: $form-text-margin-top;
}
// tooltip tweaking
.tooltip-inner {
text-align: left;
}
.tooltip-inner {
box-shadow: 0 2px 5px rgba(black, .3);
}
// layout tweaks @import "bootstrap-customizations/paginate";
.page-navbar { @import "bootstrap-customizations/card";
background: white; @import "bootstrap-customizations/tooltip";
border-bottom: 1px solid $primary; @import "bootstrap-customizations/navbar";
@import "bootstrap-customizations/footer";
box-shadow: 0 -3px 8px rgba(black, 1); @import "bootstrap-customizations/help";
}
.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;
}
}

@ -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;
Loading…
Cancel
Save