From 1c7d824a240e6cb0e3c64d77cf06a03fc7fb1032 Mon Sep 17 00:00:00 2001 From: zvidmarb Date: Tue, 8 Jul 2025 12:46:56 -0700 Subject: [PATCH 1/7] Reformatted structure of md file, menu item atom; consider sub-pages --- docs/dropdowns.md | 245 +++++----------------------------------------- 1 file changed, 24 insertions(+), 221 deletions(-) diff --git a/docs/dropdowns.md b/docs/dropdowns.md index 089c3e1..6616a03 100644 --- a/docs/dropdowns.md +++ b/docs/dropdowns.md @@ -2,240 +2,43 @@ hide: - toc --- -# **DROPDOWNS** -# **CLASS** -=== "Drop Down" -
-
- -
-
-
Placeholder -
-
-
- Placeholder - Placeholder2 - Placeholder3 -
-
-
-
-
-
- # **STATES** - === "Hover" -
-
- -
- Placeholder -
-
-
- === "HTML" - - ``` html - Button - - Button - - Button - - Button - - ``` - === "CSS" +# **Menu Items** - ``` css - --8<-- "_dropdowns.scss:dropdown-formatting" +## Guidelines +**Menu items** are the building blocks of the Menu. Divider, Left icon/element, Content, and Right icon can all be modified or hidden. - --8<-- "_dropdowns.scss:dropdown-hover" - - - ``` - === "JS" - - ``` js - --8<-- "dropdown.js:dropdown-js" - ``` - === "Selected" +## Class + === "Menu Item"
-
- -
- Placeholder -
+
+ +
+
+
- - === "HTML" - - ``` html - Selected - - Button - - Button - - Button - - ``` - === "CSS" - - ``` css - - --8<-- "_dropdowns.scss:dropdown-formatting" - - --8<-- "_dropdowns.scss:dropdown-selected" - - ``` - === "JS" +
+## States + === "Default" - ``` js - --8<-- "dropdown.js:dropdown-js" - ``` -=== "Drop Down Open" -
-
- -
-
-
Placeholder -
-
-
- Placeholder - Placeholder2 - Placeholder3 -
-
-
-
-
-
- # **STATES** === "Hover" -
-
- -
-
-
Placeholder -
-
-
- Placeholder - Placeholder2 - Placeholder3 -
-
-
-
-
- === "HTML" - - ``` html - Button - - Button - - Button - - Button - - ``` - === "CSS" - - ``` css - .btn-sm{ - background-color: #247984; - height: 40px; - border-radius: 20px; - padding: 0px 32px; - color: white; - line-height: 40px; - width: fit-content; - } - - .btn .hover{ - background: #0D5761; - } - .btn .focused{ - border-color: #0D5761; - outline-color: #0D5761; - } - .btn .disabled{ - background: #c6c6c6; - } - - ``` - === "JS" - - ``` js - --8<-- "dropdown.js:dropdown-js" - ``` - === "Selected" -
-
- -
-
-
Placeholder -
-
-
- Placeholder - Placeholder2 - Placeholder3 -
-
-
-
-
- === "HTML" - - ``` html - Selected - - Button + === "Selected" - Button + === "Disabled" - Button - - ``` - === "CSS" +
+## Code + === "CSS" - ``` css + === "HTML" - .btn-sm{ - background-color: #247984; - height: 40px; - border-radius: 20px; - padding: 0px 32px; - color: white; - line-height: 40px; - width: fit-content; - } + === "JS" - .btn .hover{ - background: #0D5761; - } - .btn .focused{ - border-color: #0D5761; - outline-color: #0D5761; - } - .btn .disabled{ - background: #c6c6c6; - } - - ``` - === "JS" + ``` js + --8<-- "dropdown.js:dropdown-js" + ``` - ``` js - --8<-- "dropdown.js:dropdown-js" - ``` \ No newline at end of file +### Example \ No newline at end of file From b098825ed94c6cb4fc395161d7a99b811dcdb736 Mon Sep 17 00:00:00 2001 From: zvidmarb Date: Mon, 14 Jul 2025 15:37:05 -0700 Subject: [PATCH 2/7] Partially cleared previous item formatting, variables; Wrapped main item content, added default formatting --- .../components/sass/abstracts/_variables.scss | 12 +- .../sass/components/_dropdowns.scss | 142 +++--------------- docs/dropdowns.md | 32 ++-- 3 files changed, 49 insertions(+), 137 deletions(-) diff --git a/docs/components/sass/abstracts/_variables.scss b/docs/components/sass/abstracts/_variables.scss index 0a8c4eb..264ef0b 100644 --- a/docs/components/sass/abstracts/_variables.scss +++ b/docs/components/sass/abstracts/_variables.scss @@ -49,11 +49,7 @@ $radio-disabled-stroke: gray; $radio-button-width: 26px; $radio-button-height: 26px; -$dropdown-hover-color: #CFE1E4; -$dropdown-select-color: #A0C4C9; -$dropdown-placeholder-color: $color-dark-grey; -$drowpdown-border-color: $color-dark-grey; -$dropdown-arrow-color: $color-dark-grey; +$dropdown-divider-color: $color-old-grey; $tab-text-color: $color-darkgreen; $tab-underline-color: $color-darkgreen; @@ -120,11 +116,7 @@ $bp-below-tablet: '(max-width: #{$screen-tablet - 1})'; --radio-button-height: #{$radio-button-height}; // Dropdowns - --dropdown-hover-color: #{$dropdown-hover-color}; - --dropdown-select-color: #{$dropdown-select-color}; - --dropdown-placeholder-color: #{$dropdown-placeholder-color}; - --drowpdown-border-color: #{$drowpdown-border-color}; - --dropdown-arrow-color: #{$dropdown-arrow-color}; + --dropdown-divider-color: #{$dropdown-divider-color}; // Tabs --tab-text-color: #{$tab-text-color}; diff --git a/docs/components/sass/components/_dropdowns.scss b/docs/components/sass/components/_dropdowns.scss index 5d9007e..1c13f6f 100644 --- a/docs/components/sass/components/_dropdowns.scss +++ b/docs/components/sass/components/_dropdowns.scss @@ -1,133 +1,41 @@ @use '../abstracts/variables' as *; -// --8<-- [start:dropdown-formatting] -.dropdowns{ - max-width: 348px; - width: 100%; - height: 48px; - border-radius: 4px; - border: 2px solid $color-dark-grey; - background-color: #FAFAFA; - - &.selected{ - border-color: #A0C4C9; - } - &.hover{ - border-color: #263238; - } - -} - -.dropdowns-label{ - text-align: left; - width: 348px; - font-size: 14px; - -} - -.select-wrapper { - position: relative; - user-select: none; - width: 100%; - max-width: 348px; - height: 48px; -} -.select { - position: relative; +// --8<-- [start:menu-item-formatting] +.menu-item{ display: flex; flex-direction: column; - border-color: $drowpdown-border-color; + width: 100%; } -.select__trigger { - position: relative; +.item-wrapper { display: flex; align-items: center; - justify-content: space-between; - padding: 0 12px; - font-size: 16px; - font-weight: 300; - color: $dropdown-placeholder-color; - height: 48px; - background: #ffffff; - cursor: pointer; - border: solid 2px; - border-color: $drowpdown-border-color; - line-height: 48px; - -} -.custom-options { - position: absolute; - display: block; - top: 100%; - left: 0; - right: 0; - border: 2px solid $drowpdown-border-color; - border-top: 0; - background: #fff; - transition: all 0.5s; - opacity: 0; - visibility: hidden; - pointer-events: none; - z-index: 2; - -} -.select.open .custom-options { - opacity: 1; - visibility: visible; - pointer-events: all; -} -.custom-option { - position: relative; - display: block; - padding: 0 22px 0 22px; - font-size: 18px; - font-weight: 300; - color: $dropdown-placeholder-color; + padding: 8px 12px; + gap: 12px; + height: 32px; cursor: pointer; - transition: all 0.5s; - line-height: 48px; - -} -.arrow { - position: relative; - height: 15px; - width: 15px; -} -.arrow::before, .arrow::after { - content: ""; - position: absolute; - bottom: 0px; - width: 0.10rem; - height: 100%; - transition: all 0.5s; -} -.arrow::before { - left: -5px; - transform: rotate(-45deg); - background-color: $dropdown-arrow-color; -} -.arrow::after { - left: 5px; - transform: rotate(45deg); - background-color: $dropdown-arrow-color; -} -.open .arrow::before { - left: -5px; - transform: rotate(-45deg); } -.open .arrow::after { - left: 5px; - transform: rotate(45deg); +.left-icon, .right-icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + } -.select.opened .custom-options{ - visibility: visible; - opacity: 1; + +.item-label { + text-align: left; + flex-grow: 1; + flex-shrink: 1; + font-size: 14px; } -.dropdown-grid{ - height: 30vh; - justify-content: flex-start !important; +.divider { + border: none; + border-bottom: 1px solid $dropdown-divider-color; + padding: 8px 0px; //TODO okay to define in inner element? or move to layout container } + // --8<-- [end:dropdown-formatting] // --8<-- [start:dropdown-hover] diff --git a/docs/dropdowns.md b/docs/dropdowns.md index 6616a03..fd68572 100644 --- a/docs/dropdowns.md +++ b/docs/dropdowns.md @@ -3,26 +3,38 @@ hide: - toc --- - # **Menu Items** - ## Guidelines -**Menu items** are the building blocks of the Menu. Divider, Left icon/element, Content, and Right icon can all be modified or hidden. - +**Menu items** are the building blocks of the Menu. Divider, Left icon/element, Content, and Right icon +can all be modified or hidden. ## Class === "Menu Item" -
+
- -
- +
-

