Skip to content

Instantly share code, notes, and snippets.

@marlonmantilla
Created April 13, 2017 06:27
Show Gist options
  • Save marlonmantilla/383771104b4e84c6181442651b9d7e19 to your computer and use it in GitHub Desktop.
Save marlonmantilla/383771104b4e84c6181442651b9d7e19 to your computer and use it in GitHub Desktop.
/***** Global Variables *****/
$navbar-border-color: #d9d9d9;
$linear-gradient: linear-gradient(-180deg, #FFFFFF 44%, #EDF5F1 99%);
$primary-action-color: #65BFC3;
$explore-text-color: #FFFFFF;
$grey-text-color: #504D49;
$grey-light-background: #f6f5f1;
$grey-icon-color: #C6C6C2;
$main-content-bg-color: #F7F5F2;
$nd-icon-txt-color: #333333;
$nd-filters-border-color: #209FA4;
$nd-filters-bg-color: rgba(101, 191, 195, 0.94);
$nd-star-color: $primary-action-color;
$nd-border-separator-color: #D4D4D4;
$nd-sidenav-menu-color: #B2B2B2;
$nd-sidenav-menu-border: #f1f1f1;
$nd-sidenav-menu-active: #2B3857;
$nd-selected-items-bg: #F8F8F8;
$nd-selected-item-bg: #FFFFFF;
$nd-light-blue: #e0f2f4;
$nav-background: #FBFAF9;
$nd-font-color: #504D49;
$nd-light-button-color: #eae7de;
$input-icon: $primary-action-color;
$input-icon-active: $primary-action-color;
$input-hover-border: $primary-action-color;
$input-focus-border: $primary-action-color;
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600');
@import "../node_modules/bulma/bulma";
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@mixin placeholder-color($color) {
&::-webkit-input-placeholder { /* WebKit browsers */
color: $color;
font-size: 0.8em;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $color;
font-size: 0.8em;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $color;
font-size: 0.8em;
}
&:-ms-input-placeholder { /* Internet Explorer 10+ */
color: $color;
font-size: 0.8em;
}
}
@mixin linear-gradient($direction, $color-stops...) {
background: nth(nth($color-stops, 1), 1);
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
background: linear-gradient($direction, $color-stops);
}
/***** Base styles *****/
html {
height: 100%;
}
a { color: #65BFC3; }
body {
min-height: 100%;
color: $nd-font-color;
font-family: 'Poppins', sans-serif;
}
.bold {
font-weight: bold;
}
// TODO: corregir esto is-07 es una class general y no se debe afectar nada directamente
.is-07{
font-size: 0.7em;
}
// TODO: corregir esto is-08 es una class general y no se debe afectar nada directamente
.is-08{
font-size: 0.8em;
}
.no-bg {
background: none;
}
.pointer {
cursor: pointer;
}
.with-gradient {
/* Rectangle 9: */
background-image: linear-gradient(-180deg, #FBFAF9 45%, #EAE7DF 99%);
height: 100%;
}
.main-content {
background: $main-content-bg-color;
height: 100%;
&.side-paddingless {
padding-left: 0;
padding-right: 0;
padding-top: 0.5em;
@media(min-width: 769px){
padding: 4em;
}
}
&.nd-recipe-tablet-padding{
padding-left: 0;
padding-right: 0;
padding-top: 0.5em;
@media(min-width: 769px){
padding-top: 4em;
padding-left: 12em;
padding-right: 12em;
padding-bottom: 4em;
}
}
&.nd-tip-tablet-padding{
padding-left: 0;
padding-right: 0;
padding-top: 0.5em;
@media(min-width: 769px){
padding-top: 4em;
padding-left: 12em;
padding-right: 12em;
padding-bottom: 4em;
}
}
&.nd-profile-tablet-padding{
@media(min-width: 769px){
padding: 4em 8em 2em 8em;
}
}
&.nd-explore-tablet-padding{
@media(min-width: 769px){
padding: 4em 15em 2em 15em;
}
}
&.nd-about-tablet-padding{
padding: 1.45em 1.5em;
@media(min-width: 769px){
margin: 4em 25em 2em 25em;
}
}
&.nd-feedback-tablet-padding{
padding: 1.45em 1.5em;
margin-top: 2em;
background: white !important;
@media(min-width: 769px){
margin: 4em 25em 2em 25em;
}
}
&.with-gradient{
@media(min-width: 769px){
background-image: linear-gradient(-180deg, #FBFAF9 45%, #EAE7DF 99%);
height: 100%;
}
}
.nd-box-gradient{
@media(min-width: 769px){
background: #F7F5F2 ;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
border-radius: 5px;
}
}
}
/***** Navigation *****/
.nav{
min-height: 60px;
border-bottom: none;
position: fixed;
width: 100%;
z-index: 20;
background: $nav-background;
.no-padding-top {
padding-top: 0;
}
.logo {
width: 100px;
}
.nd-navigation-left{
@media(min-width: 769px){
margin-top: 1em;
margin-left: 3em;
.active{
color: $primary-action-color;
border-bottom-style: inset;
padding-bottom: 0.5em;
}
a{
color: black;
}
a:first-child{
margin-right: 2em;
}
}
}
}
.logo {
&.with-margin-b {
margin-bottom: 0.5rem;
}
}
.mat-menu-panel{
margin-top: 3.9em;
}
.mat-button{
min-width: 30px !important;
padding: 0px !important;
}
/***** Bulma Overrides *****/
.nav-item {
a {
font-size: 0.9em;
color: $nd-font-color;
}
.logo {
vertical-align: middle;
}
}
.container {
padding-top: 3em;
height: 100%;
&.is-fluid {
margin: 0;
}
}
.icon.is-medium .fa {
font-size: 20px;
}
.pcolor{
color: $primary-action-color;
}
.section {
padding-top: 2rem;
&.no-bg {
background: none;
}
}
/***** Buttons *****/
.special-btn {
font-size: 0.9em;
&.active {
color: $primary-action-color !important;
.bar {
visibility: visible;
}
}
.bar {
background: $primary-action-color;
width: 100%;
height: 4px;
border-radius: 60px;
display: block;
position: relative;
top: 6px;
visibility: hidden;
}
}
.nd-btn-custom {
border-radius: 100px;
color: white;
height: 42px;
width: 100%;
display: inline-block;
font-size: 0.9em;
line-height: 1.7em;
}
.button {
&.blue-style {
@extend .nd-btn-custom;
background: #3B5998;
}
&.primary-style {
@extend .nd-btn-custom;
background: $primary-action-color;
&.not-rounded {
border-radius: 3px;
}
}
&.no-background-style{
@extend .nd-btn-custom;
background: none;
color: $grey-text-color;
}
&.info-style{
@extend .nd-btn-custom;
width: 50%;
margin-top: 15px;
}
&.green-style{
@extend .nd-btn-custom;
background: none;
color: $primary-action-color;
}
&.is-loading[type='submit']:after {
top: 40% !important;
height: 1.5em !important;
width: 1.5em !important;
border-color: white !important;
}
&.light-blue-style {
@extend .nd-btn-custom;
background: $nd-light-blue;
border: none;
color: $primary-action-color;
}
&.grey-style {
@extend .nd-btn-custom;
background: $grey-light-background;
border: none;
color: $grey-text-color;
}
}
.nd-loading {
padding: 0;
font-size: 2em;
background: $primary-action-color !important;
width: 50px;
height: 50px;
margin: 40% auto;
display: block;
}
/***** Filters ******/
.nd-filters {
position: fixed;
bottom: 1em;
z-index: 10;
text-align: center;
left: 50%;
margin-left: -121px;
.button {
background: $nd-filters-bg-color;
color: white;
padding: 1.3em 2em;
height: 2.7rem;
border: none;
box-shadow: none;
font-size: 1em;
font-weight: bold;
box-shadow: 1px 1px 1px #868686;
&.first {
border-radius: 20px 0 0 20px !important;
border-right: 2px solid $nd-filters-border-color;
}
&.last {
border-radius: 0 20px 20px 0 !important;
}
}
}
/***** Headers *****/
.nd-header{
background: none;
box-shadow: none;
.title{
font-size: 1.3em;
margin-bottom: 0.5rem;
}
.content{
font-size: 0.8em;
margin: 0 1.5em 0 1.5em;
}
}
.nd-filters-orders{
background: none;
box-shadow: none;
margin-bottom: 0em !important;
.title{
font-size: 1.3em;
}
.content{
font-size: 1em;
}
}
/***** Box *****/
.nd-box {
padding: 1.45em 1.5em;
@media(min-width: 769px){
padding: 4em 0px !important;
}
}
.nd-box-no-shadow{
background: none;
box-shadow: none;
padding: 0rem 1rem;
}
.nd-noti{
margin: 8px 15px;
}
.nd-profile-info{
.media-left{
margin-top: 0.5em;
}
.media-content{
font-size: 1em;
.title{
margin-bottom: 1.7em;
}
.subtitle{
font-size: 0.7em;
color: $grey-text-color;
}
}
.media-right{
margin-top: 15px;
figure{
padding-left: 1.2em;
}
}
}
.nd-profile-edit{
padding: 0.6em 1.5em;
@media(min-width: 769px){
height: 100%
}
@media(min-width: 769px){
padding: 0.6em 0em;
}
.tabs{
ul{
border-bottom: none;
border-top: $main-content-bg-color;
border-top-style: inset;
}
}
article{
background-color: white;
box-shadow: 0px 1px 2px #888888;
@media(min-width: 769px){
height: 90%
}
}
.message-header{
background-color: white;
color: $primary-action-color;
}
.message-body{
border: none;
padding: 0em 1em 1.25em;
}
}
/***** Forms *****/
.nd-input {
box-shadow: none;
border: none;
border-bottom: 2px solid $primary-action-color;
border-radius: 0;
padding-left: 0;
padding-bottom: 1.2em;
height: 2.7em;
font-size: 1em ;
&.no-bg {
background: none;
}
}
.nd-custom-input{
@include placeholder-color(#B9B8B6)
border: none;
box-shadow: none;
background: #FFF;
height: 3.5em;
padding-left: 3.25em !important;
}
.nd-second-input{
@include placeholder-color(#44534C)
border: none;
box-shadow: none;
background: #f6f6f6;
height: 9em;
padding: 0 0 120px;
}
.nd-select {
box-shadow: none;
border: none;
border-bottom: 2px solid $primary-action-color;
border-radius: 0;
padding-left: 0;
padding-bottom: 1.2em;
height: 2.7em;
width: 100%;
font-size: 1em !important;
color: #d0d0d0;
&.no-bg {
background: none;
}
select{ border: none; color: #d0d0d0; padding-left:0rem;}
}
.nd-text-area {
border: none;
box-shadow: none;
textarea{border: none;
box-shadow: none;
}
}
.nd-label
{
font-size: 1em !important;
color: #d0d0d0;
}
.nd-content-about-us
{
font-size: 0.8rem;
}
.notification {
.mat-input-element {
box-shadow: none;
}
}
/***** Overlay *****/
.nd-overlay {
opacity: 0.7;
background: #000000;
border-radius: 5px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/***** Explore *****/
.nd-explore-list {
.nd-explore-category {
position: relative;
cursor: pointer;
img {
display: block;
width: 100%;
}
.nd-explore-text {
color: $explore-text-color;
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
font-weight: bold;
@media(min-width: 769px){
font-size: 1em;
top: -160px;
}
}
}
}
/***** Icons *****/
.nd-icons {
background: url('assets/explore-icons.svg') no-repeat;
width: 48px;
height: 48px;
display: block;
margin: 3em auto 1em auto;
@media(min-width: 769px) {
margin: 14em auto 1em auto;
background-size: 70px;
width: 70px;
height: 70px;
}
&.aprende {
background-position: -1px -190px;
@media(min-width: 769px){
background-position: 0 -273px;
}
}
&.trending {
background-position: 0 3px;
@media(min-width: 769px){
background-position: 0 7px;
}
}
&.vegano {
background-position: 0 -125px;
@media(min-width: 769px){
background-position: 0 -181px;
}
}
&.veinte {
background-position: 0 -315px;
@media(min-width: 769px){
background-position: 0 -459px;
}
}
&.trupper {
background-position: 0 -375px;
@media(min-width: 769px){
background-position: 0 -552px;
}
}
&.con-amigos {
background-position: 0 -440px;
@media(min-width: 769px){
background-position: 0 -640px;
}
}
&.en-pareja {
background-position: 0 -64px;
@media(min-width: 769px){
background-position: 0 -89px;
}
}
&.minutes {
background-position: 0 -315px;
}
&.snacking {
background-position: 0 -252px;
@media(min-width: 769px){
background-position: 0 -366px;
}
}
&.no-gluten {
background-position: 0 -502px;
@media(min-width: 769px){
background-position: 0 -734px;
}
}
&.no-carne {
background-position: 0 -566px;
@media(min-width: 769px){
background-position: 0 -825px;
}
}
}
.nd-mini-icons {
background: url('assets/mini-icons.svg')no-repeat;
width: 25px;
height: 30px;
display: block;
margin: 1em auto 1em auto;
&.clock {
background-position: 0 3px;
}
&.coffe {
background-position: 0 -62px;
}
&.chicken {
background-position: 0 -127px;
}
&.soda {
background-position: 0 -191px;
}
&.apple {
background-position: 0 -255px;
}
&.info {
background-position: 0 -317px;
}
&.bowl {
background-position: 0 -378px;
}
&.tips {
background-position: 0 -441px;
}
&.ribbon {
background-position: 0 -505px;
}
&.difficult {
background-position: 0 -567px;
}
&.star {
background-position: 0 -630px;
}
}
.nd-social-icons {
background: url('assets/social-icons.svg')no-repeat;
width: 34px;
height: 34px;
display: inline-block;
margin: 1em 0.5em 1em 0.5em;
cursor: pointer;
&.facebook {
background-position: 1px 2px;
}
&.twitter {
background-position: -51px 2px;
}
&.instagram {
background-position: -103px 2px;
}
&.pinterest {
background-position: -155px 2px;
}
&.youtube {
background-position: -207px 2px;
}
&.disabled {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
opacity: 0.5;
}
}
.nd-icon-item {
min-width: 2em;
margin-right: 0.5em;
.nd-icon {
display: inline-block;
vertical-align: middle;
color: $nd-icon-txt-color;
margin-right: 0.25em;
}
.nd-icon-txt{
display: inline-block;
font-size: 0.8em;
color: $nd-icon-txt-color;
}
&.no-margin {
margin-right: 0;
.nd-icon {
margin-right: 0;
}
}
}
.nd-icon-grey{
color: $grey-icon-color;
}
.nd-sidebar-icon {
background: url('assets/app-icons.svg')no-repeat;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
width: 2rem;
height: 2rem;
margin-right: 1rem;
&.search{
background-position: 0 -2px;
}
&.account{
background-position: 0 -47px;
}
&.explore{
background-position: 0 -93px;
}
&.login{
background-position: 0 -138px;
}
&.opinion{
background-position: 0 -184px;
}
&.about{
background-position: 0 -231px;
}
&.partners{
background-position: 0 -278px;
}
}
.nd-account-icon {
background: url('assets/app-icons.svg')no-repeat;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
width: 2rem;
height: 2rem;
margin-left: 0.5rem;
&.password{
background-position: 0 -487px;
}
&.person{
background-position: 0 -532px;
}
&.mail{
background-position: 0 -580px;
}
}
.nd-recipe-icon {
background: url('assets/app-icons.svg')no-repeat;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
&.share{
background-position: 0 -316px;
}
&.heart{
background-position: 0 -349px;
}
&.time{
background-position: 0 -384px;
}
&.easy{
background-position: 0 -416px;
}
&.bookmark{
background-position: 0 -448px;
}
}
/***** Interline ****/
.nd-interline {
width: 100%;
text-align: center;
border-bottom: 1px solid #d9d9d9;
line-height: 0.1em;
margin: 10px 0 35px;
}
.nd-interline{
span {
background: $main-content-bg-color;
padding:0 10px;
}
}
/****** Results & Recipes ******/
.nd-results-list {
.nd-order-filter{
width: 100%;
border-bottom-style: inset;
display: flex;
padding-bottom: 0.5em;
margin-bottom: 2em;
p:first-child{
padding-right: 1em;
margin-left: auto;
}
}
.nd-result:first-child {
margin-top: 1rem;
@media(min-width: 769px) {
margin-top: 0em;
}
}
}
.nd-result {
margin-bottom: 0.7rem;
box-shadow: none;
@media(min-width: 769px) {
background-color: $grey-light-background;
}
.media-content{
margin-top: 0.5em;
@media(min-width: 769px) {
margin-top: 0.5em;
margin-left: 1em;
}
&.nd-result-info{
margin-top: 0.5em;
}
}
.card-content.overlay {
position: absolute;
bottom: 0;
padding: 1em 1em 0.2em;
width: 100%;
height: 37%;
.content {
margin-bottom: 0;
position: absolute;
width: 95%;
}
.title {
margin-top: 0;
font-weight: 700;
}
}
.card-image {
.recipe-background, .recipe-background-2 {
cursor: pointer;
}
}
.card-header {
height: 52px;
@media(min-width: 769px){
background-color: white;
}
.nd-username {
font-size: 0.8em;
}
.nd-description{
font-size: 0.7em;
}
.media {
width: 100%;
padding-left: 0.5em;
.media-left {
margin-right: 0.5em;
}
figure {
padding-top: 0.6em;
.img {
border-radius: 50%;
width: 32px;
}
}
.nd-icon-item {
line-height: 3em;
padding-right: 0.5em;
}
.nd-user-initials {
margin-top: 0.6em;
}
}
}
.card-footer{
@media(min-width: 769px){
background-color: white;
}
}
&.nd-recipe {
.nd-tablet-white{
@media(min-width: 769px){
background-color: white;
}
}
.nd-tablet-no-margin{
@media(min-width: 769px){
margin: 0 0 2em 0;
}
.column{
.title{
font-size: 1em;
@media(min-width: 769px){
font-size: 1.5em;
}
}
}
}
@media(min-width: 769px){
margin-bottom: 2em;
padding: 0;
}
.card-content {
&.overlay {
height: 20%;
}
}
.card-image {
.recipe-background-2 {
height: 20%;
}
.is-1by1{
padding-top: 75%;
}
figure {
overflow: hidden;
}
}
}
&.related-content {
box-shadow: none;
width: 100%;
.card-content {
&.overlay {
height: 29%;
}
.nd-small-stars, .nd-big-stars {
margin-bottom: 0;
}
}
.recipe-background, .recipe-background-2 {
border-radius: 0.3rem;
}
.image {
overflow: hidden;
}
.content {
h2.title {
font-size: 0.8rem;
}
.nd-small-stars {
.fa {
color: $primary-action-color;
font-size: 18px;
letter-spacing: -1px;
}
}
}
}
}
.recipe-background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
}
.recipe-background-2 {
width: 100%;
height: 37%;
position: absolute;
bottom: 0;
left: 0;
background-position: 0 bottom;
background-size: cover;
background-repeat: no-repeat;
}
/***** Avatar *****/
.nd-user-initials {
background: $primary-action-color;
color: white;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
font-size: 0.9em;
width: 2rem;
height: 2rem;
text-align: center;
line-height: 2.2rem;
&.medium {
width: 2.6rem;
height: 2.6rem;
text-align: center;
line-height: 2.6rem;
font-size: 1rem;
}
}
/***** Checkbox ****/
.mat-checkbox-checked.mat-accent .mat-checkbox-background{
background-color: $primary-action-color !important;
border-radius: 50%;
}
.mat-checkbox-frame{
border-radius: 50% !important;
}
span.mat-checkbox-label{
font-size: 0.75em;
width: 100%;
}
.mat-checkbox-layout {
width: 100%;
font-size: 1.3rem;
}
.mat-checkbox-checked{
.ng-check-green{
color: $primary-action-color;
}
}
.mat-radio-inner-circle{
background-color: $primary-action-color !important;
}
.mat-radio-checked .mat-radio-outer-circle{
border-color: $primary-action-color !important;
}
/****** Rating Stars ******/
.nd-small-stars, .nd-big-stars {
display: block;
margin-bottom: 0.25rem;
.nd-star {
background: url('assets/active-star-icon.svg') no-repeat;
width: 17px;
height: 16px;
display: inline-block;
margin-right: 0.1rem;
&:last-child {
margin-right: 0;
}
&.on {
background-position: 0 0;
}
}
.fa-star, .fa-star-o {
color: $nd-star-color;
}
}
.nd-big-stars {
.fa {
font-size: 2rem;
}
}
/***** Effects *****/
.nd-blur {
position: absolute;
width: 100%;
height: 100%;
background: url('assets/blur.png') repeat;
// filter: blur(10px);
top: 0;
left: 0;
.nd-extra-blur {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
/***** Panels *****/
.nd-panel{
background: white;
padding: 1em;
margin-bottom: 1em;
&.nd-wizard-tablet-panel{
@media(min-width: 769px){
background: none;
.notification{
background: white;
}
}
}
.title{
margin-top: 0.5em;
font-weight: bold;
}
.notification{
width: 100%;
padding: 1.25rem 1.5rem;
margin-bottom: 0.8rem;
&:last-child {
margin-bottom: 0;
}
.subtitle{
font-size: 2em;
}
}
.mat-checkbox {
width: 100%;
}
.subtitle{
font-size: 1em;
}
.field{
.button{
background-color: $primary-action-color;
.fa{
color: white;
}
}
}
span{
margin-right: 1em;
}
.swiper-wrapper{
@media(min-width: 769px){
width: 40%;
}
}
}
.nd-no-border{
.mat-checkbox-frame{
border-style: none;
}
}
.nd-item{
background:white;
padding: 1em;
margin: 0.5em 1em;
box-shadow: 0px 1px 2px #d4d4d4;
border-radius: 1%;
.nd-head{
font-size: 0.8em;
margin-bottom: 0em;
.title{
border-bottom-style: inset;
border-bottom-width: thin;
font-weight: 400;
font-size: 0.9em;
padding: 2em 1em 2em 1em;
}
}
.nd-table-item{
margin-top: 1em;
th{
vertical-align: inherit;
padding: 0.5em 0.5em;
}
td{
padding: 0.5em 1.75em;
}
thead{
font-size: 0.8em;
}
tbody{
th{
border: none;
border-right-style: inset;
border-right-width: thin;
}
td{
border: none;
}
tr:last-child{
p{
color: $primary-action-color;
}
}
.content{
color: $grey-text-color;
font-size: 0.8em;
font-weight: 500;
}
}
}
.nd-content{
box-shadow: 0px 1px 2px #d4d4d4;
font-size: 0.8em;
.title{
border-bottom-style: inset;
border-bottom-width: thin;
font-weight: 400;
font-size: 0.9em;
padding: 2em 1em 2em 1em;
}
ol{
color: $grey-text-color;
padding-bottom: 1em;
li{
margin-bottom: 1em;
}
}
}
}
.nd-item-table{
@extend .nd-item;
background: white;
padding: 0.5rem 1.5em;
margin: 0.5em 1em;
box-shadow: 0px 1px 2px #d4d4d4;
border-radius: 1%;
.nd-head{
border-bottom-style: inset;
border-bottom-width: thin;
font-weight: 400;
font-size: 0.9em;
display: flex;
.title{
border: none;
}
p{
width: 70%;
}
.swiper-small{
margin-top: 1em;
width: 30%;
.swiper-button-next{
background-size: 0.7em;
margin-right: -0.8em;
}
.swiper-button-prev{
background-size: 0.7em;
margin-left: -0.8em;
}
}
}
}
.nd-item-table{
@extend .nd-item;
background: white;
padding: 0.5rem 1.5em;
margin: 0.5em 1em;
box-shadow: 0px 1px 2px #d4d4d4;
border-radius: 1%;
.nd-head{
border-bottom-style: inset;
border-bottom-width: thin;
font-weight: 400;
font-size: 0.9em;
display: flex;
.title{
border: none;
}
p{
width: 70%;
}
.swiper-small{
margin-top: 1em;
width: 30%;
.swiper-button-next{
background-size: 0.7em;
margin-right: -0.8em;
}
.swiper-button-prev{
background-size: 0.7em;
margin-left: -0.8em;
}
}
}
}
/***** Profile *****/
.nd-profile-card {
padding: 1rem;
h2.title {
margin-top: 1.5rem;
}
.media{
margin-bottom: 1em;
}
.media-left {
text-align: center;
margin: 0;
margin-bottom: 0.3em;
}
.media-content {
text-align: center;
}
.nd-username {
margin-bottom: 0.3rem;
font-size: 0.8em;
font-weight: bold;
@media(min-width: 769px) {
text-align: left;
}
}
.nd-title{
@media(min-width: 769px) {
text-align: left;
}
}
.nd-content{
@media(min-width: 769px) {
text-align: left;
}
}
.nd-small-stars {
font-size: 0.3rem;
.fa{
font-size: 2.5em;
}
@media(min-width: 769px) {
text-align: left;
}
}
.save-recipe-btn {
font-size: 1rem;
line-height: 1 .5rem;
height: auto;
}
}
.nd-pills{
margin-left: 0;
margin-right: 0;
.column{
font-size: 0.8em;
}
.button {
display: flex;
&:first-child {
margin-right: 0.3rem;
}
.nd-icon {
margin-right: 0.5rem !important;
}
}
&.with-separator {
border-bottom: 1px solid $nd-border-separator-color;
padding-bottom: 1rem;
margin-bottom: 1.6rem;
margin-top: 3rem;
}
}
.nd-ingredients-list {
.nd-ingredient-checkbox {
padding: 0.5rem;
margin-bottom: 0.3rem;
.mat-checkbox-label {
text-align: left;
}
.nd-ingredient-img {
width: 46px;
height: 46px;
vertical-align: top;
margin-right: 0.5rem;
background: white;
border-radius: 6px;
}
}
.nd-ingredient-stats {
display: inline-block;
line-height: 1.2rem;
padding-top: 0.2rem;
}
.nd-ingredient-name {
display: block;
font-weight: bold;
}
.nd-ingredient-units {
}
}
/***** Ratings *****/
.nd-ratings {
.nd-big-stars {
text-align: center;
}
}
.nd-comment {
font-size: 0.8rem;
.nd-small-stars {
position: absolute;
top: 0;
right: 0;
letter-spacing: -1px;
.fa {
font-size: 1rem;
}
}
.media-content {
.content {
position: relative;
}
p:first-child {
margin-bottom: 0.5em;
}
}
}
.nd-titleSuccessSingUp {
font-size: 1.5rem;
font-weight: bold;
}
.nd-subtitleSuccessSingUp {
font-size: 1.2rem;
}
.nd-imageSuccessSingUp {
margin-top: 4rem;
margin-bottom: 2rem;
}
.nd-share-social {
color: #3e84de;
}
.nd-heart-social {
color: #ea0c39;
}
.nd-tile {
margin-bottom: 2rem;
}
/***** Tags *****/
.nd-tags {
text-align: center;
.tag {
color: $grey-text-color;
font-size: 0.7em;
margin-bottom: 0.5rem;
background: $nd-light-button-color;
height: 2.5rem;
padding: 0 1.2rem;
cursor: pointer;
margin-right: 0.1em;
}
}
/****** Swiper Overrides ******/
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
width: 80%;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/****** Sidenav ******/
.mat-sidenav-focus-trap, cdk-focus-trap {
width: 100%;
}
.nd-sidenav-logo {
background: $nav-background;
margin: 1rem 2rem;
border-bottom: 1px solid $nd-sidenav-menu-border;
padding: 1rem;
}
.nd-sidenav-menu {
.menu-list {
li {
a {
color: $nd-font-color;
font-size: 0.85rem;
font-weight: 500;
text-align: left;
&.active {
color: $nd-sidenav-menu-active;
background: rgba(43, 56, 87, 0.05);
.nd-circled-item {
background: $nd-sidenav-menu-color;
}
}
}
}
li:last-child{
border-top-style: outset;
border-top-width: thin;
}
}
}
.nd-circled-item {
background: rgba(178, 178, 178, 0.3);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
width: 2rem;
height: 2rem;
margin-right: 1rem;
}
.nav-menu {
background: $nav-background;
height: 100%; /* 100% Full-height */
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
transition: 0.3s;
display: block;
* {
visibility: hidden;
transition: 0.1s
}
.card {
box-shadow: none;
}
&.is-shown {
width: 90%;
* {
visibility: visible;
}
}
}
.nd-card{
.media-content{
.nd-username{
font-size: 0.8em;
}
.nd-email{
font-size: 0.7em;
color: $grey-text-color;
}
}
}
/****** Tabs ******/
.nd-tab{
background-color: white;
li:first-child a{
color: $primary-action-color;
}
}
.nd-tabs{
background-color: white;
a{
padding: 0.5em 0.4em;
}
}
.nd-tab-profile{
.mat-tab-body-content{
@media(min-width: 769px){
overflow: hidden;
}
}
.mat-tab-header{
@media(min-width: 769px){
margin-bottom: 2em;
}
}
.mat-tab-labels{
justify-content: center;
@media(min-width: 769px){
justify-content: flex-start;
}
.mat-tab-label{
width: 50%;
@media(min-width: 769px){
width: 20%;
}
&:focus{
background: none;
}
}
}
.mat-ink-bar{
background-color: $primary-action-color;
}
}
.nd-tab-partner{
.mat-tab-labels{
background-color: white;
justify-content: center;
.mat-tab-label{
padding: 0 5px;
width: 25%;
font-size: 0.7em;
}
}
.mat-ink-bar{
background-color: $primary-action-color;
}
}
/***** Autocomplete ******/
.nd-autocomplete-box {
.nd-autocomplete-results {
.title {
margin: 2rem 0;
}
}
}
.nd-recommendations {
.title {
font-size: 0.88rem;
margin-bottom: 1rem !important;
}
ul {
li {
margin-bottom: 1rem;
img {
vertical-align: middle;
margin-right: 0.8rem;
max-width: 32px;
}
span {
font-size: 0.88rem;
}
}
}
}
.nd-input-results {
background: $primary-action-color;
color: white;
font-size: 0.8rem;
display: inline-block;
position: absolute;
right: 0;
border-radius: 0px 0px 11px 11px;
padding: 0.2rem 1rem;
bottom: -25px
}
.nd-selected-items {
background: $nd-selected-items-bg;
overflow: hidden;
.nd-selected-left {
float: left;
}
.nd-selected-right {
float: right;
@media(min-width: 769px) {
float: left;
}
}
ul {
padding: 0.5rem 1rem;
li {
background-color: $nd-selected-item-bg;
background-size: 27px;
background-position: center;
background-repeat: no-repeat;
width: 32px;
height: 32px;
display: inline-block;
border-radius: 51%;
box-shadow: 0px 1px 1px 1px #e0e0e0;
margin-right: 0.5rem;
cursor: pointer;
&:last-child {
margin-right: 0;
}
img {
vertical-align: middle;
}
}
}
.nd-go-to-search {
color: $primary-action-color;
font-size: 0.8rem;
line-height: 3.4rem;
padding-right: 1rem;
}
}
/***** Material Autocomplete *****/
.mat-input-container {
width: 100%;
}
.mat-option, .mat-autocomplete-panel {
width: 100%;
}
.mat-autocomplete-panel {
max-width: 100% !important;
box-shadow: none !important;
max-height: 100% !important;
margin-top: 1.5rem;
.mat-option {
width: 100% !important;
padding: 0 !important;
font-size: 0.88rem !important;
line-height: 3rem !important;
&:hover {
background: none !important;
}
}
img {
vertical-align: middle;
margin-right: 0.8rem;
}
}
.mat-input-underline {
background-color: $primary-action-color !important;
height: 1px !important;
.mat-input-ripple {
background-color: $primary-action-color !important;
}
}.mat-input-placeholder-wrapper {
top: -0.3rem !important;
}
.mat-input-placeholder.mat-float:not(.mat-empty) {
display: none !important;
}
/****** Partners ******/
.nd-partner-card{
margin-bottom: 0.5em;
&.with-margin-top {
padding-top: 0.5rem;
}
.image {
img {
width: 4rem;
border-radius: 50%;
}
}
.title{
font-size: 1em;
margin-bottom: 1.7em;
margin-top: 0.1em;
}
.subtitle{
font-size: 0.9em;
color: $grey-text-color;
margin-bottom: 0.4rem;
}
.media-content{
.fa{
font-size: 1em;
letter-spacing: -2px;
}
}
.content{
p{
font-size: 0.85em;
}
a{
font-size: 0.9em;
}
.nd-small-stars{
i{
width: 10px;
height: 10px;
}
}
.fa-link{
vertical-align: baseline;
font-size: 15px;
margin-right: 0.5em;
}
}
.content:not(:last-child) {
margin-bottom: 0em;
}
.card-content {
padding: 1.5rem 1.5rem 0.5rem;
}
}
.nd-partners-card{
@extend .nd-partner-card;
margin-bottom: 0em;
cursor: pointer;
.card-content {
padding: 1rem 1.5rem;
}
&:first-child {
padding-top: 1rem;
}
}
/*** Columns ***/
.nd-columns{
@media(min-width: 769px) {
margin-top: 4em;
}
}
.nd-wizard{
background: #F7F5F2 ;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
border-radius: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment