Difference between revisions of "User:Makanyane/twc.css"
From TWC Wiki
Jump to navigationJump to search| Line 1: | Line 1: | ||
/* Mak's testing area for twc skin */ | /* Mak's testing area for twc skin */ | ||
| − | /* | + | /* Responsive column layout from http://www.responsivegridsystem.com/ TWCR added to class names to avoid conflicts */ |
| − | div. | + | |
| + | div.TWCRsection, div.TWCRgroup { | ||
border: none; | border: none; | ||
background: none; | background: none; | ||
| Line 10: | Line 11: | ||
/* SECTIONS ============================================================================= */ | /* SECTIONS ============================================================================= */ | ||
| − | . | + | .TWCRsection { |
clear: both; | clear: both; | ||
padding: 0px; | padding: 0px; | ||
| Line 18: | Line 19: | ||
/* GROUPING ============================================================================= */ | /* GROUPING ============================================================================= */ | ||
| − | . | + | .TWCRgroup:before, |
| − | . | + | .TWCRgroup:after { |
content:""; | content:""; | ||
display:table; | display:table; | ||
} | } | ||
| − | . | + | .TWCRgroup:after { |
clear:both; | clear:both; | ||
} | } | ||
| − | . | + | .TWCRgroup { |
zoom:1; /* For IE 6/7 (trigger hasLayout) */ | zoom:1; /* For IE 6/7 (trigger hasLayout) */ | ||
} | } | ||
| Line 32: | Line 33: | ||
/* GRID COLUMN SETUP ==================================================================== */ | /* GRID COLUMN SETUP ==================================================================== */ | ||
| − | . | + | .TWCRcol { |
display: block; | display: block; | ||
float:left; | float:left; | ||
| Line 38: | Line 39: | ||
} | } | ||
| − | . | + | .TWCRcol:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ |
| − | |||
| − | |||
| − | |||
| − | + | /* ANY FULL WIDTH COLUMN IN SECION*/ | |
| − | + | .span_full { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | /* | ||
| − | . | ||
width: 100%; | width: 100%; | ||
} | } | ||
| + | /* SPANNING 2 COLUMNS OUT OF 3*/ | ||
.span_2_of_3 { | .span_2_of_3 { | ||
width: 66.1%; | width: 66.1%; | ||
} | } | ||
| + | /* SINGLE WIDTH COLUMN OF 3*/ | ||
.span_1_of_3 { | .span_1_of_3 { | ||
width: 32.2%; | width: 32.2%; | ||
} | } | ||
| − | + | /* SINGLE COLUMN OF 2*/ | |
| − | /* | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.span_1_of_2 { | .span_1_of_2 { | ||
width: 49.2%; | width: 49.2%; | ||
} | } | ||
| − | + | /* PAIR OF COLUMNS 40/60 percent splits */ | |
| − | + | .span_40pct_of_2 { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | /* | ||
| − | |||
| − | |||
| − | . | ||
width: 39.36%; | width: 39.36%; | ||
} | } | ||
| − | . | + | .span_60pct_of_2 { |
width: 59.04%; | width: 59.04%; | ||
} | } | ||
| − | |||
| + | /* GO FULL WIDTH AT LESS THAN 700 PIXELS & REDUCE MARGINS*/ | ||
@media only screen and (max-width: 700px) { | @media only screen and (max-width: 700px) { | ||
| − | . | + | .TWCRcol { margin: 1% 0 1% 0%; } |
| − | + | .col { margin: 1% 0 1% 0%;} | |
| − | } | + | .span_3_of_3, .span_2_of_3, .span_1_of_3, .span_2_of_2, .span_1_of_2, .span_40pct_of_2, .span_60pct_of_2 { width: 100%; } |
| − | . | ||
| − | |||
| − | |||
} | } | ||
| + | |||
| + | /*New classes for re-designed front page and portals*/ | ||
.TWCportal_1, .TWCportal_2, .TWCportal_3 { border: none; | .TWCportal_1, .TWCportal_2, .TWCportal_3 { border: none; | ||
padding: .4em .9em .1em; | padding: .4em .9em .1em; | ||
Revision as of 02:37, 17 May 2019
/* Mak's testing area for twc skin */
/* Responsive column layout from http://www.responsivegridsystem.com/ TWCR added to class names to avoid conflicts */
div.TWCRsection, div.TWCRgroup {
border: none;
background: none;
padding: none;
margin: none;
}
/* SECTIONS ============================================================================= */
.TWCRsection {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.TWCRgroup:before,
.TWCRgroup:after {
content:"";
display:table;
}
.TWCRgroup:after {
clear:both;
}
.TWCRgroup {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
/* GRID COLUMN SETUP ==================================================================== */
.TWCRcol {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.TWCRcol:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* ANY FULL WIDTH COLUMN IN SECION*/
.span_full {
width: 100%;
}
/* SPANNING 2 COLUMNS OUT OF 3*/
.span_2_of_3 {
width: 66.1%;
}
/* SINGLE WIDTH COLUMN OF 3*/
.span_1_of_3 {
width: 32.2%;
}
/* SINGLE COLUMN OF 2*/
.span_1_of_2 {
width: 49.2%;
}
/* PAIR OF COLUMNS 40/60 percent splits */
.span_40pct_of_2 {
width: 39.36%;
}
.span_60pct_of_2 {
width: 59.04%;
}
/* GO FULL WIDTH AT LESS THAN 700 PIXELS & REDUCE MARGINS*/
@media only screen and (max-width: 700px) {
.TWCRcol { margin: 1% 0 1% 0%; }
.col { margin: 1% 0 1% 0%;}
.span_3_of_3, .span_2_of_3, .span_1_of_3, .span_2_of_2, .span_1_of_2, .span_40pct_of_2, .span_60pct_of_2 { width: 100%; }
}
/*New classes for re-designed front page and portals*/
.TWCportal_1, .TWCportal_2, .TWCportal_3 { border: none;
padding: .4em .9em .1em;
color: black;
vertical-align: top;
}
.TWCportal_1 {
background: rgb(227,227,227);
background: linear-gradient(180deg, rgba(165,165,180,0.5) 0%, rgba(165,165,180,0) 100%);
}
.TWCportal_2 {
background: rgb(205,199,199);
background: linear-gradient(180deg, rgba(168,160,162,0.5) 0%, rgba(168,160,162,0) 100%);
}
.TWCportal_3 {
background: rgb(229,225,219);
background: linear-gradient(180deg, rgba(168,168,162,0.5) 0%, rgba(168,168,162,0) 100%);
}
.TWCportal_head {
padding:5px;
background:#7d1515;
color:white;
margin-bottom: 0em;
}
h2.TWCportal_head{
font-size: 128%;
border-bottom: 0;
font-weight: bolder;
}
h1.TWCportal_head{
padding:10px;
border-bottom: 0;
text-align: center;
}
