mirror of
https://github.com/netzbegruenung/podcast.netzbegruenung.de.git
synced 2024-05-04 03:43:41 +02:00
230 lines
6.2 KiB
SCSS
230 lines
6.2 KiB
SCSS
// sass-lint:disable no-vendor-prefixes, no-css-comments
|
|
|
|
// Form defaults
|
|
//
|
|
// These are the default base styles applied to HTML form elements.
|
|
//
|
|
// Component classes can override these styles, but if no class applies a style
|
|
// to an HTML form element, these styles will be the ones displayed.
|
|
|
|
//
|
|
// The following rules are from normalize.css and help to fix inconsistencies
|
|
// across various browsers. You should probably leave these rules as is and jump
|
|
// to the "Buttons" rule on line 92 before you start editing this file.
|
|
//
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
// Change the font styles in all browsers (opinionated).
|
|
@include typeface(body);
|
|
@include line-height(1);
|
|
font-size: 100%;
|
|
// Keep form elements constrained in their containers.
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
// Remove the margin in Firefox and Safari.
|
|
margin: 0;
|
|
}
|
|
|
|
// Show the overflow in IE.
|
|
button {
|
|
overflow: visible;
|
|
}
|
|
|
|
// Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
// Show the overflow in Edge.
|
|
input {
|
|
overflow: visible;
|
|
}
|
|
|
|
// Correct the cursor style of increment and decrement buttons in Chrome.
|
|
[type='number']::-webkit-inner-spin-button,
|
|
[type='number']::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
[type='search'] {
|
|
// Correct the odd appearance in Chrome and Safari.
|
|
-webkit-appearance: textfield;
|
|
// Correct the outline style in Safari.
|
|
outline-offset: -2px;
|
|
|
|
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
// Correct the inability to style clickable types in iOS and Safari.
|
|
-webkit-appearance: button;
|
|
// Change font properties to `inherit` in Safari.
|
|
font: inherit;
|
|
}
|
|
|
|
// Buttons
|
|
//
|
|
// Buttons built with the `<button>` element are the most flexible for styling
|
|
// purposes. But `<input>` elements with `type` set to `submit`, `image`,
|
|
// `reset`, or `button` are also supported.
|
|
//
|
|
// Below is the default button styling. To see variations on the button styling
|
|
// see the [button component](section-forms.html#kssref-forms-button).
|
|
//
|
|
// :hover - Hover styling.
|
|
// :active:hover - Depressed button styling.
|
|
|
|
@import 'components/button/button';
|
|
|
|
// The %text-form-element can be used to style `<input>` text types and
|
|
// `<textarea>` elements at the same time.
|
|
%text-form-element {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Inputs
|
|
//
|
|
// The `<input>` element is mostly used for text-based inputs that include the
|
|
// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
|
|
// `time`, `number`, `range`, `color`, and `file`.
|
|
//
|
|
// Note: Certain font size values applied to `number` inputs cause the cursor
|
|
// style of the decrement button to change from `default` to `text`.
|
|
//
|
|
// Note: The search input is not fully stylable by default. In Chrome and Safari
|
|
// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
|
|
// Chrome and Safari on Windows you can't control `border` properly. It will
|
|
// apply `border-width` but will only show a border color (which cannot be
|
|
// controlled) for the outer 1px of that border. Applying
|
|
// `-webkit-appearance: textfield` addresses these issues without removing the
|
|
// benefits of search inputs (e.g. showing past searches). Safari (but not
|
|
// Chrome) will clip the cancel button on when it has padding (and `textfield`
|
|
// appearance).
|
|
|
|
[type='text'],
|
|
[type='search'],
|
|
[type='tel'],
|
|
[type='url'],
|
|
[type='email'],
|
|
[type='password'],
|
|
[type='date'],
|
|
[type='time'],
|
|
[type='number'] {
|
|
@extend %text-form-element !optional;
|
|
}
|
|
|
|
[type='range'] {
|
|
// Add your styles.
|
|
}
|
|
|
|
[type='color'] {
|
|
// Add your styles.
|
|
}
|
|
|
|
[type='file'] {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Checkboxes
|
|
//
|
|
// If an `<input>` element has the `type='checkbox'` attribute set, the form
|
|
// field is displayed as a checkbox.
|
|
//
|
|
// It is recommended that you do not style checkbox and radio inputs as
|
|
// Firefox's implementation does not respect box-sizing, padding, or width.
|
|
|
|
// Radio buttons
|
|
//
|
|
// If an `<input>` element has the `type='radio'` attribute set, the form field
|
|
// is displayed as a radio button.
|
|
//
|
|
// It is recommended that you do not style checkbox and radio inputs as
|
|
// Firefox's implementation does not respect box-sizing, padding, or width.
|
|
|
|
[type='checkbox'],
|
|
[type='radio'] {
|
|
// Add the correct box sizing in IE 10-.
|
|
box-sizing: border-box;
|
|
// Remove the padding in IE 10-.
|
|
padding: 0;
|
|
}
|
|
|
|
// Fieldsets
|
|
//
|
|
// The `<fieldset>` element groups a set of form fields, optionally under a
|
|
// common name given by the `<legend>` element.
|
|
|
|
fieldset {
|
|
// Correct the padding in Firefox.
|
|
@include padding(.35 .5 .65);
|
|
border: 1px solid $border;
|
|
}
|
|
|
|
legend {
|
|
// Correct the text wrapping in Edge and IE.
|
|
box-sizing: border-box;
|
|
display: table;
|
|
max-width: 100%;
|
|
// Align legend text with a fieldset's text while removing left padding so
|
|
// people aren't caught out if they zero out fieldset padding.
|
|
margin-left: -5px;
|
|
padding: 0 5px;
|
|
// Correct the color inheritance from `fieldset` elements in IE.
|
|
color: inherit;
|
|
white-space: normal;
|
|
}
|
|
|
|
// Labels
|
|
//
|
|
// The `<label>` element represents a caption of a form field. The label can be
|
|
// associated with a specific form control by using the `for` attribute or by
|
|
// putting the form control inside the label element itself.
|
|
|
|
label {
|
|
// Drupal-style form labels.
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// Select list
|
|
//
|
|
// The `<select>` element represents a form field for selecting amongst a set of
|
|
// options.
|
|
//
|
|
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
|
// styling of `<select>`, unless a `border` property is set. The default font
|
|
// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and
|
|
// Safari on OS X.
|
|
|
|
select {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Progress
|
|
//
|
|
// The `<progress>` element represents the completion progress of a task.
|
|
|
|
progress {
|
|
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
// Text areas
|
|
//
|
|
// The `<textarea>` element represents a multi-line plain text form field.
|
|
|
|
textarea {
|
|
@extend %text-form-element !optional;
|
|
// Remove the default vertical scrollbar in IE.
|
|
overflow: auto;
|
|
}
|