utils#media JavaScript Examples

The following examples show how to use utils#media. 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: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledGridWrapper = styled.div`
  position: relative;
  margin: 0 auto;
  width: 100%;

  .react-grid-placeholder {
    background-color: rgba(24, 144, 255, 0.1);
    z-index: 1;
  }

  ${media.tablet`
    max-width: 1100px;
  `}
`
Example #2
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledSubheader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

  .ant-select {
    width: 70px;
  }

  ${media.tablet`
    padding: 0 50px;
  `};
`
Example #3
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledInformation = styled.div`
  max-width: 1260px;
  margin: 10px auto;
  color: ${colors.white};
  background-color: ${colors.primaryBlue};
  padding: 10px 15px;
  border-radius: 2px;

  ${media.tablet`
    padding: 10px 130px;
  `}
`
Example #4
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledHeader = styled.header`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

  ${media.tablet`
    padding: 0 50px;
  `};
`
Example #5
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledConstantCookie = styled(Card)`
  position: fixed;
  bottom: 0;

  ${media.tablet`
    max-width: 330px;
    right: 10px;
    bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0em 0.0625em 0.1875em 0em, rgba(0, 0, 0, 0.14) 0em 0.0625em 0.0625em 0em, rgba(0, 0, 0, 0.12) 0em 0.125em 0.0625em -0.0625em;
