@procraft/widget-order/src/CourseItem/styles.ts

Order widget for landing

import styled from 'styled-components'
import { ContainerStyled } from '../components/Container/styles'
import { OldPriceStyled } from '../components/OldPrice/styles'
import { TypographyStyled } from '../components/Typography/styles'
import { SubscriptionsStyled } from './Subscriptions/styles'

export const WidgetStyled = styled.div`
  /* border-radius: 16px; */

  /* Inside Auto Layout */

  flex: 1;
  order: 0;
  /* margin: 0px 30px; */

  height: 100%;
  width: 100%;
  border: 1px solid #dae7f4;
  border-radius: 16px;
  overflow: hidden;
  background: #f1f5f9;

  display: flex;
  flex-direction: column;

  ${TypographyStyled} {
    &.title {
      font-weight: 600;
      font-size: 21px;
      text-align: center;
      margin: 0 0 10px;
    }

    &.free {
      font-size: 18px;
    }

    &.altItemText {
      font-weight: 600;
    }
  }

  ${ContainerStyled} {
    &.items {
      width: auto;
      font-size: 15px;
    }

    &.placesLeft {
      text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 13px;
      padding: 5px 0;
      margin: 5px 0;
    }

    &.buy {
      margin-top: 15px;
      text-align: center;

      ${TypographyStyled} {
        color: #333333;
        opacity: 0.5;
      }

      a.buy-link {
        button {
          width: 100%;
          font-weight: 600;
          font-size: 14px;
          /* background: #d8d8d8; */
          border-radius: 8px;
          padding: 12px;
          line-height: 20px;
        }
      }
    }
  }
`

export const NavigationStyled = styled.div`
  /* Навигация */
  /* position: static; */
  /* width: 352px;
  height: 22px;
  left: 0px;
  top: 0px; */

  /* Inside Auto Layout */

  /* flex: none; */
  /* order: 0; */
  /* flex-grow: 0; */
  /* margin: 0px 16px; */

  /* position: absolute; */
  /* width: 352px;
  height: 22px; */
  /* left: 0px;
  top: 0px; */

  background: #233d78;
  /* border-radius: 16px 16px 0 0; */

  /**
    Custom
   */
  text-align: center;
  flex: none;
  width: 100%;
  padding: 3px;

  ${TypographyStyled} {
    /* Sidebar / Section Title */
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    /* identical to box height */

    letter-spacing: 0.05em;
    text-transform: uppercase;

    /* Sidebar / Section Title */

    color: white;
    padding: 0;
    margin: 0;
  }
`

export const BoxStyled = styled.div`
  /* Box */

  /* Auto Layout */

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px;

  /* position: static; */
  /* width: 352px;
  height: 498px; */
  /* left: 0px;
  top: 0px; */

  /* Inside Auto Layout */

  flex: 1;
  order: 0;
  /* margin: 8px 0px; */

  width: 100%;

  border: 1px solid ref;

  ${OldPriceStyled} {
    margin: 6px auto 16px;
  }

  ${SubscriptionsStyled} {
    margin-top: 10px;
  }
`