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  * Handle.
 224  */
 225 .toolbar .toolbar-icon.toolbar-handle {
 226   width: 4em;
 227   text-indent: -9999px;
 228 }
 229 .toolbar .toolbar-icon.toolbar-handle:before {
 230   left: 1.6667em; /* LTR */
 231 }
 232 [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
 233   left: auto;
 234   right: 1.6667em;
 235 }
 236 .toolbar .toolbar-icon.toolbar-handle:before {
 237   background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg);
 238 }
 239 .toolbar .toolbar-icon.toolbar-handle.open:before {
 240   background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);
 241 }
 242 .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
 243   background-image: url(../../../misc/icons/5181c6/twistie-down.svg);
 244   background-size: 75%;
 245 }
 246 .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
 247   background-image: url(../../../misc/icons/787878/twistie-up.svg);
 248   background-size: 75%;
 249 }
 250 .toolbar .toolbar-icon-escape-admin:before {
 251   background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg);
 252 }
 253 [dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
 254   background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg);
 255 }
 256 /**
 257  * Orientation toggle.
 258  */
 259 .toolbar .toolbar-toggle-orientation button {
 260   height: 39px;
 261   padding: 0;
 262   text-indent: -999em;
 263   width: 39px;
 264 }
 265 .toolbar .toolbar-toggle-orientation button:before {
 266   left: 0;
 267   right: 0;
 268   margin: 0 auto;
 269 }
 270 [dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
 271   padding: 0;
 272 }
 273 /**
 274  * In order to support a hover effect on the SVG images, while also supporting
 275  * RTL text direction and no SVG support, this little icon requires some very
 276  * specific targeting, setting and unsetting.
 277  */
 278 .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
 279   background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */
 280 }
 281 .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
 282 .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
 283   background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */
 284 }
 285 [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
 286   background-image: url(../../../misc/icons/bebebe/push-right.svg);
 287 }
 288 [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
 289 [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
 290   background-image: url(../../../misc/icons/787878/push-right.svg);
 291 }
 292 .toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
 293   background-image: url(../../../misc/icons/bebebe/push-up.svg);
 294 }
 295 .toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before,
 296 .toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before {
 297   background-image: url(../../../misc/icons/787878/push-up.svg);
 298 }