YOSGO_SCSS_Variables.scss

YOSGO_SCSS_Variables.scss

//--Color--
$lightGrayBg: #f9fafc;
$gray: #9b9b9b;
$green: #07C9C6;
$red: #f05945;
$lightGrayFieldBorder: #e3e6ee;
$lightGrayLine: #e3e6ee;
$grayWord: #9b9b9b;

//--FontSize--
//Change the base 14px to 15px
//https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
$font-size-base: 15px;
$font-size-large: 18px;
$font-size-small: 12px;

$font-size-h1: 36px; // if base equal 14px then ~36px
$font-size-h2: 30px;
$font-size-h3: 24px;
$font-size-h4: 18px;
$font-size-h5: 15px;
$font-size-h6: 12px;


//--Layout--
//Z-index
$top: 99;
$middle: 98;
$bottom: 97;
//Mobile device
$mobilePadding: 15px;
$mobileBuyBtnHeight: 40px;


//--Component--
//Button
@mixin btn($color, $font-color) {
  border-radius: 2px !important;
  background: $color !important;
  border-color: $color !important;
  color: $font-color !important;
  transition: 0.4s;
  &:hover {
    opacity: 0.9;
  }
  &:active, &:focus {
    outline: 0 !important;
  }
}


//Icon
@mixin icon($iconColor, $size) {
  color: $iconColor;
  font-size: $size;
}