app/assets/stylesheets/application.css.scss
//= require_self
@import "font-awesome-sprockets";
@import "font-awesome";
// First import swatch variables
@import "bootswatch/cosmo/variables";
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
// And finally bootswatch style itself
@import "bootswatch/cosmo/bootswatch";
@import "awesome-bootstrap-checkbox";
#all-lacquers-count {
font-weight: 500;
}
.fl {
float:left !important;
// height: 1000px;
}
.masonry-style-row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
.delete-review {
padding-left: 15px;
}
.menu-category {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
}
.modal-dialog {
padding-top: 5%;
}
.modal-dialog.high {
padding-top: inherit;
}
a.light-blue-link {
color: #00FFFF;
}
.html_safe {
display: none;
}
.btn.selected {
background-color: black;
}
body {
padding-top: 70px;
padding-bottom: 30px;
font-family: 'Karla', sans-serif;
}
h1 {
font-family: 'Karla', sans-serif;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
td {
font-size: 20px;
}
.brands-buttons {
border: 1px solid #9a50bd;
border-radius: 5px;
padding: 5px 3px 5px 5px;
width: 32%;
margin-right: 2%;
}
.colors-buttons {
border: 1px solid #38b800;
border-radius: 5px;
padding: 5px 3px 5px 5px;
width: 32%;
}
.finishes-buttons {
border: 1px solid #1e7de6;
border-radius: 5px;
padding: 5px 3px 5px 5px;
width: 32%;
margin-left: 2%;
}
.btn.finishes,
.btn.colors,
.btn.brands {
background-color: #808080;
border: #282828;
border-radius: 2px;
}
.btn.finishes:hover,
.btn.colors:hover,
.btn.brands:hover {
background-color: #111;
}
.grey-rounded {
background-color: #808080;
border: #282828;
border-radius: 2px;
}
.btn.selected {
background-color: black;
}
.favorites-count.not-favorited {
min-height: 60px;
text-align: center;
background-image: image-url('heart-filled-gray.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
font-size: 1.25em;
padding-top: 12px;
}
.favorites-count.favorited {
min-height: 60px;
text-align: center;
background-image: image-url('heart-filled-red.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
font-size: 1.25em;
padding-top: 12px;
}
.padded_lacquer_pic {
margin: 0 25px;
}
// china - 101
// opi - 106
// butter - 76.5
// essie - 96.5
// deborah - 70
// nails inc - 49.5
.padded_lacquer_pic_large {
max-width: 100%;
height: auto;
padding: 0 100px;
background-color: #fff;
}
.padded_lacquer_pic_large.opi {
padding: 0 106px;
}
.padded_lacquer_pic_large.deborah {
padding: 0 70px;
}
.padded_lacquer_pic_large.butter {
padding: 0 77px;
}
.padded_lacquer_pic_large.nailsinc {
padding: 0 50px;
}
.padded_lacquer_pic_large.essie {
padding: 0 97px;
}
.padded_lacquer_pic_small {
// margin: 0 7px;
}
.chunky_image_large {
max-width: 100%;
height: auto;
}
.chunky_image_small {
margin-left: -10px;
}
.search_result_item {
font-size: 1.5em;
}
.small-item-card {
padding:0;
-webkit-box-shadow: 7px 6px 24px -12px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 6px 24px -12px rgba(0,0,0,0.75);
box-shadow: 7px 6px 24px -12px rgba(0,0,0,0.75);
}
.long-item-card {
margin-bottom: 8px;
-webkit-box-shadow: 7px 6px 24px -12px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 6px 24px -12px rgba(0,0,0,0.75);
box-shadow: 7px 6px 24px -12px rgba(0,0,0,0.75);
}
.grey-heart {
color: grey;
text-align: center;
width: 24px;
}
.red-heart {
color: #ff0039;
text-align: center;
}
.red-heart:hover {
color: #ff0039;
}
.likes-message {
font-size: .75em;
padding-top: 5px;
}
.text-center {
text-align: center;
}
.glyphicon-heart {
padding-top: 5px;
}
.lacquer-show-favorite {
font-size: 1.5em;
}
.brand-show-favorite {
margin-top: 2.5px;
}
.brand-show-favorite .fa-heart-o:before {
color: white;
}
.brand-show-favorite .fa-heart:before {
color: white;
}
.fa-check {
margin-top: 5px;
margin-right: 5px;
}
.menu-category {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
}
.horizontal-scroll {
//width: 100%;
height: 345px;
// border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.horizontal-scroll.small {
//width: 100%;
height: 260px;
// border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
@media (max-width: 903px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
.navbar-default .navbar-brand {
font-family: 'Marck Script', cursive;
color: #ff0039;
}
#love-and {
margin: 0 3px;
}
.label-checkbox {
margin-right: 2px;
}
ul.fave {
// position: relative;
list-style-type: none;
padding: 0px;
margin: 0px;
}
li.fave {
position: relative;
padding-left: 5px;
vertical-align: middle;
}
li.fave:before {
position: relative;
padding-right: 5px;
bottom: 2.5px;
font-family: FontAwesome;
font-size: 0.5em;
content: "\f004";
}
.profile-section {
max-height: 170px;
overflow: scroll;
}
.item-brand {
border-right: 1px solid #ccc;
margin-right: 0px;
padding: 0 5px;
}
.item-brand-last {
padding: 0 5px;
}
#hide {
color: grey;
cursor: pointer;
}
#show {
color: grey;
cursor: pointer;
}
.no-underline:hover,
.no-underline a:hover {
text-decoration: none;
}
.toggle:hover {
cursor: pointer;
}
tr.selected {
background-color: inherit;
}
.selected {
background-color: #ccc;
}
.slide-right {
vertical-align: middle;
border-left: 1px solid #ccc;
}
.ui-autocomplete {
position: absolute;
cursor: default;
z-index: 3000 !important;
background-color: white;
list-style-type: none;
-webkit-box-shadow: 10px 10px 14px -4px rgba(204,204,204,1);
-moz-box-shadow: 10px 10px 14px -4px rgba(204,204,204,1);
box-shadow: 10px 10px 14px -4px rgba(204,204,204,1);
}
.ui-menu-item {
position: relative;
left: 0;
padding: 5px 18px;
margin-left: -40px;
width: 202px;
}
.ui-menu-item:hover {
background-color: #ccc;
}
.ui-menu-item:focus {
background-color: #ccc;
}
.ui-state-focus {
background-color: #ccc;
}
.ui-helper-hidden-accessible {
display: none;
}
.add-to-btn {
margin-right: 30px;
}
.thumbnail > img, .thumbnail a > img {
display: block;
max-width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
}
.no-margin-bottom {
margin-bottom: 0;
font-size: 1.2em;
}
.no-margin-bottom .fa {
font-size: .6em;
float: right;
margin-top: 9px;
}
.badge {
padding: 1px 9px 2px;
font-size: 12.025px;
font-weight: bold;
white-space: nowrap;
color: #ffffff;
background-color: #999999;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.no-margin-bottom {
vertical-align: middle;
padding-top: 5px;
padding-bottom: 5px;
}
legend>.badge-tracker-wrapper {
vertical-align: middle;
}
legend>.badge {
vertical-align: middle;
}
legend>.fa {
vertical-align:middle;
margin-top: -0.25em;
}
legend>.fa:hover {
cursor: pointer;
color: grey;
}
.red-background {
background-color: red;
}
.green-background {
background-color: #00CC33;
}
.footer {
padding: 0 15px;
position: fixed;
bottom:0;
width: 100%;
font-size: 1.4em;
color: #ccc;
background-color: rgba(0, 0, 0, 0.8);
}
.footer a {
color: white;
z-index: 10000;
position: relative;
}
.highlight:hover, .highlight:active, .highlight:visited, .highlight:link, .highlight:focus {
text-decoration: none;
}
.highlighted {
background-color: #ff0039;
}
i.small-red-heart, i.small-red-heart:hover {
color: #ff0039;
font-size: 0.8em;
cursor: text;
}
#about li {
padding: 10px 0px;
}
#learn-more-button:hover {
background-color: dimgrey;
}
#learn-more-button {
margin-top: 25px;
border-radius: 50px;
background-color: #a1a1a1;
// box-shadow:
-webkit-box-shadow: 10px 10px 30px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 30px -4px rgba(0,0,0,0.75);
box-shadow: 10px 10px 30px -4px rgba(0,0,0,0.75);
}
.sign-in-to-btn {
margin-right: 2.5%;
}
@media (max-width: 703px) {
.sign-in-to-btn {
display: none;
}
}
@media (max-width: 658px) {
.footer>.col-md-8, .footer>.col-md-4 {
width: 100%;
display: block;
float: left !important;
text-align: center !important;
}
}
@media (max-width: 793px) {
.add-to-btn {
margin-bottom: 5px;
}
}
@media (min-width: 600px) and (max-width: 1000px) {
.add-to-btn {
margin-right: 47px;
}
.row-fluid > [class*=span]:nth-child(2n+1) {
clear: both;
margin-left: 0;
}
.col-md-3 {
width: 49.7%;
display: inline-block;
}
}
@media (min-width: 1000px) and (max-width: 1200px) {
.add-to-btn {
width: 200px;
margin-right: 50px;
}
.row-fluid > [class*=span]:nth-child(2n+1) {
clear: both;
margin-left: 0;
}
.col-md-3 {
width: 33.333333333333%;
display: inline-block;
}
}
@media (min-width: 757px) {
.add-or-remove {
position: absolute;
//display: inline-block;
//margin-left: 300px;
right: 0;
}
.add-or-remove-wrapper {
float: right;
}
}
@media (max-width: 652px) {
.add-or-remove {
position: relative;
display: inline-block;
margin-left: 30.66666667%;
}
}
@media (min-width: 653px) and (max-width: 756px) {
.add-or-remove {
position: relative;
display: inline-block;
float: left;
left: 0;
}
}
@media (min-width: 900px) and (max-width: 991px) {
.container {
width: 900px;
margin: 0 auto;
}
}