FIX: sass-lint styleguide fixes
This commit is contained in:
Sam Minnee
parent
c2ebff5c19
commit
b61c5a56de
|
|
@ -1,550 +1,622 @@
|
||||||
// scss-lint:disable all
|
|
||||||
|
|
||||||
//Color Variables
|
//Color Variables
|
||||||
$message: #BDBD00; // blue
|
$message: #BDBD00; // blue
|
||||||
$good: #359318; // green
|
$good: #359318; // green
|
||||||
|
|
||||||
$warning: #E07127; // orange
|
$warning: #E07127; // orange
|
||||||
$warningBg: #fcf8f2;
|
$warningBg: #fcf8f2;
|
||||||
$warningBorder: #ffc28b;
|
$warningBorder: #ffc28b;
|
||||||
|
|
||||||
$error: #C61414 /* #E21607 */; // red
|
$error: #C61414; // red - was #E21607
|
||||||
$errorBg: #FDF1F3;
|
$errorBg: #FDF1F3;
|
||||||
$errorBorder: #F8C3CD;
|
$errorBorder: #F8C3CD;
|
||||||
|
|
||||||
$link: #0973A6;
|
$link: #0973A6;
|
||||||
$gradientTop: #B1C0C5;
|
$gradientTop: #B1C0C5;
|
||||||
$gradientBottom: #7F9198;
|
$gradientBottom: #7F9198;
|
||||||
|
|
||||||
//Mixin to create a gradient from top to bottom
|
//Mixin to create a gradient from top to bottom
|
||||||
@mixin topGradient($topColor, $bottomColor){
|
@mixin topGradient($topColor, $bottomColor) {
|
||||||
background: $topColor; /* Old browszzzzzers */
|
background: $topColor; // Old browszzzzzers
|
||||||
background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); /* FF3.6+ */
|
background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); // FF3.6+
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$topColor), color-stop(100%,$bottomColor)); /* Chrome,Safari4+ */
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topColor), color-stop(100%, $bottomColor)); // Chrome,Safari4+
|
||||||
background: -webkit-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Chrome10+,Safari5.1+ */
|
background: -webkit-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Chrome10+,Safari5.1+
|
||||||
background: -o-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Opera11.10+ */
|
background: -o-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Opera11.10+
|
||||||
background: -ms-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* IE10+ */
|
background: -ms-linear-gradient(top, $topColor 0%, $bottomColor 100%); // IE10+
|
||||||
background: linear-gradient(to bottom, $topColor 0%,$bottomColor 100%); /* W3C */
|
background: linear-gradient(to bottom, $topColor 0%, $bottomColor 100%); // W3C
|
||||||
.lt-ie9 &{
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); /* IE6-9 */
|
.lt-ie9 & {
|
||||||
}
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); // IE6-9
|
||||||
$experimental-support-for-svg: true;
|
}
|
||||||
/* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */
|
// $experimental-support-for-svg: true;
|
||||||
|
// @include background-image(linear-gradient(top, $topColor,$bottomColor));
|
||||||
}
|
}
|
||||||
|
|
||||||
//Mixin to create rounded corners. Takes a value for each of the 4 corners
|
//Mixin to create rounded corners. Takes a value for each of the 4 corners
|
||||||
@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft){
|
@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft) {
|
||||||
-moz-border-radius-topleft: $topLeft;
|
-moz-border-radius-topleft: $topLeft;
|
||||||
-moz-border-radius-topright: $topRight;
|
-moz-border-radius-topright: $topRight;
|
||||||
-moz-border-radius-bottomright: $bottomRight;
|
-moz-border-radius-bottomright: $bottomRight;
|
||||||
-moz-border-radius-bottomleft: $bottomLeft;
|
-moz-border-radius-bottomleft: $bottomLeft;
|
||||||
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
|
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
|
||||||
border-radius: $topLeft $topRight $bottomRight $bottomLeft;
|
border-radius: $topLeft $topRight $bottomRight $bottomLeft;
|
||||||
}
|
}
|
||||||
|
|
||||||
//Mixin to create a regular box shadow
|
//Mixin to create a regular box shadow
|
||||||
@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color){
|
@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color) {
|
||||||
-webkit-box-shadow: $horizontal $vertical $blur $spread $color;
|
-webkit-box-shadow: $horizontal $vertical $blur $spread $color;
|
||||||
-moz-box-shadow: $horizontal $vertical $blur $spread $color;
|
-moz-box-shadow: $horizontal $vertical $blur $spread $color;
|
||||||
box-shadow: $horizontal $vertical $blur $spread $color;
|
box-shadow: $horizontal $vertical $blur $spread $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Drop shadows
|
// Drop shadows
|
||||||
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.15)) {
|
@mixin box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, .15)) {
|
||||||
-webkit-box-shadow: $shadow;
|
-webkit-box-shadow: $shadow;
|
||||||
-moz-box-shadow: $shadow;
|
-moz-box-shadow: $shadow;
|
||||||
box-shadow: $shadow;
|
box-shadow: $shadow;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//Mixin to create an inset box shadow
|
//Mixin to create an inset box shadow
|
||||||
@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color){
|
@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color) {
|
||||||
-webkit-box-shadow: inset $horizontal $vertical $blur $spread $color;
|
-webkit-box-shadow: inset $horizontal $vertical $blur $spread $color;
|
||||||
-moz-box-shadow: inset $horizontal $vertical $blur $spread $color;
|
-moz-box-shadow: inset $horizontal $vertical $blur $spread $color;
|
||||||
box-shadow: inset $horizontal $vertical $blur $spread $color;
|
box-shadow: inset $horizontal $vertical $blur $spread $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, san-serif;
|
font-family: Arial, san-serif;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
color: #333;
|
color: #333;
|
||||||
width: 940px;
|
width: 940px;
|
||||||
margin: 0 auto 18px;
|
margin: 0 auto 18px;
|
||||||
/* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */
|
// background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
|
|
||||||
/* Typography */
|
// Typography
|
||||||
p {
|
p {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
a {
|
|
||||||
color: $link;
|
|
||||||
}
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
color: #222;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
margin: 27px 0 9px;
|
|
||||||
text-rendering: optimizelegibility;
|
|
||||||
clear: both;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
small {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
background: transparent url(../images/logo.gif) no-repeat left top;
|
|
||||||
text-indent: -9999px;
|
|
||||||
height: 164px;
|
|
||||||
width: 161px;
|
|
||||||
float: left;
|
|
||||||
padding-right: 40px;
|
|
||||||
border-right: 1px solid $gradientTop;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 34px;
|
|
||||||
line-height: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 27px;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 18px;
|
|
||||||
margin: 18px 0 9px;
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
margin: 18px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Helpers */
|
a {
|
||||||
.clear {
|
color: $link;
|
||||||
clear: both;
|
}
|
||||||
}
|
|
||||||
.left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Messages */
|
h1,
|
||||||
.message {
|
h2,
|
||||||
padding: 2px 18px;
|
h3,
|
||||||
margin-bottom: 18px;
|
h4,
|
||||||
@include roundedCorners(3px, 3px, 3px, 3px);
|
h5,
|
||||||
p {
|
h6 {
|
||||||
margin: 11px 0 13px;
|
color: #222;
|
||||||
}
|
font-family: inherit;
|
||||||
&.warning {
|
font-weight: bold;
|
||||||
background-color: $warningBg;
|
margin: 0;
|
||||||
border: 1px $warningBorder solid;
|
margin: 27px 0 9px;
|
||||||
}
|
text-rendering: optimizelegibility;
|
||||||
&.error {
|
clear: both;
|
||||||
background-color: #FDF1F3 /* #fdf5f5 */;
|
text-shadow: 0 1px 0 #fff;
|
||||||
border: 1px solid $errorBorder;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin-left: 18px;
|
|
||||||
margin-top: -9px;
|
|
||||||
li {
|
|
||||||
|
|
||||||
}
|
small {
|
||||||
}
|
font-weight: normal;
|
||||||
}
|
font-size: 12px;
|
||||||
.helpText {
|
color: #666;
|
||||||
float: right;
|
}
|
||||||
width: 425px;
|
}
|
||||||
padding-left: 20px;
|
|
||||||
color: #666;
|
|
||||||
margin-top: 0;
|
|
||||||
background: transparent url(../images/question.png) no-repeat left 1px;
|
|
||||||
&.requirementsHelpText {
|
|
||||||
margin-top: 17px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.typography {
|
h1 {
|
||||||
// General tables
|
font-size: 36px;
|
||||||
table {
|
line-height: 36px;
|
||||||
margin: 9px 0 27px;
|
letter-spacing: -0.5px;
|
||||||
border-collapse: collapse;
|
background: transparent url("../images/logo.gif") no-repeat left top;
|
||||||
width: 100%;
|
text-indent: -9999px;
|
||||||
thead{
|
height: 164px;
|
||||||
tr {
|
width: 161px;
|
||||||
td, th {
|
float: left;
|
||||||
font-weight: bold;
|
padding-right: 40px;
|
||||||
vertical-align: bottom;
|
border-right: 1px solid $gradientTop;
|
||||||
padding: 12px;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
th, td {
|
|
||||||
padding: 8px 12px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
vertical-align: top;
|
|
||||||
border-top: none;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
th + th,
|
|
||||||
td + td,
|
|
||||||
th + td {
|
|
||||||
/* border-left: 1px solid #ddd; */
|
|
||||||
}
|
|
||||||
tbody{
|
|
||||||
tr:nth-child(odd) td,
|
|
||||||
tr:nth-child(odd) th{
|
|
||||||
background-color: #fcfcfc;
|
|
||||||
}
|
|
||||||
tr:hover td,
|
|
||||||
tr:hover th{
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tfoot {
|
|
||||||
font-style: italic;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Forms
|
h2 {
|
||||||
input, textarea, select {
|
font-size: 34px;
|
||||||
width: 420px;
|
line-height: 36px;
|
||||||
margin-bottom: 9px;
|
letter-spacing: -0.5px;
|
||||||
color: #707070;
|
}
|
||||||
border: 1px solid #ddd;
|
|
||||||
display: inline-block;
|
|
||||||
height: 18px;
|
|
||||||
padding: 4px 6px;
|
|
||||||
line-height: 18px;
|
|
||||||
font-size: 13px;
|
|
||||||
@include roundedCorners(3px,3px,3px,3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Focus states
|
h3 {
|
||||||
input,
|
font-size: 18px;
|
||||||
textarea {
|
line-height: 27px;
|
||||||
transition: border linear .2s, box-shadow linear .2s;
|
}
|
||||||
@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
|
||||||
}
|
|
||||||
input:focus,
|
|
||||||
textarea:focus {
|
|
||||||
outline: 0;
|
|
||||||
border-color: rgba(82,168,236,.8);
|
|
||||||
$shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 4px rgba(82,168,236,.6);
|
|
||||||
@include box-shadow($shadow);
|
|
||||||
}
|
|
||||||
input[type=file]:focus,
|
|
||||||
input[type=checkbox]:focus,
|
|
||||||
select:focus {
|
|
||||||
@include box-shadow(none); // override for file inputs
|
|
||||||
outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
|
|
||||||
}
|
|
||||||
// End Focus states
|
|
||||||
|
|
||||||
select {
|
h4 {
|
||||||
height: 26px;
|
font-size: 14px;
|
||||||
}
|
line-height: 18px;
|
||||||
option {
|
margin: 18px 0 9px;
|
||||||
line-height: 27px;
|
}
|
||||||
font-size: 12px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
color:#666;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
width: auto;
|
|
||||||
float: none;
|
|
||||||
padding-top: 0;
|
|
||||||
margin: 0 0 5px 0;
|
|
||||||
text-align: left;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.fields {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
input.action {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 9px 0 27px;
|
|
||||||
padding: 6px 8px;
|
|
||||||
width: 200px;
|
|
||||||
width: auto;
|
|
||||||
color: #222;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
text-shadow: 0 1px 0 #eee;
|
|
||||||
font-size: 13px;
|
|
||||||
float: none;
|
|
||||||
height: auto;
|
|
||||||
@include topGradient (#fbfbfb, #bbb);
|
|
||||||
@include roundedCorners(3px,3px,3px,3px);
|
|
||||||
@include boxShadow(0, 1px, 0, 0, #fff);
|
|
||||||
background-color: #ddd;
|
|
||||||
&:hover {
|
|
||||||
@include boxShadow(0, 1px, 2px, 0, #ccc);
|
|
||||||
@include topGradient (#fbfbfb, #ccc);
|
|
||||||
}
|
|
||||||
&:focus, &:active {
|
|
||||||
@include boxShadow(0, 1px, 0, 0, #fff);
|
|
||||||
@include topGradient (#fbfbfb, #bbb);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input.action:hover,
|
|
||||||
input.action:focus {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
input[type="checkbox"], input[type="radio"] {
|
|
||||||
border: medium none;
|
|
||||||
height: auto;
|
|
||||||
line-height: normal;
|
|
||||||
padding: 0;
|
|
||||||
width: auto;
|
|
||||||
margin-right: 6px;
|
|
||||||
float: left;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
#install_button {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #fff;
|
|
||||||
border-color: #78A127 #78A127 #59781D;
|
|
||||||
text-shadow: 0 1px 1px #4D7326;
|
|
||||||
padding: 8px 14px;
|
|
||||||
background-color: green;
|
|
||||||
@include topGradient(#80BF40, #59862D);
|
|
||||||
@include boxShadow(0, 1px, 0, 0, #fff);
|
|
||||||
&:hover {
|
|
||||||
@include boxShadow(0, 1px, 3px, 0, #bbb);
|
|
||||||
}
|
|
||||||
&:focus, &:active {
|
|
||||||
@include boxShadow(0, 1px, 0, 0, #fff);
|
|
||||||
@include topGradient(#80BF40, #59862D);
|
|
||||||
}
|
|
||||||
&[disabled=disabled] {
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
border-color: #bbb #bbb #aaa;
|
|
||||||
color: #999;
|
|
||||||
text-shadow: 0 1px 0 #eee;
|
|
||||||
@include topGradient (#fbfbfb, #bbb);
|
|
||||||
&:hover {
|
|
||||||
@include boxShadow(0, 1px, 0, 0, #fff);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom styles */
|
h5 {
|
||||||
#Container {
|
font-size: 12px;
|
||||||
margin-bottom: 40px;
|
line-height: 18px;
|
||||||
h3.sectionHeading {
|
margin: 18px 0 0;
|
||||||
padding-top: 27px;
|
}
|
||||||
border-top: 1px solid $gradientTop;
|
|
||||||
clear: both;
|
//PHP5 required screen
|
||||||
}
|
#Header {
|
||||||
#Header {
|
h1 {
|
||||||
margin-bottom: 30px;
|
margin-top: 45px;
|
||||||
height: 200px;
|
margin-bottom: 27px;
|
||||||
div.left {
|
}
|
||||||
width: 698px;
|
|
||||||
margin-top: 47px;
|
h3 {
|
||||||
}
|
margin-top: -10px;
|
||||||
}
|
}
|
||||||
#Navigation {
|
}
|
||||||
display: none;
|
|
||||||
}
|
// Helpers
|
||||||
}
|
.clear {
|
||||||
h5.requirement {
|
clear: both;
|
||||||
padding: 12px 18px;
|
}
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid darken($gradientBottom,2%);
|
.left {
|
||||||
border-top: 1px solid lighten($gradientBottom,5%);
|
float: left;
|
||||||
margin: 0;
|
}
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
// Messages
|
||||||
text-shadow: 0 -1px 0 darken($gradientBottom, 5%);
|
.message {
|
||||||
@include roundedCorners(3px, 3px, 3px, 3px);
|
padding: 2px 18px;
|
||||||
@include boxShadow(0, 1px, 0, 0, #fff);
|
margin-bottom: 18px;
|
||||||
background-color: #eee;
|
@include roundedCorners(3px, 3px, 3px, 3px);
|
||||||
@include topGradient($gradientTop,$gradientBottom);
|
|
||||||
span {
|
p {
|
||||||
font-weight: normal;
|
margin: 11px 0 13px;
|
||||||
font-size: 12px;
|
}
|
||||||
padding: 3px 6px;
|
|
||||||
margin-left: 5px;
|
&.warning {
|
||||||
text-shadow: none;
|
background-color: $warningBg;
|
||||||
background-color: lighten($gradientTop, 25%);
|
border: 1px $warningBorder solid;
|
||||||
@include roundedCorners(2px, 2px, 2px, 2px);
|
}
|
||||||
@include boxShadow(0,0,2px,0,$gradientBottom);
|
|
||||||
}
|
&.error {
|
||||||
&.good span{
|
background-color: #FDF1F3; // was #fdf5f5
|
||||||
color: $good /* #359318 */;
|
border: 1px solid $errorBorder;
|
||||||
}
|
}
|
||||||
&.warning span{
|
|
||||||
color: $warning;
|
ul {
|
||||||
}
|
margin-left: 18px;
|
||||||
&.error span{
|
margin-top: -9px;
|
||||||
color: $error;
|
}
|
||||||
}
|
}
|
||||||
a {
|
|
||||||
font-size: 11px;
|
.helpText {
|
||||||
right: 9px;
|
float: right;
|
||||||
position: absolute;
|
width: 425px;
|
||||||
line-height: 19px;
|
padding-left: 20px;
|
||||||
margin: 0 0 0 30px;
|
color: #666;
|
||||||
color: #fff;
|
margin-top: 0;
|
||||||
text-decoration: none;
|
background: transparent url("../images/question.png") no-repeat left 1px;
|
||||||
font-weight: normal;
|
|
||||||
padding-right: 21px;
|
&.requirementsHelpText {
|
||||||
background: transparent url(../images/arrows.png) no-repeat right top;
|
margin-top: 17px;
|
||||||
&:hover {
|
}
|
||||||
background: transparent url(../images/arrows.png) no-repeat right -40px;
|
}
|
||||||
}
|
|
||||||
}
|
.typography {
|
||||||
}
|
// General tables
|
||||||
table.testResults {
|
table {
|
||||||
border-top: none;
|
margin: 9px 0 27px;
|
||||||
margin-top: -1px;
|
border-collapse: collapse;
|
||||||
margin-bottom: 9px;
|
width: 100%;
|
||||||
@include boxShadow(0, 1px, 0, 0, #fff);
|
|
||||||
@include roundedCorners(3px,3px,3px,3px);
|
thead {
|
||||||
overflow: hidden;
|
td,
|
||||||
tr {
|
th {
|
||||||
&.good {
|
font-weight: bold;
|
||||||
display: none;
|
vertical-align: bottom;
|
||||||
border: none;
|
padding: 12px;
|
||||||
td {
|
}
|
||||||
color: $good;
|
}
|
||||||
}
|
|
||||||
}
|
th,
|
||||||
&.warning {
|
td {
|
||||||
border: none;
|
padding: 8px 12px;
|
||||||
td {
|
text-align: left;
|
||||||
color: $warning;
|
}
|
||||||
}
|
|
||||||
}
|
td {
|
||||||
&.error {
|
vertical-align: top;
|
||||||
border: none;
|
border-top: 0;
|
||||||
color: $error;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
}
|
// th + th,
|
||||||
td {
|
// td + td,
|
||||||
border: 1px solid #ddd;
|
// th + td {
|
||||||
width: 50%;
|
// border-left: 1px solid #ddd;
|
||||||
}
|
// }
|
||||||
}
|
|
||||||
#database_selection, #Themes {
|
tbody {
|
||||||
list-style: none;
|
tr:nth-child(odd) td,
|
||||||
margin: 0;
|
tr:nth-child(odd) th {
|
||||||
margin-bottom: 18px;
|
background-color: #fcfcfc;
|
||||||
padding-left: 0;
|
}
|
||||||
li {
|
|
||||||
clear: left;
|
tr:hover td,
|
||||||
padding: 3px 0;
|
tr:hover th {
|
||||||
.dbfields {
|
background-color: #f6f6f6;
|
||||||
padding: 12px;
|
}
|
||||||
border: 1px solid #ddd;
|
}
|
||||||
background-color: #fafafa;
|
|
||||||
margin-bottom: 9px;
|
tfoot {
|
||||||
@include roundedCorners(3px,3px,3px,3px);
|
font-style: italic;
|
||||||
@include boxShadowInset(0,0,3px,0,#ddd);
|
color: #888;
|
||||||
@include boxShadow(0,1px,0,0,#fff);
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
// Forms
|
||||||
ul#Themes {
|
input,
|
||||||
float: left;
|
textarea,
|
||||||
width: 445px;
|
select {
|
||||||
}
|
width: 420px;
|
||||||
.databaseError {
|
margin-bottom: 9px;
|
||||||
width: 422px;
|
color: #707070;
|
||||||
}
|
border: 1px solid #ddd;
|
||||||
#Footer {
|
display: inline-block;
|
||||||
margin-top: 67px;
|
height: 18px;
|
||||||
margin-bottom: 18px;
|
padding: 4px 6px;
|
||||||
p {
|
line-height: 18px;
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
color: #999;
|
@include roundedCorners(3px, 3px, 3px, 3px);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
// Focus states
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
transition: border linear .2s, box-shadow linear .2s;
|
||||||
|
@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, .1));
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus {
|
||||||
|
outline: 0;
|
||||||
|
border-color: rgba(82, 168, 236, .8);
|
||||||
|
$shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 4px rgba(82, 168, 236, .6);
|
||||||
|
@include box-shadow($shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=file]:focus,
|
||||||
|
input[type=checkbox]:focus,
|
||||||
|
select:focus {
|
||||||
|
@include box-shadow(none); // override for file inputs
|
||||||
|
outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
|
||||||
|
}
|
||||||
|
// End Focus states
|
||||||
|
|
||||||
|
select {
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
option {
|
||||||
|
line-height: 27px;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
padding-top: 0;
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
text-align: left;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fields {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.action {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 9px 0 27px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
width: 200px;
|
||||||
|
width: auto;
|
||||||
|
color: #222;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
text-shadow: 0 1px 0 #eee;
|
||||||
|
font-size: 13px;
|
||||||
|
float: none;
|
||||||
|
height: auto;
|
||||||
|
@include topGradient (#fbfbfb, #bbb);
|
||||||
|
@include roundedCorners(3px, 3px, 3px, 3px);
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
background-color: #ddd;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include boxShadow(0, 1px, 2px, 0, #ccc);
|
||||||
|
@include topGradient (#fbfbfb, #ccc);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
@include topGradient (#fbfbfb, #bbb);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input.action:hover,
|
||||||
|
input.action:focus {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
border: medium none;
|
||||||
|
height: auto;
|
||||||
|
line-height: normal;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 6px;
|
||||||
|
float: left;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#install_button {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #78A127 #78A127 #59781D;
|
||||||
|
text-shadow: 0 1px 1px #4D7326;
|
||||||
|
padding: 8px 14px;
|
||||||
|
background-color: #008000;
|
||||||
|
@include topGradient(#80BF40, #59862D);
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include boxShadow(0, 1px, 3px, 0, #bbb);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
@include topGradient(#80BF40, #59862D);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[disabled=disabled] {
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-color: #bbb #bbb #aaa;
|
||||||
|
color: #999;
|
||||||
|
text-shadow: 0 1px 0 #eee;
|
||||||
|
@include topGradient (#fbfbfb, #bbb);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom styles
|
||||||
|
#Container {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
h3.sectionHeading {
|
||||||
|
padding-top: 27px;
|
||||||
|
border-top: 1px solid $gradientTop;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Header {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
div.left {
|
||||||
|
width: 698px;
|
||||||
|
margin-top: 47px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#Navigation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h5.requirement {
|
||||||
|
padding: 12px 18px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid darken($gradientBottom, 2%);
|
||||||
|
border-top: 1px solid lighten($gradientBottom, 5%);
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
text-shadow: 0 -1px 0 darken($gradientBottom, 5%);
|
||||||
|
@include roundedCorners(3px, 3px, 3px, 3px);
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
background-color: #eee;
|
||||||
|
@include topGradient($gradientTop, $gradientBottom);
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
margin-left: 5px;
|
||||||
|
text-shadow: none;
|
||||||
|
background-color: lighten($gradientTop, 25%);
|
||||||
|
@include roundedCorners(2px, 2px, 2px, 2px);
|
||||||
|
@include boxShadow(0, 0, 2px, 0, $gradientBottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.good span {
|
||||||
|
color: $good; // was #359318
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning span {
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error span {
|
||||||
|
color: $error;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 11px;
|
||||||
|
right: 9px;
|
||||||
|
position: absolute;
|
||||||
|
line-height: 19px;
|
||||||
|
margin: 0 0 0 30px;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: normal;
|
||||||
|
padding-right: 21px;
|
||||||
|
background: transparent url("../images/arrows.png") no-repeat right top;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: transparent url("../images/arrows.png") no-repeat right -40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.testResults {
|
||||||
|
border-top: 0;
|
||||||
|
margin-top: -1px;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
@include roundedCorners(3px, 3px, 3px, 3px);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
&.good {
|
||||||
|
display: none;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
td {
|
||||||
|
color: $good;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
td {
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
border: 0;
|
||||||
|
color: $error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#database_selection,
|
||||||
|
#Themes {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
clear: left;
|
||||||
|
padding: 3px 0;
|
||||||
|
|
||||||
|
.dbfields {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
background-color: #fafafa;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
@include roundedCorners(3px, 3px, 3px, 3px);
|
||||||
|
@include boxShadowInset(0, 0, 3px, 0, #ddd);
|
||||||
|
@include boxShadow(0, 1px, 0, 0, #fff);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#Themes {
|
||||||
|
float: left;
|
||||||
|
width: 445px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.databaseError {
|
||||||
|
width: 422px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Footer {
|
||||||
|
margin-top: 67px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//PHP5 required screen
|
// styles not tested
|
||||||
body {
|
|
||||||
#Header {
|
|
||||||
h1 {
|
|
||||||
margin-top: 45px;
|
|
||||||
margin-bottom: 27px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin-top: -10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* styles not tested */
|
|
||||||
|
|
||||||
#adminAcc,
|
#adminAcc,
|
||||||
#devHelp,
|
#devHelp,
|
||||||
#localeHelp {
|
#localeHelp {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#devHelp,
|
#devHelp,
|
||||||
#devSection {
|
#devSection {
|
||||||
height: 18em;
|
height: 18em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#use_environment_field {
|
#use_environment_field {
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
background-color: #FAFAFA;
|
background-color: #FAFAFA;
|
||||||
border: 1px solid #DDDDDD;
|
border: 1px solid #DDDDDD;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
box-shadow: 0 1px 0 0 white;
|
box-shadow: 0 1px 0 0 white;
|
||||||
margin-bottom: 9px;
|
margin-bottom: 9px;
|
||||||
padding: 10px 10px 8px;
|
padding: 10px 10px 8px;
|
||||||
input {
|
|
||||||
float: left;
|
input {
|
||||||
margin-right: 5px;
|
float: left;
|
||||||
}
|
margin-right: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.databaseError {
|
.databaseError {
|
||||||
ul {
|
ul {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
ul, li {
|
|
||||||
margin-left: 0;
|
ul,
|
||||||
padding-left: 0;
|
li {
|
||||||
}
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#Layout p.goodInstall {
|
#Layout p.goodInstall {
|
||||||
color: #359318;
|
color: #359318;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goodInstall {
|
.goodInstall {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
background-color: #e2fee1;
|
background-color: #e2fee1;
|
||||||
border: 1px #43cb3e solid;
|
border: 1px #43cb3e solid;
|
||||||
color: #359318;
|
color: #359318;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
a {
|
|
||||||
float: right;
|
a {
|
||||||
font-size: 18px;
|
float: right;
|
||||||
padding: 0 2px 2px 0;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
padding: 0 2px 2px 0;
|
||||||
}
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -101,14 +101,12 @@
|
||||||
|
|
||||||
|
|
||||||
// Readonlys should be converted to an input
|
// Readonlys should be converted to an input
|
||||||
// scss-lint:disable all
|
|
||||||
.form__field-holder p.readonly,
|
.form__field-holder p.readonly,
|
||||||
.form__field-holder input.readonly,
|
.form__field-holder input.readonly,
|
||||||
.form__field-holder span.readonly,
|
.form__field-holder span.readonly,
|
||||||
.readonly .form__field-holder > div {
|
.readonly .form__field-holder > div {
|
||||||
@extend .form-control-static;
|
@extend .form-control-static;
|
||||||
}
|
}
|
||||||
// scss-lint:enable all
|
|
||||||
|
|
||||||
|
|
||||||
// Radio / Checkbox
|
// Radio / Checkbox
|
||||||
|
|
@ -149,7 +147,6 @@ input.radio {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@mixin form-responsive($breakpoint-inline, $breakpoint-inline-limit-width, $breakpoint-inline-limit-width-max) {
|
@mixin form-responsive($breakpoint-inline, $breakpoint-inline-limit-width, $breakpoint-inline-limit-width-max) {
|
||||||
@include media-breakpoint-up($breakpoint-inline) {
|
@include media-breakpoint-up($breakpoint-inline) {
|
||||||
.form-group {
|
.form-group {
|
||||||
|
|
@ -157,7 +154,6 @@ input.radio {
|
||||||
|
|
||||||
// Composite fields
|
// Composite fields
|
||||||
// TODO reduce nesting
|
// TODO reduce nesting
|
||||||
// scss-lint:disable SelectorDepth
|
|
||||||
.form__field-holder .form-group {
|
.form__field-holder .form-group {
|
||||||
.form__field-holder,
|
.form__field-holder,
|
||||||
.form__field-label {
|
.form__field-label {
|
||||||
|
|
@ -176,7 +172,6 @@ input.radio {
|
||||||
@include make-col-offset(0);
|
@include make-col-offset(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// scss-lint:enable SelectorDepth
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
margin: $spacer-y $grid-gutter-width-half #{-$spacer-y};
|
margin: $spacer-y $grid-gutter-width-half #{-$spacer-y};
|
||||||
|
|
|
||||||
|
|
@ -93,7 +93,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes loading-icon {
|
@keyframes loading-icon {
|
||||||
0%, 80%, 100% {
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
&:active,
|
&:active,
|
||||||
&[class*="font-icon-"]:active,
|
&[class*="font-icon-"]:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&[class*="font-icon-"]:focus, {
|
&[class*="font-icon-"]:focus {
|
||||||
background-color: darken($table-bg-tools, 6%);
|
background-color: darken($table-bg-tools, 6%);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
// scss-lint:disable all
|
|
||||||
@extend .popover-arrow; // Temp uses Bootstrap 3 class name, until React Bootstrap has been updated to Bootstrap 4
|
@extend .popover-arrow; // Temp uses Bootstrap 3 class name, until React Bootstrap has been updated to Bootstrap 4
|
||||||
// scss-lint:enable all
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -20,9 +18,7 @@
|
||||||
|
|
||||||
// Unable to use classes within the popover, so we use elements to style
|
// Unable to use classes within the popover, so we use elements to style
|
||||||
ul {
|
ul {
|
||||||
// scss-lint:disable ImportantRule
|
|
||||||
padding-left: 0 !important; // TODO remove important by removing nesting of lists
|
padding-left: 0 !important; // TODO remove important by removing nesting of lists
|
||||||
// scss-lint:enable ImportantRule
|
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: -#{$popover-padding} + 1px; // minus border
|
margin-left: -#{$popover-padding} + 1px; // minus border
|
||||||
margin-right: -#{$popover-padding} + 1px;
|
margin-right: -#{$popover-padding} + 1px;
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar__back-button,
|
.toolbar__back-button,
|
||||||
.cms_backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
|
.cms-backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
|
||||||
float: left;
|
float: left;
|
||||||
margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625};
|
margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625};
|
||||||
padding-left: $spacer-x / 4;
|
padding-left: $spacer-x / 4;
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,9 @@
|
||||||
font-family: "silverstripe";
|
font-family: "silverstripe";
|
||||||
src: url("../font/fonts/silverstripe.eot");
|
src: url("../font/fonts/silverstripe.eot");
|
||||||
src: url("../font/fonts/silverstripe.eot?#iefix") format("embedded-opentype"),
|
src: url("../font/fonts/silverstripe.eot?#iefix") format("embedded-opentype"),
|
||||||
url("../font/fonts/silverstripe.woff") format("woff"),
|
url("../font/fonts/silverstripe.woff") format("woff"),
|
||||||
url("../font/fonts/silverstripe.ttf") format("truetype"),
|
url("../font/fonts/silverstripe.ttf") format("truetype"),
|
||||||
url("../font/fonts/silverstripe.svg#silverstripe") format("svg");
|
url("../font/fonts/silverstripe.svg#silverstripe") format("svg");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
||||||
|
|
@ -14,257 +14,325 @@
|
||||||
|
|
||||||
[class^="font-icon-"]::before,
|
[class^="font-icon-"]::before,
|
||||||
[class*=" font-icon-"]::before {
|
[class*=" font-icon-"]::before {
|
||||||
// scss-lint:disable ImportantRule
|
|
||||||
font-family: "silverstripe" !important;
|
font-family: "silverstripe" !important;
|
||||||
// scss-lint:disable ImportantRule
|
|
||||||
font-style: normal !important;
|
font-style: normal !important;
|
||||||
// scss-lint:disable ImportantRule
|
|
||||||
font-weight: normal !important;
|
font-weight: normal !important;
|
||||||
// scss-lint:disable ImportantRule
|
|
||||||
font-variant: normal !important;
|
font-variant: normal !important;
|
||||||
// scss-lint:disable ImportantRule
|
|
||||||
text-transform: none !important;
|
text-transform: none !important;
|
||||||
// scss-lint:enable ImportantRule
|
|
||||||
speak: none;
|
speak: none;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-lint:disable EmptyLineBetweenBlocks
|
|
||||||
.font-icon-search::before {
|
.font-icon-search::before {
|
||||||
content: "\73";
|
content: "\73";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-sync::before {
|
.font-icon-sync::before {
|
||||||
content: "\63";
|
content: "\63";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-print::before {
|
.font-icon-print::before {
|
||||||
content: "\64";
|
content: "\64";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-list::before {
|
.font-icon-list::before {
|
||||||
content: "\65";
|
content: "\65";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-plus-circled::before {
|
.font-icon-plus-circled::before {
|
||||||
content: "\66";
|
content: "\66";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-check-mark-2::before {
|
.font-icon-check-mark-2::before {
|
||||||
content: "\6b";
|
content: "\6b";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-book::before {
|
.font-icon-book::before {
|
||||||
content: "\6e";
|
content: "\6e";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-book-open::before {
|
.font-icon-book-open::before {
|
||||||
content: "\6f";
|
content: "\6f";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-plus::before {
|
.font-icon-plus::before {
|
||||||
content: "\6a";
|
content: "\6a";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-tree::before {
|
.font-icon-tree::before {
|
||||||
content: "\70";
|
content: "\70";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-flow-tree::before {
|
.font-icon-flow-tree::before {
|
||||||
content: "\71";
|
content: "\71";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-info-circled::before {
|
.font-icon-info-circled::before {
|
||||||
content: "\79";
|
content: "\79";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-chart-line::before {
|
.font-icon-chart-line::before {
|
||||||
content: "\42";
|
content: "\42";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-graph-bar::before {
|
.font-icon-graph-bar::before {
|
||||||
content: "\45";
|
content: "\45";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-torsos-all::before {
|
.font-icon-torsos-all::before {
|
||||||
content: "\46";
|
content: "\46";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-torso::before {
|
.font-icon-torso::before {
|
||||||
content: "\48";
|
content: "\48";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-picture::before {
|
.font-icon-picture::before {
|
||||||
content: "\76";
|
content: "\76";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-chart-pie::before {
|
.font-icon-chart-pie::before {
|
||||||
content: "\41";
|
content: "\41";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-sitemap::before {
|
.font-icon-sitemap::before {
|
||||||
content: "\43";
|
content: "\43";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-globe-1::before {
|
.font-icon-globe-1::before {
|
||||||
content: "\52";
|
content: "\52";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-chat::before {
|
.font-icon-chat::before {
|
||||||
content: "\74";
|
content: "\74";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-comment::before {
|
.font-icon-comment::before {
|
||||||
content: "\77";
|
content: "\77";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-logout::before {
|
.font-icon-logout::before {
|
||||||
content: "\7a";
|
content: "\7a";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-cancel-circled::before {
|
.font-icon-cancel-circled::before {
|
||||||
content: "\51";
|
content: "\51";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-left-open::before {
|
.font-icon-left-open::before {
|
||||||
content: "\54";
|
content: "\54";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-right-open::before {
|
.font-icon-right-open::before {
|
||||||
content: "\55";
|
content: "\55";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-check-mark::before {
|
.font-icon-check-mark::before {
|
||||||
content: "\47";
|
content: "\47";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-check-mark-circle::before {
|
.font-icon-check-mark-circle::before {
|
||||||
content: "\49";
|
content: "\49";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-back-in-time::before {
|
.font-icon-back-in-time::before {
|
||||||
content: "\58";
|
content: "\58";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-cog::before {
|
.font-icon-cog::before {
|
||||||
content: "\59";
|
content: "\59";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-fast-forward::before {
|
.font-icon-fast-forward::before {
|
||||||
content: "\68";
|
content: "\68";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-install::before {
|
.font-icon-install::before {
|
||||||
content: "\61";
|
content: "\61";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-down-circled::before {
|
.font-icon-down-circled::before {
|
||||||
content: "\69";
|
content: "\69";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-eye::before {
|
.font-icon-eye::before {
|
||||||
content: "\6c";
|
content: "\6c";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-columns::before {
|
.font-icon-columns::before {
|
||||||
content: "\72";
|
content: "\72";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-edit-write::before {
|
.font-icon-edit-write::before {
|
||||||
content: "\75";
|
content: "\75";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-monitor::before {
|
.font-icon-monitor::before {
|
||||||
content: "\78";
|
content: "\78";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-mobile::before {
|
.font-icon-mobile::before {
|
||||||
content: "\4a";
|
content: "\4a";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-tablet::before {
|
.font-icon-tablet::before {
|
||||||
content: "\4b";
|
content: "\4b";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-pencil::before {
|
.font-icon-pencil::before {
|
||||||
content: "\6d";
|
content: "\6d";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-trash::before {
|
.font-icon-trash::before {
|
||||||
content: "\67";
|
content: "\67";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-edit::before {
|
.font-icon-edit::before {
|
||||||
content: "\4e";
|
content: "\4e";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-tick::before {
|
.font-icon-tick::before {
|
||||||
content: "\4f";
|
content: "\4f";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-upload::before {
|
.font-icon-upload::before {
|
||||||
content: "\62";
|
content: "\62";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-folder-add::before {
|
.font-icon-folder-add::before {
|
||||||
content: "\53";
|
content: "\53";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-silverstripe::before {
|
.font-icon-silverstripe::before {
|
||||||
content: "\4d";
|
content: "\4d";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-thumbnails::before {
|
.font-icon-thumbnails::before {
|
||||||
content: "\57";
|
content: "\57";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-down-open::before {
|
.font-icon-down-open::before {
|
||||||
content: "\30";
|
content: "\30";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-up-open::before {
|
.font-icon-up-open::before {
|
||||||
content: "\31";
|
content: "\31";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-link::before {
|
.font-icon-link::before {
|
||||||
content: "\32";
|
content: "\32";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-level-up::before {
|
.font-icon-level-up::before {
|
||||||
content: "\56";
|
content: "\56";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-image::before {
|
.font-icon-image::before {
|
||||||
content: "\34";
|
content: "\34";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-trash-bin::before {
|
.font-icon-trash-bin::before {
|
||||||
content: "\50";
|
content: "\50";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-code::before {
|
.font-icon-code::before {
|
||||||
content: "\33";
|
content: "\33";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-left-open-big::before {
|
.font-icon-left-open-big::before {
|
||||||
content: "\35";
|
content: "\35";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-down-open-big::before {
|
.font-icon-down-open-big::before {
|
||||||
content: "\36";
|
content: "\36";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-up-open-big::before {
|
.font-icon-up-open-big::before {
|
||||||
content: "\37";
|
content: "\37";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-right-open-big::before {
|
.font-icon-right-open-big::before {
|
||||||
content: "\38";
|
content: "\38";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-dot-3::before {
|
.font-icon-dot-3::before {
|
||||||
content: "\39";
|
content: "\39";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-save::before {
|
.font-icon-save::before {
|
||||||
content: "\21";
|
content: "\21";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-rocket::before {
|
.font-icon-rocket::before {
|
||||||
content: "\5a";
|
content: "\5a";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-cancel::before {
|
.font-icon-cancel::before {
|
||||||
content: "\44";
|
content: "\44";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-happy::before {
|
.font-icon-happy::before {
|
||||||
content: "\22";
|
content: "\22";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-sad::before {
|
.font-icon-sad::before {
|
||||||
content: "\23";
|
content: "\23";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-angle-double-right::before {
|
.font-icon-angle-double-right::before {
|
||||||
content: "\24";
|
content: "\24";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-angle-double-left::before {
|
.font-icon-angle-double-left::before {
|
||||||
content: "\25";
|
content: "\25";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-angle-right::before {
|
.font-icon-angle-right::before {
|
||||||
content: "\26";
|
content: "\26";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-angle-left::before {
|
.font-icon-angle-left::before {
|
||||||
content: "\27";
|
content: "\27";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-caret-up-down::before {
|
.font-icon-caret-up-down::before {
|
||||||
content: "\29";
|
content: "\29";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-caret-down-two::before {
|
.font-icon-caret-down-two::before {
|
||||||
content: "\28";
|
content: "\28";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-caret-up-two::before {
|
.font-icon-caret-up-two::before {
|
||||||
content: "\2a";
|
content: "\2a";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-right-dir::before {
|
.font-icon-right-dir::before {
|
||||||
content: "\2b";
|
content: "\2b";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-down-dir::before {
|
.font-icon-down-dir::before {
|
||||||
content: "\2c";
|
content: "\2c";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-link-broken::before {
|
.font-icon-link-broken::before {
|
||||||
content: "\2d";
|
content: "\2d";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-switch::before {
|
.font-icon-switch::before {
|
||||||
content: "\2e";
|
content: "\2e";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-resize::before {
|
.font-icon-resize::before {
|
||||||
content: "\4c";
|
content: "\4c";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-menu::before {
|
.font-icon-menu::before {
|
||||||
content: "\2f";
|
content: "\2f";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-icon-edit-list::before {
|
.font-icon-edit-list::before {
|
||||||
content: "\3a";
|
content: "\3a";
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-lint:enable EmptyLineBetweenBlocks
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ h1 {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tables
|
// Tables
|
||||||
// Used as a base for components: GridField.
|
// Used as a base for components: GridField.
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
|
|
@ -54,11 +54,9 @@ h1 {
|
||||||
background: $table-bg-hover;
|
background: $table-bg-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-lint:disable SelectorDepth
|
|
||||||
tr:first-child td {
|
tr:first-child td {
|
||||||
border-top: $table-border-width solid $border-color-light;
|
border-top: $table-border-width solid $border-color-light;
|
||||||
}
|
}
|
||||||
// scss-lint:enable SelectorDepth
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot {
|
tfoot {
|
||||||
|
|
@ -74,7 +72,7 @@ h1 {
|
||||||
|
|
||||||
.cms {
|
.cms {
|
||||||
code {
|
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;
|
-ms-word-break: break-all;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
||||||
// scss-lint:disable VendorPrefix
|
|
||||||
-ms-hyphens: auto;
|
-ms-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
// scss-lint:enable VendorPrefix
|
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -327,18 +327,14 @@ $input-bg-disabled: $background-darker;
|
||||||
$input-color: $body-color-light;
|
$input-color: $body-color-light;
|
||||||
$input-border-color: $border-color-dark;
|
$input-border-color: $border-color-dark;
|
||||||
$input-btn-border-width: $border-width; // For form controls and buttons
|
$input-btn-border-width: $border-width; // For form controls and buttons
|
||||||
// scss-lint:disable ColorVariable
|
|
||||||
$input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
$input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||||
// scss-lint:enable ColorVariable
|
|
||||||
|
|
||||||
$input-border-radius: $border-radius;
|
$input-border-radius: $border-radius;
|
||||||
$input-border-radius-lg: $border-radius-lg;
|
$input-border-radius-lg: $border-radius-lg;
|
||||||
$input-border-radius-sm: $border-radius-sm;
|
$input-border-radius-sm: $border-radius-sm;
|
||||||
|
|
||||||
$input-border-focus: #66afe9;
|
$input-border-focus: #66afe9;
|
||||||
// scss-lint:disable ColorVariable
|
|
||||||
$input-box-shadow-focus: rgba(102, 175, 233, .6);
|
$input-box-shadow-focus: rgba(102, 175, 233, .6);
|
||||||
// scss-lint:enable ColorVariable
|
|
||||||
|
|
||||||
// $input-color-placeholder: #999;
|
// $input-color-placeholder: #999;
|
||||||
//
|
//
|
||||||
|
|
@ -726,7 +722,7 @@ $shadow-level-1: rgba(0, 0, 0, .1);
|
||||||
$shadow-level-2: rgba(0, 0, 0, .15);
|
$shadow-level-2: rgba(0, 0, 0, .15);
|
||||||
$shadow-level-3: rgba(0, 0, 0, .2);
|
$shadow-level-3: rgba(0, 0, 0, .2);
|
||||||
$shadow-level-4: rgba(0, 0, 0, .25);
|
$shadow-level-4: rgba(0, 0, 0, .25);
|
||||||
$shadow-level-5: rgba(0, 0, 0, .30);
|
$shadow-level-5: rgba(0, 0, 0, .3);
|
||||||
|
|
||||||
// TODO tidy all shadows cms wide (including AssetAdmin)
|
// TODO tidy all shadows cms wide (including AssetAdmin)
|
||||||
$shadow-light: $shadow-level-3;
|
$shadow-light: $shadow-level-3;
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,11 @@
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
// Compatibilty with compass
|
// Compatibilty with compass
|
||||||
@import "legacy/_compasscompat";
|
@import "legacy/compasscompat";
|
||||||
|
|
||||||
// Thirdparty
|
// Thirdparty
|
||||||
@import "chosen";
|
@import "chosen";
|
||||||
@import "../../../../node_modules/bootstrap/scss/bootstrap.scss";
|
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||||
@import "../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css";
|
@import "../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css";
|
||||||
@import "../../../thirdparty/jstree/themes/apple/style.css";
|
@import "../../../thirdparty/jstree/themes/apple/style.css";
|
||||||
@import "../../../thirdparty/jquery-notice/jquery.notice.css";
|
@import "../../../thirdparty/jquery-notice/jquery.notice.css";
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
// scss-lint:disable all
|
|
||||||
|
|
||||||
/*<?php
|
/*<?php
|
||||||
// *************
|
// *************
|
||||||
// Self-generating. Run with PHP on the command line to re-generate.
|
// Self-generating. Run with PHP on the command line to re-generate.
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
// scss-lint:disable all
|
|
||||||
|
|
||||||
//**
|
//**
|
||||||
// * This file contains mixins relating to specific functionality
|
// * This file contains mixins relating to specific functionality
|
||||||
// *
|
// *
|
||||||
|
|
|
||||||
|
|
@ -15,15 +15,15 @@
|
||||||
* Core Styles.
|
* Core Styles.
|
||||||
* ---------------------------------------------------- */
|
* ---------------------------------------------------- */
|
||||||
|
|
||||||
html,body {
|
html, body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* Removes RHS whitespace on iPad */
|
/* Removes RHS whitespace on iPad */
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.cms {
|
body.cms {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -33,12 +33,12 @@ body.cms {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-helper-hide-actions .btn-toolbar {
|
.cms-helper-hide-actions .btn-toolbar {
|
||||||
@extend .hide;
|
@extend .hide;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -46,8 +46,8 @@ body.cms {
|
||||||
* Panels Styles
|
* Panels Styles
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
.cms-container {
|
.cms-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-preview,
|
.cms-preview,
|
||||||
|
|
@ -63,9 +63,8 @@ body.cms {
|
||||||
.cms-content-fields,
|
.cms-content-fields,
|
||||||
.cms-preview,
|
.cms-preview,
|
||||||
.cms-preview iframe,
|
.cms-preview iframe,
|
||||||
.cms-preview-controls
|
.cms-preview-controls {
|
||||||
{
|
display: inline-block;
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid
|
.cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid
|
||||||
|
|
@ -75,171 +74,171 @@ body.cms {
|
||||||
z-index: 60;
|
z-index: 60;
|
||||||
min-height: $toolbar-total-height;
|
min-height: $toolbar-total-height;
|
||||||
background: {
|
background: {
|
||||||
image: url(../images/textures/cms_content_header.png);
|
image: url("../images/textures/cms_content_header.png");
|
||||||
repeat: repeat;
|
repeat: repeat;
|
||||||
position: left bottom;
|
position: left bottom;
|
||||||
color: $color-darker-bg;
|
color: $color-darker-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $color-text-blue-link;
|
color: $color-text-blue-link;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backlink {
|
.backlink {
|
||||||
span.btn-icon-back {
|
span.btn-icon-back {
|
||||||
height:16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: $font-size-h4;
|
font-size: $font-size-h4;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: $grid-x;
|
margin-bottom: $grid-x;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header-info {
|
.cms-content-header-info {
|
||||||
float:left;
|
float: left;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
|
||||||
& * {
|
& * {
|
||||||
display: inline-block; // align back button and breadcrumbs
|
display: inline-block; // align back button and breadcrumbs
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-icon {
|
.section-icon {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms_backlink {
|
.cms-backlink {
|
||||||
margin-top: -7px;
|
margin-top: -7px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset to default styles
|
// Reset to default styles
|
||||||
.ss-ui-button {
|
.ss-ui-button {
|
||||||
line-height: $grid-x*3;
|
line-height: $grid-x*3;
|
||||||
|
|
||||||
.ui-button-text {
|
.ui-button-text {
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-edit-form.CMSMain {
|
.cms-edit-form.CMSMain {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide threeColumnCompressor column.
|
// Hide threeColumnCompressor column.
|
||||||
.cms-container {
|
.cms-container {
|
||||||
.column-hidden {
|
.column-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&+ .cms-preview {
|
&+ .cms-preview {
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header-top {
|
.cms-content-header-top {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// We have a faux three column layout when displaying Page content in the CMS.
|
// We have a faux three column layout when displaying Page content in the CMS.
|
||||||
.has-panel {
|
.has-panel {
|
||||||
.cms-tree-view-sidebar,
|
.cms-tree-view-sidebar,
|
||||||
.cms-versions-form {
|
.cms-versions-form {
|
||||||
padding: $panel-padding-y $panel-padding-x;
|
padding: $panel-padding-y $panel-padding-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header.north {
|
.cms-content-header.north {
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
.cms-content-header-info {
|
.cms-content-header-info {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-controls,
|
.view-controls,
|
||||||
.section-label {
|
.section-label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header-nav {
|
.cms-content-header-nav {
|
||||||
margin-left: 61px;
|
margin-left: 61px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header-info {
|
.cms-content-header-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 1px;
|
bottom: 1px;
|
||||||
width: $cms-panel-sm;
|
width: $cms-panel-sm;
|
||||||
padding-bottom: $grid-y;
|
padding-bottom: $grid-y;
|
||||||
padding-left: $grid-x * 2;
|
padding-left: $grid-x * 2;
|
||||||
padding-right: $grid-x*2;
|
padding-right: $grid-x*2;
|
||||||
box-shadow: 1px 0 0 0 $border-color-dark;
|
box-shadow: 1px 0 0 0 $border-color-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header-nav {
|
.cms-content-header-nav {
|
||||||
margin-left: $cms-panel-sm;
|
margin-left: $cms-panel-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-heading {
|
.section-heading {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-icon {
|
.section-icon {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-label {
|
.section-label {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumbs-wrapper {
|
.breadcrumbs-wrapper {
|
||||||
float: left;
|
float: left;
|
||||||
padding-top: $grid-y - 1;
|
padding-top: $grid-y - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-controls {
|
.view-controls {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
.icon-button-group {
|
.icon-button-group {
|
||||||
.icon-button {
|
.icon-button {
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-tools {
|
.cms-content-tools {
|
||||||
position: relative !important; // TEMP until JS is removed
|
position: relative !important; // TEMP until JS is removed
|
||||||
|
|
||||||
.cms-panel-content {
|
.cms-panel-content {
|
||||||
height: calc(100% - 53px) !important; // TEMP until JS is removed
|
height: calc(100% - 53px) !important; // TEMP until JS is removed
|
||||||
}
|
}
|
||||||
|
|
||||||
// History panel
|
// History panel
|
||||||
.cms-helper-hide-actions {
|
.cms-helper-hide-actions {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// History checkboxes
|
// History checkboxes
|
||||||
|
|
@ -251,44 +250,44 @@ body.cms {
|
||||||
|
|
||||||
.checkbox {
|
.checkbox {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#page-title-heading {
|
#page-title-heading {
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ------------------------------------------------------------------
|
/** ------------------------------------------------------------------
|
||||||
* CMS Breadcrumbs
|
* CMS Breadcrumbs
|
||||||
* ----------------------------------------------------------------- */
|
* ----------------------------------------------------------------- */
|
||||||
.breadcrumbs-wrapper {
|
.breadcrumbs-wrapper {
|
||||||
.crumb,
|
.crumb,
|
||||||
.sep {
|
.sep {
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.crumb {
|
.crumb {
|
||||||
&.last {
|
&.last {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sep {
|
.sep {
|
||||||
+ .crumb.last {
|
+ .crumb.last {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.cms-tabset-nav-primary {
|
.cms-tabset-nav-primary {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ------------------------------------------------------------------
|
/** ------------------------------------------------------------------
|
||||||
|
|
@ -300,159 +299,159 @@ body.cms {
|
||||||
* Tabs should be refactored to use weaker selectors.
|
* Tabs should be refactored to use weaker selectors.
|
||||||
* ----------------------------------------------------------------- */
|
* ----------------------------------------------------------------- */
|
||||||
.cms {
|
.cms {
|
||||||
a.icon-button,
|
a.icon-button,
|
||||||
button.ss-ui-button.icon-button {
|
button.ss-ui-button.icon-button {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: 0 2px 0 0;
|
margin: 0 2px 0 0;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #d4dbe1;
|
background-color: #d4dbe1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active,
|
&.active,
|
||||||
&:active {
|
&:active {
|
||||||
background-color: #d4dbe1;
|
background-color: #d4dbe1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.font-icon-search {
|
&.font-icon-search {
|
||||||
padding: 5px 6px;
|
padding: 5px 6px;
|
||||||
color:lighten($color-text, 10%);
|
color:lighten($color-text, 10%);
|
||||||
|
|
||||||
&.active,
|
&.active,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background: none;
|
background: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: darken($color-text, 10%);
|
color: darken($color-text, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-button-text {
|
.ui-button-text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ModelAdmin & {
|
.ModelAdmin & {
|
||||||
margin-top: -11px;
|
margin-top: -11px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Context specific overrides for Tabs.
|
// Context specific overrides for Tabs.
|
||||||
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link,
|
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link,
|
||||||
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link {
|
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link {
|
||||||
padding: 5px 8px 6px;
|
padding: 5px 8px 6px;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.cms-content-header-tabs .icon-button-group > .ui-tabs-nav.cms-tabset-nav-primary {
|
.cms-content-header-tabs .icon-button-group > .ui-tabs-nav.cms-tabset-nav-primary {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button-group {
|
.icon-button-group {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border: 1px solid #CDCCD0;
|
border: 1px solid #CDCCD0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
a.icon-button,
|
a.icon-button,
|
||||||
button.ss-ui-button.icon-button {
|
button.ss-ui-button.icon-button {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
line-height: 13px;
|
line-height: 13px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-radius: 3px 0 0 3px;
|
border-radius: 3px 0 0 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active:hover {
|
&.active:hover {
|
||||||
background: #d4dbe1;
|
background: #d4dbe1;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ a.icon-button,
|
+ a.icon-button,
|
||||||
+ button.ss-ui-button.icon-button {
|
+ button.ss-ui-button.icon-button {
|
||||||
border-left: 1px solid #CDCCD0;
|
border-left: 1px solid #CDCCD0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Context specific overrides for Tabs.
|
// Context specific overrides for Tabs.
|
||||||
.ui-tabs.ui-tabs-nav {
|
.ui-tabs.ui-tabs-nav {
|
||||||
border-left: 0 !important;
|
border-left: 0 !important;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.cms-tabset-icon.ui-state-default {
|
.cms-tabset-icon.ui-state-default {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
+ .cms-tabset-icon.ui-state-default {
|
+ .cms-tabset-icon.ui-state-default {
|
||||||
border-left: 1px solid #CDCCD0;
|
border-left: 1px solid #CDCCD0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-state-active:hover {
|
&.ui-state-active:hover {
|
||||||
background: #d4dbe1;
|
background: #d4dbe1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-tabset-icon.ui-state-active {
|
.cms-tabset-icon.ui-state-active {
|
||||||
background-color: #d4dbe1;
|
background-color: #d4dbe1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header-tabs & {
|
.cms-content-header-tabs & {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -460,21 +459,21 @@ body.cms {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.ui-tabs {
|
.ui-tabs {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
.ui-tabs {
|
.ui-tabs {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-tabs-panel {
|
.ui-tabs-panel {
|
||||||
padding: 0 $panel-padding-x;
|
padding: 0 $panel-padding-x;
|
||||||
background: transparent; // default it's white
|
background: transparent; // default it's white
|
||||||
border: 0; // suppress default borders
|
border: 0; // suppress default borders
|
||||||
|
|
||||||
&.cms-edit-form {
|
&.cms-edit-form {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-tabs .ui-tabs-nav {
|
.ui-tabs .ui-tabs-nav {
|
||||||
margin-left: $panel-padding-x;
|
margin-left: $panel-padding-x;
|
||||||
|
|
@ -483,60 +482,60 @@ body.cms {
|
||||||
border-bottom: 1px solid $nav-tabs-link-hover-border-color;
|
border-bottom: 1px solid $nav-tabs-link-hover-border-color;
|
||||||
margin-bottom: $spacer-y;
|
margin-bottom: $spacer-y;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-tabs-panel .toolbar--content {
|
.ui-tabs-panel .toolbar--content {
|
||||||
margin-left: -20px;
|
margin-left: -20px;
|
||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-widget-header {
|
.ui-widget-header {
|
||||||
border: 0;
|
border: 0;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-tabs-nav {
|
.ui-tabs-nav {
|
||||||
float: right;
|
float: right;
|
||||||
margin: $grid-x*2 0 -1px 0;
|
margin: $grid-x*2 0 -1px 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
||||||
~ .ui-tabs-panel {
|
~ .ui-tabs-panel {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
top: 0;
|
top: 0;
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: none;
|
outline: none;
|
||||||
float: none;
|
float: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
padding: $nav-link-padding;
|
padding: $nav-link-padding;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
|
|
||||||
&.icon-button {
|
&.icon-button {
|
||||||
@extend a.icon-button;
|
@extend a.icon-button;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
// correctly right-align last tab
|
// correctly right-align last tab
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&+li {
|
&+li {
|
||||||
margin-left: $spacer-x / 2;
|
margin-left: $spacer-x / 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//jquery UI override
|
//jquery UI override
|
||||||
li.ui-tabs-active,
|
li.ui-tabs-active,
|
||||||
|
|
@ -546,65 +545,65 @@ body.cms {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-state-default {
|
.ui-state-default {
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lighten($color-text, 10%);
|
color: lighten($color-text, 10%);
|
||||||
border-bottom: $nav-tabs-link-border-width solid transparent;
|
border-bottom: $nav-tabs-link-border-width solid transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-state-active {
|
.ui-state-active {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border-color: #66727d;
|
border-color: #66727d;
|
||||||
padding-left: $spacer-x / 4;
|
padding-left: $spacer-x / 4;
|
||||||
padding-right: $spacer-x / 4;
|
padding-right: $spacer-x / 4;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-state-active {
|
&.ui-state-active {
|
||||||
border-color: $color-medium-separator;
|
border-color: $color-medium-separator;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.cms-tabset-icon.ui-corner-top {
|
li.cms-tabset-icon.ui-corner-top {
|
||||||
text-indent:-9999em;
|
text-indent:-9999em;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
padding-left: 40px; // icon width
|
padding-left: 40px; // icon width
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-panel-padded {
|
.cms-panel-padded {
|
||||||
.ui-tabs-panel {
|
.ui-tabs-panel {
|
||||||
padding: 0; // Avoid double padding with parent
|
padding: 0; // Avoid double padding with parent
|
||||||
|
|
||||||
.ui-tabs-panel {
|
.ui-tabs-panel {
|
||||||
padding: $grid-x 0 0 0;
|
padding: $grid-x 0 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
padding: 0; // Avoid double padding with parent
|
padding: 0; // Avoid double padding with parent
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ss-tabset-tabshidden .ui-tabs-panel {
|
&.ss-tabset-tabshidden .ui-tabs-panel {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -615,70 +614,70 @@ body.cms {
|
||||||
.ui-tabs.cms-tabset-primary .ui-tabs-nav,
|
.ui-tabs.cms-tabset-primary .ui-tabs-nav,
|
||||||
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
|
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
|
||||||
.ui-tabs .cms-content-header-tabs .ui-tabs-nav {
|
.ui-tabs .cms-content-header-tabs .ui-tabs-nav {
|
||||||
margin-top: -$spacer-y * .625; // Same as toolbar padding
|
margin-top: -$spacer-y * .625; // Same as toolbar padding
|
||||||
float: none; // parent container is already right floated
|
float: none; // parent container is already right floated
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-right: 0; // tabs are directly adjacent
|
margin-right: 0; // tabs are directly adjacent
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-tl {
|
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-tl {
|
||||||
border-radius:0;
|
border-radius:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-state-default {
|
.ui-state-default {
|
||||||
background: none;
|
background: none;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-state-active {
|
.ui-state-active {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
a,
|
a,
|
||||||
.nav-link {
|
.nav-link {
|
||||||
border-bottom: $nav-tabs-link-border-width solid $nav-tabs-active-link-hover-color;
|
border-bottom: $nav-tabs-link-border-width solid $nav-tabs-active-link-hover-color;
|
||||||
padding: $nav-link-padding;
|
padding: $nav-link-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header-tabs {
|
.cms-content-header-tabs {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: $spacer-y * .625; // Same as toolbar padding
|
margin-top: $spacer-y * .625; // Same as toolbar padding
|
||||||
|
|
||||||
&.icon-button-group-tabs {
|
&.icon-button-group-tabs {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
margin-bottom: 13px;
|
margin-bottom: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-fields .ui-tabs-nav {
|
.cms-content-fields .ui-tabs-nav {
|
||||||
float: none;
|
float: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-bottom: 1px solid $color-button-generic-border;
|
border-bottom: 1px solid $color-button-generic-border;
|
||||||
margin: 0 $grid-gutter-width-half;
|
margin: 0 $grid-gutter-width-half;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
// Align tab content with gutter (supports multiple rows of tabs)
|
// Align tab content with gutter (supports multiple rows of tabs)
|
||||||
margin: 0 0 -1px;
|
margin: 0 0 -1px;
|
||||||
|
|
||||||
&+li {
|
&+li {
|
||||||
margin-left: $spacer-x / 2;
|
margin-left: $spacer-x / 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
padding: $nav-link-padding;
|
padding: $nav-link-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** -------------------------------------------------------
|
/** -------------------------------------------------------
|
||||||
|
|
@ -686,75 +685,75 @@ body.cms {
|
||||||
* ------------------------------------------------------- */
|
* ------------------------------------------------------- */
|
||||||
|
|
||||||
.cms-content-loading-overlay {
|
.cms-content-loading-overlay {
|
||||||
position: absolute; // z-index doesn't apply properly without that
|
position: absolute; // z-index doesn't apply properly without that
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 9998;
|
z-index: 9998;
|
||||||
// Further styling by .ui-widget-overlay-light which is usually applied at the same time
|
// Further styling by .ui-widget-overlay-light which is usually applied at the same time
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-loading-spinner {
|
.cms-content-loading-spinner {
|
||||||
position: absolute; // z-index doesn't apply properly without that
|
position: absolute; // z-index doesn't apply properly without that
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
background: url("../../images/spinner.gif") no-repeat 50% 50%;
|
background: url("../../images/spinner.gif") no-repeat 50% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** -----------------------------------------------
|
/** -----------------------------------------------
|
||||||
* Loading Screen
|
* Loading Screen
|
||||||
* ------------------------------------------------ */
|
* ------------------------------------------------ */
|
||||||
.ss-loading-screen {
|
.ss-loading-screen {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100000;
|
z-index: 100000;
|
||||||
// TODO Convert to compass gradient include
|
// TODO Convert to compass gradient include
|
||||||
background: #fff;
|
background: #fff;
|
||||||
background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
|
background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
|
||||||
background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
|
background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
|
||||||
|
|
||||||
.loading-logo {
|
.loading-logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparent url(../images/silverstripe_logo.png) no-repeat 50% 50%;
|
background: transparent url(../images/silverstripe_logo.png) no-repeat 50% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 80px;
|
bottom: 80px;
|
||||||
z-index: 100001;
|
z-index: 100001;
|
||||||
|
|
||||||
span.notice {
|
span.notice {
|
||||||
width: $cms-panel-sm;
|
width: $cms-panel-sm;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
color: #dc7f00;
|
color: #dc7f00;
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
zoom: 1;
|
zoom: 1;
|
||||||
*display: inline;
|
*display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-animation {
|
.loading-animation {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -21.5px; // Half of spinner size
|
margin-left: -21.5px; // Half of spinner size
|
||||||
top: 80%;
|
top: 80%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -762,19 +761,19 @@ body.cms {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.cms-content-actions, .cms-preview-controls {
|
.cms-content-actions, .cms-preview-controls {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
border-top: 1px solid $border-color;
|
border-top: 1px solid $border-color;
|
||||||
height: $toolbar-total-height;
|
height: $toolbar-total-height;
|
||||||
min-height: $toolbar-total-height;
|
min-height: $toolbar-total-height;
|
||||||
max-height: $toolbar-total-height;
|
max-height: $toolbar-total-height;
|
||||||
background-color: $tab-panel-texture-color;
|
background-color: $tab-panel-texture-color;
|
||||||
padding: $spacer-y * .625 0;
|
padding: $spacer-y * .625 0;
|
||||||
|
|
||||||
&.south .btn-toolbar {
|
&.south .btn-toolbar {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -802,103 +801,103 @@ body.cms {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message { // White
|
.message { // White
|
||||||
display: block;
|
display: block;
|
||||||
clear: both;
|
clear: both;
|
||||||
margin: 0 0 $spacer-y;
|
margin: 0 0 $spacer-y;
|
||||||
padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
|
padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
border: 1px #ccc solid;
|
border: 1px #ccc solid;
|
||||||
background: #fff; // for browsers that don't understand rgba
|
background: #fff; // for browsers that don't understand rgba
|
||||||
background: rgba(#fff,0.5);
|
background: rgba(#fff,0.5);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
&.notice {
|
&.notice {
|
||||||
background-color: lighten($color-notice,22%); // Blue
|
background-color: lighten($color-notice,22%); // Blue
|
||||||
border-color: $color-notice;
|
border-color: $color-notice;
|
||||||
}
|
}
|
||||||
&.warning { // Yellow
|
&.warning { // Yellow
|
||||||
background-color: lighten($color-warning,47%);
|
background-color: lighten($color-warning,47%);
|
||||||
border-color: $color-warning;
|
border-color: $color-warning;
|
||||||
}
|
}
|
||||||
&.error, &.bad, &.required, &.validation { // Red
|
&.error, &.bad, &.required, &.validation { // Red
|
||||||
background-color: lighten($color-error,24%);
|
background-color: lighten($color-error,24%);
|
||||||
border-color: $color-error;
|
border-color: $color-error;
|
||||||
}
|
}
|
||||||
&.good { // Green
|
&.good { // Green
|
||||||
background-color: lighten($color-good,40%);
|
background-color: lighten($color-good,40%);
|
||||||
border-color: $color-good;
|
border-color: $color-good;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-edit-form .ui-tabs-panel .message {
|
.cms-edit-form .ui-tabs-panel .message {
|
||||||
margin: $grid-x*2 0; // gets padding from tab panel
|
margin: $grid-x*2 0; // gets padding from tab panel
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-item {
|
.notice-item {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
padding: 6px 24px 8px 10px;
|
padding: 6px 24px 8px 10px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
height: auto;
|
height: auto;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-left: 3px solid;
|
border-left: 3px solid;
|
||||||
color: #666;
|
color: #666;
|
||||||
left: 300px;
|
left: 300px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
&.success,
|
&.success,
|
||||||
&.good,
|
&.good,
|
||||||
&.green {
|
&.green {
|
||||||
border-color: $color-good;
|
border-color: $color-good;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.notice,
|
&.notice,
|
||||||
&.info,
|
&.info,
|
||||||
&.blue {
|
&.blue {
|
||||||
border-color: $color-notice;
|
border-color: $color-notice;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.warning,
|
&.warning,
|
||||||
&.caution,
|
&.caution,
|
||||||
&.yellow {
|
&.yellow {
|
||||||
border-color: $color-warning;
|
border-color: $color-warning;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.bad,
|
&.bad,
|
||||||
&.error,
|
&.error,
|
||||||
&.red {
|
&.red {
|
||||||
border-color: $color-error;
|
border-color: $color-error;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-item-close {
|
.notice-item-close {
|
||||||
font-size: 0; // hide the textNode "x" that jquery.notice.js inserts
|
font-size: 0; // hide the textNode "x" that jquery.notice.js inserts
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// apply relevant styles from .font-icon-cancel
|
// apply relevant styles from .font-icon-cancel
|
||||||
&::before {
|
&::before {
|
||||||
content: "\44";
|
content: "\44";
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-family: silverstripe, sans-serif;
|
font-family: silverstripe, sans-serif;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -908,25 +907,25 @@ body.cms {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.page-icon, a .jstree-pageicon {
|
.page-icon, a .jstree-pageicon {
|
||||||
display: block;
|
display: block;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat;
|
background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-icon {
|
.page-icon {
|
||||||
&.class-HomePage {
|
&.class-HomePage {
|
||||||
background-position: 0 -48px;
|
background-position: 0 -48px;
|
||||||
}
|
}
|
||||||
&.class-RedirectorPage {
|
&.class-RedirectorPage {
|
||||||
background-position: 0 -16px;
|
background-position: 0 -16px;
|
||||||
}
|
}
|
||||||
&.class-VirtualPage {
|
&.class-VirtualPage {
|
||||||
background-position: 0 -32px;
|
background-position: 0 -32px;
|
||||||
}
|
}
|
||||||
&.class-ErrorPage {
|
&.class-ErrorPage {
|
||||||
background-position: 0 -112px;
|
background-position: 0 -112px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -934,7 +933,7 @@ body.cms {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.cms-page-add-form-dialog {
|
.cms-page-add-form-dialog {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-add-form {
|
.cms-add-form {
|
||||||
|
|
@ -953,21 +952,21 @@ body.cms {
|
||||||
&.selected {
|
&.selected {
|
||||||
background-color: $background-darker;
|
background-color: $background-darker;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: $color-text-disabled;
|
color: $color-text-disabled;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled:hover {
|
&.disabled:hover {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-icon {
|
.page-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -978,12 +977,12 @@ body.cms {
|
||||||
+ .title {
|
+ .title {
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form__field-description {
|
.form__field-description {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -991,36 +990,36 @@ body.cms {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.cms-content-toolbar {
|
.cms-content-toolbar {
|
||||||
min-height: 29px;
|
min-height: 29px;
|
||||||
display: block;
|
display: block;
|
||||||
margin: $spacer-y * .625 0 0;
|
margin: $spacer-y * .625 0 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
@include legacy-pie-clearfix();
|
@include legacy-pie-clearfix();
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
.cms-tree-view-modes {
|
.cms-tree-view-modes {
|
||||||
float:right;
|
float:right;
|
||||||
padding-top:$grid-y - 3;
|
padding-top:$grid-y - 3;
|
||||||
* {
|
* {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
label {
|
label {
|
||||||
color:$color-text-blue-link;
|
color:$color-text-blue-link;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-actions-tools-row {
|
.cms-actions-tools-row {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-action {
|
.tool-action {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-widget-content a {
|
.ui-widget-content a {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -1032,104 +1031,104 @@ body.cms {
|
||||||
* panel
|
* panel
|
||||||
*/
|
*/
|
||||||
.cms-content-tools {
|
.cms-content-tools {
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
width: $grid-x * 36;
|
width: $grid-x * 36;
|
||||||
z-index: 70;
|
z-index: 70;
|
||||||
box-shadow: 1px 0 0 0 $border-color-dark;
|
box-shadow: 1px 0 0 0 $border-color-dark;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.cms-panel-header {
|
.cms-panel-header {
|
||||||
clear: both;
|
clear: both;
|
||||||
margin: 10px 0 $grid-y - 1;
|
margin: 10px 0 $grid-y - 1;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
line-height: $grid-y * 3;
|
line-height: $grid-y * 3;
|
||||||
border-bottom: 1px solid $color-light-separator;
|
border-bottom: 1px solid $color-light-separator;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-panel-content {
|
.cms-panel-content {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height:100%;
|
height:100%;
|
||||||
|
|
||||||
.btn-toolbar .ss-ui-action-constructive {
|
.btn-toolbar .ss-ui-action-constructive {
|
||||||
margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
|
margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header {
|
.cms-content-header {
|
||||||
background-color: darken($color-widget-bg, 40%);
|
background-color: darken($color-widget-bg, 40%);
|
||||||
background-image: linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%));
|
background-image: linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%));
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
|
text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
|
||||||
width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
|
width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
|
||||||
color: lighten($color-widget-bg, 60%);
|
color: lighten($color-widget-bg, 60%);
|
||||||
@include hide-text-overflow();
|
@include hide-text-overflow();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h3,h4,h5 {
|
h3,h4,h5 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: $grid-y * 2;
|
line-height: $grid-y * 2;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: $font-size-h5;
|
font-size: $font-size-h5;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: $font-size-h5;
|
font-size: $font-size-h5;
|
||||||
margin:5px 0;
|
margin:5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-widget-content {
|
.ui-widget-content {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field {
|
.field {
|
||||||
&.checkbox {
|
&.checkbox {
|
||||||
padding: 0 0 8px;
|
padding: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
margin: 8px #{-$panel-padding-x};
|
margin: 8px #{-$panel-padding-x};
|
||||||
width: calc(100% + #{$panel-padding-x * 2});
|
width: calc(100% + #{$panel-padding-x * 2});
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $component-active-bg;
|
background-color: $component-active-bg;
|
||||||
color: $color-text-light;
|
color: $color-text-light;
|
||||||
border-top: 2px solid $component-active-bg;
|
border-top: 2px solid $component-active-bg;
|
||||||
}
|
}
|
||||||
+ .active td {
|
+ .active td {
|
||||||
border-color: $component-active-bg;
|
border-color: $component-active-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
border-bottom: 1px solid darken($color-widget-bg, 10%);
|
border-bottom: 1px solid darken($color-widget-bg, 10%);
|
||||||
padding: $grid-y - 1 2px;
|
padding: $grid-y - 1 2px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
&.first-column {
|
&.first-column {
|
||||||
padding-left: $panel-padding-x;
|
padding-left: $panel-padding-x;
|
||||||
}
|
}
|
||||||
&.last-column {
|
&.last-column {
|
||||||
padding-right: $panel-padding-x;
|
padding-right: $panel-padding-x;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1138,130 +1137,130 @@ body.cms {
|
||||||
* ----------------------------------------------------------------- */
|
* ----------------------------------------------------------------- */
|
||||||
|
|
||||||
.cms-notice {
|
.cms-notice {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
border: 1px $color-light-separator solid;
|
border: 1px $color-light-separator solid;
|
||||||
background: #fff; //for browsers that don't understand rgba
|
background: #fff; //for browsers that don't understand rgba
|
||||||
background: rgba(#fff,0.5);
|
background: rgba(#fff,0.5);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-tree-filtered {
|
.cms-tree-filtered {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-left: -$grid-x*2;
|
margin-left: -$grid-x*2;
|
||||||
padding: $grid-y*2 $grid-x*2;
|
padding: $grid-y*2 $grid-x*2;
|
||||||
background: #D4E2EC;
|
background: #D4E2EC;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
> strong,
|
> strong,
|
||||||
> a {
|
> a {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* CMS Batch actions
|
* CMS Batch actions
|
||||||
*/
|
*/
|
||||||
.cms-content-batchactions-button {
|
.cms-content-batchactions-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 6px;
|
padding: 4px 6px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
background-image: linear-gradient(to bottom, #fff, #D9D9D9);
|
background-image: linear-gradient(to bottom, #fff, #D9D9D9);
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-batchactions {
|
.cms-content-batchactions {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
.view-mode-batchactions-wrapper {
|
.view-mode-batchactions-wrapper {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 4px 6px;
|
padding: 4px 6px;
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
margin-right:-1px;
|
margin-right:-1px;
|
||||||
background-color: #D9D9D9;
|
background-color: #D9D9D9;
|
||||||
background-image: linear-gradient(to bottom, #fff, #D9D9D9);
|
background-image: linear-gradient(to bottom, #fff, #D9D9D9);
|
||||||
border-top-left-radius: 4px;
|
border-top-left-radius: 4px;
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-mode-batchactions-label {
|
.view-mode-batchactions-label {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox {
|
.checkbox {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tree batch actions
|
// Tree batch actions
|
||||||
.cms-batch-actions {
|
.cms-batch-actions {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form__field-holder--no-label {
|
.form__field-holder--no-label {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
flex-basis: 100% !important;
|
flex-basis: 100% !important;
|
||||||
padding-right: 40px;
|
padding-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown { // The 'select' element
|
.dropdown { // The 'select' element
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chosen-container-single .chosen-single {
|
.chosen-container-single .chosen-single {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field .chosen-container-active.chosen-with-drop .chosen-single {
|
.field .chosen-container-active.chosen-with-drop .chosen-single {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action,
|
.action,
|
||||||
.btn {
|
.btn {
|
||||||
padding-top: 7px;
|
padding-top: 7px;
|
||||||
padding-bottom: 7px;
|
padding-bottom: 7px;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
width: calc(#{$grid-gutter-width} + 1px); // gutters + 1px border
|
width: calc(#{$grid-gutter-width} + 1px); // gutters + 1px border
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
* Preview
|
* Preview
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
.cms-switch-view {
|
.cms-switch-view {
|
||||||
a {
|
a {
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -1269,102 +1268,102 @@ body.cms {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
form.member-profile-form {
|
form.member-profile-form {
|
||||||
padding: 0 $grid-x*2 0 0;
|
padding: 0 $grid-x*2 0 0;
|
||||||
|
|
||||||
#Root_Permissions {
|
#Root_Permissions {
|
||||||
clear:both;
|
clear:both;
|
||||||
border-top: 1px solid darken($color-tab, 20%);
|
border-top: 1px solid darken($color-tab, 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#Root_Main {
|
#Root_Main {
|
||||||
clear:both;
|
clear:both;
|
||||||
border-top: 1px solid darken($color-tab, 20%);
|
border-top: 1px solid darken($color-tab, 20%);
|
||||||
.cms-help-toggle {
|
.cms-help-toggle {
|
||||||
text-indent: -9999em;
|
text-indent: -9999em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
background:url(../images/question.png) no-repeat 0px 0px;
|
background:url(../images/question.png) no-repeat 0px 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#FavouritePageID {
|
#FavouritePageID {
|
||||||
margin-top:$grid-y;
|
margin-top:$grid-y;
|
||||||
}
|
}
|
||||||
|
|
||||||
#CsvFile .middleColumn {
|
#CsvFile .middleColumn {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advanced h4 {
|
.advanced h4 {
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.customFormat {
|
input.customFormat {
|
||||||
width: $grid-x * 10;
|
width: $grid-x * 10;
|
||||||
border: 1px solid #ccc !important;
|
border: 1px solid #ccc !important;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formattingHelpToggle {
|
.formattingHelpToggle {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formattingHelpText {
|
.formattingHelpText {
|
||||||
margin: 5px 0 0 -5px;
|
margin: 5px 0 0 -5px;
|
||||||
color: #333;
|
color: #333;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formattingHelpText ul {
|
.formattingHelpText ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formattingHelpText li {
|
.formattingHelpText li {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
float: none;
|
float: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#Groups .middleColumn {
|
#Groups .middleColumn {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.TreeDropdownField {
|
.TreeDropdownField {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Same rules in .SecurityAdmin
|
// Same rules in .SecurityAdmin
|
||||||
#Permissions .optionset li {
|
#Permissions .optionset li {
|
||||||
float: none;
|
float: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.memberdatetimeoptionset {
|
.memberdatetimeoptionset {
|
||||||
@extend .form-inline;
|
@extend .form-inline;
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle {
|
.toggle {
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
}
|
}
|
||||||
.toggle-content {
|
.toggle-content {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
li {
|
li {
|
||||||
|
|
@ -1381,56 +1380,56 @@ form.member-profile-form {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms {
|
.cms {
|
||||||
.cms-content {
|
.cms-content {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
width: 800px;
|
width: 800px;
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
overflow: hidden !important; // TEMP until JS is removed
|
overflow: hidden !important; // TEMP until JS is removed
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-fields {
|
.cms-content-fields {
|
||||||
// always show a y scroll bar as popups like TreeDropdowns
|
// always show a y scroll bar as popups like TreeDropdowns
|
||||||
// can trigger longer pages and the extra scroll bar doesn't fire our sizing bar
|
// can trigger longer pages and the extra scroll bar doesn't fire our sizing bar
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
#Root_Main {
|
#Root_Main {
|
||||||
.confirmedpassword {
|
.confirmedpassword {
|
||||||
border-bottom:none;
|
border-bottom:none;
|
||||||
box-shadow:none;
|
box-shadow:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customFormat {
|
.customFormat {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-help-toggle {
|
.cms-help-toggle {
|
||||||
text-indent: -9999em;
|
text-indent: -9999em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
background:url(../images/question.png) no-repeat 0px 0px;
|
background:url(../images/question.png) no-repeat 0px 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#Root_Permissions ul.optionset li {
|
#Root_Permissions ul.optionset li {
|
||||||
float:none;
|
float:none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
form.member-profile-form {
|
form.member-profile-form {
|
||||||
#Root .ui-tabs-nav {
|
#Root .ui-tabs-nav {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#Root_Main, #Root_Permissions {
|
#Root_Main, #Root_Permissions {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1439,22 +1438,22 @@ form.member-profile-form {
|
||||||
* "Settings" Form
|
* "Settings" Form
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
#CanViewType, #CanEditType, #CanCreateTopLevelType {
|
#CanViewType, #CanEditType, #CanCreateTopLevelType {
|
||||||
.optionset li {
|
.optionset li {
|
||||||
// All options on their own line
|
// All options on their own line
|
||||||
float: none;
|
float: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#ViewerGroups,
|
#ViewerGroups,
|
||||||
#EditorGroups,
|
#EditorGroups,
|
||||||
#CreateTopLevelGroups {
|
#CreateTopLevelGroups {
|
||||||
select {
|
select {
|
||||||
// Fix for chosen.js width detection on hidden elements.
|
// Fix for chosen.js width detection on hidden elements.
|
||||||
// TODO Remove once .field styling in _form.scss is refactored to allow flexible field widths
|
// TODO Remove once .field styling in _form.scss is refactored to allow flexible field widths
|
||||||
width: $grid-x * 64;
|
width: $grid-x * 64;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -1462,116 +1461,116 @@ form.member-profile-form {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.cms-panel {
|
.cms-panel {
|
||||||
.cms-panel-toggle {
|
.cms-panel-toggle {
|
||||||
|
|
||||||
.toggle-collapse,
|
.toggle-collapse,
|
||||||
.toggle-expand {
|
.toggle-expand {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding: 14px 0;
|
padding: 14px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
margin: -#{$spacer-y * .625} #{0 - $panel-padding-x};
|
margin: -#{$spacer-y * .625} #{0 - $panel-padding-x};
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
color: #555d60;
|
color: #555d60;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toggle-expand {
|
&.toggle-expand {
|
||||||
width: 60px; // will set the collapsed width
|
width: 60px; // will set the collapsed width
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.cms-panel-header *,
|
.cms-panel-header *,
|
||||||
.cms-panel-content,
|
.cms-panel-content,
|
||||||
.cms-panel-toggle a.toggle-collapse{
|
.cms-panel-toggle a.toggle-collapse{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-panel-toggle a.toggle-expand {
|
.cms-panel-toggle a.toggle-expand {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-panel-header {
|
.cms-panel-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&#cms-content-tools-CMSPageEditController .cms-panel-content-collapsed {
|
&#cms-content-tools-CMSPageEditController .cms-panel-content-collapsed {
|
||||||
width: $cms-panel-xs;
|
width: $cms-panel-xs;
|
||||||
display: none; // Avoids FOUC
|
display: none; // Avoids FOUC
|
||||||
|
|
||||||
h2, h3 {
|
h2, h3 {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
margin-left: $grid-y;
|
margin-left: $grid-y;
|
||||||
transform-origin: bottom, right;
|
transform-origin: bottom, right;
|
||||||
transform: rotate(270deg);
|
transform: rotate(270deg);
|
||||||
}
|
}
|
||||||
.cms-panel-header {
|
.cms-panel-header {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 24px;
|
top: 24px;
|
||||||
right: 577px;
|
right: 577px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-panel-content-collapsed {
|
.cms-panel-content-collapsed {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
display: none; // Avoids FOUC
|
display: none; // Avoids FOUC
|
||||||
height: calc(100% - #{$toolbar-height});
|
height: calc(100% - #{$toolbar-height});
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
margin-left: 18px;
|
margin-left: 18px;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transform: rotate(270deg);
|
transform: rotate(270deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-panel-header {
|
.cms-panel-header {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
position: relative;
|
position: relative;
|
||||||
right: 574px;
|
right: 574px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms .cms-panel-padded {
|
.cms .cms-panel-padded {
|
||||||
&.ReportAdmin {
|
&.ReportAdmin {
|
||||||
.ss-gridfield-buttonrow {
|
.ss-gridfield-buttonrow {
|
||||||
margin-left: -20px;
|
margin-left: -20px;
|
||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> fieldset {
|
> fieldset {
|
||||||
padding: 0 $panel-padding-x;
|
padding: 0 $panel-padding-x;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-view {
|
.cms-content-view {
|
||||||
padding: 0 $panel-padding-x $grid-y*1.5;
|
padding: 0 $panel-padding-x $grid-y*1.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.CMSPageAddController .cms-panel-padded {
|
.CMSPageAddController .cms-panel-padded {
|
||||||
padding: $panel-padding-y $panel-padding-x;
|
padding: $panel-padding-y $panel-padding-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ------------------------------------------------------------------
|
/** ------------------------------------------------------------------
|
||||||
|
|
@ -1583,267 +1582,267 @@ form.member-profile-form {
|
||||||
|
|
||||||
// overlay for switching between CMS panes
|
// overlay for switching between CMS panes
|
||||||
.cms .ui-widget-overlay-light {
|
.cms .ui-widget-overlay-light {
|
||||||
background: #aaaaaa url(../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
|
background: #aaaaaa url(../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI)
|
// Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI)
|
||||||
.cms .ui-widget-overlay {
|
.cms .ui-widget-overlay {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms .ui-dialog .ss-ui-dialog.ui-dialog-content {
|
.cms .ui-dialog .ss-ui-dialog.ui-dialog-content {
|
||||||
padding-top: 0px; //removes padding so that tabs are flush with header
|
padding-top: 0px; //removes padding so that tabs are flush with header
|
||||||
}
|
}
|
||||||
|
|
||||||
// Elements with this class can either frame inline markup or an iframe,
|
// Elements with this class can either frame inline markup or an iframe,
|
||||||
// most styles should be applied to .cms-dialog instead (which declares the content in the frame)
|
// most styles should be applied to .cms-dialog instead (which declares the content in the frame)
|
||||||
.ui-dialog {
|
.ui-dialog {
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
border: 1px solid #666 !important;
|
border: 1px solid #666 !important;
|
||||||
border-radius: $grid-y;
|
border-radius: $grid-y;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-shadow: 0px 0px 30px 10px rgba(0,0,0,.3);
|
box-shadow: 0px 0px 30px 10px rgba(0,0,0,.3);
|
||||||
|
|
||||||
// Titlebar for pop-up dialog.
|
// Titlebar for pop-up dialog.
|
||||||
.ui-dialog-titlebar.ui-widget-header {
|
.ui-dialog-titlebar.ui-widget-header {
|
||||||
font-size: $font-size-root +1;
|
font-size: $font-size-root +1;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent url(../images/textures/cms_content_header.png) repeat;
|
background: transparent url(../images/textures/cms_content_header.png) repeat;
|
||||||
box-shadow: $color-shadow-dark 0 0 ($grid-x / 2) inset;
|
box-shadow: $color-shadow-dark 0 0 ($grid-x / 2) inset;
|
||||||
|
|
||||||
.ui-dialog-title {
|
.ui-dialog-title {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-dialog-content {
|
.ui-dialog-content {
|
||||||
border-radius: $grid-y;
|
border-radius: $grid-y;
|
||||||
overflow: auto; // TODO Replace with proper $.layout grid
|
overflow: auto; // TODO Replace with proper $.layout grid
|
||||||
|
|
||||||
&.loading {
|
&.loading {
|
||||||
background-image: url("../../images/spinner.gif");
|
background-image: url("../../images/spinner.gif");
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-dialog-content {
|
.cms-dialog-content {
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
padding-bottom: $grid-y;
|
padding-bottom: $grid-y;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding-bottom: $grid-y;
|
padding-bottom: $grid-y;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-tabs{
|
.ui-tabs{
|
||||||
position:static;
|
position:static;
|
||||||
// Shift navigation upwards to be horizontally centered with dialog title.
|
// Shift navigation upwards to be horizontally centered with dialog title.
|
||||||
// Can't use floats since this title is in a different DOM parent sibling
|
// Can't use floats since this title is in a different DOM parent sibling
|
||||||
// Note: Does NOT apply to member profile form (unnecessary, since it doesn't have a dialog title)
|
// Note: Does NOT apply to member profile form (unnecessary, since it doesn't have a dialog title)
|
||||||
.ui-tabs-nav {
|
.ui-tabs-nav {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top: 9px;
|
top: 9px;
|
||||||
// Tabs nav is included in scollbar. By absolutely positioning it off the edge,
|
// Tabs nav is included in scollbar. By absolutely positioning it off the edge,
|
||||||
// we avoid tabs shifting position when scrollbar toggles
|
// we avoid tabs shifting position when scrollbar toggles
|
||||||
right: 40px;
|
right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't show top border, since these styles already have a title bar
|
// Don't show top border, since these styles already have a title bar
|
||||||
.ui-tabs-panel {
|
.ui-tabs-panel {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear {
|
.clear {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.loading {
|
&.loading {
|
||||||
background-image: url("../../images/spinner.gif");
|
background-image: url("../../images/spinner.gif");
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-dialog-buttonpane {
|
.ui-dialog-buttonpane {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: $color-darker-bg;
|
background: $color-darker-bg;
|
||||||
border-top: 1px solid $color-light-separator;
|
border-top: 1px solid $color-light-separator;
|
||||||
border-bottom-left-radius: 8px;
|
border-bottom-left-radius: 8px;
|
||||||
border-bottom-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body.cms-dialog {
|
body.cms-dialog {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: $tab-panel-texture-color;
|
background: $tab-panel-texture-color;
|
||||||
position:relative;
|
position:relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
* "Insert X" forms
|
* "Insert X" forms
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
.htmleditorfield-dialog{
|
.htmleditorfield-dialog{
|
||||||
&.ui-dialog-content{
|
&.ui-dialog-content{
|
||||||
padding:0;
|
padding:0;
|
||||||
position:relative;
|
position:relative;
|
||||||
border-radius: 8px 8px 0 0;
|
border-radius: 8px 8px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.htmleditorfield-from-web {
|
.htmleditorfield-from-web {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: $grid-y;
|
margin-bottom: $grid-y;
|
||||||
|
|
||||||
&.CompositeField{
|
&.CompositeField{
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
}
|
}
|
||||||
|
|
||||||
.url-description {
|
.url-description {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: $grid-y*1.5;
|
margin-bottom: $grid-y*1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.remoteurl{
|
div.remoteurl{
|
||||||
width: calc(100% - 84px);
|
width: calc(100% - 84px);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
@extend .input-group-addon;
|
@extend .input-group-addon;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.remoteurl {
|
input.remoteurl {
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.add-url{
|
button.add-url{
|
||||||
display: inline-block;;
|
display: inline-block;;
|
||||||
float: none;
|
float: none;
|
||||||
margin: 2px 0 0;
|
margin: 2px 0 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
opacity:1;
|
opacity:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-state-disabled {
|
&.ui-state-disabled {
|
||||||
&,
|
&,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.35;
|
opacity: 0.35;
|
||||||
filter: Alpha(Opacity=35);
|
filter: Alpha(Opacity=35);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.loading button.add-url::before {
|
&.loading button.add-url::before {
|
||||||
content: "";
|
content: "";
|
||||||
background: url(../images/throbber.gif) no-repeat center center;
|
background: url(../images/throbber.gif) no-repeat center center;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-content-header {
|
.cms-content-header {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 53px;
|
height: 53px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
// remove extra border on headers
|
// remove extra border on headers
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3{
|
h3{
|
||||||
padding: $grid-y*1.5 0 $grid-y*1.5 $panel-padding-y;
|
padding: $grid-y*1.5 0 $grid-y*1.5 $panel-padding-y;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
&.insert {
|
&.insert {
|
||||||
.back-button {
|
.back-button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ss-insert-media {
|
.ss-insert-media {
|
||||||
padding: $panel-padding-y $panel-padding-x;
|
padding: $panel-padding-y $panel-padding-x;
|
||||||
|
|
||||||
.ui-tabs-panel {
|
.ui-tabs-panel {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar--content {
|
.toolbar--content {
|
||||||
margin-top: -$panel-padding-y;
|
margin-top: -$panel-padding-y;
|
||||||
margin-left: -$panel-padding-x;
|
margin-left: -$panel-padding-x;
|
||||||
margin-right: -$panel-padding-x;
|
margin-right: -$panel-padding-x;
|
||||||
height: auto; // acount for uploading new files
|
height: auto; // acount for uploading new files
|
||||||
}
|
}
|
||||||
|
|
||||||
.ss-insert-link {
|
.ss-insert-link {
|
||||||
padding-left: $panel-padding-x;
|
padding-left: $panel-padding-x;
|
||||||
padding-right: $panel-padding-x;
|
padding-right: $panel-padding-x;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
padding:$grid-y $grid-x*2 ;
|
padding:$grid-y $grid-x*2 ;
|
||||||
|
|
||||||
.ui-tabs-panel {
|
.ui-tabs-panel {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.details{
|
.details{
|
||||||
.file-url{
|
.file-url{
|
||||||
display:block;
|
display:block;
|
||||||
width:300px;
|
width:300px;
|
||||||
@include hide-text-overflow;
|
@include hide-text-overflow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-file-info {
|
.cms-file-info {
|
||||||
.field{
|
.field{
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.CompositeField .text select {
|
.CompositeField .text select {
|
||||||
margin: 5px 0 0 0;
|
margin: 5px 0 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.htmleditorfield-linkform {
|
.htmleditorfield-linkform {
|
||||||
.step2 {
|
.step2 {
|
||||||
|
|
@ -1853,82 +1852,82 @@ body.cms-dialog {
|
||||||
}
|
}
|
||||||
|
|
||||||
.htmleditorfield-mediaform {
|
.htmleditorfield-mediaform {
|
||||||
.grid-field .gridfield-button-delete {
|
.grid-field .gridfield-button-delete {
|
||||||
// TODO Remove from PHP instead of hiding
|
// TODO Remove from PHP instead of hiding
|
||||||
display: none; // delete action shouldn't be allowed here
|
display: none; // delete action shouldn't be allowed here
|
||||||
}
|
}
|
||||||
|
|
||||||
.htmleditorfield-from-cms {
|
.htmleditorfield-from-cms {
|
||||||
&.ss-uploadfield {
|
&.ss-uploadfield {
|
||||||
h4 {
|
h4 {
|
||||||
float: left; // headline and dropdown on same line
|
float: left; // headline and dropdown on same line
|
||||||
margin-top: $grid-y/2; // bring to same baseline as dropdown
|
margin-top: $grid-y/2; // bring to same baseline as dropdown
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middleColumn {
|
.middleColumn {
|
||||||
min-width: 0; // fit within available space
|
min-width: 0; // fit within available space
|
||||||
clear: none; // headline and dropdown on same line
|
clear: none; // headline and dropdown on same line
|
||||||
}
|
}
|
||||||
|
|
||||||
.field.treedropdown {
|
.field.treedropdown {
|
||||||
border-bottom: 0; // don't show border, dropdown and gridfield visually belong together
|
border-bottom: 0; // don't show border, dropdown and gridfield visually belong together
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
width: auto;
|
width: auto;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
|
|
||||||
> .form__field-holder {
|
> .form__field-holder {
|
||||||
margin-left: -15px;
|
margin-left: -15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.treedropdownfield-title {
|
.treedropdownfield-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.treedropdownfield-toggle-panel-link {
|
.treedropdownfield-toggle-panel-link {
|
||||||
padding: 5px 4px 5px 0;
|
padding: 5px 4px 5px 0;
|
||||||
height: 30px; // Fix to hold dropdown search field
|
height: 30px; // Fix to hold dropdown search field
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background: url(../images/sitetree_ss_default_icons.png);
|
background: url(../images/sitetree_ss_default_icons.png);
|
||||||
background-position: -18px -4px;
|
background-position: -18px -4px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.TreeDropdownField:not(.treedropdownfield-open-tree) {
|
.TreeDropdownField:not(.treedropdownfield-open-tree) {
|
||||||
background: 0;
|
background: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ss-assetuploadfield .ss-uploadfield-editandorganize .ss-uploadfield-files .ss-uploadfield-item-info {
|
.ss-assetuploadfield .ss-uploadfield-editandorganize .ss-uploadfield-files .ss-uploadfield-item-info {
|
||||||
background-color: grayscale(#5db4df);
|
background-color: grayscale(#5db4df);
|
||||||
background-image: linear-gradient(to bottom, grayscale(#5db4df) 0%, grayscale(#5db1dd) 8%, grayscale(#439bcb) 50%, grayscale(#3f99cd) 54%, grayscale(#207db6) 96%, grayscale(#1e7cba) 100%);
|
background-image: linear-gradient(to bottom, grayscale(#5db4df) 0%, grayscale(#5db1dd) 8%, grayscale(#439bcb) 50%, grayscale(#3f99cd) 54%, grayscale(#207db6) 96%, grayscale(#1e7cba) 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ss-uploadfield-editandorganize {
|
.ss-uploadfield-editandorganize {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
margin-top: $panel-padding-y;
|
margin-top: $panel-padding-y;
|
||||||
|
|
||||||
.ss-uploadfield-item {
|
.ss-uploadfield-item {
|
||||||
min-height: 32px;
|
min-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ss-uploadfield-item-info {
|
.ss-uploadfield-item-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -1936,93 +1935,93 @@ body.cms-dialog {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.add-to-campaign__dialog {
|
.add-to-campaign__dialog {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
/* no max-height due to overflow: hidden */
|
/* no max-height due to overflow: hidden */
|
||||||
|
|
||||||
.chosen-results > li {
|
.chosen-results > li {
|
||||||
padding: $spacer-y/1.5 $spacer-x;
|
padding: $spacer-y/1.5 $spacer-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled-result {
|
.disabled-result {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
content: "Already contains item";
|
content: "Already contains item";
|
||||||
color: $color-text-blue-link;
|
color: $color-text-blue-link;
|
||||||
margin-left: $spacer-x;
|
margin-left: $spacer-x;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes add-to-campaign--slideup {
|
@keyframes add-to-campaign--slideup {
|
||||||
from {
|
from {
|
||||||
bottom: -100%
|
bottom: -100%
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
bottom: 0
|
bottom: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-to-campaign__response {
|
.add-to-campaign__response {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation:add-to-campaign--slideup 2s 1;
|
animation:add-to-campaign--slideup 2s 1;
|
||||||
background: $white;
|
background: $white;
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.response-wrapper {
|
.response-wrapper {
|
||||||
display: table;
|
display: table;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-bottom: $spacer-y;
|
padding-bottom: $spacer-y;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
display: block;
|
display: block;
|
||||||
padding-bottom: $spacer-y;
|
padding-bottom: $spacer-y;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-to-campaign__response--good {
|
.add-to-campaign__response--good {
|
||||||
span::before {
|
span::before {
|
||||||
content: "☺";
|
content: "☺";
|
||||||
color: $brand-success;
|
color: $brand-success;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-to-campaign__response--error span::before {
|
.add-to-campaign__response--error span::before {
|
||||||
/* This is a sad face emoticon. Some fonts don't carry it. @todo: replace or test in all browsers */
|
/* This is a sad face emoticon. Some fonts don't carry it. @todo: replace or test in all browsers */
|
||||||
content: "☹";
|
content: "☹";
|
||||||
color: $brand-danger;
|
color: $brand-danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
* Search forms (used in AssetAdmin, ModelAdmin, etc)
|
* Search forms (used in AssetAdmin, ModelAdmin, etc)
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
.cms-search-form {
|
.cms-search-form {
|
||||||
margin-bottom: $grid-y * 2;
|
margin-bottom: $grid-y * 2;
|
||||||
|
|
||||||
.filter & {
|
.filter & {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2031,7 +2030,7 @@ body.cms-dialog {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
.step-label > * {
|
.step-label > * {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-label .flyout {
|
.step-label .flyout {
|
||||||
color: $brand-secondary;
|
color: $brand-secondary;
|
||||||
|
|
@ -2046,40 +2045,40 @@ body.cms-dialog {
|
||||||
|
|
||||||
.cms-file-info {
|
.cms-file-info {
|
||||||
|
|
||||||
// Preview might not always be available
|
// Preview might not always be available
|
||||||
.cms-file-info-preview img {
|
.cms-file-info-preview img {
|
||||||
max-width: $grid-x * 22; // Same as ".field label"
|
max-width: $grid-x * 22; // Same as ".field label"
|
||||||
max-height: $grid-x * 16; // Fitting typical info displayed (~5 rows)
|
max-height: $grid-x * 16; // Fitting typical info displayed (~5 rows)
|
||||||
margin-bottom: $spacer-y;
|
margin-bottom: $spacer-y;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
form.small {
|
form.small {
|
||||||
.cms-file-info-preview {
|
.cms-file-info-preview {
|
||||||
width: $grid-x*14;
|
width: $grid-x*14;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: $grid-x*14;
|
max-width: $grid-x*14;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cms-file-info-data {
|
.cms-file-info-data {
|
||||||
// Ensure it fits beside the image preview, increased size for long url
|
// Ensure it fits beside the image preview, increased size for long url
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
|
|
||||||
// Reduced label widths to fit everything in smaller space
|
// Reduced label widths to fit everything in smaller space
|
||||||
.field {
|
.field {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
width: $grid-x*14;
|
width: $grid-x*14;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middleColumn {
|
.middleColumn {
|
||||||
margin-left: $grid-x*15;
|
margin-left: $grid-x*15;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -2087,14 +2086,14 @@ form.small {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.members_grid {
|
.members_grid {
|
||||||
span button#action_gridfield_relationfind {
|
span button#action_gridfield_relationfind {
|
||||||
display:none; //hides find button - redundant functionality
|
display:none; //hides find button - redundant functionality
|
||||||
}
|
}
|
||||||
p button#action_export {
|
p button#action_export {
|
||||||
span.btn-icon-download-csv {
|
span.btn-icon-download-csv {
|
||||||
height:17px; //exact height of icon
|
height:17px; //exact height of icon
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -2102,10 +2101,10 @@ form.small {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
/*.cms-container {
|
/*.cms-container {
|
||||||
.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
|
.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
|
||||||
// Fix pixel gap between nav tree and main page header
|
// Fix pixel gap between nav tree and main page header
|
||||||
margin-left: -1px; // Removed to close gap far right of right tabs?
|
margin-left: -1px; // Removed to close gap far right of right tabs?
|
||||||
}
|
}
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -2113,52 +2112,52 @@ form.small {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
|
|
||||||
.cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings {
|
.cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings {
|
||||||
.optionset li {
|
.optionset li {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldgroup .fieldgroup-field {
|
.fieldgroup .fieldgroup-field {
|
||||||
width: $grid-x * 27;
|
width: $grid-x * 27;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
* Buttons for FileUpload
|
* Buttons for FileUpload
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
.ss-uploadfield-item-edit-all .ui-button-text{
|
.ss-uploadfield-item-edit-all .ui-button-text{
|
||||||
padding-right:0;
|
padding-right:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-details-icon {
|
.toggle-details-icon {
|
||||||
@extend .icon-sprites-32x32;
|
@extend .icon-sprites-32x32;
|
||||||
@include sprite($sprites-32x32-menu-arrow-down);
|
@include sprite($sprites-32x32-menu-arrow-down);
|
||||||
|
|
||||||
.ss-uploadfield-item-edit-all & {
|
.ss-uploadfield-item-edit-all & {
|
||||||
@extend .icon-sprites-32x32;
|
@extend .icon-sprites-32x32;
|
||||||
@include sprite($sprites-32x32-menu-arrow-deselected-down);
|
@include sprite($sprites-32x32-menu-arrow-deselected-down);
|
||||||
|
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
width:8px;
|
width:8px;
|
||||||
height:8px;
|
height:8px;
|
||||||
padding-left:5px;
|
padding-left:5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.opened {
|
&.opened {
|
||||||
@extend .icon-sprites-32x32;
|
@extend .icon-sprites-32x32;
|
||||||
@include sprite($sprites-32x32-menu-arrow-up);
|
@include sprite($sprites-32x32-menu-arrow-up);
|
||||||
|
|
||||||
.ss-uploadfield-item-edit-all &{
|
.ss-uploadfield-item-edit-all &{
|
||||||
@extend .icon-sprites-32x32;
|
@extend .icon-sprites-32x32;
|
||||||
@include sprite($sprites-32x32-menu-arrow-deselected-up);
|
@include sprite($sprites-32x32-menu-arrow-deselected-up);
|
||||||
|
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** --------------------------------------------
|
/** --------------------------------------------
|
||||||
|
|
@ -2167,5 +2166,5 @@ form.small {
|
||||||
* -------------------------------------------- */
|
* -------------------------------------------- */
|
||||||
.cms .btn-toolbar > .cms-preview-toggle-link,
|
.cms .btn-toolbar > .cms-preview-toggle-link,
|
||||||
.cms .cms-navigator > .cms-preview-toggle-link{
|
.cms .cms-navigator > .cms-preview-toggle-link{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
/**
|
// This file contains the default theme definitions for the admin interface.
|
||||||
* This file contains the default theme definitions for the admin interface.
|
// Please put mostly SCSS variable definitions in here,
|
||||||
* Please put mostly SCSS variable definitions in here,
|
// and leave the actual styling to _style.scss and auxilliary files.
|
||||||
* and leave the actual styling to _style.scss and auxilliary files.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "../../variables.scss";
|
@import "../../variables";
|
||||||
|
|
||||||
|
//--------------------------------------------------
|
||||||
|
// Colours
|
||||||
|
//--------------------------------------------------
|
||||||
|
|
||||||
/** -----------------------------------------------
|
|
||||||
* Colours
|
|
||||||
* ------------------------------------------------ */
|
|
||||||
$color-base: #b0bec7 !default;
|
$color-base: #b0bec7 !default;
|
||||||
$color-widget-bg: lighten($color-base, 20%) !default;
|
$color-widget-bg: lighten($color-base, 20%) !default;
|
||||||
|
|
||||||
|
|
@ -21,14 +20,14 @@ $color-theme-active: $color-theme-base;
|
||||||
|
|
||||||
// CMS 4 menu
|
// CMS 4 menu
|
||||||
$base-menu: #d8e4eb;
|
$base-menu: #d8e4eb;
|
||||||
$base-menu-bg: lighten($base-menu,5%);
|
$base-menu-bg: lighten($base-menu, 5%);
|
||||||
$base-menu-icon: darken($base-menu, 26%);
|
$base-menu-icon: darken($base-menu, 26%);
|
||||||
|
|
||||||
//offical silverstripe brand color
|
// offical silverstripe brand color
|
||||||
$color-brand-bg: #005a93 !default;
|
$color-brand-bg: #005a93 !default;
|
||||||
$color-brand: #43c7f4 !default;
|
$color-brand: #43c7f4 !default;
|
||||||
|
|
||||||
/* Keep as solid colours transparent borders wont work in ie */
|
// Keep as solid colours transparent borders wont work in i
|
||||||
$color-darker-bg: #f0f2f4 !default;
|
$color-darker-bg: #f0f2f4 !default;
|
||||||
$color-dark-bg: #142136 !default;
|
$color-dark-bg: #142136 !default;
|
||||||
$color-dark-separator: #19435c !default;
|
$color-dark-separator: #19435c !default;
|
||||||
|
|
@ -39,7 +38,7 @@ $color-light-separator: #D2D5D8 !default; // Horiontal dividers
|
||||||
$color-tab: #d9d9d9 !default;
|
$color-tab: #d9d9d9 !default;
|
||||||
$color-dark-grey: #7B8C91 !default;
|
$color-dark-grey: #7B8C91 !default;
|
||||||
|
|
||||||
/* Only for use as shadows as they wont work in older browsers */
|
// Only for use as shadows as they wont work in older browsers
|
||||||
$color-shadow-light: rgba(201, 205, 206, 0.8) !default;
|
$color-shadow-light: rgba(201, 205, 206, 0.8) !default;
|
||||||
$color-shadow-dark: rgba(107, 120, 123, 0.5) !default;
|
$color-shadow-dark: rgba(107, 120, 123, 0.5) !default;
|
||||||
$color-shadow-black: rgba(0, 0, 0, 0.6) !default;
|
$color-shadow-black: rgba(0, 0, 0, 0.6) !default;
|
||||||
|
|
@ -55,7 +54,8 @@ $color-menu-background: #c6d7df !default;
|
||||||
$color-menu-border: #8c99a1 !default;
|
$color-menu-border: #8c99a1 !default;
|
||||||
$color-panel-background: #c6d7df !default;
|
$color-panel-background: #c6d7df !default;
|
||||||
|
|
||||||
$color-text-default: #4f5861 !default; /* new in SilverStripe 4 */
|
// new in SilverStripe 4
|
||||||
|
$color-text-default: #4f5861 !default;
|
||||||
$color-text: #66727d !default;
|
$color-text: #66727d !default;
|
||||||
$color-text-light: white !default;
|
$color-text-light: white !default;
|
||||||
$color-text-light-link: white !default;
|
$color-text-light-link: white !default;
|
||||||
|
|
@ -83,30 +83,30 @@ $color-notice: #93CDE8 !default; // blue
|
||||||
$color-warning: #E9D104 !default; // yellow
|
$color-warning: #E9D104 !default; // yellow
|
||||||
$color-error: #e68288 !default; // red
|
$color-error: #e68288 !default; // red
|
||||||
$color-good: #72c34b !default; // green
|
$color-good: #72c34b !default; // green
|
||||||
/*$color-optional: #a1d2eb !default; */ // orange
|
// $color-optional: #a1d2eb !default; // orange
|
||||||
|
|
||||||
$color-cms-batchactions-menu-background: #f5f5f5 !default;
|
$color-cms-batchactions-menu-background: #f5f5f5 !default;
|
||||||
$color-cms-batchactions-menu-selected-background: #fffcdc !default;
|
$color-cms-batchactions-menu-selected-background: #fffcdc !default;
|
||||||
|
|
||||||
/** -----------------------------------------------
|
//--------------------------------------------------
|
||||||
* Textures
|
// Textures
|
||||||
* ----------------------------------------------- */
|
//--------------------------------------------------
|
||||||
$tab-panel-texture-color: #f6f7f8 !default;
|
$tab-panel-texture-color: #f6f7f8 !default;
|
||||||
$tab-panel-texture-background: $tab-panel-texture-color url(../images/textures/bg_cms_main_content.png) repeat top left !default;
|
$tab-panel-texture-background: $tab-panel-texture-color url("../images/textures/bg_cms_main_content.png") repeat top left !default;
|
||||||
|
|
||||||
|
|
||||||
/** -----------------------------------------------
|
//--------------------------------------------------
|
||||||
* Grid Units (px)
|
// Grid Units (px)
|
||||||
*
|
//
|
||||||
* We have a vertical rhythm that the grid is based off
|
// We have a vertical rhythm that the grid is based off
|
||||||
* both x (=horizontal) and y (=vertical). All internal padding and
|
// both x (=horizontal) and y (=vertical). All internal padding and
|
||||||
* margins are scaled to this and accounting for paragraphs
|
// margins are scaled to this and accounting for paragraphs
|
||||||
* ------------------------------------------------ */
|
//--------------------------------------------------
|
||||||
$grid-y: 8px !default;
|
$grid-y: 8px !default;
|
||||||
$grid-x: 8px !default;
|
$grid-x: 8px !default;
|
||||||
|
|
||||||
/** -----------------------------------------------
|
//--------------------------------------------------
|
||||||
* Application Logo (CMS Logo) Must be 24px x 24px
|
// Application Logo (CMS Logo) Must be 24px x 24px
|
||||||
* ------------------------------------------------ */
|
//--------------------------------------------------
|
||||||
$application-logo-small: url("../images/logo_small.png") !default;
|
$application-logo-small: url("../images/logo_small.png") !default;
|
||||||
$application-logo-small-2x: url("../images/logo_small@2x.png") !default;
|
$application-logo-small-2x: url("../images/logo_small@2x.png") !default;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<% if $Backlink %>
|
<% if $Backlink %>
|
||||||
<div class="cms_backlink">
|
<div class="cms-backlink">
|
||||||
<a class="btn btn-secondary font-icon-left-open-big toolbar__back-button btn--no-text" href="$Backlink"></a>
|
<a class="btn btn-secondary font-icon-left-open-big toolbar__back-button btn--no-text" href="$Backlink"></a>
|
||||||
</div>
|
</div>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
|
|
|
||||||
|
|
@ -1,148 +1,160 @@
|
||||||
body {
|
body {
|
||||||
background: #eee !important;
|
background: #eee !important;
|
||||||
margin:0;
|
margin: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding:0;
|
padding: 0;
|
||||||
font-family: Helvetica,Arial,sans-serif;
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
margin:0 0 6px 0;
|
margin: 0 0 6px 0;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
background-color: #003050;
|
background-color: #003050;
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%));
|
background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%));
|
||||||
|
|
||||||
// try to get the info above the template with z-index
|
// try to get the info above the template with z-index
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
h1 {
|
|
||||||
margin: 0 0 6px 0;
|
|
||||||
padding: 0 32px 0 0;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 24px;
|
|
||||||
text-shadow: 0 1px darken(#003050, 5%);
|
|
||||||
line-height: 30px;
|
|
||||||
|
|
||||||
background: url(../images/logo_small.png) no-repeat right 3px;
|
h1 {
|
||||||
}
|
margin: 0 0 6px 0;
|
||||||
|
padding: 0 32px 0 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24px;
|
||||||
|
text-shadow: 0 1px darken(#003050, 5%);
|
||||||
|
line-height: 30px;
|
||||||
|
|
||||||
h3 {
|
background: url("../images/logo_small.png") no-repeat right 3px;
|
||||||
color: #7da4be;
|
}
|
||||||
font-size: 16px;
|
|
||||||
line-height: 18px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
h3 {
|
||||||
color: #fff;
|
color: #7da4be;
|
||||||
font-weight: bold;
|
font-size: 16px;
|
||||||
text-decoration: none;
|
line-height: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover,
|
p {
|
||||||
&:active {
|
margin: 0;
|
||||||
color: #fff;
|
font-size: 14px;
|
||||||
text-decoration: underline;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-bottom: 6px solid #ccdef3;
|
border-bottom: 6px solid #ccdef3;
|
||||||
height: 23px;
|
height: 23px;
|
||||||
background-color: #666673;
|
background-color: #666673;
|
||||||
padding: 4px 0 2px 6px;
|
padding: 4px 0 2px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trace,
|
.trace,
|
||||||
.build,
|
.build,
|
||||||
.options {
|
.options {
|
||||||
padding:6px 12px;
|
padding: 6px 12px;
|
||||||
|
|
||||||
background: #eee !important;
|
background: #eee !important;
|
||||||
// try to get the info above the template with z-index
|
// try to get the info above the template with z-index
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
li {
|
|
||||||
font-size:14px;
|
li {
|
||||||
margin:6px 0;
|
font-size: 14px;
|
||||||
}
|
margin: 6px 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: #111;
|
color: #111;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
border: 1px solid rgba(0,0,0,.08);
|
border: 1px solid rgba(0, 0, 0, .08);
|
||||||
color: #333;
|
color: #333;
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color:#999;
|
color: #999;
|
||||||
}
|
}
|
||||||
.error {
|
|
||||||
color:#f00;
|
.error {
|
||||||
}
|
color: #f00;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0 0 12px 0;
|
margin: 0 0 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0 0 6px 0;
|
margin: 0 0 6px 0;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0 0 18px 0;
|
margin: 0 0 18px 0;
|
||||||
padding: 0 0 0 18px;
|
padding: 0 0 0 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
border: 1px solid #b2b2b2;
|
border: 1px solid #b2b2b2;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
padding: 17px;
|
padding: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pass {
|
.pass {
|
||||||
margin-top:18px; padding:2px 20px 2px 40px; color:#006600; background:#E2F9E3; border: 1px solid #8DD38D;
|
margin-top: 18px;
|
||||||
border-radius:4px;
|
padding: 2px 20px 2px 40px;
|
||||||
|
color: #006600;
|
||||||
|
background: #E2F9E3;
|
||||||
|
border: 1px solid #8DD38D;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fail {
|
.fail {
|
||||||
margin-top:18px; padding:2px 20px 2px 40px; color:#C80700; background:#FFE9E9;
|
margin-top: 18px;
|
||||||
border:1px solid #C80700; border-radius:4px;
|
padding: 2px 20px 2px 40px;
|
||||||
|
color: #C80700;
|
||||||
|
background: #FFE9E9;
|
||||||
|
border: 1px solid #C80700;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue