Merge pull request #26 from stoneream/feature/coc

Code of Conductページの実装
scalamatsuri · Nov 15, 2023 · 71323ee · 71323ee
2 parents e85cb29 + df0fec6
commit 71323ee
Show file tree

Hide file tree

Showing 6 changed files with 670 additions and 5 deletions.
diff --git a/assets/scss/common/_header.scss b/assets/scss/common/_header.scss
@@ -0,0 +1,8 @@
+/* header */
+@media screen and (max-width: $headerViewport - 1) {
+  @import "header_sp";
+}
+
+@media screen and (min-width: $headerViewport) {
+  @import "header_pc";
+}
diff --git a/assets/scss/common/_header_pc.scss b/assets/scss/common/_header_pc.scss
@@ -0,0 +1,217 @@
+/* header PC */
+.header {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 40px 0;
+  height: 120px;
+  position: absolute;
+  z-index: 2;
+  background-color: #FFF;
+  top: -120px;
+  &.is_fixed {
+    position: fixed;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+  }
+  &.is_active {
+    top: 0;
+    display: block;
+    transition-property: background-color,height,top;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+  }
+}
+.header_inner {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+.logo {
+  margin-top: 5px;
+  margin-right: 22px;
+  float: left;
+}
+.gnav {
+  font-weight: bold;
+  font-size: 16px;
+  margin-top: 0;
+  float: left;
+}
+.gnav_item {
+  // width: 120px;
+  display: inline-block;
+  text-align: center;
+  a {
+    display: block;
+    // width: 120px;
+    color: #000;
+    padding: 0 16px;
+    span {
+      display: inline-block;
+      padding: 8px 4px;
+      position: relative;
+      &:after {
+        content: none;
+        display: block;
+        width: 100%;
+        height: 3px;
+        background-color: #BD3844;
+        border-radius: 3px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+    }
+    &:hover, &.nuxt-link-exact-active {
+      span {
+        &:after {
+          content: "";
+        }
+      }
+    }
+  }
+  > select {
+    opacity: 0;
+  }
+}
+.function {
+  float: right;
+}
+.function_item {
+  float: left;
+  margin-left: 20px;
+  margin-top: 0;
+  > a {
+    display: block;
+    font-weight: bold;
+    width: 140px;
+    height: 44px;
+    background-color: #EBA80A;
+    border-radius: 22px;
+    text-align: center;
+    line-height: 44px;
+    color: #FFF;
+
+  }
+  &-userIcon {
+  }
+  &-application {
+    a {
+      background-color: #BD3844;
+    }
+  }
+}
+.selectArea_select {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.selectArea {
+  position: relative;
+  border-left: 2px solid #eee;
+  padding-left: 26px;
+}
+.selectArea_label {
+  position: absolute;
+  cursor: pointer;
+  position: relative;
+  padding-left: 28px;
+  padding-right: 18px;
+  font-size: 14px;
+  line-height: 22px;
+  &:hover {
+    opacity: .3;
+  }
+  &:before {
+    content: "";
+    background-image: url('~assets/img/common/icon-lang.svg');
+    width: 20px;
+    height: 20px;
+    background-size: 20px 20px;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 2px;
+  }
+  &:after {
+    content: "";
+    background-image: url('~assets/img/common/arrow-bottom.svg');
+    width: 10px;
+    height: 6px;
+    background-size: 10px 6px;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 9px;
+  }
+}
+.selectArea_list {
+  position: absolute;
+  top: 30px;
+  left: 20px;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+  width: 100%;
+  font-size: 16px;
+  font-weight: bold;
+  overflow: hidden;
+  cursor: pointer;
+}
+.selectArea_list_item {
+  padding: 11px 20px;
+  border-bottom: 1px solid #eee;
+  &:last-child {
+    border-bottom: none;
+  }
+  &:hover {
+    background-color: #eee;
+  }
+}
+.userMenu {
+  position: relative;
+  padding-right: 26px;
+  cursor: pointer;
+}
+.userMenu_list {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+  width: 224px;
+  font-size: 16px;
+  font-weight: bold;
+  overflow: hidden;
+}
+.userMenu_list_item {
+  padding: 11px 20px;
+  border-bottom: 1px solid #eee;
+  > a {
+    color: #000;
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+  &:hover {
+    background-color: #eee;
+  }
+}
+.function_userIcon {
+  width: 44px;
+  height: 44px;
+  background-size: cover;
+  border-radius: 22px;
+  box-shadow:0px 0px 1px 1px rgba(0,0,0,0.1) inset;
+  &:after {
+    content: "";
+    background-image: url('~assets/img/common/arrow-bottom.svg');
+    width: 10px;
+    height: 6px;
+    background-size: 10px 6px;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 19px;
+  }
+}