www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/settings_tray/css/off-canvas.dropbutton.css

   1 /**
   2  * @file
   3  * Styles for dropbuttons in the off-canvas tray.
   4  */
   5
   6 #drupal-off-canvas .dropbutton-wrapper,
   7 #drupal-off-canvas .dropbutton-widget {
   8   -webkit-appearance: none;
   9   -moz-appearance: none;
  10   display: block;
  11   position: static;
  12   transition: none;
  13 }
  14 #drupal-off-canvas .dropbutton-widget {
  15   margin: 0;
  16   padding: 0;
  17   border: 0;
  18   background: #277abd;
  19   border-radius: 1em;
  20   font-weight: 600;
  21   color: #fff;
  22   text-transform: none;
  23   text-decoration: none;
  24   text-align: center;
  25   line-height: normal;
  26   cursor: pointer;
  27   transition: background .5s ease;
  28 }
  29 #drupal-off-canvas .dropbutton-widget:hover {
  30   background: #2b8bd8;
  31 }
  32
  33 /*
  34  * Style dropbutton single.
  35  */
  36
  37 #drupal-off-canvas .dropbutton-single .dropbutton-action a {
  38   padding: 0;
  39   /* Overlap icon for trigger. */
  40   margin-top: -2em;
  41   height: 2.2em;
  42   cursor: pointer;
  43 }
  44 #drupal-off-canvas .dropbutton-single .dropbutton-action:hover,
  45 #drupal-off-canvas .dropbutton-single .dropbutton-action:focus,
  46 #drupal-off-canvas .dropbutton-single .dropbutton-action a:hover,
  47 #drupal-off-canvas .dropbutton-single .dropbutton-action a:focus {
  48   text-decoration: none;
  49   outline: none;
  50 }
  51 #drupal-off-canvas .dropbutton-widget .dropbutton {
  52   margin: 0;
  53   overflow: hidden;
  54   padding: 0;
  55 }
  56 #drupal-off-canvas .dropbutton li,
  57 #drupal-off-canvas .dropbutton a {
  58   display: block;
  59   width: auto;
  60   padding: 4px 0;
  61   text-align: left;
  62   color: #555;
  63   outline: none;
  64 }
  65 #drupal-off-canvas .dropbutton li:hover,
  66 #drupal-off-canvas .dropbutton li:focus,
  67 #drupal-off-canvas .dropbutton a:hover,
  68 #drupal-off-canvas .dropbutton a:focus {
  69   background: transparent;
  70   color: #333;
  71   outline: none;
  72 }
  73
  74 /*
  75  * Style dropbutton multiple.
  76  */
  77
  78 #drupal-off-canvas .dropbutton-multiple .dropbutton-widget {
  79   width: 2em;
  80   height: 2em;
  81 }
  82 #drupal-off-canvas .dropbutton-multiple .dropbutton-widget:hover {
  83   background-color: #2b8bd8;
  84 }
  85
  86 /* Hide the other actions until the dropbutton is triggered. */
  87 #drupal-off-canvas .dropbutton-multiple .dropbutton .secondary-action {
  88   display: none;
  89 }
  90
  91 /* The toggle to expand the button. */
  92 #drupal-off-canvas .dropbutton-toggle {
  93   position: absolute;
  94   top: 0;
  95   right: 0; /* LTR */
  96   bottom: 0;
  97   display: block;
  98   width: 2em;
  99   color: #fff;
 100   text-indent: 110%;
 101   white-space: nowrap;
 102 }
 103 #drupal-off-canvas .dropbutton-toggle button {
 104   display: block;
 105   height: 100%;
 106   width: 100%;
 107   margin: 0;
 108   padding: 0;
 109   border: 0 solid transparent;
 110   border-bottom-right-radius: 1em; /* LTR */
 111   border-top-right-radius: 1em; /* LTR */
 112   cursor: pointer;
 113 }
 114 #drupal-off-canvas .dropbutton-toggle button:hover,
 115 #drupal-off-canvas .dropbutton-toggle button:focus {
 116   outline: none;
 117 }
 118
 119 /* The toggle arrow. */
 120 #drupal-off-canvas .dropbutton-arrow {
 121   position: absolute;
 122   display: block;
 123   height: 0;
 124   width: 0;
 125   margin-top: 0;
 126   border-bottom-color: transparent;
 127   border-left-color: transparent;
 128   border-right-color: transparent;
 129   border-style: solid;
 130   border-width: 0.3333em 0.3333em 0;
 131   color: #fff;
 132   line-height: 0;
 133   overflow: hidden;
 134 }
 135 #drupal-off-canvas span.dropbutton-arrow {
 136   top: 7px;
 137   right: 7px; /* LTR */
 138   background: transparent;
 139 }
 140 #drupal-off-canvas span.dropbutton-arrow:hover {
 141   background: transparent;
 142 }
 143
 144 #drupal-off-canvas .dropbutton-action > .js-form-submit.form-submit,
 145 #drupal-off-canvas .dropbutton-toggle button {
 146   position: relative;
 147   text-shadow: none;
 148 }
 149
 150 /*
 151  * Dropbuttons when in a table cell.
 152  */
 153
 154 /* Make sure table cell doesn't collapse around absolute positioned dropbutton. */
 155 #drupal-off-canvas td .dropbutton-single {
 156   min-width: 2em;
 157 }
 158 #drupal-off-canvas td .dropbutton-multiple {
 159   min-width: 2em;
 160   padding-right: 0;
 161   padding-left: 0;
 162   margin-right: 0;
 163   margin-left: 0;
 164   border: 0;
 165 }
 166 #drupal-off-canvas td .dropbutton-multiple .dropbutton-action a,
 167 #drupal-off-canvas td .dropbutton-multiple .dropbutton-action input,
 168 #drupal-off-canvas td .dropbutton-multiple .dropbutton-action button {
 169   width: auto;
 170   padding: 0;
 171   font-size: inherit;
 172 }
 173 #drupal-off-canvas td .dropbutton-wrapper {
 174   margin-bottom: 0;
 175 }
 176
 177 /* Push the widget to the right so text expands left. */
 178 #drupal-off-canvas td .dropbutton-widget {
 179   position: absolute;
 180   right: 12px; /* LTR */
 181   padding: 0;
 182   background: #277abd none;
 183 }
 184
 185 /* Push the wrapper to the right edge of the td. */
 186 #drupal-off-canvas td .dropbutton-single,
 187 #drupal-off-canvas td .dropbutton-multiple {
 188   float: right; /* LTR */
 189   padding-right: 0;
 190   margin-right: 0;
 191   max-width: initial;
 192   min-width: initial;
 193   position: relative;
 194 }
 195 #drupal-off-canvas td .dropbutton-widget .dropbutton {
 196   margin: 0;
 197   width: 2em;
 198   height: 2em;
 199   overflow: hidden;
 200   background: transparent;
 201 }
 202
 203 /* Push text out of the way. */
 204 #drupal-off-canvas td .dropbutton-multiple li,
 205 #drupal-off-canvas td .dropbutton-multiple a {
 206   margin-left: -9999px;
 207   background: transparent;
 208 }
 209 #drupal-off-canvas td .dropbutton-multiple.open .dropbutton li,
 210 #drupal-off-canvas td .dropbutton-multiple.open .dropbutton a {
 211   margin-left: 0;
 212   width: auto;
 213   color: #fff;
 214 }
 215
 216 /* Collapse the button to a circle. */
 217 #drupal-off-canvas td .dropbutton-toggle {
 218   width: 2em;
 219   height: 2em;
 220   border-radius: 1em;
 221 }
 222 #drupal-off-canvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
 223   border: 0;
 224   background: transparent;
 225 }
 226
 227 /* Prevent list item from expanding it's container. */
 228 #drupal-off-canvas td ul.dropbutton li.edit {
 229   width: 2em;
 230   height: 2em;
 231 }
 232
 233 /* Make li text transparent above icon so it's clickable. */
 234 #drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
 235   color: transparent;
 236   z-index: 1;
 237 }
 238
 239 /* Put pencil icon in place of hidden 'edit' text on single buttons. */
 240 #drupal-off-canvas td .dropbutton-single .edit:before {
 241   content: '.';
 242   display: block;
 243   color: transparent;
 244   background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat center;
 245   background-size: 14px;
 246 }
 247
 248 /* Dropbutton when triggered expands to show secondary items. */
 249 #drupal-off-canvas .dropbutton-multiple.open {
 250   z-index: 100;
 251 }
 252
 253 /* Create visual separation if there is an adjacent button. */
 254 #drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
 255   box-shadow: 0 3px 3px 2px rgba(0,0,0,0.5);
 256 }
 257
 258 /* Triggered dropbutton expands to show secondary items. */
 259 #drupal-off-canvas .dropbutton-multiple.open,
 260 #drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
 261   display: block;
 262   width: auto;
 263   height: auto;
 264   max-width: none;
 265   min-width: 0;
 266   padding: 0;
 267   overflow: visible;
 268 }
 269
 270 /* Triggered dropbutton in td expands to show secondary items. */
 271 #drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
 272 #drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
 273   display: block;
 274   width: auto;
 275   height: auto;
 276   padding-right: 1em; /* LTR */
 277 }
 278 [dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
 279   padding-left: 1em;
 280   padding-right: inherit;
 281 }
 282 #drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
 283   padding: 2px 1em;
 284 }
 285
 286 /* When open, the toggle arrow points upward. */
 287 #drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
 288   border-bottom: 0.3333em solid;
 289   border-top-color: transparent;
 290   top: 2px;
 291 }