/* To customize the look and feel of Ionic, you can override the variables in ionic's _variables.scss file. For example, you might change some of the default colors: $light: #fff !default; $stable: #f8f8f8 !default; $positive: #387ef5 !default; $calm: #11c1f3 !default; $balanced: #33cd5f !default; $energized: #ffc900 !default; $assertive: #ef473a !default; $royal: #886aea !default; $dark: #444 !default; */ // The path for our ionicons font files, relative to the built CSS in www/css $ionicons-font-path: "../lib/ionic/fonts" !default; // Include all of Ionic @import "www/lib/ionic/scss/ionic"; hr { margin: 2rem 0; opacity: 0.5; } table { width: 100%; } .normal-list { padding-left: 1.5rem; list-style-type: disc; font-size: 0.9em; margin-bottom: 1rem; } .indent-list { padding-left: 0.8rem; font-size: 0.9em; } .small { font-size: 0.9em; } .menu-logo { margin: 2rem auto; display: block; width: 80%; } .main-logo { margin: 2rem auto 4rem auto; display: block; width: 80%; } .main-bg { position: absolute; width: 100%; left: 0; top: 0; z-index: -1; background: black; height: 10rem; overflow: hidden; img { opacity: 0.9; } } .by-hl { text-decoration: none; color: #777; width: 100%; text-align: right; padding-right: 2rem; margin-top: -2rem; margin-bottom: 1rem; } .menu-content .scroll { top: 0; position: absolute; } .menu-hl { position: absolute; bottom: 0; padding: 0.5rem; } .area-divider { h4 { color: #eee; } } .pavilion-list-item, .info-list-item { height: 8rem; border-color: #333; @media (min-width: 767px) { height: 12rem; } a { height: 100%; h2 { font-size: 3rem; color: #fff; } h4 { font-size: 0.8rem; color: #eee; white-space: normal; } } .pavilion-list-bg, .filter { position: absolute; z-index: -2; right: 0; bottom: 0; } .pavilion-list-bg { bottom: -0.5rem; } .filter { z-index: -1; height: 100%; width: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */ background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 75%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 75%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .rating { position: absolute; right: 1rem; top: 0.5rem; label { font-size: 9px; } } } .info-list-item { height: 5rem; a { h2 { font-size: 2rem; } } } .pavilion-header { position: fixed; width: 100%; height: 45%; .pavilion-bg { position: absolute; height: 100%; width: auto; right: 0; @media (min-width: 767px) { height: auto; width: 100%; } } h1 { position: absolute; z-index: 1; font-size: 4.2rem; color: #fff; bottom: 1rem; left: 1rem; } } .review-card { height: 1.5rem; padding: 0 1rem; position: absolute; top: 3rem; width: 100%; z-index: 1; h5 { color: white; } a { float: right; } .rating { margin-top: 0.3rem; float:left; label { font-size: 10px; } } } .pavilion .scroll { display: flex; .pavilion-content { margin-top: 58%; flex: 1 1 auto; } } .hashtag { color: #666; } .share { color: #444; font-size: 1.5rem; margin-right: 0.5rem; &.activated { color: #999; } } .inner-scroll { height: 100%; } .progress { position: absolute; z-index: 1; bottom: 0; display: flex; width: 100%; justify-content: space-around; .swiper-pagination-bullet { border-radius: 0; flex-grow: 1; background: #387ef5; } } .social-feed-element { color: black; margin-top: 1rem !important; } .survey { height: 100%; .scroll, form { height: 100%; .item { border: none; border-bottom: 1px solid #ddd; margin-bottom: 5px; .input-label { font-size: 14px; white-space: normal !important; width: 100%; &.q10-label { white-space: normal !important; max-width: none !important; width: 65%; } } } } } .swiper-slide { overflow-y: auto; } .review-content .scroll { padding-bottom: 54px; } .review-button { margin-bottom: 44px; padding: 0; .button { margin: 0; } } .rating { border: none; float: left; padding: 0; } .rating > input { display: none; } .rating > label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\f005"; } .rating > .half:before { content: "\f089"; position: absolute; } .rating > label { color: #ddd; float: right; } /***** CSS Magic to Highlight Stars on Hover *****/ .rating > input:checked ~ label, /* show gold star when clicked */ .rating:not(:checked) > label:focus, /* hover current star */ .rating:not(:checked) > label:focus ~ label { color: #FFD700; } /* hover previous stars in list */