polished#rgba JavaScript Examples

The following examples show how to use polished#rgba. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TimetableLayout.jsx    From ResoBin with MIT License 6 votes vote down vote up
Container = styled.div`
  display: grid;
  grid-template-rows:
    [tracks] 2rem
    ${rows.map(({ id, title }, index) => `[${id}] 1fr `)};
  grid-template-columns:
    [times] 2.5rem
    ${cols.map(({ id, title }, index) => `[${id}] 1fr `)};
  margin-bottom: 1rem;
  padding: 0.75rem;
  overflow-x: scroll;
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};

  > div {
    box-shadow: inset -1px -1px 0 ${({ theme }) => rgba(theme.primary, 0.1)};
  }
`
Example #2
Source File: components.js    From idena-web with MIT License 6 votes vote down vote up
function ThumbnailOverlay({option, isQualified, hasIrrelevantWords}) {
  return (
    <Fill
      bg={
        // eslint-disable-next-line no-nested-ternary
        isQualified
          ? hasIrrelevantWords
            ? transparentize(0.1, theme.colors.danger)
            : rgba(87, 143, 255, 0.9)
          : rgba(89, 89, 89, 0.95)
      }
      borderRadius={['16px', '12px']}
    >
      {option && <FiCheck size={rem(20)} color={theme.colors.white} />}
    </Fill>
  )
}
Example #3
Source File: components.js    From idena-web with MIT License 6 votes vote down vote up
function FailedThumbnail() {
  return (
    <Fill
      bg={rgba(89, 89, 89, 0.95)}
      borderRadius={['16px', '12px']}
      css={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <FiXCircle size={rem(20)} color={theme.colors.white} />
    </Fill>
  )
}
Example #4
Source File: theme-context.js    From cards with MIT License 6 votes vote down vote up
export default function ThemeContext () {
  const [colorMode, setColorMode] = useState(getColorMode())
  const editorTheme = editorThemes[colorMode].colors

  const theme = useMemo(() => {
    const bg = editorTheme['editor.background']
    const color = editorTheme['editor.foreground']
    const contrast = editorTheme['editorCursor.foreground']
    const borderColor = rgba(color, 0.1)
    const iconColor = rgba(color, 0.75)
    return { bg, borderColor, color, contrast, iconColor }
  }, [colorMode])

  return { colorMode, changeTheme: () => nextTheme(setColorMode), theme }
}
Example #5
Source File: dark.js    From VTour with MIT License 6 votes vote down vote up
dark = deepFreeze({
  global: {
    colors: colors,
    drop: {
      background: '#333333'
    },
    focus: {
      border: {
        color: css(["", ";"], function (props) {
          return normalizeColor('focus', props.theme);
        }),
        width: '2px'
      }
    },
    font: {
      family: 'Arial'
    },
    input: {
      weight: 700
    }
  },
  anchor: {
    color: 'control'
  },
  layer: {
    background: backgroundColor,
    overlay: {
      background: rgba(48, 48, 48, 0.5)
    }
  }
})
Example #6
Source File: dark.js    From VTour with MIT License 6 votes vote down vote up
colors = {
  active: rgba(102, 102, 102, 0.5),
  background: backgroundColor,
  black: '#000000',
  brand: '#FD6FFF',
  control: {
    dark: '#FFCA58',
    light: '#403216'
  },
  focus: '#FFCA58',
  icon: {
    dark: '#f8f8f8',
    light: '#666666'
  },
  placeholder: '#AAAAAA',
  text: {
    dark: '#eeeeee',
    light: '#444444'
  },
  white: '#FFFFFF'
}
Example #7
Source File: DragNDrop.jsx    From ResoBin with MIT License 6 votes vote down vote up
UploadBox = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16rem;
  margin-bottom: 1rem;
  padding: 3rem 1rem;
  color: ${({ theme, error }) => (error ? '#f34a4a' : theme.textColorInactive)};
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  outline: 3px dashed ${({ theme }) => rgba(theme.textColorInactive, 0.4)};
  outline-offset: -0.75rem;
  cursor: pointer;

  h2 {
    font-size: ${fontSize.responsive.md};
  }

  &:hover {
    color: ${({ theme }) => theme.textColor};
    background: ${({ theme }) => lighten(0.1, theme.secondary)};
    outline-color: ${({ theme }) => theme.textColorInactive};
  }
`
Example #8
Source File: DragNDrop.jsx    From ResoBin with MIT License 6 votes vote down vote up
UploadBoxSub = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 15rem;
  height: initial;
  padding: 1.5rem 1rem;
  color: ${({ theme, error }) => (error ? '#f34a4a' : theme.textColorInactive)};
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  outline: 3px dashed ${({ theme }) => rgba(theme.textColorInactive, 0.4)};
  outline-offset: -0.75rem;
  cursor: pointer;

  h2 {
    font-size: ${fontSize.static.xs};
    text-align: center;
  }

  &:hover {
    color: ${({ theme }) => theme.textColor};
    background: ${({ theme }) => lighten(0.1, theme.secondary)};
    outline-color: ${({ theme }) => theme.textColorInactive};
  }

  @media ${device.max.xs} {
    width: 100%;
    height: 11rem;
    padding: 1rem;
  }
`
Example #9
Source File: CourseSearch.jsx    From ResoBin with MIT License 6 votes vote down vote up
SearchContainer = styled.div`
  position: sticky;
  top: ${({ theme }) => theme.headerHeight};
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  background: linear-gradient(
    0deg,
    ${({ theme }) => rgba(theme.darksecondary, 0)} 0%,
    ${({ theme }) => rgba(theme.darksecondary, 0)} 30%,
    ${({ theme }) => rgba(theme.darksecondary, 1)} 50%
  );
`
Example #10
Source File: CourseResourceItem.jsx    From ResoBin with MIT License 6 votes vote down vote up
ItemInfo = styled.figcaption`
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding: 0.5rem;
  color: ${({ theme }) => theme.textColorInactive};
  background: ${({ theme }) => rgba(theme.darksecondary, 0.95)};
`
Example #11
Source File: TripsNone.js    From airdnd-frontend with MIT License 6 votes vote down vote up
TripsNone = () => {
  console.log('blajkjbkajlds');
  return (
    <TripsNoneWrapper>
      <TripsNoneText>
        다시 여행을 떠나실 준비가 되면 에어비앤비가 도와드리겠습니다.{' '}
        <Link to="/help" target="_blank">
          <StButton btnType="underlined" padding="0" fontSize="1.5rem">
            자세히 알아보기
          </StButton>
        </Link>
      </TripsNoneText>
      <TripsNoneMainWrapper>
        <img src="https://etc-corporate.org/uploads/2019/05/Airbnb_Logo_B%C3%A9lo.svg_.png" />
      </TripsNoneMainWrapper>
      <TripsNoneButtonWrapper>
        <Link to="/">
          <Button
            color="black"
            padding="1.5rem 2.3rem"
            border="none"
            hover={`background: ${rgba(theme.color.black, 0.9)}`}
          >
            에어비엔비 둘러보기
          </Button>
        </Link>
      </TripsNoneButtonWrapper>
    </TripsNoneWrapper>
  );
}
Example #12
Source File: TimetableShareButton.jsx    From ResoBin with MIT License 6 votes vote down vote up
UrlContainer = styled(Input)`
  color: ${({ theme }) => theme.textColor};
  background: ${({ theme }) => theme.darksecondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  border: 1px solid ${({ theme }) => theme.placeholder};
  font-size: 1rem;
  font-weight: 500;
  overflow-x: scroll;
  white-space: nowrap;
  height: 2rem;

  &:hover,
  &:focus {
    border-color: ${({ theme }) => theme.logo};
    box-shadow: 0 0 1rem ${({ theme }) => rgba(theme.logo, 0.2)};
  }

  &.ant-input {
    width: 100%;
  }
`
Example #13
Source File: Heart.js    From airdnd-frontend with MIT License 6 votes vote down vote up
defaultColorStyles = css`
  ${({ bgColor, stroke, ckType, checked, theme }) =>
    ckType
      ? checked
        ? css`
            color: ${theme.color.main};
            & > svg > path {
              stroke: ${theme.color.white};
            }
          `
        : css`
            color: ${rgba(theme.color.black, 0.5)};
            & > svg > path {
              stroke: ${theme.color.white};
            }
          `
      : css`
          color: ${theme.color[bgColor]};
          & > svg > path {
            stroke: ${theme.color[stroke]};
          }
        `}
`
Example #14
Source File: TimetableShareButton.jsx    From ResoBin with MIT License 6 votes vote down vote up
StyledButton = styled(Button)`
  border: 1px solid ${({ theme }) => theme.placeholder};
  border-radius: ${({ theme }) => theme.borderRadius};
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: ${({ theme }) => theme.darksecondary};
  color: ${({ theme }) => theme.textColor};

  &:hover,
  &:focus {
    background: ${({ theme }) => theme.logo};
    color: ${({ theme }) => theme.darksecondary};
    border-color: ${({ theme }) => theme.logo};
    box-shadow: 0 0 1rem ${({ theme }) => rgba(theme.logo, 0.2)};
  }
`
Example #15
Source File: ButtonSquare.jsx    From ResoBin with MIT License 6 votes vote down vote up
ButtonSquare = styled(Button)`
  ${buttonStyles}

  background: ${({ theme }) => theme.secondary};

  &.ant-btn-primary {
    background: ${({ theme }) => theme.logo};
  }

  .anticon.anticon-loading.anticon-spin {
    padding: 0;
  }

  &:hover,
  &:active {
    opacity: 0.9;
  }

  &:active {
    box-shadow: inset 0 0 5px ${rgba('#000', 0.4)};
  }
`
Example #16
Source File: ButtonSquare.jsx    From ResoBin with MIT License 6 votes vote down vote up
ButtonSquareLink = styled(Link)`
  ${buttonStyles}

  padding: 0.25rem 0.75rem;
  background: ${({ type, theme }) =>
    type === 'primary' ? theme.logo : theme.darksecondary};

  &:hover,
  &:active {
    background: ${({ type, theme }) =>
      type === 'primary' ? theme.logoHover : theme.darksecondaryHover};
    box-shadow: inset 0 0 5px ${rgba('#000', 0.1)};
  }
`
Example #17
Source File: Pagination.jsx    From ResoBin with MIT License 6 votes vote down vote up
baseStyles = css`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0.25rem;
  font-size: 1rem;
  background: transparent;
  border: none;
  border-radius: ${({ theme }) => theme.borderRadius};

  &:hover {
    background: ${({ theme }) => rgba(theme.primary, 0.1)};
  }
`
Example #18
Source File: issue-card.js    From semana-hacktoberfest with MIT License 6 votes vote down vote up
Info = styled.span`
  font-size: 1.4rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};

  &:not(:last-child) {
    margin-right: 2rem;
  }
`
Example #19
Source File: issue-card.js    From semana-hacktoberfest with MIT License 5 votes vote down vote up
Text = styled.p`
  font-size: 1.6rem;
  line-height: 1.5;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};
`
Example #20
Source File: text-box.js    From semana-hacktoberfest with MIT License 5 votes vote down vote up
Text = styled.p`
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1.7;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};
`
Example #21
Source File: header.js    From semana-hacktoberfest with MIT License 5 votes vote down vote up
NavItem = styled.a`
  text-decoration: none;
  font-weight: 600;
  font-size: 1.6rem;
  margin-right: 2.5rem;
  position: relative;
  transition: color .25s ease;
  color: ${({ theme }) => theme.colors.text};


  &:last-child {
    padding-left: 2.5rem;
    color: ${({ theme }) => theme.colors.primary};

    &:focus,
    &:hover {
      color: ${({ theme }) => darken(0.15, theme.colors.primary)};
    }

    ${media.greaterThan('md')`
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: .1rem;
        background-color: ${({ theme }) => rgba(theme.colors.text, 0.5)};
      }
    `}

    ${media.lessThan('md')`
      padding-right: 0;
      font-size: 1.2rem;
      white-space: nowrap;
    `}
  }

  &:not(:last-child) {
    ${media.lessThan('lg')`
      display: none;
    `}

    &:before {
      content: ' ';
      position: absolute;
      height: .1rem;
      width: 0;
      bottom: -.5rem;
      left: 0;
      background: ${({ theme }) => theme.colors.text};
      transform: rotate(-1deg);
      transition: 100ms;
    }

    &:hover{
      &:before  {
        width: 100%;
      }
    }
  }
`
Example #22
Source File: Card.jsx    From ResoBin with MIT License 5 votes vote down vote up
StyledCard = styled(Card)`
  .ant-card-body {
    display: flex;
    background: ${({ theme }) => rgba(theme.darksecondary, 0.5)};
    border-radius: ${({ theme }) => theme.borderRadius};
    padding: 0.75rem;
  }

  &.ant-card-hoverable {
    transition: 100ms;

    &:hover {
      background: rgb(0 0 0 / 30%);
      border-radius: ${({ theme }) => theme.borderRadius};
    }
  }

  &.ant-card-bordered {
    background: transparent;
    border: 0;
  }

  .ant-card-meta {
    width: 100%;

    .ant-card-meta-title {
      color: ${({ theme }) => theme.textColor};
      font-size: 1rem;
    }

    &-description {
      color: ${({ theme }) => theme.placeholder};
      font-weight: 500;
      font-size: 0.875rem;

      b {
        color: ${({ theme }) => theme.logo};
        font-weight: 600;
      }
    }
  }

  .ant-avatar {
    width: 3rem;
    height: 3rem;
  }
`
Example #23
Source File: Pagination.jsx    From ResoBin with MIT License 5 votes vote down vote up
StyledPagination = styled(Pagination)`
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;

  .ant-pagination-prev,
  .ant-pagination-next {
    display: flex;
    align-items: center;

    .ant-pagination-item-link {
      ${baseStyles}

      color: ${({ theme }) => theme.primary};
      background: transparent;
    }
  }

  .ant-pagination-disabled {
    display: none;
  }

  .ant-pagination-item {
    ${baseStyles}

    font-weight: 600;

    &-active {
      border: 2px solid ${({ theme }) => rgba(theme.primary, 0.7)};
    }

    a {
      color: ${({ theme }) => theme.primary};
      font-weight: 600;
      font-size: 0.875rem;
    }
  }

  .ant-pagination-jump-next,
  .ant-pagination-jump-prev {
    ${baseStyles}

    .ant-pagination-item-link-icon {
      color: ${({ theme }) => theme.primary};
      font-size: 0.75rem;
    }

    .ant-pagination-item-ellipsis {
      position: absolute;
      top: -4px;
      right: 0;
      left: -4px;
      color: ${({ theme }) => theme.primary};
      font-size: 0.75rem;
    }
  }

  .anticon {
    display: flex;
    align-items: center;
  }
`
Example #24
Source File: Tabs.jsx    From ResoBin with MIT License 5 votes vote down vote up
StyledTabs = styled(Tabs)`
  color: ${({ theme }) => theme.textColor};

  .ant-tabs-nav {
    margin-bottom: 0;

    .ant-tabs-ink-bar {
      height: 3px;
      background: ${({ theme }) => theme.textColor};
    }
  }

  .ant-tabs-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: ${({ tabwidth }) => tabwidth};
    height: ${({ tabheight }) => tabheight};
    padding: 0;
    font-size: 0.75rem;
    border-top-left-radius: ${({ theme }) => theme.borderRadius};
    border-top-right-radius: ${({ theme }) => theme.borderRadius};

    & + .ant-tabs-tab {
      margin: 0;
    }

    .ant-tabs-tab-btn {
      color: ${({ theme }) => theme.textColor};
    }

    /* Disabled button */
    &.ant-tabs-tab-disabled {
      .ant-tabs-tab-btn,
      .ant-tabs-tab-btn:active {
        color: ${({ theme }) => rgba(theme.textColor, 0.2)};
      }
    }

    /* Normal button */
    &:not(.ant-tabs-tab-disabled) {
      &:hover {
        color: ${({ theme }) => darken(0.2, theme.textColor)};
      }

      &.ant-tabs-tab-active {
        color: ${({ theme }) => theme.textColor};
        background: ${({ theme }) => theme.darksecondary};
      }

      &:not(.ant-tabs-tab-active):hover {
        background: ${rgba('#000000', 0.15)};
      }
    }
  }
`
Example #25
Source File: MsgDetailLanguageModal.js    From airdnd-frontend with MIT License 5 votes vote down vote up
MsgDetailLanguageModal = ({ modalState, onClickCloseModal }) => {
  return (
    <StPdfModal
      width="55rem"
      height="fit-content"
      modalState={modalState}
      setModalState={onClickCloseModal}
      header
    >
      <StPdfModalWrapper>
        <StPdfModalTitle>언어를 선택하세요</StPdfModalTitle>
        <StPdfModalSub>
          예약 세부정보가 저장되는 언어입니다. 나중에 인쇄할 수 있습니다.
        </StPdfModalSub>
        <StPdfModalRadioWrapper>
          <StPdfModalLabel>
            <StPdfModalText>선호하는 언어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" checked={true} />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>중국어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>영어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>프랑스어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>독일어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>이탈리아어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>일본어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>한국어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>포르투갈어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>러시아어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>스페인어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
        </StPdfModalRadioWrapper>
      </StPdfModalWrapper>
      <StModalFooter>
        <StForm method="get" action={scheduleDoc}>
          <Button
            type="submit"
            color="black"
            width="100%"
            height="4.5rem"
            hover={`background: ${rgba(theme.color.black, 0.9)}`}
            onClick={onClickCloseModal}
          >
            저장
          </Button>
        </StForm>
      </StModalFooter>
    </StPdfModal>
  );
}
Example #26
Source File: Button.styles.js    From cybsec with GNU Affero General Public License v3.0 5 votes vote down vote up
styles = theme => ({
  root: {
    position: 'relative',
    display: 'inline-block',
    margin: 0,
    border: 'none',
    outline: 'none',
    padding: 0,
    textTransform: 'uppercase',
    textAlign: 'center',
    lineHeight: 1,
    fontSize: 14,
    color: theme.color.secondary.main,
    background: 'transparent',
    cursor: 'pointer',
    transition: 'color 250ms ease-out',

    '&:hover, &:focus': {
      color: theme.color.tertiary.main,

      '& $background': {
        backgroundColor: rgba(theme.color.tertiary.main, 0.125)
      },
      '& $path': {
        stroke: rgba(theme.color.tertiary.dark, 0.5)
      }
    }
  },
  background: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: rgba(theme.color.secondary.main, 0.125),
    transition: 'background 250ms ease-out',
    opacity: ({ energy }) => energy.animate ? 0 : 1
  },
  frame: {
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
  svg: {
    display: 'block',
    width: '100%',
    height: '100%'
  },
  path: {
    fill: 'none',
    stroke: rgba(theme.color.secondary.dark, 0.5),
    strokeWidth: 2,
    vectorEffect: 'non-scaling-stroke',
    transition: 'stroke 250ms ease-out',
    opacity: ({ energy }) => energy.animate ? 0 : 1
  },
  main: {
    position: 'relative',
    padding: [8, 32]
  }
})
Example #27
Source File: Footer.js    From cybsec with GNU Affero General Public License v3.0 5 votes vote down vote up
draw () {
    const { theme } = this.props;
    const { small } = getViewportRange();
    const width = this.element.offsetWidth;
    const height = this.element.offsetHeight;

    this.svg.setAttribute('width', width);
    this.svg.setAttribute('height', height);

    const boxWidth = Math.min(1000, width);
    const offset = small ? 5 : 20;
    const pit = small ? 5 : 10;

    const x1 = ((width - boxWidth) / 2);
    const x2 = ((width - boxWidth) / 2) + offset;
    const x3 = x2 + (boxWidth / 2);
    const x4 = x2 + boxWidth - (offset * 2);
    const x5 = x4 + offset;

    const backgroundColor = rgba(theme.color.background.dark, theme.color.alpha);
    const lineColor = rgba(theme.color.primary.dark, 0.5);

    const ground = {
      d: `M0,0 L${x1},0 L${x2},${pit} L${x4},${pit} L${x5},0 L${width},0 L${width},${height} L0,${height} L0,0`,
      fill: backgroundColor,
      stroke: backgroundColor
    };
    const line1 = {
      d: `M0,0 L${x1},0`,
      stroke: lineColor
    };
    const slash1 = {
      d: `M${x1},0 L${x2},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line2 = {
      d: `M${x2},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const line3 = {
      d: `M${x4},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const slash2 = {
      d: `M${x5},0 L${x4},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line4 = {
      d: `M${width},0 L${x5},0`,
      stroke: lineColor
    };

    const shapes = [ground, line1, slash1, line2, line3, slash2, line4];

    this.setState({ shapes });
  }
Example #28
Source File: Header.js    From cybsec with GNU Affero General Public License v3.0 5 votes vote down vote up
draw () {
    const { theme } = this.props;
    const { small } = getViewportRange();
    const width = this.element.offsetWidth;
    const height = this.element.offsetHeight;

    this.svg.setAttribute('width', width);
    this.svg.setAttribute('height', height);

    const boxWidth = Math.min(1000, width);
    const offset = small ? 5 : 20;
    const pit = height - (small ? 5 : 10);
    const double = small ? 0 : 12;

    const x1 = ((width - boxWidth) / 2);
    const x2 = ((width - boxWidth) / 2) + offset;
    const x3 = x2 + (boxWidth / 2);
    const x4 = x2 + boxWidth - (offset * 2);
    const x5 = x4 + offset;

    const backgroundColor = rgba(theme.color.background.dark, theme.color.alpha);
    const lineColor = rgba(theme.color.primary.dark, 0.5);

    const ground = {
      d: `M0,0 L${width},0 L${width},${height} L${x5},${height} L${x4},${pit} L${x3},${pit} L${x2},${pit} L${x1},${height} L0,${height} L0,0`,
      fill: backgroundColor,
      stroke: backgroundColor
    };
    const line1 = {
      d: `M0,${height} L${x1},${height}`,
      stroke: lineColor
    };
    const slash1 = {
      d: `M${x1},${height} L${x2},${pit} M${x1 - double},${height} L${x2 - double},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line2 = {
      d: `M${x2 - double},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const line3 = {
      d: `M${x4 + double},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const slash2 = {
      d: `M${x5},${height} L${x4},${pit} M${x5 + double},${height} L${x4 + double},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line4 = {
      d: `M${width},${height} L${x5},${height}`,
      stroke: lineColor
    };

    const shapes = [ground, line1, slash1, line2, line3, slash2, line4];

    this.setState({ shapes });
  }
Example #29
Source File: Main.styles.js    From cybsec with GNU Affero General Public License v3.0 5 votes vote down vote up
styles = theme => ({
  root: {
    flex: 1,
    position: 'relative',
    display: 'flex',
    margin: [0, 'auto'],
    maxWidth: 1000,
    width: '100%'
  },
  frame: {
    position: 'absolute',
    zIndex: 1,
    left: 10,
    right: 10,
    top: 0,
    bottom: 0,
    outline: `2px solid ${theme.color.background.dark}`,
    outlineOffset: 2,
    backgroundColor: rgba(theme.color.background.dark, theme.color.alpha)
  },
  content: {
    position: 'relative',
    zIndex: 2,
    flex: 1,
    margin: [10, 10, 10, 20],
    padding: [0, 10, 0, 0],

    '& > *:last-child, & > article > *:last-child': {
      marginBottom: 0
    }
  },

  '@media screen and (min-width: 768px)': {
    root: {
      minHeight: 1
    },
    frame: {
      left: 20,
      right: 20,
      top: 0,
      bottom: 0
    },
    content: {
      overflowX: 'hidden',
      overflowY: 'auto',
      margin: [30, 40, 30, 50],
      padding: [0, 10, 0, 0],

      '& img': {
        maxWidth: '80%'
      }
    }
  },

  '@media screen and (min-width: 1025px)': {
    content: {
      margin: [50, 60, 50, 70],
      padding: [0, 10, 0, 0]
    }
  }
})