aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/css/components/dropbutton.component.css

   1 /**
   2  * @file
   3  * Styling dropbuttons.
   4  */
   5
   6 /**
   7  * Reset styling for all elements.
   8  */
   9 .js .dropbutton .dropbutton-action > input,
  10 .js .dropbutton .dropbutton-action > a,
  11 .js .dropbutton .dropbutton-action > button {
  12   color: #333333;
  13   text-decoration: none;
  14   padding: 0;
  15   margin: 0;
  16   font-weight: 600;
  17   line-height: normal;
  18   -webkit-font-smoothing: antialiased;
  19   text-align: left; /* LTR */
  20 }
  21 [dir="rtl"].js .dropbutton .dropbutton-action > input,
  22 [dir="rtl"].js .dropbutton .dropbutton-action > a,
  23 [dir="rtl"].js .dropbutton .dropbutton-action > button {
  24   text-align: right;
  25   margin-left: 0; /* This is required to win over specificity of [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * */
  26 }
  27 .js .dropbutton-action.last {
  28   border-radius: 0 0 0 1em; /* LTR */
  29 }
  30 [dir="rtl"] .js .dropbutton-action.last {
  31   border-radius: 0 0 1em 0;
  32 }
  33
  34 /**
  35  * Overwrite Sevens button styling.
  36  */
  37 .js .dropbutton-widget .button {
  38   background: transparent;
  39   border: 0;
  40   border-radius: 0;
  41   box-shadow: none;
  42 }
  43 .js .dropbutton-multiple .dropbutton {
  44   border-right: 0; /* LTR */
  45 }
  46 [dir="rtl"].js .dropbutton-multiple .dropbutton {
  47   border-left: 0;
  48 }
  49
  50 /**
  51  * Show dropbutton elements as buttons when javascript is disabled
  52  */
  53 .dropbutton {
  54   margin: 0;
  55   padding: 0;
  56   list-style-type: none;
  57 }
  58 .dropbutton li + li {
  59   margin-top: 10px;
  60 }
  61 .js .dropbutton li {
  62   margin-bottom: 0;
  63   margin-right: 0;
  64 }
  65 .js .dropbutton li + li {
  66   margin-top: 0;
  67 }
  68
  69 @media screen and (min-width: 37.5625em) { /* 601px */
  70   .dropbutton li {
  71     display: inline-block;
  72   }
  73   .dropbutton li + li {
  74     margin-left: 1em;
  75     margin-top: 0;
  76   }
  77   .js .dropbutton li + li {
  78     margin-left: 0;
  79   }
  80 }
  81
  82 /**
  83  * Copied styling for .button.
  84  */
  85 .js .dropbutton-multiple .dropbutton-widget {
  86   border: 1px solid #a6a6a6;
  87   border-radius: 20em;
  88   background-color: #f2f1eb;
  89   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  90   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
  91   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  92 }
  93 .dropbutton-multiple.open .dropbutton-widget {
  94   border-radius: 1em;
  95 }
  96 .js .dropbutton-widget .dropbutton-action a,
  97 .js .dropbutton-widget .dropbutton-action input,
  98 .js .dropbutton-widget .dropbutton-action button {
  99   border-radius: 20em 0 0 20em; /* LTR */
 100   padding: 4px 1.5em;
 101   display: block;
 102   width: 100%;
 103 }
 104 [dir="rtl"].js .dropbutton-widget .dropbutton-action a,
 105 [dir="rtl"].js .dropbutton-widget .dropbutton-action input,
 106 [dir="rtl"].js .dropbutton-widget .dropbutton-action button {
 107   border-radius: 0 20em 20em 0;
 108 }
 109 .js .dropbutton-widget .dropbutton-action a:focus,
 110 .js .dropbutton-widget .dropbutton-action input:focus,
 111 .js .dropbutton-widget .dropbutton-action button:focus {
 112   text-decoration: underline;
 113 }
 114 .js .dropbutton-multiple.open .dropbutton-action a,
 115 .js .dropbutton-multiple.open .dropbutton-action .button {
 116   border-radius: 0;
 117 }
 118 .js .dropbutton-multiple.open .dropbutton-action:first-child a,
 119 .js .dropbutton-multiple.open .dropbutton-action:first-child .button {
 120   border-radius: 0.9em 0 0 0; /* LTR */
 121 }
 122 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a,
 123 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button {
 124   border-radius: 0 0.9em 0 0;
 125 }
 126 .js .dropbutton-multiple.open .dropbutton-action:last-child a,
 127 .js .dropbutton-multiple.open .dropbutton-action:last-child .button {
 128   border-radius: 0 0 0 0.9em; /* LTR */
 129 }
 130 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a,
 131 [dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button {
 132   border-radius: 0 0 0.9em 0;
 133 }
 134 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,
 135 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,
 136 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:hover,
 137 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:focus,
 138 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:focus,
 139 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:focus {
 140   background-color: #f9f8f6;
 141   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
 142   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
 143   color: #1a1a1a;
 144   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
 145   z-index: 3;
 146 }
 147 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:active,
 148 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action input:active,
 149 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:active {
 150   text-decoration: none;
 151   background-color: #dfdfd9;
 152   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
 153   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
 154   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 155 }
 156 .dropbutton .secondary-action {
 157   border-top: 1px solid #bfbfba;
 158 }
 159
 160 /**
 161  * Rare instances when a dropbutton is actually just a button.
 162  * Copied from Seven's buttons.css.
 163  */
 164 .dropbutton-single .dropbutton-widget {
 165   border: 0;
 166   position: static;
 167   display: inline-block;
 168 }
 169 .dropbutton-single .dropbutton-action a {
 170   padding: 4px 1.5em;
 171   border: 1px solid #a6a6a6;
 172   border-radius: 20em!important;
 173   background-color: #f2f1eb;
 174   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
 175   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
 176   color: #333333;
 177   text-decoration: none;
 178   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
 179   font-weight: 600;
 180   -webkit-transition: all 0.1s;
 181   transition: all 0.1s;
 182   -webkit-font-smoothing: antialiased;
 183   width: auto!important;
 184 }
 185 .dropbutton-single .dropbutton-action a:hover,
 186 .dropbutton-single .dropbutton-action a:focus {
 187   background-color: #f9f8f6;
 188   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
 189   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
 190   color: #1a1a1a;
 191   text-decoration: none;
 192   outline: none;
 193 }
 194 .dropbutton-single .dropbutton-action a:hover,
 195 .dropbutton-single .dropbutton-action a:focus {
 196   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
 197 }
 198 .dropbutton-single .dropbutton-action a:active {
 199   background-color: #dfdfd9;
 200   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
 201   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
 202   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 203   -webkit-transition: none;
 204   transition: none;
 205 }
 206
 207 /**
 208  * The dropdown trigger.
 209  */
 210 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 211   border-left: 1px solid #a6a6a6; /* LTR */
 212   outline: none;
 213 }
 214 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 215   border-right: 1px solid #a6a6a6;
 216   border-left: 0;
 217 }
 218 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 219   border-radius: 0 20em 20em 0; /* LTR */
 220 }
 221 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 222   border-radius: 20em 0 0 20em;
 223 }
 224 .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
 225   border-radius: 0 1em 1em 0; /* LTR */
 226 }
 227 [dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
 228   border-radius: 1em 0 0 1em;
 229 }
 230 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
 231 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
 232   background-color: #f9f8f6;
 233   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
 234   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
 235   color: #1a1a1a;
 236   text-decoration: none;
 237   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
 238   z-index: 3;
 239 }
 240 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
 241   background-color: #dfdfd9;
 242   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
 243   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
 244   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 245 }
 246 .dropbutton-arrow {
 247   border-top-color: #333;
 248   right: 35%; /* LTR */
 249   top: 54%;
 250 }
 251 [dir="rtl"] .dropbutton-arrow {
 252   left: 35%;
 253   right: auto;
 254 }
 255 .dropbutton-multiple.open .dropbutton-arrow {
 256   border-bottom: 0.3333em solid #333;
 257   border-top-color: transparent;
 258   top: 0.6667em;
 259 }
 260
 261 /**
 262  * Form edit action theming.
 263  * Copied styling from .button--primary.
 264  */
 265 .js .form-actions .dropbutton .dropbutton-action > * {
 266   color: #fff;
 267   font-weight: 700;
 268   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
 269 }
 270 .js .form-actions .dropbutton-widget {
 271   border-color: #1e5c90;
 272   background-color: #0071b8;
 273   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
 274   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
 275   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
 276   position: relative;
 277 }
 278 .form-actions .dropbutton-multiple.open .dropbutton-widget {
 279   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
 280   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
 281 }
 282 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,
 283 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {
 284   background-color: #2369a6;
 285   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
 286   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
 287   box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
 288   color: #fff;
 289 }
 290 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {
 291   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
 292   background-image: linear-gradient(to bottom, #08639b, #0071b8);
 293   border-color: #144b78;
 294   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 295 }
 296 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,
 297 .form-actions .dropbutton .secondary-action {
 298   border-color: #1e5c90;
 299 }
 300 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 301   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
 302   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
 303 }
 304 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
 305 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
 306   background-color: #2369a6;
 307   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
 308   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
 309 }
 310 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
 311   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
 312   background-image: linear-gradient(to bottom, #08639b, #0071b8);
 313   border-color: #144b78;
 314   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 315 }
 316 .form-actions .dropbutton-arrow {
 317   border-top-color: #fff;
 318 }
 319 .form-actions .dropbutton-multiple.open .dropbutton-arrow {
 320   border-bottom: 0.3333em solid white;
 321 }