mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styles reordering for better slim version

Browse source
This commit is contained in:
Lucas 2020-09-25 00:17:43 +07:00
parent b37ef21253
commit 67e865d32c
10 changed files with 133 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

5
scss/content/_form-alt-input-types.scss
View file

@ -150,6 +150,7 @@
border: $border-thumb solid var(--background);
border-radius: 50%;
background-color: var(--text);
cursor: pointer;
@if $enable-transitions {
transition:
@ -166,6 +167,7 @@
border: 0;
border-radius: 50%;
background-color: var(--text);
cursor: pointer;
@if $enable-transitions {
transition:
@ -182,6 +184,7 @@
border: 0;
border-radius: 50%;
background-color: var(--text);
cursor: pointer;
@if $enable-transitions {
transition:
@ -239,7 +242,7 @@
}
// Search
input[type="search"] {
[type="search"] {
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
// Source: https://feathericons.com/

59
scss/content/_form.scss
View file

@ -117,7 +117,7 @@ textarea {
// ––––––––––––––––––––
// Force height for alternatives input types
input:not([type="checkbox"]):not([type="radio"]) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
}
@ -129,15 +129,6 @@ fieldset {
border: 0;
}
// Layout
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
form small {
display: block;
width: 100%;
}
// Spacing beteen label and input
$spacing-label-input: $spacing-typography/12;
@ -149,7 +140,16 @@ fieldset legend {
vertical-align: middle;
}
// Inputs (Not Checkboxes, Radios, Range, File)
// Global layout
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
form small {
display: block;
width: 100%;
}
// Reset appearance (Not Checkboxes, Radios, Range and File)
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
@ -160,14 +160,7 @@ textarea {
vertical-align: middle;
}
// Inputs (Not Checkboxes, Radios)
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
margin-bottom: $spacing-typography;
}
// Inputs (Commons styles)
// Commons styles
input,
select,
textarea {
@ -198,10 +191,6 @@ textarea {
border-color: var(--primary);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
&[readonly],
&[disabled] {
border-color: var(--muted-border);
@ -220,13 +209,8 @@ textarea {
cursor: not-allowed;
opacity: .5;
}
}
// Validation states for Text, Select & Textarea
input,
select,
textarea {
// Validation states
@if $enable-input-states and $enable-classes {
// Validation states
@ -250,6 +234,22 @@ textarea {
}
}
// Margin bottom (Not Checkboxes andRadios)
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
margin-bottom: $spacing-typography;
}
// Focus styles (Not Range and File)
input:not([type="range"]):not([type="file"]),
select,
textarea {
&:focus {
box-shadow: 0 0 0 0.2rem var(--primary-focus);
}
}
// Select
select {
@ -274,6 +274,7 @@ form small {
color: var(--muted-text);
}
// Helper: padding
input,
select,
textarea {