tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-01 13:48:37 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6016 from sminnee/travis-lint

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.codeclimate.yml
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

63
.scss-lint.yml
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

3
.travis.yml
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\" = \"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 [ \"$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 [ \"$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/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\" = \"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 lint; fi"
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/

1074
Dev/Install/client/src/styles/install.scss
View File

@ -1,550 +1,622 @@
// scss-lint:disable all
//Color Variables
$message: #BDBD00; // blue
$good: #359318; // green
$message: #BDBD00; // blue
$good: #359318; // green
$warning: #E07127; // orange
$warningBg: #fcf8f2;
$warningBorder: #ffc28b;
$warning: #E07127; // orange
$warningBg: #fcf8f2;
$warningBorder: #ffc28b;
$error: #C61414 /* #E21607 */; // red
$errorBg: #FDF1F3;
$errorBorder: #F8C3CD;
$error: #C61414; // red - was #E21607
$errorBg: #FDF1F3;
$errorBorder: #F8C3CD;
$link: #0973A6;
$gradientTop: #B1C0C5;
$gradientBottom: #7F9198;
$link: #0973A6;
$gradientTop: #B1C0C5;
$gradientBottom: #7F9198;
//Mixin to create a gradient from top to bottom
@mixin topGradient($topColor, $bottomColor){
background: $topColor; /* Old browszzzzzers */
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-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* IE10+ */
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 */
}
$experimental-support-for-svg: true;
/* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */
@mixin topGradient($topColor, $bottomColor) {
background: $topColor; // Old browszzzzzers
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-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Opera11.10+
background: -ms-linear-gradient(top, $topColor 0%, $bottomColor 100%); // IE10+
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
}
// $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 roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft){
-moz-border-radius-topleft: $topLeft;
-moz-border-radius-topright: $topRight;
-moz-border-radius-bottomright: $bottomRight;
-moz-border-radius-bottomleft: $bottomLeft;
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
border-radius: $topLeft $topRight $bottomRight $bottomLeft;
@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft) {
-moz-border-radius-topleft: $topLeft;
-moz-border-radius-topright: $topRight;
-moz-border-radius-bottomright: $bottomRight;
-moz-border-radius-bottomleft: $bottomLeft;
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
border-radius: $topLeft $topRight $bottomRight $bottomLeft;
}
//Mixin to create a regular box shadow
@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color){
-webkit-box-shadow: $horizontal $vertical $blur $spread $color;
-moz-box-shadow: $horizontal $vertical $blur $spread $color;
box-shadow: $horizontal $vertical $blur $spread $color;
@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color) {
-webkit-box-shadow: $horizontal $vertical $blur $spread $color;
-moz-box-shadow: $horizontal $vertical $blur $spread $color;
box-shadow: $horizontal $vertical $blur $spread $color;
}
// 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;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
//Mixin to create an inset box shadow
@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color){
-webkit-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;
@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color) {
-webkit-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;
}
body {
font-family: Arial, san-serif;
font-size: 13px;
line-height: 18px;
margin-bottom: 18px;
color: #333;
width: 940px;
margin: 0 auto 18px;
/* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */
background-color: #f4f4f4;
font-family: Arial, san-serif;
font-size: 13px;
line-height: 18px;
margin-bottom: 18px;
color: #333;
width: 940px;
margin: 0 auto 18px;
// background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4;
background-color: #f4f4f4;
/* Typography */
p {
font-size: 13px;
line-height: 18px;
margin-bottom: 18px;
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;
}
// Typography
p {
font-size: 13px;
line-height: 18px;
margin-bottom: 18px;
color: #333;
}
/* Helpers */
.clear {
clear: both;
}
.left {
float: left;
}
a {
color: $link;
}
/* Messages */
.message {
padding: 2px 18px;
margin-bottom: 18px;
@include roundedCorners(3px, 3px, 3px, 3px);
p {
margin: 11px 0 13px;
}
&.warning {
background-color: $warningBg;
border: 1px $warningBorder solid;
}
&.error {
background-color: #FDF1F3 /* #fdf5f5 */;
border: 1px solid $errorBorder;
}
ul {
margin-left: 18px;
margin-top: -9px;
li {
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;
}
}
}
.helpText {
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;
}
}
small {
font-weight: normal;
font-size: 12px;
color: #666;
}
}
.typography {
// General tables
table {
margin: 9px 0 27px;
border-collapse: collapse;
width: 100%;
thead{
tr {
td, th {
font-weight: bold;
vertical-align: bottom;
padding: 12px;
}
}
}
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;
}
}
h1 {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.5px;
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;
}
// Forms
input, textarea, select {
width: 420px;
margin-bottom: 9px;
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);
}
h2 {
font-size: 34px;
line-height: 36px;
letter-spacing: -0.5px;
}
// 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
h3 {
font-size: 18px;
line-height: 27px;
}
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: 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);
}
}
}
}
h4 {
font-size: 14px;
line-height: 18px;
margin: 18px 0 9px;
}
/* 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 /* #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: none;
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: none;
td {
color: $good;
}
}
&.warning {
border: none;
td {
color: $warning;
}
}
&.error {
border: none;
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;
}
}
h5 {
font-size: 12px;
line-height: 18px;
margin: 18px 0 0;
}
//PHP5 required screen
#Header {
h1 {
margin-top: 45px;
margin-bottom: 27px;
}
h3 {
margin-top: -10px;
}
}
// Helpers
.clear {
clear: both;
}
.left {
float: left;
}
// Messages
.message {
padding: 2px 18px;
margin-bottom: 18px;
@include roundedCorners(3px, 3px, 3px, 3px);
p {
margin: 11px 0 13px;
}
&.warning {
background-color: $warningBg;
border: 1px $warningBorder solid;
}
&.error {
background-color: #FDF1F3; // was #fdf5f5
border: 1px solid $errorBorder;
}
ul {
margin-left: 18px;
margin-top: -9px;
}
}
.helpText {
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 {
// General tables
table {
margin: 9px 0 27px;
border-collapse: collapse;
width: 100%;
thead {
td,
th {
font-weight: bold;
vertical-align: bottom;
padding: 12px;
}
}
th,
td {
padding: 8px 12px;
text-align: left;
}
td {
vertical-align: top;
border-top: 0;
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
input,
textarea,
select {
width: 420px;
margin-bottom: 9px;
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
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
body {
#Header {
h1 {
margin-top: 45px;
margin-bottom: 27px;
}
h3 {
margin-top: -10px;
}
}
}
/* styles not tested */
// styles not tested
#adminAcc,
#devHelp,
#localeHelp {
padding-top: 20px;
padding-top: 20px;
}
#devHelp,
#devSection {
height: 18em;
height: 18em;
}
#use_environment_field {
margin-bottom: 25px;
background-color: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 0 white;
margin-bottom: 9px;
padding: 10px 10px 8px;
input {
float: left;
margin-right: 5px;
}
margin-bottom: 25px;
background-color: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 0 white;
margin-bottom: 9px;
padding: 10px 10px 8px;
input {
float: left;
margin-right: 5px;
}
}
.databaseError {
ul {
margin-bottom: 0;
}
ul, li {
margin-left: 0;
padding-left: 0;
}
ul {
margin-bottom: 0;
}
ul,
li {
margin-left: 0;
padding-left: 0;
}
}
#Layout p.goodInstall {
color: #359318;
color: #359318;
}
.goodInstall {
padding: 0.5em;
background-color: #e2fee1;
border: 1px #43cb3e solid;
color: #359318;
overflow: hidden;
line-height: 18px;
padding: 10px;
a {
float: right;
font-size: 18px;
padding: 0 2px 2px 0;
font-weight: bold;
}
padding: 0.5em;
background-color: #e2fee1;
border: 1px #43cb3e solid;
color: #359318;
overflow: hidden;
line-height: 18px;
padding: 10px;
a {
float: right;
font-size: 18px;
padding: 0 2px 2px 0;
font-weight: bold;
}
}

