diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index 9608932..7a1e60f 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -16,7 +16,7 @@ text-align: center; z-index: 1; padding: 1em 0.5em!important; - color: #333333; + color: #fff; font-family: $main-font; text-transform:uppercase; @media (min-width: 769px) { diff --git a/assets/stylesheets/template/modules/menu.scss.save b/assets/stylesheets/template/modules/menu.scss.save new file mode 100644 index 0000000..0183f4b --- /dev/null +++ b/assets/stylesheets/template/modules/menu.scss.save @@ -0,0 +1,411 @@ +@charset "utf-8"; + +@import "../initial"; +.collapse{ + @media(min-width: 769px){ + width:100%; + } +} +.navbar-collapse.in { + overflow-y: unset; +} + +.modules-menu { + font-family: $sub-font; + max-height: none; + z-index: 1020; + + li { + white-space: nowrap; + } + .menu-drop.opened { + transform: rotateX(180deg); + } + + .modules-menu-level-0 { + @media (min-width: 1900px) { + padding-top: 32px!important; + } + @media (min-width: 1025px){ + padding-top: 28px!important; + } + @media (min-width: 769px) { + margin: 0 0 0.8em 0; + -webkit-flex-flow: row wrap; + list-style: none; + width:100%; + padding-top: 10px; + display: flex; + } + .has-dropdown.level-1.active { + .modules-menu-level-1 { + display: block; + } + } + + .has-dropdown.level-2.active { + .modules-menu-level-2 { + display: block; + } + } + + // .dropdown-toggle-icon { + // position: absolute; + // top: 0.5em; + // right: 0.3em; + // width: 2.5em; + // height: 2.5em; + // cursor: pointer; + // line-height: 2.5em; + // font-size: 1em; + // text-align: center; + // border-radius: 0.13em; + // } + + .menu-drop { + position: absolute; + right: 0.3em; + width: 2.5em; + height: 2.5em; + cursor: pointer; + line-height: 2.5em; + font-size: 0.5em; + text-align: center; + border-radius: 0.13em; + top: 2em; + } + + // .dropdown-toggle-icon.level-1 { + // background-color: lighten($theme-gray, 10%); + // } + + // .dropdown-toggle-icon.level-2 { + // background-color: lighten($theme-gray, 10%); + // } + + & > li { + position:relative; + margin: 0; + padding: 0 1em; + border-bottom: 0.0625em solid lighten($theme-gray, 5%); + + & > a { + display: block; + padding: 1.125em 0; + font-family: $main-font; + } + + &:hover { + + // background-color: $theme-color-second; + // border-radius: 0.5em; + + & > a { + color: #288E8E; + } + + @media (min-width: $screen-sm) { + // background-color: $theme-color-second; + // border-radius: 0.5em; + } + } + + @media (min-width: $screen-sm) { + position: static; + margin: 0; + padding: 0; + border-bottom: none; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + + .modules-menu-level-1 { + left: auto; + + &:before { + right: 0.625em; + left: auto; + } + + & > li { + padding-right: 1em; + padding-left: 1em; + + & > a { + padding-left: 0; + } + } + + .modules-menu-level-2 { + right: 100%; + left: auto; + } + } + } + + & > a { + padding: 0.8rem; + font-size: 14px; + color:#fff; + font-weight: 900; + // text-shadow: 1px 1px 1px #0000008c; + } + + &:hover { + .modules-menu-level-1 { + // display: block; + // + // visibility: visible; + // opacity: 1; + // transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear; + + } + } + } + } + } + + .modules-menu-level-1 { + background-color:#ffffff; + list-style: none; + z-index: 1; + padding:1em; + @media(min-width:769px){ + flex-wrap: wrap; + justify-content: flex-start; + left:0; + display: flex; + visibility: hidden; + position: fixed!important; + opacity: 0; + width: 100vw; + box-shadow: 2px 2px 5px #00000033; + margin: 0.8em 0; + padding: 0; + max-height: 0; + overflow: hidden; + transition-duration: 0.5s; + } + + & > li { + position: relative; + // & + li { + // border-top: 0.0625em solid lighten($theme-gray, 5%); + // } + + & > a { + display: block; + padding: 1em 1.5em; + font-family: $main-font; + font-size: 16px; + font-weight: 600; + color: #333; + } + + // &:hover { + // background-color: $theme-color-second; + // & > a { + // color: $theme-color-main; + // } + // } + } + + @media (min-width: $screen-sm) { + position: absolute; + + & > li { + padding-right: 2em; + flex: 0 0 33.3%; + & > a { + padding-left: 1em; + border-bottom: 2px solid #288E8E; + padding: 5px 0; + } + + &:hover { + .modules-menu-level-2 { + display: block; + } + } + } + } + } + + .modules-menu-level-2 { + margin: 0; + padding: 0; + list-style: none; + + & > li { + & + li { + // border-top: 0.0625em solid lighten($theme-gray, 5%); + } + + & > a { + display: block; + padding: 0.3em 3em; + font-family: $main-font; + color: #333; + font-size: 16px; + font-weight: 500; + } + + // &:hover { + // background-color: $theme-color-second; + // } + } + + @media (min-width: $screen-sm) { + top: 0; + left: 100%; + + & > li > a { + padding-left: 1em; + } + } + } +} + +.has-mobile-dropdown { + .modules-menu { + .dropdown-toggle-icon { + display: block; + } + } +} + +@media (max-width: 767px) { + .modules-menu .modules-menu-level-0 { + flex-direction: column; + width: 100%; + padding: 0; + } +} +@media (max-width: 769px) { + .modules-menu .modules-menu-level-0 { + width: 100%; + padding: 0; + } +} + +//mobile +.mobile-menu { + z-index: 1051; + width: 100vw; + position: fixed; + top: 0; + right: 0; + bottom: 0; + display: none; + + &.active { + display: block; + } + + .modules-menu { + width: 100%; + position: absolute; + right: 40px; + background: #ffffff; + height: 100%; + top: 0; + padding-top: 40px; + } + .modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {color: #000; + font-size: 18px ; + font-weight: 500; } +.menu-drop{ + font-size: 10px ; +} + .navbar-toggle { + position: absolute; + left: 0; + background: transparent; + top: 40px; + z-index: 1; + height: 100vh; + margin: 0; + width: 20%; + border: 0; + } + .cover { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0,0.8); + z-index: 0; + } +} + + +//覆蓋bootstrap nav設定 +.mobile-menu .modules-menu.collapsing { + overflow:unset !important; + transform: translateX(100%); + -webkit-transition-timing-function:ease; + -o-transition-timing-function:ease; + transition-timing-function:ease; + -webkit-transition-duration:.35s; + -o-transition-duration:.35s; + transition-duration:.35s; + -webkit-transition-property:transform; + -o-transition-property:transform; + transition-property:transform; +} +.mobile-menu .modules-menu.collapse.in { + transform: translateX(100%); + -webkit-transition-timing-function:ease; + -o-transition-timing-function:ease; + transition-timing-function:ease; + -webkit-transition-duration:.35s; + -o-transition-duration:.35s; + transition-duration:.35s; + -webkit-transition-property:transform; + -o-transition-property:transform; + transition-property:transform; +} + +.mobile-menu .collapse.navbar-collapse.modules-menu { + overflow-y: scroll; + transform: translateX(0%); +} +.display-on{ + display:block!important; + transition-duration: 0.9s; +} +.drop-down > a:after{ + content:"\f103"; + color:#fff; + font-family: FontAwesome; + font-style: normal; + margin-left: 5px; +} +.dropdown-arrow{ + align-self: center; + margin-left: 10px; + z-index: 999; + @media(max-width: 768px){ + position: absolute; + right: 0.3em; + width: 2.5em; + height: 2.5em; + cursor: pointer; + line-height: 2.5em; + font-size: 1em; + text-align: center; + border-radius: 0.13em; + display: none!important; + } +} +.fa-chevron-right{ + align-self: center; + margin-left: 10px; + font-size: 3px; + font-weight: 100!important; +}