@primer/css 0.0.0-1ea75fe → 0.0.0-202110151527

package/dropdown/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "dropdown"
+generated: true
+---
+
+# Primer CSS: `dropdown` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/dropdown/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/dropdown.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/dropdown/dropdown.scss

@@ -0,0 +1,272 @@
+.dropdown {
+  position: relative;
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: '';
+  border-style: $border-style;
+  // stylelint-disable-next-line primer/borders
+  border-width: $spacer-1 $spacer-1 0;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
+// way the menu should render from the element triggering it.
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: $spacer-1;
+  padding-bottom: $spacer-1;
+  // stylelint-disable-next-line primer/spacing
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--color-canvas-overlay);
+  background-clip: padding-box;
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
+  box-shadow: var(--color-shadow-large);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+  // caret border
+  &::before {
+    // stylelint-disable-next-line primer/borders
+    border: $spacer-2 $border-style transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  // caret background (should match dropdown background)
+  &::after {
+    // stylelint-disable-next-line primer/borders
+    border: 7px $border-style transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+
+  // stylelint-disable-next-line selector-max-type
+  > ul {
+    list-style: none;
+  }
+}
+
+.dropdown-menu-no-overflow {
+  width: auto;
+
+  .dropdown-item {
+    padding: $spacer-1 $spacer-3;
+    overflow: visible;
+    text-overflow: inherit;
+  }
+}
+
+// Dropdown items (can be links or buttons)
+.dropdown-item {
+  display: block;
+  padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
+  overflow: hidden;
+  color: var(--color-fg-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:focus,
+  &:hover {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+    outline: none;
+
+    > .octicon {
+      color: inherit;
+      opacity: 1;
+    }
+
+    [class*='color-text-'] {
+      color: inherit !important;
+    }
+
+    > .Label {
+      color: inherit !important;
+      border-color: currentColor;
+    }
+  }
+
+  &.btn-link {
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.dropdown-signout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+.dropdown-divider {
+  display: block;
+  height: 0;
+  margin: $spacer-2 0;
+  border-top: $border-width $border-style var(--color-border-default);
+}
+
+.dropdown-header {
+  padding: $spacer-1 $spacer-3;
+  font-size: $h6-size;
+  color: var(--color-fg-muted);
+}
+
+.dropdown-item[aria-checked='false'] .octicon-check {
+  display: none;
+}
+
+// Directional classes
+//
+// Move the menu and the caret attached to it. Requires at least one of these on
+// the `.dropdown-menu` element.
+
+.dropdown-menu-w {
+  top: 0;
+  right: 100%;
+  left: auto;
+  width: auto;
+  margin-top: 0;
+  margin-right: $spacer-2;
+
+  &::before {
+    top: 10px;
+    right: -$spacer-3;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    right: -14px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-e {
+  top: 0;
+  left: 100%;
+  width: auto;
+  margin-top: 0;
+  margin-left: $spacer-2;
+
+  &::before {
+    top: 10px;
+    left: -$spacer-3;
+    border-color: transparent;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    left: -14px;
+    border-color: transparent;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-ne {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 3px;
+
+  &::before,
+  &::after {
+    top: auto;
+    right: auto;
+  }
+
+  &::before {
+    bottom: -$spacer-2;
+    left: 9px;
+    // stylelint-disable-next-line primer/borders
+    border-top: $spacer-2 $border-style var(--color-border-default);
+    // stylelint-disable-next-line primer/borders
+    border-right: $spacer-2 $border-style transparent;
+    border-bottom: 0;
+    // stylelint-disable-next-line primer/borders
+    border-left: $spacer-2 $border-style transparent;
+  }
+
+  &::after {
+    bottom: -7px;
+    left: 10px;
+    // stylelint-disable-next-line primer/borders
+    border-top: 7px $border-style var(--color-canvas-overlay);
+    // stylelint-disable-next-line primer/borders
+    border-right: 7px $border-style transparent;
+    border-bottom: 0;
+    // stylelint-disable-next-line primer/borders
+    border-left: 7px $border-style transparent;
+  }
+}
+
+.dropdown-menu-s {
+  right: 50%;
+  left: auto;
+  transform: translateX(50%);
+
+  &::before {
+    top: -$spacer-3;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  &::after {
+    top: -14px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+.dropdown-menu-sw {
+  right: 0;
+  left: auto;
+
+  &::before {
+    top: -$spacer-3;
+    right: 9px;
+    left: auto;
+  }
+
+  &::after {
+    top: -14px;
+    right: 10px;
+    left: auto;
+  }
+}
+
+.dropdown-menu-se {
+  &::before {
+    top: -$spacer-3;
+    left: 9px;
+  }
+
+  &::after {
+    top: -14px;
+    left: 10px;
+  }
+}

package/dropdown/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './dropdown.scss';

package/forms/README.md

@@ -1,37 +1,25 @@
-# Primer Forms
+---
+bundle: "forms"
+generated: true
+---
 
-> Style individual form controls and utilize common layouts.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `forms` bundle
 
 ## 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.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-forms/index.scss";
+@import "@primer/css/forms/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
-
-Find further documentation at [primer.style/css/components/forms](https://primer.style/css/components/forms).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/forms.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/forms/form-control.scss

@@ -17,57 +17,85 @@ label {
 
 .form-control,
 .form-select {
-  min-height: 34px;
-  padding: 6px $spacer-2;
-  font-size: $h4-size;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px 12px;
+  font-size: $body-font-size;
+  // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-default);
   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;
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
   outline: none;
-  box-shadow: $form-control-shadow;
+  box-shadow: var(--color-primer-shadow-inset);
 
   &.focus,
   &:focus {
-    border-color: $blue-400;
+    border-color: var(--color-accent-emphasis);
     outline: none;
-    box-shadow: $form-control-shadow, $btn-input-focus-shadow;
+    box-shadow: var(--color-primer-shadow-focus);
+  }
+
+  &[disabled] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    opacity: 1; // Fix for Safari iOS
+
+    &::placeholder {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 
-  // Ensures inputs don't zoom on mobile but are body-font size on desktop
-  @include breakpoint(md) {
-    font-size: $body-font-size;
+  // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
+  @supports (-webkit-touch-callout: none) {
+    font-size: $h4-size;
+    @include breakpoint(md) {
+      font-size: $body-font-size;
+    }
   }
 }
 
+// Textarea
+textarea.form-control {
+  padding-top: $spacer-2;
+  padding-bottom: $spacer-2;
+  line-height: $lh-default;
+}
+
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: $bg-gray-light;
+  background-color: var(--color-canvas-inset);
 
-  &:focus { background-color: $bg-white; }
+  &:focus {
+    background-color: var(--color-canvas-default);
+  }
 }
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: $text-gray-light;
+  color: var(--color-fg-subtle);
+  opacity: 1; // override opacity in normalize.css
 }
 
 // Mini inputs, to match .minibutton
 .input-sm {
-  min-height: 28px;
+  min-height: $size-4;
+  // stylelint-disable-next-line primer/spacing
   padding-top: 3px;
+  // stylelint-disable-next-line primer/spacing
   padding-bottom: 3px;
   font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
   line-height: 20px;
 }
 
 // Large inputs
 .input-lg {
-  padding: $spacer-1 10px;
   font-size: $h4-size;
 }
 
@@ -97,7 +125,9 @@ label {
 //
 // For checkboxes and radio button selections.
 .form-checkbox {
+  // stylelint-disable-next-line primer/spacing
   padding-left: 20px;
+  // stylelint-disable-next-line primer/spacing
   margin: 15px 0;
   vertical-align: middle;
 
@@ -105,16 +135,18 @@ label {
     em.highlight {
       position: relative;
       left: -$spacer-1;
+      // stylelint-disable-next-line primer/spacing
       padding: 2px $spacer-1;
       font-style: normal;
-      background: $yellow-100;
-      border-radius: 3px;
+      background: var(--color-attention-subtle);
+      border-radius: $border-radius;
     }
   }
 
-  input[type=checkbox],
-  input[type=radio] {
+  input[type='checkbox'],
+  input[type='radio'] {
     float: left;
+    // stylelint-disable-next-line primer/spacing
     margin: 5px 0 0 -20px;
     vertical-align: middle;
   }
@@ -124,7 +156,7 @@ label {
     margin: 0;
     font-size: $font-size-small;
     font-weight: $font-weight-normal;
-    color: $gray-600;
+    color: var(--color-fg-muted);
   }
 }
 
@@ -136,7 +168,7 @@ label {
   &:checked {
     // child of sibling or sibling
     ~ * .form-checkbox-details,
-    ~ .form-checkbox-details { // eslint-disable selector-combinator-space-before
+    ~ .form-checkbox-details {
       display: block;
     }
   }
@@ -147,18 +179,22 @@ label {
 // Wrap field groups in `<div.hfields>` to lay them out horizontally - great for
 // the top of pages with autosave.
 .hfields {
+  // stylelint-disable-next-line primer/spacing
   margin: 15px 0;
   @include clearfix;
 
   .form-group {
     float: left;
+    // stylelint-disable-next-line primer/spacing
     margin: 0 30px 0 0;
 
-    dt {
+    dt, // TODO: Deprecate
+    .form-group-header {
       label {
         display: inline-block;
+        // stylelint-disable-next-line primer/spacing
         margin: 5px 0 0;
-        color: $gray-600;
+        color: var(--color-fg-muted);
       }
 
       img {
@@ -170,10 +206,14 @@ label {
 
   .btn {
     float: left;
+    // stylelint-disable-next-line primer/spacing
     margin: 28px 25px 0 -20px;
   }
 
-  .form-select { margin-top: 5px; }
+  .form-select {
+    // stylelint-disable-next-line primer/spacing
+    margin-top: 5px;
+  }
 }
 
 // Hide the up/down buttons in <input type="number"> in the login form, the
@@ -194,6 +234,7 @@ input::-webkit-inner-spin-button {
     float: right;
 
     + .btn {
+      // stylelint-disable-next-line primer/spacing
       margin-right: 5px;
     }
   }
@@ -201,17 +242,20 @@ input::-webkit-inner-spin-button {
 
 .form-warning {
   padding: $spacer-2 10px;
+  // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
   font-size: $h5-size;
-  color: $yellow-900;
-  background: $yellow-100;
-  border: 1px solid $border-yellow;
-  border-radius: 3px;
+  color: var(--color-attention-fg);
+  background: var(--color-attention-subtle);
+  border: $border-width $border-style var(--color-attention-emphasis);
+  border-radius: $border-radius;
 
   p {
     margin: 0;
     line-height: $lh-default;
   }
 
-  a { font-weight: $font-weight-bold; }
+  a {
+    font-weight: $font-weight-bold;
+  }
 }