Bones/css/skeleton.ontraport.css

239 lines
6.0 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%;
}
.offset-by-one.column.first-visible,
.offset-by-one.columns.first-visible {
margin-left: 8.66666666667%;
}
}
/* 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;
}
.offset-by-one.column.first-visible,
.offset-by-one.columns.first-visible {
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%;
background-size: cover;
background-position: center center;
2015-04-27 17:33:21 -04:00
}
/* =====================================================================================================================
buttons
===================================================================================================================== */
.button {
height: auto;
max-width: 100%;
padding: 0;
white-space: normal;
border: 0;
color: inherit;
text-transform: none;
border-radius: 0;
cursor: inherit;
letter-spacing: inherit;
text-align: inherit;
background-color: inherit;
2015-06-30 12:27:26 -04:00
margin-bottom: 0;
}
.button:hover {
color: inherit;
border-color: inherit;
}
2015-06-19 14:29:51 -04:00
.button--round,
.button-style.button--round {
2015-06-17 21:52:12 -04:00
border-radius: 500px;
}
.button-style {
padding: 10px 20px;
border-radius: 3px;
2015-06-15 12:11:33 -04:00
text-decoration: none;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
cursor: pointer;
}
.button-style:hover {
opacity: .9;
}
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.opt-bold.opt-bold {
2015-04-27 17:33:21 -04:00
font-weight: bold;
}
.opt-italic.opt-italic.opt-italic {
font-style: italic;
}
.opt-underline.opt-underline.opt-underline {
text-decoration: underline;
}
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;
}
/* =====================================================================================================================
Container
===================================================================================================================== */
.container.container {
max-width: 1200px;
2015-10-09 15:18:55 -04:00
}
/* =====================================================================================================================
Forms
===================================================================================================================== */
textarea {
max-width: 100%;
}
select[multiple] {
height: auto;
2015-10-21 12:28:26 -04:00
}
b, strong {
font-weight: bold;
}
2015-10-26 20:35:18 -04:00
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="date"],
2015-10-26 20:35:18 -04:00
input[type="password"],
textarea,
select {
font-size: 15px;
color: #222;
2015-10-26 20:35:18 -04:00
}
input[type="date"] {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="date"]:focus {
border: 1px solid #33C3F0;
outline: 0;
}