// Bootstrap initialize @import “bootstrap/functions” @import “bootstrap/variables”
// PALETTE
// Background frame color. // Used in: html and footer nav $bg-frame: darken($gray-900,2%) // use extending his class .bg-frame
background-color: $bg-frame
// DARK $body-bg: $bg-frame $body-color: $gray-200 $text-muted: $gray-400 // Cards $card-bg: $body-bg $card-border-color: rgba($white, .125) $card-border-color: rgba($white, .125) $card-cap-bg: rgba($white, .03) // Header $jumbotron-bg: theme-color(“dark”) // Dropdown $dropdown-bg: $gray-800 $dropdown-border-color: rgba($white, .15)
$dropdown-link-color: $gray-200 $dropdown-link-hover-color: $gray-100 $dropdown-link-hover-bg: $gray-900 // MODALS $modal-content-bg: $bg-frame $modal-content-border-color: rgba($white, .2) $modal-header-border-color: $gray-800 $modal-footer-border-color: $modal-header-border-color // TABLES $table-border-color: $gray-700 // LINKS $link-hover-color: lighten($link-color, 15%) // BORDERS $border-color: $gray-800 // CODE $code-color: $gray-400
// Font size $font-size-base: 1.1rem
// Base font family @import url(“fonts.googleapis.com/css?family=Roboto:300,400,500”) $font-family-sans-serif: “Roboto”, Arial, sans-serif $font-family-base: $font-family-sans-serif
// Headings font family @import url(“fonts.googleapis.com/css?family=Roboto+Slab:300,400,700”) $font-family-headings: “Roboto Slab”, serif $font-family-headings-header: $font-family-headings
// // Bootstrap_end // @import “bootstrap/mixins” // @import “bootstrap/root” @import “bootstrap/reboot” @import “bootstrap/type” @import “bootstrap/images” @import “bootstrap/code” @import “bootstrap/grid” @import “bootstrap/tables” @import “bootstrap/forms” @import “bootstrap/buttons” @import “bootstrap/transitions” @import “bootstrap/dropdown” @import “bootstrap/button-group” @import “bootstrap/input-group” @import “bootstrap/custom-forms” @import “bootstrap/nav” @import “bootstrap/navbar” @import “bootstrap/card” @import “bootstrap/breadcrumb” @import “bootstrap/pagination” @import “bootstrap/badge” @import “bootstrap/jumbotron” @import “bootstrap/alert” @import “bootstrap/progress” @import “bootstrap/media” @import “bootstrap/list-group” @import “bootstrap/close” @import “bootstrap/modal” @import “bootstrap/tooltip” @import “bootstrap/popover” @import “bootstrap/carousel” @import “bootstrap/utilities” @import “bootstrap/print”
// MIXINS
// Headings mixin
Example: @include headings(1,6,':first-child','main > ') ... Render: main > h1:first-child, main > .h2:first-child, ... ...
@mixin headings($from: 1, $to: 6, $condition: '', $prescope: '')
@for $i from $from through $to #{$prescope}h#{$i}#{$condition}, #{$prescope}.h#{$i}#{$condition} @content
// // CLASSES //
// font weights: .fw-1, … .fw-9 @for $weight from 1 through 9
.fw-#{$weight} font-weight: $weight * 100
// Bottom border only Class .bb
@extend .border, .border-top-0, .border-right-0, .border-left-0
// Big spacers $big_spacer: ( 6: ($spacer * 2), 7: ($spacer * 2.5), 8: ($spacer * 4), 9: ($spacer * 0.7) ) @each $prop, $abbrev in (margin: m, padding: p)
@each $size, $length in $big_spacer .#{$abbrev}-#{$size} #{$prop}: $length .#{$abbrev}t-#{$size}, .#{$abbrev}y-#{$size} #{$prop}-top: $length .#{$abbrev}r-#{$size}, .#{$abbrev}x-#{$size} #{$prop}-right: $length .#{$abbrev}b-#{$size}, .#{$abbrev}y-#{$size} #{$prop}-bottom: $length .#{$abbrev}l-#{$size}, .#{$abbrev}x-#{$size} #{$prop}-left: $length
// HTML html
@extend .bg-frame
// HEADER header
@extend .mb-0, .jumbotron, .rounded-0, .py-4
// Font-Weight for light foreground main p, .modal-body, .table, code
@extend .fw-3
// MAIN main
@extend .mt-5, .mb-8 p @extend .fw-3 letter-spacing: .1px &.container-fluid @extend .px-5
// TABLES table
@extend .table &:last-of-type @extend .mb-0
// HEADINGS @include headings()
font-family: $font-family-headings letter-spacing: -1px
// HEADER headings header
@include headings() @extend .text-muted, .mb-0, .fw-3 font-family: $font-family-headings-header span @extend .fw-8 color: $white
// MAIN Headings main
@include headings() @extend .mt-6, .mb-3 .row:first-child .col @include headings(1, 6, ':first-child') @extend .mt-0
// NAVBARS // Top main nav body > nav, header > nav
@extend .navbar-dark, .fw-3 background-color: $gray-900
// Footer nav footer nav
@extend .navbar-dark, .bg-dark, .fw-3
// Hamburger for mobile .navbar-toggler
color: $gray-900
// Space simple text like links .navbar-expand-lg
.navbar-nav .nav-link, .navbar-text @extend .px-9
// FORMS form
// Checkbox label with mouse pointer .custom-checkbox, .custom-radio label.custom-control-label cursor: pointer
// COLLAPSE // Hide link color on collapse links a
@extend .text-muted
// CODE // Fix margings, paddings and background-color code
padding: 2px 4px background-color: rgba($black,.1)
pre.highlight
@extend .p-2 font-size: 75% letter-spacing: -0.1px border: $border-width solid $border-color border-radius: $border-radius code padding: unset background-color: transparent
// MODAL .close
color: $white
// CARDS // Remove top margins for `last-of-type` objects .card
p:last-of-type, ul:last-of-type, pre:last-of-type @extend .mb-0 .card-title:first-of-type @extend .mt-0 ul @extend .list-group, .list-group-flush li @extend .list-group-item
// BLOCKQUOTES .blockquote
@extend .px-9, .py-1 border-left: 2px solid $border-color p @extend .mb-1 footer @extend .text-muted, .small
// DROPDOWNS: move caret nearer .dropdown-toggle::after
margin-left: $caret-width * .3 vertical-align: $caret-width * .3
// ALERTS // Fix dark link colors inside alerts $alert_color_levels: 5 2 -11 -5 // Loop @each $color, $value in $theme-colors
.alert-#{$color} $bg: theme-color-level($color, nth($alert_color_levels, 1)) $bd: theme-color-level($color, nth($alert_color_levels, 2)) $co: theme-color-level($color, nth($alert_color_levels, 3)) background: $bg linear-gradient(180deg, mix($body-bg, $bg, 15%), $bg) repeat-x border-color: $bd color: $co a color: theme-color-level($color, nth($alert_color_levels, 4)) .btn-#{$color} @include button-variant(theme-color-level($color, nth($alert_color_levels, 1)),theme-color-level($color, nth($alert_color_levels, 1))) color: $gray-100
// extend alert links class .alert a
@extend .alert-link
// TEMPUS .tempus-past, .tempus-empty
@extend .text-muted
.tempus-difference
@extend .text-muted, .small
// PAGE_INFO pageinfoModal
table @extend .table-sm tr:first-child td border-top: 0 tr td:first-child @extend .text-right td:last-child @extend .text-muted
// DATE picker .datepicker-container
font-size: $font-size-sm
// ADD-BOOK input-form
h3 @extend .py-3 small @extend .form-text, .text-muted, .ml-1
// CODE SYNTAX @import “any_theme/syntax_dark”