`}
`
Example #6
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledSidebar = styled(Layout.Sider)`
  &&& {
    overflow: auto;
    height: 100vh;
    position: fixed;
    left: 0;
    transition: all 0.1s ease-in-out;
    box-shadow: rgba(17, 17, 17, 0.06) 4px 0px 8px -3px;
    display: none;
    overflow-x: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    z-index: 3;

    .ant-menu {
      border-right: 0;
    }

    .ant-menu-inline-collapsed {
      .anticon {
        font-size: 16px;
        margin: 0;
      }
    }

    ${media.tablet`
    display: block;
  `};
  }
`
Example #7
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledModal = styled(Modal)`
  p {
    &:last-child {
      margin-bottom: 0;
    }
  }

  .ant-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    button {
      width: 50%;

      div {
        white-space: pre-wrap;
      }
    }
  }

  ${media.tablet`
    .ant-modal-footer {

      button {
        width: auto;
      }
    } 
  `}
`
Example #8
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledList = styled(List)`
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.2) 0em 0.0625em 0.1875em 0em,
    rgba(0, 0, 0, 0.14) 0em 0.0625em 0.0625em 0em,
    rgba(0, 0, 0, 0.12) 0em 0.125em 0.0625em -0.0625em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .ant-spin-nested-loading {
    width: 100%;
  }

  .ant-list-header {
    width: 100%;
    padding: 5px 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    button {
      font-size: 13px;
    }
  }

  .ant-list-items {
    max-height: 350px;
    overflow-y: auto;
  }

  ${media.tablet`
    min-height: 153px;
  `}
`
Example #9
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledLayout = styled(Layout)`
  transition: all 0.1s ease-in-out;
  padding-left: 0;
  background-color: #fff;
  position: relative;

  ${media.tablet`
    padding-left: ${({ open }) => (open ? '80px' : '250px')};
  `}
`
Example #10
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledHeaderName = styled.span`
  display: none;
  margin: 0 15px;
  font-size: 19px;
  white-space: nowrap;

  ${media.tablet`
    display: ${({ open }) => (open ? 'inline-block' : 'none')};
  `}

  ${media.desktop`
    display: inline-block;
  `}
`
Example #11
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledHeaderWrapper = styled.div`
  display: flex;
  border-radius: 5px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  justify-content: space-around;
  width: 90%;

  ${media.tablet`
    width: 100%;

    button {
      padding: 0 10px;

      &:hover {
        background: rgba(0, 0, 0, 0.08);
      }
    }
  `}
`
Example #12
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledHeaderActionItemName = styled.div`
  display: none;
  color: ${colors.black};

  ${media.tablet`
    margin-left: 10px;
    display: inline-block;
  `}
`
Example #13
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledHeaderAction = styled.div`
  color: black;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  height: ${headerHeight};
  align-items: center;

  ${media.tablet`
    width: auto;
    margin-right: 55px;
  `};
`
Example #14
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledBarsOutlined = styled(BarsOutlined)`
  color: ${colors.black};
  font-size: 19px;
  display: flex;
  align-items: center;

  ${media.tablet`
    display: none;
  `}
`
Example #15
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledMenuFoldOutlined = styled(MenuFoldOutlined)`
  color: ${colors.black};
  font-size: 19px;
  display: none;
  align-items: center;
  width: 48px;
  height: 48px;
  justify-content: center;
  border-radius: 25px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

  &:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }

  ${media.tablet`
    display: flex;
  `}
`
Example #16
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledMenuUnfoldOutlined = styled(MenuUnfoldOutlined)`
  color: ${colors.black};
  font-size: 19px;
  display: none;
  align-items: center;
  width: 48px;
  height: 48px;
  justify-content: center;
  border-radius: 25px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

  &:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }

  ${media.tablet`
    display: flex;
  `}
`
Example #17
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledHeader = styled(Layout.Header)`
  display: flex;
  align-items: center;
  padding: 0 25px;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  height: ${headerHeight};
  right: 0;
  top: 0;
  transition: all 0.1s ease-in-out;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: ${colors.white};
  z-index: 3;

  ${media.tablet`
    width: ${({ open }) => (open ? '100%' : 'calc(100% - 250px)')};
  `}
`
Example #18
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledGridItem = styled.div`
  transition: 0.2s;

  &.react-draggable-dragging {
    z-index: 2;
  }

  ${media.tablet`
    cursor: ${(props) => (props['data-grid'].static ? 'default' : 'move')};
  `}
`
Example #19
Source File: styles.js    From bank-client with MIT License 6 votes vote down vote up 
StyledFooter = styled.footer`
  display: inline-block;
  color: black;
  text-align: center;
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 12px;
  white-space: nowrap;
  transition: 0.4s;

  ${media.tablet`
    opacity: ${({ collapsed }) => (collapsed ? 0 : 1)}};
    visibility: ${({ collapsed }) => (collapsed ? 'hidden' : 'visible')}};
  `};
`
Example #20
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledMark = styled.img`
  color: black;

  ${media.tablet`
    position: absolute;
    right: 25px;
  `}
`
Example #21
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
SettingsFormWrapper = styled.div`
  min-height: 497px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;

  form {
    margin: 0 auto;
    padding: 0 10px;

    &:last-child {
      padding-bottom: 15px;
    }
  }

  ${media.tablet`
    min-height: 306px;
    flex-direction: row;
    align-items: ${({ loaded }) => (loaded ? 'center' : 'end')};


    form {
      margin: 0;

      &:first-child {
        padding: 0 5px 0 10px;
      }

      &:last-child {
        padding-bottom: 0;
        padding: 0 10px 0 5px;
      }
    }
  `}

  ${media.desktop`
    form {
      margin: 0 10px;
    }
  `}
`
Example #22
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledTag = styled(Tag)`
  display: none;
  margin-left: 10px;

  ${media.tablet`
    display: inline-block;
   `}
`
Example #23
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledSubTitle = styled.div`
  padding: 24px 32px;
  line-height: 1.8;

  ${media.tablet`
    padding: 0 32px 24px;
  `}
`
Example #24
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledSteps = styled(Steps)`
  &&& {
    padding: 20px 20px 30px;

    max-width: 1260px;
    margin: 0 auto;
    flex-direction: row;

    .ant-steps-item {
      display: flex;
      align-items: center;
      justify-content: center;

      .ant-steps-item-icon {
        margin-right: 0;
      }

      .ant-steps-item-content {
        display: none;
      }
    }

    ${media.phone`
      .ant-steps-item {
        &:last-child {
          flex: 1;
        }
      }
    `}

    ${media.tablet`
      padding: 20px 50px 30px;

      .ant-steps-item {
        display: inline-block;

        &:last-child {
          flex: none;
        }

        .ant-steps-item-icon {
          margin: 0 8px 0 0;
        }

        .ant-steps-item-content {
          display: inline-block;
        }
      }
    `}
  }
`
Example #25
Source File: styles.js    From bank-client with MIT License 4 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  html,
  body {
    height: 100%;
    width: 100%;
    overscroll-behavior-y: none;

    &.react-draggable-transparent-selection {
      .react-draggable {
        &:not(:active) {
          opacity: 0.3;
        }
      }
    }
  }

  #app {
    min-height: 100%;
    min-width: 100%;
  }

  svg {
    vertical-align: baseline;
  }

  .ant-dropdown {
    z-index: 999;
    width: 100%;
  }

  #reset-password {
    .ant-form-item {
      &:nth-child(2) {
        padding-top: 0;
      }
    }
  }

  ${media.tablet`
    .ant-dropdown {
      max-width: 390px;
      width: 390px;
    }
  `}

  @media screen and (max-width: 768px) {
    input[type='text'],
    input[type='number'],
    input[type='password'],
    textarea {
      appearance: none;
      font-size: 16px;

      &::placeholder { 
        font-size: 14px;
      }
    }

     .ant-select {
       font-size: 16px;
       
        .ant-select-selection-placeholder {
          font-size: 14px;
        }
     }
    
    .ant-notification {
      width: 100%;

      &.ant-notification-bottomLeft {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;

        .ant-notification-notice {
          margin-left: 0 !important;
          width: 100% !important;
        }
      }
    }
  }
`