1
README.md
View File

@ -1,7 +1,6 @@
## 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 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)

5
admin/client/src/components/Form/Form.scss
View File

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

4
admin/client/src/components/FormAction/FormAction.scss
View File

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

2
admin/client/src/components/GridField/GridField.scss
View File

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

4
admin/client/src/components/PopoverField/PopoverField.scss
View File

@ -10,9 +10,7 @@
}
.arrow {
// scss-lint:disable all
@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
ul {
// scss-lint:disable ImportantRule
padding-left: 0 !important; // TODO remove important by removing nesting of lists
// scss-lint:enable ImportantRule
list-style-type: none;
margin-left: -#{$popover-padding} + 1px; // minus border
margin-right: -#{$popover-padding} + 1px;

2
admin/client/src/components/Toolbar/Toolbar.scss
View File

@ -72,7 +72,7 @@
}
.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;
margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625};
padding-left: $spacer-x / 4;

92
admin/client/src/styles/_fonts.scss
View File

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

6
admin/client/src/styles/_typography.scss
View File

@ -7,7 +7,7 @@ h1 {
font-weight: 300;
}
// Tables
// Tables
// Used as a base for components: GridField.
.table {
@ -72,7 +72,7 @@ h1 {
.cms {
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;
word-break: break-word;
// scss-lint:disable VendorPrefix
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
// scss-lint:enable VendorPrefix
hyphens: auto;
}

6
admin/client/src/styles/_variables.scss
View File

@ -327,18 +327,14 @@ $input-bg-disabled: $background-darker;
$input-color: $body-color-light;
$input-border-color: $border-color-dark;
$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);
// scss-lint:enable ColorVariable
$input-border-radius: $border-radius;
$input-border-radius-lg: $border-radius-lg;
$input-border-radius-sm: $border-radius-sm;
$input-border-focus: #66afe9;
// scss-lint:disable ColorVariable
$input-box-shadow-focus: rgba(102, 175, 233, .6);
// scss-lint:enable ColorVariable
// $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-3: rgba(0, 0, 0, .2);
$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)
$shadow-light: $shadow-level-3;

