CSS for 5 examples: Resolve Stylelint no-descending-specificity (pull #1649)

Author: nschonni

.stylelintrc

@@ -9,7 +9,6 @@
         ]
       }
     ],
-    "no-descending-specificity": null,
     "prettier/prettier": [true, {"singleQuote": false}]
   }
 }

examples/carousel/css/carousel-prev-next.css

@@ -63,6 +63,29 @@ img.reload {
   border: 0 solid transparent;
 }
 
+.carousel-moreaccessible .carousel-items .carousel-image a {
+  display: block;
+  margin: 0;
+  padding: 5px;
+  text-decoration: none;
+  border: none;
+}
+
+.carousel-moreaccessible .carousel-item .carousel-caption a {
+  display: inline-block;
+  margin: 0;
+  padding: 6px;
+  color: black;
+  background-color: transparent;
+  border: none;
+  border-radius: 5px;
+}
+
+.carousel-moreaccessible .carousel-item .carousel-caption span.contrast,
+.carousel-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
+  background-color: transparent;
+}
+
 .carousel .carousel-item .carousel-caption a:hover,
 .carousel .carousel-item .carousel-caption span.contrast:hover {
   background-color: rgba(0, 0, 0, 1);
@@ -189,6 +212,14 @@ img.reload {
   border-radius: 5px;
 }
 
+/* Shared CSS for Pause and Tab Controls */
+
+.carousel-moreaccessible .controls {
+  position: relative;
+  top: 0;
+  left: 0;
+  padding: 0.25em 0.25em 0;
+}
 .carousel.carousel-moreaccessible .controls {
   position: static;
   height: 36px;
@@ -208,14 +239,6 @@ img.reload {
   border: none;
 }
 
-.carousel-moreaccessible .carousel-items .carousel-image a {
-  display: block;
-  margin: 0;
-  padding: 5px;
-  text-decoration: none;
-  border: none;
-}
-
 .carousel-moreaccessible .carousel-items.focus .carousel-image a {
   padding: 2px;
   border: 3px solid #005a9c;
@@ -237,21 +260,6 @@ img.reload {
   color: black;
 }
 
-.carousel-moreaccessible .carousel-item .carousel-caption a {
-  display: inline-block;
-  margin: 0;
-  padding: 6px;
-  color: black;
-  background-color: transparent;
-  border: none;
-  border-radius: 5px;
-}
-
-.carousel-moreaccessible .carousel-item .carousel-caption span.contrast,
-.carousel-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
-  background-color: transparent;
-}
-
 .carousel-moreaccessible .carousel-item .carousel-caption p {
   padding: 0;
   margin: 0;
@@ -274,12 +282,3 @@ img.reload {
   color: black;
   outline: none;
 }
-
-/* Shared CSS for Pause and Tab Controls */
-
-.carousel-moreaccessible .controls {
-  position: relative;
-  top: 0;
-  left: 0;
-  padding: 0.25em 0.25em 0;
-}

examples/carousel/css/carousel-tablist.css

@@ -63,6 +63,32 @@ img.reload {
   border: 0 solid transparent;
 }
 
+.carousel-tablist-moreaccessible .carousel-items .carousel-image a {
+  display: block;
+  margin: 0;
+  padding: 5px;
+  text-decoration: none;
+  border: none;
+}
+
+.carousel-tablist-moreaccessible .carousel-item .carousel-caption a {
+  display: inline-block;
+  margin: 0;
+  padding: 6px;
+  color: black;
+  background-color: transparent;
+  border: none;
+  border-radius: 5px;
+}
+
+.carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast,
+.carousel-tablist-moreaccessible
+  .carousel-item
+  .carousel-caption
+  span.contrast:hover {
+  background-color: transparent;
+}
+
 .carousel-tablist .carousel-item .carousel-caption a:hover,
 .carousel-tablist .carousel-item .carousel-caption span.contrast:hover {
   background-color: rgba(0, 0, 0, 1);
@@ -221,10 +247,22 @@ img.reload {
   stroke-width: 2px;
 }
 
+.carousel-tablist-moreaccessible [role="tab"] circle.tab-background {
+  z-index: 16;
+}
+
+.carousel-tablist-moreaccessible [role="tab"] circle.tab {
+  z-index: 18;
+}
+
 .carousel-tablist [role="tab"][aria-selected="true"] circle.tab {
   fill: white;
 }
 
+.carousel-tablist-moreaccessible [role="tab"] circle.border {
+  z-index: 14;
+}
+
 .carousel-tablist [role="tab"]:focus circle.border {
   display: block;
   fill: #005a9c;
@@ -269,14 +307,6 @@ img.reload {
   border: none;
 }
 
-.carousel-tablist-moreaccessible .carousel-items .carousel-image a {
-  display: block;
-  margin: 0;
-  padding: 5px;
-  text-decoration: none;
-  border: none;
-}
-
 .carousel-tablist-moreaccessible .carousel-items.focus .carousel-image a {
   padding: 2px;
   border: 3px solid #005a9c;
@@ -298,24 +328,6 @@ img.reload {
   color: black;
 }
 
-.carousel-tablist-moreaccessible .carousel-item .carousel-caption a {
-  display: inline-block;
-  margin: 0;
-  padding: 6px;
-  color: black;
-  background-color: transparent;
-  border: none;
-  border-radius: 5px;
-}
-
-.carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast,
-.carousel-tablist-moreaccessible
-  .carousel-item
-  .carousel-caption
-  span.contrast:hover {
-  background-color: transparent;
-}
-
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption p {
   padding: 0;
   margin: 0;
@@ -353,15 +365,3 @@ img.reload {
 .carousel-tablist-moreaccessible [role="tab"] {
   z-index: 20;
 }
-
-.carousel-tablist-moreaccessible [role="tab"] circle.border {
-  z-index: 14;
-}
-
-.carousel-tablist-moreaccessible [role="tab"] circle.tab {
-  z-index: 18;
-}
-
-.carousel-tablist-moreaccessible [role="tab"] circle.tab-background {
-  z-index: 16;
-}

examples/combobox/css/combobox-datepicker.css

@@ -57,6 +57,26 @@
   outline-offset: 2px;
 }
 
+.combobox-datepicker .dialog button {
+  border-style: none;
+  background: transparent;
+}
+
+.combobox-datepicker .dialog-ok-cancel-group button {
+  padding: 6px;
+  margin-left: 1em;
+  width: 5em;
+  background-color: hsl(216, 80%, 92%);
+  font-size: 0.85em;
+  color: black;
+  outline: none;
+  border-radius: 5px;
+}
+
+.combobox-datepicker .dialog button::-moz-focus-inner {
+  border: 0;
+}
+
 .combobox-datepicker .group.focus input,
 .combobox-datepicker .group.focus button {
   background-color: #def;
@@ -67,8 +87,8 @@
   stroke: transparent;
 }
 
-.combobox-datepicker .group button[aria-expanded="true"] polygon,
-.combobox-datepicker .group.focus polygon {
+.combobox-datepicker .group.focus polygon,
+.combobox-datepicker .group button[aria-expanded="true"] polygon {
   fill: black;
   stroke: white;
 }
@@ -109,15 +129,6 @@
   font-weight: bold;
 }
 
-.combobox-datepicker .dialog button {
-  border-style: none;
-  background: transparent;
-}
-
-.combobox-datepicker .dialog button::-moz-focus-inner {
-  border: 0;
-}
-
 .combobox-datepicker .dates {
   width: 320px;
   padding-left: 1em;
@@ -162,17 +173,6 @@
   margin-right: 1em;
 }
 
-.combobox-datepicker .dialog-ok-cancel-group button {
-  padding: 6px;
-  margin-left: 1em;
-  width: 5em;
-  background-color: hsl(216, 80%, 92%);
-  font-size: 0.85em;
-  color: black;
-  outline: none;
-  border-radius: 5px;
-}
-
 .combobox-datepicker .dialog-button:focus {
   padding: 4px;
   border: 2px solid black;
@@ -229,17 +229,17 @@
   background-color: hsl(216, 80%, 92%);
 }
 
-.combobox-datepicker .dates td:not(.disabled):hover {
-  padding: 2px;
-  border: 1px solid rgb(100, 100, 100);
-}
-
 .combobox-datepicker .dates td:focus {
   padding: 1px;
   border: 2px solid rgb(100, 100, 100);
   outline: 0;
 }
 
+.combobox-datepicker .dates td:not(.disabled):hover {
+  padding: 2px;
+  border: 1px solid rgb(100, 100, 100);
+}
+
 .combobox-datepicker .dialog-message {
   padding-top: 0.25em;
   padding-left: 1em;

examples/menubar/css/menubar-editor.css

@@ -78,6 +78,13 @@
   text-decoration: line-through;
 }
 
+.menubar-editor [role="menubar"] [role="separator"] {
+  padding-top: 3px;
+  background-image: url("../images/separator.svg");
+  background-position: center;
+  background-repeat: repeat-x;
+}
+
 .menubar-editor [role="menubar"] [role="menuitem"],
 .menubar-editor [role="menubar"] [role="menuitemcheckbox"],
 .menubar-editor [role="menubar"] [role="menuitemradio"],
@@ -104,13 +111,6 @@
   width: 8em;
 }
 
-.menubar-editor [role="menubar"] [role="separator"] {
-  padding-top: 3px;
-  background-image: url("../images/separator.svg");
-  background-position: center;
-  background-repeat: repeat-x;
-}
-
 .menubar-editor [role="menubar"] [role="menu"] [aria-checked="true"] {
   padding: 6px;
   padding-left: 8px;