Skip to content

Instantly share code, notes, and snippets.

@artlung

artlung/SassMeister-input.scss

Created June 23, 2014 21:03
Show Gist options
  • Save artlung/d688c964ebb706a185d5 to your computer and use it in GitHub Desktop.
Save artlung/d688c964ebb706a185d5 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
html, body {
height: 100%;
}
body {
color: #fff;
text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
font-family: "Droid Sans", Arial, sans-serif;
background: rgb(205, 58, 24);
/* just in case */
background: -webkit-linear-gradient(40deg, rgba(255, 102, 33, 1) 0%, rgba(216, 38, 41, 1) 48%, rgba(212, 3, 192, 1) 72%, rgba(99, 0, 114, 1) 85%, rgba(99, 35, 163, 1) 100%);
background-size: 100% 1190px;
}
#app-parent {
position: relative;
height: 100%;
}
img.not-available {
opacity: .5;
}
button.selected {
opacity: .1;
}
.milk-top-logo, .milk-bottom-slacker {
margin: 15px auto;
}
div {
&.offer.selected {
opacity: 0.6;
}
&.loading {
position: fixed;
height: 50px;
width: 50px;
background-color: #000;
top: 200px;
left: 50%;
margin-left: -25px;
border-radius: 25px;
background-image: url(../img/ajax-loader.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0.7;
}
}
.error {
color: #ffff00 !important;
border-color: #ffff00 !important;
}
span.help {
color: #ffff00 !important;
}
.slackerRadioHeader {
background-repeat: no-repeat;
background-position: 50% 50%;
height: 50px;
span {
display: none;
}
}
.slackerRadioPremium {
background-image: url(../img/premium-full.png);
}
.slackerRadioPlus {
background-image: url(../img/plus-full.png);
}
.table.table-unbordered {
border: none !important;
> {
tbody > tr > {
td, th {
border: none !important;
}
}
tfoot > tr > td {
border: none !important;
}
}
}
.milk-background {
/* height: 1920px;
width: 1080px;
*/
position: relative;
margin: auto;
}
.milk-logo {
background-image: url(../img/milk_premium_logo.png);
/* width: 867px;
height: 294px; */
width: 200px;
background-position: 50% 50%;
position: absolute;
top: 80px;
left: 50%;
margin-left: -433px;
}
.milk-powered-by-slacker {
background-image: url(../img/spl_logo_slacker.png);
height: 59px;
width: 639px;
background-position: 50% 50%;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -316px;
}
.hide-spans span {
display: none;
}
.btn-milk {
background-color: #fff;
border: none;
font-weight: bold;
border-radius: 17px;
color: #7A378B;
&:hover {
background-color: #fff;
border: none;
font-weight: bold;
border-radius: 17px;
color: #7A378B;
}
}
.milk-sequence {
min-height: 300px;
.slide {
display: none;
min-height: 200px;
&.active {
display: block;
}
}
}
.milk-error {
border-radius: 10px;
border: 3px double #c00;
background-color: #fff;
margin: 2em 0;
color: #c00;
}
.preload {
height: 1px;
width: 1px;
overflow: hidden;
padding: 0;
margin: 0;
}
#cvv-tooltip {
position: fixed;
top: 0;
left: 0;
font-size: small;
width: 100%;
padding: 30px;
display: none;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
color: #000;
text-shadow: none;
}
.img-lock {
display: block;
height: 18px;
width: 15px;
float: left;
margin: 9px 0;
}
input[type=text] {
background-color: #6B275F !important;
border: 1px solid #ccc;
padding: 3px;
border-radius: 2px;
&:focus {
border: 1px solid #fff;
outline: none;
}
}
select, option {
background-color: #6B275F;
border: 1px solid #ccc;
padding: 3px;
border-radius: 2px;
}
select option:first {
background-color: red;
}
a {
color: #fff;
text-decoration: underline;
&:hover {
color: #fff;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.2);
}
}
.form-actions {
width: 220px;
margin: 0 auto;
background-color: transparent;
text-align: center;
}
.never-mind {
margin: 13px 0 0 0;
display: inline-block;
color: #cccccc;
}
.credit-card-indicator-row {
height: 0;
> td {
height: 0px !important;
position: relative !important;
padding: 0 !important;
}
}
.credit-card {
/*
position: absolute;
width: 36px;
height: 1px;
top: -32px;
right: -202px;
*/
top: -53px;
margin-left: 4px;
img {
/*display: none;
width: 100%;*/
height: 20px;
&.partial {
opacity: 0.5;
}
}
}
.table-samsung {
width: auto;
margin: auto;
}
@each $orientation in ('landscape', 'portrait') {
@each $breakpoint in (320, 768, 1024, 1400, 2500) {
@media only screen and (min-width: #{$breakpoint}px) and (orientation: #{$orientation}) {
.milk-top-logo {
$tablet_width_portrait: 356px;
$tablet_width_landscape: 356px;
$width: 100%;
@if ($orientation == 'portrait') {
$width: $tablet_width_portrait;
} @else {
$width: $tablet_width_landscape;
}
width: $width;
}
.milk-bottom-slacker {
width: 324px;
}
@if ($breakpoint > 769) {
body .container-fluid {
padding-right: 60px;
padding-left: 60px;
}
.samsung-footer {
position: absolute;
bottom: 20px;
width: 600px;
left: 50%;
margin-left: -300px;
}
.table-samsung {
width: auto;
margin: 0;
}
} else {
.samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
}
}
}
/*
@media only screen and (max-height: 1200px) {
body {
background-size: 100% 1220px;
}
}
@media only screen and (max-height: 800px) {
body {
background-size: 100% 820px;
}
}
@media only screen and (max-height: 400px) {
body {
background-size: 100% 420px;
}
}
*/
@media only screen and (max-width: 480px) {
div.col-md-12 > div {
margin: auto 10px;
}
}
// short screen
@media only screen and (max-height: 640px) {
.container-fluid {
padding-left: 10px;
padding-right: 10px;
}
.milk-top-logo {
width: 85%;
}
body {
line-height: 1.1;
}
.table.table-unbordered > tbody > tr > td {
padding: 3px;
}
}
Raw
SassMeister-output.css
html, body {
height: 100%;
}
body {
color: #fff;
text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
font-family: "Droid Sans", Arial, sans-serif;
background: #cd3a18;
/* just in case */
background: -webkit-linear-gradient(40deg, #ff6621 0%, #d82629 48%, #d403c0 72%, #630072 85%, #6323a3 100%);
background-size: 100% 1190px;
}
#app-parent {
position: relative;
height: 100%;
}
img.not-available {
opacity: .5;
}
button.selected {
opacity: .1;
}
.milk-top-logo, .milk-bottom-slacker {
margin: 15px auto;
}
div.offer.selected {
opacity: 0.6;
}
div.loading {
position: fixed;
height: 50px;
width: 50px;
background-color: #000;
top: 200px;
left: 50%;
margin-left: -25px;
border-radius: 25px;
background-image: url(../img/ajax-loader.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0.7;
}
.error {
color: #ffff00 !important;
border-color: #ffff00 !important;
}
span.help {
color: #ffff00 !important;
}
.slackerRadioHeader {
background-repeat: no-repeat;
background-position: 50% 50%;
height: 50px;
}
.slackerRadioHeader span {
display: none;
}
.slackerRadioPremium {
background-image: url(../img/premium-full.png);
}
.slackerRadioPlus {
background-image: url(../img/plus-full.png);
}
.table.table-unbordered {
border: none !important;
}
.table.table-unbordered > tbody > tr > td, .table.table-unbordered > tbody > tr > th {
border: none !important;
}
.table.table-unbordered > tfoot > tr > td {
border: none !important;
}
.milk-background {
/* height: 1920px;
width: 1080px;
*/
position: relative;
margin: auto;
}
.milk-logo {
background-image: url(../img/milk_premium_logo.png);
/* width: 867px;
height: 294px; */
width: 200px;
background-position: 50% 50%;
position: absolute;
top: 80px;
left: 50%;
margin-left: -433px;
}
.milk-powered-by-slacker {
background-image: url(../img/spl_logo_slacker.png);
height: 59px;
width: 639px;
background-position: 50% 50%;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -316px;
}
.hide-spans span {
display: none;
}
.btn-milk {
background-color: #fff;
border: none;
font-weight: bold;
border-radius: 17px;
color: #7A378B;
}
.btn-milk:hover {
background-color: #fff;
border: none;
font-weight: bold;
border-radius: 17px;
color: #7A378B;
}
.milk-sequence {
min-height: 300px;
}
.milk-sequence .slide {
display: none;
min-height: 200px;
}
.milk-sequence .slide.active {
display: block;
}
.milk-error {
border-radius: 10px;
border: 3px double #c00;
background-color: #fff;
margin: 2em 0;
color: #c00;
}
.preload {
height: 1px;
width: 1px;
overflow: hidden;
padding: 0;
margin: 0;
}
#cvv-tooltip {
position: fixed;
top: 0;
left: 0;
font-size: small;
width: 100%;
padding: 30px;
display: none;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
color: #000;
text-shadow: none;
}
.img-lock {
display: block;
height: 18px;
width: 15px;
float: left;
margin: 9px 0;
}
input[type=text] {
background-color: #6B275F !important;
border: 1px solid #ccc;
padding: 3px;
border-radius: 2px;
}
input[type=text]:focus {
border: 1px solid #fff;
outline: none;
}
select, option {
background-color: #6B275F;
border: 1px solid #ccc;
padding: 3px;
border-radius: 2px;
}
select option:first {
background-color: red;
}
a {
color: #fff;
text-decoration: underline;
}
a:hover {
color: #fff;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.2);
}
.form-actions {
width: 220px;
margin: 0 auto;
background-color: transparent;
text-align: center;
}
.never-mind {
margin: 13px 0 0 0;
display: inline-block;
color: #cccccc;
}
.credit-card-indicator-row {
height: 0;
}
.credit-card-indicator-row > td {
height: 0px !important;
position: relative !important;
padding: 0 !important;
}
.credit-card {
/*
position: absolute;
width: 36px;
height: 1px;
top: -32px;
right: -202px;
*/
top: -53px;
margin-left: 4px;
}
.credit-card img {
/*display: none;
width: 100%;*/
height: 20px;
}
.credit-card img.partial {
opacity: 0.5;
}
.table-samsung {
width: auto;
margin: auto;
}
@media only screen and (min-width: 320px) and (orientation: landscape) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 768px) and (orientation: landscape) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 1024px) and (orientation: landscape) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
body .container-fluid {
padding-right: 60px;
padding-left: 60px;
}
.samsung-footer {
position: absolute;
bottom: 20px;
width: 600px;
left: 50%;
margin-left: -300px;
}
.table-samsung {
width: auto;
margin: 0;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 1400px) and (orientation: landscape) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
body .container-fluid {
padding-right: 60px;
padding-left: 60px;
}
.samsung-footer {
position: absolute;
bottom: 20px;
width: 600px;
left: 50%;
margin-left: -300px;
}
.table-samsung {
width: auto;
margin: 0;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 2500px) and (orientation: landscape) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
body .container-fluid {
padding-right: 60px;
padding-left: 60px;
}
.samsung-footer {
position: absolute;
bottom: 20px;
width: 600px;
left: 50%;
margin-left: -300px;
}
.table-samsung {
width: auto;
margin: 0;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 320px) and (orientation: portrait) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 768px) and (orientation: portrait) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 1024px) and (orientation: portrait) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
body .container-fluid {
padding-right: 60px;
padding-left: 60px;
}
.samsung-footer {
position: absolute;
bottom: 20px;
width: 600px;
left: 50%;
margin-left: -300px;
}
.table-samsung {
width: auto;
margin: 0;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 1400px) and (orientation: portrait) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
body .container-fluid {
padding-right: 60px;
padding-left: 60px;
}
.samsung-footer {
position: absolute;
bottom: 20px;
width: 600px;
left: 50%;
margin-left: -300px;
}
.table-samsung {
width: auto;
margin: 0;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
@media only screen and (min-width: 2500px) and (orientation: portrait) {
.milk-top-logo {
width: 356px;
}
.milk-bottom-slacker {
width: 324px;
}
body .container-fluid {
padding-right: 60px;
padding-left: 60px;
}
.samsung-footer {
position: absolute;
bottom: 20px;
width: 600px;
left: 50%;
margin-left: -300px;
}
.table-samsung {
width: auto;
margin: 0;
}
else .samsung-footer {
position: absolute;
bottom: 20px;
width: 300px;
left: 50%;
margin-left: -150px;
}
}
/*
@media only screen and (max-height: 1200px) {
body {
background-size: 100% 1220px;
}
}
@media only screen and (max-height: 800px) {
body {
background-size: 100% 820px;
}
}
@media only screen and (max-height: 400px) {
body {
background-size: 100% 420px;
}
}
*/
@media only screen and (max-width: 480px) {
div.col-md-12 > div {
margin: auto 10px;
}
}
@media only screen and (max-height: 640px) {
.container-fluid {
padding-left: 10px;
padding-right: 10px;
}
.milk-top-logo {
width: 85%;
}
body {
line-height: 1.1;
}
.table.table-unbordered > tbody > tr > td {
padding: 3px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment