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

MINOR Shorter SCSS $grid-* variables to promote wider usage

Browse Source
This commit is contained in:
Ingo Schommer 2012-02-14 11:18:58 +01:00
parent 0a75a34af1
commit 4437f9db4f
10 changed files with 97 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
admin/css/screen.css
View File

@ -22,7 +22,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
/** ----------------------------------------------- Colours ------------------------------------------------ */
/** ----------------------------------------------- Textures ----------------------------------------------- */
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both vertical and horizontal. 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 ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
/** ----------------------------- Custom mixins ------------------------------ */
/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
@ -383,15 +383,6 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
.cms-panel .cms-panel-toggle a { display: block; text-align: right; padding: 4px 0; width: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#b0bec7, #92a5b2); background-image: -moz-linear-gradient(#b0bec7, #92a5b2); background-image: -o-linear-gradient(#b0bec7, #92a5b2); background-image: -ms-linear-gradient(#b0bec7, #92a5b2); background-image: linear-gradient(#b0bec7, #92a5b2); text-decoration: none; }
.cms-panel .cms-panel-toggle a span { display: inline-block; margin: 0 5px; color: #1f1f1f; font-size: 16px; }
.cms-panel .cms-panel-toggle a.toggle-expand { width: 40px; }
.cms-panel.collapsed { /*
.cms-panel-header {
@include rotate(-90deg);
position: relative;
top: $grid-vertical * 10;
border: none;
padding: 0;
}
*/ }
.cms-panel.collapsed .cms-panel-content { display: none; }
.cms-panel .cms-panel-content-collapsed { width: 40px; }
.cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { border-bottom: 0; margin-left: 8px; -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

2
admin/scss/_ModelAdmin.scss
View File

@ -36,7 +36,7 @@
border:1px solid #aaa; //following color from the jquery smoothness theme
margin-top:-1px;
background:#fff; //backround is kept white to follow tabs
padding:$grid-horizontal;
padding:$grid-x;
h3 {
margin-top:16px;

62
admin/scss/_forms.scss
View File

@ -60,7 +60,7 @@
padding-left: 24px;
padding-right: 6px;
font-weight: bold;
margin-left: $grid-horizontal;
margin-left: $grid-x;
color: $color-text-light;
border-color: $color-button-constructive-border;
border-bottom-color: darken($color-button-constructive-border, 10%);
@ -108,8 +108,8 @@ form.nostyle {
// bottom padding accounts for the border and we have a negative
// margin with a postive padding to ensure the bottom border extends
// over the edges
padding: 0 0 $grid-vertical - 1 0;
margin: 0 0 $grid-vertical 0;
padding: 0 0 $grid-y - 1 0;
margin: 0 0 $grid-y 0;
// using the legacy version as some of the more complex form fields
@ -128,9 +128,9 @@ form.nostyle {
&.left {
float: left;
display: block;
width: $grid-horizontal * 22;
padding: $grid-vertical $grid-horizontal $grid-vertical 0;
line-height: $grid-vertical * 2;
width: $grid-x * 22;
padding: $grid-y $grid-x $grid-y 0;
line-height: $grid-y * 2;
font-weight: bold;
@include text-shadow(1px 1px 0 $color-text-shadow);
}
@ -141,12 +141,12 @@ form.nostyle {
}
.middleColumn {
margin-left: $grid-horizontal * 23;
margin-left: $grid-x * 23;
}
span.readonly {
padding-top: $grid-vertical;
line-height: $grid-vertical * 2;
padding-top: $grid-y;
line-height: $grid-y * 2;
display: block;
}
@ -163,7 +163,7 @@ form.nostyle {
select,
.TreeDropdownField {
width: 100%;
max-width: $grid-horizontal * 64;
max-width: $grid-x * 64;
@include box-sizing(border-box);
}
@ -172,8 +172,8 @@ form.nostyle {
.TreeDropdownField {
background: #fff;
border: 1px solid lighten($color-medium-separator, 20%);
padding: ($grid-vertical - 1) ($grid-horizontal - 1);
line-height: $grid-vertical * 2;
padding: ($grid-y - 1) ($grid-x - 1);
line-height: $grid-y * 2;
margin: 0;
outline: none;
@include transition(0.2s box-shadow ease-in);
@ -215,12 +215,12 @@ form.stacked .field, .field.stacked {
form.small .field, .field.small {
label {
&.left {
width: $grid-horizontal * 14;
width: $grid-x * 14;
}
}
.middleColumn {
margin-left: $grid-horizontal * 15;
margin-left: $grid-x * 15;
}
input.text,
@ -253,7 +253,7 @@ form.small .field, .field.small {
/* dropdowns */
.dropdown {
select {
margin-top: $grid-vertical;
margin-top: $grid-y;
}
}
@ -263,8 +263,8 @@ form.small .field, .field.small {
li {
font-size: 11px;
line-height: $grid-vertical * 2;
padding: $grid-vertical / 2 $grid-horizontal / 2;
line-height: $grid-y * 2;
padding: $grid-y / 2 $grid-x / 2;
}
}
}
@ -299,7 +299,7 @@ form.small .field, .field.small {
/* Date Fields */
input.hasDatepicker {
width: 50%;
max-width: ($grid-horizontal * 12);
max-width: ($grid-x * 12);
}
}
@ -347,11 +347,11 @@ form.small .field, .field.small {
}
/* all buttons */
padding: ($grid-vertical - 3) ($grid-horizontal + 4);
padding: ($grid-y - 3) ($grid-x + 4);
font-weight: bold;
text-decoration: none;
margin: 0;
line-height: $grid-vertical * 2;
line-height: $grid-y * 2;
color: lighten($color-text-dark, 10%);
background-color: $color-button-generic;
border: 1px solid $color-button-generic-border;
@ -426,7 +426,7 @@ form.small .field, .field.small {
}
&.ss-ui-button-small {
padding: ($grid-vertical/2) ($grid-horizontal/2);
padding: ($grid-y/2) ($grid-x/2);
}
&.ui-state-highlight {
@ -463,8 +463,8 @@ form.small .field, .field.small {
.fieldgroup-field {
float: left;
display: block;
width: $grid-horizontal * 23;
padding-right: $grid-horizontal;
width: $grid-x * 23;
padding-right: $grid-x;
&.odd {
@ -484,8 +484,8 @@ form.small .field, .field.small {
* Checkbox Field
* ---------------------------------------------------- */
.field.checkbox {
padding-left: $grid-horizontal * 23;
margin-bottom: $grid-vertical;
padding-left: $grid-x * 23;
margin-bottom: $grid-y;
input {
margin-left: 0;
@ -499,8 +499,8 @@ input.checkbox {
* Radiobutton Field
* ---------------------------------------------------- */
.field.radio {
padding-left: $grid-horizontal * 23;
margin-bottom: $grid-vertical;
padding-left: $grid-x * 23;
margin-bottom: $grid-y;
input {
margin-left: 0;
@ -519,9 +519,9 @@ input.radio {
li {
float: left;
display: block;
width: $grid-horizontal * 27;
padding-bottom: $grid-horizontal;
line-height: $grid-vertical * 2;
width: $grid-x * 27;
padding-bottom: $grid-x;
line-height: $grid-y * 2;
list-style: none;
input {
@ -533,7 +533,7 @@ input.radio {
label {
display: inline;
cursor: pointer;
padding-left: $grid-vertical;
padding-left: $grid-y;
}
}

14
admin/scss/_menu.scss
View File

@ -10,7 +10,7 @@
.cms-logo-header {
background-color: darken($color-dark-bg, 10%);
position: relative;
padding: $grid-vertical * 2 8px 0 4px;
padding: $grid-y * 2 8px 0 4px;
line-height: 24px;
@include background-image(
@ -84,16 +84,16 @@
z-index: 80;
background: $color-menu-background;
border-right: 1px solid $color-menu-border;
width: ($grid-horizontal * 24) - 1; /* 8x24 - 1 */
width: ($grid-x * 24) - 1; /* 8x24 - 1 */
@include box-shadow($color-shadow-dark 0 0 $grid-horizontal);
@include box-shadow($color-shadow-dark 0 0 $grid-x);
a {
text-decoration: none;
}
.cms-panel-content {
width: ($grid-horizontal * 24) - 1; /* 8x24 - 1 */
width: ($grid-x * 24) - 1; /* 8x24 - 1 */
overflow-x: hidden;
overflow-y: auto;
}
@ -133,15 +133,15 @@
li {
a {
display: block;
height: $grid-vertical * 3;
line-height: $grid-vertical * 3;
height: $grid-y * 3;
line-height: $grid-y * 3;
font-size: $font-base-size;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-shadow: lighten($color-base, 5%) 1px 1px 0;
color: $color-text-dark;
padding: ($grid-vertical - 1) 5px ($grid-vertical - 1) 8px;
padding: ($grid-y - 1) 5px ($grid-y - 1) 8px;
background-color: $color-base;
cursor: pointer;

90
admin/scss/_style.scss
View File

@ -25,7 +25,7 @@ html,body {
@include global-reset;
font-size: $font-base-size;
line-height: $grid-vertical * 2;
line-height: $grid-y * 2;
font-family: $font-family;
color: $color-text;
}
@ -99,8 +99,8 @@ body.cms {
.cms-content-header {
padding: ($grid-vertical - 8) $grid-horizontal $grid-vertical;
height: $grid-vertical * 4;
padding: ($grid-y - 8) $grid-x $grid-y;
height: $grid-y * 4;
z-index: 60;
background: {
@ -110,12 +110,12 @@ body.cms {
h2 {
float: left;
padding: $grid-vertical $grid-horizontal 0 0;
padding: $grid-y $grid-x 0 0;
font-size: $font-base-size + 2;
line-height: $grid-horizontal * 3;
line-height: $grid-x * 3;
font-weight: bold;
text-shadow: darken($color-widget-bg, 15%) 1px 1px 0;
width: $grid-horizontal * 22 /* 24 - (padding on each side + margin) */;
width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
margin: 0;
@include hide-text-overflow();
}
@ -136,8 +136,8 @@ body.cms {
margin:0;
a {
font-weight: bold;
line-height: $grid-vertical * 2;
padding: ($grid-vertical * 2 - 4) ($grid-horizontal * 2 + 4) $grid-vertical + 3;
line-height: $grid-y * 2;
padding: ($grid-y * 2 - 4) ($grid-x * 2 + 4) $grid-y + 3;
text-indent: -9999em;
&.content-treeview {
@ -287,11 +287,11 @@ body.cms {
* -------------------------------------------- */
.cms-content-actions {
margin: $grid-vertical $grid-horizontal*2 $grid-vertical*2 $grid-horizontal*2;
height: $grid-vertical*4;
margin: $grid-y $grid-x*2 $grid-y*2 $grid-x*2;
height: $grid-y*4;
z-index: 70;
@include box-shadow($tab-panel-texture-color 0 $grid-vertical*-2 $grid-vertical*2);
@include box-shadow($tab-panel-texture-color 0 $grid-y*-2 $grid-y*2);
}
@ -300,8 +300,8 @@ body.cms {
* -------------------------------------------- */
.message {
margin: 0 0 $grid_vertical 0;
padding: $grid_vertical - 1 $grid_horizontal - 1;
margin: 0 0 $grid-y 0;
padding: $grid-y - 1 $grid-x - 1;
font-weight: bold;
border: 1px black solid;
@ -497,26 +497,26 @@ body.cms {
*/
.cms-content-tools {
background-color: darken($color-widget-bg, 5%);
width: $grid-horizontal * 24;
width: $grid-x * 24;
border-right: 1px solid darken($color-widget-bg, 15%);
overflow-y: auto;
overflow-x: hidden;
z-index: 70;
@include box-shadow($color-shadow-dark 0 0 ($grid-horizontal / 2));
@include box-shadow($color-shadow-dark 0 0 ($grid-x / 2));
float: left;
position: relative;
.cms-panel-header {
padding: 0;
margin: 0 0 $grid-vertical - 1;
line-height: $grid-vertical * 3;
margin: 0 0 $grid-y - 1;
line-height: $grid-y * 3;
@include doubleborder(bottom, $color-light-separator, lighten($color-light-separator, 10%))
}
.cms-panel-content {
width: ($grid-horizontal * 22);
padding: $grid-vertical $grid-horizontal;
width: ($grid-x * 22);
padding: $grid-y $grid-x;
overflow-x: hidden;
overflow-y: auto;
}
@ -531,7 +531,7 @@ body.cms {
h2 {
text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
width: $grid-horizontal * 22 /* 24 - (padding on each side + margin) */;
width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
color: lighten($color-widget-bg, 60%);
@include hide-text-overflow();
@ -540,7 +540,7 @@ body.cms {
h3,h4,h5 {
font-weight: bold;
line-height: $grid-vertical * 2;
line-height: $grid-y * 2;
}
h3 {
font-size: $font-base-size + 1;
@ -561,7 +561,7 @@ body.cms {
float: none;
width: auto;
font-size: 11px;
padding: 0 $grid-horizontal 4px 0;
padding: 0 $grid-x 4px 0;
}
.middleColumn {
@ -588,7 +588,7 @@ body.cms {
/* buttons now need to line with with reduced input sizes */
.ss-ui-button {
padding: 5px $grid-horizontal;
padding: 5px $grid-x;
}
.fieldgroup {
@ -638,7 +638,7 @@ body.cms {
td {
border-bottom: 1px solid darken($color-widget-bg, 10%);
padding: $grid-vertical - 1 2px;
padding: $grid-y - 1 2px;
font-size: 11px;
}
}
@ -786,7 +786,7 @@ form.member-profile-form {
}
input.customFormat {
width: $grid-horizontal * 10;
width: $grid-x * 10;
border: 1px solid #ccc !important;
padding: 3px;
display: inline-block;
@ -849,7 +849,7 @@ form.member-profile-form {
overflow-y: auto;
overflow-x: auto;
background: none;
@include box-shadow($color-shadow-dark 0 0 ($grid-horizontal / 2));
@include box-shadow($color-shadow-dark 0 0 ($grid-x / 2));
}
}
@ -866,7 +866,7 @@ form.member-profile-form {
a {
display: block;
text-align: right;
padding: $grid-vertical/2 0;
padding: $grid-y/2 0;
width: 100%;
@include background-image(
@ -894,15 +894,13 @@ form.member-profile-form {
display: none;
}
/*
.cms-panel-header {
@include rotate(-90deg);
position: relative;
top: $grid-vertical * 10;
border: none;
padding: 0;
}
*/
//.cms-panel-header {
// @include rotate(-90deg);
// position: relative;
// top: $grid-y * 10;
// border: none;
// padding: 0;
//}
}
@ -911,7 +909,7 @@ form.member-profile-form {
h2, h3 {
border-bottom: 0;
margin-left: $grid-vertical;
margin-left: $grid-y;
@include transform-origin(bottom, left);
@include rotate(90deg);
}
@ -945,8 +943,8 @@ form.member-profile-form {
}
.cms-panel-padded {
width: ($grid-horizontal * 22);
padding: $grid-vertical*2 $grid-horizontal*2;
width: ($grid-x * 22);
padding: $grid-y*2 $grid-x*2;
overflow-x: hidden;
overflow-y: auto;
}
@ -979,7 +977,7 @@ form.member-profile-form {
.ui-dialog {
background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
border: 3px solid #000 !important;
border-radius: $grid-vertical;
border-radius: $grid-y;
overflow: visible;
padding: 0;
@ -987,7 +985,7 @@ form.member-profile-form {
.ui-dialog-titlebar.ui-widget-header {
font-size: $font-base-size+2;
background-color: #92a5b2;
padding: $grid-vertical/2 $grid-horizontal/2 $grid-vertical/2 $grid-horizontal*2;
padding: $grid-y/2 $grid-x/2 $grid-y/2 $grid-x*2;
border-bottom: 2px solid #8399a7;
@include background-image(linear-gradient(#ced7dc, #92a5b2));
}
@ -1006,12 +1004,12 @@ body.cms-dialog {
.cms-dialog-content {
background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
padding-bottom: $grid-vertical;
padding-bottom: $grid-y;
.Actions {
overflow: auto;
margin: $grid-vertical 0;
padding-bottom: $grid-vertical;
margin: $grid-y 0;
padding-bottom: $grid-y;
float: right;
}
@ -1028,7 +1026,7 @@ body.cms-dialog {
background: none;
.ui-tabs-nav {
padding: $grid-horizontal 0 0 0;
padding: $grid-x 0 0 0;
border: none;
li {
@ -1063,7 +1061,7 @@ body.cms-dialog {
* -------------------------------------------- */
.htmleditorfield-linkform {
.step2 {
margin-bottom: $grid-horizontal*2;
margin-bottom: $grid-x*2;
}
}

10
admin/scss/_typography.scss
View File

@ -7,13 +7,13 @@
.cms {
h2, h3, h4, h5 {
font-weight: bold;
margin: $grid-vertical * 2 0 $grid-vertical * 2 0;
line-height: $grid-vertical * 2;
margin: $grid-y * 2 0 $grid-y * 2 0;
line-height: $grid-y * 2;
}
h2 {
font-size: $font-base-size + 6;
line-height: $grid-vertical * 3;
line-height: $grid-y * 3;
}
h3 {
@ -29,8 +29,8 @@
}
p {
line-height: $grid-vertical * 2;
margin-bottom: $grid-vertical * 2;
line-height: $grid-y * 2;
margin-bottom: $grid-y * 2;
}
code {

2
admin/scss/_uitheme.scss
View File

@ -39,7 +39,7 @@
.ui-tabs-panel {
background: transparent; // default it's white
padding: $grid-vertical * 2 $grid-horizontal * 5 $grid-vertical * 2 ($grid-horizontal * 3 + 1);
padding: $grid-y * 2 $grid-x * 5 $grid-y * 2 ($grid-x * 3 + 1);
}
}

6
admin/scss/themes/_default.scss
View File

@ -75,11 +75,11 @@ $font-base-size: 12px;
* Grid Units (px)
*
* We have a vertical rhythm that the grid is based off
* both vertical and horizontal. All internal padding and
* both x (=horizontal) and y (=vertical). All internal padding and
* margins are scaled to this and accounting for paragraphs
* ------------------------------------------------ */
$grid-vertical: 8px;
$grid-horizontal: 8px;
$grid-y: 8px;
$grid-x: 8px;
/** -----------------------------------------------
* Application Logo (CMS Logo) Must be 24px x 24px

4
scss/UploadField.scss
View File

@ -174,7 +174,7 @@
height: 0;
overflow: hidden;
clear: both;
margin-top: $grid-vertical;
margin-top: $grid-y;
iframe {
width: 100%;
}
@ -188,7 +188,7 @@
}
body.ss-uploadfield-edit-iframe {
padding: $grid-vertical*2 $grid-horizontal*2;
padding: $grid-y*2 $grid-x*2;
}
.ss-upload {

4
scss/_sprites.scss
View File

@ -46,7 +46,7 @@ $sprites16: sprite-map("sprites_16x16/*.png", $spacing: 10px);
padding-left: 25px;
padding-right: 7px;
font-weight: bold;
margin-left: $grid-horizontal;
margin-left: $grid-x;
color: $color-text-light;
border-color: $color-button-constructive-border;
border-bottom-color: darken($color-button-constructive-border, 10%);
@ -72,7 +72,7 @@ $sprites16: sprite-map("sprites_16x16/*.png", $spacing: 10px);
);
}
&:active, &:focus {
padding: $grid-vertical 8px $grid_vertical 26px;
padding: $grid-y 8px $grid-y 26px;
border: none;
@include background(darken($color-button-constructive, 2%) sprite($sprites16, $name, 7, 7) no-repeat);
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));