Created
July 14, 2016 06:14
-
-
Save uakhan/88a88e233f444e1d520cb0b620d0ca88 to your computer and use it in GitHub Desktop.
V6: Reponsive fix + crosstab table fix
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
@font-face { | |
font-family: 'ProximaNova'; | |
src: url('../fonts/proximanova-light.eot'); | |
src: url('../fonts/proximanova-light.eot?#iefix') format('embedded-opentype'), url('../fonts/proximanova-light.woff') format('woff'), url('../fonts/proximanova-light.ttf') format('truetype'), url('../fonts/proximanova-light.svg#ProximaNova-Light') format('svg'); | |
font-weight: 300; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'ProximaNova'; | |
src: url('../fonts/proximanova-regular.eot'); | |
src: url('../fonts/proximanova-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/proximanova-regular.woff') format('woff'), url('../fonts/proximanova-regular.ttf') format('truetype'), url('../fonts/proximanova-regular.svg#ProximaNova-Regular') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'ProximaNova'; | |
src: url('../fonts/proximanova-bold.eot'); | |
src: url('../fonts/proximanova-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/proximanova-bold.woff') format('woff'), url('../fonts/proximanova-bold.ttf') format('truetype'), url('../fonts/proximanova-bold.svg#ProximaNova-Bold') format('svg'); | |
font-weight: 700; | |
font-style: normal; | |
} | |
body { | |
font-family: 'ProximaNova', Arial, Helvetica | |
} | |
/* | |
* Row with equal height columns | |
* -------------------------------------------------- | |
*/ | |
.row-flex, .row-flex > div[class*='col-'] { | |
display: -webkit-box; | |
display: -moz-box; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
flex:1 1 auto; | |
} | |
.row-flex-wrap { | |
-webkit-flex-flow: row wrap; | |
align-content: flex-start; | |
flex:0; | |
} | |
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] { | |
margin:-.2px; /* hack adjust for wrapping */ | |
} | |
.container-flex > div[class*='col-'] > div,.row-flex > div[class*='col-'] > div { | |
width:100%; | |
} | |
.flex-col { | |
display: flex; | |
display: -webkit-flex; | |
flex: 1 100%; | |
flex-flow: column nowrap; | |
} | |
.flex-grow { | |
display: flex; | |
-webkit-flex: 2; | |
flex: 2; | |
} | |
body { | |
background-image: url('../images/pattern.png'); | |
} | |
.col_content { | |
background-color: #F3F3F3; | |
padding: 20px; | |
height: 100%; | |
border-top: 7px solid #eaeaea; | |
} | |
.container.main_wrap { | |
margin-top: 30px; | |
padding: 30px; | |
background-color: white; | |
padding-bottom: 0; | |
} | |
.col_content h2 { | |
margin-top: 0; | |
color: #c03e3e; | |
font-weight: bold; | |
font-size: 22px; | |
} | |
.container.main_wrap > .row { | |
/* margin-bottom: 30px; */ | |
} | |
.col_content.intro { | |
border: 0; | |
background: none; | |
padding: 0; | |
margin-bottom: 30px; | |
} | |
.col_content.intro.intro_center { | |
text-align: center; | |
} | |
.row .col_wrap { | |
padding-bottom: 30px; | |
} | |
.col_content.intro.intro_center h2 { | |
font-size: 26px; | |
margin-top: 10px; | |
} | |
.type_map { | |
text-align: center; | |
} | |
h3 { | |
font-weight: bold; | |
margin: 0; | |
color: #c03e3e; | |
font-size: 22px; | |
} | |
.type_map p { | |
margin-top: 5px; | |
} | |
.type_map iframe { | |
border: 5px solid white !important; | |
} | |
.type_image > .col_content { | |
text-align: center; | |
display: table; | |
} | |
.type_image > .col_content img { | |
max-width: 100%; | |
/* vertical-align: middle; */ | |
/* display: table-cell; */ | |
} | |
/*.type_image > .col_content > .image_v_middle { | |
vertical-align: middle; | |
display: table-cell; | |
}*/ | |
.type_table .table>thead>tr>th, | |
.type_table .table>tbody>tr>th, | |
.type_table .table>tfoot>tr>th, | |
.type_table .table>thead>tr>td, | |
.type_table .table>tbody>tr>td, | |
.type_table .table>tfoot>tr>td { | |
padding: 5px; | |
/* background-color: white; */ | |
} | |
.type_table .table>thead>tr>th, | |
.type_table .table>tbody>tr>th { | |
background-color: #e2e2e2; | |
} | |
.type_table h3 { | |
text-align: center; | |
margin-bottom: 20px; | |
} | |
.container.header img { | |
max-width: 170px; | |
float: left; | |
margin-right: 20px; | |
} | |
.container.header h1 { | |
display: inline-block; | |
margin-top: 8px; | |
font-weight: bold; | |
color: #c03e3e; | |
font-size: 30px; | |
} | |
.container.header { | |
margin-top: 30px; | |
} | |
.container.footer img { | |
max-width: 100px; | |
} | |
.container.footer .alignright { | |
text-align: right; | |
} | |
.container.footer { | |
margin-top: 20px; | |
margin-bottom: 30px; | |
} | |
a { | |
color: #c03e3e; | |
} | |
.MacFirefox .type_image > .col_content img { | |
width: 100%; max-width: -moz-max-content; | |
} | |
.MacSafari .row-flex > div[class*='col-'], .container-flex > div[class*='col-'] { | |
margin:-.3px; /* hack adjust for wrapping */ | |
} | |
.MacSafari .type_image > .col_content { | |
display: block; | |
} | |
.MacSafari .type_image > .col_content > .image_v_middle { | |
display: block; | |
} | |
/*.WindowsMozilla .type_image > .col_content img { | |
width: 100%; | |
}*/ | |
.WindowsMozilla .type_image > .col_content { | |
display: block; | |
} | |
.MacSafari .col_content { | |
height: auto; | |
} | |
.row-flex > div:only-child { | |
display: block; | |
flex: none; | |
} | |
h3 { | |
margin-bottom: 20px; | |
text-align: center; | |
} | |
.close { | |
display: block; | |
position: absolute; | |
background-color: white; | |
border: 1px solid #a7a7a7; | |
width: 30px; | |
height: 30px; | |
border-radius: 50%; | |
font-weight: lighter; | |
font-size: 19px; | |
opacity: 1; | |
color: #a7a7a7; | |
line-height: 23px; | |
top: -8px; | |
right: 6px; | |
text-align: center; | |
display:none; | |
} | |
.close:focus, .close:hover { | |
opacity: 1; | |
color: rgba(255, 255, 255, 0.44); | |
background: #cecece; | |
border-color: #cecece; | |
} | |
.g_map_container { | |
height: 350px; | |
border: 5px solid white !important; | |
} | |
.recordslist_table { | |
table-layout: auto; | |
} | |
/*Crosstab preview*/ | |
.scrolling td { | |
vertical-align: top; | |
padding: 10px; | |
min-width: 100px; | |
} | |
.outer { | |
position: relative; | |
background-color: #eeeeee; | |
width: 100% !important; | |
overflow: hidden; | |
} | |
.inner { | |
background-color: #fff; | |
overflow-x: auto; | |
overflow-y: visible; | |
margin-left: 115px; | |
width: 100% !important; | |
} | |
.th_first { | |
position: absolute; | |
left: 0; | |
width: 120px; | |
} | |
@-moz-document url-prefix() { | |
.th_first { | |
position: absolute; | |
left: 0; | |
width: 120px; | |
margin-top: -1px; | |
} | |
} | |
.cross_table { | |
table-layout: auto; | |
} | |
.main-map-legend{ | |
border: 1px solid lightgray; | |
background-color:white; | |
width:100px; | |
-webkit-border-radius: 10px; | |
border-radius: 10px; | |
font-size:13px; | |
} | |
@media print { | |
.close { | |
display:none; | |
} | |
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { | |
float: left; | |
} | |
.col-sm-12 { | |
width: 100%; | |
} | |
.col-sm-11 { | |
width: 91.66666667%; | |
} | |
.col-sm-10 { | |
width: 83.33333333%; | |
} | |
.col-sm-9 { | |
width: 75%; | |
} | |
.col-sm-8 { | |
width: 66.66666667%; | |
} | |
.col-sm-7 { | |
width: 58.33333333%; | |
} | |
.col-sm-6 { | |
width: 50%; | |
} | |
.col-sm-5 { | |
width: 41.66666667%; | |
} | |
.col-sm-4 { | |
width: 33.33333333%; | |
} | |
.col-sm-3 { | |
width: 25%; | |
} | |
.col-sm-2 { | |
width: 16.66666667%; | |
} | |
.col-sm-1 { | |
width: 8.33333333%; | |
} | |
} | |
/* | |
88 ad888888b, ,a8888a, ,a8888a, | |
,d88 d8" "88 ,8P"' `"Y8, ,8P"' `"Y8, | |
888888 a8P ,8P Y8, ,8P Y8, | |
88 ,d8P" 88 88 88 88 | |
88 a8P" 88 88 88 88 | |
88 a8P' `8b d8' `8b d8' | |
88 d8" `8ba, ,ad8' `8ba, ,ad8' | |
88 88888888888 "Y8888P" "Y8888P" | |
*/ | |
@media (max-width: 1200px) { | |
} | |
/* | |
ad88888ba ad88888ba 88 | |
d8" "88 d8" "88 ,d88 | |
8P 88 8P 88 888888 | |
Y8, ,d88 Y8, ,d88 88 | |
"PPPPPP"88 "PPPPPP"88 88 | |
8P 8P 88 | |
8b, a8P 8b, a8P 88 | |
`"Y8888P' `"Y8888P' 88 | |
*/ | |
@media (max-width: 991px) { | |
} | |
/* | |
888888888888 ad8888ba, 888888888888 | |
,8P' 8P' "Y8 ,8P' | |
d8" d8 d8" | |
,8P' 88,dd888bb, ,8P' | |
d8" 88P' `8b d8" | |
,8P' 88 d8 ,8P' | |
d8" 88a a8P d8" | |
8P' "Y88888P" 8P' | |
*/ | |
@media (max-width: 767px) { | |
.row-flex, .row-flex > div[class*='col-'] { | |
display: block !important; | |
flex: none !important; | |
} | |
.row-flex-wrap { | |
-webkit-flex-flow: none !important; | |
align-content: none !important; | |
flex:0; | |
} | |
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] { | |
margin:0px; /* hack adjust for wrapping */ | |
} | |
.container-flex > div[class*='col-'] > div,.row-flex > div[class*='col-'] > div { | |
width:100%; | |
} | |
.flex-col { | |
display: block !important; | |
} | |
.flex-grow { | |
display: block !important; | |
} | |
.container.main_wrap { | |
margin-top: 0; | |
padding: 10px; | |
} | |
.row .col_wrap { | |
padding-bottom: 10px; | |
} | |
.container.footer { | |
text-align: center; | |
} | |
.container.footer .alignright { | |
margin-top: 20px; | |
text-align: center; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment