DRY up themes

Author: fbacall

app/assets/stylesheets/themes/blue.scss

@@ -2,238 +2,19 @@
 //////////////////////////////
 // Design-specific variables
 //////////////////////////////
-@font-face {
-  font-family: 'Lato';
-  src: font-url('Lato-Regular.ttf') format('truetype');
-}
 $theme-base: 'themes/blue';
 
 $primary-color: #024552;
 $secondary-color: #00839d;
 $accent-color: #40cbbd;
 
-$dark-color: #242526;
-$dark-60-color: #7b7c7c; // rgba(36, 37, 38, 0.6);
-$dark-30-color: #bcbdbd; // rgba(36, 37, 38, 0.3);
-$dark-05-color: #f3f4f4; // rgba(36, 37, 38, 0.05); // Unused
-
-$light-color: #F4F7FB;
-$light-60-color: rgba(244, 247, 251, 0.6); // Unused
-$light-30-color: rgba(244, 247, 251, 0.3); // Unused
-$light-05-color: rgba(244, 247, 251, 0.05); // Unused
-
-//////////////////////////////
-// TeSS variables
-//////////////////////////////
-// Misc
-$layout-spacing-base: 30px;
-$item-padding-base: 24px;
-$sidebar-width: 280px;
-$transition-time: 300ms;
-
-// Footer
-$footer-bg: #fafafa;
-$footer-border: transparent;
-$footer-text: $dark-color;
-$footer-border-radius: 50px;
-$footer-padding-top: 30px;
+@import "mixins/modern_base";
 
 //////////////////////////////
 // Bootstrap variable tweaks
 //////////////////////////////
-
-// For reference: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
-
-// Font
-$font-family-base: 'Lato', sans-serif;
-
-$font-size-base: 16px;
-$font-size-large: 18px;
-$font-size-small: 14px;
-
-$font-size-h1: 58px;
-$font-size-h2: 44px;
-$font-size-h3: 32px;
-$font-size-h4: 24px;
-
-// Colours
-$brand-primary: $secondary-color;
-$brand-secondary: $accent-color;
-$brand-danger: #d9534f;
-$brand-success: #129e37;
-$brand-warning: #f0be3e;
-$brand-info: #8fb464;
-
-$headings-color: $primary-color;
-
-$gray-darker: $dark-color;
-$gray-dark: darken($dark-60-color, 25%);
-$gray: darken($dark-60-color, 10%);
-$gray-light: $dark-60-color;
-$gray-lighter: #fafafa;
-
-$state-success-text: darken($brand-success, 10%);
-$state-success-bg: #d5f5dd;
-$state-success-border: $state-success-bg;
-
-$state-info-text: darken($brand-info, 35%);
-$state-info-bg: #e2ffbc;
-$state-info-border: $state-info-bg;
-
-$state-warning-text: darken($brand-warning, 30%);
-$state-warning-bg: #fff6c6;
-$state-warning-border: $state-warning-bg;
-
-$state-danger-text: darken($brand-danger, 20%);
-$state-danger-bg: #ffe9e9;
-$state-danger-border: $state-danger-bg;
-
-// Spacing
-$padding-base-vertical:     8px;
-$padding-base-horizontal:   16px;
-
-$padding-large-vertical:    12px;
-$padding-large-horizontal:  18px;
-
-$border-radius-base:        6px;
-$border-radius-large:       10px;
-$border-radius-small:       4px;
-
-// Forms
-$input-border: $gray-light;
-$input-border-focus: $secondary-color;
-
-// Navbar
-$navbar-height: 60px;
 $navbar-default-color: #fff;
 $navbar-default-bg: $primary-color;
-$navbar-default-border: transparent;
 $navbar-default-link-color: #fff;
-$navbar-default-link-hover-color: $accent-color;
-$navbar-default-link-active-color: $accent-color;
-
-// Breadcrumb
-$breadcrumb-bg: transparent;
-$breadcrumb-separator: "/";
-$breadcrumb-color: $dark-color !default;
-$breadcrumb-active-color: $dark-color !default;
-$breadcrumb-padding-horizontal: 5px;
-$breadcrumb-padding-vertical: $layout-spacing-base / 2;
-
-// Pagination
-$pagination-color: $primary-color;
-$pagination-active-bg: $secondary-color;
-$pagination-active-border: $secondary-color;
-
-// Links
-$link-color: $accent-color;
-$link-hover-color: darken(rgb(244, 125, 33), 15%);
-
-// Buttons
-$btn-default-color: $brand-secondary;
-$btn-default-bg: #fff;
-$btn-default-border: $brand-secondary;
-
-$btn-primary-color: $light-color;
-$btn-primary-bg: $accent-color;
-$btn-primary-border: $accent-color;
-
-$btn-secondary-color: $brand-primary; // Yes I know this is backwards
-$btn-secondary-bg: $btn-default-bg;
-$btn-secondary-border: $brand-primary;
-
-$btn-info-color: $brand-info;
-$btn-info-bg: #fff;
-$btn-info-border: $brand-info;
-
-$btn-success-color: $brand-success;
-$btn-success-bg: #fff;
-$btn-success-border: $brand-success;
-
-$btn-warning-color: $brand-warning;
-$btn-warning-bg: #fff;
-$btn-warning-border: $brand-warning;
-
-$btn-danger-color: $brand-danger;
-$btn-danger-bg: #fff;
-$btn-danger-border: $brand-danger;
-
-// Nav
-$nav-pills-active-link-hover-bg: $secondary-color;
-$nav-pills-active-link-hover-color: #fff;
-
-// Panels
-$panel-default-heading-bg: transparentize($secondary-color, 0.9);
-$panel-default-border: $panel-default-heading-bg;
-
-// Misc
-$label-default-bg: $secondary-color;
-$badge-bg: $accent-color;
-
-
-//////////////////////////////
-// Theme-specific style tweaks
-//////////////////////////////
-.btn-default:hover, .btn-default:active, .btn-default:focus {
-  color: $secondary-color !important;
-  background-color: #fff !important;
-  border-color: $secondary-color !important;
-
-  i {
-    filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(1217%) hue-rotate(168deg) brightness(102%) contrast(97%);
-  }
-}
-
-.btn-group.open {
-  .btn-default.dropdown-toggle {
-    color: $secondary-color !important;
-    background-color: #fff !important;
-    border-color: $secondary-color !important;
-  }
-}
-
-.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
-  color: $light-color !important;
-  background-color: $secondary-color !important;
-  border-color: $secondary-color !important;
-}
-
-@mixin modern-button-variant($color, $background, $border) {
-  &:hover, &:active, &:focus {
-    background: $background !important;
-    border-color: darken($border, 20%) !important;
-    color: darken($color, 20%) !important;
-  }
-}
-
-.btn-secondary { @include modern-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border) }
-.btn-info { @include modern-button-variant($btn-info-color, $btn-info-bg, $btn-info-border) }
-.btn-success { @include modern-button-variant($btn-success-color, $btn-success-bg, $btn-success-border) }
-.btn-warning { @include modern-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border) }
-.btn-danger { @include modern-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border) }
-
-.text-primary {
-  color: $secondary-color !important;
-}
-
-.nav-tabs a, .nav-pills a {
-  color: $secondary-color;
-}
-
-.unified-header .navbar-brand img {
-  max-height: 80px !important;
-}
-
-.unified-header {
-  h3 {
-    margin: 0.25em;
-    background: white;
-    border-radius: 10px;
-    padding: 5px;
-  }
-  a {
-    text-decoration: none;
-  }
-}
 
 @import "../application";