polished#ellipsis JavaScript Examples

The following examples show how to use polished#ellipsis. 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: MsgListSectionItem.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
LastMsgItemText = styled.span`
  font-size: 1.4rem;
  ${ellipsis('17rem')};
`
Example #2
Source File: TripsPastCardItem.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
TripsPastLocation = styled.div`
  padding: 0.5rem 0rem 0rem;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 2.5rem;
  ${ellipsis('32rem')};
`
Example #3
Source File: TripsPastCardItem.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
TripsPastButtonText = styled.div`
  padding-left: 1rem;
  font-size: 1.4rem;
  font-weight: 400;
  ${ellipsis('28rem')};
`
Example #4
Source File: TripsUpcomingCardItem.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
TripsUpcomingAddr = styled.div`
  padding: 0.5rem 0rem 0rem;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 2.5rem;
  ${ellipsis('32rem')};
`
Example #5
Source File: TripsUpcomingCardItem.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
TripsUpcomingButtonText = styled.div`
  padding-left: 1rem;
  font-size: 1.4rem;
  font-weight: 400;
  ${ellipsis('28rem')};
`
Example #6
Source File: Wishlist.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
WishlistTitle = styled.div`
  padding: 2.5rem 0rem 0rem;
  width: 95%;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 2.5rem;
  ${ellipsis('36rem')};
`
Example #7
Source File: Navigation.js    From Nextjs-ja-translation-docs with MIT License 4 votes vote down vote up 
Navigation = ({ meta, isMobile }) => {
  const [dropdown, setDropdown] = React.useState(false);
  const [record, dispatchRecord] = useRecord(meta);
  const effectDeps = [record.ready, !record.visited];

  React.useEffect(() => {
    if (effectDeps.every(dep => dep)) {
      dispatchRecord({ type: 'visit' });
    }
  }, effectDeps);

  if (isMobile) {
    return (
      <div className="fixed-navigation-container">
        <div className={`navigation-area dropdown${dropdown ? '' : ' courses-closed'}`}>
          {courses.map(course => (
            <Course key={course.id} course={course} meta={meta} />
          ))}
        </div>
        <div
          role="button"
          className="no-tap-highlight current f5 fw6"
          onClick={() => setDropdown(!dropdown)}
        >
          <span
            style={{
              verticalAlign: 'middle',
              marginRight: 7,
              display: 'inline-block',
              lineHeight: 0
            }}
          >
            <ArrowIcon />
          </span>
          <span style={ellipsis()}>{meta.title}</span>
        </div>
        <Profile isMobile />
        <style jsx>{`
          .fixed-navigation-container {
            position: relative;
            display: flex;
            height: 56px;
            width: 100%;
            padding: 0 1rem;
            align-items: center;
            justify-content: space-between;
          }
          .current {
            flex: 1;
            display: flex;
            height: 100%;
            align-items: center;
            padding-right: 0.5rem;
            overflow: hidden;
            cursor: pointer;
          }
          .navigation-area.dropdown {
            position: absolute;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            left: 0;
            top: 100%;
            bottom: -50vh;
            width: 100%;
            padding: 0 0.65rem;
            background: white;
            border-top: 1px solid #efefef;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: bottom 0.5s ease;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            z-index: 1;
          }
          .navigation-area.dropdown.courses-closed {
            bottom: 100%;
          }
        `}</style>
      </div>
    );
  }

  return (
    <>
      <Profile />
      <div className="navigation-area">
        {courses.map(course => (
          <Course key={course.id} course={course} meta={meta} />
        ))}
        <style jsx>{`
          .navigation-area {
            display: flex;
            flex-direction: column;
          }
        `}</style>
      </div>
    </>
  );
}