Version 1

[yaffs-website] / web / core / themes / seven / css / components / dropbutton.component.css

diff --git a/web/core/themes/seven/css/components/dropbutton.component.css b/web/core/themes/seven/css/components/dropbutton.component.css
new file mode 100644 (file)
index 0000000..229f1bd
--- /dev/null
+++ b/web/core/themes/seven/css/components/dropbutton.component.css
@@ -0,0 +1,321 @@
+/**
+ * @file
+ * Styling dropbuttons.
+ */
+
+/**
+ * Reset styling for all elements.
+ */
+.js .dropbutton .dropbutton-action > input,
+.js .dropbutton .dropbutton-action > a,
+.js .dropbutton .dropbutton-action > button {
+  color: #333333;
+  text-decoration: none;
+  padding: 0;
+  margin: 0;
+  font-weight: 600;
+  line-height: normal;
+  -webkit-font-smoothing: antialiased;
+  text-align: left; /* LTR */
+}
+[dir="rtl"].js .dropbutton .dropbutton-action > input,
+[dir="rtl"].js .dropbutton .dropbutton-action > a,
+[dir="rtl"].js .dropbutton .dropbutton-action > button {
+  text-align: right;
+  margin-left: 0; /* This is required to win over specificity of [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * */
+}
+.js .dropbutton-action.last {
+  border-radius: 0 0 0 1em; /* LTR */
+}
+[dir="rtl"] .js .dropbutton-action.last {
+  border-radius: 0 0 1em 0;
+}
+
+/**
+ * Overwrite Sevens button styling.
+ */
+.js .dropbutton-widget .button {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.js .dropbutton-multiple .dropbutton {
+  border-right: 0; /* LTR */
+}
+[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;
+  }
+  .js .dropbutton li + li {
+    margin-left: 0;
+  }
+}
+
+/**
+ * Copied styling for .button.
+ */
+.js .dropbutton-multiple .dropbutton-widget {
+  border: 1px solid #a6a6a6;
+  border-radius: 20em;
+  background-color: #f2f1eb;
+  background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+}
+.dropbutton-multiple.open .dropbutton-widget {
+  border-radius: 1em;
+}
+.js .dropbutton-widget .dropbutton-action a,
+.js .dropbutton-widget .dropbutton-action input,
+.js .dropbutton-widget .dropbutton-action button {
+  border-radius: 20em 0 0 20em; /* LTR */
+  padding: 4px 1.5em;
+  display: block;
+  width: 100%;
+}
+[dir="rtl"].js .dropbutton-widget .dropbutton-action a,
+[dir="rtl"].js .dropbutton-widget .dropbutton-action input,
+[dir="rtl"].js .dropbutton-widget .dropbutton-action button {
+  border-radius: 0 20em 20em 0;
+}
+.js .dropbutton-widget .dropbutton-action a:focus,
+.js .dropbutton-widget .dropbutton-action input:focus,
+.js .dropbutton-widget .dropbutton-action button:focus {
+  text-decoration: underline;
+}
+.js .dropbutton-multiple.open .dropbutton-action a,
+.js .dropbutton-multiple.open .dropbutton-action .button {
+  border-radius: 0;
+}
+.js .dropbutton-multiple.open .dropbutton-action:first-child a,
+.js .dropbutton-multiple.open .dropbutton-action:first-child .button {
+  border-radius: 0.9em 0 0 0; /* LTR */
+}
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a,
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button {
+  border-radius: 0 0.9em 0 0;
+}
+.js .dropbutton-multiple.open .dropbutton-action:last-child a,
+.js .dropbutton-multiple.open .dropbutton-action:last-child .button {
+  border-radius: 0 0 0 0.9em; /* LTR */
+}
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a,
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button {
+  border-radius: 0 0 0.9em 0;
+}
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:hover,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:focus,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:focus,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:focus {
+  background-color: #f9f8f6;
+  background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
+  background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
+  color: #1a1a1a;
+  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+  z-index: 3;
+}
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:active,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:active,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:active {
+  text-decoration: none;
+  background-color: #dfdfd9;
+  background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+.dropbutton .secondary-action {
+  border-top: 1px solid #bfbfba;
+}
+
+/**
+ * Rare instances when a dropbutton is actually just a button.
+ * Copied from Seven's buttons.css.
+ */
+.dropbutton-single .dropbutton-widget {
+  border: 0;
+  position: static;
+  display: inline-block;
+}
+.dropbutton-single .dropbutton-action a {
+  padding: 4px 1.5em;
+  border: 1px solid #a6a6a6;
+  border-radius: 20em!important;
+  background-color: #f2f1eb;
+  background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+  color: #333333;
+  text-decoration: none;
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  font-weight: 600;
+  -webkit-transition: all 0.1s;
+  transition: all 0.1s;
+  -webkit-font-smoothing: antialiased;
+  width: auto!important;
+}
+.dropbutton-single .dropbutton-action a:hover,
+.dropbutton-single .dropbutton-action a:focus {
+  background-color: #f9f8f6;
+  background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
+  background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
+  color: #1a1a1a;
+  text-decoration: none;
+  outline: none;
+}
+.dropbutton-single .dropbutton-action a:hover,
+.dropbutton-single .dropbutton-action a:focus {
+  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+}
+.dropbutton-single .dropbutton-action a:active {
+  background-color: #dfdfd9;
+  background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+  -webkit-transition: none;
+  transition: none;
+}
+
+/**
+ * The dropdown trigger.
+ */
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border-left: 1px solid #a6a6a6; /* LTR */
+  outline: none;
+}
+[dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border-right: 1px solid #a6a6a6;
+  border-left: 0;
+}
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border-radius: 0 20em 20em 0; /* LTR */
+}
+[dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border-radius: 20em 0 0 20em;
+}
+.dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
+  border-radius: 0 1em 1em 0; /* LTR */
+}
+[dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
+  border-radius: 1em 0 0 1em;
+}
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
+  background-color: #f9f8f6;
+  background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
+  background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
+  color: #1a1a1a;
+  text-decoration: none;
+  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+  z-index: 3;
+}
+.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
+  background-color: #dfdfd9;
+  background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+.dropbutton-arrow {
+  border-top-color: #333;
+  right: 35%; /* LTR */
+  top: 54%;
+}
+[dir="rtl"] .dropbutton-arrow {
+  left: 35%;
+  right: auto;
+}
+.dropbutton-multiple.open .dropbutton-arrow {
+  border-bottom: 0.3333em solid #333;
+  border-top-color: transparent;
+  top: 0.6667em;
+}
+
+/**
+ * Form edit action theming.
+ * Copied styling from .button--primary.
+ */
+.js .form-actions .dropbutton .dropbutton-action > * {
+  color: #fff;
+  font-weight: 700;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+}
+.js .form-actions .dropbutton-widget {
+  border-color: #1e5c90;
+  background-color: #0071b8;
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  position: relative;
+}
+.form-actions .dropbutton-multiple.open .dropbutton-widget {
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+}
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {
+  background-color: #2369a6;
+  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+  color: #fff;
+}
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {
+  background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
+  background-image: linear-gradient(to bottom, #08639b, #0071b8);
+  border-color: #144b78;
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,
+.form-actions .dropbutton .secondary-action {
+  border-color: #1e5c90;
+}
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+}
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
+  background-color: #2369a6;
+  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+}
+.js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
+  background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
+  background-image: linear-gradient(to bottom, #08639b, #0071b8);
+  border-color: #144b78;
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+.form-actions .dropbutton-arrow {
+  border-top-color: #fff;
+}
+.form-actions .dropbutton-multiple.open .dropbutton-arrow {
+  border-bottom: 0.3333em solid white;
+}