TypeScript @mixins.shadows函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@mixins.shadows函数的典型用法代码示例。如果您正苦于以下问题：TypeScript shadows函数的具体用法？TypeScript shadows怎么用？TypeScript shadows使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了shadows函数的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: shadows

 ${({ suggestionsVisible, visible }: AddressBarProps) => css`
   height: ${suggestionsVisible ? 'auto' : `${ADDRESS_BAR_HEIGHT}px`};
   border-radius: ${suggestionsVisible ? 8 : 20}px;
   box-shadow: ${suggestionsVisible ? shadows(8) : 'none'};
   top: ${suggestionsVisible
     ? '1px'
     : `calc(50% - ${ADDRESS_BAR_HEIGHT}px / 2)`};
   transform: translateX(-50%) ${visible ? '' : 'translateY(-30px)'};
   opacity: ${visible ? 1 : 0};
   -webkit-app-region: ${visible ? 'no-drag' : ''};
   pointer-events: ${visible ? 'auto' : 'none'};
 `};

开发者ID:laquereric，项目名称:wexond，代码行数:12，代码来源:styles.ts

示例2: getComponentColor

  ${({
    background,
    foreground,
    disabled,
    isContained,
    isOutlined,
    isText,
    theme,
  }: StyledButtonProps) => css`
    background-color: ${isOutlined || isText
      ? 'transparent'
      : getComponentColor(background, true, disabled, theme)};

    box-shadow: ${!disabled && !isOutlined && !isText ? shadows(2) : 'unset'};
    color: ${getComponentColor(foreground, true, disabled, theme, false)}};
    border: ${getBorder(isOutlined, theme)};
    cursor: ${disabled ? 'unset' : 'pointer'};
    pointer-events: ${disabled ? 'none' : 'all'};

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      background-color: ${foreground};
      opacity: 0;
      transition: 0.2s opacity;
    }

    &:hover::before {
      opacity: 0.12;
    }
  `};

开发者ID:laquereric，项目名称:wexond，代码行数:36，代码来源:styles.ts

示例3: rgba

import { shadows, robotoRegular } from '@mixins';
import { transparency } from '~/renderer/defaults';

export const Root = styled.div`
  width: 364px;
  background-color: #fff;
  position: absolute;
  top: 56px;
  right: 0;
  z-index: 100;
  border-radius: 4px;
  padding: 16px;
  transform-origin: top right;
  will-change: transform, opacity;

  box-shadow: ${shadows(6)};

  ${({ visible }: { visible: boolean }) => css`
    opacity: ${visible ? 1 : 0};
    transform: ${visible ? 'scale(1)' : 'scale(0)'};
    transition: ${`0.3s ${EASE_FUNCTION} transform, ${
      visible ? 0.1 : 0.2
    }s opacity`};
  `};
`;

export const Title = styled.div`
  font-size: 16px;
  color: rgba(0, 0, 0, ${transparency.light.primaryText});

  ${robotoRegular()};

开发者ID:laquereric，项目名称:wexond，代码行数:31，代码来源:styles.ts

示例4: url

  transition: 0.3s transform;
  opacity: ${transparency.light.inactiveIcon};
  background-image: url(${icons.dropDown});

  ${centerImage('24px', 'auto')};

  ${({ activated }: { activated: boolean }) => css`
    transform: rotate(${activated ? 180 : 0}deg);
  `};
`;

export const List = styled.div`
  width: 100%;
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #fff;
  border-radius: 4px;
  will-change: max-height;
  opacity: 0;
  transition: 0.5s max-height ${EASE_FUNCTION}, 0.2s opacity;
  box-shadow: ${shadows(7)};

  ${({ activated, height }: { activated: boolean; height: number }) => css`
    max-height: ${height}px;
    opacity: ${activated ? 1 : 0};
  `};
`;

开发者ID:laquereric，项目名称:wexond，代码行数:30，代码来源:styles.ts

示例5: url

  &:hover .delete-icon {
    opacity: 1;
  }
`;

export const DeleteIcon = styled.div`
  width: 24px;
  height: 24px;
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #fff;
  border-radius: 100%;
  background-image: url(${icons.close});
  box-shadow: ${shadows(2)};
  opacity: 0;
  transition: 0.2s opacity;

  ${centerImage('16px', 'auto')};
`;

export const IconsContainer = styled.div`
  width: ${WORKSPACE_FOLDER_SIZE}px;
  height: ${WORKSPACE_FOLDER_SIZE}px;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

开发者ID:laquereric，项目名称:wexond，代码行数:30，代码来源:styles.ts

示例6:

import styled, { css } from 'styled-components';
import { shadows } from '@mixins';

export interface StyledMenuProps {
  visible: boolean;
  width: number;
}

export const StyledMenu = styled.div`
  border-radius: 4px;
  background-color: white;
  overflow: hidden;
  position: absolute;
  z-index: 9999;

  box-shadow: ${shadows(8)};

  ${({ visible, width }: StyledMenuProps) => css`
    visibility: ${visible ? 'visible' : 'hidden'};
    width: ${width}px;
    padding-top: 4px;
    padding-bottom: 4px;
  `};
`;

开发者ID:laquereric，项目名称:wexond，代码行数:24，代码来源:styles.ts

注：本文中的@mixins.shadows函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。