`s, or other elements and styles to rearrange them. + +```html + +``` + +#### Form contrast + +Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`. + +```html + +``` + +#### Sizing + +Make inputs smaller, larger, or full-width with an additional class. + +##### Small + +```html + +``` + +##### Large + +```html + +``` + +##### Block + +```html + +``` + +##### Hide webkit's contact info autofill icon +Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon. + +```html + +``` + +#### Selects + +Primer adds light `height` and `vertical-align` styles to ` + + + + + + + + + +``` + +##### Small + +Use the `.select-sm` class to resize both default and custom ` + + + + + + + + + + +``` + +#### Form groups + +```html + +``` + +#### Form group validation + +Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `

` with either `.error` or `.warning`. + +```html + +``` + +#### Checkboxes and radios + +Utilities to spice up the alignment and styling of checkbox and radio controls. + +```html + +``` + +You may also add emphasis to the label: + +```html + +``` + +##### Show / hide content based on a checkbox or radio button state + +Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed. + +```html + +``` + +#### Input group + +Attached an input and button to one another. + +```html + +``` + +#### Form actions + +Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you. + +```html +

+ + +

+``` + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-forms/index.scss b/packages/primer-forms/index.scss new file mode 100644 index 0000000000..540674802d --- /dev/null +++ b/packages/primer-forms/index.scss @@ -0,0 +1,5 @@ +@import "primer-support/index.scss"; +@import "./lib/form-control.scss"; +@import "./lib/form-select.scss"; +@import "./lib/form-group.scss"; +@import "./lib/form-validation.scss"; diff --git a/packages/primer-forms/lib/form-control.scss b/packages/primer-forms/lib/form-control.scss new file mode 100644 index 0000000000..ee1a71ab59 --- /dev/null +++ b/packages/primer-forms/lib/form-control.scss @@ -0,0 +1,211 @@ +// Needs refactoring +// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors +// stylelint-disable selector-no-type +// Base form controls +// +// Overrides for common inputs for easier styling. + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +label { + font-weight: $font-weight-bold; +} + +.form-control, +.form-select { + min-height: 34px; + padding: 6px 8px; + font-size: $body-font-size; + line-height: 20px; + color: $text-gray-dark; + vertical-align: middle; + background-color: $bg-white; + background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) + background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. + border: 1px solid $border-gray-dark; + border-radius: 3px; + outline: none; + box-shadow: $form-control-shadow; + + &.focus, + &:focus { + border-color: $blue-400; + outline: none; + box-shadow: $form-control-shadow, $btn-input-focus-shadow; + } +} + +// Inputs with contrast for easy light gray backgrounds against white. +.input-contrast { + background-color: $bg-gray-light; + + &:focus { background-color: $bg-white; } +} + +// Custom styling for HTML5 validation bubbles (WebKit only) +::placeholder { + color: $text-gray-light; +} + +// Mini inputs, to match .minibutton +.input-sm { + min-height: 28px; + padding-top: 3px; + padding-bottom: 3px; + font-size: $font-size-small; + line-height: 20px; +} + +// Large inputs +.input-lg { + padding: 4px 10px; + font-size: 16px; +} + +// Full-width inputs +.input-block { + display: block; + width: 100%; +} + +// Inputs with monospace text +.input-monospace { + font-family: $mono-font; +} + +// Hide the icon that tries to autofill contact info in webkit +.input-hide-webkit-autofill { + &::-webkit-contacts-auto-fill-button { + position: absolute; + right: 0; + display: none !important; + pointer-events: none; + visibility: hidden; + } +} + +// Checkboxes and Radiobuttons +// +// For checkboxes and radio button selections. +.form-checkbox { + padding-left: 20px; + margin: 15px 0; + vertical-align: middle; + + label { + em.highlight { + position: relative; + left: -4px; + padding: 2px 4px; + font-style: normal; + background: $yellow-100; + border-radius: 3px; + } + } + + input[type=checkbox], + input[type=radio] { + float: left; + margin: 5px 0 0 -20px; + vertical-align: middle; + } + + .note { + display: block; + margin: 0; + font-size: 12px; + font-weight: normal; + color: $gray-600; + } +} + +.form-checkbox-details { + display: none; +} + +.form-checkbox-details-trigger { + &:checked { + ~ * .form-checkbox-details, // child of sibling + ~ .form-checkbox-details { // or sibling + display: block; + } + } +} + +// Field groups +// +// Wrap field groups in `` to lay them out horizontally - great for +// the top of pages with autosave. +.hfields { + margin: 15px 0; + @include clearfix; + + .form-group { + float: left; + margin: 0 30px 0 0; + + dt { + label { + display: inline-block; + margin: 5px 0 0; + color: $gray-600; + } + + img { + position: relative; + top: -2px; + } + } + } + + .btn { + float: left; + margin: 28px 25px 0 -20px; + } + + .form-select { margin-top: 5px; } +} + +// Hide the up/down buttons in in the login form, the +// input is used for two-factor auth codes, type="number" makes it more usable +// on phones +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + margin: 0; + appearance: none; +} + +// Input groups + +.form-actions { + @include clearfix; + + .btn { + float: right; + + + .btn { + margin-right: 5px; + } + } +} + +.form-warning { + padding: 8px 10px; + margin: 10px 0; + font-size: 14px; + color: $yellow-900; + background: $yellow-100; + border: 1px solid $border-yellow; + border-radius: 3px; + + p { + margin: 0; + line-height: 1.5; + } + + a { font-weight: $font-weight-bold; } +} diff --git a/packages/primer-forms/lib/form-group.scss b/packages/primer-forms/lib/form-group.scss new file mode 100644 index 0000000000..b37bbb2fa6 --- /dev/null +++ b/packages/primer-forms/lib/form-group.scss @@ -0,0 +1,215 @@ +// Form groups +// +// Typical form groups - `` with a `

` containing the label and +// `

