Merge pull request #6016 from sminnee/travis-lint

NEW: Run JS/CSS linting in Travis.
This commit is contained in:
Ingo Schommer 2016-09-18 16:27:00 +12:00 committed by GitHub
commit f9581438b5
25 changed files with 2572 additions and 2158 deletions

View File

@ -1,19 +0,0 @@
engines:
eslint:
enabled: true
scss-lint:
enabled: true
duplication:
enabled: true
config:
languages:
javascript:
mass_threshold: 100
ratings:
paths:
- client/src/**
- admin/client/src/**
exclude_paths:
- "**/*"
- "!client/src/**"
- "!admin/client/src/**"

178
.sass-lint.yml Normal file
View File

@ -0,0 +1,178 @@
# sass-lint config to match the AirBNB style guide
files:
include: '**/client/src/**/*.scss'
ignore:
- 'client/src/styles/legacy/*'
- 'admin/client/src/styles/legacy/*'
options:
formatter: stylish
merge-default-rules: false
rules:
# Warnings
# Things that require actual refactoring are marked as warnings
class-name-format:
- 1
- convention: hyphenatedbem
placeholder-name-format:
- 1
- convention: hyphenatedlowercase
nesting-depth:
- 1
- max-depth: 3
no-ids: 1
no-important: 1
no-misspelled-properties:
- 1
- extra-properties:
- "-moz-border-radius-topleft"
- "-moz-border-radius-topright"
- "-moz-border-radius-bottomleft"
- "-moz-border-radius-bottomright"
variable-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
no-extends: 1
# Warnings: these things are preferential rather than mandatory
no-css-comments: 1
# Errors
# Things that can be easily fixed are marked as errors
indentation:
- 2
- size: 2
final-newline:
- 2
- include: true
no-trailing-whitespace: 2
border-zero:
- 2
- convention: '0'
brace-style:
- 2
- allow-single-line: true
clean-import-paths:
- 2
- filename-extension: false
leading-underscore: false
no-debug: 2
no-empty-rulesets: 2
no-invalid-hex: 2
no-mergeable-selectors: 2
# no-qualifying-elements:
# - 1
# - allow-element-with-attribute: false
# allow-element-with-class: false
# allow-element-with-id: false
no-trailing-zero: 2
no-url-protocols: 2
quotes:
- 2
- style: double
space-after-bang:
- 2
- include: false
space-after-colon:
- 2
- include: true
space-after-comma:
- 2
- include: true
space-before-bang:
- 2
- include: true
space-before-brace:
- 2
- include: true
space-before-colon: 2
space-between-parens:
- 2
- include: false
trailing-semicolon: 2
url-quotes: 2
zero-unit: 2
single-line-per-selector: 2
one-declaration-per-line: 2
empty-line-between-blocks:
- 2
- ignore-single-line-rulesets: true
# Missing rules
# There are no sass-lint rules for the following AirBNB style items, but thess
# - Put comments on their own line
# - Put property delcarations before mixins
# Disabled rules
# These are other rules that we may wish to consider using in the future
# They are not part of the AirBNB CSS standard but they would introduce some strictness
# bem-depth: 0
# variable-for-property: 0
# no-transition-all: 0
# hex-length:
# - 1
# - style: short
# hex-notation:
# - 1
# - style: lowercase
# property-units:
# - 1
# - global:
# - ch
# - em
# - ex
# - rem
# - cm
# - in
# - mm
# - pc
# - pt
# - px
# - q
# - vh
# - vw
# - vmin
# - vmax
# - deg
# - grad
# - rad
# - turn
# - ms
# - s
# - Hz
# - kHz
# - dpi
# - dpcm
# - dppx
# - '%'
# per-property: {}
# force-attribute-nesting: 1
# force-element-nesting: 1
# force-pseudo-nesting: 1
# function-name-format:
# - 1
# - allow-leading-underscore: true
# convention: hyphenatedlowercase
# no-color-literals: 1
# no-duplicate-properties: 1
# mixin-name-format:
# - 1
# - allow-leading-underscore: true
# convention: hyphenatedlowercase
# shorthand-values:
# - 1
# - allowed-shorthands:
# - 1
# - 2
# - 3
# leading-zero:
# - 1
# - include: false
# no-vendor-prefixes:
# - 1
# - additional-identifiers: []
# excluded-identifiers: []
# placeholder-in-extend: 1
# no-color-keywords: 2

View File

@ -1,63 +0,0 @@
# See https://docs.silverstripe.org/en/4.0/getting_started/css_coding_conventions/
# Install instructions: https://github.com/brigade/scss-lint
# Adapted from https://github.com/airbnb/css
# Used for CodeClimate CI checks.
scss_files: '**/client/src/**/*.scss'
exclude:
- 'client/src/styles/legacy/*'
- 'admin/client/src/styles/legacy/*'
- 'admin/client/src/font/styles.css'
severity: error
linters:
BorderZero:
enabled: true
convention: zero
BemDepth:
enabled: true
DeclarationOrder:
enabled: false
ExtendDirective:
enabled: true
LeadingZero:
enabled: false
NameFormat:
enabled: true
PrivateNamingConvention:
enabled: true
prefix: _
PropertySortOrder:
enabled: false
QualifyingElement:
enabled: false
SelectorFormat:
enabled: true
convention: hyphenated_BEM
class_convention: ^(?!js-).*
class_convention_explanation: should not be written in the form js-*
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: false
StringQuotes:
enabled: true
style: double_quotes
UrlQuotes:
# TODO Re-enable once it support double quotes
enabled: false

View File

@ -48,8 +48,8 @@ before_script:
- "if [ \"$DB\" = \"PGSQL\" ]; then composer require silverstripe/postgresql:2.0.x-dev --prefer-dist; fi" - "if [ \"$DB\" = \"PGSQL\" ]; then composer require silverstripe/postgresql:2.0.x-dev --prefer-dist; fi"
- "if [ \"$DB\" = \"SQLITE\" ]; then composer require silverstripe/sqlite3:2.0.x-dev --prefer-dist; fi" - "if [ \"$DB\" = \"SQLITE\" ]; then composer require silverstripe/sqlite3:2.0.x-dev --prefer-dist; fi"
- "if [ \"$CMS_TEST\" = \"1\" ]; then COMPOSER_ROOT_VERSION=4.0.x-dev composer require silverstripe/cms:4.0.x-dev silverstripe/siteconfig:4.0.x-dev silverstripe/reports:4.0.x-dev --prefer-dist; fi" - "if [ \"$CMS_TEST\" = \"1\" ]; then COMPOSER_ROOT_VERSION=4.0.x-dev composer require silverstripe/cms:4.0.x-dev silverstripe/siteconfig:4.0.x-dev silverstripe/reports:4.0.x-dev --prefer-dist; fi"
- "if [ \"$NPM_TEST\" = \"1\" ] && [ `git log --format=format:%aE -1` = \"support@greenkeeper.io\" ]; then echo \"Removing npm-shrinkwrap.json\"; rm npm-shrinkwrap.json; fi"
- "if [ \"$NPM_TEST\" = \"1\" ]; then nvm install $TRAVIS_NODE_VERSION && npm install; fi" - "if [ \"$NPM_TEST\" = \"1\" ]; then nvm install $TRAVIS_NODE_VERSION && npm install; fi"
- "if [ \"$BEHAT_TEST\" = \"1\" ]; then sh -e /etc/init.d/xvfb start; sleep 3; fi" - "if [ \"$BEHAT_TEST\" = \"1\" ]; then sh -e /etc/init.d/xvfb start; sleep 3; fi"
- "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/selenium-server-standalone > selenium.log 2>&1 &); fi" - "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/selenium-server-standalone > selenium.log 2>&1 &); fi"
- "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/serve --bootstrap-file tests/behat/serve-bootstrap.php &> serve.log &); fi" - "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/serve --bootstrap-file tests/behat/serve-bootstrap.php &> serve.log &); fi"
@ -59,6 +59,7 @@ script:
- "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"\" ]; then vendor/bin/behat --config tests/behat/config.yml .; fi" - "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"\" ]; then vendor/bin/behat --config tests/behat/config.yml .; fi"
- "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"1\" ]; then vendor/bin/behat @cms --config cms/tests/behat/behat.yml; fi" - "if [ \"$BEHAT_TEST\" = \"1\" ] && [ \"$CMS_TEST\" = \"1\" ]; then vendor/bin/behat @cms --config cms/tests/behat/behat.yml; fi"
- "if [ \"$NPM_TEST\" = \"1\" ]; then npm run test; fi" - "if [ \"$NPM_TEST\" = \"1\" ]; then npm run test; fi"
- "if [ \"$NPM_TEST\" = \"1\" ]; then npm run lint; fi"
after_failure: after_failure:
- php ~/travis-support/travis_upload_artifacts.php --if-env BEHAT_TEST,ARTIFACTS_BUCKET,ARTIFACTS_KEY,ARTIFACTS_SECRET --target-path $TRAVIS_REPO_SLUG/$TRAVIS_BUILD_ID/$TRAVIS_JOB_ID --artifacts-base-url https://s3.amazonaws.com/$ARTIFACTS_BUCKET/ - php ~/travis-support/travis_upload_artifacts.php --if-env BEHAT_TEST,ARTIFACTS_BUCKET,ARTIFACTS_KEY,ARTIFACTS_SECRET --target-path $TRAVIS_REPO_SLUG/$TRAVIS_BUILD_ID/$TRAVIS_JOB_ID --artifacts-base-url https://s3.amazonaws.com/$ARTIFACTS_BUCKET/

View File

