Bones/css/skeleton.ontraport.css

160 lines
4.1 KiB
CSS
Raw Normal View History

2015-04-27 17:33:21 -04:00
/* ====================================================================================================================
@brief ONTRAPORT's skeleton extension file
===================================================================================================================== */
/* =====================================================================================================================
Skeleton Grid Size Extension
1) Adds new column sizes for rows with 7, 8, or 9 columns.
2) Adds a tablet responsive size for screens 850px - 550px wide.
a) For Multi-Item the tablet is as follows:
12 colums -> 4 columns -> 1 column
11 colums -> 4 columns -> 1 column
10 colums -> 4 columns -> 1 column
9 colums -> 3 columns -> 1 column
8 colums -> 3 columns -> 1 column
7 colums -> 3 columns -> 1 column
6 colums -> 2 columns -> 1 column
5 colums -> 2 columns -> 1 column
4 colums -> 2 columns -> 1 column
3 columns -> 3 columns -> 1 column
2 columns -> 2 columns -> 1 column
1 column -> 1 column -> 1 column
===================================================================================================================== */
@media (min-width: 550px) {
.column.first-visible,
.columns.first-visible {
margin-left: 0;
}
/* For rows 7 columns accross */
.one-and-half.columns {
width: 10.6666667%;
}
/* For rows 8 columns accross */
.one-and-third.columns {
width: 8.6666667%;
}
/* For rows 9 columns accross */
.one-and-fourth.columns {
width: 7.3333333%;
}
}
/* For devices smaller than 768px */
@media (min-width: 550px) and (max-width: 850px) {
.u-cf {
text-align: center;
}
[class*="tablet-"].columns {
float: none;
display: inline-block;
}
.tablet-three.columns {
2015-06-02 17:53:18 -04:00
width: 21.2333333%;
}
.tablet-three.first-in-row.columns {
margin-left: 0;
}
.tablet-four.columns {
2015-06-02 17:53:18 -04:00
width: 30.111112%
}
.tablet-four.first-in-row.columns {
margin-left: 0;
}
.tablet-six.columns {
2015-06-02 17:53:18 -04:00
width: 47.56666667%;
}
.tablet-six.first-in-row.columns {
margin-left: 0;
}
}
2015-04-27 17:33:21 -04:00
/* =====================================================================================================================
blocks
===================================================================================================================== */
.block-wrapper {
2015-04-27 17:33:21 -04:00
padding-top: 3em;
padding-bottom: 3em;
2015-04-27 23:28:39 -04:00
width: 100%;
2015-04-27 17:33:21 -04:00
}
/* =====================================================================================================================
buttons
===================================================================================================================== */
.button {
height: auto;
max-width: 100%;
padding: 5px 20px;
white-space: normal;
border: 0;
color: inherit;
text-transform: none;
border-radius: 0;
cursor: none;
letter-spacing: inherit;
text-align: inherit;
background-color: inherit;
}
.button:hover {
color: inherit;
border-color: inherit;
}
2015-04-27 17:33:21 -04:00
/* =====================================================================================================================
Images
===================================================================================================================== */
.opt-circle {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 500px;
/* Firefox 1-3.6 */
-moz-border-radius: 500px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 500px;
}
/* =====================================================================================================================
Fonts
===================================================================================================================== */
.opt-center {
text-align: center;
}
.opt-bold {
font-weight: bold;
}
2015-04-27 23:28:39 -04:00
.opt-big {
font-size: 1.2em;
}
.opt-medium {
font-size: 1em;
}
2015-04-27 17:33:21 -04:00
.opt-small {
2015-04-27 23:28:39 -04:00
font-size: .8em;
2015-04-27 17:33:21 -04:00
}
2015-04-27 23:28:39 -04:00
.opt-red {
color: red;
}
/**
* Adding CSS rules for WYSIWYG HTML 5 Support
* https://github.com/xing/wysihtml5/wiki/Supported-Commands
*/
.wysiwyg-text-align-center {
text-align: center;
}
.wysiwyg-text-align-left {
text-align: left;
}
.wysiwyg-text-align-right {
text-align: right;
}