containing the form elements. +// stylelint-disable selector-max-compound-selectors +// stylelint-disable selector-no-type +.form-group { + margin: 15px 0; + + // Text fields + .form-control { + width: 440px; + max-width: 100%; + margin-right: 5px; + background-color: $bg-gray-light; + + &:focus { + background-color: $bg-white; + } + + &.shorter { width: 130px; } + + &.short { width: 250px; } + + &.long { width: 100%; } + } + + // Textarea + // stylelint-disable selector-no-qualifying-type + textarea.form-control { + width: 100%; + height: 200px; + min-height: 200px; + + &.short { + height: 50px; + min-height: 50px; + } + } + // stylelint-enable selector-no-qualifying-type + + // The Label + dt { + margin: 0 0 6px; + } + + label { + position: relative; + } + + &.flattened dt { + float: left; + margin: 0; + line-height: 32px; + } + + &.flattened dd { + line-height: 32px; + } + + // + // Form Elements + // + // stylelint-disable selector-no-qualifying-type + dd { + h4 { + margin: 4px 0 0; + + &.is-error { color: $text-red; } + + &.is-success { color: $text-green; } + + + .note { + margin-top: 0; + } + } + } + // stylelint-enable selector-no-qualifying-type + + // + // Variants + // + + &.required { + dt label::after { + padding-left: 5px; + color: $text-red; + content: "*"; + } + } + + // Form AJAX states + // + // Form fields that need feedback for AJAX loading, success + // states and errored states. + .success, + .error, + .indicator { + display: none; + font-size: 12px; + font-weight: $font-weight-bold; + } + + &.loading { + opacity: 0.5; + + .indicator { + display: inline; + } + + .spinner { + display: inline-block; + vertical-align: middle; + } + } + + &.successful { + .success { + display: inline; + color: $text-green; + } + } + + // Form validation + // + // Our inline errors + + &.warn, + &.errored { + .warning, + .error { + position: absolute; + z-index: 10; + display: block; // Show up in errored/warn state + max-width: 450px; // Keep our long errors readable + padding: 5px 8px; + margin: $spacer-1 0 0; + font-size: 13px; + font-weight: normal; + border-style: solid; + border-width: 1px; + border-radius: 3px; + + &::after, + &::before { + position: absolute; + bottom: 100%; + left: 10px; + z-index: 15; + width: 0; + height: 0; + pointer-events: none; + content: " "; + border: solid transparent; + } + + &::after { + border-width: 5px; + } + + &::before { + margin-left: -1px; + border-width: 6px; + } + } + } + + &.warn { + .warning { + color: $yellow-900; + background-color: $yellow-100; + border-color: $border-yellow; + + &::after { + border-bottom-color: $yellow-100; + } + + &::before { + border-bottom-color: $border-yellow; + } + } + } + + &.errored { + label { + color: $text-red; + } + + .error { + color: $red-900; + background-color: $bg-red-light; + border-color: $border-red-light; + + &::after { + border-bottom-color: $bg-red-light; + } + + &::before { + border-bottom-color: $border-red-light; + } + } + } +} + +.note { + min-height: 17px; + margin: 4px 0 2px; + font-size: 12px; + color: $text-gray; + + .spinner { + margin-right: 3px; + vertical-align: middle; + } +} diff --git a/packages/primer-forms/lib/form-select.scss b/packages/primer-forms/lib/form-select.scss new file mode 100644 index 0000000000..2f43d8df65 --- /dev/null +++ b/packages/primer-forms/lib/form-select.scss @@ -0,0 +1,38 @@ +// Custom select +// +// Apply `.select` to any ` + <%= octicon "search", :class => "subnav-search-icon" %> +

