refactor: list, avatar size and list in dropdown

italia · Jan 23, 2025 · b819862 · b819862
1 parent 30e4c1d
commit b819862
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 26 deletions.
diff --git a/docs/organizzare-i-contenuti/liste.md b/docs/organizzare-i-contenuti/liste.md
@@ -332,7 +332,7 @@ L'elemento `.metadata`, segue l'elemento `.text`.
   <ul class="it-list">
     <li>
       <div class="list-item">
-        <div class="avatar size-lg">
+        <div class="avatar">
           <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
         </div>
         <div class="it-right-zone">
@@ -343,7 +343,7 @@ L'elemento `.metadata`, segue l'elemento `.text`.
     </li>
     <li>
       <div class="list-item">
-        <div class="avatar size-lg">
+        <div class="avatar">
           <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
         </div>
         <div class="it-right-zone">
@@ -354,7 +354,7 @@ L'elemento `.metadata`, segue l'elemento `.text`.
     </li>
     <li>
       <a href="#" class="list-item">
-        <div class="avatar size-lg">
+        <div class="avatar">
           <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
         </div>
         <div class="it-right-zone">
@@ -365,7 +365,7 @@ L'elemento `.metadata`, segue l'elemento `.text`.
     </li>
     <li>
       <div class="list-item">
-        <div class="avatar size-lg">
+        <div class="avatar">
           <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
         </div>
         <div class="it-right-zone">
@@ -378,7 +378,7 @@ L'elemento `.metadata`, segue l'elemento `.text`.
     </li>
     <li>
       <a class="list-item" href="#">
-        <div class="avatar size-lg">
+        <div class="avatar">
           <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
         </div>
         <div class="it-right-zone">

diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss
@@ -34,13 +34,13 @@
   --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
   --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
   --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
-  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+  --#{$prefix}dropdown-link-hover-color: var(--#{$prefix}color-text-primary-hover);
   --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
   --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
   --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
   --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
-  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+  --#{$prefix}dropdown-item-padding-x: var(--#{$prefix}spacing-inset-s);
+  --#{$prefix}dropdown-item-padding-y: 12px;
   --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
   --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
   --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
@@ -293,9 +293,8 @@
 // Links, buttons, and more within the dropdown menu
 //
 // `<button>`-specific styles are denoted with `// For <button>s`
-.dropdown-item {
-  display: block;
-  width: 100%; // For `<button>`s
+.dropdown-item.list-item {
+  width: auto; // For `<button>`s
   padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
   clear: both;
   font-weight: $font-weight-normal;
@@ -308,16 +307,14 @@
 
   &:hover,
   &:focus {
-    background-color: transparent;
+    // background-color: var(--#{$prefix}dropdown-link-hover-bg);
     color: var(--#{$prefix}dropdown-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   &.active,
   &:active {
-    background-color: transparent;
     color: var(--#{$prefix}dropdown-link-active-color);
-    text-decoration: none;
   }
 
   &.disabled,

diff --git a/src/scss/components/_linklist.scss b/src/scss/components/_linklist.scss
@@ -3,14 +3,13 @@
   --#{$prefix}list-heading-font-size: var(--#{$prefix}heading-6-font-size);
   --#{$prefix}list-item-font-size: var(--#{$prefix}label-font-size);
   --#{$prefix}list-item-line-height: var(--#{$prefix}label-line-height);
-  --#{$prefix}list-item-spacing: var(--#{$prefix}spacing-inset-s)  var(--#{$prefix}spacing-inline-xs);
+  --#{$prefix}list-item-spacing: var(--#{$prefix}spacing-inset-xs);
   --#{$prefix}list-nested-spacing: var(--#{$prefix}spacing-inset-s);
   // --#{$prefix}list-item-spacing-stack: var(--#{$prefix}spacing-stack-s);
 
   .link-list-heading,
   h3 {
     margin-bottom: var(--#{$prefix}spacing-stack-xs);
-    padding: 0 var(--#{$prefix}spacing-stack-xs);
     color: var(--#{$prefix}color-text-base);
     font-size: var(--#{$prefix}list-heading-font-size);
     font-weight: var(--#{$prefix}heading-font-weight-weak);
@@ -31,12 +30,17 @@
     }
   }
 
-  li a {
-    position: relative;
-    display: block;
-    padding: var(--#{$prefix}list-item-spacing);
+  li span,
+  .list-item {
     font-size: var(--#{$prefix}list-item-font-size);
     line-height: var(--#{$prefix}list-item-line-height);
+  }
+
+  .list-item {
+    position: relative;
+    display: inline-block;
+    padding-top: var(--#{$prefix}list-item-spacing);
+    padding-bottom: var(--#{$prefix}list-item-spacing);
     text-decoration: none;
 
     &.active span,
@@ -121,7 +125,7 @@
     }
 
     // Icon left inside list item
-    &.list-item.icon-left {
+    &.icon-left {
       .icon {
         left: 0;
         flex-shrink: 0;
@@ -133,7 +137,7 @@
       }
     }
 
-    &.list-item.icon-right {
+    &.icon-right {
       .list-item-title-icon-wrapper {
         justify-content: space-between;
       }
@@ -161,8 +165,6 @@
       transform: scale(-1);
     }
 
-
-
     .icon {
       display: inline-block;
       flex-shrink: 0;
@@ -183,14 +185,14 @@
     }
 
     // Text paragraph inside multiline list item
-    p {
+    > p {
       color: var(--#{$prefix}color-text-secondary);
       font-size: var(--#{$prefix}caption-font-size);
       line-height: var(--#{$prefix}caption-line-height);
     }
 
     // Listed item label wrapped in the <a> tag 
-    span {
+    > span {
       display: inline-block;
       color: var(--#{$prefix}color-text-primary);
     }