mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 09:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: resolved merge conflicts and updated styles, reduced markup

Browse source
This commit is contained in:
KiranMantha 2021-12-31 12:39:27 +05:30
parent 002008996d
commit 25d7c7983f
16 changed files with 137 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/pico.classless.css
View file

@ -2034,11 +2034,11 @@ progress::-moz-progress-bar {
} }
} }
details[role=dropdown] { details[role=dropdown] {
position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
} }
details[role=dropdown] summary { details[role=dropdown] summary {
position: relative;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
@ -2048,11 +2048,7 @@ details[role=dropdown] summary {
details[role=dropdown] summary::after { details[role=dropdown] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }
details[role=dropdown] summary + div { details[role=dropdown] summary + ul {
position: relative;
margin: 0;
}
details[role=dropdown] summary + div ul {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
top: auto; top: auto;
@ -2067,33 +2063,33 @@ details[role=dropdown] summary + div ul {
background-color: var(--background-color); background-color: var(--background-color);
list-style: none; list-style: none;
} }
details[role=dropdown] summary + div ul li { details[role=dropdown] summary + ul li {
margin-bottom: 0; margin-bottom: 0;
} }
details[role=dropdown] summary + div ul li::marker { details[role=dropdown] summary + ul li::marker {
content: ""; content: "";
} }
details[role=dropdown] summary + div ul li input[type=radio], details[role=dropdown] summary + ul li input[type=radio],
details[role=dropdown] summary + div ul li input[type=checkbox] { details[role=dropdown] summary + ul li input[type=checkbox] {
display: none; display: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
details[role=dropdown] summary + div ul li label { details[role=dropdown] summary + ul li label {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
line-height: 1; line-height: 1;
} }
details[role=dropdown] summary + div ul li label:hover { details[role=dropdown] summary + ul li label:hover {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + div ul li input:checked + label { details[role=dropdown] summary + ul li input:checked + label {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + div ul li input[type=checkbox] + label:before { details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
display: inline-block; display: inline-block;
width: calc(var(--spacing) * 1.2); width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2); height: calc(var(--spacing) * 1.2);
@ -2103,7 +2099,7 @@ details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
content: ""; content: "";
vertical-align: text-bottom; vertical-align: text-bottom;
} }
details[role=dropdown] summary + div ul li input[type=checkbox]:checked + label:before { details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-size: calc(var(--spacing) * 0.8) auto; background-size: calc(var(--spacing) * 0.8) auto;

3
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

3
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

26
css/pico.css
View file

@ -2317,11 +2317,11 @@ progress::-moz-progress-bar {
} }
} }
details[role=dropdown] { details[role=dropdown] {
position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
} }
details[role=dropdown] summary { details[role=dropdown] summary {
position: relative;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
@ -2331,11 +2331,7 @@ details[role=dropdown] summary {
details[role=dropdown] summary::after { details[role=dropdown] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }
details[role=dropdown] summary + div { details[role=dropdown] summary + ul {
position: relative;
margin: 0;
}
details[role=dropdown] summary + div ul {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
top: auto; top: auto;
@ -2350,33 +2346,33 @@ details[role=dropdown] summary + div ul {
background-color: var(--background-color); background-color: var(--background-color);
list-style: none; list-style: none;
} }
details[role=dropdown] summary + div ul li { details[role=dropdown] summary + ul li {
margin-bottom: 0; margin-bottom: 0;
} }
details[role=dropdown] summary + div ul li::marker { details[role=dropdown] summary + ul li::marker {
content: ""; content: "";
} }
details[role=dropdown] summary + div ul li input[type=radio], details[role=dropdown] summary + ul li input[type=radio],
details[role=dropdown] summary + div ul li input[type=checkbox] { details[role=dropdown] summary + ul li input[type=checkbox] {
display: none; display: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
details[role=dropdown] summary + div ul li label { details[role=dropdown] summary + ul li label {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
line-height: 1; line-height: 1;
} }
details[role=dropdown] summary + div ul li label:hover { details[role=dropdown] summary + ul li label:hover {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + div ul li input:checked + label { details[role=dropdown] summary + ul li input:checked + label {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + div ul li input[type=checkbox] + label:before { details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
display: inline-block; display: inline-block;
width: calc(var(--spacing) * 1.2); width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2); height: calc(var(--spacing) * 1.2);
@ -2386,7 +2382,7 @@ details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
content: ""; content: "";
vertical-align: text-bottom; vertical-align: text-bottom;
} }
details[role=dropdown] summary + div ul li input[type=checkbox]:checked + label:before { details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-size: calc(var(--spacing) * 0.8) auto; background-size: calc(var(--spacing) * 0.8) auto;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

26
css/pico.fluid.classless.css
View file

@ -2004,11 +2004,11 @@ progress::-moz-progress-bar {
} }
} }
details[role=dropdown] { details[role=dropdown] {
position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
} }
details[role=dropdown] summary { details[role=dropdown] summary {
position: relative;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
@ -2018,11 +2018,7 @@ details[role=dropdown] summary {
details[role=dropdown] summary::after { details[role=dropdown] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }
details[role=dropdown] summary + div { details[role=dropdown] summary + ul {
position: relative;
margin: 0;
}
details[role=dropdown] summary + div ul {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
top: auto; top: auto;
@ -2037,33 +2033,33 @@ details[role=dropdown] summary + div ul {
background-color: var(--background-color); background-color: var(--background-color);
list-style: none; list-style: none;
} }
details[role=dropdown] summary + div ul li { details[role=dropdown] summary + ul li {
margin-bottom: 0; margin-bottom: 0;
} }
details[role=dropdown] summary + div ul li::marker { details[role=dropdown] summary + ul li::marker {
content: ""; content: "";
} }
details[role=dropdown] summary + div ul li input[type=radio], details[role=dropdown] summary + ul li input[type=radio],
details[role=dropdown] summary + div ul li input[type=checkbox] { details[role=dropdown] summary + ul li input[type=checkbox] {
display: none; display: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
details[role=dropdown] summary + div ul li label { details[role=dropdown] summary + ul li label {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
line-height: 1; line-height: 1;
} }
details[role=dropdown] summary + div ul li label:hover { details[role=dropdown] summary + ul li label:hover {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + div ul li input:checked + label { details[role=dropdown] summary + ul li input:checked + label {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + div ul li input[type=checkbox] + label:before { details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
display: inline-block; display: inline-block;
width: calc(var(--spacing) * 1.2); width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2); height: calc(var(--spacing) * 1.2);
@ -2073,7 +2069,7 @@ details[role=dropdown] summary + div ul li input[type=checkbox] + label:before {
content: ""; content: "";
vertical-align: text-bottom; vertical-align: text-bottom;
} }
details[role=dropdown] summary + div ul li input[type=checkbox]:checked + label:before { details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-size: calc(var(--spacing) * 0.8) auto; background-size: calc(var(--spacing) * 0.8) auto;

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

46
docs/dropdown.html
View file

File diff suppressed because one or more lines are too long

48
docs/src/dropdown.html
View file

@ -20,7 +20,6 @@
<article aria-label="Dropdown examples"> <article aria-label="Dropdown examples">
<details role="dropdown"> <details role="dropdown">
<summary>Single select</summary> <summary>Single select</summary>
<div>
<ul> <ul>
<li> <li>
<input type="radio" id="01" name="option1" /> <input type="radio" id="01" name="option1" />
@ -31,11 +30,9 @@
<label for="02">Option 2</label> <label for="02">Option 2</label>
</li> </li>
</ul> </ul>
</div>
</details> </details>
<details role="dropdown"> <details role="dropdown">
<summary>Multi-select</summary> <summary>Multi-select</summary>
<div>
<ul> <ul>
<li> <li>
<input type="checkbox" id="11" name="option2" /> <input type="checkbox" id="11" name="option2" />
@ -46,7 +43,6 @@
<label for="12">Option 2</label> <label for="12">Option 2</label>
</li> </li>
</ul> </ul>
</div>
</details> </details>
</article> </article>
@ -76,18 +72,16 @@
<em>===============================</em> <em>===============================</em>
&lt;<b>details role="dropdown"</b>&gt; &lt;<b>details role="dropdown"</b>&gt;
&lt;<b>summary</b>&gt;Single select&lt;<b>/summary</b>&gt; &lt;<b>summary</b>&gt;Single select&lt;<b>/summary</b>&gt;
&lt;<b>div</b>&gt; &lt;<b>ul</b>&gt;
&lt;<b>ul</b>&gt; &lt;<b>li</b>&gt;
&lt;<b>li</b>&gt; &lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
&lt;<b>input type="radio" id="01" name="option1" /</b>&gt; &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
&lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt; &lt;<b>/li</b>&gt;
&lt;<b>/li</b>&gt; &lt;<b>li</b>&gt;
&lt;<b>li</b>&gt; &lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
&lt;<b>input type="radio" id="02" name="option1" /</b>&gt; &lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
&lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt; &lt;<b>/li</b>&gt;
&lt;<b>/li</b>&gt; &lt;<b>/ul</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/div</b>&gt;
&lt;<b>/details</b>&gt; &lt;<b>/details</b>&gt;
@ -95,18 +89,16 @@
<em>===============================</em> <em>===============================</em>
&lt;<b>details role="dropdown"</b>&gt; &lt;<b>details role="dropdown"</b>&gt;
&lt;<b>summary</b>&gt;Multi select&lt;<b>/summary</b>&gt; &lt;<b>summary</b>&gt;Multi select&lt;<b>/summary</b>&gt;
&lt;<b>div</b>&gt; &lt;<b>ul</b>&gt;
&lt;<b>ul</b>&gt; &lt;<b>li</b>&gt;
&lt;<b>li</b>&gt; &lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
&lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt; &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
&lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt; &lt;<b>/li</b>&gt;
&lt;<b>/li</b>&gt; &lt;<b>li</b>&gt;
&lt;<b>li</b>&gt; &lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
&lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt; &lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
&lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt; &lt;<b>/li</b>&gt;
&lt;<b>/li</b>&gt; &lt;<b>/ul</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/div</b>&gt;
&lt;<b>/details</b>&gt; &lt;<b>/details</b>&gt;
</code> </code>
</pre> </pre>

2
docs/typography.html
View file

File diff suppressed because one or more lines are too long

111
scss/components/_dropdown.scss
View file

@ -1,9 +1,9 @@
details[role='dropdown'] { details[role='dropdown'] {
position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
summary { summary {
position: relative;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
@ -14,71 +14,66 @@ details[role='dropdown'] {
transform: rotate(0deg); transform: rotate(0deg);
} }
& + div { & + ul {
position: relative; z-index: 100;
position: absolute;
top: auto;
right: 0px;
left: 0px;
margin: 0; margin: 0;
padding: 0;
border: var(--border-width) solid var(--form-element-border-color);
border-top: none;
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
background-color: var(--background-color);
list-style: none;
ul { li {
z-index: 100; margin-bottom: 0;
position: absolute; &::marker {
top: auto; content: '';
right: 0px; }
left: 0px;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--form-element-border-color);
border-top: none;
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
background-color: var(--background-color);
list-style: none;
li { input[type='radio'],
margin-bottom: 0; input[type='checkbox'] {
&::marker { display: none;
content: ''; appearance: none;
} }
input[type='radio'], label {
input[type='checkbox'] { position: relative;
display: none; width: 100%;
appearance: none; margin: 0;
} padding: calc(var(--spacing) * 0.5);
line-height: 1;
label { &:hover {
position: relative;
width: 100%;
margin: 0;
padding: calc(var(--spacing) * 0.5);
line-height: 1;
&:hover {
background-color: var(--secondary-focus);
}
}
input:checked + label {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
}
input[type='checkbox'] { input:checked + label {
& + label:before { background-color: var(--secondary-focus);
display: inline-block; }
width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2);
margin-right: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--primary);
border-radius: var(--border-radius);
content: '';
vertical-align: text-bottom;
}
&:checked + label:before { input[type='checkbox'] {
background-image: var(--icon-checkbox); & + label:before {
background-position: center; display: inline-block;
background-size: calc(var(--spacing) * 0.8) auto; width: calc(var(--spacing) * 1.2);
background-repeat: no-repeat; height: calc(var(--spacing) * 1.2);
background-color: var(--primary); margin-right: calc(var(--spacing) * 0.5);
} border: var(--border-width) solid var(--primary);
border-radius: var(--border-radius);
content: '';
vertical-align: text-bottom;
}
&:checked + label:before {
background-image: var(--icon-checkbox);
background-position: center;
background-size: calc(var(--spacing) * 0.8) auto;
background-repeat: no-repeat;
background-color: var(--primary);
} }
} }
} }