Changeset 52237 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss

Timestamp:

11/23/2021 11:23:38 PM (3 years ago)

Author:

audrasjb

Message:

Twenty Twenty-One: Style adjustments for list-based widgets in the widget editor.

This change brings style consistency between front-end and widget editor for list-based widgets.

Props circlecube, Rahmohn.
Fixes #53629.

File:

• trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss (modified) (2 diffs)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss

@@ -19 +19 @@
     @include media(mobile-only) {
         margin-top: calc(3 * var(--global--spacing-vertical));
-    }
-
-    ul {
-        list-style-type: none;
-        padding: 0;
-
-        li {
-            line-height: var(--widget--line-height-list);
-        }
-
-        &.sub-menu,
-        &.children {
-            margin-left: var(--widget--spacing-menu);
-        }
-
-        .sub-menu-toggle {
-            display: none;
-        }
-    }
-
-    a {
-        color: var(--footer--color-link);
-        text-decoration: underline;
-        text-decoration-style: solid;
-        text-decoration-color: currentColor;
-
-        &:link,
-        &:visited,
-        &:active {
-            color: var(--footer--color-link);
-        }
-
-        &:hover {
-            color: var(--footer--color-link-hover);
-            text-decoration-style: dotted;
-        }
     }
 
@@ -111 +75 @@
         font-size: var(--global--font-size-xs);
     }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+
+        li {
+            line-height: var(--widget--line-height-list);
+        }
+
+        &.sub-menu,
+        &.children {
+            margin-left: var(--widget--spacing-menu);
+        }
+
+        .sub-menu-toggle {
+            display: none;
+        }
+    }
+
+    a {
+        color: var(--footer--color-link);
+        text-decoration: underline;
+        text-decoration-style: solid;
+        text-decoration-color: currentColor;
+
+        &:link,
+        &:visited,
+        &:active {
+            color: var(--footer--color-link);
+        }
+
+        &:hover {
+            color: var(--footer--color-link-hover);
+            text-decoration-style: dotted;
+        }
+    }
 }