BEM notation corrections, use Bootstrap vars

See comments on https://github.com/silverstripe/silverstripe-framework/pull/5317
This commit is contained in:
Ingo Schommer 2016-04-18 23:38:59 +12:00
parent 3c8960d88b
commit 75b2c7c360
5 changed files with 36 additions and 31 deletions

View File

@ -19,7 +19,7 @@
margin-right: -$spacer-y;
text-decoration: none;
position: relative;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid $gray-lighter;
color: $body-color;
&::before {

View File

@ -4,8 +4,10 @@
width: 100%;
height: $navbar-total-height;
z-index: 60;
}
.north-header__navigation { // Typically to hold breadcrumbs and back button
// Typically to hold breadcrumbs and back button
.north-header__navigation {
float: left;
padding: 0 $spacer-y;
max-width: 70%;
@ -19,7 +21,7 @@
width: 100%;
}
.north-header__actions { // To hold things like search icon and view toggle
// To hold things like search icon and view toggle
.north-header__actions {
}
}

View File

@ -138,6 +138,9 @@ class CampaignAdminContainer extends SilverStripeComponent {
return <Component key={props.name} {...props} />;
}
/**
* @todo Use dynamic breadcrumbs
*/
getBreadcrumbs() {
return [
{

View File

@ -40,7 +40,7 @@ class CampaignItem extends SilverStripeComponent {
// Linked items
let links = (
<span className="list-group-item--haslinks">
<span className="list-group-item--has-links">
<i className="font-icon-link"></i>
3 linked items
</span>
@ -56,7 +56,7 @@ class CampaignItem extends SilverStripeComponent {
<div>
{thumbnail}
<h4 className="list-group-item__heading">{item.Title}</h4>
<span className="list-group-item--islinked"><i className="font-icon-link"></i></span>
<span className="list-group-item--is-linked"><i className="font-icon-link"></i></span>
{links}
{badge.className && badge.Title &&
<span className={badge.className}>{badge.Title}</span>

View File

@ -58,8 +58,8 @@
}
// Show linked items
&--haslinks,
&--islinked {
&--has-links,
&--is-linked {
color: $brand-primary;
float: right;
font-size: $font-size-sm;
@ -80,7 +80,7 @@
&:hover {
text-decoration: none;
.list-group-item--haslinks {
.list-group-item--has-links {
display: block;
opacity: 1;
}
@ -91,7 +91,7 @@
color: #FFF;
opacity: 1;
.list-group-item--haslinks,
.list-group-item--has-links,
.list-group-item__status {
color: #FFF;
opacity: 1;