- Mu-An Chiou [github/github@42e67c8](https://github.com/github/github/commit/42e67c8) + * Add border to show block difference - Mu-An Chiou [github/github@22f7bdd](https://github.com/github/github/commit/22f7bdd) + * Link somewhere, since # shouldn't be allowed - Mu-An Chiou [github/github@09cb5f1](https://github.com/github/github/commit/09cb5f1) + +# v3.0.0 + + +# v2.0.0 + + * Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab) + * Updating layout hints - Jon Rohan [github/github@d6cc7dc](https://github.com/github/github/commit/d6cc7dc) + * mentioning link instead of text - Jon Rohan [github/github@008fd98](https://github.com/github/github/commit/008fd98) + * Updating the color hints to mention the variables - Jon Rohan [github/github@32a5752](https://github.com/github/github/commit/32a5752) + * Replace instances that can be replaced. Delete shadows when on white bgs. - Sophie Shepherd [github/github@e33bf62](https://github.com/github/github/commit/e33bf62) + * Add utility classes to typography scss - Sophie Shepherd [github/github@0116477](https://github.com/github/github/commit/0116477) + * Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a) + * Using 0 instead of 0px - Jon Rohan [github/github@3c5bcf5](https://github.com/github/github/commit/3c5bcf5) + * new argument name, add comments in code - Caleb Winters [github/github@51251be](https://github.com/github/github/commit/51251be) + * fix whitelisting - Caleb Winters [github/github@26fba58](https://github.com/github/github/commit/26fba58) + * polishing the docs, adding better examples - Caleb Winters [github/github@a7c5fb6](https://github.com/github/github/commit/a7c5fb6) + * change tag to experimental, add link to MDN - Caleb Winters [github/github@a47e282](https://github.com/github/github/commit/a47e282) + * remove global flex property - Caleb Winters [github/github@16491b8](https://github.com/github/github/commit/16491b8) + * Kill unneeded attribute - Patrick Marsceill [github/github@6c071dc](https://github.com/github/github/commit/6c071dc) + * Make default box shadow a var and apply it to .box-shadow utility - Patrick Marsceill [github/github@bda03be](https://github.com/github/github/commit/bda03be) + * Update box shadow to be better - Patrick Marsceill [github/github@6cbd1f0](https://github.com/github/github/commit/6cbd1f0) + * list styles without admin.deps - Sophie Shepherd [github/github@450f684](https://github.com/github/github/commit/450f684) + * Revert "Add list-style: none; utility" - Sophie Shepherd [github/github@c6d72f2](https://github.com/github/github/commit/c6d72f2) + * Add list-style: none; utility - Sophie Shepherd [github/github@7a494d8](https://github.com/github/github/commit/7a494d8) + * Add bg-shade-gradient - Patrick Marsceill [github/github@c7efe79](https://github.com/github/github/commit/c7efe79) + * Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c) + +# v1.0.0 + + * Updating to major new version - Jon Rohan [github/github@f0df999](https://github.com/github/github/commit/f0df999) + * Replacing .text-muted and .mute with .text-gray and .text-gray-dark - Jon Rohan [github/github@0ddd68d](https://github.com/github/github/commit/0ddd68d) + * Replacing .danger with .text-red - Jon Rohan [github/github@3f99b1f](https://github.com/github/github/commit/3f99b1f) + * Removing text-danger and using text-red - Jon Rohan [github/github@15627aa](https://github.com/github/github/commit/15627aa) + * Remove .hidden - Mu-An Chiou [github/github@8701f4b](https://github.com/github/github/commit/8701f4b) + * Removing text-success class and replacing with text-green - Jon Rohan [github/github@74529f7](https://github.com/github/github/commit/74529f7) + * Removing text-closed class and replacing with text-red - Jon Rohan [github/github@a3bceee](https://github.com/github/github/commit/a3bceee) + * Replacing m-auto with the newer class mx-auto - Jon Rohan [github/github@f2b3354](https://github.com/github/github/commit/f2b3354) + * Remove .text-open from the codebase, using .text-green instead - Jon Rohan [github/github@ec6cb2a](https://github.com/github/github/commit/ec6cb2a) + * Remove .text-diff-added from the codebase, using .text-green instead - Jon Rohan [github/github@aa0791d](https://github.com/github/github/commit/aa0791d) + * Remove .text-diff-deleted from the codebase, using .text-red instead - Jon Rohan [github/github@a5fecd0](https://github.com/github/github/commit/a5fecd0) + * Remove .text-failure from the codebase, using .text-red instead - Jon Rohan [github/github@6626959](https://github.com/github/github/commit/6626959) + * Remove .text-error from the codebase, using .text-red instead - Jon Rohan [github/github@dc31063](https://github.com/github/github/commit/dc31063) + * move animations into utilities module cc @jonrohan - broccolini [github/github@0c6d032](https://github.com/github/github/commit/0c6d032) + +# v0.6.0 + + * Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5) + * card tweaks to get labels and assignees in there - Mark Otto [github/github@e341b50](https://github.com/github/github/commit/e341b50) + * add line space between rule - broccolini [github/github@b02308e](https://github.com/github/github/commit/b02308e) + * Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda) + * Fixing typo in vertical alignment utilities closes https://github.com/primer/utilities/pull/1 cc @fabianperez - Jon Rohan [github/github@78bb59c](https://github.com/github/github/commit/78bb59c) + * Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f) + * move over all bold variable changes - Mark Otto [github/github@6b5b021](https://github.com/github/github/commit/6b5b021) + * disable lints because easier to read through like this - broccolini [github/github@dbc50c3](https://github.com/github/github/commit/dbc50c3) + * change h0 h00 to f0 f00 to match light type utils - broccolini [github/github@bacbb65](https://github.com/github/github/commit/bacbb65) + +# v0.5.0 + + * Bumping to a new version - Jon Rohan [github/github@ff32813](https://github.com/github/github/commit/ff32813) + * Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6) + * Adding docs for margin and padding - Jon Rohan [github/github@4ec0398](https://github.com/github/github/commit/4ec0398) + * ohhhh remove that my bad - Mark Otto [github/github@caa46b2](https://github.com/github/github/commit/caa46b2) + * Adjusting the regex and cleaning up unused classes - Jon Rohan [github/github@d3c1cce](https://github.com/github/github/commit/d3c1cce) + * Creating a depcreated classes test to watch for any deprecated class use - Jon Rohan [github/github@1e001c1](https://github.com/github/github/commit/1e001c1) + * utils - Mark Otto [github/github@23cec0a](https://github.com/github/github/commit/23cec0a) + +# v0.4.0 + + * Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96) + * Moving the min-width to a utility - Jon Rohan [github/github@1560299](https://github.com/github/github/commit/1560299) + * New line-height variables - Mark Otto [github/github@b15b1ea](https://github.com/github/github/commit/b15b1ea) + * re-order type utilities - broccolini [github/github@8314eba](https://github.com/github/github/commit/8314eba)52 + * correct h3 size - broccolini [github/github@a2581ae](https://github.com/github/github/commit/a2581ae)d + * Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070) + * including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed) + +# v0.3.0 + + * 0.3.0 - Jon Rohan [github/github@8478cb3](https://github.com/github/github/commit/8478cb3) + * revert to correct plugins - Jon Rohan [github/github@bcffe49](https://github.com/github/github/commit/bcffe49) + * Adding stats script to generate build/index.js file - Jon Rohan [github/github@91a4720](https://github.com/github/github/commit/91a4720) + * Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613) + * fix typo on visibility utility - broccolini [github/github@7d52b85](https://github.com/github/github/commit/7d52b85) + +# v0.2.2 + + * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) + * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf) + * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) + * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) + +# v0.2.1 + + * Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba) + * Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd) + * Updating stats recorder and removing some unused lint disables - Jon Rohan [github/github@6dbdfe1](https://github.com/github/github/commit/6dbdfe1) + * Updating for stylelint instead of scss_lint - Jon Rohan [github/github@87a2c68](https://github.com/github/github/commit/87a2c68) + +# v0.2.0 + + * Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586) + * Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81) + * Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34) + * Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101) + * cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1) + * Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871) + * Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f) + +# v0.1.0 + + * Updating support dependency versions - Jon Rohan [github/github@76d97ec](https://github.com/github/github/commit/76d97ec) + * Moving text base utilities to utilities module - Jon Rohan [github/github@ac7383e](https://github.com/github/github/commit/ac7383e) + * polish select target page - Caleb Winters [github/github@2ca8bb1](https://github.com/github/github/commit/2ca8bb1) + * use scss-lint:disable for now - Jon Rohan [github/github@7532519](https://github.com/github/github/commit/7532519) + * typo in install instructions - Jon Rohan [github/github@27b72e4](https://github.com/github/github/commit/27b72e4) + * Adding primer-support dependency - Jon Rohan [github/github@0961785](https://github.com/github/github/commit/0961785) + * Adding more relevant info to the package.json file - Jon Rohan [github/github@1715cfd](https://github.com/github/github/commit/1715cfd) + * Moving license to stylesheets directory to reuse for other modules - Jon Rohan [github/github@8fa7b44](https://github.com/github/github/commit/8fa7b44) + * Adding a little bit more description to readme - Jon Rohan [github/github@7a29727](https://github.com/github/github/commit/7a29727) + * Add info about saving in install - Jon Rohan [github/github@3f0aa6d](https://github.com/github/github/commit/3f0aa6d) + * Creating a utilities module - Jon Rohan [github/github@7dc4d41](https://github.com/github/github/commit/7dc4d41) \ No newline at end of file diff --git a/packages/primer-utilities/LICENSE b/packages/primer-utilities/LICENSE new file mode 100644 index 0000000000..5715c13693 --- /dev/null +++ b/packages/primer-utilities/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 GitHub Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/primer-utilities/README.md b/packages/primer-utilities/README.md new file mode 100644 index 0000000000..cb48019cc8 --- /dev/null +++ b/packages/primer-utilities/README.md @@ -0,0 +1,48 @@ +# Primer CSS Utilities + +[![npm version](http://img.shields.io/npm/v/primer-utilities.svg)](https://www.npmjs.org/package/primer-utilities) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +> There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more. + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-utilities` with this command. + +``` +$ npm install --save primer-utilities +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-utilities/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + +You can read more about utilities in the [docs folder](./docs/). + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/packages/primer-utilities/index.scss b/packages/primer-utilities/index.scss new file mode 100644 index 0000000000..ff916bbdf9 --- /dev/null +++ b/packages/primer-utilities/index.scss @@ -0,0 +1,13 @@ +@import "primer-support/index.scss"; +// utilities +@import "./lib/animations.scss"; +@import "./lib/borders.scss"; +@import "./lib/box-shadow.scss"; +@import "./lib/colors.scss"; +@import "./lib/flexbox.scss"; +@import "./lib/layout.scss"; +@import "./lib/margin.scss"; +@import "./lib/padding.scss"; +@import "./lib/typography.scss"; +// Visibility and display should always come last in the imports so that they override other utilities with !important +@import "./lib/visibility-display.scss"; diff --git a/packages/primer-utilities/lib/animations.scss b/packages/primer-utilities/lib/animations.scss new file mode 100644 index 0000000000..ef751cc884 --- /dev/null +++ b/packages/primer-utilities/lib/animations.scss @@ -0,0 +1,153 @@ +// This file contains reusable animations for github. +// stylelint-disable primer/selector-no-utility +// Fade in +// A class to fade in an element on the page. +.anim-fade-in { + animation-name: fade-in; + animation-duration: 1s; + animation-timing-function: ease-in-out; + + &.fast { + animation-duration: 300ms; + } +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +/* Fade in and slide up an element */ +.anim-fade-up { + opacity: 0; + animation-name: fade-up; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease-out; + animation-delay: 1s; +} + +@keyframes fade-up { + 0% { + opacity: 0.8; + transform: translateY(100%); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* Fade an element out and slide down */ +.anim-fade-down { + animation-name: fade-down; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease-in; +} + +@keyframes fade-down { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0.5; + transform: translateY(100%); + } +} + +/* Grow an element width from 0 to 100% */ +.anim-grow-x { + width: 0%; + animation-name: grow-x; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease; + animation-delay: 0.5s; +} + +@keyframes grow-x { + to { width: 100%; } +} + +/* Shrink an element from 100% to 0% */ +.anim-shrink-x { + animation-name: shrink-x; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; + animation-delay: 0.5s; +} + +@keyframes shrink-x { + to { width: 0%; } +} + +/* Fade in an element and scale it fast */ +.anim-scale-in { + animation-name: scale-in; + animation-duration: 0.15s; + animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); +} + +@keyframes scale-in { + 0% { + opacity: 0; + transform: scale(0.5); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* Pulse an element's opacity */ +.anim-pulse { + animation-name: pulse; + animation-duration: 2s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +@keyframes pulse { + 0% { + opacity: 0.3; + } + + 10% { + opacity: 1; + } + + 100% { + opacity: 0.3; + } +} + +/* Pulse in an element */ +.anim-pulse-in { + animation-name: pulse-in; + animation-duration: 0.5s; +} + +@keyframes pulse-in { + 0% { + transform: scale3d(1, 1, 1); + } + + 50% { + transform: scale3d(1.1, 1.1, 1.1); + } + + 100% { + transform: scale3d(1, 1, 1); + } +} diff --git a/packages/primer-utilities/lib/borders.scss b/packages/primer-utilities/lib/borders.scss new file mode 100644 index 0000000000..ead6f66acf --- /dev/null +++ b/packages/primer-utilities/lib/borders.scss @@ -0,0 +1,63 @@ +// Border utilities +// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before + +/* Add a gray border */ +.border { border: $border !important; } +/* Add a gray border to the top */ +.border-top { border-top: $border !important; } +/* Add a gray border to the right */ +.border-right { border-right: $border !important; } +/* Add a gray border to the bottom */ +.border-bottom { border-bottom: $border !important; } +/* Add a gray border to the left */ +.border-left { border-left: $border !important; } +/* Add a gray border to the left and right */ +.border-y { + border-top: $border !important; + border-bottom: $border !important; +} + +.border-dashed { border-style: dashed !important; } + +/* Use with .border to turn the border blue */ +.border-blue { border-color: $border-blue !important; } +/* Use with .border to turn the border blue-light */ +.border-blue-light { border-color: $border-blue-light !important; } +/* Use with .border to turn the border green */ +.border-green { border-color: $border-green !important; } +/* Use with .border to turn the border green light */ +.border-green-light { border-color: $border-green-light !important; } +/* Use with .border to turn the border red */ +.border-red { border-color: $border-red !important; } +/* Use with .border to turn the border red-light */ +.border-red-light { border-color: $border-red-light !important; } +/* Use with .border to turn the border purple */ +.border-purple { border-color: $border-purple !important; } +/* Use with .border to turn the border yellow */ +.border-yellow { border-color: $border-yellow !important; } +/* Use with .border to turn the border gray-light */ +.border-gray-light { border-color: $border-gray-light !important; } +/* Use with .border to turn the border gray-dark */ +.border-gray-dark { border-color: $border-gray-dark !important; } +/* Use with .border to turn the border rgba black 0.15 */ +.border-black-fade { border-color: $border-black-fade !important; } + +// Without borders +/* Remove all borders */ +.border-0 { border: 0 !important; } +/* Remove the top border */ +.border-top-0 { border-top: 0 !important; } +/* Remove the right border */ +.border-right-0 { border-right: 0 !important; } +/* Remove the bottom border */ +.border-bottom-0 { border-bottom: 0 !important; } +/* Remove the left border */ +.border-left-0 { border-left: 0 !important; } + +// Rounded corners +/* Remove the border-radius */ +.rounded-0 { border-radius: 0 !important; } +/* Add a border-radius to all corners */ +.rounded-1 { border-radius: $border-radius !important; } +/* Add a 2x border-radius to all corners */ +.rounded-2 { border-radius: $border-radius * 2 !important; } diff --git a/packages/primer-utilities/lib/box-shadow.scss b/packages/primer-utilities/lib/box-shadow.scss new file mode 100644 index 0000000000..9093da305c --- /dev/null +++ b/packages/primer-utilities/lib/box-shadow.scss @@ -0,0 +1,26 @@ +// Box shadow utilities +// stylelint-disable primer/selector-no-utility + +// Box shadows + +.box-shadow { + box-shadow: $box-shadow !important; +} + +.box-shadow-medium { + box-shadow: $box-shadow-medium !important; +} + +.box-shadow-large { + box-shadow: $box-shadow-large !important; +} + +.box-shadow-extra-large { + box-shadow: $box-shadow-extra-large !important; +} + +// Turn off box shadow + +.box-shadow-none { + box-shadow: none !important; +} diff --git a/packages/primer-utilities/lib/colors.scss b/packages/primer-utilities/lib/colors.scss new file mode 100644 index 0000000000..0f22a810d3 --- /dev/null +++ b/packages/primer-utilities/lib/colors.scss @@ -0,0 +1,106 @@ +// Color utilities +// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility +// stylelint-disable comment-empty-line-before + +// background colors +/* Set the background to $bg-white */ +.bg-white { background-color: $bg-white !important; } +/* Set the background to $bg-blue */ +.bg-blue { background-color: $bg-blue !important; } +/* Set the background to $bg-blue-light */ +.bg-blue-light { background-color: $bg-blue-light !important; } +/* Set the background to $bg-gray-dark */ +.bg-gray-dark { background-color: $bg-gray-dark !important; } +/* Set the background to $bg-gray */ +.bg-gray { background-color: $bg-gray !important; } +/* Set the background to $bg-gray-light */ +.bg-gray-light { background-color: $bg-gray-light !important; } +/* Set the background to $bg-green */ +.bg-green { background-color: $bg-green !important; } +/* Set the background to $bg-green-light */ +.bg-green-light { background-color: $bg-green-light !important; } +/* Set the background to $bg-red */ +.bg-red { background-color: $bg-red !important; } +/* Set the background to $bg-red-light */ +.bg-red-light { background-color: $bg-red-light !important; } +/* Set the background to $bg-yellow */ +.bg-yellow { background-color: $bg-yellow !important; } +/* Set the background to $bg-yellow-light */ +.bg-yellow-light { background-color: $bg-yellow-light !important; } +/* Set the background to $bg-purple */ +.bg-purple { background-color: $bg-purple !important; } +/* Set the background to $bg-purple-light */ +.bg-purple-light { background-color: $bg-purple-light !important; } + +.bg-shade-gradient { + background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important; + background-repeat: no-repeat !important; + background-size: 100% 200px !important; +} + +// text colors +/* Set the text color to $text-blue */ +.text-blue { color: $text-blue !important; } +/* Set the text color to $text-red */ +.text-red { color: $text-red !important; } +/* Set the text color to $text-gray-light */ +.text-gray-light { color: $text-gray-light !important; } +/* Set the text color to $text-gray */ +.text-gray { color: $text-gray !important; } +/* Set the text color to $text-gray-dark */ +.text-gray-dark { color: $text-gray-dark !important; } +/* Set the text color to $text-green */ +.text-green { color: $text-green !important; } +/* Set the text color to $text-orange */ +.text-orange { color: $text-orange !important; } +/* Set the text color to $text-orange-light */ +.text-orange-light { color: $text-orange-light !important; } +/* Set the text color to $text-purple */ +.text-purple { color: $text-purple !important; } +/* Set the text color to $text-white */ +.text-white { color: $text-white !important; } +/* Set the text color to inherit */ +.text-inherit { color: inherit !important; } + +// Text states +// These can probably all be regular utilities +.text-pending { color: $yellow-800 !important; } +// Separate text and background colors in future to improve a11y +.bg-pending { color: $yellow-700 !important; } + +// Link colors +// Sets the links color to $text-gray and $text-blue on hover +.link-gray { + color: $text-gray !important; + + &:hover { + color: $text-blue !important; + } +} + +// Sets the links color to $text-gray-dark and $text-blue on hover +.link-gray-dark { + color: $text-gray-dark !important; + + &:hover { + color: $text-blue !important; + } +} + +/* Set the link color to $text-blue on hover + Useful when you want only part of a link to turn blue on hover */ +.link-hover-blue { + &:hover { + color: $text-blue !important; + } +} + +/* Make a link $text-gray, then $text-blue on hover and removes the underline */ +.muted-link { + color: $text-gray !important; + + &:hover { + color: $text-blue !important; + text-decoration: none; + } +} diff --git a/packages/primer-utilities/lib/flexbox.scss b/packages/primer-utilities/lib/flexbox.scss new file mode 100644 index 0000000000..1a89e3f041 --- /dev/null +++ b/packages/primer-utilities/lib/flexbox.scss @@ -0,0 +1,80 @@ +// Flex utility classes + +// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before +// stylelint-disable comment-empty-line-before + +// - - - - - - - - - - - - - - - - - - - - - - - +// This is a template for generating the flex utility classes. +// A version of each class will be generated without a breakpoint, +// along with a variant for each breakpoint. +// - - - - - - - - - - - - - - - - - - - - - - - + +@mixin flexUtility($breakpoint: 0) { + + // This is the breakpoint that will be inserted into class names + $breakstring: -#{$breakpoint}; // example: `.d-sm-flex` + + // If there's no breakpoint, the $breakstring value will be blank. + @if $breakpoint == 0 { + $breakstring: ""; // example: `.d-flex` + } + + // Flexbox classes + // Container + + .flex#{$breakstring}-row { flex-direction: row !important; } + .flex#{$breakstring}-row-reverse { flex-direction: row-reverse !important; } + .flex#{$breakstring}-column { flex-direction: column !important; } + + .flex#{$breakstring}-wrap { flex-wrap: wrap !important; } + .flex#{$breakstring}-nowrap { flex-wrap: nowrap !important; } + + .flex#{$breakstring}-justify-start { justify-content: flex-start !important; } + .flex#{$breakstring}-justify-end { justify-content: flex-end !important; } + .flex#{$breakstring}-justify-center { justify-content: center !important; } + .flex#{$breakstring}-justify-between { justify-content: space-between !important; } + .flex#{$breakstring}-justify-around { justify-content: space-around !important; } + + .flex#{$breakstring}-items-start { align-items: flex-start !important; } + .flex#{$breakstring}-items-end { align-items: flex-end !important; } + .flex#{$breakstring}-items-center { align-items: center !important; } + .flex#{$breakstring}-items-baseline { align-items: baseline !important; } + .flex#{$breakstring}-items-stretch { align-items: stretch !important; } + + .flex#{$breakstring}-content-start { align-content: flex-start !important; } + .flex#{$breakstring}-content-end { align-content: flex-end !important; } + .flex#{$breakstring}-content-center { align-content: center !important; } + .flex#{$breakstring}-content-between { align-content: space-between !important; } + .flex#{$breakstring}-content-around { align-content: space-around !important; } + .flex#{$breakstring}-content-stretch { align-content: stretch !important; } + + // Item + .flex#{$breakstring}-auto { flex: 1 1 auto !important; } + .flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; } + + .flex#{$breakstring}-self-auto { align-self: auto !important; } + .flex#{$breakstring}-self-start { align-self: flex-start !important; } + .flex#{$breakstring}-self-end { align-self: flex-end !important; } + .flex#{$breakstring}-self-center { align-self: center !important; } + .flex#{$breakstring}-self-baseline { align-self: baseline !important; } + .flex#{$breakstring}-self-stretch { align-self: stretch !important; } + + // Shorthand for equal width and height cols + .flex#{$breakstring}-item-equal { + flex-grow: 1; + flex-basis: 0; + } +} + +// Generate basic flexbox classes +@include flexUtility(); + +// Loop through the breakpoint values to create responsive classes +@each $breakpoint in map-keys($breakpoints) { + + // Loop through the spacer values + @include breakpoint($breakpoint) { + @include flexUtility($breakpoint); + } + +} diff --git a/packages/primer-utilities/lib/layout.scss b/packages/primer-utilities/lib/layout.scss new file mode 100644 index 0000000000..5a2bada8df --- /dev/null +++ b/packages/primer-utilities/lib/layout.scss @@ -0,0 +1,96 @@ +// Layout +// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility +// stylelint-disable comment-empty-line-before + +/* Set position to static */ +.position-static { position: static !important; } +/* Set position to relative */ +.position-relative { position: relative !important; } +/* Set position to absolute */ +.position-absolute { position: absolute !important; } +/* Set position to fixed */ +.position-fixed { position: fixed !important; } + +/* Set top 0 */ +.top-0 { top: 0 !important; } +/* Set right 0 */ +.right-0 { right: 0 !important; } +/* Set bottom 0 */ +.bottom-0 { bottom: 0 !important; } +/* Set left 0 */ +.left-0 { left: 0 !important; } + +/* Vertical align middle */ +.v-align-middle { vertical-align: middle !important; } +/* Vertical align top */ +.v-align-top { vertical-align: top !important; } +/* Vertical align bottom */ +.v-align-bottom { vertical-align: bottom !important; } +/* Vertical align to the top of the text */ +.v-align-text-top { vertical-align: text-top !important; } +/* Vertical align to the bottom of the text */ +.v-align-text-bottom { vertical-align: text-bottom !important; } + +// Overflow utilities +// overflow-hidden can also be used to create a new +// block formatting context or clear floats. +/* Set the overflow hidden */ +.overflow-hidden { overflow: hidden !important; } +/* Set the overflow scroll */ +.overflow-scroll { overflow: scroll !important; } +/* Set the overflow auto */ +.overflow-auto { overflow: auto !important; } + +// Clear floats +/* Clear floats around the element */ +.clearfix { + @include clearfix; +} + +// Floats +/* Float to the right */ +.float-right { float: right !important; } +/* Float to the left */ +.float-left { float: left !important; } +/* Don't float left or right */ +.float-none { float: none !important; } + +// Responsive float utlities +// .float-md-left, .float-lg-right, ... +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + /* Float to the left at the #{$breakpoint} breakpoint */ + .float-#{$breakpoint}-left { float: left !important; } + /* Float to the right at the #{$breakpoint} breakpoint */ + .float-#{$breakpoint}-right { float: right !important; } + /* No float at the #{$breakpoint} breakpoint */ + .float-#{$breakpoint}-none { float: none !important; } + } +} + +// Width and height utilities, helpful in combination +// with display-table utilities and images +/* Max width 100% */ +.width-fit { max-width: 100% !important; } +/* Set the width to 100% */ +.width-full { width: 100% !important; } +/* Set the height to 100% */ +.height-full { height: 100% !important; } + +/* Remove min-width from element */ +.min-width-0 { min-width: 0 !important; } + +// Direction utilities + +.direction-rtl { direction: rtl !important; } + +.direction-ltr { direction: ltr !important; } + +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + /* Set the direction to ltr at the #{$breakpoint} breakpoint */ + .direction-#{$breakpoint}-rtl { direction: rtl !important; } + /* Set the direction to ltr at the #{$breakpoint} breakpoint */ + .direction-#{$breakpoint}-ltr { direction: ltr !important; } + } +} diff --git a/packages/primer-utilities/lib/margin.scss b/packages/primer-utilities/lib/margin.scss new file mode 100644 index 0000000000..3e421cdcf8 --- /dev/null +++ b/packages/primer-utilities/lib/margin.scss @@ -0,0 +1,86 @@ +// Margin spacer utilities +// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before +@for $i from 1 through length($spacers) { + $size: #{nth($spacers, $i)}; + $scale: #{$i - 1}; + + /* Set a #{$size} margin to all sides */ + .m-#{$scale} { margin : #{$size} !important; } + /* Set a #{$size} margin on the top */ + .mt-#{$scale} { margin-top : #{$size} !important; } + /* Set a #{$size} margin on the right */ + .mr-#{$scale} { margin-right : #{$size} !important; } + /* Set a #{$size} margin on the bottom */ + .mb-#{$scale} { margin-bottom: #{$size} !important; } + /* Set a #{$size} margin on the left */ + .ml-#{$scale} { margin-left : #{$size} !important; } + /* Set a negative #{$size} margin on top */ + .mt-n#{$scale} { margin-top : -#{$size} !important; } + /* Set a negative #{$size} margin on the right */ + .mr-n#{$scale} { margin-right : -#{$size} !important; } + /* Set a negative #{$size} margin on the bottom */ + .mb-n#{$scale} { margin-bottom: -#{$size} !important; } + /* Set a negative #{$size} margin on the left */ + .ml-n#{$scale} { margin-left : -#{$size} !important; } + + /* Set a #{$size} margin on the left & right */ + .mx-#{$scale} { + margin-right: #{$size} !important; + margin-left : #{$size} !important; + } + + /* Set a #{$size} margin on the top & bottom */ + .my-#{$scale} { + margin-top : #{$size} !important; + margin-bottom: #{$size} !important; + } +} + +/* Set an auto margin on left & right */ +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +// Loop through the breakpoint values +@each $breakpoint in map-keys($breakpoints) { + + // Loop through the spacer values + @for $i from 1 through length($spacers) { + @include breakpoint($breakpoint) { + $size: #{nth($spacers, $i)}; // sm, md, lg, xl + $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6 + + /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */ + .m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; } + /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */ + .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; } + /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */ + .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; } + /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */ + .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; } + /* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */ + .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; } + /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */ + .mt-#{$breakpoint}-n#{$scale} { margin-top : -#{$size} !important; } + /* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */ + .mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; } + /* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */ + .mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; } + /* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */ + .ml-#{$breakpoint}-n#{$scale} { margin-left : -#{$size} !important; } + + /* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */ + .mx-#{$breakpoint}-#{$scale} { + margin-right: #{$size} !important; + margin-left: #{$size} !important; + } + + /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */ + .my-#{$breakpoint}-#{$scale} { + margin-top: #{$size} !important; + margin-bottom: #{$size} !important; + } + } + } +} diff --git a/packages/primer-utilities/lib/padding.scss b/packages/primer-utilities/lib/padding.scss new file mode 100644 index 0000000000..5c7d4f4faf --- /dev/null +++ b/packages/primer-utilities/lib/padding.scss @@ -0,0 +1,83 @@ +// Padding spacer utilities +// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before +// stylelint-disable comment-empty-line-before +@for $i from 1 through length($spacers) { + $size: #{nth($spacers, $i)}; + $scale: #{$i - 1}; + + /* Set a #{$size} padding to all sides */ + .p-#{$scale} { padding : #{$size} !important; } + /* Set a #{$size} padding to the top */ + .pt-#{$scale} { padding-top : #{$size} !important; } + /* Set a #{$size} padding to the right */ + .pr-#{$scale} { padding-right : #{$size} !important; } + /* Set a #{$size} padding to the bottom */ + .pb-#{$scale} { padding-bottom: #{$size} !important; } + /* Set a #{$size} padding to the left */ + .pl-#{$scale} { padding-left : #{$size} !important; } + + /* Set a #{$size} padding to the left & right */ + .px-#{$scale} { + padding-right: #{$size} !important; + padding-left: #{$size} !important; + } + + /* Set a #{$size} padding to the top & bottom */ + .py-#{$scale} { + padding-top: #{$size} !important; + padding-bottom: #{$size} !important; + } +} + +// Responsive padding spacer utilities + +// Loop through the breakpoint values +@each $breakpoint in map-keys($breakpoints) { + + // Loop through the spacer values + @for $i from 1 through length($spacers) { + @include breakpoint($breakpoint) { + $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl + $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6 + + /* Set a #{$size} padding to all sides at the #{$breakpoint} breakpoint */ + .p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; } + /* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */ + .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; } + /* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */ + .pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; } + /* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */ + .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; } + /* Set a #{$size} padding to the left at the #{$breakpoint} breakpoint */ + .pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; } + + /* Set a #{$size} padding to the left & right at the #{$breakpoint} breakpoint */ + .px-#{$breakpoint}-#{$scale} { + padding-right: #{$size} !important; + padding-left: #{$size} !important; + } + + /* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */ + .py-#{$breakpoint}-#{$scale} { + padding-top: #{$size} !important; + padding-bottom: #{$size} !important; + } + } + } +} + +// responsive padding for containers +.p-responsive { + padding-right: $spacer-3 !important; + padding-left: $spacer-3 !important; + + @include breakpoint(sm) { + padding-right: $spacer-6 !important; + padding-left: $spacer-6 !important; + } + + @include breakpoint(lg) { + padding-right: $spacer-3 !important; + padding-left: $spacer-3 !important; + } +} diff --git a/packages/primer-utilities/lib/typography.scss b/packages/primer-utilities/lib/typography.scss new file mode 100644 index 0000000000..762297e3e1 --- /dev/null +++ b/packages/primer-utilities/lib/typography.scss @@ -0,0 +1,216 @@ +// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after +// stylelint-disable comment-empty-line-before +// Type scale variables found in primer-support/lib/variables.scss +// $h00-size-mobile: 40px; +// $h0-size-mobile: 32px; +// $h1-size-mobile: 26px; +// $h2-size-mobile: 22px; +// $h3-size-mobile: 18px; +// $h00-size: 48px; +// $h0-size: 40px; +// $h1-size: 32px; +// $h2-size: 24px; +// $h3-size: 20px; +// $h4-size: 16px; +// $h5-size: 14px; +// $h6-size: 12px; + +/* Set the font size to 26px */ +.h1 { + font-size: $h1-size-mobile !important; + + @include breakpoint(md) { font-size: $h1-size !important; } + +} + +/* Set the font size to 22px */ +.h2 { + font-size: $h2-size-mobile !important; + + @include breakpoint(md) { font-size: $h2-size !important; } +} + +/* Set the font size to 18px */ +.h3 { + font-size: $h3-size-mobile !important; + + @include breakpoint(md) { font-size: $h3-size !important; } + +} + +/* Set the font size to #{$h4-size} */ +.h4 { + font-size: $h4-size !important; + +} + +/* Set the font size to #{$h5-size} */ +.h5 { font-size: $h5-size !important; } + +// Does not include color property like typography base +// styles, color should be applied with color utilities. +/* Set the font size to #{$h6-size} */ +.h6 { font-size: $h6-size !important; } + +// Heading utilities +.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; } + +// Type utilities that match type sale +/* Set the font size to 26px */ +.f1 { + font-size: $h1-size-mobile !important; + + @include breakpoint(md) { font-size: $h1-size !important; } + +} + +/* Set the font size to 22px */ +.f2 { + font-size: $h2-size-mobile !important; + + @include breakpoint(md) { font-size: $h2-size !important; } +} + +/* Set the font size to 18px */ +.f3 { + font-size: $h3-size-mobile !important; + + @include breakpoint(md) { font-size: $h3-size !important; } + +} + +/* Set the font size to #{$h4-size} */ +.f4 { + font-size: $h4-size !important; + + @include breakpoint(md) { font-size: $h4-size !important; } + +} + +/* Set the font size to #{$h5-size} */ +.f5 { font-size: $h5-size !important; } +/* Set the font size to #{$h6-size} */ +.f6 { font-size: $h6-size !important; } + +// Type utils with light weight that match type scale +/* Set the font size to 40px and weight to light */ +.f00-light { + font-size: $h00-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h00-size !important; } + +} + +/* Set the font size to 32px and weight to light */ +.f0-light { + font-size: $h0-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h0-size !important; } + +} + +/* Set the font size to 26px and weight to light */ +.f1-light { + font-size: $h1-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h1-size !important; } + +} + +/* Set the font size to 22px and weight to light */ +.f2-light { + font-size: $h2-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h2-size !important; } + +} +// Same size and weight as .lead but without color property +/* Set the font size to 18px and weight to light */ +.f3-light { + font-size: $h3-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h3-size !important; } + +} + +// Smallest text size +/* Set the font size to ${#h6-size} */ +.text-small { font-size: $h6-size !important; } // 12px + +/* Large leading paragraphs */ +.lead { + margin-bottom: 30px; + font-size: $h3-size; + font-weight: $font-weight-light; + color: $gray-600; +} + +// Line-height variations +// Close to commonly used line-heights. Most line-heights +// combined with type size equate to whole pixels. +// Will be improved with future typography scale updates. +/* Set the line height to ultra condensed */ +.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; } +/* Set the line height to condensed */ +.lh-condensed { line-height: $lh-condensed !important; } +/* Set the line height to default */ +.lh-default { line-height: $lh-default !important; } + +// Text alignments +/* Text align to the right */ +.text-right { text-align: right !important; } +/* Text align to the left */ +.text-left { text-align: left !important; } +/* Text align to the center */ +.text-center { text-align: center !important; } + +// Responsive text alignment +// .text-md-left, .text-lg-right, ... +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + .text-#{$breakpoint}-right { text-align: right !important; } + .text-#{$breakpoint}-left { text-align: left !important; } + .text-#{$breakpoint}-center { text-align: center !important; } + } +} + +// Text styles +/* Set the font weight to normal */ +.text-normal { font-weight: normal !important; } +/* Set the font weight to bold */ +.text-bold { font-weight: $font-weight-bold !important;} +/* Set the font to italic */ +.text-italic { font-style: italic !important; } +/* Make text uppercase */ +.text-uppercase { text-transform: uppercase !important; } +/* Underline text */ +.no-underline { text-decoration: none !important; } +/* Don't wrap white space */ +.no-wrap { white-space: nowrap !important; } +/* Normal white space */ +.ws-normal { white-space: normal !important; } +/* Allow long lines with no spaces to line break */ +.wb-break-all { word-break: break-all !important; } + +.text-emphasized { + font-weight: $font-weight-bold; + color: $text-gray-dark; +} + +// List styles +.list-style-none { list-style: none !important; } + +// Text Shadows +/* Add a dark text shadow */ +.text-shadow-dark { + text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75); +} +/* Add a light text shadow */ +.text-shadow-light { + text-shadow: 0 1px 0 rgba($white, 0.5); +} diff --git a/packages/primer-utilities/lib/visibility-display.scss b/packages/primer-utilities/lib/visibility-display.scss new file mode 100644 index 0000000000..bd6fc911fb --- /dev/null +++ b/packages/primer-utilities/lib/visibility-display.scss @@ -0,0 +1,111 @@ +// Visibility and display utilities +// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility +// stylelint-disable comment-empty-line-before + +// Visibility utilities +/* Visibility hidden */ +.v-hidden { visibility: hidden !important; } +/* Visibility visible */ +.v-visible { visibility: visible !important; } + +// Display utilites +/* Set the display to table */ +.d-table { display: table !important; } +/* Set the display to table-cell */ +.d-table-cell { display: table-cell !important; } +/* Set the table-layout to fixed */ +.table-fixed { table-layout: fixed !important; } + +/* Set the display to block */ +.d-block { display: block !important; } +/* Set the display to inline */ +.d-inline { display: inline !important; } +/* Set the display to inline-block */ +.d-inline-block { display: inline-block !important; } +/* Set the display to flex */ +.d-flex { display: flex !important; } +/* Set the display to inline-flex */ +.d-inline-flex { display: inline-flex !important; } +/* Set the display to none */ +.d-none { display: none !important; } + +// Responsive display utlities +// .d-sm-none, .d-lg-inline, ... +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + /* Set the display to table at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-table { display: table !important; } + /* Set the display to table cell at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-table-cell { display: table-cell !important; } + /* Set the display to block at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-block { display: block !important; } + /* Set the display to inline at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-inline { display: inline !important; } + /* Set the display to inline block at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-inline-block { display: inline-block !important; } + /* Set the display to flex at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-flex { display: flex !important; } + /* Set the display to flex at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-inline-flex { display: inline-flex !important; } + /* Set the display to none at the #{$breakpoint} breakpoint */ + .d-#{$breakpoint}-none { display: none !important; } + } +} + +// Hide utilities for each breakpoint +// Each hide utility only applies to one breakpoint range. +@media (max-width: $width-sm) { + .hide-sm { + display: none !important; + } +} + +@media (min-width: $width-sm) and (max-width: $width-md) { + .hide-md { + display: none !important; + } +} + +@media (min-width: $width-md) and (max-width: $width-lg) { + .hide-lg { + display: none !important; + } +} + +@media (min-width: $width-lg) { + .hide-xl { + display: none !important; + } +} + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631 + word-wrap: normal; + border: 0; +} + +// Only display content on focus +.show-on-focus { + position: absolute; + width: 1px; + height: 1px; + margin: 0; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + + &:focus { + z-index: 20; + width: auto; + height: auto; + clip: auto; + } +} diff --git a/packages/primer-utilities/package.json b/packages/primer-utilities/package.json new file mode 100644 index 0000000000..620e6344bb --- /dev/null +++ b/packages/primer-utilities/package.json @@ -0,0 +1,38 @@ +{ + "version": "4.3.1", + "name": "primer-utilities", + "description": "Immutable, atomic CSS classes to rapidly build product", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/packages/primer-utilities", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss" + }, + "dependencies": { + "primer-support": "^4.0.3" + }, + "devDependencies": { + "primer-module-build": "*", + "stylelint": "*", + "stylelint-config-primer": "*" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +}

This is a blank slate

This is a blank slate

This is a blank slate

This is a blank slate

This is a blank slate

This is a blank slate

This is a blank slate

+ Box title +

+ Box title +

+ Box title +

Box with blue header

Danger zone

A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right

+ Box title + 12 +

+ Box title + 12 +

+ Box title +

+ Example form title +

+ Example form +