Skip to content

Commit

Permalink
SCSS fixes for RTL grids
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriel Vautour committed Jan 16, 2013
1 parent e9683eb commit 5f16235
Show file tree
Hide file tree
Showing 3 changed files with 240 additions and 75 deletions.
22 changes: 17 additions & 5 deletions src/grids/sass/includes/_module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import "compass/css3/box-sizing";
@import "compass/typography/lists/bullets";
@import "compass/css3/border-radius";
@import 'compass/css3/transform';

@mixin modules {

Expand Down Expand Up @@ -319,6 +320,12 @@

/* Right to left (RTL) CSS */
[dir="rtl"] {
.module-billboard, .module-related, .module-menu-section {
ul {
margin: 0;
}
}

.module-billboard ul {
li {
a, a:link, a:visited {
Expand Down Expand Up @@ -349,13 +356,18 @@
}

.module-table-contents {
ul, ul[class*="column-"] {
li {
margin-left: auto;
margin-right: 25px;
ul {
&, &[class*="column-"] {
margin: 0;
padding: $margin-medium $margin-medium;
li {
margin-bottom: $margin-medium / 2;
margin-left: auto;
margin-right: 25px !important;
}
}
}
}
}

.module-spotlight {
ul {
Expand Down
4 changes: 2 additions & 2 deletions src/grids/sass/includes/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@
}

&.table-bordered {
border-right: 0;
/*border-right: 0;*/

thead, tbody {
&:first-child {
Expand Down Expand Up @@ -175,7 +175,7 @@

th, td {
border: {
left: none;
/*left: none;*/
}
}
}
Expand Down
289 changes: 221 additions & 68 deletions src/grids/sass/includes/_util-screen.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,17 +82,37 @@ h5, h6 {
}

/* text */
.font-serif { font-family: $serif;}
.font-sans-serif { font-family: $sans-serif;}
.wrap-none { white-space: nowrap;}

.font-xxsmall { font-size: $font-xxsmall !important;}
.font-xsmall { font-size: $font-xsmall !important;}
.font-small { font-size: $font-small !important;}
.font-medium { font-size: $font-medium !important;}
.font-large { font-size: $font-large !important;}
.font-xlarge { font-size: $font-xlarge !important;}
.font-xxlarge { font-size: $font-xxlarge !important;}
.font-serif {
font-family: $serif;
}
.font-sans-serif {
font-family: $sans-serif;
}
.wrap-none {
white-space: nowrap;
}

.font-xxsmall {
font-size: $font-xxsmall !important;
}
.font-xsmall {
font-size: $font-xsmall !important;
}
.font-small {
font-size: $font-small !important;
}
.font-medium {
font-size: $font-medium !important;
}
.font-large {
font-size: $font-large !important;
}
.font-xlarge {
font-size: $font-xlarge !important;
}
.font-xxlarge {
font-size: $font-xxlarge !important;
}

blockquote {
&, &.float-left, &.float-right {
Expand Down Expand Up @@ -139,7 +159,8 @@ blockquote {
}
}

code { font: {
code {
font: {
size: 90%;
weight: $font-weight-normal;
}
Expand All @@ -163,80 +184,190 @@ pre {
margin-bottom: 0 !important;
}
.margin-bottom-small {
margin-bottom: $margin-small !important;}
.margin-bottom-medium { margin-bottom: $margin-medium !important;}
.margin-bottom-large { margin-bottom: $margin-large !important;}
.margin-bottom-xlarge { margin-bottom: $margin-xlarge !important;}
.margin-top-none { margin-top: 0 !important;}
.margin-top-small { margin-top: $margin-small !important;}
.margin-top-medium { margin-top: $margin-medium !important;}
.margin-top-large { margin-top: $margin-large !important;}
.margin-top-xlarge { margin-top: $margin-xlarge !important;}
.margin-right-none { margin-right: 0 !important;}
.margin-right-small { margin-right: $margin-small !important;}
.margin-right-medium { margin-right: $margin-medium !important;}
.margin-right-large { margin-right: $margin-large !important;}
.margin-right-xlarge { margin-right: $margin-xlarge !important;}
margin-bottom: $margin-small !important;
}
.margin-bottom-medium {
margin-bottom: $margin-medium !important;
}
.margin-bottom-large {
margin-bottom: $margin-large !important;
}
.margin-bottom-xlarge {
margin-bottom: $margin-xlarge !important;
}
.margin-top-none {
margin-top: 0 !important;
}
.margin-top-small {
margin-top: $margin-small !important;
}
.margin-top-medium {
margin-top: $margin-medium !important;
}
.margin-top-large {
margin-top: $margin-large !important;
}
.margin-top-xlarge {
margin-top: $margin-xlarge !important;
}
.margin-right-none {
margin-right: 0 !important;
}
.margin-right-small {
margin-right: $margin-small !important;
}
.margin-right-medium {
margin-right: $margin-medium !important;
}
.margin-right-large {
margin-right: $margin-large !important;
}
.margin-right-xlarge {
margin-right: $margin-xlarge !important;
}

/* indentation */
.indent-none { margin-left: 0 !important;}
.indent-small { margin-left: $margin-small !important;}
.indent-medium { margin-left: $margin-medium !important;}
.indent-large { margin-left: $margin-large !important;}
.indent-xlarge { margin-left: $margin-xlarge !important;}
.indent-none {
margin-left: 0 !important;
}
.indent-small {
margin-left: $margin-small !important;
}
.indent-medium {
margin-left: $margin-medium !important;
}
.indent-large {
margin-left: $margin-large !important;
}
.indent-xlarge {
margin-left: $margin-xlarge !important;
}

/* alignment */
.align-left { text-align: left !important;}
.align-center { text-align: center !important;}
.align-right { text-align: right !important;}
.align-left {
text-align: left !important;
}
.align-center {
text-align: center !important;
}
.align-right {
text-align: right !important;
}
p {
&.align-right { margin-right: $margin-medium; }
&.align-right {
margin-right: $margin-medium;
}
}
.align-top {
vertical-align: top !important;
img {
vertical-align: text-top !important;
}
}
.align-middle {
vertical-align: middle !important;
}
.align-top { vertical-align: top !important;
img { vertical-align: text-top !important; }
.align-bottom {
vertical-align: bottom !important;
img {
vertical-align: text-bottom !important;
}
}
.align-middle { vertical-align: middle !important;}
.align-bottom { vertical-align: bottom !important; img { vertical-align: text-bottom !important;
}}

/* line height */
.line-height-xsmall { line-height: 0.8 !important;}
.line-height-small { line-height: 1.0 !important;}
.line-height-medium { line-height: 1.25 !important;}
.line-height-large { line-height: 1.5 !important;}
.line-height-xlarge { line-height: 2.0 !important;}
.line-height-xsmall {
line-height: 0.8 !important;
}
.line-height-small {
line-height: 1.0 !important;
}
.line-height-medium {
line-height: 1.25 !important;
}
.line-height-large {
line-height: 1.5 !important;
}
.line-height-xlarge {
line-height: 2.0 !important;
}


/* floating */
img {
&.float-left { margin-right: $margin-medium; }
&.float-left {
margin-right: $margin-medium;
}
}
.float-left { float: left !important;}
.float-right { float: right !important;} /* If a grid cell is floated right and there happens to be a heading with a border-bottom or background colour to the left, some browsers render the decoration across the entire space which slices through the float right element. The white background masks this. */
.float-left {
float: left !important;
}
.float-right {
float: right !important;
} /* If a grid cell is floated right and there happens to be a heading with a border-bottom or background colour to the left, some browsers render the decoration across the entire space which slices through the float right element. The white background masks this. */

/* width */
.width-100 { width: 100% !important;}
.width-90 { width: 90% !important;}
.width-80 { width: 80% !important;}
.width-70 { width: 70% !important;}
.width-60 { width: 60% !important;}
.width-50 { width: 50% !important;}
.width-40 { width: 40% !important;}
.width-30 { width: 30% !important;}
.width-20 { width: 20% !important;}
.width-10 { width: 10% !important;}
.width-100 {
width: 100% !important;
}
.width-90 {
width: 90% !important;
}
.width-80 {
width: 80% !important;
}
.width-70 {
width: 70% !important;
}
.width-60 {
width: 60% !important;
}
.width-50 {
width: 50% !important;
}
.width-40 {
width: 40% !important;
}
.width-30 {
width: 30% !important;
}
.width-20 {
width: 20% !important;
}
.width-10 {
width: 10% !important;
}

/* opacity */
.opacity-100 { @include opacity(1.0);}
.opacity-90 { @include opacity(0.9);}
.opacity-80 { @include opacity(0.8);}
.opacity-70 { @include opacity(0.7);}
.opacity-60 { @include opacity(0.6);}
.opacity-50 { @include opacity(0.5);}
.opacity-40 { @include opacity(0.4);}
.opacity-30 { @include opacity(0.3);}
.opacity-20 { @include opacity(0.2);}
.opacity-10 { @include opacity(0.1);}
.opacity-100 {
@include opacity(1.0);
}
.opacity-90 {
@include opacity(0.9);
}
.opacity-80 {
@include opacity(0.8);
}
.opacity-70 {
@include opacity(0.7);
}
.opacity-60 {
@include opacity(0.6);
}
.opacity-50 {
@include opacity(0.5);
}
.opacity-40 {
@include opacity(0.4);
}
.opacity-30 {
@include opacity(0.3);
}
.opacity-20 {
@include opacity(0.2);
}
.opacity-10 {
@include opacity(0.1);
}

.border-top, .border-right, .border-bottom, .border-left, .border-all {
float: left;
Expand Down Expand Up @@ -406,4 +537,26 @@ table {
margin-left: auto;
margin-right: 0;
}

/* indentation */
.indent-none {
margin-left: 0 !important;
margin-right: 0 !important;
}
.indent-small {
margin-left: 0 !important;
margin-right: $margin-small !important;
}
.indent-medium {
margin-left: 0 !important;
margin-right: $margin-medium !important;
}
.indent-large {
margin-left: 0 !important;
margin-right: $margin-large !important;
}
.indent-xlarge {
margin-left: 0 !important;
margin-right: $margin-xlarge !important;
}
}

0 comments on commit 5f16235

Please sign in to comment.