ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace zen grids with css grid. Move print styles print style file. Remove Drupal specific styles.

Browse source
This commit is contained in:
Fredrik Jonsson 2017-07-16 13:55:22 +02:00
commit 265a50cda5
1 changed files with 201 additions and 398 deletions
Download patch file Download diff file Expand all files Collapse all files

41
sass/components/box/_box.scss
View file

@ -2,7 +2,7 @@
//
// A simple box style.
//
// A Drupal block is often styled as a box. However, this design component is
// A block is often styled as a box. However, this design component is
// not applied to any blocks by default; it is used as an example of how to
// build and document a CSS component.
//
@ -35,19 +35,9 @@
}
// Sass compiles this nested ruleset's selector into:
// .box:focus, .box:hover, .box.is-focus, .box--is-focus,
// %box:focus, %box:hover, %box.is-focus, %box--is-focus {}
//
// The ".box--is-focus" class is a stray class we don't actually want, but we
// deal with it because we often want a placeholder selector like
// %box--is-focus in case we need to use @extends later.
//
// The ".is-" part of the class name is a Drupal 8 BEM naming convention that
// indicates the "focus" is a _state_ of the "box" component.
// .box:focus, .box:hover, %box:focus, %box:hover
&:focus,
&:hover,
&.is-focus,
&--is-focus {
&:hover {
border-color: color(text);
}
@ -59,28 +49,3 @@
border-color: color(link);
}
}
//
// Drupal selectors.
//
// In this part of the file, we write some fugly selectors if we can't figure
// out how to insert the class we want (.box) into the Drupal theme system. Then
// we @extend from the fugly selector into the nicely-written component
// selector.
//
// You could create a theme hook suggestion and override the block.tpl.php just
// for the sidebar regions or write a HOOK_preprocess_block() function to check
// for the regions and insert the classes into the right variables, or, if you
// have no idea what I'm talking about, you could just use this fugly CSS
// selector:
//
// [class$="sidebar"] {
// .block {
// @extend %box;
// }
//
// .block__title {
// @extend %box__title;
// }
// }