diff --git a/docs/index.html b/docs/index.html
index e97fa853..30f05cb5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -542,7 +542,7 @@
(resize width of screen if you don't see it)
- Home
-
-
+
About
- What’s new in v2?
@@ -574,7 +574,7 @@ Hamburger Menu Under Nav Example
- Home
-
-
+
About 2
- What’s new in v2?
@@ -600,11 +600,20 @@ Hamburger Menu Under Nav Example
- Pico CSS
- Example
-
-
+
Submenu
diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 59ff9ea2..d447b930 100644
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -7,7 +7,7 @@
*/
#{$parent-selector} details {
display: block;
- margin-bottom: var(#{$css-var-prefix}spacing);
+ margin-block-end: var(#{$css-var-prefix}spacing);
@if $enable-classes {
&.hide-arrow > summary::after {
@@ -16,9 +16,13 @@
}
}
+ &:not(.hide-arrow) > summary {
+ padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
+ }
+
summary {
position: relative;
- padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
+ //padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
line-height: 1rem;
list-style-type: none;
cursor: pointer;
@@ -91,13 +95,11 @@
}
}
}
- //!
- //!
- //!
+
// Open
&[open] {
> summary {
- margin-bottom: var(#{$css-var-prefix}spacing);
+ margin-block-end: var(#{$css-var-prefix}spacing);
&:not([role]) {
&:not(:focus) {
diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index e167c664..6722df58 100644
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -138,7 +138,7 @@
min-width: 200px;
min-width: fit-content;
margin: 0;
- margin-top: var(#{$css-var-prefix}outline-width);
+ margin-block-start: var(#{$css-var-prefix}outline-width);
padding: 0;
border: var(#{$css-var-prefix}border-width)
solid
@@ -163,22 +163,22 @@
li {
width: 100%;
- margin-bottom: 0;
+ margin-block-end: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
- margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+ margin-block-start: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
- margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+ margin-block-end: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
details {
width: 100%;
- margin-bottom: 0;
+ margin-block-end: 0;
> summary {
line-height: var(#{$css-var-prefix}line-height);
}
@@ -224,7 +224,7 @@
// Button opened
// inside container type accordion
// ––––––––––––––––––––
- margin-bottom: 0;
+ margin-block-end: 0;
// Close for dropdown
// inside container type accordion
@@ -263,7 +263,7 @@
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
// Override height
- margin-bottom: 0;
+ margin-block-end: 0;
&.hide-arrow {
> summary::after {
@@ -294,11 +294,15 @@
}
}
}
+
+ &:not(.hide-arrow) > summary {
+ padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
+ }
}
// Label
// ––––––––––––––––––––
#{$parent-selector} label > details.dropdown {
- margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+ margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss
index b128c6a0..7855897f 100644
--- a/scss/layout/_container.scss
+++ b/scss/layout/_container.scss
@@ -14,16 +14,15 @@
}
#{$parent-selector} .container {
- //$first-breakpoint: true;
+ $first-breakpoint: true;
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
- //@if $first-breakpoint {
- // $first-breakpoint: false;
- // padding-right: 0;
- // padding-left: 0;
- //}
+ @if $first-breakpoint {
+ $first-breakpoint: false;
+ padding-inline: 0;
+ }
}
}
}