www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/toolbar/css/toolbar.icons.theme.css

   1 /**
   2  * @file
   3  * Styling for toolbar module icons.
   4  */
   5
   6 .toolbar .toolbar-icon {
   7   padding-left: 2.75em; /* LTR */
   8   position: relative;
   9 }
  10 [dir="rtl"] .toolbar .toolbar-icon {
  11   padding-left: 1.3333em;
  12   padding-right: 2.75em;
  13 }
  14 .toolbar .toolbar-icon:before {
  15   background-attachment: scroll;
  16   background-color: transparent;
  17   background-position: center center;
  18   background-repeat: no-repeat;
  19   background-size: 100% auto;
  20   content: '';
  21   display: block;
  22   height: 100%;
  23   left: 0.6667em; /* LTR */
  24   position: absolute;
  25   top: 0;
  26   width: 20px;
  27 }
  28 [dir="rtl"] .toolbar .toolbar-icon:before {
  29   left: auto;
  30   right: 0.6667em;
  31 }
  32 .toolbar button.toolbar-icon {
  33   background-color: transparent;
  34   border: 0;
  35   font-size: 1em;
  36 }
  37 .toolbar .toolbar-menu ul .toolbar-icon {
  38   padding-left: 1.3333em; /* LTR */
  39 }
  40 [dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
  41   padding-left: 0;
  42   padding-right: 1.3333em;
  43 }
  44 .toolbar .toolbar-menu ul a.toolbar-icon:before {
  45   display: none;
  46 }
  47 .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
  48   padding-left: 2.75em; /* LTR */
  49 }
  50 [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
  51   padding-left: 0;
  52   padding-right: 2.75em;
  53 }
  54 .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
  55   padding-left: 3.75em; /* LTR */
  56 }
  57 [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
  58   padding-left: 0;
  59   padding-right: 3.75em;
  60 }
  61
  62 .toolbar .toolbar-tray-vertical .toolbar-menu a {
  63   padding-left: 2.75em; /* LTR */
  64   padding-right: 4em; /* LTR */
  65 }
  66 [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
  67   padding-left: 4em;
  68   padding-right: 2.75em;
  69 }
  70
  71 /**
  72  * Top level icons.
  73  */
  74 .toolbar-bar .toolbar-icon-menu:before {
  75   background-image: url(../../../misc/icons/bebebe/hamburger.svg);
  76 }
  77 .toolbar-bar .toolbar-icon-menu:active:before,
  78 .toolbar-bar .toolbar-icon-menu.is-active:before {
  79   background-image: url(../../../misc/icons/ffffff/hamburger.svg);
  80 }
  81 .toolbar-bar .toolbar-icon-help:before {
  82   background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg);
  83 }
  84 .toolbar-bar .toolbar-icon-help:active:before,
  85 .toolbar-bar .toolbar-icon-help.is-active:before {
  86   background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg);
  87 }
  88
  89 /**
  90  * Main menu icons.
  91  */
  92 .toolbar-icon-system-admin-content:before {
  93   background-image: url(../../../misc/icons/787878/file.svg);
  94 }
  95 .toolbar-icon-system-admin-content:active:before,
  96 .toolbar-icon-system-admin-content.is-active:before {
  97   background-image: url(../../../misc/icons/000000/file.svg);
  98 }
  99 .toolbar-icon-system-admin-structure:before {
 100   background-image: url(../../../misc/icons/787878/orgchart.svg);
 101 }
 102 .toolbar-icon-system-admin-structure:active:before,
 103 .toolbar-icon-system-admin-structure.is-active:before {
 104   background-image: url(../../../misc/icons/000000/orgchart.svg);
 105 }
 106 .toolbar-icon-system-themes-page:before {
 107   background-image: url(../../../misc/icons/787878/paintbrush.svg);
 108 }
 109 .toolbar-icon-system-themes-page:active:before,
 110 .toolbar-icon-system-themes-page.is-active:before {
 111   background-image: url(../../../misc/icons/000000/paintbrush.svg);
 112 }
 113 .toolbar-icon-entity-user-collection:before {
 114   background-image: url(../../../misc/icons/787878/people.svg);
 115 }
 116 .toolbar-icon-entity-user-collection:active:before,
 117 .toolbar-icon-entity-user-collection.is-active:before {
 118   background-image: url(../../../misc/icons/000000/people.svg);
 119 }
 120 .toolbar-icon-system-modules-list:before {
 121   background-image: url(../../../misc/icons/787878/puzzlepiece.svg);
 122 }
 123 .toolbar-icon-system-modules-list:active:before,
 124 .toolbar-icon-system-modules-list.is-active:before {
 125   background-image: url(../../../misc/icons/000000/puzzlepiece.svg);
 126 }
 127 .toolbar-icon-system-admin-config:before {
 128   background-image: url(../../../misc/icons/787878/wrench.svg);
 129 }
 130 .toolbar-icon-system-admin-config:active:before,
 131 .toolbar-icon-system-admin-config.is-active:before {
 132   background-image: url(../../../misc/icons/000000/wrench.svg);
 133 }
 134 .toolbar-icon-system-admin-reports:before {
 135   background-image: url(../../../misc/icons/787878/barchart.svg);
 136 }
 137 .toolbar-icon-system-admin-reports:active:before,
 138 .toolbar-icon-system-admin-reports.is-active:before {
 139   background-image: url(../../../misc/icons/000000/barchart.svg);
 140 }
 141 .toolbar-icon-help-main:before {
 142   background-image: url(../../../misc/icons/787878/questionmark-disc.svg);
 143 }
 144 .toolbar-icon-help-main:active:before,
 145 .toolbar-icon-help-main.is-active:before {
 146   background-image: url(../../../misc/icons/000000/questionmark-disc.svg);
 147 }
 148
 149 @media only screen and (min-width: 16.5em) {
 150   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
 151     margin-left: 0;
 152     margin-right: 0;
 153     padding-left: 0;
 154     padding-right: 0;
 155     text-indent: -9999px;
 156     width: 4em;
 157   }
 158   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
 159     background-size: 42% auto;
 160     left: 0; /* LTR */
 161     width: 100%;
 162   }
 163   .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
 164     background-size: auto auto;
 165   }
 166   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
 167     left: auto;
 168     right: 0;
 169   }
 170 }
 171
 172 @media only screen and (min-width: 36em) {
 173   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
 174     background-position: left center; /* LTR */
 175     padding-left: 2.75em; /* LTR */
 176     padding-right: 1.3333em; /* LTR */
 177     text-indent: 0;
 178     width: auto;
 179   }
 180   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
 181     background-position: right center;
 182     padding-left: 1.3333em;
 183     padding-right: 2.75em;
 184   }
 185   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
 186     background-size: 100% auto;
 187     left: 0.6667em; /* LTR */
 188     width: 20px;
 189   }
 190   .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
 191     background-size: auto auto;
 192   }
 193   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
 194     left: 0;
 195     right: 0.6667em;
 196   }
 197 }
 198
 199 /**
 200  *  Accessibility/focus
 201  */
 202 .toolbar-tab a:focus {
 203   outline: none;
 204   text-decoration: underline;
 205 }
 206 .toolbar-lining button:focus {
 207   outline: none;
 208 }
 209 .toolbar-tray-horizontal a:focus,
 210 .toolbar-box a:focus {
 211   outline: none;
 212   background-color: #f5f5f5;
 213 }
 214 .toolbar-box a:hover:focus {
 215   text-decoration: underline;
 216 }
 217 .toolbar .toolbar-icon.toolbar-handle:focus {
 218   outline: none;
 219   background-color: #f5f5f5;
 220 }
 221
 222
 223 /**
 224  * Handle.
 225  */
 226 .toolbar .toolbar-icon.toolbar-handle {
 227   width: 4em;
 228   text-indent: -9999px;
 229 }
 230 .toolbar .toolbar-icon.toolbar-handle:before {
 231   left: 1.6667em; /* LTR */
 232 }
 233 [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
 234   left: auto;
 235   right: 1.6667em;
 236 }
 237 .toolbar .toolbar-icon.toolbar-handle:before {
 238   background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg);
 239 }
 240 .toolbar .toolbar-icon.toolbar-handle.open:before {
 241   background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);
 242 }
 243 .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
 244   background-image: url(../../../misc/icons/5181c6/twistie-down.svg);
 245   background-size: 75%;
 246 }
 247 .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
 248   background-image: url(../../../misc/icons/787878/twistie-up.svg);
 249   background-size: 75%;
 250 }
 251 .toolbar .toolbar-icon-escape-admin:before {
 252   background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg);
 253 }
 254 [dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
 255   background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg);
 256 }
 257 /**
 258  * Orientation toggle.
 259  */
 260 .toolbar .toolbar-toggle-orientation button {
 261   height: 39px;
 262   padding: 0;
 263   text-indent: -999em;
 264   width: 39px;
 265 }
 266 .toolbar .toolbar-toggle-orientation button:before {
 267   left: 0;
 268   right: 0;
 269   margin: 0 auto;
 270 }
 271 [dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
 272   padding: 0;
 273 }
 274 /**
 275  * In order to support a hover effect on the SVG images, while also supporting
 276  * RTL text direction and no SVG support, this little icon requires some very
 277  * specific targeting, setting and unsetting.
 278  */
 279 .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
 280   background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */
 281 }
 282 .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
 283 .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before
 284  {
 285   background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */
 286 }
 287 [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
 288   background-image: url(../../../misc/icons/bebebe/push-right.svg);
 289 }
 290 [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
 291 [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
 292   background-image: url(../../../misc/icons/787878/push-right.svg);
 293 }
 294 .toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
 295   background-image: url(../../../misc/icons/bebebe/push-up.svg);
 296 }
 297 .toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before,
 298 .toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before {
 299   background-image: url(../../../misc/icons/787878/push-up.svg);
 300 }