@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0-beta-8

package/src/components/organisms/navigationLayout/menuServiceList/index.styled.tsx

@@ -1,460 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled, { StyledComponent } from 'styled-components'
-
-import { Z_INDEX } from '../constants'
-
-export const StyledMasterMenuContainer = styled.div`
-  position: fixed;
-  z-index: 200;
-  top: 0;
-  width: 100vw;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: scroll;
-
-  &[data-opened='false'] {
-    left: -100%;
-    //transition: left 0.1s;
-
-    animation-duration: 0.2s;
-    animation-name: leftDisappears;
-  }
-
-  &[data-opened='undefined'] {
-    left: -100%;
-  }
-
-  &[data-opened='true'] {
-    left: 0;
-    //transition: left 0.1s;
-
-    animation-duration: 0.2s;
-    animation-name: leftAppears;
-  }
-
-  &[data-sub-level-opened='false'] {
-    right: -100%;
-    //transition: right 0.1s;
-
-    animation-duration: 0.2s;
-    animation-name: rightDisappears;
-  }
-
-  &[data-sub-level-opened='undefined'] {
-    right: -100%;
-  }
-
-  &[data-sub-level-opened='true'] {
-    right: 0;
-    //transition: right 0.1s;
-
-    animation-duration: 0.2s;
-    animation-name: rightAppears;
-  }
-`
-
-export const StyledMenuContainer = styled.div`
-  position: relative;
-  top: 0;
-
-  display: flex;
-  width: 100vw;
-  min-height: 100%;
-  flex-direction: column;
-
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  overflow-x: hidden;
-
-  &[data-type='category'] {
-    z-index: 300;
-
-    // momentum scrolling IOS will display under layer if not doing this
-    &[data-is-sub-category-opened='true'] {
-      animation-duration: 0.2s;
-      animation-name: fading;
-    }
-  }
-
-  &[data-type='sub-category'] {
-    z-index: 400;
-  }
-
-  .category-button {
-    border: none;
-  }
-`
-
-export const StyledCategoryButtonWrapper = styled.div`
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  width: 100%;
-  height: 72px;
-  align-items: flex-start;
-  justify-content: center;
-
-  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
-
-  .button-image {
-    stroke-color: blue;
-  }
-
-  &[data-site-type='marryBaby'] {
-    padding: 0 16px;
-    .category-button {
-      width: 100%;
-      height: 48px;
-    }
-  }
-`
-
-export const StyledScrollingCategories = styled.div`
-  display: flex;
-
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-
-  padding-top: 0px;
-  //position: absolute;
-
-  //top: 0px;
-
-  //z-index: -1;
-
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-
-  &[data-type='sub-level'] {
-    padding: 4px 16px 16px;
-    background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  }
-
-  & > div:first-child {
-    justify-self: flex-start;
-  }
-
-  &[data-with-search-input='false'] {
-    //padding-top: 64px;
-  }
-`
-
-export const StyledCardSpecialty = styled.div`
-  display: flex;
-
-  &[data-card-array-no-margin-style='true'] {
-    margin: 8px 0;
-
-    & > div {
-      width: 0;
-      flex: 1;
-      margin: 0 -1px;
-    }
-  }
-
-  &[data-card-array-no-margin-style='false'] {
-    margin: 8px -4px;
-
-    & > div {
-      flex: 1;
-      margin: 0 4px;
-    }
-  }
-`
-
-export const StyledScrollingWrapper = styled.div`
-  position: relative;
-
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  flex-direction: column;
-
-  overflow-y: scroll;
-`
-
-export const StyledScrollingContent = styled.div`
-  flex: 1;
-  padding: 16px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-`
-export const StyledFakeTopAlignment = styled.div`
-  margin-top: 64px;
-`
-
-export const StyledStickyHeader = styled.div`
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-
-  &[data-is-sub-category-opened='true'] {
-    display: none;
-  }
-
-  &[data-hide-on-search='true'] {
-    display: none;
-  }
-`
-
-export const StyledCategoryFooter = styled.div`
-  padding: 24px 0;
-`
-
-export const StyledButtonContainerWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-
-  & > div:first-child {
-    margin-right: 8px;
-  }
-`
-
-// Desktop
-export const StyledMenuPopupWrapper = styled.div`
-  position: fixed;
-  z-index: ${Z_INDEX.menuCategoryPopupWrapper};
-  top: 69px;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  background-color: transparent;
-  &[data-is-display='false'] {
-    display: none;
-  }
-`
-
-export const StyledMenuPopupContainer = styled.div`
-  z-index: ${Z_INDEX.menuCategoryPopupContainer};
-  align-items: center;
-
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral50};
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04),
-    0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
-    0px 0px 1px rgba(0, 0, 0, 0.04);
-`
-
-export const StyleMenuPopupContainer = styled.div`
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 48px 0;
-`
-
-export const StyledHealthCategoriesContainer = styled.div`
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  &[data-disabled-divider='false'] {
-    border-right: 1px solid #e4e8ec;
-  }
-`
-
-export const StyledCategoryItem = styled.div`
-  width: 20%;
-  padding-right: 16px;
-  margin-bottom: 12px;
-
-  & > a {
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-    line-height: 22px;
-  }
-
-  & > a:hover {
-    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-  }
-
-  .iconMenu {
-    display: flex;
-    align-items: center;
-
-    > .imageContainer {
-      display: flex;
-      width: 32px;
-      min-width: 32px;
-      align-items: center;
-      margin-right: 16px;
-    }
-  }
-`
-export const StyledSubCategoryItem = styled.div`
-  display: none;
-`
-
-export const StyledHealthToolItem = styled.div`
-  width: 33%;
-  height: 48px;
-  padding-right: 16px;
-  margin-bottom: 12px;
-
-  & > a {
-    display: flex;
-    align-items: center;
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-    line-height: 22px;
-
-    & > :first-child {
-      margin-right: 16px;
-    }
-  }
-
-  & > a > p:hover {
-    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-  }
-`
-
-export const StyledCategoryItemAll = styled.div`
-  display: flex;
-  align-items: center;
-
-  padding-right: 16px;
-  margin-bottom: 12px;
-  color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  line-height: 24px;
-
-  &[data-theme='marryBaby'] {
-    color: ${(props: ThemeProps) => props.theme.mbColors.pink};
-  }
-`
-
-export const StyledImageWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  margin-left: 10px;
-`
-
-export const StyledCloseWrapper = styled.div`
-  position: absolute;
-  top: 16px;
-  right: 0;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`
-
-export const StyledCloseButton: StyledComponent<
-  'div',
-  any,
-  { on?: string },
-  never
-> = styled.div`
-  display: block;
-`
-
-export const StyledAmpSidebar = styled.div`
-  .amp-sidebar {
-    width: 100vw;
-
-    background-color: ${(props: ThemeProps) => props.theme.colors.neutral50};
-  }
-
-  .categories__spotlight {
-    display: grid;
-    margin: 16px;
-    margin-bottom: 32px;
-    grid-gap: 8px;
-    grid-template-columns: 1fr 1fr;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  .categoryCard {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-    padding: 16px;
-    border-radius: 6px;
-    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-
-    svg {
-      margin-bottom: 4px;
-    }
-
-    &.active {
-      background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-      box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06),
-        0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-      color: white;
-    }
-
-    &:not(.active) {
-      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04),
-        0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    }
-  }
-
-  .amp__menu-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-
-    svg {
-      margin-left: 16px;
-    }
-
-    > div {
-      align-self: center;
-
-      &:nth-child(2) {
-        justify-self: center;
-      }
-    }
-  }
-
-  .logo {
-    margin: 22px 0;
-  }
-
-  .categories {
-    margin: 0 16px;
-
-    li {
-      display: block;
-      width: 100%;
-
-      + li {
-        border-top: 1px solid
-          ${(props: ThemeProps) => props.theme.colors.neutral100};
-      }
-
-      a {
-        display: block;
-        margin: 12px 0;
-        color: ${(props: ThemeProps) => props.theme.colors.gray800};
-        text-decoration: none;
-      }
-    }
-  }
-`
-
-export const StyledUnderLine = styled.div`
-  width: 20%;
-  height: 2px;
-
-  background-color: ${(props: ThemeProps) => props.theme.mbColors.pink};
-  border-radius: 2px;
-`
-
-export const StyledServiceListMenuSearchInputWrapper = styled.div`
-  .fake-search-input {
-    margin-bottom: 24px;
-    pointer-events: none;
-  }
-`