Skip to content

Instantly share code, notes, and snippets.

@rbaty-barr
Last active April 12, 2017 16:52
Show Gist options
  • Save rbaty-barr/417cefaf7775b8570308fc92efe1ee92 to your computer and use it in GitHub Desktop.
Save rbaty-barr/417cefaf7775b8570308fc92efe1ee92 to your computer and use it in GitHub Desktop.
base css file with media queries and some base platform idents in place
/* custom styles here */
.android {
display: none;
}
.windows {
display: none;
}
.ios {
display: none;
}
.standalone {
display: none;
}
.mobileAny {
display: none;
}
#iosOverlay {
position: absolute;
z-index: 1031;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(25,48,90,.85);
}
#iosOverlay p {
color: #fff;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 500;
}
#mobileinfoBlock {
margin-top: 7vh;
}
#skip a
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
#skip a:focus
{
position:static;
width:auto;
height:auto;
}
.float-label-control { position: relative; margin-bottom: 1.5em; }
.float-label-control ::-webkit-input-placeholder { color: transparent; }
.float-label-control :-moz-placeholder { color: transparent; }
.float-label-control ::-moz-placeholder { color: transparent; }
.float-label-control :-ms-input-placeholder { color: transparent; }
.float-label-control input:-webkit-autofill,
.float-label-control textarea:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -moz-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; }
.float-label-control input, .float-label-control textarea, .float-label-control label { font-size: 1.3em; box-shadow: none; -webkit-box-shadow: none; }
.float-label-control input:focus,
.float-label-control textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0px; }
.float-label-control textarea:focus { padding-bottom: 4px; }
.float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-radius: 0px; border-bottom: 1px solid #aaa; outline: none; margin: 0px; background: none; }
.float-label-control textarea { padding: 0.1em 0em 5px 0em; }
.float-label-control label { position: absolute; font-weight: normal; top: -1.0em; left: 0.08em; color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 300ms none ease-out; -webkit-animation: float-labels 300ms none ease-out; -o-animation: float-labels 300ms none ease-out; -ms-animation: float-labels 300ms none ease-out; -khtml-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/ animation-play-state: running !important; -webkit-animation-play-state: running !important; }
.float-label-control input.empty + label,
.float-label-control textarea.empty + label { top: 0.25em; font-size: 1.3em; animation: none; -webkit-animation: none; }
#searchFormNav .float-label-control input.empty + label { top: 0.9em; font-size: 1.0em; animation: none; -webkit-animation: none; }
.float-label-control input:not(.empty) + label,
.float-label-control textarea:not(.empty) + label { z-index: 1; }
.float-label-control input:not(.empty):focus + label,
.float-label-control textarea:not(.empty):focus + label { color: #aaaaaa; }
.float-label-control.label-bottom label { -moz-animation: float-labels-bottom 300ms none ease-out; -webkit-animation: float-labels-bottom 300ms none ease-out; -o-animation: float-labels-bottom 300ms none ease-out; -ms-animation: float-labels-bottom 300ms none ease-out; -khtml-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; }
.float-label-control.label-bottom input:not(.empty) + label,
.float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; }
@keyframes float-labels {
0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
20% { font-size: 1.5em; opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; font-size: 0.85em; }
100% { top: -1em; opacity: 1; }
}
@-webkit-keyframes float-labels {
0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
20% { font-size: 1.5em; opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; font-size: 0.85em; }
100% { top: -1em; opacity: 1; }
}
@keyframes float-labels-bottom {
0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
20% { font-size: 1.5em; opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; font-size: 0.85em; }
100% { top: 3em; opacity: 1; }
}
@-webkit-keyframes float-labels-bottom {
0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
20% { font-size: 1.5em; opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; font-size: 0.85em; }
100% { top: 3em; opacity: 1; }
}
@media screen and (max-height: 575px){
#rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/* iphone horiz */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
}
/* iphone vertical */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/* iPhone 6 */
/* portrait & landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
/* STYLES GO HERE */
}
/* iPhone 6 landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6 portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
/* iPhone 6+ */
/* portrait & landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
/* STYLES GO HERE */
}
/* iPhone 6+ landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6+ portrait */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
@media (min-width: 768px){
}
/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {
}
/* ipad generic */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* ipad landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* ipad portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {
}
/* end media queries */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment