2015-08-17 17:00:26 -07:00
/ * *
* @ file
* Styling for toolbar module icons .
* /
. toolbar . toolbar-icon {
padding-left : 2 . 75em ; /* LTR */
position : relative ;
}
[ dir = "rtl" ] . toolbar . toolbar-icon {
padding-left : 1 . 3333em ;
padding-right : 2 . 75em ;
}
. toolbar . toolbar-icon : before {
background-attachment : scroll ;
background-color : transparent ;
background-position : center center ;
background-repeat : no-repeat ;
background-size : 100 % auto ;
content : '' ;
display : block ;
height : 100 % ;
left : 0 . 6667em ; /* LTR */
position : absolute ;
top : 0 ;
width : 20px ;
}
[ dir = "rtl" ] . toolbar . toolbar-icon : before {
left : auto ;
right : 0 . 6667em ;
}
. toolbar button . toolbar-icon {
background-color : transparent ;
border : 0 ;
font-size : 1em ;
}
. toolbar . toolbar-menu ul . toolbar-icon {
padding-left : 1 . 3333em ; /* LTR */
}
[ dir = "rtl" ] . toolbar . toolbar-menu ul . toolbar-icon {
padding-left : 0 ;
padding-right : 1 . 3333em ;
}
. toolbar . toolbar-menu ul a . toolbar-icon : before {
display : none ;
}
. toolbar . toolbar-tray-vertical . toolbar-menu ul a {
padding-left : 2 . 75em ; /* LTR */
}
[ dir = "rtl" ] . toolbar . toolbar-tray-vertical . toolbar-menu ul a {
padding-left : 0 ;
padding-right : 2 . 75em ;
}
. toolbar . toolbar-tray-vertical . toolbar-menu ul ul a {
padding-left : 3 . 75em ; /* LTR */
}
[ dir = "rtl" ] . toolbar . toolbar-tray-vertical . toolbar-menu ul ul a {
padding-left : 0 ;
padding-right : 3 . 75em ;
}
. toolbar . toolbar-tray-vertical . toolbar-menu a {
padding-left : 2 . 75em ; /* LTR */
padding-right : 4em ; /* LTR */
}
[ dir = "rtl" ] . toolbar . toolbar-tray-vertical . toolbar-menu a {
padding-left : 4em ;
padding-right : 2 . 75em ;
}
/ * *
* Top level icons .
* /
. toolbar-bar . toolbar-icon-menu : before {
background-image : url ( . . / . . / . . / misc / icons / bebebe / hamburger . svg ) ;
}
. toolbar-bar . toolbar-icon-menu : active : before ,
. toolbar-bar . toolbar-icon-menu . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / ffffff / hamburger . svg ) ;
}
. toolbar-bar . toolbar-icon-help : before {
background-image : url ( . . / . . / . . / misc / icons / bebebe / questionmark-disc . svg ) ;
}
. toolbar-bar . toolbar-icon-help : active : before ,
. toolbar-bar . toolbar-icon-help . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / ffffff / questionmark-disc . svg ) ;
}
/ * *
* Main menu icons .
* /
. toolbar-icon-system-admin-content : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / file . svg ) ;
}
. toolbar-icon-system-admin-content : active : before ,
. toolbar-icon-system-admin-content . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / file . svg ) ;
}
. toolbar-icon-system-admin-structure : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / orgchart . svg ) ;
}
. toolbar-icon-system-admin-structure : active : before ,
. toolbar-icon-system-admin-structure . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / orgchart . svg ) ;
}
. toolbar-icon-system-themes-page : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / paintbrush . svg ) ;
}
. toolbar-icon-system-themes-page : active : before ,
. toolbar-icon-system-themes-page . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / paintbrush . svg ) ;
}
. toolbar-icon-entity-user-collection : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / people . svg ) ;
}
. toolbar-icon-entity-user-collection : active : before ,
. toolbar-icon-entity-user-collection . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / people . svg ) ;
}
. toolbar-icon-system-modules-list : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / puzzlepiece . svg ) ;
}
. toolbar-icon-system-modules-list : active : before ,
. toolbar-icon-system-modules-list . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / puzzlepiece . svg ) ;
}
. toolbar-icon-system-admin-config : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / wrench . svg ) ;
}
. toolbar-icon-system-admin-config : active : before ,
. toolbar-icon-system-admin-config . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / wrench . svg ) ;
}
. toolbar-icon-system-admin-reports : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / barchart . svg ) ;
}
. toolbar-icon-system-admin-reports : active : before ,
. toolbar-icon-system-admin-reports . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / barchart . svg ) ;
}
. toolbar-icon-help-main : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / questionmark-disc . svg ) ;
}
. toolbar-icon-help-main : active : before ,
. toolbar-icon-help-main . is-active : before {
background-image : url ( . . / . . / . . / misc / icons / 000000 / questionmark-disc . svg ) ;
}
@ media only screen and ( min-width : 16 . 5em ) {
2015-09-04 13:20:09 -07:00
. toolbar . toolbar-bar . toolbar-tab > . toolbar-icon {
2015-08-17 17:00:26 -07:00
margin-left : 0 ;
margin-right : 0 ;
padding-left : 0 ;
padding-right : 0 ;
text-indent : -9999px ;
width : 4em ;
}
2015-09-04 13:20:09 -07:00
. toolbar . toolbar-bar . toolbar-tab > . toolbar-icon : before {
2015-08-17 17:00:26 -07:00
background-size : 42 % auto ;
left : 0 ; /* LTR */
width : 100 % ;
}
2015-09-04 13:20:09 -07:00
. no-svg . toolbar . toolbar-bar . toolbar-tab > . toolbar-icon : before {
background-size : auto auto ;
}
[ dir = "rtl" ] . toolbar . toolbar-bar . toolbar-tab > . toolbar-icon : before {
2015-08-17 17:00:26 -07:00
left : auto ;
right : 0 ;
}
}
@ media only screen and ( min-width : 36em ) {
2015-09-04 13:20:09 -07:00
. toolbar . toolbar-bar . toolbar-tab > . toolbar-icon {
2015-08-17 17:00:26 -07:00
background-position : left center ; /* LTR */
padding-left : 2 . 75em ; /* LTR */
padding-right : 1 . 3333em ; /* LTR */
text-indent : 0 ;
width : auto ;
}
2015-09-04 13:20:09 -07:00
[ dir = "rtl" ] . toolbar . toolbar-bar . toolbar-tab > . toolbar-icon {
2015-08-17 17:00:26 -07:00
background-position : right center ;
padding-left : 1 . 3333em ;
padding-right : 2 . 75em ;
}
2015-09-04 13:20:09 -07:00
. toolbar . toolbar-bar . toolbar-tab > . toolbar-icon : before {
2015-08-17 17:00:26 -07:00
background-size : 100 % auto ;
left : 0 . 6667em ; /* LTR */
width : 20px ;
}
2015-09-04 13:20:09 -07:00
. no-svg . toolbar . toolbar-bar . toolbar-tab > . toolbar-icon : before {
background-size : auto auto ;
}
[ dir = "rtl" ] . toolbar . toolbar-bar . toolbar-tab > . toolbar-icon : before {
2015-08-17 17:00:26 -07:00
left : 0 ;
right : 0 . 6667em ;
}
}
/ * *
* Accessibility / focus
* /
. toolbar-tab a : focus {
outline : none ;
text-decoration : underline ;
}
. toolbar-lining button : focus {
outline : none ;
}
. toolbar-tray-horizontal a : focus ,
. toolbar-box a : focus {
outline : none ;
background-color : # f5f5f5 ;
}
. toolbar-box a : hover : focus {
text-decoration : underline ;
}
. toolbar . toolbar-icon . toolbar-handle : focus {
outline : none ;
background-color : # f5f5f5 ;
}
/ * *
* Handle .
* /
. toolbar . toolbar-icon . toolbar-handle {
width : 4em ;
text-indent : -9999px ;
}
. toolbar . toolbar-icon . toolbar-handle : before {
left : 1 . 6667em ; /* LTR */
}
[ dir = "rtl" ] . toolbar . toolbar-icon . toolbar-handle : before {
left : auto ;
right : 1 . 6667em ;
}
. toolbar . toolbar-icon . toolbar-handle : before {
background-image : url ( . . / . . / . . / misc / icons / 5181c6 / chevron-disc-down . svg ) ;
}
. toolbar . toolbar-icon . toolbar-handle . open : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / chevron-disc-up . svg ) ;
}
. toolbar . toolbar-menu . toolbar-menu . toolbar-icon . toolbar-handle : before {
background-image : url ( . . / . . / . . / misc / icons / 5181c6 / twistie-down . svg ) ;
background-size : 75 % ;
}
. toolbar . toolbar-menu . toolbar-menu . toolbar-icon . toolbar-handle . open : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / twistie-up . svg ) ;
background-size : 75 % ;
}
. toolbar . toolbar-icon-escape-admin : before {
background-image : url ( . . / . . / . . / misc / icons / bebebe / chevron-disc-left . svg ) ;
}
[ dir = "rtl" ] . toolbar . toolbar-icon-escape-admin : before {
background-image : url ( . . / . . / . . / misc / icons / bebebe / chevron-disc-right . svg ) ;
}
/ * *
* Orientation toggle .
* /
. toolbar . toolbar-toggle-orientation button {
2015-10-08 11:40:12 -07:00
height : 39px ;
2015-08-17 17:00:26 -07:00
padding : 0 ;
text-indent : -999em ;
2015-10-08 11:40:12 -07:00
width : 39px ;
2015-08-17 17:00:26 -07:00
}
. toolbar . toolbar-toggle-orientation button : before {
2015-10-08 11:40:12 -07:00
left : 0 ;
2015-08-17 17:00:26 -07:00
right : 0 ;
2015-10-08 11:40:12 -07:00
margin : 0 auto ;
2015-08-17 17:00:26 -07:00
}
[ dir = "rtl" ] . toolbar . toolbar-toggle-orientation . toolbar-icon {
2015-10-08 11:40:12 -07:00
padding : 0 ;
2015-08-17 17:00:26 -07:00
}
/ * *
* In order to support a hover effect on the SVG images , while also supporting
* RTL text direction and no SVG support , this little icon requires some very
* specific targeting , setting and unsetting .
* /
. toolbar . toolbar-toggle-orientation [ value = "vertical" ] : before {
background-image : url ( . . / . . / . . / misc / icons / bebebe / push-left . svg ) ; /* LTR */
}
. toolbar . toolbar-toggle-orientation [ value = "vertical" ] : hover : before ,
2018-11-23 12:29:20 +00:00
. toolbar . toolbar-toggle-orientation [ value = "vertical" ] : focus : before {
2015-08-17 17:00:26 -07:00
background-image : url ( . . / . . / . . / misc / icons / 787878 / push-left . svg ) ; /* LTR */
}
[ dir = "rtl" ] . toolbar . toolbar-toggle-orientation [ value = "vertical" ] : before {
background-image : url ( . . / . . / . . / misc / icons / bebebe / push-right . svg ) ;
}
[ dir = "rtl" ] . toolbar . toolbar-toggle-orientation [ value = "vertical" ] : hover : before ,
[ dir = "rtl" ] . toolbar . toolbar-toggle-orientation [ value = "vertical" ] : focus : before {
background-image : url ( . . / . . / . . / misc / icons / 787878 / push-right . svg ) ;
}
. toolbar . toolbar-toggle-orientation [ value = "horizontal" ] : before {
background-image : url ( . . / . . / . . / misc / icons / bebebe / push-up . svg ) ;
}
2015-10-08 11:40:12 -07:00
. toolbar . toolbar-toggle-orientation [ value = "horizontal" ] : hover : before ,
. toolbar . toolbar-toggle-orientation [ value = "horizontal" ] : focus : before {
2015-08-17 17:00:26 -07:00
background-image : url ( . . / . . / . . / misc / icons / 787878 / push-up . svg ) ;
}