-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split variables stylesheet into multiple
This PR splits out breakpoints and colors from the _variables.scss stylesheet, in a hope to fix #964. It also uses `//` for comments that should be eaten in compilation. Further improvements can probably be made if we find either the need for more variables in either of the current sections in _variables.scss, or if we can move some of those variables to live in context of the components that use them. As of now, though, the remaining variables don't feel like enough to split further, and the are used across many components.
- Loading branch information
Joen Asmussen
committed
Dec 4, 2017
1 parent
9bfd837
commit b000552
Showing
4 changed files
with
97 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * Breakpoints & Media Queries | ||
| */ | ||
|
|
||
| // Most used breakpoints | ||
| $break-huge: 1440px; | ||
| $break-wide: 1280px; | ||
| $break-large: 960px; // admin sidebar auto folds | ||
| $break-medium: 782px; // adminbar goes big | ||
| $break-small: 600px; | ||
| $break-mobile: 480px; | ||
|
|
||
| // All media queries currently in WordPress: | ||
| // | ||
| // min-width: 2000px | ||
| // min-width: 1680px | ||
| // min-width: 1250px | ||
| // max-width: 1120px * | ||
| // max-width: 1000px | ||
| // min-width: 769px and max-width: 1000px | ||
| // max-width: 960px * | ||
| // max-width: 900px | ||
| // max-width: 850px | ||
| // min-width: 800px and max-width: 1499px | ||
| // max-width: 800px | ||
| // max-width: 799px | ||
| // max-width: 782px * | ||
| // max-width: 768px | ||
| // max-width: 640px * | ||
| // max-width: 600px * | ||
| // max-width: 520px | ||
| // max-width: 500px | ||
| // max-width: 480px * | ||
| // max-width: 400px * | ||
| // max-width: 380px | ||
| // max-width: 320px * | ||
| // | ||
| // Those marked * seem to be more commonly used than the others. | ||
| // Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /** | ||
| * Colors | ||
| */ | ||
|
|
||
| // Hugo's new WordPress shades of gray | ||
| // from http://codepen.io/hugobaeta/pen/grJjVp | ||
| $black: #000; | ||
| $dark-gray-900: #191e23; | ||
| $dark-gray-800: #23282d; | ||
| $dark-gray-700: #32373c; | ||
| $dark-gray-600: #40464d; | ||
| $dark-gray-500: #555d66; // use this most of the time for dark items | ||
| $dark-gray-400: #606a73; | ||
| $dark-gray-300: #6c7781; | ||
| $dark-gray-200: #7e8993; | ||
| $dark-gray-100: #8f98a1; | ||
| $light-gray-900: #a2aab2; | ||
| $light-gray-800: #b5bcc2; | ||
| $light-gray-700: #ccd0d4; | ||
| $light-gray-600: #d7dade; | ||
| $light-gray-500: #e2e4e7; // good for "grayed" items and borders | ||
| $light-gray-400: #e8eaeb; | ||
| $light-gray-300: #edeff0; | ||
| $light-gray-200: #f3f4f5; | ||
| $light-gray-100: #f8f9f9; | ||
| $white: #fff; | ||
|
|
||
| // Additional colors | ||
| // some from https://make.wordpress.org/design/handbook/foundations/colors/ | ||
| $blue-wordpress-700: #00669b; | ||
| $blue-wordpress: #0073aa; | ||
| $blue-dark-900: #0071a1; | ||
| $blue-medium-500: #00a0d2; | ||
| $blue-medium-400: #33B3DB; | ||
| $blue-medium-300: #66C6E4; | ||
| $blue-medium-200: #BFE7F3; | ||
| $blue-medium-100: #E5F5FA; | ||
| $blue-medium-highlight: #b3e7fe; | ||
|
|
||
| // Alert colors | ||
| $alert-yellow: #f0b849; | ||
| $alert-red: #d94f4f; | ||
| $alert-green: #4ab866; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters