TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2773 from myabc/fix/foundation-settings-import-order

Browse Source 
Import _settings.scss before Foundation framework
pull/2778/merge
Florian Kraft 10 years ago
parent 5ed210bd94 99231383e4
commit 6922cfca08
2 changed files with 151 additions and 52 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 201
      app/assets/stylesheets/_settings.scss
  2. 2
      app/assets/stylesheets/default.css.sass

201
app/assets/stylesheets/_settings.scss
Unescape View File

@ -5,20 +5,20 @@
// Table of Contents:
//
// 1. CSS Exports
// 2. Typography
// 2. Global Styles
// 3. Breakpoints
// 4. Typography
// 5. Grid
// 6. Accordion
// 7. Action sheet
// 8. Block list
// 9. Button
// 10. Button Group
// 7. Action Sheet
// 8. Block List
// 9. Button Group
// 10. Button
// 11. Card
// 12. Extra Components
// 12. Extras
// 13. Forms
// 14. Iconic
// 15. Label and Badge
// 15. Label
// 16. Menu Bar
// 17. Modal
// 18. Motion UI
@ -30,10 +30,13 @@
// 24. Tabs
// 25. Title Bar
@import "helpers/functions";
// 1. CSS Exports
// - - - - - - - - - - - - - - - - - - - -
// Set a component to "false" to prevent the CSS classes from being printed.
// You can still use the mixins even if the value is false.
// - - - - - - - - - - - - - - -
// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
$include-css: (
accordion: false,
action-sheet: false,
@ -64,8 +67,9 @@ $include-css: (
);
// 2. Global Styles
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// This sets 1rem to be 16px
// $rem-base: 16px;
// The default font-size is set to 100% of the browser style sheet (usually 16px)
@ -115,10 +119,9 @@ $gray-light: #F8F8F8;
// $global-spacing: rem-calc(15);
// 3. Breakpoints
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// These are our named breakpoints. You can use them in our breakpoint function like this:
// @include breakpoint(medium) { // Medium and larger styles }
// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
$breakpoints: (
small: rem-calc(300),
medium: rem-calc(640),
@ -128,12 +131,108 @@ $breakpoints: (
xxxlarge: rem-calc(2048),
);
// All of the names in this list will be output as classes in your CSS,
// like small-12, medium-6, and so on.
// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
// $breakpoint-classes: (small medium large);
///
// 2. Mixins
// - - - - - - - - - - - - - - -
/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
/// - If a string is passed, the mixin will look for it in the $breakpoints map, and use a media query there.
/// - If a pixel value is passed, it will be converted to an em value using $rem-base.
/// - If a rem value is passed, the unit will be changed to em.
/// - If an em value is passed, the value will be used as-is.
///
/// @param {mixed} $val - Breakpoint name or px/em/rem value to process.
///
/// @output If the breakpoint is "0px and larger", outputs the content. Otherwise, outputs the content wrapped in a media query.
// @mixin breakpoint($val: small) {
// // Size or keyword
// $bp: nth($val, 1);
// // Value for max-width media queries
// $bpMax: 0;
// // Direction of media query (up, down, or only)
// $dir: if(length($val) > 1, nth($val, 2), up);
// // Eventual output
// $str: 'only screen';
// // Is it a named media query?
// $named: false;
// // Orientation media queries have a unique syntax
// @if $bp == 'landscape' or $bp == 'portrait' {
// $str: $str + ' and (orientation: #{$bp})';
// }
// @else {
// // Try to pull a named breakpoint out of the $breakpoints map
// @if type-of($bp) == 'string' {
// @if map-has-key($breakpoints, $bp) {
// @if $dir == 'only' {
// $next-bp: map-next($breakpoints, $bp);
// @if $next-bp == null {
// $bpMax: null;
// }
// @else {
// $bpMax: $next-bp - (1/16);
// }
// }
// $bp: map-get($breakpoints, $bp);
// $named: true;
// }
// @else {
// $bp: 0;
// }
// }
// // Pixel and unitless values are converted to rems
// @if unit($bp) == 'px' or unit($bp) == '' {
// $bp: rem-calc($bp);
// }
// // Finally, the rem value is turned into an em value
// $bp: strip-unit($bp) * 1em;
// // Skip media query creation if the input is "0 up" or "0 down"
// @if $bp > 0 or $dir == 'only' {
// // And lo, a media query was born
// @if $dir == 'only' {
// @if $named == true {
// $str: $str + ' and (min-width: #{$bp})';
// @if $bpMax != null {
// $str: $str + ' and (max-width: #{$bpMax})';
// }
// }
// @else {
// @debug 'ERROR: Only named media queries can have an "only" range.';
// }
// }
// @else if $dir == 'down' {
// $max: $bp - (1/16);
// $str: $str + ' and (max-width: #{$max})';
// }
// @else {
// $str: $str + ' and (min-width: #{$bp})';
// }
// }
// }
// // Output
// @if $bp == 0em and $dir != 'only' {
// @content;
// }
// @else {
// @media #{$str} {
// @content;
// }
// }
// }
/// Prefixes selector $class with breakpoint keywords, allowing you to create a batch of breakpoint classes with one chunk of code. If you want to skip a breakpoint (like small, because mobile first and all that), add values to the $omit parameter.
///
/// @param {string} $class - Class to prefix with the breakpoint name and a hyphen.
// 4. Typography
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// We use these to control header font styles
// $header-font-family: $body-font-family;
@ -231,7 +330,7 @@ $breakpoints: (
// $acronym-underline: 1px dotted #ddd;
// 5. Grid
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $container-width: rem-calc(900);
// $block-padding: $global-padding;
@ -239,13 +338,13 @@ $breakpoints: (
// $block-grid-max-size: 6;
// 6. Accordion
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $accordion-border: 1px solid $gray-dark;
// $accordion-title-background: $gray-light;
// $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
// $accordion-title-background-active: lighten($gray-light, 2);
// $accordion-title-background-active: smartscale($accordion-title-background, 3%);
// $accordion-title-color: isitlight($accordion-title-background);
// $accordion-title-color-active: isitlight($accordion-title-background);
@ -253,7 +352,7 @@ $breakpoints: (
// $accordion-content-padding: $global-padding;
// 7. Action Sheet
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $actionsheet-background: white;
// $actionsheet-border-color: #ccc;
@ -271,7 +370,7 @@ $breakpoints: (
// $actionsheet-link-background-hover: smartscale($actionsheet-background);
// 8. Block List
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $blocklist-background: #fff;
// $blocklist-fullbleed: true;
@ -292,8 +391,15 @@ $breakpoints: (
// $blocklist-check-icons: true;
// 9. Button
// - - - - - - - - - - - - - - - - - - - -
// 9. Button Group
// - - - - - - - - - - - - - - -
// $btngroup-background: $primary-color;
// $btngroup-color: #fff;
// $btngroup-radius: $button-radius;
// 10. Button
// - - - - - - - - - - - - - - -
$button-padding: 0.65em 1em;
// $button-margin: 0 $global-padding $global-padding 0;
@ -308,18 +414,11 @@ $button-radius: 2px;
// large: 1.3,
// );
// $button-font-size: 0.9rem;
// $button-opacity-disabled: 0.8;
// $button-opacity-disabled: 0.5;
// $button-tag-selector: true;
// 10. Button Group
// - - - - - - - - - - - - - - - - - - - -
// $btngroup-background: $primary-color;
// $btngroup-color: #fff;
// $btngroup-radius: $button-radius;
// 11. Card
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $card-background: #fff;
// $card-color: isitlight($card-background);
@ -331,8 +430,8 @@ $button-radius: 2px;
// $card-divider-background: smartscale($card-background, 7%);
// 12. Extra Components
// - - - - - - - - - - - - - - - - - - - -
// 12. Extras
// - - - - - - - - - - - - - - -
// $closebutton-position: (top right);
// $closebutton-size: 2em;
@ -344,7 +443,7 @@ $button-radius: 2px;
// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25);
// 13. Forms
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// Basic form variables
// $form-fontsize: 1rem;
@ -396,15 +495,15 @@ $form-padding: 0.375rem;
// $meter-radius: 0;
// 14. Iconic
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $iconic-primary-fill: $primary-color;
// $iconic-primary-stroke: $primary-color;
// $iconic-accent-fill: $iconic-primary-fill;
// $iconic-accent-stroke: $iconic-accent-fill;
// 15. Label and Badge
// - - - - - - - - - - - - - - - - - - - -
// 15. Label
// - - - - - - - - - - - - - - -
// $label-fontsize: 0.8rem;
// $label-padding: ($global-padding / 3) ($global-padding / 2);
@ -419,7 +518,7 @@ $form-padding: 0.375rem;
// $badge-font-color: #fff;
// 16. Menu Bar
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $menubar-fontsize: 1rem;
// $menubar-background: #fff;
@ -434,7 +533,7 @@ $form-padding: 0.375rem;
// $menubar-icon-spacing: $menubar-item-padding;
// 17. Modal
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $modal-background: #fff;
// $modal-border: 0;
@ -452,7 +551,7 @@ $form-padding: 0.375rem;
// $modal-overlay-background: rgba(#333, 0.7);
// 18. Motion UI
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// Classes to use when triggering in/out animations
// $motion-class: (
@ -498,7 +597,7 @@ $form-padding: 0.375rem;
// $motion-delay-long: 700ms;
// 19. Notification
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $notification-default-position: right top;
// $notification-width: rem-calc(400);
@ -514,7 +613,7 @@ $form-padding: 0.375rem;
// $notification-icon-align: top;
// 20. Off-canvas
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $offcanvas-size-horizontal: 250px;
// $offcanvas-size-vertical: 250px;
@ -528,7 +627,7 @@ $form-padding: 0.375rem;
// $offcanvas-frame-selector: '.grid-frame';
// 21. Panel
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $panel-size-horizontal: 300px;
// $panel-size-vertical: 300px;
@ -539,16 +638,16 @@ $form-padding: 0.375rem;
// $panel-animation-speed: 0.25s;
// 22. Popup
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $popup-width: rem-calc(300);
// $popup-background: #fff;
// $popup-border: 0;
// $popup-radius: 8px;
// $popup-radius: 0;
// $popup-shadow: 0 0 10px rgba(#000, 0.25);
// 23. Switch
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $switch-width: rem-calc(50);
// $switch-height: rem-calc(32);
@ -562,13 +661,13 @@ $form-padding: 0.375rem;
// $switch-paddle-offset: 4px;
// 24. Tabs
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $tabstrip-background: transparent;
// $tab-title-background: $gray-light;
// $tab-title-background-hover: smartscale($tab-title-background, 5%);
// $tab-title-background-active: lighten($gray-light, 2);
// $tab-title-background-active: smartscale($tab-title-background, 3%);
// $tab-title-color: isitlight($tab-title-background);
// $tab-title-color-active: $tab-title-color;
@ -576,7 +675,7 @@ $form-padding: 0.375rem;
// $tab-content-padding: $global-padding;
// 25. Title Bar
// - - - - - - - - - - - - - - - - - - - -
// - - - - - - - - - - - - - - -
// $titlebar-center-width: 50%;
// $titlebar-side-width: (100% - $titlebar-center-width) / 2;

2
app/assets/stylesheets/default.css.sass
Unescape View File

@ -37,8 +37,8 @@
@import open_project_global/all
@import foundation
@import settings
@import foundation
@import typography

Write Preview
Loading…
Cancel
Save