From b61c5a56de334d8f60b9e2b0992431c311262fbc Mon Sep 17 00:00:00 2001 From: Sam Minnee Date: Sat, 17 Sep 2016 15:30:49 +1200 Subject: [PATCH] FIX: sass-lint styleguide fixes --- Dev/Install/client/src/styles/install.scss | 1074 ++++--- admin/client/src/components/Form/Form.scss | 5 - .../src/components/FormAction/FormAction.scss | 4 +- .../src/components/GridField/GridField.scss | 2 +- .../components/PopoverField/PopoverField.scss | 4 - .../src/components/Toolbar/Toolbar.scss | 2 +- admin/client/src/styles/_fonts.scss | 92 +- admin/client/src/styles/_typography.scss | 8 +- admin/client/src/styles/_variables.scss | 6 +- admin/client/src/styles/bundle.scss | 4 +- .../src/styles/legacy/_compasscompat.scss | 2 - .../src/styles/legacy/_elementMixins.scss | 2 - admin/client/src/styles/legacy/_style.scss | 2805 ++++++++--------- .../src/styles/legacy/themes/_default.scss | 58 +- .../Admin/Includes/BackLink_Button.ss | 2 +- client/src/styles/debug.scss | 202 +- 16 files changed, 2202 insertions(+), 2070 deletions(-) diff --git a/Dev/Install/client/src/styles/install.scss b/Dev/Install/client/src/styles/install.scss index 5ccfa20ef..2d7953f20 100644 --- a/Dev/Install/client/src/styles/install.scss +++ b/Dev/Install/client/src/styles/install.scss @@ -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; + } } diff --git a/admin/client/src/components/Form/Form.scss b/admin/client/src/components/Form/Form.scss index 024657866..d660f43d1 100644 --- a/admin/client/src/components/Form/Form.scss +++ b/admin/client/src/components/Form/Form.scss @@ -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}; diff --git a/admin/client/src/components/FormAction/FormAction.scss b/admin/client/src/components/FormAction/FormAction.scss index c5ff84851..60d721c5e 100644 --- a/admin/client/src/components/FormAction/FormAction.scss +++ b/admin/client/src/components/FormAction/FormAction.scss @@ -93,7 +93,9 @@ } @keyframes loading-icon { - 0%, 80%, 100% { + 0%, + 80%, + 100% { transform: scale(0); } diff --git a/admin/client/src/components/GridField/GridField.scss b/admin/client/src/components/GridField/GridField.scss index 7798fa357..ce08350c6 100644 --- a/admin/client/src/components/GridField/GridField.scss +++ b/admin/client/src/components/GridField/GridField.scss @@ -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 { diff --git a/admin/client/src/components/PopoverField/PopoverField.scss b/admin/client/src/components/PopoverField/PopoverField.scss index d2e467f98..4b7c19a3c 100644 --- a/admin/client/src/components/PopoverField/PopoverField.scss +++ b/admin/client/src/components/PopoverField/PopoverField.scss @@ -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; diff --git a/admin/client/src/components/Toolbar/Toolbar.scss b/admin/client/src/components/Toolbar/Toolbar.scss index d1b516ce3..195ea6ed3 100644 --- a/admin/client/src/components/Toolbar/Toolbar.scss +++ b/admin/client/src/components/Toolbar/Toolbar.scss @@ -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; diff --git a/admin/client/src/styles/_fonts.scss b/admin/client/src/styles/_fonts.scss index abb49b09f..62aee954e 100644 --- a/admin/client/src/styles/_fonts.scss +++ b/admin/client/src/styles/_fonts.scss @@ -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 diff --git a/admin/client/src/styles/_typography.scss b/admin/client/src/styles/_typography.scss index a2bfd4504..7aed96729 100644 --- a/admin/client/src/styles/_typography.scss +++ b/admin/client/src/styles/_typography.scss @@ -7,7 +7,7 @@ h1 { font-weight: 300; } - // Tables +// Tables // Used as a base for components: GridField. .table { @@ -54,11 +54,9 @@ h1 { background: $table-bg-hover; } - // scss-lint:disable SelectorDepth tr:first-child td { border-top: $table-border-width solid $border-color-light; } - // scss-lint:enable SelectorDepth } tfoot { @@ -74,7 +72,7 @@ h1 { .cms { code { - font-family: 'Bitstream Vera Sans Mono','Courier', monospace; + font-family: "Bitstream Vera Sans Mono", "Courier", monospace; } } @@ -109,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; } diff --git a/admin/client/src/styles/_variables.scss b/admin/client/src/styles/_variables.scss index ea67fba56..aa06a99ac 100644 --- a/admin/client/src/styles/_variables.scss +++ b/admin/client/src/styles/_variables.scss @@ -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; diff --git a/admin/client/src/styles/bundle.scss b/admin/client/src/styles/bundle.scss index 3dd070c9f..5118ebd14 100644 --- a/admin/client/src/styles/bundle.scss +++ b/admin/client/src/styles/bundle.scss @@ -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"; diff --git a/admin/client/src/styles/legacy/_compasscompat.scss b/admin/client/src/styles/legacy/_compasscompat.scss index 17405ce37..fc1bc1fc6 100644 --- a/admin/client/src/styles/legacy/_compasscompat.scss +++ b/admin/client/src/styles/legacy/_compasscompat.scss @@ -1,5 +1,3 @@ -// scss-lint:disable all - /* .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; } diff --git a/admin/client/src/styles/legacy/themes/_default.scss b/admin/client/src/styles/legacy/themes/_default.scss index cddf3d799..80ca1e153 100644 --- a/admin/client/src/styles/legacy/themes/_default.scss +++ b/admin/client/src/styles/legacy/themes/_default.scss @@ -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; diff --git a/admin/templates/SilverStripe/Admin/Includes/BackLink_Button.ss b/admin/templates/SilverStripe/Admin/Includes/BackLink_Button.ss index f1ebd0dd5..f8a18f86f 100644 --- a/admin/templates/SilverStripe/Admin/Includes/BackLink_Button.ss +++ b/admin/templates/SilverStripe/Admin/Includes/BackLink_Button.ss @@ -1,5 +1,5 @@ <% if $Backlink %> -
+
<% end_if %> diff --git a/client/src/styles/debug.scss b/client/src/styles/debug.scss index fb5d6923b..7db8fe526 100644 --- a/client/src/styles/debug.scss +++ b/client/src/styles/debug.scss @@ -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; }