utils#colors JavaScript Examples

The following examples show how to use utils#colors. 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 
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 #2
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 #3
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 #4
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 #5
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 #6
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 #7
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledUser = styled.span`
  display: contents;
  color: ${colors.primaryBlue};
`
Example #8
Source File: saga.js    From bank-client with MIT License 5 votes vote down vote up 
export function* getAccountBalance() {
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = api.bills('accountBalance');
  const requestParameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const { revenues, expenses, currencyName } = yield call(
      request,
      requestURL,
      requestParameters,
    );

    const revenuesPercent =
      ((Number(revenues) - Number(expenses)) / Number(revenues)) * 100;
    let savingsPercent;
    let savingsData;
    let savingsColors;

    if (Number(revenues) === Infinity) {
      savingsPercent = 100;
      savingsColors = [colors.primaryBlue, colors.red];
      savingsData = [
        { name: 'revenues', value: parseFloat(revenues) },
        { name: 'expenses', value: parseFloat(expenses) },
      ];
    } else if (Number(expenses) === Infinity) {
      savingsPercent = 0;
      savingsColors = [colors.primaryBlue, colors.red];
      savingsData = [
        { name: 'revenues', value: parseFloat(revenues) },
        { name: 'expenses', value: parseFloat(expenses) },
      ];
    } else if (!Number(revenues) && !Number(expenses)) {
      savingsPercent = 0;
      savingsColors = ['#b8b8b8'];
      savingsData = [{ name: 'savings', value: 100 }];
    } else {
      savingsPercent = Math.max(0, revenuesPercent);
      savingsColors = [colors.primaryBlue, colors.red];
      savingsData = [
        { name: 'revenues', value: parseFloat(revenues) },
        { name: 'expenses', value: parseFloat(expenses) },
      ];
    }

    yield put(
      getAccountBalanceSuccessAction(
        currencyName,
        savingsPercent,
        savingsData,
        savingsColors,
      ),
    );
  } catch (error) {
    yield put(getAccountBalanceErrorAction(error));
    yield put(push(routes.login.path));
  }
}
Example #9
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledInformation = styled.div`
  font-size: 11px;
  color: ${colors.silver};
  padding: 5px 0 10px;
`
Example #10
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledPinCodeWrapper = styled.span`
  font-weight: ${typography.fontWeightBold};
  color: ${colors.primaryBlue};
`
Example #11
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledButton = styled(Button)`
  font-weight: ${typography.fontWeightBold};
  color: ${colors.primaryBlue};
  padding: 0;
  height: auto;
`
Example #12
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledFormWrapper = styled.div`
  text-align: center;
  background-color: ${colors.grey};
  box-shadow: ${({ shadowed }) =>
    shadowed &&
    `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 #13
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledError = styled.div`
  max-width: 300px;
  font-size: 11px;
  margin: 0 auto;
  color: ${colors.white};
  line-height: 1.5715;
`
Example #14
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledButton = styled(Button)`
  &&& {
    width: ${({ type }) => type !== 'link' && '100%'};
    color: ${({ back }) => back && 'inherit'};
    background-color: ${({ errored }) => errored && colors.red};
  }
`
Example #15
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledButton = styled(Button)`
    color: ${colors.black};
    padding: 0 0 20px;
    height: 100%;
`
Example #16
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledTip = styled.div`
  color: ${colors.red};
  margin: 15px 0;
`
Example #17
Source File: index.js    From bank-client with MIT License 5 votes vote down vote up 
export default function AvailableFunds() {
  const dispatch = useDispatch();
  const {
    amountMoney,
    accountBalanceHistory,
    currencyName,
    isLoading,
  } = useSelector(stateSelector);

  const getAvailableFunds = () => dispatch(getAvailableFundsAction());

  useEffect(() => {
    getAvailableFunds();
  }, []);

  const trend = (
    <Trend
      smooth
      autoDraw
      autoDrawDuration={1500}
      autoDrawEasing="ease-out"
      data={accountBalanceHistory}
      gradient={[`${colors.primaryBlue}`]}
      radius={0}
      strokeWidth={4.0}
      strokeLinecap="butt"
    />
  );

  return (
    <FormattedMessage {...messages.availableFunds}>
      {(title) => (
        <Widget
          isLoading={isLoading}
          svg={trend}
          title={title}
          content={amountMoney}
          unit={currencyName}
        />
      )}
    </FormattedMessage>
  );
}
Example #18
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledSenderAmountMoney = styled.div`
  display: contents;
  color: ${colors.red};
`
Example #19
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledListItemNoData = styled.div`
  margin: auto;
  pointer-events: none;
  color: ${colors.silver};
  font-size: 13px;
`
Example #20
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledListItemSender = styled.span`
  color: ${colors.primaryBlue};
  display: contents;
`
Example #21
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledLastFailedLoggedDate = styled.span`
  color: ${colors.red};
`
Example #22
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledLastSuccessfulLoggedDateWrapper = styled.span`
  color: ${colors.black};
`
Example #23
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledNameWrapper = styled.span`
  color: ${colors.primaryBlue};
  font-weight: ${typography.fontWeightBold};
`
Example #24
Source File: styles.js    From bank-client with MIT License 4 votes vote down vote up 
StyledTable = styled(Table)`
  @media only screen and (max-width: 1024px) {
    table {
      border: 0;

      thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      tr {
        font-size: 12px;
        border-bottom: 1px solid ${colors.primaryBlue};
        display: block;
        margin-bottom: 0.625em;
      }

      td {
        border-bottom: 1px solid ${colors.grey};
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right;

        &::before {
          float: left;
          font-weight: bold;
        }

        &:nth-child(1) {
          &::before {
            content: ${({ sender }) => `'${sender}'`};
          }
        }

        &:nth-child(2) {
          &::before {
            content: ${({ recipient }) => `'${recipient}'`};
          }
        }

        &:nth-child(3) {
          &::before {
            content: ${({ amountMoney }) => `'${amountMoney}'`};
          }
        }

        &:nth-child(4) {
          &::before {
            content: ${({ transferTitle }) => `'${transferTitle}'`};
          }
        }

        &:nth-child(5) {
          &::before {
            content: ${({ date }) => `'${date}'`};
          }
        }

        &:nth-child(6) {
          &::before {
            content: ${({ confirmation }) => `'${confirmation}'`};
          }
        }

        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }

  .ant-tag {
    margin-right: 0;
  }

  .ant-empty {
    visibility: hidden;
  }

  .ant-spin-nested-loading {
    > div {
      > .ant-spin {
        max-height: initial;
      }
    }
  }
`