Usable CSS Global Site Classes for Layout Designers
/* Positioning */
.fl-left {
float: left;
}
.fl-right {
float: right;
}
.text-center {
text-align: center;
}
.top-bot-spacer {
margin: 1em 0 !important;
}
.half-top-bot-spacer {
margin: 0.5em 0 !important;
}
.top-bot-spacer-auto {
margin: 1em auto !important;
}
.top-spacer {
margin: 1em 0 0 0 !important;
}
.half-top-spacer {
margin: 0.5em 0 0 0 !important;
}
.top-spacer-auto {
margin: 1em auto 0 auto !important;
}
.bot-spacer {
margin: 0 0 1em 0 !important;
}
.half-bot-spacer {
margin: 0 0 0.5em 0 !important;
}
.bot-spacer-auto {
margin: 0 auto 1em auto !important;
}
.left-spacer {
margin-left: 0.5em !important;
}
.left-spacer-big {
margin-left: 1em !important;
}
.right-spacer {
margin-right: 0.5em !important;
}
.right-spacer-big {
margin-right: 1em !important;
}
.inline-block {
display: inline-block;
}
/* If using floats, you might want .clearfix */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.clearfix:after {
clear: both;
}
.clearfix {
min-height: 0; /* support: IE7 */
}
.auto-overflow {
overflow: auto;
}
/* Colors */
.alert {
color: red !important;
}
.highlight {
color: orangered !important;
}
.light-highlight {
color: orange !important;
}
.background-highlight {
background:#FEF9ED !important;
}
.background-strong-highlight {
background: #FFFFBE !important;
}
/* Text styling */
.text--info {
color: #7c838d;
font-weight: 300;
}
.text--info--desc:after {
content: ': ';
}
.text--negative {
color: #a35154 !important;
}
.text--negative-impact {
color: #a35154 !important;
background-color: #FBE3E4;
padding: 0.5em;
margin: 0.5em 0;
border-radius: 3px;
}
.text--additional {
font-style: italic;
color: #969ca4;
}
.text--neg-imp {
color: #d56265;
}
.text--lighter {
color: #969ca4 !important;
}
i.text--lighter {
margin-right: 0.375em;
position: relative;
top: 2px;
}
.text--regular {
color: #4a4f55 !important;
}
.text--positive {
color: #388de4 !important;
}
.text--bold {
color: #22bb46 !important;
}
.smalltext {
font-size: 0.8em;
}
.tooltip {
border-bottom: thin dotted #7c838d;
}
.blur {
color: transparent !important;
text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}
.subtitle {
color: #7c838d;
font-style: italic;
margin: -0.5em 0 0 0;
}
.time {
color: #969ca4;
font-size: 0.8em;
margin-left: 0.5em;
padding-left: 0.5em;
border-left: thin solid #f2f5f5;
}
/* Pre-styled list */
.list--line {
padding-left: 0;
}
.list--line li {
list-style: none;
padding: 0.5em;
}
.list--line li:nth-child(odd) {
background: #f8fafb;
}
.list--line li + li {
border-top: thin solid #e4eaea;
}
.list--alt-bg li {
list-style: none;
padding: 0.5em 0;
}
.list--alt-bg li:nth-child(even) {
background: rgba(0,0,0,0.02);
}
.list--horizontal > span + span {
padding-left: 0.5em;
margin-left: 0.5em;
border-left: thin solid #ebedee;
}