Last active
November 10, 2022 15:21
-
-
Save omniamike/a7e27990d84372497effbab6bfa0b405 to your computer and use it in GitHub Desktop.
Base CSS for Omnia Creative Studio site builds; global styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Omnia Base Styles | |
Version: 1.0 | |
Author: Omnia Creative Studio | |
Author URI: https://omniacreativestudio.com/ | |
*/ | |
/* -- Alignment Helpers -- */ | |
.align_left { text-align: left;} | |
.align_right { text-align: right;} | |
.align_center { text-align: center;} | |
.show-mobile { display: none;} | |
@media (max-width: 1023px) and (min-width : 768px) { | |
.tablet-center > * { | |
text-align: center; | |
} | |
.tablet-no-border { | |
border: 0px; | |
} | |
.tablet-no-margin { | |
margin: 0px; | |
} | |
.tablet-no-padding { | |
padding: 0px; | |
} | |
} | |
@media (max-width : 767px) { | |
.hide-mobile { display: none;} | |
.show-mobile { display: block;} | |
.mobile-center > * { | |
text-align: center; | |
} | |
.mobile-no-border { | |
border: 0px; | |
} | |
.mobile-no-margin { | |
margin: 0px; | |
} | |
.mobile-no-padding { | |
padding: 0px; | |
} | |
} | |
/* -- Font Mods -- */ | |
.text-xsmall { font-size: 10px; } | |
.text-small { font-size: 12px; } | |
.text-medium { font-size: 16px; } | |
.text-large { font-size: 20px; } | |
.text-xlarge { font-size: 22px; } | |
.text-uppercase, | |
.text-uppercase > * { text-transform: uppercase !important; } | |
/* -- Font Weights -- */ | |
.text-light { font-weight: 300;} | |
.text-normal { font-weight: 400;} | |
.text-bold { font-weight: 700;} | |
/* -- Forms -- */ | |
.omnia-form-item { | |
margin-bottom: 16px !important; | |
} | |
.omnia-form-item label { | |
display: block; | |
margin-bottom: 5px; | |
} | |
.omnia-form-item input[type="text"], | |
.omnia-form-item input[type="password"], | |
.omnia-form-item input[type="email"], | |
.omnia-form-item input[type="url"], | |
.omnia-form-item input[type="tel"], | |
.omnia-form-item input[type="number"], | |
.omnia-form-item input[type="date"], | |
.omnia-form-item input[type="search"], | |
.omnia-form-item input[type="phone"], | |
.omnia-form-item select, | |
.omnia-form-item textarea { | |
background-color: #ffffff !important; | |
width: 100%; | |
height: 50px; | |
padding: 8px !important; | |
margin: 0px !important; | |
font-size: 16px !important; | |
border: 1px solid #ddd !important; | |
border-radius: 0; | |
box-shadow: none !important; | |
box-sizing: border-box; | |
display: block; | |
-moz-appearance: none; | |
-webkit-appearance: none; | |
} | |
.omnia-form-item select { | |
background-image: url("images/caret.png") !important; | |
background-position: right center; | |
background-repeat: no-repeat; | |
padding: 6px 4px !important; | |
position: relative !important; | |
-moz-appearance: none; | |
-webkit-appearance: none; | |
} | |
.omnia-form-item textarea { | |
min-height: 200px; | |
resize: vertical; | |
} | |
.omnia-form-item input[type="text"]:focus, | |
.omnia-form-item input[type="password"]:focus, | |
.omnia-form-item input[type="email"]:focus, | |
.omnia-form-item input[type="url"]:focus, | |
.omnia-form-item input[type="tel"]:focus, | |
.omnia-form-item input[type="number"]:focus, | |
.omnia-form-item input[type="date"]:focus, | |
.omnia-form-item input[type="search"]:focus, | |
.omnia-form-item textarea:focus, | |
.omnia-form-item select:focus { | |
border-color: #49C4FF !important; | |
box-shadow: 0 0 6px rgba(73, 196, 255, 0.3) !important; | |
} | |
.omnia-form-item input[type="submit"][class*="omnia"] { | |
background-color: #083E6C; | |
width: 100%; | |
margin: 5px 0; | |
padding: 0px 22px; | |
color: #ffffff; | |
font-size: 15px; | |
font-weight: 700; | |
line-height: 50px; | |
display: block; | |
text-transform: uppercase; | |
position: relative; | |
border-radius: 0px; | |
border: none; | |
transition: all 0.3s ease; | |
} | |
.omnia-form-item input[type="submit"][class*="omnia"]:hover, | |
.no-touch input[type="submit"]:hover { | |
background-color: #0F75BC !important; | |
} | |
.omnia-form-item .radio-inline, | |
.omnia-form-item .checkbox-inline { | |
display: inline !important; | |
margin-right: 5px; | |
} | |
.omnia-form-item .checkbox input[type="checkbox"], | |
.omnia-form-item .checkbox-inline input[type="checkbox"], | |
.omnia-form-item .radio input[type="radio"], | |
.omnia-form-item .radio-inline input[type="radio"] { | |
margin-top: 6px; | |
} | |
.omnia-form-item .screen-reader-text { | |
clip: rect(1px, 1px, 1px, 1px); | |
clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px); | |
position: absolute !important; | |
white-space: nowrap; | |
height: 1px; | |
width: 1px; | |
overflow: hidden; | |
} | |
/* -- Caldera Forms WP Mods -- */ | |
#caldera_notices_1 { | |
margin-bottom: 40px; | |
} | |
/* -- Responsive Tables -- */ | |
.responsive-table { | |
overflow-x: auto; | |
min-height: 0.01%; | |
margin-bottom: 30px; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
.table { | |
width: 100%; | |
max-width: 100%; | |
margin-top: 0px; | |
text-indent: 0px; | |
display: table; | |
} | |
.table > thead > tr > th { | |
border-bottom: 2px solid #ddd; | |
vertical-align: bottom; | |
} | |
th { | |
text-align: left; | |
width: 25%; | |
} | |
tbody { | |
display: table-row-group; | |
vertical-align: middle; | |
} | |
tr { | |
display: table-row; | |
vertical-align: inherit; | |
} | |
td { | |
display: table-cell; | |
text-align: inherit; | |
} | |
.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, | |
.table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, | |
.table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td { | |
border-top: 0 none; | |
} | |
.table > thead > tr > th, .table > tbody > tr > th, | |
.table > tfoot > tr > th, .table > thead > tr > td, | |
.table > tbody > tr > td, .table > tfoot > tr > td { | |
border-top: 1px solid #ddd; | |
line-height: 1.42857; | |
padding: 8px; | |
vertical-align: top; | |
} | |
.bordered-table { | |
border: 1px solid #e0e0e0; | |
} | |
.bordered-table > thead > tr > th, | |
.bordered-table > thead > tr > td, | |
.bordered-table > tbody > tr > th, | |
.bordered-table > tbody > tr > td, | |
.bordered-table > tfoot > tr > th, | |
.bordered-table > tfoot > tr > td { | |
border: 1px solid #e0e0e0; | |
} | |
.bordered-table > thead > tr > th, | |
.bordered-table > thead > tr > td { | |
border-bottom-width: 2px; | |
} | |
.striped-table > tbody > tr:nth-of-type(odd) { | |
background-color: #f9f9f9; | |
} | |
@media (max-width : 1023px) { | |
.tablet-center > * { | |
text-align: center; | |
} | |
.tablet-no-border { | |
border: 0px; | |
} | |
.tablet-no-margin { | |
margin: 0px; | |
} | |
.tablet-no-padding { | |
padding: 0px; | |
} | |
} | |
@media screen and (max-width : 768px) { | |
.table-responsive { | |
width: 100%; | |
margin-bottom: 15px; | |
overflow-y: hidden; | |
overflow-x: scroll; | |
-ms-overflow-style: -ms-autohiding-scrollbar; | |
border: 1px solid #dddddd; | |
-webkit-overflow-scrolling: touch; | |
} | |
.table-responsive > .table { | |
margin-bottom: 0; | |
} | |
.table-responsive > .table > thead > tr > th, | |
.table-responsive > .table > thead > tr > td, | |
.table-responsive > .table > tbody > tr > th, | |
.table-responsive > .table > tbody > tr > td, | |
.table-responsive > .table > tfoot > tr > th, | |
.table-responsive > .table > tfoot > tr > td { | |
white-space: nowrap; | |
} | |
.responsive-table > .table-bordered { | |
border: 0; | |
} | |
.responsive-table > .table-bordered > thead > tr > th:first-child, | |
.responsive-table > .table-bordered > thead > tr > td:first-child, | |
.responsive-table > .table-bordered > tbody > tr > th:first-child, | |
.responsive-table > .table-bordered > tbody > tr > td:first-child, | |
.responsive-table > .table-bordered > tfoot > tr > th:first-child, | |
.responsive-table > .table-bordered > tfoot > tr > td:first-child { | |
border-left: 0; | |
} | |
.responsive-table > .table-bordered > thead > tr > th:last-child, | |
.responsive-table > .table-bordered > thead > tr > td:last-child, | |
.responsive-table > .table-bordered > tbody > tr > th:last-child, | |
.responsive-table > .table-bordered > tbody > tr > td:last-child, | |
.responsive-table > .table-bordered > tfoot > tr > th:last-child, | |
.responsive-table > .table-bordered > tfoot > tr > td:last-child { | |
border-right: 0; | |
} | |
.responsive-table > .table-bordered > tbody > tr:last-child > th, | |
.responsive-table > .table-bordered > tbody > tr:last-child > td, | |
.responsive-table > .table-bordered > tfoot > tr:last-child > th, | |
.responsive-table > .table-bordered > tfoot > tr:last-child > td { | |
border-bottom: 0; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Updated the code a bit on the fork, should update changes :)