Skip to content

Commit

Permalink
MINOR Shorter SCSS $grid-* variables to promote wider usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@chillu
chillu committed Feb 14, 2012
1 parent 0a75a34 commit 4437f9d
Show file tree
Hide file tree
Showing 10 changed files with 97 additions and 108 deletions.
11 changes: 1 addition & 10 deletions admin/css/screen.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion admin/scss/_ModelAdmin.scss
View file
Expand Up @@ -36,7 +36,7 @@
border:1px solid #aaa; //following color from the jquery smoothness theme border:1px solid #aaa; //following color from the jquery smoothness theme
margin-top:-1px; margin-top:-1px;
background:#fff; //backround is kept white to follow tabs background:#fff; //backround is kept white to follow tabs
padding:$grid-horizontal; padding:$grid-x;


h3 { h3 {
margin-top:16px; margin-top:16px;
Expand Down
62 changes: 31 additions & 31 deletions admin/scss/_forms.scss
View file
Expand Up @@ -60,7 +60,7 @@
padding-left: 24px; padding-left: 24px;
padding-right: 6px; padding-right: 6px;
font-weight: bold; font-weight: bold;
margin-left: $grid-horizontal; margin-left: $grid-x;
color: $color-text-light; color: $color-text-light;
border-color: $color-button-constructive-border; border-color: $color-button-constructive-border;
border-bottom-color: darken($color-button-constructive-border, 10%); border-bottom-color: darken($color-button-constructive-border, 10%);
Expand Down Expand Up @@ -108,8 +108,8 @@ form.nostyle {
// bottom padding accounts for the border and we have a negative // bottom padding accounts for the border and we have a negative
// margin with a postive padding to ensure the bottom border extends // margin with a postive padding to ensure the bottom border extends
// over the edges // over the edges
padding: 0 0 $grid-vertical - 1 0; padding: 0 0 $grid-y - 1 0;
margin: 0 0 $grid-vertical 0; margin: 0 0 $grid-y 0;




// using the legacy version as some of the more complex form fields // using the legacy version as some of the more complex form fields
Expand All @@ -128,9 +128,9 @@ form.nostyle {
&.left { &.left {
float: left; float: left;
display: block; display: block;
width: $grid-horizontal * 22; width: $grid-x * 22;
padding: $grid-vertical $grid-horizontal $grid-vertical 0; padding: $grid-y $grid-x $grid-y 0;
line-height: $grid-vertical * 2; line-height: $grid-y * 2;
font-weight: bold; font-weight: bold;
@include text-shadow(1px 1px 0 $color-text-shadow); @include text-shadow(1px 1px 0 $color-text-shadow);
} }
Expand All @@ -141,12 +141,12 @@ form.nostyle {
} }


.middleColumn { .middleColumn {
margin-left: $grid-horizontal * 23; margin-left: $grid-x * 23;
} }


span.readonly { span.readonly {
padding-top: $grid-vertical; padding-top: $grid-y;
line-height: $grid-vertical * 2; line-height: $grid-y * 2;
display: block; display: block;
} }


Expand All @@ -163,7 +163,7 @@ form.nostyle {
select, select,
.TreeDropdownField { .TreeDropdownField {
width: 100%; width: 100%;
max-width: $grid-horizontal * 64; max-width: $grid-x * 64;
@include box-sizing(border-box); @include box-sizing(border-box);
} }


Expand All @@ -172,8 +172,8 @@ form.nostyle {
.TreeDropdownField { .TreeDropdownField {
background: #fff; background: #fff;
border: 1px solid lighten($color-medium-separator, 20%); border: 1px solid lighten($color-medium-separator, 20%);
padding: ($grid-vertical - 1) ($grid-horizontal - 1); padding: ($grid-y - 1) ($grid-x - 1);
line-height: $grid-vertical * 2; line-height: $grid-y * 2;
margin: 0; margin: 0;
outline: none; outline: none;
@include transition(0.2s box-shadow ease-in); @include transition(0.2s box-shadow ease-in);
Expand Down Expand Up @@ -215,12 +215,12 @@ form.stacked .field, .field.stacked {
form.small .field, .field.small { form.small .field, .field.small {
label { label {
&.left { &.left {
width: $grid-horizontal * 14; width: $grid-x * 14;
} }
} }


.middleColumn { .middleColumn {
margin-left: $grid-horizontal * 15; margin-left: $grid-x * 15;
} }


input.text, input.text,
Expand Down Expand Up @@ -253,7 +253,7 @@ form.small .field, .field.small {
/* dropdowns */ /* dropdowns */
.dropdown { .dropdown {
select { select {
margin-top: $grid-vertical; margin-top: $grid-y;
} }
} }


Expand All @@ -263,8 +263,8 @@ form.small .field, .field.small {


li { li {
font-size: 11px; font-size: 11px;
line-height: $grid-vertical * 2; line-height: $grid-y * 2;
padding: $grid-vertical / 2 $grid-horizontal / 2; padding: $grid-y / 2 $grid-x / 2;
} }
} }
} }
Expand Down Expand Up @@ -299,7 +299,7 @@ form.small .field, .field.small {
/* Date Fields */ /* Date Fields */
input.hasDatepicker { input.hasDatepicker {
width: 50%; width: 50%;
max-width: ($grid-horizontal * 12); max-width: ($grid-x * 12);
} }
} }


Expand Down Expand Up @@ -347,11 +347,11 @@ form.small .field, .field.small {
} }


/* all buttons */ /* all buttons */
padding: ($grid-vertical - 3) ($grid-horizontal + 4); padding: ($grid-y - 3) ($grid-x + 4);
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
margin: 0; margin: 0;
line-height: $grid-vertical * 2; line-height: $grid-y * 2;
color: lighten($color-text-dark, 10%); color: lighten($color-text-dark, 10%);
background-color: $color-button-generic; background-color: $color-button-generic;
border: 1px solid $color-button-generic-border; border: 1px solid $color-button-generic-border;
Expand Down Expand Up @@ -426,7 +426,7 @@ form.small .field, .field.small {
} }


&.ss-ui-button-small { &.ss-ui-button-small {
padding: ($grid-vertical/2) ($grid-horizontal/2); padding: ($grid-y/2) ($grid-x/2);
} }


&.ui-state-highlight { &.ui-state-highlight {
Expand Down Expand Up @@ -463,8 +463,8 @@ form.small .field, .field.small {
.fieldgroup-field { .fieldgroup-field {
float: left; float: left;
display: block; display: block;
width: $grid-horizontal * 23; width: $grid-x * 23;
padding-right: $grid-horizontal; padding-right: $grid-x;


&.odd { &.odd {


Expand All @@ -484,8 +484,8 @@ form.small .field, .field.small {
* Checkbox Field * Checkbox Field
* ---------------------------------------------------- */ * ---------------------------------------------------- */
.field.checkbox { .field.checkbox {
padding-left: $grid-horizontal * 23; padding-left: $grid-x * 23;
margin-bottom: $grid-vertical; margin-bottom: $grid-y;


input { input {
margin-left: 0; margin-left: 0;
Expand All @@ -499,8 +499,8 @@ input.checkbox {
* Radiobutton Field * Radiobutton Field
* ---------------------------------------------------- */ * ---------------------------------------------------- */
.field.radio { .field.radio {
padding-left: $grid-horizontal * 23; padding-left: $grid-x * 23;
margin-bottom: $grid-vertical; margin-bottom: $grid-y;


input { input {
margin-left: 0; margin-left: 0;
Expand All @@ -519,9 +519,9 @@ input.radio {
li { li {
float: left; float: left;
display: block; display: block;
width: $grid-horizontal * 27; width: $grid-x * 27;
padding-bottom: $grid-horizontal; padding-bottom: $grid-x;
line-height: $grid-vertical * 2; line-height: $grid-y * 2;
list-style: none; list-style: none;


input { input {
Expand All @@ -533,7 +533,7 @@ input.radio {
label { label {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
padding-left: $grid-vertical; padding-left: $grid-y;
} }


} }
Expand Down
14 changes: 7 additions & 7 deletions admin/scss/_menu.scss
View file
Expand Up @@ -10,7 +10,7 @@
.cms-logo-header { .cms-logo-header {
background-color: darken($color-dark-bg, 10%); background-color: darken($color-dark-bg, 10%);
position: relative; position: relative;
padding: $grid-vertical * 2 8px 0 4px; padding: $grid-y * 2 8px 0 4px;
line-height: 24px; line-height: 24px;


@include background-image( @include background-image(
Expand Down Expand Up @@ -84,16 +84,16 @@
z-index: 80; z-index: 80;
background: $color-menu-background; background: $color-menu-background;
border-right: 1px solid $color-menu-border; 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 { a {
text-decoration: none; text-decoration: none;
} }


.cms-panel-content { .cms-panel-content {
width: ($grid-horizontal * 24) - 1; /* 8x24 - 1 */ width: ($grid-x * 24) - 1; /* 8x24 - 1 */
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
Expand Down Expand Up @@ -133,15 +133,15 @@
li { li {
a { a {
display: block; display: block;
height: $grid-vertical * 3; height: $grid-y * 3;
line-height: $grid-vertical * 3; line-height: $grid-y * 3;
font-size: $font-base-size; font-size: $font-base-size;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
text-shadow: lighten($color-base, 5%) 1px 1px 0; text-shadow: lighten($color-base, 5%) 1px 1px 0;
color: $color-text-dark; 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; background-color: $color-base;
cursor: pointer; cursor: pointer;


Expand Down

0 comments on commit 4437f9d

Please sign in to comment.