From baf7534870460015c194281ad98e1fef99911ef1 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Tue, 14 Apr 2020 20:58:19 +0800 Subject: Remove redundant Primer CSS --- assets/sass/@primer/css/forms/README.md | 25 -- assets/sass/@primer/css/forms/form-control.scss | 259 --------------- assets/sass/@primer/css/forms/form-group.scss | 265 --------------- assets/sass/@primer/css/forms/form-select.scss | 39 --- assets/sass/@primer/css/forms/form-validation.scss | 365 --------------------- assets/sass/@primer/css/forms/index.scss | 7 - assets/sass/@primer/css/forms/input-group.scss | 53 --- assets/sass/@primer/css/forms/radio-group.scss | 43 --- 8 files changed, 1056 deletions(-) delete mode 100644 assets/sass/@primer/css/forms/README.md delete mode 100644 assets/sass/@primer/css/forms/form-control.scss delete mode 100644 assets/sass/@primer/css/forms/form-group.scss delete mode 100644 assets/sass/@primer/css/forms/form-select.scss delete mode 100644 assets/sass/@primer/css/forms/form-validation.scss delete mode 100644 assets/sass/@primer/css/forms/index.scss delete mode 100644 assets/sass/@primer/css/forms/input-group.scss delete mode 100644 assets/sass/@primer/css/forms/radio-group.scss (limited to 'assets/sass/@primer/css/forms') diff --git a/assets/sass/@primer/css/forms/README.md b/assets/sass/@primer/css/forms/README.md deleted file mode 100644 index e092504..0000000 --- a/assets/sass/@primer/css/forms/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "forms" -generated: true ---- - -# Primer CSS: `forms` 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/forms/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/forms.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/forms/form-control.scss b/assets/sass/@primer/css/forms/form-control.scss deleted file mode 100644 index 778f320..0000000 --- a/assets/sass/@primer/css/forms/form-control.scss +++ /dev/null @@ -1,259 +0,0 @@ -// Needs refactoring -// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors -// stylelint-disable selector-max-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; - // stylelint-disable-next-line primer/spacing - padding: 6px $spacer-2; - font-size: $h4-size; - // stylelint-disable-next-line primer/typography - 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: $border-width $border-style $border-gray-dark; - border-radius: $border-radius; - outline: none; - box-shadow: $form-control-shadow; - - &.focus, - &:focus { - // stylelint-disable-next-line primer/borders - border-color: $blue-400; - outline: none; - box-shadow: $form-control-shadow, $btn-input-focus-shadow; - } - - // Ensures inputs don't zoom on mobile but are body-font size on desktop - @include breakpoint(md) { - font-size: $body-font-size; - } -} - -// Inputs with contrast for easy light gray backgrounds against white. -.input-contrast { - background-color: $bg-gray-light; - - &:focus { background-color: $bg-white; } -} - -// Inputs to be used against dark backgrounds. -.input-dark { - color: $text-white; - // stylelint-disable-next-line primer/colors - background-color: $white-fade-15; - border-color: transparent; - - &::placeholder { - color: inherit; - opacity: 0.6; // inceases contrast ratio to 4.52 - } - - &.focus, - &:focus { - // stylelint-disable-next-line primer/borders - border-color: $black-fade-30; - // stylelint-disable-next-line primer/box-shadow - box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4); - } -} - -// Custom styling for HTML5 validation bubbles (WebKit only) -::placeholder { - color: $text-gray-light; -} - -// Mini inputs, to match .minibutton -.input-sm { - min-height: 28px; - // 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; -} - -// 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 { - // stylelint-disable-next-line primer/spacing - padding-left: 20px; - // stylelint-disable-next-line primer/spacing - margin: 15px 0; - vertical-align: middle; - - label { - em.highlight { - position: relative; - left: -$spacer-1; - // stylelint-disable-next-line primer/spacing - padding: 2px $spacer-1; - font-style: normal; - // stylelint-disable-next-line primer/colors - background: $yellow-100; - border-radius: $border-radius; - } - } - - input[type=checkbox], - input[type=radio] { - float: left; - // stylelint-disable-next-line primer/spacing - margin: 5px 0 0 -20px; - vertical-align: middle; - } - - .note { - display: block; - margin: 0; - font-size: $font-size-small; - font-weight: $font-weight-normal; - color: $text-gray; - } -} - -.form-checkbox-details { - display: none; -} - -.form-checkbox-details-trigger { - &:checked { - // child of sibling or sibling - ~ * .form-checkbox-details, - ~ .form-checkbox-details { // eslint-disable selector-combinator-space-before - display: block; - } - } -} - -// Field groups -// -// Wrap field groups in `` 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, // TODO: Deprecate - .form-group-header { - label { - display: inline-block; - // stylelint-disable-next-line primer/spacing - margin: 5px 0 0; - color: $text-gray; - } - - img { - position: relative; - top: -2px; - } - } - } - - .btn { - float: left; - // stylelint-disable-next-line primer/spacing - margin: 28px 25px 0 -20px; - } - - // stylelint-disable-next-line primer/spacing - .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 { - // stylelint-disable-next-line primer/spacing - margin-right: 5px; - } - } -} - -.form-warning { - padding: $spacer-2 10px; - // stylelint-disable-next-line primer/spacing - margin: 10px 0; - font-size: $h5-size; - // stylelint-disable-next-line primer/colors - color: $yellow-900; - // stylelint-disable-next-line primer/colors - background: $yellow-100; - border: $border-width $border-style $border-yellow; - border-radius: $border-radius; - - p { - margin: 0; - line-height: $lh-default; - } - - a { font-weight: $font-weight-bold; } -} diff --git a/assets/sass/@primer/css/forms/form-group.scss b/assets/sass/@primer/css/forms/form-group.scss deleted file mode 100644 index c8db050..0000000 --- a/assets/sass/@primer/css/forms/form-group.scss +++ /dev/null @@ -1,265 +0,0 @@ -// stylelint-disable selector-max-compound-selectors -// stylelint-disable selector-max-type - -// Form groups -// -// Usage: -// -//
-//
containing the label -//
containing the form elements -//
- -.form-group { - // stylelint-disable-next-line primer/spacing - margin: 15px 0; - - // Text fields - .form-control { - width: 440px; - max-width: 100%; - // stylelint-disable-next-line primer/spacing - 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, // TODO: Deprecate - .form-group-header { - // stylelint-disable-next-line primer/spacing - margin: 0 0 6px; - } - - label { - position: relative; - } - - &.flattened dt, // TODO: Deprecate - &.flattened .form-group-header { - float: left; - margin: 0; - // stylelint-disable-next-line primer/typography - line-height: 32px; - } - - &.flattened dd, // TODO: Deprecate - &.flattened .form-group-body { - // stylelint-disable-next-line primer/typography - line-height: 32px; - } - - // - // Form Elements - // - // stylelint-disable selector-no-qualifying-type - dd, // TODO: Deprecate - .form-group-body { - h4 { - margin: $spacer-1 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, // TODO: Deprecate - .form-group-header label::after { - // stylelint-disable-next-line primer/spacing - 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: $font-size-small; - 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 - - &.successed, - &.warn, - &.errored { - .success, - .warning, - .error { - position: absolute; - z-index: 10; - display: block; // Show up in errored/warn state - max-width: 450px; // Keep our long errors readable - // stylelint-disable-next-line primer/spacing - padding: 5px $spacer-2; - margin: $spacer-1 0 0; - // stylelint-disable-next-line primer/typography - font-size: 13px; - font-weight: $font-weight-normal; - border-style: $border-style; - border-width: $border-width; - border-radius: $border-radius; - - &::after, - &::before { - position: absolute; - bottom: 100%; - left: 10px; - z-index: 15; - width: 0; - height: 0; - pointer-events: none; - content: " "; - // stylelint-disable-next-line primer/borders - border: $border-style transparent; - } - - &::after { - // stylelint-disable-next-line primer/borders - border-width: 5px; - } - - &::before { - // stylelint-disable-next-line primer/spacing - margin-left: -1px; - // stylelint-disable-next-line primer/borders - border-width: 6px; - } - } - } - - &.successed { - .success { - // stylelint-disable-next-line primer/colors - color: $green-900; - // stylelint-disable-next-line primer/colors - background-color: $green-100; - border-color: $border-green; - - &::after { - // stylelint-disable-next-line primer/borders - border-bottom-color: $green-100; - } - - &::before { - border-bottom-color: $border-green; - } - } - } - - &.warn { - .warning { - // stylelint-disable-next-line primer/colors - color: $yellow-900; - // stylelint-disable-next-line primer/colors - background-color: $yellow-100; - border-color: $border-yellow; - - &::after { - // stylelint-disable-next-line primer/borders - border-bottom-color: $yellow-100; - } - - &::before { - border-bottom-color: $border-yellow; - } - } - } - - &.errored { - label { - color: $text-red; - } - - .error { - // stylelint-disable-next-line primer/colors - color: $red-900; - background-color: $bg-red-light; - border-color: $border-red-light; - - &::after { - // stylelint-disable-next-line primer/borders - border-bottom-color: $bg-red-light; - } - - &::before { - border-bottom-color: $border-red-light; - } - } - } -} - -.note { - min-height: 17px; - margin: $spacer-1 0 2px; - font-size: $font-size-small; - color: $text-gray; - - .spinner { - // stylelint-disable-next-line primer/spacing - margin-right: 3px; - vertical-align: middle; - } -} diff --git a/assets/sass/@primer/css/forms/form-select.scss b/assets/sass/@primer/css/forms/form-select.scss deleted file mode 100644 index ac98967..0000000 --- a/assets/sass/@primer/css/forms/form-select.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Custom select -// -// Apply `.select` to any `