From bbc0122715b613c3ba508028663f672088ba84de Mon Sep 17 00:00:00 2001 From: Boyuzhou <386607913@qq.com> Date: Mon, 10 Oct 2016 10:01:52 +0800 Subject: [PATCH] first commit --- .eslintignore | 0 .eslintrc | 0 .gitignore | 35 + README.md | 13 + js/index.js | 0 package.json | 12 + scss/index.scss | 21 + scss/minxin-colors.scss | 767 +++++++++ scss/minxin-mixins.scss | 586 +++++++ scss/minxin-palette.scss | 2906 ++++++++++++++++++++++++++++++++++ scss/minxin-themeColors.scss | 7 + scss/minxin-variables.scss | 1036 ++++++++++++ scss/set-global.scss | 66 + scss/set-normalize.scss | 425 +++++ scss/set-resets.scss | 55 + scss/util-iconfont.css | 397 +++++ scss/util-ripple.scss | 44 + scss/util-shadow.scss | 34 + scss/util-tool.scss | 464 ++++++ scss/util-utilities.scss | 1613 +++++++++++++++++++ 20 files changed, 8481 insertions(+) create mode 100644 .eslintignore create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 README.md create mode 100644 js/index.js create mode 100644 package.json create mode 100644 scss/index.scss create mode 100644 scss/minxin-colors.scss create mode 100644 scss/minxin-mixins.scss create mode 100644 scss/minxin-palette.scss create mode 100644 scss/minxin-themeColors.scss create mode 100644 scss/minxin-variables.scss create mode 100644 scss/set-global.scss create mode 100644 scss/set-normalize.scss create mode 100644 scss/set-resets.scss create mode 100644 scss/util-iconfont.css create mode 100644 scss/util-ripple.scss create mode 100644 scss/util-shadow.scss create mode 100644 scss/util-tool.scss create mode 100644 scss/util-utilities.scss diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..e69de29 diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..e69de29 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..41033b4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,35 @@ +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history diff --git a/README.md b/README.md new file mode 100644 index 0000000..d072dd0 --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# bee-core +tinper-bee组件库的核心样式及公用方法库 + +## 核心样式 +放在scss文件夹下，由index.scss统一导出 +包括 +- 重置浏览器样式 +- 全局样式设置 +- 图标样式 +- 波纹效果、阴影样式、文本及字体样式 +- 主辅色及常用颜色设置 + +## 工具方法库 diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json new file mode 100644 index 0000000..ba2e7b5 --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "bee-core", + "version": "0.0.1", + "description": "style core and js util for tinper-bee", + "main": "js/index.js", + "keywords": "tinper bee react util", + "scripts": { + "test": "test" + }, + "author": "zhoubyc", + "license": "MIT" +} diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 0000000..b4d5b2b --- /dev/null +++ b/scss/index.scss @@ -0,0 +1,21 @@ +// 核心文件 + +// 导入参数/函数类文件,minxin有依赖关系，此部分请按照顺序加载 +@import "./minxin-colors"; +@import "./minxin-themeColors"; +@import "./minxin-variables"; +@import "./minxin-mixins"; +@import "./minxin-palette"; + +// 全局设置类文件 +@import "./set-normalize"; +@import "./set-global"; +@import "./set-resets"; + + +// 工具类文件 +@import "./util-iconfont"; +@import "./util-ripple"; +@import "./util-tool"; +@import "./util-utilities"; +@import "./util-shadow"; diff --git a/scss/minxin-colors.scss b/scss/minxin-colors.scss new file mode 100644 index 0000000..6405be8 --- /dev/null +++ b/scss/minxin-colors.scss @@ -0,0 +1,767 @@ + +// ========== Color Palettes ========== + +// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, +// A400, A700. + +$palette-red: +"255,235,238" +"255,205,210" +"239,154,154" +"229,115,115" +"239,83,80" +"244,67,54" +"229,57,53" +"211,47,47" +"198,40,40" +"183,28,28" +"255,138,128" +"255,82,82" +"255,23,68" +"213,0,0"; + +$palette-red-50: nth($palette-red, 1); +$palette-red-100: nth($palette-red, 2); +$palette-red-200: nth($palette-red, 3); +$palette-red-300: nth($palette-red, 4); +$palette-red-400: nth($palette-red, 5); +$palette-red-500: nth($palette-red, 6); +$palette-red-600: nth($palette-red, 7); +$palette-red-700: nth($palette-red, 8); +$palette-red-800: nth($palette-red, 9); +$palette-red-900: nth($palette-red, 10); +$palette-red-A100: nth($palette-red, 11); +$palette-red-A200: nth($palette-red, 12); +$palette-red-A400: nth($palette-red, 13); +$palette-red-A700: nth($palette-red, 14); + +$palette-pink: +"252,228,236" +"248,187,208" +"244,143,177" +"240,98,146" +"236,64,122" +"233,30,99" +"216,27,96" +"194,24,91" +"173,20,87" +"136,14,79" +"255,128,171" +"255,64,129" +"245,0,87" +"197,17,98"; + +$palette-pink-50: nth($palette-pink, 1); +$palette-pink-100: nth($palette-pink, 2); +$palette-pink-200: nth($palette-pink, 3); +$palette-pink-300: nth($palette-pink, 4); +$palette-pink-400: nth($palette-pink, 5); +$palette-pink-500: nth($palette-pink, 6); +$palette-pink-600: nth($palette-pink, 7); +$palette-pink-700: nth($palette-pink, 8); +$palette-pink-800: nth($palette-pink, 9); +$palette-pink-900: nth($palette-pink, 10); +$palette-pink-A100: nth($palette-pink, 11); +$palette-pink-A200: nth($palette-pink, 12); +$palette-pink-A400: nth($palette-pink, 13); +$palette-pink-A700: nth($palette-pink, 14); + +$palette-purple: +"243,229,245" +"225,190,231" +"206,147,216" +"186,104,200" +"171,71,188" +"156,39,176" +"142,36,170" +"123,31,162" +"106,27,154" +"74,20,140" +"234,128,252" +"224,64,251" +"213,0,249" +"170,0,255"; + +$palette-purple-50: nth($palette-purple, 1); +$palette-purple-100: nth($palette-purple, 2); +$palette-purple-200: nth($palette-purple, 3); +$palette-purple-300: nth($palette-purple, 4); +$palette-purple-400: nth($palette-purple, 5); +$palette-purple-500: nth($palette-purple, 6); +$palette-purple-600: nth($palette-purple, 7); +$palette-purple-700: nth($palette-purple, 8); +$palette-purple-800: nth($palette-purple, 9); +$palette-purple-900: nth($palette-purple, 10); +$palette-purple-A100: nth($palette-purple, 11); +$palette-purple-A200: nth($palette-purple, 12); +$palette-purple-A400: nth($palette-purple, 13); +$palette-purple-A700: nth($palette-purple, 14); + +$palette-deep-purple: +"237,231,246" +"209,196,233" +"179,157,219" +"149,117,205" +"126,87,194" +"103,58,183" +"94,53,177" +"81,45,168" +"69,39,160" +"49,27,146" +"179,136,255" +"124,77,255" +"101,31,255" +"98,0,234"; + +$palette-deep-purple-50: nth($palette-deep-purple, 1); +$palette-deep-purple-100: nth($palette-deep-purple, 2); +$palette-deep-purple-200: nth($palette-deep-purple, 3); +$palette-deep-purple-300: nth($palette-deep-purple, 4); +$palette-deep-purple-400: nth($palette-deep-purple, 5); +$palette-deep-purple-500: nth($palette-deep-purple, 6); +$palette-deep-purple-600: nth($palette-deep-purple, 7); +$palette-deep-purple-700: nth($palette-deep-purple, 8); +$palette-deep-purple-800: nth($palette-deep-purple, 9); +$palette-deep-purple-900: nth($palette-deep-purple, 10); +$palette-deep-purple-A100: nth($palette-deep-purple, 11); +$palette-deep-purple-A200: nth($palette-deep-purple, 12); +$palette-deep-purple-A400: nth($palette-deep-purple, 13); +$palette-deep-purple-A700: nth($palette-deep-purple, 14); + +$palette-indigo: +"232,234,246" +"197,202,233" +"159,168,218" +"121,134,203" +"92,107,192" +"63,81,181" +"57,73,171" +"48,63,159" +"40,53,147" +"26,35,126" +"140,158,255" +"83,109,254" +"61,90,254" +"48,79,254"; + +$palette-indigo-50: nth($palette-indigo, 1); +$palette-indigo-100: nth($palette-indigo, 2); +$palette-indigo-200: nth($palette-indigo, 3); +$palette-indigo-300: nth($palette-indigo, 4); +$palette-indigo-400: nth($palette-indigo, 5); +$palette-indigo-500: nth($palette-indigo, 6); +$palette-indigo-600: nth($palette-indigo, 7); +$palette-indigo-700: nth($palette-indigo, 8); +$palette-indigo-800: nth($palette-indigo, 9); +$palette-indigo-900: nth($palette-indigo, 10); +$palette-indigo-A100: nth($palette-indigo, 11); +$palette-indigo-A200: nth($palette-indigo, 12); +$palette-indigo-A400: nth($palette-indigo, 13); +$palette-indigo-A700: nth($palette-indigo, 14); + +$palette-blue: +"227,242,253" +"187,222,251" +"144,202,249" +"100,181,246" +"66,165,245" +"33,150,243" +"30,136,229" +"25,118,210" +"21,101,192" +"13,71,161" +"130,177,255" +"68,138,255" +"41,121,255" +"41,98,255"; + +$palette-blue-50: nth($palette-blue, 1); +$palette-blue-100: nth($palette-blue, 2); +$palette-blue-200: nth($palette-blue, 3); +$palette-blue-300: nth($palette-blue, 4); +$palette-blue-400: nth($palette-blue, 5); +$palette-blue-500: nth($palette-blue, 6); +$palette-blue-600: nth($palette-blue, 7); +$palette-blue-700: nth($palette-blue, 8); +$palette-blue-800: nth($palette-blue, 9); +$palette-blue-900: nth($palette-blue, 10); +$palette-blue-A100: nth($palette-blue, 11); +$palette-blue-A200: nth($palette-blue, 12); +$palette-blue-A400: nth($palette-blue, 13); +$palette-blue-A700: nth($palette-blue, 14); + +$palette-light-blue: +"225,245,254" +"179,229,252" +"129,212,250" +"79,195,247" +"41,182,246" +"3,169,244" +"3,155,229" +"2,136,209" +"2,119,189" +"1,87,155" +"128,216,255" +"64,196,255" +"0,176,255" +"0,145,234"; + +$palette-light-blue-50: nth($palette-light-blue, 1); +$palette-light-blue-100: nth($palette-light-blue, 2); +$palette-light-blue-200: nth($palette-light-blue, 3); +$palette-light-blue-300: nth($palette-light-blue, 4); +$palette-light-blue-400: nth($palette-light-blue, 5); +$palette-light-blue-500: nth($palette-light-blue, 6); +$palette-light-blue-600: nth($palette-light-blue, 7); +$palette-light-blue-700: nth($palette-light-blue, 8); +$palette-light-blue-800: nth($palette-light-blue, 9); +$palette-light-blue-900: nth($palette-light-blue, 10); +$palette-light-blue-A100: nth($palette-light-blue, 11); +$palette-light-blue-A200: nth($palette-light-blue, 12); +$palette-light-blue-A400: nth($palette-light-blue, 13); +$palette-light-blue-A700: nth($palette-light-blue, 14); + +$palette-cyan: +"224,247,250" +"178,235,242" +"128,222,234" +"77,208,225" +"38,198,218" +"0,188,212" +"0,172,193" +"0,151,167" +"0,131,143" +"0,96,100" +"132,255,255" +"24,255,255" +"0,229,255" +"0,184,212"; + +$palette-cyan-50: nth($palette-cyan, 1); +$palette-cyan-100: nth($palette-cyan, 2); +$palette-cyan-200: nth($palette-cyan, 3); +$palette-cyan-300: nth($palette-cyan, 4); +$palette-cyan-400: nth($palette-cyan, 5); +$palette-cyan-500: nth($palette-cyan, 6); +$palette-cyan-600: nth($palette-cyan, 7); +$palette-cyan-700: nth($palette-cyan, 8); +$palette-cyan-800: nth($palette-cyan, 9); +$palette-cyan-900: nth($palette-cyan, 10); +$palette-cyan-A100: nth($palette-cyan, 11); +$palette-cyan-A200: nth($palette-cyan, 12); +$palette-cyan-A400: nth($palette-cyan, 13); +$palette-cyan-A700: nth($palette-cyan, 14); + +$palette-teal: +"224,242,241" +"178,223,219" +"128,203,196" +"77,182,172" +"38,166,154" +"0,150,136" +"0,137,123" +"0,121,107" +"0,105,92" +"0,77,64" +"167,255,235" +"100,255,218" +"29,233,182" +"0,191,165"; + +$palette-teal-50: nth($palette-teal, 1); +$palette-teal-100: nth($palette-teal, 2); +$palette-teal-200: nth($palette-teal, 3); +$palette-teal-300: nth($palette-teal, 4); +$palette-teal-400: nth($palette-teal, 5); +$palette-teal-500: nth($palette-teal, 6); +$palette-teal-600: nth($palette-teal, 7); +$palette-teal-700: nth($palette-teal, 8); +$palette-teal-800: nth($palette-teal, 9); +$palette-teal-900: nth($palette-teal, 10); +$palette-teal-A100: nth($palette-teal, 11); +$palette-teal-A200: nth($palette-teal, 12); +$palette-teal-A400: nth($palette-teal, 13); +$palette-teal-A700: nth($palette-teal, 14); + +$palette-green: +"232,245,233" +"200,230,201" +"165,214,167" +"129,199,132" +"102,187,106" +"76,175,80" +"67,160,71" +"56,142,60" +"46,125,50" +"27,94,32" +"185,246,202" +"105,240,174" +"0,230,118" +"0,200,83"; + +$palette-green-50: nth($palette-green, 1); +$palette-green-100: nth($palette-green, 2); +$palette-green-200: nth($palette-green, 3); +$palette-green-300: nth($palette-green, 4); +$palette-green-400: nth($palette-green, 5); +$palette-green-500: nth($palette-green, 6); +$palette-green-600: nth($palette-green, 7); +$palette-green-700: nth($palette-green, 8); +$palette-green-800: nth($palette-green, 9); +$palette-green-900: nth($palette-green, 10); +$palette-green-A100: nth($palette-green, 11); +$palette-green-A200: nth($palette-green, 12); +$palette-green-A400: nth($palette-green, 13); +$palette-green-A700: nth($palette-green, 14); + +$palette-light-green: +"241,248,233" +"220,237,200" +"197,225,165" +"174,213,129" +"156,204,101" +"139,195,74" +"124,179,66" +"104,159,56" +"85,139,47" +"51,105,30" +"204,255,144" +"178,255,89" +"118,255,3" +"100,221,23"; + +$palette-light-green-50: nth($palette-light-green, 1); +$palette-light-green-100: nth($palette-light-green, 2); +$palette-light-green-200: nth($palette-light-green, 3); +$palette-light-green-300: nth($palette-light-green, 4); +$palette-light-green-400: nth($palette-light-green, 5); +$palette-light-green-500: nth($palette-light-green, 6); +$palette-light-green-600: nth($palette-light-green, 7); +$palette-light-green-700: nth($palette-light-green, 8); +$palette-light-green-800: nth($palette-light-green, 9); +$palette-light-green-900: nth($palette-light-green, 10); +$palette-light-green-A100: nth($palette-light-green, 11); +$palette-light-green-A200: nth($palette-light-green, 12); +$palette-light-green-A400: nth($palette-light-green, 13); +$palette-light-green-A700: nth($palette-light-green, 14); + +$palette-lime: +"249,251,231" +"240,244,195" +"230,238,156" +"220,231,117" +"212,225,87" +"205,220,57" +"192,202,51" +"175,180,43" +"158,157,36" +"130,119,23" +"244,255,129" +"238,255,65" +"198,255,0" +"174,234,0"; + +$palette-lime-50: nth($palette-lime, 1); +$palette-lime-100: nth($palette-lime, 2); +$palette-lime-200: nth($palette-lime, 3); +$palette-lime-300: nth($palette-lime, 4); +$palette-lime-400: nth($palette-lime, 5); +$palette-lime-500: nth($palette-lime, 6); +$palette-lime-600: nth($palette-lime, 7); +$palette-lime-700: nth($palette-lime, 8); +$palette-lime-800: nth($palette-lime, 9); +$palette-lime-900: nth($palette-lime, 10); +$palette-lime-A100: nth($palette-lime, 11); +$palette-lime-A200: nth($palette-lime, 12); +$palette-lime-A400: nth($palette-lime, 13); +$palette-lime-A700: nth($palette-lime, 14); + +$palette-yellow: +"255,253,231" +"255,249,196" +"255,245,157" +"255,241,118" +"255,238,88" +"255,235,59" +"253,216,53" +"251,192,45" +"249,168,37" +"245,127,23" +"255,255,141" +"255,255,0" +"255,234,0" +"255,214,0"; + +$palette-yellow-50: nth($palette-yellow, 1); +$palette-yellow-100: nth($palette-yellow, 2); +$palette-yellow-200: nth($palette-yellow, 3); +$palette-yellow-300: nth($palette-yellow, 4); +$palette-yellow-400: nth($palette-yellow, 5); +$palette-yellow-500: nth($palette-yellow, 6); +$palette-yellow-600: nth($palette-yellow, 7); +$palette-yellow-700: nth($palette-yellow, 8); +$palette-yellow-800: nth($palette-yellow, 9); +$palette-yellow-900: nth($palette-yellow, 10); +$palette-yellow-A100: nth($palette-yellow, 11); +$palette-yellow-A200: nth($palette-yellow, 12); +$palette-yellow-A400: nth($palette-yellow, 13); +$palette-yellow-A700: nth($palette-yellow, 14); + +$palette-amber: +"255,248,225" +"255,236,179" +"255,224,130" +"255,213,79" +"255,202,40" +"255,193,7" +"255,179,0" +"255,160,0" +"255,143,0" +"255,111,0" +"255,229,127" +"255,215,64" +"255,196,0" +"255,171,0"; + +$palette-amber-50: nth($palette-amber, 1); +$palette-amber-100: nth($palette-amber, 2); +$palette-amber-200: nth($palette-amber, 3); +$palette-amber-300: nth($palette-amber, 4); +$palette-amber-400: nth($palette-amber, 5); +$palette-amber-500: nth($palette-amber, 6); +$palette-amber-600: nth($palette-amber, 7); +$palette-amber-700: nth($palette-amber, 8); +$palette-amber-800: nth($palette-amber, 9); +$palette-amber-900: nth($palette-amber, 10); +$palette-amber-A100: nth($palette-amber, 11); +$palette-amber-A200: nth($palette-amber, 12); +$palette-amber-A400: nth($palette-amber, 13); +$palette-amber-A700: nth($palette-amber, 14); + +$palette-orange: +"255,243,224" +"255,224,178" +"255,204,128" +"255,183,77" +"255,167,38" +"255,152,0" +"251,140,0" +"245,124,0" +"239,108,0" +"230,81,0" +"255,209,128" +"255,171,64" +"255,145,0" +"255,109,0"; + +$palette-orange-50: nth($palette-orange, 1); +$palette-orange-100: nth($palette-orange, 2); +$palette-orange-200: nth($palette-orange, 3); +$palette-orange-300: nth($palette-orange, 4); +$palette-orange-400: nth($palette-orange, 5); +$palette-orange-500: nth($palette-orange, 6); +$palette-orange-600: nth($palette-orange, 7); +$palette-orange-700: nth($palette-orange, 8); +$palette-orange-800: nth($palette-orange, 9); +$palette-orange-900: nth($palette-orange, 10); +$palette-orange-A100: nth($palette-orange, 11); +$palette-orange-A200: nth($palette-orange, 12); +$palette-orange-A400: nth($palette-orange, 13); +$palette-orange-A700: nth($palette-orange, 14); + +$palette-deep-orange: +"251,233,231" +"255,204,188" +"255,171,145" +"255,138,101" +"255,112,67" +"255,87,34" +"244,81,30" +"230,74,25" +"216,67,21" +"191,54,12" +"255,158,128" +"255,110,64" +"255,61,0" +"221,44,0"; + +$palette-deep-orange-50: nth($palette-deep-orange, 1); +$palette-deep-orange-100: nth($palette-deep-orange, 2); +$palette-deep-orange-200: nth($palette-deep-orange, 3); +$palette-deep-orange-300: nth($palette-deep-orange, 4); +$palette-deep-orange-400: nth($palette-deep-orange, 5); +$palette-deep-orange-500: nth($palette-deep-orange, 6); +$palette-deep-orange-600: nth($palette-deep-orange, 7); +$palette-deep-orange-700: nth($palette-deep-orange, 8); +$palette-deep-orange-800: nth($palette-deep-orange, 9); +$palette-deep-orange-900: nth($palette-deep-orange, 10); +$palette-deep-orange-A100: nth($palette-deep-orange, 11); +$palette-deep-orange-A200: nth($palette-deep-orange, 12); +$palette-deep-orange-A400: nth($palette-deep-orange, 13); +$palette-deep-orange-A700: nth($palette-deep-orange, 14); + + +// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900. + +$palette-brown: +"239,235,233" +"215,204,200" +"188,170,164" +"161,136,127" +"141,110,99" +"121,85,72" +"109,76,65" +"93,64,55" +"78,52,46" +"62,39,35"; + +$palette-brown-50: nth($palette-brown, 1); +$palette-brown-100: nth($palette-brown, 2); +$palette-brown-200: nth($palette-brown, 3); +$palette-brown-300: nth($palette-brown, 4); +$palette-brown-400: nth($palette-brown, 5); +$palette-brown-500: nth($palette-brown, 6); +$palette-brown-600: nth($palette-brown, 7); +$palette-brown-700: nth($palette-brown, 8); +$palette-brown-800: nth($palette-brown, 9); +$palette-brown-900: nth($palette-brown, 10); + +$palette-grey: +"250,250,250" +"245,245,245" +"238,238,238" +"224,224,224" +"189,189,189" +"158,158,158" +"117,117,117" +"97,97,97" +"66,66,66" +"33,33,33"; + +$palette-grey-50: nth($palette-grey, 1); +$palette-grey-100: nth($palette-grey, 2); +$palette-grey-200: nth($palette-grey, 3); +$palette-grey-300: nth($palette-grey, 4); +$palette-grey-400: nth($palette-grey, 5); +$palette-grey-500: nth($palette-grey, 6); +$palette-grey-600: nth($palette-grey, 7); +$palette-grey-700: nth($palette-grey, 8); +$palette-grey-800: nth($palette-grey, 9); +$palette-grey-900: nth($palette-grey, 10); + +$palette-blue-grey: +"236,239,241" +"207,216,220" +"176,190,197" +"144,164,174" +"120,144,156" +"96,125,139" +"84,110,122" +"69,90,100" +"55,71,79" +"38,50,56"; + +$palette-blue-grey-50: nth($palette-blue-grey, 1); +$palette-blue-grey-100: nth($palette-blue-grey, 2); +$palette-blue-grey-200: nth($palette-blue-grey, 3); +$palette-blue-grey-300: nth($palette-blue-grey, 4); +$palette-blue-grey-400: nth($palette-blue-grey, 5); +$palette-blue-grey-500: nth($palette-blue-grey, 6); +$palette-blue-grey-600: nth($palette-blue-grey, 7); +$palette-blue-grey-700: nth($palette-blue-grey, 8); +$palette-blue-grey-800: nth($palette-blue-grey, 9); +$palette-blue-grey-900: nth($palette-blue-grey, 10); + +//用友UE定制色系 + +$palette-u-red: + "254,239,237" + "251,212,208" + "249,181,173" + "246,148,137" + "244,120,107" + "241,90,74" + "228,32,21" + "216,81,66" + "120,45,37"; + +$palette-u-red-100: nth($palette-u-red, 1); +$palette-u-red-200: nth($palette-u-red, 2); +$palette-u-red-300: nth($palette-u-red, 3); +$palette-u-red-400: nth($palette-u-red, 4); +$palette-u-red-500: nth($palette-u-red, 5); +$palette-u-red-600: nth($palette-u-red, 6); +$palette-u-red-700: nth($palette-u-red, 7); +$palette-u-red-800: nth($palette-u-red, 8); +$palette-u-red-900: nth($palette-u-red, 9); + + +$palette-u-orange: + "255,243,234" + "255,222,199" + "255,198,157" + "254,173,113" + "254,152,76" + "254,129,37" + "253,65,5" + "228,116,33" + "127,64,18"; + +$palette-u-orange-100: nth($palette-u-orange, 1); +$palette-u-orange-200: nth($palette-u-orange, 2); +$palette-u-orange-300: nth($palette-u-orange, 3); +$palette-u-orange-400: nth($palette-u-orange, 4); +$palette-u-orange-500: nth($palette-u-orange, 5); +$palette-u-orange-600: nth($palette-u-orange, 6); +$palette-u-orange-700: nth($palette-u-orange, 7); +$palette-u-orange-800: nth($palette-u-orange, 8); +$palette-u-orange-900: nth($palette-u-orange, 9); + +$palette-u-yellow: + "254,249,231" + "251,240,193" + "249,228,147" + "246,217,99" + "244,207,58" + "241,196,15" + "228,151,1" + "216,176,13" + "120,98,7"; + +$palette-u-yellow-100: nth($palette-u-yellow, 1); +$palette-u-yellow-200: nth($palette-u-yellow, 2); +$palette-u-yellow-300: nth($palette-u-yellow, 3); +$palette-u-yellow-400: nth($palette-u-yellow, 4); +$palette-u-yellow-500: nth($palette-u-yellow, 5); +$palette-u-yellow-600: nth($palette-u-yellow, 6); +$palette-u-yellow-700: nth($palette-u-yellow, 7); +$palette-u-yellow-800: nth($palette-u-yellow, 8); +$palette-u-yellow-900: nth($palette-u-yellow, 9); + +$palette-u-green: + "234,247,239" + "199,234,214" + "158,218,183" + "114,202,151" + "78,189,125" + "39,174,96" + "6,119,36" + "35,156,86" + "19,87,48"; + +$palette-u-green-100: nth($palette-u-green, 1); +$palette-u-green-200: nth($palette-u-green, 2); +$palette-u-green-300: nth($palette-u-green, 3); +$palette-u-green-400: nth($palette-u-green, 4); +$palette-u-green-500: nth($palette-u-green, 5); +$palette-u-green-600: nth($palette-u-green, 6); +$palette-u-green-700: nth($palette-u-green, 7); +$palette-u-green-800: nth($palette-u-green, 8); +$palette-u-green-900: nth($palette-u-green, 9); + + +$palette-u-blue: + "233,247,252" + "196,234,246" + "152,218,240" + "107,202,234" + "68,189,228" + "27,174,222" + "3,119,193" + "24,156,199" + "8,81,119"; + +$palette-u-blue-100: nth($palette-u-blue, 1); +$palette-u-blue-200: nth($palette-u-blue, 2); +$palette-u-blue-300: nth($palette-u-blue, 3); +$palette-u-blue-400: nth($palette-u-blue, 4); +$palette-u-blue-500: nth($palette-u-blue, 5); +$palette-u-blue-600: nth($palette-u-blue, 6); +$palette-u-blue-700: nth($palette-u-blue, 7); +$palette-u-blue-800: nth($palette-u-blue, 8); +$palette-u-blue-900: nth($palette-u-blue, 9); + + +$palette-u-cyan: + "230,251,250" + "189,244,243" + "140,236,234" + "89,227,225" + "46,220,217" + "0,212,209" + "0,190,188" + "0,176,171" + "0,106,104"; + +$palette-u-cyan-100: nth($palette-u-cyan, 1); +$palette-u-cyan-200: nth($palette-u-cyan, 2); +$palette-u-cyan-300: nth($palette-u-cyan, 3); +$palette-u-cyan-400: nth($palette-u-cyan, 4); +$palette-u-cyan-500: nth($palette-u-cyan, 5); +$palette-u-cyan-600: nth($palette-u-cyan, 6); +$palette-u-cyan-700: nth($palette-u-cyan, 7); +$palette-u-cyan-800: nth($palette-u-cyan, 8); +$palette-u-cyan-900: nth($palette-u-cyan, 9); + + +$palette-u-purple: + "247,240,255" + "233,216,254" + "217,187,253" + "200,157,252" + "185,131,252" + "170,104,251" + "153,93,225" + "113,42,247" + "85,52,125"; + +$palette-u-purple-100: nth($palette-u-purple, 1); +$palette-u-purple-200: nth($palette-u-purple, 2); +$palette-u-purple-300: nth($palette-u-purple, 3); +$palette-u-purple-400: nth($palette-u-purple, 4); +$palette-u-purple-500: nth($palette-u-purple, 5); +$palette-u-purple-600: nth($palette-u-purple, 6); +$palette-u-purple-700: nth($palette-u-purple, 7); +$palette-u-purple-800: nth($palette-u-purple, 8); +$palette-u-purple-900: nth($palette-u-purple, 9); + + +$palette-u-gray: + "255,255,255" + "241,241,241" + "235,235,235" + "227,227,227" + "215,215,215" + "206,206,206" + "191,191,191" + "180,180,180" + "153,153,153" + "102,102,102" + "51,51,51" + "25,25,25"; + +$palette-u-gray-50: nth($palette-u-gray, 1); +$palette-u-gray-100: nth($palette-u-gray, 2); +$palette-u-gray-200: nth($palette-u-gray, 3); +$palette-u-gray-300: nth($palette-u-gray, 4); +$palette-u-gray-400: nth($palette-u-gray, 5); +$palette-u-gray-500: nth($palette-u-gray, 6); +$palette-u-gray-600: nth($palette-u-gray, 7); +$palette-u-gray-700: nth($palette-u-gray, 8); +$palette-u-gray-800: nth($palette-u-gray, 9); +$palette-u-gray-900: nth($palette-u-gray, 10); +$palette-u-gray-A100: nth($palette-u-gray, 11); +$palette-u-gray-A200: nth($palette-u-gray, 12); + + + +$color-black: "0,0,0"; +$color-white: "255,255,255"; + + +//colors.scss +$styleguide-generate-template: false !default; + +// The two possible colors for overlayed text. +$color-dark-contrast: $color-white !default; +$color-light-contrast: $color-black !default; diff --git a/scss/minxin-mixins.scss b/scss/minxin-mixins.scss new file mode 100644 index 0000000..417a343 --- /dev/null +++ b/scss/minxin-mixins.scss @@ -0,0 +1,586 @@ + +/* Typography */ + +@mixin typo-preferred-font($usePreferred: true) { + @if $usePreferred { + font-family: $preferred_font; + } +} + +@mixin typo-display-4($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 112/16 * $unit; + font-weight: 300; + line-height: 1; + letter-spacing: -0.04em; + + @if $colorContrast { + opacity: 0.54; + } +} + +@mixin typo-display-3($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 56/16 * $unit; + font-weight: 400; + line-height: 1.35; + letter-spacing: -0.02em; + + @if $colorContrast { + opacity: 0.54; + } +} + +@mixin typo-display-2($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 45/16 * $unit; + font-weight: 400; + line-height: 48/16 * $unit; + + @if $colorContrast { + opacity: 0.54; + } +} + +@mixin typo-display-1($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 34/16 * $unit; + font-weight: 400; + line-height: 40/16 * $unit; + + @if $colorContrast { + opacity: 0.54; + } +} + +@mixin typo-headline($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 24/16 * $unit; + font-weight: 400; + line-height: 32/16 * $unit; + -moz-osx-font-smoothing: grayscale; + + @if $colorContrast { + opacity: 0.87; + } +} + +@mixin typo-title($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 20/16 * $unit; + font-weight: 500; + line-height: 1; + letter-spacing: 0.02em; + + @if $colorContrast { + opacity: 0.87; + } +} + +@mixin typo-subhead($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 16/16 * $unit; + font-weight: 400; + line-height: 24/16 * $unit; + letter-spacing: 0.04em; + + @if $colorContrast { + opacity: 0.87; + } +} + +@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 16/16 * $unit; + font-weight: 400; + line-height: 28/16 * $unit; + letter-spacing: 0.04em; + + @if $colorContrast { + opacity: 0.87; + } +} + +@mixin typo-body-2($colorContrast: false, $usePreferred: false) { + @include typo-preferred-font($usePreferred); + font-size: 14/16 * $unit; + @if $usePreferred { + font-weight: 500; + } @else { + font-weight: bold; + } + line-height: 24/16 * $unit; + letter-spacing: 0; + + @if $colorContrast { + opacity: 0.87; + } +} + +@mixin typo-body-1($colorContrast: false, $usePreferred: false) { + @include typo-preferred-font($usePreferred); + font-size: 14/16 * $unit; + font-weight: 400; + line-height: 24/16 * $unit; + letter-spacing: 0; + + @if $colorContrast { + opacity: 0.87; + } +} + +@mixin typo-caption($colorContrast: false, $usePreferred: false) { + @include typo-preferred-font($usePreferred); + font-size: 12/16 * $unit; + font-weight: 400; + line-height: 1; + letter-spacing: 0; + + @if $colorContrast { + opacity: 0.54; + } +} + +@mixin typo-blockquote($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + position: relative; + font-size: 24/16 * $unit; + font-weight: 300; + font-style: italic; + line-height: 1.35; + letter-spacing: 0.08em; + + &:before { + position: absolute; + left: -0.5em; + content: '“'; + } + + &:after { + content: '”'; + margin-left: -0.05em; + } + + @if $colorContrast { + opacity: 0.54; + } +} + +@mixin typo-menu($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 14/16 * $unit; + font-weight: 500; + line-height: 1; + letter-spacing: 0; + + @if $colorContrast { + opacity: 0.87; + } +} + +@mixin typo-button($colorContrast: false, $usePreferred: true) { + @include typo-preferred-font($usePreferred); + font-size: 13/16 * $unit; + font-weight: 500; + text-transform: uppercase; + line-height: 1; + letter-spacing: 0; + + @if $colorContrast { + opacity: 0.87; + } +} + +/* Shadows */ + +// Focus shadow mixin. +@mixin focus-shadow() { + box-shadow: 0 0 8/16 * $unit rgba(0,0,0,.18),0 8/16 * $unit 16/16 * $unit rgba(0,0,0,.36); +} + +@mixin shadow-0dp() { + box-shadow: none; +} + +@mixin shadow-2dp() { + box-shadow: 0 2/16 * $unit 2/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3/16 * $unit 1/16 * $unit -2/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1/16 * $unit 5/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); + box-shadow: 0 2/16 * $unit 2/16 * $unit 0 rgb(0, 0, 0), + 0 3/16 * $unit 1/16 * $unit -2/16 * $unit rgb(0, 0, 0), + 0 1/16 * $unit 5/16 * $unit 0 rgb(0, 0, 0) \9; +} +@mixin shadow-3dp() { + box-shadow: 0 3/16 * $unit 4/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3/16 * $unit 3/16 * $unit -2/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1/16 * $unit 8/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); +} +@mixin shadow-4dp() { + box-shadow: 0 4/16 * $unit 5/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 1/16 * $unit 10/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 2/16 * $unit 4/16 * $unit -1/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); +} +@mixin shadow-6dp() { + box-shadow: 0 6/16 * $unit 10/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 1/16 * $unit 18/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 3/16 * $unit 5/16 * $unit -1/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); +} +@mixin shadow-8dp() { + box-shadow: 0 8/16 * $unit 10/16 * $unit 1/16 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3/16 * $unit 14/16 * $unit 2/16 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 5/16 * $unit 5/16 * $unit -3/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); +} + +@mixin shadow-16dp() { + box-shadow: 0 16/16 * $unit 24/16 * $unit 2/16 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 6/16 * $unit 30/16 * $unit 5/16 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 8/16 * $unit 10/16 * $unit -5/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); +} + +@mixin shadow-24dp() { + box-shadow: 0 9/16 * $unit 46/16 * $unit 8/16 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 11/16 * $unit 15/16 * $unit -7/16 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 24/16 * $unit 38/16 * $unit 3/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); +} + +/* Animations */ + +@mixin material-animation-fast-out-slow-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $animation-curve-fast-out-slow-in; +} + +@mixin material-animation-linear-out-slow-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $animation-curve-linear-out-slow-in; +} + +@mixin material-animation-fast-out-linear-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $animation-curve-fast-out-linear-in; +} + +@mixin material-animation-default($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $animation-curve-default; +} + + + +// Transitions + +@mixin transition($transition) { + -webkit-transition: $transition; + -o-transition: $transition; + transition: $transition; +} +@mixin transition-property($transition-property) { + -webkit-transition-property: $transition-property; + transition-property: $transition-property; +} +@mixin transition-delay($transition-delay) { + -webkit-transition-delay: $transition-delay; + transition-delay: $transition-delay; +} +@mixin transition-duration($transition-duration) { + -webkit-transition-duration: $transition-duration; + transition-duration: $transition-duration; +} +@mixin transition-timing-function($timing-function) { + -webkit-transition-timing-function: $timing-function; + transition-timing-function: $timing-function; +} +@mixin transition-transform($transition) { + -webkit-transition: -webkit-transform $transition; + -moz-transition: -moz-transform $transition; + -o-transition: -o-transform $transition; + transition: transform $transition; +} + + +@mixin border-top-radius($radius) { + border-top-right-radius: $radius; + border-top-left-radius: $radius; +} +@mixin border-right-radius($radius) { + border-bottom-right-radius: $radius; + border-top-right-radius: $radius; +} +@mixin border-bottom-radius($radius) { + border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; +} +@mixin border-left-radius($radius) { + border-bottom-left-radius: $radius; + border-top-left-radius: $radius; +} + +//按钮尺寸 +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { + padding: $padding-y $padding-x; + font-size: $font-size; + border-radius: $border-radius; +} + +//badge +@mixin badge-variant($color, $bg) { + color: $color; + background-color: $bg; + + &[href] { + &:hover, + &:focus { + color: $color; + // background-color: darken($bg, 10%); + } + } +} + + +//labels + +@mixin tag-styles-variant($color, $hover-color) { + background-color: $color; + + &[href] { + &:hover, + &:focus { + background-color: $hover-color; + } + } + + &.u-tag-outline { + color: $color; + background-color: transparent; + border-color: $color; + } +} + + +// Pagination + +@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { + > li { + > a { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + } + &:first-child { + > a{ + @include border-left-radius($border-radius); + } + } + &:last-child { + > a{ + @include border-right-radius($border-radius); + } + } + } + >li[role="gap"]{ + > a { + padding: $padding-vertical+1px $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + } + } +} + +//radio + +@mixin radio-styles-variant($color) { + &.is-checked{ + .u-radio-outer-circle{ + border: 1px solid $color; + } + .u-radio-inner-circle{ + background: $color; + } + } + +} +//progress + +@mixin progress-styles-variant($color,$color-opacity) { + .auxbar{ + background:none; + background-color: $color-opacity; + } + .bufferbar{ + background:none; + background-color: $color-opacity; + } + .progressbar{ + background-color: $color; + } + + +} + +//checkbox + +@mixin checkbox-styles-variant($color) { + &.is-checked{ + .u-checkbox-outline{ + border: 1px solid $color; + } + .u-checkbox-tick-outline{ + background: $color; + } + } + +} +//switch colors +@mixin switch-styles-variant($color){ + &.is-checked{ + .u-switch-track{ + background: $color; + border: 1px solid $color; + } + } +} +//switch size +@mixin switch-size($width, $height, $border-radius, $border-left) { + .u-switch-track{ + width:$width; + height:$height; + border-radius:$border-radius; + } + .u-switch-thumb{ + width:$height; + height:$height; + } + &.is-checked{ + .u-switch-thumb{ + left:$border-left; + } + } +} + +//tooltips + +@mixin tooltip-styles-variant($color) { + .tooltip-inner{ + background-color:$color !important; + } + &.bottom .tooltip-arrow{ + border-bottom-color:$color !important; + } + &.top .tooltip-arrow{ + border-top-color:$color !important; + } + &.left .tooltip-arrow{ + border-left-color:$color !important; + } + &.right .tooltip-arrow{ + border-right-color:$color !important; + } +} + +@mixin menu-styles-variant($color,$color-hover) { + .u-menu-item:hover{ + background-color:$color-hover; + a{ + color: #FFFFFF; + } + } + .u-menu-item:focus { + outline: none; + background-color: $color; + a{ + color: #FFFFFF; + } + } +} + + +// utilities +// font-weight +@mixin font-weight-light(){ + font-weight: $font-weight-light; +} +@mixin font-weight-normal(){ + font-weight: $font-weight-normal; +} +@mixin font-weight-medium(){ + font-weight: $font-weight-medium; +} +@mixin font-weight-bold(){ + font-weight: $font-weight-bold; +} + +// text +@mixin text-truncate() { + overflow: hidden; + text-overflow: ellipsis; + word-wrap: normal; /* for IE */ + white-space: nowrap; +} + +@mixin text-break() { + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + word-wrap: break-word; + white-space: normal; +} + +@mixin text-nowrap() { + white-space: nowrap; +} + + +// visibility + +@mixin responsive-visibility() { + display: block !important; + table { display: table !important; } + tr { display: table-row !important; } + th , + td { display: table-cell !important; } +} + +@mixin responsive-invisibility() { + display: none !important; +} + + + +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +@mixin clearfix() { + &:before, + &:after { + content: " "; // 1 + display: table; // 2 + } + &:after { + clear: both; + } +} + + +@mixin hide-text() { + font: "0/0" a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +@mixin text-hide() { + @include hide-text(); +} + + +// nav + +@mixin navbar-vertical-align($element-height) { + margin-top: (($navbar-height - $element-height) / 2); + margin-bottom: (($navbar-height - $element-height) / 2); +} diff --git a/scss/minxin-palette.scss b/scss/minxin-palette.scss new file mode 100644 index 0000000..51cad06 --- /dev/null +++ b/scss/minxin-palette.scss @@ -0,0 +1,2906 @@ +@import "minxin-variables"; + +@if $trim-color-classes == false { + // Red + + .red { + color: unquote("rgb(#{$palette-red-500})") !important; + } + + .bg-red { + background-color: unquote("rgb(#{$palette-red-500})") !important; + } + + .red-50 { + color: unquote("rgb(#{$palette-red-50})") !important; + } + + .bg-red-50 { + background-color: unquote("rgb(#{$palette-red-50})") !important; + } + + .red-100 { + color: unquote("rgb(#{$palette-red-100})") !important; + } + + .bg-red-100 { + background-color: unquote("rgb(#{$palette-red-100})") !important; + } + + .red-200 { + color: unquote("rgb(#{$palette-red-200})") !important; + } + + .bg-red-200 { + background-color: unquote("rgb(#{$palette-red-200})") !important; + } + + .red-300 { + color: unquote("rgb(#{$palette-red-300})") !important; + } + + .bg-red-300 { + background-color: unquote("rgb(#{$palette-red-300})") !important; + } + + .red-400 { + color: unquote("rgb(#{$palette-red-400})") !important; + } + + .bg-red-400 { + background-color: unquote("rgb(#{$palette-red-400})") !important; + } + + .red-500 { + color: unquote("rgb(#{$palette-red-500})") !important; + } + + .bg-red-500 { + background-color: unquote("rgb(#{$palette-red-500})") !important; + } + + .red-600 { + color: unquote("rgb(#{$palette-red-600})") !important; + } + + .bg-red-600 { + background-color: unquote("rgb(#{$palette-red-600})") !important; + } + + .red-700 { + color: unquote("rgb(#{$palette-red-700})") !important; + } + + .bg-red-700 { + background-color: unquote("rgb(#{$palette-red-700})") !important; + } + + .red-800 { + color: unquote("rgb(#{$palette-red-800})") !important; + } + + .bg-red-800 { + background-color: unquote("rgb(#{$palette-red-800})") !important; + } + + .red-900 { + color: unquote("rgb(#{$palette-red-900})") !important; + } + + .bg-red-900 { + background-color: unquote("rgb(#{$palette-red-900})") !important; + } + + .red-A100 { + color: unquote("rgb(#{$palette-red-A100})") !important; + } + + .bg-red-A100 { + background-color: unquote("rgb(#{$palette-red-A100})") !important; + } + + .red-A200 { + color: unquote("rgb(#{$palette-red-A200})") !important; + } + + .bg-red-A200 { + background-color: unquote("rgb(#{$palette-red-A200})") !important; + } + + .red-A400 { + color: unquote("rgb(#{$palette-red-A400})") !important; + } + + .bg-red-A400 { + background-color: unquote("rgb(#{$palette-red-A400})") !important; + } + + .red-A700 { + color: unquote("rgb(#{$palette-red-A700})") !important; + } + + .bg-red-A700 { + background-color: unquote("rgb(#{$palette-red-A700})") !important; + } + + // Pink + + .pink { + color: unquote("rgb(#{$palette-pink-500})") !important; + } + + .bg-pink { + background-color: unquote("rgb(#{$palette-pink-500})") !important; + } + + .pink-50 { + color: unquote("rgb(#{$palette-pink-50})") !important; + } + + .bg-pink-50 { + background-color: unquote("rgb(#{$palette-pink-50})") !important; + } + + .pink-100 { + color: unquote("rgb(#{$palette-pink-100})") !important; + } + + .bg-pink-100 { + background-color: unquote("rgb(#{$palette-pink-100})") !important; + } + + .pink-200 { + color: unquote("rgb(#{$palette-pink-200})") !important; + } + + .bg-pink-200 { + background-color: unquote("rgb(#{$palette-pink-200})") !important; + } + + .pink-300 { + color: unquote("rgb(#{$palette-pink-300})") !important; + } + + .bg-pink-300 { + background-color: unquote("rgb(#{$palette-pink-300})") !important; + } + + .pink-400 { + color: unquote("rgb(#{$palette-pink-400})") !important; + } + + .bg-pink-400 { + background-color: unquote("rgb(#{$palette-pink-400})") !important; + } + + .pink-500 { + color: unquote("rgb(#{$palette-pink-500})") !important; + } + + .bg-pink-500 { + background-color: unquote("rgb(#{$palette-pink-500})") !important; + } + + .pink-600 { + color: unquote("rgb(#{$palette-pink-600})") !important; + } + + .bg-pink-600 { + background-color: unquote("rgb(#{$palette-pink-600})") !important; + } + + .pink-700 { + color: unquote("rgb(#{$palette-pink-700})") !important; + } + + .bg-pink-700 { + background-color: unquote("rgb(#{$palette-pink-700})") !important; + } + + .pink-800 { + color: unquote("rgb(#{$palette-pink-800})") !important; + } + + .bg-pink-800 { + background-color: unquote("rgb(#{$palette-pink-800})") !important; + } + + .pink-900 { + color: unquote("rgb(#{$palette-pink-900})") !important; + } + + .bg-pink-900 { + background-color: unquote("rgb(#{$palette-pink-900})") !important; + } + + .pink-A100 { + color: unquote("rgb(#{$palette-pink-A100})") !important; + } + + .bg-pink-A100 { + background-color: unquote("rgb(#{$palette-pink-A100})") !important; + } + + .pink-A200 { + color: unquote("rgb(#{$palette-pink-A200})") !important; + } + + .bg-pink-A200 { + background-color: unquote("rgb(#{$palette-pink-A200})") !important; + } + + .pink-A400 { + color: unquote("rgb(#{$palette-pink-A400})") !important; + } + + .bg-pink-A400 { + background-color: unquote("rgb(#{$palette-pink-A400})") !important; + } + + .pink-A700 { + color: unquote("rgb(#{$palette-pink-A700})") !important; + } + + .bg-pink-A700 { + background-color: unquote("rgb(#{$palette-pink-A700})") !important; + } + + // Purple + + .purple { + color: unquote("rgb(#{$palette-purple-500})") !important; + } + + .bg-purple { + background-color: unquote("rgb(#{$palette-purple-500})") !important; + } + + .purple-50 { + color: unquote("rgb(#{$palette-purple-50})") !important; + } + + .bg-purple-50 { + background-color: unquote("rgb(#{$palette-purple-50})") !important; + } + + .purple-100 { + color: unquote("rgb(#{$palette-purple-100})") !important; + } + + .bg-purple-100 { + background-color: unquote("rgb(#{$palette-purple-100})") !important; + } + + .purple-200 { + color: unquote("rgb(#{$palette-purple-200})") !important; + } + + .bg-purple-200 { + background-color: unquote("rgb(#{$palette-purple-200})") !important; + } + + .purple-300 { + color: unquote("rgb(#{$palette-purple-300})") !important; + } + + .bg-purple-300 { + background-color: unquote("rgb(#{$palette-purple-300})") !important; + } + + .purple-400 { + color: unquote("rgb(#{$palette-purple-400})") !important; + } + + .bg-purple-400 { + background-color: unquote("rgb(#{$palette-purple-400})") !important; + } + + .purple-500 { + color: unquote("rgb(#{$palette-purple-500})") !important; + } + + .bg-purple-500 { + background-color: unquote("rgb(#{$palette-purple-500})") !important; + } + + .purple-600 { + color: unquote("rgb(#{$palette-purple-600})") !important; + } + + .bg-purple-600 { + background-color: unquote("rgb(#{$palette-purple-600})") !important; + } + + .purple-700 { + color: unquote("rgb(#{$palette-purple-700})") !important; + } + + .bg-purple-700 { + background-color: unquote("rgb(#{$palette-purple-700})") !important; + } + + .purple-800 { + color: unquote("rgb(#{$palette-purple-800})") !important; + } + + .bg-purple-800 { + background-color: unquote("rgb(#{$palette-purple-800})") !important; + } + + .purple-900 { + color: unquote("rgb(#{$palette-purple-900})") !important; + } + + .bg-purple-900 { + background-color: unquote("rgb(#{$palette-purple-900})") !important; + } + + .purple-A100 { + color: unquote("rgb(#{$palette-purple-A100})") !important; + } + + .bg-purple-A100 { + background-color: unquote("rgb(#{$palette-purple-A100})") !important; + } + + .purple-A200 { + color: unquote("rgb(#{$palette-purple-A200})") !important; + } + + .bg-purple-A200 { + background-color: unquote("rgb(#{$palette-purple-A200})") !important; + } + + .purple-A400 { + color: unquote("rgb(#{$palette-purple-A400})") !important; + } + + .bg-purple-A400 { + background-color: unquote("rgb(#{$palette-purple-A400})") !important; + } + + .purple-A700 { + color: unquote("rgb(#{$palette-purple-A700})") !important; + } + + .bg-purple-A700 { + background-color: unquote("rgb(#{$palette-purple-A700})") !important; + } + + // Deep Purple. + + .deep-purple { + color: unquote("rgb(#{$palette-deep-purple-500})") !important; + } + + .bg-deep-purple { + background-color: unquote("rgb(#{$palette-deep-purple-500})") !important; + } + + .deep-purple-50 { + color: unquote("rgb(#{$palette-deep-purple-50})") !important; + } + + .bg-deep-purple-50 { + background-color: unquote("rgb(#{$palette-deep-purple-50})") !important; + } + + .deep-purple-100 { + color: unquote("rgb(#{$palette-deep-purple-100})") !important; + } + + .bg-deep-purple-100 { + background-color: unquote("rgb(#{$palette-deep-purple-100})") !important; + } + + .deep-purple-200 { + color: unquote("rgb(#{$palette-deep-purple-200})") !important; + } + + .bg-deep-purple-200 { + background-color: unquote("rgb(#{$palette-deep-purple-200})") !important; + } + + .deep-purple-300 { + color: unquote("rgb(#{$palette-deep-purple-300})") !important; + } + + .bg-deep-purple-300 { + background-color: unquote("rgb(#{$palette-deep-purple-300})") !important; + } + + .deep-purple-400 { + color: unquote("rgb(#{$palette-deep-purple-400})") !important; + } + + .bg-deep-purple-400 { + background-color: unquote("rgb(#{$palette-deep-purple-400})") !important; + } + + .deep-purple-500 { + color: unquote("rgb(#{$palette-deep-purple-500})") !important; + } + + .bg-deep-purple-500 { + background-color: unquote("rgb(#{$palette-deep-purple-500})") !important; + } + + .deep-purple-600 { + color: unquote("rgb(#{$palette-deep-purple-600})") !important; + } + + .bg-deep-purple-600 { + background-color: unquote("rgb(#{$palette-deep-purple-600})") !important; + } + + .deep-purple-700 { + color: unquote("rgb(#{$palette-deep-purple-700})") !important; + } + + .bg-deep-purple-700 { + background-color: unquote("rgb(#{$palette-deep-purple-700})") !important; + } + + .deep-purple-800 { + color: unquote("rgb(#{$palette-deep-purple-800})") !important; + } + + .bg-deep-purple-800 { + background-color: unquote("rgb(#{$palette-deep-purple-800})") !important; + } + + .deep-purple-900 { + color: unquote("rgb(#{$palette-deep-purple-900})") !important; + } + + .bg-deep-purple-900 { + background-color: unquote("rgb(#{$palette-deep-purple-900})") !important; + } + + .deep-purple-A100 { + color: unquote("rgb(#{$palette-deep-purple-A100})") !important; + } + + .bg-deep-purple-A100 { + background-color: unquote("rgb(#{$palette-deep-purple-A100})") !important; + } + + .deep-purple-A200 { + color: unquote("rgb(#{$palette-deep-purple-A200})") !important; + } + + .bg-deep-purple-A200 { + background-color: unquote("rgb(#{$palette-deep-purple-A200})") !important; + } + + .deep-purple-A400 { + color: unquote("rgb(#{$palette-deep-purple-A400})") !important; + } + + .bg-deep-purple-A400 { + background-color: unquote("rgb(#{$palette-deep-purple-A400})") !important; + } + + .deep-purple-A700 { + color: unquote("rgb(#{$palette-deep-purple-A700})") !important; + } + + .bg-deep-purple-A700 { + background-color: unquote("rgb(#{$palette-deep-purple-A700})") !important; + } + + // Indigo + + .indigo { + color: unquote("rgb(#{$palette-indigo-500})") !important; + } + + .bg-indigo { + background-color: unquote("rgb(#{$palette-indigo-500})") !important; + } + + .indigo-50 { + color: unquote("rgb(#{$palette-indigo-50})") !important; + } + + .bg-indigo-50 { + background-color: unquote("rgb(#{$palette-indigo-50})") !important; + } + + .indigo-100 { + color: unquote("rgb(#{$palette-indigo-100})") !important; + } + + .bg-indigo-100 { + background-color: unquote("rgb(#{$palette-indigo-100})") !important; + } + + .indigo-200 { + color: unquote("rgb(#{$palette-indigo-200})") !important; + } + + .bg-indigo-200 { + background-color: unquote("rgb(#{$palette-indigo-200})") !important; + } + + .indigo-300 { + color: unquote("rgb(#{$palette-indigo-300})") !important; + } + + .bg-indigo-300 { + background-color: unquote("rgb(#{$palette-indigo-300})") !important; + } + + .indigo-400 { + color: unquote("rgb(#{$palette-indigo-400})") !important; + } + + .bg-indigo-400 { + background-color: unquote("rgb(#{$palette-indigo-400})") !important; + } + + .indigo-500 { + color: unquote("rgb(#{$palette-indigo-500})") !important; + } + + .bg-indigo-500 { + background-color: unquote("rgb(#{$palette-indigo-500})") !important; + } + + .indigo-600 { + color: unquote("rgb(#{$palette-indigo-600})") !important; + } + + .bg-indigo-600 { + background-color: unquote("rgb(#{$palette-indigo-600})") !important; + } + + .indigo-700 { + color: unquote("rgb(#{$palette-indigo-700})") !important; + } + + .bg-indigo-700 { + background-color: unquote("rgb(#{$palette-indigo-700})") !important; + } + + .indigo-800 { + color: unquote("rgb(#{$palette-indigo-800})") !important; + } + + .bg-indigo-800 { + background-color: unquote("rgb(#{$palette-indigo-800})") !important; + } + + .indigo-900 { + color: unquote("rgb(#{$palette-indigo-900})") !important; + } + + .bg-indigo-900 { + background-color: unquote("rgb(#{$palette-indigo-900})") !important; + } + + .indigo-A100 { + color: unquote("rgb(#{$palette-indigo-A100})") !important; + } + + .bg-indigo-A100 { + background-color: unquote("rgb(#{$palette-indigo-A100})") !important; + } + + .indigo-A200 { + color: unquote("rgb(#{$palette-indigo-A200})") !important; + } + + .bg-indigo-A200 { + background-color: unquote("rgb(#{$palette-indigo-A200})") !important; + } + + .indigo-A400 { + color: unquote("rgb(#{$palette-indigo-A400})") !important; + } + + .bg-indigo-A400 { + background-color: unquote("rgb(#{$palette-indigo-A400})") !important; + } + + .indigo-A700 { + color: unquote("rgb(#{$palette-indigo-A700})") !important; + } + + .bg-indigo-A700 { + background-color: unquote("rgb(#{$palette-indigo-A700})") !important; + } + + // Blue + + .blue { + color: unquote("rgb(#{$palette-blue-500})") !important; + } + + .bg-blue { + background-color: unquote("rgb(#{$palette-blue-500})") !important; + } + + .blue-50 { + color: unquote("rgb(#{$palette-blue-50})") !important; + } + + .bg-blue-50 { + background-color: unquote("rgb(#{$palette-blue-50})") !important; + } + + .blue-100 { + color: unquote("rgb(#{$palette-blue-100})") !important; + } + + .bg-blue-100 { + background-color: unquote("rgb(#{$palette-blue-100})") !important; + } + + .blue-200 { + color: unquote("rgb(#{$palette-blue-200})") !important; + } + + .bg-blue-200 { + background-color: unquote("rgb(#{$palette-blue-200})") !important; + } + + .blue-300 { + color: unquote("rgb(#{$palette-blue-300})") !important; + } + + .bg-blue-300 { + background-color: unquote("rgb(#{$palette-blue-300})") !important; + } + + .blue-400 { + color: unquote("rgb(#{$palette-blue-400})") !important; + } + + .bg-blue-400 { + background-color: unquote("rgb(#{$palette-blue-400})") !important; + } + + .blue-500 { + color: unquote("rgb(#{$palette-blue-500})") !important; + } + + .bg-blue-500 { + background-color: unquote("rgb(#{$palette-blue-500})") !important; + } + + .blue-600 { + color: unquote("rgb(#{$palette-blue-600})") !important; + } + + .bg-blue-600 { + background-color: unquote("rgb(#{$palette-blue-600})") !important; + } + + .blue-700 { + color: unquote("rgb(#{$palette-blue-700})") !important; + } + + .bg-blue-700 { + background-color: unquote("rgb(#{$palette-blue-700})") !important; + } + + .blue-800 { + color: unquote("rgb(#{$palette-blue-800})") !important; + } + + .bg-blue-800 { + background-color: unquote("rgb(#{$palette-blue-800})") !important; + } + + .blue-900 { + color: unquote("rgb(#{$palette-blue-900})") !important; + } + + .bg-blue-900 { + background-color: unquote("rgb(#{$palette-blue-900})") !important; + } + + .blue-A100 { + color: unquote("rgb(#{$palette-blue-A100})") !important; + } + + .bg-blue-A100 { + background-color: unquote("rgb(#{$palette-blue-A100})") !important; + } + + .blue-A200 { + color: unquote("rgb(#{$palette-blue-A200})") !important; + } + + .bg-blue-A200 { + background-color: unquote("rgb(#{$palette-blue-A200})") !important; + } + + .blue-A400 { + color: unquote("rgb(#{$palette-blue-A400})") !important; + } + + .bg-blue-A400 { + background-color: unquote("rgb(#{$palette-blue-A400})") !important; + } + + .blue-A700 { + color: unquote("rgb(#{$palette-blue-A700})") !important; + } + + .bg-blue-A700 { + background-color: unquote("rgb(#{$palette-blue-A700})") !important; + } + + // Light Blue + + .light-blue { + color: unquote("rgb(#{$palette-light-blue-500})") !important; + } + + .bg-light-blue { + background-color: unquote("rgb(#{$palette-light-blue-500})") !important; + } + + .light-blue-50 { + color: unquote("rgb(#{$palette-light-blue-50})") !important; + } + + .bg-light-blue-50 { + background-color: unquote("rgb(#{$palette-light-blue-50})") !important; + } + + .light-blue-100 { + color: unquote("rgb(#{$palette-light-blue-100})") !important; + } + + .bg-light-blue-100 { + background-color: unquote("rgb(#{$palette-light-blue-100})") !important; + } + + .light-blue-200 { + color: unquote("rgb(#{$palette-light-blue-200})") !important; + } + + .bg-light-blue-200 { + background-color: unquote("rgb(#{$palette-light-blue-200})") !important; + } + + .light-blue-300 { + color: unquote("rgb(#{$palette-light-blue-300})") !important; + } + + .bg-light-blue-300 { + background-color: unquote("rgb(#{$palette-light-blue-300})") !important; + } + + .light-blue-400 { + color: unquote("rgb(#{$palette-light-blue-400})") !important; + } + + .bg-light-blue-400 { + background-color: unquote("rgb(#{$palette-light-blue-400})") !important; + } + + .light-blue-500 { + color: unquote("rgb(#{$palette-light-blue-500})") !important; + } + + .bg-light-blue-500 { + background-color: unquote("rgb(#{$palette-light-blue-500})") !important; + } + + .light-blue-600 { + color: unquote("rgb(#{$palette-light-blue-600})") !important; + } + + .bg-light-blue-600 { + background-color: unquote("rgb(#{$palette-light-blue-600})") !important; + } + + .light-blue-700 { + color: unquote("rgb(#{$palette-light-blue-700})") !important; + } + + .bg-light-blue-700 { + background-color: unquote("rgb(#{$palette-light-blue-700})") !important; + } + + .light-blue-800 { + color: unquote("rgb(#{$palette-light-blue-800})") !important; + } + + .bg-light-blue-800 { + background-color: unquote("rgb(#{$palette-light-blue-800})") !important; + } + + .light-blue-900 { + color: unquote("rgb(#{$palette-light-blue-900})") !important; + } + + .bg-light-blue-900 { + background-color: unquote("rgb(#{$palette-light-blue-900})") !important; + } + + .light-blue-A100 { + color: unquote("rgb(#{$palette-light-blue-A100})") !important; + } + + .bg-light-blue-A100 { + background-color: unquote("rgb(#{$palette-light-blue-A100})") !important; + } + + .light-blue-A200 { + color: unquote("rgb(#{$palette-light-blue-A200})") !important; + } + + .bg-light-blue-A200 { + background-color: unquote("rgb(#{$palette-light-blue-A200})") !important; + } + + .light-blue-A400 { + color: unquote("rgb(#{$palette-light-blue-A400})") !important; + } + + .bg-light-blue-A400 { + background-color: unquote("rgb(#{$palette-light-blue-A400})") !important; + } + + .light-blue-A700 { + color: unquote("rgb(#{$palette-light-blue-A700})") !important; + } + + .bg-light-blue-A700 { + background-color: unquote("rgb(#{$palette-light-blue-A700})") !important; + } + + // Cyan + + .cyan { + color: unquote("rgb(#{$palette-cyan-500})") !important; + } + + .bg-cyan { + background-color: unquote("rgb(#{$palette-cyan-500})") !important; + } + + .cyan-50 { + color: unquote("rgb(#{$palette-cyan-50})") !important; + } + + .bg-cyan-50 { + background-color: unquote("rgb(#{$palette-cyan-50})") !important; + } + + .cyan-100 { + color: unquote("rgb(#{$palette-cyan-100})") !important; + } + + .bg-cyan-100 { + background-color: unquote("rgb(#{$palette-cyan-100})") !important; + } + + .cyan-200 { + color: unquote("rgb(#{$palette-cyan-200})") !important; + } + + .bg-cyan-200 { + background-color: unquote("rgb(#{$palette-cyan-200})") !important; + } + + .cyan-300 { + color: unquote("rgb(#{$palette-cyan-300})") !important; + } + + .bg-cyan-300 { + background-color: unquote("rgb(#{$palette-cyan-300})") !important; + } + + .cyan-400 { + color: unquote("rgb(#{$palette-cyan-400})") !important; + } + + .bg-cyan-400 { + background-color: unquote("rgb(#{$palette-cyan-400})") !important; + } + + .cyan-500 { + color: unquote("rgb(#{$palette-cyan-500})") !important; + } + + .bg-cyan-500 { + background-color: unquote("rgb(#{$palette-cyan-500})") !important; + } + + .cyan-600 { + color: unquote("rgb(#{$palette-cyan-600})") !important; + } + + .bg-cyan-600 { + background-color: unquote("rgb(#{$palette-cyan-600})") !important; + } + + .cyan-700 { + color: unquote("rgb(#{$palette-cyan-700})") !important; + } + + .bg-cyan-700 { + background-color: unquote("rgb(#{$palette-cyan-700})") !important; + } + + .cyan-800 { + color: unquote("rgb(#{$palette-cyan-800})") !important; + } + + .bg-cyan-800 { + background-color: unquote("rgb(#{$palette-cyan-800})") !important; + } + + .cyan-900 { + color: unquote("rgb(#{$palette-cyan-900})") !important; + } + + .bg-cyan-900 { + background-color: unquote("rgb(#{$palette-cyan-900})") !important; + } + + .cyan-A100 { + color: unquote("rgb(#{$palette-cyan-A100})") !important; + } + + .bg-cyan-A100 { + background-color: unquote("rgb(#{$palette-cyan-A100})") !important; + } + + .cyan-A200 { + color: unquote("rgb(#{$palette-cyan-A200})") !important; + } + + .bg-cyan-A200 { + background-color: unquote("rgb(#{$palette-cyan-A200})") !important; + } + + .cyan-A400 { + color: unquote("rgb(#{$palette-cyan-A400})") !important; + } + + .bg-cyan-A400 { + background-color: unquote("rgb(#{$palette-cyan-A400})") !important; + } + + .cyan-A700 { + color: unquote("rgb(#{$palette-cyan-A700})") !important; + } + + .bg-cyan-A700 { + background-color: unquote("rgb(#{$palette-cyan-A700})") !important; + } + + // Teal + + .teal { + color: unquote("rgb(#{$palette-teal-500})") !important; + } + + .bg-teal { + background-color: unquote("rgb(#{$palette-teal-500})") !important; + } + + .teal-50 { + color: unquote("rgb(#{$palette-teal-50})") !important; + } + + .bg-teal-50 { + background-color: unquote("rgb(#{$palette-teal-50})") !important; + } + + .teal-100 { + color: unquote("rgb(#{$palette-teal-100})") !important; + } + + .bg-teal-100 { + background-color: unquote("rgb(#{$palette-teal-100})") !important; + } + + .teal-200 { + color: unquote("rgb(#{$palette-teal-200})") !important; + } + + .bg-teal-200 { + background-color: unquote("rgb(#{$palette-teal-200})") !important; + } + + .teal-300 { + color: unquote("rgb(#{$palette-teal-300})") !important; + } + + .bg-teal-300 { + background-color: unquote("rgb(#{$palette-teal-300})") !important; + } + + .teal-400 { + color: unquote("rgb(#{$palette-teal-400})") !important; + } + + .bg-teal-400 { + background-color: unquote("rgb(#{$palette-teal-400})") !important; + } + + .teal-500 { + color: unquote("rgb(#{$palette-teal-500})") !important; + } + + .bg-teal-500 { + background-color: unquote("rgb(#{$palette-teal-500})") !important; + } + + .teal-600 { + color: unquote("rgb(#{$palette-teal-600})") !important; + } + + .bg-teal-600 { + background-color: unquote("rgb(#{$palette-teal-600})") !important; + } + + .teal-700 { + color: unquote("rgb(#{$palette-teal-700})") !important; + } + + .bg-teal-700 { + background-color: unquote("rgb(#{$palette-teal-700})") !important; + } + + .teal-800 { + color: unquote("rgb(#{$palette-teal-800})") !important; + } + + .bg-teal-800 { + background-color: unquote("rgb(#{$palette-teal-800})") !important; + } + + .teal-900 { + color: unquote("rgb(#{$palette-teal-900})") !important; + } + + .bg-teal-900 { + background-color: unquote("rgb(#{$palette-teal-900})") !important; + } + + .teal-A100 { + color: unquote("rgb(#{$palette-teal-A100})") !important; + } + + .bg-teal-A100 { + background-color: unquote("rgb(#{$palette-teal-A100})") !important; + } + + .teal-A200 { + color: unquote("rgb(#{$palette-teal-A200})") !important; + } + + .bg-teal-A200 { + background-color: unquote("rgb(#{$palette-teal-A200})") !important; + } + + .teal-A400 { + color: unquote("rgb(#{$palette-teal-A400})") !important; + } + + .bg-teal-A400 { + background-color: unquote("rgb(#{$palette-teal-A400})") !important; + } + + .teal-A700 { + color: unquote("rgb(#{$palette-teal-A700})") !important; + } + + .bg-teal-A700 { + background-color: unquote("rgb(#{$palette-teal-A700})") !important; + } + + // Green + + .green { + color: unquote("rgb(#{$palette-green-500})") !important; + } + + .bg-green { + background-color: unquote("rgb(#{$palette-green-500})") !important; + } + + .green-50 { + color: unquote("rgb(#{$palette-green-50})") !important; + } + + .bg-green-50 { + background-color: unquote("rgb(#{$palette-green-50})") !important; + } + + .green-100 { + color: unquote("rgb(#{$palette-green-100})") !important; + } + + .bg-green-100 { + background-color: unquote("rgb(#{$palette-green-100})") !important; + } + + .green-200 { + color: unquote("rgb(#{$palette-green-200})") !important; + } + + .bg-green-200 { + background-color: unquote("rgb(#{$palette-green-200})") !important; + } + + .green-300 { + color: unquote("rgb(#{$palette-green-300})") !important; + } + + .bg-green-300 { + background-color: unquote("rgb(#{$palette-green-300})") !important; + } + + .green-400 { + color: unquote("rgb(#{$palette-green-400})") !important; + } + + .bg-green-400 { + background-color: unquote("rgb(#{$palette-green-400})") !important; + } + + .green-500 { + color: unquote("rgb(#{$palette-green-500})") !important; + } + + .bg-green-500 { + background-color: unquote("rgb(#{$palette-green-500})") !important; + } + + .green-600 { + color: unquote("rgb(#{$palette-green-600})") !important; + } + + .bg-green-600 { + background-color: unquote("rgb(#{$palette-green-600})") !important; + } + + .green-700 { + color: unquote("rgb(#{$palette-green-700})") !important; + } + + .bg-green-700 { + background-color: unquote("rgb(#{$palette-green-700})") !important; + } + + .green-800 { + color: unquote("rgb(#{$palette-green-800})") !important; + } + + .bg-green-800 { + background-color: unquote("rgb(#{$palette-green-800})") !important; + } + + .green-900 { + color: unquote("rgb(#{$palette-green-900})") !important; + } + + .bg-green-900 { + background-color: unquote("rgb(#{$palette-green-900})") !important; + } + + .green-A100 { + color: unquote("rgb(#{$palette-green-A100})") !important; + } + + .bg-green-A100 { + background-color: unquote("rgb(#{$palette-green-A100})") !important; + } + + .green-A200 { + color: unquote("rgb(#{$palette-green-A200})") !important; + } + + .bg-green-A200 { + background-color: unquote("rgb(#{$palette-green-A200})") !important; + } + + .green-A400 { + color: unquote("rgb(#{$palette-green-A400})") !important; + } + + .bg-green-A400 { + background-color: unquote("rgb(#{$palette-green-A400})") !important; + } + + .green-A700 { + color: unquote("rgb(#{$palette-green-A700})") !important; + } + + .bg-green-A700 { + background-color: unquote("rgb(#{$palette-green-A700})") !important; + } + + // Light Green + + .light-green { + color: unquote("rgb(#{$palette-light-green-500})") !important; + } + + .bg-light-green { + background-color: unquote("rgb(#{$palette-light-green-500})") !important; + } + + .light-green-50 { + color: unquote("rgb(#{$palette-light-green-50})") !important; + } + + .bg-light-green-50 { + background-color: unquote("rgb(#{$palette-light-green-50})") !important; + } + + .light-green-100 { + color: unquote("rgb(#{$palette-light-green-100})") !important; + } + + .bg-light-green-100 { + background-color: unquote("rgb(#{$palette-light-green-100})") !important; + } + + .light-green-200 { + color: unquote("rgb(#{$palette-light-green-200})") !important; + } + + .bg-light-green-200 { + background-color: unquote("rgb(#{$palette-light-green-200})") !important; + } + + .light-green-300 { + color: unquote("rgb(#{$palette-light-green-300})") !important; + } + + .bg-light-green-300 { + background-color: unquote("rgb(#{$palette-light-green-300})") !important; + } + + .light-green-400 { + color: unquote("rgb(#{$palette-light-green-400})") !important; + } + + .bg-light-green-400 { + background-color: unquote("rgb(#{$palette-light-green-400})") !important; + } + + .light-green-500 { + color: unquote("rgb(#{$palette-light-green-500})") !important; + } + + .bg-light-green-500 { + background-color: unquote("rgb(#{$palette-light-green-500})") !important; + } + + .light-green-600 { + color: unquote("rgb(#{$palette-light-green-600})") !important; + } + + .bg-light-green-600 { + background-color: unquote("rgb(#{$palette-light-green-600})") !important; + } + + .light-green-700 { + color: unquote("rgb(#{$palette-light-green-700})") !important; + } + + .bg-light-green-700 { + background-color: unquote("rgb(#{$palette-light-green-700})") !important; + } + + .light-green-800 { + color: unquote("rgb(#{$palette-light-green-800})") !important; + } + + .bg-light-green-800 { + background-color: unquote("rgb(#{$palette-light-green-800})") !important; + } + + .light-green-900 { + color: unquote("rgb(#{$palette-light-green-900})") !important; + } + + .bg-light-green-900 { + background-color: unquote("rgb(#{$palette-light-green-900})") !important; + } + + .light-green-A100 { + color: unquote("rgb(#{$palette-light-green-A100})") !important; + } + + .bg-light-green-A100 { + background-color: unquote("rgb(#{$palette-light-green-A100})") !important; + } + + .light-green-A200 { + color: unquote("rgb(#{$palette-light-green-A200})") !important; + } + + .bg-light-green-A200 { + background-color: unquote("rgb(#{$palette-light-green-A200})") !important; + } + + .light-green-A400 { + color: unquote("rgb(#{$palette-light-green-A400})") !important; + } + + .bg-light-green-A400 { + background-color: unquote("rgb(#{$palette-light-green-A400})") !important; + } + + .light-green-A700 { + color: unquote("rgb(#{$palette-light-green-A700})") !important; + } + + .bg-light-green-A700 { + background-color: unquote("rgb(#{$palette-light-green-A700})") !important; + } + + // Lime + + .lime { + color: unquote("rgb(#{$palette-lime-500})") !important; + } + + .bg-lime { + background-color: unquote("rgb(#{$palette-lime-500})") !important; + } + + .lime-50 { + color: unquote("rgb(#{$palette-lime-50})") !important; + } + + .bg-lime-50 { + background-color: unquote("rgb(#{$palette-lime-50})") !important; + } + + .lime-100 { + color: unquote("rgb(#{$palette-lime-100})") !important; + } + + .bg-lime-100 { + background-color: unquote("rgb(#{$palette-lime-100})") !important; + } + + .lime-200 { + color: unquote("rgb(#{$palette-lime-200})") !important; + } + + .bg-lime-200 { + background-color: unquote("rgb(#{$palette-lime-200})") !important; + } + + .lime-300 { + color: unquote("rgb(#{$palette-lime-300})") !important; + } + + .bg-lime-300 { + background-color: unquote("rgb(#{$palette-lime-300})") !important; + } + + .lime-400 { + color: unquote("rgb(#{$palette-lime-400})") !important; + } + + .bg-lime-400 { + background-color: unquote("rgb(#{$palette-lime-400})") !important; + } + + .lime-500 { + color: unquote("rgb(#{$palette-lime-500})") !important; + } + + .bg-lime-500 { + background-color: unquote("rgb(#{$palette-lime-500})") !important; + } + + .lime-600 { + color: unquote("rgb(#{$palette-lime-600})") !important; + } + + .bg-lime-600 { + background-color: unquote("rgb(#{$palette-lime-600})") !important; + } + + .lime-700 { + color: unquote("rgb(#{$palette-lime-700})") !important; + } + + .bg-lime-700 { + background-color: unquote("rgb(#{$palette-lime-700})") !important; + } + + .lime-800 { + color: unquote("rgb(#{$palette-lime-800})") !important; + } + + .bg-lime-800 { + background-color: unquote("rgb(#{$palette-lime-800})") !important; + } + + .lime-900 { + color: unquote("rgb(#{$palette-lime-900})") !important; + } + + .bg-lime-900 { + background-color: unquote("rgb(#{$palette-lime-900})") !important; + } + + .lime-A100 { + color: unquote("rgb(#{$palette-lime-A100})") !important; + } + + .bg-lime-A100 { + background-color: unquote("rgb(#{$palette-lime-A100})") !important; + } + + .lime-A200 { + color: unquote("rgb(#{$palette-lime-A200})") !important; + } + + .bg-lime-A200 { + background-color: unquote("rgb(#{$palette-lime-A200})") !important; + } + + .lime-A400 { + color: unquote("rgb(#{$palette-lime-A400})") !important; + } + + .bg-lime-A400 { + background-color: unquote("rgb(#{$palette-lime-A400})") !important; + } + + .lime-A700 { + color: unquote("rgb(#{$palette-lime-A700})") !important; + } + + .bg-lime-A700 { + background-color: unquote("rgb(#{$palette-lime-A700})") !important; + } + + // Yellow + + .yellow { + color: unquote("rgb(#{$palette-yellow-500})") !important; + } + + .bg-yellow { + background-color: unquote("rgb(#{$palette-yellow-500})") !important; + } + + .yellow-50 { + color: unquote("rgb(#{$palette-yellow-50})") !important; + } + + .bg-yellow-50 { + background-color: unquote("rgb(#{$palette-yellow-50})") !important; + } + + .yellow-100 { + color: unquote("rgb(#{$palette-yellow-100})") !important; + } + + .bg-yellow-100 { + background-color: unquote("rgb(#{$palette-yellow-100})") !important; + } + + .yellow-200 { + color: unquote("rgb(#{$palette-yellow-200})") !important; + } + + .bg-yellow-200 { + background-color: unquote("rgb(#{$palette-yellow-200})") !important; + } + + .yellow-300 { + color: unquote("rgb(#{$palette-yellow-300})") !important; + } + + .bg-yellow-300 { + background-color: unquote("rgb(#{$palette-yellow-300})") !important; + } + + .yellow-400 { + color: unquote("rgb(#{$palette-yellow-400})") !important; + } + + .bg-yellow-400 { + background-color: unquote("rgb(#{$palette-yellow-400})") !important; + } + + .yellow-500 { + color: unquote("rgb(#{$palette-yellow-500})") !important; + } + + .bg-yellow-500 { + background-color: unquote("rgb(#{$palette-yellow-500})") !important; + } + + .yellow-600 { + color: unquote("rgb(#{$palette-yellow-600})") !important; + } + + .bg-yellow-600 { + background-color: unquote("rgb(#{$palette-yellow-600})") !important; + } + + .yellow-700 { + color: unquote("rgb(#{$palette-yellow-700})") !important; + } + + .bg-yellow-700 { + background-color: unquote("rgb(#{$palette-yellow-700})") !important; + } + + .yellow-800 { + color: unquote("rgb(#{$palette-yellow-800})") !important; + } + + .bg-yellow-800 { + background-color: unquote("rgb(#{$palette-yellow-800})") !important; + } + + .yellow-900 { + color: unquote("rgb(#{$palette-yellow-900})") !important; + } + + .bg-yellow-900 { + background-color: unquote("rgb(#{$palette-yellow-900})") !important; + } + + .yellow-A100 { + color: unquote("rgb(#{$palette-yellow-A100})") !important; + } + + .bg-yellow-A100 { + background-color: unquote("rgb(#{$palette-yellow-A100})") !important; + } + + .yellow-A200 { + color: unquote("rgb(#{$palette-yellow-A200})") !important; + } + + .bg-yellow-A200 { + background-color: unquote("rgb(#{$palette-yellow-A200})") !important; + } + + .yellow-A400 { + color: unquote("rgb(#{$palette-yellow-A400})") !important; + } + + .bg-yellow-A400 { + background-color: unquote("rgb(#{$palette-yellow-A400})") !important; + } + + .yellow-A700 { + color: unquote("rgb(#{$palette-yellow-A700})") !important; + } + + .bg-yellow-A700 { + background-color: unquote("rgb(#{$palette-yellow-A700})") !important; + } + + // Amber + + .amber { + color: unquote("rgb(#{$palette-amber-500})") !important; + } + + .bg-amber { + background-color: unquote("rgb(#{$palette-amber-500})") !important; + } + + .amber-50 { + color: unquote("rgb(#{$palette-amber-50})") !important; + } + + .bg-amber-50 { + background-color: unquote("rgb(#{$palette-amber-50})") !important; + } + + .amber-100 { + color: unquote("rgb(#{$palette-amber-100})") !important; + } + + .bg-amber-100 { + background-color: unquote("rgb(#{$palette-amber-100})") !important; + } + + .amber-200 { + color: unquote("rgb(#{$palette-amber-200})") !important; + } + + .bg-amber-200 { + background-color: unquote("rgb(#{$palette-amber-200})") !important; + } + + .amber-300 { + color: unquote("rgb(#{$palette-amber-300})") !important; + } + + .bg-amber-300 { + background-color: unquote("rgb(#{$palette-amber-300})") !important; + } + + .amber-400 { + color: unquote("rgb(#{$palette-amber-400})") !important; + } + + .bg-amber-400 { + background-color: unquote("rgb(#{$palette-amber-400})") !important; + } + + .amber-500 { + color: unquote("rgb(#{$palette-amber-500})") !important; + } + + .bg-amber-500 { + background-color: unquote("rgb(#{$palette-amber-500})") !important; + } + + .amber-600 { + color: unquote("rgb(#{$palette-amber-600})") !important; + } + + .bg-amber-600 { + background-color: unquote("rgb(#{$palette-amber-600})") !important; + } + + .amber-700 { + color: unquote("rgb(#{$palette-amber-700})") !important; + } + + .bg-amber-700 { + background-color: unquote("rgb(#{$palette-amber-700})") !important; + } + + .amber-800 { + color: unquote("rgb(#{$palette-amber-800})") !important; + } + + .bg-amber-800 { + background-color: unquote("rgb(#{$palette-amber-800})") !important; + } + + .amber-900 { + color: unquote("rgb(#{$palette-amber-900})") !important; + } + + .bg-amber-900 { + background-color: unquote("rgb(#{$palette-amber-900})") !important; + } + + .amber-A100 { + color: unquote("rgb(#{$palette-amber-A100})") !important; + } + + .bg-amber-A100 { + background-color: unquote("rgb(#{$palette-amber-A100})") !important; + } + + .amber-A200 { + color: unquote("rgb(#{$palette-amber-A200})") !important; + } + + .bg-amber-A200 { + background-color: unquote("rgb(#{$palette-amber-A200})") !important; + } + + .amber-A400 { + color: unquote("rgb(#{$palette-amber-A400})") !important; + } + + .bg-amber-A400 { + background-color: unquote("rgb(#{$palette-amber-A400})") !important; + } + + .amber-A700 { + color: unquote("rgb(#{$palette-amber-A700})") !important; + } + + .bg-amber-A700 { + background-color: unquote("rgb(#{$palette-amber-A700})") !important; + } + + // Orange + + .orange { + color: unquote("rgb(#{$palette-orange-500})") !important; + } + + .bg-orange { + background-color: unquote("rgb(#{$palette-orange-500})") !important; + } + + .orange-50 { + color: unquote("rgb(#{$palette-orange-50})") !important; + } + + .bg-orange-50 { + background-color: unquote("rgb(#{$palette-orange-50})") !important; + } + + .orange-100 { + color: unquote("rgb(#{$palette-orange-100})") !important; + } + + .bg-orange-100 { + background-color: unquote("rgb(#{$palette-orange-100})") !important; + } + + .orange-200 { + color: unquote("rgb(#{$palette-orange-200})") !important; + } + + .bg-orange-200 { + background-color: unquote("rgb(#{$palette-orange-200})") !important; + } + + .orange-300 { + color: unquote("rgb(#{$palette-orange-300})") !important; + } + + .bg-orange-300 { + background-color: unquote("rgb(#{$palette-orange-300})") !important; + } + + .orange-400 { + color: unquote("rgb(#{$palette-orange-400})") !important; + } + + .bg-orange-400 { + background-color: unquote("rgb(#{$palette-orange-400})") !important; + } + + .orange-500 { + color: unquote("rgb(#{$palette-orange-500})") !important; + } + + .bg-orange-500 { + background-color: unquote("rgb(#{$palette-orange-500})") !important; + } + + .orange-600 { + color: unquote("rgb(#{$palette-orange-600})") !important; + } + + .bg-orange-600 { + background-color: unquote("rgb(#{$palette-orange-600})") !important; + } + + .orange-700 { + color: unquote("rgb(#{$palette-orange-700})") !important; + } + + .bg-orange-700 { + background-color: unquote("rgb(#{$palette-orange-700})") !important; + } + + .orange-800 { + color: unquote("rgb(#{$palette-orange-800})") !important; + } + + .bg-orange-800 { + background-color: unquote("rgb(#{$palette-orange-800})") !important; + } + + .orange-900 { + color: unquote("rgb(#{$palette-orange-900})") !important; + } + + .bg-orange-900 { + background-color: unquote("rgb(#{$palette-orange-900})") !important; + } + + .orange-A100 { + color: unquote("rgb(#{$palette-orange-A100})") !important; + } + + .bg-orange-A100 { + background-color: unquote("rgb(#{$palette-orange-A100})") !important; + } + + .orange-A200 { + color: unquote("rgb(#{$palette-orange-A200})") !important; + } + + .bg-orange-A200 { + background-color: unquote("rgb(#{$palette-orange-A200})") !important; + } + + .orange-A400 { + color: unquote("rgb(#{$palette-orange-A400})") !important; + } + + .bg-orange-A400 { + background-color: unquote("rgb(#{$palette-orange-A400})") !important; + } + + .orange-A700 { + color: unquote("rgb(#{$palette-orange-A700})") !important; + } + + .bg-orange-A700 { + background-color: unquote("rgb(#{$palette-orange-A700})") !important; + } + + // Deep Orange + + .deep-orange { + color: unquote("rgb(#{$palette-deep-orange-500})") !important; + } + + .bg-deep-orange { + background-color: unquote("rgb(#{$palette-deep-orange-500})") !important; + } + + .deep-orange-50 { + color: unquote("rgb(#{$palette-deep-orange-50})") !important; + } + + .bg-deep-orange-50 { + background-color: unquote("rgb(#{$palette-deep-orange-50})") !important; + } + + .deep-orange-100 { + color: unquote("rgb(#{$palette-deep-orange-100})") !important; + } + + .bg-deep-orange-100 { + background-color: unquote("rgb(#{$palette-deep-orange-100})") !important; + } + + .deep-orange-200 { + color: unquote("rgb(#{$palette-deep-orange-200})") !important; + } + + .bg-deep-orange-200 { + background-color: unquote("rgb(#{$palette-deep-orange-200})") !important; + } + + .deep-orange-300 { + color: unquote("rgb(#{$palette-deep-orange-300})") !important; + } + + .bg-deep-orange-300 { + background-color: unquote("rgb(#{$palette-deep-orange-300})") !important; + } + + .deep-orange-400 { + color: unquote("rgb(#{$palette-deep-orange-400})") !important; + } + + .bg-deep-orange-400 { + background-color: unquote("rgb(#{$palette-deep-orange-400})") !important; + } + + .deep-orange-500 { + color: unquote("rgb(#{$palette-deep-orange-500})") !important; + } + + .bg-deep-orange-500 { + background-color: unquote("rgb(#{$palette-deep-orange-500})") !important; + } + + .deep-orange-600 { + color: unquote("rgb(#{$palette-deep-orange-600})") !important; + } + + .bg-deep-orange-600 { + background-color: unquote("rgb(#{$palette-deep-orange-600})") !important; + } + + .deep-orange-700 { + color: unquote("rgb(#{$palette-deep-orange-700})") !important; + } + + .bg-deep-orange-700 { + background-color: unquote("rgb(#{$palette-deep-orange-700})") !important; + } + + .deep-orange-800 { + color: unquote("rgb(#{$palette-deep-orange-800})") !important; + } + + .bg-deep-orange-800 { + background-color: unquote("rgb(#{$palette-deep-orange-800})") !important; + } + + .deep-orange-900 { + color: unquote("rgb(#{$palette-deep-orange-900})") !important; + } + + .bg-deep-orange-900 { + background-color: unquote("rgb(#{$palette-deep-orange-900})") !important; + } + + .deep-orange-A100 { + color: unquote("rgb(#{$palette-deep-orange-A100})") !important; + } + + .bg-deep-orange-A100 { + background-color: unquote("rgb(#{$palette-deep-orange-A100})") !important; + } + + .deep-orange-A200 { + color: unquote("rgb(#{$palette-deep-orange-A200})") !important; + } + + .bg-deep-orange-A200 { + background-color: unquote("rgb(#{$palette-deep-orange-A200})") !important; + } + + .deep-orange-A400 { + color: unquote("rgb(#{$palette-deep-orange-A400})") !important; + } + + .bg-deep-orange-A400 { + background-color: unquote("rgb(#{$palette-deep-orange-A400})") !important; + } + + .deep-orange-A700 { + color: unquote("rgb(#{$palette-deep-orange-A700})") !important; + } + + .bg-deep-orange-A700 { + background-color: unquote("rgb(#{$palette-deep-orange-A700})") !important; + } + + // Brown + + .brown { + color: unquote("rgb(#{$palette-brown-500})") !important; + } + + .bg-brown { + background-color: unquote("rgb(#{$palette-brown-500})") !important; + } + + .brown-50 { + color: unquote("rgb(#{$palette-brown-50})") !important; + } + + .bg-brown-50 { + background-color: unquote("rgb(#{$palette-brown-50})") !important; + } + + .brown-100 { + color: unquote("rgb(#{$palette-brown-100})") !important; + } + + .bg-brown-100 { + background-color: unquote("rgb(#{$palette-brown-100})") !important; + } + + .brown-200 { + color: unquote("rgb(#{$palette-brown-200})") !important; + } + + .bg-brown-200 { + background-color: unquote("rgb(#{$palette-brown-200})") !important; + } + + .brown-300 { + color: unquote("rgb(#{$palette-brown-300})") !important; + } + + .bg-brown-300 { + background-color: unquote("rgb(#{$palette-brown-300})") !important; + } + + .brown-400 { + color: unquote("rgb(#{$palette-brown-400})") !important; + } + + .bg-brown-400 { + background-color: unquote("rgb(#{$palette-brown-400})") !important; + } + + .brown-500 { + color: unquote("rgb(#{$palette-brown-500})") !important; + } + + .bg-brown-500 { + background-color: unquote("rgb(#{$palette-brown-500})") !important; + } + + .brown-600 { + color: unquote("rgb(#{$palette-brown-600})") !important; + } + + .bg-brown-600 { + background-color: unquote("rgb(#{$palette-brown-600})") !important; + } + + .brown-700 { + color: unquote("rgb(#{$palette-brown-700})") !important; + } + + .bg-brown-700 { + background-color: unquote("rgb(#{$palette-brown-700})") !important; + } + + .brown-800 { + color: unquote("rgb(#{$palette-brown-800})") !important; + } + + .bg-brown-800 { + background-color: unquote("rgb(#{$palette-brown-800})") !important; + } + + .brown-900 { + color: unquote("rgb(#{$palette-brown-900})") !important; + } + + .bg-brown-900 { + background-color: unquote("rgb(#{$palette-brown-900})") !important; + } + + // Grey + + .grey { + color: unquote("rgb(#{$palette-grey-500})") !important; + } + + .bg-grey { + background-color: unquote("rgb(#{$palette-grey-500})") !important; + } + + .grey-50 { + color: unquote("rgb(#{$palette-grey-50})") !important; + } + + .bg-grey-50 { + background-color: unquote("rgb(#{$palette-grey-50})") !important; + } + + .grey-100 { + color: unquote("rgb(#{$palette-grey-100})") !important; + } + + .bg-grey-100 { + background-color: unquote("rgb(#{$palette-grey-100})") !important; + } + + .grey-200 { + color: unquote("rgb(#{$palette-grey-200})") !important; + } + + .bg-grey-200 { + background-color: unquote("rgb(#{$palette-grey-200})") !important; + } + + .grey-300 { + color: unquote("rgb(#{$palette-grey-300})") !important; + } + + .bg-grey-300 { + background-color: unquote("rgb(#{$palette-grey-300})") !important; + } + + .grey-400 { + color: unquote("rgb(#{$palette-grey-400})") !important; + } + + .bg-grey-400 { + background-color: unquote("rgb(#{$palette-grey-400})") !important; + } + + .grey-500 { + color: unquote("rgb(#{$palette-grey-500})") !important; + } + + .bg-grey-500 { + background-color: unquote("rgb(#{$palette-grey-500})") !important; + } + + .grey-600 { + color: unquote("rgb(#{$palette-grey-600})") !important; + } + + .bg-grey-600 { + background-color: unquote("rgb(#{$palette-grey-600})") !important; + } + + .grey-700 { + color: unquote("rgb(#{$palette-grey-700})") !important; + } + + .bg-grey-700 { + background-color: unquote("rgb(#{$palette-grey-700})") !important; + } + + .grey-800 { + color: unquote("rgb(#{$palette-grey-800})") !important; + } + + .bg-grey-800 { + background-color: unquote("rgb(#{$palette-grey-800})") !important; + } + + .grey-900 { + color: unquote("rgb(#{$palette-grey-900})") !important; + } + + .bg-grey-900 { + background-color: unquote("rgb(#{$palette-grey-900})") !important; + } + + // Blue Grey + + .blue-grey { + color: unquote("rgb(#{$palette-blue-grey-500})") !important; + } + + .bg-blue-grey { + background-color: unquote("rgb(#{$palette-blue-grey-500})") !important; + } + + .blue-grey-50 { + color: unquote("rgb(#{$palette-blue-grey-50})") !important; + } + + .bg-blue-grey-50 { + background-color: unquote("rgb(#{$palette-blue-grey-50})") !important; + } + + .blue-grey-100 { + color: unquote("rgb(#{$palette-blue-grey-100})") !important; + } + + .bg-blue-grey-100 { + background-color: unquote("rgb(#{$palette-blue-grey-100})") !important; + } + + .blue-grey-200 { + color: unquote("rgb(#{$palette-blue-grey-200})") !important; + } + + .bg-blue-grey-200 { + background-color: unquote("rgb(#{$palette-blue-grey-200})") !important; + } + + .blue-grey-300 { + color: unquote("rgb(#{$palette-blue-grey-300})") !important; + } + + .bg-blue-grey-300 { + background-color: unquote("rgb(#{$palette-blue-grey-300})") !important; + } + + .blue-grey-400 { + color: unquote("rgb(#{$palette-blue-grey-400})") !important; + } + + .bg-blue-grey-400 { + background-color: unquote("rgb(#{$palette-blue-grey-400})") !important; + } + + .blue-grey-500 { + color: unquote("rgb(#{$palette-blue-grey-500})") !important; + } + + .bg-blue-grey-500 { + background-color: unquote("rgb(#{$palette-blue-grey-500})") !important; + } + + .blue-grey-600 { + color: unquote("rgb(#{$palette-blue-grey-600})") !important; + } + + .bg-blue-grey-600 { + background-color: unquote("rgb(#{$palette-blue-grey-600})") !important; + } + + .blue-grey-700 { + color: unquote("rgb(#{$palette-blue-grey-700})") !important; + } + + .bg-blue-grey-700 { + background-color: unquote("rgb(#{$palette-blue-grey-700})") !important; + } + + .blue-grey-800 { + color: unquote("rgb(#{$palette-blue-grey-800})") !important; + } + + .bg-blue-grey-800 { + background-color: unquote("rgb(#{$palette-blue-grey-800})") !important; + } + + .blue-grey-900 { + color: unquote("rgb(#{$palette-blue-grey-900})") !important; + } + + .bg-blue-grey-900 { + background-color: unquote("rgb(#{$palette-blue-grey-900})") !important; + } + + + + //用友UE定制色系 + + + .u-red { + color: unquote("rgb(#{$palette-u-red-500})") !important; + } + + .u-bg-red { + background-color: unquote("rgb(#{$palette-u-red-500})") !important; + } + .u-red-100 { + color: unquote("rgb(#{$palette-u-red-100})") !important; + } + + .u-bg-red-100 { + background-color: unquote("rgb(#{$palette-u-red-100})") !important; + } + .u-red-200 { + color: unquote("rgb(#{$palette-u-red-200})") !important; + } + + .u-bg-red-200 { + background-color: unquote("rgb(#{$palette-u-red-200})") !important; + } + .u-red-300 { + color: unquote("rgb(#{$palette-u-red-300})") !important; + } + + .u-bg-red-300 { + background-color: unquote("rgb(#{$palette-u-red-300})") !important; + } + .u-red-400 { + color: unquote("rgb(#{$palette-u-red-400})") !important; + } + + .u-bg-red-400 { + background-color: unquote("rgb(#{$palette-u-red-400})") !important; + } + .u-red-500 { + color: unquote("rgb(#{$palette-u-red-500})") !important; + } + + .u-bg-red-500 { + background-color: unquote("rgb(#{$palette-u-red-500})") !important; + } + .u-red-600 { + color: unquote("rgb(#{$palette-u-red-600})") !important; + } + + .u-bg-red-600 { + background-color: unquote("rgb(#{$palette-u-red-600})") !important; + } + .u-red-700 { + color: unquote("rgb(#{$palette-u-red-700})") !important; + } + + .u-bg-red-700 { + background-color: unquote("rgb(#{$palette-u-red-700})") !important; + } + .u-red-800 { + color: unquote("rgb(#{$palette-u-red-800})") !important; + } + + .u-bg-red-800 { + background-color: unquote("rgb(#{$palette-u-red-800})") !important; + } + .u-red-900 { + color: unquote("rgb(#{$palette-u-red-900})") !important; + } + + .u-bg-red-900 { + background-color: unquote("rgb(#{$palette-u-red-900})") !important; + } + + + + + .u-orange { + color: unquote("rgb(#{$palette-u-orange-500})") !important; + } + + .u-bg-orange { + background-color: unquote("rgb(#{$palette-u-orange-500})") !important; + } + .u-orange-100 { + color: unquote("rgb(#{$palette-u-orange-100})") !important; + } + + .u-bg-orange-100 { + background-color: unquote("rgb(#{$palette-u-orange-100})") !important; + } + .u-orange-200 { + color: unquote("rgb(#{$palette-u-orange-200})") !important; + } + + .u-bg-orange-200 { + background-color: unquote("rgb(#{$palette-u-orange-200})") !important; + } + .u-orange-300 { + color: unquote("rgb(#{$palette-u-orange-300})") !important; + } + + .u-bg-orange-300 { + background-color: unquote("rgb(#{$palette-u-orange-300})") !important; + } + .u-orange-400 { + color: unquote("rgb(#{$palette-u-orange-400})") !important; + } + + .u-bg-orange-400 { + background-color: unquote("rgb(#{$palette-u-orange-400})") !important; + } + .u-orange-500 { + color: unquote("rgb(#{$palette-u-orange-500})") !important; + } + + .u-bg-orange-500 { + background-color: unquote("rgb(#{$palette-u-orange-500})") !important; + } + .u-orange-600 { + color: unquote("rgb(#{$palette-u-orange-600})") !important; + } + + .u-bg-orange-600 { + background-color: unquote("rgb(#{$palette-u-orange-600})") !important; + } + .u-orange-700 { + color: unquote("rgb(#{$palette-u-orange-700})") !important; + } + + .u-bg-orange-700 { + background-color: unquote("rgb(#{$palette-u-orange-700})") !important; + } + .u-orange-800 { + color: unquote("rgb(#{$palette-u-orange-800})") !important; + } + + .u-bg-orange-800 { + background-color: unquote("rgb(#{$palette-u-orange-800})") !important; + } + .u-orange-900 { + color: unquote("rgb(#{$palette-u-orange-900})") !important; + } + + .u-bg-orange-900 { + background-color: unquote("rgb(#{$palette-u-orange-900})") !important; + } + + + + + .u-yellow { + color: unquote("rgb(#{$palette-u-yellow-500})") !important; + } + + .u-bg-yellow { + background-color: unquote("rgb(#{$palette-u-yellow-500})") !important; + } + .u-yellow-100 { + color: unquote("rgb(#{$palette-u-yellow-100})") !important; + } + + .u-bg-yellow-100 { + background-color: unquote("rgb(#{$palette-u-yellow-100})") !important; + } + .u-yellow-200 { + color: unquote("rgb(#{$palette-u-yellow-200})") !important; + } + + .u-bg-yellow-200 { + background-color: unquote("rgb(#{$palette-u-yellow-200})") !important; + } + .u-yellow-300 { + color: unquote("rgb(#{$palette-u-yellow-300})") !important; + } + + .u-bg-yellow-300 { + background-color: unquote("rgb(#{$palette-u-yellow-300})") !important; + } + .u-yellow-400 { + color: unquote("rgb(#{$palette-u-yellow-400})") !important; + } + + .u-bg-yellow-400 { + background-color: unquote("rgb(#{$palette-u-yellow-400})") !important; + } + .u-yellow-500 { + color: unquote("rgb(#{$palette-u-yellow-500})") !important; + } + + .u-bg-yellow-500 { + background-color: unquote("rgb(#{$palette-u-yellow-500})") !important; + } + .u-yellow-600 { + color: unquote("rgb(#{$palette-u-yellow-600})") !important; + } + + .u-bg-yellow-600 { + background-color: unquote("rgb(#{$palette-u-yellow-600})") !important; + } + .u-yellow-700 { + color: unquote("rgb(#{$palette-u-yellow-700})") !important; + } + + .u-bg-yellow-700 { + background-color: unquote("rgb(#{$palette-u-yellow-700})") !important; + } + .u-yellow-800 { + color: unquote("rgb(#{$palette-u-yellow-800})") !important; + } + + .u-bg-yellow-800 { + background-color: unquote("rgb(#{$palette-u-yellow-800})") !important; + } + .u-yellow-900 { + color: unquote("rgb(#{$palette-u-yellow-900})") !important; + } + + .u-bg-yellow-900 { + background-color: unquote("rgb(#{$palette-u-yellow-900})") !important; + } + + + + + .u-green { + color: unquote("rgb(#{$palette-u-green-500})") !important; + } + + .u-bg-green { + background-color: unquote("rgb(#{$palette-u-green-500})") !important; + } + .u-green-100 { + color: unquote("rgb(#{$palette-u-green-100})") !important; + } + + .u-bg-green-100 { + background-color: unquote("rgb(#{$palette-u-green-100})") !important; + } + .u-green-200 { + color: unquote("rgb(#{$palette-u-green-200})") !important; + } + + .u-bg-green-200 { + background-color: unquote("rgb(#{$palette-u-green-200})") !important; + } + .u-green-300 { + color: unquote("rgb(#{$palette-u-green-300})") !important; + } + + .u-bg-green-300 { + background-color: unquote("rgb(#{$palette-u-green-300})") !important; + } + .u-green-400 { + color: unquote("rgb(#{$palette-u-green-400})") !important; + } + + .u-bg-green-400 { + background-color: unquote("rgb(#{$palette-u-green-400})") !important; + } + .u-green-500 { + color: unquote("rgb(#{$palette-u-green-500})") !important; + } + + .u-bg-green-500 { + background-color: unquote("rgb(#{$palette-u-green-500})") !important; + } + .u-green-600 { + color: unquote("rgb(#{$palette-u-green-600})") !important; + } + + .u-bg-green-600 { + background-color: unquote("rgb(#{$palette-u-green-600})") !important; + } + .u-green-700 { + color: unquote("rgb(#{$palette-u-green-700})") !important; + } + + .u-bg-green-700 { + background-color: unquote("rgb(#{$palette-u-green-700})") !important; + } + .u-green-800 { + color: unquote("rgb(#{$palette-u-green-800})") !important; + } + + .u-bg-green-800 { + background-color: unquote("rgb(#{$palette-u-green-800})") !important; + } + .u-green-900 { + color: unquote("rgb(#{$palette-u-green-900})") !important; + } + + .u-bg-green-900 { + background-color: unquote("rgb(#{$palette-u-green-900})") !important; + } + + + + + + .u-blue { + color: unquote("rgb(#{$palette-u-blue-500})") !important; + } + + .u-bg-blue { + background-color: unquote("rgb(#{$palette-u-blue-500})") !important; + } + .u-blue-100 { + color: unquote("rgb(#{$palette-u-blue-100})") !important; + } + + .u-bg-blue-100 { + background-color: unquote("rgb(#{$palette-u-blue-100})") !important; + } + .u-blue-200 { + color: unquote("rgb(#{$palette-u-blue-200})") !important; + } + + .u-bg-blue-200 { + background-color: unquote("rgb(#{$palette-u-blue-200})") !important; + } + .u-blue-300 { + color: unquote("rgb(#{$palette-u-blue-300})") !important; + } + + .u-bg-blue-300 { + background-color: unquote("rgb(#{$palette-u-blue-300})") !important; + } + .u-blue-400 { + color: unquote("rgb(#{$palette-u-blue-400})") !important; + } + + .u-bg-blue-400 { + background-color: unquote("rgb(#{$palette-u-blue-400})") !important; + } + .u-blue-500 { + color: unquote("rgb(#{$palette-u-blue-500})") !important; + } + + .u-bg-blue-500 { + background-color: unquote("rgb(#{$palette-u-blue-500})") !important; + } + .u-blue-600 { + color: unquote("rgb(#{$palette-u-blue-600})") !important; + } + + .u-bg-blue-600 { + background-color: unquote("rgb(#{$palette-u-blue-600})") !important; + } + .u-blue-700 { + color: unquote("rgb(#{$palette-u-blue-700})") !important; + } + + .u-bg-blue-700 { + background-color: unquote("rgb(#{$palette-u-blue-700})") !important; + } + .u-blue-800 { + color: unquote("rgb(#{$palette-u-blue-800})") !important; + } + + .u-bg-blue-800 { + background-color: unquote("rgb(#{$palette-u-blue-800})") !important; + } + .u-blue-900 { + color: unquote("rgb(#{$palette-u-blue-900})") !important; + } + + .u-bg-blue-900 { + background-color: unquote("rgb(#{$palette-u-blue-900})") !important; + } + + + + + + + .u-cyan { + color: unquote("rgb(#{$palette-u-cyan-500})") !important; + } + + .u-bg-cyan { + background-color: unquote("rgb(#{$palette-u-cyan-500})") !important; + } + .u-cyan-100 { + color: unquote("rgb(#{$palette-u-cyan-100})") !important; + } + + .u-bg-cyan-100 { + background-color: unquote("rgb(#{$palette-u-cyan-100})") !important; + } + .u-cyan-200 { + color: unquote("rgb(#{$palette-u-cyan-200})") !important; + } + + .u-bg-cyan-200 { + background-color: unquote("rgb(#{$palette-u-cyan-200})") !important; + } + .u-cyan-300 { + color: unquote("rgb(#{$palette-u-cyan-300})") !important; + } + + .u-bg-cyan-300 { + background-color: unquote("rgb(#{$palette-u-cyan-300})") !important; + } + .u-cyan-400 { + color: unquote("rgb(#{$palette-u-cyan-400})") !important; + } + + .u-bg-cyan-400 { + background-color: unquote("rgb(#{$palette-u-cyan-400})") !important; + } + .u-cyan-500 { + color: unquote("rgb(#{$palette-u-cyan-500})") !important; + } + + .u-bg-cyan-500 { + background-color: unquote("rgb(#{$palette-u-cyan-500})") !important; + } + .u-cyan-600 { + color: unquote("rgb(#{$palette-u-cyan-600})") !important; + } + + .u-bg-cyan-600 { + background-color: unquote("rgb(#{$palette-u-cyan-600})") !important; + } + .u-cyan-700 { + color: unquote("rgb(#{$palette-u-cyan-700})") !important; + } + + .u-bg-cyan-700 { + background-color: unquote("rgb(#{$palette-u-cyan-700})") !important; + } + .u-cyan-800 { + color: unquote("rgb(#{$palette-u-cyan-800})") !important; + } + + .u-bg-cyan-800 { + background-color: unquote("rgb(#{$palette-u-cyan-800})") !important; + } + .u-cyan-900 { + color: unquote("rgb(#{$palette-u-cyan-900})") !important; + } + + .u-bg-cyan-900 { + background-color: unquote("rgb(#{$palette-u-cyan-900})") !important; + } + + + + + + + .u-purple { + color: unquote("rgb(#{$palette-u-purple-500})") !important; + } + + .u-bg-purple { + background-color: unquote("rgb(#{$palette-u-purple-500})") !important; + } + .u-purple-100 { + color: unquote("rgb(#{$palette-u-purple-100})") !important; + } + + .u-bg-purple-100 { + background-color: unquote("rgb(#{$palette-u-purple-100})") !important; + } + .u-purple-200 { + color: unquote("rgb(#{$palette-u-purple-200})") !important; + } + + .u-bg-purple-200 { + background-color: unquote("rgb(#{$palette-u-purple-200})") !important; + } + .u-purple-300 { + color: unquote("rgb(#{$palette-u-purple-300})") !important; + } + + .u-bg-purple-300 { + background-color: unquote("rgb(#{$palette-u-purple-300})") !important; + } + .u-purple-400 { + color: unquote("rgb(#{$palette-u-purple-400})") !important; + } + + .u-bg-purple-400 { + background-color: unquote("rgb(#{$palette-u-purple-400})") !important; + } + .u-purple-500 { + color: unquote("rgb(#{$palette-u-purple-500})") !important; + } + + .u-bg-purple-500 { + background-color: unquote("rgb(#{$palette-u-purple-500})") !important; + } + .u-purple-600 { + color: unquote("rgb(#{$palette-u-purple-600})") !important; + } + + .u-bg-purple-600 { + background-color: unquote("rgb(#{$palette-u-purple-600})") !important; + } + .u-purple-700 { + color: unquote("rgb(#{$palette-u-purple-700})") !important; + } + + .u-bg-purple-700 { + background-color: unquote("rgb(#{$palette-u-purple-700})") !important; + } + .u-purple-800 { + color: unquote("rgb(#{$palette-u-purple-800})") !important; + } + + .u-bg-purple-800 { + background-color: unquote("rgb(#{$palette-u-purple-800})") !important; + } + .u-purple-900 { + color: unquote("rgb(#{$palette-u-purple-900})") !important; + } + + .u-bg-purple-900 { + background-color: unquote("rgb(#{$palette-u-purple-900})") !important; + } + + + + + + .u-gray { + color: unquote("rgb(#{$palette-u-gray-500})") !important; + } + + .u-bg-gray { + background-color: unquote("rgb(#{$palette-u-gray-500})") !important; + } + + .u-gray-50 { + color: unquote("rgb(#{$palette-u-gray-50})") !important; + } + + .u-bg-gray-50 { + background-color: unquote("rgb(#{$palette-u-gray-50})") !important; + } + .u-gray-100 { + color: unquote("rgb(#{$palette-u-gray-100})") !important; + } + + .u-bg-gray-100 { + background-color: unquote("rgb(#{$palette-u-gray-100})") !important; + } + .u-gray-200 { + color: unquote("rgb(#{$palette-u-gray-200})") !important; + } + + .u-bg-gray-200 { + background-color: unquote("rgb(#{$palette-u-gray-200})") !important; + } + .u-gray-300 { + color: unquote("rgb(#{$palette-u-gray-300})") !important; + } + + .u-bg-gray-300 { + background-color: unquote("rgb(#{$palette-u-gray-300})") !important; + } + .u-gray-400 { + color: unquote("rgb(#{$palette-u-gray-400})") !important; + } + + .u-bg-gray-400 { + background-color: unquote("rgb(#{$palette-u-gray-400})") !important; + } + .u-gray-500 { + color: unquote("rgb(#{$palette-u-gray-500})") !important; + } + + .u-bg-gray-500 { + background-color: unquote("rgb(#{$palette-u-gray-500})") !important; + } + .u-gray-600 { + color: unquote("rgb(#{$palette-u-gray-600})") !important; + } + + .u-bg-gray-600 { + background-color: unquote("rgb(#{$palette-u-gray-600})") !important; + } + .u-gray-700 { + color: unquote("rgb(#{$palette-u-gray-700})") !important; + } + + .u-bg-gray-700 { + background-color: unquote("rgb(#{$palette-u-gray-700})") !important; + } + .u-gray-800 { + color: unquote("rgb(#{$palette-u-gray-800})") !important; + } + + .u-bg-gray-800 { + background-color: unquote("rgb(#{$palette-u-gray-800})") !important; + } + .u-gray-900 { + color: unquote("rgb(#{$palette-u-gray-900})") !important; + } + .u-bg-gray-900 { + background-color: unquote("rgb(#{$palette-u-gray-900})") !important; + } + .u-bg-gray-A100 { + background-color: unquote("rgb(#{$palette-u-gray-A100})") !important; + } + .u-gray-A100 { + color: unquote("rgb(#{$palette-u-gray-A100})") !important; + } + .u-bg-gray-A200 { + background-color: unquote("rgb(#{$palette-u-gray-A200})") !important; + } .u-gray-A200 { + color: unquote("rgb(#{$palette-u-gray-A200})") !important; + } + + + // Black + + .bg-black { + background-color: unquote("rgb(#{$color-black})") !important; + } + + .black { + color: unquote("rgb(#{$color-black})") !important; + } + + // White + + .bg-white { + background-color: unquote("rgb(#{$color-white})") !important; + } + + .white { + color: unquote("rgb(#{$color-white})") !important; + } +} + +// Primary and accent + +.bg-primary { + background-color: unquote("rgb(#{$color-primary})") !important; +} + +.bg-primary-contrast { + background-color: unquote("rgb(#{$color-primary-contrast})") !important; +} + +.bg-primary-dark { + background-color: unquote("rgb(#{$color-primary-dark})") !important; +} + +.bg-accent { + background-color: unquote("rgb(#{$color-accent})") !important; +} + +.bg-accent-contrast { + background-color: unquote("rgb(#{$color-accent-contrast})") !important; +} + +.text-primary { + color: unquote("rgb(#{$color-primary})") !important; +} + +.text-primary-contrast { + color: unquote("rgb(#{$color-primary-contrast})") !important; +} + +.text-primary-dark { + color: unquote("rgb(#{$color-primary-dark})") !important; +} + +.text-accent { + color: unquote("rgb(#{$color-accent})") !important; +} + +.text-accent-contrast { + color: unquote("rgb(#{$color-accent-contrast})") !important; +} diff --git a/scss/minxin-themeColors.scss b/scss/minxin-themeColors.scss new file mode 100644 index 0000000..0737790 --- /dev/null +++ b/scss/minxin-themeColors.scss @@ -0,0 +1,7 @@ +@import "minxin-colors"; + +$color-primary: $palette-indigo-500 !default; +$color-primary-dark: $palette-indigo-700 !default; +$color-primary-light: $palette-indigo-400 !default; +$color-accent: $palette-green-600 !default; +$color-accent-light: $palette-green-500 !default; \ No newline at end of file diff --git a/scss/minxin-variables.scss b/scss/minxin-variables.scss new file mode 100644 index 0000000..c9d2689 --- /dev/null +++ b/scss/minxin-variables.scss @@ -0,0 +1,1036 @@ + +$preferred_font: 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif !default; +// $performance_font: 'Helvetica', 'Arial', sans-serif !default; + +@import "minxin-colors"; + + +@function strip-units($number) { + @return $number / ($number * 0 + 1); +} +$unit: 1rem !default; +/* IMAGES */ +$image_path: '/images' !default; + + + +/* 默认颜色 */ +$trim-color-classes: false !default; + +@import "minxin-themeColors"; + +/* 主题颜色放入 minxin-themeColors.scss +$color-primary: $palette-indigo-500 !default; +$color-primary-dark: $palette-indigo-700 !default; +$color-accent: $palette-pink-A200 !default; +*/ +$color-primary-contrast: $color-dark-contrast !default; +$color-accent-contrast: $color-dark-contrast !default; +$color-text: $palette-grey-900 !default; + +// cyan主题 +//$color-primary: $palette-cyan-500 !default; +//$color-primary-dark: $palette-cyan-700 !default; +//$color-accent: $palette-light-blue-500 !default; + +// orange主题 +//$color-primary: $palette-orange-500 !default; +//$color-primary-dark: $palette-orange-700 !default; +//$color-accent: $palette-deep-orange-500 !default; + +// -- Fonts +$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default; +$font-size: 1.6 * $unit !default; +$font-size-tiny: 1.2 * $unit !default; +$font-size-small: 1.4 * $unit !default; +$font-size-normal: $font-size !default; +$font-size-big: 1.8 * $unit !default; +$font-weight-thin: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-semi-bold: 500 !default; +$font-weight-bold: 700 !default; +$font-color:unquote("rgb(#{$palette-u-gray-A100})") !default; + + +$font-weight-override: false; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-medium: 500; +$font-weight-bold: 700; + +$font-weight-base: $font-weight-normal; + + + + +$gray-base: unquote("rgb(#{$palette-grey-900})") !default; +$gray-darkest: unquote("rgb(#{$palette-grey-800})") !default; +$gray-darker: unquote("rgb(#{$palette-grey-700})") !default; +$gray-dark: unquote("rgb(#{$palette-grey-600})") !default; +$gray: unquote("rgb(#{$palette-grey-500})") !default; +$gray-light: unquote("rgb(#{$palette-grey-400})") !default; +$gray-lighter: unquote("rgb(#{$palette-grey-300})") !default; +$gray-lightest:unquote("rgb(#{$palette-grey-200})") !default; +$inverse: unquote("rgb(#{$color-white})") !default; +$border-color-base: $gray-lighter; +$line-height-base: 1.57142857; +/* 客户化 */ +@if $styleguide-generate-template == true { + $color-primary: '$color-primary'; + $color-primary-dark: '$color-primary-dark'; + $color-accent: '$color-accent'; + $color-primary-contrast: '$color-primary-contrast'; + $color-accent-contrast: '$color-accent-contrast'; +} + + +/* 波纹效果 */ +$ripple-bg-color: unquote("rgb(#{$color-dark-contrast})") !default; + +/* 动画 */ +$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default; +$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default; +$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default; +$animation-curve-default: $animation-curve-fast-out-slow-in !default; +$animation-duration: .35s; +$animation-delay: $animation-duration / 5; + + + +/* 阴影 */ + +$shadow-key-umbra-opacity: 0.2 !default; +$shadow-key-penumbra-opacity: 0.14 !default; +$shadow-ambient-shadow-opacity: 0.12 !default; + + +$primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default; +//-- Indexes +$z-index-highest: 300; +$z-index-higher: 200; +$z-index-high: 100; +$z-index-normal: 1; +$z-index-low: -100; +$z-index-lower: -200; + +$zindex-modal: 1700; +$zindex-modal-background: 1600; +$zindex-navbar-fixed: 1500; +$zindex-menubar: 1400; +$zindex-overlay: 1300; +$zindex-dropdown: 1200; +$zindex-navbar: 1200; +$zindex-header: 1100; +$zindex-footer: 1000; + + +/* ========== 字体 ========== */ + +$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default; +$text-link-color: unquote("rgb(#{$color-accent})") !default; + +$target-elements-directly: true !default; + + + + + +/* 控件 */ +//** Disabled cursor for form controls and buttons. +$cursor-disabled: not-allowed; + + +$title-color: $gray-darkest; +$subtitle-color: $gray-darker; +$text-color: $gray-dark; +$prompt-color: $gray; +//全局不同状态颜色 +$active-color-base: unquote("rgb(#{$palette-indigo-700})") !default; +$normal-color-base: unquote("rgb(#{$palette-indigo-500})") !default; +$hover-color-base: unquote("rgb(#{$palette-indigo-500})") !default; +$bg-color-base: $gray-lightest; +$disabled-color-base: $gray-light; +// 全局链接颜色 +$link-color: $normal-color-base; +$link-hover-color: $hover-color-base; +$link-active-color: $active-color-base; + + +$brand-default: $gray-lighter; +$brand-default-hover: $gray-lightest; +$brand-default-active: $gray-light; + +$brand-primary : unquote("rgb(#{$palette-indigo-500})") !default; +$brand-primary-hover: unquote("rgb(#{$palette-indigo-400})") !default; +$brand-primary-active: unquote("rgb(#{$palette-indigo-600})") !default; + +$brand-success: unquote("rgb(#{$palette-green-500})") !default; +$brand-success-hover: unquote("rgb(#{$palette-green-400})") !default; +$brand-success-active: unquote("rgb(#{$palette-green-600})") !default; + +$brand-info: unquote("rgb(#{$palette-cyan-500})") !default; +$brand-info-hover: unquote("rgb(#{$palette-cyan-400})") !default; +$brand-info-active: unquote("rgb(#{$palette-cyan-600})") !default; + +$brand-warning: unquote("rgb(#{$palette-orange-500})") !default; +$brand-warning-hover: unquote("rgb(#{$palette-orange-400})") !default; +$brand-warning-active: unquote("rgb(#{$palette-orange-600})") !default; + +$brand-danger: unquote("rgb(#{$palette-red-500})") !default; +$brand-danger-hover: unquote("rgb(#{$palette-red-400})") !default; +$brand-danger-active: unquote("rgb(#{$palette-red-600})") !default; + +$brand-dark: $gray-darker; +$brand-dark-hover: $gray-dark; +$brand-dark-active:$gray-darkest; + + +/* UButton */ + +// Default button colors. +$button-primary-color: unquote("rgb(#{$color-white})") !default; +$button-primary-color-IE8: unquote("rgb(#{$color-white})") !default; +$button-secondary-color: unquote("rgb(#{$palette-u-gray-A100})") !default; +$button-hover-color: #F7F7F7 !default; +$button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default; +$button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default; + + + +// Colored button colors. +$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default; +$button-primary-hover-color-alt: unquote("rgb(#{$color-primary-light})") !default; +$button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default; +$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default; +$button-active-color-alt: unquote("rgb(#{$color-primary})") !default; +$button-focus-color-alt: $button-focus-color !default; + +// Ripple color for colored raised buttons. +$button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default; + +// Disabled button colors. +$button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default; +$button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default; + +// FAB colors and sizes. +$button-fab-color-alt: unquote("rgb(#{$color-accent})") !default; +$button-fab-hover-color-alt: unquote("rgb(#{$color-accent-light})") !default; +$button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default; +$button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default; +$button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default; + +// Icon button colors and sizes. +$button-icon-color: unquote("rgb(#{$palette-grey-700})") !default; +$button-icon-focus-color: $button-focus-color !default; + +//Dimensions + +$button-min-width: 72/16 * $unit !default; +$button-height: 36/16 * $unit !default; +$button-padding: 5/16* $unit 13/16 * $unit !default; +$button-padding-IE8: 5px 13px !default; +$button-top-padding: 13/16 * $unit !default; +$button-left-padding: 6/16* $unit !default; +$button-line-height:1.57142857; +$button-margin: 4/16 * $unit !default; +$button-border-radius: 4/16 * $unit !default; + +$button-fab-size: 38/16 * $unit !default; +$button-fab-size-mini: 30/16 * $unit !default; +$button-fab-font-size: 14/16 * $unit !default; + +$button-icon-size: 32/16 * $unit !default; +$button-icon-size-mini: 13/16 * $unit !default; + +$button-raised-font-size: 14/16 * $unit !default; + +$button-border-color:unquote("rgb(#{$palette-grey-300})") !default; + +// 大按钮 +$button-padding-y-lg:6px; +$button-padding-x-lg:15px; +$font-size-lg:14px; +$button-border-radius-lg:3px; + +//特大型按钮 +$button-padding-y-xg:10px; +$button-padding-x-xg:18px; +$font-size-xg:18px; +$button-border-radius-xg:4px; + +//小型按钮 +$button-padding-y-sm:1px; +$button-padding-x-sm:5px; +$font-size-sm:12px; +$button-border-radius-sm:2px; + + +/* UText */ +$input-text-background-color: transparent !default; +$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default; +$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default; +$input-text-bottom-border-color-IE8: unquote("rgb(#{$color-black})") !default; +$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default; +$input-text-disabled-color: $input-text-bottom-border-color !default; +$input-text-disabled-text-color: $input-text-label-color !default; +$input-text-error-color: unquote("rgb(222, 50, 38)") !default; +$input-text-must-color:unquote("rgb(#{$palette-red-A700})") !default; + + +$input-text-font-size: 14px !default; +$input-text-width: 100% !default; +$input-text-padding: 4px !default; +$input-text-vertical-spacing: 20px !default; + +$input-text-button-size: 32px !default; +$input-text-floating-label-fontsize: 12px !default; +$input-text-expandable-icon-top: 16px !default; +$input-text-height:36px !default; +$input-text-normal-width:360px !default; +$input-text-short-width:180px !default; +$input-text-normal-border-color:unquote("rgb(#{$palette-u-gray-400})") !default; +$input-text-color:unquote("rgb(#{$palette-u-gray-A200})") !default +$input-text-focus-border-color:unquote("rgb(#{$palette-u-blue-400})") !default; +$input-lable-color:unquote("rgb(#{$palette-u-gray-900})") !default + +/* Navlayout */ + +$layout-nav-color: unquote("rgb(#{$palette-grey-100})") !default; + +// Drawer +$layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default; +$layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default; +$layout-text-color: unquote("rgb(#{$palette-grey-800})") !default; +$layout-drawer-navigation-color: #757575 !default; +$layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-200})") !default; +$layout-drawer-navigation-link-active-color: $layout-text-color !default; + +// Header +$layout-header-bg-color: unquote("rgb(#{$color-primary})") !default; +$layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default; +$layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default; +$layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default; + +// Tabs +$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default; + +$layout-nav-link-font-size: 13px !default; + +$layout-drawer-narrow: 240px !default; +$layout-drawer-wide: 456px !default; +$layout-drawer-width: $layout-drawer-narrow !default; + +$layout-header-icon-size: 32px !default; +$layout-screen-size-threshold: 1024px !default; +$layout-header-icon-margin: 24px !default; +$layout-drawer-button-mobile-size: 44px !default; +$layout-drawer-button-desktop-size: 34px !default; +$layout-drawer-button-desktop-margin-top: 5px !default; +$layout-drawer-button-mobile-margin-top: 10px !default; + +$layout-header-mobile-row-height: 56px !default; +$layout-mobile-header-height: $layout-header-mobile-row-height; +$layout-header-desktop-row-height: 44px !default; +$layout-desktop-header-height: $layout-header-desktop-row-height; + +$layout-header-desktop-baseline: 80px !default; +$layout-header-mobile-baseline: 72px !default; +$layout-header-mobile-indent: 16px !default; +$layout-header-desktop-indent: 40px !default; + +$layout-tab-font-size: 14px !default; +$layout-tab-bar-height: 48px !default; +$layout-tab-mobile-padding: 12px !default; +$layout-tab-desktop-padding: 24px !default; +$layout-tab-highlight-thickness: 2px !default; + +/* gridlayout */ + +// Extra small screen / phone +//$screen-xs: 480px; + +$screen-xs-min: 480px; +//** Deprecated `@screen-phone` as of v3.0.1 +//@screen-phone: @screen-xs-min; + +// Small screen / tablet +//** Deprecated `@screen-sm` as of v3.0.1 +//@screen-sm: 768px; +$screen-sm-min: 768px; +//** Deprecated `@screen-tablet` as of v3.0.1 +//@screen-tablet: @screen-sm-min; + +// Medium screen / desktop +//** Deprecated `@screen-md` as of v3.0.1 +//@screen-md: 992px; +$screen-md-min: 992px; +//** Deprecated `@screen-desktop` as of v3.0.1 +//@screen-desktop: @screen-md-min; + +// Large screen / wide desktop +//** Deprecated `@screen-lg` as of v3.0.1 +//@screen-lg: 1200px; +$screen-lg-min: 1200px; +//** Deprecated `@screen-lg-desktop` as of v3.0.1 +//@screen-lg-desktop: @screen-lg-min; +$screen-xs-max: ($screen-sm-min - 1 ); + +$screen-sm-max: ($screen-sm-min - 1 ); + +$screen-md-max: ($screen-lg-min - 1 ); + + + + +//** Number of columns in the grid. +$grid-columns: 12; +//** Padding between columns. Gets divided in half for the left and right. +$grid-gutter-width: 30px; +// Navbar collapse +//** Point at which the navbar becomes uncollapsed. +$grid-float-breakpoint: 768px; +//** Point at which the navbar begins collapsing. +$grid-float-breakpoint-max: ($grid-float-breakpoint - 1); + + +// Small screen / tablet +$container-tablet: (720px + $grid-gutter-width); +//** For `@screen-sm-min` and up. +$container-sm: $container-tablet; + +// Medium screen / desktop +$container-desktop: (940px + $grid-gutter-width); +//** For `@screen-md-min` and up. +$container-md: $container-desktop; + +// Large screen / wide desktop +$container-large-desktop: (1140px + $grid-gutter-width); +//** For `@screen-lg-min` and up. +$container-lg: $container-large-desktop; + + +//$grid-desktop-columns: 12 !default; +//$grid-desktop-gutter: 16px !default; +//$grid-desktop-margin: 16px !default; +// +//$grid-desktop-breakpoint: 840px !default; +// +//$grid-large-desktop-breakpoint: 1200px !default; +// +//$grid-large-desktop-columns: $grid-desktop-columns !default; +//$grid-large-desktop-gutter: $grid-desktop-gutter !default; +//$grid-large-desktop-margin: $grid-desktop-margin !default; +// +//$grid-tablet-columns: 8 !default; +//$grid-tablet-gutter: $grid-desktop-gutter !default; +//$grid-tablet-margin: $grid-desktop-margin !default; +// +//$grid-tablet-breakpoint: 480px !default; +// +//$grid-phone-columns: 4 !default; +//$grid-phone-gutter: $grid-desktop-gutter !default; +//$grid-phone-margin: $grid-desktop-margin !default; +// +//$grid-cell-default-columns: $grid-phone-columns !default; +//$grid-max-columns: $grid-desktop-columns !default; + +/* menu */ + +$default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default; +$menu-expand-duration: 0.3s !default; +$menu-fade-duration: 0.2s !default; + +// Default Item Colors +$default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default; +$default-item-text-color-IE8: unquote("rgb(#{$color-black})") !default; +$default-item-outline-color: unquote("rgb(#{$palette-u-blue-400})") !default; +$default-item-hover-bg-color: unquote("rgb(#{$palette-u-blue-100})") !default; +$default-item-focus-bg-color: unquote("rgb(#{$palette-u-blue-200})") !default; +$default-item-active-bg-color: unquote("rgb(#{$palette-u-blue-200})") !default; +$default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default; + +// Disabled Button Colors +$disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default; + + +/* CHECKBOX */ + +$checkbox-color: unquote("rgb(#{$color-primary})") !default; +$checkbox-off-color: unquote("rgb(#{$palette-u-gray-600})") !default; +$checkbox-off-color-IE8: unquote("rgb(#{$palette-u-gray-600})") !default; +$checkbox-disabled-color: unquote("rgb(#{$palette-u-gray-600})") !default; +$checkbox-focus-color: unquote("rgba(#{$palette-u-blue-500}, 0.26)") !default; +$checkbox-image-path: $image_path; + +$checkbox-label-font-size: 13px !default; +$checkbox-label-height: 24px !default; +$checkbox-button-size: 16px !default; +$checkbox-inner-margin: 2px !default; +$checkbox-padding: 8px !default; +$checkbox-top-offset: + ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2; +$checkbox-ripple-size: $checkbox-label-height * 1.5; + +$checkbox-primary-bg: $brand-primary; +$checkbox-success-bg: $brand-success; +$checkbox-info-bg: $brand-info; +$checkbox-warning-bg: $brand-warning; +$checkbox-danger-bg: $brand-danger; +$checkbox-dark-bg: $brand-dark; + +$progress-primary-bg: $brand-primary; +$progress-success-bg: $brand-success; +$progress-info-bg: $brand-info; +$progress-warning-bg: $brand-warning; +$progress-danger-bg: $brand-danger; +$progress-dark-bg: $brand-dark; + +$color-primary-opacity:unquote("rgba(#{$color-primary}, 0.7)") !default; +$color-success-opacity:unquote("rgba(#{$palette-green-500}, 0.7)") !default; +$color-info-opacity:unquote("rgba(#{$palette-cyan-500}, 0.7)") !default; +$color-warning-opacity:unquote("rgba(#{$palette-orange-500}, 0.7)") !default; +$color-danger-opacity:unquote("rgba(#{$palette-red-500}, 0.7)") !default; +$color-dark-opacity:unquote("rgba(#{$palette-grey-700}, 0.7)") !default; + +/* Radio */ + +$radio-color: unquote("rgb(#{$color-primary})") !default; +$radio-off-color: unquote("rgb(#{$palette-u-gray-600})") !default; +$radio-off-color-IE8: unquote("rgb(#{$palette-u-gray-600})") !default; +$radio-disabled-color: unquote("rgb(#{$palette-u-gray-600})") !default; + +$radio-label-font-size: 13px !default; +$radio-label-height: 32px !default; +$radio-button-size: 16px !default; +$radio-inner-margin: $radio-button-size / 4; +$radio-padding: 8px !default; +$radio-top-offset: ($radio-label-height - $radio-button-size) / 2; +$radio-ripple-size: 42px !default; + +$radio-primary-bg: $brand-primary; +$radio-success-bg: $brand-success; +$radio-info-bg: $brand-info; +$radio-warning-bg: $brand-warning; +$radio-danger-bg: $brand-danger; +$radio-dark-bg: $brand-dark; + +/* Switch */ + +$switch-color: unquote("rgb(#{$color-primary})") !default; +$switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default; +$switch-thumb-color: #fff !default; +$switch-track-color: unquote("rgb(#{$color-primary})") !default; + +$switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default; +$switch-off-track-color: unquote("rgb(#{$color-white})") !default; +$switch-off-track-color-IE8: unquote("rgb(#{$color-black})") !default; +$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default; +$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default; + +$switch-label-font-size: 13px !default; +$switch-label-height: 24px !default; +$switch-track-height: 21px !default; +$switch-track-length: 40px !default; +$switch-thumb-size: 20px !default; +$switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default; +$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default; +$switch-ripple-size: $switch-label-height * 2 !default; +$switch-helper-size: 8px !default; + +$switch-primary-bg: $brand-primary; +$switch-success-bg: $brand-success; +$switch-info-bg: $brand-info; +$switch-warning-bg: $brand-warning; +$switch-danger-bg: $brand-danger; +$switch-dark-bg: $brand-dark; + +//特大号switch +$switch-width-lg: 66px; +$switch-height-lg: 36px; +$switch-border-radius-lg: 36px; +$switch-border-left-lg: 31px; + +//默认尺寸switch +$switch-width-default: 45px; +$switch-height-default: 24px; +$switch-border-radius-default: 24px; +$switch-border-left-default: 22px; + +//小尺寸switch +$switch-width-sm: 33px; +$switch-height-sm: 20px; +$switch-border-radius-sm: 20px; +$switch-border-left-sm: 14px; + +/* loading */ + +$loading-color-1: unquote("rgb(#{$palette-blue-400})") !default; +$loading-color-2: unquote("rgb(#{$palette-red-500})") !default; +$loading-color-3: unquote("rgb(#{$palette-yellow-600})") !default; +$loading-color-4: unquote("rgb(#{$palette-green-500})") !default; + +$loading-single-color: unquote("rgb(#{$color-primary})") !default; + +$loading-size: 28px !default; +$loading-stroke-width: 3px !default; + +// Amount of circle the arc takes up. +$loading-arc-size: 270deg !default; +// Time it takes to expand and contract arc. +$loading-arc-time: 1333ms !default; +// How much the start location of the arc should rotate each time. +$loading-arc-start-rot: 216deg !default; + +$loading-duration: 360 * $loading-arc-time / ( + strip-units($loading-arc-start-rot + (360deg - $loading-arc-size))); + +/* datetimepicker */ + +$date-bg-color: unquote("rgb(#{$color-primary})") !default; + +/* message */ +$snackbar-color: unquote("rgb(#{$color-white})") !default; +$snackbar-background-color: unquote("rgb(#{$color-primary})") !default; +$snackbar-color-cancel: unquote("rgb(#{$palette-red-500})") !default; +$snackbar-color-accept: unquote("rgb(#{$palette-green-500})") !default; +$snackbar-color-warning: unquote("rgb(#{$palette-lime-200})") !default; + +/* DATA TABLE */ + +$data-table-font-size: 13px !default; +$data-table-header-font-size: 12px !default; +$data-table-header-sort-icon-size: 16px !default; + +$data-table-header-color: rgba(#000, 0.54) !default; +$data-table-header-sorted-color: rgba(#000, 0.87) !default; +$data-table-divider-color: rgba(#000, 0.12) !default; +$data-table-divider-color-IE8: rgb(0,0,0) !default; + +//$data-table-hover-color: #eeeeee !default; +$data-table-hover-color: #E9F7FC !default; +$data-table-selection-color: #C4EAF6 !default; + +$data-table-dividers: 1px solid $data-table-divider-color !default; +$data-table-dividers-IE8: 1px solid $data-table-divider-color-IE8 !default; + +$data-table-row-height: 48px !default; +$data-table-last-row-height: 56px !default; +$data-table-header-height: 56px !default; + +$data-table-column-spacing: 36px !default; +$data-table-column-padding: $data-table-column-spacing / 2; + +$data-table-card-header-height: 64px !default; +$data-table-card-title-top: 20px !default; +$data-table-card-padding: 24px !default; +$data-table-button-padding-right: 16px !default; +$data-table-cell-top: $data-table-card-padding / 2; + +// $line-height-computed: round(($font-size-small * $line-height-base)); +$line-height-computed: round((14px * $line-height-base)); +$table-bg: transparent; +$table-cell-padding: 8px; +$table-border-color: $border-color-base; +$table-bg-hover: $bg-color-base; +$table-bg-active: $table-bg-hover; +$table-bg-accent: unquote("rgba(#{$palette-grey-200},.3)") !default; + + + + +/* tooltip*/ +$tooltip-background: rgba(97,97,97,.9) !default; +$tooltip-margin: 0.5 * $unit !default; +$tooltip-border-radius: .2 * $unit !default; +$tooltip-color: #fff !default; +$tooltip-max-width: 17 * $unit !default; +$tooltip-padding: .8 * $unit !default; +$tooltip-animation-duration: 200ms !default; + +/* 进度条 */ +$bar-height: 4px !default; +$progress-main-color: unquote("rgb(#{$color-primary})") !default; +$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default; +$progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default; +$progress-image-path: $image_path; +$progress-buffer-bar-border:unquote("rgb(#{$palette-u-gray-600})") !default; + +// Tabs +$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default; + +/* ========== Content Tabs ========== */ + +$tab-highlight-color: unquote("rgb(#{$color-primary})") !default; +$tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default; +$tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default; +$tab-border-color: unquote("rgb(#{$palette-grey-300})") !default; + + + +/* CARD */ + +/* Card dimensions */ +$card-width: 330px !default; +$card-height: 200px !default; +$card-font-size: 13px !default; +$card-title-font-size: 24px !default; +$card-subtitle-font-size: 10px !default; +$card-horizontal-padding: 16px !default; +$card-vertical-padding: 16px !default; + +$card-title-perspective-origin-x: 165px !default; +$card-title-perspective-origin-y: 56px !default; + +$card-title-transform-origin-x: 165px !default; +$card-title-transform-origin-y: 56px !default; + +$card-title-text-transform-origin-x: 149px !default; +$card-title-text-transform-origin-y: 48px !default; + +$card-supporting-text-font-size: 1rem !default; +$card-supporting-text-line-height: 18px !default; + +$card-actions-font-size: 13px !default; + +$card-title-text-font-weight: 300 !default; +$card-z-index: 1 !default; + +/* Cover image */ +$card-cover-image-height: 186px !default; +$card-background-image-url: '' !default; + +/* ========== Card ========== */ + +$card-background-color: unquote("rgb(#{$color-white})") !default; +$card-text-color: unquote("rgb(#{$color-black})") !default; +$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default; +$card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default; +$card-border-color: rgba(0,0,0,0.1) !default; +$card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default; + +/* ============ Forms ============*/ +$input-border:unquote("rgb(#{$palette-u-gray-500})"); +$input-border-focus:unquote("rgb(#{$color-primary})"); +$input-border-disabled:unquote("rgb(#{$palette-u-gray-100})"); +$input-bg-disabled:unquote("rgb(#{$palette-u-gray-100})"); +$input-color:unquote("rgb(#{$palette-u-gray-A100})"); +$form-input-height:36px; +$form-input-height-sm:28px; +$form-input-padding-left:12px; +$form-label-color:unquote("rgb(#{$palette-u-gray-900})"); +$form-control-feedback-color:unquote("rgb(#{$palette-u-gray-700})"); +$form-validate-error-color:unquote("rgb(#{$palette-u-red-600})"); + + +/* BADGE */ +$badge-font-size: 12px !default; +$badge-color: unquote("rgb(#{$color-accent-contrast})") !default; +$badge-color-inverse: unquote("rgb(#{$color-accent})") !default; +$badge-background: unquote("rgb(#{$color-accent})") !default; +$badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default; +$badge-size : 22px !default; +$badge-padding: 2px !default; +$badge-overlap: 12px !default; + +$badge-primary-color:#FFFFFF; +$badge-primary-bg:$brand-primary; + +$badge-success-color:#FFFFFF; +$badge-success-bg: $brand-success; + +$badge-info-color:#FFFFFF; +$badge-info-bg:$brand-info; + +$badge-warning-color:#FFFFFF; +$badge-warning-bg:$brand-warning; + +$badge-danger-color:#FFFFFF; +$badge-danger-bg:$brand-danger; + +$badge-dark-color:#FFFFFF; +$badge-dark-bg:$brand-dark; + +// labels +$tag-padding: .25em .6em .25em; +$tag-border-radius: 0.3em; +$tag-bg: #eeeeee; +$tag-round-border-radius: 1em; +$tag-default-color: #757575; +$tag-default-bg:#e0e0e0; +$tag-lg-font-size: 16px; +$tag-sm-font-size: 10px; +$tag-sm-padding: .1em .5em .1em; +$tag-default-hover-bg: $brand-default-hover; +$tag-primary-hover-bg: $brand-primary-hover; +$tag-success-hover-bg: $brand-success-hover; +$tag-info-hover-bg: $brand-info-hover; +$tag-warning-hover-bg: $brand-warning-hover; +$tag-danger-hover-bg: $brand-danger-hover; +$tag-dark-hover-bg: $brand-dark-hover; +$tag-default-bg: $brand-default; +$tag-primary-bg: $brand-primary; +$tag-success-bg: $brand-success; +$tag-info-bg: $brand-info; +$tag-warning-bg: $brand-warning; +$tag-danger-bg: $brand-danger; +$tag-dark-bg: $brand-dark; +$tag-default-hover-color:unquote("rgb(#{$palette-u-gray-500})"); + + +// pagination +$pagination-gap-hover-border:unquote("rgb(#{$color-primary})"); + +$pagination-link-padding: 7px 13px; +$pagination-lg-font-size: 16px; +$pagination-lg-padding-vertical: 9px; +$pagination-lg-padding-horizontal: 15px; + +$pagination-small-font-size: 14px; +$pagination-small-padding-vertical: 5px; +$pagination-small-padding-horizontal: 9px; + +$border-radius-base: 3px; +$border-radius-large: 4px; +$border-radius-small: 2px; + +$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome +$line-height-small: 1.5; +// widget + +$widget-padding-left:30px; +$widget-padding-top:10px; + +//tooltips + +$tooltip-default-bg: $brand-default; +$tooltip-primary-bg: $brand-primary; +$tooltip-success-bg: $brand-success; +$tooltip-info-bg: $brand-info; +$tooltip-warning-bg: $brand-warning; +$tooltip-danger-bg: $brand-danger; +$tooltip-dark-bg: $brand-dark; + +//menu Button + +$menu-default-bg: $brand-default; +$menu-primary-bg: $brand-primary; +$menu-success-bg: $brand-success; +$menu-info-bg: $brand-info; +$menu-warning-bg: $brand-warning; +$menu-danger-bg: $brand-danger; +$menu-dark-bg: $brand-dark; +$menu-default-bg-hover: $brand-default-hover; +$menu-primary-bg-hover: $brand-primary-hover; +$menu-success-bg-hover: $brand-success-hover; +$menu-info-bg-hover: $brand-info-hover; +$menu-warning-bg-hover: $brand-warning-hover; +$menu-danger-bg-hover: $brand-danger-hover; +$menu-dark-bg-hover: $brand-dark-hover; + + +// breadcrumbs + +$border-radius-base: 3px; +$border-radius-large: 4px; +$border-radius-small: 2px; + +$breadcrumb-padding-vertical: 8px; +$breadcrumb-padding-horizontal: 10px; +$breadcrumb-separator: "/\00a0"; +$breadcrumb-bg: transparent; +$breadcrumb-margin-bottom: 10px; + +$breadcrumb-color: $link-color; +$breadcrumb-active-color: $text-color; + +$breadcrumb-icon-margin-right: 10px; +$breadcrumb-arrow-separator: "\00bb\00a0"; + + +// list-group +$list-group-media-heading-font-size : $font-size-small;//14px +$list-group-link-disabled-color : $disabled-color-base; + +$list-group-link-disabled-bg : $gray-lightest; + +$list-group-active-color : $brand-primary; +$list-group-link-active-color : unquote("rgb(#{$color-white})") !default; +$list-group-link-active-bg : $brand-primary; + + +$list-group-item-icon-margin-right : 10px; + +$list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075); +$list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075); + + +$list-group-border-radius: $border-radius-base; + + + +$list-group-link-color: $text-color; +$list-group-link-hover-color: $text-color; +$list-group-link-heading-color: $title-color; + +$list-group-hover-bg: $bg-color-base; + +$list-group-disabled-bg: transparent; + +$list-group-disabled-color: $disabled-color-base; + + +$list-group-disabled-text-color: $list-group-disabled-color; +$list-group-active-bg: transparent; +$list-group-active-border: $list-group-active-bg; +// $list-group-active-text-color: lighten($list-group-active-color, 40%); +$list-group-active-text-color: $list-group-active-color; + +$list-group-bg: #fff; +$list-group-border: transparent; +// $list-group-bordered-border : $border-color-base; +// $list-group-bordered-active-color : $component-active-color; +// $list-group-bordered-active-bg : $component-active-bg; +// $list-group-bordered-active-border : $list-group-bordered-active-bg; + +// $list-group-gap-item-margin-bottom : 2px; + +//step +$steps-margin-bottom: $line-height-computed; +$step-padding-horizontal:20px; +$step-padding-vertical: 12px; + +$step-vertical-padding-horizontal: 20px; +$step-vertical-padding-vertical:18px; + +$step-color: $gray; +$step-bg: $bg-color-base; +$step-number-bg: $gray-lighter; +$step-number-color: $inverse; + +$step-current-color: $inverse; +$step-current-bg: $brand-primary; + +$step-done-color: $inverse; +$step-done-bg:$brand-success; + +$step-error-color: $inverse; +$step-error-bg: $brand-danger; + +$step-disabled-color:$gray-light; + +$step-font-size: inherit; +$step-title-font-size: 20px; +$step-icon-font-size:27px; +$step-number-font-size:24px; +$step-number-size: 40px; + +$step-lg-padding-horizontal:20px; +$step-lg-padding-vertical:20px; +$step-lg-font-size: 16px; +$step-lg-title-font-size:22px; +$step-lg-icon-font-size: 32px; +$step-lg-number-font-size:28px; +$step-lg-number-size:46px; + +$step-sm-font-size: 12px; +$step-sm-title-font-size: 18px; +$step-sm-icon-font-size: 24px; +$step-sm-number-font-size: 24px; +$step-sm-number-size: 30px; + +$step-xs-font-size: 10px; +$step-xs-title-font-size: 16px; +$step-xs-icon-font-size: 22px; +$step-xs-number-font-size: 20px; +$step-xs-number-size: 24px; + +// blog nav +$blognav-active-color:unquote("rgb(#{$color-primary})"); +// widget +$widget-padding-left:30px; +$widget-padding-top:10px; + + +// couter 数据统计 + +$counter-number-color: $gray-darkest; +$counter-number-font-size: 20px; +$counter-icon-font-size: $counter-number-font-size; + +$counter-lg-number-font-size: 40px; +$counter-md-number-font-size: 30px; +$counter-sm-number-font-size: 14px; + +$counter-lg-icon-font-size: $counter-lg-number-font-size; +$counter-md-icon-font-size: $counter-md-number-font-size; +$counter-sm-icon-font-size: $counter-sm-number-font-size; + +$counter-inverse-color: $inverse; + + +// navbar + +// Basics of a navbar +$navbar-height: 50px; +$navbar-margin-bottom: $line-height-computed; +$navbar-border-radius: $border-radius-base; +$navbar-padding-horizontal: floor(($grid-gutter-width / 2)); +$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2); +$navbar-collapse-max-height: 340px; + +$navbar-avatar-margin-horizontal: (($navbar-height - 32px) / 2); + +$navbar-brand-padding-horizontal: 20px; +$navbar-brand-logo-height: 32px; + +$navbar-default-color: $text-color; +$navbar-default-bg: $inverse; +$navbar-default-border: $border-color-base; + +// Navbar links +$navbar-default-link-color: $text-color; +$navbar-default-link-hover-color: $gray-darker; +$navbar-default-link-hover-bg: rgba(238,238,238, 30%); +$navbar-default-link-active-color: $navbar-default-link-hover-color; +$navbar-default-link-active-bg: rgba(238,238,238, 60%); +$navbar-default-link-disabled-color: $disabled-color-base; +$navbar-default-link-disabled-bg: transparent; + +// Navbar brand label +$navbar-default-brand-color: $title-color; +$navbar-default-brand-hover-color: $navbar-default-brand-color; +$navbar-default-brand-hover-bg: none; + +// Navbar toggle +$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg; +$navbar-default-toggle-icon-bar-bg: $navbar-default-color; +$navbar-default-toggle-border-color: transparent; + + +// Inverted navbar +// Reset inverted navbar basics +$navbar-inverse-color: $inverse; +$navbar-inverse-bg: $brand-primary; +$navbar-inverse-border: rgba(0, 0, 0, .1); + +// Inverted navbar links +$navbar-inverse-link-color: $inverse; +$navbar-inverse-link-hover-color: $inverse; +$navbar-inverse-link-hover-bg: rgba(0, 0, 0, .1); +$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color; +$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg; +$navbar-inverse-link-disabled-color: $inverse; +$navbar-inverse-link-disabled-bg: transparent; + +// Inverted navbar brand label +$navbar-inverse-brand-color: $navbar-inverse-link-color; +$navbar-inverse-brand-hover-color: $inverse; +$navbar-inverse-brand-hover-bg: none; + +// Inverted navbar toggle +$navbar-inverse-toggle-hover-bg: $navbar-inverse-link-hover-bg; +$navbar-inverse-toggle-icon-bar-bg: $inverse; +$navbar-inverse-toggle-border-color: transparent; + +//hamburger +$hamburger-size: 17px; diff --git a/scss/set-global.scss b/scss/set-global.scss new file mode 100644 index 0000000..124a546 --- /dev/null +++ b/scss/set-global.scss @@ -0,0 +1,66 @@ + +@import "minxin-colors"; + +//主要颜色,次要颜色值与ui中保持一致 +@import "minxin-themeColors"; + + +body{ + font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif; + font-color:#333333; +} + + +//图标 左右内间距为5px; +i.uf,i.fa{ + padding: 0 5px; +} + +.u-visible{ + display: block; +} + +.u-not-visible{ + display: none; +} + +// 边框 +.u-border-top{ + border-top:1px solid unquote("rgb(#{$palette-u-gray-100})"); +} + +.u-border-left{ + border-left:1px solid unquote("rgb(#{$palette-u-gray-100})"); +} + +.u-border-right{ + border-right:1px solid unquote("rgb(#{$palette-u-gray-100})"); +} + +.u-border-bottom{ + border-bottom:1px solid unquote("rgb(#{$palette-u-gray-100})"); +} + +//居右 +.u-right{ + float:right; +} +//居左 +.u-left{ + float:left; +} + + + +@media (max-width: $screen-xs-min) { + .u-hidden-xs{ + display: none; + } +} + +@media (max-width: $screen-sm-min) { + .u-hidden-sm{ + display: none; + } +} + diff --git a/scss/set-normalize.scss b/scss/set-normalize.scss new file mode 100644 index 0000000..b304f3f --- /dev/null +++ b/scss/set-normalize.scss @@ -0,0 +1,425 @@ +// 参考bootstrap +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ + +// +// 1. Change the default font family in all browsers (opinionated). +// 2. Prevent adjustments of font size after orientation changes in IE and iOS. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove the margin in all browsers (opinionated). +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Add the correct display in IE 9-. +// 1. Add the correct display in Edge, IE, and Firefox. +// 2. Add the correct display in IE. +// + +article, +aside, +details, // 1 +figcaption, +figure, +footer, +header, +main, // 2 +menu, +nav, +section, +summary { // 1 + display: block; +} + +// +// Add the correct display in IE 9-. +// + +audio, +canvas, +progress, +video { + display: inline-block; +} + +// +// Add the correct display in iOS 4-7. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Add the correct vertical alignment in Chrome, Firefox, and Opera. +// + +progress { + vertical-align: baseline; +} + +// +// Add the correct display in IE 10-. +// 1. Add the correct display in IE. +// + +template, // 2 +[hidden] { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background on active links in IE 10. +// + +a { + background-color: transparent; +} + +// +// Remove the outline on focused links when they are also active or hovered +// in all browsers (opinionated). +// + +a:active, +a:hover { + outline-width: 0; +} + +// Text-level semantics +// ========================================================================== + +// +// 1. Remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +// + +abbr[title] { + border-bottom: none; // 1 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 +} + +// +// Prevent the duplicate application of `bolder` by the next rule in Safari 6. +// + +b, +strong { + font-weight: inherit; +} + +// +// Add the correct font weight in Chrome, Edge, and Safari. +// + +b, +strong { + font-weight: bolder; +} + +// +// Add the correct font style in Android 4.3-. +// + +dfn { + font-style: italic; +} + +// +// Correct the font size and margin on `h1` elements within `section` and +// `article` contexts in Chrome, Firefox, and Safari. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Add the correct background and color in IE 9-. +// + +mark { + background-color: #ff0; + color: #000; +} + +// +// Add the correct font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +// Embedded content +// ========================================================================== + +// +// Remove the border on images inside links in IE 10-. +// + +img { + border-style: none; +} + +// +// Hide the overflow in IE. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// 1. Correct the inheritance and scaling of font size in all browsers. +// 2. Correct the odd `em` font sizing in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 +} + +// +// Add the correct margin in IE 8. +// + +figure { + margin: 1em 40px; +} + +// +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. +// + +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 +} + +// Forms +// ========================================================================== + +// +// Change font properties to `inherit` in all browsers (opinionated). +// + +button, +input, +select, +textarea { + font: inherit; +} + +// +// Restore the font weight unset by the previous rule. +// + +optgroup { + font-weight: bold; +} + +// +// Show the overflow in IE. +// 1. Show the overflow in Edge. +// 2. Show the overflow in Edge, Firefox, and IE. +// + +button, +input, // 1 +select { // 2 + overflow: visible; +} + +// +// Remove the margin in Safari. +// 1. Remove the margin in Firefox and Safari. +// + +button, +input, +select, +textarea { // 1 + margin: 0; +} + +// +// Remove the inheritence of text transform in Edge, Firefox, and IE. +// 1. Remove the inheritence of text transform in Firefox. +// + +button, +select { // 1 + text-transform: none; +} + +// +// Change the cursor in all browsers (opinionated). +// + +button, +[type="button"], +[type="reset"], +[type="submit"] { + cursor: pointer; +} + +// +// Restore the default cursor to disabled elements unset by the previous rule. +// + +[disabled] { + cursor: default; +} + +// +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS. +// + +button, +html [type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 +} + +// +// Remove the inner border and padding in Firefox. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Restore the focus styles unset by the previous rule. +// + +button:-moz-focusring, +input:-moz-focusring { + outline: 1px dotted ButtonText; +} + +// +// Change the border, margin, and padding in all browsers (opinionated). +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. +// 3. Remove the padding so developers are not caught out when they zero out +// `fieldset` elements in all browsers. +// + +legend { + box-sizing: border-box; // 1 + color: inherit; // 2 + display: table; // 1 + max-width: 100%; // 1 + padding: 0; // 3 + white-space: normal; // 1 +} + +// +// Remove the default vertical scrollbar in IE. +// + +textarea { + overflow: auto; +} + +// +// 1. Add the correct box sizing in IE 10-. +// 2. Remove the padding in IE 10-. +// + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Correct the cursor style of increment and decrement buttons in Chrome. +// + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// Correct the odd appearance of search inputs in Chrome and Safari. +// + +[type="search"] { + -webkit-appearance: textfield; +} + +// +// Remove the inner padding and cancel buttons in Chrome on OS X and +// Safari on OS X. +// + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} \ No newline at end of file diff --git a/scss/set-resets.scss b/scss/set-resets.scss new file mode 100644 index 0000000..b1c2019 --- /dev/null +++ b/scss/set-resets.scss @@ -0,0 +1,55 @@ +/** + * Copyright 2015 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "set-h5bp"; +@import "set-mobile"; + +/* + * Make html take up the entire screen + * Then set touch-action to avoid touch delay on mobile IE + */ +html { + width: 100%; + height: 100%; + -ms-touch-action: manipulation; + touch-action: manipulation; +} + +/* +* Make body take up the entire screen +* Remove body margin so layout containers don't cause extra overflow. +*/ +body { + width: 100%; + height: 100%; + margin: 0; +} + +/* + * Main display reset for IE support. + * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011 + */ +main { + display: block; +} + +/* +* Apply no display to elements with the hidden attribute. +* IE 9 and 10 support. +*/ +*[hidden] { + display: none !important; +} diff --git a/scss/util-iconfont.css b/scss/util-iconfont.css new file mode 100644 index 0000000..a35d914 --- /dev/null +++ b/scss/util-iconfont.css @@ -0,0 +1,397 @@ + +@font-face {font-family: "uf"; + src: url('../fonts/iconfont.eot?t=1472092777'); /* IE9*/ + src: url('../fonts/iconfont.eot?t=1472092777#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/iconfont.woff?t=1472092777') format('woff'), /* chrome, firefox */ + url('../fonts/iconfont.ttf?t=1472092777') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('../fonts/iconfont.svg?t=1472092777#uf') format('svg'); /* iOS 4.1- */ +} + +.uf { + font-family:"uf" !important; + font-size:14px; + font-style:normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.2px; + -moz-osx-font-smoothing: grayscale; +} +.uf-renren:before { content: "\e72f"; } +.uf-xinlang:before { content: "\e754"; } +.uf-douban:before { content: "\e755"; } +.uf-kongqiyutian:before { content: "\e771"; } +.uf-tianqi:before { content: "\e772"; } +.uf-tengxunweibo:before { content: "\e756"; } +.uf-shejiao:before { content: "\e758"; } +.uf-iconfontapptianqi:before { content: "\e773"; } +.uf-guanbi1:before { content: "\e765"; } +.uf-shanchu:before { content: "\e766"; } +.uf-icclose:before { content: "\e767"; } +.uf-icclose4:before { content: "\e768"; } +.uf-close:before { content: "\e769"; } +.uf-zsxhao:before { content: "\e76a"; } +.uf-plus:before { content: "\e763"; } +.uf-quxiao:before { content: "\e76b"; } +.uf-tencent-circle:before { content: "\e759"; } +.uf-qzone-circle:before { content: "\e75d"; } +.uf-qzone-circle1:before { content: "\e75e"; } +.uf-qq:before { content: "\e75f"; } +.uf-tianqi1:before { content: "\e774"; } +.uf-saoyisao:before { content: "\e764"; } +.uf-tian7_weibo:before { content: "\e760"; } +.uf-addsquarebutton:before { content: "\e600"; } +.uf-adjustcontrast:before { content: "\e601"; } +.uf-alignjustify:before { content: "\e602"; } +.uf-aligntoleft:before { content: "\e603"; } +.uf-aligntoright:before { content: "\e604"; } +.uf-ambulance:before { content: "\e605"; } +.uf-anchorshape:before { content: "\e606"; } +.uf-anglearrowdown:before { content: "\e608"; } +.uf-addsquarebutton1:before { content: "\e609"; } +.uf-adjustcontrast1:before { content: "\e60a"; } +.uf-alignjustify1:before { content: "\e60b"; } +.uf-aligntoleft1:before { content: "\e60c"; } +.uf-aligntoright1:before { content: "\e60d"; } +.uf-ambulance1:before { content: "\e60e"; } +.uf-anchorshape1:before { content: "\e60f"; } +.uf-androidcharactersymbol:before { content: "\e610"; } +.uf-anglearrowpointingtoright:before { content: "\e611"; } +.uf-anglepointingtoleft:before { content: "\e612"; } +.uf-archiveblackbox:before { content: "\e613"; } +.uf-arrowanglepointingdown:before { content: "\e614"; } +.uf-arrowdownonblackcircularbackground:before { content: "\e615"; } +.uf-arrowpointingdown:before { content: "\e616"; } +.uf-arrowpointingrightinacircle:before { content: "\e617"; } +.uf-arrowpointingtoleft:before { content: "\e618"; } +.uf-arrowpointingtoright:before { content: "\e619"; } +.uf-arrowuponablackcirclebackground:before { content: "\e61a"; } +.uf-arrowup:before { content: "\e61b"; } +.uf-arrowheadpointingtotheright:before { content: "\e61c"; } +.uf-arrowheadpointingupinsideasquareboxoutline:before { content: "\e61d"; } +.uf-arrowheadspointingtotheleft:before { content: "\e61e"; } +.uf-asterisk:before { content: "\e61f"; } +.uf-bancirclesymbol:before { content: "\e620"; } +.uf-bargraphonarectangle:before { content: "\e621"; } +.uf-barcode:before { content: "\e622"; } +.uf-beaker:before { content: "\e623"; } +.uf-bellmusicaltool:before { content: "\e624"; } +.uf-bitbucketlogotypecameralensinperspective:before { content: "\e625"; } +.uf-bitbucketsign:before { content: "\e626"; } +.uf-bitcoinlogo:before { content: "\e627"; } +.uf-blankfile:before { content: "\e628"; } +.uf-boldtextoption:before { content: "\e629"; } +.uf-book:before { content: "\e62a"; } +.uf-bookmarkblackshape:before { content: "\e62b"; } +.uf-bookmarkwhite:before { content: "\e62c"; } +.uf-branchwithleavesblackshape:before { content: "\e62d"; } +.uf-briefcase:before { content: "\e62e"; } +.uf-bug:before { content: "\e62f"; } +.uf-buildingfront:before { content: "\e630"; } +.uf-bullhornannouncer:before { content: "\e631"; } +.uf-bullseye:before { content: "\e632"; } +.uf-calendarpageempty:before { content: "\e633"; } +.uf-calendarwithspringbinderanddateblocks:before { content: "\e634"; } +.uf-cameraretro:before { content: "\e635"; } +.uf-caretarrowup:before { content: "\e636"; } +.uf-caretdown:before { content: "\e637"; } +.uf-centertextalignment:before { content: "\e638"; } +.uf-certificateshape:before { content: "\e639"; } +.uf-checkboxempty:before { content: "\e63a"; } +.uf-checkmark:before { content: "\e63b"; } +.uf-checksigninaroundedblacksquare:before { content: "\e63c"; } +.uf-check:before { content: "\e63d"; } +.uf-checkedsymbol:before { content: "\e63e"; } +.uf-checkeredraisedflag:before { content: "\e63f"; } +.uf-chevronarrowdown:before { content: "\e640"; } +.uf-chevronarrowup:before { content: "\e641"; } +.uf-chevronpointingtotheleft:before { content: "\e642"; } +.uf-chevronsigndown:before { content: "\e643"; } +.uf-chevronsignleft:before { content: "\e644"; } +.uf-chevronsigntoright:before { content: "\e645"; } +.uf-chevronup:before { content: "\e646"; } +.uf-circleshapeoutline:before { content: "\e647"; } +.uf-circlewithanarrowpointingtoleft:before { content: "\e648"; } +.uf-circularshapesilhouette:before { content: "\e649"; } +.uf-cloudstoragedownload:before { content: "\e64a"; } +.uf-cloudstorageuploadingoption:before { content: "\e64b"; } +.uf-cocktailglass:before { content: "\e64c"; } +.uf-codeforksymbol:before { content: "\e64d"; } +.uf-code:before { content: "\e64e"; } +.uf-coffeecuponaplateblacksilhouettes:before { content: "\e64f"; } +.uf-cogwheelsilhouette:before { content: "\e650"; } +.uf-collapsewindowoption:before { content: "\e651"; } +.uf-commentblackovalbubbleshape:before { content: "\e652"; } +.uf-commentwhiteovalbubble:before { content: "\e653"; } +.uf-comments:before { content: "\e654"; } +.uf-compasscircularvariant:before { content: "\e655"; } +.uf-computertablet:before { content: "\e656"; } +.uf-copydocument:before { content: "\e657"; } +.uf-correctsymbol:before { content: "\e658"; } +.uf-coupleofarrowschangingplaces:before { content: "\e659"; } +.uf-creditcard:before { content: "\e65a"; } +.uf-cropsymbol:before { content: "\e65b"; } +.uf-crossmarkonablackcirclebackground:before { content: "\e65c"; } +.uf-cursor:before { content: "\e65d"; } +.uf-cut:before { content: "\e65e"; } +.uf-dashboard:before { content: "\e65f"; } +.uf-deliverytrucksilhouette:before { content: "\e660"; } +.uf-desktopmonitor:before { content: "\e661"; } +.uf-dotandcircle:before { content: "\e662"; } +.uf-doubleanglepointingtoright:before { content: "\e663"; } +.uf-doubleleftchevron:before { content: "\e664"; } +.uf-doublesidederaser:before { content: "\e665"; } +.uf-doublestrikethroughoption:before { content: "\e666"; } +.uf-downarrow:before { content: "\e667"; } +.uf-downloadsymbol:before { content: "\e668"; } +.uf-downloadtostoragedrive:before { content: "\e669"; } +.uf-dribbblelogo:before { content: "\e66a"; } +.uf-dropboxlogo:before { content: "\e66b"; } +.uf-earthglobe:before { content: "\e66c"; } +.uf-editinterfacesign:before { content: "\e66d"; } +.uf-ejectsymbol:before { content: "\e66e"; } +.uf-envelopeofwhitepaper:before { content: "\e66f"; } +.uf-envelope:before { content: "\e670"; } +.uf-eurocurrencysymbol:before { content: "\e671"; } +.uf-exchangearrows:before { content: "\e672"; } +.uf-exclamationsign:before { content: "\e673"; } +.uf-exclamation:before { content: "\e674"; } +.uf-externallinksquarewithanarrowinrightdiagonal:before { content: "\e675"; } +.uf-externallinksymbol:before { content: "\e676"; } +.uf-eyeopen:before { content: "\e677"; } +.uf-eyewithadiagonallineinterfacesymbolforinvisibility:before { content: "\e678"; } +.uf-facebooklogo1:before { content: "\e679"; } +.uf-facebooklogo:before { content: "\e67a"; } +.uf-facetimebutton:before { content: "\e67b"; } +.uf-fastforwardarrows:before { content: "\e67c"; } +.uf-femalesilhouette:before { content: "\e67d"; } +.uf-fighterjetsilhouette:before { content: "\e67e"; } +.uf-file:before { content: "\e67f"; } +.uf-filmstripwithtwophotograms:before { content: "\e680"; } +.uf-filtertoolblackshape:before { content: "\e681"; } +.uf-fingerofahandpointingtorightdirection:before { content: "\e682"; } +.uf-fireextinguisher:before { content: "\e683"; } +.uf-firesymbol:before { content: "\e684"; } +.uf-flagblackshape:before { content: "\e685"; } +.uf-flickrwebsitelogosilhouette:before { content: "\e686"; } +.uf-fluffycloudsilhouette:before { content: "\e687"; } +.uf-folderclosedblackshape:before { content: "\e688"; } +.uf-folderwhiteshape:before { content: "\e689"; } +.uf-fontselectioneditor:before { content: "\e68a"; } +.uf-fontsymboloflettera:before { content: "\e68b"; } +.uf-forkandknifesilhouette:before { content: "\e68c"; } +.uf-forwardbutton:before { content: "\e68d"; } +.uf-fourblacksquares:before { content: "\e68e"; } +.uf-foursquarebutton:before { content: "\e68f"; } +.uf-frown:before { content: "\e690"; } +.uf-fullscreensymbol:before { content: "\e691"; } +.uf-gamepadconsole:before { content: "\e692"; } +.uf-giftbox:before { content: "\e693"; } +.uf-githubcharacter:before { content: "\e694"; } +.uf-githublogo:before { content: "\e695"; } +.uf-githubsign:before { content: "\e696"; } +.uf-gittipwebsitelogo:before { content: "\e697"; } +.uf-greatbritainpound:before { content: "\e699"; } +.uf-groupprofileusers:before { content: "\e69a"; } +.uf-halfstarshape:before { content: "\e69b"; } +.uf-handfingerpointingdown:before { content: "\e69c"; } +.uf-handpointingtoleftdirection:before { content: "\e69d"; } +.uf-handpointingupward:before { content: "\e69e"; } +.uf-harddrive:before { content: "\e69f"; } +.uf-heartshapeoutline:before { content: "\e6a0"; } +.uf-heartshapesilhouette:before { content: "\e6a1"; } +.uf-home:before { content: "\e6a2"; } +.uf-horizontalresizeoption:before { content: "\e6a3"; } +.uf-hostpitalbuilding:before { content: "\e6a4"; } +.uf-hotelletterhsigninsideablackroundedsquare:before { content: "\e6a5"; } +.uf-html5logo:before { content: "\e6a6"; } +.uf-inbox:before { content: "\e6a7"; } +.uf-increasesizeoption:before { content: "\e6a8"; } +.uf-indentright:before { content: "\e6a9"; } +.uf-informationbutton:before { content: "\e6aa"; } +.uf-informationsymbol:before { content: "\e6ab"; } +.uf-instagramsymbol:before { content: "\e6ac"; } +.uf-italicizetext:before { content: "\e6ad"; } +.uf-keyboard:before { content: "\e6ae"; } +.uf-leftarrow1:before { content: "\e6af"; } +.uf-leftarrow:before { content: "\e6b0"; } +.uf-leftindentationoption:before { content: "\e6b1"; } +.uf-legalhammer:before { content: "\e6b2"; } +.uf-lemon:before { content: "\e6b3"; } +.uf-leterainsideablackcircle:before { content: "\e6b4"; } +.uf-levelup:before { content: "\e6b5"; } +.uf-lightbulb:before { content: "\e6b6"; } +.uf-lightningboltshadow:before { content: "\e6b7"; } +.uf-linksymbol:before { content: "\e6b8"; } +.uf-linkedinletters:before { content: "\e6b9"; } +.uf-linkedinsign:before { content: "\e6ba"; } +.uf-listonwindow:before { content: "\e6bb"; } +.uf-listwithdots:before { content: "\e6bc"; } +.uf-list:before { content: "\e6bd"; } +.uf-listingoption:before { content: "\e6be"; } +.uf-longarrowpointingtoleft:before { content: "\e6bf"; } +.uf-longarrowpointingtotheright:before { content: "\e6c0"; } +.uf-longarrowpointingup:before { content: "\e6c1"; } +.uf-magicwand:before { content: "\e6c2"; } +.uf-magnifyingglass:before { content: "\e6c3"; } +.uf-man:before { content: "\e6c4"; } +.uf-mapmarker:before { content: "\e6c5"; } +.uf-medicalkit:before { content: "\e6c6"; } +.uf-mehfaceemoticon:before { content: "\e6c7"; } +.uf-microphoneblackshape:before { content: "\e6c8"; } +.uf-microphoneoff:before { content: "\e6c9"; } +.uf-minusbutton:before { content: "\e6ca"; } +.uf-minussigninsideablackcircle:before { content: "\e6cb"; } +.uf-minussigninsideablackroundedsquareshape:before { content: "\e6cc"; } +.uf-minussignonasquareoutline:before { content: "\e6cd"; } +.uf-minussymbol:before { content: "\e6ce"; } +.uf-mobilephone:before { content: "\e6cf"; } +.uf-moonphaseoutline:before { content: "\e6d0"; } +.uf-moveoption:before { content: "\e6d1"; } +.uf-musicheadphones:before { content: "\e6d2"; } +.uf-musicnoteblacksymbol:before { content: "\e6d3"; } +.uf-musicalbelloutline:before { content: "\e6d4"; } +.uf-nineblacktiles:before { content: "\e6d5"; } +.uf-numberedlist:before { content: "\e6d6"; } +.uf-openfolderoutline:before { content: "\e6d7"; } +.uf-openfolder:before { content: "\e6d8"; } +.uf-openlaptopcomputer:before { content: "\e6d9"; } +.uf-openpadlocksilhouette:before { content: "\e6da"; } +.uf-openwrenchtoolsilhouette:before { content: "\e6db"; } +.uf-padlockunlock:before { content: "\e6dc"; } +.uf-padlock:before { content: "\e6dd"; } +.uf-paperbill:before { content: "\e6de"; } +.uf-paperclipoutline:before { content: "\e6df"; } +.uf-paperpushpin:before { content: "\e6e0"; } +.uf-pastefromclipboard:before { content: "\e6e1"; } +.uf-pausesymbol:before { content: "\e6e2"; } +.uf-pencil:before { content: "\e6e3"; } +.uf-photocamera:before { content: "\e6e4"; } +.uf-picture:before { content: "\e6e5"; } +.uf-plane:before { content: "\e6e7"; } +.uf-plantleafwithwhitedetails:before { content: "\e6e8"; } +.uf-playbutton:before { content: "\e6e9"; } +.uf-playcircle:before { content: "\e6ea"; } +.uf-playsign:before { content: "\e6eb"; } +.uf-playvideobutton:before { content: "\e6ec"; } +.uf-plusblacksymbol:before { content: "\e6ed"; } +.uf-plussigninablackcircle:before { content: "\e6ee"; } +.uf-plussymbolinaroundedblacksquare:before { content: "\e6ef"; } +.uf-powerbuttonoff:before { content: "\e6f0"; } +.uf-printingtool:before { content: "\e6f1"; } +.uf-puzzlepiecesilhouette:before { content: "\e6f2"; } +.uf-qrcode:before { content: "\e6f3"; } +.uf-questionmarkonacircularblackbackground:before { content: "\e6f4"; } +.uf-questionsign:before { content: "\e6f5"; } +.uf-quoteleft:before { content: "\e6f6"; } +.uf-reducedvolume:before { content: "\e6f7"; } +.uf-refresharrow:before { content: "\e6f8"; } +.uf-refreshpageoption:before { content: "\e6f9"; } +.uf-removebutton:before { content: "\e6fa"; } +.uf-removesymbol:before { content: "\e6fb"; } +.uf-renrensocialnetworkofchinalogotype:before { content: "\e6fc"; } +.uf-reorderoption:before { content: "\e6fd"; } +.uf-replyarrow:before { content: "\e6fe"; } +.uf-reply:before { content: "\e6ff"; } +.uf-resizeoption:before { content: "\e700"; } +.uf-retweetarrowssymbol:before { content: "\e701"; } +.uf-rewindbutton:before { content: "\e702"; } +.uf-rightarrowinacircle:before { content: "\e703"; } +.uf-rightchevron:before { content: "\e704"; } +.uf-rightquotationmark:before { content: "\e705"; } +.uf-roadperspective:before { content: "\e706"; } +.uf-roundedblacksquareshape:before { content: "\e707"; } +.uf-savefileoption:before { content: "\e70a"; } +.uf-screenshot:before { content: "\e70b"; } +.uf-settings:before { content: "\e70c"; } +.uf-shareoption:before { content: "\e70d"; } +.uf-sharepostsymbol:before { content: "\e70e"; } +.uf-sharesymbol:before { content: "\e70f"; } +.uf-shield:before { content: "\e710"; } +.uf-shoppingcartblackshape:before { content: "\e711"; } +.uf-signin:before { content: "\e712"; } +.uf-signoutoption:before { content: "\e713"; } +.uf-signalbars:before { content: "\e714"; } +.uf-sitemap:before { content: "\e715"; } +.uf-smallrocketshipsilhouette:before { content: "\e716"; } +.uf-smile:before { content: "\e717"; } +.uf-sortarrowscouplepointingupanddown:before { content: "\e718"; } +.uf-sortbyalphabet:before { content: "\e719"; } +.uf-sortbyattributesinterfacebuttonoption:before { content: "\e71a"; } +.uf-sortbyattributes:before { content: "\e71b"; } +.uf-sortbynumericorder:before { content: "\e71c"; } +.uf-sortbyorder:before { content: "\e71d"; } +.uf-sortdown:before { content: "\e71e"; } +.uf-sortreversealphabeticalorder:before { content: "\e71f"; } +.uf-sortup:before { content: "\e720"; } +.uf-speechbubblescommentoption:before { content: "\e721"; } +.uf-spinnerofdots:before { content: "\e722"; } +.uf-squareshapeshadow:before { content: "\e723"; } +.uf-stackexchangelogo:before { content: "\e724"; } +.uf-stackexchangesymbol:before { content: "\e725"; } +.uf-star1:before { content: "\e726"; } +.uf-starhalfempty:before { content: "\e727"; } +.uf-star:before { content: "\e728"; } +.uf-stepbackward:before { content: "\e729"; } +.uf-stepforward:before { content: "\e72a"; } +.uf-stethoscope:before { content: "\e72b"; } +.uf-strikethrough:before { content: "\e72c"; } +.uf-suitcasewithwhitedetails:before { content: "\e72d"; } +.uf-sun:before { content: "\e72e"; } +.uf-tablegrid:before { content: "\e730"; } +.uf-tagblackshape:before { content: "\e731"; } +.uf-tags:before { content: "\e732"; } +.uf-taskslist:before { content: "\e733"; } +.uf-telephonehandlesilhouette:before { content: "\e734"; } +.uf-telephonesymbolbutton:before { content: "\e735"; } +.uf-terminal:before { content: "\e736"; } +.uf-textfile1:before { content: "\e737"; } +.uf-textfile:before { content: "\e738"; } +.uf-textheightadjustment:before { content: "\e739"; } +.uf-textwidth:before { content: "\e73a"; } +.uf-thinarrowheadspointingdown:before { content: "\e73b"; } +.uf-threesmallsquareshapes:before { content: "\e73c"; } +.uf-thumbdown:before { content: "\e73d"; } +.uf-thumbsdownsilhouette:before { content: "\e73e"; } +.uf-thumbsuphandsymbol:before { content: "\e73f"; } +.uf-thumbsup:before { content: "\e740"; } +.uf-ticket:before { content: "\e741"; } +.uf-time:before { content: "\e742"; } +.uf-tintdrop:before { content: "\e743"; } +.uf-trash:before { content: "\e744"; } +.uf-trellowebsitelogo:before { content: "\e745"; } +.uf-trophy:before { content: "\e746"; } +.uf-twocolumnslayout:before { content: "\e747"; } +.uf-ushapedthickmagnet:before { content: "\e748"; } +.uf-umbrellablacksilhouette:before { content: "\e749"; } +.uf-underlinetextoption:before { content: "\e74a"; } +.uf-undoarrow:before { content: "\e74b"; } +.uf-unlinksymbol:before { content: "\e74c"; } +.uf-uparrow:before { content: "\e74d"; } +.uf-upchevronbutton:before { content: "\e74e"; } +.uf-uploadbutton:before { content: "\e74f"; } +.uf-upload:before { content: "\e750"; } +.uf-usermdsymbol:before { content: "\e751"; } +.uf-usershape:before { content: "\e752"; } +.uf-verticalellipsis:before { content: "\e753"; } +.uf-yensymbol:before { content: "\e757"; } +.uf-youtubelogo:before { content: "\e75a"; } +.uf-zoomin:before { content: "\e75b"; } +.uf-zoomout:before { content: "\e75c"; } +.uf-addsquarebutton2:before { content: "\e607"; } +.uf-downarrow1:before { content: "\e6e6"; } +.uf-leftarrow1:before { content: "\e708"; } +.uf-rightarrow:before { content: "\e709"; } +.uf-warningmd:before { content: "\e698"; } +.uf-guanbi:before { content: "\e76c"; } +.uf-shanchuyuan:before { content: "\e76d"; } +.uf-shareto_weixin:before { content: "\e761"; } +.uf-shareto_qq:before { content: "\e762"; } +.uf-jsonfile:before { content: "\e76e"; } +.uf-Kafka:before { content: "\e76f"; } +.uf-chazhuangshanchu:before { content: "\e770"; } +.uf-tianqidafeng:before { content: "\e775"; } +.uf-tianqibaoxue:before { content: "\e776"; } +.uf-tianqibingbao:before { content: "\e777"; } +.uf-tianqifengbao:before { content: "\e778"; } +.uf-tianqixiaoyu:before { content: "\e779"; } +.uf-tianqizhenxue:before { content: "\e77a"; } +.uf-tianqizhongyu:before { content: "\e77b"; } diff --git a/scss/util-ripple.scss b/scss/util-ripple.scss new file mode 100644 index 0000000..d11c12a --- /dev/null +++ b/scss/util-ripple.scss @@ -0,0 +1,44 @@ +@import "minxin-variables"; + +.u-ripple { + background : $ripple-bg-color; + border-radius : 50%; + height : 50px; + left : 0; + filter: alpha(opacity=0); + opacity : 0; + filter: alpha(opacity=0) \9; + display:none \9; + pointer-events : none; + position : absolute; + top : 0; + transform : translate(-50%, -50%); + width : 50px; + overflow : hidden; + + &.is-animating { + transition: transform 0.8s $animation-curve-linear-out-slow-in, + width 0.8s $animation-curve-linear-out-slow-in, + height 0.8s $animation-curve-linear-out-slow-in, + opacity 0.8s $animation-curve-linear-out-slow-in; + } + + &.is-visible { + opacity: 0.3; + } + + &.oldIE{ + background:none; + } +} + +.u-ripple-container { + display: block; + height: 100%; + left: 0rem; + position: absolute; + top: 0rem; + width: 100%; + z-index: 0; + overflow: hidden; +} diff --git a/scss/util-shadow.scss b/scss/util-shadow.scss new file mode 100644 index 0000000..7ff2f6a --- /dev/null +++ b/scss/util-shadow.scss @@ -0,0 +1,34 @@ +@import "minxin-variables"; +@import "minxin-mixins"; + +.u-shadow-0dp { + @include shadow-0dp(); +} + +.u-shadow-2dp { + @include shadow-2dp(); +} + +.u-shadow-3dp { + @include shadow-3dp(); +} + +.u-shadow-4dp { + @include shadow-4dp(); +} + +.u-shadow-6dp { + @include shadow-6dp(); +} + +.u-shadow-8dp { + @include shadow-8dp(); +} + +.u-shadow-16dp { + @include shadow-16dp(); +} + +.u-shadow-24dp { + @include shadow-24dp(); +} diff --git a/scss/util-tool.scss b/scss/util-tool.scss new file mode 100644 index 0000000..35204e8 --- /dev/null +++ b/scss/util-tool.scss @@ -0,0 +1,464 @@ +@import "minxin-variables"; + +/* 宽高 */ +.w-16 { + width: 16px; +} + +.w-20 { + width: 20px; +} + +.w-24 { + width: 24px; +} + +.w-32 { + width: 32px; +} + +.w-40 { + width: 40px; +} + +.w-48 { + width: 48px; +} + +.w-56 { + width: 56px; +} + +.w-64 { + width: 64px; +} + +.w-xxl { + width: 60px; +} + +.w-xs { + width: 90px; +} + +.w-sm { + width: 120px; +} + +.w { + width: 180px; +} + +.w-md { + width: 200px; +} + +.w-lg { + width: 240px; +} + +.w-xl { + width: 280px; +} + +.w-xxl { + width: 320px; +} + +.w-full { + width: 100%; +} + + + + +.w-auto { + width: auto; +} + +.h-auto { + height: auto; +} + +.h-full { + height: 100%; +} + +/* 外边距 */ + +.no-margin { + margin: 0; +} + +.m { + margin: 16px; +} + +.m-xs { + margin: 4px; +} + +.m-sm { + margin: 8px; +} + +.m-md { + margin: 24px; +} + +.m-lg { + margin: 32px; +} + +.m-v-xs { + margin-top: 4px; + margin-bottom: 4px; +} + +.m-v-sm { + margin-top: 8px; + margin-bottom: 8px; +} + +.m-v { + margin-top: 16px; + margin-bottom: 16px; +} + +.m-v-md { + margin-top: 24px; + margin-bottom: 24px; +} + +.m-v-lg { + margin-top: 32px; + margin-bottom: 32px; +} + +.m-h-xs { + margin-right: 4px; + margin-left: 4px; +} + +.m-h-sm { + margin-right: 8px; + margin-left: 8px; +} + +.m-h { + margin-right: 16px; + margin-left: 16px; +} + +.m-h-md { + margin-right: 24px; + margin-left: 24px; +} + +.m-h-lg { + margin-right: 32px; + margin-left: 32px; +} + +.m-t { + margin-top: 16px; +} + +.m-t-xs { + margin-top: 4px; +} + +.m-t-sm { + margin-top: 8px; +} + +.m-t-md { + margin-top: 24px; +} + +.m-t-lg { + margin-top: 32px; +} + +.m-r { + margin-right: 16px; +} + +.m-r-xs { + margin-right: 4px; +} + +.m-r-sm { + margin-right: 8px; +} + +.m-r-md { + margin-right: 24px; +} + +.m-r-lg { + margin-right: 32px; +} + +.m-b { + margin-bottom: 16px; +} + +.m-b-xs { + margin-bottom: 4px; +} + +.m-b-sm { + margin-bottom: 8px; +} + +.m-b-md { + margin-bottom: 24px; +} + +.m-b-lg { + margin-bottom: 32px; +} + +.m-l { + margin-left: 16px; +} + +.m-l-xs { + margin-left: 4px; +} + +.m-l-sm { + margin-left: 8px; +} + +.m-l-md { + margin-left: 24px; +} + +.m-l-lg { + margin-left: 32px; +} + +.m-n { + margin: -16px; +} + +.m-h-n { + margin-right: -16px; + margin-left: -16px; +} + +.m-v-n { + margin-top: -16px; + margin-bottom: -16px; +} + +.m-l-n { + margin-left: -16px; +} + +.m-r-n { + margin-right: -16px; +} + +.m-t-n { + margin-top: -16px; +} + +.m-b-n { + margin-bottom: -16px; +} + +/* 内边距 */ +.no-padding { + padding: 0 !important; +} + +.no-padding-h { + padding-right: 0 !important; + padding-left: 0 !important; +} + +.no-padding-v { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.p-xs { + padding: 4px; +} + +.p-sm { + padding: 8px; +} + +.p { + padding: 16px; +} + +.p-md { + padding: 24px; +} + +.p-lg { + padding: 32px; +} + +.p-h { + padding-right: 16px; + padding-left: 16px; +} + +.p-h-xs { + padding-right: 4px; + padding-left: 4px; +} + +.p-h-sm { + padding-right: 8px; + padding-left: 8px; +} + +.p-h-md { + padding-right: 24px; + padding-left: 24px; +} + +.p-t-md { + padding-top:24px; +} + +.p-b-md{ + padding-bottom: 24px; +} + +.p-l-md{ + padding-left: 24px; +} + +.p-h-lg { + padding-right: 32px; + padding-left: 32px; +} + +.p-v { + padding-top: 16px; + padding-bottom: 16px; +} + +.p-v-xs { + padding-top: 4px; + padding-bottom: 4px; +} + +.p-v-sm { + padding-top: 8px; + padding-bottom: 8px; +} + +.p-v-md { + padding-top: 24px; + padding-bottom: 24px; +} + +.p-v-lg { + padding-top: 32px; + padding-bottom: 32px; +} + +.padding { + padding: 32px 32px; +} + +.padding-out { + margin: -32px -32px; +} + +/* 边框 */ + +.no-border { + border-color: transparent; + border-width: 0; +} + +/* 背景 */ +.no-bg { + color: inherit; + background-color: transparent; +} + +/* 文字 */ + +.text-ellipsis { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-muted { + color: inherit; + opacity: 0.75; +} + +.text-muted-dk { + color: inherit; + opacity: 0.5; +} + +.text-muted-lt { + color: inherit; + opacity: 0.25; +} + +.u-text-left, .text-left{ + text-align: left !important; +} + +.u-text-center, text-center{ + text-align: center !important; +} + +.u-text-right, text-right{ + text-align: right !important; +} + + + + +// a { +// color: inherit; +// text-decoration: none; +// cursor: pointer; +// outline: 0; +// } + +// a:hover, +// a:focus { +// color: inherit; +// text-decoration: none; +// } + +// 超链接按钮 +.u-link{ + cursor: pointer; + color:unquote("rgb(#{$palette-indigo-500})"); + background-color: transparent; + text-decoration: none; + +} + +.u-link:active, +.u-link:hover{ + outline: 0; +} + +.u-link:focus, .u-link:hover { + text-decoration: underline; +} + + +.img-circle{ + border-radius:50% +} \ No newline at end of file diff --git a/scss/util-utilities.scss b/scss/util-utilities.scss new file mode 100644 index 0000000..db1d32e --- /dev/null +++ b/scss/util-utilities.scss @@ -0,0 +1,1613 @@ +// Vertical aligns +// ======================================================================== +.vertical-align { + font-size: 0; + + &:before { + display: inline-block; + height: 100%; + vertical-align: middle; + content: ""; + } + + &-middle, &-bottom { + display: inline-block; + max-width: 100%; + font-size: $font-size-small; + } + &-middle { + vertical-align: middle; + } + &-bottom { + vertical-align: bottom; + } +} + +// Layout +// ======================================================================== +.inline { + display: inline !important; +} + +.inline-block { + display: inline-block !important; +} + +.block { + display: block !important; +} + +// Text wrapping +// ======================================================================== +.text-truncate { + @include text-truncate(); +} + +.text-break { + @include text-break(); +} + +.text-nowrap { + @include text-nowrap(); +} + + +// Text Alignment +// ======================================================================== +.text-top { + vertical-align: top !important; +} +.text-middle { + vertical-align: middle !important; +} +.text-bottom { + vertical-align: bottom !important; +} +.text-left { + text-align: left !important; +} +.text-right { + text-align: right !important; +} +.text-center { + text-align: center !important; +} +.text-justify { + text-align: justify !important; +} +// .text-nowrap { +// white-space: nowrap !important; +// } + +// Text Transformation +// ======================================================================== +.text-lowercase { + text-transform: lowercase !important; +} +.text-uppercase { + text-transform: uppercase !important; +} +.text-capitalize { + text-transform: capitalize !important; +} + + +// Font weight Helpers +// ======================================================================== +.font-weight-unset { + font-weight: unset !important; +} +.font-weight-100 { + font-weight: 100 !important; +} +.font-weight-200 { + font-weight: 200 !important; +} +.font-weight-300 { + font-weight: 300 !important; +} +.font-weight-400 { + font-weight: 400 !important; +} +.font-weight-500 { + font-weight: 500 !important; +} +.font-weight-600 { + font-weight: 600 !important; +} +.font-weight-700 { + font-weight: 700 !important; +} +.font-weight-800 { + font-weight: 800 !important; +} +.font-weight-900 { + font-weight: 900 !important; +} +.font-weight-light { + font-weight: $font-weight-light !important; +} +.font-weight-normal { + font-weight: $font-weight-normal !important; +} +.font-weight-medium { + font-weight: $font-weight-medium !important; +} +.font-weight-bold { + font-weight: $font-weight-bold !important; +} + + +// Font Size Helpers +// ======================================================================== +.font-size-0 { + font-size: 0 !important; +} +.font-size-10 { + font-size: 10px !important; +} +.font-size-12 { + font-size: 12px !important; +} +.font-size-14 { + font-size: 14px !important; +} +.font-size-16 { + font-size: 16px !important; +} +.font-size-18 { + font-size: 18px !important; +} +.font-size-20 { + font-size: 20px !important; +} +.font-size-24 { + font-size: 24px !important; +} +.font-size-26 { + font-size: 26px !important; +} +.font-size-30 { + font-size: 30px !important; +} +.font-size-40 { + font-size: 40px !important; +} +.font-size-50 { + font-size: 50px !important; +} +.font-size-60 { + font-size: 60px !important; +} +.font-size-70 { + font-size: 70px !important; +} +.font-size-80 { + font-size: 80px !important; +} + + +// Floats +// ------------------------- + +.clearfix { + @include clearfix(); +} +.center-block { + @include center-block(); +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + + +// Toggling content +// ------------------------- + +// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + @include text-hide(); +} + + +// Hide from screenreaders and browsers +.hidden { + display: none !important; +} + + +/* 宽高 */ +.w-16 { + width: 16px; +} + +.w-20 { + width: 20px; +} + +.w-24 { + width: 24px; +} + +.w-32 { + width: 32px; +} + +.w-40 { + width: 40px; +} + +.w-48 { + width: 48px; +} + +.w-56 { + width: 56px; +} + +.w-64 { + width: 64px; +} + +.w-xs { + width: 90px; +} + +.w-sm { + width: 120px; +} + +.w { + width: 180px; +} + +.w-md { + width: 200px; +} + +.w-lg { + width: 240px; +} + +.w-xl { + width: 280px; +} + +.w-xxl { + width: 320px; +} + +.w-full { + width: 100%; +} + + +// Width Helpers +// ======================================================================== +.width-50 { + width: 50px; +} +.width-100 { + width: 100px; +} +.width-150 { + width: 150px; +} +.width-200 { + width: 200px; +} +.width-250 { + width: 250px; +} +.width-300 { + width: 300px; +} +.width-350 { + width: 350px; +} +.width-400 { + width: 400px; +} +.width-450 { + width: 450px; +} +.width-500 { + width: 500px; +} +.width-full { + width: 100% !important; +} +.width-auto { + width: auto; +} + + + + +.h-16 { + height: 16px; +} + +.h-20 { + height: 20px; +} + +.h-24 { + height: 24px; +} + +.h-32 { + height: 32px; +} + +.h-40 { + height: 40px; +} + +.h-48 { + height: 48px; +} + +.h-56 { + height: 56px; +} + +.h-64 { + height: 64px; +} + +.h-xxl { + height: 60px; +} + +.h-xs { + height: 90px; +} + +.h-sm { + height: 120px; +} + +.h { + height: 180px; +} + +.h-md { + height: 200px; +} + +.h-lg { + height: 240px; +} + +.h-xl { + height: 280px; +} + +.h-xxl { + height: 320px; +} + + +.h-auto { + height: auto; +} + +.h-full { + height: 100%; +} + + +// Height Helpers +// ======================================================================== +.height-50 { + height: 50px; +} +.height-100 { + height: 100px; +} +.height-120 { + height: 120px; +} +.height-150 { + height: 150px; +} +.height-200 { + height: 200px; +} +.height-250 { + height: 250px; +} +.height-300 { + height: 300px; +} +.height-350 { + height: 350px; +} +.height-400 { + height: 400px; +} +.height-450 { + height: 450px; +} +.height-500 { + height: 500px; +} +.height-full { + height: 100% !important; +} + +.height-auto { + height: auto; +} + + +/* 外边距 */ + +.no-margin { + margin: 0; +} + +.m { + margin: 16px; +} + +.m-xs { + margin: 4px; +} + +.m-sm { + margin: 8px; +} + +.m-md { + margin: 24px; +} + +.m-lg { + margin: 32px; +} + +.m-v-xs { + margin-top: 4px; + margin-bottom: 4px; +} + +.m-v-sm { + margin-top: 8px; + margin-bottom: 8px; +} + +.m-v { + margin-top: 16px; + margin-bottom: 16px; +} + +.m-v-md { + margin-top: 24px; + margin-bottom: 24px; +} + +.m-v-lg { + margin-top: 32px; + margin-bottom: 32px; +} + +.m-h-xs { + margin-right: 4px; + margin-left: 4px; +} + +.m-h-sm { + margin-right: 8px; + margin-left: 8px; +} + +.m-h { + margin-right: 16px; + margin-left: 16px; +} + +.m-h-md { + margin-right: 24px; + margin-left: 24px; +} + +.m-h-lg { + margin-right: 32px; + margin-left: 32px; +} + +.m-t { + margin-top: 16px; +} + +.m-t-xs { + margin-top: 4px; +} + +.m-t-sm { + margin-top: 8px; +} + +.m-t-md { + margin-top: 24px; +} + +.m-t-lg { + margin-top: 32px; +} + +.m-r { + margin-right: 16px; +} + +.m-r-xs { + margin-right: 4px; +} + +.m-r-sm { + margin-right: 8px; +} + +.m-r-md { + margin-right: 24px; +} + +.m-r-lg { + margin-right: 32px; +} + +.m-b { + margin-bottom: 16px; +} + +.m-b-xs { + margin-bottom: 4px; +} + +.m-b-sm { + margin-bottom: 8px; +} + +.m-b-md { + margin-bottom: 24px; +} + +.m-b-lg { + margin-bottom: 32px; +} + +.m-l { + margin-left: 16px; +} + +.m-l-xs { + margin-left: 4px; +} + +.m-l-sm { + margin-left: 8px; +} + +.m-l-md { + margin-left: 24px; +} + +.m-l-lg { + margin-left: 32px; +} + +.m-n { + margin: -16px; +} + +.m-h-n { + margin-right: -16px; + margin-left: -16px; +} + +.m-v-n { + margin-top: -16px; + margin-bottom: -16px; +} + +.m-l-n { + margin-left: -16px; +} + +.m-r-n { + margin-right: -16px; +} + +.m-t-n { + margin-top: -16px; +} + +.m-b-n { + margin-bottom: -16px; +} + +// Margin Helpers +// ======================================================================== +.margin-0 { + margin: 0 !important; +} +.margin-3 { + margin: 3px !important; +} +.margin-5 { + margin: 5px !important; +} +.margin-10 { + margin: 10px !important; +} +.margin-15 { + margin: 15px !important; +} +.margin-20 { + margin: 20px !important; +} +.margin-25 { + margin: 25px !important; +} +.margin-30 { + margin: 30px !important; +} +.margin-35 { + margin: 35px !important; +} +.margin-40 { + margin: 40px !important; +} +.margin-45 { + margin: 45px !important; +} +.margin-50 { + margin: 50px !important; +} +.margin-60 { + margin: 60px !important; +} +.margin-70 { + margin: 70px !important; +} +.margin-80 { + margin: 80px !important; +} + +// margin vertical +// --------------- +.margin-vertical-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.margin-vertical-3 { + margin-top: 3px !important; + margin-bottom: 3px !important; +} +.margin-vertical-5 { + margin-top: 5px !important; + margin-bottom: 5px !important; +} +.margin-vertical-10 { + margin-top: 10px !important; + margin-bottom: 10px !important; +} +.margin-vertical-15 { + margin-top: 15px !important; + margin-bottom: 15px !important; +} +.margin-vertical-20 { + margin-top: 20px !important; + margin-bottom: 20px !important; +} +.margin-vertical-25 { + margin-top: 25px !important; + margin-bottom: 25px !important; +} +.margin-vertical-30 { + margin-top: 30px !important; + margin-bottom: 30px !important; +} +.margin-vertical-35 { + margin-top: 35px !important; + margin-bottom: 35px !important; +} +.margin-vertical-40 { + margin-top: 40px !important; + margin-bottom: 40px !important; +} +.margin-vertical-45 { + margin-top: 45px !important; + margin-bottom: 45px !important; +} +.margin-vertical-50 { + margin-top: 50px !important; + margin-bottom: 50px !important; +} +.margin-vertical-60 { + margin-top: 60px !important; + margin-bottom: 60px !important; +} +.margin-vertical-70 { + margin-top: 70px !important; + margin-bottom: 70px !important; +} +.margin-vertical-80 { + margin-top: 80px !important; + margin-bottom: 80px !important; +} + +// margin horizontal +// ----------------- +.margin-horizontal-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} +.margin-horizontal-3 { + margin-right: 3px !important; + margin-left: 3px !important; +} +.margin-horizontal-5 { + margin-right: 5px !important; + margin-left: 5px !important; +} +.margin-horizontal-10 { + margin-right: 10px !important; + margin-left: 10px !important; +} +.margin-horizontal-15 { + margin-right: 15px !important; + margin-left: 15px !important; +} +.margin-horizontal-20 { + margin-right: 20px !important; + margin-left: 20px !important; +} +.margin-horizontal-25 { + margin-right: 25px !important; + margin-left: 25px !important; +} +.margin-horizontal-30 { + margin-right: 30px !important; + margin-left: 30px !important; +} +.margin-horizontal-35 { + margin-right: 35px !important; + margin-left: 35px !important; +} +.margin-horizontal-40 { + margin-right: 40px !important; + margin-left: 40px !important; +} +.margin-horizontal-45 { + margin-right: 45px !important; + margin-left: 45px !important; +} +.margin-horizontal-50 { + margin-right: 50px !important; + margin-left: 50px !important; +} +.margin-horizontal-60 { + margin-right: 60px !important; + margin-left: 60px !important; +} +.margin-horizontal-70 { + margin-right: 70px !important; + margin-left: 70px !important; +} +.margin-horizontal-80 { + margin-right: 80px !important; + margin-left: 80px !important; +} +// margin top +// ---------- +.margin-top-0 { + margin-top: 0 !important; +} +.margin-top-3 { + margin-top: 3px !important; +} +.margin-top-5 { + margin-top: 5px !important; +} +.margin-top-10 { + margin-top: 10px !important; +} +.margin-top-15 { + margin-top: 15px !important; +} +.margin-top-20 { + margin-top: 20px !important; +} +.margin-top-25 { + margin-top: 25px !important; +} +.margin-top-30 { + margin-top: 30px !important; +} +.margin-top-35 { + margin-top: 35px !important; +} +.margin-top-40 { + margin-top: 40px !important; +} +.margin-top-45 { + margin-top: 45px !important; +} +.margin-top-50 { + margin-top: 50px !important; +} +.margin-top-60 { + margin-top: 60px !important; +} +.margin-top-70 { + margin-top: 70px !important; +} +.margin-top-80 { + margin-top: 80px !important; +} + +// margin bottom +// ------------- +.margin-bottom-0 { + margin-bottom: 0 !important; +} +.margin-bottom-3 { + margin-bottom: 3px !important; +} +.margin-bottom-5 { + margin-bottom: 5px !important; +} +.margin-bottom-10 { + margin-bottom: 10px !important; +} +.margin-bottom-15 { + margin-bottom: 15px !important; +} +.margin-bottom-20 { + margin-bottom: 20px !important; +} +.margin-bottom-25 { + margin-bottom: 25px !important; +} +.margin-bottom-30 { + margin-bottom: 30px !important; +} +.margin-bottom-35 { + margin-bottom: 35px !important; +} +.margin-bottom-40 { + margin-bottom: 40px !important; +} +.margin-bottom-45 { + margin-bottom: 45px !important; +} +.margin-bottom-50 { + margin-bottom: 50px !important; +} +.margin-bottom-60 { + margin-bottom: 60px !important; +} +.margin-bottom-70 { + margin-bottom: 70px !important; +} +.margin-bottom-80 { + margin-bottom: 80px !important; +} + +// margin left +// ----------- +.margin-left-0 { + margin-left: 0 !important; +} +.margin-left-3 { + margin-left: 3px !important; +} +.margin-left-5 { + margin-left: 5px !important; +} +.margin-left-10 { + margin-left: 10px !important; +} +.margin-left-15 { + margin-left: 15px !important; +} +.margin-left-20 { + margin-left: 20px !important; +} +.margin-left-25 { + margin-left: 25px !important; +} +.margin-left-30 { + margin-left: 30px !important; +} +.margin-left-35 { + margin-left: 35px !important; +} +.margin-left-40 { + margin-left: 40px !important; +} +.margin-left-45 { + margin-left: 45px !important; +} +.margin-left-50 { + margin-left: 50px !important; +} +.margin-left-60 { + margin-left: 60px !important; +} +.margin-left-70 { + margin-left: 70px !important; +} +.margin-left-80 { + margin-left: 80px !important; +} + +// margin right +// ------------ +.margin-right-0 { + margin-right: 0 !important; +} +.margin-right-3 { + margin-right: 3px !important; +} +.margin-right-5 { + margin-right: 5px !important; +} +.margin-right-10 { + margin-right: 10px !important; +} +.margin-right-15 { + margin-right: 15px !important; +} +.margin-right-20 { + margin-right: 20px !important; +} +.margin-right-25 { + margin-right: 25px !important; +} +.margin-right-30 { + margin-right: 30px !important; +} +.margin-right-35 { + margin-right: 35px !important; +} +.margin-right-40 { + margin-right: 40px !important; +} +.margin-right-45 { + margin-right: 45px !important; +} +.margin-right-50 { + margin-right: 50px !important; +} +.margin-right-60 { + margin-right: 60px !important; +} +.margin-right-70 { + margin-right: 70px !important; +} +.margin-right-80 { + margin-right: 80px !important; +} + + +/* 内边距 */ +.no-padding { + padding: 0 !important; +} + +.no-padding-h { + padding-right: 0 !important; + padding-left: 0 !important; +} + +.no-padding-v { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.p-xs { + padding: 4px; +} + +.p-sm { + padding: 8px; +} + +.p { + padding: 16px; +} + +.p-md { + padding: 24px; +} + +.p-lg { + padding: 32px; +} + +.p-h { + padding-right: 16px; + padding-left: 16px; +} + +.p-h-xs { + padding-right: 4px; + padding-left: 4px; +} + +.p-h-sm { + padding-right: 8px; + padding-left: 8px; +} + +.p-h-md { + padding-right: 24px; + padding-left: 24px; +} + +.p-t-md { + padding-top:24px; +} + +.p-b-md{ + padding-bottom: 24px; +} + +.p-l-md{ + padding-left: 24px; +} + +.p-h-lg { + padding-right: 32px; + padding-left: 32px; +} + +.p-v { + padding-top: 16px; + padding-bottom: 16px; +} + +.p-v-xs { + padding-top: 4px; + padding-bottom: 4px; +} + +.p-v-sm { + padding-top: 8px; + padding-bottom: 8px; +} + +.p-v-md { + padding-top: 24px; + padding-bottom: 24px; +} + +.p-v-lg { + padding-top: 32px; + padding-bottom: 32px; +} + +.padding { + padding: 32px 32px; +} + +.padding-out { + margin: -32px -32px; +} + + +// Padding Helpers +// ======================================================================== +.padding-0 { + padding: 0 !important; +} +.padding-3 { + padding: 3px !important; +} +.padding-5 { + padding: 5px !important; +} +.padding-10 { + padding: 10px !important; +} +.padding-15 { + padding: 15px !important; +} +.padding-20 { + padding: 20px !important; +} +.padding-25 { + padding: 25px !important; +} +.padding-30 { + padding: 30px !important; +} +.padding-35 { + padding: 35px !important; +} +.padding-40 { + padding: 40px !important; +} +.padding-45 { + padding: 45px !important; +} +.padding-50 { + padding: 50px !important; +} +.padding-60 { + padding: 60px !important; +} +.padding-70 { + padding: 70px !important; +} +.padding-80 { + padding: 80px !important; +} + +// padding vertical +// --------------- +.padding-vertical-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.padding-vertical-3 { + padding-top: 3px !important; + padding-bottom: 3px !important; +} +.padding-vertical-5 { + padding-top: 5px !important; + padding-bottom: 5px !important; +} +.padding-vertical-10 { + padding-top: 10px !important; + padding-bottom: 10px !important; +} +.padding-vertical-15 { + padding-top: 15px !important; + padding-bottom: 15px !important; +} +.padding-vertical-20 { + padding-top: 20px !important; + padding-bottom: 20px !important; +} +.padding-vertical-25 { + padding-top: 25px !important; + padding-bottom: 25px !important; +} +.padding-vertical-30 { + padding-top: 30px !important; + padding-bottom: 30px !important; +} +.padding-vertical-35 { + padding-top: 35px !important; + padding-bottom: 35px !important; +} +.padding-vertical-40 { + padding-top: 40px !important; + padding-bottom: 40px !important; +} +.padding-vertical-45 { + padding-top: 45px !important; + padding-bottom: 45px !important; +} +.padding-vertical-50 { + padding-top: 50px !important; + padding-bottom: 50px !important; +} +.padding-vertical-60 { + padding-top: 60px !important; + padding-bottom: 60px !important; +} +.padding-vertical-70 { + padding-top: 70px !important; + padding-bottom: 70px !important; +} +.padding-vertical-80 { + padding-top: 80px !important; + padding-bottom: 80px !important; +} + +// padding horizontal +// ----------------- +.padding-horizontal-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} +.padding-horizontal-3 { + padding-right: 3px !important; + padding-left: 3px !important; +} +.padding-horizontal-5 { + padding-right: 5px !important; + padding-left: 5px !important; +} +.padding-horizontal-10 { + padding-right: 10px !important; + padding-left: 10px !important; +} +.padding-horizontal-15 { + padding-right: 15px !important; + padding-left: 15px !important; +} +.padding-horizontal-20 { + padding-right: 20px !important; + padding-left: 20px !important; +} +.padding-horizontal-25 { + padding-right: 25px !important; + padding-left: 25px !important; +} +.padding-horizontal-30 { + padding-right: 30px !important; + padding-left: 30px !important; +} +.padding-horizontal-35 { + padding-right: 35px !important; + padding-left: 35px !important; +} +.padding-horizontal-40 { + padding-right: 40px !important; + padding-left: 40px !important; +} +.padding-horizontal-45 { + padding-right: 45px !important; + padding-left: 45px !important; +} +.padding-horizontal-50 { + padding-right: 50px !important; + padding-left: 50px !important; +} +.padding-horizontal-60 { + padding-right: 60px !important; + padding-left: 60px !important; +} +.padding-horizontal-70 { + padding-right: 70px !important; + padding-left: 70px !important; +} +.padding-horizontal-80 { + padding-right: 80px !important; + padding-left: 80px !important; +} +// padding top +// ---------- +.padding-top-0 { + padding-top: 0 !important; +} +.padding-top-3 { + padding-top: 3px !important; +} +.padding-top-5 { + padding-top: 5px !important; +} +.padding-top-10 { + padding-top: 10px !important; +} +.padding-top-15 { + padding-top: 15px !important; +} +.padding-top-20 { + padding-top: 20px !important; +} +.padding-top-25 { + padding-top: 25px !important; +} +.padding-top-30 { + padding-top: 30px !important; +} +.padding-top-35 { + padding-top: 35px !important; +} +.padding-top-40 { + padding-top: 40px !important; +} +.padding-top-45 { + padding-top: 45px !important; +} +.padding-top-50 { + padding-top: 50px !important; +} +.padding-top-60 { + padding-top: 60px !important; +} +.padding-top-70 { + padding-top: 70px !important; +} +.padding-top-80 { + padding-top: 80px !important; +} + +// padding bottom +// ------------- +.padding-bottom-0 { + padding-bottom: 0 !important; +} +.padding-bottom-3 { + padding-bottom: 3px !important; +} +.padding-bottom-5 { + padding-bottom: 5px !important; +} +.padding-bottom-10 { + padding-bottom: 10px !important; +} +.padding-bottom-15 { + padding-bottom: 15px !important; +} +.padding-bottom-20 { + padding-bottom: 20px !important; +} +.padding-bottom-25 { + padding-bottom: 25px !important; +} +.padding-bottom-30 { + padding-bottom: 30px !important; +} +.padding-bottom-35 { + padding-bottom: 35px !important; +} +.padding-bottom-40 { + padding-bottom: 40px !important; +} +.padding-bottom-45 { + padding-bottom: 45px !important; +} +.padding-bottom-50 { + padding-bottom: 50px !important; +} +.padding-bottom-60 { + padding-bottom: 60px !important; +} +.padding-bottom-70 { + padding-bottom: 70px !important; +} +.padding-bottom-80 { + padding-bottom: 80px !important; +} + +// padding left +// ----------- +.padding-left-0 { + padding-left: 0 !important; +} +.padding-left-3 { + padding-left: 3px !important; +} +.padding-left-5 { + padding-left: 5px !important; +} +.padding-left-10 { + padding-left: 10px !important; +} +.padding-left-15 { + padding-left: 15px !important; +} +.padding-left-20 { + padding-left: 20px !important; +} +.padding-left-25 { + padding-left: 25px !important; +} +.padding-left-30 { + padding-left: 30px !important; +} +.padding-left-35 { + padding-left: 35px !important; +} +.padding-left-40 { + padding-left: 40px !important; +} +.padding-left-45 { + padding-left: 45px !important; +} +.padding-left-50 { + padding-left: 50px !important; +} +.padding-left-60 { + padding-left: 60px !important; +} +.padding-left-70 { + padding-left: 70px !important; +} +.padding-left-80 { + padding-left: 80px !important; +} + +// padding right +// ------------ +.padding-right-0 { + padding-right: 0 !important; +} +.padding-right-3 { + padding-right: 3px !important; +} +.padding-right-5 { + padding-right: 5px !important; +} +.padding-right-10 { + padding-right: 10px !important; +} +.padding-right-15 { + padding-right: 15px !important; +} +.padding-right-20 { + padding-right: 20px !important; +} +.padding-right-25 { + padding-right: 25px !important; +} +.padding-right-30 { + padding-right: 30px !important; +} +.padding-right-35 { + padding-right: 35px !important; +} +.padding-right-40 { + padding-right: 40px !important; +} +.padding-right-45 { + padding-right: 45px !important; +} +.padding-right-50 { + padding-right: 50px !important; +} +.padding-right-60 { + padding-right: 60px !important; +} +.padding-right-70 { + padding-right: 70px !important; +} +.padding-right-80 { + padding-right: 80px !important; +} +//responsive + +@-ms-viewport { + width: device-width; +} + + +// Visibility utilities +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { + @include responsive-invisibility(); +} + +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} + +.visible-xs { + @media (max-width: $screen-xs-max) { + @include responsive-visibility(); + } +} +.visible-xs-block { + @media (max-width: $screen-xs-max) { + display: block !important; + } +} +.visible-xs-inline { + @media (max-width: $screen-xs-max) { + display: inline !important; + } +} +.visible-xs-inline-block { + @media (max-width: $screen-xs-max) { + display: inline-block !important; + } +} + +.visible-sm { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include responsive-visibility(); + } +} +.visible-sm-block { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + display: block !important; + } +} +.visible-sm-inline { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + display: inline !important; + } +} +.visible-sm-inline-block { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + display: inline-block !important; + } +} + +.visible-md { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include responsive-visibility(); + } +} +.visible-md-block { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + display: block !important; + } +} +.visible-md-inline { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + display: inline !important; + } +} +.visible-md-inline-block { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + display: inline-block !important; + } +} + +.visible-lg { + @media (min-width: $screen-lg-min) { + @include responsive-visibility(); + } +} +.visible-lg-block { + @media (min-width: $screen-lg-min) { + display: block !important; + } +} +.visible-lg-inline { + @media (min-width: $screen-lg-min) { + display: inline !important; + } +} +.visible-lg-inline-block { + @media (min-width: $screen-lg-min) { + display: inline-block !important; + } +} + +.hidden-xs { + @media (max-width: $screen-xs-max) { + @include responsive-invisibility(); + } +} +.hidden-sm { + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include responsive-invisibility(); + } +} +.hidden-md { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include responsive-invisibility(); + } +} +.hidden-lg { + @media (min-width: $screen-lg-min) { + @include responsive-invisibility(); + } +} +