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

View File

@ -4,22 +4,24 @@
width: 100%;
height: $navbar-total-height;
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 {
font-size: $font-size-lg;
font-weight: normal;
line-height: 20px;
width: 100%;
}
// Typically to hold breadcrumbs and back button
.north-header__navigation {
float: left;
padding: 0 $spacer-y;
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} />;
}
/**
* @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;
@ -118,4 +118,4 @@
}
}
}
}
}