├── .editorconfig ├── .eslintrc ├── .gitignore ├── .gitmodules ├── .prettierrc.js ├── .stylelintrc ├── .travis.yml ├── LICENSE ├── README.md ├── appveyor.yml ├── bower.json ├── build └── postcss.config.js ├── dist ├── css │ ├── bootstrap.css │ └── bootstrap.min.css └── js │ ├── bootstrap.bundle.js │ ├── bootstrap.bundle.min.js │ ├── bootstrap.js │ └── bootstrap.min.js ├── docs ├── CNAME ├── assets │ ├── css │ │ ├── example.css │ │ └── example_override.css │ ├── img │ │ ├── bower-logo.png │ │ ├── brand-nico.png │ │ ├── brand.png │ │ ├── circle.png │ │ ├── hatebu.svg │ │ ├── honoka.png │ │ ├── npm-logo.png │ │ └── sample.png │ └── scss │ │ ├── example.scss │ │ └── example_override.scss ├── bootstrap-ja.html ├── bootstrap.html ├── css │ ├── bootstrap.css │ └── bootstrap.min.css ├── index.html └── js │ ├── bootstrap.bundle.js │ ├── bootstrap.bundle.min.js │ ├── bootstrap.js │ └── bootstrap.min.js ├── gulpfile.js ├── package.json ├── scss ├── bootstrap.scss └── honoka │ ├── _honoka.scss │ ├── _mixins.scss │ ├── _override.scss │ ├── _override_nico.scss │ ├── _variables.scss │ └── _variables_nico.scss └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = space 7 | tab_width = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [{package,bower}.json] 15 | indent_style = space 16 | indent_size = 2 17 | 18 | [*.yml] 19 | indent_style = space 20 | indent_size = 2 21 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb-base", 3 | "rules": { 4 | "arrow-body-style": ["error", "always"], 5 | "function-paren-newline": ["off"], 6 | "no-console": ["off"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #============================================= 2 | # bower 3 | #============================================= 4 | bower_components/ 5 | 6 | #============================================= 7 | # My Original Set 8 | #============================================= 9 | data/ 10 | 11 | #============================================= 12 | # node.js & Grunt 13 | #============================================= 14 | node_modules/ 15 | .grunt 16 | .tmp/ 17 | 18 | #============================================= 19 | # Sass/Compass 20 | #============================================= 21 | .sass-cache 22 | *.css.map 23 | 24 | #============================================= 25 | # Ruby/Bundler 26 | #============================================= 27 | .bundle/ 28 | vendor/bundle/ 29 | 30 | #============================================= 31 | # Sublime Text 32 | #============================================= 33 | *.sublime-workspace 34 | *.sublime-project 35 | 36 | *.tmlanguage.cache 37 | *.tmPreferences.cache 38 | *.stTheme.cache 39 | 40 | sftp-config.json 41 | 42 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/.gitmodules -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | tabWidth: 2, 4 | trailingComma: "all", 5 | }; 6 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"], 3 | "plugins": [ 4 | "stylelint-order" 5 | ], 6 | "rules": { 7 | "at-rule-empty-line-before": [null, 8 | "except": ["first-nested"] 9 | ], 10 | "at-rule-name-space-after": "always", 11 | "at-rule-no-vendor-prefix": true, 12 | "at-rule-semicolon-space-before": "never", 13 | "block-closing-brace-empty-line-before": null, 14 | "block-closing-brace-newline-after": null, 15 | "block-opening-brace-space-before": null, 16 | "color-named": "never", 17 | "declaration-block-semicolon-newline-after": "always-multi-line", 18 | "declaration-block-semicolon-newline-before": "never-multi-line", 19 | "declaration-block-semicolon-space-after": "always-single-line", 20 | "declaration-empty-line-before": null, 21 | "declaration-no-important": true, 22 | "font-family-name-quotes": "always-where-recommended", 23 | "font-weight-notation": "numeric", 24 | "function-url-no-scheme-relative": true, 25 | "function-url-quotes": "always", 26 | "length-zero-no-unit": true, 27 | "max-empty-lines": 2, 28 | "max-line-length": null, 29 | "media-feature-name-no-vendor-prefix": true, 30 | "media-feature-parentheses-space-inside": "never", 31 | "media-feature-range-operator-space-after": "always", 32 | "media-feature-range-operator-space-before": "never", 33 | "no-descending-specificity": null, 34 | "no-duplicate-selectors": true, 35 | "number-leading-zero": "never", 36 | "order/properties-order": [ 37 | "position", 38 | "top", 39 | "right", 40 | "bottom", 41 | "left", 42 | "z-index", 43 | "box-sizing", 44 | "display", 45 | "flex", 46 | "flex-align", 47 | "flex-basis", 48 | "flex-direction", 49 | "flex-wrap", 50 | "flex-flow", 51 | "flex-grow", 52 | "flex-order", 53 | "flex-pack", 54 | "align-items", 55 | "align-self", 56 | "justify-content", 57 | "order", 58 | "float", 59 | "width", 60 | "min-width", 61 | "max-width", 62 | "height", 63 | "min-height", 64 | "max-height", 65 | "padding", 66 | "padding-top", 67 | "padding-right", 68 | "padding-bottom", 69 | "padding-left", 70 | "margin", 71 | "margin-top", 72 | "margin-right", 73 | "margin-bottom", 74 | "margin-left", 75 | "overflow", 76 | "overflow-x", 77 | "overflow-y", 78 | "-webkit-overflow-scrolling", 79 | "-ms-overflow-x", 80 | "-ms-overflow-y", 81 | "-ms-overflow-style", 82 | "clip", 83 | "clear", 84 | "font", 85 | "font-family", 86 | "font-size", 87 | "font-style", 88 | "font-weight", 89 | "font-variant", 90 | "font-size-adjust", 91 | "font-stretch", 92 | "font-effect", 93 | "font-emphasize", 94 | "font-emphasize-position", 95 | "font-emphasize-style", 96 | "font-smooth", 97 | "hyphens", 98 | "line-height", 99 | "color", 100 | "text-align", 101 | "text-align-last", 102 | "text-emphasis", 103 | "text-emphasis-color", 104 | "text-emphasis-style", 105 | "text-emphasis-position", 106 | "text-decoration", 107 | "text-indent", 108 | "text-justify", 109 | "text-outline", 110 | "-ms-text-overflow", 111 | "text-overflow", 112 | "text-overflow-ellipsis", 113 | "text-overflow-mode", 114 | "text-shadow", 115 | "text-transform", 116 | "text-wrap", 117 | "-webkit-text-size-adjust", 118 | "-ms-text-size-adjust", 119 | "letter-spacing", 120 | "-ms-word-break", 121 | "word-break", 122 | "word-spacing", 123 | "-ms-word-wrap", 124 | "word-wrap", 125 | "overflow-wrap", 126 | "tab-size", 127 | "white-space", 128 | "vertical-align", 129 | "list-style", 130 | "list-style-position", 131 | "list-style-type", 132 | "list-style-image", 133 | "pointer-events", 134 | "-ms-touch-action", 135 | "touch-action", 136 | "cursor", 137 | "visibility", 138 | "zoom", 139 | "table-layout", 140 | "empty-cells", 141 | "caption-side", 142 | "border-spacing", 143 | "border-collapse", 144 | "content", 145 | "quotes", 146 | "counter-reset", 147 | "counter-increment", 148 | "resize", 149 | "user-select", 150 | "nav-index", 151 | "nav-up", 152 | "nav-right", 153 | "nav-down", 154 | "nav-left", 155 | "background", 156 | "background-color", 157 | "background-image", 158 | "filter", 159 | "background-repeat", 160 | "background-attachment", 161 | "background-position", 162 | "background-position-x", 163 | "background-position-y", 164 | "background-clip", 165 | "background-origin", 166 | "background-size", 167 | "border", 168 | "border-color", 169 | "border-style", 170 | "border-width", 171 | "border-top", 172 | "border-top-color", 173 | "border-top-style", 174 | "border-top-width", 175 | "border-right", 176 | "border-right-color", 177 | "border-right-style", 178 | "border-right-width", 179 | "border-bottom", 180 | "border-bottom-color", 181 | "border-bottom-style", 182 | "border-bottom-width", 183 | "border-left", 184 | "border-left-color", 185 | "border-left-style", 186 | "border-left-width", 187 | "border-radius", 188 | "border-top-left-radius", 189 | "border-top-right-radius", 190 | "border-bottom-right-radius", 191 | "border-bottom-left-radius", 192 | "border-image", 193 | "border-image-source", 194 | "border-image-slice", 195 | "border-image-width", 196 | "border-image-outset", 197 | "border-image-repeat", 198 | "outline", 199 | "outline-width", 200 | "outline-style", 201 | "outline-color", 202 | "outline-offset", 203 | "box-shadow", 204 | "opacity", 205 | "-ms-interpolation-mode", 206 | "transition", 207 | "transition-delay", 208 | "transition-timing-function", 209 | "transition-duration", 210 | "transition-property", 211 | "transform", 212 | "transform-origin", 213 | "animation", 214 | "animation-name", 215 | "animation-duration", 216 | "animation-play-state", 217 | "animation-timing-function", 218 | "animation-delay", 219 | "animation-iteration-count", 220 | "animation-direction" 221 | ], 222 | "property-no-vendor-prefix": true, 223 | "rule-empty-line-before": null, 224 | "selector-attribute-quotes": "always", 225 | "selector-list-comma-newline-after": "always", 226 | "selector-list-comma-newline-before": "never-multi-line", 227 | "selector-list-comma-space-after": "always-single-line", 228 | "selector-list-comma-space-before": "never-single-line", 229 | "selector-max-attribute": 2, 230 | "selector-max-class": 4, 231 | "selector-max-combinators": 4, 232 | "selector-max-compound-selectors": 4, 233 | "selector-max-empty-lines": 1, 234 | "selector-max-id": 0, 235 | "selector-max-specificity": null, 236 | "selector-max-type": 2, 237 | "selector-max-universal": 1, 238 | "selector-no-qualifying-type": true, 239 | "selector-no-vendor-prefix": true, 240 | "string-quotes": "double", 241 | "value-keyword-case": "lower", 242 | "value-list-comma-newline-after": "never-multi-line", 243 | "value-list-comma-newline-before": "never-multi-line", 244 | "value-list-comma-space-after": "always", 245 | "value-no-vendor-prefix": true 246 | } 247 | } 248 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | notifications: 4 | email: false 5 | 6 | node_js: 7 | - '8' 8 | 9 | sudo: false 10 | 11 | cache: 12 | directories: 13 | - node_modules 14 | 15 | git: 16 | submodules: false 17 | 18 | script: 19 | - npm test 20 | - npm start 21 | 22 | deploy: 23 | provider: npm 24 | email: $NPM_EMAIL 25 | api_key: $NPM_API_KEY 26 | on: 27 | tags: true 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 windyakin, kubosho 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nico 2 | 3 | [![Build Status by Travis CI](https://travis-ci.org/kubosho/Nico.svg?branch=master)](https://travis-ci.org/kubosho/Nico) 4 | [![devDependency Status](https://david-dm.org/kubosho/Nico/dev-status.svg)](https://david-dm.org/kubosho/Nico#info=devDependencies) 5 | [![The MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) 6 | [![npm](https://img.shields.io/npm/v/bootstrap-nico.svg)](https://www.npmjs.com/package/bootstrap-nico) 7 | 8 | "Nico"は"[Honoka](https://github.com/windyakin/Honoka)"を元にした、日本語も美しく表示できる Bootstrap テーマです。 9 | 10 | ## About "Nico" 11 | 12 | 通常の[Bootstrap](//getbootstrap.com/)では，日本語表示に適したものではありません。 13 | "Honoka" では Bootstrap をベースに、日本語表示に適したフォントの指定や、ウェイトに関するコードを追記した Bootstrap テーマです。 14 | 15 | "Nico" は "Honoka" を元に、ピンク系の配色を適用したテーマです。 16 | 17 | ## Live Demo 18 | 19 | - [//nico.kubosho.com/bootstrap-ja.html](http://nico.kubosho.com/bootstrap-ja.html) (日本語レイアウト) 20 | - [//nico.kubosho.com/bootstrap.html](http://nico.kubosho.com/bootstrap.html) (英語レイアウト) 21 | 22 | ## Getting Started 23 | 24 | ### Download 25 | 26 | [Releases](https://github.com/kubosho/Nico/releases) ページから最新版をダウンロードしてください。 27 | 28 | ### npm 29 | 30 | Node.js のパッケージ管理システムである、 [npm](https://npmjs.com) で [公開されています](https://www.npmjs.com/package/bootstrap-nico)。 [webpack](https://webpack.js.org/) など、npm を利用した module bundler でご利用ください。 31 | 32 | ``` 33 | npm install --save bootstrap-nico 34 | ``` 35 | 36 | パッケージ名の先頭に **bootstrap-** があることに注意してください。 37 | 38 | [Releases](https://github.com/kubosho/Nico/releases/latest)から最新版をダウンロードしてください。 39 | 40 | ### Bower 41 | 42 | [Bower](http://bower.io/) からインストールすることができます。 43 | 44 | 最新版をインストールするには以下のコマンドを実行してください。 45 | 46 | ``` 47 | bower install --save-dev $(node -e "$(curl -fsSL https://cdn.honokak.osaka/last.js)" kubosho Nico) 48 | ``` 49 | 50 | もし cURL が入っていない環境の場合には、 51 | 52 | ``` 53 | bower install --save-dev Nico#(version) 54 | ``` 55 | 56 | `(version)` には Nico のバージョン番号を指定します(ex. `Nico#4.0.1`)。 Nico の最新バージョン番号は [Releases](https://github.com/kubosho/Nico/releases) ページから確認してください。 57 | 58 | ## Usage 59 | 60 | Nico は単なる Bootstrap のテーマにしか過ぎないため，基本的な使い方は本家 Bootstrap とほとんど変わりません。 61 | Bootstrap のスタイルシートの読み込みを Honoka のスタイルシートに置き換えることで動作します。また JavaScript のコードは変更されていないので、 Bootstrap のものを使っても問題ありません。 62 | 63 | そのほか Bootstrap の機能の詳細については [Bootstrap のドキュメント](https://getbootstrap.com/docs/4.1/getting-started/introduction/) を参照してください。 64 | 65 | ### Package 66 | 67 | 配布している ZIP ファイルの内容物は以下のとおりです。 `bootstrap.min.css` といったように、ファイル名に `min` がついているファイルは、改行やインデント・スペーシングをなくした(minify された)コードで、ユーザがウェブページを読み込む際の転送量を少なくすることができます。通常はこの `bootstrap.min.*` を使うことをおすすめします。 68 | 69 | ``` 70 | nico/ 71 | ├─ LICENSE 72 | ├─ README.md 73 | ├─ bootstrap.html 74 | ├─ css/ 75 | │ ├─ bootstrap.css 76 | │ └─ bootstrap.min.css 77 | └─ js/ 78 | ├─ bootstrap.bundle.js 79 | ├─ bootstrap.bundle.min.js 80 | ├─ bootstrap.js 81 | └─ bootstrap.min.js 82 | ``` 83 | 84 | ## Build 85 | 86 | ビルドの方法については [Wiki](https://github.com/windyakin/Honoka/wiki) をご覧ください。 87 | 88 | ## License 89 | 90 | [MIT License](LICENSE) 91 | 92 | ## Author 93 | 94 | - windyakin ([@MITLicense](https://twitter.com/MITLicense)) 95 | - Honoka の作者 96 | - kubosho ([blog.kubosho.com](//blog.kubosho.com/)) 97 | - Nico の作者 98 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | version: "{build}" 2 | 3 | init: 4 | - git config --global core.autocrlf true 5 | 6 | environment: 7 | nodejs_version: "8" 8 | 9 | install: 10 | - ps: Install-Product node $env:nodejs_version 11 | - npm install 12 | 13 | build: off 14 | 15 | test_script: 16 | - node --version 17 | - npm --version 18 | - npm start 19 | 20 | matrix: 21 | fast_finish: true 22 | 23 | cache: 24 | - C:\Users\appveyor\AppData\Roaming\npm-cache -> package.json 25 | - node_modules -> package.json 26 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Nico", 3 | "description": "Nico a fork of Honoka which is a Bootstrap theme.", 4 | "keywords": [ 5 | "css", 6 | "sass", 7 | "bootstrap", 8 | "japanese", 9 | "theme", 10 | "responsive", 11 | "front-end", 12 | "framework", 13 | "web", 14 | "lovelive" 15 | ], 16 | "author": "kubosho", 17 | "homepage": "https://nico.kubosho.com", 18 | "repository": { 19 | "type": "git", 20 | "url": "git://github.com/kubosho/Nico.git" 21 | }, 22 | "license": "MIT", 23 | "moduleType": "globals", 24 | "main": [ 25 | "dist/css/bootstrap.min.css" 26 | ], 27 | "ignore": [ 28 | "build", 29 | "docs", 30 | "scss", 31 | "/.*", 32 | "appveyor.yml", 33 | "CNAME" 34 | ], 35 | "dependencies": {}, 36 | "devDependencies": { 37 | "bootstrap": "4.1.0" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /build/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | return { 3 | use: [ 4 | 'postcss-flexbugs-fixes', 5 | 'autoprefixer', 6 | ], 7 | map: { 8 | inline: false, 9 | annotation: true, 10 | sourcesContent: true, 11 | }, 12 | plugins: { 13 | autoprefixer: { 14 | cascade: false, 15 | // https://github.com/twbs/bootstrap/blob/v4.0.0/package.json#L136-L147 16 | overrideBrowserslist: [ 17 | 'last 1 major version', 18 | '>= 1%', 19 | 'Chrome >= 45', 20 | 'Firefox >= 38', 21 | 'Edge >= 12', 22 | 'Explorer >= 10', 23 | 'iOS >= 9', 24 | 'Safari >= 9', 25 | 'Android >= 4.4', 26 | 'Opera >= 30', 27 | ], 28 | }, 29 | }, 30 | }; 31 | }; 32 | -------------------------------------------------------------------------------- /dist/js/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v4.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jquery"),require("popper.js")):"function"==typeof define&&define.amd?define(["exports","jquery","popper.js"],e):e((t=t||self).bootstrap={},t.jQuery,t.Popper)}(this,function(t,g,u){"use strict";function i(t,e){for(var n=0;nthis._items.length-1||t<0))if(this._isSliding)g(this._element).one(Q.SLID,function(){return e.to(t)});else{if(n===t)return this.pause(),void this.cycle();var i=ndocument.documentElement.clientHeight;!this._isBodyOverflowing&&t&&(this._element.style.paddingLeft=this._scrollbarWidth+"px"),this._isBodyOverflowing&&!t&&(this._element.style.paddingRight=this._scrollbarWidth+"px")},t._resetAdjustments=function(){this._element.style.paddingLeft="",this._element.style.paddingRight=""},t._checkScrollbar=function(){var t=document.body.getBoundingClientRect();this._isBodyOverflowing=t.left+t.right
',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent",sanitize:!0,sanitizeFn:null,whiteList:Ee},je="show",He="out",Re={HIDE:"hide"+De,HIDDEN:"hidden"+De,SHOW:"show"+De,SHOWN:"shown"+De,INSERTED:"inserted"+De,CLICK:"click"+De,FOCUSIN:"focusin"+De,FOCUSOUT:"focusout"+De,MOUSEENTER:"mouseenter"+De,MOUSELEAVE:"mouseleave"+De},xe="fade",Fe="show",Ue=".tooltip-inner",We=".arrow",qe="hover",Me="focus",Ke="click",Qe="manual",Be=function(){function i(t,e){if("undefined"==typeof u)throw new TypeError("Bootstrap's tooltips require Popper.js (https://popper.js.org/)");this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._popper=null,this.element=t,this.config=this._getConfig(e),this.tip=null,this._setListeners()}var t=i.prototype;return t.enable=function(){this._isEnabled=!0},t.disable=function(){this._isEnabled=!1},t.toggleEnabled=function(){this._isEnabled=!this._isEnabled},t.toggle=function(t){if(this._isEnabled)if(t){var e=this.constructor.DATA_KEY,n=g(t.currentTarget).data(e);n||(n=new this.constructor(t.currentTarget,this._getDelegateConfig()),g(t.currentTarget).data(e,n)),n._activeTrigger.click=!n._activeTrigger.click,n._isWithActiveTrigger()?n._enter(null,n):n._leave(null,n)}else{if(g(this.getTipElement()).hasClass(Fe))return void this._leave(null,this);this._enter(null,this)}},t.dispose=function(){clearTimeout(this._timeout),g.removeData(this.element,this.constructor.DATA_KEY),g(this.element).off(this.constructor.EVENT_KEY),g(this.element).closest(".modal").off("hide.bs.modal"),this.tip&&g(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,(this._activeTrigger=null)!==this._popper&&this._popper.destroy(),this._popper=null,this.element=null,this.config=null,this.tip=null},t.show=function(){var e=this;if("none"===g(this.element).css("display"))throw new Error("Please use show on visible elements");var t=g.Event(this.constructor.Event.SHOW);if(this.isWithContent()&&this._isEnabled){g(this.element).trigger(t);var n=_.findShadowRoot(this.element),i=g.contains(null!==n?n:this.element.ownerDocument.documentElement,this.element);if(t.isDefaultPrevented()||!i)return;var o=this.getTipElement(),r=_.getUID(this.constructor.NAME);o.setAttribute("id",r),this.element.setAttribute("aria-describedby",r),this.setContent(),this.config.animation&&g(o).addClass(xe);var s="function"==typeof this.config.placement?this.config.placement.call(this,o,this.element):this.config.placement,a=this._getAttachment(s);this.addAttachmentClass(a);var l=this._getContainer();g(o).data(this.constructor.DATA_KEY,this),g.contains(this.element.ownerDocument.documentElement,this.tip)||g(o).appendTo(l),g(this.element).trigger(this.constructor.Event.INSERTED),this._popper=new u(this.element,o,{placement:a,modifiers:{offset:this._getOffset(),flip:{behavior:this.config.fallbackPlacement},arrow:{element:We},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(t){t.originalPlacement!==t.placement&&e._handlePopperPlacementChange(t)},onUpdate:function(t){return e._handlePopperPlacementChange(t)}}),g(o).addClass(Fe),"ontouchstart"in document.documentElement&&g(document.body).children().on("mouseover",null,g.noop);var c=function(){e.config.animation&&e._fixTransition();var t=e._hoverState;e._hoverState=null,g(e.element).trigger(e.constructor.Event.SHOWN),t===He&&e._leave(null,e)};if(g(this.tip).hasClass(xe)){var h=_.getTransitionDurationFromElement(this.tip);g(this.tip).one(_.TRANSITION_END,c).emulateTransitionEnd(h)}else c()}},t.hide=function(t){var e=this,n=this.getTipElement(),i=g.Event(this.constructor.Event.HIDE),o=function(){e._hoverState!==je&&n.parentNode&&n.parentNode.removeChild(n),e._cleanTipClass(),e.element.removeAttribute("aria-describedby"),g(e.element).trigger(e.constructor.Event.HIDDEN),null!==e._popper&&e._popper.destroy(),t&&t()};if(g(this.element).trigger(i),!i.isDefaultPrevented()){if(g(n).removeClass(Fe),"ontouchstart"in document.documentElement&&g(document.body).children().off("mouseover",null,g.noop),this._activeTrigger[Ke]=!1,this._activeTrigger[Me]=!1,this._activeTrigger[qe]=!1,g(this.tip).hasClass(xe)){var r=_.getTransitionDurationFromElement(n);g(n).one(_.TRANSITION_END,o).emulateTransitionEnd(r)}else o();this._hoverState=""}},t.update=function(){null!==this._popper&&this._popper.scheduleUpdate()},t.isWithContent=function(){return Boolean(this.getTitle())},t.addAttachmentClass=function(t){g(this.getTipElement()).addClass(Ae+"-"+t)},t.getTipElement=function(){return this.tip=this.tip||g(this.config.template)[0],this.tip},t.setContent=function(){var t=this.getTipElement();this.setElementContent(g(t.querySelectorAll(Ue)),this.getTitle()),g(t).removeClass(xe+" "+Fe)},t.setElementContent=function(t,e){"object"!=typeof e||!e.nodeType&&!e.jquery?this.config.html?(this.config.sanitize&&(e=Se(e,this.config.whiteList,this.config.sanitizeFn)),t.html(e)):t.text(e):this.config.html?g(e).parent().is(t)||t.empty().append(e):t.text(g(e).text())},t.getTitle=function(){var t=this.element.getAttribute("data-original-title");return t||(t="function"==typeof this.config.title?this.config.title.call(this.element):this.config.title),t},t._getOffset=function(){var e=this,t={};return"function"==typeof this.config.offset?t.fn=function(t){return t.offsets=l({},t.offsets,e.config.offset(t.offsets,e.element)||{}),t}:t.offset=this.config.offset,t},t._getContainer=function(){return!1===this.config.container?document.body:_.isElement(this.config.container)?g(this.config.container):g(document).find(this.config.container)},t._getAttachment=function(t){return Pe[t.toUpperCase()]},t._setListeners=function(){var i=this;this.config.trigger.split(" ").forEach(function(t){if("click"===t)g(i.element).on(i.constructor.Event.CLICK,i.config.selector,function(t){return i.toggle(t)});else if(t!==Qe){var e=t===qe?i.constructor.Event.MOUSEENTER:i.constructor.Event.FOCUSIN,n=t===qe?i.constructor.Event.MOUSELEAVE:i.constructor.Event.FOCUSOUT;g(i.element).on(e,i.config.selector,function(t){return i._enter(t)}).on(n,i.config.selector,function(t){return i._leave(t)})}}),g(this.element).closest(".modal").on("hide.bs.modal",function(){i.element&&i.hide()}),this.config.selector?this.config=l({},this.config,{trigger:"manual",selector:""}):this._fixTitle()},t._fixTitle=function(){var t=typeof this.element.getAttribute("data-original-title");(this.element.getAttribute("title")||"string"!==t)&&(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))},t._enter=function(t,e){var n=this.constructor.DATA_KEY;(e=e||g(t.currentTarget).data(n))||(e=new this.constructor(t.currentTarget,this._getDelegateConfig()),g(t.currentTarget).data(n,e)),t&&(e._activeTrigger["focusin"===t.type?Me:qe]=!0),g(e.getTipElement()).hasClass(Fe)||e._hoverState===je?e._hoverState=je:(clearTimeout(e._timeout),e._hoverState=je,e.config.delay&&e.config.delay.show?e._timeout=setTimeout(function(){e._hoverState===je&&e.show()},e.config.delay.show):e.show())},t._leave=function(t,e){var n=this.constructor.DATA_KEY;(e=e||g(t.currentTarget).data(n))||(e=new this.constructor(t.currentTarget,this._getDelegateConfig()),g(t.currentTarget).data(n,e)),t&&(e._activeTrigger["focusout"===t.type?Me:qe]=!1),e._isWithActiveTrigger()||(clearTimeout(e._timeout),e._hoverState=He,e.config.delay&&e.config.delay.hide?e._timeout=setTimeout(function(){e._hoverState===He&&e.hide()},e.config.delay.hide):e.hide())},t._isWithActiveTrigger=function(){for(var t in this._activeTrigger)if(this._activeTrigger[t])return!0;return!1},t._getConfig=function(t){var e=g(this.element).data();return Object.keys(e).forEach(function(t){-1!==Oe.indexOf(t)&&delete e[t]}),"number"==typeof(t=l({},this.constructor.Default,e,"object"==typeof t&&t?t:{})).delay&&(t.delay={show:t.delay,hide:t.delay}),"number"==typeof t.title&&(t.title=t.title.toString()),"number"==typeof t.content&&(t.content=t.content.toString()),_.typeCheckConfig(be,t,this.constructor.DefaultType),t.sanitize&&(t.template=Se(t.template,t.whiteList,t.sanitizeFn)),t},t._getDelegateConfig=function(){var t={};if(this.config)for(var e in this.config)this.constructor.Default[e]!==this.config[e]&&(t[e]=this.config[e]);return t},t._cleanTipClass=function(){var t=g(this.getTipElement()),e=t.attr("class").match(Ne);null!==e&&e.length&&t.removeClass(e.join(""))},t._handlePopperPlacementChange=function(t){var e=t.instance;this.tip=e.popper,this._cleanTipClass(),this.addAttachmentClass(this._getAttachment(t.placement))},t._fixTransition=function(){var t=this.getTipElement(),e=this.config.animation;null===t.getAttribute("x-placement")&&(g(t).removeClass(xe),this.config.animation=!1,this.hide(),this.show(),this.config.animation=e)},i._jQueryInterface=function(n){return this.each(function(){var t=g(this).data(Ie),e="object"==typeof n&&n;if((t||!/dispose|hide/.test(n))&&(t||(t=new i(this,e),g(this).data(Ie,t)),"string"==typeof n)){if("undefined"==typeof t[n])throw new TypeError('No method named "'+n+'"');t[n]()}})},s(i,null,[{key:"VERSION",get:function(){return"4.3.1"}},{key:"Default",get:function(){return Le}},{key:"NAME",get:function(){return be}},{key:"DATA_KEY",get:function(){return Ie}},{key:"Event",get:function(){return Re}},{key:"EVENT_KEY",get:function(){return De}},{key:"DefaultType",get:function(){return ke}}]),i}();g.fn[be]=Be._jQueryInterface,g.fn[be].Constructor=Be,g.fn[be].noConflict=function(){return g.fn[be]=we,Be._jQueryInterface};var Ve="popover",Ye="bs.popover",ze="."+Ye,Xe=g.fn[Ve],$e="bs-popover",Ge=new RegExp("(^|\\s)"+$e+"\\S+","g"),Je=l({},Be.Default,{placement:"right",trigger:"click",content:"",template:''}),Ze=l({},Be.DefaultType,{content:"(string|element|function)"}),tn="fade",en="show",nn=".popover-header",on=".popover-body",rn={HIDE:"hide"+ze,HIDDEN:"hidden"+ze,SHOW:"show"+ze,SHOWN:"shown"+ze,INSERTED:"inserted"+ze,CLICK:"click"+ze,FOCUSIN:"focusin"+ze,FOCUSOUT:"focusout"+ze,MOUSEENTER:"mouseenter"+ze,MOUSELEAVE:"mouseleave"+ze},sn=function(t){var e,n;function i(){return t.apply(this,arguments)||this}n=t,(e=i).prototype=Object.create(n.prototype),(e.prototype.constructor=e).__proto__=n;var o=i.prototype;return o.isWithContent=function(){return this.getTitle()||this._getContent()},o.addAttachmentClass=function(t){g(this.getTipElement()).addClass($e+"-"+t)},o.getTipElement=function(){return this.tip=this.tip||g(this.config.template)[0],this.tip},o.setContent=function(){var t=g(this.getTipElement());this.setElementContent(t.find(nn),this.getTitle());var e=this._getContent();"function"==typeof e&&(e=e.call(this.element)),this.setElementContent(t.find(on),e),t.removeClass(tn+" "+en)},o._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},o._cleanTipClass=function(){var t=g(this.getTipElement()),e=t.attr("class").match(Ge);null!==e&&0=this._offsets[o]&&("undefined"==typeof this._offsets[o+1]||t .btn-primary.dropdown-toggle { 71 | color: #212529; 72 | background-color: #ff5fb3; 73 | border-color: #ff52ad; 74 | } 75 | 76 | .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, 77 | .show > .btn-primary.dropdown-toggle:focus { 78 | box-shadow: 0 0 0 0.2rem rgba(222, 130, 179, 0.5); 79 | } 80 | 81 | .btn-secondary { 82 | color: #212529; 83 | background-color: #ffbbde; 84 | border-color: #ffbbde; 85 | } 86 | 87 | .btn-secondary:hover { 88 | color: #212529; 89 | background-color: #ff95cc; 90 | border-color: #ff88c6; 91 | } 92 | 93 | .btn-secondary:focus, .btn-secondary.focus { 94 | box-shadow: 0 0 0 0.2rem rgba(222, 164, 195, 0.5); 95 | } 96 | 97 | .btn-secondary.disabled, .btn-secondary:disabled { 98 | color: #212529; 99 | background-color: #ffbbde; 100 | border-color: #ffbbde; 101 | } 102 | 103 | .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, 104 | .show > .btn-secondary.dropdown-toggle { 105 | color: #212529; 106 | background-color: #ff88c6; 107 | border-color: #ff7bc0; 108 | } 109 | 110 | .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, 111 | .show > .btn-secondary.dropdown-toggle:focus { 112 | box-shadow: 0 0 0 0.2rem rgba(222, 164, 195, 0.5); 113 | } 114 | 115 | .btn-success { 116 | color: #fff; 117 | background-color: #28a745; 118 | border-color: #28a745; 119 | } 120 | 121 | .btn-success:hover { 122 | color: #fff; 123 | background-color: #218838; 124 | border-color: #1e7e34; 125 | } 126 | 127 | .btn-success:focus, .btn-success.focus { 128 | box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); 129 | } 130 | 131 | .btn-success.disabled, .btn-success:disabled { 132 | color: #fff; 133 | background-color: #28a745; 134 | border-color: #28a745; 135 | } 136 | 137 | .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, 138 | .show > .btn-success.dropdown-toggle { 139 | color: #fff; 140 | background-color: #1e7e34; 141 | border-color: #1c7430; 142 | } 143 | 144 | .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, 145 | .show > .btn-success.dropdown-toggle:focus { 146 | box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); 147 | } 148 | 149 | .btn-info { 150 | color: #fff; 151 | background-color: #17a2b8; 152 | border-color: #17a2b8; 153 | } 154 | 155 | .btn-info:hover { 156 | color: #fff; 157 | background-color: #138496; 158 | border-color: #117a8b; 159 | } 160 | 161 | .btn-info:focus, .btn-info.focus { 162 | box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); 163 | } 164 | 165 | .btn-info.disabled, .btn-info:disabled { 166 | color: #fff; 167 | background-color: #17a2b8; 168 | border-color: #17a2b8; 169 | } 170 | 171 | .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, 172 | .show > .btn-info.dropdown-toggle { 173 | color: #fff; 174 | background-color: #117a8b; 175 | border-color: #10707f; 176 | } 177 | 178 | .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, 179 | .show > .btn-info.dropdown-toggle:focus { 180 | box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); 181 | } 182 | 183 | .btn-warning { 184 | color: #212529; 185 | background-color: #ffc107; 186 | border-color: #ffc107; 187 | } 188 | 189 | .btn-warning:hover { 190 | color: #212529; 191 | background-color: #e0a800; 192 | border-color: #d39e00; 193 | } 194 | 195 | .btn-warning:focus, .btn-warning.focus { 196 | box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); 197 | } 198 | 199 | .btn-warning.disabled, .btn-warning:disabled { 200 | color: #212529; 201 | background-color: #ffc107; 202 | border-color: #ffc107; 203 | } 204 | 205 | .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, 206 | .show > .btn-warning.dropdown-toggle { 207 | color: #212529; 208 | background-color: #d39e00; 209 | border-color: #c69500; 210 | } 211 | 212 | .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, 213 | .show > .btn-warning.dropdown-toggle:focus { 214 | box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); 215 | } 216 | 217 | .btn-danger { 218 | color: #fff; 219 | background-color: #dc3545; 220 | border-color: #dc3545; 221 | } 222 | 223 | .btn-danger:hover { 224 | color: #fff; 225 | background-color: #c82333; 226 | border-color: #bd2130; 227 | } 228 | 229 | .btn-danger:focus, .btn-danger.focus { 230 | box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); 231 | } 232 | 233 | .btn-danger.disabled, .btn-danger:disabled { 234 | color: #fff; 235 | background-color: #dc3545; 236 | border-color: #dc3545; 237 | } 238 | 239 | .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, 240 | .show > .btn-danger.dropdown-toggle { 241 | color: #fff; 242 | background-color: #bd2130; 243 | border-color: #b21f2d; 244 | } 245 | 246 | .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, 247 | .show > .btn-danger.dropdown-toggle:focus { 248 | box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); 249 | } 250 | 251 | .btn-light { 252 | color: #212529; 253 | background-color: #f8f9fa; 254 | border-color: #f8f9fa; 255 | } 256 | 257 | .btn-light:hover { 258 | color: #212529; 259 | background-color: #e2e6ea; 260 | border-color: #dae0e5; 261 | } 262 | 263 | .btn-light:focus, .btn-light.focus { 264 | box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); 265 | } 266 | 267 | .btn-light.disabled, .btn-light:disabled { 268 | color: #212529; 269 | background-color: #f8f9fa; 270 | border-color: #f8f9fa; 271 | } 272 | 273 | .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, 274 | .show > .btn-light.dropdown-toggle { 275 | color: #212529; 276 | background-color: #dae0e5; 277 | border-color: #d3d9df; 278 | } 279 | 280 | .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, 281 | .show > .btn-light.dropdown-toggle:focus { 282 | box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); 283 | } 284 | 285 | .btn-dark { 286 | color: #fff; 287 | background-color: #ff50ac; 288 | border-color: #ff50ac; 289 | } 290 | 291 | .btn-dark:hover { 292 | color: #fff; 293 | background-color: #ff2a9a; 294 | border-color: #ff1d94; 295 | } 296 | 297 | .btn-dark:focus, .btn-dark.focus { 298 | box-shadow: 0 0 0 0.2rem rgba(255, 106, 184, 0.5); 299 | } 300 | 301 | .btn-dark.disabled, .btn-dark:disabled { 302 | color: #fff; 303 | background-color: #ff50ac; 304 | border-color: #ff50ac; 305 | } 306 | 307 | .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, 308 | .show > .btn-dark.dropdown-toggle { 309 | color: #fff; 310 | background-color: #ff1d94; 311 | border-color: #ff108e; 312 | } 313 | 314 | .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, 315 | .show > .btn-dark.dropdown-toggle:focus { 316 | box-shadow: 0 0 0 0.2rem rgba(255, 106, 184, 0.5); 317 | } 318 | 319 | .btn-outline-primary { 320 | color: #ff92cb; 321 | border-color: #ff92cb; 322 | } 323 | 324 | .btn-outline-primary:hover { 325 | color: #212529; 326 | background-color: #ff92cb; 327 | border-color: #ff92cb; 328 | } 329 | 330 | .btn-outline-primary:focus, .btn-outline-primary.focus { 331 | box-shadow: 0 0 0 0.2rem rgba(255, 146, 203, 0.5); 332 | } 333 | 334 | .btn-outline-primary.disabled, .btn-outline-primary:disabled { 335 | color: #ff92cb; 336 | background-color: transparent; 337 | } 338 | 339 | .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, 340 | .show > .btn-outline-primary.dropdown-toggle { 341 | color: #212529; 342 | background-color: #ff92cb; 343 | border-color: #ff92cb; 344 | } 345 | 346 | .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, 347 | .show > .btn-outline-primary.dropdown-toggle:focus { 348 | box-shadow: 0 0 0 0.2rem rgba(255, 146, 203, 0.5); 349 | } 350 | 351 | .btn-outline-secondary { 352 | color: #ffbbde; 353 | border-color: #ffbbde; 354 | } 355 | 356 | .btn-outline-secondary:hover { 357 | color: #212529; 358 | background-color: #ffbbde; 359 | border-color: #ffbbde; 360 | } 361 | 362 | .btn-outline-secondary:focus, .btn-outline-secondary.focus { 363 | box-shadow: 0 0 0 0.2rem rgba(255, 187, 222, 0.5); 364 | } 365 | 366 | .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { 367 | color: #ffbbde; 368 | background-color: transparent; 369 | } 370 | 371 | .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, 372 | .show > .btn-outline-secondary.dropdown-toggle { 373 | color: #212529; 374 | background-color: #ffbbde; 375 | border-color: #ffbbde; 376 | } 377 | 378 | .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, 379 | .show > .btn-outline-secondary.dropdown-toggle:focus { 380 | box-shadow: 0 0 0 0.2rem rgba(255, 187, 222, 0.5); 381 | } 382 | 383 | .btn-outline-success { 384 | color: #28a745; 385 | border-color: #28a745; 386 | } 387 | 388 | .btn-outline-success:hover { 389 | color: #fff; 390 | background-color: #28a745; 391 | border-color: #28a745; 392 | } 393 | 394 | .btn-outline-success:focus, .btn-outline-success.focus { 395 | box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); 396 | } 397 | 398 | .btn-outline-success.disabled, .btn-outline-success:disabled { 399 | color: #28a745; 400 | background-color: transparent; 401 | } 402 | 403 | .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, 404 | .show > .btn-outline-success.dropdown-toggle { 405 | color: #fff; 406 | background-color: #28a745; 407 | border-color: #28a745; 408 | } 409 | 410 | .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, 411 | .show > .btn-outline-success.dropdown-toggle:focus { 412 | box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); 413 | } 414 | 415 | .btn-outline-info { 416 | color: #17a2b8; 417 | border-color: #17a2b8; 418 | } 419 | 420 | .btn-outline-info:hover { 421 | color: #fff; 422 | background-color: #17a2b8; 423 | border-color: #17a2b8; 424 | } 425 | 426 | .btn-outline-info:focus, .btn-outline-info.focus { 427 | box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); 428 | } 429 | 430 | .btn-outline-info.disabled, .btn-outline-info:disabled { 431 | color: #17a2b8; 432 | background-color: transparent; 433 | } 434 | 435 | .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, 436 | .show > .btn-outline-info.dropdown-toggle { 437 | color: #fff; 438 | background-color: #17a2b8; 439 | border-color: #17a2b8; 440 | } 441 | 442 | .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, 443 | .show > .btn-outline-info.dropdown-toggle:focus { 444 | box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); 445 | } 446 | 447 | .btn-outline-warning { 448 | color: #ffc107; 449 | border-color: #ffc107; 450 | } 451 | 452 | .btn-outline-warning:hover { 453 | color: #212529; 454 | background-color: #ffc107; 455 | border-color: #ffc107; 456 | } 457 | 458 | .btn-outline-warning:focus, .btn-outline-warning.focus { 459 | box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); 460 | } 461 | 462 | .btn-outline-warning.disabled, .btn-outline-warning:disabled { 463 | color: #ffc107; 464 | background-color: transparent; 465 | } 466 | 467 | .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, 468 | .show > .btn-outline-warning.dropdown-toggle { 469 | color: #212529; 470 | background-color: #ffc107; 471 | border-color: #ffc107; 472 | } 473 | 474 | .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, 475 | .show > .btn-outline-warning.dropdown-toggle:focus { 476 | box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); 477 | } 478 | 479 | .btn-outline-danger { 480 | color: #dc3545; 481 | border-color: #dc3545; 482 | } 483 | 484 | .btn-outline-danger:hover { 485 | color: #fff; 486 | background-color: #dc3545; 487 | border-color: #dc3545; 488 | } 489 | 490 | .btn-outline-danger:focus, .btn-outline-danger.focus { 491 | box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); 492 | } 493 | 494 | .btn-outline-danger.disabled, .btn-outline-danger:disabled { 495 | color: #dc3545; 496 | background-color: transparent; 497 | } 498 | 499 | .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, 500 | .show > .btn-outline-danger.dropdown-toggle { 501 | color: #fff; 502 | background-color: #dc3545; 503 | border-color: #dc3545; 504 | } 505 | 506 | .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, 507 | .show > .btn-outline-danger.dropdown-toggle:focus { 508 | box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); 509 | } 510 | 511 | .btn-outline-light { 512 | color: #f8f9fa; 513 | border-color: #f8f9fa; 514 | } 515 | 516 | .btn-outline-light:hover { 517 | color: #212529; 518 | background-color: #f8f9fa; 519 | border-color: #f8f9fa; 520 | } 521 | 522 | .btn-outline-light:focus, .btn-outline-light.focus { 523 | box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); 524 | } 525 | 526 | .btn-outline-light.disabled, .btn-outline-light:disabled { 527 | color: #f8f9fa; 528 | background-color: transparent; 529 | } 530 | 531 | .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, 532 | .show > .btn-outline-light.dropdown-toggle { 533 | color: #212529; 534 | background-color: #f8f9fa; 535 | border-color: #f8f9fa; 536 | } 537 | 538 | .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, 539 | .show > .btn-outline-light.dropdown-toggle:focus { 540 | box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); 541 | } 542 | 543 | .btn-outline-dark { 544 | color: #ff50ac; 545 | border-color: #ff50ac; 546 | } 547 | 548 | .btn-outline-dark:hover { 549 | color: #fff; 550 | background-color: #ff50ac; 551 | border-color: #ff50ac; 552 | } 553 | 554 | .btn-outline-dark:focus, .btn-outline-dark.focus { 555 | box-shadow: 0 0 0 0.2rem rgba(255, 80, 172, 0.5); 556 | } 557 | 558 | .btn-outline-dark.disabled, .btn-outline-dark:disabled { 559 | color: #ff50ac; 560 | background-color: transparent; 561 | } 562 | 563 | .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, 564 | .show > .btn-outline-dark.dropdown-toggle { 565 | color: #fff; 566 | background-color: #ff50ac; 567 | border-color: #ff50ac; 568 | } 569 | 570 | .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, 571 | .show > .btn-outline-dark.dropdown-toggle:focus { 572 | box-shadow: 0 0 0 0.2rem rgba(255, 80, 172, 0.5); 573 | } 574 | 575 | .btn-link { 576 | font-weight: 400; 577 | color: #007bff; 578 | text-decoration: none; 579 | } 580 | 581 | .btn-link:hover { 582 | color: #0056b3; 583 | text-decoration: underline; 584 | } 585 | 586 | .btn-link:focus, .btn-link.focus { 587 | text-decoration: underline; 588 | box-shadow: none; 589 | } 590 | 591 | .btn-link:disabled, .btn-link.disabled { 592 | color: #6c757d; 593 | pointer-events: none; 594 | } 595 | 596 | .btn-lg { 597 | padding: 0.5rem 1rem; 598 | font-size: 1.25rem; 599 | line-height: 1.5; 600 | border-radius: 0.3rem; 601 | } 602 | 603 | .btn-sm { 604 | padding: 0.25rem 0.5rem; 605 | font-size: 0.875rem; 606 | line-height: 1.5; 607 | border-radius: 0.2rem; 608 | } 609 | 610 | .btn-block { 611 | display: block; 612 | width: 100%; 613 | } 614 | 615 | .btn-block + .btn-block { 616 | margin-top: 0.5rem; 617 | } 618 | 619 | input[type="submit"].btn-block, 620 | input[type="reset"].btn-block, 621 | input[type="button"].btn-block { 622 | width: 100%; 623 | } 624 | 625 | .btn-honoka { 626 | color: #212529; 627 | background-color: #ff9800; 628 | border-color: #ff9800; 629 | color: #fff; 630 | } 631 | 632 | .btn-honoka:hover { 633 | color: #fff; 634 | background-color: #d98100; 635 | border-color: #cc7a00; 636 | } 637 | 638 | .btn-honoka:focus, .btn-honoka.focus { 639 | box-shadow: 0 0 0 0.2rem rgba(222, 135, 6, 0.5); 640 | } 641 | 642 | .btn-honoka.disabled, .btn-honoka:disabled { 643 | color: #212529; 644 | background-color: #ff9800; 645 | border-color: #ff9800; 646 | } 647 | 648 | .btn-honoka:not(:disabled):not(.disabled):active, .btn-honoka:not(:disabled):not(.disabled).active, 649 | .show > .btn-honoka.dropdown-toggle { 650 | color: #fff; 651 | background-color: #cc7a00; 652 | border-color: #bf7200; 653 | } 654 | 655 | .btn-honoka:not(:disabled):not(.disabled):active:focus, .btn-honoka:not(:disabled):not(.disabled).active:focus, 656 | .show > .btn-honoka.dropdown-toggle:focus { 657 | box-shadow: 0 0 0 0.2rem rgba(222, 135, 6, 0.5); 658 | } 659 | 660 | .btn-twitter { 661 | color: #212529; 662 | background-color: #55acee; 663 | border-color: #55acee; 664 | color: #fff; 665 | } 666 | 667 | .btn-twitter:hover { 668 | color: #fff; 669 | background-color: #329beb; 670 | border-color: #2795e9; 671 | } 672 | 673 | .btn-twitter:focus, .btn-twitter.focus { 674 | box-shadow: 0 0 0 0.2rem rgba(77, 152, 208, 0.5); 675 | } 676 | 677 | .btn-twitter.disabled, .btn-twitter:disabled { 678 | color: #212529; 679 | background-color: #55acee; 680 | border-color: #55acee; 681 | } 682 | 683 | .btn-twitter:not(:disabled):not(.disabled):active, .btn-twitter:not(:disabled):not(.disabled).active, 684 | .show > .btn-twitter.dropdown-toggle { 685 | color: #fff; 686 | background-color: #2795e9; 687 | border-color: #1b90e8; 688 | } 689 | 690 | .btn-twitter:not(:disabled):not(.disabled):active:focus, .btn-twitter:not(:disabled):not(.disabled).active:focus, 691 | .show > .btn-twitter.dropdown-toggle:focus { 692 | box-shadow: 0 0 0 0.2rem rgba(77, 152, 208, 0.5); 693 | } 694 | 695 | .btn-facebook { 696 | color: #fff; 697 | background-color: #3b5998; 698 | border-color: #3b5998; 699 | color: #fff; 700 | } 701 | 702 | .btn-facebook:hover { 703 | color: #fff; 704 | background-color: #30497c; 705 | border-color: #2d4373; 706 | } 707 | 708 | .btn-facebook:focus, .btn-facebook.focus { 709 | box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5); 710 | } 711 | 712 | .btn-facebook.disabled, .btn-facebook:disabled { 713 | color: #fff; 714 | background-color: #3b5998; 715 | border-color: #3b5998; 716 | } 717 | 718 | .btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active, 719 | .show > .btn-facebook.dropdown-toggle { 720 | color: #fff; 721 | background-color: #2d4373; 722 | border-color: #293e6a; 723 | } 724 | 725 | .btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus, 726 | .show > .btn-facebook.dropdown-toggle:focus { 727 | box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5); 728 | } 729 | 730 | .btn-hatena { 731 | color: #fff; 732 | background-color: #178fde; 733 | border-color: #178fde; 734 | color: #fff; 735 | } 736 | 737 | .btn-hatena:hover { 738 | color: #fff; 739 | background-color: #1379bb; 740 | border-color: #1271b0; 741 | } 742 | 743 | .btn-hatena:focus, .btn-hatena.focus { 744 | box-shadow: 0 0 0 0.2rem rgba(58, 160, 227, 0.5); 745 | } 746 | 747 | .btn-hatena.disabled, .btn-hatena:disabled { 748 | color: #fff; 749 | background-color: #178fde; 750 | border-color: #178fde; 751 | } 752 | 753 | .btn-hatena:not(:disabled):not(.disabled):active, .btn-hatena:not(:disabled):not(.disabled).active, 754 | .show > .btn-hatena.dropdown-toggle { 755 | color: #fff; 756 | background-color: #1271b0; 757 | border-color: #116aa4; 758 | } 759 | 760 | .btn-hatena:not(:disabled):not(.disabled):active:focus, .btn-hatena:not(:disabled):not(.disabled).active:focus, 761 | .show > .btn-hatena.dropdown-toggle:focus { 762 | box-shadow: 0 0 0 0.2rem rgba(58, 160, 227, 0.5); 763 | } 764 | 765 | .btn-twitter .fa.fa-lg, 766 | .btn-facebook .fa.fa-lg, 767 | .btn-hatena .fa.fa-lg { 768 | vertical-align: -1px; 769 | } 770 | 771 | .icon.icon-hatebu::before { 772 | display: inline-block; 773 | width: 1.5rem; 774 | height: 1.1rem; 775 | content: ''; 776 | background-image: url("../img/hatebu.svg"); 777 | background-size: 100% 100%; 778 | } 779 | 780 | .social-button { 781 | position: relative; 782 | padding: get-maps((0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem), 2) 0; 783 | margin: 0 auto; 784 | overflow: hidden; 785 | } 786 | 787 | .social-button > ul { 788 | position: relative; 789 | left: 50%; 790 | float: left; 791 | padding: 0; 792 | margin: 0; 793 | list-style: outside none none; 794 | } 795 | 796 | .social-button > ul > li { 797 | position: relative; 798 | left: -50%; 799 | float: left; 800 | padding: 0; 801 | margin: 0 10px; 802 | } 803 | 804 | .social-button > ul > li .fb-like > span { 805 | vertical-align: 0 !important; 806 | } 807 | 808 | .social { 809 | padding: 1rem 0; 810 | background: #e9ecef; 811 | } 812 | 813 | .jumbotron.special { 814 | position: relative; 815 | min-height: 530px; 816 | margin-bottom: 0; 817 | overflow: hidden; 818 | background-color: #ffd699; 819 | background-image: url("../img/circle.png"); 820 | background-repeat: no-repeat; 821 | background-position: -35% center; 822 | background-size: 70%; 823 | } 824 | 825 | .jumbotron.special .outline { 826 | position: relative; 827 | } 828 | 829 | .jumbotron.special .copy { 830 | font-weight: 600; 831 | } 832 | 833 | @media (max-width: 767.98px) { 834 | .jumbotron.special .copy { 835 | font-size: 2.5rem; 836 | } 837 | } 838 | 839 | .jumbotron.special .download { 840 | margin: 1rem auto 0.5rem; 841 | } 842 | 843 | .jumbotron.special .basedon { 844 | margin: 0.5rem auto; 845 | color: #6c757d; 846 | text-shadow: #fff 0 1px 2px; 847 | } 848 | 849 | .section { 850 | padding: 10rem 0; 851 | } 852 | 853 | .section.section-default { 854 | background-color: #fff; 855 | } 856 | 857 | .section.section-inverse { 858 | background-color: #fff5e6; 859 | } 860 | 861 | .section .subtitle { 862 | margin-bottom: 1rem; 863 | text-align: center; 864 | } 865 | 866 | .section .subtitle h2 { 867 | margin-top: 0; 868 | } 869 | 870 | .point .point-box { 871 | text-align: center; 872 | } 873 | 874 | .point .point-box .point-circle { 875 | width: 100px; 876 | height: 100px; 877 | margin: 0 auto; 878 | font-size: 60px; 879 | line-height: 100px; 880 | color: #fff; 881 | border-radius: 100%; 882 | } 883 | 884 | .point .point-box .point-circle.start { 885 | background-color: #28a745; 886 | } 887 | 888 | .point .point-box .point-circle.replace { 889 | background-color: #ffc107; 890 | } 891 | 892 | .point .point-box .point-circle.compass { 893 | background-color: #ff92cb; 894 | } 895 | 896 | .point .point-box .point-circle.japanese { 897 | background-color: #dc3545; 898 | } 899 | 900 | .point .point-box .point-description h4 { 901 | margin-top: 1rem; 902 | text-align: center; 903 | } 904 | 905 | .point .point-box .point-description p { 906 | text-align: justify; 907 | } 908 | 909 | .icon-jp::before { 910 | font-weight: 700; 911 | content: 'あ'; 912 | } 913 | 914 | .getting-started h3 { 915 | margin-top: 0; 916 | } 917 | 918 | .japanese-font .well > h3 { 919 | margin-top: 1rem; 920 | } 921 | 922 | h3 .package-system-logo { 923 | width: auto; 924 | height: 3.5rem; 925 | font-size: 3.5rem; 926 | line-height: 3.5rem; 927 | } 928 | 929 | .featured .subtitle h2 { 930 | font-size: 1.75rem; 931 | } 932 | 933 | .featured .featured-list a { 934 | opacity: 0.7; 935 | transition: opacity 0.2s; 936 | } 937 | 938 | .featured .featured-list a:hover, .featured .featured-list a:active, .featured .featured-list a:focus { 939 | opacity: 0.5; 940 | } 941 | 942 | .featured .featured-list li { 943 | padding: 1rem 1rem; 944 | } 945 | 946 | .card > a { 947 | transition: opacity 0.2s; 948 | } 949 | 950 | .card > a:hover, .card > a:active, .card > a:focus { 951 | opacity: 0.7; 952 | } 953 | 954 | footer { 955 | padding: 4rem 0; 956 | color: #e9ecef; 957 | background-color: #343a40; 958 | } 959 | 960 | footer .copyright { 961 | padding-top: 1rem; 962 | padding-bottom: 1rem; 963 | } 964 | 965 | /*# sourceMappingURL=example.css.map */ -------------------------------------------------------------------------------- /docs/assets/css/example_override.css: -------------------------------------------------------------------------------- 1 | .jumbotron.special { 2 | background-color: #ffc5e3; 3 | } 4 | 5 | .btn-download { 6 | border-color: #007ded; 7 | background-color: #007ded; 8 | color: #fff; 9 | } 10 | 11 | .section.section-inverse { 12 | background-color: #fff8fc; 13 | } 14 | 15 | /*# sourceMappingURL=example_override.css.map */ -------------------------------------------------------------------------------- /docs/assets/img/bower-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/docs/assets/img/bower-logo.png -------------------------------------------------------------------------------- /docs/assets/img/brand-nico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/docs/assets/img/brand-nico.png -------------------------------------------------------------------------------- /docs/assets/img/brand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/docs/assets/img/brand.png -------------------------------------------------------------------------------- /docs/assets/img/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/docs/assets/img/circle.png -------------------------------------------------------------------------------- /docs/assets/img/hatebu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/assets/img/honoka.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/docs/assets/img/honoka.png -------------------------------------------------------------------------------- /docs/assets/img/npm-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/docs/assets/img/npm-logo.png -------------------------------------------------------------------------------- /docs/assets/img/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubosho/Nico/29f51614db0fed84286f8c5150010eba431052a7/docs/assets/img/sample.png -------------------------------------------------------------------------------- /docs/assets/scss/example.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // $spacer: 1rem; 4 | @import 'bootstrap/scss/functions'; 5 | @import 'honoka/variables'; 6 | @import 'honoka/variables_nico'; 7 | @import 'bootstrap/scss/mixins'; 8 | @import 'bootstrap/scss/buttons'; 9 | // @import "bootstrap/scss/variables"; 10 | 11 | @import url(https://fonts.googleapis.com/css?family=Montserrat); 12 | // @import "honoka/mixins"; 13 | 14 | // stylelint-disable 15 | $brand-honoka: #ff9800; 16 | $brand-twitter: #55acee; 17 | $brand-facebook: #3b5998; 18 | $brand-hatena: #178fde; 19 | 20 | $brand-colors: (); 21 | $brand-colors: map-merge( 22 | ( 23 | 'honoka': $brand-honoka, 24 | 'twitter': $brand-twitter, 25 | 'facebook': $brand-facebook, 26 | 'hatena': $brand-hatena, 27 | ), 28 | $brand-colors 29 | ); 30 | // stylelint-enable 31 | 32 | @each $color, $value in $brand-colors { 33 | .btn-#{$color} { 34 | @include button-variant($value, $value); 35 | color: #fff; 36 | } 37 | } 38 | 39 | .btn-twitter, 40 | .btn-facebook, 41 | .btn-hatena { 42 | .fa.fa-lg { 43 | vertical-align: -1px; 44 | } 45 | } 46 | 47 | .icon.icon-hatebu::before { 48 | display: inline-block; 49 | width: 1.5rem; 50 | height: 1.1rem; 51 | content: ''; 52 | background-image: url('../img/hatebu.svg'); 53 | background-size: 100% 100%; 54 | } 55 | 56 | .social-button { 57 | position: relative; 58 | padding: get-maps($spacers, 2) 0; 59 | margin: 0 auto; 60 | overflow: hidden; 61 | > ul { 62 | position: relative; 63 | left: 50%; 64 | float: left; 65 | padding: 0; 66 | margin: 0; 67 | list-style: outside none none; 68 | > li { 69 | position: relative; 70 | left: -50%; 71 | float: left; 72 | padding: 0; 73 | margin: 0 10px; 74 | .fb-like > span { 75 | vertical-align: 0 !important; 76 | } 77 | } 78 | } 79 | } 80 | 81 | .social { 82 | padding: $spacer 0; 83 | background: $gray-200; 84 | } 85 | 86 | .jumbotron.special { 87 | position: relative; 88 | min-height: 530px; 89 | margin-bottom: 0; 90 | overflow: hidden; 91 | background-color: lighten($brand-honoka, 30%); 92 | background-image: url('../img/circle.png'); 93 | background-repeat: no-repeat; 94 | background-position: -35% center; 95 | background-size: 70%; 96 | .outline { 97 | position: relative; 98 | } 99 | .copy { 100 | font-weight: $font-weight-bold; 101 | @include media-breakpoint-down(sm) { 102 | font-size: $h1-font-size; 103 | } 104 | } 105 | .download { 106 | margin: map-get($spacers, 3) auto map-get($spacers, 2); 107 | } 108 | .basedon { 109 | margin: map-get($spacers, 2) auto; 110 | color: $gray-600; 111 | text-shadow: #fff 0 1px 2px; 112 | } 113 | } 114 | 115 | .section { 116 | padding: ($spacer * 10) 0; 117 | &.section-default { 118 | background-color: $body-bg; 119 | } 120 | &.section-inverse { 121 | background-color: lighten($brand-honoka, 45%); 122 | } 123 | .subtitle { 124 | margin-bottom: $spacer; 125 | text-align: center; 126 | h2 { 127 | margin-top: 0; 128 | } 129 | } 130 | } 131 | 132 | .point { 133 | .point-box { 134 | text-align: center; 135 | .point-circle { 136 | $point-circle-size: 100px; 137 | width: $point-circle-size; 138 | height: $point-circle-size; 139 | margin: 0 auto; 140 | font-size: $point-circle-size * 0.6; 141 | line-height: $point-circle-size; 142 | color: #fff; 143 | border-radius: 100%; 144 | &.start { 145 | background-color: $success; 146 | } 147 | &.replace { 148 | background-color: $warning; 149 | } 150 | &.compass { 151 | background-color: $primary; 152 | } 153 | &.japanese { 154 | background-color: $danger; 155 | } 156 | } 157 | .point-description { 158 | h4 { 159 | margin-top: $spacer; 160 | text-align: center; 161 | } 162 | p { 163 | text-align: justify; 164 | } 165 | } 166 | } 167 | } 168 | 169 | .icon-jp::before { 170 | font-weight: 700; 171 | content: 'あ'; 172 | } 173 | 174 | .getting-started { 175 | h3 { 176 | margin-top: 0; 177 | } 178 | } 179 | 180 | .japanese-font { 181 | .well { 182 | > h3 { 183 | margin-top: $spacer; 184 | } 185 | } 186 | } 187 | 188 | h3 .package-system-logo { 189 | width: auto; 190 | height: $h3-font-size * 2; 191 | font-size: $h3-font-size * 2; 192 | line-height: $h3-font-size * 2; 193 | } 194 | 195 | .featured { 196 | .subtitle { 197 | h2 { 198 | font-size: $h3-font-size; 199 | } 200 | } 201 | .featured-list { 202 | a { 203 | opacity: 0.7; 204 | transition: opacity 0.2s; 205 | &:hover, 206 | &:active, 207 | &:focus { 208 | opacity: 0.5; 209 | } 210 | } 211 | li { 212 | padding: $spacer $spacer; 213 | } 214 | } 215 | } 216 | 217 | .card { 218 | > a { 219 | transition: opacity 0.2s; 220 | &:hover, 221 | &:active, 222 | &:focus { 223 | opacity: 0.7; 224 | } 225 | } 226 | } 227 | 228 | footer { 229 | padding: $spacer * 4 0; 230 | color: $gray-200; 231 | background-color: $gray-800; 232 | .copyright { 233 | padding-top: $spacer; 234 | padding-bottom: $spacer; 235 | } 236 | } 237 | -------------------------------------------------------------------------------- /docs/assets/scss/example_override.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $brand-honoka: #ff92cb; 4 | 5 | .jumbotron.special { 6 | background-color: lighten($brand-honoka, 10%); 7 | } 8 | 9 | .btn-download { 10 | border-color: #007ded; 11 | background-color: #007ded; 12 | color: #fff; 13 | } 14 | 15 | .section { 16 | &.section-inverse { 17 | background-color: lighten($brand-honoka, 20%); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | Nico - 12 | "Honoka"を元にした、日本語も美しく表示できるBootstrapテーマ 13 | 14 | 15 | 20 | 21 | 25 | 26 | 27 | 31 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 51 | 52 | 53 | 54 | 59 | 65 | 66 | 67 |
68 | 153 |
154 | 155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 | その Bootstrap は､
164 | 日本語も美しく
167 | 表示されてますか？ 169 |
170 |

171 | Nico は日本語も美しく表示できる Bootstrap テーマです 172 |

173 |
174 | 188 |
189 | Last version v ・ Based on 190 | Bootstrap v 193 |
194 |
195 |
196 |
197 |
198 | 199 | 248 | 249 |
250 |
251 |
252 |
253 |

NicoはオリジナルBootstrapテーマです

254 |

255 | NicoはBootstrapテーマの一つですが、以下の特徴を持っています。 256 |

257 |
258 |
259 |
260 |
261 |
262 | 263 |
264 |
265 |

Easy to Start

266 |

267 | NicoはBootstrapを元に製作されているため、非常に高い互換性を持っています。マークアップに関する規約はほとんど変わりません。 268 |

269 |
270 |
271 |
272 |
273 | 274 |
275 |
276 |

Replace Bootstrap

277 |

278 | 既にBootstrapを使って作成したウェブサイトがある場合は、CSSを置き換えるだけで簡単にNicoを利用できます。 279 |

280 |
281 |
282 |
283 |
284 | 285 |
286 |
287 |

Open Source

288 |

289 | Nicoを構成するファイルは全て公開されています。変数の定義ファイルを変更することで自分好みの設定に変更することも可能です。 290 |

291 |
292 |
293 |
294 |
295 | 296 |
297 |
298 |

Optimized Japanese

299 |

300 | Bootstrapでは考慮されていない日本語のフォント指定やウェイトの変更を行っているので、美しく日本語を表示できます。 301 |

302 |
303 |
304 |
305 |
306 |
307 | 308 |
309 |
310 |
311 |
312 |

さあ、はじめましょう。

313 |

導入はとっても簡単です

314 |
315 |
316 |
317 |
318 |
319 | Download from 323 | GitHub 325 |

326 | Last version v ・ 328 | MIT License 332 |

333 |
334 |
335 |
336 |
337 |
338 |

339 | 345 |

346 |
347 | 355 | 356 | 363 | 364 |
365 |
366 | npmjs.com 370 | / v4.0.0 以降から対応 372 |
373 |
374 |
375 |

376 | 381 | Bower 382 |

383 |
384 | 392 | 393 | 400 | 401 |
402 |
403 | v3.3.5-c 以降から対応 404 |
405 |
406 |
407 |
408 |
409 |

410 | 使い方やファイルの説明など、詳しくは 411 | README または 412 | Wiki をご確認ください 413 |

414 |
415 |
416 |
417 |
418 | 419 |
420 |
421 |
422 |
423 |

Available on Framework!

424 |

425 | Nicoは様々なパッケージマネージャからも利用することができます 426 |

427 |
428 |
429 |
430 |
431 |

432 | 438 |

439 |
440 | 448 | 449 | 456 | 457 |
458 |
459 | npmjs.com 463 | / v4.0.0 以降から対応 465 |
466 |
467 |
468 |

469 | 474 | Bower 475 |

476 |
477 | 485 | 486 | 493 | 494 |
495 |
496 | v3.3.5-c 以降から対応 497 |
498 |
499 |
500 |
501 |
502 | 503 |
504 |
505 |
506 |
507 |

Honokaを使って作られたウェブサイト

508 |

509 | HonokaやそのForkテーマで構築されたウェブサイトを紹介します 510 |

511 |
512 |
513 |
514 |
515 |
516 | 521 |
522 |
Proconist.net
523 |
524 |
525 |
526 |
527 |
528 | 533 |
534 |
この高専がすごい！
535 |
536 |
537 |
538 |
539 |
540 | 545 |
546 |
yashihei.net
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 | 559 |
560 |
SYSKEN Advent Calendar
561 |
562 |
563 |
564 |
565 |
566 | 571 |
572 |
TIMERS Inc
573 |
574 |
575 |
576 |
577 |
578 | 583 |
584 |
PROCON O.S.T. Project
585 |
586 |
587 |
588 |
589 |
590 |
591 | 592 |
593 |
594 |
595 |
596 |

HonokaのForkテーマ

597 |

Honokaをベースにして作られた他のBootstrapテーマ

598 |
599 |
600 |
601 |
602 |
603 | 608 |
609 |

Umi

610 |

611 | "Umi"は"Honoka"にBootswatch Flatlyの配色を適用したテーマです。 614 |

615 | 625 |
626 |
627 |
628 |
629 |
630 | 635 |
636 |

Nico

637 |

"Nico"は"Honoka"にピンク系の配色を適用したテーマです。

638 | 648 |
649 |
650 |
651 |
652 |
653 |
654 |
655 | 660 |
661 |

Rin

662 |

"Rin"は"Honoka"を元にしたMaterial Design風のテーマです。

663 | 673 |
674 |
675 |
676 |
677 |
678 |
679 | 680 |
681 |
682 |
683 |
684 |

Honoka has been featured on

685 |
686 |
687 |
688 |
689 |
    690 |
  • 691 | MOONGIFT 697 |
    • 698 |
  • 699 | コリス 705 |
    • 706 |
  • 707 | Stocker.jp / diary 712 |
    • 713 |
714 |
715 |
716 |
717 |
718 | 719 |
720 | 767 |
768 |
769 |
770 | © 2015 Nico 771 |
772 |
773 |
774 |
775 | 776 | 777 | 778 | 779 | 802 | 815 |
816 | 828 | 834 | 835 | 836 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const Gulp = require('gulp'); 2 | const Plugins = require('gulp-load-plugins')(); 3 | const Fs = require('fs'); 4 | const Del = require('del'); 5 | const BrowserSync = require('browser-sync').create(); 6 | 7 | const PackageJSON = JSON.parse(Fs.readFileSync('./package.json')); 8 | 9 | const BANNER = `/*! 10 | * ${PackageJSON.config.packageName} v${PackageJSON.version} (${PackageJSON.website}) 11 | * Copyright ${PackageJSON.config.projectStartYear} ${PackageJSON.author} 12 | * Licensed under ${PackageJSON.license} (${PackageJSON.config.licenseUrl}) 13 | */ 14 | /*! 15 | * Bootstrap v${PackageJSON.dependencies.bootstrap} (https://getbootstrap.com) 16 | * Copyright 2011-2018 The Bootstrap Authors 17 | * Copyright 2011-2018 Twitter, Inc. 18 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 19 | */ 20 | `; 21 | 22 | Gulp.task('gulp:lint', () => { 23 | return Gulp.src(['gulpfile.js']) 24 | .pipe(Plugins.eslint({ useEslintrc: true })) 25 | .pipe(Plugins.eslint.format()) 26 | .pipe(Plugins.eslint.failAfterError()); 27 | }); 28 | 29 | Gulp.task('js:clean', () => { 30 | return Del(['dist/js/**/*']); 31 | }); 32 | 33 | Gulp.task('js:copy', Gulp.series('js:clean', () => { 34 | return Gulp.src(['bootstrap/dist/js/**/*.js'], { cwd: 'node_modules' }) 35 | .pipe(Gulp.dest('dist/js')); 36 | })); 37 | 38 | Gulp.task('css:clean', () => { 39 | return Del(['dist/css/**/*']); 40 | }); 41 | 42 | Gulp.task('css:lint', () => { 43 | return Gulp.src(['scss/**/*.scss']) 44 | .pipe(Plugins.stylelint({ 45 | configFile: '.stylelintrc', 46 | failAfterError: true, 47 | reporters: [ 48 | { formatter: 'verbose', console: true }, 49 | ], 50 | })); 51 | }); 52 | 53 | Gulp.task('css:build', () => { 54 | return Gulp.src(['scss/**/*.scss']) 55 | .pipe(Plugins.plumber({ 56 | errorHandler(err) { 57 | console.error(err.message); 58 | this.emit('end'); 59 | }, 60 | })) 61 | .pipe(Plugins.sass({ 62 | includePaths: [ 63 | 'node_modules/', 64 | ], 65 | outputStyle: 'expanded', 66 | sourceMap: true, 67 | sourceMapContents: true, 68 | lineFeed: 'lf', 69 | precision: 6, 70 | })) 71 | .pipe(Plugins.plumber.stop()) 72 | .pipe(Plugins.postcss({ 73 | noMap: true, 74 | use: 'autoprefixer', 75 | config: '../build/postcss.config.js', 76 | replace: 'dist/css/bootstrap.css', 77 | })) 78 | .pipe(Gulp.dest('dist/css')); 79 | }); 80 | 81 | Gulp.task('css:banner', () => { 82 | return Gulp.src(['dist/css/*.css']) 83 | .pipe(Plugins.replace('/*! [<>] */', BANNER)) 84 | .pipe(Gulp.dest('dist/css')); 85 | }); 86 | 87 | Gulp.task('css:minify', () => { 88 | return Gulp.src(['dist/css/*.css', '!dist/css/*.min.css']) 89 | .pipe(Plugins.cleanCss({ 90 | level: 1, 91 | })) 92 | .pipe(Plugins.rename({ 93 | extname: '.min.css', 94 | })) 95 | .pipe(Gulp.dest('dist/css')); 96 | }); 97 | 98 | Gulp.task('docs:clean', () => { 99 | return Del(['docs/css/**/*', 'docs/js/**/*']); 100 | }); 101 | 102 | Gulp.task('docs:copy', () => { 103 | return Gulp.src(['dist/**/*'], { base: 'dist' }) 104 | .pipe(Gulp.dest('docs')); 105 | }); 106 | 107 | Gulp.task('docs:css', () => { 108 | return Gulp.src(['docs/assets/scss/**/*.scss']) 109 | .pipe(Plugins.plumber({ 110 | errorHandler(err) { 111 | console.error(err.message); 112 | this.emit('end'); 113 | }, 114 | })) 115 | .pipe(Plugins.sass({ 116 | includePaths: [ 117 | 'node_modules/', 118 | 'scss/', 119 | ], 120 | outputStyle: 'expanded', 121 | sourceMap: true, 122 | sourceMapContents: true, 123 | lineFeed: 'lf', 124 | precision: 6, 125 | })) 126 | .pipe(Plugins.plumber.stop()) 127 | .pipe(Plugins.postcss({ 128 | noMap: true, 129 | use: 'autoprefixer', 130 | config: '../../../build/postcss.config.js', 131 | replace: 'docs/assets/css/bootstrap.css', 132 | })) 133 | .pipe(Gulp.dest('docs/assets/css')); 134 | }); 135 | 136 | Gulp.task('packing', () => { 137 | return Gulp.src(['dist/**/*', 'docs/bootstrap.html', 'README.md', 'LICENSE'], { base: '.' }) 138 | .pipe(Plugins.rename((path) => { 139 | // NOTE: ディレクトリ構造を変更するために gulp-rename を使う 140 | // FIXME: gulp-rename の仕様により引数代入を許可する 141 | /* eslint-disable no-param-reassign */ 142 | path.dirname = path.dirname.replace(/^(?:dist|docs)/, ''); 143 | path.dirname = `honoka/${path.dirname}`; 144 | /* eslint-enable no-param-reassign */ 145 | })) 146 | .pipe(Plugins.zip(`bootstrap-${PackageJSON.config.packageName.toLowerCase()}-${PackageJSON.version}-dist.zip`)) 147 | .pipe(Gulp.dest('./')); 148 | }); 149 | 150 | Gulp.task('docs:serve', () => { 151 | BrowserSync.init({ 152 | server: 'docs/', 153 | port: 8000, 154 | }); 155 | }); 156 | 157 | Gulp.task('docs:reload', () => { 158 | BrowserSync.reload(); 159 | }); 160 | 161 | Gulp.task('watch', () => { 162 | Gulp.watch(['scss/**/*'], Gulp.series('css', 'docs:copy', 'docs:reload')); 163 | Gulp.watch(['docs/**/*.html'], Gulp.series('docs:reload')); 164 | Gulp.watch(['docs/assets/scss/**/*.scss'], Gulp.series('docs:css', 'docs:reload')); 165 | }); 166 | 167 | Gulp.task('docs', Gulp.series( 168 | 'docs:clean', 'docs:copy', 'docs:css', 169 | )); 170 | 171 | Gulp.task('serve', Gulp.parallel( 172 | 'docs:serve', 'watch', 173 | )); 174 | 175 | Gulp.task('clean', Gulp.series( 176 | 'css:clean', 'js:clean', 177 | )); 178 | 179 | Gulp.task('css', Gulp.series( 180 | 'css:build', 'css:minify', 'css:banner', 181 | )); 182 | 183 | Gulp.task('js', Gulp.series( 184 | 'js:copy', 185 | )); 186 | 187 | Gulp.task('test', Gulp.series( 188 | 'css:lint', 'gulp:lint', 189 | )); 190 | 191 | Gulp.task('build', Gulp.series( 192 | 'clean', Gulp.parallel('css', 'js'), 'docs', 193 | )); 194 | 195 | Gulp.task('release', Gulp.series( 196 | 'build', 'packing', 197 | )); 198 | 199 | Gulp.task('default', Gulp.parallel('build')); 200 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-nico", 3 | "version": "4.3.2", 4 | "description": "Nico a fork of Honoka which is a Bootstrap theme.", 5 | "author": "kubosho", 6 | "website": "https://nico.kubosho.com", 7 | "config": { 8 | "packageName": "Nico", 9 | "projectStartYear": "2015", 10 | "licenseUrl": "https://github.com/kubosho/Nico/blob/master/LICENSE" 11 | }, 12 | "keywords": [ 13 | "css", 14 | "bootstrap", 15 | "sass", 16 | "scss", 17 | "lovelive", 18 | "web", 19 | "front-end", 20 | "framework", 21 | "theme" 22 | ], 23 | "license": "MIT", 24 | "main": "dist/js/bootstrap.js", 25 | "scripts": { 26 | "start": "gulp default", 27 | "test": "gulp test" 28 | }, 29 | "style": "dist/css/bootstrap.css", 30 | "repository": { 31 | "type": "git", 32 | "url": "https://github.com/kubosho/Nico.git" 33 | }, 34 | "dependencies": { 35 | "bootstrap": "4.3.1", 36 | "jquery": "1.9.1 - 3", 37 | "popper.js": "^1.14.7" 38 | }, 39 | "devDependencies": { 40 | "autoprefixer": "^9.6.1", 41 | "browser-sync": "^2.26.7", 42 | "clean-css": "^4.2.1", 43 | "del": "^5.0.0", 44 | "eslint": "^5.3.0", 45 | "eslint-config-airbnb-base": "^13.2.0", 46 | "eslint-plugin-import": "^2.18.2", 47 | "gulp": "^4.0.2", 48 | "gulp-clean-css": "^4.2.0", 49 | "gulp-eslint": "^6.0.0", 50 | "gulp-load-plugins": "^2.0.0", 51 | "gulp-plumber": "^1.2.1", 52 | "gulp-postcss": "^8.0.0", 53 | "gulp-rename": "^1.4.0", 54 | "gulp-replace": "^1.0.0", 55 | "gulp-sass": "^4.0.2", 56 | "gulp-stylelint": "^9.0.0", 57 | "gulp-zip": "^5.0.0", 58 | "postcss-flexbugs-fixes": "^4.1.0", 59 | "prettier": "^2.0.5", 60 | "run-sequence": "^2.2.1", 61 | "stylelint": "^10.1.0", 62 | "stylelint-config-recommended-scss": "^3.3.0", 63 | "stylelint-config-standard": "^18.3.0", 64 | "stylelint-order": "^3.0.1", 65 | "stylelint-scss": "^3.9.2" 66 | }, 67 | "files": [ 68 | "build", 69 | "dist", 70 | "scss/**/*.scss", 71 | "gulpfile.js", 72 | "LICENSE" 73 | ] 74 | } 75 | -------------------------------------------------------------------------------- /scss/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // [!] Please do *NOT* remove the banner space at below this 4 | // This will be automatically replaced by gulp build tasks 5 | 6 | /*! [<>] */ 7 | 8 | @import "honoka/honoka"; 9 | -------------------------------------------------------------------------------- /scss/honoka/_honoka.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Core functions 4 | @import 'bootstrap/scss/functions'; 5 | 6 | // Honoka variables 7 | @import './variables'; 8 | // Nico variables 9 | @import './variables_nico'; 10 | 11 | @import 'bootstrap/scss/variables'; 12 | @import 'bootstrap/scss/mixins'; 13 | @import 'bootstrap/scss/root'; 14 | 15 | // Core CSS 16 | @import 'bootstrap/scss/reboot'; 17 | @import 'bootstrap/scss/type'; 18 | @import 'bootstrap/scss/images'; 19 | @import 'bootstrap/scss/code'; 20 | @import 'bootstrap/scss/grid'; 21 | @import 'bootstrap/scss/tables'; 22 | @import 'bootstrap/scss/forms'; 23 | @import 'bootstrap/scss/buttons'; 24 | 25 | // Components 26 | @import 'bootstrap/scss/transitions'; 27 | @import 'bootstrap/scss/dropdown'; 28 | @import 'bootstrap/scss/button-group'; 29 | @import 'bootstrap/scss/input-group'; 30 | @import 'bootstrap/scss/custom-forms'; 31 | @import 'bootstrap/scss/nav'; 32 | @import 'bootstrap/scss/navbar'; 33 | @import 'bootstrap/scss/card'; 34 | @import 'bootstrap/scss/breadcrumb'; 35 | @import 'bootstrap/scss/pagination'; 36 | @import 'bootstrap/scss/badge'; 37 | @import 'bootstrap/scss/jumbotron'; 38 | @import 'bootstrap/scss/alert'; 39 | @import 'bootstrap/scss/progress'; 40 | @import 'bootstrap/scss/media'; 41 | @import 'bootstrap/scss/list-group'; 42 | @import 'bootstrap/scss/close'; 43 | @import 'bootstrap/scss/toasts'; 44 | @import 'bootstrap/scss/modal'; 45 | @import 'bootstrap/scss/tooltip'; 46 | @import 'bootstrap/scss/popover'; 47 | @import 'bootstrap/scss/carousel'; 48 | @import 'bootstrap/scss/spinners'; 49 | @import 'bootstrap/scss/utilities'; 50 | @import 'bootstrap/scss/print'; 51 | 52 | // Honoka original setting 53 | @import './override'; 54 | // Nico original setting 55 | @import './override_nico'; 56 | -------------------------------------------------------------------------------- /scss/honoka/_mixins.scss: -------------------------------------------------------------------------------- 1 | // original mixin functions 2 | -------------------------------------------------------------------------------- /scss/honoka/_override.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .navbar { 4 | .nav-item { 5 | .nav-link { 6 | position: relative; 7 | margin-right: $spacer * .5; 8 | &::before { 9 | position: absolute; 10 | right: 0; 11 | bottom: 0; 12 | left: 0; 13 | width: 0; 14 | margin: 0 auto; 15 | content: ""; 16 | border-bottom-style: solid; 17 | border-bottom-width: 1px; 18 | transition: width .2s; 19 | } 20 | @include hover-focus { 21 | &::before { 22 | width: 100%; 23 | } 24 | } 25 | } 26 | &.active .nav-link::before { 27 | width: 100%; 28 | } 29 | } 30 | } 31 | 32 | .navbar-dark { 33 | .nav-item .nav-link::before { 34 | border-color: $navbar-dark-active-color; 35 | } 36 | } 37 | 38 | .navbar-light { 39 | .nav-item .nav-link::before { 40 | border-color: $navbar-light-active-color; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/honoka/_override_nico.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .bg-light { 4 | /* stylelint-disable-next-line declaration-no-important */ 5 | background-color: lighten($secondary, 8%) !important; 6 | } 7 | 8 | .table-dark, 9 | .table-dark > th, 10 | .table-dark > td { 11 | background-color: $pink-dark; 12 | } 13 | 14 | .table-hover .table-dark:hover, 15 | .table-hover .table-dark:hover > td, 16 | .table-hover .table-dark:hover > th { 17 | background-color: lighten($pink-dark, 8%); 18 | } 19 | 20 | .navbar-dark { 21 | &.bg-primary { 22 | .navbar-brand, 23 | .navbar-brand:hover, 24 | .navbar-brand:focus { 25 | color: $gray-800; 26 | } 27 | 28 | .navbar-nav .nav-link { 29 | color: rgba($gray-800, 0.75); 30 | } 31 | 32 | .navbar-nav .nav-link:hover, 33 | .navbar-nav .nav-link:focus { 34 | color: rgba($gray-800, 0.9); 35 | } 36 | 37 | /* stylelint-disable selector-max-class */ 38 | .navbar-nav .active > .nav-link { 39 | color: $gray-800; 40 | } 41 | /* stylelint-enable */ 42 | 43 | .nav-item .nav-link::before { 44 | border-color: $gray-800; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/honoka/_variables.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | // Variables 3 | // 4 | // Variables should follow the `$component-state-property-size` formula for 5 | // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. 6 | 7 | // Color system 8 | 9 | $white: #fff !default; 10 | $gray-100: #f8f9fa !default; 11 | $gray-200: #e9ecef !default; 12 | $gray-300: #dee2e6 !default; 13 | $gray-400: #ced4da !default; 14 | $gray-500: #adb5bd !default; 15 | $gray-600: #6c757d !default; 16 | $gray-700: #495057 !default; 17 | $gray-800: #343a40 !default; 18 | $gray-900: #212529 !default; 19 | $black: #000 !default; 20 | 21 | $grays: () !default; 22 | // stylelint-disable-next-line scss/dollar-variable-default 23 | $grays: map-merge( 24 | ( 25 | '100': $gray-100, 26 | '200': $gray-200, 27 | '300': $gray-300, 28 | '400': $gray-400, 29 | '500': $gray-500, 30 | '600': $gray-600, 31 | '700': $gray-700, 32 | '800': $gray-800, 33 | '900': $gray-900, 34 | ), 35 | $grays 36 | ); 37 | 38 | $blue: #007bff !default; 39 | $indigo: #6610f2 !default; 40 | $purple: #6f42c1 !default; 41 | $pink: #e83e8c !default; 42 | $red: #dc3545 !default; 43 | $orange: #fd7e14 !default; 44 | $yellow: #ffc107 !default; 45 | $green: #28a745 !default; 46 | $teal: #20c997 !default; 47 | $cyan: #17a2b8 !default; 48 | 49 | $colors: () !default; 50 | // stylelint-disable-next-line scss/dollar-variable-default 51 | $colors: map-merge( 52 | ( 53 | 'blue': $blue, 54 | 'indigo': $indigo, 55 | 'purple': $purple, 56 | 'pink': $pink, 57 | 'red': $red, 58 | 'orange': $orange, 59 | 'yellow': $yellow, 60 | 'green': $green, 61 | 'teal': $teal, 62 | 'cyan': $cyan, 63 | 'white': $white, 64 | 'gray': $gray-600, 65 | 'gray-dark': $gray-800, 66 | ), 67 | $colors 68 | ); 69 | 70 | $primary: $blue !default; 71 | $secondary: $pink !default; 72 | $success: $green !default; 73 | $info: $cyan !default; 74 | $warning: $yellow !default; 75 | $danger: $red !default; 76 | $light: $gray-100 !default; 77 | $dark: $gray-800 !default; 78 | 79 | $theme-colors: () !default; 80 | // stylelint-disable-next-line scss/dollar-variable-default 81 | $theme-colors: map-merge( 82 | ( 83 | 'primary': $primary, 84 | 'secondary': $secondary, 85 | 'success': $success, 86 | 'info': $info, 87 | 'warning': $warning, 88 | 'danger': $danger, 89 | 'light': $light, 90 | 'dark': $dark, 91 | ), 92 | $theme-colors 93 | ); 94 | 95 | // Set a specific jump point for requesting color jumps 96 | $theme-color-interval: 8% !default; 97 | 98 | // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. 99 | $yiq-contrasted-threshold: 150 !default; 100 | 101 | // Customize the light and dark text colors for use in our YIQ color contrast function. 102 | $yiq-text-dark: $gray-900 !default; 103 | $yiq-text-light: $white !default; 104 | 105 | // Options 106 | // 107 | // Quickly modify global styling by enabling or disabling optional features. 108 | 109 | $enable-caret: true !default; 110 | $enable-rounded: true !default; 111 | $enable-shadows: false !default; 112 | $enable-gradients: false !default; 113 | $enable-transitions: true !default; 114 | $enable-prefers-reduced-motion-media-query: true !default; 115 | $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS 116 | $enable-grid-classes: true !default; 117 | $enable-pointer-cursor-for-buttons: true !default; 118 | $enable-print-styles: true !default; 119 | $enable-responsive-font-sizes: false !default; 120 | $enable-validation-icons: true !default; 121 | $enable-deprecation-messages: true !default; 122 | 123 | // Spacing 124 | // 125 | // Control the default styling of most Bootstrap elements by modifying these 126 | // variables. Mostly focused on spacing. 127 | // You can add more entries to the $spacers map, should you need more variation. 128 | 129 | $spacer: 1rem !default; 130 | $spacers: () !default; 131 | // stylelint-disable-next-line scss/dollar-variable-default 132 | $spacers: map-merge( 133 | ( 134 | 0: 0, 135 | 1: ( 136 | $spacer * 0.25, 137 | ), 138 | 2: ( 139 | $spacer * 0.5, 140 | ), 141 | 3: $spacer, 142 | 4: ( 143 | $spacer * 1.5, 144 | ), 145 | 5: ( 146 | $spacer * 3, 147 | ), 148 | ), 149 | $spacers 150 | ); 151 | 152 | // This variable affects the `.h-*` and `.w-*` classes. 153 | $sizes: () !default; 154 | // stylelint-disable-next-line scss/dollar-variable-default 155 | $sizes: map-merge( 156 | ( 157 | 25: 25%, 158 | 50: 50%, 159 | 75: 75%, 160 | 100: 100%, 161 | auto: auto, 162 | ), 163 | $sizes 164 | ); 165 | 166 | // Body 167 | // 168 | // Settings for the `` element. 169 | 170 | $body-bg: $white !default; 171 | $body-color: $gray-900 !default; 172 | 173 | // Links 174 | // 175 | // Style anchor elements. 176 | 177 | $link-color: theme-color('primary') !default; 178 | $link-decoration: none !default; 179 | $link-hover-color: darken($link-color, 15%) !default; 180 | $link-hover-decoration: underline !default; 181 | // Darken percentage for links with `.text-*` class (e.g. `.text-success`) 182 | $emphasized-link-hover-darken-percentage: 15% !default; 183 | 184 | // Paragraphs 185 | // 186 | // Style p element. 187 | 188 | $paragraph-margin-bottom: 1rem !default; 189 | 190 | // Grid breakpoints 191 | // 192 | // Define the minimum dimensions at which your layout will change, 193 | // adapting to different screen sizes, for use in media queries. 194 | 195 | $grid-breakpoints: ( 196 | xs: 0, 197 | sm: 576px, 198 | md: 768px, 199 | lg: 992px, 200 | xl: 1200px, 201 | ) !default; 202 | 203 | @include _assert-ascending($grid-breakpoints, '$grid-breakpoints'); 204 | @include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints'); 205 | 206 | // Grid containers 207 | // 208 | // Define the maximum width of `.container` for different screen sizes. 209 | 210 | $container-max-widths: ( 211 | sm: 540px, 212 | md: 720px, 213 | lg: 960px, 214 | xl: 1140px, 215 | ) !default; 216 | 217 | @include _assert-ascending($container-max-widths, '$container-max-widths'); 218 | 219 | // Grid columns 220 | // 221 | // Set the number of columns and specify the width of the gutters. 222 | 223 | $grid-columns: 12 !default; 224 | $grid-gutter-width: 30px !default; 225 | 226 | // Components 227 | // 228 | // Define common padding and border radius sizes and more. 229 | 230 | $line-height-lg: 1.5 !default; 231 | $line-height-sm: 1.5 !default; 232 | 233 | $border-width: 1px !default; 234 | $border-color: $gray-300 !default; 235 | 236 | $border-radius: 0.25rem !default; 237 | $border-radius-lg: 0.3rem !default; 238 | $border-radius-sm: 0.2rem !default; 239 | 240 | $rounded-pill: 50rem !default; 241 | 242 | $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default; 243 | $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; 244 | $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default; 245 | 246 | $component-active-color: $white !default; 247 | $component-active-bg: theme-color('primary') !default; 248 | 249 | $caret-width: 0.3em !default; 250 | $caret-vertical-align: $caret-width * 0.85 !default; 251 | $caret-spacing: $caret-width * 0.85 !default; 252 | 253 | $transition-base: all 0.2s ease-in-out !default; 254 | $transition-fade: opacity 0.15s linear !default; 255 | $transition-collapse: height 0.35s ease !default; 256 | 257 | $embed-responsive-aspect-ratios: () !default; 258 | // stylelint-disable-next-line scss/dollar-variable-default 259 | $embed-responsive-aspect-ratios: join( 260 | ((21 9), (16 9), (4 3), (1 1)), 261 | $embed-responsive-aspect-ratios 262 | ); 263 | 264 | // Typography 265 | // 266 | // Font, line-height, and color for body text, headings, and more. 267 | 268 | // stylelint-disable value-keyword-case 269 | $font-family-sans-serif: -apple-system, 'BlinkMacSystemFont', 'Helvetica Neue', 270 | Helvetica, 'Arial', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 271 | 'メイリオ', Meiryo, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 272 | 'Segoe UI Symbol', 'Noto Color Emoji' !default; 273 | $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 274 | 'Liberation Mono', 'Courier New', monospace !default; 275 | $font-family-serif: 'Times New Roman', Times, 'Yu Mincho', YuMincho, 276 | 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', 277 | 'MS 明朝', serif !default; 278 | $font-family-base: $font-family-sans-serif !default; 279 | // stylelint-enable value-keyword-case 280 | 281 | $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` 282 | $font-size-lg: $font-size-base * 1.25 !default; 283 | $font-size-sm: $font-size-base * 0.875 !default; 284 | 285 | $font-weight-lighter: lighter !default; 286 | $font-weight-light: 400 !default; 287 | $font-weight-normal: 400 !default; 288 | $font-weight-bold: 600 !default; 289 | $font-weight-bolder: bolder !default; 290 | 291 | $font-weight-base: $font-weight-normal !default; 292 | $line-height-base: 1.5 !default; 293 | 294 | $h1-font-size: $font-size-base * 2.5 !default; 295 | $h2-font-size: $font-size-base * 2 !default; 296 | $h3-font-size: $font-size-base * 1.75 !default; 297 | $h4-font-size: $font-size-base * 1.5 !default; 298 | $h5-font-size: $font-size-base * 1.25 !default; 299 | $h6-font-size: $font-size-base !default; 300 | 301 | $headings-margin-bottom: $spacer / 2 !default; 302 | $headings-font-family: null !default; 303 | $headings-font-weight: $font-weight-bold !default; 304 | $headings-line-height: 1.2 !default; 305 | $headings-color: null !default; 306 | 307 | $display1-size: 6rem !default; 308 | $display2-size: 5.5rem !default; 309 | $display3-size: 4.5rem !default; 310 | $display4-size: 3.5rem !default; 311 | 312 | $display1-weight: $font-weight-normal !default; 313 | $display2-weight: $font-weight-normal !default; 314 | $display3-weight: $font-weight-normal !default; 315 | $display4-weight: $font-weight-normal !default; 316 | $display-line-height: $headings-line-height !default; 317 | 318 | $lead-font-size: $font-size-base * 1.25 !default; 319 | $lead-font-weight: $font-weight-normal !default; 320 | 321 | $small-font-size: 80% !default; 322 | 323 | $text-muted: $gray-600 !default; 324 | 325 | $blockquote-small-color: $gray-600 !default; 326 | $blockquote-small-font-size: $small-font-size !default; 327 | $blockquote-font-size: $font-size-base !default; 328 | 329 | $hr-border-color: rgba($black, 0.1) !default; 330 | $hr-border-width: $border-width !default; 331 | 332 | $mark-padding: 0.2em !default; 333 | 334 | $dt-font-weight: $font-weight-bold !default; 335 | 336 | $kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default; 337 | $nested-kbd-font-weight: $font-weight-bold !default; 338 | 339 | $list-inline-padding: 0.5rem !default; 340 | 341 | $mark-bg: #fcf8e3 !default; 342 | 343 | $hr-margin-y: $spacer !default; 344 | 345 | // Tables 346 | // 347 | // Customizes the `.table` component with basic values, each used across all table variations. 348 | 349 | $table-cell-padding: 0.75rem !default; 350 | $table-cell-padding-sm: 0.3rem !default; 351 | 352 | $table-color: $body-color !default; 353 | $table-bg: null !default; 354 | $table-accent-bg: rgba($black, 0.05) !default; 355 | $table-hover-color: $table-color !default; 356 | $table-hover-bg: rgba($black, 0.075) !default; 357 | $table-active-bg: $table-hover-bg !default; 358 | 359 | $table-border-width: $border-width !default; 360 | $table-border-color: $border-color !default; 361 | 362 | $table-head-bg: $gray-200 !default; 363 | $table-head-color: $gray-700 !default; 364 | 365 | $table-dark-color: $white !default; 366 | $table-dark-bg: $gray-800 !default; 367 | $table-dark-accent-bg: rgba($white, 0.05) !default; 368 | $table-dark-hover-color: $table-dark-color !default; 369 | $table-dark-hover-bg: rgba($white, 0.075) !default; 370 | $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; 371 | $table-dark-color: $white !default; 372 | 373 | $table-striped-order: odd !default; 374 | 375 | $table-caption-color: $text-muted !default; 376 | 377 | $table-bg-level: -9 !default; 378 | $table-border-level: -6 !default; 379 | 380 | // Buttons + Forms 381 | // 382 | // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. 383 | 384 | $input-btn-padding-y: 0.375rem !default; 385 | $input-btn-padding-x: 0.75rem !default; 386 | $input-btn-font-family: null !default; 387 | $input-btn-font-size: $font-size-base !default; 388 | $input-btn-line-height: $line-height-base !default; 389 | 390 | $input-btn-focus-width: 0.2rem !default; 391 | $input-btn-focus-color: rgba($component-active-bg, 0.25) !default; 392 | $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; 393 | 394 | $input-btn-padding-y-sm: 0.25rem !default; 395 | $input-btn-padding-x-sm: 0.5rem !default; 396 | $input-btn-font-size-sm: $font-size-sm !default; 397 | $input-btn-line-height-sm: $line-height-sm !default; 398 | 399 | $input-btn-padding-y-lg: 0.5rem !default; 400 | $input-btn-padding-x-lg: 1rem !default; 401 | $input-btn-font-size-lg: $font-size-lg !default; 402 | $input-btn-line-height-lg: $line-height-lg !default; 403 | 404 | $input-btn-border-width: $border-width !default; 405 | 406 | // Buttons 407 | // 408 | // For each of Bootstrap's buttons, define text, background, and border color. 409 | 410 | $btn-padding-y: $input-btn-padding-y !default; 411 | $btn-padding-x: $input-btn-padding-x !default; 412 | $btn-font-family: $input-btn-font-family !default; 413 | $btn-font-size: $input-btn-font-size !default; 414 | $btn-line-height: $input-btn-line-height !default; 415 | 416 | $btn-padding-y-sm: $input-btn-padding-y-sm !default; 417 | $btn-padding-x-sm: $input-btn-padding-x-sm !default; 418 | $btn-font-size-sm: $input-btn-font-size-sm !default; 419 | $btn-line-height-sm: $input-btn-line-height-sm !default; 420 | 421 | $btn-padding-y-lg: $input-btn-padding-y-lg !default; 422 | $btn-padding-x-lg: $input-btn-padding-x-lg !default; 423 | $btn-font-size-lg: $input-btn-font-size-lg !default; 424 | $btn-line-height-lg: $input-btn-line-height-lg !default; 425 | 426 | $btn-border-width: $input-btn-border-width !default; 427 | 428 | $btn-font-weight: $font-weight-normal !default; 429 | $btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default; 430 | $btn-focus-width: $input-btn-focus-width !default; 431 | $btn-focus-box-shadow: $input-btn-focus-box-shadow !default; 432 | $btn-disabled-opacity: 0.65 !default; 433 | $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; 434 | 435 | $btn-link-disabled-color: $gray-600 !default; 436 | 437 | $btn-block-spacing-y: 0.5rem !default; 438 | 439 | // Allows for customizing button radius independently from global border radius 440 | $btn-border-radius: $border-radius !default; 441 | $btn-border-radius-lg: $border-radius-lg !default; 442 | $btn-border-radius-sm: $border-radius-sm !default; 443 | 444 | $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 445 | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; 446 | 447 | // Forms 448 | 449 | $label-margin-bottom: 0.5rem !default; 450 | 451 | $input-padding-y: $input-btn-padding-y !default; 452 | $input-padding-x: $input-btn-padding-x !default; 453 | $input-font-family: $input-btn-font-family !default; 454 | $input-font-size: $input-btn-font-size !default; 455 | $input-font-weight: $font-weight-base !default; 456 | $input-line-height: $input-btn-line-height !default; 457 | 458 | $input-padding-y-sm: $input-btn-padding-y-sm !default; 459 | $input-padding-x-sm: $input-btn-padding-x-sm !default; 460 | $input-font-size-sm: $input-btn-font-size-sm !default; 461 | $input-line-height-sm: $input-btn-line-height-sm !default; 462 | 463 | $input-padding-y-lg: $input-btn-padding-y-lg !default; 464 | $input-padding-x-lg: $input-btn-padding-x-lg !default; 465 | $input-font-size-lg: $input-btn-font-size-lg !default; 466 | $input-line-height-lg: $input-btn-line-height-lg !default; 467 | 468 | $input-bg: $white !default; 469 | $input-disabled-bg: $gray-200 !default; 470 | 471 | $input-color: $gray-700 !default; 472 | $input-border-color: $gray-400 !default; 473 | $input-border-width: $input-btn-border-width !default; 474 | $input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default; 475 | 476 | $input-border-radius: $border-radius !default; 477 | $input-border-radius-lg: $border-radius-lg !default; 478 | $input-border-radius-sm: $border-radius-sm !default; 479 | 480 | $input-focus-bg: $input-bg !default; 481 | $input-focus-border-color: lighten($component-active-bg, 25%) !default; 482 | $input-focus-color: $input-color !default; 483 | $input-focus-width: $input-btn-focus-width !default; 484 | $input-focus-box-shadow: $input-btn-focus-box-shadow !default; 485 | 486 | $input-placeholder-color: $gray-600 !default; 487 | $input-plaintext-color: $body-color !default; 488 | 489 | $input-height-border: $input-border-width * 2 !default; 490 | 491 | $input-height-inner: calc( 492 | #{$input-line-height * 1em} + #{$input-padding-y * 2} 493 | ) !default; 494 | $input-height-inner-half: calc( 495 | #{$input-line-height * 0.5em} + #{$input-padding-y} 496 | ) !default; 497 | $input-height-inner-quarter: calc( 498 | #{$input-line-height * 0.25em} + #{$input-padding-y / 2} 499 | ) !default; 500 | 501 | $input-height: calc( 502 | #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border} 503 | ) !default; 504 | $input-height-sm: calc( 505 | #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border} 506 | ) !default; 507 | $input-height-lg: calc( 508 | #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border} 509 | ) !default; 510 | 511 | $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; 512 | 513 | $form-text-margin-top: 0.25rem !default; 514 | 515 | $form-check-input-gutter: 1.25rem !default; 516 | $form-check-input-margin-y: 0.3rem !default; 517 | $form-check-input-margin-x: 0.25rem !default; 518 | 519 | $form-check-inline-margin-x: 0.75rem !default; 520 | $form-check-inline-input-margin-x: 0.3125rem !default; 521 | 522 | $form-grid-gutter-width: 10px !default; 523 | $form-group-margin-bottom: 1rem !default; 524 | 525 | $input-group-addon-color: $input-color !default; 526 | $input-group-addon-bg: $gray-200 !default; 527 | $input-group-addon-border-color: $input-border-color !default; 528 | 529 | $custom-forms-transition: background-color 0.15s ease-in-out, 530 | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; 531 | 532 | $custom-control-gutter: 0.5rem !default; 533 | $custom-control-spacer-x: 1rem !default; 534 | 535 | $custom-control-indicator-size: 1rem !default; 536 | $custom-control-indicator-bg: $input-bg !default; 537 | 538 | $custom-control-indicator-bg-size: 50% 50% !default; 539 | $custom-control-indicator-box-shadow: $input-box-shadow !default; 540 | $custom-control-indicator-border-color: $gray-500 !default; 541 | $custom-control-indicator-border-width: $input-border-width !default; 542 | 543 | $custom-control-indicator-disabled-bg: $input-disabled-bg !default; 544 | $custom-control-label-disabled-color: $gray-600 !default; 545 | 546 | $custom-control-indicator-checked-color: $component-active-color !default; 547 | $custom-control-indicator-checked-bg: $component-active-bg !default; 548 | $custom-control-indicator-checked-disabled-bg: rgba( 549 | theme-color('primary'), 550 | 0.5 551 | ) !default; 552 | $custom-control-indicator-checked-box-shadow: none !default; 553 | $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; 554 | 555 | $custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default; 556 | $custom-control-indicator-focus-border-color: $input-focus-border-color !default; 557 | 558 | $custom-control-indicator-active-color: $component-active-color !default; 559 | $custom-control-indicator-active-bg: lighten( 560 | $component-active-bg, 561 | 35% 562 | ) !default; 563 | $custom-control-indicator-active-box-shadow: none !default; 564 | $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; 565 | 566 | $custom-checkbox-indicator-border-radius: $border-radius !default; 567 | $custom-checkbox-indicator-icon-checked: str-replace( 568 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), 569 | '#', 570 | '%23' 571 | ) !default; 572 | 573 | $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; 574 | $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; 575 | $custom-checkbox-indicator-icon-indeterminate: str-replace( 576 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), 577 | '#', 578 | '%23' 579 | ) !default; 580 | $custom-checkbox-indicator-indeterminate-box-shadow: none !default; 581 | $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; 582 | 583 | $custom-radio-indicator-border-radius: 50% !default; 584 | $custom-radio-indicator-icon-checked: str-replace( 585 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), 586 | '#', 587 | '%23' 588 | ) !default; 589 | 590 | $custom-switch-width: $custom-control-indicator-size * 1.75 !default; 591 | $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; 592 | $custom-switch-indicator-size: calc( 593 | #{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 594 | 4} 595 | ) !default; 596 | 597 | $custom-select-padding-y: $input-padding-y !default; 598 | $custom-select-padding-x: $input-padding-x !default; 599 | $custom-select-font-family: $input-font-family !default; 600 | $custom-select-font-size: $input-font-size !default; 601 | $custom-select-height: $input-height !default; 602 | $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator 603 | $custom-select-font-weight: $input-font-weight !default; 604 | $custom-select-line-height: $input-line-height !default; 605 | $custom-select-color: $input-color !default; 606 | $custom-select-disabled-color: $gray-600 !default; 607 | $custom-select-bg: $input-bg !default; 608 | $custom-select-disabled-bg: $gray-200 !default; 609 | $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions 610 | $custom-select-indicator-color: $gray-800 !default; 611 | $custom-select-indicator: str-replace( 612 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), 613 | '#', 614 | '%23' 615 | ) !default; 616 | $custom-select-background: $custom-select-indicator no-repeat right 617 | $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) 618 | 619 | $custom-select-feedback-icon-padding-right: calc( 620 | (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + 621 | $custom-select-indicator-padding} 622 | ) !default; 623 | $custom-select-feedback-icon-position: center right 624 | ($custom-select-padding-x + $custom-select-indicator-padding) !default; 625 | $custom-select-feedback-icon-size: $input-height-inner-half 626 | $input-height-inner-half !default; 627 | 628 | $custom-select-border-width: $input-border-width !default; 629 | $custom-select-border-color: $input-border-color !default; 630 | $custom-select-border-radius: $border-radius !default; 631 | $custom-select-box-shadow: inset 0 1px 2px rgba($black, 0.075) !default; 632 | 633 | $custom-select-focus-border-color: $input-focus-border-color !default; 634 | $custom-select-focus-width: $input-focus-width !default; 635 | $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width 636 | $input-btn-focus-color !default; 637 | 638 | $custom-select-padding-y-sm: $input-padding-y-sm !default; 639 | $custom-select-padding-x-sm: $input-padding-x-sm !default; 640 | $custom-select-font-size-sm: $input-font-size-sm !default; 641 | $custom-select-height-sm: $input-height-sm !default; 642 | 643 | $custom-select-padding-y-lg: $input-padding-y-lg !default; 644 | $custom-select-padding-x-lg: $input-padding-x-lg !default; 645 | $custom-select-font-size-lg: $input-font-size-lg !default; 646 | $custom-select-height-lg: $input-height-lg !default; 647 | 648 | $custom-range-track-width: 100% !default; 649 | $custom-range-track-height: 0.5rem !default; 650 | $custom-range-track-cursor: pointer !default; 651 | $custom-range-track-bg: $gray-300 !default; 652 | $custom-range-track-border-radius: 1rem !default; 653 | $custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; 654 | 655 | $custom-range-thumb-width: 1rem !default; 656 | $custom-range-thumb-height: $custom-range-thumb-width !default; 657 | $custom-range-thumb-bg: $component-active-bg !default; 658 | $custom-range-thumb-border: 0 !default; 659 | $custom-range-thumb-border-radius: 1rem !default; 660 | $custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default; 661 | $custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, 662 | $input-focus-box-shadow !default; 663 | $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge 664 | $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; 665 | $custom-range-thumb-disabled-bg: $gray-500 !default; 666 | 667 | $custom-file-height: $input-height !default; 668 | $custom-file-height-inner: $input-height-inner !default; 669 | $custom-file-focus-border-color: $input-focus-border-color !default; 670 | $custom-file-focus-box-shadow: $input-focus-box-shadow !default; 671 | $custom-file-disabled-bg: $input-disabled-bg !default; 672 | 673 | $custom-file-padding-y: $input-padding-y !default; 674 | $custom-file-padding-x: $input-padding-x !default; 675 | $custom-file-line-height: $input-line-height !default; 676 | $custom-file-font-family: $input-font-family !default; 677 | $custom-file-font-weight: $input-font-weight !default; 678 | $custom-file-color: $input-color !default; 679 | $custom-file-bg: $input-bg !default; 680 | $custom-file-border-width: $input-border-width !default; 681 | $custom-file-border-color: $input-border-color !default; 682 | $custom-file-border-radius: $input-border-radius !default; 683 | $custom-file-box-shadow: $input-box-shadow !default; 684 | $custom-file-button-color: $custom-file-color !default; 685 | $custom-file-button-bg: $input-group-addon-bg !default; 686 | $custom-file-text: ( 687 | en: 'Browse', 688 | ja: '選択', 689 | ) !default; 690 | 691 | // Form validation 692 | 693 | $form-feedback-margin-top: $form-text-margin-top !default; 694 | $form-feedback-font-size: $small-font-size !default; 695 | $form-feedback-valid-color: theme-color('success') !default; 696 | $form-feedback-invalid-color: theme-color('danger') !default; 697 | 698 | $form-feedback-icon-valid-color: $form-feedback-valid-color !default; 699 | $form-feedback-icon-valid: str-replace( 700 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), 701 | '#', 702 | '%23' 703 | ) !default; 704 | $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; 705 | $form-feedback-icon-invalid: str-replace( 706 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), 707 | '#', 708 | '%23' 709 | ) !default; 710 | 711 | $form-validation-states: () !default; 712 | // stylelint-disable-next-line scss/dollar-variable-default 713 | $form-validation-states: map-merge( 714 | ( 715 | 'valid': ( 716 | 'color': $form-feedback-valid-color, 717 | 'icon': $form-feedback-icon-valid, 718 | ), 719 | 'invalid': ( 720 | 'color': $form-feedback-invalid-color, 721 | 'icon': $form-feedback-icon-invalid, 722 | ), 723 | ), 724 | $form-validation-states 725 | ); 726 | 727 | // Z-index master list 728 | // 729 | // Warning: Avoid customizing these values. They're used for a bird's eye view 730 | // of components dependent on the z-axis and are designed to all work together. 731 | 732 | $zindex-dropdown: 1000 !default; 733 | $zindex-sticky: 1020 !default; 734 | $zindex-fixed: 1030 !default; 735 | $zindex-modal-backdrop: 1040 !default; 736 | $zindex-modal: 1050 !default; 737 | $zindex-popover: 1060 !default; 738 | $zindex-tooltip: 1070 !default; 739 | 740 | $component-active-color: $white !default; 741 | $component-active-bg: theme-color('primary') !default; 742 | 743 | // Navs 744 | 745 | $nav-link-padding-y: 0.5rem !default; 746 | $nav-link-padding-x: 1rem !default; 747 | $nav-link-disabled-color: $gray-600 !default; 748 | 749 | $nav-tabs-border-color: $gray-300 !default; 750 | $nav-tabs-border-width: $border-width !default; 751 | $nav-tabs-border-radius: $border-radius !default; 752 | $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; 753 | $nav-tabs-link-active-color: $gray-700 !default; 754 | $nav-tabs-link-active-bg: $body-bg !default; 755 | $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; 756 | 757 | $nav-pills-border-radius: $border-radius !default; 758 | $nav-pills-link-active-color: $component-active-color !default; 759 | $nav-pills-link-active-bg: $component-active-bg !default; 760 | 761 | $nav-divider-color: $gray-200 !default; 762 | $nav-divider-margin-y: $spacer / 2 !default; 763 | 764 | // Navbar 765 | 766 | $navbar-padding-y: $spacer * 1.2 !default; 767 | $navbar-padding-x: $spacer * 1.5 !default; 768 | 769 | $navbar-nav-link-padding-x: 0.5rem !default; 770 | 771 | $navbar-brand-font-size: $font-size-lg !default; 772 | // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link 773 | $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; 774 | $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; 775 | $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; 776 | 777 | $navbar-toggler-padding-y: 0.25rem !default; 778 | $navbar-toggler-padding-x: 0.75rem !default; 779 | $navbar-toggler-font-size: $font-size-lg !default; 780 | $navbar-toggler-border-radius: $btn-border-radius !default; 781 | 782 | $navbar-dark-color: rgba($white, 0.5) !default; 783 | $navbar-dark-hover-color: rgba($white, 0.75) !default; 784 | $navbar-dark-active-color: $white !default; 785 | $navbar-dark-disabled-color: rgba($white, 0.25) !default; 786 | $navbar-dark-toggler-icon-bg: str-replace( 787 | url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), 788 | '#', 789 | '%23' 790 | ) !default; 791 | $navbar-dark-toggler-border-color: rgba($white, 0.1) !default; 792 | 793 | $navbar-light-color: rgba($black, 0.5) !default; 794 | $navbar-light-hover-color: rgba($black, 0.7) !default; 795 | $navbar-light-active-color: rgba($black, 0.9) !default; 796 | $navbar-light-disabled-color: rgba($black, 0.3) !default; 797 | $navbar-light-toggler-icon-bg: str-replace( 798 | url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), 799 | '#', 800 | '%23' 801 | ) !default; 802 | $navbar-light-toggler-border-color: rgba($black, 0.1) !default; 803 | 804 | $navbar-light-brand-color: $navbar-light-active-color !default; 805 | $navbar-light-brand-hover-color: $navbar-light-active-color !default; 806 | $navbar-dark-brand-color: $navbar-dark-active-color !default; 807 | $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; 808 | 809 | // Dropdowns 810 | // 811 | // Dropdown menu container and contents. 812 | 813 | $dropdown-min-width: 10rem !default; 814 | $dropdown-padding-y: 0.5rem !default; 815 | $dropdown-spacer: 0.125rem !default; 816 | $dropdown-font-size: $font-size-base !default; 817 | $dropdown-color: $body-color !default; 818 | $dropdown-bg: $white !default; 819 | $dropdown-border-color: rgba($black, 0.15) !default; 820 | $dropdown-border-radius: $border-radius !default; 821 | $dropdown-border-width: $border-width !default; 822 | $dropdown-inner-border-radius: calc( 823 | #{$dropdown-border-radius} - #{$dropdown-border-width} 824 | ) !default; 825 | $dropdown-divider-bg: $gray-200 !default; 826 | $dropdown-divider-margin-y: $nav-divider-margin-y !default; 827 | $dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default; 828 | 829 | $dropdown-link-color: $gray-900 !default; 830 | $dropdown-link-hover-color: darken($gray-900, 5%) !default; 831 | $dropdown-link-hover-bg: $gray-100 !default; 832 | 833 | $dropdown-link-active-color: $component-active-color !default; 834 | $dropdown-link-active-bg: $component-active-bg !default; 835 | 836 | $dropdown-link-disabled-color: $gray-600 !default; 837 | 838 | $dropdown-item-padding-y: 0.25rem !default; 839 | $dropdown-item-padding-x: 1.5rem !default; 840 | 841 | $dropdown-header-color: $gray-600 !default; 842 | 843 | // Pagination 844 | 845 | $pagination-padding-y: 0.5rem !default; 846 | $pagination-padding-x: 0.75rem !default; 847 | $pagination-padding-y-sm: 0.25rem !default; 848 | $pagination-padding-x-sm: 0.5rem !default; 849 | $pagination-padding-y-lg: 0.75rem !default; 850 | $pagination-padding-x-lg: 1.5rem !default; 851 | $pagination-line-height: 1.25 !default; 852 | 853 | $pagination-color: $link-color !default; 854 | $pagination-bg: $white !default; 855 | $pagination-border-width: $border-width !default; 856 | $pagination-border-color: $gray-300 !default; 857 | 858 | $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; 859 | $pagination-focus-outline: 0 !default; 860 | 861 | $pagination-hover-color: $link-hover-color !default; 862 | $pagination-hover-bg: $gray-200 !default; 863 | $pagination-hover-border-color: $gray-300 !default; 864 | 865 | $pagination-active-color: $component-active-color !default; 866 | $pagination-active-bg: $component-active-bg !default; 867 | $pagination-active-border-color: $pagination-active-bg !default; 868 | 869 | $pagination-disabled-color: $gray-600 !default; 870 | $pagination-disabled-bg: $white !default; 871 | $pagination-disabled-border-color: $gray-300 !default; 872 | 873 | // Jumbotron 874 | 875 | $jumbotron-padding: 2rem !default; 876 | $jumbotron-color: null !default; 877 | $jumbotron-bg: $gray-200 !default; 878 | 879 | // Cards 880 | 881 | $card-spacer-y: 0.75rem !default; 882 | $card-spacer-x: 1.25rem !default; 883 | $card-border-width: $border-width !default; 884 | $card-border-radius: $border-radius !default; 885 | $card-border-color: rgba($black, 0.125) !default; 886 | $card-inner-border-radius: calc( 887 | #{$card-border-radius} - #{$card-border-width} 888 | ) !default; 889 | $card-cap-bg: rgba($black, 0.03) !default; 890 | $card-cap-color: null !default; 891 | $card-color: null !default; 892 | $card-bg: $white !default; 893 | 894 | $card-img-overlay-padding: 1.25rem !default; 895 | 896 | $card-group-margin: $grid-gutter-width / 2 !default; 897 | $card-deck-margin: $card-group-margin !default; 898 | 899 | $card-columns-count: 3 !default; 900 | $card-columns-gap: 1.25rem !default; 901 | $card-columns-margin: $card-spacer-y !default; 902 | 903 | // Tooltips 904 | 905 | $tooltip-font-size: $font-size-sm !default; 906 | $tooltip-max-width: 200px !default; 907 | $tooltip-color: $white !default; 908 | $tooltip-bg: $black !default; 909 | $tooltip-border-radius: $border-radius !default; 910 | $tooltip-opacity: 0.9 !default; 911 | $tooltip-padding-y: 0.25rem !default; 912 | $tooltip-padding-x: 0.5rem !default; 913 | $tooltip-margin: 0 !default; 914 | 915 | $tooltip-arrow-width: 0.8rem !default; 916 | $tooltip-arrow-height: 0.4rem !default; 917 | $tooltip-arrow-color: $tooltip-bg !default; 918 | 919 | // Form tooltips must come after regular tooltips 920 | $form-feedback-tooltip-padding-y: $tooltip-padding-y !default; 921 | $form-feedback-tooltip-padding-x: $tooltip-padding-x !default; 922 | $form-feedback-tooltip-font-size: $tooltip-font-size !default; 923 | $form-feedback-tooltip-line-height: $line-height-base !default; 924 | $form-feedback-tooltip-opacity: $tooltip-opacity !default; 925 | $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; 926 | 927 | $input-btn-border-width: $border-width !default; 928 | 929 | // Popovers 930 | 931 | $popover-font-size: $font-size-sm !default; 932 | $popover-bg: $white !default; 933 | $popover-max-width: 276px !default; 934 | $popover-border-width: $border-width !default; 935 | $popover-border-color: rgba($black, 0.2) !default; 936 | $popover-border-radius: $border-radius-lg !default; 937 | $popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default; 938 | 939 | $popover-header-bg: darken($popover-bg, 3%) !default; 940 | $popover-header-color: $headings-color !default; 941 | $popover-header-padding-y: 0.5rem !default; 942 | $popover-header-padding-x: 0.75rem !default; 943 | 944 | $popover-body-color: $body-color !default; 945 | $popover-body-padding-y: $popover-header-padding-y !default; 946 | $popover-body-padding-x: $popover-header-padding-x !default; 947 | 948 | $popover-arrow-width: 1rem !default; 949 | $popover-arrow-height: 0.5rem !default; 950 | $popover-arrow-color: $popover-bg !default; 951 | 952 | $popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; 953 | 954 | // Toasts 955 | 956 | $toast-max-width: 350px !default; 957 | $toast-padding-x: 0.75rem !default; 958 | $toast-padding-y: 0.25rem !default; 959 | $toast-font-size: 0.875rem !default; 960 | $toast-color: null !default; 961 | $toast-background-color: rgba($white, 0.85) !default; 962 | $toast-border-width: 1px !default; 963 | $toast-border-color: rgba(0, 0, 0, 0.1) !default; 964 | $toast-border-radius: 0.25rem !default; 965 | $toast-box-shadow: 0 0.25rem 0.75rem rgba($black, 0.1) !default; 966 | 967 | $toast-header-color: $gray-600 !default; 968 | $toast-header-background-color: rgba($white, 0.85) !default; 969 | $toast-header-border-color: rgba(0, 0, 0, 0.05) !default; 970 | 971 | // Badges 972 | 973 | $badge-font-size: 75% !default; 974 | $badge-font-weight: $font-weight-bold !default; 975 | $badge-padding-y: 0.25em !default; 976 | $badge-padding-x: 0.4em !default; 977 | $badge-border-radius: $border-radius !default; 978 | 979 | $badge-transition: $btn-transition !default; 980 | $badge-focus-width: $input-btn-focus-width !default; 981 | 982 | $badge-pill-padding-x: 0.6em !default; 983 | // Use a higher than normal value to ensure completely rounded edges when 984 | // customizing padding or font-size on labels. 985 | $badge-pill-border-radius: 10rem !default; 986 | 987 | // Modals 988 | 989 | // Padding applied to the modal body 990 | $modal-inner-padding: 1rem !default; 991 | 992 | $modal-dialog-margin: 0.5rem !default; 993 | $modal-dialog-margin-y-sm-up: 1.75rem !default; 994 | 995 | $modal-title-line-height: $line-height-base !default; 996 | 997 | $modal-content-color: null !default; 998 | $modal-content-bg: $white !default; 999 | $modal-content-border-color: rgba($black, 0.2) !default; 1000 | $modal-content-border-width: $border-width !default; 1001 | $modal-content-border-radius: $border-radius-lg !default; 1002 | $modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default; 1003 | $modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default; 1004 | 1005 | $modal-backdrop-bg: $black !default; 1006 | $modal-backdrop-opacity: 0.5 !default; 1007 | $modal-header-border-color: $border-color !default; 1008 | $modal-footer-border-color: $modal-header-border-color !default; 1009 | $modal-header-border-width: $modal-content-border-width !default; 1010 | $modal-footer-border-width: $modal-header-border-width !default; 1011 | $modal-header-padding-y: 1rem !default; 1012 | $modal-header-padding-x: 1rem !default; 1013 | $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility 1014 | 1015 | $modal-xl: 1140px !default; 1016 | $modal-lg: 800px !default; 1017 | $modal-md: 500px !default; 1018 | $modal-sm: 300px !default; 1019 | 1020 | $modal-fade-transform: translate(0, -50px) !default; 1021 | $modal-show-transform: none !default; 1022 | $modal-transition: transform 0.3s ease-out !default; 1023 | 1024 | $list-group-action-color: $gray-700 !default; 1025 | $list-group-action-hover-color: $list-group-action-color !default; 1026 | 1027 | // Alerts 1028 | // 1029 | // Define alert colors, border radius, and padding. 1030 | 1031 | $alert-padding-y: 0.75rem !default; 1032 | $alert-padding-x: 1.25rem !default; 1033 | $alert-margin-bottom: 1rem !default; 1034 | $alert-border-radius: $border-radius !default; 1035 | $alert-link-font-weight: $font-weight-bold !default; 1036 | $alert-border-width: $border-width !default; 1037 | 1038 | $alert-bg-level: -10 !default; 1039 | $alert-border-level: -9 !default; 1040 | $alert-color-level: 6 !default; 1041 | 1042 | // Figures 1043 | 1044 | // Progress bars 1045 | 1046 | $progress-height: 1rem !default; 1047 | $progress-font-size: $font-size-base * 0.75 !default; 1048 | $progress-bg: $gray-200 !default; 1049 | $progress-border-radius: $border-radius !default; 1050 | $progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default; 1051 | $progress-bar-color: $white !default; 1052 | $progress-bar-bg: theme-color('primary') !default; 1053 | $progress-bar-animation-timing: 1s linear infinite !default; 1054 | $progress-bar-transition: width 0.6s ease !default; 1055 | 1056 | $breadcrumb-padding-y: 0.75rem !default; 1057 | $breadcrumb-padding-x: 1rem !default; 1058 | $breadcrumb-item-padding: 0.5rem !default; 1059 | 1060 | // List group 1061 | 1062 | $list-group-color: null !default; 1063 | $list-group-bg: $white !default; 1064 | $list-group-border-color: rgba($black, 0.125) !default; 1065 | $list-group-border-width: $border-width !default; 1066 | $list-group-border-radius: $border-radius !default; 1067 | 1068 | $list-group-item-padding-y: 0.75rem !default; 1069 | $list-group-item-padding-x: 1.25rem !default; 1070 | 1071 | $list-group-hover-bg: $gray-100 !default; 1072 | $list-group-active-color: $component-active-color !default; 1073 | $list-group-active-bg: $component-active-bg !default; 1074 | $list-group-active-border-color: $list-group-active-bg !default; 1075 | 1076 | $list-group-disabled-color: $gray-600 !default; 1077 | $list-group-disabled-bg: $list-group-bg !default; 1078 | 1079 | $list-group-action-color: $gray-700 !default; 1080 | $list-group-action-hover-color: $list-group-action-color !default; 1081 | 1082 | $list-group-action-active-color: $body-color !default; 1083 | $list-group-action-active-bg: $gray-200 !default; 1084 | 1085 | $carousel-control-icon-width: 20px !default; 1086 | 1087 | // Image thumbnails 1088 | 1089 | $thumbnail-padding: 0.25rem !default; 1090 | $thumbnail-bg: $body-bg !default; 1091 | $thumbnail-border-width: $border-width !default; 1092 | $thumbnail-border-color: $gray-300 !default; 1093 | $thumbnail-border-radius: $border-radius !default; 1094 | $thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default; 1095 | 1096 | // Figures 1097 | 1098 | $figure-caption-font-size: 90% !default; 1099 | $figure-caption-color: $gray-600 !default; 1100 | 1101 | // Close 1102 | 1103 | // Breadcrumbs 1104 | 1105 | $breadcrumb-padding-y: 0.75rem !default; 1106 | $breadcrumb-padding-x: 1rem !default; 1107 | $breadcrumb-item-padding: 0.5rem !default; 1108 | 1109 | $breadcrumb-margin-bottom: 1rem !default; 1110 | 1111 | $breadcrumb-bg: $gray-200 !default; 1112 | $breadcrumb-divider-color: $gray-600 !default; 1113 | $breadcrumb-active-color: $gray-600 !default; 1114 | $breadcrumb-divider: quote('/') !default; 1115 | 1116 | $breadcrumb-border-radius: $border-radius !default; 1117 | 1118 | // Carousel 1119 | 1120 | $carousel-control-color: $white !default; 1121 | $carousel-control-width: 15% !default; 1122 | $carousel-control-opacity: 0.5 !default; 1123 | $carousel-control-hover-opacity: 0.9 !default; 1124 | $carousel-control-transition: opacity 0.15s ease !default; 1125 | 1126 | $carousel-indicator-width: 30px !default; 1127 | $carousel-indicator-height: 3px !default; 1128 | $carousel-indicator-hit-area-height: 10px !default; 1129 | $carousel-indicator-spacer: 3px !default; 1130 | $carousel-indicator-active-bg: $white !default; 1131 | $carousel-indicator-transition: opacity 0.6s ease !default; 1132 | 1133 | $carousel-caption-width: 70% !default; 1134 | $carousel-caption-color: $white !default; 1135 | 1136 | $carousel-control-icon-width: 20px !default; 1137 | 1138 | $carousel-control-prev-icon-bg: str-replace( 1139 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), 1140 | '#', 1141 | '%23' 1142 | ) !default; 1143 | $carousel-control-next-icon-bg: str-replace( 1144 | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), 1145 | '#', 1146 | '%23' 1147 | ) !default; 1148 | 1149 | $carousel-transition-duration: 0.6s !default; 1150 | $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) 1151 | 1152 | // Spinners 1153 | 1154 | $spinner-width: 2rem !default; 1155 | $spinner-height: $spinner-width !default; 1156 | $spinner-border-width: 0.25em !default; 1157 | 1158 | $spinner-width-sm: 1rem !default; 1159 | $spinner-height-sm: $spinner-width-sm !default; 1160 | $spinner-border-width-sm: 0.2em !default; 1161 | 1162 | // Close 1163 | 1164 | $close-font-size: $font-size-base * 1.5 !default; 1165 | $close-font-weight: $font-weight-bold !default; 1166 | $close-color: $black !default; 1167 | $close-text-shadow: 0 1px 0 $white !default; 1168 | 1169 | // Code 1170 | 1171 | $code-font-size: 87.5% !default; 1172 | $code-color: $pink !default; 1173 | 1174 | $kbd-padding-y: 0.2rem !default; 1175 | $kbd-padding-x: 0.4rem !default; 1176 | $kbd-font-size: $code-font-size !default; 1177 | $kbd-color: $white !default; 1178 | $kbd-bg: $gray-900 !default; 1179 | 1180 | $pre-color: $gray-900 !default; 1181 | $pre-scrollable-max-height: 340px !default; 1182 | 1183 | // Utilities 1184 | 1185 | $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, 1186 | inline-flex !default; 1187 | $overflows: auto, hidden !default; 1188 | $positions: static, relative, absolute, fixed, sticky !default; 1189 | 1190 | // Printing 1191 | 1192 | $print-page-size: a3 !default; 1193 | $print-body-min-width: map-get($grid-breakpoints, 'lg') !default; 1194 | -------------------------------------------------------------------------------- /scss/honoka/_variables_nico.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | // Variables 3 | // 4 | // Variables should follow the `$component-state-property-size` formula for 5 | // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. 6 | 7 | // 8 | // Color system 9 | // 10 | 11 | $blue: #007bff; 12 | $indigo: #6610f2; 13 | $purple: #6f42c1; 14 | $pink: #ff92cb; 15 | $pink-dark: #ff50ac; 16 | $red: #dc3545; 17 | $orange: #fd7e14; 18 | $yellow: #ffc107; 19 | $green: #28a745; 20 | $teal: #20c997; 21 | $cyan: #17a2b8; 22 | 23 | $colors: (); 24 | // stylelint-disable-next-line scss/dollar-variable-default 25 | $colors: map-merge( 26 | ( 27 | 'blue': $blue, 28 | 'indigo': $indigo, 29 | 'purple': $purple, 30 | 'pink': $pink, 31 | 'pink-dark': $pink-dark, 32 | 'red': $red, 33 | 'orange': $orange, 34 | 'yellow': $yellow, 35 | 'green': $green, 36 | 'teal': $teal, 37 | 'cyan': $cyan, 38 | 'white': $white, 39 | 'gray': $gray-600, 40 | 'gray-dark': $gray-800, 41 | ), 42 | $colors 43 | ); 44 | 45 | $primary: $pink; 46 | $secondary: lighten($pink, 8%); 47 | $success: $green; 48 | $info: $cyan; 49 | $warning: $yellow; 50 | $danger: $red; 51 | $light: $gray-100; 52 | $dark: $pink-dark; 53 | 54 | $theme-colors: (); 55 | // stylelint-disable-next-line scss/dollar-variable-default 56 | $theme-colors: map-merge( 57 | ( 58 | 'primary': $primary, 59 | 'secondary': $secondary, 60 | 'success': $success, 61 | 'info': $info, 62 | 'warning': $warning, 63 | 'danger': $danger, 64 | 'light': $light, 65 | 'dark': $dark, 66 | ), 67 | $theme-colors 68 | ); 69 | 70 | $link-color: color('blue'); 71 | $link-decoration: none; 72 | $link-hover-color: darken($link-color, 15%); 73 | $link-hover-decoration: underline; 74 | 75 | // Navs 76 | 77 | $navbar-dark-color: rgba($white, 0.75); 78 | $navbar-dark-hover-color: rgba($white, 0.9); 79 | $navbar-dark-disabled-color: rgba($white, 0.5); 80 | 81 | $nav-pills-link-active-bg: $primary; 82 | 83 | // Pagination 84 | 85 | $pagination-active-bg: $primary; 86 | $pagination-active-border-color: $primary; 87 | 88 | // List group 89 | 90 | $list-group-active-bg: $primary; 91 | $list-group-active-border-color: $primary; 92 | 93 | // Progress 94 | 95 | $progress-bar-bg: $primary; 96 | --------------------------------------------------------------------------------