fm-normalize-css

normalize.css

用于项目css文件的初始化，reset css

使用

方式一：

// 引入reset样式
@import url('@tantan/normalize-css');
// 引入mixin样式
@import '@tantan/normalize-css/scss/mixin.scss';
// 引入animate样式
@import '@tantan/normalize-css/scss/animate.scss';

方式二：

<link rel="stylesheet" href="https://fe-static.tancdn.com/v1/raw/70f05494-f4c6-41d8-acb8-2a13aa12024c11.css">

颜色

// 字体颜色
$cmn-color_tantan_primary: #fe7e1d;
$cmn-color_tantan_title: rgba(0, 0, 0, .8);
$cmn-color_tantan_subTitle: rgba(0, 0, 0, .3);
$cmn-color_tantan_normalText: #999;
$cmn-color_tantan_placerholderText: rgba(0, 0, 0, .2);

// 背景颜色
$cmn-bg_tantan_lightOne: rgba(0, 0, 0, 0.2);
$cmn-bg_tantan_lightTwo: rgba(0, 0, 0, 0.1);
$cmn-bg_tantan_lightThree: rgba(0, 0, 0, 0.05);
$cmn-bg_tantan_lightFour: rgba(0, 0, 0, 0.03);

// 边框颜色
$cmn-color_tantan_border: rgba(0, 0, 0, 0.03);

// disabled
$cmn-color_tantan_disabled_bg: rgba(0, 0, 0, 0.03);
$cmn-color_tantan_disabled_text: rgba(0, 0, 0, 0.2);

字体大小

$cmn-font-size_tantan_extra_small_body: 10px;
$cmn-font-size_tantan_body_small: 12px;
$cmn-font-size_tantan_body_normal: 13px;
$cmn-font-size_tantan_body_medium: 14px;
$cmn-font-size_tantan_body_larger: 15px;
$cmn-font-size_tantan_tile_samll: 16px;
$cmn-font-size_tantan_tile_normal: 18px;
$cmn-font-size_tantan_title_medium: 21px;
$cmn-font-size_tantan_title_larger: 24px;
$cmn-font-size_tantan_title_extraLarger: 32px;

动画css

animation: fade-in 0.6s cubic-bezier(0.3, 0.6, 0, 1);
@keyframes van-slide-down-enter {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

间距

$cmn-padding_swiperPage: 8px;
$cmn-padding_corePage: 12px;
$cmn-padding_otherPage: 20px;
$cmn-margin_titleContent: 16px;
$cmn-padding_bigTitleContent: 40px;
$cmn-height_headerTar: 56px;

圆角

$cmn-radius_tantan_halfDialog: 24px;
$cmn-radius_tantan_modal: 20px;
$cmn-radius_tantan_dyImg: 10px;
$cmn-radius_tantan_smallCard: 8px;
$cmn-radius_tantan_inputAndBtn: 10px;
$cmn-radius_tantan_tag: 6px;
$cmn-radius_tantan_smallTag: 4px;

阴影

@mixin box-shadow-base() {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
@mixin box-shadow-light() {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

公用的样式（边框，背景色主题）

@mixin border-primary($direction:border-bottom, $tantan-border:1px solid $cmn-color_tantan_border) {
  #{direction}: $tantan-border;
}

// 省略几行
@mixin text-line-clamp($number) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: $number;
  line-clamp: $number;
}

// .clearfix:before,
// .clearfix:after {
//   content: " ";
//   display: table
// }

// .clearfix:after {
//   clear: both
// }

// .clearfix {
//   *zoom: 1
// }