4
admin/client/src/styles/bundle.scss
View File

@ -2,11 +2,11 @@
@import "variables";
// Compatibilty with compass
@import "legacy/_compasscompat";
@import "legacy/compasscompat";
// Thirdparty
@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/jstree/themes/apple/style.css";
@import "../../../thirdparty/jquery-notice/jquery.notice.css";

2
admin/client/src/styles/legacy/_compasscompat.scss
View File

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

2
admin/client/src/styles/legacy/_elementMixins.scss
View File

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

2805
admin/client/src/styles/legacy/_style.scss
View File

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

58
admin/client/src/styles/legacy/themes/_default.scss
View File

@ -1,14 +1,13 @@
/**
* This file contains the default theme definitions for the admin interface.
* Please put mostly SCSS variable definitions in here,
* and leave the actual styling to _style.scss and auxilliary files.
*/
// This file contains the default theme definitions for the admin interface.
// Please put mostly SCSS variable definitions in here,
// and leave the actual styling to _style.scss and auxilliary files.
@import "../../variables.scss";
@import "../../variables";
//--------------------------------------------------
// Colours
//--------------------------------------------------
/** -----------------------------------------------
* Colours
* ------------------------------------------------ */
$color-base: #b0bec7 !default;
$color-widget-bg: lighten($color-base, 20%) !default;
@ -21,14 +20,14 @@ $color-theme-active: $color-theme-base;
// CMS 4 menu
$base-menu: #d8e4eb;
$base-menu-bg: lighten($base-menu,5%);
$base-menu-bg: lighten($base-menu, 5%);
$base-menu-icon: darken($base-menu, 26%);
//offical silverstripe brand color
// offical silverstripe brand color
$color-brand-bg: #005a93 !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-dark-bg: #142136 !default;
$color-dark-separator: #19435c !default;
@ -39,7 +38,7 @@ $color-light-separator: #D2D5D8 !default; // Horiontal dividers
$color-tab: #d9d9d9 !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-dark: rgba(107, 120, 123, 0.5) !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-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-light: white !default;
$color-text-light-link: white !default;
@ -83,30 +83,30 @@ $color-notice: #93CDE8 !default; // blue
$color-warning: #E9D104 !default; // yellow
$color-error: #e68288 !default; // red
$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-selected-background: #fffcdc !default;
/** -----------------------------------------------
* Textures
* ----------------------------------------------- */
//--------------------------------------------------
// Textures
//--------------------------------------------------
$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)
*
* We have a vertical rhythm that the grid is based off
* both x (=horizontal) and y (=vertical). All internal padding and
* margins are scaled to this and accounting for paragraphs
* ------------------------------------------------ */
//--------------------------------------------------
// Grid Units (px)
//
// We have a vertical rhythm that the grid is based off
// both x (=horizontal) and y (=vertical). All internal padding and
// margins are scaled to this and accounting for paragraphs
//--------------------------------------------------
$grid-y: 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-2x: url("../images/logo_small@2x.png") !default;

2
admin/templates/SilverStripe/Admin/Includes/BackLink_Button.ss
View File

@ -1,5 +1,5 @@
<% 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>
</div>
<% end_if %>

202
client/src/styles/debug.scss
View File

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

4
docs/en/05_Contributing/02_Build_Tooling.md
View File

@ -99,7 +99,9 @@ $ npm run css -- --watch
$ 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

11
docs/en/05_Contributing/13_CSS_Coding_Conventions.md
View File

@ -27,12 +27,15 @@ File naming and style include ordering is inspired by
## Linting
We use [SCSSLint](https://github.com/brigade/scss-lint) to ensure all new SCSS
written complies with the rules below. Please consider installing it
in your development environment (you'll need Ruby). There's also
quite a few [SCSSLint IDE integrations](https://github.com/brigade/scss-lint#editor-integration)
We use [sass-lint](hhttps://github.com/sasstools/sass-lint) to ensure all new SCSS
written complies with the rules below. It will be provided as an npm dev dependency.
Ther eare also quite a few [sass-lint IDE integrations]https://github.com/sasstools/sass-lint#ide-integration)
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
- 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",
"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": {
"version": "0.30.5",
"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": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-4.0.2.tgz",

3
package.json
View File

@ -15,7 +15,7 @@
"lock": "npm-shrinkwrap --dev",
"test": "NODE_PATH=\"./client/src:./admin/client/src\" jest",
"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": {
"type": "git",
@ -86,6 +86,7 @@
"react-addons-test-utils": "^15.3.1",
"redux-logger": "^2.6.1",
"resolve-url-loader": "^1.6.0",
"sass-lint": "^1.9.1",
"sass-loader": "^4.0.0",
"script-loader": "^0.7.0",
"semver": "^5.1.0",