## States === "Default" - +
+
+
+ + Menu Item + + +
+
+
+
=== "Hover" === "Selected" From 53f0e7c3cfc7d73f2b05120fec3b07dbabfc9167 Mon Sep 17 00:00:00 2001 From: zvidmarb Date: Wed, 16 Jul 2025 13:58:36 -0700 Subject: [PATCH 3/7] Fixed markdown formatting to better match buttons.md structure --- .../sass/components/_dropdowns.scss | 2 +- docs/dropdowns.md | 49 ++++++++++--------- 2 files changed, 26 insertions(+), 25 deletions(-) diff --git a/docs/components/sass/components/_dropdowns.scss b/docs/components/sass/components/_dropdowns.scss index 1c13f6f..71d5b40 100644 --- a/docs/components/sass/components/_dropdowns.scss +++ b/docs/components/sass/components/_dropdowns.scss @@ -36,7 +36,7 @@ padding: 8px 0px; //TODO okay to define in inner element? or move to layout container } -// --8<-- [end:dropdown-formatting] +// --8<-- [end:menu-item-formatting] // --8<-- [start:dropdown-hover] // hover diff --git a/docs/dropdowns.md b/docs/dropdowns.md index fd68572..6e139c7 100644 --- a/docs/dropdowns.md +++ b/docs/dropdowns.md @@ -8,33 +8,34 @@ hide: **Menu items** are the building blocks of the Menu. Divider, Left icon/element, Content, and Right icon can all be modified or hidden. ## Class - === "Menu Item" -
-
- - +
diff --git a/mkdocs.yml b/mkdocs.yml index 1a484e9..87becb3 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -12,6 +12,8 @@ nav: - Radio Button: radio.md - Text Area: text-area.md - Toggles: toggles.md + - Dropdowns: + - 'Atoms: Menu Item': menu-items.md plugins: