Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

  • Loading branch information...
commit 4437f9db4f1b6a6b8a813f574f082991becde5bc 1 parent 0a75a34
Ingo Schommer chillu authored
11 admin/css/screen.css
View
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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));
Please sign in to comment.
Something went wrong with that request. Please try again.