Commit 71c2628d authored by David Haynes's avatar David Haynes 🙆

Simplify masonstrap/

parent 74ef14f4
// Masonstrap 4.0
// -----------------------------------------------------
// Navbar ======================================================================
.navbar {
font-size: $font-size-sm;
font-weight: $headings-font-weight;
}
// Default Mason Green #006633
.bg-primary {
.dropdown-menu {
background-color: $brand-primary;
.dropdown-item,
.dropdown-item:focus {
color: $navbar-inverse-color;
}
.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($brand-primary, 5%);
color: #fff;
}
}
}
// Some default color
.bg-inverse {
background-color: $brand-secondary !important;
.dropdown-menu {
background-color: $gray;
.dropdown-item,
.dropdown-item:focus {
color: $navbar-inverse-color;
}
.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($gray, 5%);
color: #fff;
}
}
}
.bg-classic {
background-color: $bg-classic !important;
.dropdown-menu {
background-color: $gray;
.dropdown-item,
.dropdown-item:focus {
color: $navbar-inverse-color;
}
.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($gray, 5%);
color: #fff;
}
}
}
// Buttons =====================================================================
.btn-secondary {
color: $bg-classic !important;
}
.btn-group {
.dropdown-menu {
border-top-width: 0;
}
.dropdown-toggle {
&.btn-primary ~ .dropdown-menu {
background-color: $btn-primary-bg;
border-color: $btn-primary-border;
.dropdown-item {
color: $btn-primary-color;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-primary-bg, 8%);
}
}
&.btn-secondary ~ .dropdown-menu {
background-color: $btn-secondary-bg;
border-color: $btn-secondary-border;
.dropdown-item {
color: $btn-secondary-color;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-secondary-bg, 8%);
}
}
&.btn-success ~ .dropdown-menu {
background-color: $btn-success-bg;
border-color: $btn-success-border;
.dropdown-item {
color: $btn-success-color;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-success-bg, 8%);
}
}
&.btn-info ~ .dropdown-menu {
background-color: $btn-info-bg;
border-color: $btn-info-border;
.dropdown-item {
color: $btn-info-color;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-info-bg, 8%);
}
}
&.btn-warning ~ .dropdown-menu {
background-color: $btn-warning-bg;
border-color: $btn-warning-border;
.dropdown-item {
color: $btn-warning-color;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-warning-bg, 8%);
}
}
&.btn-danger ~ .dropdown-menu {
background-color: $btn-danger-bg;
border-color: $btn-danger-border;
.dropdown-item {
color: $btn-danger-color;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-danger-bg, 8%);
}
}
}
}
// Typography ==================================================================
.blockquote-footer {
color: $gray-light;
}
// Tables ======================================================================
table {
font-size: $font-size-sm;
}
.table {
&-success,
&-info,
&-warning,
&-danger {
color: #fff;
}
}
// Forms =======================================================================
label,
.control-label,
.help-block,
.checkbox,
.radio,
.form-control-feedback {
font-size: $font-size-sm;
}
// Navs ========================================================================
.dropdown-item {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: $font-size-sm;
font-weight: 300;
}
.nav-tabs {
.nav-link {
color: $bg-classic;
}
.nav-link.disabled,
.nav-link.disabled:hover,
.nav-link.disabled:focus {
color: $nav-tabs-border-color;
border-color: $nav-tabs-border-color;
background-color: $gray-lightest;
}
.nav-link:hover,
.nav-link:focus {
background-color: lighten($gray-lightest, 5%);
}
}
.nav-pills {
.active {
border: 1px solid $btn-primary-border;
}
}
.breadcrumb {
border: 1px solid $dropdown-border-color;
border-radius: 3px;
font-size: $font-size-sm;
font-weight: 300;
text-transform: uppercase;
}
.pagination {
font-weight: 300;
.page-link {
border-color: transparent;
border-radius: 3px;
margin-left: 0.1em;
margin-right: 0.1em;
&:hover,
&:focus {
text-decoration: none;
}
}
.page-item.disabled {
.page-link {
border-color: transparent;
}
}
}
.list-group {
font-size: $font-size-sm;
font-weight: 300;
}
// Indicators ==================================================================
.close {
opacity: 0.6;
text-shadow: none;
&:hover,
&:focus {
opacity: 1;
}
}
.alert {
font-size: $font-size-sm;
font-weight: 300;
.alert-link {
font-weight: normal;
color: #fff;
text-decoration: underline;
}
}
.tag {
padding-bottom: .6em;
}
// Progress bars ===============================================================
.progress[value] {
height: 22px;
padding: 2px;
background-color: #f6f6f6;
border: 1px solid #ccc;
@include box-shadow(none);
}
// Containers ==================================================================
.card-footer {
color: $bg-classic;
}
// Custom ==================================================================
.rounded {
border-radius: .25rem;
}
\ No newline at end of file
// Masonstrap 4.0
// Variables
// -----------------------------------------------------
// Masonstrap 4.0 Variables
//
// Table of Contents
//
// Colors
// Color system
// Options
// Spacing
// Body
// Links
// Paragraphs
// Grid breakpoints
// Grid containers
// Grid columns
......@@ -18,8 +19,8 @@
// Forms
// Dropdowns
// Z-index master list
// Navbar
// Navs
// Navbar
// Pagination
// Jumbotron
// Form states and alerts
......@@ -38,85 +39,75 @@
// Close
// Code
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Replace `$search` with `$replace` in `$string`
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin _assert-starts-at-zero($map) {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
}
}
// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.
// Colors
//
// Grayscale and brand colors for use across Bootstrap.
// Color system
//
// Start with assigning color names to specific hex values.
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$red: #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green: #5cb85c !default;
$blue: #0275d8 !default;
$teal: #5bc0de !default;
$pink: #ff5b77 !default;
$purple: #613d7c !default;
// Create grayscale
$gray-dark: darken(#87908F, 20%);
$gray: #87908F;
$gray-light: lighten(#87908F, 20%);
$gray-lighter: lighten(#87908F, 25%);;
$gray-lightest: lighten(#87908F, 30%);;
// Reassign color vars to semantic color scheme
$brand-primary: #006633;
$brand-secondary: #FFCC33;
$brand-success: $brand-primary;
$brand-info: #007DC5;
$brand-warning: #F7941E;
$brand-danger: #AC1D37;
// Custom colors
$bg-classic: #3c4042;
$grays: (
100: $gray-100,
200: $gray-200,
300: $gray-300,
400: $gray-400,
500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900
) !default;
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$colors: (
blue: $blue,
indigo: $indigo,
purple: $purple,
pink: $pink,
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
cyan: $cyan,
white: $white,
gray: $gray-600,
gray-dark: $gray-800
) !default;
$theme-colors: (
primary: $blue,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
) !default;
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// Options
......@@ -124,7 +115,7 @@ $bg-classic: #3c4042;
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
......@@ -138,36 +129,15 @@ $enable-print-styles: true !default;
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacer: 1rem !default;
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
2: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
3: (
x: $spacer-x,
y: $spacer-y
),
4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
) !default;
$border-width: 1px !default;
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: (
......@@ -181,21 +151,24 @@ $sizes: (
//
// Settings for the `<body>` element.
$body-bg: #fff !default;
$body-color: $gray-dark !default;
$inverse-bg: $gray-dark !default;
$inverse-color: $gray-lighter !default;
$body-bg: $white !default;
$body-color: $gray-900 !default;
// Links
//
// Style anchor elements.
$link-color: $brand-primary !default;
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem;
// Grid breakpoints
//
......@@ -230,61 +203,62 @@ $container-max-widths: (
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width-base: 30px !default;
$grid-gutter-widths: (
xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
) !default;
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;
$border-width: 1px !default;
$border-color: $gray-200 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;
$caret-width: .3em !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
//$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
system-ui,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$font-weight-light: 300 !default;
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
$h1-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h3-font-size: 1.75rem !default;
$h4-font-size: 1.5rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 300;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
......@@ -304,14 +278,10 @@ $lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$text-muted: $gray-light !default;
$abbr-border-color: $gray-light !default;
$text-muted: $gray-600 !default;
$blockquote-small-color: $gray-light !default;
$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lightest;
$blockquote-border-width: .25rem !default;
$hr-border-color: rgba($black,.1) !default;
$hr-border-width: $border-width !default;
......@@ -325,26 +295,7 @@ $nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: 5px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;
$component-active-color: $white !default;
$component-active-bg: $brand-primary !default;
$caret-width: .3em !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
$mark-bg: #fcf8e3 !default;
// Tables
......@@ -352,89 +303,65 @@ $transition-collapse: height .35s ease !default;
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default;
$table-cell-padding-sm: .3rem !default;
$table-bg: transparent !default;
<