diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index fa2daf9..d350adc 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -9,7 +9,8 @@ * compiled file, but it's generally better to create a new file per style scope. * *= require_self + //= require foundation_and_overrides + */ -@import "foundation_and_overrides.scss"; @import "my.css.scss"; diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss index 572a676..f977d3f 100644 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ b/app/assets/stylesheets/foundation_and_overrides.scss @@ -95,14 +95,6 @@ $include-html-global-classes: $include-html-classes; // $font-weight-normal: normal !default; // $font-weight-bold: bold !default; -// We use these as default colors throughout -// $primary-color: #008CBA; -// $secondary-color: #e7e7e7; -// $alert-color: #f04124; -// $success-color: #43AC6A; -// $warning-color: #f08a24; -// $info-color: #a0d3e8; - // $white : #FFFFFF; // $ghost : #FAFAFA; // $snow : #F9F9F9; @@ -123,6 +115,14 @@ $include-html-global-classes: $include-html-classes; // $jet : #222222; // $black : #000000; +// We use these as default colors throughout +// $primary-color: #008CBA; +// $secondary-color: #e7e7e7; +// $alert-color: #f04124; +// $success-color: #43AC6A; +// $warning-color: #f08a24; +// $info-color: #a0d3e8; + // We use these to control various global styles // $body-bg: $white; // $body-font-color: $jet; @@ -318,14 +318,14 @@ $include-html-global-classes: $include-html-classes; // $include-html-accordion-classes: $include-html-classes; // $accordion-navigation-padding: rem-calc(16); -// $accordion-navigation-bg-color: $silver ; +// $accordion-navigation-bg-color: $silver; // $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); // $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); // $accordion-navigation-font-color: $jet; // $accordion-navigation-font-size: rem-calc(16); // $accordion-navigation-font-family: $body-font-family; -// $accordion-content-padding: $column-gutter/2; +// $accordion-content-padding: ($column-gutter/2); // $accordion-content-active-bg-color: $white; // 02. Alert Boxes @@ -545,7 +545,7 @@ $include-html-global-classes: $include-html-classes; // $f-dropdown-font-size: rem-calc(14); // $f-dropdown-list-padding: rem-calc(5, 10); // $f-dropdown-line-height: rem-calc(18); -// $f-dropdown-list-hover-bg: $smoke ; +// $f-dropdown-list-hover-bg: $smoke; // $dropdown-mobile-default-float: 0; // We use this to control the styles for when the dropdown has custom content. @@ -573,25 +573,25 @@ $include-html-global-classes: $include-html-classes; // $dropdown-button-padding-tny: $button-pip-tny * 7; // $dropdown-button-pip-size-tny: $button-pip-tny; // $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; -// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1); +// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1); // We use these to style small dropdown buttons // $dropdown-button-padding-sml: $button-pip-sml * 7; // $dropdown-button-pip-size-sml: $button-pip-sml; // $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; -// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1); +// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1); // We use these to style medium dropdown buttons // $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); // $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); // $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; -// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2); +// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2); // We use these to style large dropdown buttons // $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); // $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); // $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; -// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3); +// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3); // 10. Flex Video // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -667,6 +667,7 @@ $include-html-global-classes: $include-html-classes; // $input-error-message-font-weight: $font-weight-normal; // $input-error-message-font-style: italic; // $input-error-message-font-color: $white; +// $input-error-message-bg-color: $alert-color; // $input-error-message-font-color-alt: $oil; // We use this to style the glowing effect of inputs when focused @@ -685,9 +686,11 @@ $include-html-global-classes: $include-html-classes; // $include-html-icon-bar-classes: $include-html-classes; // $icon-bar-bg: $oil; // $icon-bar-font-color: $white; +// $icon-bar-font-color-hover: $icon-bar-font-color; // $icon-bar-font-size: 1rem; // $icon-bar-hover-color: $primary-color; // $icon-bar-icon-color: $white; +// $icon-bar-icon-color-hover: $icon-bar-icon-color; // $icon-bar-icon-size: 1.875rem; // $icon-bar-image-width: 1.875rem; // $icon-bar-image-height: 1.875rem; @@ -991,7 +994,7 @@ $include-html-global-classes: $include-html-classes; // $price-title-font-family: $body-font-family; // We use these to control the price styles -// $price-money-bg: $vapor ; +// $price-money-bg: $vapor; // $price-money-padding: rem-calc(15 20); // $price-money-align: center; // $price-money-color: $oil; @@ -1268,7 +1271,7 @@ $include-html-global-classes: $include-html-classes; // These control the background color for the table and even rows // $table-bg: $white; -// $table-even-row-bg: $snow ; +// $table-even-row-bg: $snow; // These control the table cell border style // $table-border-style: solid; @@ -1308,7 +1311,7 @@ $include-html-global-classes: $include-html-classes; // $tabs-navigation-font-family: $body-font-family; // $tabs-content-margin-bottom: rem-calc(24); -// $tabs-content-padding: $column-gutter/2; +// $tabs-content-padding: ($column-gutter/2); // $tabs-vertical-navigation-margin-bottom: 1.25rem; @@ -1365,7 +1368,7 @@ $include-html-global-classes: $include-html-classes; // $topbar-bg: $topbar-bg-color; // Height and margin -// $topbar-height: 45px; +// $topbar-height: rem-calc(45); // $topbar-margin-bottom: 0; // Controlling the styles for the title in the top bar @@ -1376,6 +1379,7 @@ $include-html-global-classes: $include-html-classes; // $topbar-dropdown-bg: $oil; // $topbar-dropdown-link-color: $white; // $topbar-dropdown-link-bg: $oil; +// $topbar-dropdown-link-bg-hover: $oil; // $topbar-dropdown-link-weight: $font-weight-normal; // $topbar-dropdown-toggle-size: 5px; // $topbar-dropdown-toggle-color: $white; @@ -1391,12 +1395,12 @@ $include-html-global-classes: $include-html-classes; // $topbar-link-hover-lightness: -10%; // Darken by 10% // $topbar-link-bg: $topbar-bg; // $topbar-link-bg-color-hover: $charcoal; -// $topbar-link-bg-hover: #272727; +// $topbar-link-bg-hover: $oil; // $topbar-link-bg-active: $primary-color; // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); // $topbar-link-font-family: $body-font-family; // $topbar-link-text-transform: none; -// $topbar-link-padding: $topbar-height / 3; +// $topbar-link-padding: ($topbar-height / 3); // $topbar-back-link-size: $h5-font-size; // $topbar-link-dropdown-padding: 20px;