pico/scss/content/_button.scss
Lucas 456539a52e New form elements
- CSS icons color dynamization in `_color.scss`
- Bigger Checkboxes and Radio buttons
- Small refactoring for Checkboxes and Radio buttons in `_form.scss` and `form-checkbox-radio.scss`
- Styles for new form elements: `type=date`, `type=datetime-local`, `type=month`, `type=time`, `type=week`, `type=range`, `type=search`
- Reordering @import in `pico.scss` and `pico.slim.scss`
2020-09-24 22:35:30 +07:00

105 lines
2.0 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* Button
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari
// 3. Show the overflow in Edge
button {
margin: 0; // 2
overflow: visible; // 3
font-family: inherit; // 1
text-transform: none; // 1
}
// Correct the inability to style clickable types in iOS and Safari
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
// Pico
//
button {
display: block;
width: 100%;
margin-bottom: $spacing-typography;
}
a[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] {
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
border: 1px solid transparent;
border-radius: $round;
outline: none;
background-color: var(--primary);
color: var(--primary-inverse);
font-size: 1rem;
font-weight: normal;
line-height: $line-height;
text-align: center;
cursor: pointer;
@if $enable-transitions {
transition:
background-color $transition,
color $transition,
box-shadow $transition;
}
&:hover,
&:active,
&:focus {
background-color: var(--primary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
}
// Input [type="reset"]
input[type="reset"] {
cursor: pointer;
}
// Button [disabled]
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
&[disabled] {
opacity: .5;
pointer-events: none;
}
}