├── .circleci └── config.yml ├── .github ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── dynamic-readme.yml │ └── dynamic-security.yml ├── .gitignore ├── .hound.yml ├── .npmignore ├── .stylelintrc.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Gemfile ├── LICENSE.md ├── README.md ├── RELEASING.md ├── Rakefile ├── SECURITY.md ├── bin └── bourbon ├── bourbon.gemspec ├── core ├── _bourbon.scss └── bourbon │ ├── helpers │ ├── _buttons-list.scss │ ├── _scales.scss │ └── _text-inputs-list.scss │ ├── library │ ├── _border-color.scss │ ├── _border-radius.scss │ ├── _border-style.scss │ ├── _border-width.scss │ ├── _buttons.scss │ ├── _clearfix.scss │ ├── _contrast-switch.scss │ ├── _ellipsis.scss │ ├── _font-face.scss │ ├── _font-stacks.scss │ ├── _hide-text.scss │ ├── _hide-visually.scss │ ├── _margin.scss │ ├── _modular-scale.scss │ ├── _overflow-wrap.scss │ ├── _padding.scss │ ├── _position.scss │ ├── _prefixer.scss │ ├── _shade.scss │ ├── _size.scss │ ├── _strip-unit.scss │ ├── _text-inputs.scss │ ├── _timing-functions.scss │ ├── _tint.scss │ ├── _triangle.scss │ └── _value-prefixer.scss │ ├── settings │ └── _settings.scss │ ├── utilities │ ├── _assign-inputs.scss │ ├── _compact-shorthand.scss │ ├── _contrast-ratio.scss │ ├── _directional-property.scss │ ├── _fetch-bourbon-setting.scss │ ├── _font-source-declaration.scss │ ├── _gamma.scss │ ├── _lightness.scss │ └── _unpack-shorthand.scss │ └── validators │ ├── _contains-falsy.scss │ ├── _contains.scss │ ├── _is-color.scss │ ├── _is-length.scss │ ├── _is-number.scss │ └── _is-size.scss ├── eyeglass-exports.js ├── features ├── install.feature ├── step_definitions │ └── bourbon_steps.rb ├── support │ ├── bourbon_support.rb │ └── env.rb ├── update.feature └── version.feature ├── index.js ├── lib ├── bourbon.rb └── bourbon │ ├── generator.rb │ └── version.rb ├── package-lock.json ├── package.json └── spec ├── bourbon ├── library │ ├── border_color_spec.rb │ ├── border_radius_spec.rb │ ├── border_style_spec.rb │ ├── border_width_spec.rb │ ├── buttons_spec.rb │ ├── clearfix_spec.rb │ ├── contrast_switch_spec.rb │ ├── ellipsis_spec.rb │ ├── font_face_spec_1.rb │ ├── font_face_spec_2.rb │ ├── font_face_spec_3.rb │ ├── font_stacks_spec.rb │ ├── hide_text_spec.rb │ ├── hide_visually_spec.rb │ ├── margin_spec.rb │ ├── modular_scale_spec.rb │ ├── overflow_wrap_spec.rb │ ├── padding_spec.rb │ ├── position_spec.rb │ ├── prefixer_spec.rb │ ├── shade_spec.rb │ ├── size_spec.rb │ ├── strip_unit_spec.rb │ ├── text_inputs_spec.rb │ ├── tint_spec.rb │ └── triangle_spec.rb ├── utilities │ ├── assign_inputs_spec.rb │ ├── compact_shorthand_spec.rb │ ├── contrast_ratio_spec.rb │ ├── directional_property_spec.rb │ ├── fetch_bourbon_setting_spec.rb │ ├── font_source_declaration_spec.rb │ ├── gamma_spec.rb │ ├── lightness_spec.rb │ └── unpack_spec.rb └── validators │ ├── contains_spec.rb │ ├── is_length_spec.rb │ ├── is_number_spec.rb │ └── is_size_spec.rb ├── fixtures ├── _setup.scss ├── library │ ├── border-color.scss │ ├── border-radius.scss │ ├── border-style.scss │ ├── border-width.scss │ ├── buttons.scss │ ├── clearfix.scss │ ├── contrast-switch.scss │ ├── ellipsis.scss │ ├── font-face-1.scss │ ├── font-face-2.scss │ ├── font-face-3.scss │ ├── font-stacks.scss │ ├── hide-text.scss │ ├── hide-visually.scss │ ├── margin.scss │ ├── modular-scale.scss │ ├── overflow-wrap.scss │ ├── padding.scss │ ├── position.scss │ ├── prefixer.scss │ ├── shade.scss │ ├── size.scss │ ├── strip-unit.scss │ ├── text-inputs.scss │ ├── tint.scss │ └── triangle.scss ├── utilities │ ├── assign-inputs.scss │ ├── compact-shorthand.scss │ ├── contrast-ratio.scss │ ├── directional-property.scss │ ├── fetch-bourbon-setting.scss │ ├── font-source-declaration.scss │ ├── gamma.scss │ ├── lightness.scss │ └── unpack.scss └── validators │ ├── contains.scss │ ├── is-length.scss │ ├── is-number.scss │ └── is-size.scss ├── spec_helper.rb └── support ├── matchers ├── have_rule.rb ├── have_ruleset.rb └── have_value.rb ├── parser_support.rb └── sass_support.rb /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | 3 | orbs: 4 | # orbs are basically bundles of pre-written build scripts that work for common cases 5 | # https://github.com/CircleCI-Public/ruby-orb 6 | ruby: circleci/ruby@1.1 7 | 8 | jobs: 9 | test: 10 | parameters: 11 | ruby-version: 12 | type: string 13 | docker: 14 | - image: cimg/ruby:<< parameters.ruby-version >>-node 15 | steps: 16 | - checkout 17 | - restore_cache: 18 | keys: 19 | - bourbon-bundle-v1-{{ checksum "bourbon.gemspec" }} 20 | - bourbon-bundle-v1- 21 | - run: 22 | name: Run Bundler 23 | command: bundle install --path vendor/bundle 24 | - save_cache: 25 | key: bourbon-bundle-v1-{{ checksum "bourbon.gemspec" }} 26 | paths: 27 | - vendor/bundle 28 | - run: 29 | name: Run the tests 30 | command: bundle exec rake 31 | - run: 32 | name: Parse SassDoc comments 33 | command: npm run sassdoc 34 | workflows: 35 | build_and_test: 36 | jobs: 37 | - test: 38 | matrix: 39 | parameters: 40 | # https://github.com/CircleCI-Public/cimg-ruby 41 | # only supports the last three ruby versions 42 | ruby-version: ["2.7", "3.0", "3.1", "3.2"] 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## Description 5 | 6 | 7 | 8 | ## Steps to Reproduce 9 | 10 | 11 | 12 | 1. Step 1… 13 | 2. 14 | 3. 15 | 16 | ## Development Environment 17 | 18 | 19 | 20 | - Bourbon version: 21 | - Platform: 22 | - Link to the code repository: 23 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | 7 | ## Additional Information 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/workflows/dynamic-readme.yml: -------------------------------------------------------------------------------- 1 | name: update-templates 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | workflow_dispatch: 8 | 9 | jobs: 10 | update-templates: 11 | permissions: 12 | contents: write 13 | pull-requests: write 14 | pages: write 15 | uses: thoughtbot/templates/.github/workflows/dynamic-readme.yaml@main 16 | secrets: 17 | token: ${{ secrets.GITHUB_TOKEN }} 18 | -------------------------------------------------------------------------------- /.github/workflows/dynamic-security.yml: -------------------------------------------------------------------------------- 1 | name: update-security 2 | 3 | on: 4 | push: 5 | paths: 6 | - SECURITY.md 7 | branches: 8 | - main 9 | workflow_dispatch: 10 | 11 | jobs: 12 | update-security: 13 | permissions: 14 | contents: write 15 | pull-requests: write 16 | pages: write 17 | uses: thoughtbot/templates/.github/workflows/dynamic-security.yaml@main 18 | secrets: 19 | token: ${{ secrets.GITHUB_TOKEN }} 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *gem 2 | *swp 3 | .DS_store 4 | .sass-cache 5 | _site 6 | Gemfile.lock 7 | npm-debug.log 8 | tmp/ 9 | -------------------------------------------------------------------------------- /.hound.yml: -------------------------------------------------------------------------------- 1 | ruby: 2 | enabled: true 3 | scss: 4 | enabled: false 5 | stylelint: 6 | config_file: .stylelintrc.json 7 | enabled: true 8 | # version: 10.1.0 9 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .circleci/ 2 | .github/ 3 | .gitignore 4 | .hound.yml 5 | .ruby-version 6 | .sass-cache 7 | .stylelintrc.json 8 | _site 9 | bin/ 10 | bourbon.gemspec 11 | CODE_OF_CONDUCT.md 12 | CONTRIBUTING.md 13 | features/ 14 | Gemfile 15 | Gemfile.lock 16 | lib/ 17 | pkg/ 18 | Rakefile 19 | RELEASING.md 20 | spec/ 21 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@thoughtbot/stylelint-config" 3 | } 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. This 4 | project adheres to [Semantic Versioning](http://semver.org). 5 | 6 | ## [7.3.0] - 2023-01-20 7 | 8 | ## Changed 9 | - Update initializers so they only include assets for >=Rails 5. [https://github.com/thoughtbot/bourbon/pull/1109/](https://github.com/thoughtbot/bourbon/pull/1109/files) 10 | 11 | ## [7.2.0] - 2022-02-22 12 | 13 | ### Changed 14 | 15 | - Revert "Replace `/` with `math.div` per Dart Sass 2.0.0 updates." 16 | 17 | [7.2.0]: https://github.com/thoughtbot/bourbon/compare/v7.1.0...v7.2.0 18 | 19 | ## [7.1.0] - 2022-02-22 20 | 21 | ### Changed 22 | 23 | - Replace `/` with `math.div` per Dart Sass 2.0.0 updates. 24 | 25 | [7.1.0]: https://github.com/thoughtbot/bourbon/compare/v7.0.0...v7.1.0 26 | 27 | ## [7.0.0] - 2020-03-09 28 | 29 | ### Added 30 | 31 | - Improved error handling of unsupported font file formats in the `font-face` 32 | mixin (supported formats are `woff2` and `woff`). 33 | - CSS `var()` and `env()` functions are now accepted as values in the 34 | `position` and `size` mixins. 35 | 36 | ### Changed 37 | 38 | - Updated `thor` from 0.x to 1.x 39 | 40 | ### Removed 41 | 42 | - The `font-face` mixin no longer supports `ttf`, `svg`, and `eot` 43 | font file formats. 44 | 45 | [7.0.0]: https://github.com/thoughtbot/bourbon/compare/v6.0.0...v7.0.0 46 | 47 | ## [6.0.0] - 2019-07-10 48 | 49 | ### Removed 50 | 51 | - Installation through Bower is no longer supported. 52 | - The sass gem (the deprecated Ruby Sass) is no longer a runtime dependency. 53 | 54 | [6.0.0]: https://github.com/thoughtbot/bourbon/compare/v5.1.0...v6.0.0 55 | 56 | ## [5.1.0] - 2018-07-20 57 | 58 | ### Added 59 | 60 | - `$font-stack-system` now includes the `system-ui` value. 61 | 62 | ### Changed 63 | 64 | - The `_gamma` function will use a `pow` function, if available. 65 | 66 | [5.1.0]: https://github.com/thoughtbot/bourbon/compare/v5.0.1...v5.1.0 67 | 68 | ## [5.0.1] - 2018-06-08 69 | 70 | ### Fixed 71 | 72 | - Fixed an issue that would cause Bourbon to not be found when using SassC. 73 | 74 | [5.0.1]: https://github.com/thoughtbot/bourbon/compare/v5.0.0...v5.0.1 75 | 76 | ## [5.0.0] - 2018-01-05 77 | 78 | Bourbon 5.0.0 is a major release with lots of changes and removals, which are 79 | documented below in each of the alpha and beta releases. There are no changes 80 | between v5.0.0-beta.8 and v5.0.0. For information on how to upgrade from v4 to 81 | v5, read our [migrating guide][migrating-guide]. 82 | 83 | [5.0.0]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.8...v5.0.0 84 | [migrating-guide]: https://www.bourbon.io/docs/migrating-from-v4-to-v5/ 85 | 86 | ## [5.0.0-beta.8] - 2017-06-26 87 | 88 | ### Added 89 | 90 | - A `style` property has been added to our `package.json`, which makes for easy 91 | importing when using npm-sass, sass-module-importer and others. 92 | 93 | ### Changed 94 | 95 | - The `triangle` mixin no longer has default argument values. The order of the 96 | arguments also changed: `$width` and `$height` now come before `$color`. 97 | 98 | ### Fixed 99 | 100 | - The `bourbon update` CLI command now works when Bourbon is installed using a 101 | custom path. 102 | - Fixed an issue that would cause Bourbon to not be found within Rails apps. 103 | 104 | [5.0.0-beta.8]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.7...v5.0.0.beta.8 105 | 106 | ## [5.0.0-beta.7] - 2016-11-03 107 | 108 | ### Added 109 | 110 | - Added `white-space: nowrap;` to the `hide-visually` mixin so that content 111 | renders on one line and is correctly pronounced by screen readers. You can 112 | read more about this in Jesse Beach’s article “[Beware smushed off-screen 113 | accessible text][smushed-text-article].” 114 | 115 | ### Changed 116 | 117 | - Removed the default values from the `$position` and `$coordinates` arguments 118 | for the `position` mixin. 119 | - Updated `contrast-switch` to calculate contrast based on the WCAG 2.0 120 | specification. Please note that it is an approximation and we cannot guarantee 121 | full compliance, though all of our manual testing passed. 122 | - Renamed the `$coordinates` argument in the `position` mixin 123 | to `$box-edge-values`. 124 | - Updated `$font-stack-system` to include Avenir Next, Avenir, Lucida 125 | Grande, Helvetica, Noto, Franklin Gothic Medium, Century Gothic, and 126 | Liberation Sans. This follows [system-fonts] by Adam Morse. 127 | - The `word-break` property was removed from the `word-wrap` mixin and 128 | is no longer output. 129 | - Renamed the `word-wrap` mixin to `overflow-wrap` to align with the 130 | name change in the [CSS spec]. 131 | 132 | [smushed-text-article]: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.l4hkljiza 133 | [system-fonts]: https://github.com/mrmrs/css-system-fonts 134 | [CSS spec]: https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap 135 | 136 | [5.0.0-beta.7]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.6...v5.0.0.beta.7 137 | 138 | ## [5.0.0-beta.6] - 2016-06-06 139 | 140 | ### Added 141 | 142 | - Added a `value-prefixer` mixin for generating vendor prefixes on values. 143 | 144 | [5.0.0-beta.6]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.5...v5.0.0.beta.6 145 | 146 | ## [5.0.0-beta.5] - 2016-03-23 147 | 148 | ### Fixed 149 | 150 | - Fixed a Sass load path issue that would intermittently break the importing of 151 | Bourbon in Rails apps. 152 | 153 | ### Changed 154 | 155 | - Swapped the order of the `$file-formats` and `$asset-pipeline` arguments in 156 | the `font-face` mixin, so that `$asset-pipeline` is last (because it has a 157 | default and is likely used the least). 158 | 159 | [5.0.0-beta.5]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.4...v5.0.0.beta.5 160 | 161 | ## [5.0.0-beta.4] - 2016-03-11 162 | 163 | ### Fixed 164 | 165 | - We accidentally published `5.0.0.beta.3` as a stable release on npm, rather 166 | than a prerelease. We’ve unpublished that to go back to `4.2.6` on the stable 167 | channel. 168 | 169 | [5.0.0-beta.4]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.3...v5.0.0.beta.4 170 | 171 | ## [5.0.0-beta.3] - 2016-03-04 172 | 173 | ### Fixed 174 | 175 | - Added `pathname` requirement to fix install issues. 176 | 177 | [5.0.0-beta.3]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.2...v5.0.0.beta.3 178 | 179 | ## [5.0.0-beta.2] - 2016-03-03 180 | 181 | ### Added 182 | 183 | - Added global settings for the `contrast-switch` mixin: 184 | `contrast-switch-dark-color` & `contrast-switch-light-color`. 185 | - Added the `triangle` mixin back, but note that it’s been refactored and the 186 | arguments have changed. See [43e5a90]. 187 | 188 | ### Changed 189 | 190 | - Switched argument names in `contrast-switch`; `$dark-color` is now 191 | `$light-color` and `$light-color` is now `$dark-color`. 192 | - The `is-light` function is now private. 193 | 194 | ### Removed 195 | 196 | - Dropped support for Ruby on Rails versions older than 4.2. 197 | - Dropped support for LibSass versions older than 3.3. 198 | 199 | [5.0.0-beta.2]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.1...v5.0.0.beta.2 200 | [43e5a90]: https://github.com/thoughtbot/bourbon/commit/43e5a90e7e624d2977731030ccdb36b3c2e460d9 201 | 202 | ## [5.0.0-beta.1] - 2016-02-09 203 | 204 | ### Added 205 | 206 | - Added a `contrast-switch` function that switches between two colors based on the 207 | lightness of a another color. Great for building button styles. 208 | - Added an `$all-text-inputs-invalid` variable to target the `:invalid` 209 | pseudo-class on all text-based inputs. 210 | - The `ellipsis` mixin now takes a `$display` argument. 211 | - Added a font stack for system fonts: `$font-stack-system`. 212 | - Added a `hide-visually` mixin that hides an element visually while still 213 | allowing the content to be accessible to assistive technology, 214 | e.g. screen readers. 215 | - The `font-face` mixin now allows additional CSS properties to be included in 216 | its block, which will output as part of the `@font-face` declaration. 217 | See [2356719]. 218 | 219 | ### Changed 220 | 221 | - The global default for the `modular-scale` ratio is now set to 222 | `$major-third` (`1.25`), instead of `$perfect-fourth` (`1.333`). 223 | - All font stack variables are now prefixed with `$font-stack-`, 224 | e.g. `$font-stack-helvetica`. 225 | - Global settings are now set via a `$bourbon` map, instead of variables. 226 | See [4e43c2d]. 227 | - The `clearfix` mixin now uses `block` display, instead of `table`. 228 | 229 | ### Removed 230 | 231 | - The `$weight` and `$style` arguments in the `font-face` mixin have been 232 | removed. Instead, you can now include these—along with other CSS 233 | properties—within the mixin block and they’ll be output as part of the 234 | `@font-face` declaration. 235 | 236 | [5.0.0-beta.1]: https://github.com/thoughtbot/bourbon/compare/da4451e...v5.0.0.beta.1 237 | [2356719]: https://github.com/thoughtbot/bourbon/commit/235671948ef3a9c343c4391d250082a0373c8d83 238 | [4e43c2d]: https://github.com/thoughtbot/bourbon/commit/4e43c2d7507999b539771bdc1b3733b18b3c1883 239 | 240 | ## [5.0.0.alpha.0] - 2015-08-21 241 | 242 | ### Added 243 | 244 | - Added a `$global-font-file-formats` setting to globally set the file formats 245 | for the `font-face` mixin. The default is `("ttf", "woff2", "woff")`. 246 | - Add `$consolas`, `$courier-new` and `$monaco` variables (these replace the 247 | removed `$monospace` variable). 248 | 249 | ### Changed 250 | 251 | - Removed the type selectors in `$all-text-inputs` and `$all-buttons` to 252 | reduce specificity. 253 | - Font stacks have been modernized. See [3cf106a]. 254 | - The `strip-units` function is now `strip-unit`. 255 | - The `size` mixin now requires a comma-separated argument list, 256 | e.g. `@include size(1em, 2em);`. 257 | 258 | ### Removed 259 | 260 | - All vendor prefixing mixins have been removed. These include: 261 | - `align-items` 262 | - `animation-delay` 263 | - `animation-direction` 264 | - `animation-duration` 265 | - `animation-fill-mode` 266 | - `animation-iteration-count` 267 | - `animation-name` 268 | - `animation-play-state` 269 | - `animation-timing-function` 270 | - `animation` 271 | - `appearance` 272 | - `backface-visibility` 273 | - `background-image` 274 | - `background` 275 | - `border-image` 276 | - `calc` 277 | - `column-count` 278 | - `column-fill` 279 | - `column-gap` 280 | - `column-rule-color` 281 | - `column-rule-style` 282 | - `column-rule-width` 283 | - `column-rule` 284 | - `column-span` 285 | - `column-width` 286 | - `columns` 287 | - `display` 288 | - `filter` 289 | - `flex-direction` 290 | - `flex` 291 | - `font-feature-settings` 292 | - `hidpi` 293 | - `hyphens` 294 | - `image-rendering` 295 | - `justify-content` 296 | - `keyframes` 297 | - `linear-gradient` 298 | - `perspective` 299 | - `placeholder` 300 | - `radial-gradient` 301 | - `selection` 302 | - `text-decoration-color` 303 | - `text-decoration-line` 304 | - `text-decoration-style` 305 | - `text-decoration` 306 | - `transform-origin` 307 | - `transform-style` 308 | - `transform` 309 | - `transition-delay` 310 | - `transition-duration` 311 | - `transition-property` 312 | - `transition-timing-function` 313 | - `transition` 314 | - `user-select` 315 | - For prefixing, we recommend using a more robust and maintainable solution 316 | like [Autoprefixer]. 317 | - The `$global-prefixes` setting has been removed and the `prefixer` mixin 318 | has been refactored and no longer uses it. 319 | - The `$monospace` variable has been removed. 320 | - The `box-sizing` mixin has been removed. 321 | - The `button` mixin has been removed. 322 | - The `em` and `rem` functions have been removed. 323 | - [See the discussion on why these were removed][em-rem-issue]. 324 | - The `flex-grid` function has been removed. 325 | - The `flex-gutter` function has been removed. 326 | - The `golden-ratio` function has been removed. 327 | - The `grid-width` function has been removed. 328 | - The `inline-block` mixin has been removed. 329 | - The `retina-image` mixin has been removed. 330 | - The `triangle` mixin has been removed. 331 | 332 | [5.0.0.alpha.0]: https://github.com/thoughtbot/bourbon/compare/v4.3.4...v5.0.0.alpha.0 333 | [3cf106a]: https://github.com/thoughtbot/bourbon/commit/3cf106a210c1bae7765e6193f62310f95fdee0b7 334 | [Autoprefixer]: https://github.com/postcss/autoprefixer 335 | [em-rem-issue]: https://github.com/thoughtbot/bourbon/issues/691 336 | 337 | ## [4.3.4] - 2017-04-01 338 | 339 | ### Changed 340 | 341 | - Updated deprecation warning message for `strip-units`. ([#1016]) 342 | 343 | [4.3.4]: https://github.com/thoughtbot/bourbon/compare/v4.3.3...v4.3.4 344 | [#1016]: https://github.com/thoughtbot/bourbon/pull/1016 345 | 346 | ## [4.3.3] - 2017-02-23 347 | 348 | ### Fixed 349 | 350 | - Internal Bourbon deprecation warnings for `is-size` and `is-length` will no 351 | longer be thrown when using the `size` mixin. 352 | 353 | [4.3.3]: https://github.com/thoughtbot/bourbon/compare/v4.3.2...v4.3.3 354 | 355 | ## [4.3.2] - 2017-02-10 356 | 357 | ### Fixed 358 | 359 | - Internal Bourbon deprecation warnings for `unpack` and `is-length` will no 360 | longer be thrown when using the `position` mixin. ([#1004]) 361 | 362 | [4.3.2]: https://github.com/thoughtbot/bourbon/compare/v4.3.1...v4.3.2 363 | [#1004]: https://github.com/thoughtbot/bourbon/pull/1004 364 | 365 | ## [4.3.1] - 2017-02-07 366 | 367 | ### Fixed 368 | 369 | - Internal Bourbon deprecation warnings will no longer be thrown. ([#1002]) 370 | 371 | [4.3.1]: https://github.com/thoughtbot/bourbon/compare/v4.3.0...v4.3.1 372 | [#1002]: https://github.com/thoughtbot/bourbon/pull/1002 373 | 374 | ## [4.3.0] - 2017-02-03 375 | 376 | ### Added 377 | 378 | - Added deprecation warnings for features that will be removed in 5.0.0. Please 379 | reference our [change log], which includes a list of these changes and 380 | removals. ([#891]) 381 | 382 | [4.3.0]: https://github.com/thoughtbot/bourbon/compare/v4.2.7...v4.3.0 383 | [change log]: https://github.com/thoughtbot/bourbon/blob/master/CHANGELOG.md 384 | [#891]: https://github.com/thoughtbot/bourbon/pull/891 385 | 386 | ## [4.2.7] - 2016-04-15 387 | 388 | ### Fixed 389 | 390 | - Fixed a Sass deprecation warning when using the `background` and 391 | `background-image` mixins. 392 | 393 | [4.2.7]: https://github.com/thoughtbot/bourbon/compare/v4.2.6...v4.2.7 394 | 395 | ## [4.2.6] - 2015-10-17 396 | 397 | ### Fixed 398 | 399 | - Fixed a bug with eyeglass support. 400 | 401 | [4.2.6]: https://github.com/thoughtbot/bourbon/compare/v4.2.5...v4.2.6 402 | 403 | ## [4.2.5] - 2015-09-17 404 | 405 | ## Added 406 | 407 | - Support for [eyeglass]. 408 | 409 | [4.2.5]: https://github.com/thoughtbot/bourbon/compare/v4.2.4...v4.2.5 410 | [eyeglass]: http://eyeglass.rocks/ 411 | 412 | ## [4.2.4] - 2015-08-21 413 | 414 | ## Changed 415 | 416 | - [`$all-text-inputs`] now accounts for `input`’s that don’t have a `type` 417 | attribute specified, as they default to `type="text"`. 418 | (https://github.com/thoughtbot/bourbon/commit/8e7e36e01c47194d83951fb6315c5b26a008f2b7) 419 | - The [`bourbon` npm package] now has a proper load path. 420 | (https://github.com/thoughtbot/bourbon/commit/36c2d5576f1fe9dbdfd9543e15064c5a4a16343e) 421 | 422 | [4.2.4]: https://github.com/thoughtbot/bourbon/compare/v4.2.3...v4.2.4 423 | [`$all-text-inputs`]: http://bourbon.io/docs/#text-inputs 424 | [`bourbon` npm package]: https://npmjs.com/package/bourbon 425 | 426 | ## [4.2.3] - 2015-05-18 427 | 428 | ## Fixed 429 | 430 | - Fixed an issue with the `font-face` mixin outputting an extraneous commas when 431 | using LibSass set to compressed output. 432 | 433 | [4.2.3]: https://github.com/thoughtbot/bourbon/compare/v4.2.2...v4.2.3 434 | 435 | ## [4.2.2] - 2015-04-01 436 | 437 | ## Fixed 438 | 439 | - The `flex-direction` mixin now properly outputs box-direction (old syntax) if 440 | set to normal. 441 | 442 | [4.2.2]: https://github.com/thoughtbot/bourbon/compare/v4.2.1...v4.2.2 443 | 444 | ## [4.2.1] - 2015-02-23 445 | 446 | ## Fixed 447 | 448 | - Restored the `app/` directory for npm. 449 | 450 | [4.2.1]: https://github.com/thoughtbot/bourbon/compare/v4.2.0...v4.2.1 451 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | By participating in this project, you agree to abide by the 4 | [thoughtbot code of conduct][tb-coc]. 5 | 6 | [tb-coc]: https://thoughtbot.com/open-source-code-of-conduct 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Governance 4 | 5 | We, the maintainers of Bourbon, would like you to know what to expect when 6 | interacting with this project's repo. 7 | 8 | As a *user* of Bourbon, you can expect care to be put into official releases. 9 | The maintainers cannot guarantee that the `master` branch will have the same 10 | API forever. 11 | 12 | If you *review pull requests* or *comment on issues*, you are expected to abide 13 | by our [code of conduct]. 14 | 15 | As a *contributor*, submitting a pull request or opening an issue, you can 16 | expect an initial response from a maintainer within two weeks. The maintainers 17 | cannot guarantee that we will accept all feature requests, and may fix bugs in 18 | ways other than how the contributor suggests. You are expected to abide by our 19 | [code of conduct]. 20 | 21 | As a *maintainer*, you can merge pull requests (even your own) at any time. 22 | Maintainers are encouraged to request code review from others at thoughtbot or 23 | any relevant peers. You are expected to abide by our [code of conduct]. 24 | 25 | Only members of thoughtbot may be maintainers. 26 | 27 | ## Pull Requests 28 | 29 | We welcome pull requests from everyone. Here’s a quick guide: 30 | 31 | 1. [Fork the repository][fork] and clone to your machine. 32 | 1. Run `bundle install`. 33 | 1. Make sure the tests pass: `bundle exec rake`. 34 | 1. Make your change, following our style guide (below). Write tests. Make sure 35 | the tests pass: `bundle exec rake`. 36 | 1. Write a [good commit message][commit]. Push to your fork and 37 | [submit a pull request][pr]. If [Hound] catches style violations, fix them. 38 | 1. Wait for us. We try to at least comment on pull requests within one week. We 39 | may suggest changes. 40 | 41 | [fork]: https://github.com/thoughtbot/bourbon/fork 42 | [commit]: http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html 43 | [pr]: https://github.com/thoughtbot/bourbon/compare/ 44 | [hound]: https://houndci.com 45 | 46 | ### Style Guide 47 | 48 | Bourbon uses Sass’s SCSS syntax and aligns to 49 | [thoughtbot’s style guides][sass guide]. High-level notes: 50 | 51 | - Use two-space indentation (no tabs). 52 | - Use double quotation marks. 53 | - Use hyphens when naming things: `hide-visually` rather than `hide_visually` or 54 | `hideVisually`. 55 | - Use one space between property and value: `width: 20px` rather than 56 | `width:20px`. 57 | - Names should be descriptive and aim for clarity over brevity: 58 | `$all-text-inputs-hover` rather than `$inputshover` or `$alltxthvr`. 59 | - Order CSS declarations alphabetically. 60 | - No trailing whitespace. 61 | 62 | We use [stylelint][stylelint] to lint our CSS and Sass. It's configuration can 63 | be found in `.stylelintrc.json`. You can run stylelint from the command line via 64 | `npm run stylelint`, or integrate it with your text editor. 65 | 66 | [sass guide]: https://github.com/thoughtbot/guides 67 | [stylelint]: https://stylelint.io/ 68 | 69 | ### Documentation 70 | 71 | We use [SassDoc] to document Bourbon. [Annotations] should be ordered: 72 | 73 | - `@link` 74 | - `@see` 75 | - `@type` 76 | - `@argument` 77 | - `@content` 78 | - `@property` 79 | - `@return` 80 | - `@example` 81 | - `@require` 82 | - `@access` 83 | - `@since` 84 | - `@author` 85 | - `@deprecated` 86 | - `@todo` 87 | 88 | [SassDoc]: http://sassdoc.com 89 | [Annotations]: http://sassdoc.com/annotations 90 | [code of conduct]: https://thoughtbot.com/open-source-code-of-conduct 91 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | gemspec 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2011-2020 [thoughtbot, inc.](http://thoughtbot.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the “Software”), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [Bourbon logo][Bourbon] 2 | 3 | [![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com) 4 | 5 | ## Deprecated as of September 13, 2024 6 | 7 | This project is no longer maintained. We encourage people to leverage the modern native CSS features in lieu of this library. You can refer to [our blog post](https://thoughtbot.com/blog/you-might-not-need-bourbon) on how to go about replacing or rethinking each helper. 8 | 9 | ## A Lightweight Sass Tool Set 10 | 11 | [Bourbon] is a library of [Sass] mixins and functions that are designed to make 12 | you a more efficient style sheet author. 13 | 14 | It is… 15 | 16 | - Dependency-free: Bourbon is pure Sass. 17 | - Human-readable: We aim for clarity over brevity. 18 | - Lightweight: Zero output post-install and has no visual opinion. 19 | 20 | [Bourbon]: https://www.bourbon.io/ 21 | [Sass]: http://sass-lang.com 22 | 23 | ### Helpful Links 24 | 25 | - [Documentation](https://www.bourbon.io/docs/latest/) 26 | - [Change log](CHANGELOG.md) 27 | - [Twitter](https://twitter.com/bourbonsass) 28 | - [Stack Overflow](https://stackoverflow.com/questions/tagged/bourbon) 29 | 30 | ## Table of Contents 31 | 32 | - [Requirements](#requirements) 33 | - [Installation](#installation) 34 | - [Command Line Interface](#command-line-interface) 35 | - [Browser Support](#browser-support) 36 | - [Contributing](#contributing) 37 | - [License](#license) 38 | - [About](#about) 39 | 40 | ## Requirements 41 | 42 | - [Sass] 3.4+ or [LibSass] 3.3+ 43 | 44 | [Sass]: https://github.com/sass/sass 45 | [LibSass]: https://github.com/sass/libsass 46 | 47 | ## Installation 48 | 49 | 1. Install the Bourbon gem using the [RubyGems] package manager: 50 | 51 | ```bash 52 | gem install bourbon 53 | ``` 54 | 55 | 1. Install the Bourbon library into the current directory: 56 | 57 | ```bash 58 | bourbon install 59 | ``` 60 | 61 | **Pro Tip:** You can target installation into a specific directory using the 62 | `path` flag: 63 | 64 | ```bash 65 | bourbon install --path my/custom/path/ 66 | ``` 67 | 68 | 1. Import Bourbon at the beginning of your stylesheet: 69 | 70 | ```scss 71 | @import "bourbon/bourbon"; 72 | ``` 73 | 74 | It’s not recommended that you modify Bourbon’s files directly as it will 75 | make updating to future versions difficult, by overwriting your custom 76 | changes or causing merge conflicts. 77 | 78 | [RubyGems]: https://rubygems.org 79 | 80 | ### Installation for Ruby on Rails 4.2+ 81 | 82 | 1. Add Bourbon to your Gemfile: 83 | 84 | ```ruby 85 | gem "bourbon" 86 | ``` 87 | 88 | 1. Then run: 89 | 90 | ```bash 91 | bundle install 92 | ``` 93 | 94 | 1. Restart your server and rename `application.css` to `application.scss`: 95 | 96 | ```bash 97 | mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss 98 | ``` 99 | 100 | 1. Delete _all_ Sprockets directives in `application.scss` (`require`, 101 | `require_tree` and `require_self`) and use Sass’s native `@import` instead 102 | ([why?][sass-import]). 103 | 104 | 1. Import Bourbon at the beginning of `application.scss`. Any project styles 105 | that utilize Bourbon’s features must be imported after Bourbon. 106 | 107 | ```scss 108 | @import "bourbon"; 109 | @import "home"; 110 | @import "users"; 111 | ``` 112 | 113 | [sass-import]: https://content.pivotal.io/blog/structure-your-sass-files-with-import 114 | 115 | ### Installing with npm and using a Node-based asset pipeline 116 | 117 | 1. Add Bourbon as a dependency: 118 | 119 | ```bash 120 | npm install --save bourbon 121 | ``` 122 | 123 | 1. If you’re using [eyeglass], skip to Step 3. Otherwise, you’ll need to add 124 | Bourbon to your node-sass `includePaths` option. 125 | `require("bourbon").includePaths` is an array of directories that you should 126 | pass to node-sass. How you do this depends on how node-sass is integrated 127 | into your project. 128 | 129 | 1. Import Bourbon into your Sass files: 130 | 131 | ```scss 132 | @import "bourbon"; 133 | ``` 134 | 135 | [eyeglass]: https://github.com/sass-eyeglass/eyeglass 136 | 137 | ### Installing older versions of Bourbon 138 | 139 | 1. Uninstall any Bourbon gem versions you already have: 140 | 141 | ```bash 142 | gem uninstall bourbon 143 | ``` 144 | 145 | 1. Reinstall the Bourbon gem, using the `-v` flag to specify the version 146 | you need: 147 | 148 | ```bash 149 | gem install bourbon -v 4.2.7 150 | ``` 151 | 152 | 1. Follow the [instructions above](#installation) to install Bourbon into 153 | your project. 154 | 155 | ## Command Line Interface 156 | 157 | ```bash 158 | bourbon [options] 159 | ``` 160 | 161 | ### Options 162 | 163 | | Option | Description | 164 | | :---------------- | :------------------------ | 165 | | `-h`, `--help` | Show help | 166 | | `-v`, `--version` | Show the version number | 167 | | `--path` | Specify a custom path | 168 | | `--force` | Force install (overwrite) | 169 | 170 | ### Commands 171 | 172 | | Command | Description | 173 | | :---------------- | :---------------------------------------------------- | 174 | | `bourbon install` | Install Bourbon into the current directory | 175 | | `bourbon update` | Overwrite and update Bourbon in the current directory | 176 | | `bourbon help` | Show help | 177 | 178 | ## Browser Support 179 | 180 | Bourbon supports Internet Explorer 11+ and the latest versions of Chrome, 181 | Firefox, Safari, and Edge. 182 | 183 | ## Contributing 184 | 185 | See the [contributing] document. Thank you, [contributors]! 186 | 187 | [contributing]: CONTRIBUTING.md 188 | [contributors]: https://github.com/thoughtbot/bourbon/graphs/contributors 189 | 190 | ## License 191 | 192 | Bourbon is copyright © 2011 [thoughtbot, inc.][thoughtbot] It is free 193 | software, and may be redistributed under the terms specified in the [license]. 194 | 195 | [license]: LICENSE.md 196 | 197 | 198 | ## About thoughtbot 199 | 200 | ![thoughtbot](https://thoughtbot.com/thoughtbot-logo-for-readmes.svg) 201 | 202 | This repo is maintained and funded by thoughtbot, inc. 203 | The names and logos for thoughtbot are trademarks of thoughtbot, inc. 204 | 205 | We love open source software! 206 | See [our other projects][community]. 207 | We are [available for hire][hire]. 208 | 209 | [community]: https://thoughtbot.com/community?utm_source=github 210 | [hire]: https://thoughtbot.com/hire-us?utm_source=github 211 | 212 | 213 | 214 | 215 | [thoughtbot]: https://thoughtbot.com?utm_source=github 216 | -------------------------------------------------------------------------------- /RELEASING.md: -------------------------------------------------------------------------------- 1 | # Releasing 2 | 3 | 1. Update the version number in these places: 4 | 5 | - `lib/bourbon/version.rb` 6 | - `core/_bourbon.scss` 7 | - `package.json` 8 | 9 | 1. Update `CHANGELOG.md`. We follow the guidelines from 10 | [Keep a Changelog][keep-a-changelog]. 11 | 12 | 1. Commit changes. Use the convention “Bourbon vX.X.X” in your commit message. 13 | There shouldn’t be code changes, and thus CI doesn’t need to run. 14 | 15 | 1. Run `bundle exec rake release`, which tags the release, pushes the tag to 16 | GitHub, and pushes the gem to RubyGems.org. 17 | 18 | 1. Run `npm publish`, which pushes the new version to npm’s registry (if 19 | releasing a pre-release, run `npm publish --tag beta`). 20 | 21 | 1. Draft a [new GitHub release][github-release]. 22 | 23 | 1. Tweet about the release from the [@bourbonsass] Twitter account, e.g. 24 | 25 | > We’ve released Bourbon {release_title}: {release_link} 26 | 27 | 1. Re-generate and publish the [documentation website][website]. 28 | 29 | [keep-a-changelog]: https://keepachangelog.com/en/1.0.0/ 30 | [github-release]: https://github.com/thoughtbot/bourbon/releases/new 31 | [@bourbonsass]: https://twitter.com/bourbonsass 32 | [website]: https://github.com/thoughtbot/bourbon.io 33 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler" 2 | require "cucumber/rake/task" 3 | require "rspec/core/rake_task" 4 | 5 | Bundler::GemHelper.install_tasks 6 | Cucumber::Rake::Task.new 7 | RSpec::Core::RakeTask.new(:spec) 8 | 9 | task :default => [:spec, :cucumber] 10 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | # Security Policy 3 | 4 | ## Supported Versions 5 | 6 | Only the the latest version of this project is supported at a given time. If 7 | you find a security issue with an older version, please try updating to the 8 | latest version first. 9 | 10 | If for some reason you can't update to the latest version, please let us know 11 | your reasons so that we can have a better understanding of your situation. 12 | 13 | ## Reporting a Vulnerability 14 | 15 | For security inquiries or vulnerability reports, visit 16 | . 17 | 18 | If you have any suggestions to improve this policy, visit . 19 | 20 | 21 | -------------------------------------------------------------------------------- /bin/bourbon: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | require File.dirname(__FILE__) + "/../lib/bourbon.rb" 4 | 5 | Bourbon::Generator.start 6 | -------------------------------------------------------------------------------- /bourbon.gemspec: -------------------------------------------------------------------------------- 1 | $:.push File.expand_path("../lib", __FILE__) 2 | require "bourbon/version" 3 | 4 | Gem::Specification.new do |s| 5 | s.add_development_dependency "aruba", "~> 0.14" 6 | s.add_development_dependency "css_parser", "~> 1.4" 7 | s.add_development_dependency "cucumber", "~> 2.0" 8 | s.add_development_dependency "rake" 9 | s.add_development_dependency "rspec", "~> 3.4" 10 | s.add_development_dependency "sass" 11 | s.add_runtime_dependency "thor", "~> 1.0" 12 | s.authors = [ 13 | "Christian Reuter", 14 | "Damian Galarza", 15 | "Gabe Berke-Williams", 16 | "Hugo Giraudel", 17 | "Joshua Ogle", 18 | "Kyle Fiedler", 19 | "Phil LaPier", 20 | "Reda Lemeden", 21 | "Tyson Gach", 22 | "Will McMahan" 23 | ] 24 | s.description = <<-DESC 25 | Bourbon is a library of pure Sass mixins and functions that are designed to 26 | make you a more efficient developer. 27 | DESC 28 | s.email = "design+bourbon@thoughtbot.com" 29 | s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) } 30 | s.files = `git ls-files`.split("\n") 31 | s.homepage = "https://www.bourbon.io/" 32 | s.license = "MIT" 33 | s.name = "bourbon" 34 | s.platform = Gem::Platform::RUBY 35 | s.require_paths = ["lib"] 36 | s.summary = "A lightweight Sass tool set." 37 | s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n") 38 | s.version = Bourbon::VERSION 39 | end 40 | -------------------------------------------------------------------------------- /core/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Bourbon 7.3.0 2 | // https://www.bourbon.io/ 3 | // Copyright 2011-2020 thoughtbot, inc. 4 | // MIT License 5 | 6 | @import "bourbon/helpers/buttons-list"; 7 | @import "bourbon/helpers/scales"; 8 | @import "bourbon/helpers/text-inputs-list"; 9 | 10 | @import "bourbon/settings/settings"; 11 | 12 | @import "bourbon/validators/contains"; 13 | @import "bourbon/validators/contains-falsy"; 14 | @import "bourbon/validators/is-color"; 15 | @import "bourbon/validators/is-length"; 16 | @import "bourbon/validators/is-number"; 17 | @import "bourbon/validators/is-size"; 18 | 19 | @import "bourbon/utilities/assign-inputs"; 20 | @import "bourbon/utilities/compact-shorthand"; 21 | @import "bourbon/utilities/directional-property"; 22 | @import "bourbon/utilities/fetch-bourbon-setting"; 23 | @import "bourbon/utilities/font-source-declaration"; 24 | @import "bourbon/utilities/gamma"; 25 | @import "bourbon/utilities/lightness"; 26 | @import "bourbon/utilities/contrast-ratio"; 27 | @import "bourbon/utilities/unpack-shorthand"; 28 | 29 | @import "bourbon/library/border-color"; 30 | @import "bourbon/library/border-radius"; 31 | @import "bourbon/library/border-style"; 32 | @import "bourbon/library/border-width"; 33 | @import "bourbon/library/buttons"; 34 | @import "bourbon/library/clearfix"; 35 | @import "bourbon/library/contrast-switch"; 36 | @import "bourbon/library/ellipsis"; 37 | @import "bourbon/library/font-face"; 38 | @import "bourbon/library/font-stacks"; 39 | @import "bourbon/library/hide-text"; 40 | @import "bourbon/library/hide-visually"; 41 | @import "bourbon/library/margin"; 42 | @import "bourbon/library/modular-scale"; 43 | @import "bourbon/library/overflow-wrap"; 44 | @import "bourbon/library/padding"; 45 | @import "bourbon/library/position"; 46 | @import "bourbon/library/prefixer"; 47 | @import "bourbon/library/shade"; 48 | @import "bourbon/library/size"; 49 | @import "bourbon/library/strip-unit"; 50 | @import "bourbon/library/text-inputs"; 51 | @import "bourbon/library/timing-functions"; 52 | @import "bourbon/library/tint"; 53 | @import "bourbon/library/triangle"; 54 | @import "bourbon/library/value-prefixer"; 55 | -------------------------------------------------------------------------------- /core/bourbon/helpers/_buttons-list.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A list of all HTML button elements. 4 | /// 5 | /// @type list 6 | /// 7 | /// @access private 8 | 9 | $_buttons-list: ( 10 | "button", 11 | "[type='button']", 12 | "[type='reset']", 13 | "[type='submit']", 14 | ); 15 | -------------------------------------------------------------------------------- /core/bourbon/helpers/_scales.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | //// 4 | /// Pre-defined scales for use with the `modular-scale` function. 5 | /// 6 | /// @type number (unitless) 7 | /// 8 | /// @see {function} modular-scale 9 | //// 10 | 11 | $minor-second: 1.067; 12 | $major-second: 1.125; 13 | $minor-third: 1.2; 14 | $major-third: 1.25; 15 | $perfect-fourth: 1.333; 16 | $augmented-fourth: 1.414; 17 | $perfect-fifth: 1.5; 18 | $minor-sixth: 1.6; 19 | $golden: 1.618; 20 | $major-sixth: 1.667; 21 | $minor-seventh: 1.778; 22 | $major-seventh: 1.875; 23 | $octave: 2; 24 | $major-tenth: 2.5; 25 | $major-eleventh: 2.667; 26 | $major-twelfth: 3; 27 | $double-octave: 4; 28 | -------------------------------------------------------------------------------- /core/bourbon/helpers/_text-inputs-list.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A list of all _text-based_ HTML inputs. 4 | /// 5 | /// @type list 6 | /// 7 | /// @access private 8 | 9 | $_text-inputs-list: ( 10 | "[type='color']", 11 | "[type='date']", 12 | "[type='datetime']", 13 | "[type='datetime-local']", 14 | "[type='email']", 15 | "[type='month']", 16 | "[type='number']", 17 | "[type='password']", 18 | "[type='search']", 19 | "[type='tel']", 20 | "[type='text']", 21 | "[type='time']", 22 | "[type='url']", 23 | "[type='week']", 24 | "input:not([type])", 25 | "textarea", 26 | ); 27 | -------------------------------------------------------------------------------- /core/bourbon/library/_border-color.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a concise, one-line method for setting `border-color` on specific 4 | /// edges of a box. Use a `null` value to “skip” edges of the box with standard 5 | /// CSS shorthand. 6 | /// 7 | /// @argument {list} $values 8 | /// List of colors; accepts CSS shorthand. 9 | /// 10 | /// @example scss 11 | /// .element { 12 | /// @include border-color(#a60b55 #76cd9c null #e8ae1a); 13 | /// } 14 | /// 15 | /// // CSS Output 16 | /// .element { 17 | /// border-left-color: #e8ae1a; 18 | /// border-right-color: #76cd9c; 19 | /// border-top-color: #a60b55; 20 | /// } 21 | /// 22 | /// @require {mixin} _directional-property 23 | 24 | @mixin border-color($values) { 25 | @include _directional-property(border, color, $values); 26 | } 27 | -------------------------------------------------------------------------------- /core/bourbon/library/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a concise, one-line method for setting `border-radius` on both the 4 | /// top-left and top-right of a box. 5 | /// 6 | /// @argument {number (with unit)} $radii 7 | /// 8 | /// @example scss 9 | /// .element { 10 | /// @include border-top-radius(4px); 11 | /// } 12 | /// 13 | /// // CSS Output 14 | /// .element { 15 | /// border-top-left-radius: 4px; 16 | /// border-top-right-radius: 4px; 17 | /// } 18 | 19 | @mixin border-top-radius($radii) { 20 | border-top-left-radius: $radii; 21 | border-top-right-radius: $radii; 22 | } 23 | 24 | /// Provides a concise, one-line method for setting `border-radius` on both the 25 | /// top-right and bottom-right of a box. 26 | /// 27 | /// @argument {number (with unit)} $radii 28 | /// 29 | /// @example scss 30 | /// .element { 31 | /// @include border-right-radius(3px); 32 | /// } 33 | /// 34 | /// // CSS Output 35 | /// .element { 36 | /// border-bottom-right-radius: 3px; 37 | /// border-top-right-radius: 3px; 38 | /// } 39 | 40 | @mixin border-right-radius($radii) { 41 | border-bottom-right-radius: $radii; 42 | border-top-right-radius: $radii; 43 | } 44 | 45 | /// Provides a concise, one-line method for setting `border-radius` on both the 46 | /// bottom-left and bottom-right of a box. 47 | /// 48 | /// @argument {number (with unit)} $radii 49 | /// 50 | /// @example scss 51 | /// .element { 52 | /// @include border-bottom-radius(2px); 53 | /// } 54 | /// 55 | /// // CSS Output 56 | /// .element { 57 | /// border-bottom-left-radius: 2px; 58 | /// border-bottom-right-radius: 2px; 59 | /// } 60 | 61 | @mixin border-bottom-radius($radii) { 62 | border-bottom-left-radius: $radii; 63 | border-bottom-right-radius: $radii; 64 | } 65 | 66 | /// Provides a concise, one-line method for setting `border-radius` on both the 67 | /// top-left and bottom-left of a box. 68 | /// 69 | /// @argument {number (with unit)} $radii 70 | /// 71 | /// @example scss 72 | /// .element { 73 | /// @include border-left-radius(1px); 74 | /// } 75 | /// 76 | /// // CSS Output 77 | /// .element { 78 | /// border-bottom-left-radius: 1px; 79 | /// border-top-left-radius: 1px; 80 | /// } 81 | 82 | @mixin border-left-radius($radii) { 83 | border-bottom-left-radius: $radii; 84 | border-top-left-radius: $radii; 85 | } 86 | -------------------------------------------------------------------------------- /core/bourbon/library/_border-style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a concise, one-line method for setting `border-style` on specific 4 | /// edges of a box. Use a `null` value to “skip” edges of the box with standard 5 | /// CSS shorthand. 6 | /// 7 | /// @argument {list} $values 8 | /// List of border styles; accepts CSS shorthand. 9 | /// 10 | /// @example scss 11 | /// .element { 12 | /// @include border-style(dashed null solid); 13 | /// } 14 | /// 15 | /// // CSS Output 16 | /// .element { 17 | /// border-bottom-style: solid; 18 | /// border-top-style: dashed; 19 | /// } 20 | /// 21 | /// @require {mixin} _directional-property 22 | 23 | @mixin border-style($values) { 24 | @include _directional-property(border, style, $values); 25 | } 26 | -------------------------------------------------------------------------------- /core/bourbon/library/_border-width.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a concise, one-line method for setting `border-width` on specific 4 | /// edges of a box. Use a `null` value to “skip” edges of the box with standard 5 | /// CSS shorthand. 6 | /// 7 | /// @argument {list} $values 8 | /// List of border widths; accepts CSS shorthand. 9 | /// 10 | /// @example scss 11 | /// .element { 12 | /// @include border-width(1em null 20px); 13 | /// } 14 | /// 15 | /// // CSS Output 16 | /// .element { 17 | /// border-bottom-width: 20px; 18 | /// border-top-width: 1em; 19 | /// } 20 | /// 21 | /// @require {mixin} _directional-property 22 | 23 | @mixin border-width($values) { 24 | @include _directional-property(border, width, $values); 25 | } 26 | -------------------------------------------------------------------------------- /core/bourbon/library/_buttons.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | //// 4 | /// @type list 5 | /// 6 | /// @require {function} _assign-inputs 7 | /// 8 | /// @require {variable} $_buttons-list 9 | //// 10 | 11 | /// A list of all HTML button elements. Please note that you must interpolate 12 | /// the variable (`#{}`) to use it as a selector. 13 | /// 14 | /// @example scss 15 | /// #{$all-buttons} { 16 | /// background-color: #f00; 17 | /// } 18 | /// 19 | /// // CSS Output 20 | /// button, 21 | /// [type='button'], 22 | /// [type='reset'], 23 | /// [type='submit'] { 24 | /// background-color: #f00; 25 | /// } 26 | 27 | $all-buttons: _assign-inputs($_buttons-list); 28 | 29 | /// A list of all HTML button elements with the `:active` pseudo-class applied. 30 | /// Please note that you must interpolate the variable (`#{}`) to use it as a 31 | /// selector. 32 | /// 33 | /// @example scss 34 | /// #{$all-buttons-active} { 35 | /// background-color: #00f; 36 | /// } 37 | /// 38 | /// // CSS Output 39 | /// button:active, 40 | /// [type='button']:active, 41 | /// [type='reset']:active, 42 | /// [type='submit']:active { 43 | /// background-color: #00f; 44 | /// } 45 | 46 | $all-buttons-active: _assign-inputs($_buttons-list, active); 47 | 48 | /// A list of all HTML button elements with the `:focus` pseudo-class applied. 49 | /// Please note that you must interpolate the variable (`#{}`) to use it as a 50 | /// selector. 51 | /// 52 | /// @example scss 53 | /// #{$all-buttons-focus} { 54 | /// background-color: #0f0; 55 | /// } 56 | /// 57 | /// // CSS Output 58 | /// button:focus, 59 | /// [type='button']:focus, 60 | /// [type='reset']:focus, 61 | /// [type='submit']:focus { 62 | /// background-color: #0f0; 63 | /// } 64 | 65 | $all-buttons-focus: _assign-inputs($_buttons-list, focus); 66 | 67 | /// A list of all HTML button elements with the `:hover` pseudo-class applied. 68 | /// Please note that you must interpolate the variable (`#{}`) to use it as a 69 | /// selector. 70 | /// 71 | /// @example scss 72 | /// #{$all-buttons-hover} { 73 | /// background-color: #0f0; 74 | /// } 75 | /// 76 | /// // CSS Output 77 | /// button:hover, 78 | /// [type='button']:hover, 79 | /// [type='reset']:hover, 80 | /// [type='submit']:hover { 81 | /// background-color: #0f0; 82 | /// } 83 | 84 | $all-buttons-hover: _assign-inputs($_buttons-list, hover); 85 | -------------------------------------------------------------------------------- /core/bourbon/library/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to include a clearfix for containing floats. 4 | /// 5 | /// @link https://goo.gl/yP5hiZ 6 | /// 7 | /// @example scss 8 | /// .element { 9 | /// @include clearfix; 10 | /// } 11 | /// 12 | /// // CSS Output 13 | /// .element::after { 14 | /// clear: both; 15 | /// content: ""; 16 | /// display: block; 17 | /// } 18 | 19 | @mixin clearfix { 20 | &::after { 21 | clear: both; 22 | content: ""; 23 | display: block; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /core/bourbon/library/_contrast-switch.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Switches between two colors based on the contrast to another color. It’s 4 | /// like a [ternary operator] for color contrast and can be useful for building 5 | /// a button system. 6 | /// 7 | /// The calculation of the contrast ratio is based on the [WCAG 2.0 8 | /// specification]. However, we cannot guarantee full compliance, though all of 9 | /// our manual testing passed. 10 | /// 11 | /// [ternary operator]: https://goo.gl/ccfLqi 12 | /// [WCAG 2.0 specification]: https://goo.gl/zhQuYA 13 | /// 14 | /// @argument {color} $base-color 15 | /// The color to evaluate lightness against. 16 | /// 17 | /// @argument {color} $dark-color [#000] 18 | /// The color to be output when `$base-color` is light. Can also be set 19 | /// globally using the `contrast-switch-dark-color` key in the 20 | /// Bourbon settings. 21 | /// 22 | /// @argument {color} $light-color [#fff] 23 | /// The color to be output when `$base-color` is dark. Can also be set 24 | /// globally using the `contrast-switch-light-color` key in the 25 | /// Bourbon settings. 26 | /// 27 | /// @return {color} 28 | /// 29 | /// @example scss 30 | /// .element { 31 | /// color: contrast-switch(#bae6e6); 32 | /// } 33 | /// 34 | /// // CSS Output 35 | /// .element { 36 | /// color: #000; 37 | /// } 38 | /// 39 | /// @example scss 40 | /// .element { 41 | /// $button-color: #2d72d9; 42 | /// background-color: $button-color; 43 | /// color: contrast-switch($button-color, #222, #eee); 44 | /// } 45 | /// 46 | /// // CSS Output 47 | /// .element { 48 | /// background-color: #2d72d9; 49 | /// color: #eee; 50 | /// } 51 | /// 52 | /// @require {function} _fetch-bourbon-setting 53 | /// 54 | /// @require {function} _is-color 55 | /// 56 | /// @require {function} _contrast-ratio 57 | /// 58 | /// @since 5.0.0 59 | 60 | @function contrast-switch( 61 | $base-color, 62 | $dark-color: _fetch-bourbon-setting("contrast-switch-dark-color"), 63 | $light-color: _fetch-bourbon-setting("contrast-switch-light-color") 64 | ) { 65 | @if not _is-color($base-color) { 66 | @error "`#{$base-color}` is not a valid color for the `$base-color` " + 67 | "argument in the `contrast-switch` function."; 68 | } @else if not _is-color($dark-color) { 69 | @error "`#{$dark-color}` is not a valid color for the `$dark-color` " + 70 | "argument in the `contrast-switch` function."; 71 | } @else if not _is-color($light-color) { 72 | @error "`#{$light-color}` is not a valid color for the `$light-color` " + 73 | "argument in the `contrast-switch` function."; 74 | } @else { 75 | $-contrast-to-dark: _contrast-ratio($base-color, $dark-color); 76 | $-contrast-to-light: _contrast-ratio($base-color, $light-color); 77 | $-prefer-dark: $-contrast-to-dark >= $-contrast-to-light; 78 | 79 | @return if($-prefer-dark, $dark-color, $light-color); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /core/bourbon/library/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Truncates text and adds an ellipsis to represent overflow. 4 | /// 5 | /// @argument {number} $width [100%] 6 | /// The `max-width` for the string to respect before being truncated. 7 | /// 8 | /// @argument {string} $display [inline-block] 9 | /// Sets the display-value of the element. 10 | /// 11 | /// @example scss 12 | /// .element { 13 | /// @include ellipsis; 14 | /// } 15 | /// 16 | /// // CSS Output 17 | /// .element { 18 | /// display: inline-block; 19 | /// max-width: 100%; 20 | /// overflow: hidden; 21 | /// text-overflow: ellipsis; 22 | /// white-space: nowrap; 23 | /// word-wrap: normal; 24 | /// } 25 | 26 | @mixin ellipsis( 27 | $width: 100%, 28 | $display: inline-block 29 | ) { 30 | display: $display; 31 | max-width: $width; 32 | overflow: hidden; 33 | text-overflow: ellipsis; 34 | white-space: nowrap; 35 | word-wrap: normal; 36 | } 37 | -------------------------------------------------------------------------------- /core/bourbon/library/_font-face.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates an `@font-face` declaration. You can choose the specific file 4 | /// formats you need to output; the mixin supports `woff2` 5 | /// and `woff`. The mixin also supports usage with the Rails Asset Pipeline, 6 | /// which you can enable per use, or globally in the `$bourbon()` settings. 7 | /// 8 | /// @argument {string} $font-family 9 | /// 10 | /// @argument {string} $file-path 11 | /// 12 | /// @argument {string | list} $file-formats [("woff2", "woff")] 13 | /// List of the font file formats to include. Can also be set globally using 14 | /// the `global-font-file-formats` key in the Bourbon settings. 15 | /// 16 | /// @argument {boolean} $asset-pipeline [false] 17 | /// Set to `true` if you’re using the Rails Asset Pipeline (place the fonts 18 | /// in `app/assets/fonts/`). Can also be set globally using the 19 | /// `rails-asset-pipeline` key in the Bourbon settings. 20 | /// 21 | /// @content 22 | /// Any additional CSS properties that are included in the `@include` 23 | /// directive will be output within the `@font-face` declaration, e.g. you can 24 | /// pass in `font-weight`, `font-style` and/or `unicode-range`. 25 | /// 26 | /// @example scss 27 | /// @include font-face( 28 | /// "source-sans-pro", 29 | /// "fonts/source-sans-pro-regular", 30 | /// ("woff2", "woff") 31 | /// ) { 32 | /// font-style: normal; 33 | /// font-weight: 400; 34 | /// } 35 | /// 36 | /// // CSS Output 37 | /// @font-face { 38 | /// font-family: "source-sans-pro"; 39 | /// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"), 40 | /// url("fonts/source-sans-pro-regular.woff") format("woff"); 41 | /// font-style: normal; 42 | /// font-weight: 400; 43 | /// } 44 | /// 45 | /// @require {function} _font-source-declaration 46 | /// 47 | /// @require {function} _fetch-bourbon-setting 48 | 49 | @mixin font-face( 50 | $font-family, 51 | $file-path, 52 | $file-formats: _fetch-bourbon-setting("global-font-file-formats"), 53 | $asset-pipeline: _fetch-bourbon-setting("rails-asset-pipeline") 54 | ) { 55 | @font-face { 56 | font-family: $font-family; 57 | src: _font-source-declaration( 58 | $font-family, 59 | $file-path, 60 | $asset-pipeline, 61 | $file-formats 62 | ); 63 | @content; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /core/bourbon/library/_font-stacks.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A variable that outputs a Helvetica font stack. 4 | /// 5 | /// @link https://goo.gl/uSJvZe 6 | /// 7 | /// @type list 8 | /// 9 | /// @example scss 10 | /// .element { 11 | /// font-family: $font-stack-helvetica; 12 | /// } 13 | /// 14 | /// // CSS Output 15 | /// .element { 16 | /// font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 17 | /// } 18 | 19 | $font-stack-helvetica: ( 20 | "Helvetica Neue", 21 | "Helvetica", 22 | "Arial", 23 | sans-serif, 24 | ); 25 | 26 | /// A variable that outputs a Lucida Grande font stack. 27 | /// 28 | /// @link https://goo.gl/R5UyYE 29 | /// 30 | /// @type list 31 | /// 32 | /// @example scss 33 | /// .element { 34 | /// font-family: $font-stack-lucida-grande; 35 | /// } 36 | /// 37 | /// // CSS Output 38 | /// .element { 39 | /// font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", "Verdana", sans-serif; 40 | /// } 41 | 42 | $font-stack-lucida-grande: ( 43 | "Lucida Grande", 44 | "Lucida Sans Unicode", 45 | "Geneva", 46 | "Verdana", 47 | sans-serif, 48 | ); 49 | 50 | /// A variable that outputs a Verdana font stack. 51 | /// 52 | /// @link https://goo.gl/yGXWSS 53 | /// 54 | /// @type list 55 | /// 56 | /// @example scss 57 | /// .element { 58 | /// font-family: $font-stack-verdana; 59 | /// } 60 | /// 61 | /// // CSS Output 62 | /// .element { 63 | /// font-family: "Verdana", "Geneva", sans-serif; 64 | /// } 65 | 66 | $font-stack-verdana: ( 67 | "Verdana", 68 | "Geneva", 69 | sans-serif, 70 | ); 71 | 72 | /// A variable that outputs a system font stack. 73 | /// 74 | /// @type list 75 | /// 76 | /// @example scss 77 | /// .element { 78 | /// font-family: $font-stack-system; 79 | /// } 80 | /// 81 | /// // CSS Output 82 | /// .element { 83 | /// font-family: system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif; 84 | /// } 85 | 86 | $font-stack-system: ( 87 | system-ui, 88 | -apple-system, 89 | BlinkMacSystemFont, 90 | "Avenir Next", 91 | "Avenir", 92 | "Segoe UI", 93 | "Lucida Grande", 94 | "Helvetica Neue", 95 | "Helvetica", 96 | "Fira Sans", 97 | "Roboto", 98 | "Noto", 99 | "Droid Sans", 100 | "Cantarell", 101 | "Oxygen", 102 | "Ubuntu", 103 | "Franklin Gothic Medium", 104 | "Century Gothic", 105 | "Liberation Sans", 106 | sans-serif, 107 | ); 108 | 109 | /// A variable that outputs a Garamond font stack. 110 | /// 111 | /// @link https://goo.gl/QQFEkV 112 | /// 113 | /// @type list 114 | /// 115 | /// @example scss 116 | /// .element { 117 | /// font-family: $font-stack-garamond; 118 | /// } 119 | /// 120 | /// // CSS Output 121 | /// .element { 122 | /// font-family: "Garamond", "Baskerville", "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; 123 | /// } 124 | 125 | $font-stack-garamond: ( 126 | "Garamond", 127 | "Baskerville", 128 | "Baskerville Old Face", 129 | "Hoefler Text", 130 | "Times New Roman", 131 | serif, 132 | ); 133 | 134 | /// A variable that outputs a Georgia font stack. 135 | /// 136 | /// @link https://goo.gl/wtzVPy 137 | /// 138 | /// @type list 139 | /// 140 | /// @example scss 141 | /// .element { 142 | /// font-family: $font-stack-georgia; 143 | /// } 144 | /// 145 | /// // CSS Output 146 | /// .element { 147 | /// font-family: "Georgia", "Times", "Times New Roman", serif; 148 | /// } 149 | 150 | $font-stack-georgia: ( 151 | "Georgia", 152 | "Times", 153 | "Times New Roman", 154 | serif, 155 | ); 156 | 157 | /// A variable that outputs a Hoefler Text font stack. 158 | /// 159 | /// @link https://goo.gl/n7U7zx 160 | /// 161 | /// @type list 162 | /// 163 | /// @example scss 164 | /// .element { 165 | /// font-family: $font-stack-hoefler-text; 166 | /// } 167 | /// 168 | /// // CSS Output 169 | /// .element { 170 | /// font-family: "Hoefler Text", "Baskerville Old Face", "Garamond", "Times New Roman", serif; 171 | /// } 172 | 173 | $font-stack-hoefler-text: ( 174 | "Hoefler Text", 175 | "Baskerville Old Face", 176 | "Garamond", 177 | "Times New Roman", 178 | serif, 179 | ); 180 | 181 | /// A variable that outputs a Consolas font stack. 182 | /// 183 | /// @link https://goo.gl/iKrtqv 184 | /// 185 | /// @type list 186 | /// 187 | /// @example scss 188 | /// .element { 189 | /// font-family: $font-stack-consolas; 190 | /// } 191 | /// 192 | /// // CSS Output 193 | /// .element { 194 | /// font-family: "Consolas", "monaco", monospace; 195 | /// } 196 | 197 | $font-stack-consolas: ( 198 | "Consolas", 199 | "monaco", 200 | monospace, 201 | ); 202 | 203 | /// A variable that outputs a Courier New font stack. 204 | /// 205 | /// @link https://goo.gl/bHfWMP 206 | /// 207 | /// @type list 208 | /// 209 | /// @example scss 210 | /// .element { 211 | /// font-family: $font-stack-courier-new; 212 | /// } 213 | /// 214 | /// // CSS Output 215 | /// .element { 216 | /// font-family: "Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", monospace; 217 | /// } 218 | 219 | $font-stack-courier-new: ( 220 | "Courier New", 221 | "Courier", 222 | "Lucida Sans Typewriter", 223 | "Lucida Typewriter", 224 | monospace, 225 | ); 226 | 227 | /// A variable that outputs a Monaco font stack. 228 | /// 229 | /// @link https://goo.gl/9PgKDO 230 | /// 231 | /// @type list 232 | /// 233 | /// @example scss 234 | /// .element { 235 | /// font-family: $font-stack-monaco; 236 | /// } 237 | /// 238 | /// // CSS Output 239 | /// .element { 240 | /// font-family: "Monaco", "Consolas", "Lucida Console", monospace; 241 | /// } 242 | 243 | $font-stack-monaco: ( 244 | "Monaco", 245 | "Consolas", 246 | "Lucida Console", 247 | monospace, 248 | ); 249 | -------------------------------------------------------------------------------- /core/bourbon/library/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Hides the text in an element, commonly used to show an image instead. Some 4 | /// elements will need block-level styles applied. 5 | /// 6 | /// @link https://goo.gl/EvLRIu 7 | /// 8 | /// @example scss 9 | /// .element { 10 | /// @include hide-text; 11 | /// } 12 | /// 13 | /// // CSS Output 14 | /// .element { 15 | /// overflow: hidden; 16 | /// text-indent: 101%; 17 | /// white-space: nowrap; 18 | /// } 19 | 20 | @mixin hide-text { 21 | overflow: hidden; 22 | text-indent: 101%; 23 | white-space: nowrap; 24 | } 25 | -------------------------------------------------------------------------------- /core/bourbon/library/_hide-visually.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Hides an element visually while still allowing the content to be accessible 4 | /// to assistive technology, e.g. screen readers. Passing `unhide` will reverse 5 | /// the affects of the hiding, which is handy for showing the element on focus, 6 | /// for example. 7 | /// 8 | /// @link https://goo.gl/Vf1TGn 9 | /// 10 | /// @argument {string} $toggle [hide] 11 | /// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`. 12 | /// 13 | /// @example scss 14 | /// .element { 15 | /// @include hide-visually; 16 | /// 17 | /// &:active, 18 | /// &:focus { 19 | /// @include hide-visually("unhide"); 20 | /// } 21 | /// } 22 | /// 23 | /// // CSS Output 24 | /// .element { 25 | /// border: 0; 26 | /// clip: rect(1px, 1px, 1px, 1px); 27 | /// clip-path: inset(100%); 28 | /// height: 1px; 29 | /// overflow: hidden; 30 | /// padding: 0; 31 | /// position: absolute; 32 | /// width: 1px; 33 | /// } 34 | /// 35 | /// .hide-visually:active, 36 | /// .hide-visually:focus { 37 | /// clip: auto; 38 | /// clip-path: none; 39 | /// height: auto; 40 | /// overflow: visible; 41 | /// position: static; 42 | /// width: auto; 43 | /// } 44 | /// 45 | /// @since 5.0.0 46 | 47 | @mixin hide-visually($toggle: "hide") { 48 | @if not index("hide" "unhide", $toggle) { 49 | @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " + 50 | "the `hide-visually` mixin. Must be either `hide` or `unhide`."; 51 | } @else if $toggle == "hide" { 52 | border: 0; 53 | clip: rect(1px, 1px, 1px, 1px); 54 | clip-path: inset(100%); 55 | height: 1px; 56 | overflow: hidden; 57 | padding: 0; 58 | position: absolute; 59 | white-space: nowrap; 60 | width: 1px; 61 | } @else if $toggle == "unhide" { 62 | clip: auto; 63 | clip-path: none; 64 | height: auto; 65 | overflow: visible; 66 | position: static; 67 | white-space: inherit; 68 | width: auto; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /core/bourbon/library/_margin.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a concise, one-line method for setting `margin` on specific edges 4 | /// of a box. Use a `null` value to “skip” edges of the box with standard 5 | /// CSS shorthand. 6 | /// 7 | /// @argument {list} $values 8 | /// List of margin values; accepts CSS shorthand. 9 | /// 10 | /// @example scss 11 | /// .element { 12 | /// @include margin(null auto); 13 | /// } 14 | /// 15 | /// // CSS Output 16 | /// .element { 17 | /// margin-left: auto; 18 | /// margin-right: auto; 19 | /// } 20 | /// 21 | /// @example scss 22 | /// .element { 23 | /// @include margin(10px 3em 20vh null); 24 | /// } 25 | /// 26 | /// // CSS Output 27 | /// .element { 28 | /// margin-bottom: 20vh; 29 | /// margin-right: 3em; 30 | /// margin-top: 10px; 31 | /// } 32 | /// 33 | /// @require {mixin} _directional-property 34 | 35 | @mixin margin($values) { 36 | @include _directional-property(margin, null, $values); 37 | } 38 | -------------------------------------------------------------------------------- /core/bourbon/library/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Increments up or down a defined scale and returns an adjusted value. This 4 | /// helps establish consistent measurements and spacial relationships throughout 5 | /// your project. We provide a list of commonly used scales as 6 | /// [pre-defined variables][scales]. 7 | /// 8 | /// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/helpers/_scales.scss 9 | /// 10 | /// @argument {number (unitless)} $increment 11 | /// How many steps to increment up or down the scale. 12 | /// 13 | /// @argument {number (with unit) | list} $value [1em] 14 | /// The base value the scale starts at. Can also be set globally using the 15 | /// `modular-scale-base` key in the Bourbon settings. 16 | /// 17 | /// @argument {number (unitless)} $ratio [1.25] 18 | /// The ratio the scale is built on. Can also be set globally using the 19 | /// `modular-scale-ratio` key in the Bourbon settings. 20 | /// 21 | /// @return {number (with unit)} 22 | /// 23 | /// @example scss 24 | /// .element { 25 | /// font-size: modular-scale(2); 26 | /// } 27 | /// 28 | /// // CSS Output 29 | /// .element { 30 | /// font-size: 1.5625em; 31 | /// } 32 | /// 33 | /// @example scss 34 | /// .element { 35 | /// margin-right: modular-scale(3, 2em); 36 | /// } 37 | /// 38 | /// // CSS Output 39 | /// .element { 40 | /// margin-right: 3.90625em; 41 | /// } 42 | /// 43 | /// @example scss 44 | /// .element { 45 | /// font-size: modular-scale(3, 1em 1.6em, $major-seventh); 46 | /// } 47 | /// 48 | /// // CSS Output 49 | /// .element { 50 | /// font-size: 3em; 51 | /// } 52 | /// 53 | /// @example scss 54 | /// // Globally change the base ratio 55 | /// $bourbon: ( 56 | /// "modular-scale-ratio": 1.2, 57 | /// ); 58 | /// 59 | /// .element { 60 | /// font-size: modular-scale(3); 61 | /// } 62 | /// 63 | /// // CSS Output 64 | /// .element { 65 | /// font-size: 1.728em; 66 | /// } 67 | /// 68 | /// @require {function} _fetch-bourbon-setting 69 | 70 | @function modular-scale( 71 | $increment, 72 | $value: _fetch-bourbon-setting("modular-scale-base"), 73 | $ratio: _fetch-bourbon-setting("modular-scale-ratio") 74 | ) { 75 | $v1: nth($value, 1); 76 | $v2: nth($value, length($value)); 77 | $value: $v1; 78 | 79 | // scale $v2 to just above $v1 80 | @while $v2 > $v1 { 81 | $v2: ($v2 / $ratio); // will be off-by-1 82 | } 83 | @while $v2 < $v1 { 84 | $v2: ($v2 * $ratio); // will fix off-by-1 85 | } 86 | 87 | // check AFTER scaling $v2 to prevent double-counting corner-case 88 | $double-stranded: $v2 > $v1; 89 | 90 | @if $increment > 0 { 91 | @for $i from 1 through $increment { 92 | @if $double-stranded and ($v1 * $ratio) > $v2 { 93 | $value: $v2; 94 | $v2: ($v2 * $ratio); 95 | } @else { 96 | $v1: ($v1 * $ratio); 97 | $value: $v1; 98 | } 99 | } 100 | } 101 | 102 | @if $increment < 0 { 103 | // adjust $v2 to just below $v1 104 | @if $double-stranded { 105 | $v2: ($v2 / $ratio); 106 | } 107 | 108 | @for $i from $increment through -1 { 109 | @if $double-stranded and ($v1 / $ratio) < $v2 { 110 | $value: $v2; 111 | $v2: ($v2 / $ratio); 112 | } @else { 113 | $v1: ($v1 / $ratio); 114 | $value: $v1; 115 | } 116 | } 117 | } 118 | 119 | @return $value; 120 | } 121 | -------------------------------------------------------------------------------- /core/bourbon/library/_overflow-wrap.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs the `overflow-wrap` property and its legacy name `word-wrap` to 4 | /// support browsers that do not yet use `overflow-wrap`. 5 | /// 6 | /// @argument {string} $wrap [break-word] 7 | /// Accepted CSS values are `normal`, `break-word`, `inherit`, `initial`, 8 | /// or `unset`. 9 | /// 10 | /// @example scss 11 | /// .wrapper { 12 | /// @include overflow-wrap; 13 | /// } 14 | /// 15 | /// // CSS Output 16 | /// .wrapper { 17 | /// word-wrap: break-word; 18 | /// overflow-wrap: break-word; 19 | /// } 20 | 21 | @mixin overflow-wrap($wrap: break-word) { 22 | word-wrap: $wrap; 23 | // stylelint-disable-next-line order/properties-alphabetical-order 24 | overflow-wrap: $wrap; 25 | } 26 | -------------------------------------------------------------------------------- /core/bourbon/library/_padding.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a concise method for targeting `padding` on specific sides of a 4 | /// box. Use a `null` value to “skip” a side. 5 | /// 6 | /// @argument {list} $values 7 | /// List of padding values; accepts CSS shorthand. 8 | /// 9 | /// @example scss 10 | /// .element-one { 11 | /// @include padding(null 1rem); 12 | /// } 13 | /// 14 | /// // CSS Output 15 | /// .element-one { 16 | /// padding-left: 1rem; 17 | /// padding-right: 1rem; 18 | /// } 19 | /// 20 | /// @example scss 21 | /// .element-two { 22 | /// @include padding(10vh null 10px 5%); 23 | /// } 24 | /// 25 | /// // CSS Output 26 | /// .element-two { 27 | /// padding-bottom: 10px; 28 | /// padding-left: 5%; 29 | /// padding-top: 10vh; 30 | /// } 31 | /// 32 | /// @require {mixin} _directional-property 33 | 34 | @mixin padding($values) { 35 | @include _directional-property(padding, null, $values); 36 | } 37 | -------------------------------------------------------------------------------- /core/bourbon/library/_position.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a concise, one-line method for setting an element’s positioning 4 | /// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null` 5 | /// value to “skip” an edge of the box. 6 | /// 7 | /// @argument {string} $position 8 | /// A CSS position value. 9 | /// 10 | /// @argument {list} $box-edge-values 11 | /// List of lengths; accepts CSS shorthand. 12 | /// 13 | /// @example scss 14 | /// .element { 15 | /// @include position(relative, 0 null null 10em); 16 | /// } 17 | /// 18 | /// // CSS Output 19 | /// .element { 20 | /// left: 10em; 21 | /// position: relative; 22 | /// top: 0; 23 | /// } 24 | /// 25 | /// @example scss 26 | /// .element { 27 | /// @include position(absolute, 0); 28 | /// } 29 | /// 30 | /// // CSS Output 31 | /// .element { 32 | /// position: absolute; 33 | /// top: 0; 34 | /// right: 0; 35 | /// bottom: 0; 36 | /// left: 0; 37 | /// } 38 | /// 39 | /// @require {function} _is-length 40 | /// 41 | /// @require {function} _unpack-shorthand 42 | 43 | @mixin position( 44 | $position, 45 | $box-edge-values 46 | ) { 47 | $box-edge-values: _unpack-shorthand($box-edge-values); 48 | $offsets: ( 49 | "top": nth($box-edge-values, 1), 50 | "right": nth($box-edge-values, 2), 51 | "bottom": nth($box-edge-values, 3), 52 | "left": nth($box-edge-values, 4), 53 | ); 54 | 55 | position: $position; 56 | 57 | @each $offset, $value in $offsets { 58 | @if _is-length($value) { 59 | #{$offset}: $value; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /core/bourbon/library/_prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates vendor prefixes. 4 | /// 5 | /// @argument {string} $property 6 | /// Property to prefix. 7 | /// 8 | /// @argument {string} $value 9 | /// Value to use. 10 | /// 11 | /// @argument {list} $prefixes 12 | /// Vendor prefixes to output. 13 | /// 14 | /// @example scss 15 | /// .element { 16 | /// @include prefixer(appearance, none, ("webkit", "moz")); 17 | /// } 18 | /// 19 | /// // CSS Output 20 | /// .element { 21 | /// -webkit-appearance: none; 22 | /// -moz-appearance: none; 23 | /// appearance: none; 24 | /// } 25 | /// 26 | /// @author Hugo Giraudel 27 | 28 | @mixin prefixer( 29 | $property, 30 | $value, 31 | $prefixes: () 32 | ) { 33 | @each $prefix in $prefixes { 34 | #{"-" + $prefix + "-" + $property}: $value; 35 | } 36 | #{$property}: $value; 37 | } 38 | -------------------------------------------------------------------------------- /core/bourbon/library/_shade.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with black. 4 | /// 5 | /// @argument {color} $color 6 | /// 7 | /// @argument {number (percentage)} $percent 8 | /// The amount of black to be mixed in. 9 | /// 10 | /// @return {color} 11 | /// 12 | /// @example scss 13 | /// .element { 14 | /// background-color: shade(#ffbb52, 60%); 15 | /// } 16 | /// 17 | /// // CSS Output 18 | /// .element { 19 | /// background-color: #664a20; 20 | /// } 21 | 22 | @function shade( 23 | $color, 24 | $percent 25 | ) { 26 | @if not _is-color($color) { 27 | @error "`#{$color}` is not a valid color for the `$color` argument in " + 28 | "the `shade` mixin."; 29 | } @else { 30 | @return mix(#000, $color, $percent); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /core/bourbon/library/_size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the `width` and `height` of the element in one statement. 4 | /// 5 | /// @argument {number (with unit) | string} $width 6 | /// 7 | /// @argument {number (with unit) | string} $height [$width] 8 | /// 9 | /// @example scss 10 | /// .first-element { 11 | /// @include size(2em); 12 | /// } 13 | /// 14 | /// // CSS Output 15 | /// .first-element { 16 | /// width: 2em; 17 | /// height: 2em; 18 | /// } 19 | /// 20 | /// @example scss 21 | /// .second-element { 22 | /// @include size(auto, 10em); 23 | /// } 24 | /// 25 | /// // CSS Output 26 | /// .second-element { 27 | /// width: auto; 28 | /// height: 10em; 29 | /// } 30 | /// 31 | /// @require {function} _is-size 32 | 33 | @mixin size( 34 | $width, 35 | $height: $width 36 | ) { 37 | @if _is-size($height) { 38 | height: $height; 39 | } @else { 40 | @error "`#{$height}` is not a valid length for the `$height` argument " + 41 | "in the `size` mixin."; 42 | } 43 | 44 | @if _is-size($width) { 45 | width: $width; 46 | } @else { 47 | @error "`#{$width}` is not a valid length for the `$width` argument " + 48 | "in the `size` mixin."; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /core/bourbon/library/_strip-unit.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Strips the unit from a number. 4 | /// 5 | /// @argument {number} $value 6 | /// 7 | /// @return {number (unitless)} 8 | /// 9 | /// @example scss 10 | /// $dimension: strip-unit(10em); 11 | /// 12 | /// // Output 13 | /// $dimension: 10; 14 | 15 | @function strip-unit($value) { 16 | @return ($value / ($value * 0 + 1)); 17 | } 18 | -------------------------------------------------------------------------------- /core/bourbon/library/_text-inputs.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | //// 4 | /// @type list 5 | /// 6 | /// @require {function} _assign-inputs 7 | /// 8 | /// @require {variable} $_text-inputs-list 9 | //// 10 | 11 | /// A list of all _text-based_ HTML inputs. Please note that you must 12 | /// interpolate the variable (`#{}`) to use it as a selector. 13 | /// 14 | /// @example scss 15 | /// #{$all-text-inputs} { 16 | /// border: 1px solid #ccc; 17 | /// } 18 | /// 19 | /// // CSS Output 20 | /// [type='color'], 21 | /// [type='date'], 22 | /// [type='datetime'], 23 | /// [type='datetime-local'], 24 | /// [type='email'], 25 | /// [type='month'], 26 | /// [type='number'], 27 | /// [type='password'], 28 | /// [type='search'], 29 | /// [type='tel'], 30 | /// [type='text'], 31 | /// [type='time'], 32 | /// [type='url'], 33 | /// [type='week'], 34 | /// input:not([type]), 35 | /// textarea { 36 | /// border: 1px solid #ccc; 37 | /// } 38 | 39 | $all-text-inputs: _assign-inputs($_text-inputs-list); 40 | 41 | /// A list of all _text-based_ HTML inputs with the `:active` pseudo-class 42 | /// applied. Please note that you must interpolate the variable (`#{}`) to use 43 | /// it as a selector. 44 | /// 45 | /// @example scss 46 | /// #{$all-text-inputs-active} { 47 | /// border: 1px solid #aaa; 48 | /// } 49 | /// 50 | /// // CSS Output 51 | /// [type='color']:active, 52 | /// [type='date']:active, 53 | /// [type='datetime']:active, 54 | /// [type='datetime-local']:active, 55 | /// [type='email']:active, 56 | /// [type='month']:active, 57 | /// [type='number']:active, 58 | /// [type='password']:active, 59 | /// [type='search']:active, 60 | /// [type='tel']:active, 61 | /// [type='text']:active, 62 | /// [type='time']:active, 63 | /// [type='url']:active, 64 | /// [type='week']:active, 65 | /// input:not([type]):active, 66 | /// textarea:active { 67 | /// border: 1px solid #aaa; 68 | /// } 69 | 70 | $all-text-inputs-active: _assign-inputs($_text-inputs-list, active); 71 | 72 | /// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class 73 | /// applied. Please note that you must interpolate the variable (`#{}`) to use 74 | /// it as a selector. 75 | /// 76 | /// @example scss 77 | /// #{$all-text-inputs-focus} { 78 | /// border: 1px solid #1565c0; 79 | /// } 80 | /// 81 | /// // CSS Output 82 | /// [type='color']:focus, 83 | /// [type='date']:focus, 84 | /// [type='datetime']:focus, 85 | /// [type='datetime-local']:focus, 86 | /// [type='email']:focus, 87 | /// [type='month']:focus, 88 | /// [type='number']:focus, 89 | /// [type='password']:focus, 90 | /// [type='search']:focus, 91 | /// [type='tel']:focus, 92 | /// [type='text']:focus, 93 | /// [type='time']:focus, 94 | /// [type='url']:focus, 95 | /// [type='week']:focus, 96 | /// input:not([type]):focus, 97 | /// textarea:focus { 98 | /// border: 1px solid #1565c0; 99 | /// } 100 | 101 | $all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus); 102 | 103 | /// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class 104 | /// applied. Please note that you must interpolate the variable (`#{}`) to use 105 | /// it as a selector. 106 | /// 107 | /// @example scss 108 | /// #{$all-text-inputs-hover} { 109 | /// border: 1px solid #aaa; 110 | /// } 111 | /// 112 | /// // CSS Output 113 | /// [type='color']:hover, 114 | /// [type='date']:hover, 115 | /// [type='datetime']:hover, 116 | /// [type='datetime-local']:hover, 117 | /// [type='email']:hover, 118 | /// [type='month']:hover, 119 | /// [type='number']:hover, 120 | /// [type='password']:hover, 121 | /// [type='search']:hover, 122 | /// [type='tel']:hover, 123 | /// [type='text']:hover, 124 | /// [type='time']:hover, 125 | /// [type='url']:hover, 126 | /// [type='week']:hover, 127 | /// input:not([type]):hover, 128 | /// textarea:hover { 129 | /// border: 1px solid #aaa; 130 | /// } 131 | 132 | $all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover); 133 | 134 | /// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class 135 | /// applied. Please note that you must interpolate the variable (`#{}`) to use 136 | /// it as a selector. 137 | /// 138 | /// @example scss 139 | /// #{$all-text-inputs-invalid} { 140 | /// border: 1px solid #00f; 141 | /// } 142 | /// 143 | /// // CSS Output 144 | /// [type='color']:invalid, 145 | /// [type='date']:invalid, 146 | /// [type='datetime']:invalid, 147 | /// [type='datetime-local']:invalid, 148 | /// [type='email']:invalid, 149 | /// [type='month']:invalid, 150 | /// [type='number']:invalid, 151 | /// [type='password']:invalid, 152 | /// [type='search']:invalid, 153 | /// [type='tel']:invalid, 154 | /// [type='text']:invalid, 155 | /// [type='time']:invalid, 156 | /// [type='url']:invalid, 157 | /// [type='week']:invalid, 158 | /// input:not([type]):invalid, 159 | /// textarea:invalid { 160 | /// border: 1px solid #00f; 161 | /// } 162 | 163 | $all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid); 164 | -------------------------------------------------------------------------------- /core/bourbon/library/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | //// 4 | /// CSS cubic-bezier timing functions. 5 | /// 6 | /// @link https://goo.gl/p8u6SK 7 | /// 8 | /// @type string 9 | //// 10 | 11 | $ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); 12 | $ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); 13 | $ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); 14 | $ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); 15 | $ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); 16 | $ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); 17 | $ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); 18 | $ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); 19 | 20 | $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 21 | $ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); 22 | $ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); 23 | $ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); 24 | $ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); 25 | $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); 26 | $ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); 27 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); 28 | 29 | $ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); 30 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); 31 | $ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); 32 | $ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); 33 | $ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); 34 | $ease-in-out-expo: cubic-bezier(1, 0, 0, 1); 35 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); 36 | $ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); 37 | -------------------------------------------------------------------------------- /core/bourbon/library/_tint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with white. 4 | /// 5 | /// @argument {color} $color 6 | /// 7 | /// @argument {number (percentage)} $percent 8 | /// The amount of white to be mixed in. 9 | /// 10 | /// @return {color} 11 | /// 12 | /// @example scss 13 | /// .element { 14 | /// background-color: tint(#6ecaa6, 40%); 15 | /// } 16 | /// 17 | /// // CSS Output 18 | /// .element { 19 | /// background-color: #a8dfc9; 20 | /// } 21 | 22 | @function tint( 23 | $color, 24 | $percent 25 | ) { 26 | @if not _is-color($color) { 27 | @error "`#{$color}` is not a valid color for the `$color` argument in " + 28 | "the `tint` mixin."; 29 | } @else { 30 | @return mix(#fff, $color, $percent); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /core/bourbon/library/_triangle.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates a triangle pointing in a specified direction. 4 | /// 5 | /// @argument {string} $direction 6 | /// The direction the triangle should point. Accepts `up`, `up-right`, 7 | /// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`. 8 | /// 9 | /// @argument {number (with unit)} $width 10 | /// Width of the triangle. 11 | /// 12 | /// @argument {number (with unit)} $height 13 | /// Height of the triangle. 14 | /// 15 | /// @argument {color} $color 16 | /// Color of the triangle. 17 | /// 18 | /// @example scss 19 | /// .element { 20 | /// &::before { 21 | /// @include triangle("up", 2rem, 1rem, #b25c9c); 22 | /// content: ""; 23 | /// } 24 | /// } 25 | /// 26 | /// // CSS Output 27 | /// .element::before { 28 | /// border-style: solid; 29 | /// height: 0; 30 | /// width: 0; 31 | /// border-color: transparent transparent #b25c9c; 32 | /// border-width: 0 1rem 1rem; 33 | /// content: ""; 34 | /// } 35 | 36 | @mixin triangle( 37 | $direction, 38 | $width, 39 | $height, 40 | $color 41 | ) { 42 | @if not index( 43 | "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left", 44 | $direction 45 | ) { 46 | @error "Direction must be `up`, `up-right`, `right`, `down-right`, " + 47 | "`down`, `down-left`, `left` or `up-left`."; 48 | } @else if not _is-color($color) { 49 | @error "`#{$color}` is not a valid color for the `$color` argument in " + 50 | "the `triangle` mixin."; 51 | } @else { 52 | border-style: solid; 53 | height: 0; 54 | width: 0; 55 | 56 | @if $direction == "up" { 57 | border-color: transparent transparent $color; 58 | border-width: 0 ($width / 2) $height; 59 | } @else if $direction == "up-right" { 60 | border-color: transparent $color transparent transparent; 61 | border-width: 0 $width $width 0; 62 | } @else if $direction == "right" { 63 | border-color: transparent transparent transparent $color; 64 | border-width: ($height / 2) 0 ($height / 2) $width; 65 | } @else if $direction == "down-right" { 66 | border-color: transparent transparent $color; 67 | border-width: 0 0 $width $width; 68 | } @else if $direction == "down" { 69 | border-color: $color transparent transparent; 70 | border-width: $height ($width / 2) 0; 71 | } @else if $direction == "down-left" { 72 | border-color: transparent transparent transparent $color; 73 | border-width: $width 0 0 $width; 74 | } @else if $direction == "left" { 75 | border-color: transparent $color transparent transparent; 76 | border-width: ($height / 2) $width ($height / 2) 0; 77 | } @else if $direction == "up-left" { 78 | border-color: $color transparent transparent; 79 | border-width: $width $width 0 0; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /core/bourbon/library/_value-prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates vendor prefixes for values. 4 | /// 5 | /// @argument {string} $property 6 | /// Property to use. 7 | /// 8 | /// @argument {string} $value 9 | /// Value to prefix. 10 | /// 11 | /// @argument {list} $prefixes 12 | /// Vendor prefixes to output. 13 | /// 14 | /// @example scss 15 | /// .element { 16 | /// @include value-prefixer(cursor, grab, ("webkit", "moz")); 17 | /// } 18 | /// 19 | /// // CSS Output 20 | /// .element { 21 | /// cursor: -webkit-grab; 22 | /// cursor: -moz-grab; 23 | /// cursor: grab; 24 | /// } 25 | /// 26 | /// @author Matthew Tobiasz 27 | 28 | @mixin value-prefixer( 29 | $property, 30 | $value, 31 | $prefixes: () 32 | ) { 33 | @each $prefix in $prefixes { 34 | #{$property}: #{"-" + $prefix + "-" + $value}; 35 | } 36 | #{$property}: $value; 37 | } 38 | -------------------------------------------------------------------------------- /core/bourbon/settings/_settings.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Default global Bourbon settings. Values in this map are overwritten by any 4 | /// values set in the `$bourbon` map. 5 | /// 6 | /// @type map 7 | /// 8 | /// @property {color} contrast-switch-dark-color [#000] 9 | /// Global dark color for the `contrast-switch` function. 10 | /// 11 | /// @property {color} contrast-switch-light-color [#fff] 12 | /// Global light color for the `contrast-switch` function. 13 | /// 14 | /// @property {list} global-font-file-formats [("woff2", "woff")] 15 | /// Global font file formats for the `font-face` mixin. 16 | /// 17 | /// @property {number (with unit)} modular-scale-base [1em] 18 | /// Global base value for the `modular-scale` function. 19 | /// 20 | /// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)] 21 | /// Global base ratio for the `modular-scale` function. 22 | /// 23 | /// @property {boolean} rails-asset-pipeline [false] 24 | /// Set this to `true` when using the Rails Asset Pipeline and Bourbon will 25 | /// write asset paths using 26 | /// [sass-rails’ asset helpers](https://github.com/rails/sass-rails#asset-helpers). 27 | /// 28 | /// @access private 29 | 30 | $_bourbon-defaults: ( 31 | "contrast-switch-dark-color": #000, 32 | "contrast-switch-light-color": #fff, 33 | "global-font-file-formats": ("woff2", "woff"), 34 | "modular-scale-base": 1em, 35 | "modular-scale-ratio": $major-third, 36 | "rails-asset-pipeline": false, 37 | ); 38 | 39 | /// Global Bourbon settings. 40 | /// 41 | /// @name Settings 42 | /// 43 | /// @type map 44 | /// 45 | /// @property {color} contrast-switch-dark-color [#000] 46 | /// Global dark color for the `contrast-switch` function. 47 | /// 48 | /// @property {color} contrast-switch-light-color [#fff] 49 | /// Global light color for the `contrast-switch` function. 50 | /// 51 | /// @property {list} global-font-file-formats [("woff2", "woff")] 52 | /// Global font file formats for the `font-face` mixin. 53 | /// 54 | /// @property {number (with unit)} modular-scale-base [1em] 55 | /// Global base value for the `modular-scale` function. 56 | /// 57 | /// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)] 58 | /// Global base ratio for the `modular-scale` function. 59 | /// 60 | /// @property {boolean} rails-asset-pipeline [false] 61 | /// Set this to `true` when using the Rails Asset Pipeline and Bourbon will 62 | /// write asset paths using 63 | /// [sass-rails’ asset helpers](https://github.com/rails/sass-rails#asset-helpers). 64 | /// 65 | /// @example scss 66 | /// $bourbon: ( 67 | /// "contrast-switch-dark-color": #000, 68 | /// "contrast-switch-light-color": #fff, 69 | /// "global-font-file-formats": ("woff2", "woff"), 70 | /// "modular-scale-base": 1em, 71 | /// "modular-scale-ratio": $major-third, 72 | /// "rails-asset-pipeline": false, 73 | /// ); 74 | 75 | $bourbon: () !default; 76 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_assign-inputs.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Append pseudo-classes to a selector(s). 4 | /// 5 | /// @argument {list | string} $inputs 6 | /// A selector, or list of selectors, to apply the pseudo-class to. 7 | /// 8 | /// @argument {pseudo-class} $pseudo [null] 9 | /// The pseudo-class to be appended. 10 | /// 11 | /// @return {list} 12 | /// 13 | /// @access private 14 | 15 | @function _assign-inputs( 16 | $inputs, 17 | $pseudo: null 18 | ) { 19 | $list: (); 20 | 21 | @each $input in $inputs { 22 | $input: unquote($input); 23 | $input: if($pseudo, $input + ":" + $pseudo, $input); 24 | $list: append($list, $input, comma); 25 | } 26 | 27 | @return $list; 28 | } 29 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_compact-shorthand.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Transforms shorthand to its shortest possible form. 4 | /// 5 | /// @argument {list} $values 6 | /// List of directional values. 7 | /// 8 | /// @example scss 9 | /// $values: _compact-shorthand(10px 20px 10px 20px); 10 | /// 11 | /// // Output 12 | /// $values: 10px 20px; 13 | /// 14 | /// @return {list} 15 | /// 16 | /// @access private 17 | 18 | @function _compact-shorthand($values) { 19 | $output: null; 20 | 21 | $a: nth($values, 1); 22 | $b: if(length($values) < 2, $a, nth($values, 2)); 23 | $c: if(length($values) < 3, $a, nth($values, 3)); 24 | $d: if(length($values) < 2, $a, nth($values, if(length($values) < 4, 2, 4))); 25 | 26 | @if $a == 0 { $a: 0; } 27 | @if $b == 0 { $b: 0; } 28 | @if $c == 0 { $c: 0; } 29 | @if $d == 0 { $d: 0; } 30 | 31 | @if $a == $b and $a == $c and $a == $d { 32 | $output: $a; 33 | } @else if $a == $c and $b == $d { 34 | $output: $a $b; 35 | } @else if $b == $d { 36 | $output: $a $b $c; 37 | } @else { 38 | $output: $a $b $c $d; 39 | } 40 | 41 | @return $output; 42 | } 43 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_contrast-ratio.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Programatically determines the contrast ratio between two colors. 4 | /// 5 | /// Note that the alpha channel is ignored. 6 | /// 7 | /// @link https://goo.gl/54htLV 8 | /// 9 | /// @argument {color (hex)} $color-1 10 | /// 11 | /// @argument {color (hex)} $color-2 12 | /// 13 | /// @return {number (1-21)} 14 | /// 15 | /// @example scss 16 | /// _contrast-ratio(black, white) 17 | /// 18 | /// @require {function} _lightness 19 | /// 20 | /// @access private 21 | 22 | @function _contrast-ratio($color-1, $color-2) { 23 | $-local-lightness-1: _lightness($color-1) + 0.05; 24 | $-local-lightness-2: _lightness($color-2) + 0.05; 25 | 26 | @if $-local-lightness-1 > $-local-lightness-2 { 27 | @return $-local-lightness-1 / $-local-lightness-2; 28 | } @else { 29 | @return $-local-lightness-2 / $-local-lightness-1; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_directional-property.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Builds directional properties by parsing CSS shorthand values. For example, 4 | /// a value of `10px null` will output top and bottom directional properties, 5 | /// but the `null` skips left and right from being output. 6 | /// 7 | /// @argument {string} $property 8 | /// Base property. 9 | /// 10 | /// @argument {string} $suffix 11 | /// Suffix to append. Use `null` to omit. 12 | /// 13 | /// @argument {list} $values 14 | /// List of values to set for the property. 15 | /// 16 | /// @example scss 17 | /// .element { 18 | /// @include _directional-property(border, width, null 5px); 19 | /// } 20 | /// 21 | /// // CSS Output 22 | /// .element { 23 | /// border-right-width: 5px; 24 | /// border-left-width: 5px; 25 | /// } 26 | /// 27 | /// @require {function} _compact-shorthand 28 | /// 29 | /// @require {function} _contains-falsy 30 | /// 31 | /// @access private 32 | 33 | @mixin _directional-property( 34 | $property, 35 | $suffix, 36 | $values 37 | ) { 38 | $top: $property + "-top" + if($suffix, "-#{$suffix}", ""); 39 | $bottom: $property + "-bottom" + if($suffix, "-#{$suffix}", ""); 40 | $left: $property + "-left" + if($suffix, "-#{$suffix}", ""); 41 | $right: $property + "-right" + if($suffix, "-#{$suffix}", ""); 42 | $all: $property + if($suffix, "-#{$suffix}", ""); 43 | 44 | $values: _compact-shorthand($values); 45 | 46 | @if _contains-falsy($values) { 47 | @if nth($values, 1) { #{$top}: nth($values, 1); } 48 | 49 | @if length($values) == 1 { 50 | @if nth($values, 1) { #{$right}: nth($values, 1); } 51 | } @else { 52 | @if nth($values, 2) { #{$right}: nth($values, 2); } 53 | } 54 | 55 | @if length($values) == 2 { 56 | @if nth($values, 1) { #{$bottom}: nth($values, 1); } 57 | @if nth($values, 2) { #{$left}: nth($values, 2); } 58 | } @else if length($values) == 3 { 59 | @if nth($values, 3) { #{$bottom}: nth($values, 3); } 60 | @if nth($values, 2) { #{$left}: nth($values, 2); } 61 | } @else if length($values) == 4 { 62 | @if nth($values, 3) { #{$bottom}: nth($values, 3); } 63 | @if nth($values, 4) { #{$left}: nth($values, 4); } 64 | } 65 | } @else { 66 | #{$all}: $values; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_fetch-bourbon-setting.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Return a Bourbon setting. 4 | /// 5 | /// @argument {string} $setting 6 | /// 7 | /// @return {boolean | color | list | number | string} 8 | /// 9 | /// @example scss 10 | /// _fetch-bourbon-setting(rails-asset-pipeline) 11 | /// 12 | /// @access private 13 | 14 | @function _fetch-bourbon-setting($setting) { 15 | @return map-get(map-merge($_bourbon-defaults, $bourbon), $setting); 16 | } 17 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_font-source-declaration.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Builds the `src` list for an `@font-face` declaration. 4 | /// 5 | /// @link https://goo.gl/Ru1bKP 6 | /// 7 | /// @argument {string} $font-family 8 | /// 9 | /// @argument {string} $file-path 10 | /// 11 | /// @argument {boolean} $asset-pipeline 12 | /// 13 | /// @argument {list} $file-formats 14 | /// 15 | /// @return {list} 16 | /// 17 | /// @require {function} _contains 18 | /// 19 | /// @access private 20 | 21 | @function _font-source-declaration( 22 | $font-family, 23 | $file-path, 24 | $asset-pipeline, 25 | $file-formats 26 | ) { 27 | $src: (); 28 | 29 | $formats-map: ( 30 | "woff2": "#{$file-path}.woff2" format("woff2"), 31 | "woff": "#{$file-path}.woff" format("woff"), 32 | ); 33 | 34 | @each $format in $file-formats { 35 | @if _contains(map-keys($formats-map), $format) { 36 | $value: map-get($formats-map, $format); 37 | $file-path: nth($value, 1); 38 | $font-format: nth($value, 2); 39 | 40 | @if $asset-pipeline == true { 41 | $src: append($src, font-url($file-path) $font-format, comma); 42 | } @else { 43 | $src: append($src, url($file-path) $font-format, comma); 44 | } 45 | } @else { 46 | @error "`#{$file-formats}` contains an unsupported font file format. " + 47 | "Must be `woff` and/or `woff2`."; 48 | } 49 | } 50 | 51 | @return $src; 52 | } 53 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_gamma.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Performs gamma correction on a single color channel. 4 | /// 5 | /// Note that the calculation is approximate if a `pow()` is not available. 6 | /// 7 | /// @argument {number (0-1)} $channel 8 | /// 9 | /// @return {number (0-1)} 10 | /// 11 | /// @access private 12 | 13 | @function _gamma($channel) { 14 | @if $channel < 0.03928 { 15 | @return $channel / 12.92; 16 | } @else { 17 | $c: ($channel + 0.055) / 1.055; 18 | @if function-exists("pow") { 19 | @return pow($c, 2.4); 20 | } @else { 21 | @return 0.56 * $c * $c * $c + 0.44 * $c * $c; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_lightness.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Programatically determines the lightness of a color. 4 | /// 5 | /// @argument {color (hex)} $hex-color 6 | /// 7 | /// @return {number (0-1)} 8 | /// 9 | /// @example scss 10 | /// _lightness($color) 11 | /// 12 | /// @access private 13 | 14 | @function _lightness($hex-color) { 15 | $-local-red-raw: red(rgba($hex-color, 1)); 16 | $-local-green-raw: green(rgba($hex-color, 1)); 17 | $-local-blue-raw: blue(rgba($hex-color, 1)); 18 | 19 | $-local-red: _gamma($-local-red-raw / 255); 20 | $-local-green: _gamma($-local-green-raw / 255); 21 | $-local-blue: _gamma($-local-blue-raw / 255); 22 | 23 | @return $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722; 24 | } 25 | -------------------------------------------------------------------------------- /core/bourbon/utilities/_unpack-shorthand.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Transforms shorthand that can range from 1-to-4 values to be 4 values. 4 | /// 5 | /// @argument {list} $shorthand 6 | /// 7 | /// @example scss 8 | /// .element { 9 | /// margin: _unpack-shorthand(1em 2em); 10 | /// } 11 | /// 12 | /// // CSS Output 13 | /// .element { 14 | /// margin: 1em 2em 1em 2em; 15 | /// } 16 | /// 17 | /// @access private 18 | 19 | @function _unpack-shorthand($shorthand) { 20 | @if length($shorthand) == 1 { 21 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 22 | } @else if length($shorthand) == 2 { 23 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 24 | } @else if length($shorthand) == 3 { 25 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 26 | } @else { 27 | @return $shorthand; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /core/bourbon/validators/_contains-falsy.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list does not contain any values. 4 | /// 5 | /// @argument {list} $list 6 | /// The list to check against. 7 | /// 8 | /// @return {boolean} 9 | /// 10 | /// @access private 11 | 12 | @function _contains-falsy($list) { 13 | @each $item in $list { 14 | @if not $item { 15 | @return true; 16 | } 17 | } 18 | 19 | @return false; 20 | } 21 | -------------------------------------------------------------------------------- /core/bourbon/validators/_contains.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list contains a value(s). 4 | /// 5 | /// @argument {list} $list 6 | /// The list to check against. 7 | /// 8 | /// @argument {list} $values 9 | /// A single value or list of values to check for. 10 | /// 11 | /// @return {boolean} 12 | /// 13 | /// @access private 14 | 15 | @function _contains( 16 | $list, 17 | $values... 18 | ) { 19 | @each $value in $values { 20 | @if type-of(index($list, $value)) != "number" { 21 | @return false; 22 | } 23 | } 24 | 25 | @return true; 26 | } 27 | -------------------------------------------------------------------------------- /core/bourbon/validators/_is-color.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS color. 4 | /// 5 | /// @argument {string} $color 6 | /// 7 | /// @return {boolean} 8 | /// 9 | /// @access private 10 | 11 | @function _is-color($color) { 12 | @return (type-of($color) == color) or ($color == "currentColor"); 13 | } 14 | -------------------------------------------------------------------------------- /core/bourbon/validators/_is-length.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS length. 4 | /// 5 | /// @argument {string} $value 6 | /// 7 | /// @return {boolean} 8 | /// 9 | /// @access private 10 | 11 | @function _is-length($value) { 12 | @return type-of($value) != "null" 13 | and ( 14 | str-slice($value + "", 1, 4) == "calc" 15 | or str-slice($value + "", 1, 3) == "var" 16 | or str-slice($value + "", 1, 3) == "env" 17 | or index(auto inherit initial 0, $value) 18 | or (type-of($value) == "number" and not(unitless($value))) 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /core/bourbon/validators/_is-number.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid number. 4 | /// 5 | /// @argument {number} $value 6 | /// 7 | /// @require {function} _contains 8 | /// 9 | /// @return {boolean} 10 | /// 11 | /// @access private 12 | 13 | @function _is-number($value) { 14 | @return _contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value); 15 | } 16 | -------------------------------------------------------------------------------- /core/bourbon/validators/_is-size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS size. 4 | /// 5 | /// @argument {string} $value 6 | /// 7 | /// @return {boolean} 8 | /// 9 | /// @require {function} _contains 10 | /// 11 | /// @require {function} _is-length 12 | /// 13 | /// @access private 14 | 15 | @function _is-size($value) { 16 | @return _is-length($value) 17 | or _contains("fill" "fit-content" "min-content" "max-content", $value); 18 | } 19 | -------------------------------------------------------------------------------- /eyeglass-exports.js: -------------------------------------------------------------------------------- 1 | var bourbon = require("./index"); 2 | 3 | module.exports = function(eyeglass, sass) { 4 | return { 5 | sassDir: bourbon.includePaths[0] 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /features/install.feature: -------------------------------------------------------------------------------- 1 | Feature: Install bourbon files 2 | 3 | Scenario: Bourbon generates a new bourbon installation 4 | When I run `bundle exec bourbon install` 5 | Then the sass directories should have been generated 6 | And the following directories should exist: 7 | | bourbon | 8 | And the master bourbon partial should have been generated 9 | And the output should contain "Bourbon files installed to bourbon/" 10 | 11 | Scenario: Generating does not overwrite an existing bourbon directory 12 | Given bourbon is already installed 13 | When I run `bundle exec bourbon install` 14 | Then the output should contain "Bourbon files already installed, doing nothing." 15 | 16 | Scenario: Install Bourbon into a custom path 17 | When I run `bundle exec bourbon install --path=custom_path` 18 | Then the sass directories with "custom_path" prefix should have been generated 19 | And the following directories should exist: 20 | | custom_path/bourbon | 21 | And the master bourbon partial should have been generated within "custom_path" directory 22 | And the output should contain "Bourbon files installed to custom_path/bourbon/" 23 | 24 | Scenario: Forcing install of bourbon 25 | Given bourbon is already installed 26 | When I run `bundle exec bourbon install --force` 27 | Then the output from "bundle exec bourbon install --force" should contain "Bourbon files installed to bourbon/" 28 | And the output should not contain "Bourbon files already installed, doing nothing." 29 | -------------------------------------------------------------------------------- /features/step_definitions/bourbon_steps.rb: -------------------------------------------------------------------------------- 1 | Given /^bourbon is already installed$/ do 2 | install_bourbon 3 | end 4 | 5 | Given /^I install bourbon to "([^"]*)"$/ do |path| 6 | end 7 | 8 | Then /^the sass directories(?: with "([^"]+)" prefix)? should have been generated$/ do |prefix| 9 | sass_directories = [ 10 | "bourbon/helpers", 11 | "bourbon/library", 12 | "bourbon/settings", 13 | "bourbon/utilities", 14 | "bourbon/validators", 15 | ] 16 | sass_directories.map!{ |directory| bourbon_path(prefix, directory) } 17 | sass_directories.each do |sass_directory| 18 | expect(sass_directory).to be_an_existing_directory 19 | end 20 | end 21 | 22 | Then /^the master bourbon partial should have been generated(?: within "([^"]+)" directory)?$/ do |prefix| 23 | expect(bourbon_path(prefix, "_bourbon.scss")).to be_an_existing_file 24 | end 25 | 26 | Then /^bourbon should not have been generated$/ do 27 | expect("bourbon").not_to be_an_existing_directory 28 | end 29 | 30 | Then /^the output should contain the current version of Bourbon$/ do 31 | expect(last_command_started).to have_output "Bourbon #{Bourbon::VERSION}" 32 | end 33 | -------------------------------------------------------------------------------- /features/support/bourbon_support.rb: -------------------------------------------------------------------------------- 1 | module BourbonSupport 2 | def install_bourbon(path = nil) 3 | if path 4 | run_simple("bundle exec bourbon install --path '#{path}'") 5 | else 6 | run_simple("bundle exec bourbon install") 7 | end 8 | end 9 | 10 | def bourbon_path(prefix, path) 11 | if prefix 12 | File.join(prefix, 'bourbon', path) 13 | else 14 | File.join('bourbon', path) 15 | end 16 | end 17 | end 18 | 19 | World(BourbonSupport) 20 | -------------------------------------------------------------------------------- /features/support/env.rb: -------------------------------------------------------------------------------- 1 | require "aruba/cucumber" 2 | -------------------------------------------------------------------------------- /features/update.feature: -------------------------------------------------------------------------------- 1 | Feature: Update bourbon files 2 | 3 | Scenario: Updating updates an existing bourbon install 4 | Given bourbon is already installed 5 | When I write to "bourbon/_bourbon.scss" with: 6 | """ 7 | foobar 8 | """ 9 | And I run `bundle exec bourbon update` 10 | Then the output should contain "Bourbon files updated." 11 | And the file "bourbon/_bourbon.scss" should not contain "foobar" 12 | 13 | Scenario: Updating with a --path option 14 | Given I install bourbon to "custom_path" 15 | When I write to "custom_path/bourbon/_bourbon.scss" with: 16 | """ 17 | foobar 18 | """ 19 | And I run `bundle exec bourbon update` 20 | Then the output should contain "No existing bourbon installation. Doing nothing." 21 | 22 | When I run `bundle exec bourbon update --path custom_path` 23 | Then the output should contain "Bourbon files updated." 24 | And the file "custom_path/bourbon/_bourbon.scss" should not contain "foobar" 25 | 26 | Scenario: Updating does not generate a new bourbon install 27 | And I run `bundle exec bourbon update` 28 | Then bourbon should not have been generated 29 | And the output should contain "No existing bourbon installation. Doing nothing." 30 | -------------------------------------------------------------------------------- /features/version.feature: -------------------------------------------------------------------------------- 1 | Feature: Show version 2 | Scenario: Viewing version 3 | When I successfully run `bundle exec bourbon --version` 4 | Then the output should contain the current version of Bourbon 5 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | 3 | module.exports = { 4 | includePaths: [ 5 | path.join(__dirname, "core") 6 | ] 7 | }; 8 | -------------------------------------------------------------------------------- /lib/bourbon.rb: -------------------------------------------------------------------------------- 1 | require "bourbon/generator" 2 | 3 | module Bourbon 4 | if defined?(Rails) && defined?(Rails::Engine) 5 | class Engine < ::Rails::Engine 6 | initializer "bourbon.paths", group: :all do |app| 7 | app.config.assets.paths << File.expand_path("../core", __dir__) 8 | end 9 | end 10 | else 11 | begin 12 | require "sass" 13 | Sass.load_paths << File.expand_path("../core", __dir__) 14 | rescue LoadError 15 | end 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /lib/bourbon/generator.rb: -------------------------------------------------------------------------------- 1 | require "bourbon/version" 2 | require "fileutils" 3 | require "thor" 4 | require "pathname" 5 | 6 | module Bourbon 7 | class Generator < Thor 8 | map ["-v", "--version"] => :version 9 | 10 | desc "install", "Install Bourbon into your project" 11 | method_options :path => :string, :force => :boolean 12 | def install 13 | if bourbon_files_already_exist? && !options[:force] 14 | puts "Bourbon files already installed, doing nothing." 15 | else 16 | install_files 17 | puts "Bourbon files installed to #{install_path}/" 18 | end 19 | end 20 | 21 | desc "update", "Update Bourbon" 22 | method_options :path => :string 23 | def update 24 | if bourbon_files_already_exist? 25 | remove_bourbon_directory 26 | install_files 27 | puts "Bourbon files updated." 28 | else 29 | puts "No existing bourbon installation. Doing nothing." 30 | end 31 | end 32 | 33 | desc "version", "Show Bourbon version" 34 | def version 35 | say "Bourbon #{Bourbon::VERSION}" 36 | end 37 | 38 | private 39 | 40 | def bourbon_files_already_exist? 41 | install_path.exist? 42 | end 43 | 44 | def install_path 45 | @install_path ||= if options[:path] 46 | Pathname.new(File.join(options[:path], "bourbon")) 47 | else 48 | Pathname.new("bourbon") 49 | end 50 | end 51 | 52 | def install_files 53 | make_install_directory 54 | copy_in_scss_files 55 | end 56 | 57 | def remove_bourbon_directory 58 | FileUtils.rm_rf(install_path) 59 | end 60 | 61 | def make_install_directory 62 | FileUtils.mkdir_p(install_path) 63 | end 64 | 65 | def copy_in_scss_files 66 | FileUtils.cp_r(all_stylesheets, install_path) 67 | end 68 | 69 | def all_stylesheets 70 | Dir["#{stylesheets_directory}/*"] 71 | end 72 | 73 | def stylesheets_directory 74 | File.join(top_level_directory, "core") 75 | end 76 | 77 | def top_level_directory 78 | File.dirname(File.dirname(File.dirname(__FILE__))) 79 | end 80 | end 81 | end 82 | -------------------------------------------------------------------------------- /lib/bourbon/version.rb: -------------------------------------------------------------------------------- 1 | module Bourbon 2 | VERSION = "7.3.0".freeze 3 | end 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": { 3 | "name": "thoughtbot", 4 | "url": "http://thoughtbot.com" 5 | }, 6 | "bugs": { 7 | "url": "https://github.com/thoughtbot/bourbon/issues" 8 | }, 9 | "description": "A lightweight Sass tool set.", 10 | "devDependencies": { 11 | "@thoughtbot/stylelint-config": "1.1.0", 12 | "sassdoc": "^2.5.0", 13 | "stylelint": "10.1.0" 14 | }, 15 | "eyeglass": { 16 | "needs": "*", 17 | "exports": "eyeglass-exports.js" 18 | }, 19 | "homepage": "https://www.bourbon.io/", 20 | "keywords": [ 21 | "css", 22 | "eyeglass-module", 23 | "mixins", 24 | "sass", 25 | "scss" 26 | ], 27 | "license": "MIT", 28 | "main": "index.js", 29 | "style": "core/_bourbon.scss", 30 | "name": "bourbon", 31 | "repository": { 32 | "type": "git", 33 | "url": "https://github.com/thoughtbot/bourbon.git" 34 | }, 35 | "scripts": { 36 | "sassdoc": "npx sassdoc core/ --parse --verbose --strict", 37 | "stylelint": "npx stylelint 'core/**/*.scss'", 38 | "test": "bundle exec rake" 39 | }, 40 | "version": "7.3.0" 41 | } 42 | -------------------------------------------------------------------------------- /spec/bourbon/library/border_color_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "border-color" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/border-color") 6 | end 7 | 8 | context "called with one color" do 9 | it "applies same color to all sides" do 10 | rule = "border-color: #f00" 11 | 12 | expect(".border-color-all").to have_rule(rule) 13 | end 14 | end 15 | 16 | context "called with two colors" do 17 | it "applies to alternating sides" do 18 | rule = "border-color: #0f0 #00f" 19 | 20 | expect(".border-color-alternate").to have_rule(rule) 21 | end 22 | end 23 | 24 | context "called with three colors" do 25 | it "applies second color to left and right" do 26 | rule = "border-color: #f00 #0f0 #00f" 27 | 28 | expect(".border-color-implied-left").to have_rule(rule) 29 | end 30 | end 31 | 32 | context "called with four colors" do 33 | it "applies different colors to all sides" do 34 | rule = "border-color: #00f #0f0 #f00 #ff0" 35 | 36 | expect(".border-color-explicit").to have_rule(rule) 37 | end 38 | end 39 | 40 | context "called with null values" do 41 | it "writes rules for other three" do 42 | ruleset = "border-top-color: #0f0; " + 43 | "border-right-color: #ff0; " + 44 | "border-left-color: #00f;" 45 | bad_rule = "border-bottom-color: null;" 46 | 47 | expect(".border-color-false-third").to have_ruleset(ruleset) 48 | expect(".border-color-false-third").to_not have_rule(bad_rule) 49 | end 50 | end 51 | end 52 | -------------------------------------------------------------------------------- /spec/bourbon/library/border_radius_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "border-radius" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/border-radius") 6 | end 7 | 8 | context "called with one argument" do 9 | it "applies to correct sides" do 10 | top = "border-top-left-radius: 1em; " + 11 | "border-top-right-radius: 1em;" 12 | left = "border-bottom-left-radius: 2em; " + 13 | "border-top-left-radius: 2em;" 14 | right = "border-bottom-right-radius: 3em; " + 15 | "border-top-right-radius: 3em;" 16 | bottom = "border-bottom-left-radius: 4em; " + 17 | "border-bottom-right-radius: 4em;" 18 | 19 | expect(".border-top-radius").to have_ruleset(top) 20 | expect(".border-left-radius").to have_ruleset(left) 21 | expect(".border-right-radius").to have_ruleset(right) 22 | expect(".border-bottom-radius").to have_ruleset(bottom) 23 | end 24 | end 25 | end 26 | -------------------------------------------------------------------------------- /spec/bourbon/library/border_style_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "border-style" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/border-style") 6 | end 7 | 8 | context "called with one style" do 9 | it "applies same style to all sides" do 10 | rule = "border-style: solid" 11 | 12 | expect(".border-style-all").to have_rule(rule) 13 | end 14 | end 15 | 16 | context "called with two styles" do 17 | it "applies to alternating sides" do 18 | rule = "border-style: dotted dashed" 19 | 20 | expect(".border-style-alternate").to have_rule(rule) 21 | end 22 | end 23 | 24 | context "called with three styles" do 25 | it "applies second style to left and right" do 26 | rule = "border-style: dashed double solid" 27 | 28 | expect(".border-style-implied-left").to have_rule(rule) 29 | end 30 | end 31 | 32 | context "called with four styles" do 33 | it "applies different styles to all sides" do 34 | rule = "border-style: dotted groove ridge none" 35 | 36 | expect(".border-style-explicit").to have_rule(rule) 37 | end 38 | end 39 | 40 | context "called with null values" do 41 | it "writes rules for other three" do 42 | ruleset = "border-top-style: inset; " + 43 | "border-right-style: none; " + 44 | "border-left-style: double;" 45 | bad_rule = "border-bottom-style: null;" 46 | 47 | expect(".border-style-false-third").to have_ruleset(ruleset) 48 | expect(".border-style-false-third").to_not have_rule(bad_rule) 49 | end 50 | end 51 | end 52 | -------------------------------------------------------------------------------- /spec/bourbon/library/border_width_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "border-width" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/border-width") 6 | end 7 | 8 | context "called with one color" do 9 | it "applies same width to all sides" do 10 | rule = "border-width: 1px" 11 | 12 | expect(".border-width-all").to have_rule(rule) 13 | end 14 | end 15 | 16 | context "called with two widths" do 17 | it "applies to alternating sides" do 18 | rule = "border-width: 2px 3px" 19 | 20 | expect(".border-width-alternate").to have_rule(rule) 21 | end 22 | end 23 | 24 | context "called with three widths" do 25 | it "applies second width to left and right" do 26 | rule = "border-width: 4px 5px 6px" 27 | 28 | expect(".border-width-implied-left").to have_rule(rule) 29 | end 30 | end 31 | 32 | context "called with four widths" do 33 | it "applies different widths to all sides" do 34 | rule = "border-width: 7px 8px 9px 10px" 35 | 36 | expect(".border-width-explicit").to have_rule(rule) 37 | end 38 | end 39 | 40 | context "called with null values" do 41 | it "writes rules for other three" do 42 | ruleset = "border-top-width: 11px; " + 43 | "border-right-width: 12px; " + 44 | "border-left-width: 13px;" 45 | bad_rule = "border-bottom-width: null;" 46 | 47 | expect(".border-width-false-third").to have_ruleset(ruleset) 48 | expect(".border-width-false-third").to_not have_rule(bad_rule) 49 | end 50 | end 51 | end 52 | -------------------------------------------------------------------------------- /spec/bourbon/library/buttons_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "buttons" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/buttons") 6 | 7 | @buttons_list = %w( 8 | button 9 | [type='button'] 10 | [type='reset'] 11 | [type='submit'] 12 | ) 13 | end 14 | 15 | context "expands plain buttons" do 16 | it "finds selectors" do 17 | list = @buttons_list.join(", ") 18 | ruleset = "content: #{list};" 19 | 20 | expect(".all-buttons").to have_ruleset(ruleset) 21 | end 22 | end 23 | 24 | context "expands active buttons" do 25 | it "finds selectors" do 26 | list = @buttons_list.map { |input| "#{input}:active" } 27 | list = list.join(", ") 28 | ruleset = "content: #{list};" 29 | 30 | expect(".all-buttons-active").to have_ruleset(ruleset) 31 | end 32 | end 33 | 34 | context "expands focus buttons" do 35 | it "finds selectors" do 36 | list = @buttons_list.map { |input| "#{input}:focus" } 37 | list = list.join(", ") 38 | ruleset = "content: #{list};" 39 | 40 | expect(".all-buttons-focus").to have_ruleset(ruleset) 41 | end 42 | end 43 | 44 | context "expands hover buttons" do 45 | it "finds selectors" do 46 | list = @buttons_list.map { |input| "#{input}:hover" } 47 | list = list.join(", ") 48 | ruleset = "content: #{list};" 49 | 50 | expect(".all-buttons-hover").to have_ruleset(ruleset) 51 | end 52 | end 53 | end 54 | -------------------------------------------------------------------------------- /spec/bourbon/library/clearfix_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "clearfix" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/clearfix") 6 | end 7 | 8 | context "called on element" do 9 | it "adds clearfix" do 10 | input = ".clearfix::after" 11 | ruleset = "clear: both; " + 12 | 'content: ""; ' + 13 | "display: block;" 14 | 15 | expect(input).to have_ruleset(ruleset) 16 | end 17 | end 18 | end 19 | -------------------------------------------------------------------------------- /spec/bourbon/library/contrast_switch_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "contrast-switch" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/contrast-switch") 6 | end 7 | 8 | context "called with a light base color" do 9 | it "outputs the dark color" do 10 | rule = "color: #000;" 11 | 12 | expect(".contrast-switch-light-base").to have_ruleset(rule) 13 | end 14 | end 15 | 16 | context "called with a dark base color" do 17 | it "outputs the light color" do 18 | rule = "color: #eee;" 19 | 20 | expect(".contrast-switch-dark-base").to have_ruleset(rule) 21 | end 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /spec/bourbon/library/ellipsis_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "ellipsis" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/ellipsis") 6 | end 7 | 8 | context "called on element" do 9 | it "adds ellipsis" do 10 | ruleset = "display: inline-block; " + 11 | "max-width: 100%; " + 12 | "overflow: hidden; " + 13 | "text-overflow: ellipsis; " + 14 | "white-space: nowrap; " + 15 | "word-wrap: normal;" 16 | 17 | expect(".ellipsis").to have_ruleset(ruleset) 18 | end 19 | end 20 | end 21 | -------------------------------------------------------------------------------- /spec/bourbon/library/font_face_spec_1.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "font-face" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/font-face-1") 6 | end 7 | 8 | context "called with defaults" do 9 | it "outputs defaults" do 10 | ruleset = 'font-family: "source-sans-pro"; ' + 11 | 'src: url("/fonts/source-sans-pro/source-sans-pro-regular.woff2") format("woff2"), url("/fonts/source-sans-pro/source-sans-pro-regular.woff") format("woff");' 12 | 13 | expect("@font-face").to have_ruleset(ruleset) 14 | end 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/bourbon/library/font_face_spec_2.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "font-face" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/font-face-5") 6 | end 7 | 8 | context "called with additional CSS rules" do 9 | it "outputs defaults with additional content" do 10 | ruleset = 'font-family: "calibre"; ' + 11 | 'src: url("fonts/calibre.woff2") format("woff2"), ' + 12 | 'url("fonts/calibre.woff") format("woff"); ' + 13 | "font-style: normal;" + 14 | "font-weight: 600;" + 15 | "unicode-range: U+26;" 16 | 17 | expect("@font-face").to have_ruleset(ruleset) 18 | end 19 | end 20 | end 21 | -------------------------------------------------------------------------------- /spec/bourbon/library/font_face_spec_3.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "font-face" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/font-face-3") 6 | end 7 | 8 | context "called with defaults" do 9 | it "outputs defaults" do 10 | ruleset = 'font-family: "pitch";' + 11 | 'src: font-url("/fonts/pitch.woff2") format("woff2");' 12 | 13 | expect("@font-face").to have_ruleset(ruleset) 14 | end 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/bourbon/library/font_stacks_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "font-stacks" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/font-stacks") 6 | end 7 | 8 | context "stacks used in variable" do 9 | it "output stacks" do 10 | helvetica = '"Helvetica Neue", "Helvetica", "Arial", sans-serif' 11 | lucida_grande = '"Lucida Grande", "Lucida Sans Unicode", ' + 12 | '"Geneva", "Verdana", sans-serif' 13 | verdana = '"Verdana", "Geneva", sans-serif' 14 | garamond = '"Garamond", "Baskerville", "Baskerville Old Face", ' + 15 | '"Hoefler Text", "Times New Roman", serif' 16 | georgia = '"Georgia", "Times", "Times New Roman", serif' 17 | hoefler_text = '"Hoefler Text", "Baskerville Old Face", ' + 18 | '"Garamond", "Times New Roman", serif' 19 | consolas = '"Consolas", "monaco", monospace' 20 | courier_new = '"Courier New", "Courier", "Lucida Sans Typewriter", ' + 21 | '"Lucida Typewriter", monospace' 22 | monaco = '"Monaco", "Consolas", "Lucida Console", monospace' 23 | 24 | system = 'system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", ' + 25 | '"Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", ' + 26 | '"Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", ' + 27 | '"Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", ' + 28 | '"Century Gothic", "Liberation Sans", sans-serif' 29 | 30 | expect(".helvetica").to have_value(helvetica) 31 | expect(".lucida-grande").to have_value(lucida_grande) 32 | expect(".verdana").to have_value(verdana) 33 | expect(".garamond").to have_value(garamond) 34 | expect(".georgia").to have_value(georgia) 35 | expect(".hoefler-text").to have_value(hoefler_text) 36 | expect(".consolas").to have_value(consolas) 37 | expect(".courier-new").to have_value(courier_new) 38 | expect(".monaco").to have_value(monaco) 39 | expect(".system").to have_value(system) 40 | end 41 | end 42 | end 43 | -------------------------------------------------------------------------------- /spec/bourbon/library/hide_text_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "hide-text" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/hide-text") 6 | end 7 | 8 | context "called on element" do 9 | it "adds hide-text" do 10 | ruleset = "overflow: hidden; " + 11 | "text-indent: 101%; " + 12 | "white-space: nowrap;" 13 | 14 | expect(".hide-text").to have_ruleset(ruleset) 15 | end 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /spec/bourbon/library/hide_visually_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "hide-visually" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/hide-visually") 6 | end 7 | 8 | context "called on element" do 9 | it "adds properties to hide the element" do 10 | ruleset = "border: 0; " + 11 | "clip: rect(1px, 1px, 1px, 1px); " + 12 | "clip-path: inset(100%); " + 13 | "height: 1px; " + 14 | "overflow: hidden; " + 15 | "padding: 0; " + 16 | "position: absolute; " + 17 | "white-space: nowrap; " + 18 | "width: 1px;" 19 | 20 | expect(".hide-visually").to have_ruleset(ruleset) 21 | end 22 | end 23 | 24 | context "called with unhide argument" do 25 | it "adds properties to reverse the hiding of the element" do 26 | ruleset = "clip: auto; " + 27 | "clip-path: none; " + 28 | "height: auto; " + 29 | "overflow: visible; " + 30 | "position: static; " + 31 | "white-space: inherit; " + 32 | "width: auto;" 33 | 34 | expect(".hide-visually--unhide").to have_ruleset(ruleset) 35 | end 36 | end 37 | end 38 | -------------------------------------------------------------------------------- /spec/bourbon/library/margin_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "margin" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/margin") 6 | end 7 | 8 | context "called with one size" do 9 | it "applies same width to all sides" do 10 | rule = "margin: 1px" 11 | 12 | expect(".margin-all").to have_rule(rule) 13 | end 14 | end 15 | 16 | context "called with two sizes" do 17 | it "applies to alternating sides" do 18 | rule = "margin: 2px 3px" 19 | 20 | expect(".margin-alternate").to have_rule(rule) 21 | end 22 | end 23 | 24 | context "called with three sizes" do 25 | it "applies second width to left and right" do 26 | rule = "margin: 4px 5px 6px" 27 | 28 | expect(".margin-implied-left").to have_rule(rule) 29 | end 30 | end 31 | 32 | context "called with four sizes" do 33 | it "applies different widths to all sides" do 34 | rule = "margin: 7px 8px 9px 10px" 35 | 36 | expect(".margin-explicit").to have_rule(rule) 37 | end 38 | end 39 | 40 | context "called with null values" do 41 | it "writes rules for other three" do 42 | ruleset = "margin-top: 11px; " + 43 | "margin-right: 12px; " + 44 | "margin-left: 13px;" 45 | bad_rule = "margin-bottom: null;" 46 | 47 | expect(".margin-false-third").to have_ruleset(ruleset) 48 | expect(".margin-false-third").to_not have_rule(bad_rule) 49 | end 50 | end 51 | end 52 | -------------------------------------------------------------------------------- /spec/bourbon/library/modular_scale_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "modular-scale" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/modular-scale") 6 | end 7 | 8 | context "called with arguments (1, $value: 2em)" do 9 | it "outputs double the first value from the default scale" do 10 | expect(".one-base-two").to have_rule("font-size: 2.5em") 11 | end 12 | end 13 | 14 | context "called with arguments (1, $value: 3em)" do 15 | it "outputs triple the first value from the default scale" do 16 | expect(".one-base-three").to have_rule("font-size: 3.75em") 17 | end 18 | end 19 | 20 | context "called with arguments (1, $value: 4em 6em)" do 21 | it "outputs quadruple the first value from the default scale" do 22 | expect(".one-double-value").to have_rule("font-size: 1.024em") 23 | end 24 | end 25 | 26 | context "called with arguments (1, $ratio: $golden-ratio)" do 27 | it "output the first value from the golden ratio scale" do 28 | expect(".one-golden-ratio").to have_rule("font-size: 1.618em") 29 | end 30 | end 31 | 32 | context "called with argument (2)" do 33 | it "outputs the second value from the default scale" do 34 | expect(".two-base-one").to have_rule("font-size: 1.5625em") 35 | end 36 | end 37 | 38 | context "called with arguments (2, $value: 4em 6em)" do 39 | it "outputs sextuple the second value from the default scale" do 40 | expect(".two-double-value").to have_rule("font-size: 3.125em") 41 | end 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /spec/bourbon/library/overflow_wrap_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "overflow-wrap" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/overflow-wrap") 6 | end 7 | 8 | context "called on element" do 9 | it "adds overflow-wrap and word-wrap" do 10 | input = ".overflow-wrap" 11 | ruleset = "word-wrap: break-word; " + 12 | "overflow-wrap: break-word;" 13 | 14 | expect(input).to have_ruleset(ruleset) 15 | end 16 | end 17 | 18 | context "called on element with normal" do 19 | it "sets values as normal" do 20 | input = ".overflow-wrap-normal" 21 | ruleset = "word-wrap: normal; " + 22 | "overflow-wrap: normal;" 23 | 24 | expect(input).to have_ruleset(ruleset) 25 | end 26 | end 27 | end 28 | -------------------------------------------------------------------------------- /spec/bourbon/library/padding_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "padding" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/padding") 6 | end 7 | 8 | context "called with one size" do 9 | it "applies same width to all sides" do 10 | rule = "padding: 1px" 11 | 12 | expect(".padding-all").to have_rule(rule) 13 | end 14 | end 15 | 16 | context "called with two sizes" do 17 | it "applies to alternating sides" do 18 | rule = "padding: 2px 3px" 19 | 20 | expect(".padding-alternate").to have_rule(rule) 21 | end 22 | end 23 | 24 | context "called with three sizes" do 25 | it "applies second width to left and right" do 26 | rule = "padding: 4px 5px 6px" 27 | 28 | expect(".padding-implied-left").to have_rule(rule) 29 | end 30 | end 31 | 32 | context "called with four sizes" do 33 | it "applies different widths to all sides" do 34 | rule = "padding: 7px 8px 9px 10px" 35 | 36 | expect(".padding-explicit").to have_rule(rule) 37 | end 38 | end 39 | 40 | context "called with null values" do 41 | it "writes rules for other three" do 42 | ruleset = "padding-top: 11px; " + 43 | "padding-right: 12px; " + 44 | "padding-left: 13px;" 45 | bad_rule = "padding-bottom: null;" 46 | 47 | expect(".padding-false-third").to have_ruleset(ruleset) 48 | expect(".padding-false-third").to_not have_rule(bad_rule) 49 | end 50 | end 51 | end 52 | -------------------------------------------------------------------------------- /spec/bourbon/library/position_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "position" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/position") 6 | end 7 | 8 | context "called with one size" do 9 | it "applies same width to all sides" do 10 | ruleset = "position: fixed; " + 11 | "top: 1em; " + 12 | "right: 1em; " + 13 | "bottom: 1em; " + 14 | "left: 1em;" 15 | 16 | expect(".position-all").to have_ruleset(ruleset) 17 | end 18 | end 19 | 20 | context "called with two sizes" do 21 | it "applies to alternating sides" do 22 | ruleset = "position: absolute; " + 23 | "top: 2px; " + 24 | "right: 3px; " + 25 | "bottom: 2px; " + 26 | "left: 3px;" 27 | 28 | expect(".position-alternate").to have_ruleset(ruleset) 29 | end 30 | end 31 | 32 | context "called with three sizes" do 33 | it "applies second width to left and right" do 34 | ruleset = "position: relative; " + 35 | "top: 4px; " + 36 | "right: 5px; " + 37 | "bottom: 6px; " + 38 | "left: 5px;" 39 | 40 | expect(".position-implied-left").to have_ruleset(ruleset) 41 | end 42 | end 43 | 44 | context "called with four sizes" do 45 | it "applies different widths to all sides" do 46 | ruleset = "position: fixed; " + 47 | "top: 7px; " + 48 | "right: 8px; " + 49 | "bottom: 9px; " + 50 | "left: 10px;" 51 | 52 | expect(".position-explicit").to have_ruleset(ruleset) 53 | end 54 | end 55 | 56 | context "called with null values" do 57 | it "writes rules for others" do 58 | ruleset = "position: static; " + 59 | "top: 11px; " + 60 | "left: 13px;" 61 | bad_rule = "position-bottom: null; position-right: null;" 62 | 63 | expect(".position-false-third").to have_ruleset(ruleset) 64 | expect(".position-false-third").to_not have_rule(bad_rule) 65 | end 66 | end 67 | end 68 | -------------------------------------------------------------------------------- /spec/bourbon/library/prefixer_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "prefixer" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/prefixer") 6 | end 7 | 8 | context "called with no prefixes" do 9 | it "outputs the spec" do 10 | rule = "appearance: none;" 11 | 12 | expect(".prefix").to have_ruleset(rule) 13 | end 14 | end 15 | 16 | context "called with one prefix" do 17 | it "applies the prefix to the property" do 18 | rule = "-webkit-appearance: none; " + 19 | "appearance: none;" 20 | 21 | expect(".prefix--webkit").to have_ruleset(rule) 22 | end 23 | end 24 | 25 | context "called with multiple prefixes" do 26 | it "applies the prefixes to the property" do 27 | rule = "-moz-appearance: none; " + 28 | "-ms-appearance: none; " + 29 | "appearance: none;" 30 | 31 | expect(".prefix--moz-ms").to have_ruleset(rule) 32 | end 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /spec/bourbon/library/shade_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "shade" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/shade") 6 | end 7 | 8 | context "called on white" do 9 | it "shades white" do 10 | expect(".shade-white").to have_rule("color: #404040") 11 | end 12 | end 13 | 14 | context "called on black" do 15 | it "still returns black" do 16 | expect(".shade-black").to have_rule("color: black") 17 | end 18 | end 19 | 20 | context "called on red" do 21 | it "shades red" do 22 | expect(".shade-red").to have_rule("color: #bf0000") 23 | end 24 | end 25 | 26 | context "called on gray" do 27 | it "shades gray" do 28 | expect(".shade-gray").to have_rule("color: #171717") 29 | end 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /spec/bourbon/library/size_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "size" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/size") 6 | end 7 | 8 | context "called with one size" do 9 | it "applies same width to both height and width" do 10 | rule = "height: 10px; width: 10px;" 11 | 12 | expect(".size-implicit").to have_ruleset(rule) 13 | end 14 | end 15 | 16 | context "called with two sizes" do 17 | it "applies to height and width" do 18 | rule = "height: 2em; width: 1em;" 19 | 20 | expect(".size-both").to have_ruleset(rule) 21 | end 22 | end 23 | 24 | context "called with auto" do 25 | it "applies to auto to height" do 26 | rule = "height: auto; width: 100px;" 27 | 28 | expect(".size-auto").to have_ruleset(rule) 29 | end 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /spec/bourbon/library/strip_unit_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "strip-unit" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/strip-unit") 6 | end 7 | 8 | context "called with px" do 9 | it "strips units" do 10 | expect(".px").to have_rule("width: 10") 11 | end 12 | end 13 | 14 | context "called with em" do 15 | it "strips units" do 16 | expect(".em").to have_rule("width: 2") 17 | end 18 | end 19 | 20 | context "called with rem" do 21 | it "strips units" do 22 | expect(".rem").to have_rule("width: 1.5") 23 | end 24 | end 25 | 26 | context "called with percent" do 27 | it "strips units" do 28 | expect(".percent").to have_rule("width: 20") 29 | end 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /spec/bourbon/library/text_inputs_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "text-inputs" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/text-inputs") 6 | 7 | @inputs_list = %w( 8 | [type='color'] 9 | [type='date'] 10 | [type='datetime'] 11 | [type='datetime-local'] 12 | [type='email'] 13 | [type='month'] 14 | [type='number'] 15 | [type='password'] 16 | [type='search'] 17 | [type='tel'] 18 | [type='text'] 19 | [type='time'] 20 | [type='url'] 21 | [type='week'] 22 | input:not([type]) 23 | textarea 24 | ) 25 | end 26 | 27 | context "expands plain text inputs" do 28 | it "finds selectors" do 29 | list = @inputs_list.join(", ") 30 | ruleset = "content: #{list};" 31 | 32 | expect(".all-text-inputs").to have_ruleset(ruleset) 33 | end 34 | end 35 | 36 | context "expands active text inputs" do 37 | it "finds selectors" do 38 | list = @inputs_list.map { |input| "#{input}:active" } 39 | list = list.join(", ") 40 | ruleset = "content: #{list};" 41 | 42 | expect(".all-text-inputs-active").to have_ruleset(ruleset) 43 | end 44 | end 45 | 46 | context "expands focus text inputs" do 47 | it "finds selectors" do 48 | list = @inputs_list.map { |input| "#{input}:focus" } 49 | list = list.join(", ") 50 | ruleset = "content: #{list};" 51 | 52 | expect(".all-text-inputs-focus").to have_ruleset(ruleset) 53 | end 54 | end 55 | 56 | context "expands hover text inputs" do 57 | it "finds selectors" do 58 | list = @inputs_list.map { |input| "#{input}:hover" } 59 | list = list.join(", ") 60 | ruleset = "content: #{list};" 61 | 62 | expect(".all-text-inputs-hover").to have_ruleset(ruleset) 63 | end 64 | end 65 | 66 | context "expands invalid text inputs" do 67 | it "finds selectors" do 68 | list = @inputs_list.map { |input| "#{input}:invalid" } 69 | list = list.join(", ") 70 | ruleset = "content: #{list};" 71 | 72 | expect(".all-text-inputs-invalid").to have_ruleset(ruleset) 73 | end 74 | end 75 | end 76 | -------------------------------------------------------------------------------- /spec/bourbon/library/tint_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "tint" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/tint") 6 | end 7 | 8 | context "called on white" do 9 | it "still returns white" do 10 | expect(".tint-white").to have_rule("color: white") 11 | end 12 | end 13 | 14 | context "called on black" do 15 | it "tints black" do 16 | expect(".tint-black").to have_rule("color: gray") 17 | end 18 | end 19 | 20 | context "called on red" do 21 | it "tints red" do 22 | expect(".tint-red").to have_rule("color: #ff4040") 23 | end 24 | end 25 | 26 | context "called on gray" do 27 | it "tints gray" do 28 | expect(".tint-gray").to have_rule("color: #c6c6c6") 29 | end 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /spec/bourbon/library/triangle_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "triangle" do 4 | before(:all) do 5 | ParserSupport.parse_file("library/triangle") 6 | end 7 | 8 | context "called with defaults" do 9 | it "outputs the properties" do 10 | ruleset = "border-style: solid; " + 11 | "height: 0; " + 12 | "width: 0; " + 13 | "border-color: transparent transparent #b25c9c; " + 14 | "border-width: 0 1rem 1rem;" 15 | 16 | expect(".triangle--up").to have_ruleset(ruleset) 17 | end 18 | end 19 | 20 | context "called with arguments" do 21 | it "outputs the properties" do 22 | ruleset = "border-style: solid; " + 23 | "height: 0; " + 24 | "width: 0; " + 25 | "border-color: transparent transparent transparent #aaa; " + 26 | "border-width: 6px 0 6px 5px;" 27 | 28 | expect(".triangle--right").to have_ruleset(ruleset) 29 | end 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/assign_inputs_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "assign-inputs" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/assign-inputs") 6 | @text_inputs_list = [ 7 | "[type='password']", 8 | "[type='text']", 9 | "textarea" 10 | ] 11 | end 12 | 13 | context "expands plain text inputs" do 14 | it "finds selectors" do 15 | @text_inputs_list.each do |input| 16 | expect(input).to have_rule("color: #f00") 17 | end 18 | end 19 | end 20 | 21 | context "expands text inputs with pseudo classes" do 22 | it "finds selectors" do 23 | list = @text_inputs_list.dup 24 | list.map! { |input| input + ":active" } 25 | list.each do |input| 26 | expect(input).to have_rule("color: #0f0") 27 | end 28 | end 29 | end 30 | 31 | context "expands text inputs when first in list" do 32 | it "finds selectors" do 33 | list = @text_inputs_list.dup 34 | list.push "select" 35 | list.each do |input| 36 | expect(input).to have_rule("color: #00f") 37 | end 38 | end 39 | end 40 | 41 | context "expands text inputs when middle of list" do 42 | it "finds selectors" do 43 | list = @text_inputs_list.dup 44 | list.unshift "[type=\"file\"]" 45 | list.each do |input| 46 | expect(input).to have_rule("color: #f0f") 47 | end 48 | end 49 | end 50 | end 51 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/compact_shorthand_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "compact-shorthand" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/compact-shorthand") 6 | end 7 | 8 | context "compact-shorthand" do 9 | it "returns four values unaltered" do 10 | expect(".four-values-a").to have_rule("padding: 10px 20px 30px 40px") 11 | end 12 | 13 | it "returns four values when the left and right values are not equal" do 14 | expect(".four-values-b").to have_rule("padding: 5px 10px 5px 20px") 15 | end 16 | 17 | it "compacts four values to two values when the top/bottom and " + 18 | "left/right values are equal" do 19 | expect(".two-values").to have_rule("padding: 50px 100px") 20 | end 21 | 22 | it "compacts four values to one value when they all match" do 23 | expect(".one-value").to have_rule("padding: 10px") 24 | end 25 | 26 | it "skips null values" do 27 | expect(".null-value").to have_rule("padding: 10px 20px") 28 | end 29 | end 30 | end 31 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/contrast_ratio_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "contrast-ratio" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/contrast-ratio") 6 | end 7 | 8 | context "calculates between white and black" do 9 | it "outputs the contrast ratio" do 10 | rule = "content: 21;" 11 | 12 | expect(".contrast-ratio-black").to have_ruleset(rule) 13 | end 14 | end 15 | 16 | context "calculates between white and blue" do 17 | it "outputs the contrast ratio" do 18 | rule = "content: 8.59247;" 19 | 20 | expect(".contrast-ratio-blue").to have_ruleset(rule) 21 | end 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/directional_property_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "directional-property" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/directional-property") 6 | end 7 | 8 | context "directional-property" do 9 | it "returns property and values with four distinct lengths" do 10 | expect(".border-all").to have_rule("border-width: 2px 5px 8px 12px") 11 | end 12 | 13 | it "returns property and value with one length" do 14 | expect(".border-top").to have_rule("border-top: 10px") 15 | end 16 | 17 | it "returns property and value with vertical and horizontal values" do 18 | expect(".border-color").to have_rule("border-color: #fff #000") 19 | end 20 | 21 | it "returns properties for top and bottom margin" do 22 | ruleset = "margin-top: 20px; " + 23 | "margin-bottom: 10px;" 24 | 25 | expect(".margin-null").to have_ruleset(ruleset) 26 | end 27 | end 28 | end 29 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/fetch_bourbon_setting_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "fetch-bourbon-setting" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/fetch-bourbon-setting") 6 | end 7 | 8 | context "fetches the modular-scale-base setting" do 9 | it "and returns the default value" do 10 | expect(".test-1").to have_rule("content: 1em") 11 | end 12 | end 13 | 14 | context "fetches the rails-asset-pipeline setting" do 15 | it "and returns the user-overridden value" do 16 | expect(".test-2").to have_rule("content: true") 17 | end 18 | end 19 | 20 | context "called from the font-face mixin" do 21 | it "outputs user-overridden font file formats" do 22 | ruleset = 'font-family: "source-sans-pro"; ' + 23 | 'src: font-url("source-sans-pro-regular.woff2") ' + 24 | 'format("woff2"), ' + 25 | 'font-url("source-sans-pro-regular.woff") ' + 26 | 'format("woff");' 27 | 28 | expect("@font-face").to have_ruleset(ruleset) 29 | end 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/font_source_declaration_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "font-source-declaration" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/font-source-declaration") 6 | end 7 | 8 | context "called with pipeline" do 9 | it "returns pipeline path" do 10 | rule = 'src: font-url("b.woff2") format("woff2"), ' + 11 | 'font-url("b.woff") format("woff")' 12 | expect(".has-pipeline").to have_rule(rule) 13 | end 14 | end 15 | 16 | context "called with no pipeline" do 17 | it "does not return pipeline path" do 18 | rule = 'src: url("b.woff2") format("woff2"), ' + 19 | 'url("b.woff") format("woff")' 20 | expect(".no-pipeline").to have_rule(rule) 21 | end 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/gamma_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "gamma" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/gamma") 6 | end 7 | 8 | context "called on a color channel" do 9 | it "outputs a gamma value between 0 and 1" do 10 | rule = "content: 0.12168;" 11 | 12 | expect(".gamma").to have_ruleset(rule) 13 | end 14 | end 15 | 16 | context "called on a full color channel" do 17 | it "outputs a gamma value between 0 and 1" do 18 | rule = "content: 1;" 19 | 20 | expect(".gamma-full").to have_ruleset(rule) 21 | end 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/lightness_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "lightness" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/lightness") 6 | end 7 | 8 | context "called on black" do 9 | it "outputs a number between 0 and 1 to indicate lightness" do 10 | rule = "content: 0;" 11 | 12 | expect(".lightness-black").to have_ruleset(rule) 13 | end 14 | end 15 | 16 | context "called on white" do 17 | it "outputs a number between 0 and 1 to indicate lightness" do 18 | rule = "content: 1;" 19 | 20 | expect(".lightness-white").to have_ruleset(rule) 21 | end 22 | end 23 | 24 | context "called on gray" do 25 | it "outputs a number between 0 and 1 to indicate lightness" do 26 | rule = "content: 0.20503;" 27 | 28 | expect(".lightness-gray").to have_ruleset(rule) 29 | end 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /spec/bourbon/utilities/unpack_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "unpack" do 4 | before(:all) do 5 | ParserSupport.parse_file("utilities/unpack") 6 | end 7 | 8 | context "single" do 9 | it "unpacks four identical measurements" do 10 | expect(".single").to have_rule("padding: 10px 10px 10px 10px") 11 | end 12 | end 13 | 14 | context "double" do 15 | it "unpacks identical measurements for top and bottom, 16 | and different identical measurements for left and right" do 17 | expect(".double").to have_rule("padding: 1em 2em 1em 2em") 18 | end 19 | end 20 | 21 | context "triple" do 22 | it "unpacks identical measurements for left and right" do 23 | expect(".triple").to have_rule("padding: 10px 20px 0 20px") 24 | end 25 | end 26 | 27 | context "quadruple" do 28 | it "unpacks four distict measurements" do 29 | expect(".quadruple").to have_rule("padding: 0 calc(1em + 10px) 20px 50px") 30 | end 31 | end 32 | end 33 | -------------------------------------------------------------------------------- /spec/bourbon/validators/contains_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "contains" do 4 | before(:all) do 5 | ParserSupport.parse_file("validators/contains") 6 | end 7 | 8 | context "called on array with single item" do 9 | it "contains item" do 10 | expect(".single").to have_rule("color: #fff") 11 | end 12 | 13 | it "doesn't contain missing item" do 14 | expect(".single-missing").to have_rule("color: #000") 15 | end 16 | end 17 | 18 | context "called with array with multiple items" do 19 | it "contains item" do 20 | expect(".multiple").to have_rule("color: #fff") 21 | end 22 | 23 | it "doesn't contain missing item" do 24 | expect(".multiple-missing").to have_rule("color: #000") 25 | end 26 | end 27 | end 28 | -------------------------------------------------------------------------------- /spec/bourbon/validators/is_length_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "is-length" do 4 | before(:all) do 5 | ParserSupport.parse_file("validators/is-length") 6 | end 7 | 8 | context "checks if unitless integer can be represented as a length" do 9 | it "returns false" do 10 | expect(".integer").not_to have_rule("color: #fff") 11 | end 12 | end 13 | 14 | context "checks if px can be represented as a length" do 15 | it "returns true" do 16 | expect(".pixels").to have_rule("color: #fff") 17 | end 18 | end 19 | 20 | context "checks if em can be represented as a length" do 21 | it "returns true" do 22 | expect(".ems").to have_rule("color: #fff") 23 | end 24 | end 25 | 26 | context "checks if percent can be represented as a length" do 27 | it "returns true" do 28 | expect(".percent").to have_rule("color: #fff") 29 | end 30 | end 31 | 32 | context "parses calculated values" do 33 | it "returns true" do 34 | expect(".calc").to have_rule("color: #fff") 35 | end 36 | end 37 | 38 | context "parses custom properties" do 39 | it "returns true" do 40 | expect(".var").to have_rule("color: #fff") 41 | end 42 | end 43 | 44 | context "parses environment variables" do 45 | it "returns true" do 46 | expect(".env").to have_rule("color: #fff") 47 | end 48 | end 49 | 50 | context "checks if strings can be represented as a length" do 51 | it "returns false" do 52 | expect(".string").not_to have_rule("color: #fff") 53 | end 54 | end 55 | 56 | context "checks if null can be represented as a length" do 57 | it "returns false" do 58 | expect(".null").not_to have_rule("color: #fff") 59 | end 60 | end 61 | end 62 | -------------------------------------------------------------------------------- /spec/bourbon/validators/is_number_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "is-number" do 4 | before(:all) do 5 | ParserSupport.parse_file("validators/is-number") 6 | end 7 | 8 | context "called with integer" do 9 | it "is a number" do 10 | expect(".integer").to have_rule("line-height: 1") 11 | end 12 | end 13 | 14 | context "called with px" do 15 | it "is a number" do 16 | expect(".px").to have_rule("line-height: 2px") 17 | end 18 | end 19 | 20 | context "called with em" do 21 | it "is a number" do 22 | expect(".em").to have_rule("line-height: 3em") 23 | end 24 | end 25 | 26 | context "called with rem" do 27 | it "is a number" do 28 | expect(".rem").to have_rule("line-height: 4rem") 29 | end 30 | end 31 | 32 | context "called with percent" do 33 | it "is a number" do 34 | expect(".percent").to have_rule("line-height: 5%") 35 | end 36 | end 37 | 38 | context "called with string" do 39 | it "is not a number" do 40 | expect(".string").to_not have_rule("line-height: \"stringy\"") 41 | end 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /spec/bourbon/validators/is_size_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "is-size" do 4 | before(:all) do 5 | ParserSupport.parse_file("validators/is-size") 6 | end 7 | 8 | context "called with integer" do 9 | it "is not a size" do 10 | expect(".integer").to_not have_rule("margin-top: 1") 11 | end 12 | end 13 | 14 | context "called with px" do 15 | it "is a size" do 16 | expect(".px").to have_rule("margin-top: 2px") 17 | end 18 | end 19 | 20 | context "called with em" do 21 | it "is a size" do 22 | expect(".em").to have_rule("margin-top: 3em") 23 | end 24 | end 25 | 26 | context "called with rem" do 27 | it "is a size" do 28 | expect(".rem").to have_rule("margin-top: 4rem") 29 | end 30 | end 31 | 32 | context "called with percent" do 33 | it "is a size" do 34 | expect(".percent").to have_rule("margin-top: 5%") 35 | end 36 | end 37 | 38 | context "called with string" do 39 | it "is not a size" do 40 | expect(".string").to_not have_rule("margin-top: \"stringy\"") 41 | end 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /spec/fixtures/_setup.scss: -------------------------------------------------------------------------------- 1 | @import "core/bourbon"; 2 | -------------------------------------------------------------------------------- /spec/fixtures/library/border-color.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | $red: #f00; 4 | $blue: #0f0; 5 | $green: #00f; 6 | $purple: #ff0; 7 | 8 | .border-color-all { 9 | @include border-color($red); 10 | } 11 | 12 | .border-color-alternate { 13 | @include border-color($blue $green); 14 | } 15 | 16 | .border-color-implied-left { 17 | @include border-color($red $blue $green); 18 | } 19 | 20 | .border-color-explicit { 21 | @include border-color($green $blue $red $purple); 22 | } 23 | 24 | .border-color-false-third { 25 | @include border-color($blue $purple null $green); 26 | } 27 | -------------------------------------------------------------------------------- /spec/fixtures/library/border-radius.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .border-top-radius { 4 | @include border-top-radius(1em); 5 | } 6 | 7 | .border-left-radius { 8 | @include border-left-radius(2em); 9 | } 10 | 11 | .border-right-radius { 12 | @include border-right-radius(3em); 13 | } 14 | 15 | .border-bottom-radius { 16 | @include border-bottom-radius(4em); 17 | } 18 | -------------------------------------------------------------------------------- /spec/fixtures/library/border-style.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .border-style-all { 4 | @include border-style(solid); 5 | } 6 | 7 | .border-style-alternate { 8 | @include border-style(dotted dashed); 9 | } 10 | 11 | .border-style-implied-left { 12 | @include border-style(dashed double solid); 13 | } 14 | 15 | .border-style-explicit { 16 | @include border-style(dotted groove ridge none); 17 | } 18 | 19 | .border-style-false-third { 20 | @include border-style(inset none null double); 21 | } 22 | -------------------------------------------------------------------------------- /spec/fixtures/library/border-width.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .border-width-all { 4 | @include border-width(1px); 5 | } 6 | 7 | .border-width-alternate { 8 | @include border-width(2px 3px); 9 | } 10 | 11 | .border-width-implied-left { 12 | @include border-width(4px 5px 6px); 13 | } 14 | 15 | .border-width-explicit { 16 | @include border-width(7px 8px 9px 10px); 17 | } 18 | 19 | .border-width-false-third { 20 | @include border-width(11px 12px null 13px); 21 | } 22 | -------------------------------------------------------------------------------- /spec/fixtures/library/buttons.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .all-buttons { 4 | content: $all-buttons; 5 | } 6 | 7 | .all-buttons-active { 8 | content: $all-buttons-active; 9 | } 10 | 11 | .all-buttons-focus { 12 | content: $all-buttons-focus; 13 | } 14 | 15 | .all-buttons-hover { 16 | content: $all-buttons-hover; 17 | } 18 | -------------------------------------------------------------------------------- /spec/fixtures/library/clearfix.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .clearfix { 4 | @include clearfix; 5 | } 6 | -------------------------------------------------------------------------------- /spec/fixtures/library/contrast-switch.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .contrast-switch-light-base { 4 | color: contrast-switch(#bae6e6); 5 | } 6 | 7 | .contrast-switch-dark-base { 8 | color: contrast-switch(#2d72d9, #222, #eee); 9 | } 10 | -------------------------------------------------------------------------------- /spec/fixtures/library/ellipsis.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .ellipsis { 4 | @include ellipsis; 5 | } 6 | -------------------------------------------------------------------------------- /spec/fixtures/library/font-face-1.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | @include font-face( 4 | "source-sans-pro", 5 | "/fonts/source-sans-pro/source-sans-pro-regular" 6 | ); 7 | -------------------------------------------------------------------------------- /spec/fixtures/library/font-face-2.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | @include font-face( 4 | "calibre", 5 | "fonts/calibre" 6 | ) { 7 | font-style: normal; 8 | font-weight: 600; 9 | unicode-range: U+26; 10 | } 11 | -------------------------------------------------------------------------------- /spec/fixtures/library/font-face-3.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | @include font-face( 4 | "pitch", 5 | "/fonts/pitch", 6 | "woff2", 7 | $asset-pipeline: true 8 | ); 9 | -------------------------------------------------------------------------------- /spec/fixtures/library/font-stacks.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .helvetica { 4 | content: $font-stack-helvetica; 5 | } 6 | 7 | .lucida-grande { 8 | content: $font-stack-lucida-grande; 9 | } 10 | 11 | .verdana { 12 | content: $font-stack-verdana; 13 | } 14 | 15 | .garamond { 16 | content: $font-stack-garamond; 17 | } 18 | 19 | .georgia { 20 | content: $font-stack-georgia; 21 | } 22 | 23 | .hoefler-text { 24 | content: $font-stack-hoefler-text; 25 | } 26 | 27 | .consolas { 28 | content: $font-stack-consolas; 29 | } 30 | 31 | .courier-new { 32 | content: $font-stack-courier-new; 33 | } 34 | 35 | .monaco { 36 | content: $font-stack-monaco; 37 | } 38 | 39 | .system { 40 | content: $font-stack-system; 41 | } 42 | -------------------------------------------------------------------------------- /spec/fixtures/library/hide-text.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .hide-text { 4 | @include hide-text; 5 | } 6 | -------------------------------------------------------------------------------- /spec/fixtures/library/hide-visually.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .hide-visually { 4 | @include hide-visually; 5 | } 6 | 7 | .hide-visually--unhide { 8 | @include hide-visually("unhide"); 9 | } 10 | -------------------------------------------------------------------------------- /spec/fixtures/library/margin.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .margin-all { 4 | @include margin(1px); 5 | } 6 | 7 | .margin-alternate { 8 | @include margin(2px 3px); 9 | } 10 | 11 | .margin-implied-left { 12 | @include margin(4px 5px 6px); 13 | } 14 | 15 | .margin-explicit { 16 | @include margin(7px 8px 9px 10px); 17 | } 18 | 19 | .margin-false-third { 20 | @include margin(11px 12px null 13px); 21 | } 22 | -------------------------------------------------------------------------------- /spec/fixtures/library/modular-scale.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .one { 4 | &-base-two { 5 | font-size: modular-scale(1, $value: 2em); 6 | } 7 | 8 | &-base-three { 9 | font-size: modular-scale(1, $value: 3em); 10 | } 11 | 12 | &-double-value { 13 | font-size: modular-scale(1, $value: 1em 2em); 14 | } 15 | 16 | &-golden-ratio { 17 | font-size: modular-scale(1, $ratio: $golden); 18 | } 19 | } 20 | 21 | .two { 22 | &-base-one { 23 | font-size: modular-scale(2, $value: 1em); 24 | } 25 | 26 | &-double-value { 27 | font-size: modular-scale(2, $value: 2em); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /spec/fixtures/library/overflow-wrap.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .overflow-wrap { 4 | @include overflow-wrap; 5 | } 6 | 7 | .overflow-wrap-normal { 8 | @include overflow-wrap(normal); 9 | } 10 | -------------------------------------------------------------------------------- /spec/fixtures/library/padding.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .padding-all { 4 | @include padding(1px); 5 | } 6 | 7 | .padding-alternate { 8 | @include padding(2px 3px); 9 | } 10 | 11 | .padding-implied-left { 12 | @include padding(4px 5px 6px); 13 | } 14 | 15 | .padding-explicit { 16 | @include padding(7px 8px 9px 10px); 17 | } 18 | 19 | .padding-false-third { 20 | @include padding(11px 12px null 13px); 21 | } 22 | -------------------------------------------------------------------------------- /spec/fixtures/library/position.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .position-all { 4 | @include position(fixed, 1em); 5 | } 6 | 7 | .position-alternate { 8 | @include position(absolute, 2px 3px); 9 | } 10 | 11 | .position-implied-left { 12 | @include position(relative, 4px 5px 6px); 13 | } 14 | 15 | .position-explicit { 16 | @include position(fixed, 7px 8px 9px 10px); 17 | } 18 | 19 | .position-false-third { 20 | @include position(static, 11px null null 13px); 21 | } 22 | -------------------------------------------------------------------------------- /spec/fixtures/library/prefixer.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .prefix { 4 | @include prefixer(appearance, none); 5 | } 6 | 7 | .prefix--webkit { 8 | @include prefixer(appearance, none, ("webkit")); 9 | } 10 | 11 | .prefix--moz-ms { 12 | @include prefixer(appearance, none, ("moz", "ms")); 13 | } 14 | -------------------------------------------------------------------------------- /spec/fixtures/library/shade.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .shade-white { 4 | color: shade(#fff, 75%); 5 | } 6 | 7 | .shade-black { 8 | color: shade(#000, 50%); 9 | } 10 | 11 | .shade-red { 12 | color: shade(#f00, 25%); 13 | } 14 | 15 | .shade-gray { 16 | color: shade(#222, 33%); 17 | } 18 | -------------------------------------------------------------------------------- /spec/fixtures/library/size.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .size-implicit { 4 | @include size(10px); 5 | } 6 | 7 | .size-both { 8 | @include size(1em, 2em); 9 | } 10 | 11 | .size-auto { 12 | @include size(100px, auto); 13 | } 14 | -------------------------------------------------------------------------------- /spec/fixtures/library/strip-unit.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .px { 4 | width: strip-unit(10px); 5 | } 6 | 7 | .em { 8 | width: strip-unit(2em); 9 | } 10 | 11 | .rem { 12 | width: strip-unit(1.5rem); 13 | } 14 | 15 | .percent { 16 | width: strip-unit(20%); 17 | } 18 | -------------------------------------------------------------------------------- /spec/fixtures/library/text-inputs.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .all-text-inputs { 4 | content: $all-text-inputs; 5 | } 6 | 7 | .all-text-inputs-active { 8 | content: $all-text-inputs-active; 9 | } 10 | 11 | .all-text-inputs-focus { 12 | content: $all-text-inputs-focus; 13 | } 14 | 15 | .all-text-inputs-hover { 16 | content: $all-text-inputs-hover; 17 | } 18 | 19 | .all-text-inputs-invalid { 20 | content: $all-text-inputs-invalid; 21 | } 22 | -------------------------------------------------------------------------------- /spec/fixtures/library/tint.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .tint-white { 4 | color: tint(#fff, 75%); 5 | } 6 | 7 | .tint-black { 8 | color: tint(#000, 50%); 9 | } 10 | 11 | .tint-red { 12 | color: tint(#f00, 25%); 13 | } 14 | 15 | .tint-gray { 16 | color: tint(#aaa, 33%); 17 | } 18 | -------------------------------------------------------------------------------- /spec/fixtures/library/triangle.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .triangle--up { 4 | @include triangle("up", 2rem, 1rem, #b25c9c); 5 | } 6 | 7 | .triangle--right { 8 | @include triangle("right", 5px, 12px, #aaa); 9 | } 10 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/assign-inputs.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | #{_assign-inputs($_text-inputs-list)} { 4 | color: #f00; 5 | } 6 | 7 | #{_assign-inputs($_text-inputs-list, active)} { 8 | color: #0f0; 9 | } 10 | 11 | #{_assign-inputs($_text-inputs-list)}, 12 | select { 13 | color: #00f; 14 | } 15 | 16 | [type="file"], 17 | #{_assign-inputs($_text-inputs-list)} { 18 | color: #f0f; 19 | } 20 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/compact-shorthand.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .four-values-a { 4 | padding: _compact-shorthand(10px 20px 30px 40px); 5 | } 6 | 7 | .four-values-b { 8 | padding: _compact-shorthand(5px 10px 5px 20px); 9 | } 10 | 11 | .two-values { 12 | padding: _compact-shorthand(50px 100px 50px 100px); 13 | } 14 | 15 | .one-value { 16 | padding: _compact-shorthand(10px 10px 10px 10px); 17 | } 18 | 19 | .null-value { 20 | padding: _compact-shorthand(10px null 20px); 21 | } 22 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/contrast-ratio.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .contrast-ratio-black { 4 | content: _contrast-ratio(#fff, #000); 5 | } 6 | 7 | .contrast-ratio-blue { 8 | content: _contrast-ratio(#fff, #00f); 9 | } 10 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/directional-property.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .border-all { 4 | @include _directional-property(border, width, 2px 5px 8px 12px); 5 | } 6 | 7 | .border-top { 8 | @include _directional-property(border, top, 10px); 9 | } 10 | 11 | .border-color { 12 | @include _directional-property(border, color, #fff #000); 13 | } 14 | 15 | .margin-null { 16 | @include _directional-property(margin, null, 20px null 10px); 17 | } 18 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/fetch-bourbon-setting.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | $bourbon: ( 4 | "global-font-file-formats": ("woff2", "woff"), 5 | "rails-asset-pipeline": true, 6 | ); 7 | 8 | .test-1 { 9 | content: _fetch-bourbon-setting("modular-scale-base"); 10 | } 11 | 12 | .test-2 { 13 | content: _fetch-bourbon-setting("rails-asset-pipeline"); 14 | } 15 | 16 | @include font-face("source-sans-pro", "source-sans-pro-regular"); 17 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/font-source-declaration.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | $file-formats: ("woff2", "woff"); 4 | 5 | .has-pipeline { 6 | src: _font-source-declaration("a", "b", true, $file-formats); 7 | } 8 | 9 | .no-pipeline { 10 | src: _font-source-declaration("a", "b", false, $file-formats); 11 | } 12 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/gamma.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .gamma { 4 | content: _gamma(100 / 255); 5 | } 6 | 7 | .gamma-full { 8 | content: _gamma(255 / 255); 9 | } 10 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/lightness.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .lightness-black { 4 | content: _lightness(#000); 5 | } 6 | 7 | .lightness-white { 8 | content: _lightness(#fff); 9 | } 10 | 11 | .lightness-gray { 12 | content: _lightness(mix(#000, #fff, 50%)); 13 | } 14 | -------------------------------------------------------------------------------- /spec/fixtures/utilities/unpack.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | .single { 4 | padding: _unpack-shorthand(10px); 5 | } 6 | 7 | .double { 8 | padding: _unpack-shorthand(1em 2em); 9 | } 10 | 11 | .triple { 12 | padding: _unpack-shorthand(10px 20px 0); 13 | } 14 | 15 | .quadruple { 16 | padding: _unpack-shorthand(0 calc(1em + 10px) 20px 50px); 17 | } 18 | -------------------------------------------------------------------------------- /spec/fixtures/validators/contains.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | $single: "apple"; 4 | $multiple: "pineapple", "banana", "cumquat"; 5 | 6 | @mixin color-contains($list, $values) { 7 | @if _contains($list, $values) { 8 | color: #fff; 9 | } @else { 10 | color: #000; 11 | } 12 | } 13 | 14 | .single { 15 | @include color-contains($single, "apple"); 16 | } 17 | 18 | .single-missing { 19 | @include color-contains($single, "pear"); 20 | } 21 | 22 | .multiple { 23 | @include color-contains($multiple, "banana"); 24 | } 25 | 26 | .multiple-missing { 27 | @include color-contains($multiple, "strawberry"); 28 | } 29 | -------------------------------------------------------------------------------- /spec/fixtures/validators/is-length.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | @mixin color-length($value) { 4 | @if _is-length($value) { 5 | color: #fff; 6 | } 7 | } 8 | 9 | .integer { 10 | @include color-length(1); 11 | } 12 | 13 | .pixels { 14 | @include color-length(10px); 15 | } 16 | 17 | .ems { 18 | @include color-length(10em); 19 | } 20 | 21 | .percent { 22 | @include color-length(10%); 23 | } 24 | 25 | .calc { 26 | @include color-length(calc(2em - 5px)); 27 | } 28 | 29 | .env { 30 | @include color-length(env(safe-area-inset-top, 0)); 31 | } 32 | 33 | .var { 34 | @include color-length(var(--a-custom-property)); 35 | } 36 | 37 | .string { 38 | @include color-length("stringy"); 39 | } 40 | 41 | .null { 42 | @include color-length(null); 43 | } 44 | -------------------------------------------------------------------------------- /spec/fixtures/validators/is-number.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | @mixin line-height($number) { 4 | @if _is-number($number) { 5 | line-height: $number; 6 | } 7 | } 8 | 9 | .integer { 10 | @include line-height(1); 11 | } 12 | 13 | .px { 14 | @include line-height(2px); 15 | } 16 | 17 | .em { 18 | @include line-height(3em); 19 | } 20 | 21 | .rem { 22 | @include line-height(4rem); 23 | } 24 | 25 | .percent { 26 | @include line-height(5%); 27 | } 28 | 29 | .string { 30 | @include line-height("stringy"); 31 | } 32 | -------------------------------------------------------------------------------- /spec/fixtures/validators/is-size.scss: -------------------------------------------------------------------------------- 1 | @import "setup"; 2 | 3 | @mixin size-margin($size) { 4 | @if _is-size($size) { 5 | margin-top: $size; 6 | } 7 | } 8 | 9 | .integer { 10 | @include size-margin(1); 11 | } 12 | 13 | .px { 14 | @include size-margin(2px); 15 | } 16 | 17 | .em { 18 | @include size-margin(3em); 19 | } 20 | 21 | .rem { 22 | @include size-margin(4rem); 23 | } 24 | 25 | .percent { 26 | @include size-margin(5%); 27 | } 28 | 29 | .string { 30 | @include size-margin("stringy"); 31 | } 32 | -------------------------------------------------------------------------------- /spec/spec_helper.rb: -------------------------------------------------------------------------------- 1 | $LOAD_PATH.unshift(File.join(File.dirname(__FILE__), "..", "lib")) 2 | $LOAD_PATH.unshift(File.dirname(__FILE__)) 3 | require "rspec" 4 | require "bourbon" 5 | require "aruba/api" 6 | require "css_parser" 7 | Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each { |f| require f } 8 | 9 | RSpec.configure do |config| 10 | config.include SassSupport 11 | config.include CssParser 12 | config.include ParserSupport 13 | config.include Aruba::Api 14 | 15 | config.before(:all) do 16 | generate_css 17 | end 18 | 19 | config.after(:all) do 20 | clean_up 21 | end 22 | end 23 | -------------------------------------------------------------------------------- /spec/support/matchers/have_rule.rb: -------------------------------------------------------------------------------- 1 | RSpec::Matchers.define :have_rule do |expected| 2 | match do |selector| 3 | @rules = rules_from_selector(selector) 4 | @rules.include? expected 5 | end 6 | 7 | failure_message do |selector| 8 | if @rules.empty? 9 | %{no CSS for selector #{selector} were found} 10 | else 11 | rules = @rules.join("; ") 12 | %{Expected selector #{selector} to have CSS rule "#{expected}". 13 | Had "#{rules}".} 14 | end 15 | end 16 | 17 | def rules_from_selector(selector) 18 | rulesets = ParserSupport.parser.find_by_selector(selector) 19 | if rulesets.empty? 20 | [] 21 | else 22 | rules(rulesets) 23 | end 24 | end 25 | 26 | def rules(rulesets) 27 | rules = [] 28 | rulesets.map do |ruleset| 29 | ruleset.split(";").each do |rule| 30 | rules << rule.strip 31 | end 32 | end 33 | rules 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /spec/support/matchers/have_ruleset.rb: -------------------------------------------------------------------------------- 1 | RSpec::Matchers.define :have_ruleset do |expected| 2 | match do |selector| 3 | @ruleset = rules_from_selector(selector) 4 | @ruleset.join("; ") == expected 5 | end 6 | 7 | failure_message do |selector| 8 | if @ruleset.empty? 9 | %{no CSS for selector #{selector} were found} 10 | else 11 | ruleset = @ruleset.join("; ") 12 | %{Expected selector #{selector} to have CSS rule "#{expected}". 13 | Had "#{ruleset}".} 14 | end 15 | end 16 | 17 | def rules_from_selector(selector) 18 | ParserSupport.parser.find_by_selector(selector) 19 | end 20 | end 21 | -------------------------------------------------------------------------------- /spec/support/matchers/have_value.rb: -------------------------------------------------------------------------------- 1 | RSpec::Matchers.define :have_value do |expected| 2 | match do |variable| 3 | selector_class = variable.sub("$", ".") 4 | @value_attribute = ParserSupport.parser.find_by_selector(selector_class)[0] 5 | 6 | unless @value_attribute.nil? 7 | actual_value = @value_attribute.split(":")[1].strip.sub(";", "") 8 | actual_value == expected 9 | end 10 | end 11 | 12 | failure_message do |variable_name| 13 | value_attribute = @value_attribute.to_s 14 | %{Expected variable #{variable_name} to have value "#{expected}". 15 | Had "#{value_attribute}".} 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /spec/support/parser_support.rb: -------------------------------------------------------------------------------- 1 | module ParserSupport 2 | def self.parser 3 | @parser ||= CssParser::Parser.new 4 | end 5 | 6 | def self.parse_file(identifier) 7 | parser.load_file!("tmp/#{identifier}.css") 8 | end 9 | 10 | def self.show_contents(identifier) 11 | css_file_contents = File.open("tmp/#{identifier}.css").read 12 | css_file_contents.each_line do |line| 13 | puts line 14 | end 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/support/sass_support.rb: -------------------------------------------------------------------------------- 1 | module SassSupport 2 | def generate_css 3 | FileUtils.mkdir("tmp") 4 | `sass -I . spec/fixtures:tmp --update --precision=5 --sourcemap=none` 5 | end 6 | 7 | def clean_up 8 | FileUtils.rm_rf("tmp") 9 | end 10 | end 11 | --------------------------------------------------------------------------------