Skip to content

GitLab

Unverified Commit 8a00657c authored by David Haynes's avatar David Haynes
Browse files

Let's go back to square one 

- move colors over as necessary
parent bbafd4f7
Pipeline #990 passed with stage
in 1 minute and 3 seconds
Hide whitespace changes
Inline Side-by-side
masonstrap/_masonstrap.scss
View file @ 8a00657c
// Masonstrap 1.0
// Masonstrap 4.0
// Bootswatch
// -----------------------------------------------------
$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" !default;
@import url($web-font-path);
// Navbar =====================================================================
// Navbar ======================================================================
.navbar {
border: none;
font-size: 13rem;
font-weight: 300;
.navbar-toggle:hover .icon-bar {
background-color: #b3b3b3;
}
&-collapse {
border-top-color: $dropdown-divider-bg;
@include box-shadow(none);
}
font-size: $font-size-sm;
font-weight: $headings-font-weight;
}
.btn {
padding-top: 6rem;
padding-bottom: 6rem;
}
.bg-primary {
&-form {
margin-top: 7rem;
margin-bottom: 5rem;
.dropdown-menu {
background-color: $brand-primary;
.form-control {
height: auto;
padding: $padding-xs-vertical $padding-xs-horizontal;
.dropdown-item,
.dropdown-item:focus {
color: $navbar-inverse-color;
}
}
&-text {
margin: 12rem 15rem;
line-height: 21rem;
.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($brand-primary, 5%);
color: #fff;
}
}
}
.dropdown {
.bg-inverse {
background-color: $gray !important;
&-menu {
border: none;
.dropdown-menu {
background-color: $gray;
> li > a,
> li > a:focus {
background-color: transparent;
font-size: 13rem;
font-weight: 300;
}
.dropdown-item,
.dropdown-item:focus {
color: $navbar-inverse-color;
}
&-header {
color: rgba(255, 255, 255, 0.5);
.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($gray, 5%);
color: #fff;
}
}
}
&-default {
.dropdown-menu {
background-color: $navbar-default-bg;
.bg-faded {
> li > a,
> li > a:focus {
color: $navbar-default-link-color;
}
.dropdown-menu {
background-color: $gray-lightest;
> li > a:hover,
> .active > a,
> .active > a:hover {
background-color: $navbar-default-link-hover-bg;
}
.dropdown-item,
.dropdown-item:focus {
color: $navbar-light-color;
}
}
&-inverse {
.dropdown-menu {
background-color: $navbar-inverse-bg;
> li > a,
> li > a:focus {
color: $navbar-inverse-color;
}
> li > a:hover,
> .active > a,
> .active > a:hover {
background-color: $navbar-inverse-link-hover-bg;
}
.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:focus {
background-color: lighten($gray-lightest, 5%);
color: $navbar-light-hover-color;
}
}
}
// Buttons ====================================================================
.btn {
padding: $padding-base-vertical $padding-base-horizontal;
&-lg {
padding: $padding-large-vertical $padding-large-horizontal;
}
&-sm {
padding: $padding-small-vertical $padding-small-horizontal;
}
&-xs {
padding: $padding-xs-vertical $padding-xs-horizontal;
}
}
// Buttons =====================================================================
.btn-group {
.btn ~ .dropdown-toggle {
padding-left: 16rem;
padding-right: 16rem;
}
.dropdown-menu {
border-top-width: 0;
}
&.dropup .dropdown-menu {
border-top-width: 1rem;
border-bottom-width: 0;
margin-bottom: 0;
}
.dropdown-toggle {
&.btn-default ~ .dropdown-menu {
background-color: $btn-default-bg;
border-color: $btn-default-border;
&.btn-primary ~ .dropdown-menu {
background-color: $btn-primary-bg;
border-color: $btn-primary-border;
> li > a {
color: $btn-default-color;
.dropdown-item {
color: $btn-primary-color;
}
> li > a:hover {
background-color: darken($btn-default-bg, 8%);
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-primary-bg, 8%);
}
}
&.btn-primary ~ .dropdown-menu {
background-color: $btn-primary-bg;
border-color: $btn-primary-border;
&.btn-secondary ~ .dropdown-menu {
background-color: $btn-secondary-bg;
border-color: $btn-secondary-border;
> li > a {
color: $btn-primary-color;
.dropdown-item {
color: $btn-secondary-color;
}
> li > a:hover {
background-color: darken($btn-primary-bg, 8%);
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-secondary-bg, 8%);
}
}
......@@ -164,11 +112,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-success-bg;
border-color: $btn-success-border;
> li > a {
.dropdown-item {
color: $btn-success-color;
}
> li > a:hover {
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-success-bg, 8%);
}
}
......@@ -177,11 +126,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-info-bg;
border-color: $btn-info-border;
> li > a {
.dropdown-item {
color: $btn-info-color;
}
> li > a:hover {
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-info-bg, 8%);
}
}
......@@ -190,11 +140,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-warning-bg;
border-color: $btn-warning-border;
> li > a {
.dropdown-item {
color: $btn-warning-color;
}
> li > a:hover {
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-warning-bg, 8%);
}
}
......@@ -203,154 +154,120 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-danger-bg;
border-color: $btn-danger-border;
> li > a {
.dropdown-item {
color: $btn-danger-color;
}
> li > a:hover {
.dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-danger-bg, 8%);
}
}
}
}
// Typography =================================================================
.lead {
color: $gray;
}
// Typography ==================================================================
cite {
font-style: italic;
.blockquote-footer {
color: $gray-light;
}
blockquote {
border-left-width: 1rem;
color: $gray;
&.pull-right {
border-right-width: 1rem;
}
// Tables ======================================================================
small {
font-size: $font-size-small;
font-weight: 300;
}
table {
font-size: $font-size-sm;
}
// Tables =====================================================================
.table {
table {
font-size: $font-size-small;
&-success,
&-info,
&-warning,
&-danger {
color: #fff;
}
}
// Forms ======================================================================
// Forms =======================================================================
label,
.control-label,
.help-block,
.checkbox,
.radio {
font-size: $font-size-small;
font-weight: normal;
}
input[type="radio"],
input[type="checkbox"] {
margin-top: 1rem;
.radio,
.form-control-feedback {
font-size: $font-size-sm;
}
// Navs =======================================================================
// Navs ========================================================================
.nav {
.open > a,
.open > a:hover,
.open > a:focus {
border-color: transparent;
}
.dropdown-item {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: $font-size-sm;
font-weight: 300;
}
.nav-tabs {
> li > a {
background-color: $btn-default-bg;
color: $text-color;
.nav-link,
.nav-link.disabled,
.nav-link.disabled:hover,
.nav-link.disabled:focus {
border-color: $nav-tabs-border-color;
background-color: $gray-lightest;
}
.caret {
border-top-color: $text-color;
border-bottom-color: $text-color;
.nav-link:hover,
.nav-link:focus {
background-color: lighten($gray-lightest, 5%);
}
}
.nav-pills {
font-weight: 300;
.active {
border: 1px solid $btn-primary-border;
}
}
.breadcrumb {
border: 1rem solid $table-border-color;
border-radius: 3rem;
font-size: 10rem;
border: 1px solid $dropdown-border-color;
border-radius: 3px;
font-size: $font-size-sm;
font-weight: 300;
text-transform: uppercase;
}
.pagination {
font-size: $font-size-small;
font-weight: 300;
color: $gray-light;
> li {
> a,
> span {
margin-left: 4rem;
color: $gray-light;
}
}
.page-link {
border-color: transparent;
border-radius: 3px;
margin-left: 0.1em;
margin-right: 0.1em;
> .active {
> a,
> span {
color: #fff;
&:hover,
&:focus {
text-decoration: none;
}
}
> li,
> li:first-child,
> li:last-child {
> a,
> span {
border-radius: 3rem;
.page-item.disabled {
.page-link {
border-color: transparent;
}
}
&-lg > li > a,
&-lg > li > span {
padding-left: 22rem;
padding-right: 22rem;
}
&-sm > li > a,
&-sm > li > span {
padding: 0 5rem;
}
}
.pager {
font-size: $font-size-small;
font-weight: 300;
color: $gray-light;
}
.list-group {
font-size: $font-size-small;
font-size: $font-size-sm;
font-weight: 300;
}
// Indicators =================================================================
// Indicators ==================================================================
.close {
opacity: 0.4;
text-decoration: none;
opacity: 0.6;
text-shadow: none;
&:hover,
......@@ -360,7 +277,7 @@ input[type="checkbox"] {
}
.alert {
font-size: $font-size-small;
font-size: $font-size-sm;
font-weight: 300;
.alert-link {
......@@ -370,82 +287,18 @@ input[type="checkbox"] {
}
}
.label {
padding-left: 1em;
padding-right: 1em;
border-radius: 0;
font-weight: 300;
&-default {
background-color: $btn-default-bg;
color: $btn-default-color;
}
}
.badge {
font-weight: 300;
.tag {
padding-bottom: .6em;
}
// Progress bars ==============================================================
// Progress bars ===============================================================
.progress {
height: 22rem;
padding: 2rem;
.progress[value] {
height: 22px;
padding: 2px;
background-color: #f6f6f6;
border: 1rem solid #ccc;
border: 1px solid #ccc;
@include box-shadow(none);
}
// Containers =================================================================
.dropdown {
&-menu {
padding: 0;
margin-top: 0;
font-size: $font-size-small;
> li > a {
padding: 12rem 15rem;
color: black;
}
.active > a,
.active > a:hover {
color: black;
}
}
&-header {
padding-left: 15rem;
padding-right: 15rem;
font-size: 9rem;
text-transform: uppercase;
}
}
.popover {
color: #fff;
font-size: 12rem;
font-weight: 300;
}
.panel {
&-heading,
&-footer {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
&-default {
.close {
color: $text-color;
}
}
}
.modal {
.close {
color: $text-color;
}
}
// Containers ==================================================================
\ No newline at end of file
masonstrap/_variables.scss
View file @ 8a00657c
$bootstrap-sass-asset-helper: false !default;
// Masonstrap 1.0
// Masonstrap 4.0
// Variables
// --------------------------------------------------
// -----------------------------------------------------
// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
// Tables
// Buttons
// Forms
// Dropdowns
// Z-index master list
// Navbar
// Navs
// Pagination
// Jumbotron
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// 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;
}