@ -1,550 +1,622 @@
// scss-lint:disable all
//Color Variables //Color Variables
$message: #BDBD00; // blue $message: #BDBD00; // blue
$good: #359318; // green $good: #359318; // green
$warning: #E07127; // orange $warning: #E07127; // orange
$warningBg: #fcf8f2; $warningBg: #fcf8f2;
$warningBorder: #ffc28b; $warningBorder: #ffc28b;
$error: #C61414 /* #E21607 */; // red $error: #C61414; // red - was #E21607
$errorBg: #FDF1F3; $errorBg: #FDF1F3;
$errorBorder: #F8C3CD; $errorBorder: #F8C3CD;
$link: #0973A6; $link: #0973A6;
$gradientTop: #B1C0C5; $gradientTop: #B1C0C5;
$gradientBottom: #7F9198; $gradientBottom: #7F9198;
//Mixin to create a gradient from top to bottom //Mixin to create a gradient from top to bottom
@mixin topGradient($topColor, $bottomColor){ @mixin topGradient($topColor, $bottomColor) {
background: $topColor; /* Old browszzzzzers */ background: $topColor; // Old browszzzzzers
background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); // FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$topColor), color-stop(100%,$bottomColor)); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topColor), color-stop(100%, $bottomColor)); // Chrome,Safari4+
background: -webkit-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Opera11.10+ */ background: -o-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Opera11.10+
background: -ms-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* IE10+ */ background: -ms-linear-gradient(top, $topColor 0%, $bottomColor 100%); // IE10+
background: linear-gradient(to bottom, $topColor 0%,$bottomColor 100%); /* W3C */ background: linear-gradient(to bottom, $topColor 0%, $bottomColor 100%); // W3C
.lt-ie9 &{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); /* IE6-9 */ .lt-ie9 & {
} filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); // IE6-9
$experimental-support-for-svg: true; }
/* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ // $experimental-support-for-svg: true;
// @include background-image(linear-gradient(top, $topColor,$bottomColor));
} }
//Mixin to create rounded corners. Takes a value for each of the 4 corners //Mixin to create rounded corners. Takes a value for each of the 4 corners
@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft){ @mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft) {
-moz-border-radius-topleft: $topLeft; -moz-border-radius-topleft: $topLeft;
-moz-border-radius-topright: $topRight; -moz-border-radius-topright: $topRight;
-moz-border-radius-bottomright: $bottomRight; -moz-border-radius-bottomright: $bottomRight;
-moz-border-radius-bottomleft: $bottomLeft; -moz-border-radius-bottomleft: $bottomLeft;
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft; -webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
border-radius: $topLeft $topRight $bottomRight $bottomLeft; border-radius: $topLeft $topRight $bottomRight $bottomLeft;
} }
//Mixin to create a regular box shadow //Mixin to create a regular box shadow
@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color){ @mixin boxShadow($horizontal, $vertical, $blur, $spread, $color) {
-webkit-box-shadow: $horizontal $vertical $blur $spread $color; -webkit-box-shadow: $horizontal $vertical $blur $spread $color;
-moz-box-shadow: $horizontal $vertical $blur $spread $color; -moz-box-shadow: $horizontal $vertical $blur $spread $color;
box-shadow: $horizontal $vertical $blur $spread $color; box-shadow: $horizontal $vertical $blur $spread $color;
} }
// Drop shadows // Drop shadows
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.15)) { @mixin box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, .15)) {
-webkit-box-shadow: $shadow; -webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow; -moz-box-shadow: $shadow;
box-shadow: $shadow; box-shadow: $shadow;
} }
//Mixin to create an inset box shadow //Mixin to create an inset box shadow
@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color){ @mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color) {
-webkit-box-shadow: inset $horizontal $vertical $blur $spread $color; -webkit-box-shadow: inset $horizontal $vertical $blur $spread $color;
-moz-box-shadow: inset $horizontal $vertical $blur $spread $color; -moz-box-shadow: inset $horizontal $vertical $blur $spread $color;
box-shadow: inset $horizontal $vertical $blur $spread $color; box-shadow: inset $horizontal $vertical $blur $spread $color;
} }
body { body {
font-family: Arial, san-serif; font-family: Arial, san-serif;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
margin-bottom: 18px; margin-bottom: 18px;
color: #333; color: #333;
width: 940px; width: 940px;
margin: 0 auto 18px; margin: 0 auto 18px;
/* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */ // background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4;
background-color: #f4f4f4; background-color: #f4f4f4;
/* Typography */ // Typography
p { p {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
margin-bottom: 18px; margin-bottom: 18px;
color: #333; color: #333;
} }
a {
color: $link;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
font-family: inherit;
font-weight: bold;
margin: 0;
margin: 27px 0 9px;
text-rendering: optimizelegibility;
clear: both;
text-shadow: 0 1px 0 #fff;
small {
font-weight: normal;
font-size: 12px;
color: #666;
}
}
h1 {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.5px;
}
h1 {
background: transparent url(../images/logo.gif) no-repeat left top;
text-indent: -9999px;
height: 164px;
width: 161px;
float: left;
padding-right: 40px;
border-right: 1px solid $gradientTop;
margin-right: 40px;
}
h2 {
font-size: 34px;
line-height: 36px;
letter-spacing: -0.5px;
}
h3 {
font-size: 18px;
line-height: 27px;
}
h4 {
font-size: 14px;
line-height: 18px;
margin: 18px 0 9px;
}
h5 {
font-size: 12px;
line-height: 18px;
margin: 18px 0 0;
}
/* Helpers */ a {
.clear { color: $link;
clear: both; }
}
.left {
float: left;
}
/* Messages */ h1,
.message { h2,
padding: 2px 18px; h3,
margin-bottom: 18px; h4,
@include roundedCorners(3px, 3px, 3px, 3px); h5,
p { h6 {
margin: 11px 0 13px; color: #222;
} font-family: inherit;
&.warning { font-weight: bold;
background-color: $warningBg; margin: 0;
border: 1px $warningBorder solid; margin: 27px 0 9px;
} text-rendering: optimizelegibility;
&.error { clear: both;
background-color: #FDF1F3 /* #fdf5f5 */; text-shadow: 0 1px 0 #fff;
border: 1px solid $errorBorder;
}
ul {
margin-left: 18px;
margin-top: -9px;
li {
} small {
} font-weight: normal;
} font-size: 12px;
.helpText { color: #666;
float: right; }
width: 425px; }
padding-left: 20px;
color: #666;
margin-top: 0;
background: transparent url(../images/question.png) no-repeat left 1px;
&.requirementsHelpText {
margin-top: 17px;
}
}
.typography { h1 {
// General tables font-size: 36px;
table { line-height: 36px;
margin: 9px 0 27px; letter-spacing: -0.5px;
border-collapse: collapse; background: transparent url("../images/logo.gif") no-repeat left top;
width: 100%; text-indent: -9999px;
thead{ height: 164px;
tr { width: 161px;
td, th { float: left;
font-weight: bold; padding-right: 40px;
vertical-align: bottom; border-right: 1px solid $gradientTop;
padding: 12px; margin-right: 40px;
} }
}
}
th, td {
padding: 8px 12px;
text-align: left;
}
td {
vertical-align: top;
border-top: none;
background-color: #fff;
}
th + th,
td + td,
th + td {
/* border-left: 1px solid #ddd; */
}
tbody{
tr:nth-child(odd) td,
tr:nth-child(odd) th{
background-color: #fcfcfc;
}
tr:hover td,
tr:hover th{
background-color: #f6f6f6;
}
}
tfoot {
font-style: italic;
color: #888;
}
}
// Forms h2 {
input, textarea, select { font-size: 34px;
width: 420px; line-height: 36px;
margin-bottom: 9px; letter-spacing: -0.5px;
color: #707070; }
border: 1px solid #ddd;
display: inline-block;
height: 18px;
padding: 4px 6px;
line-height: 18px;
font-size: 13px;
@include roundedCorners(3px,3px,3px,3px);
}
// Focus states h3 {
input, font-size: 18px;
textarea { line-height: 27px;
transition: border linear .2s, box-shadow linear .2s; }
@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input:focus,
textarea:focus {
outline: 0;
border-color: rgba(82,168,236,.8);
$shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 4px rgba(82,168,236,.6);
@include box-shadow($shadow);
}
input[type=file]:focus,
input[type=checkbox]:focus,
select:focus {
@include box-shadow(none); // override for file inputs
outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
}
// End Focus states
select { h4 {
height: 26px; font-size: 14px;
} line-height: 18px;
option { margin: 18px 0 9px;
line-height: 27px; }
font-size: 12px;
padding: 2px 6px;
color:#666;
}
label {
width: auto;
float: none;
padding-top: 0;
margin: 0 0 5px 0;
text-align: left;
display: block;
}
.fields {
float: left;
}
input.action {
text-align: center;
font-weight: bold;
margin: 9px 0 27px;
padding: 6px 8px;
width: 200px;
width: auto;
color: #222;
border: 1px solid #aaa;
text-shadow: 0 1px 0 #eee;
font-size: 13px;
float: none;
height: auto;
@include topGradient (#fbfbfb, #bbb);
@include roundedCorners(3px,3px,3px,3px);
@include boxShadow(0, 1px, 0, 0, #fff);
background-color: #ddd;
&:hover {
@include boxShadow(0, 1px, 2px, 0, #ccc);
@include topGradient (#fbfbfb, #ccc);
}
&:focus, &:active {
@include boxShadow(0, 1px, 0, 0, #fff);
@include topGradient (#fbfbfb, #bbb);
}
}
input.action:hover,
input.action:focus {
cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
border: medium none;
height: auto;
line-height: normal;
padding: 0;
width: auto;
margin-right: 6px;
float: left;
margin-top: 3px;
}
#install_button {
font-size: 20px;
color: #fff;
border-color: #78A127 #78A127 #59781D;
text-shadow: 0 1px 1px #4D7326;
padding: 8px 14px;
background-color: green;
@include topGradient(#80BF40, #59862D);
@include boxShadow(0, 1px, 0, 0, #fff);
&:hover {
@include boxShadow(0, 1px, 3px, 0, #bbb);
}
&:focus, &:active {
@include boxShadow(0, 1px, 0, 0, #fff);
@include topGradient(#80BF40, #59862D);
}
&[disabled=disabled] {
border: 1px solid #aaa;
border-color: #bbb #bbb #aaa;
color: #999;
text-shadow: 0 1px 0 #eee;
@include topGradient (#fbfbfb, #bbb);
&:hover {
@include boxShadow(0, 1px, 0, 0, #fff);
}
}
}
}
/* Custom styles */ h5 {
#Container { font-size: 12px;
margin-bottom: 40px; line-height: 18px;
h3.sectionHeading { margin: 18px 0 0;
padding-top: 27px; }
border-top: 1px solid $gradientTop;
clear: both; //PHP5 required screen
} #Header {
#Header { h1 {
margin-bottom: 30px; margin-top: 45px;
height: 200px; margin-bottom: 27px;
div.left { }
width: 698px;
margin-top: 47px; h3 {
} margin-top: -10px;
} }
#Navigation { }
display: none;
} // Helpers
} .clear {
h5.requirement { clear: both;
padding: 12px 18px; }
font-size: 14px;
border: 1px solid darken($gradientBottom,2%); .left {
border-top: 1px solid lighten($gradientBottom,5%); float: left;
margin: 0; }
color: #fff;
position: relative; // Messages
text-shadow: 0 -1px 0 darken($gradientBottom, 5%); .message {
@include roundedCorners(3px, 3px, 3px, 3px); padding: 2px 18px;
@include boxShadow(0, 1px, 0, 0, #fff); margin-bottom: 18px;
background-color: #eee; @include roundedCorners(3px, 3px, 3px, 3px);
@include topGradient($gradientTop,$gradientBottom);
span { p {
font-weight: normal; margin: 11px 0 13px;
font-size: 12px; }
padding: 3px 6px;
margin-left: 5px; &.warning {
text-shadow: none; background-color: $warningBg;
background-color: lighten($gradientTop, 25%); border: 1px $warningBorder solid;
@include roundedCorners(2px, 2px, 2px, 2px); }
@include boxShadow(0,0,2px,0,$gradientBottom);
} &.error {
&.good span{ background-color: #FDF1F3; // was #fdf5f5
color: $good /* #359318 */; border: 1px solid $errorBorder;
} }
&.warning span{
color: $warning; ul {
} margin-left: 18px;
&.error span{ margin-top: -9px;
color: $error; }
} }
a {
font-size: 11px; .helpText {
right: 9px; float: right;
position: absolute; width: 425px;
line-height: 19px; padding-left: 20px;
margin: 0 0 0 30px; color: #666;
color: #fff; margin-top: 0;
text-decoration: none; background: transparent url("../images/question.png") no-repeat left 1px;
font-weight: normal;
padding-right: 21px; &.requirementsHelpText {
background: transparent url(../images/arrows.png) no-repeat right top; margin-top: 17px;
&:hover { }
background: transparent url(../images/arrows.png) no-repeat right -40px; }
}
} .typography {
} // General tables
table.testResults { table {
border-top: none; margin: 9px 0 27px;
margin-top: -1px; border-collapse: collapse;
margin-bottom: 9px; width: 100%;
@include boxShadow(0, 1px, 0, 0, #fff);
@include roundedCorners(3px,3px,3px,3px); thead {
overflow: hidden; td,
tr { th {
&.good { font-weight: bold;
display: none; vertical-align: bottom;
border: none; padding: 12px;
td { }
color: $good; }
}
} th,
&.warning { td {
border: none; padding: 8px 12px;
td { text-align: left;
color: $warning; }
}
} td {
&.error { vertical-align: top;
border: none; border-top: 0;
color: $error; background-color: #fff;
} }
} // th + th,
td { // td + td,
border: 1px solid #ddd; // th + td {
width: 50%; // border-left: 1px solid #ddd;
} // }
}
#database_selection, #Themes { tbody {
list-style: none; tr:nth-child(odd) td,
margin: 0; tr:nth-child(odd) th {
margin-bottom: 18px; background-color: #fcfcfc;
padding-left: 0; }
li {
clear: left; tr:hover td,
padding: 3px 0; tr:hover th {
.dbfields { background-color: #f6f6f6;
padding: 12px; }
border: 1px solid #ddd; }
background-color: #fafafa;
margin-bottom: 9px; tfoot {
@include roundedCorners(3px,3px,3px,3px); font-style: italic;
@include boxShadowInset(0,0,3px,0,#ddd); color: #888;
@include boxShadow(0,1px,0,0,#fff); }
} }
}
} // Forms
ul#Themes { input,
float: left; textarea,
width: 445px; select {
} width: 420px;
.databaseError { margin-bottom: 9px;
width: 422px; color: #707070;
} border: 1px solid #ddd;
#Footer { display: inline-block;
margin-top: 67px; height: 18px;
margin-bottom: 18px; padding: 4px 6px;
p { line-height: 18px;
font-size: 12px; font-size: 13px;
color: #999; @include roundedCorners(3px, 3px, 3px, 3px);
} }
}
// Focus states
input,
textarea {
transition: border linear .2s, box-shadow linear .2s;
@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, .1));
}
input:focus,
textarea:focus {
outline: 0;
border-color: rgba(82, 168, 236, .8);
$shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 4px rgba(82, 168, 236, .6);
@include box-shadow($shadow);
}
input[type=file]:focus,
input[type=checkbox]:focus,
select:focus {
@include box-shadow(none); // override for file inputs
outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
}
// End Focus states
select {
height: 26px;
}
option {
line-height: 27px;
font-size: 12px;
padding: 2px 6px;
color: #666;
}
label {
width: auto;
float: none;
padding-top: 0;
margin: 0 0 5px 0;
text-align: left;
display: block;
}
.fields {
float: left;
}
input.action {
text-align: center;
font-weight: bold;
margin: 9px 0 27px;
padding: 6px 8px;
width: 200px;
width: auto;
color: #222;
border: 1px solid #aaa;
text-shadow: 0 1px 0 #eee;
font-size: 13px;
float: none;
height: auto;
@include topGradient (#fbfbfb, #bbb);
@include roundedCorners(3px, 3px, 3px, 3px);
@include boxShadow(0, 1px, 0, 0, #fff);
background-color: #ddd;
&:hover {
@include boxShadow(0, 1px, 2px, 0, #ccc);
@include topGradient (#fbfbfb, #ccc);
}
&:focus,
&:active {
@include boxShadow(0, 1px, 0, 0, #fff);
@include topGradient (#fbfbfb, #bbb);
}
}
input.action:hover,
input.action:focus {
cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
border: medium none;
height: auto;
line-height: normal;
padding: 0;
width: auto;
margin-right: 6px;
float: left;
margin-top: 3px;
}
#install_button {
font-size: 20px;
color: #fff;
border-color: #78A127 #78A127 #59781D;
text-shadow: 0 1px 1px #4D7326;
padding: 8px 14px;
background-color: #008000;
@include topGradient(#80BF40, #59862D);
@include boxShadow(0, 1px, 0, 0, #fff);
&:hover {
@include boxShadow(0, 1px, 3px, 0, #bbb);
}
&:focus,
&:active {
@include boxShadow(0, 1px, 0, 0, #fff);
@include topGradient(#80BF40, #59862D);
}
&[disabled=disabled] {
border: 1px solid #aaa;
border-color: #bbb #bbb #aaa;
color: #999;
text-shadow: 0 1px 0 #eee;
@include topGradient (#fbfbfb, #bbb);
&:hover {
@include boxShadow(0, 1px, 0, 0, #fff);
}
}
}
}
// Custom styles
#Container {
margin-bottom: 40px;
h3.sectionHeading {
padding-top: 27px;
border-top: 1px solid $gradientTop;
clear: both;
}
#Header {
margin-bottom: 30px;
height: 200px;
div.left {
width: 698px;
margin-top: 47px;
}
}
#Navigation {
display: none;
}
}
h5.requirement {
padding: 12px 18px;
font-size: 14px;
border: 1px solid darken($gradientBottom, 2%);
border-top: 1px solid lighten($gradientBottom, 5%);
margin: 0;
color: #fff;
position: relative;
text-shadow: 0 -1px 0 darken($gradientBottom, 5%);
@include roundedCorners(3px, 3px, 3px, 3px);
@include boxShadow(0, 1px, 0, 0, #fff);
background-color: #eee;
@include topGradient($gradientTop, $gradientBottom);
span {
font-weight: normal;
font-size: 12px;
padding: 3px 6px;
margin-left: 5px;
text-shadow: none;
background-color: lighten($gradientTop, 25%);
@include roundedCorners(2px, 2px, 2px, 2px);
@include boxShadow(0, 0, 2px, 0, $gradientBottom);
}
&.good span {
color: $good; // was #359318
}
&.warning span {
color: $warning;
}
&.error span {
color: $error;
}
a {
font-size: 11px;
right: 9px;
position: absolute;
line-height: 19px;
margin: 0 0 0 30px;
color: #fff;
text-decoration: none;
font-weight: normal;
padding-right: 21px;
background: transparent url("../images/arrows.png") no-repeat right top;
&:hover {
background: transparent url("../images/arrows.png") no-repeat right -40px;
}
}
}
table.testResults {
border-top: 0;
margin-top: -1px;
margin-bottom: 9px;
@include boxShadow(0, 1px, 0, 0, #fff);
@include roundedCorners(3px, 3px, 3px, 3px);
overflow: hidden;
tr {
&.good {
display: none;
border: 0;
td {
color: $good;
}
}
&.warning {
border: 0;
td {
color: $warning;
}
}
&.error {
border: 0;
color: $error;
}
}
td {
border: 1px solid #ddd;
width: 50%;
}
}
#database_selection,
#Themes {
list-style: none;
margin: 0;
margin-bottom: 18px;
padding-left: 0;
li {
clear: left;
padding: 3px 0;
.dbfields {
padding: 12px;
border: 1px solid #ddd;
background-color: #fafafa;
margin-bottom: 9px;
@include roundedCorners(3px, 3px, 3px, 3px);
@include boxShadowInset(0, 0, 3px, 0, #ddd);
@include boxShadow(0, 1px, 0, 0, #fff);
}
}
}
ul#Themes {
float: left;
width: 445px;
}
.databaseError {
width: 422px;
}
#Footer {
margin-top: 67px;
margin-bottom: 18px;
p {
font-size: 12px;
color: #999;
}
}
} }
//PHP5 required screen // styles not tested
body {
#Header {
h1 {
margin-top: 45px;
margin-bottom: 27px;
}
h3 {
margin-top: -10px;
}
}
}
/* styles not tested */
#adminAcc, #adminAcc,
#devHelp, #devHelp,
#localeHelp { #localeHelp {
padding-top: 20px; padding-top: 20px;
} }
#devHelp, #devHelp,
#devSection { #devSection {
height: 18em; height: 18em;
} }
#use_environment_field { #use_environment_field {
margin-bottom: 25px; margin-bottom: 25px;
background-color: #FAFAFA; background-color: #FAFAFA;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white;
margin-bottom: 9px; margin-bottom: 9px;
padding: 10px 10px 8px; padding: 10px 10px 8px;
input {
float: left; input {
margin-right: 5px; float: left;
} margin-right: 5px;
}
} }
.databaseError { .databaseError {
ul { ul {
margin-bottom: 0; margin-bottom: 0;
} }
ul, li {
margin-left: 0; ul,
padding-left: 0; li {
} margin-left: 0;
padding-left: 0;
}
} }
#Layout p.goodInstall { #Layout p.goodInstall {
color: #359318; color: #359318;
} }
.goodInstall { .goodInstall {
padding: 0.5em; padding: 0.5em;
background-color: #e2fee1; background-color: #e2fee1;
border: 1px #43cb3e solid; border: 1px #43cb3e solid;
color: #359318; color: #359318;
overflow: hidden; overflow: hidden;
line-height: 18px; line-height: 18px;
padding: 10px; padding: 10px;
a {
float: right; a {
font-size: 18px; float: right;
padding: 0 2px 2px 0; font-size: 18px;
font-weight: bold; padding: 0 2px 2px 0;
} font-weight: bold;
}
} }

View File

@ -1,7 +1,6 @@
## SilverStripe Framework ## SilverStripe Framework
[![Build Status](https://api.travis-ci.org/silverstripe/silverstripe-framework.svg?branch=master)](https://travis-ci.org/silverstripe/silverstripe-framework) [![Build Status](https://api.travis-ci.org/silverstripe/silverstripe-framework.svg?branch=master)](https://travis-ci.org/silverstripe/silverstripe-framework)
[![Code Climate](https://codeclimate.com/github/silverstripe/silverstripe-framework/badges/gpa.svg)](https://codeclimate.com/github/silverstripe/silverstripe-framework)
[![Latest Stable Version](https://poser.pugx.org/silverstripe/framework/version.svg)](http://www.silverstripe.org/stable-download/) [![Latest Stable Version](https://poser.pugx.org/silverstripe/framework/version.svg)](http://www.silverstripe.org/stable-download/)
[![Latest Unstable Version](https://poser.pugx.org/silverstripe/framework/v/unstable.svg)](https://packagist.org/packages/silverstripe/framework) [![Latest Unstable Version](https://poser.pugx.org/silverstripe/framework/v/unstable.svg)](https://packagist.org/packages/silverstripe/framework)
[![Total Downloads](https://poser.pugx.org/silverstripe/framework/downloads.svg)](https://packagist.org/packages/silverstripe/framework) [![Total Downloads](https://poser.pugx.org/silverstripe/framework/downloads.svg)](https://packagist.org/packages/silverstripe/framework)

View File

@ -101,14 +101,12 @@
// Readonlys should be converted to an input // Readonlys should be converted to an input
// scss-lint:disable all
.form__field-holder p.readonly, .form__field-holder p.readonly,
.form__field-holder input.readonly, .form__field-holder input.readonly,
.form__field-holder span.readonly, .form__field-holder span.readonly,
.readonly .form__field-holder > div { .readonly .form__field-holder > div {
@extend .form-control-static; @extend .form-control-static;
} }
// scss-lint:enable all
// Radio / Checkbox // Radio / Checkbox
@ -149,7 +147,6 @@ input.radio {
} }
} }
@mixin form-responsive($breakpoint-inline, $breakpoint-inline-limit-width, $breakpoint-inline-limit-width-max) { @mixin form-responsive($breakpoint-inline, $breakpoint-inline-limit-width, $breakpoint-inline-limit-width-max) {
@include media-breakpoint-up($breakpoint-inline) { @include media-breakpoint-up($breakpoint-inline) {
.form-group { .form-group {
@ -157,7 +154,6 @@ input.radio {
// Composite fields // Composite fields
// TODO reduce nesting // TODO reduce nesting
// scss-lint:disable SelectorDepth
.form__field-holder .form-group { .form__field-holder .form-group {
.form__field-holder, .form__field-holder,
.form__field-label { .form__field-label {
@ -176,7 +172,6 @@ input.radio {
@include make-col-offset(0); @include make-col-offset(0);
} }
} }
// scss-lint:enable SelectorDepth
&::after { &::after {
margin: $spacer-y $grid-gutter-width-half #{-$spacer-y}; margin: $spacer-y $grid-gutter-width-half #{-$spacer-y};

View File

@ -93,7 +93,9 @@
} }
@keyframes loading-icon { @keyframes loading-icon {
0%, 80%, 100% { 0%,
80%,
100% {
transform: scale(0); transform: scale(0);
} }

View File

@ -132,7 +132,7 @@
&:active, &:active,
&[class*="font-icon-"]:active, &[class*="font-icon-"]:active,
&:focus, &:focus,
&[class*="font-icon-"]:focus, { &[class*="font-icon-"]:focus {
background-color: darken($table-bg-tools, 6%); background-color: darken($table-bg-tools, 6%);
&::before { &::before {

View File

@ -10,9 +10,7 @@
} }
.arrow { .arrow {
// scss-lint:disable all
@extend .popover-arrow; // Temp uses Bootstrap 3 class name, until React Bootstrap has been updated to Bootstrap 4 @extend .popover-arrow; // Temp uses Bootstrap 3 class name, until React Bootstrap has been updated to Bootstrap 4
// scss-lint:enable all
} }
} }
@ -20,9 +18,7 @@
// Unable to use classes within the popover, so we use elements to style // Unable to use classes within the popover, so we use elements to style
ul { ul {
// scss-lint:disable ImportantRule
padding-left: 0 !important; // TODO remove important by removing nesting of lists padding-left: 0 !important; // TODO remove important by removing nesting of lists
// scss-lint:enable ImportantRule
list-style-type: none; list-style-type: none;
margin-left: -#{$popover-padding} + 1px; // minus border margin-left: -#{$popover-padding} + 1px; // minus border
margin-right: -#{$popover-padding} + 1px; margin-right: -#{$popover-padding} + 1px;

View File

@ -72,7 +72,7 @@
} }
.toolbar__back-button, .toolbar__back-button,
.cms_backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles .cms-backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
float: left; float: left;
margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625}; margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625};
padding-left: $spacer-x / 4; padding-left: $spacer-x / 4;

View File

@ -4,9 +4,9 @@
font-family: "silverstripe"; font-family: "silverstripe";
src: url("../font/fonts/silverstripe.eot"); src: url("../font/fonts/silverstripe.eot");
src: url("../font/fonts/silverstripe.eot?#iefix") format("embedded-opentype"), src: url("../font/fonts/silverstripe.eot?#iefix") format("embedded-opentype"),
url("../font/fonts/silverstripe.woff") format("woff"), url("../font/fonts/silverstripe.woff") format("woff"),
url("../font/fonts/silverstripe.ttf") format("truetype"), url("../font/fonts/silverstripe.ttf") format("truetype"),
url("../font/fonts/silverstripe.svg#silverstripe") format("svg"); url("../font/fonts/silverstripe.svg#silverstripe") format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -14,257 +14,325 @@
[class^="font-icon-"]::before, [class^="font-icon-"]::before,
[class*=" font-icon-"]::before { [class*=" font-icon-"]::before {
// scss-lint:disable ImportantRule
font-family: "silverstripe" !important; font-family: "silverstripe" !important;
// scss-lint:disable ImportantRule
font-style: normal !important; font-style: normal !important;
// scss-lint:disable ImportantRule
font-weight: normal !important; font-weight: normal !important;
// scss-lint:disable ImportantRule
font-variant: normal !important; font-variant: normal !important;
// scss-lint:disable ImportantRule
text-transform: none !important; text-transform: none !important;
// scss-lint:enable ImportantRule
speak: none; speak: none;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
// scss-lint:disable EmptyLineBetweenBlocks
.font-icon-search::before { .font-icon-search::before {
content: "\73"; content: "\73";
} }
.font-icon-sync::before { .font-icon-sync::before {
content: "\63"; content: "\63";
} }
.font-icon-print::before { .font-icon-print::before {
content: "\64"; content: "\64";
} }
.font-icon-list::before { .font-icon-list::before {
content: "\65"; content: "\65";
} }
.font-icon-plus-circled::before { .font-icon-plus-circled::before {
content: "\66"; content: "\66";
} }
.font-icon-check-mark-2::before { .font-icon-check-mark-2::before {
content: "\6b"; content: "\6b";
} }
.font-icon-book::before { .font-icon-book::before {
content: "\6e"; content: "\6e";
} }
.font-icon-book-open::before { .font-icon-book-open::before {
content: "\6f"; content: "\6f";
} }
.font-icon-plus::before { .font-icon-plus::before {
content: "\6a"; content: "\6a";
} }
.font-icon-tree::before { .font-icon-tree::before {
content: "\70"; content: "\70";
} }
.font-icon-flow-tree::before { .font-icon-flow-tree::before {
content: "\71"; content: "\71";
} }
.font-icon-info-circled::before { .font-icon-info-circled::before {
content: "\79"; content: "\79";
} }
.font-icon-chart-line::before { .font-icon-chart-line::before {
content: "\42"; content: "\42";
} }
.font-icon-graph-bar::before { .font-icon-graph-bar::before {
content: "\45"; content: "\45";
} }
.font-icon-torsos-all::before { .font-icon-torsos-all::before {
content: "\46"; content: "\46";
} }
.font-icon-torso::before { .font-icon-torso::before {
content: "\48"; content: "\48";
} }
.font-icon-picture::before { .font-icon-picture::before {
content: "\76"; content: "\76";
} }
.font-icon-chart-pie::before { .font-icon-chart-pie::before {
content: "\41"; content: "\41";
} }
.font-icon-sitemap::before { .font-icon-sitemap::before {
content: "\43"; content: "\43";
} }
.font-icon-globe-1::before { .font-icon-globe-1::before {
content: "\52"; content: "\52";
} }
.font-icon-chat::before { .font-icon-chat::before {
content: "\74"; content: "\74";
} }
.font-icon-comment::before { .font-icon-comment::before {
content: "\77"; content: "\77";
} }
.font-icon-logout::before { .font-icon-logout::before {
content: "\7a"; content: "\7a";
} }
.font-icon-cancel-circled::before { .font-icon-cancel-circled::before {
content: "\51"; content: "\51";
} }
.font-icon-left-open::before { .font-icon-left-open::before {
content: "\54"; content: "\54";
} }
.font-icon-right-open::before { .font-icon-right-open::before {
content: "\55"; content: "\55";
} }
.font-icon-check-mark::before { .font-icon-check-mark::before {
content: "\47"; content: "\47";
} }
.font-icon-check-mark-circle::before { .font-icon-check-mark-circle::before {
content: "\49"; content: "\49";
} }
.font-icon-back-in-time::before { .font-icon-back-in-time::before {
content: "\58"; content: "\58";
} }
.font-icon-cog::before { .font-icon-cog::before {
content: "\59"; content: "\59";
} }
.font-icon-fast-forward::before { .font-icon-fast-forward::before {
content: "\68"; content: "\68";
} }
.font-icon-install::before { .font-icon-install::before {
content: "\61"; content: "\61";
} }
.font-icon-down-circled::before { .font-icon-down-circled::before {
content: "\69"; content: "\69";
} }
.font-icon-eye::before { .font-icon-eye::before {
content: "\6c"; content: "\6c";
} }
.font-icon-columns::before { .font-icon-columns::before {
content: "\72"; content: "\72";
} }
.font-icon-edit-write::before { .font-icon-edit-write::before {
content: "\75"; content: "\75";
} }
.font-icon-monitor::before { .font-icon-monitor::before {
content: "\78"; content: "\78";
} }
.font-icon-mobile::before { .font-icon-mobile::before {
content: "\4a"; content: "\4a";
} }
.font-icon-tablet::before { .font-icon-tablet::before {
content: "\4b"; content: "\4b";
} }
.font-icon-pencil::before { .font-icon-pencil::before {
content: "\6d"; content: "\6d";
} }
.font-icon-trash::before { .font-icon-trash::before {
content: "\67"; content: "\67";
} }
.font-icon-edit::before { .font-icon-edit::before {
content: "\4e"; content: "\4e";
} }
.font-icon-tick::before { .font-icon-tick::before {
content: "\4f"; content: "\4f";
} }
.font-icon-upload::before { .font-icon-upload::before {
content: "\62"; content: "\62";
} }
.font-icon-folder-add::before { .font-icon-folder-add::before {
content: "\53"; content: "\53";
} }
.font-icon-silverstripe::before { .font-icon-silverstripe::before {
content: "\4d"; content: "\4d";
} }
.font-icon-thumbnails::before { .font-icon-thumbnails::before {
content: "\57"; content: "\57";
} }
.font-icon-down-open::before { .font-icon-down-open::before {
content: "\30"; content: "\30";
} }
.font-icon-up-open::before { .font-icon-up-open::before {
content: "\31"; content: "\31";
} }
.font-icon-link::before { .font-icon-link::before {
content: "\32"; content: "\32";
} }
.font-icon-level-up::before { .font-icon-level-up::before {
content: "\56"; content: "\56";
} }
.font-icon-image::before { .font-icon-image::before {
content: "\34"; content: "\34";
} }
.font-icon-trash-bin::before { .font-icon-trash-bin::before {
content: "\50"; content: "\50";
} }
.font-icon-code::before { .font-icon-code::before {
content: "\33"; content: "\33";
} }
.font-icon-left-open-big::before { .font-icon-left-open-big::before {
content: "\35"; content: "\35";
} }
.font-icon-down-open-big::before { .font-icon-down-open-big::before {
content: "\36"; content: "\36";
} }
.font-icon-up-open-big::before { .font-icon-up-open-big::before {
content: "\37"; content: "\37";
} }
.font-icon-right-open-big::before { .font-icon-right-open-big::before {
content: "\38"; content: "\38";
} }
.font-icon-dot-3::before { .font-icon-dot-3::before {
content: "\39"; content: "\39";
} }
.font-icon-save::before { .font-icon-save::before {
content: "\21"; content: "\21";
} }
.font-icon-rocket::before { .font-icon-rocket::before {
content: "\5a"; content: "\5a";
} }
.font-icon-cancel::before { .font-icon-cancel::before {
content: "\44"; content: "\44";
} }
.font-icon-happy::before { .font-icon-happy::before {
content: "\22"; content: "\22";
} }
.font-icon-sad::before { .font-icon-sad::before {
content: "\23"; content: "\23";
} }
.font-icon-angle-double-right::before { .font-icon-angle-double-right::before {
content: "\24"; content: "\24";
} }
.font-icon-angle-double-left::before { .font-icon-angle-double-left::before {
content: "\25"; content: "\25";
} }
.font-icon-angle-right::before { .font-icon-angle-right::before {
content: "\26"; content: "\26";
} }
.font-icon-angle-left::before { .font-icon-angle-left::before {
content: "\27"; content: "\27";
} }
.font-icon-caret-up-down::before { .font-icon-caret-up-down::before {
content: "\29"; content: "\29";
} }
.font-icon-caret-down-two::before { .font-icon-caret-down-two::before {
content: "\28"; content: "\28";
} }
.font-icon-caret-up-two::before { .font-icon-caret-up-two::before {
content: "\2a"; content: "\2a";
} }
.font-icon-right-dir::before { .font-icon-right-dir::before {
content: "\2b"; content: "\2b";
} }
.font-icon-down-dir::before { .font-icon-down-dir::before {
content: "\2c"; content: "\2c";
} }
.font-icon-link-broken::before { .font-icon-link-broken::before {
content: "\2d"; content: "\2d";
} }
.font-icon-switch::before { .font-icon-switch::before {
content: "\2e"; content: "\2e";
} }
.font-icon-resize::before { .font-icon-resize::before {
content: "\4c"; content: "\4c";
} }
.font-icon-menu::before { .font-icon-menu::before {
content: "\2f"; content: "\2f";
} }
.font-icon-edit-list::before { .font-icon-edit-list::before {
content: "\3a"; content: "\3a";
} }
// scss-lint:enable EmptyLineBetweenBlocks

View File

@ -7,7 +7,7 @@ h1 {
font-weight: 300; font-weight: 300;
} }
// Tables // Tables
// Used as a base for components: GridField. // Used as a base for components: GridField.
.table { .table {
@ -72,7 +72,7 @@ h1 {
.cms { .cms {
code { code {
font-family: 'Bitstream Vera Sans Mono','Courier', monospace; font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
} }
} }
@ -107,11 +107,9 @@ th {
-ms-word-break: break-all; -ms-word-break: break-all;
word-break: break-word; word-break: break-word;
// scss-lint:disable VendorPrefix
-ms-hyphens: auto; -ms-hyphens: auto;
-moz-hyphens: auto; -moz-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
// scss-lint:enable VendorPrefix
hyphens: auto; hyphens: auto;
} }

View File

@ -327,18 +327,14 @@ $input-bg-disabled: $background-darker;
$input-color: $body-color-light; $input-color: $body-color-light;
$input-border-color: $border-color-dark; $input-border-color: $border-color-dark;
$input-btn-border-width: $border-width; // For form controls and buttons $input-btn-border-width: $border-width; // For form controls and buttons
// scss-lint:disable ColorVariable
$input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); $input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
// scss-lint:enable ColorVariable
$input-border-radius: $border-radius; $input-border-radius: $border-radius;
$input-border-radius-lg: $border-radius-lg; $input-border-radius-lg: $border-radius-lg;
$input-border-radius-sm: $border-radius-sm; $input-border-radius-sm: $border-radius-sm;
$input-border-focus: #66afe9; $input-border-focus: #66afe9;
// scss-lint:disable ColorVariable
$input-box-shadow-focus: rgba(102, 175, 233, .6); $input-box-shadow-focus: rgba(102, 175, 233, .6);
// scss-lint:enable ColorVariable
// $input-color-placeholder: #999; // $input-color-placeholder: #999;
// //
@ -726,7 +722,7 @@ $shadow-level-1: rgba(0, 0, 0, .1);
$shadow-level-2: rgba(0, 0, 0, .15); $shadow-level-2: rgba(0, 0, 0, .15);
$shadow-level-3: rgba(0, 0, 0, .2); $shadow-level-3: rgba(0, 0, 0, .2);
$shadow-level-4: rgba(0, 0, 0, .25); $shadow-level-4: rgba(0, 0, 0, .25);
$shadow-level-5: rgba(0, 0, 0, .30); $shadow-level-5: rgba(0, 0, 0, .3);
// TODO tidy all shadows cms wide (including AssetAdmin) // TODO tidy all shadows cms wide (including AssetAdmin)
$shadow-light: $shadow-level-3; $shadow-light: $shadow-level-3;

View File

@ -2,11 +2,11 @@
@import "variables"; @import "variables";
// Compatibilty with compass // Compatibilty with compass
@import "legacy/_compasscompat"; @import "legacy/compasscompat";
// Thirdparty // Thirdparty
@import "chosen"; @import "chosen";
@import "../../../../node_modules/bootstrap/scss/bootstrap.scss"; @import "../../../../node_modules/bootstrap/scss/bootstrap";
@import "../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css"; @import "../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css";
@import "../../../thirdparty/jstree/themes/apple/style.css"; @import "../../../thirdparty/jstree/themes/apple/style.css";
@import "../../../thirdparty/jquery-notice/jquery.notice.css"; @import "../../../thirdparty/jquery-notice/jquery.notice.css";

View File

@ -1,5 +1,3 @@
// scss-lint:disable all
/*<?php /*<?php
// ************* // *************
// Self-generating. Run with PHP on the command line to re-generate. // Self-generating. Run with PHP on the command line to re-generate.

View File

@ -1,5 +1,3 @@
// scss-lint:disable all
//** //**
// * This file contains mixins relating to specific functionality // * This file contains mixins relating to specific functionality
// * // *

View File

@ -15,15 +15,15 @@
* Core Styles. * Core Styles.
* ---------------------------------------------------- */ * ---------------------------------------------------- */
html,body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
/* Removes RHS whitespace on iPad */ /* Removes RHS whitespace on iPad */
overflow-x: hidden; overflow-x: hidden;
} }
body.cms { body.cms {
overflow: hidden; overflow: hidden;
} }
@ -33,12 +33,12 @@ body.cms {
* -------------------------------------------- */ * -------------------------------------------- */
.hide { .hide {
display: none; display: none;
} }
.cms-helper-hide-actions .btn-toolbar { .cms-helper-hide-actions .btn-toolbar {
@extend .hide; @extend .hide;
} }
@ -46,8 +46,8 @@ body.cms {
* Panels Styles * Panels Styles
* -------------------------------------------- */ * -------------------------------------------- */
.cms-container { .cms-container {
height: 100%; height: 100%;
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
} }
.cms-preview, .cms-preview,
@ -63,9 +63,8 @@ body.cms {
.cms-content-fields, .cms-content-fields,
.cms-preview, .cms-preview,
.cms-preview iframe, .cms-preview iframe,
.cms-preview-controls .cms-preview-controls {
{ display: inline-block;
display: inline-block;
} }
.cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid .cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid
@ -75,171 +74,171 @@ body.cms {
z-index: 60; z-index: 60;
min-height: $toolbar-total-height; min-height: $toolbar-total-height;
background: { background: {
image: url(../images/textures/cms_content_header.png); image: url("../images/textures/cms_content_header.png");
repeat: repeat; repeat: repeat;
position: left bottom; position: left bottom;
color: $color-darker-bg; color: $color-darker-bg;
} }
a { a {
color: $color-text-blue-link; color: $color-text-blue-link;
} }
.backlink { .backlink {
span.btn-icon-back { span.btn-icon-back {
height:16px; height: 16px;
} }
} }
h2 { h2 {
font-size: $font-size-h4; font-size: $font-size-h4;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
margin-bottom: $grid-x; margin-bottom: $grid-x;
* { * {
vertical-align: middle; vertical-align: middle;
} }
} }
.cms-content-header-info { .cms-content-header-info {
float:left; float: left;
padding-top: 5px; padding-top: 5px;
& * { & * {
display: inline-block; // align back button and breadcrumbs display: inline-block; // align back button and breadcrumbs
} }
.section-icon { .section-icon {
opacity: 0.2; opacity: 0.2;
margin-right: 4px; margin-right: 4px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.cms_backlink { .cms-backlink {
margin-top: -7px; margin-top: -7px;
float: left; float: left;
} }
} }
// Reset to default styles // Reset to default styles
.ss-ui-button { .ss-ui-button {
line-height: $grid-x*3; line-height: $grid-x*3;
.ui-button-text { .ui-button-text {
line-height: 1.4; line-height: 1.4;
} }
} }
} }
.cms-edit-form.CMSMain { .cms-edit-form.CMSMain {
padding: 0; padding: 0;
} }
// Hide threeColumnCompressor column. // Hide threeColumnCompressor column.
.cms-container { .cms-container {
.column-hidden { .column-hidden {
display: none; display: none;
&+ .cms-preview { &+ .cms-preview {
border-left: 0; border-left: 0;
} }
} }
} }
.cms-content-header-top { .cms-content-header-top {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
// We have a faux three column layout when displaying Page content in the CMS. // We have a faux three column layout when displaying Page content in the CMS.
.has-panel { .has-panel {
.cms-tree-view-sidebar, .cms-tree-view-sidebar,
.cms-versions-form { .cms-versions-form {
padding: $panel-padding-y $panel-padding-x; padding: $panel-padding-y $panel-padding-x;
} }
.cms-content-header.north { .cms-content-header.north {
&.collapsed { &.collapsed {
.cms-content-header-info { .cms-content-header-info {
width: 60px; width: 60px;
text-align: center; text-align: center;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
} }
.view-controls, .view-controls,
.section-label { .section-label {
display: none; display: none;
} }
.cms-content-header-nav { .cms-content-header-nav {
margin-left: 61px; margin-left: 61px;
} }
} }
} }
.cms-content-header-info { .cms-content-header-info {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 1px; bottom: 1px;
width: $cms-panel-sm; width: $cms-panel-sm;
padding-bottom: $grid-y; padding-bottom: $grid-y;
padding-left: $grid-x * 2; padding-left: $grid-x * 2;
padding-right: $grid-x*2; padding-right: $grid-x*2;
box-shadow: 1px 0 0 0 $border-color-dark; box-shadow: 1px 0 0 0 $border-color-dark;
} }
.cms-content-header-nav { .cms-content-header-nav {
margin-left: $cms-panel-sm; margin-left: $cms-panel-sm;
} }
.section-heading { .section-heading {
margin-top: 8px; margin-top: 8px;
padding-left: 4px; padding-left: 4px;
} }
.section-icon { .section-icon {
vertical-align: middle; vertical-align: middle;
} }
.section-label { .section-label {
vertical-align: middle; vertical-align: middle;
font-size: 1.2em; font-size: 1.2em;
font-weight: normal; font-weight: normal;
} }
.breadcrumbs-wrapper { .breadcrumbs-wrapper {
float: left; float: left;
padding-top: $grid-y - 1; padding-top: $grid-y - 1;
} }
.view-controls { .view-controls {
float: right; float: right;
margin-top: 4px; margin-top: 4px;
.icon-button-group { .icon-button-group {
.icon-button { .icon-button {
padding: 6px 8px; padding: 6px 8px;
height: 26px; height: 26px;
} }
} }
} }
.cms-content-tools { .cms-content-tools {
position: relative !important; // TEMP until JS is removed position: relative !important; // TEMP until JS is removed
.cms-panel-content { .cms-panel-content {
height: calc(100% - 53px) !important; // TEMP until JS is removed height: calc(100% - 53px) !important; // TEMP until JS is removed
} }
// History panel // History panel
.cms-helper-hide-actions { .cms-helper-hide-actions {
height: 100% !important; height: 100% !important;
} }
} }
} }
// History checkboxes // History checkboxes
@ -251,44 +250,44 @@ body.cms {
.checkbox { .checkbox {
margin-bottom: 0; margin-bottom: 0;
} }
} }
#page-title-heading { #page-title-heading {
line-height: 1.2em; line-height: 1.2em;
} }
/** ------------------------------------------------------------------ /** ------------------------------------------------------------------
* CMS Breadcrumbs * CMS Breadcrumbs
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
.breadcrumbs-wrapper { .breadcrumbs-wrapper {
.crumb, .crumb,
.sep { .sep {
font-size: .8em; font-size: .8em;
line-height: 1.2em; line-height: 1.2em;
font-weight: normal; font-weight: normal;
} }
.crumb { .crumb {
&.last { &.last {
display: block; display: block;
padding: 8px 0; padding: 8px 0;
font-size: 1.2em; font-size: 1.2em;
} }
} }
.sep { .sep {
+ .crumb.last { + .crumb.last {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
} }
} }
.cms-tabset-nav-primary { .cms-tabset-nav-primary {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
/** ------------------------------------------------------------------ /** ------------------------------------------------------------------
@ -300,159 +299,159 @@ body.cms {
* Tabs should be refactored to use weaker selectors. * Tabs should be refactored to use weaker selectors.
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
.cms { .cms {
a.icon-button, a.icon-button,
button.ss-ui-button.icon-button { button.ss-ui-button.icon-button {
vertical-align: middle; vertical-align: middle;
margin: 0 2px 0 0; margin: 0 2px 0 0;
padding: 5px 8px; padding: 5px 8px;
font-size: 14px; font-size: 14px;
text-indent: 0; text-indent: 0;
text-shadow: none; text-shadow: none;
line-height: 1em; line-height: 1em;
color: $color-text; color: $color-text;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
border: 0; border: 0;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
background-image: none; background-image: none;
text-decoration: none; text-decoration: none;
} }
&:hover { &:hover {
background-color: #d4dbe1; background-color: #d4dbe1;
} }
&.active, &.active,
&:active { &:active {
background-color: #d4dbe1; background-color: #d4dbe1;
} }
&.font-icon-search { &.font-icon-search {
padding: 5px 6px; padding: 5px 6px;
color:lighten($color-text, 10%); color:lighten($color-text, 10%);
&.active, &.active,
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background: none; background: none;
box-shadow: none; box-shadow: none;
color: darken($color-text, 10%); color: darken($color-text, 10%);
} }
&:before { &:before {
font-size: 18px; font-size: 18px;
margin-left: 1px; margin-left: 1px;
margin-right: 0; margin-right: 0;
} }
} }
.ui-button-text { .ui-button-text {
display: none; display: none;
} }
.ModelAdmin & { .ModelAdmin & {
margin-top: -11px; margin-top: -11px;
} }
} }
} }
// Context specific overrides for Tabs. // Context specific overrides for Tabs.
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link, .ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link,
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link { .ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link {
padding: 5px 8px 6px; padding: 5px 8px 6px;
line-height: 1em; line-height: 1em;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
border: 0; border: 0;
&:before { &:before {
vertical-align: middle; vertical-align: middle;
} }
} }
.cms-content-header-tabs .icon-button-group > .ui-tabs-nav.cms-tabset-nav-primary { .cms-content-header-tabs .icon-button-group > .ui-tabs-nav.cms-tabset-nav-primary {
margin-top: 0; margin-top: 0;
} }
.icon-button-group { .icon-button-group {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border: 1px solid #CDCCD0; border: 1px solid #CDCCD0;
border-radius: 4px; border-radius: 4px;
a.icon-button, a.icon-button,
button.ss-ui-button.icon-button { button.ss-ui-button.icon-button {
margin-right: 0; margin-right: 0;
line-height: 13px; line-height: 13px;
border-radius: 0; border-radius: 0;
&:first-child { &:first-child {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
&:last-child { &:last-child {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
&:hover { &:hover {
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
} }
&.active:hover { &.active:hover {
background: #d4dbe1; background: #d4dbe1;
} }
+ a.icon-button, + a.icon-button,
+ button.ss-ui-button.icon-button { + button.ss-ui-button.icon-button {
border-left: 1px solid #CDCCD0; border-left: 1px solid #CDCCD0;
} }
} }
// Context specific overrides for Tabs. // Context specific overrides for Tabs.
.ui-tabs.ui-tabs-nav { .ui-tabs.ui-tabs-nav {
border-left: 0 !important; border-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
margin-bottom: 0; margin-bottom: 0;
overflow: hidden; overflow: hidden;
.cms-tabset-icon.ui-state-default { .cms-tabset-icon.ui-state-default {
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
box-shadow: none; box-shadow: none;
+ .cms-tabset-icon.ui-state-default { + .cms-tabset-icon.ui-state-default {
border-left: 1px solid #CDCCD0; border-left: 1px solid #CDCCD0;
} }
&:hover { &:hover {
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
} }
&.ui-state-active:hover { &.ui-state-active:hover {
background: #d4dbe1; background: #d4dbe1;
} }
} }
.cms-tabset-icon.ui-state-active { .cms-tabset-icon.ui-state-active {
background-color: #d4dbe1; background-color: #d4dbe1;
} }
} }
.cms-content-header-tabs & { .cms-content-header-tabs & {
overflow: hidden; overflow: hidden;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -460,21 +459,21 @@ body.cms {
* -------------------------------------------- */ * -------------------------------------------- */
.ui-tabs { .ui-tabs {
padding: 0; padding: 0;
background: none; background: none;
.ui-tabs { .ui-tabs {
position: static; position: static;
} }
.ui-tabs-panel { .ui-tabs-panel {
padding: 0 $panel-padding-x; padding: 0 $panel-padding-x;
background: transparent; // default it's white background: transparent; // default it's white
border: 0; // suppress default borders border: 0; // suppress default borders
&.cms-edit-form { &.cms-edit-form {
padding: 0; padding: 0;
} }
.ui-tabs .ui-tabs-nav { .ui-tabs .ui-tabs-nav {
margin-left: $panel-padding-x; margin-left: $panel-padding-x;
@ -483,60 +482,60 @@ body.cms {
border-bottom: 1px solid $nav-tabs-link-hover-border-color; border-bottom: 1px solid $nav-tabs-link-hover-border-color;
margin-bottom: $spacer-y; margin-bottom: $spacer-y;
} }
} }
.ui-tabs-panel .toolbar--content { .ui-tabs-panel .toolbar--content {
margin-left: -20px; margin-left: -20px;
margin-right: -20px; margin-right: -20px;
} }
.ui-widget-header { .ui-widget-header {
border: 0; border: 0;
background: none; background: none;
} }
.ui-tabs-nav { .ui-tabs-nav {
float: right; float: right;
margin: $grid-x*2 0 -1px 0; margin: $grid-x*2 0 -1px 0;
padding: 0; padding: 0;
border-bottom: 0; border-bottom: 0;
~ .ui-tabs-panel { ~ .ui-tabs-panel {
clear: both; clear: both;
} }
li { li {
top: 0; top: 0;
float: left; float: left;
margin-top: 0; margin-top: 0;
&:active { &:active {
outline: none; outline: none;
} }
a { a {
display: inline-block; display: inline-block;
outline: none; outline: none;
float: none; float: none;
font-weight: normal; font-weight: normal;
color: $color-text; color: $color-text;
padding: $nav-link-padding; padding: $nav-link-padding;
line-height: $line-height-base; line-height: $line-height-base;
&.icon-button { &.icon-button {
@extend a.icon-button; @extend a.icon-button;
} }
} }
&:last-child { &:last-child {
// correctly right-align last tab // correctly right-align last tab
margin-right: 0; margin-right: 0;
} }
&+li { &+li {
margin-left: $spacer-x / 2; margin-left: $spacer-x / 2;
} }
} }
//jquery UI override //jquery UI override
li.ui-tabs-active, li.ui-tabs-active,
@ -546,65 +545,65 @@ body.cms {
padding-bottom: 0; padding-bottom: 0;
} }
.ui-state-default { .ui-state-default {
border: 0; border: 0;
background: transparent; background: transparent;
a { a {
color: lighten($color-text, 10%); color: lighten($color-text, 10%);
border-bottom: $nav-tabs-link-border-width solid transparent; border-bottom: $nav-tabs-link-border-width solid transparent;
&:hover { &:hover {
color: $color-text; color: $color-text;
} }
} }
} }
.ui-state-active { .ui-state-active {
background-color: transparent; background-color: transparent;
cursor: text; cursor: text;
a { a {
border-color: #66727d; border-color: #66727d;
padding-left: $spacer-x / 4; padding-left: $spacer-x / 4;
padding-right: $spacer-x / 4; padding-right: $spacer-x / 4;
color: $color-text; color: $color-text;
} }
} }
&.ui-state-active { &.ui-state-active {
border-color: $color-medium-separator; border-color: $color-medium-separator;
} }
li.cms-tabset-icon.ui-corner-top { li.cms-tabset-icon.ui-corner-top {
text-indent:-9999em; text-indent:-9999em;
a { a {
display: block; display: block;
padding-left: 40px; // icon width padding-left: 40px; // icon width
padding-right: 0; padding-right: 0;
margin: 0; margin: 0;
} }
} }
} }
.cms-panel-padded { .cms-panel-padded {
.ui-tabs-panel { .ui-tabs-panel {
padding: 0; // Avoid double padding with parent padding: 0; // Avoid double padding with parent
.ui-tabs-panel { .ui-tabs-panel {
padding: $grid-x 0 0 0; padding: $grid-x 0 0 0;
} }
} }
.btn-toolbar { .btn-toolbar {
padding: 0; // Avoid double padding with parent padding: 0; // Avoid double padding with parent
} }
} }
&.ss-tabset-tabshidden .ui-tabs-panel { &.ss-tabset-tabshidden .ui-tabs-panel {
border-top: none; border-top: none;
} }
} }
@ -615,70 +614,70 @@ body.cms {
.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs.cms-tabset-primary .ui-tabs-nav,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav { .ui-tabs .cms-content-header-tabs .ui-tabs-nav {
margin-top: -$spacer-y * .625; // Same as toolbar padding margin-top: -$spacer-y * .625; // Same as toolbar padding
float: none; // parent container is already right floated float: none; // parent container is already right floated
li { li {
margin-right: 0; // tabs are directly adjacent margin-right: 0; // tabs are directly adjacent
margin-top: 0; margin-top: 0;
a { a {
margin: 0; margin: 0;
} }
} }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-tl { .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-tl {
border-radius:0; border-radius:0;
} }
.ui-state-default { .ui-state-default {
background: none; background: none;
border-top: 0; border-top: 0;
border: 0; border: 0;
} }
.ui-state-active { .ui-state-active {
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
border: 0; border: 0;
z-index: 2; z-index: 2;
a, a,
.nav-link { .nav-link {
border-bottom: $nav-tabs-link-border-width solid $nav-tabs-active-link-hover-color; border-bottom: $nav-tabs-link-border-width solid $nav-tabs-active-link-hover-color;
padding: $nav-link-padding; padding: $nav-link-padding;
} }
} }
} }
.cms-content-header-tabs { .cms-content-header-tabs {
float: right; float: right;
margin-top: $spacer-y * .625; // Same as toolbar padding margin-top: $spacer-y * .625; // Same as toolbar padding
&.icon-button-group-tabs { &.icon-button-group-tabs {
margin-top: 12px; margin-top: 12px;
margin-bottom: 13px; margin-bottom: 13px;
} }
} }
.cms-content-fields .ui-tabs-nav { .cms-content-fields .ui-tabs-nav {
float: none; float: none;
padding: 0; padding: 0;
border-bottom: 1px solid $color-button-generic-border; border-bottom: 1px solid $color-button-generic-border;
margin: 0 $grid-gutter-width-half; margin: 0 $grid-gutter-width-half;
li { li {
// Align tab content with gutter (supports multiple rows of tabs) // Align tab content with gutter (supports multiple rows of tabs)
margin: 0 0 -1px; margin: 0 0 -1px;
&+li { &+li {
margin-left: $spacer-x / 2; margin-left: $spacer-x / 2;
} }
} }
.nav-link { .nav-link {
padding: $nav-link-padding; padding: $nav-link-padding;
} }
} }
/** ------------------------------------------------------- /** -------------------------------------------------------
@ -686,75 +685,75 @@ body.cms {
* ------------------------------------------------------- */ * ------------------------------------------------------- */
.cms-content-loading-overlay { .cms-content-loading-overlay {
position: absolute; // z-index doesn't apply properly without that position: absolute; // z-index doesn't apply properly without that
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 9998; z-index: 9998;
// Further styling by .ui-widget-overlay-light which is usually applied at the same time // Further styling by .ui-widget-overlay-light which is usually applied at the same time
} }
.cms-content-loading-spinner { .cms-content-loading-spinner {
position: absolute; // z-index doesn't apply properly without that position: absolute; // z-index doesn't apply properly without that
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 9999; z-index: 9999;
background: url("../../images/spinner.gif") no-repeat 50% 50%; background: url("../../images/spinner.gif") no-repeat 50% 50%;
} }
/** ----------------------------------------------- /** -----------------------------------------------
* Loading Screen * Loading Screen
* ------------------------------------------------ */ * ------------------------------------------------ */
.ss-loading-screen { .ss-loading-screen {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 100000; z-index: 100000;
// TODO Convert to compass gradient include // TODO Convert to compass gradient include
background: #fff; background: #fff;
background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%); background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white)); background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
.loading-logo { .loading-logo {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
background: transparent url(../images/silverstripe_logo.png) no-repeat 50% 50%; background: transparent url(../images/silverstripe_logo.png) no-repeat 50% 50%;
} }
p { p {
width: 100%; width: 100%;
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 80px; bottom: 80px;
z-index: 100001; z-index: 100001;
span.notice { span.notice {
width: $cms-panel-sm; width: $cms-panel-sm;
font-size: 14px; font-size: 14px;
padding: 10px 20px; padding: 10px 20px;
color: #dc7f00; color: #dc7f00;
border: none; border: none;
background: none; background: none;
border-radius: 5px; border-radius: 5px;
display: inline-block; display: inline-block;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
} }
} }
.loading-animation { .loading-animation {
display: none; display: none;
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -21.5px; // Half of spinner size margin-left: -21.5px; // Half of spinner size
top: 80%; top: 80%;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -762,19 +761,19 @@ body.cms {
* -------------------------------------------- */ * -------------------------------------------- */
.cms-content-actions, .cms-preview-controls { .cms-content-actions, .cms-preview-controls {
margin: 0; margin: 0;
z-index: 999; z-index: 999;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
height: $toolbar-total-height; height: $toolbar-total-height;
min-height: $toolbar-total-height; min-height: $toolbar-total-height;
max-height: $toolbar-total-height; max-height: $toolbar-total-height;
background-color: $tab-panel-texture-color; background-color: $tab-panel-texture-color;
padding: $spacer-y * .625 0; padding: $spacer-y * .625 0;
&.south .btn-toolbar { &.south .btn-toolbar {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -802,103 +801,103 @@ body.cms {
} }
} }
.message { // White .message { // White
display: block; display: block;
clear: both; clear: both;
margin: 0 0 $spacer-y; margin: 0 0 $spacer-y;
padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2; padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
font-weight: normal; font-weight: normal;
border: 1px #ccc solid; border: 1px #ccc solid;
background: #fff; // for browsers that don't understand rgba background: #fff; // for browsers that don't understand rgba
background: rgba(#fff,0.5); background: rgba(#fff,0.5);
text-shadow: none; text-shadow: none;
border-radius: 3px; border-radius: 3px;
&.notice { &.notice {
background-color: lighten($color-notice,22%); // Blue background-color: lighten($color-notice,22%); // Blue
border-color: $color-notice; border-color: $color-notice;
} }
&.warning { // Yellow &.warning { // Yellow
background-color: lighten($color-warning,47%); background-color: lighten($color-warning,47%);
border-color: $color-warning; border-color: $color-warning;
} }
&.error, &.bad, &.required, &.validation { // Red &.error, &.bad, &.required, &.validation { // Red
background-color: lighten($color-error,24%); background-color: lighten($color-error,24%);
border-color: $color-error; border-color: $color-error;
} }
&.good { // Green &.good { // Green
background-color: lighten($color-good,40%); background-color: lighten($color-good,40%);
border-color: $color-good; border-color: $color-good;
} }
p { p {
margin: 0; margin: 0;
} }
} }
.cms-edit-form .ui-tabs-panel .message { .cms-edit-form .ui-tabs-panel .message {
margin: $grid-x*2 0; // gets padding from tab panel margin: $grid-x*2 0; // gets padding from tab panel
} }
.notice-item { .notice-item {
border-radius: 3px; border-radius: 3px;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
padding: 6px 24px 8px 10px; padding: 6px 24px 8px 10px;
word-wrap: break-word; word-wrap: break-word;
min-height: 60px; min-height: 60px;
height: auto; height: auto;
border: 0; border: 0;
border-left: 3px solid; border-left: 3px solid;
color: #666; color: #666;
left: 300px; left: 300px;
background: #fff; background: #fff;
&.success, &.success,
&.good, &.good,
&.green { &.green {
border-color: $color-good; border-color: $color-good;
} }
&.notice, &.notice,
&.info, &.info,
&.blue { &.blue {
border-color: $color-notice; border-color: $color-notice;
} }
&.warning, &.warning,
&.caution, &.caution,
&.yellow { &.yellow {
border-color: $color-warning; border-color: $color-warning;
} }
&.bad, &.bad,
&.error, &.error,
&.red { &.red {
border-color: $color-error; border-color: $color-error;
} }
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.notice-item-close { .notice-item-close {
font-size: 0; // hide the textNode "x" that jquery.notice.js inserts font-size: 0; // hide the textNode "x" that jquery.notice.js inserts
opacity: .8; opacity: .8;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
// apply relevant styles from .font-icon-cancel // apply relevant styles from .font-icon-cancel
&::before { &::before {
content: "\44"; content: "\44";
font-size: 15px; font-size: 15px;
font-family: silverstripe, sans-serif; font-family: silverstripe, sans-serif;
font-weight: normal; font-weight: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
} }
@ -908,25 +907,25 @@ body.cms {
* -------------------------------------------- */ * -------------------------------------------- */
.page-icon, a .jstree-pageicon { .page-icon, a .jstree-pageicon {
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat; background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat;
} }
.page-icon { .page-icon {
&.class-HomePage { &.class-HomePage {
background-position: 0 -48px; background-position: 0 -48px;
} }
&.class-RedirectorPage { &.class-RedirectorPage {
background-position: 0 -16px; background-position: 0 -16px;
} }
&.class-VirtualPage { &.class-VirtualPage {
background-position: 0 -32px; background-position: 0 -32px;
} }
&.class-ErrorPage { &.class-ErrorPage {
background-position: 0 -112px; background-position: 0 -112px;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -934,7 +933,7 @@ body.cms {
* -------------------------------------------- */ * -------------------------------------------- */
.cms-page-add-form-dialog { .cms-page-add-form-dialog {
display: none; display: none;
} }
.cms-add-form { .cms-add-form {
@ -953,21 +952,21 @@ body.cms {
&.selected { &.selected {
background-color: $background-darker; background-color: $background-darker;
cursor: pointer; cursor: pointer;
} }
&.disabled { &.disabled {
color: $color-text-disabled; color: $color-text-disabled;
opacity: 0.6; opacity: 0.6;
} }
&.disabled:hover { &.disabled:hover {
background: none; background: none;
} }
} }
input[type="radio"] { input[type="radio"] {
position: static; position: static;
} }
.page-icon { .page-icon {
display: inline-block; display: inline-block;
@ -978,12 +977,12 @@ body.cms {
+ .title { + .title {
margin-right: 6px; margin-right: 6px;
font-weight: 500; font-weight: 500;
} }
} }
.form__field-description { .form__field-description {
font-style: italic; font-style: italic;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -991,36 +990,36 @@ body.cms {
* -------------------------------------------- */ * -------------------------------------------- */
.cms-content-toolbar { .cms-content-toolbar {
min-height: 29px; min-height: 29px;
display: block; display: block;
margin: $spacer-y * .625 0 0; margin: $spacer-y * .625 0 0;
padding-bottom: 0; padding-bottom: 0;
@include legacy-pie-clearfix(); @include legacy-pie-clearfix();
border-bottom: 0; border-bottom: 0;
box-shadow: none; box-shadow: none;
.cms-tree-view-modes { .cms-tree-view-modes {
float:right; float:right;
padding-top:$grid-y - 3; padding-top:$grid-y - 3;
* { * {
display: inline-block; display: inline-block;
label { label {
color:$color-text-blue-link; color:$color-text-blue-link;
} }
} }
} }
.cms-actions-tools-row { .cms-actions-tools-row {
clear: both; clear: both;
} }
.tool-action { .tool-action {
display: none; display: none;
} }
} }
.ui-widget-content a { .ui-widget-content a {
color: $link-color; color: $link-color;
} }
/** /**
@ -1032,104 +1031,104 @@ body.cms {
* panel * panel
*/ */
.cms-content-tools { .cms-content-tools {
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
width: $grid-x * 36; width: $grid-x * 36;
z-index: 70; z-index: 70;
box-shadow: 1px 0 0 0 $border-color-dark; box-shadow: 1px 0 0 0 $border-color-dark;
z-index: 1000; z-index: 1000;
float: left; float: left;
position: relative; position: relative;
.cms-panel-header { .cms-panel-header {
clear: both; clear: both;
margin: 10px 0 $grid-y - 1; margin: 10px 0 $grid-y - 1;
padding-bottom: 2px; padding-bottom: 2px;
line-height: $grid-y * 3; line-height: $grid-y * 3;
border-bottom: 1px solid $color-light-separator; border-bottom: 1px solid $color-light-separator;
} }
.cms-panel-content { .cms-panel-content {
width: 300px; width: 300px;
overflow: auto; overflow: auto;
height:100%; height:100%;
.btn-toolbar .ss-ui-action-constructive { .btn-toolbar .ss-ui-action-constructive {
margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two. margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
} }
} }
.cms-content-header { .cms-content-header {
background-color: darken($color-widget-bg, 40%); background-color: darken($color-widget-bg, 40%);
background-image: linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%)); background-image: linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%));
h2 { h2 {
text-shadow: darken($color-widget-bg, 50%) -1px -1px 0; text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
width: $grid-x * 22 /* 24 - (padding on each side + margin) */; width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
color: lighten($color-widget-bg, 60%); color: lighten($color-widget-bg, 60%);
@include hide-text-overflow(); @include hide-text-overflow();
} }
} }
h3,h4,h5 { h3,h4,h5 {
font-weight: bold; font-weight: bold;
line-height: $grid-y * 2; line-height: $grid-y * 2;
} }
h3 { h3 {
font-size: $font-size-h5; font-size: $font-size-h5;
} }
h4 { h4 {
font-size: $font-size-h5; font-size: $font-size-h5;
margin:5px 0; margin:5px 0;
} }
.ui-widget-content { .ui-widget-content {
background: none; background: none;
} }
.field { .field {
&.checkbox { &.checkbox {
padding: 0 0 8px; padding: 0 0 8px;
} }
.description { .description {
margin-left: 0; margin-left: 0;
} }
} }
table { table {
margin: 8px #{-$panel-padding-x}; margin: 8px #{-$panel-padding-x};
width: calc(100% + #{$panel-padding-x * 2}); width: calc(100% + #{$panel-padding-x * 2});
tr { tr {
&.active { &.active {
background-color: $component-active-bg; background-color: $component-active-bg;
color: $color-text-light; color: $color-text-light;
border-top: 2px solid $component-active-bg; border-top: 2px solid $component-active-bg;
} }
+ .active td { + .active td {
border-color: $component-active-bg; border-color: $component-active-bg;
} }
} }
th { th {
font-weight: bold; font-weight: bold;
} }
} }
td, td,
th { th {
border-bottom: 1px solid darken($color-widget-bg, 10%); border-bottom: 1px solid darken($color-widget-bg, 10%);
padding: $grid-y - 1 2px; padding: $grid-y - 1 2px;
font-size: 11px; font-size: 11px;
vertical-align: top; vertical-align: top;
&.first-column { &.first-column {
padding-left: $panel-padding-x; padding-left: $panel-padding-x;
} }
&.last-column { &.last-column {
padding-right: $panel-padding-x; padding-right: $panel-padding-x;
} }
} }
} }
@ -1138,130 +1137,130 @@ body.cms {
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
.cms-notice { .cms-notice {
display: block; display: block;
margin: 0 0 8px; margin: 0 0 8px;
padding: 10px 12px; padding: 10px 12px;
font-weight: normal; font-weight: normal;
border: 1px $color-light-separator solid; border: 1px $color-light-separator solid;
background: #fff; //for browsers that don't understand rgba background: #fff; //for browsers that don't understand rgba
background: rgba(#fff,0.5); background: rgba(#fff,0.5);
text-shadow: none; text-shadow: none;
} }
.cms-tree-filtered { .cms-tree-filtered {
position: absolute; position: absolute;
margin: 0; margin: 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-left: -$grid-x*2; margin-left: -$grid-x*2;
padding: $grid-y*2 $grid-x*2; padding: $grid-y*2 $grid-x*2;
background: #D4E2EC; background: #D4E2EC;
text-shadow: none; text-shadow: none;
border: 0; border: 0;
> strong, > strong,
> a { > a {
font-size: 14px; font-size: 14px;
} }
} }
/** /**
* CMS Batch actions * CMS Batch actions
*/ */
.cms-content-batchactions-button { .cms-content-batchactions-button {
display: inline-block; display: inline-block;
padding: 4px 6px; padding: 4px 6px;
vertical-align: middle; vertical-align: middle;
background-image: linear-gradient(to bottom, #fff, #D9D9D9); background-image: linear-gradient(to bottom, #fff, #D9D9D9);
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 4px; border-radius: 4px;
} }
.cms-content-batchactions { .cms-content-batchactions {
float: left; float: left;
position: relative; position: relative;
display: block; display: block;
.view-mode-batchactions-wrapper { .view-mode-batchactions-wrapper {
height: 18px; height: 18px;
float: left; float: left;
padding: 4px 6px; padding: 4px 6px;
border: 1px solid #aaa; border: 1px solid #aaa;
margin-bottom: 8px; margin-bottom: 8px;
margin-right:-1px; margin-right:-1px;
background-color: #D9D9D9; background-color: #D9D9D9;
background-image: linear-gradient(to bottom, #fff, #D9D9D9); background-image: linear-gradient(to bottom, #fff, #D9D9D9);
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
input { input {
vertical-align: middle; vertical-align: middle;
} }
.view-mode-batchactions-label { .view-mode-batchactions-label {
vertical-align: middle; vertical-align: middle;
display: none; display: none;
} }
} }
.checkbox { .checkbox {
margin-top: 2px; margin-top: 2px;
vertical-align: middle; vertical-align: middle;
} }
} }
// Tree batch actions // Tree batch actions
.cms-batch-actions { .cms-batch-actions {
position: relative; position: relative;
max-width: 400px; max-width: 400px;
fieldset { fieldset {
width: 100%; width: 100%;
float: left; float: left;
} }
.form__field-holder--no-label { .form__field-holder--no-label {
margin-left: 0 !important; margin-left: 0 !important;
flex-basis: 100% !important; flex-basis: 100% !important;
padding-right: 40px; padding-right: 40px;
} }
.dropdown { // The 'select' element .dropdown { // The 'select' element
width: 100%; width: 100%;
height: 32px; height: 32px;
} }
.chosen-container-single .chosen-single { .chosen-container-single .chosen-single {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.field .chosen-container-active.chosen-with-drop .chosen-single { .field .chosen-container-active.chosen-with-drop .chosen-single {
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.btn-toolbar { .btn-toolbar {
position: absolute; position: absolute;
right: 0; right: 0;
} }
.action, .action,
.btn { .btn {
padding-top: 7px; padding-top: 7px;
padding-bottom: 7px; padding-bottom: 7px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
width: calc(#{$grid-gutter-width} + 1px); // gutters + 1px border width: calc(#{$grid-gutter-width} + 1px); // gutters + 1px border
} }
} }
/** -------------------------------------------- /** --------------------------------------------
* Preview * Preview
* -------------------------------------------- */ * -------------------------------------------- */
.cms-switch-view { .cms-switch-view {
a { a {
padding-right: 1em; padding-right: 1em;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -1269,102 +1268,102 @@ body.cms {
* -------------------------------------------- */ * -------------------------------------------- */
form.member-profile-form { form.member-profile-form {
padding: 0 $grid-x*2 0 0; padding: 0 $grid-x*2 0 0;
#Root_Permissions { #Root_Permissions {
clear:both; clear:both;
border-top: 1px solid darken($color-tab, 20%); border-top: 1px solid darken($color-tab, 20%);
} }
#Root_Main { #Root_Main {
clear:both; clear:both;
border-top: 1px solid darken($color-tab, 20%); border-top: 1px solid darken($color-tab, 20%);
.cms-help-toggle { .cms-help-toggle {
text-indent: -9999em; text-indent: -9999em;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
background:url(../images/question.png) no-repeat 0px 0px; background:url(../images/question.png) no-repeat 0px 0px;
} }
} }
#FavouritePageID { #FavouritePageID {
margin-top:$grid-y; margin-top:$grid-y;
} }
#CsvFile .middleColumn { #CsvFile .middleColumn {
background: none !important; background: none !important;
} }
.advanced h4 { .advanced h4 {
margin-bottom: .5em; margin-bottom: .5em;
} }
.btn-toolbar { .btn-toolbar {
text-align: left; text-align: left;
border: 0; border: 0;
} }
input.customFormat { input.customFormat {
width: $grid-x * 10; width: $grid-x * 10;
border: 1px solid #ccc !important; border: 1px solid #ccc !important;
padding: 3px; padding: 3px;
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
} }
.formattingHelpToggle { .formattingHelpToggle {
display: block; display: block;
font-size: 11px; font-size: 11px;
} }
.formattingHelpText { .formattingHelpText {
margin: 5px 0 0 -5px; margin: 5px 0 0 -5px;
color: #333; color: #333;
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.formattingHelpText ul { .formattingHelpText ul {
padding: 0; padding: 0;
} }
.formattingHelpText li { .formattingHelpText li {
font-size: 11px; font-size: 11px;
color: #333; color: #333;
margin-bottom: 2px; margin-bottom: 2px;
padding-bottom: 0; padding-bottom: 0;
float: none; float: none;
width: auto; width: auto;
} }
#Groups .middleColumn { #Groups .middleColumn {
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
.TreeDropdownField { .TreeDropdownField {
width: 90%; width: 90%;
max-width: 90%; max-width: 90%;
} }
} }
// Same rules in .SecurityAdmin // Same rules in .SecurityAdmin
#Permissions .optionset li { #Permissions .optionset li {
float: none; float: none;
width: auto; width: auto;
} }
} }
.memberdatetimeoptionset { .memberdatetimeoptionset {
@extend .form-inline; @extend .form-inline;
.description { .description {
font-style: normal; font-style: normal;
} }
.toggle { .toggle {
font-size: $font-size-sm; font-size: $font-size-sm;
} }
.toggle-content { .toggle-content {
padding-left: 0; padding-left: 0;
li { li {
@ -1381,56 +1380,56 @@ form.member-profile-form {
} }
.cms { .cms {
.cms-content { .cms-content {
border-radius: 0; border-radius: 0;
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
width: 800px; width: 800px;
z-index: 40; z-index: 40;
overflow: hidden !important; // TEMP until JS is removed overflow: hidden !important; // TEMP until JS is removed
} }
.cms-content-fields { .cms-content-fields {
// always show a y scroll bar as popups like TreeDropdowns // always show a y scroll bar as popups like TreeDropdowns
// can trigger longer pages and the extra scroll bar doesn't fire our sizing bar // can trigger longer pages and the extra scroll bar doesn't fire our sizing bar
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
width: 100%; width: 100%;
#Root_Main { #Root_Main {
.confirmedpassword { .confirmedpassword {
border-bottom:none; border-bottom:none;
box-shadow:none; box-shadow:none;
} }
.customFormat { .customFormat {
max-width: 100px; max-width: 100px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.cms-help-toggle { .cms-help-toggle {
text-indent: -9999em; text-indent: -9999em;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
background:url(../images/question.png) no-repeat 0px 0px; background:url(../images/question.png) no-repeat 0px 0px;
} }
} }
#Root_Permissions ul.optionset li { #Root_Permissions ul.optionset li {
float:none; float:none;
} }
} }
form.member-profile-form { form.member-profile-form {
#Root .ui-tabs-nav { #Root .ui-tabs-nav {
display: none; display: none;
} }
#Root_Main, #Root_Permissions { #Root_Main, #Root_Permissions {
border: none; border: none;
} }
} }
} }
@ -1439,22 +1438,22 @@ form.member-profile-form {
* "Settings" Form * "Settings" Form
* -------------------------------------------- */ * -------------------------------------------- */
#CanViewType, #CanEditType, #CanCreateTopLevelType { #CanViewType, #CanEditType, #CanCreateTopLevelType {
.optionset li { .optionset li {
// All options on their own line // All options on their own line
float: none; float: none;
width: auto; width: auto;
white-space: nowrap; white-space: nowrap;
} }
} }
#ViewerGroups, #ViewerGroups,
#EditorGroups, #EditorGroups,
#CreateTopLevelGroups { #CreateTopLevelGroups {
select { select {
// Fix for chosen.js width detection on hidden elements. // Fix for chosen.js width detection on hidden elements.
// TODO Remove once .field styling in _form.scss is refactored to allow flexible field widths // TODO Remove once .field styling in _form.scss is refactored to allow flexible field widths
width: $grid-x * 64; width: $grid-x * 64;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -1462,116 +1461,116 @@ form.member-profile-form {
* -------------------------------------------- */ * -------------------------------------------- */
.cms-panel { .cms-panel {
.cms-panel-toggle { .cms-panel-toggle {
.toggle-collapse, .toggle-collapse,
.toggle-expand { .toggle-expand {
display: block; display: block;
position: absolute; position: absolute;
text-align: right; text-align: right;
padding: 14px 0; padding: 14px 0;
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
line-height: 20px; line-height: 20px;
height: 52px; height: 52px;
margin: -#{$spacer-y * .625} #{0 - $panel-padding-x}; margin: -#{$spacer-y * .625} #{0 - $panel-padding-x};
span { span {
display: inline-block; display: inline-block;
margin: 0 8px; margin: 0 8px;
color: #555d60; color: #555d60;
font-size: 16px; font-size: 16px;
} }
&.toggle-expand { &.toggle-expand {
width: 60px; // will set the collapsed width width: 60px; // will set the collapsed width
display: none; display: none;
} }
} }
} }
&.collapsed { &.collapsed {
cursor: pointer; cursor: pointer;
.cms-panel-header *, .cms-panel-header *,
.cms-panel-content, .cms-panel-content,
.cms-panel-toggle a.toggle-collapse{ .cms-panel-toggle a.toggle-collapse{
display:none; display:none;
} }
.cms-panel-toggle a.toggle-expand { .cms-panel-toggle a.toggle-expand {
display: block; display: block;
} }
} }
.cms-panel-header { .cms-panel-header {
width: 100%; width: 100%;
} }
&#cms-content-tools-CMSPageEditController .cms-panel-content-collapsed { &#cms-content-tools-CMSPageEditController .cms-panel-content-collapsed {
width: $cms-panel-xs; width: $cms-panel-xs;
display: none; // Avoids FOUC display: none; // Avoids FOUC
h2, h3 { h2, h3 {
border-bottom: 0; border-bottom: 0;
margin-left: $grid-y; margin-left: $grid-y;
transform-origin: bottom, right; transform-origin: bottom, right;
transform: rotate(270deg); transform: rotate(270deg);
} }
.cms-panel-header { .cms-panel-header {
width: 600px; width: 600px;
position: relative; position: relative;
top: 24px; top: 24px;
right: 577px; right: 577px;
text-align: right; text-align: right;
} }
} }
.cms-panel-content-collapsed { .cms-panel-content-collapsed {
width: 60px; width: 60px;
display: none; // Avoids FOUC display: none; // Avoids FOUC
height: calc(100% - #{$toolbar-height}); height: calc(100% - #{$toolbar-height});
overflow: hidden; overflow: hidden;
h2, h2,
h3 { h3 {
border-bottom: 0; border-bottom: 0;
margin-left: 18px; margin-left: 18px;
transform-origin: bottom right; transform-origin: bottom right;
transform: rotate(270deg); transform: rotate(270deg);
} }
.cms-panel-header { .cms-panel-header {
width: 600px; width: 600px;
position: relative; position: relative;
right: 574px; right: 574px;
text-align: right; text-align: right;
border-bottom: 0; border-bottom: 0;
box-shadow: none; box-shadow: none;
margin-top: -5px; margin-top: -5px;
} }
} }
} }
.cms .cms-panel-padded { .cms .cms-panel-padded {
&.ReportAdmin { &.ReportAdmin {
.ss-gridfield-buttonrow { .ss-gridfield-buttonrow {
margin-left: -20px; margin-left: -20px;
margin-right: -20px; margin-right: -20px;
} }
> fieldset { > fieldset {
padding: 0 $panel-padding-x; padding: 0 $panel-padding-x;
} }
} }
.cms-content-view { .cms-content-view {
padding: 0 $panel-padding-x $grid-y*1.5; padding: 0 $panel-padding-x $grid-y*1.5;
} }
} }
.CMSPageAddController .cms-panel-padded { .CMSPageAddController .cms-panel-padded {
padding: $panel-padding-y $panel-padding-x; padding: $panel-padding-y $panel-padding-x;
} }
/** ------------------------------------------------------------------ /** ------------------------------------------------------------------
@ -1583,267 +1582,267 @@ form.member-profile-form {
// overlay for switching between CMS panes // overlay for switching between CMS panes
.cms .ui-widget-overlay-light { .cms .ui-widget-overlay-light {
background: #aaaaaa url(../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; background: #aaaaaa url(../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: 0.3; opacity: 0.3;
} }
// Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) // Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI)
.cms .ui-widget-overlay { .cms .ui-widget-overlay {
background-color: #000; background-color: #000;
background-image: none; background-image: none;
} }
.cms .ui-dialog .ss-ui-dialog.ui-dialog-content { .cms .ui-dialog .ss-ui-dialog.ui-dialog-content {
padding-top: 0px; //removes padding so that tabs are flush with header padding-top: 0px; //removes padding so that tabs are flush with header
} }
// Elements with this class can either frame inline markup or an iframe, // Elements with this class can either frame inline markup or an iframe,
// most styles should be applied to .cms-dialog instead (which declares the content in the frame) // most styles should be applied to .cms-dialog instead (which declares the content in the frame)
.ui-dialog { .ui-dialog {
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
background-clip: content-box; background-clip: content-box;
border: 1px solid #666 !important; border: 1px solid #666 !important;
border-radius: $grid-y; border-radius: $grid-y;
overflow: visible; overflow: visible;
padding: 0; padding: 0;
box-shadow: 0px 0px 30px 10px rgba(0,0,0,.3); box-shadow: 0px 0px 30px 10px rgba(0,0,0,.3);
// Titlebar for pop-up dialog. // Titlebar for pop-up dialog.
.ui-dialog-titlebar.ui-widget-header { .ui-dialog-titlebar.ui-widget-header {
font-size: $font-size-root +1; font-size: $font-size-root +1;
padding: 0; padding: 0;
border: 0; border: 0;
background: transparent url(../images/textures/cms_content_header.png) repeat; background: transparent url(../images/textures/cms_content_header.png) repeat;
box-shadow: $color-shadow-dark 0 0 ($grid-x / 2) inset; box-shadow: $color-shadow-dark 0 0 ($grid-x / 2) inset;
.ui-dialog-title { .ui-dialog-title {
position:absolute; position:absolute;
} }
} }
.ui-dialog-content { .ui-dialog-content {
border-radius: $grid-y; border-radius: $grid-y;
overflow: auto; // TODO Replace with proper $.layout grid overflow: auto; // TODO Replace with proper $.layout grid
&.loading { &.loading {
background-image: url("../../images/spinner.gif"); background-image: url("../../images/spinner.gif");
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
.cms-dialog-content { .cms-dialog-content {
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
padding-bottom: $grid-y; padding-bottom: $grid-y;
padding-top: 0; padding-top: 0;
.btn-toolbar { .btn-toolbar {
overflow: auto; overflow: auto;
padding-bottom: $grid-y; padding-bottom: $grid-y;
float: right; float: right;
} }
.ui-tabs{ .ui-tabs{
position:static; position:static;
// Shift navigation upwards to be horizontally centered with dialog title. // Shift navigation upwards to be horizontally centered with dialog title.
// Can't use floats since this title is in a different DOM parent sibling // Can't use floats since this title is in a different DOM parent sibling
// Note: Does NOT apply to member profile form (unnecessary, since it doesn't have a dialog title) // Note: Does NOT apply to member profile form (unnecessary, since it doesn't have a dialog title)
.ui-tabs-nav { .ui-tabs-nav {
position:absolute; position:absolute;
top: 9px; top: 9px;
// Tabs nav is included in scollbar. By absolutely positioning it off the edge, // Tabs nav is included in scollbar. By absolutely positioning it off the edge,
// we avoid tabs shifting position when scrollbar toggles // we avoid tabs shifting position when scrollbar toggles
right: 40px; right: 40px;
} }
// Don't show top border, since these styles already have a title bar // Don't show top border, since these styles already have a title bar
.ui-tabs-panel { .ui-tabs-panel {
border: 0; border: 0;
} }
} }
.clear { .clear {
clear: both; clear: both;
} }
} }
&.loading { &.loading {
background-image: url("../../images/spinner.gif"); background-image: url("../../images/spinner.gif");
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.ui-dialog-buttonpane { .ui-dialog-buttonpane {
margin: 0; margin: 0;
background: $color-darker-bg; background: $color-darker-bg;
border-top: 1px solid $color-light-separator; border-top: 1px solid $color-light-separator;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
} }
body.cms-dialog { body.cms-dialog {
overflow: auto; overflow: auto;
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
position:relative; position:relative;
} }
/** -------------------------------------------- /** --------------------------------------------
* "Insert X" forms * "Insert X" forms
* -------------------------------------------- */ * -------------------------------------------- */
.htmleditorfield-dialog{ .htmleditorfield-dialog{
&.ui-dialog-content{ &.ui-dialog-content{
padding:0; padding:0;
position:relative; position:relative;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
.htmleditorfield-from-web { .htmleditorfield-from-web {
text-align: left; text-align: left;
margin-bottom: $grid-y; margin-bottom: $grid-y;
&.CompositeField{ &.CompositeField{
@include clearfix; @include clearfix;
} }
.url-description { .url-description {
text-align: left; text-align: left;
margin-bottom: $grid-y*1.5; margin-bottom: $grid-y*1.5;
} }
div.remoteurl{ div.remoteurl{
width: calc(100% - 84px); width: calc(100% - 84px);
position: relative; position: relative;
display: inline-block; display: inline-block;
label { label {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
margin-bottom: 0; margin-bottom: 0;
line-height: $line-height; line-height: $line-height;
@extend .input-group-addon; @extend .input-group-addon;
} }
input.remoteurl { input.remoteurl {
padding-left: 60px; padding-left: 60px;
max-width: none; max-width: none;
} }
} }
button.add-url{ button.add-url{
display: inline-block;; display: inline-block;;
float: none; float: none;
margin: 2px 0 0; margin: 2px 0 0;
vertical-align: top; vertical-align: top;
&:hover, &:hover,
&:active { &:active {
opacity:1; opacity:1;
} }
&.ui-state-disabled { &.ui-state-disabled {
&, &,
&:hover, &:hover,
&:active { &:active {
opacity: 0.35; opacity: 0.35;
filter: Alpha(Opacity=35); filter: Alpha(Opacity=35);
} }
} }
} }
&.loading button.add-url::before { &.loading button.add-url::before {
content: ""; content: "";
background: url(../images/throbber.gif) no-repeat center center; background: url(../images/throbber.gif) no-repeat center center;
padding: 8px; padding: 8px;
} }
} }
.cms-content-header { .cms-content-header {
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 53px; height: 53px;
margin-bottom: 0; margin-bottom: 0;
// remove extra border on headers // remove extra border on headers
&::after { &::after {
display: none; display: none;
} }
h3{ h3{
padding: $grid-y*1.5 0 $grid-y*1.5 $panel-padding-y; padding: $grid-y*1.5 0 $grid-y*1.5 $panel-padding-y;
margin: 0; margin: 0;
line-height: 28px; line-height: 28px;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
&.insert { &.insert {
.back-button { .back-button {
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
&::before { &::before {
margin-right: 4px; margin-right: 4px;
font-size: 18px; font-size: 18px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
} }
} }
} }
} }
.ss-insert-media { .ss-insert-media {
padding: $panel-padding-y $panel-padding-x; padding: $panel-padding-y $panel-padding-x;
.ui-tabs-panel { .ui-tabs-panel {
padding: 0; padding: 0;
} }
} }
.toolbar--content { .toolbar--content {
margin-top: -$panel-padding-y; margin-top: -$panel-padding-y;
margin-left: -$panel-padding-x; margin-left: -$panel-padding-x;
margin-right: -$panel-padding-x; margin-right: -$panel-padding-x;
height: auto; // acount for uploading new files height: auto; // acount for uploading new files
} }
.ss-insert-link { .ss-insert-link {
padding-left: $panel-padding-x; padding-left: $panel-padding-x;
padding-right: $panel-padding-x; padding-right: $panel-padding-x;
&::after { &::after {
display: none; display: none;
} }
} }
.btn-toolbar { .btn-toolbar {
padding:$grid-y $grid-x*2 ; padding:$grid-y $grid-x*2 ;
.ui-tabs-panel { .ui-tabs-panel {
padding: 0; padding: 0;
} }
} }
.details{ .details{
.file-url{ .file-url{
display:block; display:block;
width:300px; width:300px;
@include hide-text-overflow; @include hide-text-overflow;
} }
.cms-file-info { .cms-file-info {
.field{ .field{
border: none; border: none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0);
} }
} }
} }
.CompositeField .text select { .CompositeField .text select {
margin: 5px 0 0 0; margin: 5px 0 0 0;
} }
} }
.htmleditorfield-linkform { .htmleditorfield-linkform {
.step2 { .step2 {
@ -1853,82 +1852,82 @@ body.cms-dialog {
} }
.htmleditorfield-mediaform { .htmleditorfield-mediaform {
.grid-field .gridfield-button-delete { .grid-field .gridfield-button-delete {
// TODO Remove from PHP instead of hiding // TODO Remove from PHP instead of hiding
display: none; // delete action shouldn't be allowed here display: none; // delete action shouldn't be allowed here
} }
.htmleditorfield-from-cms { .htmleditorfield-from-cms {
&.ss-uploadfield { &.ss-uploadfield {
h4 { h4 {
float: left; // headline and dropdown on same line float: left; // headline and dropdown on same line
margin-top: $grid-y/2; // bring to same baseline as dropdown margin-top: $grid-y/2; // bring to same baseline as dropdown
margin-bottom: 0; margin-bottom: 0;
} }
.middleColumn { .middleColumn {
min-width: 0; // fit within available space min-width: 0; // fit within available space
clear: none; // headline and dropdown on same line clear: none; // headline and dropdown on same line
} }
.field.treedropdown { .field.treedropdown {
border-bottom: 0; // don't show border, dropdown and gridfield visually belong together border-bottom: 0; // don't show border, dropdown and gridfield visually belong together
padding: 0; padding: 0;
position: absolute; position: absolute;
margin: 0; margin: 0;
top: 6px; top: 6px;
left: 160px; left: 160px;
width: auto; width: auto;
min-width: 200px; min-width: 200px;
> .form__field-holder { > .form__field-holder {
margin-left: -15px; margin-left: -15px;
} }
} }
.treedropdownfield-title { .treedropdownfield-title {
font-weight: bold; font-weight: bold;
} }
.treedropdownfield-toggle-panel-link { .treedropdownfield-toggle-panel-link {
padding: 5px 4px 5px 0; padding: 5px 4px 5px 0;
height: 30px; // Fix to hold dropdown search field height: 30px; // Fix to hold dropdown search field
a { a {
background: url(../images/sitetree_ss_default_icons.png); background: url(../images/sitetree_ss_default_icons.png);
background-position: -18px -4px; background-position: -18px -4px;
height: 14px; height: 14px;
opacity: .8; opacity: .8;
} }
} }
.TreeDropdownField:not(.treedropdownfield-open-tree) { .TreeDropdownField:not(.treedropdownfield-open-tree) {
background: 0; background: 0;
box-shadow: none; box-shadow: none;
border-color: transparent; border-color: transparent;
} }
} }
} }
.ss-assetuploadfield .ss-uploadfield-editandorganize .ss-uploadfield-files .ss-uploadfield-item-info { .ss-assetuploadfield .ss-uploadfield-editandorganize .ss-uploadfield-files .ss-uploadfield-item-info {
background-color: grayscale(#5db4df); background-color: grayscale(#5db4df);
background-image: linear-gradient(to bottom, grayscale(#5db4df) 0%, grayscale(#5db1dd) 8%, grayscale(#439bcb) 50%, grayscale(#3f99cd) 54%, grayscale(#207db6) 96%, grayscale(#1e7cba) 100%); background-image: linear-gradient(to bottom, grayscale(#5db4df) 0%, grayscale(#5db1dd) 8%, grayscale(#439bcb) 50%, grayscale(#3f99cd) 54%, grayscale(#207db6) 96%, grayscale(#1e7cba) 100%);
} }
} }
.ss-uploadfield-editandorganize { .ss-uploadfield-editandorganize {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
margin-top: $panel-padding-y; margin-top: $panel-padding-y;
.ss-uploadfield-item { .ss-uploadfield-item {
min-height: 32px; min-height: 32px;
} }
.ss-uploadfield-item-info { .ss-uploadfield-item-info {
position: absolute; position: absolute;
top: 0; top: 0;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -1936,93 +1935,93 @@ body.cms-dialog {
* -------------------------------------------- */ * -------------------------------------------- */
.add-to-campaign__dialog { .add-to-campaign__dialog {
overflow: hidden; overflow: hidden;
padding: 12px 16px; padding: 12px 16px;
margin: 0; margin: 0;
border: 0; border: 0;
min-height: 150px; min-height: 150px;
/* no max-height due to overflow: hidden */ /* no max-height due to overflow: hidden */
.chosen-results > li { .chosen-results > li {
padding: $spacer-y/1.5 $spacer-x; padding: $spacer-y/1.5 $spacer-x;
} }
.disabled-result { .disabled-result {
font-style: italic; font-style: italic;
&::after { &::after {
font-style: normal; font-style: normal;
content: "Already contains item"; content: "Already contains item";
color: $color-text-blue-link; color: $color-text-blue-link;
margin-left: $spacer-x; margin-left: $spacer-x;
float: right; float: right;
} }
} }
@keyframes add-to-campaign--slideup { @keyframes add-to-campaign--slideup {
from { from {
bottom: -100% bottom: -100%
} }
to { to {
bottom: 0 bottom: 0
} }
} }
.add-to-campaign__response { .add-to-campaign__response {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
animation:add-to-campaign--slideup 2s 1; animation:add-to-campaign--slideup 2s 1;
background: $white; background: $white;
display: block; display: block;
z-index: 1; z-index: 1;
} }
.response-wrapper { .response-wrapper {
display: table; display: table;
height: 100%; height: 100%;
width: 100%; width: 100%;
span { span {
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
padding-bottom: $spacer-y; padding-bottom: $spacer-y;
&::before { &::before {
font-size: 48px; font-size: 48px;
line-height: 40px; line-height: 40px;
display: block; display: block;
padding-bottom: $spacer-y; padding-bottom: $spacer-y;
} }
} }
} }
.add-to-campaign__response--good { .add-to-campaign__response--good {
span::before { span::before {
content: ""; content: "";
color: $brand-success; color: $brand-success;
} }
} }
.add-to-campaign__response--error span::before { .add-to-campaign__response--error span::before {
/* This is a sad face emoticon. Some fonts don't carry it. @todo: replace or test in all browsers */ /* This is a sad face emoticon. Some fonts don't carry it. @todo: replace or test in all browsers */
content: ""; content: "";
color: $brand-danger; color: $brand-danger;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
* Search forms (used in AssetAdmin, ModelAdmin, etc) * Search forms (used in AssetAdmin, ModelAdmin, etc)
* -------------------------------------------- */ * -------------------------------------------- */
.cms-search-form { .cms-search-form {
margin-bottom: $grid-y * 2; margin-bottom: $grid-y * 2;
.filter & { .filter & {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -2031,7 +2030,7 @@ body.cms-dialog {
* -------------------------------------------- */ * -------------------------------------------- */
.step-label > * { .step-label > * {
display: block; display: block;
} }
.step-label .flyout { .step-label .flyout {
color: $brand-secondary; color: $brand-secondary;
@ -2046,40 +2045,40 @@ body.cms-dialog {
.cms-file-info { .cms-file-info {
// Preview might not always be available // Preview might not always be available
.cms-file-info-preview img { .cms-file-info-preview img {
max-width: $grid-x * 22; // Same as ".field label" max-width: $grid-x * 22; // Same as ".field label"
max-height: $grid-x * 16; // Fitting typical info displayed (~5 rows) max-height: $grid-x * 16; // Fitting typical info displayed (~5 rows)
margin-bottom: $spacer-y; margin-bottom: $spacer-y;
} }
} }
form.small { form.small {
.cms-file-info-preview { .cms-file-info-preview {
width: $grid-x*14; width: $grid-x*14;
img { img {
max-width: $grid-x*14; max-width: $grid-x*14;
} }
} }
.cms-file-info-data { .cms-file-info-data {
// Ensure it fits beside the image preview, increased size for long url // Ensure it fits beside the image preview, increased size for long url
max-width: 550px; max-width: 550px;
// Reduced label widths to fit everything in smaller space // Reduced label widths to fit everything in smaller space
.field { .field {
padding-bottom: 0; padding-bottom: 0;
label { label {
width: $grid-x*14; width: $grid-x*14;
} }
.middleColumn { .middleColumn {
margin-left: $grid-x*15; margin-left: $grid-x*15;
} }
} }
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -2087,14 +2086,14 @@ form.small {
* -------------------------------------------- */ * -------------------------------------------- */
.members_grid { .members_grid {
span button#action_gridfield_relationfind { span button#action_gridfield_relationfind {
display:none; //hides find button - redundant functionality display:none; //hides find button - redundant functionality
} }
p button#action_export { p button#action_export {
span.btn-icon-download-csv { span.btn-icon-download-csv {
height:17px; //exact height of icon height:17px; //exact height of icon
} }
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -2102,10 +2101,10 @@ form.small {
* -------------------------------------------- */ * -------------------------------------------- */
/*.cms-container { /*.cms-container {
.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController { .CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
// Fix pixel gap between nav tree and main page header // Fix pixel gap between nav tree and main page header
margin-left: -1px; // Removed to close gap far right of right tabs? margin-left: -1px; // Removed to close gap far right of right tabs?
} }
}*/ }*/
/** -------------------------------------------- /** --------------------------------------------
@ -2113,52 +2112,52 @@ form.small {
* -------------------------------------------- */ * -------------------------------------------- */
.cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings { .cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings {
.optionset li { .optionset li {
white-space: nowrap; white-space: nowrap;
label { label {
padding-left: 2px; padding-left: 2px;
} }
} }
.fieldgroup .fieldgroup-field { .fieldgroup .fieldgroup-field {
width: $grid-x * 27; width: $grid-x * 27;
padding-left: 0; padding-left: 0;
} }
} }
/** -------------------------------------------- /** --------------------------------------------
* Buttons for FileUpload * Buttons for FileUpload
* -------------------------------------------- */ * -------------------------------------------- */
.ss-uploadfield-item-edit-all .ui-button-text{ .ss-uploadfield-item-edit-all .ui-button-text{
padding-right:0; padding-right:0;
} }
.toggle-details-icon { .toggle-details-icon {
@extend .icon-sprites-32x32; @extend .icon-sprites-32x32;
@include sprite($sprites-32x32-menu-arrow-down); @include sprite($sprites-32x32-menu-arrow-down);
.ss-uploadfield-item-edit-all & { .ss-uploadfield-item-edit-all & {
@extend .icon-sprites-32x32; @extend .icon-sprites-32x32;
@include sprite($sprites-32x32-menu-arrow-deselected-down); @include sprite($sprites-32x32-menu-arrow-deselected-down);
display:inline-block; display:inline-block;
width:8px; width:8px;
height:8px; height:8px;
padding-left:5px; padding-left:5px;
} }
&.opened { &.opened {
@extend .icon-sprites-32x32; @extend .icon-sprites-32x32;
@include sprite($sprites-32x32-menu-arrow-up); @include sprite($sprites-32x32-menu-arrow-up);
.ss-uploadfield-item-edit-all &{ .ss-uploadfield-item-edit-all &{
@extend .icon-sprites-32x32; @extend .icon-sprites-32x32;
@include sprite($sprites-32x32-menu-arrow-deselected-up); @include sprite($sprites-32x32-menu-arrow-deselected-up);
display:inline-block; display:inline-block;
} }
} }
} }
/** -------------------------------------------- /** --------------------------------------------
@ -2167,5 +2166,5 @@ form.small {
* -------------------------------------------- */ * -------------------------------------------- */
.cms .btn-toolbar > .cms-preview-toggle-link, .cms .btn-toolbar > .cms-preview-toggle-link,
.cms .cms-navigator > .cms-preview-toggle-link{ .cms .cms-navigator > .cms-preview-toggle-link{
display:none; display:none;
} }

View File

@ -1,14 +1,13 @@
/** // This file contains the default theme definitions for the admin interface.
* This file contains the default theme definitions for the admin interface. // Please put mostly SCSS variable definitions in here,
* Please put mostly SCSS variable definitions in here, // and leave the actual styling to _style.scss and auxilliary files.
* and leave the actual styling to _style.scss and auxilliary files.
*/
@import "../../variables.scss"; @import "../../variables";
//--------------------------------------------------
// Colours
//--------------------------------------------------
/** -----------------------------------------------
* Colours
* ------------------------------------------------ */
$color-base: #b0bec7 !default; $color-base: #b0bec7 !default;
$color-widget-bg: lighten($color-base, 20%) !default; $color-widget-bg: lighten($color-base, 20%) !default;
@ -21,14 +20,14 @@ $color-theme-active: $color-theme-base;
// CMS 4 menu // CMS 4 menu
$base-menu: #d8e4eb; $base-menu: #d8e4eb;
$base-menu-bg: lighten($base-menu,5%); $base-menu-bg: lighten($base-menu, 5%);
$base-menu-icon: darken($base-menu, 26%); $base-menu-icon: darken($base-menu, 26%);
//offical silverstripe brand color // offical silverstripe brand color
$color-brand-bg: #005a93 !default; $color-brand-bg: #005a93 !default;
$color-brand: #43c7f4 !default; $color-brand: #43c7f4 !default;
/* Keep as solid colours transparent borders wont work in ie */ // Keep as solid colours transparent borders wont work in i
$color-darker-bg: #f0f2f4 !default; $color-darker-bg: #f0f2f4 !default;
$color-dark-bg: #142136 !default; $color-dark-bg: #142136 !default;
$color-dark-separator: #19435c !default; $color-dark-separator: #19435c !default;
@ -39,7 +38,7 @@ $color-light-separator: #D2D5D8 !default; // Horiontal dividers
$color-tab: #d9d9d9 !default; $color-tab: #d9d9d9 !default;
$color-dark-grey: #7B8C91 !default; $color-dark-grey: #7B8C91 !default;
/* Only for use as shadows as they wont work in older browsers */ // Only for use as shadows as they wont work in older browsers
$color-shadow-light: rgba(201, 205, 206, 0.8) !default; $color-shadow-light: rgba(201, 205, 206, 0.8) !default;
$color-shadow-dark: rgba(107, 120, 123, 0.5) !default; $color-shadow-dark: rgba(107, 120, 123, 0.5) !default;
$color-shadow-black: rgba(0, 0, 0, 0.6) !default; $color-shadow-black: rgba(0, 0, 0, 0.6) !default;
@ -55,7 +54,8 @@ $color-menu-background: #c6d7df !default;
$color-menu-border: #8c99a1 !default; $color-menu-border: #8c99a1 !default;
$color-panel-background: #c6d7df !default; $color-panel-background: #c6d7df !default;
$color-text-default: #4f5861 !default; /* new in SilverStripe 4 */ // new in SilverStripe 4
$color-text-default: #4f5861 !default;
$color-text: #66727d !default; $color-text: #66727d !default;
$color-text-light: white !default; $color-text-light: white !default;
$color-text-light-link: white !default; $color-text-light-link: white !default;
@ -83,30 +83,30 @@ $color-notice: #93CDE8 !default; // blue
$color-warning: #E9D104 !default; // yellow $color-warning: #E9D104 !default; // yellow
$color-error: #e68288 !default; // red $color-error: #e68288 !default; // red
$color-good: #72c34b !default; // green $color-good: #72c34b !default; // green
/*$color-optional: #a1d2eb !default; */ // orange // $color-optional: #a1d2eb !default; // orange
$color-cms-batchactions-menu-background: #f5f5f5 !default; $color-cms-batchactions-menu-background: #f5f5f5 !default;
$color-cms-batchactions-menu-selected-background: #fffcdc !default; $color-cms-batchactions-menu-selected-background: #fffcdc !default;
/** ----------------------------------------------- //--------------------------------------------------
* Textures // Textures
* ----------------------------------------------- */ //--------------------------------------------------
$tab-panel-texture-color: #f6f7f8 !default; $tab-panel-texture-color: #f6f7f8 !default;
$tab-panel-texture-background: $tab-panel-texture-color url(../images/textures/bg_cms_main_content.png) repeat top left !default; $tab-panel-texture-background: $tab-panel-texture-color url("../images/textures/bg_cms_main_content.png") repeat top left !default;
/** ----------------------------------------------- //--------------------------------------------------
* Grid Units (px) // Grid Units (px)
* //
* We have a vertical rhythm that the grid is based off // We have a vertical rhythm that the grid is based off
* both x (=horizontal) and y (=vertical). All internal padding and // both x (=horizontal) and y (=vertical). All internal padding and
* margins are scaled to this and accounting for paragraphs // margins are scaled to this and accounting for paragraphs
* ------------------------------------------------ */ //--------------------------------------------------
$grid-y: 8px !default; $grid-y: 8px !default;
$grid-x: 8px !default; $grid-x: 8px !default;
/** ----------------------------------------------- //--------------------------------------------------
* Application Logo (CMS Logo) Must be 24px x 24px // Application Logo (CMS Logo) Must be 24px x 24px
* ------------------------------------------------ */ //--------------------------------------------------
$application-logo-small: url("../images/logo_small.png") !default; $application-logo-small: url("../images/logo_small.png") !default;
$application-logo-small-2x: url("../images/logo_small@2x.png") !default; $application-logo-small-2x: url("../images/logo_small@2x.png") !default;

View File

@ -1,5 +1,5 @@
<% if $Backlink %> <% if $Backlink %>
<div class="cms_backlink"> <div class="cms-backlink">
<a class="btn btn-secondary font-icon-left-open-big toolbar__back-button btn--no-text" href="$Backlink"></a> <a class="btn btn-secondary font-icon-left-open-big toolbar__back-button btn--no-text" href="$Backlink"></a>
</div> </div>
<% end_if %> <% end_if %>

View File

@ -1,148 +1,160 @@
body { body {
background: #eee !important; background: #eee !important;
margin:0; margin: 0;
overflow-x: hidden; overflow-x: hidden;
padding:0; padding: 0;
font-family: Helvetica,Arial,sans-serif; font-family: Helvetica, Arial, sans-serif;
} }
.info { .info {
margin:0 0 6px 0; margin: 0 0 6px 0;
padding: 18px; padding: 18px;
background-color: #003050; background-color: #003050;
position: relative; position: relative;
line-height: 24px; line-height: 24px;
color: #fff; color: #fff;
background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%)); background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%));
// try to get the info above the template with z-index // try to get the info above the template with z-index
z-index: 9999; z-index: 9999;
h1 {
margin: 0 0 6px 0;
padding: 0 32px 0 0;
color: #fff;
font-size: 24px;
text-shadow: 0 1px darken(#003050, 5%);
line-height: 30px;
background: url(../images/logo_small.png) no-repeat right 3px; h1 {
} margin: 0 0 6px 0;
padding: 0 32px 0 0;
color: #fff;
font-size: 24px;
text-shadow: 0 1px darken(#003050, 5%);
line-height: 30px;
h3 { background: url("../images/logo_small.png") no-repeat right 3px;
color: #7da4be; }
font-size: 16px;
line-height: 18px;
font-weight: normal;
}
p {
margin: 0;
font-size: 14px;
color: #fff;
}
a { h3 {
color: #fff; color: #7da4be;
font-weight: bold; font-size: 16px;
text-decoration: none; line-height: 18px;
font-weight: normal;
}
&:hover, p {
&:active { margin: 0;
color: #fff; font-size: 14px;
text-decoration: underline; color: #fff;
} }
}
a {
color: #fff;
font-weight: bold;
text-decoration: none;
&:hover,
&:active {
color: #fff;
text-decoration: underline;
}
}
} }
.header { .header {
margin: 0; margin: 0;
border-bottom: 6px solid #ccdef3; border-bottom: 6px solid #ccdef3;
height: 23px; height: 23px;
background-color: #666673; background-color: #666673;
padding: 4px 0 2px 6px; padding: 4px 0 2px 6px;
} }
.trace, .trace,
.build, .build,
.options { .options {
padding:6px 12px; padding: 6px 12px;
background: #eee !important; background: #eee !important;
// try to get the info above the template with z-index // try to get the info above the template with z-index
position: relative; position: relative;
z-index: 9999; z-index: 9999;
li {
font-size:14px; li {
margin:6px 0; font-size: 14px;
} margin: 6px 0;
}
} }
a { a {
color: #666; color: #666;
&:hover { &:hover {
color: #222; color: #222;
} }
&:active { &:active {
color: #111; color: #111;
} }
} }
p { p {
margin-bottom: 6px; margin-bottom: 6px;
} }
pre { pre {
margin-bottom: 20px; margin-bottom: 20px;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #eee; border: 1px solid #eee;
border: 1px solid rgba(0,0,0,.08); border: 1px solid rgba(0, 0, 0, .08);
color: #333; color: #333;
padding: 11px; padding: 11px;
overflow: auto; overflow: auto;
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
span { span {
color:#999; color: #999;
} }
.error {
color:#f00; .error {
} color: #f00;
}
} }
h2 { h2 {
margin: 0 0 12px 0; margin: 0 0 12px 0;
} }
h3 { h3 {
margin: 0 0 6px 0; margin: 0 0 6px 0;
color: #333; color: #333;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
} }
ul { ul {
margin: 0 0 18px 0; margin: 0 0 18px 0;
padding: 0 0 0 18px; padding: 0 0 0 18px;
} }
fieldset { fieldset {
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
margin-bottom: 18px; margin-bottom: 18px;
padding: 17px; padding: 17px;
} }
.pass { .pass {
margin-top:18px; padding:2px 20px 2px 40px; color:#006600; background:#E2F9E3; border: 1px solid #8DD38D; margin-top: 18px;
border-radius:4px; padding: 2px 20px 2px 40px;
color: #006600;
background: #E2F9E3;
border: 1px solid #8DD38D;
border-radius: 4px;
} }
.fail { .fail {
margin-top:18px; padding:2px 20px 2px 40px; color:#C80700; background:#FFE9E9; margin-top: 18px;
border:1px solid #C80700; border-radius:4px; padding: 2px 20px 2px 40px;
color: #C80700;
background: #FFE9E9;
border: 1px solid #C80700;
border-radius: 4px;
} }

View File

@ -99,7 +99,9 @@ $ npm run css -- --watch
$ npm run lint $ npm run lint
``` ```
Run `eslint` over JavaScript files reports errors. Run linters (`eslint` and `sass-lint`) linters to enforce
our [JavaScript](/contributing/javascript_coding_conventions) and
[CSS](/contributing/css_coding_conventions) coding conventions.
### test ### test

View File

@ -27,12 +27,15 @@ File naming and style include ordering is inspired by
## Linting ## Linting
We use [SCSSLint](https://github.com/brigade/scss-lint) to ensure all new SCSS We use [sass-lint](hhttps://github.com/sasstools/sass-lint) to ensure all new SCSS
written complies with the rules below. Please consider installing it written complies with the rules below. It will be provided as an npm dev dependency.
in your development environment (you'll need Ruby). There's also Ther eare also quite a few [sass-lint IDE integrations]https://github.com/sasstools/sass-lint#ide-integration)
quite a few [SCSSLint IDE integrations](https://github.com/brigade/scss-lint#editor-integration)
which highlight any linting errors right in your code. which highlight any linting errors right in your code.
We strongly recommend installing one of these into the editor of your choice, to
avoid the frustration of failed pull requests. You can run the checks on console
via `npm run lint`.
## File and Folder Naming ## File and Folder Naming
- All frontend files (CSS, JavaScript, images) should be placed in - All frontend files (CSS, JavaScript, images) should be placed in

178
npm-shrinkwrap.json generated
View File

@ -8182,6 +8182,10 @@
"version": "15.3.1", "version": "15.3.1",
"resolved": "https://registry.npmjs.org/react-addons-css-transition-group/-/react-addons-css-transition-group-15.3.1.tgz" "resolved": "https://registry.npmjs.org/react-addons-css-transition-group/-/react-addons-css-transition-group-15.3.1.tgz"
}, },
"react-addons-test-utils": {
"version": "15.3.1",
"resolved": "https://registry.npmjs.org/react-addons-test-utils/-/react-addons-test-utils-15.3.1.tgz"
},
"react-bootstrap-ss": { "react-bootstrap-ss": {
"version": "0.30.5", "version": "0.30.5",
"resolved": "https://registry.npmjs.org/react-bootstrap-ss/-/react-bootstrap-ss-0.30.5.tgz", "resolved": "https://registry.npmjs.org/react-bootstrap-ss/-/react-bootstrap-ss-0.30.5.tgz",
@ -8542,6 +8546,180 @@
} }
} }
}, },
"sass-lint": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/sass-lint/-/sass-lint-1.9.1.tgz",
"dependencies": {
"commander": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
"dependencies": {
"graceful-readlink": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
}
}
},
"fs-extra": {
"version": "0.30.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
"dependencies": {
"graceful-fs": {
"version": "4.1.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.6.tgz"
},
"jsonfile": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz"
},
"klaw": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.0.tgz"
},
"rimraf": {
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz"
}
}
},
"glob": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
"dependencies": {
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
},
"inflight": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.5.tgz",
"dependencies": {
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
}
}
},
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
},
"minimatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
"dependencies": {
"brace-expansion": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz",
"dependencies": {
"balanced-match": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
}
}
}
}
},
"once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"dependencies": {
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
}
}
}
}
},
"globule": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/globule/-/globule-1.0.0.tgz",
"dependencies": {
"lodash": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.9.0.tgz"
},
"minimatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
"dependencies": {
"brace-expansion": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz",
"dependencies": {
"balanced-match": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
}
}
}
}
}
}
},
"gonzales-pe": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-3.4.4.tgz",
"dependencies": {
"minimist": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz"
}
}
},
"js-yaml": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.6.1.tgz",
"dependencies": {
"argparse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.7.tgz",
"dependencies": {
"sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
}
}
},
"esprima": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz"
}
}
},
"lodash.capitalize": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz"
},
"lodash.kebabcase": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz"
},
"path-is-absolute": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz"
},
"util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
"dependencies": {
"inherits": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
}
}
}
}
},
"sass-loader": { "sass-loader": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-4.0.2.tgz", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-4.0.2.tgz",

View File

@ -15,7 +15,7 @@
"lock": "npm-shrinkwrap --dev", "lock": "npm-shrinkwrap --dev",
"test": "NODE_PATH=\"./client/src:./admin/client/src\" jest", "test": "NODE_PATH=\"./client/src:./admin/client/src\" jest",
"coverage": "NODE_PATH=\"./client/src:./admin/client/src\" jest --coverage", "coverage": "NODE_PATH=\"./client/src:./admin/client/src\" jest --coverage",
"lint": "eslint client/src & eslint admin/client/src" "lint": "eslint client/src & eslint admin/client/src & sass-lint -v"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -86,6 +86,7 @@
"react-addons-test-utils": "^15.3.1", "react-addons-test-utils": "^15.3.1",
"redux-logger": "^2.6.1", "redux-logger": "^2.6.1",
"resolve-url-loader": "^1.6.0", "resolve-url-loader": "^1.6.0",
"sass-lint": "^1.9.1",
"sass-loader": "^4.0.0", "sass-loader": "^4.0.0",
"script-loader": "^0.7.0", "script-loader": "^0.7.0",
"semver": "^5.1.0", "semver": "^5.1.0",