silverstripe-framework/admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss
Ingo Schommer 21db18e7ef Correct naming for JS and CSS files in client/
Removed some dist/js/*.js files since they're no longer built as individual files.
This was a side effect of them living in the toplevel folder of admin/client/src/,
which used to have all the legacy/*.js files in there (they do need to be built).

Following AirBnB convention: https://github.com/airbnb/javascript#naming--filename-matches-export
While it technically allows index.js files, we found them to be bad for dev and debugging in practice:
Depending on the used IDE, editor tabs all look the same. Other views like Chrome Dev Tools with
sourcemaps rely on path context, and are harder to auto-complete.

There's no direct rules for CSS files, but same principles apply here.

Also renamed the sections/ folder to containers/, which more clearly communicates
the distinction between components/ (shouldn't contain state-dependant, smart components).

Renamed state/ files to follow AirBnB naming conventions
https://github.com/airbnb/javascript#naming--filename-matches-export
https://github.com/airbnb/javascript#naming--camelCase-default-export
https://github.com/airbnb/javascript#naming--PascalCase-singleton
Leaving the folder name in state/<state-key> lowercase since
that's also the key to reducers in the actual state object.

References:
http://engineering.kapost.com/2016/01/organizing-large-react-applications/
https://github.com/erikras/react-redux-universal-hot-example/tree/master/src
https://github.com/RickWong/react-isomorphic-starterkit/tree/master/src
https://github.com/react-toolbox/react-toolbox/issues/98
https://github.com/react-bootstrap/react-bootstrap/tree/master/src
2016-04-25 15:43:19 +12:00

104 lines
1.7 KiB
SCSS

.campaign-items {
.list-group {
margin-left: -$spacer-y;
margin-right: -$spacer-y;
border-bottom: 1px solid $border-color-light;
margin-bottom: $spacer-y*.75;
}
.list-group-item {
padding-left: $spacer-y;
padding-right: $spacer-y;
min-height: 64px;
cursor: pointer;
text-decoration: none;
&:first-child {
border-top: none;
}
&:hover {
text-decoration: none;
.list-group-item--has-links {
display: block;
opacity: 1;
}
}
&.active {
background-color: $brand-primary;
color: #FFF;
opacity: 1;
.list-group-item--has-links,
.list-group-item__status {
color: #FFF;
opacity: 1;
}
}
}
.list-group-item__heading {
font-weight: 400;
font-size: 14px;
margin: 2px 0 5px;
color: $body-color;
}
.list-group-item__thumbnail {
width: 64px;
height: 64px;
display: block;
background: #ccc;
float: left;
margin: -12px 12px 0 -$spacer-y;
}
.label {
text-transform: uppercase;
font-size: 10px;
font-weight: 400;
letter-spacing: .4px;
}
// Show linked items
.list-group-item--has-links,
.list-group-item--is-linked {
color: $brand-primary;
float: right;
font-size: $font-size-sm;
position: absolute;
right: $spacer-y;
top: 27px;
opacity: 0;
transition: opacity .2s ease-in-out;
.font-icon-link {
font-size: 16px;
position: relative;
top: 3px;
margin-right: 1px;
}
}
.list-group-item--published {
opacity: .6;
transition: opacity .2s ease-in-out;
.list-group-item__status {
opacity: 0;
transition: opacity .2s ease-in-out;
}
&:hover {
opacity: 1;
.list-group-item__status {
display: inline-block;
opacity: 1;
}
}
}
}