summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-02-21 14:12:03 (GMT)
committerAlex Pott2015-02-21 14:12:03 (GMT)
commit71a987d09d890af380df4e8d163918ed025eda01 (patch)
tree5ee0cb693a158ef3866f358426081ae72fde66d1
parent0990ace5f5fbf8918b3dff8b5631f607b764c55a (diff)
Issue #2349591 by betovarg, Outi, LoMo, juho.lehmonen, droplet, amitgoyal, aliyakhan, jerrylow, klakegg: Dropdown action list shows up as a simple list without JavaScript
-rw-r--r--core/misc/dropbutton/dropbutton.css12
-rw-r--r--core/themes/seven/css/components/dropbutton.component.css35
2 files changed, 39 insertions, 8 deletions
diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css
index f089874..5990514 100644
--- a/core/misc/dropbutton/dropbutton.css
+++ b/core/misc/dropbutton/dropbutton.css
@@ -24,11 +24,13 @@
}
/* Splitbuttons */
-.form-actions .dropbutton-wrapper {
- float: left; /* LTR */
-}
-[dir="rtl"] .form-actions .dropbutton-wrapper {
- float: right;
+@media screen and (min-width:600px) {
+ .form-actions .dropbutton-wrapper {
+ float: left; /* LTR */
+ }
+ [dir="rtl"] .form-actions .dropbutton-wrapper {
+ float: right;
+ }
}
.js .form-actions .dropbutton-widget {
position: static;
diff --git a/core/themes/seven/css/components/dropbutton.component.css b/core/themes/seven/css/components/dropbutton.component.css
index 264f290..265499d 100644
--- a/core/themes/seven/css/components/dropbutton.component.css
+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -25,20 +25,49 @@
/**
* Overwrite Sevens button styling.
*/
-.dropbutton-widget .button {
+.js .dropbutton-widget .button {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
-.dropbutton-multiple .dropbutton {
+.js .dropbutton-multiple .dropbutton {
border-right: 0; /* LTR */
}
-[dir="rtl"] .dropbutton-multiple .dropbutton {
+[dir="rtl"].js .dropbutton-multiple .dropbutton {
border-left: 0;
}
/**
+ * Show dropbutton elements as buttons when javascript is disabled
+ */
+.dropbutton {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+.dropbutton li + li {
+ margin-top: 10px;
+}
+.js .dropbutton li {
+ margin-bottom: 0;
+ margin-right: 0;
+}
+.js .dropbutton li + li {
+ margin-top: 0;
+}
+
+@media screen and (min-width: 37.5625em) { /* 601px */
+ .dropbutton li {
+ display: inline-block;
+ }
+ .dropbutton li + li {
+ margin-left: 1em;
+ margin-top: 0;
+ }
+}
+
+/**
* Copied styling for .button.
*/
.js .dropbutton-multiple .dropbutton-widget {