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

package/src/components/molecules/articleCard/index.styled.tsx

@@ -1,391 +0,0 @@
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-import { ThemeProps } from '../../../misc/theme'
-
-export const StyledExpertName = styled.h6`
-  color: ${(props: ThemeProps) => props.theme.colors.gray600};
-  font-size: 14px;
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  line-height: 22px;
-`
-
-export const StyledAnchor = styled.a`
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  color: inherit;
-  text-decoration: none;
-
-  * {
-    pointer-events: none;
-  }
-`
-
-export const StyledCard = styled.article`
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 16px 16px 16px 0;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  cursor: pointer;
-
-  [data-event-category] > * {
-    pointer-events: none;
-  }
-
-  .content {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-
-    .inner-content {
-      display: flex;
-      flex-direction: column;
-      p {
-        display: flex;
-        align-items: center;
-      }
-
-      a {
-        text-decoration: none;
-      }
-
-      .bookmark {
-        width: 18px;
-        height: 18px;
-      }
-      //.title,
-      .title a {
-        display: -webkit-box;
-        overflow: hidden;
-        margin-top: 2px;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-      }
-
-      .text {
-        display: -webkit-box;
-        overflow: hidden;
-        max-width: 100%;
-        margin-top: 4px;
-        //margin-bottom: 26px;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-      }
-    }
-  }
-
-  .footer {
-    display: flex;
-
-    .author {
-      width: calc(100% - 20px);
-    }
-
-    .bookmark {
-      display: flex;
-      width: 12px;
-      height: 16px;
-      margin-left: 8px;
-      cursor: pointer;
-
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .banner {
-    position: relative;
-    min-width: 100px;
-    max-width: 100px;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
-    border-radius: 6px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 6px;
-      object-fit: cover;
-      object-position: center;
-      pointer-events: none;
-    }
-  }
-  .shoppable {
-    position: absolute;
-    bottom: 4px;
-    left: 6px;
-  }
-
-  &[data-size='sm'][data-direction='horizontal'] {
-    padding: 20px 0;
-
-    .label {
-      margin-bottom: 0;
-    }
-    .banner {
-      width: 100px;
-      height: 100px;
-      margin: 0 16px 0 0;
-
-      ${MediaQueries.mbDown} {
-        min-width: 100px;
-        max-width: 100px;
-        height: 100px;
-        margin: 0 16px 0 0;
-      }
-    }
-
-    .text {
-      display: none;
-    }
-  }
-
-  &[data-direction='horizontal'] {
-    .footer {
-      margin-top: auto;
-    }
-  }
-
-  &[data-size='md'][data-direction='horizontal'] {
-    padding: 16px 0;
-
-    .banner {
-      min-width: 200px;
-      max-width: 200px;
-      height: 150px;
-      margin: 0 24px 0 0;
-    }
-
-    ${MediaQueries.mbDown} {
-      .text {
-        display: none;
-      }
-
-      .banner {
-        min-width: 100px;
-        max-width: 100px;
-        height: 100px;
-        margin: 0 16px 0 0;
-      }
-
-      .specialty {
-        display: none;
-      }
-    }
-  }
-
-  &[data-direction='vertical'] {
-    flex-direction: column;
-    padding: 0 0 0 0;
-
-    .label {
-      margin-top: 16px;
-      display: flex;
-    }
-
-    &[data-size='sm'] {
-      .banner {
-        height: 150px;
-      }
-
-      .text {
-        display: none;
-      }
-
-      .title {
-        margin-top: 0;
-        margin-bottom: 12px;
-      }
-    }
-
-    &[data-size='lg'] {
-      .banner {
-        max-height: 312px;
-
-        ${MediaQueries.mbDown} {
-          max-height: 192px;
-        }
-      }
-
-      .text {
-        display: -webkit-box;
-        margin-top: 8px;
-        margin-bottom: 16px;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        word-break: break-word;
-      }
-    }
-
-    .banner {
-      min-width: 100%;
-      height: 468px;
-      margin: 0;
-    }
-  }
-
-  &[data-is-expert] {
-    .inner-content label.text {
-      display: none;
-    }
-
-    .specialty > [data-tag='h6'] {
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 19px;
-    }
-
-    &[data-size='md'] .footer .author .avatar {
-      margin-right: 8px;
-    }
-
-    ${MediaQueries.tdUp} {
-      &[data-size='md'] .footer .author .avatar {
-        width: 40px;
-        height: 40px;
-        margin-right: 16px;
-      }
-    }
-
-    .title {
-      margin-bottom: 16px;
-      ${MediaQueries.mbDown} {
-        margin-bottom: 8px;
-      }
-    }
-
-    &[data-direction='horizontal'] {
-      .footer {
-        margin-top: auto;
-      }
-    }
-  }
-`
-
-export const StyledAuthor = styled.div`
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 8px;
-
-  .author {
-    display: flex;
-    align-items: center;
-
-    .avatar,
-    .expert-avatar {
-      flex-shrink: 0;
-
-      img {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-    }
-
-    .name {
-      font-weight: 600;
-    }
-
-    .poster {
-      display: flex;
-      align-items: center;
-      white-space: pre-wrap;
-      &[data-is-disabled-url='true'] {
-        cursor: default;
-        a {
-          pointer-events: none;
-        }
-      }
-
-      p {
-        display: -webkit-box;
-        overflow: hidden;
-        //font-size: 11px;
-        -webkit-box-orient: vertical;
-        font-weight: 400;
-        -webkit-line-clamp: 3;
-
-        a {
-          color: ${(props: ThemeProps) => props.theme.colors.gray800};
-          text-decoration: none;
-        }
-
-        span:not(.name) {
-          color: ${(props: ThemeProps) => props.theme.colors.gray400};
-        }
-      }
-    }
-
-    .expert {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-
-      a {
-        text-decoration: none;
-      }
-
-      &[data-is-disabled-url='true'] {
-        cursor: default;
-        a {
-          pointer-events: none;
-        }
-      }
-    }
-
-    .avatar {
-      width: 24px;
-      height: 24px;
-      margin-right: 8px;
-
-      ${MediaQueries.mbDown} {
-        margin-right: 4px;
-      }
-
-      &[data-size='lg'] {
-        ${MediaQueries.tdUp} {
-          width: 32px;
-          height: 32px;
-          margin-right: 12px;
-        }
-      }
-    }
-
-    .expert-avatar {
-      ${MediaQueries.mbUp} {
-        width: 40px;
-        height: 40px;
-        margin-right: 16px;
-      }
-
-      ${MediaQueries.mbDown} {
-        width: 32px;
-        height: 32px;
-        margin-right: 8px;
-      }
-
-      &[data-size='lg'] {
-        ${MediaQueries.mbUp} {
-          width: 64px;
-          height: 64px;
-          margin-right: 16px;
-        }
-
-        ${MediaQueries.mbDown} {
-          width: 40px;
-          height: 40px;
-          margin-right: 16px;
-        }
-      }
-    }
-  }
-`