diff --git a/package.json b/package.json index 9a8aedfb..6537c03c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@edx/edx-bootstrap", - "version": "0.3.3", + "version": "0.3.4", "description": "The Bootstrap theme for Open edX", "license": "Apache-2.0", "repository": { diff --git a/sass/edx/_variables.scss b/sass/edx/_variables.scss index 984a6361..25a1c771 100644 --- a/sass/edx/_variables.scss +++ b/sass/edx/_variables.scss @@ -3,7 +3,6 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. - // // Color system // diff --git a/sass/open-edx/_variables.scss b/sass/open-edx/_variables.scss index d8ba2b9c..25a1c771 100644 --- a/sass/open-edx/_variables.scss +++ b/sass/open-edx/_variables.scss @@ -8,15 +8,15 @@ // $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; +$gray-100: #f5f5f5 !default; +$gray-200: #e7e7e7 !default; +$gray-300: #d9d9d9 !default; +$gray-400: #c8c8c8 !default; +$gray-500: #a0a0a0 !default; +$gray-600: #767676 !default; +$gray-700: #414141 !default; +$gray-800: #313131 !default; +$gray-900: #111 !default; $black: #000 !default; $grays: () !default; @@ -32,14 +32,14 @@ $grays: map-merge(( 900: $gray-900 ), $grays); -$blue: #007bff !default; +$blue: #0075b4 !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; -$pink: #e83e8c !default; -$red: #dc3545 !default; +$pink: #c2387d !default; +$red: #b20610 !default; $orange: #fd7e14 !default; -$yellow: #ffc107 !default; -$green: #28a745 !default; +$yellow: #e2c01f !default; +$green: #008100 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; @@ -67,7 +67,7 @@ $theme-colors: map-merge(( inverse: $white, disabled: $gray-600, success: $green, - info: $cyan, + info: $pink, warning: $yellow, danger: $red, purchase: $green, @@ -87,17 +87,18 @@ $theme-color-darkest: theme-color("darkest"); // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; + // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; -$enable-grid-classes: true !default; -$enable-print-styles: true !default; +//$enable-rounded: true !default; +//$enable-shadows: false !default; +//$enable-gradients: false !default; +//$enable-transitions: true !default; +//$enable-hover-media-query: false !default; +//$enable-grid-classes: true !default; +//$enable-print-styles: true !default; // Spacing @@ -195,9 +196,9 @@ $line-height-sm: 1 !default; $border-width: 1px !default; $border-color: theme-color("light") !default; -$border-radius: 0.25rem !default; -$border-radius-lg: 0.3rem !default; -$border-radius-sm: 0.2rem !default; +$border-radius: 0.1875rem !default; +$border-radius-lg: $border-radius !default; +$border-radius-sm: $border-radius !default; $component-active-color: theme-color("inverse") !default; $component-active-bg: theme-color("primary") !default; @@ -215,7 +216,7 @@ $transition-collapse: height 0.35s ease !default; $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default; //$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -//$font-family-base: $font-family-sans-serif !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; @@ -228,59 +229,59 @@ $font-weight-bold: bold !default; $font-weight-base: $font-weight-normal !default; $line-height-base: 1.5 !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; +$h1-font-size: 1.75rem !default; +$h2-font-size: 1.5rem !default; +$h3-font-size: 1.25rem !default; +$h4-font-size: 1rem !default; +$h5-font-size: 0.875rem !default; +$h6-font-size: 0.75rem !default; //$headings-margin-bottom: ($spacer / 2) !default; //$headings-font-family: inherit !default; //$headings-font-weight: 500 !default; //$headings-line-height: 1.1 !default; //$headings-color: inherit !default; - +// //$display1-size: 6rem !default; //$display2-size: 5.5rem !default; //$display3-size: 4.5rem !default; //$display4-size: 3.5rem !default; - +// //$display1-weight: 300 !default; //$display2-weight: 300 !default; //$display3-weight: 300 !default; //$display4-weight: 300 !default; //$display-line-height: $headings-line-height !default; - +// //$lead-font-size: 1.25rem !default; //$lead-font-weight: 300 !default; - +// //$small-font-size: 80% !default; - +// //$text-muted: $gray-600 !default; - +// //$blockquote-small-color: $gray-600 !default; //$blockquote-font-size: ($font-size-base * 1.25) !default; - +// //$hr-border-color: rgba($black,.1) !default; //$hr-border-width: $border-width !default; - +// //$mark-padding: 0.2em !default; - +// //$dt-font-weight: $font-weight-bold !default; - +// //$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default; //$nested-kbd-font-weight: $font-weight-bold !default; - +// //$list-inline-padding: 5px !default; - +// //$mark-bg: #fcf8e3 !default; - - +// +// // Tables // // Customizes the `.table` component with basic values, each used across all table variations. - +// //$table-cell-padding: 0.75rem !default; //$table-cell-padding-sm: 0.3rem !default; // @@ -295,10 +296,10 @@ $h6-font-size: 1rem !default; //$table-head-bg: $gray-200 !default; //$table-head-color: $gray-700 !default; // -//$table-dark-bg: $black !default; +//$table-dark-bg: $gray-900 !default; //$table-dark-accent-bg: rgba($white, 0.05) !default; //$table-dark-hover-bg: rgba($white, 0.075) !default; -//$table-dark-border-color: lighten($black, 7.5%) !default; +//$table-dark-border-color: lighten($gray-900, 7.5%) !default; //$table-dark-color: $body-bg !default; @@ -337,10 +338,10 @@ $btn-transition: background-color 0.15s ease-in-out, border-colo // Forms -$input-bg: $white !default; +$input-bg: theme-color("inverse") !default; $input-disabled-bg: theme-color("light") !default; -$input-color: $gray-700 !default; +$input-color: theme-color("secondary") !default; $input-border-color: rgba($theme-color-darkest, 0.15) !default; $input-btn-border-width: $border-width !default; // For form controls and buttons $input-box-shadow: inset 0 1px 1px rgba($theme-color-darkest, 0.075) !default; @@ -353,71 +354,71 @@ $input-border-radius-sm: $border-radius-sm !default; //$input-focus-border-color: lighten($blue, 25%) !default; //$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; //$input-focus-color: $input-color !default; - +// //$input-placeholder-color: $gray-600 !default; - +// //$input-height-border: $input-btn-border-width * 2 !default; - +// //$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; //$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; - +// //$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; //$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; - +// //$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; //$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; - +// //$input-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !default; - +// //$form-text-margin-top: 0.25rem !default; - +// //$form-check-margin-bottom: 0.5rem !default; //$form-check-input-gutter: 1.25rem !default; //$form-check-input-margin-y: 0.25rem !default; //$form-check-input-margin-x: 0.25rem !default; - +// //$form-check-inline-margin-x: 0.75rem !default; - +// //$form-group-margin-bottom: 1rem !default; - +// //$input-group-addon-color: $input-color !default; //$input-group-addon-bg: $gray-200 !default; //$input-group-addon-border-color: $input-border-color !default; //$input-group-btn-border-color: $input-border-color !default; - +// //$custom-control-gutter: 1.5rem !default; //$custom-control-spacer-y: 0.25rem !default; //$custom-control-spacer-x: 1rem !default; - +// //$custom-control-indicator-size: 1rem !default; //$custom-control-indicator-bg: #ddd !default; //$custom-control-indicator-bg-size: 50% 50% !default; //$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black,.1) !default; - +// //$custom-control-indicator-disabled-bg: $gray-200 !default; //$custom-control-description-disabled-color: theme-colors("disabled") !default; - +// //$custom-control-indicator-checked-color: $white !default; //$custom-control-indicator-checked-bg: $blue !default; //$custom-control-indicator-checked-box-shadow: none !default; - +// //$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $blue !default; - +// //$custom-control-indicator-active-color: $white !default; //$custom-control-indicator-active-bg: lighten($blue, 35%) !default; //$custom-control-indicator-active-box-shadow: none !default; - +// //$custom-checkbox-indicator-border-radius: $border-radius !default; //$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; - +// //$custom-checkbox-indicator-indeterminate-bg: $blue !default; //$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; //$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; //$custom-checkbox-indicator-indeterminate-box-shadow: none !default; - +// //$custom-radio-indicator-border-radius: 50% !default; //$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; - +// //$custom-select-padding-y: 0.375rem !default; //$custom-select-padding-x: 0.75rem !default; //$custom-select-height: $input-height !default; @@ -433,17 +434,17 @@ $input-border-radius-sm: $border-radius-sm !default; //$custom-select-border-width: $input-btn-border-width !default; //$custom-select-border-color: $input-border-color !default; //$custom-select-border-radius: $border-radius !default; - +// //$custom-select-focus-border-color: lighten($blue, 25%) !default; //$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075), 0 0 5px rgba($custom-select-focus-border-color, 0.5) !default; - +// //$custom-select-font-size-sm: 75% !default; //$custom-select-height-sm: $input-height-sm !default; - +// //$custom-file-height: $input-height !default; //$custom-file-width: 14rem !default; //$custom-file-focus-box-shadow: 0 0 0 0.075rem $white, 0 0 0 0.2rem $blue !default; - +// //$custom-file-padding-y: $input-btn-padding-y !default; //$custom-file-padding-x: $input-btn-padding-x !default; //$custom-file-line-height: $input-btn-line-height !default; @@ -477,14 +478,14 @@ $input-border-radius-sm: $border-radius-sm !default; $dropdown-min-width: 10rem !default; $dropdown-padding-y: 0.5rem !default; $dropdown-spacer: 0.125rem !default; -$dropdown-bg: $white !default; +$dropdown-bg: theme-color("inverse") !default; $dropdown-border-color: rgba($theme-color-darkest, 0.15) !default; $dropdown-border-width: $border-width !default; $dropdown-divider-bg: theme-color("light") !default; $dropdown-box-shadow: 0 0.5rem 1rem rgba($theme-color-darkest, 0.175) !default; -$dropdown-link-color: theme-color("darkest") !default; -$dropdown-link-hover-color: darken($theme-color-darkest, 5%) !default; +$dropdown-link-color: theme-color("darker") !default; +$dropdown-link-hover-color: darken($theme-color-darker, 5%) !default; $dropdown-link-hover-bg: theme-color("lightest") !default; $dropdown-link-active-color: $component-active-color !default; @@ -499,7 +500,7 @@ $dropdown-header-color: theme-color("secondary") !default; // Z-index master list -// + // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. @@ -535,7 +536,7 @@ $nav-tabs-link-hover-border-color: theme-color("light") !default; //$navbar-padding-x: $spacer !default; //$navbar-brand-font-size: $font-size-lg !default; -// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +//// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link //$nav-link-height: $navbar-brand-font-size * $line-height-base !default; //$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; //$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default; @@ -603,12 +604,12 @@ $nav-tabs-link-hover-border-color: theme-color("light") !default; //$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; //$card-cap-bg: rgba($black, 0.03) !default; //$card-bg: $white !default; -// + //$card-img-overlay-padding: 1.25rem !default; -// + //$card-group-margin: ($grid-gutter-width / 2) !default; //$card-deck-margin: $card-group-margin !default; -// + //$card-columns-count: 3 !default; //$card-columns-gap: 1.25rem !default; //$card-columns-margin: $card-spacer-y !default; @@ -638,20 +639,20 @@ $nav-tabs-link-hover-border-color: theme-color("light") !default; //$popover-border-width: $border-width !default; //$popover-border-color: rgba($black,.2) !default; //$popover-box-shadow: 0 5px 10px rgba($black,.2) !default; - +// //$popover-header-bg: darken($popover-bg, 3%) !default; //$popover-header-color: $headings-color !default; //$popover-header-padding-y: 8px !default; //$popover-header-padding-x: 14px !default; - +// //$popover-body-color: $body-color !default; //$popover-body-padding-y: 9px !default; //$popover-body-padding-x: 14px !default; - +// //$popover-arrow-width: 10px !default; //$popover-arrow-height: 5px !default; //$popover-arrow-color: $popover-bg !default; - +// //$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; //$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; @@ -662,7 +663,7 @@ $nav-tabs-link-hover-border-color: theme-color("light") !default; //$badge-font-weight: $font-weight-bold !default; //$badge-padding-y: 0.25em !default; //$badge-padding-x: 0.4em !default; - +// //$badge-pill-padding-x: 0.6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. @@ -704,13 +705,11 @@ $nav-tabs-link-hover-border-color: theme-color("light") !default; // Define alert colors, border radius, and padding. //$alert-padding-y: 0.75rem !default; -//$alert-padding-x: 1.25rem !default; -//$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; +//$alert-margin-bottom: $spacer-y !default; +$alert-border-radius: 1px !default; //$alert-link-font-weight: $font-weight-bold !default; //$alert-border-width: $border-width !default; - // Progress bars //$progress-height: 1rem !default; @@ -732,7 +731,7 @@ $alert-border-radius: $border-radius !default; //$list-group-item-padding-y: 0.75rem !default; //$list-group-item-padding-x: 1.25rem !default; -//$list-group-hover-bg: $gray-100 !default; +//$list-group-hover-bg: gray-100 !default; //$list-group-active-color: $component-active-color !default; //$list-group-active-bg: $component-active-bg !default; //$list-group-active-border-color: $list-group-active-bg !default; @@ -777,6 +776,7 @@ $breadcrumb-divider-color: $gray-500 !default; $breadcrumb-active-color: $gray-500 !default; $breadcrumb-divider: ">" !default; + // Carousel //$carousel-control-color: $white !default; @@ -812,7 +812,7 @@ $close-text-shadow: 0 1px 0 theme-color("inverse") !default; //$code-padding-y: 0.2rem !default; //$code-padding-x: 0.4rem !default; //$code-color: #bd4147 !default; -//$code-bg: $gray-100 !default; +//$code-bg: gray-100 !default; //$kbd-color: $white !default; //$kbd-bg: $gray-900 !default;