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

@ -7,19 +7,19 @@
a { a {
/* Todo: extend table header */ /* Todo: extend table header */
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $line-height-base; line-height: $line-height-base;
font-weight: 400; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
padding: $spacer-x*.75 $spacer-y; padding: $spacer-x*.75 $spacer-y;
/* end table header */ /* end table header */
display: block; display: block;
margin-left: -$spacer-y; margin-left: -$spacer-y;
margin-right: -$spacer-y; margin-right: -$spacer-y;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
border-bottom: 1px solid #ddd; border-bottom: 1px solid $gray-lighter;
color: $body-color; color: $body-color;
&::before { &::before {
@ -50,4 +50,4 @@
} }
} }
} }
} }

View File

@ -4,22 +4,24 @@
width: 100%; width: 100%;
height: $navbar-total-height; height: $navbar-total-height;
z-index: 60; z-index: 60;
}
.north-header__navigation { // Typically to hold breadcrumbs and back button
float: left;
padding: 0 $spacer-y;
max-width: 70%;
max-height: $navbar-height;
}
.north-header__heading { // Typically to hold breadcrumbs and back button
font-size: $font-size-lg; .north-header__navigation {
font-weight: normal; float: left;
line-height: 20px; padding: 0 $spacer-y;
width: 100%; max-width: 70%;
} max-height: $navbar-height;
}
.north-header__actions { // To hold things like search icon and view toggle .north-header__heading {
font-size: $font-size-lg;
} font-weight: normal;
} line-height: 20px;
width: 100%;
}
// 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} />; return <Component key={props.name} {...props} />;
} }
/**
* @todo Use dynamic breadcrumbs
*/
getBreadcrumbs() { getBreadcrumbs() {
return [ return [
{ {

View File

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

View File

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