Created
April 13, 2017 06:27
-
-
Save marlonmantilla/47fce604bbda87717090461a334ecc9c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /***** 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