-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Deepika Gonuguntla
committed
Aug 16, 2021
1 parent
e891c94
commit a8fe25f
Showing
12 changed files
with
616 additions
and
228 deletions.
There are no files selected for viewing
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /** | ||
| * Breakpoint Configuration | ||
| * @see https://github.com/Team-Sass/breakpoint/wiki | ||
| * | ||
| */ | ||
|
|
||
| ///////////////////// | ||
| // Global Breakpoints | ||
|
|
||
| // Avoid using in favor of atomic, content-specific, breakpoints. | ||
| // These should be used for generic code, like layouts and typography, only. The CSS variables and the Sass variables below need to stay in sync. | ||
| // Sass' breakpoint() mixin doesn't work without Sass variables. | ||
| // CSS variables expose the breakpoint variables to consumers. | ||
| :root { | ||
| --breakpoint-small: 320px; | ||
| --breakpoint-medium: 600px; | ||
| --breakpoint-large: 960px; | ||
| --breakpoint-xl: 1280px; | ||
| } | ||
|
|
||
| $breakpoint-small: 320px; | ||
| $breakpoint-medium: 600px; | ||
| $breakpoint-large: 960px; | ||
| $breakpoint-xl: 1280px; | ||
| // The max-width breakpoint is used when the design should be applied at whatever the | ||
| // largest breakpoint is regardless of actual pixel value. e.g. removing outer margin on body wrapper | ||
| $max-width: $breakpoint-xl; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| @import 'viewports'; | ||
|
|
||
| .navMenu-wrapper { | ||
| /*display: inline-block; | ||
| position: inherit;*/ | ||
|
|
||
| @include min-screen(769px) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .mobileHeader { | ||
| @include min-screen(769px) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .navMenuList { | ||
| display: inline-block; | ||
| position: inherit; | ||
|
|
||
| @include max-screen(768px) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .header-mobile-navMenu { | ||
| display: inline-block; | ||
| padding: 0; | ||
| margin: 0 0 0 4px; | ||
| line-height: normal; | ||
| @include max-screen(768px) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .header-mobile-navMenu-wrapper { | ||
| /*box-shadow: 0 6px 4px rgb(100 100 100 / 40%);*/ | ||
| line-height: normal; | ||
| margin-top: -2.5px; | ||
| position: absolute; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| background-color: #FFF; | ||
| @include max-screen(768px) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .header-mobile-wrapper.active { | ||
| left: 0; | ||
| /*box-shadow: 0 6px 4px hsl(0deg 0% 39% / 40%);*/ | ||
| line-height: normal; | ||
| margin-top: -2.5px; | ||
| position: absolute; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
|
|
||
| .header-mobile-navMenu-list { | ||
| display: none; | ||
| background-color: #2B2B2B; | ||
| padding: 10px 0; | ||
| margin: 0; | ||
| list-style-type: none; | ||
| text-align: right; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .navMenu { | ||
| position: relative; | ||
| display: block; | ||
| } | ||
|
|
||
| #navMenu-List { | ||
| display: block; | ||
| line-height: 40px !important; | ||
| } | ||
|
|
||
| .navMenu-List { | ||
| list-style-type: square !important; | ||
| } | ||
|
|
||
|
|
||
| .navMenu-wrapper { | ||
| /*box-shadow: 0 6px 4px rgba(100, 100, 100, 0.4);*/ | ||
| line-height: normal; | ||
| margin-top: -2.5px; | ||
| position: absolute; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| background-color: #FFF; | ||
| border-top: 1px solid #D23B42; | ||
| } | ||
|
|
||
| .mobileHeader-menuButton.active{ | ||
| background-color: #D23B42 !important; | ||
| } | ||
|
|
||
| .menu-list { | ||
| cursor: pointer; | ||
| display: block; | ||
| position: relative; | ||
| } | ||
|
|
||
| .nav-menu-link { | ||
| cursor: pointer !important; | ||
| padding: 0 20px !important; | ||
| } | ||
|
|
||
| .menu-list .nav-menu-link:after { | ||
| content: ""; | ||
| position: absolute; | ||
| left: 20px; | ||
| right: 20px; | ||
| display: block; | ||
| border-bottom: 1px dotted #000; | ||
| } | ||
|
|
||
| .icon-div { | ||
| display: block; | ||
| position: relative; | ||
| background: #FFF; | ||
| width: 100%; | ||
| top:266px; | ||
| } | ||
|
|
||
| .icon-shuttle { | ||
| position: absolute; | ||
| left: 67.5%; | ||
| background: #D23B42; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /* --- Media Query Generator --- | ||
| * Reusable mixin used to generate | ||
| * variations of media query properties. | ||
| */ | ||
| @mixin generate-mq($args...) { | ||
| $media-type: 'only screen'; | ||
| $media-type-key: 'media-type'; | ||
| $args: keywords($args); | ||
| $expr: ''; | ||
|
|
||
| @if map-has-key($args, $media-type-key) { | ||
| $media-type: map-get($args, $media-type-key); | ||
| $args: map-remove($args, $media-type-key); | ||
| } | ||
|
|
||
| @each $key, $value in $args { | ||
| @if $value { | ||
| $expr: "#{$expr} and (#{$key}: #{$value})"; | ||
| } | ||
| } | ||
|
|
||
| @media #{$media-type} #{$expr} { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /* min-and-max-screen($min, $max, $orientation) | ||
| * $min - required | ||
| * $max - required | ||
| * $orientation - optional | ||
| * Ex: @include min-and-max-screen(768px, 1024px, landscape) { ... } | ||
| */ | ||
| @mixin min-and-max-screen($min, $max, $orientation: false) { | ||
| @include generate-mq($min-width: $min, $max-width: $max, $orientation: $orientation) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /* max-screen($max, $orientation) | ||
| * $max - required | ||
| * $orientation - optional | ||
| * Ex #1: @include max-screen(768px, landscape) { ... } | ||
| * Ex #2: @include max-screen(768px) { ... } | ||
| */ | ||
| @mixin max-screen($max, $orientation: false) { | ||
| @include generate-mq($max-width: $max, $orientation: $orientation) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /* min-screen($min, $orientation) | ||
| * $min - required | ||
| * $orientation - optional | ||
| * Ex #1: @include min-screen(768px, landscape) { ... } | ||
| * Ex #2: @include min-screen(768px) { ... } | ||
| */ | ||
| @mixin min-screen($min, $orientation: false) { | ||
| @include generate-mq($min-width: $min, $orientation: $orientation) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /* landscape() | ||
| * Ex: @include landscape() { ... } | ||
| */ | ||
| @mixin landscape() { | ||
| @include generate-mq($orientation: landscape) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /* portrait() | ||
| * Ex: @include portrait() { ... } | ||
| */ | ||
| @mixin portrait() { | ||
| @include generate-mq($orientation: portrait) { | ||
| @content; | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.