You are here

Home » API reference » Toolbar Themes 8

base_icons.css in Toolbar Themes 8 

/**
 * base_icons
 *
 * Base styles for toolbar icons.
 *
 * Most icons are embedded SVG. Icons are embedded using Grunticon. We are using
 * the original SVG icons from Drupal core, however the width and height
 * attribute have been replaced with a viewBox attribute so we can scale them
 * properly with CSS. Embedded SVG has the advantage of being styled with CSS,
 * and by using Grunticon JS loading we negate most of the bloat and overhead
 * associated with embedding SVG files.
 *
 * For the buttons (orientation toggles & menu click handles) please see
 * base_handles.scss and your themes main theme.scss file. These are styled
 * separably because this file will not load if the Show Icons setting is false.
 *
 * There are no colors in this file - those should be provided by sub-themes.
 */
#toolbar-administration .toolbar-icon:before, #toolbar-administration .toolbar-icon:after {
  background-image: none;
}

#toolbar-administration i.toolbar-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  padding: 0;
  margin-right: 0.5em;
  position: relative;
  top: 0.1em;
}

#toolbar-administration .toolbar-menu ul .toolbar-icon {
  padding-left: 1.3333em;
}

[dir="rtl"] #toolbar-administration .toolbar-menu ul .toolbar-icon {
  padding-left: 0;
  padding-right: 1.3333em;
}

@media only screen and (max-width: 16.5em) {
  #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-item {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 4em;
  }
  #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-item > .toolbar__link-label {
    text-indent: -9999px;
  }
}

@media only screen and (min-width: 36em) {
  #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-icon {
    background-position: left center;
    padding-left: 2.75em;
    padding-right: 1.3333em;
    text-indent: 0;
    width: auto;
  }
  [dir="rtl"] #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-icon {
    background-position: right center;
    padding-left: 1.3333em;
    padding-right: 2.75em;
  }
}

#toolbar-administration .toolbar-tab a .toolbar-box a:focus,
#toolbar-administration .toolbar-lining button .toolbar-box a:focus,
#toolbar-administration .toolbar-tray-horizontal a .toolbar-box a:focus {
  outline: none;
}
/*# sourceMappingURL=base_icons.css.map */

File

themes/base/base_icons.css
View source 
  1. /**

  2.  * base_icons

  3.  *

  4.  * Base styles for toolbar icons.

  5.  *

  6.  * Most icons are embedded SVG. Icons are embedded using Grunticon. We are using

  7.  * the original SVG icons from Drupal core, however the width and height

  8.  * attribute have been replaced with a viewBox attribute so we can scale them

  9.  * properly with CSS. Embedded SVG has the advantage of being styled with CSS,

  10.  * and by using Grunticon JS loading we negate most of the bloat and overhead

  11.  * associated with embedding SVG files.

  12.  *

  13.  * For the buttons (orientation toggles & menu click handles) please see

  14.  * base_handles.scss and your themes main theme.scss file. These are styled

  15.  * separably because this file will not load if the Show Icons setting is false.

  16.  *

  17.  * There are no colors in this file - those should be provided by sub-themes.

  18.  */

  19. #toolbar-administration .toolbar-icon:before, #toolbar-administration .toolbar-icon:after {

  20.   background-image: none;

  21. }

  22. 

  23. #toolbar-administration i.toolbar-icon {

  24.   display: inline-block;

  25.   width: 1em;

  26.   height: 1em;

  27.   padding: 0;

  28.   margin-right: 0.5em;

  29.   position: relative;

  30.   top: 0.1em;

  31. }

  32. 

  33. #toolbar-administration .toolbar-menu ul .toolbar-icon {

  34.   padding-left: 1.3333em;

  35. }

  36. 

  37. [dir="rtl"] #toolbar-administration .toolbar-menu ul .toolbar-icon {

  38.   padding-left: 0;

  39.   padding-right: 1.3333em;

  40. }

  41. 

  42. @media only screen and (max-width: 16.5em) {

  43.   #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-item {

  44.     margin-left: 0;

  45.     margin-right: 0;

  46.     padding-left: 0;

  47.     padding-right: 0;

  48.     width: 4em;

  49.   }

  50.   #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-item > .toolbar__link-label {

  51.     text-indent: -9999px;

  52.   }

  53. }

  54. 

  55. @media only screen and (min-width: 36em) {

  56.   #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-icon {

  57.     background-position: left center;

  58.     padding-left: 2.75em;

  59.     padding-right: 1.3333em;

  60.     text-indent: 0;

  61.     width: auto;

  62.   }

  63.   [dir="rtl"] #toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-icon {

  64.     background-position: right center;

  65.     padding-left: 1.3333em;

  66.     padding-right: 2.75em;

  67.   }

  68. }

  69. 

  70. #toolbar-administration .toolbar-tab a .toolbar-box a:focus,

  71. #toolbar-administration .toolbar-lining button .toolbar-box a:focus,

  72. #toolbar-administration .toolbar-tray-horizontal a .toolbar-box a:focus {

  73.   outline: none;

  74. }

  75. /*# sourceMappingURL=base_icons.css.map */