html, body {
background-color: $base-background-color;
font-family: $font-family-light-sans-serif;
}
.bar-light {
.badge {
background: $positive;
border-radius: 50%;
padding: 4px 6px;
color: #fff;
font-size: 12px;
display: inline-block;
height: 24px;
width: 24px;
text-align: center;
position: absolute;
bottom: 10px;
right: -10px;
top: auto;
}
}
.bg-red {
background-color: #e10f21;
color: #fff;
font-family: $font-family-sans-serif;
.item {
color: #fff;
.input-label {
display: none;
}
}
.item-input.item-stacked-label input, .item-input.item-stacked-label textarea {
background-color: transparent;
border: 1px solid #fff;
font-family: $font-family-sans-serif;
padding: 25px 15px;
color: #fff;
&::-webkit-input-placeholder {
color: #fff;
}
&:-moz-placeholder {
color: #fff;
}
&::-moz-placeholder {
color: #fff;
}
&:-ms-input-placeholder {
color: #fff;
}
}
.button {
font-size: 18px;
}
.button-default {
background-color: transparent;
border-color: #ffffff;
color: #ffffff;
}
.button-positive {
background-color: #fff;
color: #e10f21;
}
a {
color: #fff;
}
}
.bg-brown {
background-color: #534741;
color: #fff;
text-align: center;
font-family: $font-family-light-sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 28px;
padding: 20px 20px 16px;
text-align: left;
small {
color: #fff;
display: block;
font-size: 20px;
font-weight: normal;
margin-top: 10px;
}
}
.bg-brown-user {
background: #534741 url(../img/user.png) 10px 10px no-repeat;
background-size: 45px;
padding-left: 80px;
}
.bg-red-heart,
.bg-orange,
.bg-orange-light,
.bg-green {
background: $positive;
color: #fff !important;
padding-top: 16px;
padding-bottom: 16px;
text-align: center;
.button {
background-color: transparent;
border-radius: 0;
color: #fff;
border: 2px solid #fff;
min-height: 0;
font-size: 12px;
line-height: 28px;
margin-top: 6px;
}
small {
color: #fac283;
font-size: 18px;
line-height: 22px;
}
}
.bg-orange-light {
background: #fbb654 url(../img/offerte.png) 12px center no-repeat;
background-size: 32px;
small {
color: #fff;
}
}
.bg-green {
background: #809c62 url(../img/lista-spesa.png) 12px center no-repeat;
background-size: 32px;
}
.bg-red-heart {
background: $positive url(../img/preferiti.png) 12px center no-repeat;
background-size: 32px;
}
.bg-gray {
background: #ddd;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
.orange {
color: $positive;
}
}
.item {
font-size: 14px;
line-height: 16px;
text-overflow: initial;
white-space: initial;
.input-label {
font-size: 14px;
line-height: 16px;
}
}
.item-input.item-stacked-label input,
.item-input.item-stacked-label textarea {
border: 1px solid #ccc;
font-family: $font-family-light-sans-serif;
padding: 5px;
}
.item-input,
.item-button {
background-color: transparent;
border: none;
}
.item-input.item-stacked-label {
padding: 0 16px 16px;
}
.item-checkbox {
background-color: transparent;
border: none;
.item-content {
font-size: 10px;
line-height: 14px;
text-overflow: initial;
white-space: initial;
}
.checkbox {
top: 22px;
}
}
.item-no-padding {
padding: 0;
}
.item-stacked-label .input-label {
font-size: $item-font-size;
font-weight: 600;
max-width: inherit;
margin-bottom: 4px;
text-transform: uppercase;
text-align: left;
width: 100%;
}
.item-stacked-label .input-hint {
display: block;
font-size: 10px;
line-height: 14px;
margin-bottom: 4px;
}
.button {
font-size: 14px;
}
button.button {
line-height: 16px;
}
.menu-left {
background-color: #e10f21;
font-family: $font-family-sans-serif;
padding: 10px;
.item {
background-color: transparent;
color: #fff;
padding: 25px 10px 10px;
margin-left: 20px;
margin-right: 20px;
font-size: 16px;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.25);
&.indented {
padding-left: 36px;
}
&.disabled {
color: rgba(255,255,255,0.25);
}
.badge {
color: #e10f21;
background-color: #fff;
display: inline-block;
position: relative;
top: auto;
right: auto;
margin-left: 5px;
margin-top: -3px;
margin-bottom: -3px;
vertical-align: 1px;
}
}
}
.nav-bar-title img {
vertical-align: middle;
width: 100px;
}
.bar-light {
border-bottom: 1px solid #bbb;
box-shadow: 0px 0px 6px rgba(0,0,0,0.15);
}
.bar-light .button.button-clear {
padding-bottom: 10px;
padding-top: 10px;
}
.bar .button.button-icon .icon:before, .bar .button.button-icon.icon-left:before, .bar .button.button-icon.icon-right:before, .bar .button.button-icon:before, .bar button.button-icon .icon:before, .bar button.button-icon.icon-left:before, .bar button.button-icon.icon-right:before, .bar button.button-icon:before {
font-size: 40px;
}
.img-responsive {
display: inline-block;
max-width: 100%;
}
.slider-pager .slider-pager-page {
color: #ee7f01;
}
.slider-pager {
bottom: 10px;
}
.btn-white-outline {
border: 2px solid #fff;
font-size: 14px;
font-weight: 600;
line-height: 18px;
display: block;
text-align: center;
padding: 20px 15px;
min-height: 80px;
&, &:active, &:hover, &:focus {
color: #fff;
text-decoration: none;
}
}
h1 {
text-align: center;
font-size: 20px;
font-weight: 600;
line-height: 24px;
margin: 0;
padding: 10px;
small {
font-size: 12px;
display: block;
line-height: 16px;
}
}
h2 {
font-size: 28px;
font-weight: 300;
line-height: 36px;
}
h1+h2, h2.bg-white {
background-color: #fff;
margin-top: 0;
text-align: center;
padding: 10px;
font-size: 20px;
font-weight: 400;
}
.item h2 {
font-family: $font-family-light-sans-serif;
font-weight: 600;
line-height: 24px;
}
.item-store {
background-color: #e5e5e5;
margin-bottom: 10px;
padding: 10px;
border: none;
}
h3 {
color: #534741;
text-align: left;
font-size: 24px;
font-weight: 400;
line-height: 28px;
margin: 0;
small {
color: #534741;
font-size: 18px;
line-height: 22px;
display: block;
}
}
hr {
border-top: 1px solid #ddd;
}
h4.orange {
color: $positive;
text-align: left;
font-size: 18px;
font-weight: 400;
line-height: 22px;
margin: 0;
small {
color: $positive;
font-size: 14px;
line-height: 18px;
display: block;
}
}
.bg-light {
background-color: #f3f1f0;
}
.bg-orange {
background-color: $positive;
color: #000;
}
.item-button-right, a.item.item-button-right, button.item.item-button-right {
padding-right: 120px;
}
.item-button-right .item-content>.button, .item-button-right .item-content>.buttons, .item-button-right>.button, .item-button-right>.buttons {
top: 7px;
right: 7px;
}
.table {
border: 1px solid #ccc;
width: 100%;
thead>tr>th {
background-color: #c1c1c1;
border-top: 1px solid #ccc;
color: #000;
font-family: $font-family-sans-serif;
font-weight: 400;
padding: 10px 15px;
text-align: left;
text-transform: uppercase;
&.text-center {
text-align: center;
}
&.text-right {
text-align: right;
}
}
tbody>tr>td {
border-bottom: 1px solid #ccc;
padding: 10px 15px;
text-align: left;
&.text-center {
text-align: center;
}
&.text-right {
text-align: right;
}
.form-control {
width: 100%;
padding: 5px;
}
&.text-center .form-control {
text-align: center;
}
.orange {
color: $positive;
}
}
tbody>tr:nth-child(odd) {
background-color: rgba(255,255,255,0.60);
}
tfoot>tr>th {
background-color: #c1c1c1;
border-top: 1px solid #ccc;
color: #000;
font-family: $font-family-sans-serif;
font-weight: 400;
padding: 10px 15px;
text-align: left;
text-transform: uppercase;
&.text-center {
text-align: center;
}
&.text-right {
text-align: right;
}
}
}
.card-points {
color: #fff;
font-size: 16px;
line-height: 26px;
padding: 6px 20px 30px 19px;
img {
width: 80px;
position: absolute;
right: 28px; top: 20px;
}
strong {
font-size: 26px;
font-weight: 800;
line-height: 26px;
}
.card-points-bottom {
background-color: rgba(0,0,0,0.40);
margin-left: -110px;
margin-right: -20px;
margin-bottom: -20px;
margin-top: 10px;
padding: 10px 20px 10px 110px;
&, strong {
font-size: 16px;
line-height: 16px;
}
}
}
.card {
margin: 5px;
min-height: 260px;
.item {
font-size: 12px;
line-height: 16px;
&.item-text-wrap {
padding: 10px;
}
.orange {
color: $positive;
}
.green {
color: $balanced;
min-height: 28px;
padding-top: 8px;
}
.red {
color: $assertive;
min-height: 28px;
padding-top: 8px;
}
.label {
display: block;
background-color: $assertive;
color: #fff;
font-size: 11px;
line-height: 11px;
padding: 4px;
width: 90%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
small {
color: #aaa;
display: block;
font-size: 11px;
line-height: 14px;
}
}
&.active {
border: 2px solid $assertive;
margin: 3px;
}
.icon {
position: absolute;
bottom: 5px;
left: 5px;
}
}
.circle {
background-color: transparent;
border: 2px solid #ee7f01;
border-radius: 100px;
color: #4f4f4f;
display: inline-block;
font-size: 12px;
font-weight: 600;
line-height: 16px;
height: 90px;
padding-top: 20px;
width: 90px;
text-align: center;
text-decoration: none;
&.done {
background-color: #efb777;
color: #ee7f01;
}
&.active {
background-color: #ee7f01;
color: #fff;
}
}
.saldo-punti {
color: $positive;
font-size: 48px;
font-weight: 600;
line-height: 48px;
text-align: center;
span {
font-size: 14px;
font-weight: 300;
line-height: 18px;
}
}
.text-paragraphs {
font-weight: 300;
font-size: 12px;
line-height: 16px;
p {
margin-bottom: 16px;
}
}
.button {
border-radius: 0;
}
.button-xs {
line-height: 14px;
font-size: 14px;
padding: 4px;
min-height: 0;
}
.popup-body input[type=text] {
padding: 5px;
}
.well {
background-color: #e5e5e5;
padding: 15px;
border: none;
position: relative;
&.well-orange {
background-color: #ffedc5;
}
&.well-white {
background-color: #ffffff;
border: 1px solid #ddd;
}
&.unread {
background-color: #f5f5f5;
border: 1px solid $balanced;
position: relative;
.button {
background-color: $balanced;
color: #fff;
}
&:after {
content: " ";
display: block;
position: absolute;
top: 10px; right: 10px;
background-color: $balanced;
width: 16px;
height: 16px;
border-radius: 16px;
}
}
.button {
line-height: 32px;
min-height: 32px;
padding-left: 24px;
padding-right: 24px;
}
.btn-store {
position: absolute;
top: 0; right: 0;
}
.red {
color: $assertive;
}
}
.bar.bar-stable.bar-footer {
border-color: transparent;
background-color: #cb9809;
background-image: none;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 15px 20px;
text-align: left;
>div {
width: 100%;
}
i {
float: right;
margin-top: -2px;
}
}
.gold {
color: #cb9809;
}
.bar.bar-light.bar-footer {
border-color: transparent;
background-image: none;
font-size: 18px;
font-weight: bold;
padding: 15px 20px;
text-align: center;
>div {
width: 100%;
}
i {
float: right;
margin-top: -2px;
}
}
.no-decoration {
text-decoration: none;
}
.magazine-home {
a {
font-size: 18px;
text-decoration: none;
color: #444;
}
}
.row {
// margin-left: -10px;
// margin-right: -10px;
width: 100%;
}
.item-select {
font-weight: 600;
padding-left: 5px;
}
.font-oswald {
font-family: $font-family-sans-serif;
font-size: 110%;
}
.progressbar {
border: 15px solid #e6e6e6;
background-color: #e6e6e6;
border-radius: 20px;
position: relative;
.value {
background-image: -webkit-linear-gradient(top, #de0e21 0%, #8c010e 100%);
background-image: -o-linear-gradient(top, #de0e21 0%, #8c010e 100%);
background-image: linear-gradient(to bottom, #de0e21 0%, #8c010e 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDE0E21', endColorstr='#FF8C010E', GradientType=0);
height: 35px;
border-radius: 10px;
height: 35px;
float: left;
}
.value-bg {
-webkit-box-shadow: 1px 3px 3px rgba(0,0,0,0.25) inset;
box-shadow: 1px 3px 3px rgba(0,0,0,0.25) inset;
background-image: -webkit-linear-gradient(left, #fca13a 0%, #ff7402 100%);
background-image: -o-linear-gradient(left, #fca13a 0%, #ff7402 100%);
background-image: linear-gradient(to right, #fca13a 0%, #ff7402 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFCA13A', endColorstr='#FFFF7402', GradientType=1);
border-radius: 10px;
height: 35px;
width: 100%;
}
.value-max {
background-color: #e10f21;
border-radius: 10px;
display: block;
position: absolute;
right: -15px;
top: -15px;
font-family: Oswald, sans-serif;
font-size: 24px;
line-height: 32px;
padding: 15px 15px;
color: #fff;
strong {
font-size: 32px;
line-height: 32px;
}
}
}
.divider {
&:before, &:after {
content: " ";
display: inline-block;
width: 60px;
border-top: 1px solid #bbb;
vertical-align: 3px;
margin-left: 10px;
margin-right: 10px;
}
}
.magazine-item {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
display: block;
position: relative;
height: 270px;
.magazine-item__category {
position: absolute;
top: 10px; right: 10px;
width: 52px; height: 52px;
}
.magazine-item__title {
background-color: rgba(0,0,0,0.60);
color: #fff;
font-size: 18px;
line-height: 22px;
display: block;
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 10px 10px 5px;
}
&.magazine-item-ricette {
height: 580px;
.magazine-item__title {
background: transparent;
font-family: 'Sue Ellen Francisco', cursive;
font-size: 44px;
line-height: 56px;
padding: 20px;
text-transform: uppercase;
}
}
&.magazine-item-focus {
height: 400px;
.magazine-item__title {
padding: 20px 20px 10px;
font-size: 36px;
line-height: 36px;
}
}
&.magazine-item-related {
height: 270px;
.magazine-item__title {
font-size: 14px;
line-height: 18px;
}
&.magazine-item-ricette {
height: 400px;
.magazine-item__title {
background: transparent;
font-family: 'Sue Ellen Francisco', cursive;
font-size: 32px;
line-height: 42px;
padding: 10px;
text-transform: uppercase;
}
}
}
}
.magazine-article-related .h4 {
background-color: #b4b4b4;
color: #fff;
font-weight: bold;
margin: 0 0 20px;
padding: 10px 10px 5px;
text-align: center;
}
.magazine-article {
.magazine-article-cover {
display: block;
position: relative;
h1 {
background-color: rgba(0,0,0,0.60);
color: #fff;
font-size: 30px;
font-family: $font-family-light-sans-serif;
line-height: 36px;
padding: 20px;
display: block;
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 25px 25px 15px;
margin: 0;
}
}
}
.magazine-article.magazine-article-ricette {
h2 {
font-family: 'Sue Ellen Francisco', cursive;
font-size: 26px;
line-height: 26px;
margin: 16px 0 8px;
text-transform: uppercase;
}
.well {
min-height: 400px;
}
}
.home-points {
background: transparent url(../img/home.jpg) center center no-repeat;
background-size: cover;
color: #fff;
font-size: 18px;
line-height: 28px;
padding: 20px 20px 20px 110px;
&.dipendente{
background: none;
background-color: $energized;
}
img {
width: 80px;
position: absolute;
left: 15px; top: 20px;
}
strong {
font-size: 38px;
font-weight: 600;
line-height: 28px;
}
.home-points-bottom {
background-color: rgba(0,0,0,0.40);
margin-left: -110px;
margin-right: -20px;
margin-bottom: -20px;
margin-top: 10px;
padding: 10px 20px 10px 110px;
&, strong {
font-size: 16px;
line-height: 16px;
}
}
}
.home-sondaggi,
.home-preferiti,
.home-lista-spesa,
.home-magazine,
.home-qrcode,
.home-scontioro {
background: #00736a url(../img/sondaggi.png) 10px 10px no-repeat;
background-size: 30px;
color: #fff;
display: block;
font-size: 16px;
line-height: 20px;
font-weight: bold;
min-height: 110px;
text-decoration: none;
padding: 60px 10px 10px;
}
.home-preferiti {
background: #e10f21 url(../img/preferiti.png) 10px 10px no-repeat;
background-size: 45px;
}
.home-lista-spesa {
background: #809c62 url(../img/lista-spesa.png) 10px 10px no-repeat;
background-size: 30px;
}
.home-qrcode {
background: #7e6b5d url(../img/qrcode.png) 10px 10px no-repeat;
background-size: 40px;
}
.home-magazine {
min-height: 90px;
font-size: 20px;
background: #5972b6 url(../img/magazine.png) 10px 10px no-repeat;
background-size: 60px;
}
.magazine {
h1, small, p, strong {
color: #282828;
}
.row {
display: block;
}
}
.home-scontioro {
min-height: 90px;
font-size: 20px;
background: #f2a63b url(../img/scontioro.png) 10px 10px no-repeat;
background-size: 40px;
}
@media (min-width: 680px) {
.imageView.modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
min-height: 240px;
width: 100%;
}
}
.landing {
font-size: 16px;
h2.h2 {
font-size: 35px;
small {
display: block;
}
}
.row {
display: block;
}
}