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