CSS: mobile accordion icons.

ControlledChaos · Apr 13, 2021 · 4ec6edc · 4ec6edc
1 parent ec614f3
commit 4ec6edc
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/assets/css/modules/_tabs.scss b/assets/css/modules/_tabs.scss
@@ -75,14 +75,34 @@
     display: none;
 }
 
-/* Accordion responsive breakpoint */
+// Accordion responsive breakpoint.
 @media only screen and (max-width: 782px) {
     .ds-tabs-nav {
         display: none;
     }
 
     .ds-tabs-accordion-title {
         display: block;
+
+		a {
+			&:before {
+				display: inline-block;
+				vertical-align: middle;
+				margin: 0 0.35em 0 0;
+				font-family: dashicons;
+				font-size: 1.5rem;
+				content: '\f140';
+				line-height: 1em;
+			}
+		}
+
+		&.ds-tabs-state-active {
+			a {
+				&:before {
+					transform: rotate(-90deg);
+				}
+			}
+		}
     }
 }
 
@@ -99,7 +119,7 @@
 /* Accordion anchor */
 .ds-tabs-accordion-title .ds-tabs-anchor {
 	display: block;
-	padding: 10px;
+	padding: 1em 0;
 	font-weight: bold;
 	font-weight: 600;
 	text-decoration: none;
@@ -125,3 +145,28 @@
 		display: block;
 	}
 }
+
+// RTL styles.
+.rtl {
+
+	// Accordion responsive breakpoint.
+	@media only screen and (max-width: 782px) {
+
+		.ds-tabs-accordion-title {
+			a {
+				&:before {
+					margin: 0 0 0 0.35em;
+				}
+			}
+
+			&.ds-tabs-state-active {
+				a {
+					&:before {
+						transform: rotate(90deg);
+						margin: 0 0 0.35em 0;
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/assets/css/widgets.css b/assets/css/widgets.css
@@ -73,14 +73,26 @@
   display: none;
 }
 
-/* Accordion responsive breakpoint */
 @media only screen and (max-width: 782px) {
   .ds-tabs-nav {
     display: none;
   }
   .ds-tabs-accordion-title {
     display: block;
   }
+  .ds-tabs-accordion-title a:before {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 0.35em 0 0;
+    font-family: dashicons;
+    font-size: 1.5rem;
+    content: '\f140';
+    line-height: 1em;
+  }
+  .ds-tabs-accordion-title.ds-tabs-state-active a:before {
+    -webkit-transform: rotate(-90deg);
+            transform: rotate(-90deg);
+  }
 }
 
 /* Tabs container */
@@ -96,7 +108,7 @@
 /* Accordion anchor */
 .ds-tabs-accordion-title .ds-tabs-anchor {
   display: block;
-  padding: 10px;
+  padding: 1em 0;
   font-weight: bold;
   font-weight: 600;
   text-decoration: none;
@@ -118,6 +130,17 @@
   display: block;
 }
 
+@media only screen and (max-width: 782px) {
+  .rtl .ds-tabs-accordion-title a:before {
+    margin: 0 0 0 0.35em;
+  }
+  .rtl .ds-tabs-accordion-title.ds-tabs-state-active a:before {
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+    margin: 0 0 0.35em 0;
+  }
+}
+
 #dashboard-widgets #ds-widget h3,
 #dashboard-widgets #ds-widget h4,
 #dashboard-widgets #ds-widget p,

diff --git a/assets/css/widgets.min.css b/assets/css/widgets.min.css