mirror of
https://github.com/yusufipk/trillo-react.git
synced 2026-09-11 10:56:15 +00:00
1 line
46 KiB
Plaintext
1 line
46 KiB
Plaintext
{"version":3,"sources":["webpack://src/index.css","webpack://src/App.scss","webpack://src/SASS/components/buttons.scss","webpack://src/SASS/abstracts/_variables.scss","webpack://src/SASS/components/components.scss","webpack://src/SASS/abstracts/_include-media.scss","webpack://src/SASS/base/_animations.scss","webpack://src/SASS/base/_typography.scss","webpack://src/SASS/base/_base.scss","webpack://src/SASS/base/_utilities.scss","webpack://src/SASS/layout/_layout.scss","webpack://src/SASS/pages/_home.scss"],"names":[],"mappings":"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","file":"main.6209f2ee.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n",".btn{border:none;font-size:1.5rem;font-weight:600;text-transform:uppercase;border-radius:100px;background-image:linear-gradient(to right, #ff3366, #ba265d);color:#fff;cursor:pointer;position:relative;overflow:hidden}.btn>*{display:inline-block;height:100%;width:100%;transition:all .2s;height:100%;width:100%}.btn__visible{padding:2rem 7.5rem}.btn__invisible{position:absolute;padding:2rem 0;left:0;top:-100%}.btn:hover{background-image:linear-gradient(to left, #ff3366, #ba265d)}.btn:hover .btn__visible{transform:translateY(100%)}.btn:hover .btn__invisible{top:0}.btn:active{transform:translateY(-0.2rem)}.btn-inline{border:none;color:#eb2f64;font-size:inherit;border-bottom:1px solid currentColor;padding:2px;display:inline-block;background-color:transparent;cursor:pointer;transition:all .2s}.btn-inline span{margin-left:3px;transition:margin-left .2s}.btn-inline:hover{color:#333}.btn-inline:hover span{margin-left:8px}.btn-inline:focus{outline:none}.list{list-style-type:none;margin:3rem 0;padding:3rem 0;border-top:1px solid #f4f2f2;border-bottom:1px solid #f4f2f2;display:flex;flex-wrap:wrap}.list__item{flex:0 0 50%;margin-bottom:.7rem}@media(max-width: 31.24em){.list__item{font-size:1.3rem}}.list__item::before{content:\"\";display:inline-block;height:1rem;width:1rem;margin-right:.7rem;background-color:#eb2f64;mask-image:url(../../commons/img/chevron-thin-right.svg);mask-size:cover}.recommend{font-size:1.3rem;color:#f0eeee;display:flex;align-items:center}.recommend__friends{display:flex}.recommend__photo{box-sizing:content-box;height:4rem;width:4rem;border-radius:50%;border:3px solid #fff}.recommend__photo:not(:last-child){margin-right:-2rem}.recommend__count{margin-right:auto;color:#999}.review{background-color:#fff;box-shadow:.5rem 1rem 2rem rgba(0,0,0,.2);padding:3rem;margin-bottom:3rem;position:relative;overflow:hidden}@media(max-width: 56.24em){.review{padding:2rem;margin-bottom:3rem}}.review__text{margin-bottom:2rem;z-index:2;position:relative}.review__user{display:flex;align-items:center}.review__photo{height:4.5rem;width:4.5rem;border-radius:50%;margin-right:1.5rem}.review__user-box{margin-right:auto}.review__user-name{font-size:1.1rem;font-weight:600;text-transform:uppercase;margin-bottom:.4rem}.review__user-date{font-size:1rem;color:#999}.review__rating{color:#eb2f64;font-size:2.2rem;font-weight:300}@media(max-width: 37.49em){.review__rating{font-size:0 1.5rem}}.review::before{z-index:1;content:\"“\";position:absolute;top:-3.2rem;left:-1rem;font-size:20rem;line-height:1;color:#f4f2f2;font-family:sans-serif}@keyframes pulsate{0%{transform:scale(1);box-shadow:none}50%{transform:scale(1.05);box-shadow:0 1rem 4rem rgba(0,0,0,.25)}100%{transform:scale(1);box-shadow:none}}body{font-family:\"Open Sans\",sans-serif;font-weight:400;line-height:1.6}.heading-main{font-size:2.25rem;font-weight:300;text-transform:uppercase;letter-spacing:1px;padding:1.5rem 3rem}@media(max-width: 37.49em){.heading-main{font-size:1.8rem;padding:1.25rem 2rem}}.paragraph:not(:last-of-type){margin-bottom:2rem}*,*::after,*::before{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%}@media(max-width: 68.74em){html{font-size:50%}}body{box-sizing:border-box;color:#777;background-image:linear-gradient(to right bottom, #ff3366, #ba265d);background-size:cover;background-repeat:no-repeat;min-height:100vh}::selection{background-color:#eb2f64;color:#fff}.u-center-text{text-align:center !important}.u-margin-bottom-big{margin-bottom:8rem !important}.u-margin-bottom-medium{margin-bottom:4rem !important}.u-margin-bottom-small{margin-bottom:1.5rem !important}.u-margin-top-big{margin-top:8rem !important}.u-margin-top-huge{margin-top:10rem !important}.container{max-width:120rem;margin:8rem auto;background-color:#f4f2f2;box-shadow:0 2rem 6rem rgba(0,0,0,.3)}@media(max-width: 74.99em){.container{margin:0;max-width:100%;width:100%}}.content{display:flex}@media(max-width: 56.24em){.content{flex-direction:column}}.hotel-view{background-color:#fff;flex:1}.detail{display:flex;padding:4.5rem;background-color:#faf9f9;border-bottom:1px solid #f4f2f2;font-size:1.4rem}@media(max-width: 56.24em){.detail{padding:3rem}}@media(max-width: 37.49em){.detail{flex-direction:column}}.description{background-color:#fff;box-shadow:0 2rem 5rem rgba(0,0,0,.06);padding:3rem;flex:0 0 60%;margin-right:4.5rem}@media(max-width: 56.24em){.description{padding:2rem;margin-right:3rem}}@media(max-width: 37.49em){.description{margin-right:0;margin-bottom:3rem}}.user-reviews{flex:1;display:flex;flex-direction:column;align-items:center}.header{height:7rem;background-color:#fff;border-bottom:1px solid #f4f2f2;display:flex;font-size:1.4rem;justify-content:space-between;align-items:center}.header__hover-list{display:flex;flex-direction:column;list-style-type:none;background-color:#fff;z-index:100;visibility:hidden;text-align:center;position:absolute;top:100%;right:0%}.header__hover-list-item{height:3rem;width:12.5rem}.header__hover-list-item-link{text-decoration:none;color:#eb2f64}@media(max-width: 31.24em){.header{flex-wrap:wrap;align-content:space-around;height:12rem}}.header__logo{height:3.25rem;margin-left:2rem}.header__search{flex:0 0 40%;display:flex;align-items:center;justify-content:center}@media(max-width: 31.24em){.header__search{order:1;flex:0 0 100%;background-color:#f4f2f2}}.header__search--input{font-family:inherit;font-size:inherit;background-color:#f4f2f2;border:none;color:inherit;padding:.7rem 2rem;border-radius:100px;width:90%;transition:all .2s;margin-right:-3.25rem}.header__search--input:focus{outline:none;width:100%;background-color:#f0eeee}.header__search--input::-webkit-input-placeholder{font-weight:100;color:#ccc}.header__search--input:focus+.header__search--button{background-color:#f0eeee}.header__search--button{border:none;background-color:#f4f2f2}.header__search--button:focus{outline:none}.header__search--button:active{transform:translateY(2px)}.header__search--icon{height:2rem;width:2rem;fill:#999}.header__user-nav{display:flex;align-items:center;align-self:stretch;position:relative}.header__user-nav>*{padding:0 2rem;cursor:pointer;height:100%;display:flex;align-items:center}.header__user-nav>*:hover{background-color:#f4f2f2}.header__user-nav--icon-box{position:relative}.header__user-nav--icon{height:2.25rem;width:2.25rem;fill:#777}.header__user-nav--notification{font-size:.8rem;font-weight:800;height:1.75rem;width:1.75rem;border-radius:50%;background-color:#eb2f64;color:#fff;position:absolute;top:1.5rem;right:1.1rem;display:flex;justify-content:center;align-items:center}.header__user-nav--user-photo{height:3.75rem;border-radius:50%;margin-right:1rem}.header__user-nav--user:hover .header__hover-list{visibility:visible}.sidebar{background-color:#333;flex:0 0 18%;display:flex;flex-direction:column;justify-content:space-between}.sidebar__side-nav{font-size:1.2rem;list-style:none;margin-top:3.5rem}@media(max-width: 56.24em){.sidebar__side-nav{display:flex;margin:0}}.sidebar__side-nav--item{position:relative}.sidebar__side-nav--item:not(:last-child){margin-bottom:.5rem}@media(max-width: 56.24em){.sidebar__side-nav--item:not(:last-child){flex:1;margin-bottom:0}}.sidebar__side-nav--item::before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:#eb2f64;transform:scaleY(0);transition:transform .2s,width .4s cubic-bezier(1, 0, 0, 1) .2s,background-color .1s}.sidebar__side-nav--item:hover::before,.sidebar__side-nav--item--active::before{transform:scaleY(1);width:100%}.sidebar__side-nav--item:active::before{background-color:#f36}.sidebar__side-nav--link:link,.sidebar__side-nav--link:visited{z-index:1;color:#faf9f9;text-decoration:none;text-transform:uppercase;display:block;padding:1.5rem 3rem;position:relative;display:flex;align-items:center}@media(max-width: 56.24em){.sidebar__side-nav--link:link,.sidebar__side-nav--link:visited{justify-content:center;padding:2rem}}@media(max-width: 37.49em){.sidebar__side-nav--link:link,.sidebar__side-nav--link:visited{flex-direction:column;padding:1.5rem .5rem}}.sidebar__side-nav--icon{width:1.75rem;height:1.75rem;margin-right:2rem;fill:currentColor}@media(max-width: 37.49em){.sidebar__side-nav--icon{margin-bottom:.7rem;margin-right:0;width:1.5rem;height:1.5rem}}.sidebar .legal{font-size:1.2rem;color:#ccc;text-align:center;padding:2.5rem}@media(max-width: 56.24em){.sidebar .legal{display:none}}.gallery{display:flex}.gallery__photo{width:100%;display:block}.overview{display:flex;align-items:center;border-bottom:1px solid #f4f2f2}.overview__stars{margin-right:auto;display:flex}.overview__location{font-size:1.2rem;display:flex;align-items:center}.overview__icon-location,.overview__icon-star{width:1.75rem;height:1.75rem;fill:#eb2f64}.overview__icon-location{margin-right:.1rem}.overview__rating{background-color:#eb2f64;margin-left:3rem;color:#fff;padding:0 2.25rem;align-self:stretch;display:flex;align-items:center;justify-content:center;flex-direction:column}@media(max-width: 37.49em){.overview__rating{padding:0 1.5rem}}.overview__rating-average{font-size:2.25rem;font-weight:300;margin-bottom:-3px}@media(max-width: 37.49em){.overview__rating-average{font-size:1.8rem}}.overview__rating-count{font-size:1rem;text-transform:uppercase}@media(max-width: 31.24em){.overview__rating-count{display:none}}.cta{padding:3.5rem 0;text-align:center}@media(max-width: 56.24em){.cta{padding:2.5rem 0}}.cta__book-now{font-size:1.5rem;font-weight:300;text-transform:uppercase;margin-bottom:2.5rem}",".btn {\n border: none;\n font-size: 1.5rem;\n font-weight: 600;\n text-transform: uppercase;\n border-radius: 100px;\n background-image: linear-gradient(\n to right,\n $color-primary-light,\n $color-primary-dark\n );\n color: $color-white;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n\n & > * {\n display: inline-block;\n height: 100%;\n width: 100%;\n transition: all 0.2s;\n height: 100%;\n width: 100%;\n }\n\n &__visible {\n padding: 2rem 7.5rem;\n }\n\n &__invisible {\n position: absolute;\n padding: 2rem 0;\n left: 0;\n top: -100%;\n }\n\n &:hover {\n background-image: linear-gradient(\n to left,\n $color-primary-light,\n $color-primary-dark\n );\n }\n\n &:hover &__visible {\n transform: translateY(100%);\n }\n\n &:hover &__invisible {\n top: 0;\n }\n\n &:active {\n transform: translateY(-0.2rem);\n }\n}\n\n.btn-inline {\n border: none;\n color: $color-primary;\n font-size: inherit;\n border-bottom: 1px solid currentColor;\n padding: 2px;\n display: inline-block;\n background-color: transparent;\n cursor: pointer;\n transition: all 0.2s;\n\n & span {\n margin-left: 3px;\n transition: margin-left 0.2s;\n }\n\n &:hover {\n color: $color-grey-dark-1;\n // animation: pulsate 1s infinite;\n\n span {\n margin-left: 8px;\n }\n }\n\n &:focus {\n outline: none;\n }\n}\n","/*\nCOLORS\n\nPrimary: #eb2f64\nPrimary light: #FF3366\nPrimary dark: #BA265D\n\nGrey light 1: #faf9f9\nGrey light 2: #f4f2f2\nGrey light 3: #f0eeee\nGrey light 4: #ccc\n\nGrey dark 1: #333\nGrey dark 2: #777\nGrey dark 3: #999\n\n*/\n\n// COLORS\n$color-primary: #eb2f64;\n$color-primary-light: #ff3366;\n$color-primary-dark: #ba265d;\n\n$color-grey-light-1: #faf9f9;\n$color-grey-light-2: #f4f2f2;\n$color-grey-light-3: #f0eeee;\n$color-grey-light-4: #ccc;\n\n$color-grey-dark-1: #333;\n$color-grey-dark-2: #777;\n$color-grey-dark-3: #999;\n\n$color-black: #000;\n$color-white: #fff;\n\n// FONT CONTROL\n$smaller-font-size: 0.8rem;\n$small-font-size: 1.2rem;\n$default-font-size: 1.6rem;\n$normal-font-size: 1.4rem;\n$medium-font-size: 3rem;\n$big-font-size: 5rem;\n\n// OTHER\n\n$shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);\n$shadow-description: 0 2rem 5rem rgba($color-black, 0.06);\n$shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);\n$shadow-link: 0 1rem 2rem rgba($color-black, 0.4);\n$shadow-blurry: 0 2rem 6rem rgba($color-black, 0.3);\n\n$line: 1px solid $color-grey-light-2;\n",".list {\n list-style-type: none;\n margin: 3rem 0;\n padding: 3rem 0;\n border-top: $line;\n border-bottom: $line;\n\n display: flex;\n flex-wrap: wrap;\n\n &__item {\n flex: 0 0 50%;\n margin-bottom: 0.7rem;\n\n @include media(\"<smallest\") {\n font-size: 1.3rem;\n }\n }\n\n &__item::before {\n content: \"\";\n display: inline-block;\n height: 1rem;\n width: 1rem;\n margin-right: 0.7rem;\n\n background-color: $color-primary;\n mask-image: url(../../commons/img/chevron-thin-right.svg);\n mask-size: cover;\n }\n}\n\n.recommend {\n font-size: 1.3rem;\n color: $color-grey-light-3;\n display: flex;\n align-items: center;\n\n &__friends {\n display: flex;\n }\n\n &__photo {\n box-sizing: content-box;\n height: 4rem;\n width: 4rem;\n border-radius: 50%;\n border: 3px solid $color-white;\n }\n &__photo:not(:last-child) {\n margin-right: -2rem;\n }\n\n &__count {\n margin-right: auto;\n color: $color-grey-dark-3;\n }\n}\n\n.review {\n background-color: $color-white;\n box-shadow: $shadow-light;\n padding: 3rem;\n margin-bottom: 3rem;\n position: relative;\n overflow: hidden;\n\n @include media(\"<medium\") {\n padding: 2rem;\n margin-bottom: 3rem;\n }\n\n &__text {\n margin-bottom: 2rem;\n z-index: 2;\n position: relative;\n }\n\n &__user {\n display: flex;\n align-items: center;\n }\n\n &__photo {\n height: 4.5rem;\n width: 4.5rem;\n border-radius: 50%;\n margin-right: 1.5rem;\n }\n\n &__user-box {\n margin-right: auto;\n }\n\n &__user-name {\n font-size: 1.1rem;\n font-weight: 600;\n text-transform: uppercase;\n margin-bottom: 0.4rem;\n }\n\n &__user-date {\n font-size: 1rem;\n color: $color-grey-dark-3;\n }\n\n &__rating {\n color: $color-primary;\n font-size: 2.2rem;\n font-weight: 300;\n\n @include media(\"<small\") {\n font-size: 0 1.5rem;\n }\n }\n\n &::before {\n z-index: 1;\n content: \"\\201C\";\n position: absolute;\n top: -3.2rem;\n left: -1rem;\n font-size: 20rem;\n line-height: 1;\n color: $color-grey-light-2;\n font-family: sans-serif;\n }\n}\n","@charset \"UTF-8\";\n\n// _ _ _ _ _\n// (_) | | | | | (_)\n// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _\n// | | '_ \\ / __| | | | |/ _` |/ _ \\ | '_ ` _ \\ / _ \\/ _` | |/ _` |\n// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |\n// |_|_| |_|\\___|_|\\__,_|\\__,_|\\___| |_| |_| |_|\\___|\\__,_|_|\\__,_|\n//\n// Simple, elegant and maintainable media queries in Sass\n// v1.4.9\n//\n// https://eduardoboucas.github.io/include-media\n//\n// Authors: Eduardo Boucas (@eduardoboucas)\n// Kitty Giraudel (@kittygiraudel)\n//\n// This project is licensed under the terms of the MIT license\n////\n/// include-media library public configuration\n/// @author Eduardo Boucas\n/// @access public\n////\n\n///\n/// Creates a list of global breakpoints\n///\n/// @example scss - Creates a single breakpoint with the label `phone`\n/// $breakpoints: ('phone': 320px);\n///\n$breakpoints: (\n \"smallest\": 31.25em,\n \"small\": 37.5em,\n // 600px\n \"medium\": 56.25em,\n // 900px\n \"large\": 68.75em,\n // 1100px\n \"largest\": 75em,\n // 1200 px\n) !default;\n\n///\n/// Creates a list of static expressions or media types\n///\n/// @example scss - Creates a single media type (screen)\n/// $media-expressions: ('screen': 'screen');\n///\n/// @example scss - Creates a static expression with logical disjunction (OR operator)\n/// $media-expressions: (\n/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'\n/// );\n///\n$media-expressions: (\n \"screen\": \"screen\",\n \"print\": \"print\",\n \"handheld\": \"handheld\",\n \"landscape\": \"(orientation: landscape)\",\n \"portrait\": \"(orientation: portrait)\",\n \"retina2x\":\n \"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)\",\n \"retina3x\":\n \"(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)\",\n) !default;\n\n///\n/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals\n///\n/// @example scss - Interval for pixels is defined as `1` by default\n/// @include media('>128px') {}\n///\n/// /* Generates: */\n/// @media (min-width: 129px) {}\n///\n/// @example scss - Interval for ems is defined as `0.01` by default\n/// @include media('>20em') {}\n///\n/// /* Generates: */\n/// @media (min-width: 20.01em) {}\n///\n/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`\n/// @include media('>2.0rem') {}\n///\n/// /* Generates: */\n/// @media (min-width: 2.1rem) {}\n///\n$unit-intervals: (\n \"px\": 1,\n \"em\": 0.01,\n \"rem\": 0.1,\n \"\": 0,\n) !default;\n\n///\n/// Defines whether support for media queries is available, useful for creating separate stylesheets\n/// for browsers that don't support media queries.\n///\n/// @example scss - Disables support for media queries\n/// $im-media-support: false;\n/// @include media('>=tablet') {\n/// .foo {\n/// color: tomato;\n/// }\n/// }\n///\n/// /* Generates: */\n/// .foo {\n/// color: tomato;\n/// }\n///\n$im-media-support: true !default;\n\n///\n/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or\n/// intercept the breakpoint will be displayed, any others will be ignored.\n///\n/// @example scss - This media query will show because it intercepts the static breakpoint\n/// $im-media-support: false;\n/// $im-no-media-breakpoint: 'desktop';\n/// @include media('>=tablet') {\n/// .foo {\n/// color: tomato;\n/// }\n/// }\n///\n/// /* Generates: */\n/// .foo {\n/// color: tomato;\n/// }\n///\n/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint\n/// $im-media-support: false;\n/// $im-no-media-breakpoint: 'tablet';\n/// @include media('>=desktop') {\n/// .foo {\n/// color: tomato;\n/// }\n/// }\n///\n/// /* No output */\n///\n$im-no-media-breakpoint: \"desktop\" !default;\n\n///\n/// Selects which media expressions are allowed in an expression for it to be used when media queries\n/// are not supported.\n///\n/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions\n/// $im-media-support: false;\n/// $im-no-media-breakpoint: 'desktop';\n/// $im-no-media-expressions: ('screen');\n/// @include media('>=tablet', 'screen') {\n/// .foo {\n/// color: tomato;\n/// }\n/// }\n///\n/// /* Generates: */\n/// .foo {\n/// color: tomato;\n/// }\n///\n/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted\n/// $im-media-support: false;\n/// $im-no-media-breakpoint: 'desktop';\n/// $im-no-media-expressions: ('screen');\n/// @include media('>=tablet', 'retina2x') {\n/// .foo {\n/// color: tomato;\n/// }\n/// }\n///\n/// /* No output */\n///\n$im-no-media-expressions: (\"screen\", \"portrait\", \"landscape\") !default;\n\n////\n/// Cross-engine logging engine\n/// @author Kitty Giraudel\n/// @access private\n////\n\n///\n/// Log a message either with `@error` if supported\n/// else with `@warn`, using `feature-exists('at-error')`\n/// to detect support.\n///\n/// @param {String} $message - Message to log\n///\n@function im-log($message) {\n @if feature-exists(\"at-error\") {\n @error $message;\n } @else {\n @warn $message;\n $_: noop();\n }\n\n @return $message;\n}\n\n///\n/// Wrapper mixin for the log function so it can be used with a more friendly\n/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function\n/// within functions because it is not possible to include a mixin in a function\n/// and use the mixin everywhere else because it's much more elegant.\n///\n/// @param {String} $message - Message to log\n///\n@mixin log($message) {\n @if im-log($message) {\n }\n}\n\n///\n/// Function with no `@return` called next to `@warn` in Sass 3.3\n/// to trigger a compiling error and stop the process.\n///\n@function noop() {\n}\n\n///\n/// Determines whether a list of conditions is intercepted by the static breakpoint.\n///\n/// @param {Arglist} $conditions - Media query conditions\n///\n/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint\n///\n@function im-intercepts-static-breakpoint($conditions...) {\n $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);\n\n @if not $no-media-breakpoint-value {\n @if im-log(\"`#{$im-no-media-breakpoint}` is not a valid breakpoint.\") {\n }\n }\n\n @each $condition in $conditions {\n @if not map-has-key($media-expressions, $condition) {\n $operator: get-expression-operator($condition);\n $prefix: get-expression-prefix($operator);\n $value: get-expression-value($condition, $operator);\n\n @if ($prefix == \"max\" and $value <= $no-media-breakpoint-value) or\n ($prefix == \"min\" and $value > $no-media-breakpoint-value)\n {\n @return false;\n }\n } @else if not index($im-no-media-expressions, $condition) {\n @return false;\n }\n }\n\n @return true;\n}\n\n////\n/// Parsing engine\n/// @author Kitty Giraudel\n/// @access private\n////\n\n///\n/// Get operator of an expression\n///\n/// @param {String} $expression - Expression to extract operator from\n///\n/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`\n///\n@function get-expression-operator($expression) {\n @each $operator in (\">=\", \">\", \"<=\", \"<\", \"≥\", \"≤\") {\n @if str-index($expression, $operator) {\n @return $operator;\n }\n }\n\n // It is not possible to include a mixin inside a function, so we have to\n // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because\n // functions cannot be called anywhere in Sass, we need to hack the call in\n // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with\n // Sass 3.3, change this line in `@if im-log(..) {}` instead.\n $_: im-log(\"No operator found in `#{$expression}`.\");\n}\n\n///\n/// Get dimension of an expression, based on a found operator\n///\n/// @param {String} $expression - Expression to extract dimension from\n/// @param {String} $operator - Operator from `$expression`\n///\n/// @return {String} - `width` or `height` (or potentially anything else)\n///\n@function get-expression-dimension($expression, $operator) {\n $operator-index: str-index($expression, $operator);\n $parsed-dimension: str-slice($expression, 0, $operator-index - 1);\n $dimension: \"width\";\n\n @if str-length($parsed-dimension) > 0 {\n $dimension: $parsed-dimension;\n }\n\n @return $dimension;\n}\n\n///\n/// Get dimension prefix based on an operator\n///\n/// @param {String} $operator - Operator\n///\n/// @return {String} - `min` or `max`\n///\n@function get-expression-prefix($operator) {\n @return if(index((\"<\", \"<=\", \"≤\"), $operator), \"max\", \"min\");\n}\n\n///\n/// Get value of an expression, based on a found operator\n///\n/// @param {String} $expression - Expression to extract value from\n/// @param {String} $operator - Operator from `$expression`\n///\n/// @return {Number} - A numeric value\n///\n@function get-expression-value($expression, $operator) {\n $operator-index: str-index($expression, $operator);\n $value: str-slice($expression, $operator-index + str-length($operator));\n\n @if map-has-key($breakpoints, $value) {\n $value: map-get($breakpoints, $value);\n } @else {\n $value: to-number($value);\n }\n\n $interval: map-get($unit-intervals, unit($value));\n\n @if not $interval {\n // It is not possible to include a mixin inside a function, so we have to\n // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because\n // functions cannot be called anywhere in Sass, we need to hack the call in\n // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with\n // Sass 3.3, change this line in `@if im-log(..) {}` instead.\n $_: im-log(\"Unknown unit `#{unit($value)}`.\");\n }\n\n @if $operator == \">\" {\n $value: $value + $interval;\n } @else if $operator == \"<\" {\n $value: $value - $interval;\n }\n\n @return $value;\n}\n\n///\n/// Parse an expression to return a valid media-query expression\n///\n/// @param {String} $expression - Expression to parse\n///\n/// @return {String} - Valid media query\n///\n@function parse-expression($expression) {\n // If it is part of $media-expressions, it has no operator\n // then there is no need to go any further, just return the value\n @if map-has-key($media-expressions, $expression) {\n @return map-get($media-expressions, $expression);\n }\n\n $operator: get-expression-operator($expression);\n $dimension: get-expression-dimension($expression, $operator);\n $prefix: get-expression-prefix($operator);\n $value: get-expression-value($expression, $operator);\n\n @return \"(#{$prefix}-#{$dimension}: #{$value})\";\n}\n\n///\n/// Slice `$list` between `$start` and `$end` indexes\n///\n/// @access private\n///\n/// @param {List} $list - List to slice\n/// @param {Number} $start [1] - Start index\n/// @param {Number} $end [length($list)] - End index\n///\n/// @return {List} Sliced list\n///\n@function slice($list, $start: 1, $end: length($list)) {\n @if length($list) < 1 or $start > $end {\n @return ();\n }\n\n $result: ();\n\n @for $i from $start through $end {\n $result: append($result, nth($list, $i));\n }\n\n @return $result;\n}\n\n////\n/// String to number converter\n/// @author Kitty Giraudel\n/// @access private\n////\n\n///\n/// Casts a string into a number\n///\n/// @param {String | Number} $value - Value to be parsed\n///\n/// @return {Number}\n///\n@function to-number($value) {\n @if type-of($value) == \"number\" {\n @return $value;\n } @else if type-of($value) != \"string\" {\n $_: im-log(\"Value for `to-number` should be a number or a string.\");\n }\n\n $first-character: str-slice($value, 1, 1);\n $result: 0;\n $digits: 0;\n $minus: ($first-character == \"-\");\n $numbers: (\n \"0\": 0,\n \"1\": 1,\n \"2\": 2,\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n );\n\n // Remove +/- sign if present at first character\n @if ($first-character == \"+\" or $first-character == \"-\") {\n $value: str-slice($value, 2);\n }\n\n @for $i from 1 through str-length($value) {\n $character: str-slice($value, $i, $i);\n\n @if not(index(map-keys($numbers), $character) or $character == \".\") {\n @return to-length(if($minus, -$result, $result), str-slice($value, $i));\n }\n\n @if $character == \".\" {\n $digits: 1;\n } @else if $digits == 0 {\n $result: $result * 10 + map-get($numbers, $character);\n } @else {\n $digits: $digits * 10;\n $result: $result + map-get($numbers, $character) / $digits;\n }\n }\n\n @return if($minus, -$result, $result);\n}\n\n///\n/// Add `$unit` to `$value`\n///\n/// @param {Number} $value - Value to add unit to\n/// @param {String} $unit - String representation of the unit\n///\n/// @return {Number} - `$value` expressed in `$unit`\n///\n@function to-length($value, $unit) {\n $units: (\n \"px\": 1px,\n \"cm\": 1cm,\n \"mm\": 1mm,\n \"%\": 1%,\n \"ch\": 1ch,\n \"pc\": 1pc,\n \"in\": 1in,\n \"em\": 1em,\n \"rem\": 1rem,\n \"pt\": 1pt,\n \"ex\": 1ex,\n \"vw\": 1vw,\n \"vh\": 1vh,\n \"vmin\": 1vmin,\n \"vmax\": 1vmax,\n );\n\n @if not index(map-keys($units), $unit) {\n $_: im-log(\"Invalid unit `#{$unit}`.\");\n }\n\n @return $value * map-get($units, $unit);\n}\n\n///\n/// This mixin aims at redefining the configuration just for the scope of\n/// the call. It is helpful when having a component needing an extended\n/// configuration such as custom breakpoints (referred to as tweakpoints)\n/// for instance.\n///\n/// @author Kitty Giraudel\n///\n/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`\n/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`\n///\n/// @example scss - Extend the global breakpoints with a tweakpoint\n/// @include media-context(('custom': 678px)) {\n/// .foo {\n/// @include media('>phone', '<=custom') {\n/// // ...\n/// }\n/// }\n/// }\n///\n/// @example scss - Extend the global media expressions with a custom one\n/// @include media-context($tweak-media-expressions: ('all': 'all')) {\n/// .foo {\n/// @include media('all', '>phone') {\n/// // ...\n/// }\n/// }\n/// }\n///\n/// @example scss - Extend both configuration maps\n/// @include media-context(('custom': 678px), ('all': 'all')) {\n/// .foo {\n/// @include media('all', '>phone', '<=custom') {\n/// // ...\n/// }\n/// }\n/// }\n///\n@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {\n // Save global configuration\n $global-breakpoints: $breakpoints;\n $global-media-expressions: $media-expressions;\n\n // Update global configuration\n $breakpoints: map-merge($breakpoints, $tweakpoints) !global;\n $media-expressions: map-merge(\n $media-expressions,\n $tweak-media-expressions\n ) !global;\n\n @content;\n\n // Restore global configuration\n $breakpoints: $global-breakpoints !global;\n $media-expressions: $global-media-expressions !global;\n}\n\n////\n/// include-media public exposed API\n/// @author Eduardo Boucas\n/// @access public\n////\n\n///\n/// Generates a media query based on a list of conditions\n///\n/// @param {Arglist} $conditions - Media query conditions\n///\n/// @example scss - With a single set breakpoint\n/// @include media('>phone') { }\n///\n/// @example scss - With two set breakpoints\n/// @include media('>phone', '<=tablet') { }\n///\n/// @example scss - With custom values\n/// @include media('>=358px', '<850px') { }\n///\n/// @example scss - With set breakpoints with custom values\n/// @include media('>desktop', '<=1350px') { }\n///\n/// @example scss - With a static expression\n/// @include media('retina2x') { }\n///\n/// @example scss - Mixing everything\n/// @include media('>=350px', '<tablet', 'retina3x') { }\n///\n@mixin media($conditions...) {\n @if ($im-media-support and length($conditions) == 0) or\n (not $im-media-support and im-intercepts-static-breakpoint($conditions...))\n {\n @content;\n } @else if ($im-media-support and length($conditions) > 0) {\n @media #{unquote(parse-expression(nth($conditions, 1)))} {\n // Recursive call\n @include media(slice($conditions, 2)...) {\n @content;\n }\n }\n }\n}\n","@keyframes pulsate {\n 0% {\n transform: scale(1);\n box-shadow: none;\n }\n\n 50% {\n transform: scale(1.05);\n box-shadow: 0 1rem 4rem rgba($color-black, 0.25);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: none;\n }\n}\n","body {\n font-family: \"Open Sans\", sans-serif;\n font-weight: 400;\n line-height: 1.6;\n}\n\n.heading-main {\n font-size: 2.25rem;\n font-weight: 300;\n text-transform: uppercase;\n letter-spacing: 1px;\n padding: 1.5rem 3rem;\n\n @include media(\"<small\") {\n font-size: 1.8rem;\n padding: 1.25rem 2rem;\n }\n}\n\n.paragraph:not(:last-of-type) {\n margin-bottom: 2rem;\n}\n","*,\n*::after,\n*::before {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%; // 1 rem = 10px; 10px/16px = 62.5% (16 is default browser font size)\n\n @include media(\"<large\") {\n font-size: 50%;\n }\n}\n\nbody {\n box-sizing: border-box;\n color: $color-grey-dark-2;\n background-image: linear-gradient(\n to right bottom,\n $color-primary-light,\n $color-primary-dark\n );\n background-size: cover;\n background-repeat: no-repeat;\n\n min-height: 100vh;\n}\n\n::selection {\n background-color: $color-primary;\n color: $color-white;\n}\n",".u-center-text {\n text-align: center !important;\n}\n\n.u-margin-bottom-big {\n margin-bottom: 8rem !important;\n}\n.u-margin-bottom-medium {\n margin-bottom: 4rem !important;\n}\n.u-margin-bottom-small {\n margin-bottom: 1.5rem !important;\n}\n\n.u-margin-top-big {\n margin-top: 8rem !important;\n}\n\n.u-margin-top-huge {\n margin-top: 10rem !important;\n}\n",".container {\n max-width: 120rem;\n margin: 8rem auto;\n background-color: $color-grey-light-2;\n box-shadow: $shadow-blurry;\n\n @include media(\"<largest\") {\n margin: 0;\n max-width: 100%;\n width: 100%;\n }\n}\n\n.content {\n display: flex;\n\n @include media(\"<medium\") {\n flex-direction: column;\n }\n}\n\n.hotel-view {\n background-color: $color-white;\n\n flex: 1;\n}\n\n.detail {\n display: flex;\n padding: 4.5rem;\n background-color: $color-grey-light-1;\n border-bottom: $line;\n font-size: $normal-font-size;\n\n @include media(\"<medium\") {\n padding: 3rem;\n }\n\n @include media(\"<small\") {\n flex-direction: column;\n }\n}\n\n.description {\n background-color: $color-white;\n box-shadow: $shadow-description;\n padding: 3rem;\n flex: 0 0 60%;\n margin-right: 4.5rem;\n\n @include media(\"<medium\") {\n padding: 2rem;\n margin-right: 3rem;\n }\n\n @include media(\"<small\") {\n margin-right: 0;\n margin-bottom: 3rem;\n }\n}\n\n.user-reviews {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n align-items: center;\n}\n",".header {\n height: 7rem;\n background-color: $color-white;\n border-bottom: 1px solid $color-grey-light-2;\n\n display: flex;\n font-size: $normal-font-size;\n\n &__hover-list {\n display: flex;\n flex-direction: column;\n list-style-type: none;\n background-color: $color-white;\n z-index: 100;\n visibility: hidden;\n text-align: center;\n position: absolute;\n top: 100%;\n right: 0%;\n\n &-item {\n height: 3rem;\n width: 12.5rem;\n }\n &-item-link {\n text-decoration: none;\n color: $color-primary;\n }\n }\n\n @include media(\"<smallest\") {\n flex-wrap: wrap;\n align-content: space-around;\n height: 12rem;\n }\n\n // main axis\n justify-content: space-between;\n\n // cross axis\n align-items: center;\n\n &__logo {\n height: 3.25rem;\n margin-left: 2rem;\n }\n\n &__search {\n flex: 0 0 40%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n @include media(\"<smallest\") {\n order: 1;\n flex: 0 0 100%;\n background-color: $color-grey-light-2;\n }\n\n &--input {\n font-family: inherit;\n font-size: inherit;\n background-color: $color-grey-light-2;\n border: none;\n color: inherit;\n padding: 0.7rem 2rem;\n border-radius: 100px;\n width: 90%;\n transition: all 0.2s;\n margin-right: -3.25rem;\n\n &:focus {\n outline: none;\n width: 100%;\n background-color: $color-grey-light-3;\n }\n\n &::-webkit-input-placeholder {\n font-weight: 100;\n color: $color-grey-light-4;\n }\n }\n\n &--input:focus + &--button {\n background-color: $color-grey-light-3;\n }\n\n &--button {\n border: none;\n background-color: $color-grey-light-2;\n\n &:focus {\n outline: none;\n }\n\n &:active {\n transform: translateY(2px);\n }\n }\n\n &--icon {\n height: 2rem;\n width: 2rem;\n fill: $color-grey-dark-3;\n }\n }\n\n &__user-nav {\n display: flex;\n align-items: center;\n align-self: stretch;\n position: relative;\n\n & > * {\n padding: 0 2rem;\n cursor: pointer;\n height: 100%;\n display: flex;\n align-items: center;\n }\n\n & > *:hover {\n background-color: $color-grey-light-2;\n }\n\n &--icon-box {\n position: relative;\n }\n\n &--icon {\n height: 2.25rem;\n width: 2.25rem;\n fill: $color-grey-dark-2;\n }\n\n &--notification {\n font-size: 0.8rem;\n font-weight: 800;\n height: 1.75rem;\n width: 1.75rem;\n border-radius: 50%;\n background-color: $color-primary;\n color: $color-white;\n position: absolute;\n top: 1.5rem;\n right: 1.1rem;\n\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &--user-photo {\n height: 3.75rem;\n border-radius: 50%;\n margin-right: 1rem;\n }\n\n &--user:hover .header__hover-list {\n visibility: visible;\n }\n }\n}\n\n.sidebar {\n background-color: $color-grey-dark-1;\n\n flex: 0 0 18%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n &__side-nav {\n font-size: $small-font-size;\n list-style: none;\n margin-top: 3.5rem;\n\n @include media(\"<medium\") {\n display: flex;\n margin: 0;\n }\n\n &--item {\n position: relative;\n\n &:not(:last-child) {\n margin-bottom: 0.5rem;\n\n @include media(\"<medium\") {\n flex: 1;\n margin-bottom: 0;\n }\n }\n\n &::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 3px;\n background-color: $color-primary;\n transform: scaleY(0);\n transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,\n background-color 0.1s;\n }\n\n &:hover::before,\n &--active::before {\n transform: scaleY(1);\n width: 100%;\n }\n\n &:active::before {\n background-color: $color-primary-light;\n }\n }\n\n &--link:link,\n &--link:visited {\n z-index: 1;\n color: $color-grey-light-1;\n text-decoration: none;\n text-transform: uppercase;\n display: block;\n padding: 1.5rem 3rem;\n position: relative;\n\n display: flex;\n align-items: center;\n\n @include media(\"<medium\") {\n justify-content: center;\n padding: 2rem;\n }\n\n @include media(\"<small\") {\n flex-direction: column;\n padding: 1.5rem 0.5rem;\n }\n }\n\n &--icon {\n width: 1.75rem;\n height: 1.75rem;\n margin-right: 2rem;\n fill: currentColor;\n\n @include media(\"<small\") {\n margin-bottom: 0.7rem;\n margin-right: 0;\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n }\n\n .legal {\n font-size: $small-font-size;\n color: $color-grey-light-4;\n text-align: center;\n padding: 2.5rem;\n\n @include media(\"<medium\") {\n display: none;\n }\n }\n}\n\n.gallery {\n display: flex;\n\n &__photo {\n width: 100%;\n display: block;\n }\n}\n\n.overview {\n display: flex;\n align-items: center;\n border-bottom: $line;\n\n &__stars {\n margin-right: auto;\n display: flex;\n }\n\n &__location {\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n }\n\n &__icon-location,\n &__icon-star {\n width: 1.75rem;\n height: 1.75rem;\n fill: $color-primary;\n }\n\n &__icon-location {\n margin-right: 0.1rem;\n }\n\n &__rating {\n background-color: $color-primary;\n margin-left: 3rem;\n color: $color-white;\n padding: 0 2.25rem;\n align-self: stretch;\n\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n @include media(\"<small\") {\n padding: 0 1.5rem;\n }\n }\n\n &__rating-average {\n font-size: 2.25rem;\n font-weight: 300;\n margin-bottom: -3px;\n\n @include media(\"<small\") {\n font-size: 1.8rem;\n }\n }\n\n &__rating-count {\n font-size: 1rem;\n text-transform: uppercase;\n\n @include media(\"<smallest\") {\n display: none;\n }\n }\n}\n\n.cta {\n padding: 3.5rem 0;\n text-align: center;\n\n @include media(\"<medium\") {\n padding: 2.5rem 0;\n }\n\n &__book-now {\n font-size: 1.5rem;\n font-weight: 300;\n text-transform: uppercase;\n margin-bottom: 2.5rem;\n }\n}\n"]} |