www.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 .dropbutton-single .dropbutton-action a.use-ajax {
 207   float: left;
 208 }
 209
 210 /**
 211  * The dropdown trigger.
 212  */
 213 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 214   border-left: 1px solid #a6a6a6; /* LTR */
 215   outline: none;
 216 }
 217 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 218   border-right: 1px solid #a6a6a6;
 219   border-left: 0;
 220 }
 221 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 222   border-radius: 0 20em 20em 0; /* LTR */
 223 }
 224 [dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 225   border-radius: 20em 0 0 20em;
 226 }
 227 .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
 228   border-radius: 0 1em 1em 0; /* LTR */
 229 }
 230 [dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
 231   border-radius: 1em 0 0 1em;
 232 }
 233 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
 234 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
 235   background-color: #f9f8f6;
 236   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
 237   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
 238   color: #1a1a1a;
 239   text-decoration: none;
 240   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
 241   z-index: 3;
 242 }
 243 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
 244   background-color: #dfdfd9;
 245   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
 246   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
 247   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 248 }
 249 .dropbutton-arrow {
 250   border-top-color: #333;
 251   right: 35%; /* LTR */
 252   top: 54%;
 253 }
 254 [dir="rtl"] .dropbutton-arrow {
 255   left: 35%;
 256   right: auto;
 257 }
 258 .dropbutton-multiple.open .dropbutton-arrow {
 259   border-bottom: 0.3333em solid #333;
 260   border-top-color: transparent;
 261   top: 0.6667em;
 262 }
 263
 264 /**
 265  * Form edit action theming.
 266  * Copied styling from .button--primary.
 267  */
 268 .js .form-actions .dropbutton .dropbutton-action > * {
 269   color: #fff;
 270   font-weight: 700;
 271   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
 272 }
 273 .js .form-actions .dropbutton-widget {
 274   border-color: #1e5c90;
 275   background-color: #0071b8;
 276   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
 277   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
 278   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
 279   position: relative;
 280 }
 281 .form-actions .dropbutton-multiple.open .dropbutton-widget {
 282   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
 283   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
 284 }
 285 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:hover,
 286 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:focus {
 287   background-color: #2369a6;
 288   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
 289   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
 290   box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
 291   color: #fff;
 292 }
 293 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-action .button:active {
 294   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
 295   background-image: linear-gradient(to bottom, #08639b, #0071b8);
 296   border-color: #144b78;
 297   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 298 }
 299 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button,
 300 .form-actions .dropbutton .secondary-action {
 301   border-color: #1e5c90;
 302 }
 303 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 304   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
 305   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
 306 }
 307 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
 308 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {
 309   background-color: #2369a6;
 310   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
 311   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
 312 }
 313 .js .form-actions .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:active {
 314   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
 315   background-image: linear-gradient(to bottom, #08639b, #0071b8);
 316   border-color: #144b78;
 317   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
 318 }
 319 .form-actions .dropbutton-arrow {
 320   border-top-color: #fff;
 321 }
 322 .form-actions .dropbutton-multiple.open .dropbutton-arrow {
 323   border-bottom: 0.3333em solid white;
 324 }