├── .editorconfig ├── .eslintrc ├── .gitignore ├── .gitmodules ├── .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 ├── assets │ ├── css │ │ └── example.css │ ├── img │ │ ├── bower-logo.png │ │ ├── brand-light.png │ │ ├── brand.png │ │ ├── circle.png │ │ ├── hatebu.svg │ │ ├── honoka.png │ │ ├── npm-logo.png │ │ ├── sample.png │ │ └── umi.png │ └── scss │ │ └── example.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 └── v3 │ ├── assets │ ├── css │ │ └── example.css │ ├── img │ │ ├── bower-logo.png │ │ ├── brand.png │ │ ├── circle.png │ │ ├── honoka.png │ │ ├── npm-logo.png │ │ └── sample.png │ └── scss │ │ └── example.scss │ ├── bootstrap-ja.html │ ├── bootstrap.html │ ├── css │ ├── bootstrap.css │ └── bootstrap.min.css │ ├── index.html │ └── js │ ├── bootstrap.js │ └── bootstrap.min.js ├── gulpfile.js ├── package-lock.json ├── package.json └── scss ├── bootstrap.scss └── honoka ├── _bootswatch.scss ├── _honoka.scss ├── _mixins.scss ├── _override.scss └── _variables.scss /.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 | "no-console": ["off"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.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/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/.gitmodules -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 ysakasin 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 | # Umi 2 | 3 | [![Build Status by Travis CI](https://travis-ci.org/ysakasin/Umi.svg?branch=master)](https://travis-ci.org/ysakasin/Umi) 4 | [![devDependency Status](https://david-dm.org/ysakasin/Umi/dev-status.svg)](https://david-dm.org/ysakasin/Umi#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-umi.svg)](https://www.npmjs.com/package/bootstrap-umi) 7 | 8 | [https://ysakasin.github.io/Umi/](https://ysakasin.github.io/Umi/) 9 | 10 | [![Umi](docs/assets/img/sample.png)](https://ysakasin.github.io/Umi/) 11 | 12 | "Umi" は "Honoka"を元にした日本語も美しく表示できるBootstrapテーマです。 13 | 14 | ## About "Umi" 15 | 16 | 通常の [Bootstrap](http://getbootstrap.com/) では、日本語の表示が最適であるとはいえません。 "Honoka" では Bootstrap をベースに、日本語表示に適したフォントの指定や、ウェイトに関するコードを追記した Bootstrap テーマです。 17 | 18 | "Umi"は"Honoka"にBootswatch Flatlyの配色を適応したテーマです。 19 | 20 | ## Live Demo 21 | 22 | * [https://ysakasin.github.io/Umi/bootstrap-ja.html](https://ysakasin.github.io/Umi/bootstrap-ja.html) (日本語レイアウト) 23 | * [https://ysakasin.github.io/Umi/bootstrap.html](https://ysakasin.github.io/Umi/bootstrap.html) (英語レイアウト) 24 | 25 | ## Getting Started 26 | 27 | ### Download 28 | 29 | [Releases](https://github.com/ysakasin/Umi/releases) ページから最新版をダウンロードしてください。 30 | 31 | ### npm 32 | 33 | Node.js のパッケージ管理システムである、 [npm](https://npmjs.com) で [公開されています](https://www.npmjs.com/package/bootstrap-honoka)。 [webpack](https://webpack.js.org/) など、npmを利用したmodule bundlerでご利用ください。 34 | 35 | ``` 36 | npm install --save bootstrap-umi 37 | ``` 38 | 39 | パッケージ名が「**bootstrap-**umi」であることに注意してください。 40 | 41 | ### Bower 42 | 43 | [Bower](http://bower.io/) からインストールすることができます。 44 | 45 | 最新版をインストールするには以下のコマンドを実行してください。 46 | 47 | ``` 48 | bower install --save-dev $(node -e "$(curl -fsSL https://cdn.honokak.osaka/last.js)" ysakasin Umi) 49 | ``` 50 | 51 | もしcURLが入っていない環境の場合には、 52 | 53 | ``` 54 | bower install --save-dev Umi#(version) 55 | ``` 56 | 57 | `(version)` には Umi のバージョン番号を指定します(ex. `Umi#4.0.0`)。 Umi の最新バージョン番号は [Releases](https://github.com/ysakasin/Umi/releases) ページから確認してください。 58 | 59 | ## Usage 60 | 61 | Umi は Bootstrap のテーマにしか過ぎないため、基本的な使い方は Bootstrap と変わりません。 Bootstrap のスタイルシートの読み込みを Umi のスタイルシートに置き換えることで動作します。また 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 | umi/ 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 of "Honoka" 93 | 94 | * windyakin ([@MITLicense](https://twitter.com/MITLicense)) 95 | 96 | ## Editor of "Umi" 97 | 98 | * 酒田　シンジ ([@ysakasin](https://twitter.com/ysakasin)) 99 | -------------------------------------------------------------------------------- /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": "Umi", 3 | "description": "Umi is one of the Bootstrap original 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": "ysakasin", 17 | "homepage": "https://ysakasin.github.io/Umi/", 18 | "repository": { 19 | "type": "git", 20 | "url": "git://github.com/ysakasin/Umi.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.0.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 | browsers: [ 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 | -------------------------------------------------------------------------------- /docs/assets/css/example.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url(https://fonts.googleapis.com/css?family=Montserrat); 3 | .btn { 4 | display: inline-block; 5 | font-weight: 400; 6 | text-align: center; 7 | white-space: nowrap; 8 | vertical-align: middle; 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | border: 1px solid transparent; 14 | padding: 0.375rem 0.75rem; 15 | font-size: 1rem; 16 | line-height: 1.5; 17 | border-radius: 0.25rem; 18 | transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 19 | } 20 | 21 | .btn:hover, .btn:focus { 22 | text-decoration: none; 23 | } 24 | 25 | .btn:focus, .btn.focus { 26 | outline: 0; 27 | box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25); 28 | } 29 | 30 | .btn.disabled, .btn:disabled { 31 | opacity: 0.65; 32 | } 33 | 34 | .btn:not(:disabled):not(.disabled) { 35 | cursor: pointer; 36 | } 37 | 38 | .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active { 39 | background-image: none; 40 | } 41 | 42 | a.btn.disabled, 43 | fieldset:disabled a.btn { 44 | pointer-events: none; 45 | } 46 | 47 | .btn-primary { 48 | color: #fff; 49 | background-color: #2C3E50; 50 | border-color: #2C3E50; 51 | } 52 | 53 | .btn-primary:hover { 54 | color: #fff; 55 | background-color: #1e2b37; 56 | border-color: #1a252f; 57 | } 58 | 59 | .btn-primary:focus, .btn-primary.focus { 60 | box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.5); 61 | } 62 | 63 | .btn-primary.disabled, .btn-primary:disabled { 64 | color: #fff; 65 | background-color: #2C3E50; 66 | border-color: #2C3E50; 67 | } 68 | 69 | .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, 70 | .show > .btn-primary.dropdown-toggle { 71 | color: #fff; 72 | background-color: #1a252f; 73 | border-color: #151e27; 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(44, 62, 80, 0.5); 79 | } 80 | 81 | .btn-secondary { 82 | color: #212529; 83 | background-color: #95a5a6; 84 | border-color: #95a5a6; 85 | } 86 | 87 | .btn-secondary:hover { 88 | color: #fff; 89 | background-color: #809395; 90 | border-color: #798d8f; 91 | } 92 | 93 | .btn-secondary:focus, .btn-secondary.focus { 94 | box-shadow: 0 0 0 0.2rem rgba(149, 165, 166, 0.5); 95 | } 96 | 97 | .btn-secondary.disabled, .btn-secondary:disabled { 98 | color: #212529; 99 | background-color: #95a5a6; 100 | border-color: #95a5a6; 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: #fff; 106 | background-color: #798d8f; 107 | border-color: #738789; 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(149, 165, 166, 0.5); 113 | } 114 | 115 | .btn-success { 116 | color: #fff; 117 | background-color: #18BC9C; 118 | border-color: #18BC9C; 119 | } 120 | 121 | .btn-success:hover { 122 | color: #fff; 123 | background-color: #149a80; 124 | border-color: #128f76; 125 | } 126 | 127 | .btn-success:focus, .btn-success.focus { 128 | box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, 0.5); 129 | } 130 | 131 | .btn-success.disabled, .btn-success:disabled { 132 | color: #fff; 133 | background-color: #18BC9C; 134 | border-color: #18BC9C; 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: #128f76; 141 | border-color: #11836d; 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(24, 188, 156, 0.5); 147 | } 148 | 149 | .btn-info { 150 | color: #fff; 151 | background-color: #3498DB; 152 | border-color: #3498DB; 153 | } 154 | 155 | .btn-info:hover { 156 | color: #fff; 157 | background-color: #2384c6; 158 | border-color: #217dbb; 159 | } 160 | 161 | .btn-info:focus, .btn-info.focus { 162 | box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); 163 | } 164 | 165 | .btn-info.disabled, .btn-info:disabled { 166 | color: #fff; 167 | background-color: #3498DB; 168 | border-color: #3498DB; 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: #217dbb; 175 | border-color: #1f76b0; 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(52, 152, 219, 0.5); 181 | } 182 | 183 | .btn-warning { 184 | color: #212529; 185 | background-color: #F39C12; 186 | border-color: #F39C12; 187 | } 188 | 189 | .btn-warning:hover { 190 | color: #fff; 191 | background-color: #d4860b; 192 | border-color: #c87f0a; 193 | } 194 | 195 | .btn-warning:focus, .btn-warning.focus { 196 | box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); 197 | } 198 | 199 | .btn-warning.disabled, .btn-warning:disabled { 200 | color: #212529; 201 | background-color: #F39C12; 202 | border-color: #F39C12; 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: #fff; 208 | background-color: #c87f0a; 209 | border-color: #bc770a; 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(243, 156, 18, 0.5); 215 | } 216 | 217 | .btn-danger { 218 | color: #fff; 219 | background-color: #E74C3C; 220 | border-color: #E74C3C; 221 | } 222 | 223 | .btn-danger:hover { 224 | color: #fff; 225 | background-color: #e12e1c; 226 | border-color: #d62c1a; 227 | } 228 | 229 | .btn-danger:focus, .btn-danger.focus { 230 | box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); 231 | } 232 | 233 | .btn-danger.disabled, .btn-danger:disabled { 234 | color: #fff; 235 | background-color: #E74C3C; 236 | border-color: #E74C3C; 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: #d62c1a; 243 | border-color: #ca2a19; 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(231, 76, 60, 0.5); 249 | } 250 | 251 | .btn-light { 252 | color: #212529; 253 | background-color: #ecf0f1; 254 | border-color: #ecf0f1; 255 | } 256 | 257 | .btn-light:hover { 258 | color: #212529; 259 | background-color: #d6dfe1; 260 | border-color: #cfd9db; 261 | } 262 | 263 | .btn-light:focus, .btn-light.focus { 264 | box-shadow: 0 0 0 0.2rem rgba(236, 240, 241, 0.5); 265 | } 266 | 267 | .btn-light.disabled, .btn-light:disabled { 268 | color: #212529; 269 | background-color: #ecf0f1; 270 | border-color: #ecf0f1; 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: #cfd9db; 277 | border-color: #c7d3d6; 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(236, 240, 241, 0.5); 283 | } 284 | 285 | .btn-dark { 286 | color: #fff; 287 | background-color: #7b8a8b; 288 | border-color: #7b8a8b; 289 | } 290 | 291 | .btn-dark:hover { 292 | color: #fff; 293 | background-color: #697677; 294 | border-color: #636f70; 295 | } 296 | 297 | .btn-dark:focus, .btn-dark.focus { 298 | box-shadow: 0 0 0 0.2rem rgba(123, 138, 139, 0.5); 299 | } 300 | 301 | .btn-dark.disabled, .btn-dark:disabled { 302 | color: #fff; 303 | background-color: #7b8a8b; 304 | border-color: #7b8a8b; 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: #636f70; 311 | border-color: #5d696a; 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(123, 138, 139, 0.5); 317 | } 318 | 319 | .btn-outline-primary { 320 | color: #2C3E50; 321 | background-color: transparent; 322 | background-image: none; 323 | border-color: #2C3E50; 324 | } 325 | 326 | .btn-outline-primary:hover { 327 | color: #fff; 328 | background-color: #2C3E50; 329 | border-color: #2C3E50; 330 | } 331 | 332 | .btn-outline-primary:focus, .btn-outline-primary.focus { 333 | box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.5); 334 | } 335 | 336 | .btn-outline-primary.disabled, .btn-outline-primary:disabled { 337 | color: #2C3E50; 338 | background-color: transparent; 339 | } 340 | 341 | .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, 342 | .show > .btn-outline-primary.dropdown-toggle { 343 | color: #fff; 344 | background-color: #2C3E50; 345 | border-color: #2C3E50; 346 | } 347 | 348 | .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, 349 | .show > .btn-outline-primary.dropdown-toggle:focus { 350 | box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.5); 351 | } 352 | 353 | .btn-outline-secondary { 354 | color: #95a5a6; 355 | background-color: transparent; 356 | background-image: none; 357 | border-color: #95a5a6; 358 | } 359 | 360 | .btn-outline-secondary:hover { 361 | color: #212529; 362 | background-color: #95a5a6; 363 | border-color: #95a5a6; 364 | } 365 | 366 | .btn-outline-secondary:focus, .btn-outline-secondary.focus { 367 | box-shadow: 0 0 0 0.2rem rgba(149, 165, 166, 0.5); 368 | } 369 | 370 | .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { 371 | color: #95a5a6; 372 | background-color: transparent; 373 | } 374 | 375 | .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, 376 | .show > .btn-outline-secondary.dropdown-toggle { 377 | color: #212529; 378 | background-color: #95a5a6; 379 | border-color: #95a5a6; 380 | } 381 | 382 | .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, 383 | .show > .btn-outline-secondary.dropdown-toggle:focus { 384 | box-shadow: 0 0 0 0.2rem rgba(149, 165, 166, 0.5); 385 | } 386 | 387 | .btn-outline-success { 388 | color: #18BC9C; 389 | background-color: transparent; 390 | background-image: none; 391 | border-color: #18BC9C; 392 | } 393 | 394 | .btn-outline-success:hover { 395 | color: #fff; 396 | background-color: #18BC9C; 397 | border-color: #18BC9C; 398 | } 399 | 400 | .btn-outline-success:focus, .btn-outline-success.focus { 401 | box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, 0.5); 402 | } 403 | 404 | .btn-outline-success.disabled, .btn-outline-success:disabled { 405 | color: #18BC9C; 406 | background-color: transparent; 407 | } 408 | 409 | .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, 410 | .show > .btn-outline-success.dropdown-toggle { 411 | color: #fff; 412 | background-color: #18BC9C; 413 | border-color: #18BC9C; 414 | } 415 | 416 | .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, 417 | .show > .btn-outline-success.dropdown-toggle:focus { 418 | box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, 0.5); 419 | } 420 | 421 | .btn-outline-info { 422 | color: #3498DB; 423 | background-color: transparent; 424 | background-image: none; 425 | border-color: #3498DB; 426 | } 427 | 428 | .btn-outline-info:hover { 429 | color: #fff; 430 | background-color: #3498DB; 431 | border-color: #3498DB; 432 | } 433 | 434 | .btn-outline-info:focus, .btn-outline-info.focus { 435 | box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); 436 | } 437 | 438 | .btn-outline-info.disabled, .btn-outline-info:disabled { 439 | color: #3498DB; 440 | background-color: transparent; 441 | } 442 | 443 | .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, 444 | .show > .btn-outline-info.dropdown-toggle { 445 | color: #fff; 446 | background-color: #3498DB; 447 | border-color: #3498DB; 448 | } 449 | 450 | .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, 451 | .show > .btn-outline-info.dropdown-toggle:focus { 452 | box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); 453 | } 454 | 455 | .btn-outline-warning { 456 | color: #F39C12; 457 | background-color: transparent; 458 | background-image: none; 459 | border-color: #F39C12; 460 | } 461 | 462 | .btn-outline-warning:hover { 463 | color: #212529; 464 | background-color: #F39C12; 465 | border-color: #F39C12; 466 | } 467 | 468 | .btn-outline-warning:focus, .btn-outline-warning.focus { 469 | box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); 470 | } 471 | 472 | .btn-outline-warning.disabled, .btn-outline-warning:disabled { 473 | color: #F39C12; 474 | background-color: transparent; 475 | } 476 | 477 | .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, 478 | .show > .btn-outline-warning.dropdown-toggle { 479 | color: #212529; 480 | background-color: #F39C12; 481 | border-color: #F39C12; 482 | } 483 | 484 | .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, 485 | .show > .btn-outline-warning.dropdown-toggle:focus { 486 | box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); 487 | } 488 | 489 | .btn-outline-danger { 490 | color: #E74C3C; 491 | background-color: transparent; 492 | background-image: none; 493 | border-color: #E74C3C; 494 | } 495 | 496 | .btn-outline-danger:hover { 497 | color: #fff; 498 | background-color: #E74C3C; 499 | border-color: #E74C3C; 500 | } 501 | 502 | .btn-outline-danger:focus, .btn-outline-danger.focus { 503 | box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); 504 | } 505 | 506 | .btn-outline-danger.disabled, .btn-outline-danger:disabled { 507 | color: #E74C3C; 508 | background-color: transparent; 509 | } 510 | 511 | .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, 512 | .show > .btn-outline-danger.dropdown-toggle { 513 | color: #fff; 514 | background-color: #E74C3C; 515 | border-color: #E74C3C; 516 | } 517 | 518 | .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, 519 | .show > .btn-outline-danger.dropdown-toggle:focus { 520 | box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); 521 | } 522 | 523 | .btn-outline-light { 524 | color: #ecf0f1; 525 | background-color: transparent; 526 | background-image: none; 527 | border-color: #ecf0f1; 528 | } 529 | 530 | .btn-outline-light:hover { 531 | color: #212529; 532 | background-color: #ecf0f1; 533 | border-color: #ecf0f1; 534 | } 535 | 536 | .btn-outline-light:focus, .btn-outline-light.focus { 537 | box-shadow: 0 0 0 0.2rem rgba(236, 240, 241, 0.5); 538 | } 539 | 540 | .btn-outline-light.disabled, .btn-outline-light:disabled { 541 | color: #ecf0f1; 542 | background-color: transparent; 543 | } 544 | 545 | .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, 546 | .show > .btn-outline-light.dropdown-toggle { 547 | color: #212529; 548 | background-color: #ecf0f1; 549 | border-color: #ecf0f1; 550 | } 551 | 552 | .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, 553 | .show > .btn-outline-light.dropdown-toggle:focus { 554 | box-shadow: 0 0 0 0.2rem rgba(236, 240, 241, 0.5); 555 | } 556 | 557 | .btn-outline-dark { 558 | color: #7b8a8b; 559 | background-color: transparent; 560 | background-image: none; 561 | border-color: #7b8a8b; 562 | } 563 | 564 | .btn-outline-dark:hover { 565 | color: #fff; 566 | background-color: #7b8a8b; 567 | border-color: #7b8a8b; 568 | } 569 | 570 | .btn-outline-dark:focus, .btn-outline-dark.focus { 571 | box-shadow: 0 0 0 0.2rem rgba(123, 138, 139, 0.5); 572 | } 573 | 574 | .btn-outline-dark.disabled, .btn-outline-dark:disabled { 575 | color: #7b8a8b; 576 | background-color: transparent; 577 | } 578 | 579 | .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, 580 | .show > .btn-outline-dark.dropdown-toggle { 581 | color: #fff; 582 | background-color: #7b8a8b; 583 | border-color: #7b8a8b; 584 | } 585 | 586 | .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, 587 | .show > .btn-outline-dark.dropdown-toggle:focus { 588 | box-shadow: 0 0 0 0.2rem rgba(123, 138, 139, 0.5); 589 | } 590 | 591 | .btn-link { 592 | font-weight: 400; 593 | color: #18BC9C; 594 | background-color: transparent; 595 | } 596 | 597 | .btn-link:hover { 598 | color: #0f7864; 599 | text-decoration: underline; 600 | background-color: transparent; 601 | border-color: transparent; 602 | } 603 | 604 | .btn-link:focus, .btn-link.focus { 605 | text-decoration: underline; 606 | border-color: transparent; 607 | box-shadow: none; 608 | } 609 | 610 | .btn-link:disabled, .btn-link.disabled { 611 | color: #95a5a6; 612 | } 613 | 614 | .btn-lg { 615 | padding: 0.5rem 1rem; 616 | font-size: 1.25rem; 617 | line-height: 1.5; 618 | border-radius: 0.3rem; 619 | } 620 | 621 | .btn-sm { 622 | padding: 0.25rem 0.5rem; 623 | font-size: 0.875rem; 624 | line-height: 1.5; 625 | border-radius: 0.2rem; 626 | } 627 | 628 | .btn-block { 629 | display: block; 630 | width: 100%; 631 | } 632 | 633 | .btn-block + .btn-block { 634 | margin-top: 0.5rem; 635 | } 636 | 637 | input[type="submit"].btn-block, 638 | input[type="reset"].btn-block, 639 | input[type="button"].btn-block { 640 | width: 100%; 641 | } 642 | 643 | .bg-primary .navbar-nav .active > .nav-link, 644 | .bg-primary .navbar-nav .nav-link:hover, 645 | .bg-primary .navbar-nav .nav-link:focus { 646 | color: #18BC9C !important; 647 | } 648 | 649 | .bg-primary .nav-item .nav-link::before { 650 | border-color: #18BC9C !important; 651 | } 652 | 653 | .bg-dark { 654 | background-color: #18BC9C !important; 655 | } 656 | 657 | .bg-dark.navbar-dark .navbar-nav .nav-link:focus, 658 | .bg-dark.navbar-dark .navbar-nav .nav-link:hover, 659 | .bg-dark.navbar-dark .navbar-nav .active > .nav-link { 660 | color: #2C3E50 !important; 661 | } 662 | 663 | .bg-dark.navbar-dark .navbar-nav .nav-item .nav-link::before { 664 | border-color: #2C3E50 !important; 665 | } 666 | 667 | .btn-secondary, .btn-secondary:hover, .btn-warning, .btn-warning:hover { 668 | color: #fff; 669 | } 670 | 671 | .btn-secondary.disabled, .btn-secondary:hover.disabled, .btn-warning.disabled, .btn-warning:hover.disabled { 672 | color: #fff; 673 | } 674 | 675 | .table .thead-dark th { 676 | background-color: #2C3E50; 677 | } 678 | 679 | .table-success, .table-info, .table-warning, .table-danger { 680 | color: #fff; 681 | } 682 | 683 | .table-success, .table-success > th, .table-success > td { 684 | background-color: #18BC9C; 685 | } 686 | 687 | .table-info, .table-info > th, .table-info > td { 688 | background-color: #3498DB; 689 | } 690 | 691 | .table-danger, .table-danger > th, .table-danger > td { 692 | background-color: #E74C3C; 693 | } 694 | 695 | .table-warning, .table-warning > th, .table-warning > td { 696 | background-color: #F39C12; 697 | } 698 | 699 | .table-hover .table-success:hover, .table-hover .table-success:hover > th, .table-hover .table-success:hover > td { 700 | background-color: #15a589; 701 | } 702 | 703 | .table-hover .table-info:hover, .table-hover .table-info:hover > th, .table-hover .table-info:hover > td { 704 | background-color: #258cd1; 705 | } 706 | 707 | .table-hover .table-danger:hover, .table-hover .table-danger:hover > th, .table-hover .table-danger:hover > td { 708 | background-color: #e43725; 709 | } 710 | 711 | .table-hover .table-warning:hover, .table-hover .table-warning:hover > th, .table-hover .table-warning:hover > td { 712 | background-color: #e08e0b; 713 | } 714 | 715 | .nav-tabs .nav-link.active, 716 | .nav-tabs .nav-link.active:focus, 717 | .nav-tabs .nav-link.active:hover, 718 | .nav-tabs .nav-item.open .nav-link, 719 | .nav-tabs .nav-item.open .nav-link:focus, 720 | .nav-tabs .nav-item.open .nav-link:hover { 721 | color: #2C3E50; 722 | } 723 | 724 | .pagination a:hover { 725 | text-decoration: none; 726 | } 727 | 728 | .close { 729 | text-decoration: none; 730 | opacity: 0.4; 731 | } 732 | 733 | .close:hover, .close:focus { 734 | opacity: 1; 735 | } 736 | 737 | .badge-secondary, .badge-warning { 738 | color: #fff; 739 | } 740 | 741 | .alert { 742 | border: none; 743 | color: #fff; 744 | } 745 | 746 | .alert a, 747 | .alert .alert-link { 748 | color: #fff; 749 | text-decoration: underline; 750 | } 751 | 752 | .alert-primary { 753 | background-color: #2C3E50; 754 | } 755 | 756 | .alert-secondary { 757 | background-color: #95a5a6; 758 | } 759 | 760 | .alert-success { 761 | background-color: #18BC9C; 762 | } 763 | 764 | .alert-info { 765 | background-color: #3498DB; 766 | } 767 | 768 | .alert-warning { 769 | background-color: #F39C12; 770 | } 771 | 772 | .alert-danger { 773 | background-color: #E74C3C; 774 | } 775 | 776 | .alert-light { 777 | background-color: #ecf0f1; 778 | } 779 | 780 | .alert-dark { 781 | background-color: #7b8a8b; 782 | } 783 | 784 | .alert-light, 785 | .alert-light a, 786 | .alert-light .alert-link { 787 | color: #212529; 788 | } 789 | 790 | .modal .close { 791 | color: #000; 792 | } 793 | 794 | .btn-honoka { 795 | color: #fff; 796 | background-color: #1490ff; 797 | border-color: #1490ff; 798 | color: #fff; 799 | } 800 | 801 | .btn-honoka:hover { 802 | color: #fff; 803 | background-color: #007ded; 804 | border-color: #0076e0; 805 | } 806 | 807 | .btn-honoka:focus, .btn-honoka.focus { 808 | box-shadow: 0 0 0 0.2rem rgba(20, 144, 255, 0.5); 809 | } 810 | 811 | .btn-honoka.disabled, .btn-honoka:disabled { 812 | color: #fff; 813 | background-color: #1490ff; 814 | border-color: #1490ff; 815 | } 816 | 817 | .btn-honoka:not(:disabled):not(.disabled):active, .btn-honoka:not(:disabled):not(.disabled).active, 818 | .show > .btn-honoka.dropdown-toggle { 819 | color: #fff; 820 | background-color: #0076e0; 821 | border-color: #006fd3; 822 | } 823 | 824 | .btn-honoka:not(:disabled):not(.disabled):active:focus, .btn-honoka:not(:disabled):not(.disabled).active:focus, 825 | .show > .btn-honoka.dropdown-toggle:focus { 826 | box-shadow: 0 0 0 0.2rem rgba(20, 144, 255, 0.5); 827 | } 828 | 829 | .btn-twitter { 830 | color: #212529; 831 | background-color: #55acee; 832 | border-color: #55acee; 833 | color: #fff; 834 | } 835 | 836 | .btn-twitter:hover { 837 | color: #fff; 838 | background-color: #329beb; 839 | border-color: #2795e9; 840 | } 841 | 842 | .btn-twitter:focus, .btn-twitter.focus { 843 | box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.5); 844 | } 845 | 846 | .btn-twitter.disabled, .btn-twitter:disabled { 847 | color: #212529; 848 | background-color: #55acee; 849 | border-color: #55acee; 850 | } 851 | 852 | .btn-twitter:not(:disabled):not(.disabled):active, .btn-twitter:not(:disabled):not(.disabled).active, 853 | .show > .btn-twitter.dropdown-toggle { 854 | color: #fff; 855 | background-color: #2795e9; 856 | border-color: #1b90e8; 857 | } 858 | 859 | .btn-twitter:not(:disabled):not(.disabled):active:focus, .btn-twitter:not(:disabled):not(.disabled).active:focus, 860 | .show > .btn-twitter.dropdown-toggle:focus { 861 | box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.5); 862 | } 863 | 864 | .btn-facebook { 865 | color: #fff; 866 | background-color: #3b5998; 867 | border-color: #3b5998; 868 | color: #fff; 869 | } 870 | 871 | .btn-facebook:hover { 872 | color: #fff; 873 | background-color: #30497c; 874 | border-color: #2d4373; 875 | } 876 | 877 | .btn-facebook:focus, .btn-facebook.focus { 878 | box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.5); 879 | } 880 | 881 | .btn-facebook.disabled, .btn-facebook:disabled { 882 | color: #fff; 883 | background-color: #3b5998; 884 | border-color: #3b5998; 885 | } 886 | 887 | .btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active, 888 | .show > .btn-facebook.dropdown-toggle { 889 | color: #fff; 890 | background-color: #2d4373; 891 | border-color: #293e6a; 892 | } 893 | 894 | .btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus, 895 | .show > .btn-facebook.dropdown-toggle:focus { 896 | box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.5); 897 | } 898 | 899 | .btn-hatena { 900 | color: #fff; 901 | background-color: #178fde; 902 | border-color: #178fde; 903 | color: #fff; 904 | } 905 | 906 | .btn-hatena:hover { 907 | color: #fff; 908 | background-color: #1379bb; 909 | border-color: #1271b0; 910 | } 911 | 912 | .btn-hatena:focus, .btn-hatena.focus { 913 | box-shadow: 0 0 0 0.2rem rgba(23, 143, 222, 0.5); 914 | } 915 | 916 | .btn-hatena.disabled, .btn-hatena:disabled { 917 | color: #fff; 918 | background-color: #178fde; 919 | border-color: #178fde; 920 | } 921 | 922 | .btn-hatena:not(:disabled):not(.disabled):active, .btn-hatena:not(:disabled):not(.disabled).active, 923 | .show > .btn-hatena.dropdown-toggle { 924 | color: #fff; 925 | background-color: #1271b0; 926 | border-color: #116aa4; 927 | } 928 | 929 | .btn-hatena:not(:disabled):not(.disabled):active:focus, .btn-hatena:not(:disabled):not(.disabled).active:focus, 930 | .show > .btn-hatena.dropdown-toggle:focus { 931 | box-shadow: 0 0 0 0.2rem rgba(23, 143, 222, 0.5); 932 | } 933 | 934 | .btn-twitter .fa.fa-lg, 935 | .btn-facebook .fa.fa-lg, 936 | .btn-hatena .fa.fa-lg { 937 | vertical-align: -1px; 938 | } 939 | 940 | .icon.icon-hatebu::before { 941 | display: inline-block; 942 | width: 1.5rem; 943 | height: 1.1rem; 944 | content: ""; 945 | background-image: url("../img/hatebu.svg"); 946 | background-size: 100% 100%; 947 | } 948 | 949 | .social-button { 950 | position: relative; 951 | padding: get-maps((0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem), 2) 0; 952 | margin: 0 auto; 953 | overflow: hidden; 954 | } 955 | 956 | .social-button > ul { 957 | position: relative; 958 | left: 50%; 959 | float: left; 960 | padding: 0; 961 | margin: 0; 962 | list-style: outside none none; 963 | } 964 | 965 | .social-button > ul > li { 966 | position: relative; 967 | left: -50%; 968 | float: left; 969 | padding: 0; 970 | margin: 0 10px; 971 | } 972 | 973 | .social-button > ul > li .fb-like > span { 974 | vertical-align: 0 !important; 975 | } 976 | 977 | .social { 978 | padding: 1rem 0; 979 | background: #ecf0f1; 980 | } 981 | 982 | .bg-primary .navbar-nav .active > .nav-link, 983 | .bg-primary .navbar-nav .nav-link:hover, 984 | .bg-primary .navbar-nav .nav-link:focus { 985 | color: #add8ff !important; 986 | } 987 | 988 | .bg-primary .nav-item .nav-link::before { 989 | border-color: #add8ff !important; 990 | } 991 | 992 | .jumbotron.special { 993 | position: relative; 994 | min-height: 530px; 995 | margin-bottom: 0; 996 | overflow: hidden; 997 | background-color: #add8ff; 998 | background-image: url("../img/circle.png"); 999 | background-repeat: no-repeat; 1000 | background-position: -35% center; 1001 | background-size: 70%; 1002 | } 1003 | 1004 | .jumbotron.special .honoka { 1005 | position: absolute; 1006 | bottom: -5rem; 1007 | left: 0; 1008 | width: 390px; 1009 | height: 530px; 1010 | background-image: url("../img/umi.png"); 1011 | background-repeat: no-repeat; 1012 | } 1013 | 1014 | .jumbotron.special .outline { 1015 | position: relative; 1016 | } 1017 | 1018 | .jumbotron.special .copy { 1019 | font-weight: 600; 1020 | } 1021 | 1022 | @media (max-width: 767.98px) { 1023 | .jumbotron.special .copy { 1024 | font-size: 2.5rem; 1025 | } 1026 | } 1027 | 1028 | .jumbotron.special .download { 1029 | margin: 1rem auto 0.5rem; 1030 | } 1031 | 1032 | .jumbotron.special .basedon { 1033 | margin: 0.5rem auto; 1034 | color: #7b8a8b; 1035 | } 1036 | 1037 | .section { 1038 | padding: 10rem 0; 1039 | } 1040 | 1041 | .section.section-default { 1042 | background-color: #fff; 1043 | } 1044 | 1045 | .section.section-inverse { 1046 | background-color: #e0f0ff; 1047 | } 1048 | 1049 | .section .subtitle { 1050 | margin-bottom: 1rem; 1051 | text-align: center; 1052 | } 1053 | 1054 | .section .subtitle h2 { 1055 | margin-top: 0; 1056 | } 1057 | 1058 | .point .point-box { 1059 | text-align: center; 1060 | } 1061 | 1062 | .point .point-box .point-circle { 1063 | width: 100px; 1064 | height: 100px; 1065 | margin: 0 auto; 1066 | font-size: 60px; 1067 | line-height: 100px; 1068 | color: #fff; 1069 | border-radius: 100%; 1070 | } 1071 | 1072 | .point .point-box .point-circle.start { 1073 | background-color: #18BC9C; 1074 | } 1075 | 1076 | .point .point-box .point-circle.replace { 1077 | background-color: #F39C12; 1078 | } 1079 | 1080 | .point .point-box .point-circle.compass { 1081 | background-color: #2C3E50; 1082 | } 1083 | 1084 | .point .point-box .point-circle.japanese { 1085 | background-color: #E74C3C; 1086 | } 1087 | 1088 | .point .point-box .point-description h4 { 1089 | margin-top: 1rem; 1090 | text-align: center; 1091 | } 1092 | 1093 | .point .point-box .point-description p { 1094 | text-align: justify; 1095 | } 1096 | 1097 | .icon-jp::before { 1098 | font-weight: 700; 1099 | content: "あ"; 1100 | } 1101 | 1102 | .getting-started h3 { 1103 | margin-top: 0; 1104 | } 1105 | 1106 | .japanese-font .well > h3 { 1107 | margin-top: 1rem; 1108 | } 1109 | 1110 | h3 .package-system-logo { 1111 | width: auto; 1112 | height: 3.5rem; 1113 | font-size: 3.5rem; 1114 | line-height: 3.5rem; 1115 | } 1116 | 1117 | .featured .subtitle h2 { 1118 | font-size: 1.75rem; 1119 | } 1120 | 1121 | .featured .featured-list a { 1122 | opacity: .7; 1123 | transition: opacity .2s; 1124 | } 1125 | 1126 | .featured .featured-list a:hover, .featured .featured-list a:active, .featured .featured-list a:focus { 1127 | opacity: .5; 1128 | } 1129 | 1130 | .featured .featured-list li { 1131 | padding: 1rem 1rem; 1132 | } 1133 | 1134 | .card > a { 1135 | transition: opacity .2s; 1136 | } 1137 | 1138 | .card > a:hover, .card > a:active, .card > a:focus { 1139 | opacity: .7; 1140 | } 1141 | 1142 | footer { 1143 | padding: 4rem 0; 1144 | color: #ecf0f1; 1145 | background-color: #343a40; 1146 | } 1147 | 1148 | footer .copyright { 1149 | padding-top: 1rem; 1150 | padding-bottom: 1rem; 1151 | } 1152 | 1153 | /*# sourceMappingURL=example.css.map */ -------------------------------------------------------------------------------- /docs/assets/img/bower-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/assets/img/bower-logo.png -------------------------------------------------------------------------------- /docs/assets/img/brand-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/assets/img/brand-light.png -------------------------------------------------------------------------------- /docs/assets/img/brand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/assets/img/brand.png -------------------------------------------------------------------------------- /docs/assets/img/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/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/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/assets/img/honoka.png -------------------------------------------------------------------------------- /docs/assets/img/npm-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/assets/img/npm-logo.png -------------------------------------------------------------------------------- /docs/assets/img/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/assets/img/sample.png -------------------------------------------------------------------------------- /docs/assets/img/umi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/assets/img/umi.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 "bootstrap/scss/mixins"; 7 | @import "bootstrap/scss/buttons"; 8 | @import "honoka/bootswatch"; 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: #1490ff; 16 | $brand-twitter: #55acee; 17 | $brand-facebook: #3b5998; 18 | $brand-hatena: #178fde; 19 | 20 | $brand-colors: (); 21 | $brand-colors: map-merge(( 22 | "honoka": $brand-honoka, 23 | "twitter": $brand-twitter, 24 | "facebook": $brand-facebook, 25 | "hatena": $brand-hatena 26 | ), $brand-colors); 27 | // stylelint-enable 28 | 29 | @each $color, $value in $brand-colors { 30 | .btn-#{$color} { 31 | @include button-variant($value, $value); 32 | color: #fff; 33 | } 34 | } 35 | 36 | .btn-twitter, 37 | .btn-facebook, 38 | .btn-hatena { 39 | .fa.fa-lg { 40 | vertical-align: -1px; 41 | } 42 | } 43 | 44 | .icon.icon-hatebu::before { 45 | display: inline-block; 46 | width: 1.5rem; 47 | height: 1.1rem; 48 | content: ""; 49 | background-image: url("../img/hatebu.svg"); 50 | background-size: 100% 100%; 51 | } 52 | 53 | .social-button { 54 | position: relative; 55 | padding: get-maps($spacers, 2) 0; 56 | margin: 0 auto; 57 | overflow: hidden; 58 | > ul { 59 | position: relative; 60 | left: 50%; 61 | float: left; 62 | padding: 0; 63 | margin: 0; 64 | list-style: outside none none; 65 | > li { 66 | position: relative; 67 | left: -50%; 68 | float: left; 69 | padding: 0; 70 | margin: 0 10px; 71 | .fb-like > span { 72 | vertical-align: 0 !important; 73 | } 74 | } 75 | } 76 | } 77 | 78 | .social { 79 | padding: $spacer 0; 80 | background: $gray-200; 81 | } 82 | 83 | .bg-primary { 84 | .navbar-nav { 85 | .active > .nav-link, 86 | .nav-link:hover, 87 | .nav-link:focus { 88 | color: lighten($brand-honoka, 30%) !important; 89 | } 90 | } 91 | .nav-item .nav-link::before { 92 | border-color: lighten($brand-honoka, 30%) !important; 93 | } 94 | } 95 | 96 | .jumbotron.special { 97 | position: relative; 98 | min-height: 530px; 99 | margin-bottom: 0; 100 | overflow: hidden; 101 | background-color: lighten($brand-honoka, 30%); 102 | background-image: url("../img/circle.png"); 103 | background-repeat: no-repeat; 104 | background-position: -35% center; 105 | background-size: 70%; 106 | .honoka { 107 | position: absolute; 108 | bottom: -1 * ($jumbotron-padding * 2 + $spacer); 109 | left: 0; 110 | width: 390px; 111 | height: 530px; 112 | background-image: url("../img/umi.png"); 113 | background-repeat: no-repeat; 114 | } 115 | .outline { 116 | position: relative; 117 | } 118 | .copy { 119 | font-weight: $font-weight-bold; 120 | @include media-breakpoint-down(sm) { 121 | font-size: $h1-font-size; 122 | } 123 | } 124 | .download { 125 | margin: map-get($spacers, 3) auto map-get($spacers, 2); 126 | } 127 | .basedon { 128 | margin: map-get($spacers, 2) auto; 129 | color: $gray-700; 130 | } 131 | } 132 | 133 | .section { 134 | padding: ($spacer * 10) 0; 135 | &.section-default { 136 | background-color: $body-bg; 137 | } 138 | &.section-inverse { 139 | background-color: lighten($brand-honoka, 40%); 140 | } 141 | .subtitle { 142 | margin-bottom: $spacer; 143 | text-align: center; 144 | h2 { 145 | margin-top: 0; 146 | } 147 | } 148 | } 149 | 150 | .point { 151 | .point-box { 152 | text-align: center; 153 | .point-circle { 154 | $point-circle-size: 100px; 155 | width: $point-circle-size; 156 | height: $point-circle-size; 157 | margin: 0 auto; 158 | font-size: $point-circle-size * .6; 159 | line-height: $point-circle-size; 160 | color: #fff; 161 | border-radius: 100%; 162 | &.start { 163 | background-color: $success; 164 | } 165 | &.replace { 166 | background-color: $warning; 167 | } 168 | &.compass { 169 | background-color: $primary; 170 | } 171 | &.japanese { 172 | background-color: $danger; 173 | } 174 | } 175 | .point-description { 176 | h4 { 177 | margin-top: $spacer; 178 | text-align: center; 179 | } 180 | p { 181 | text-align: justify; 182 | } 183 | } 184 | } 185 | } 186 | 187 | .icon-jp::before { 188 | font-weight: 700; 189 | content: "あ"; 190 | } 191 | 192 | .getting-started { 193 | h3 { 194 | margin-top: 0; 195 | } 196 | } 197 | 198 | .japanese-font { 199 | .well { 200 | > h3 { 201 | margin-top: $spacer; 202 | } 203 | } 204 | } 205 | 206 | h3 .package-system-logo { 207 | width: auto; 208 | height: $h3-font-size * 2; 209 | font-size: $h3-font-size * 2; 210 | line-height: $h3-font-size * 2; 211 | } 212 | 213 | .featured { 214 | .subtitle { 215 | h2 { 216 | font-size: $h3-font-size; 217 | } 218 | } 219 | .featured-list { 220 | a { 221 | opacity: .7; 222 | transition: opacity .2s; 223 | &:hover, 224 | &:active, 225 | &:focus { 226 | opacity: .5; 227 | } 228 | } 229 | li { 230 | padding: $spacer $spacer; 231 | } 232 | } 233 | } 234 | 235 | .card { 236 | > a { 237 | transition: opacity .2s; 238 | &:hover, 239 | &:active, 240 | &:focus { 241 | opacity: .7; 242 | } 243 | } 244 | } 245 | 246 | footer { 247 | padding: $spacer * 4 0; 248 | color: $gray-200; 249 | background-color: $gray-800; 250 | .copyright { 251 | padding-top: $spacer; 252 | padding-bottom: $spacer; 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Umi - 日本語も美しく表示できるBootstrapテーマ 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 71 |
72 | 73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | その Bootstrap は､
82 | 日本語も美しく
83 | 表示されてますか？ 84 |
85 |

Umi は Honoka を元にした日本語も美しく表示できる Bootstrap テーマです

86 |
87 | 92 |
93 | Last version v ・ Based on Bootstrap v 94 |
95 |
96 |
97 |
98 |
99 | 100 | 110 | 111 |
112 |
113 |
114 |
115 |

Umi は Honoka をフォークしたBootstrapテーマです

116 |

Honoka に Bootswatch Flatly の配色を適用しました。

117 |

Umi と Honoka は、以下の特徴を持っています。

118 |
119 |
120 |
121 |
122 |
123 | 124 |
125 |
126 |

Easy to Start

127 |

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

128 |
129 |
130 |
131 |
132 | 133 |
134 |
135 |

Replace Bootstrap

136 |

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

137 |
138 |
139 |
140 |
141 | 142 |
143 |
144 |

Open Source

145 |

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

146 |
147 |
148 |
149 |
150 | 151 |
152 |
153 |

Optimized Japanese

154 |

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

155 |
156 |
157 |
158 |
159 |
160 | 161 |
162 |
163 |
164 |
165 |

さあ、はじめましょう。

166 |

導入はとっても簡単です

167 |
168 |
169 |
170 |
171 |
172 | Download from GitHub 173 |

Last version v ・ MIT License

174 |
175 |
176 |
177 |
178 |
179 |

180 |
181 | 182 | 183 | 184 | 185 |
186 |
npmjs.com / v4.0.0 以降から対応
187 |
188 |
189 |

Bower

190 |
191 | 193 | 194 | 195 | 196 |
197 |
v3.3.6-1 以降から対応
198 |
199 |
200 |
201 |
202 |

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

203 |
204 |
205 |
206 |
207 | 208 |
209 |
210 |
211 |
212 |

Available on Framework!

213 |

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

214 |
215 |
216 |
217 |
218 |

219 |
220 | 221 | 222 | 223 | 224 |
225 |
npmjs.com / v3.3.7-a 以降から対応
226 |
227 |
228 |

Bower

229 |
230 | 232 | 233 | 234 | 235 |
236 |
v3.3.5-c 以降から対応
237 |
238 |
239 |
240 |
241 | 242 |
243 |
244 |
245 |
246 |

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

247 |

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

248 |
249 |
250 |
251 |
252 |
253 | 254 |
255 |
Proconist.net
256 |
257 |
258 |
259 |
260 |
261 | 262 |
263 |
この高専がすごい！
264 |
265 |
266 |
267 |
268 |
269 | 270 |
271 |
yashihei.net
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 | 280 |
281 |
SYSKEN Advent Calendar
282 |
283 |
284 |
285 |
286 |
287 | 288 |
289 |
TIMERS Inc
290 |
291 |
292 |
293 |
294 |
295 | 296 |
297 |
PROCON O.S.T. Project
298 |
299 |
300 |
301 |
302 |
303 |
304 | 305 |
306 |
307 |
308 |
309 |

HonokaのForkテーマ

310 |

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

311 |
312 |
313 |
314 |
315 |
316 | 317 |
318 |

Umi

319 |

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

320 | 324 |
325 |
326 |
327 |
328 |
329 | 330 |
331 |

Nico

332 |

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

333 | 337 |
338 |
339 |
340 |
341 |
342 | 343 |
344 |

Rin

345 |

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

346 | 350 |
351 |
352 |
353 |
354 |
355 |
356 | 357 |
358 |
359 |
360 |
361 |

Honoka has been featured on

362 |
363 |
364 |
365 |
366 |
    367 |
  • MOONGIFT
    • 368 |
  • コリス
    • 369 |
  • Stocker.jp / diary
    • 370 |
371 |
372 |
373 |
374 |
375 | 376 | 377 | 394 | 395 | 405 | 406 | 407 | 408 | 409 | 431 | 432 |
433 | 434 | 435 | 436 | 437 | -------------------------------------------------------------------------------- /docs/v3/assets/css/example.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url(https://fonts.googleapis.com/css?family=Montserrat); 3 | .btn-twitter .fa.fa-lg, .btn-facebook .fa.fa-lg { 4 | margin-right: 2px; 5 | vertical-align: -1px; 6 | } 7 | 8 | .btn-twitter { 9 | color: #fff; 10 | background-color: #55acee; 11 | border-color: #4ca7ed; 12 | -webkit-transition-timing-function: ease; 13 | -o-transition-timing-function: ease; 14 | transition-timing-function: ease; 15 | -webkit-transition-duration: .3s; 16 | -o-transition-duration: .3s; 17 | transition-duration: .3s; 18 | -webkit-transition-property: all; 19 | -o-transition-property: all; 20 | transition-property: all; 21 | } 22 | .btn-twitter:focus, .btn-twitter.focus { 23 | color: #fff; 24 | background-color: #2795e9; 25 | border-color: #1167a8; 26 | } 27 | .btn-twitter:hover { 28 | color: #fff; 29 | background-color: #2795e9; 30 | border-color: #178ce5; 31 | } 32 | .btn-twitter:active, .btn-twitter.active, .open > .btn-twitter.dropdown-toggle { 33 | color: #fff; 34 | background-color: #3ea1ec; 35 | border-color: #309aea; 36 | } 37 | .btn-twitter:active:hover, .btn-twitter:active:focus, .btn-twitter:active.focus, .btn-twitter.active:hover, .btn-twitter.active:focus, .btn-twitter.active.focus, .open > .btn-twitter.dropdown-toggle:hover, .open > .btn-twitter.dropdown-toggle:focus, .open > .btn-twitter.dropdown-toggle.focus { 38 | color: #fff; 39 | background-color: #1583d7; 40 | border-color: #1167a8; 41 | } 42 | .btn-twitter:active, .btn-twitter.active, .open > .btn-twitter.dropdown-toggle { 43 | background-image: none; 44 | } 45 | .btn-twitter.disabled, .btn-twitter.disabled:hover, .btn-twitter.disabled:focus, .btn-twitter.disabled.focus, .btn-twitter.disabled:active, .btn-twitter.disabled.active, .btn-twitter[disabled], .btn-twitter[disabled]:hover, .btn-twitter[disabled]:focus, .btn-twitter[disabled].focus, .btn-twitter[disabled]:active, .btn-twitter[disabled].active, fieldset[disabled] .btn-twitter, fieldset[disabled] .btn-twitter:hover, fieldset[disabled] .btn-twitter:focus, fieldset[disabled] .btn-twitter.focus, fieldset[disabled] .btn-twitter:active, fieldset[disabled] .btn-twitter.active { 46 | background-color: #55acee; 47 | border-color: #4ca7ed; 48 | } 49 | .btn-twitter .badge { 50 | color: #55acee; 51 | background-color: #fff; 52 | } 53 | 54 | .btn-facebook { 55 | color: #fff; 56 | background-color: #3b5998; 57 | border-color: #385591; 58 | -webkit-transition-timing-function: ease; 59 | -o-transition-timing-function: ease; 60 | transition-timing-function: ease; 61 | -webkit-transition-duration: .3s; 62 | -o-transition-duration: .3s; 63 | transition-duration: .3s; 64 | -webkit-transition-property: all; 65 | -o-transition-property: all; 66 | transition-property: all; 67 | } 68 | .btn-facebook:focus, .btn-facebook.focus { 69 | color: #fff; 70 | background-color: #2d4373; 71 | border-color: #141f35; 72 | } 73 | .btn-facebook:hover { 74 | color: #fff; 75 | background-color: #2d4373; 76 | border-color: #273b65; 77 | } 78 | .btn-facebook:active, .btn-facebook.active, .open > .btn-facebook.dropdown-toggle { 79 | color: #fff; 80 | background-color: #344e86; 81 | border-color: #30487b; 82 | } 83 | .btn-facebook:active:hover, .btn-facebook:active:focus, .btn-facebook:active.focus, .btn-facebook.active:hover, .btn-facebook.active:focus, .btn-facebook.active.focus, .open > .btn-facebook.dropdown-toggle:hover, .open > .btn-facebook.dropdown-toggle:focus, .open > .btn-facebook.dropdown-toggle.focus { 84 | color: #fff; 85 | background-color: #23345a; 86 | border-color: #141f35; 87 | } 88 | .btn-facebook:active, .btn-facebook.active, .open > .btn-facebook.dropdown-toggle { 89 | background-image: none; 90 | } 91 | .btn-facebook.disabled, .btn-facebook.disabled:hover, .btn-facebook.disabled:focus, .btn-facebook.disabled.focus, .btn-facebook.disabled:active, .btn-facebook.disabled.active, .btn-facebook[disabled], .btn-facebook[disabled]:hover, .btn-facebook[disabled]:focus, .btn-facebook[disabled].focus, .btn-facebook[disabled]:active, .btn-facebook[disabled].active, fieldset[disabled] .btn-facebook, fieldset[disabled] .btn-facebook:hover, fieldset[disabled] .btn-facebook:focus, fieldset[disabled] .btn-facebook.focus, fieldset[disabled] .btn-facebook:active, fieldset[disabled] .btn-facebook.active { 92 | background-color: #3b5998; 93 | border-color: #385591; 94 | } 95 | .btn-facebook .badge { 96 | color: #3b5998; 97 | background-color: #fff; 98 | } 99 | 100 | .btn-hatebu { 101 | color: #fff; 102 | background-color: #178fde; 103 | border-color: #1689d5; 104 | -webkit-transition-timing-function: ease; 105 | -o-transition-timing-function: ease; 106 | transition-timing-function: ease; 107 | -webkit-transition-duration: .3s; 108 | -o-transition-duration: .3s; 109 | transition-duration: .3s; 110 | -webkit-transition-property: all; 111 | -o-transition-property: all; 112 | transition-property: all; 113 | } 114 | .btn-hatebu:focus, .btn-hatebu.focus { 115 | color: #fff; 116 | background-color: #1271b0; 117 | border-color: #0a3f61; 118 | } 119 | .btn-hatebu:hover { 120 | color: #fff; 121 | background-color: #1271b0; 122 | border-color: #10659d; 123 | } 124 | .btn-hatebu:active, .btn-hatebu.active, .open > .btn-hatebu.dropdown-toggle { 125 | color: #fff; 126 | background-color: #1580c7; 127 | border-color: #1377b9; 128 | } 129 | .btn-hatebu:active:hover, .btn-hatebu:active:focus, .btn-hatebu:active.focus, .btn-hatebu.active:hover, .btn-hatebu.active:focus, .btn-hatebu.active.focus, .open > .btn-hatebu.dropdown-toggle:hover, .open > .btn-hatebu.dropdown-toggle:focus, .open > .btn-hatebu.dropdown-toggle.focus { 130 | color: #fff; 131 | background-color: #0f5c8f; 132 | border-color: #0a3f61; 133 | } 134 | .btn-hatebu:active, .btn-hatebu.active, .open > .btn-hatebu.dropdown-toggle { 135 | background-image: none; 136 | } 137 | .btn-hatebu.disabled, .btn-hatebu.disabled:hover, .btn-hatebu.disabled:focus, .btn-hatebu.disabled.focus, .btn-hatebu.disabled:active, .btn-hatebu.disabled.active, .btn-hatebu[disabled], .btn-hatebu[disabled]:hover, .btn-hatebu[disabled]:focus, .btn-hatebu[disabled].focus, .btn-hatebu[disabled]:active, .btn-hatebu[disabled].active, fieldset[disabled] .btn-hatebu, fieldset[disabled] .btn-hatebu:hover, fieldset[disabled] .btn-hatebu:focus, fieldset[disabled] .btn-hatebu.focus, fieldset[disabled] .btn-hatebu:active, fieldset[disabled] .btn-hatebu.active { 138 | background-color: #178fde; 139 | border-color: #1689d5; 140 | } 141 | .btn-hatebu .badge { 142 | color: #178fde; 143 | background-color: #fff; 144 | } 145 | 146 | .fa.fa-hatebu::before { 147 | font-family: Verdana; 148 | font-weight: bold; 149 | content: "B!"; 150 | } 151 | 152 | body { 153 | margin-top: 80px; 154 | } 155 | 156 | .v4-dev a { 157 | display: block; 158 | padding: 10px; 159 | font-weight: bold; 160 | color: #fff; 161 | text-align: center; 162 | text-decoration: none; 163 | background-color: #2196f3; 164 | } 165 | .v4-dev a:hover, .v4-dev a:active, .v4-dev a:focus { 166 | background-color: #0c7cd5; 167 | } 168 | 169 | .social-button { 170 | position: relative; 171 | padding: 10px 0; 172 | margin: 0 auto !important; 173 | overflow: hidden; 174 | } 175 | .social-button > ul { 176 | position: relative; 177 | left: 50%; 178 | float: left; 179 | padding: 0; 180 | margin: 0; 181 | list-style: outside none none; 182 | } 183 | .social-button > ul > li { 184 | position: relative; 185 | left: -50%; 186 | float: left; 187 | padding: 0; 188 | margin: 0 10px; 189 | } 190 | .social-button > ul > li .fb-like > span { 191 | vertical-align: 0 !important; 192 | } 193 | 194 | .social { 195 | padding: 10px 0; 196 | background: #eee; 197 | } 198 | 199 | .jumbotron.special { 200 | position: relative; 201 | min-height: 530px; 202 | margin-bottom: 0; 203 | overflow: hidden; 204 | text-align: center; 205 | background-color: #fdcea0; 206 | background-image: url("../img/circle.png"); 207 | background-repeat: no-repeat; 208 | background-position: -35% center; 209 | -webkit-background-size: 70% 70%; 210 | background-size: 70%; 211 | } 212 | .jumbotron.special .honoka { 213 | position: absolute; 214 | bottom: -20px; 215 | left: 0; 216 | width: 400px; 217 | height: 530px; 218 | background-image: url("../img/honoka.png"); 219 | background-repeat: no-repeat; 220 | } 221 | .jumbotron.special .outline { 222 | margin-top: 180px; 223 | } 224 | .jumbotron.special h1, 225 | .jumbotron.special .h1 { 226 | font-family: Montserrat, sans-serif; 227 | } 228 | .jumbotron.special .download { 229 | margin: 24px auto 12px; 230 | } 231 | .jumbotron.special .basedon { 232 | margin: 12px auto; 233 | color: #777; 234 | text-shadow: #fff 0 1px 2px; 235 | } 236 | 237 | section.section { 238 | padding: 100px 0; 239 | } 240 | section.section.section-default { 241 | background-color: #f9f9f9; 242 | } 243 | section.section.section-inverse { 244 | background-color: #fff5eb; 245 | } 246 | section.section .subtitle { 247 | margin-bottom: 24px; 248 | text-align: center; 249 | } 250 | section.section .subtitle h2 { 251 | margin-top: 0; 252 | } 253 | 254 | .point .point-box { 255 | text-align: center; 256 | } 257 | .point .point-box .point-circle { 258 | width: 100px; 259 | height: 100px; 260 | margin: 0 auto; 261 | font-size: 60px; 262 | line-height: 100px; 263 | color: #fff; 264 | border-radius: 100%; 265 | } 266 | .point .point-box .point-circle.start { 267 | background-color: #4caf50; 268 | } 269 | .point .point-box .point-circle.replace { 270 | background-color: #ff9800; 271 | } 272 | .point .point-box .point-circle.compass { 273 | background-color: #2196f3; 274 | } 275 | .point .point-box .point-circle.japanese { 276 | background-color: #f44336; 277 | } 278 | .point .point-box .point-circle.japanese span.icon-jp::before { 279 | font-weight: bold; 280 | content: "あ"; 281 | } 282 | .point .point-box .point-description h4 { 283 | text-align: center; 284 | } 285 | .point .point-box .point-description p { 286 | text-align: justify; 287 | } 288 | 289 | .getting-started h3 { 290 | margin-top: 0; 291 | } 292 | 293 | .japanese-font .well > h3 { 294 | margin-top: 24px; 295 | } 296 | 297 | h3 .package-system-logo { 298 | width: auto; 299 | height: 48px; 300 | } 301 | 302 | .available-bower { 303 | position: relative; 304 | overflow: hidden; 305 | } 306 | .available-bower .bower-logo { 307 | position: absolute; 308 | right: 40px; 309 | bottom: 0; 310 | width: 300px; 311 | height: 300px; 312 | background-image: url("../img/bower-logo.png"); 313 | background-repeat: no-repeat; 314 | background-position: center center; 315 | -webkit-background-size: contain; 316 | background-size: contain; 317 | opacity: .3; 318 | } 319 | 320 | .featured .subtitle h2 { 321 | font-size: 24px; 322 | } 323 | .featured ul.featured-list a { 324 | opacity: .7; 325 | } 326 | .featured ul.featured-list a:hover, .featured ul.featured-list a:active, .featured ul.featured-list a:focus { 327 | opacity: .5; 328 | } 329 | .featured ul.featured-list li { 330 | padding: 6px 20px; 331 | } 332 | 333 | .thumbnail { 334 | background: #fff; 335 | } 336 | .thumbnail > a:hover, .thumbnail > a:active, .thumbnail > a:focus { 337 | opacity: .7; 338 | } 339 | 340 | footer { 341 | padding: 40px 0; 342 | color: #eee; 343 | background-color: #333; 344 | } 345 | footer .copyright { 346 | padding-top: 10px; 347 | padding-bottom: 10px; 348 | } 349 | 350 | .bootstrap-default { 351 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 352 | font-size: 14px; 353 | line-height: 1.4285; 354 | } 355 | .bootstrap-default > h3 { 356 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 357 | font-size: 24px; 358 | } 359 | -------------------------------------------------------------------------------- /docs/v3/assets/img/bower-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/v3/assets/img/bower-logo.png -------------------------------------------------------------------------------- /docs/v3/assets/img/brand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/v3/assets/img/brand.png -------------------------------------------------------------------------------- /docs/v3/assets/img/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/v3/assets/img/circle.png -------------------------------------------------------------------------------- /docs/v3/assets/img/honoka.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/v3/assets/img/honoka.png -------------------------------------------------------------------------------- /docs/v3/assets/img/npm-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/v3/assets/img/npm-logo.png -------------------------------------------------------------------------------- /docs/v3/assets/img/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysakasin/Umi/95bde5331beb6155f4abb35c27c5b91552c4c649/docs/v3/assets/img/sample.png -------------------------------------------------------------------------------- /docs/v3/assets/scss/example.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import url(https://fonts.googleapis.com/css?family=Montserrat); 4 | 5 | @import "honoka/variables"; 6 | @import "honoka/mixins"; 7 | 8 | $brand-honoka: #fdcea0; 9 | $brand-twitter: #55acee; 10 | $brand-facebook: #3b5998; 11 | $brand-hatena: #178fde; 12 | 13 | .btn-twitter,.btn-facebook { 14 | .fa.fa-lg { 15 | margin-right: 2px; 16 | vertical-align: -1px; 17 | } 18 | } 19 | .btn-twitter { 20 | @include button-variant(#fff, $brand-twitter, darken($brand-twitter, 2%)); 21 | } 22 | .btn-facebook { 23 | @include button-variant(#fff, $brand-facebook, darken($brand-facebook, 2%)); 24 | } 25 | .btn-hatebu { 26 | @include button-variant(#fff, $brand-hatena, darken($brand-hatena, 2%)); 27 | } 28 | 29 | .fa.fa-hatebu::before { 30 | font-family: Verdana; 31 | font-weight: bold; 32 | content: "B!"; 33 | } 34 | 35 | body { 36 | margin-top: $navbar-height; 37 | } 38 | 39 | .v4-dev { 40 | a { 41 | display: block; 42 | padding: $padding-large-vertical; 43 | font-weight: bold; 44 | color: #fff; 45 | text-align: center; 46 | text-decoration: none; 47 | background-color: $brand-primary; 48 | &:hover, &:active, &:focus { 49 | background-color: darken($brand-primary, 10%); 50 | } 51 | } 52 | } 53 | 54 | .social-button { 55 | position: relative; 56 | padding: $padding-large-vertical 0; 57 | margin: 0 auto !important; 58 | overflow: hidden; 59 | > ul { 60 | position: relative; 61 | left: 50%; 62 | float: left; 63 | padding: 0; 64 | margin: 0; 65 | list-style: outside none none; 66 | > li { 67 | position: relative; 68 | left: -50%; 69 | float: left; 70 | padding: 0; 71 | margin: 0 10px; 72 | .fb-like { 73 | > span { 74 | vertical-align: 0 !important; 75 | } 76 | } 77 | } 78 | } 79 | } 80 | 81 | .social { 82 | padding: $padding-large-vertical 0; 83 | background: $gray-lighter; 84 | } 85 | 86 | .jumbotron.special { 87 | position: relative; 88 | min-height: 530px; 89 | margin-bottom: 0; 90 | overflow: hidden; 91 | text-align: center; 92 | background-color: $brand-honoka; 93 | background-image: url("../img/circle.png"); 94 | background-repeat: no-repeat; 95 | background-position: -35% center; 96 | background-size: 70%; 97 | .honoka { 98 | position: absolute; 99 | bottom: -20px; 100 | left: 0; 101 | width: 400px; 102 | height: 530px; 103 | background-image: url("../img/honoka.png"); 104 | background-repeat: no-repeat; 105 | } 106 | .outline { 107 | margin-top: 180px; 108 | } 109 | h1, 110 | .h1 { 111 | font-family: Montserrat, sans-serif; 112 | } 113 | .download { 114 | margin: $line-height-computed auto ($line-height-computed * 0.5); 115 | } 116 | .basedon { 117 | margin: ($line-height-computed * 0.5) auto; 118 | color: $gray-light; 119 | text-shadow: #fff 0 1px 2px; 120 | } 121 | } 122 | 123 | 124 | 125 | section.section { 126 | padding: ($padding-large-vertical * 10) 0; 127 | &.section-default { 128 | background-color: $body-bg; 129 | } 130 | &.section-inverse { 131 | background-color: lighten($brand-honoka, 15%); 132 | } 133 | .subtitle { 134 | margin-bottom: $line-height-computed; 135 | text-align: center; 136 | h2 { 137 | margin-top: 0; 138 | } 139 | } 140 | } 141 | 142 | .point { 143 | .point-box { 144 | text-align: center; 145 | .point-circle { 146 | $point-circle-size: 100px; 147 | width: $point-circle-size; 148 | height: $point-circle-size; 149 | margin: 0 auto; 150 | font-size: $point-circle-size * 0.6; 151 | line-height: $point-circle-size; 152 | color: #fff; 153 | border-radius: 100%; 154 | &.start { 155 | background-color: $brand-success; 156 | } 157 | &.replace { 158 | background-color: $brand-warning; 159 | } 160 | &.compass { 161 | background-color: $brand-primary; 162 | } 163 | &.japanese { 164 | background-color: $brand-danger; 165 | span.icon-jp::before { 166 | font-weight: bold; 167 | content: "あ"; 168 | } 169 | } 170 | } 171 | .point-description { 172 | h4 { 173 | text-align: center; 174 | } 175 | p { 176 | text-align: justify; 177 | } 178 | } 179 | } 180 | } 181 | 182 | .getting-started { 183 | h3 { 184 | margin-top: 0; 185 | } 186 | } 187 | 188 | .japanese-font { 189 | .well { 190 | > h3 { 191 | margin-top: $line-height-computed; 192 | } 193 | } 194 | } 195 | 196 | h3 .package-system-logo { 197 | width: auto; 198 | height: $font-size-h3 * 2; 199 | } 200 | 201 | .available-bower { 202 | position: relative; 203 | overflow: hidden; 204 | .bower-logo { 205 | position: absolute; 206 | right: 40px; 207 | bottom: 0; 208 | width: 300px; 209 | height: 300px; 210 | background-image: url("../img/bower-logo.png"); 211 | background-repeat: no-repeat; 212 | background-position: center center; 213 | background-size: contain; 214 | opacity: 0.3; 215 | } 216 | } 217 | 218 | .featured { 219 | .subtitle { 220 | h2 { 221 | font-size: $font-size-h3; 222 | } 223 | } 224 | ul.featured-list { 225 | a { 226 | opacity: 0.7; 227 | &:hover, &:active, &:focus { 228 | opacity: 0.5; 229 | } 230 | } 231 | li { 232 | padding: $padding-base-vertical $padding-large-horizontal; 233 | } 234 | } 235 | } 236 | 237 | .thumbnail { 238 | background: #fff; 239 | > a { 240 | &:hover, &:active, &:focus { 241 | opacity: 0.7; 242 | } 243 | } 244 | } 245 | 246 | footer { 247 | padding: $padding-large-vertical * 4 0; 248 | color: $gray-lighter; 249 | background-color: $gray-dark; 250 | .copyright { 251 | padding-top: $padding-large-vertical; 252 | padding-bottom: $padding-large-vertical; 253 | } 254 | } 255 | 256 | .bootstrap-default { 257 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 258 | font-size: 14px; 259 | line-height: 1.4285; 260 | > h3 { 261 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 262 | font-size: 24px; 263 | } 264 | } 265 | -------------------------------------------------------------------------------- /docs/v3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Honoka - 日本語も美しく表示できるBootstrapテーマ 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 | Honoka 42 | 47 |
48 | 71 |
72 |
73 |
74 | 75 | 78 | 79 |
80 |
81 |
82 |
83 |
84 |

Bootstrap Theme for Japanese.

85 |

"Honoka" は日本語も美しく表示できるBootstrapテーマです。

86 |
87 | Download from GitHub 88 | Watch Demo 89 |
90 |
91 | Last version v ・ Based on Bootstrap v 92 |
93 | 96 |
97 |
98 |
99 |
100 | 101 | 111 | 112 |
113 |
114 |
115 |
116 |

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

117 |

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

118 |
119 |
120 |
121 |
122 |
123 | 124 |
125 |
126 |

Easy to Start

127 |

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

128 |
129 |
130 |
131 |
132 | 133 |
134 |
135 |

Replace Bootstrap

136 |

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

137 |
138 |
139 |
140 |
141 | 142 |
143 |
144 |

Open Source

145 |

作成に使用したSASSファイルは全て公開されています。変数の定義ファイルを変更することで自分好みの設定に変更することも可能です。

146 |
147 |
148 |
149 |
150 | 151 |
152 |
153 |

Optimized Japanese

154 |

本家Bootstrapでは指定されていない日本語フォントに関する指定が行われているため、美しく日本語を表示できます。

155 |
156 |
157 |
158 |
159 |
160 | 161 |
162 |
163 |
164 |
165 |

Honokaは日本語を美しく表示します

166 |

本家Bootstrapでは指定されていない日本語のフォント指定を行っているので、日本語も美しく表示されます。

167 |
168 |
169 |
170 |
171 |
172 |

従来の日本語表示

173 |

174 | 秋葉原と神田と神保町という3つの街のはざまにある伝統校、音ノ木坂学院は統廃合の危機に瀕していた。 175 | 学校の危機に、2年生の高坂穂乃果を中心とした9人の女子生徒が立ち上がる。 176 | 私たちの大好きな学校を守るために、私たちができること……。それは、アイドルになること！ アイドルになって学校を世に広く宣伝し、入学者を増やそう！ 177 | ここから、彼女たちの「みんなで叶える物語」（スクールアイドルプロジェクト）が始まった！ 178 |

179 |
180 |
181 |
182 |
183 |

Honokaの日本語表示

184 |

185 | 秋葉原と神田と神保町という3つの街のはざまにある伝統校、音ノ木坂学院は統廃合の危機に瀕していた。 186 | 学校の危機に、2年生の高坂穂乃果を中心とした9人の女子生徒が立ち上がる。 187 | 私たちの大好きな学校を守るために、私たちができること……。それは、アイドルになること！ アイドルになって学校を世に広く宣伝し、入学者を増やそう！ 188 | ここから、彼女たちの「みんなで叶える物語」（スクールアイドルプロジェクト）が始まった！ 189 |

190 |
191 |
192 |
193 |
194 |
195 | 196 |
197 |
198 |
199 |
200 |

さあ、はじめましょう。

201 |

導入はとっても簡単です

202 |
203 |
204 |
205 |
206 |
207 | Download from GitHub 208 |

Last version v ・ MIT License

209 |
210 |

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

211 |
212 |
213 |
214 |
215 | 216 |
217 |
218 |
219 |
220 |

Available on Framework!

221 |

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

222 |
223 |
224 |
225 |
226 |

227 |
228 | 229 | 230 | 231 | 232 |
233 |

npmjs.com / v3.3.7-a 以降から対応

234 |
235 |
236 |

Bower

237 |
238 | 240 | 241 | 242 | 243 |
244 |

v3.3.5-c 以降から対応

245 |
246 |
247 |
248 |
249 | 250 |
251 |
252 |
253 |
254 |

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

255 |

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

256 |
257 |
258 |
259 |
260 |
261 | 262 |
263 |

Proconist.net

264 |
265 |
266 |
267 |
268 |
269 | 270 |
271 |

この高専がすごい！

272 |
273 |
274 |
275 |
276 |
277 | 278 |
279 |

yashihei.net

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

SYSKEN Advent Calendar

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

TIMERS Inc

298 |
299 |
300 |
301 |
302 |
303 | 304 |
305 |

PROCON O.S.T. Project

306 |
307 |
308 |
309 |
310 |
311 |
312 | 313 |
314 |
315 |
316 |
317 |

HonokaのForkテーマ

318 |

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

319 |
320 |
321 |
322 |
323 |
324 | 325 |
326 |

Umi

327 |

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

328 | 332 |
333 |
334 |
335 |
336 |
337 | 338 |
339 |

Nico

340 |

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

341 | 345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 | 353 |
354 |

Rin

355 |

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

356 | 360 |
361 |
362 |
363 |
364 |
365 |
366 | 367 |
368 |
369 |
370 |
371 |

Honoka has been featured on

372 |
373 |
374 |
375 |
376 |
    377 |
  • MOONGIFT
    • 378 |
  • コリス
    • 379 |
  • Stocker.jp / diary
    • 380 |
381 |
382 |
383 |
384 |
385 | 386 | 387 | 404 | 405 | 415 | 416 | 417 | 418 | 419 | 441 | 442 |
443 | 444 | 445 | 446 | 447 | -------------------------------------------------------------------------------- /docs/v3/js/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.7 (http://getbootstrap.com) 3 | * Copyright 2011-2016 Twitter, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1||b[0]>3)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){if(a(b.target).is(this))return b.handleObj.handler.apply(this,arguments)}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.7",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,""));var g=a("#"===f?[]:f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.7",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c).prop(c,!0)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c).prop(c,!1))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")?(c.prop("checked")&&(a=!1),b.find(".active").removeClass("active"),this.$element.addClass("active")):"checkbox"==c.prop("type")&&(c.prop("checked")!==this.$element.hasClass("active")&&(a=!1),this.$element.toggleClass("active")),c.prop("checked",this.$element.hasClass("active")),a&&c.trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active")),this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target).closest(".btn");b.call(d,"toggle"),a(c.target).is('input[type="radio"], input[type="checkbox"]')||(c.preventDefault(),d.is("input,button")?d.trigger("focus"):d.find("input:visible,button:visible").first().trigger("focus"))}).on("focus.bs.button.data-api blur.bs.button.data-api",'[data-toggle^="button"]',function(b){a(b.target).closest(".btn").toggleClass("focus",/^focus(in)?$/.test(b.type))})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=null,this.sliding=null,this.interval=null,this.$active=null,this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",a.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.3.7",c.TRANSITION_DURATION=600,c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},c.prototype.keydown=function(a){if(!/input|textarea/i.test(a.target.tagName)){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()}},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.getItemForDirection=function(a,b){var c=this.getItemIndex(b),d="prev"==a&&0===c||"next"==a&&c==this.$items.length-1;if(d&&!this.options.wrap)return b;var e="prev"==a?-1:1,f=(c+e)%this.$items.length;return this.$items.eq(f)},c.prototype.to=function(a){var b=this,c=this.getItemIndex(this.$active=this.$element.find(".item.active"));if(!(a>this.$items.length-1||a<0))return this.sliding?this.$element.one("slid.bs.carousel",function(){b.to(a)}):c==a?this.pause().cycle():this.slide(a>c?"next":"prev",this.$items.eq(a))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){if(!this.sliding)return this.slide("next")},c.prototype.prev=function(){if(!this.sliding)return this.slide("prev")},c.prototype.slide=function(b,d){var e=this.$element.find(".item.active"),f=d||this.getItemForDirection(b,e),g=this.interval,h="next"==b?"left":"right",i=this;if(f.hasClass("active"))return this.sliding=!1;var j=f[0],k=a.Event("slide.bs.carousel",{relatedTarget:j,direction:h});if(this.$element.trigger(k),!k.isDefaultPrevented()){if(this.sliding=!0,g&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var l=a(this.$indicators.children()[this.getItemIndex(f)]);l&&l.addClass("active")}var m=a.Event("slid.bs.carousel",{relatedTarget:j,direction:h});return a.support.transition&&this.$element.hasClass("slide")?(f.addClass(b),f[0].offsetWidth,e.addClass(h),f.addClass(h),e.one("bsTransitionEnd",function(){f.removeClass([b,h].join(" ")).addClass("active"),e.removeClass(["active",h].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger(m)},0)}).emulateTransitionEnd(c.TRANSITION_DURATION)):(e.removeClass("active"),f.addClass("active"),this.sliding=!1,this.$element.trigger(m)),g&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this};var e=function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}};a(document).on("click.bs.carousel.data-api","[data-slide]",e).on("click.bs.carousel.data-api","[data-slide-to]",e),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){var c,d=b.attr("data-target")||(c=b.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"");return a(d)}function c(b){return this.each(function(){var c=a(this),e=c.data("bs.collapse"),f=a.extend({},d.DEFAULTS,c.data(),"object"==typeof b&&b);!e&&f.toggle&&/show|hide/.test(b)&&(f.toggle=!1),e||c.data("bs.collapse",e=new d(this,f)),"string"==typeof b&&e[b]()})}var d=function(b,c){this.$element=a(b),this.options=a.extend({},d.DEFAULTS,c),this.$trigger=a('[data-toggle="collapse"][href="#'+b.id+'"],[data-toggle="collapse"][data-target="#'+b.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};d.VERSION="3.3.7",d.TRANSITION_DURATION=350,d.DEFAULTS={toggle:!0},d.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},d.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b,e=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(e&&e.length&&(b=e.data("bs.collapse"),b&&b.transitioning))){var f=a.Event("show.bs.collapse");if(this.$element.trigger(f),!f.isDefaultPrevented()){e&&e.length&&(c.call(e,"hide"),b||e.data("bs.collapse",null));var g=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[g](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var h=function(){this.$element.removeClass("collapsing").addClass("collapse in")[g](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return h.call(this);var i=a.camelCase(["scroll",g].join("-"));this.$element.one("bsTransitionEnd",a.proxy(h,this)).emulateTransitionEnd(d.TRANSITION_DURATION)[g](this.$element[0][i])}}}},d.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var e=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(e,this)).emulateTransitionEnd(d.TRANSITION_DURATION):e.call(this)}}},d.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},d.prototype.getParent=function(){return a(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(a.proxy(function(c,d){var e=a(d);this.addAriaAndCollapsedClass(b(e),e)},this)).end()},d.prototype.addAriaAndCollapsedClass=function(a,b){var c=a.hasClass("in");a.attr("aria-expanded",c),b.toggleClass("collapsed",!c).attr("aria-expanded",c)};var e=a.fn.collapse;a.fn.collapse=c,a.fn.collapse.Constructor=d,a.fn.collapse.noConflict=function(){return a.fn.collapse=e,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(d){var e=a(this);e.attr("data-target")||d.preventDefault();var f=b(e),g=f.data("bs.collapse"),h=g?"toggle":e.data();c.call(f,h)})}(jQuery),+function(a){"use strict";function b(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function c(c){c&&3===c.which||(a(e).remove(),a(f).each(function(){var d=a(this),e=b(d),f={relatedTarget:this};e.hasClass("open")&&(c&&"click"==c.type&&/input|textarea/i.test(c.target.tagName)&&a.contains(e[0],c.target)||(e.trigger(c=a.Event("hide.bs.dropdown",f)),c.isDefaultPrevented()||(d.attr("aria-expanded","false"),e.removeClass("open").trigger(a.Event("hidden.bs.dropdown",f)))))}))}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.3.7",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=b(e),g=f.hasClass("open");if(c(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click",c);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus").attr("aria-expanded","true"),f.toggleClass("open").trigger(a.Event("shown.bs.dropdown",h))}return!1}},g.prototype.keydown=function(c){if(/(38|40|27|32)/.test(c.which)&&!/input|textarea/i.test(c.target.tagName)){var d=a(this);if(c.preventDefault(),c.stopPropagation(),!d.is(".disabled, :disabled")){var e=b(d),g=e.hasClass("open");if(!g&&27!=c.which||g&&27==c.which)return 27==c.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.disabled):visible a",i=e.find(".dropdown-menu"+h);if(i.length){var j=i.index(c.target);38==c.which&&j>0&&j--,40==c.which&&jdocument.documentElement.clientHeight;this.$element.css({paddingLeft:!this.bodyIsOverflowing&&a?this.scrollbarWidth:"",paddingRight:this.bodyIsOverflowing&&!a?this.scrollbarWidth:""})},c.prototype.resetAdjustments=function(){this.$element.css({paddingLeft:"",paddingRight:""})},c.prototype.checkScrollbar=function(){var a=window.innerWidth;if(!a){var b=document.documentElement.getBoundingClientRect();a=b.right-Math.abs(b.left)}this.bodyIsOverflowing=document.body.clientWidth
',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},c.prototype.init=function(b,c,d){if(this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.$viewport=this.options.viewport&&a(a.isFunction(this.options.viewport)?this.options.viewport.call(this,this.$element):this.options.viewport.selector||this.options.viewport),this.inState={click:!1,hover:!1,focus:!1},this.$element[0]instanceof document.constructor&&!this.options.selector)throw new Error("`selector` option must be specified when initializing "+this.type+" on the window.document object!");for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focusin",i="hover"==g?"mouseleave":"focusout";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},c.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},c.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);return c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),b instanceof a.Event&&(c.inState["focusin"==b.type?"focus":"hover"]=!0),c.tip().hasClass("in")||"in"==c.hoverState?void(c.hoverState="in"):(clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?void(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show)):c.show())},c.prototype.isInStateTrue=function(){for(var a in this.inState)if(this.inState[a])return!0;return!1},c.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);if(c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),b instanceof a.Event&&(c.inState["focusout"==b.type?"focus":"hover"]=!1),!c.isInStateTrue())return clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?void(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide)):c.hide()},c.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(b);var d=a.contains(this.$element[0].ownerDocument.documentElement,this.$element[0]);if(b.isDefaultPrevented()||!d)return;var e=this,f=this.tip(),g=this.getUID(this.type);this.setContent(),f.attr("id",g),this.$element.attr("aria-describedby",g),this.options.animation&&f.addClass("fade");var h="function"==typeof this.options.placement?this.options.placement.call(this,f[0],this.$element[0]):this.options.placement,i=/\s?auto?\s?/i,j=i.test(h);j&&(h=h.replace(i,"")||"top"),f.detach().css({top:0,left:0,display:"block"}).addClass(h).data("bs."+this.type,this),this.options.container?f.appendTo(this.options.container):f.insertAfter(this.$element),this.$element.trigger("inserted.bs."+this.type);var k=this.getPosition(),l=f[0].offsetWidth,m=f[0].offsetHeight;if(j){var n=h,o=this.getPosition(this.$viewport);h="bottom"==h&&k.bottom+m>o.bottom?"top":"top"==h&&k.top-mo.width?"left":"left"==h&&k.left-lg.top+g.height&&(e.top=g.top+g.height-i)}else{var j=b.left-f,k=b.left+f+c;jg.right&&(e.left=g.left+g.width-k)}return e},c.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},c.prototype.getUID=function(a){do a+=~~(1e6*Math.random());while(document.getElementById(a));return a},c.prototype.tip=function(){if(!this.$tip&&(this.$tip=a(this.options.template),1!=this.$tip.length))throw new Error(this.type+" `template` option must consist of exactly 1 top-level element!");return this.$tip},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},c.prototype.enable=function(){this.enabled=!0},c.prototype.disable=function(){this.enabled=!1},c.prototype.toggleEnabled=function(){this.enabled=!this.enabled},c.prototype.toggle=function(b){var c=this;b&&(c=a(b.currentTarget).data("bs."+this.type),c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c))),b?(c.inState.click=!c.inState.click,c.isInStateTrue()?c.enter(c):c.leave(c)):c.tip().hasClass("in")?c.leave(c):c.enter(c)},c.prototype.destroy=function(){var a=this;clearTimeout(this.timeout),this.hide(function(){a.$element.off("."+a.type).removeData("bs."+a.type),a.$tip&&a.$tip.detach(),a.$tip=null,a.$arrow=null,a.$viewport=null,a.$element=null})};var d=a.fn.tooltip;a.fn.tooltip=b,a.fn.tooltip.Constructor=c,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=d,this}}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof b&&b;!e&&/destroy|hide/.test(b)||(e||d.data("bs.popover",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");c.VERSION="3.3.7",c.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:''}),c.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),c.prototype.constructor=c,c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content").children().detach().end()[this.options.html?"string"==typeof c?"html":"append":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},c.prototype.hasContent=function(){return this.getTitle()||this.getContent()},c.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")};var d=a.fn.popover;a.fn.popover=b,a.fn.popover.Constructor=c,a.fn.popover.noConflict=function(){return a.fn.popover=d,this}}(jQuery),+function(a){"use strict";function b(c,d){this.$body=a(document.body),this.$scrollElement=a(a(c).is(document.body)?window:c),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||"")+" .nav li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",a.proxy(this.process,this)),this.refresh(),this.process()}function c(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})}b.VERSION="3.3.7",b.DEFAULTS={offset:10},b.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},b.prototype.refresh=function(){var b=this,c="offset",d=0;this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight(),a.isWindow(this.$scrollElement[0])||(c="position",d=this.$scrollElement.scrollTop()),this.$body.find(this.selector).map(function(){var b=a(this),e=b.data("target")||b.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[c]().top+d,e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.getScrollHeight(),d=this.options.offset+c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(this.scrollHeight!=c&&this.refresh(),b>=d)return g!=(a=f[f.length-1])&&this.activate(a);if(g&&b=e[a]&&(void 0===e[a+1]||b .dropdown-menu > .active").removeClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!1),b.addClass("active").find('[data-toggle="tab"]').attr("aria-expanded",!0),h?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu").length&&b.closest("li.dropdown").addClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!0),e&&e()}var g=d.find("> .active"),h=e&&a.support.transition&&(g.length&&g.hasClass("fade")||!!d.find("> .fade").length);g.length&&h?g.one("bsTransitionEnd",f).emulateTransitionEnd(c.TRANSITION_DURATION):f(),g.removeClass("in")};var d=a.fn.tab;a.fn.tab=b,a.fn.tab.Constructor=c,a.fn.tab.noConflict=function(){return a.fn.tab=d,this};var e=function(c){c.preventDefault(),b.call(a(this),"show")};a(document).on("click.bs.tab.data-api",'[data-toggle="tab"]',e).on("click.bs.tab.data-api",'[data-toggle="pill"]',e)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof b&&b;e||d.data("bs.affix",e=new c(this,f)),"string"==typeof b&&e[b]()})}var c=function(b,d){this.options=a.extend({},c.DEFAULTS,d),this.$target=a(this.options.target).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(b),this.affixed=null,this.unpin=null,this.pinnedOffset=null,this.checkPosition()};c.VERSION="3.3.7",c.RESET="affix affix-top affix-bottom",c.DEFAULTS={offset:0,target:window},c.prototype.getState=function(a,b,c,d){var e=this.$target.scrollTop(),f=this.$element.offset(),g=this.$target.height();if(null!=c&&"top"==this.affixed)return e=a-d&&"bottom"},c.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(c.RESET).addClass("affix");var a=this.$target.scrollTop(),b=this.$element.offset();return this.pinnedOffset=b.top-a},c.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},c.prototype.checkPosition=function(){if(this.$element.is(":visible")){var b=this.$element.height(),d=this.options.offset,e=d.top,f=d.bottom,g=Math.max(a(document).height(),a(document.body).height());"object"!=typeof d&&(f=e=d),"function"==typeof e&&(e=d.top(this.$element)),"function"==typeof f&&(f=d.bottom(this.$element));var h=this.getState(g,b,e,f);if(this.affixed!=h){null!=this.unpin&&this.$element.css("top","");var i="affix"+(h?"-"+h:""),j=a.Event(i+".bs.affix");if(this.$element.trigger(j),j.isDefaultPrevented())return;this.affixed=h,this.unpin="bottom"==h?this.getPinnedOffset():null,this.$element.removeClass(c.RESET).addClass(i).trigger(i.replace("affix","affixed")+".bs.affix")}"bottom"==h&&this.$element.offset({top:g-b-f})}};var d=a.fn.affix;a.fn.affix=b,a.fn.affix.Constructor=c,a.fn.affix.noConflict=function(){return a.fn.affix=d,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var c=a(this),d=c.data();d.offset=d.offset||{},null!=d.offsetBottom&&(d.offset.bottom=d.offsetBottom),null!=d.offsetTop&&(d.offset.top=d.offsetTop),b.call(c,d)})})}(jQuery); -------------------------------------------------------------------------------- /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 RunSequence = require('run-sequence'); 6 | const BrowserSync = require('browser-sync').create(); 7 | 8 | const PackageJSON = JSON.parse(Fs.readFileSync('./package.json')); 9 | 10 | const BANNER = `/*! 11 | * ${PackageJSON.config.packageName} v${PackageJSON.version} (${PackageJSON.website}) 12 | * Copyright ${PackageJSON.config.projectStartYear} ${PackageJSON.author} 13 | * Licensed under ${PackageJSON.license} (${PackageJSON.config.licenseUrl}) 14 | */ 15 | /*! 16 | * Bootstrap v${PackageJSON.dependencies.bootstrap} (https://getbootstrap.com) 17 | * Copyright 2011-2018 The Bootstrap Authors 18 | * Copyright 2011-2018 Twitter, Inc. 19 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 20 | */ 21 | `; 22 | 23 | Gulp.task('default', (resolve) => { 24 | return RunSequence('build', resolve); 25 | }); 26 | 27 | Gulp.task('gulp:lint', () => { 28 | return Gulp.src(['gulpfile.js']) 29 | .pipe(Plugins.eslint({ useEslintrc: true })) 30 | .pipe(Plugins.eslint.format()) 31 | .pipe(Plugins.eslint.failAfterError()); 32 | }); 33 | 34 | Gulp.task('js:clean', () => { 35 | return Del(['dist/js/**/*']); 36 | }); 37 | 38 | Gulp.task('js:copy', ['js:clean'], () => { 39 | return Gulp.src(['bootstrap/dist/js/**/*.js'], { cwd: 'node_modules' }) 40 | .pipe(Gulp.dest('dist/js')); 41 | }); 42 | 43 | Gulp.task('css:clean', () => { 44 | return Del(['dist/css/**/*']); 45 | }); 46 | 47 | Gulp.task('css:lint', () => { 48 | return Gulp.src(['scss/**/*.scss']) 49 | .pipe(Plugins.stylelint({ 50 | failAfterError: true, 51 | reporters: [ 52 | { formatter: 'verbose', console: true }, 53 | ], 54 | })); 55 | }); 56 | 57 | Gulp.task('css:build', () => { 58 | return Gulp.src(['scss/**/*.scss']) 59 | .pipe(Plugins.plumber({ 60 | errorHandler(err) { 61 | console.error(err.message); 62 | this.emit('end'); 63 | }, 64 | })) 65 | .pipe(Plugins.sass({ 66 | includePaths: [ 67 | 'node_modules/', 68 | ], 69 | outputStyle: 'expanded', 70 | sourceMap: true, 71 | sourceMapContents: true, 72 | lineFeed: 'lf', 73 | precision: 6, 74 | })) 75 | .pipe(Plugins.plumber.stop()) 76 | .pipe(Plugins.postcss({ 77 | noMap: true, 78 | use: 'autoprefixer', 79 | config: '../build/postcss.config.js', 80 | replace: 'dist/css/bootstrap.css', 81 | })) 82 | .pipe(Gulp.dest('dist/css')); 83 | }); 84 | 85 | Gulp.task('css:banner', () => { 86 | return Gulp.src(['dist/css/*.css']) 87 | .pipe(Plugins.replace('/*! [<>] */', BANNER)) 88 | .pipe(Gulp.dest('dist/css')); 89 | }); 90 | 91 | Gulp.task('css:minify', () => { 92 | return Gulp.src(['dist/css/*.css', '!dist/css/*.min.css']) 93 | .pipe(Plugins.cleanCss({ 94 | level: 1, 95 | })) 96 | .pipe(Plugins.rename({ 97 | extname: '.min.css', 98 | })) 99 | .pipe(Gulp.dest('dist/css')); 100 | }); 101 | 102 | Gulp.task('docs:clean', () => { 103 | return Del(['docs/css/**/*', 'docs/js/**/*']); 104 | }); 105 | 106 | Gulp.task('docs:copy', () => { 107 | return Gulp.src(['dist/**/*'], { base: 'dist' }) 108 | .pipe(Gulp.dest('docs')); 109 | }); 110 | 111 | Gulp.task('docs:css', () => { 112 | return Gulp.src(['docs/assets/scss/**/*.scss']) 113 | .pipe(Plugins.plumber({ 114 | errorHandler(err) { 115 | console.error(err.message); 116 | this.emit('end'); 117 | }, 118 | })) 119 | .pipe(Plugins.sass({ 120 | includePaths: [ 121 | 'node_modules/', 122 | 'scss/', 123 | ], 124 | outputStyle: 'expanded', 125 | sourceMap: true, 126 | sourceMapContents: true, 127 | lineFeed: 'lf', 128 | precision: 6, 129 | })) 130 | .pipe(Plugins.plumber.stop()) 131 | .pipe(Plugins.postcss({ 132 | noMap: true, 133 | use: 'autoprefixer', 134 | config: '../../../build/postcss.config.js', 135 | replace: 'docs/assets/css/bootstrap.css', 136 | })) 137 | .pipe(Gulp.dest('docs/assets/css')); 138 | }); 139 | 140 | Gulp.task('packing', () => { 141 | return Gulp.src(['dist/**/*', 'docs/bootstrap.html', 'README.md', 'LICENSE'], { base: '.' }) 142 | .pipe(Plugins.rename((path) => { 143 | // NOTE: ディレクトリ構造を変更するために gulp-rename を使う 144 | // FIXME: gulp-rename の仕様により引数代入を許可する 145 | /* eslint-disable no-param-reassign */ 146 | path.dirname = path.dirname.replace(/^(?:dist|docs)/, ''); 147 | path.dirname = `honoka/${path.dirname}`; 148 | /* eslint-enable no-param-reassign */ 149 | })) 150 | .pipe(Plugins.zip(`bootstrap-${PackageJSON.config.packageName.toLowerCase()}-${PackageJSON.version}-dist.zip`)) 151 | .pipe(Gulp.dest('./')); 152 | }); 153 | 154 | Gulp.task('docs:serve', () => { 155 | BrowserSync.init({ 156 | server: 'docs/', 157 | port: 8000, 158 | }); 159 | }); 160 | 161 | Gulp.task('watch', () => { 162 | const message = (ev) => { 163 | console.log(`File: ${ev.path} was ${ev.type}, running tasks...`); 164 | }; 165 | Gulp.watch(['scss/**/*'], () => { RunSequence('css', 'docs:copy'); }) 166 | .on('change', message); 167 | Gulp.watch(['docs/**/*.html']) 168 | .on('change', message) 169 | .on('change', BrowserSync.reload); 170 | Gulp.watch(['docs/assets/scss/**/*.scss'], ['docs:css']) 171 | .on('change', message); 172 | }); 173 | 174 | Gulp.task('docs', (resolve) => { 175 | return RunSequence('docs:clean', 'docs:copy', 'docs:css', resolve); 176 | }); 177 | 178 | Gulp.task('serve', ['docs:serve', 'watch']); 179 | 180 | Gulp.task('clean', (resolve) => { 181 | return RunSequence(['css:clean', 'js:clean'], resolve); 182 | }); 183 | 184 | Gulp.task('css', (resolve) => { 185 | return RunSequence('css:build', 'css:minify', 'css:banner', resolve); 186 | }); 187 | 188 | Gulp.task('js', (resolve) => { 189 | return RunSequence('js:copy', resolve); 190 | }); 191 | 192 | Gulp.task('test', (resolve) => { 193 | return RunSequence('css:lint', 'gulp:lint', resolve); 194 | }); 195 | 196 | Gulp.task('build', (resolve) => { 197 | return RunSequence('clean', ['css', 'js'], ['docs'], resolve); 198 | }); 199 | 200 | Gulp.task('release', (resolve) => { 201 | return RunSequence('build', 'packing', resolve); 202 | }); 203 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-umi", 3 | "version": "4.0.0", 4 | "description": "Umi is one of the Bootstrap original theme.", 5 | "author": "SAKATA Sinji", 6 | "website": "https://ysakasin.github.io/Umi/", 7 | "config": { 8 | "packageName": "Umi", 9 | "projectStartYear": "2015", 10 | "licenseUrl": "https://github.com/ysakasin/Umi/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/ysakasin/umi.git" 33 | }, 34 | "dependencies": { 35 | "bootstrap": "4.0.0", 36 | "jquery": ">=1.9.1", 37 | "popper.js": "^1.14.3" 38 | }, 39 | "devDependencies": { 40 | "autoprefixer": "^7.2.6", 41 | "browser-sync": "^2.24.2", 42 | "clean-css": "^4.1.11", 43 | "del": "^3.0.0", 44 | "eslint": "^4.19.1", 45 | "eslint-config-airbnb-base": "^12.1.0", 46 | "eslint-plugin-import": "^2.11.0", 47 | "gulp": "^3.9.1", 48 | "gulp-clean-css": "^3.9.3", 49 | "gulp-eslint": "^4.0.2", 50 | "gulp-load-plugins": "^1.5.0", 51 | "gulp-plumber": "^1.2.0", 52 | "gulp-postcss": "^7.0.1", 53 | "gulp-rename": "^1.2.2", 54 | "gulp-replace": "^0.6.1", 55 | "gulp-sass": "^3.2.1", 56 | "gulp-stylelint": "^6.0.0", 57 | "gulp-zip": "^4.1.0", 58 | "postcss-flexbugs-fixes": "^3.3.1", 59 | "run-sequence": "^2.2.1", 60 | "stylelint": "^8.4.0", 61 | "stylelint-config-recommended-scss": "^3.2.0", 62 | "stylelint-config-standard": "^18.2.0", 63 | "stylelint-order": "^0.8.1", 64 | "stylelint-scss": "^2.5.0" 65 | }, 66 | "files": [ 67 | "build", 68 | "dist", 69 | "scss/**/*.scss", 70 | "gulpfile.js", 71 | "LICENSE" 72 | ] 73 | } 74 | -------------------------------------------------------------------------------- /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/_bootswatch.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable 2 | 3 | // Flatly 4.0.0 4 | // Bootswatch 5 | 6 | 7 | 8 | // Navbar ======================================================================= 9 | 10 | .bg-primary { 11 | .navbar-nav { 12 | .active > .nav-link, 13 | .nav-link:hover, 14 | .nav-link:focus { 15 | color: $success !important; 16 | } 17 | } 18 | .nav-item .nav-link::before { 19 | border-color: $success !important; 20 | } 21 | } 22 | 23 | .bg-dark { 24 | background-color: $success !important; 25 | &.navbar-dark .navbar-nav { 26 | .nav-link:focus, 27 | .nav-link:hover, 28 | .active > .nav-link { 29 | color: $primary !important; 30 | } 31 | .nav-item .nav-link::before { 32 | border-color: $primary !important; 33 | } 34 | } 35 | } 36 | 37 | // Buttons ===================================================================== 38 | 39 | .btn { 40 | &-secondary, 41 | &-secondary:hover, 42 | &-warning, 43 | &-warning:hover { 44 | color: #fff; 45 | 46 | &.disabled { 47 | color: #fff; 48 | } 49 | } 50 | } 51 | 52 | // Typography ================================================================== 53 | 54 | // Tables ====================================================================== 55 | 56 | .table { 57 | 58 | .thead-dark th { 59 | background-color: $primary; 60 | } 61 | 62 | &-success, 63 | &-info, 64 | &-warning, 65 | &-danger { 66 | color: #fff; 67 | } 68 | 69 | &-success { 70 | &, > th, > td { 71 | background-color: $success; 72 | } 73 | } 74 | 75 | &-info { 76 | &, > th, > td { 77 | background-color: $info; 78 | } 79 | } 80 | 81 | &-danger { 82 | &, > th, > td { 83 | background-color: $danger; 84 | } 85 | } 86 | 87 | &-warning { 88 | &, > th, > td { 89 | background-color: $warning; 90 | } 91 | } 92 | 93 | &-hover { 94 | 95 | .table-success:hover { 96 | &, > th, > td { 97 | background-color: darken($success, 5%); 98 | } 99 | } 100 | 101 | .table-info:hover { 102 | &, > th, > td { 103 | background-color: darken($info, 5%); 104 | } 105 | } 106 | 107 | .table-danger:hover { 108 | &, > th, > td { 109 | background-color: darken($danger, 5%); 110 | } 111 | } 112 | 113 | .table-warning:hover { 114 | &, > th, > td { 115 | background-color: darken($warning, 5%); 116 | } 117 | } 118 | 119 | } 120 | } 121 | 122 | // Forms ======================================================================= 123 | 124 | // Navs ======================================================================== 125 | 126 | .nav-tabs { 127 | .nav-link.active, 128 | .nav-link.active:focus, 129 | .nav-link.active:hover, 130 | .nav-item.open .nav-link, 131 | .nav-item.open .nav-link:focus, 132 | .nav-item.open .nav-link:hover { 133 | color: $primary; 134 | } 135 | } 136 | 137 | .pagination { 138 | a:hover { 139 | text-decoration: none; 140 | } 141 | } 142 | 143 | // Indicators ================================================================== 144 | 145 | .close { 146 | text-decoration: none; 147 | opacity: 0.4; 148 | 149 | &:hover, 150 | &:focus { 151 | opacity: 1; 152 | } 153 | } 154 | 155 | .badge { 156 | &-secondary, 157 | &-warning { 158 | color: #fff; 159 | } 160 | } 161 | 162 | 163 | .alert { 164 | border: none; 165 | color: $white; 166 | 167 | a, 168 | .alert-link { 169 | color: #fff; 170 | text-decoration: underline; 171 | } 172 | 173 | @each $color, $value in $theme-colors { 174 | &-#{$color} { 175 | background-color: $value; 176 | } 177 | } 178 | 179 | &-light { 180 | &, 181 | & a, 182 | & .alert-link { 183 | color: $body-color; 184 | } 185 | } 186 | } 187 | 188 | // Progress bars =============================================================== 189 | 190 | // Containers ================================================================== 191 | .modal .close{ 192 | color: $black; 193 | } 194 | -------------------------------------------------------------------------------- /scss/honoka/_honoka.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Core functions 4 | @import "bootstrap/scss/functions"; 5 | 6 | // Honoka variables 7 | @import "honoka/variables"; 8 | 9 | @import "bootstrap/scss/variables"; 10 | @import "bootstrap/scss/mixins"; 11 | @import "bootstrap/scss/root"; 12 | 13 | // Core CSS 14 | @import "bootstrap/scss/reboot"; 15 | @import "bootstrap/scss/type"; 16 | @import "bootstrap/scss/images"; 17 | @import "bootstrap/scss/code"; 18 | @import "bootstrap/scss/grid"; 19 | @import "bootstrap/scss/tables"; 20 | @import "bootstrap/scss/forms"; 21 | @import "bootstrap/scss/buttons"; 22 | 23 | // Components 24 | @import "bootstrap/scss/transitions"; 25 | @import "bootstrap/scss/dropdown"; 26 | @import "bootstrap/scss/button-group"; 27 | @import "bootstrap/scss/input-group"; 28 | @import "bootstrap/scss/custom-forms"; 29 | @import "bootstrap/scss/nav"; 30 | @import "bootstrap/scss/navbar"; 31 | @import "bootstrap/scss/card"; 32 | @import "bootstrap/scss/breadcrumb"; 33 | @import "bootstrap/scss/pagination"; 34 | @import "bootstrap/scss/badge"; 35 | @import "bootstrap/scss/jumbotron"; 36 | @import "bootstrap/scss/alert"; 37 | @import "bootstrap/scss/progress"; 38 | @import "bootstrap/scss/media"; 39 | @import "bootstrap/scss/list-group"; 40 | @import "bootstrap/scss/close"; 41 | @import "bootstrap/scss/modal"; 42 | @import "bootstrap/scss/tooltip"; 43 | @import "bootstrap/scss/popover"; 44 | @import "bootstrap/scss/carousel"; 45 | @import "bootstrap/scss/utilities"; 46 | @import "bootstrap/scss/print"; 47 | 48 | // Honoka original setting 49 | @import "honoka/override"; 50 | 51 | // Bootswatch 52 | @import "honoka/bootswatch"; 53 | -------------------------------------------------------------------------------- /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/_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 | // Applied bootswatch/dist/flatly/_variables.scss 13d7f1c 8 | 9 | // 10 | // Color system 11 | // 12 | 13 | // stylelint-disable 14 | $white: #fff !default; 15 | $gray-100: #f8f9fa !default; 16 | $gray-200: #ecf0f1 !default; 17 | $gray-300: #dee2e6 !default; 18 | $gray-400: #ced4da !default; 19 | $gray-500: #b4bcc2 !default; 20 | $gray-600: #95a5a6 !default; 21 | $gray-700: #7b8a8b !default; 22 | $gray-800: #343a40 !default; 23 | $gray-900: #212529 !default; 24 | $black: #000 !default; 25 | 26 | $grays: () !default; 27 | $grays: map-merge(( 28 | "100": $gray-100, 29 | "200": $gray-200, 30 | "300": $gray-300, 31 | "400": $gray-400, 32 | "500": $gray-500, 33 | "600": $gray-600, 34 | "700": $gray-700, 35 | "800": $gray-800, 36 | "900": $gray-900 37 | ), $grays); 38 | 39 | $blue: #2C3E50 !default; 40 | $indigo: #6610f2 !default; 41 | $purple: #6f42c1 !default; 42 | $pink: #e83e8c !default; 43 | $red: #E74C3C !default; 44 | $orange: #fd7e14 !default; 45 | $yellow: #F39C12 !default; 46 | $green: #18BC9C !default; 47 | $teal: #20c997 !default; 48 | $cyan: #3498DB !default; 49 | 50 | $colors: () !default; 51 | $colors: map-merge(( 52 | "blue": $blue, 53 | "indigo": $indigo, 54 | "purple": $purple, 55 | "pink": $pink, 56 | "red": $red, 57 | "orange": $orange, 58 | "yellow": $yellow, 59 | "green": $green, 60 | "teal": $teal, 61 | "cyan": $cyan, 62 | "white": $white, 63 | "gray": $gray-600, 64 | "gray-dark": $gray-800 65 | ), $colors); 66 | 67 | $primary: $blue !default; 68 | $secondary: $gray-600 !default; 69 | $success: $green !default; 70 | $info: $cyan !default; 71 | $warning: $yellow !default; 72 | $danger: $red !default; 73 | $light: $gray-200 !default; 74 | $dark: $gray-700 !default; 75 | 76 | $theme-colors: () !default; 77 | $theme-colors: map-merge(( 78 | "primary": $primary, 79 | "secondary": $secondary, 80 | "success": $success, 81 | "info": $info, 82 | "warning": $warning, 83 | "danger": $danger, 84 | "light": $light, 85 | "dark": $dark 86 | ), $theme-colors); 87 | // stylelint-enable 88 | 89 | // Set a specific jump point for requesting color jumps 90 | $theme-color-interval: 8% !default; 91 | 92 | // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. 93 | $yiq-contrasted-threshold: 150 !default; 94 | 95 | // Customize the light and dark text colors for use in our YIQ color contrast function. 96 | $yiq-text-dark: $gray-900 !default; 97 | $yiq-text-light: $white !default; 98 | 99 | // Options 100 | // 101 | // Quickly modify global styling by enabling or disabling optional features. 102 | 103 | $enable-caret: true !default; 104 | $enable-rounded: true !default; 105 | $enable-shadows: false !default; 106 | $enable-gradients: false !default; 107 | $enable-transitions: true !default; 108 | $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS 109 | $enable-grid-classes: true !default; 110 | $enable-print-styles: true !default; 111 | 112 | 113 | // Spacing 114 | // 115 | // Control the default styling of most Bootstrap elements by modifying these 116 | // variables. Mostly focused on spacing. 117 | // You can add more entries to the $spacers map, should you need more variation. 118 | 119 | // stylelint-disable 120 | $spacer: 1rem !default; 121 | $spacers: () !default; 122 | $spacers: map-merge(( 123 | 0: 0, 124 | 1: ($spacer * .25), 125 | 2: ($spacer * .5), 126 | 3: $spacer, 127 | 4: ($spacer * 1.5), 128 | 5: ($spacer * 3) 129 | ), $spacers); 130 | 131 | // This variable affects the `.h-*` and `.w-*` classes. 132 | $sizes: () !default; 133 | $sizes: map-merge(( 134 | 25: 25%, 135 | 50: 50%, 136 | 75: 75%, 137 | 100: 100% 138 | ), $sizes); 139 | // stylelint-enable 140 | 141 | // Body 142 | // 143 | // Settings for the `` element. 144 | 145 | $body-bg: $white !default; 146 | $body-color: $gray-900 !default; 147 | 148 | // Links 149 | // 150 | // Style anchor elements. 151 | 152 | $link-color: $success !default; 153 | $link-decoration: none !default; 154 | $link-hover-color: darken($link-color, 15%) !default; 155 | $link-hover-decoration: underline !default; 156 | 157 | // Paragraphs 158 | // 159 | // Style p element. 160 | 161 | $paragraph-margin-bottom: 1rem !default; 162 | 163 | 164 | // Grid breakpoints 165 | // 166 | // Define the minimum dimensions at which your layout will change, 167 | // adapting to different screen sizes, for use in media queries. 168 | 169 | $grid-breakpoints: ( 170 | xs: 0, 171 | sm: 576px, 172 | md: 768px, 173 | lg: 992px, 174 | xl: 1200px 175 | ) !default; 176 | 177 | @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); 178 | @include _assert-starts-at-zero($grid-breakpoints); 179 | 180 | 181 | // Grid containers 182 | // 183 | // Define the maximum width of `.container` for different screen sizes. 184 | 185 | $container-max-widths: ( 186 | sm: 540px, 187 | md: 720px, 188 | lg: 960px, 189 | xl: 1140px 190 | ) !default; 191 | 192 | @include _assert-ascending($container-max-widths, "$container-max-widths"); 193 | 194 | 195 | // Grid columns 196 | // 197 | // Set the number of columns and specify the width of the gutters. 198 | 199 | $grid-columns: 12 !default; 200 | $grid-gutter-width: 30px !default; 201 | 202 | // Components 203 | // 204 | // Define common padding and border radius sizes and more. 205 | 206 | $line-height-lg: 1.5 !default; 207 | $line-height-sm: 1.5 !default; 208 | 209 | $border-width: 1px !default; 210 | $border-color: $gray-300 !default; 211 | 212 | $border-radius: .25rem !default; 213 | $border-radius-lg: .3rem !default; 214 | $border-radius-sm: .2rem !default; 215 | 216 | $component-active-color: $white !default; 217 | $component-active-bg: theme-color("primary") !default; 218 | 219 | $caret-width: .3em !default; 220 | 221 | $transition-base: all .2s ease-in-out !default; 222 | $transition-fade: opacity .15s linear !default; 223 | $transition-collapse: height .35s ease !default; 224 | 225 | 226 | // Fonts 227 | // 228 | // Font, line-height, and color for body text, headings, and more. 229 | 230 | // stylelint-disable value-keyword-case 231 | $font-family-sans-serif: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; 232 | $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; 233 | $font-family-serif: "Times New Roman", Times, "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif !default; 234 | $font-family-base: $font-family-sans-serif !default; 235 | // stylelint-enable value-keyword-case 236 | 237 | $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` 238 | $font-size-lg: ($font-size-base * 1.25) !default; 239 | $font-size-sm: ($font-size-base * .875) !default; 240 | 241 | $font-weight-light: 400 !default; 242 | $font-weight-normal: 400 !default; 243 | $font-weight-bold: 600 !default; 244 | 245 | $font-weight-base: $font-weight-normal !default; 246 | $line-height-base: 1.5 !default; 247 | 248 | $h1-font-size: $font-size-base * 2.5 !default; 249 | $h2-font-size: $font-size-base * 2 !default; 250 | $h3-font-size: $font-size-base * 1.75 !default; 251 | $h4-font-size: $font-size-base * 1.5 !default; 252 | $h5-font-size: $font-size-base * 1.25 !default; 253 | $h6-font-size: $font-size-base !default; 254 | 255 | $headings-margin-bottom: ($spacer / 2) !default; 256 | $headings-font-family: $font-family-sans-serif !default; 257 | $headings-font-weight: $font-weight-bold !default; 258 | $headings-line-height: 1.2 !default; 259 | $headings-color: inherit !default; 260 | 261 | $display1-size: 6rem !default; 262 | $display2-size: 5.5rem !default; 263 | $display3-size: 4.5rem !default; 264 | $display4-size: 3.5rem !default; 265 | 266 | $display1-weight: $font-weight-normal !default; 267 | $display2-weight: $font-weight-normal !default; 268 | $display3-weight: $font-weight-normal !default; 269 | $display4-weight: $font-weight-normal !default; 270 | $display-line-height: $headings-line-height !default; 271 | 272 | $lead-font-size: ($font-size-base * 1.25) !default; 273 | $lead-font-weight: $font-weight-normal !default; 274 | 275 | $small-font-size: 80% !default; 276 | 277 | $text-muted: $gray-600 !default; 278 | 279 | $blockquote-small-color: $gray-600 !default; 280 | $blockquote-font-size: $font-size-base !default; 281 | 282 | $hr-border-color: rgba($black, .1) !default; 283 | $hr-border-width: $border-width !default; 284 | 285 | $mark-padding: .2em !default; 286 | 287 | $dt-font-weight: $font-weight-bold !default; 288 | 289 | $kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; 290 | $nested-kbd-font-weight: $font-weight-bold !default; 291 | 292 | $list-inline-padding: .5rem !default; 293 | 294 | $mark-bg: #fcf8e3 !default; 295 | 296 | $hr-margin-y: $spacer !default; 297 | 298 | 299 | // Tables 300 | // 301 | // Customizes the `.table` component with basic values, each used across all table variations. 302 | 303 | $table-cell-padding: .75rem !default; 304 | $table-cell-padding-sm: .3rem !default; 305 | 306 | $table-bg: transparent !default; 307 | $table-accent-bg: $gray-200 !default; 308 | $table-hover-bg: rgba($black, .075) !default; 309 | $table-active-bg: $table-hover-bg !default; 310 | 311 | $table-border-width: $border-width !default; 312 | $table-border-color: $gray-300 !default; 313 | 314 | $table-head-bg: $gray-200 !default; 315 | $table-head-color: $gray-700 !default; 316 | 317 | $table-dark-bg: $gray-900 !default; 318 | $table-dark-accent-bg: rgba($white, .05) !default; 319 | $table-dark-hover-bg: rgba($white, .075) !default; 320 | $table-dark-border-color: lighten($gray-900, 7.5%) !default; 321 | $table-dark-color: $body-bg !default; 322 | 323 | 324 | // Buttons + Forms 325 | // 326 | // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. 327 | 328 | $input-btn-padding-y: .375rem !default; 329 | $input-btn-padding-x: .75rem !default; 330 | $input-btn-line-height: $line-height-base !default; 331 | 332 | $input-btn-focus-width: .2rem !default; 333 | $input-btn-focus-color: rgba($component-active-bg, .25) !default; 334 | $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; 335 | 336 | $input-btn-padding-y-sm: .25rem !default; 337 | $input-btn-padding-x-sm: .5rem !default; 338 | $input-btn-line-height-sm: $line-height-sm !default; 339 | 340 | $input-btn-padding-y-lg: .5rem !default; 341 | $input-btn-padding-x-lg: 1rem !default; 342 | $input-btn-line-height-lg: $line-height-lg !default; 343 | 344 | $input-btn-border-width: $border-width !default; 345 | 346 | 347 | // Buttons 348 | // 349 | // For each of Bootstrap's buttons, define text, background, and border color. 350 | 351 | $btn-padding-y: $input-btn-padding-y !default; 352 | $btn-padding-x: $input-btn-padding-x !default; 353 | $btn-line-height: $input-btn-line-height !default; 354 | 355 | $btn-padding-y-sm: $input-btn-padding-y-sm !default; 356 | $btn-padding-x-sm: $input-btn-padding-x-sm !default; 357 | $btn-line-height-sm: $input-btn-line-height-sm !default; 358 | 359 | $btn-padding-y-lg: $input-btn-padding-y-lg !default; 360 | $btn-padding-x-lg: $input-btn-padding-x-lg !default; 361 | $btn-line-height-lg: $input-btn-line-height-lg !default; 362 | 363 | $btn-border-width: $input-btn-border-width !default; 364 | 365 | $btn-font-weight: $font-weight-normal !default; 366 | $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; 367 | $btn-focus-width: $input-btn-focus-width !default; 368 | $btn-focus-box-shadow: $input-btn-focus-box-shadow !default; 369 | $btn-disabled-opacity: .65 !default; 370 | $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; 371 | 372 | $btn-link-disabled-color: $gray-600 !default; 373 | 374 | $btn-block-spacing-y: .5rem !default; 375 | 376 | // Allows for customizing button radius independently from global border radius 377 | $btn-border-radius: $border-radius !default; 378 | $btn-border-radius-lg: $border-radius-lg !default; 379 | $btn-border-radius-sm: $border-radius-sm !default; 380 | 381 | $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; 382 | 383 | 384 | // Forms 385 | 386 | $input-padding-y: $input-btn-padding-y !default; 387 | $input-padding-x: $input-btn-padding-x !default; 388 | $input-line-height: $input-btn-line-height !default; 389 | 390 | $input-padding-y-sm: $input-btn-padding-y-sm !default; 391 | $input-padding-x-sm: $input-btn-padding-x-sm !default; 392 | $input-line-height-sm: $input-btn-line-height-sm !default; 393 | 394 | $input-padding-y-lg: $input-btn-padding-y-lg !default; 395 | $input-padding-x-lg: $input-btn-padding-x-lg !default; 396 | $input-line-height-lg: $input-btn-line-height-lg !default; 397 | 398 | $input-bg: $white !default; 399 | $input-disabled-bg: $gray-200 !default; 400 | 401 | $input-color: $gray-700 !default; 402 | $input-border-color: $gray-400 !default; 403 | $input-border-width: $input-btn-border-width !default; 404 | $input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; 405 | 406 | $input-border-radius: $border-radius !default; 407 | $input-border-radius-lg: $border-radius-lg !default; 408 | $input-border-radius-sm: $border-radius-sm !default; 409 | 410 | $input-focus-bg: $input-bg !default; 411 | $input-focus-border-color: lighten($component-active-bg, 25%) !default; 412 | $input-focus-color: $input-color !default; 413 | $input-focus-width: $input-btn-focus-width !default; 414 | $input-focus-box-shadow: $input-btn-focus-box-shadow !default; 415 | 416 | $input-placeholder-color: $gray-600 !default; 417 | 418 | $input-height-border: $input-border-width * 2 !default; 419 | 420 | $input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; 421 | $input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; 422 | 423 | $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; 424 | $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; 425 | 426 | $input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; 427 | $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; 428 | 429 | $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; 430 | 431 | $form-text-margin-top: .25rem !default; 432 | 433 | $form-check-input-gutter: 1.25rem !default; 434 | $form-check-input-margin-y: .3rem !default; 435 | $form-check-input-margin-x: .25rem !default; 436 | 437 | $form-check-inline-margin-x: .75rem !default; 438 | $form-check-inline-input-margin-x: .3125rem !default; 439 | 440 | $form-group-margin-bottom: 1rem !default; 441 | 442 | $input-group-addon-color: $input-color !default; 443 | $input-group-addon-bg: $gray-200 !default; 444 | $input-group-addon-border-color: $input-border-color !default; 445 | 446 | $custom-control-gutter: 1.5rem !default; 447 | $custom-control-spacer-x: 1rem !default; 448 | 449 | $custom-control-indicator-size: 1rem !default; 450 | $custom-control-indicator-bg: $gray-300 !default; 451 | $custom-control-indicator-bg-size: 50% 50% !default; 452 | $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; 453 | 454 | $custom-control-indicator-disabled-bg: $gray-200 !default; 455 | $custom-control-label-disabled-color: $gray-600 !default; 456 | 457 | $custom-control-indicator-checked-color: $component-active-color !default; 458 | $custom-control-indicator-checked-bg: $component-active-bg !default; 459 | $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; 460 | $custom-control-indicator-checked-box-shadow: none !default; 461 | 462 | $custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; 463 | 464 | $custom-control-indicator-active-color: $component-active-color !default; 465 | $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; 466 | $custom-control-indicator-active-box-shadow: none !default; 467 | 468 | $custom-checkbox-indicator-border-radius: $border-radius !default; 469 | $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 470 | 471 | $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; 472 | $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; 473 | $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 474 | $custom-checkbox-indicator-indeterminate-box-shadow: none !default; 475 | 476 | $custom-radio-indicator-border-radius: 50% !default; 477 | $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 478 | 479 | $custom-select-padding-y: .375rem !default; 480 | $custom-select-padding-x: .75rem !default; 481 | $custom-select-height: $input-height !default; 482 | $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator 483 | $custom-select-line-height: $input-btn-line-height !default; 484 | $custom-select-color: $input-color !default; 485 | $custom-select-disabled-color: $gray-600 !default; 486 | $custom-select-bg: $white !default; 487 | $custom-select-disabled-bg: $gray-200 !default; 488 | $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions 489 | $custom-select-indicator-color: $gray-800 !default; 490 | $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 491 | $custom-select-border-width: $input-btn-border-width !default; 492 | $custom-select-border-color: $input-border-color !default; 493 | $custom-select-border-radius: $border-radius !default; 494 | 495 | $custom-select-focus-border-color: $input-focus-border-color !default; 496 | $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; 497 | 498 | $custom-select-font-size-sm: 75% !default; 499 | $custom-select-height-sm: $input-height-sm !default; 500 | 501 | $custom-select-font-size-lg: 125% !default; 502 | $custom-select-height-lg: $input-height-lg !default; 503 | 504 | $custom-file-height: $input-height !default; 505 | $custom-file-focus-border-color: $input-focus-border-color !default; 506 | $custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; 507 | 508 | $custom-file-padding-y: $input-btn-padding-y !default; 509 | $custom-file-padding-x: $input-btn-padding-x !default; 510 | $custom-file-line-height: $input-btn-line-height !default; 511 | $custom-file-color: $input-color !default; 512 | $custom-file-bg: $input-bg !default; 513 | $custom-file-border-width: $input-btn-border-width !default; 514 | $custom-file-border-color: $input-border-color !default; 515 | $custom-file-border-radius: $input-border-radius !default; 516 | $custom-file-box-shadow: $input-box-shadow !default; 517 | $custom-file-button-color: $custom-file-color !default; 518 | $custom-file-button-bg: $input-group-addon-bg !default; 519 | $custom-file-text: ( 520 | en: "Browse" 521 | ) !default; 522 | 523 | 524 | // Form validation 525 | $form-feedback-margin-top: $form-text-margin-top !default; 526 | $form-feedback-font-size: $small-font-size !default; 527 | $form-feedback-valid-color: theme-color("success") !default; 528 | $form-feedback-invalid-color: theme-color("danger") !default; 529 | 530 | 531 | // Dropdowns 532 | // 533 | // Dropdown menu container and contents. 534 | 535 | $dropdown-min-width: 10rem !default; 536 | $dropdown-padding-y: .5rem !default; 537 | $dropdown-spacer: .125rem !default; 538 | $dropdown-bg: $white !default; 539 | $dropdown-border-color: rgba($black, .15) !default; 540 | $dropdown-border-radius: $border-radius !default; 541 | $dropdown-border-width: $border-width !default; 542 | $dropdown-divider-bg: $gray-200 !default; 543 | $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; 544 | 545 | $dropdown-link-color: $gray-700 !default; 546 | $dropdown-link-hover-color: $white !default; 547 | $dropdown-link-hover-bg: $primary !default; 548 | 549 | $dropdown-link-active-color: $component-active-color !default; 550 | $dropdown-link-active-bg: $component-active-bg !default; 551 | 552 | $dropdown-link-disabled-color: $gray-600 !default; 553 | 554 | $dropdown-item-padding-y: .25rem !default; 555 | $dropdown-item-padding-x: 1.5rem !default; 556 | 557 | $dropdown-header-color: $gray-600 !default; 558 | 559 | 560 | // Z-index master list 561 | // 562 | // Warning: Avoid customizing these values. They're used for a bird's eye view 563 | // of components dependent on the z-axis and are designed to all work together. 564 | 565 | $zindex-dropdown: 1000 !default; 566 | $zindex-sticky: 1020 !default; 567 | $zindex-fixed: 1030 !default; 568 | $zindex-modal-backdrop: 1040 !default; 569 | $zindex-modal: 1050 !default; 570 | $zindex-popover: 1060 !default; 571 | $zindex-tooltip: 1070 !default; 572 | 573 | // Navs 574 | 575 | $nav-link-padding-y: .5rem !default; 576 | $nav-link-padding-x: 1rem !default; 577 | $nav-link-disabled-color: $gray-600 !default; 578 | 579 | $nav-tabs-border-color: $gray-200 !default; 580 | $nav-tabs-border-width: $border-width !default; 581 | $nav-tabs-border-radius: $border-radius !default; 582 | $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; 583 | $nav-tabs-link-active-color: $gray-700 !default; 584 | $nav-tabs-link-active-bg: $body-bg !default; 585 | $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; 586 | 587 | $nav-pills-border-radius: $border-radius !default; 588 | $nav-pills-link-active-color: $component-active-color !default; 589 | $nav-pills-link-active-bg: $component-active-bg !default; 590 | 591 | // Navbar 592 | 593 | $navbar-padding-y: ($spacer * 1.2) !default; 594 | $navbar-padding-x: ($spacer * 1.5) !default; 595 | 596 | $navbar-nav-link-padding-x: .5rem !default; 597 | 598 | $navbar-brand-font-size: $font-size-lg !default; 599 | // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link 600 | $nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; 601 | $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; 602 | $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; 603 | 604 | $navbar-toggler-padding-y: .25rem !default; 605 | $navbar-toggler-padding-x: .75rem !default; 606 | $navbar-toggler-font-size: $font-size-lg !default; 607 | $navbar-toggler-border-radius: $btn-border-radius !default; 608 | 609 | $navbar-dark-color: $white !default; 610 | $navbar-dark-hover-color: $success !default; 611 | $navbar-dark-active-color: $white !default; 612 | $navbar-dark-disabled-color: rgba($white, .25) !default; 613 | $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 614 | $navbar-dark-toggler-border-color: rgba($white, .1) !default; 615 | 616 | $navbar-light-color: rgba($black, .5) !default; 617 | $navbar-light-hover-color: rgba($black, .7) !default; 618 | $navbar-light-active-color: rgba($black, .9) !default; 619 | $navbar-light-disabled-color: rgba($black, .3) !default; 620 | $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 621 | $navbar-light-toggler-border-color: rgba($black, .1) !default; 622 | 623 | // Pagination 624 | 625 | $pagination-padding-y: .5rem !default; 626 | $pagination-padding-x: .75rem !default; 627 | $pagination-padding-y-sm: .25rem !default; 628 | $pagination-padding-x-sm: .5rem !default; 629 | $pagination-padding-y-lg: .75rem !default; 630 | $pagination-padding-x-lg: 1.5rem !default; 631 | $pagination-line-height: 1.25 !default; 632 | 633 | $pagination-color: $white !default; 634 | $pagination-bg: $success !default; 635 | $pagination-border-width: $border-width !default; 636 | $pagination-border-color: transparent !default; 637 | 638 | $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; 639 | 640 | $pagination-hover-color: $white !default; 641 | $pagination-hover-bg: darken($success, 15%) !default; 642 | $pagination-hover-border-color: transparent !default; 643 | 644 | $pagination-active-color: $component-active-color !default; 645 | $pagination-active-bg: $pagination-hover-bg !default; 646 | $pagination-active-border-color: transparent !default; 647 | 648 | $pagination-disabled-color: $gray-200 !default; 649 | $pagination-disabled-bg: lighten($success, 15%) !default; 650 | $pagination-disabled-border-color: transparent !default; 651 | 652 | 653 | // Jumbotron 654 | 655 | $jumbotron-padding: 2rem !default; 656 | $jumbotron-bg: $gray-200 !default; 657 | 658 | 659 | // Cards 660 | 661 | $card-spacer-y: .75rem !default; 662 | $card-spacer-x: 1.25rem !default; 663 | $card-border-width: $border-width !default; 664 | $card-border-radius: $border-radius !default; 665 | $card-border-color: rgba($black, .125) !default; 666 | $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; 667 | $card-cap-bg: rgba($black, .03) !default; 668 | $card-bg: $white !default; 669 | 670 | $card-img-overlay-padding: 1.25rem !default; 671 | 672 | $card-group-margin: ($grid-gutter-width / 2) !default; 673 | $card-deck-margin: $card-group-margin !default; 674 | 675 | $card-columns-count: 3 !default; 676 | $card-columns-gap: 1.25rem !default; 677 | $card-columns-margin: $card-spacer-y !default; 678 | 679 | 680 | // Tooltips 681 | 682 | $tooltip-font-size: $font-size-sm !default; 683 | $tooltip-max-width: 200px !default; 684 | $tooltip-color: $white !default; 685 | $tooltip-bg: $black !default; 686 | $tooltip-border-radius: $border-radius !default; 687 | $tooltip-opacity: .9 !default; 688 | $tooltip-padding-y: .25rem !default; 689 | $tooltip-padding-x: .5rem !default; 690 | $tooltip-margin: 0 !default; 691 | 692 | $tooltip-arrow-width: .8rem !default; 693 | $tooltip-arrow-height: .4rem !default; 694 | $tooltip-arrow-color: $tooltip-bg !default; 695 | 696 | 697 | // Popovers 698 | 699 | $popover-font-size: $font-size-sm !default; 700 | $popover-bg: $white !default; 701 | $popover-max-width: 276px !default; 702 | $popover-border-width: $border-width !default; 703 | $popover-border-color: rgba($black, .2) !default; 704 | $popover-border-radius: $border-radius-lg !default; 705 | $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; 706 | 707 | $popover-header-bg: darken($popover-bg, 3%) !default; 708 | $popover-header-color: $headings-color !default; 709 | $popover-header-padding-y: .5rem !default; 710 | $popover-header-padding-x: .75rem !default; 711 | 712 | $popover-body-color: $body-color !default; 713 | $popover-body-padding-y: $popover-header-padding-y !default; 714 | $popover-body-padding-x: $popover-header-padding-x !default; 715 | 716 | $popover-arrow-width: 1rem !default; 717 | $popover-arrow-height: .5rem !default; 718 | $popover-arrow-color: $popover-bg !default; 719 | 720 | $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; 721 | 722 | 723 | // Badges 724 | 725 | $badge-font-size: 75% !default; 726 | $badge-font-weight: $font-weight-bold !default; 727 | $badge-padding-y: .25em !default; 728 | $badge-padding-x: .4em !default; 729 | $badge-border-radius: $border-radius !default; 730 | 731 | $badge-pill-padding-x: .6em !default; 732 | // Use a higher than normal value to ensure completely rounded edges when 733 | // customizing padding or font-size on labels. 734 | $badge-pill-border-radius: 10rem !default; 735 | 736 | 737 | // Modals 738 | 739 | // Padding applied to the modal body 740 | $modal-inner-padding: 1rem !default; 741 | 742 | $modal-dialog-margin: .5rem !default; 743 | $modal-dialog-margin-y-sm-up: 1.75rem !default; 744 | 745 | $modal-title-line-height: $line-height-base !default; 746 | 747 | $modal-content-bg: $white !default; 748 | $modal-content-border-color: rgba($black, .2) !default; 749 | $modal-content-border-width: $border-width !default; 750 | $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; 751 | $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; 752 | 753 | $modal-backdrop-bg: $black !default; 754 | $modal-backdrop-opacity: .5 !default; 755 | $modal-header-border-color: $gray-200 !default; 756 | $modal-footer-border-color: $modal-header-border-color !default; 757 | $modal-header-border-width: $modal-content-border-width !default; 758 | $modal-footer-border-width: $modal-header-border-width !default; 759 | $modal-header-padding: 1rem !default; 760 | 761 | $modal-lg: 800px !default; 762 | $modal-md: 500px !default; 763 | $modal-sm: 300px !default; 764 | 765 | $modal-transition: transform .3s ease-out !default; 766 | 767 | 768 | // Alerts 769 | // 770 | // Define alert colors, border radius, and padding. 771 | 772 | $alert-padding-y: .75rem !default; 773 | $alert-padding-x: 1.25rem !default; 774 | $alert-margin-bottom: 1rem !default; 775 | $alert-border-radius: $border-radius !default; 776 | $alert-link-font-weight: $font-weight-bold !default; 777 | $alert-border-width: $border-width !default; 778 | 779 | $alert-bg-level: -10 !default; 780 | $alert-border-level: -9 !default; 781 | $alert-color-level: 6 !default; 782 | 783 | 784 | // Progress bars 785 | 786 | $progress-height: 1rem !default; 787 | $progress-font-size: ($font-size-base * .75) !default; 788 | $progress-bg: $gray-200 !default; 789 | $progress-border-radius: $border-radius !default; 790 | $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; 791 | $progress-bar-color: $white !default; 792 | $progress-bar-bg: theme-color("primary") !default; 793 | $progress-bar-animation-timing: 1s linear infinite !default; 794 | $progress-bar-transition: width .6s ease !default; 795 | 796 | // List group 797 | 798 | $list-group-bg: $gray-200 !default; 799 | $list-group-border-color: rgba($black, .125) !default; 800 | $list-group-border-width: $border-width !default; 801 | $list-group-border-radius: $border-radius !default; 802 | 803 | $list-group-item-padding-y: .75rem !default; 804 | $list-group-item-padding-x: 1.25rem !default; 805 | 806 | $list-group-hover-bg: $gray-200 !default; 807 | $list-group-active-color: $component-active-color !default; 808 | $list-group-active-bg: $component-active-bg !default; 809 | $list-group-active-border-color: $list-group-active-bg !default; 810 | 811 | $list-group-disabled-color: $gray-600 !default; 812 | $list-group-disabled-bg: $list-group-bg !default; 813 | 814 | $list-group-action-color: $gray-700 !default; 815 | $list-group-action-hover-color: $list-group-action-color !default; 816 | 817 | $list-group-action-active-color: $body-color !default; 818 | $list-group-action-active-bg: $gray-200 !default; 819 | 820 | 821 | // Image thumbnails 822 | 823 | $thumbnail-padding: .25rem !default; 824 | $thumbnail-bg: $body-bg !default; 825 | $thumbnail-border-width: $border-width !default; 826 | $thumbnail-border-color: $gray-300 !default; 827 | $thumbnail-border-radius: $border-radius !default; 828 | $thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; 829 | 830 | 831 | // Figures 832 | 833 | $figure-caption-font-size: 90% !default; 834 | $figure-caption-color: $gray-600 !default; 835 | 836 | 837 | // Breadcrumbs 838 | 839 | $breadcrumb-padding-y: .75rem !default; 840 | $breadcrumb-padding-x: 1rem !default; 841 | $breadcrumb-item-padding: .5rem !default; 842 | 843 | $breadcrumb-margin-bottom: 1rem !default; 844 | 845 | $breadcrumb-bg: $gray-200 !default; 846 | $breadcrumb-divider-color: $gray-600 !default; 847 | $breadcrumb-active-color: $gray-600 !default; 848 | $breadcrumb-divider: "/" !default; 849 | 850 | 851 | // Carousel 852 | 853 | $carousel-control-color: $white !default; 854 | $carousel-control-width: 15% !default; 855 | $carousel-control-opacity: .5 !default; 856 | 857 | $carousel-indicator-width: 30px !default; 858 | $carousel-indicator-height: 3px !default; 859 | $carousel-indicator-spacer: 3px !default; 860 | $carousel-indicator-active-bg: $white !default; 861 | 862 | $carousel-caption-width: 70% !default; 863 | $carousel-caption-color: $white !default; 864 | 865 | $carousel-control-icon-width: 20px !default; 866 | 867 | $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 868 | $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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"), "#", "%23") !default; 869 | 870 | $carousel-transition: transform .6s ease !default; 871 | 872 | 873 | // Close 874 | 875 | $close-font-size: $font-size-base * 1.5 !default; 876 | $close-font-weight: $font-weight-bold !default; 877 | $close-color: $black !default; 878 | $close-text-shadow: 0 1px 0 $white !default; 879 | 880 | // Code 881 | 882 | $code-font-size: 87.5% !default; 883 | $code-color: $pink !default; 884 | 885 | $kbd-padding-y: .2rem !default; 886 | $kbd-padding-x: .4rem !default; 887 | $kbd-font-size: $code-font-size !default; 888 | $kbd-color: $white !default; 889 | $kbd-bg: $gray-900 !default; 890 | 891 | $pre-color: $gray-900 !default; 892 | $pre-scrollable-max-height: 340px !default; 893 | 894 | 895 | // Printing 896 | $print-page-size: a3 !default; 897 | $print-body-min-width: map-get($grid-breakpoints, "lg") !default; 898 | --------------------------------------------------------------------------------