├── LICENSE ├── _develop ├── atomic-design.png └── icon │ ├── echo_icon_facebook.svg │ ├── echo_icon_instagram.svg │ ├── echo_icon_line.svg │ ├── echo_icon_mail.svg │ ├── echo_icon_tel.svg │ ├── echo_icon_twitter.svg │ └── echo_icon_youtube.svg ├── dist ├── css │ ├── _uncompressed │ │ ├── echo-color.css │ │ ├── echo-font.css │ │ └── echo.css │ ├── echo-color.min.css │ ├── echo-font.min.css │ └── echo.min.css ├── doc_include │ ├── fonttable_article.html │ ├── fonttable_body.html │ ├── fonttable_button.html │ ├── fonttable_card.html │ ├── fonttable_display.html │ ├── fonttable_form.html │ ├── fonttable_nav.html │ ├── fonttable_select.html │ ├── fonttable_title_level.html │ ├── footer.inc │ ├── footer_copyright.inc │ ├── header.inc │ ├── html_head.inc │ ├── sitemap_docs.inc │ └── sitemap_styleguide.inc ├── docs │ ├── design-tokens-color.html │ ├── design-tokens-font.html │ ├── etc-about.html │ ├── etc-ie11.html │ ├── index.html │ ├── introduction-bem.html │ ├── introduction-quickstart.html │ ├── introduction-template.html │ ├── outline-breakpoint.html │ ├── outline-fontsize.html │ ├── outline-layers.html │ ├── outline-responsive.html │ ├── outline-rule.html │ └── outline-units.html ├── images │ ├── _dummy │ │ ├── image_01.jpg │ │ ├── image_01_s.jpg │ │ ├── image_02.jpg │ │ ├── image_02_s.jpg │ │ ├── image_03.jpg │ │ ├── image_03_s.jpg │ │ ├── image_04.jpg │ │ ├── image_04_s.jpg │ │ ├── image_05.jpg │ │ ├── image_05_s.jpg │ │ ├── image_06.jpg │ │ ├── image_06_m.jpg │ │ ├── image_06_s.jpg │ │ ├── image_07.jpg │ │ ├── image_07_m.jpg │ │ ├── image_07_s.jpg │ │ ├── image_08.jpg │ │ ├── image_08_m.jpg │ │ ├── image_08_s.jpg │ │ ├── image_09.jpg │ │ ├── image_09_m.jpg │ │ ├── image_09_s.jpg │ │ ├── image_10.jpg │ │ ├── image_10_m.jpg │ │ ├── image_10_s.jpg │ │ └── logo.svg │ └── echo │ │ ├── img_mainvisual_large.jpg │ │ ├── img_mainvisual_medium.jpg │ │ ├── img_mainvisual_small.jpg │ │ ├── img_mainvisual_xsmall.jpg │ │ ├── img_material-design_01.jpg │ │ ├── img_presentation_01.jpg │ │ ├── img_presentation_02.jpg │ │ ├── img_presentation_03.jpg │ │ └── logo.svg ├── index.html ├── plugins │ ├── scrollto.js │ ├── scrollto.min.js │ ├── toggle.css │ └── toggle.js ├── postcss.config.js ├── share │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── mstile-150x150.png │ ├── ogp.jpg │ ├── safari-pinned-tab.svg │ └── site.webmanifest └── styleguide │ ├── component-alert.html │ ├── component-body.html │ ├── component-box.html │ ├── component-card.html │ ├── component-flip.html │ ├── component-form.html │ ├── component-headline.html │ ├── component-hero.html │ ├── component-media.html │ ├── component-overlay.html │ ├── component-paginate.html │ ├── component-serial.html │ ├── component-step.html │ ├── component-topicpath.html │ ├── css │ ├── prism.css │ └── styleguide.css │ ├── index.html │ ├── js │ ├── common.js │ └── prism.js │ ├── layout-buttons.html │ ├── layout-cards.html │ ├── layout-container.html │ ├── layout-forms.html │ ├── layout-grid.html │ ├── layout-headlines.html │ ├── layout-labels.html │ ├── layout-medias.html │ ├── module-button.html │ ├── module-checkbox.html │ ├── module-embed.html │ ├── module-input.html │ ├── module-label.html │ ├── module-list.html │ ├── module-nav.html │ ├── module-radio.html │ ├── module-select.html │ ├── module-table.html │ ├── module-thumbnail.html │ ├── module-title.html │ ├── module-toggle.html │ ├── project-footer.html │ ├── project-header.html │ ├── project-main.html │ ├── utility-bg.html │ ├── utility-font.html │ ├── utility-hidden.html │ ├── utility-image.html │ ├── utility-line.html │ ├── utility-margin.html │ ├── utility-padding.html │ ├── utility-shadow.html │ ├── utility-sr.html │ └── utility-text.html ├── package.json ├── readme.md └── src ├── js ├── scrollto.js └── toggle.js └── scss ├── _config_advance.scss ├── _config_basic.scss ├── echo-color.scss ├── echo-font.scss ├── echo.scss ├── foundation ├── _base.scss ├── _base_color.scss ├── _base_font.scss ├── _reset.scss └── _reset_font.scss ├── layout ├── _buttons.scss ├── _cards.scss ├── _container.scss ├── _container_size.scss ├── _forms.scss ├── _forms_font.scss ├── _grid.scss ├── _headlines.scss ├── _labels.scss └── _medias.scss ├── mixin ├── _grid.scss ├── _mixin.scss ├── _responsive-spacing.scss └── _text.scss └── object ├── component ├── _alert.scss ├── _alert_color.scss ├── _body.scss ├── _body_size.scss ├── _box.scss ├── _box_color.scss ├── _box_size.scss ├── _box_style.scss ├── _card.scss ├── _card_size.scss ├── _flip.scss ├── _flip_font.scss ├── _flip_size.scss ├── _form.scss ├── _form_font.scss ├── _form_size.scss ├── _headline.scss ├── _headline_font.scss ├── _headline_size.scss ├── _hero.scss ├── _hero_font.scss ├── _hero_size.scss ├── _media.scss ├── _media_size.scss ├── _overlay.scss ├── _paginate.scss ├── _paginate_color.scss ├── _paginate_size.scss ├── _serial.scss ├── _serial_color.scss ├── _step.scss ├── _step_color.scss ├── _topicpath.scss ├── _topicpath_color.scss └── _topicpath_font.scss ├── module ├── _button.scss ├── _button_circle.scss ├── _button_color.scss ├── _button_icon.scss ├── _button_oval.scss ├── _button_size.scss ├── _button_square.scss ├── _button_style.scss ├── _checkbox.scss ├── _checkbox_color.scss ├── _embed.scss ├── _input.scss ├── _input_size.scss ├── _label.scss ├── _label_color.scss ├── _label_shape.scss ├── _label_style.scss ├── _list.scss ├── _list_size.scss ├── _nav.scss ├── _nav_color.scss ├── _nav_size.scss ├── _radio.scss ├── _radio_color.scss ├── _select.scss ├── _select_size.scss ├── _table.scss ├── _thumbnail.scss ├── _title.scss ├── _title_color.scss ├── _title_font.scss ├── _title_level.scss ├── _title_style.scss ├── _toggle.scss ├── _toggle_color.scss └── _toggle_size.scss ├── project ├── _footer.scss ├── _header.scss └── _main.scss └── utility ├── _bg.scss ├── _clearfix.scss ├── _font.scss ├── _hidden.scss ├── _image.scss ├── _line.scss ├── _margin.scss ├── _padding.scss ├── _position.scss ├── _shadow.scss ├── _sr.scss ├── _text_color.scss ├── _text_direction.scss └── _text_size.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 WebbingStudio 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. -------------------------------------------------------------------------------- /_develop/atomic-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/_develop/atomic-design.png -------------------------------------------------------------------------------- /_develop/icon/echo_icon_facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_develop/icon/echo_icon_instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_develop/icon/echo_icon_line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_develop/icon/echo_icon_mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_develop/icon/echo_icon_tel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_develop/icon/echo_icon_twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_develop/icon/echo_icon_youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/css/echo-font.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * echo.css(font) - version 3.0.1 3 | * 4 | * "echo" is CSS framework, built with consider CMS theming in East asian countries. 5 | * https://echocss.webbingstudio.com/ 6 | * 7 | * Copyright 2018 - 2021 WebbingStudio 8 | * Released under the MIT license 9 | * https://opensource.org/licenses/MIT 10 | * 11 | */b,th,dt,optgroup,strong,h1,h2,h3,h4,h5,h6{font-weight:bold}html{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","-apple-system","BlinkMacSystemFont","Meiryo",sans-serif;font-weight:300;font-weight:300}textarea,input{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","-apple-system","BlinkMacSystemFont","Meiryo",sans-serif;font-weight:300;font-weight:300}select{font-family:"-apple-system","BlinkMacSystemFont","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;font-weight:300}.echo-title{font-weight:bold}.echo-flip-lead{font-weight:bold}.echo-form-label{font-weight:bold}.echo-form-error{font-weight:bold}.echo-headline-header{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","-apple-system","BlinkMacSystemFont","Meiryo",sans-serif;font-weight:300;font-weight:300}.echo-headline-title{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","-apple-system","BlinkMacSystemFont","Meiryo",sans-serif;font-weight:300;font-weight:300}.echo-hero-lead{font-weight:bold}.echo-topicpath .echo-nav-item:last-child{font-weight:bold}.echo-forms-label{font-weight:bold}#echo-document .echo-font-bold{font-weight:bold}#echo-document .echo-font-root{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","-apple-system","BlinkMacSystemFont","Meiryo",sans-serif;font-weight:300;font-weight:300}#echo-document .echo-font-root.echo-font-bold{font-weight:bold}#echo-document .echo-font-first{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","-apple-system","BlinkMacSystemFont","Meiryo",sans-serif;font-weight:300;font-weight:300}#echo-document .echo-font-first.echo-font-bold{font-weight:bold}#echo-document .echo-font-second{font-family:"Helvetica","Roboto","-apple-system","Open Sans","Arial",sans-serif;font-weight:300;font-weight:300}#echo-document .echo-font-second.echo-font-bold{font-weight:bold}#echo-document .echo-font-third{font-family:"游明朝","Yu Mincho","游明朝体","YuMincho","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho","Bookman Old Style","Times New Roman","-apple-system","BlinkMacSystemFont",serif;font-weight:300;font-weight:300}#echo-document .echo-font-third.echo-font-bold{font-weight:bold} 12 | -------------------------------------------------------------------------------- /dist/doc_include/fonttable_article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
文字サイズの変化 group: article
(breakpoint)(fontsize)
.echo-***-sm.echo-***.echo-***-lg
md以下xssmmd
lg以上smmdlg
22 | 23 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_body.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
文字サイズの変化 group: body
(breakpoint)(fontsize)
.echo-***
md以下sm
lg以上md
12 | 13 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_button.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 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 | 33 | 34 | 35 | 36 |
スタイルの変化 group: button
(breakpoint).echo-***-sm.echo-***.echo-***-lg.echo-***-xl.echo-***-xxl
(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ
md以下xs2.25rem
(36px)		sm2.5rem
(40px)		md2.75rem
(44px)		lg3rem
(48px)		xl3.25rem
(52px)
lg以上sm2.5rem
(40px)		md2.75rem
(44px)		lg3.125rem
(50px)		xl3.5rem
(56px)		xxl4rem
(64px)
37 |
38 | 39 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_card.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 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 | 33 | 34 | 35 | 36 | 37 |
スタイルの変化 group: article
(breakpoint)(fontsize)最大幅(fontsize)最大幅(fontsize)最大幅
.echo-card-sm.echo-card.echo-card-lg
md以下xs26rem
(416px)		sm37.5rem
(600px)		md48rem
(768px)
lg以上smmdlg
38 |
39 | 40 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
文字サイズの変化 group: display
(breakpoint)(fontsize)
.echo-***-header.echo-***-lead.echo-***-body
.echo-***-link
sm以下lgmdsm
md以上xllgmd
xl以上xxlxllg
13 | 14 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_form.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
スタイルの変化 group: form
(breakpoint).echo-***-sm.echo-***.echo-***-lg
(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ
md以下xs2.25rem
(36px)		sm2.5rem
(40px)		md2.75rem
(44px)
lg以上sm2.5rem
(40px)		md2.75rem
(44px)		lg3.125rem
(50px)
29 |
30 | 31 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_nav.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
.echo-nav-labelのスタイルの変化 group: form
(breakpoint).echo-nav-sm.echo-nav.echo-nav-lg
(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ
md以下xs2.25rem
(36px)		sm2.5rem
(40px)		md2.75rem
(44px)
lg以上sm2.5rem
(40px)		md2.75rem
(44px)		lg3.125rem
(50px)
29 |
30 | 31 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_select.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
スタイルの変化 group: form
(breakpoint).echo-***-sm.echo-***.echo-***-lg
(fontsize)select要素の
最低高さ		(fontsize)select要素の
最低高さ		(fontsize)select要素の
最低高さ
md以下xs2.25rem
(36px)		sm2.5rem
(40px)		md2.75rem
(44px)
lg以上sm2.5rem
(40px)		md2.75rem
(44px)		lg3.125rem
(50px)
29 |
30 | 31 |

min-heightプロパティは、直下のselect要素に指定しなければならない（包括要素に指定した場合、select要素の高さが追随しない）。

32 | 33 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/fonttable_title_level.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 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 | 33 | 34 | 35 |
文字サイズの変化 group: title
(breakpoint)(fontsize)
.echo-***-level-6.echo-***-level-5.echo-***-level-4.echo-***-level-3.echo-***-level-2.echo-***-level-1
md以下md1.0625em
※		xlxxl3l4l
lg以上lgxlxxl3l4l5l
36 |
37 | 38 |

※level-5のみの特例。1rem = 16px の場合、17pxとなる

39 | 40 |

この表の解説

-------------------------------------------------------------------------------- /dist/doc_include/footer.inc: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /dist/doc_include/footer_copyright.inc: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /dist/doc_include/html_head.inc: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /dist/doc_include/sitemap_docs.inc: -------------------------------------------------------------------------------- 1 | 39 | -------------------------------------------------------------------------------- /dist/docs/etc-about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | echo.cssとは？ | 余談 | Documentation | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

echo.cssとは？

23 |
24 | 25 |
26 |
27 | 28 |

制作の背景

29 | 30 |

echo.cssは、愛知県豊橋市のウェブ制作者「うぇびん」が個人で制作、公開しています。

31 | 32 |

ウェビングスタジオ

33 | 34 |

私は、CMSの組み込みを前提としたコーポレートサイトの制作業務に携わっています。
35 | 製作時はデザインカンプ（またはワイヤーフレーム）を受け取って制作しますが、常にいくつかの課題がありました。

36 | 37 |

課題1: デザイン反映の際の工数

38 | 39 |

CMSテーマのプロトタイプの段階でコーディングに不備があると、デザイナーの細かい意匠を反映できず、大きな手戻りにつながっていました。
40 | Bootstrap等の既存フレームワークを利用することで改善できないかと考えたこともありました（実際、Bootstrapを採用したCMSテーマは多数あります）。
41 | しかし、どのフレームワークも「スタートアップ等ですぐ使えること」を優先しており、UIなどの外観デザインがしっかりと作られています。そのため、デザインを変更しなければならないときの工数が、一から作成するときよりも多くなってしまう状況でした。

42 | 43 |

課題2: 納品後の改修

44 | 45 |

CMSはその特性上、納品後にほぼ必ずコンテンツの改修が行われます。その際、まったく想定外（文字数、色、サイズ等）のコンテンツが追加されることがよくあります。CSS側が変更・拡充に対応できない状況を避けたいところです。

46 | 47 |

課題3: 文字サイズ

48 | 49 |

コンテンツの内容やフォントの種類によって、文字サイズを微妙に調整することがあります。基本的には、各オブジェクトの文字サイズはフレームワーク側で適切なものを提供してほしいです。しかし、変更したくなったときに、容易に対応できることが理想です。

50 | 51 |

課題4: ブロックエディタの普及

52 | 53 |

WordPressのGutenbergによって、幅を自由に変更できるブロックエディタが普及しました。このため、旧来のCSSフレームワークの定番となっていたコンテナタグでオブジェクトの最大サイズをまとめて固定することができなくなりました。また、色などの豊富なオプションに対応しなければならなくなりました。

54 | 55 |

このような背景から、いかにこれらの課題を改善するかを考えて制作したのが、echo.cssです。

56 | 57 |

命名の由来

58 | 59 |

この単語が好きだから、というのが第一の理由ですが（笑）

60 | 61 |
    62 |
  • 多くのCMSは、PHPで動作します。必ず使用されるメソッドが、結果を出力する「echo」です。
    • 63 |
  • 「echo」は日本語で「響く」という意味があります。日本には「打てば響く」ということわざがあります。打てば響くプロダクトにしたいと思います。
    • 64 |
65 | 66 | 67 |
68 |
69 | Next Internet Explorer 11への対応 70 |
71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /dist/docs/etc-ie11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Internet Explorer 11への対応 | 余談 | Documentation | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

Internet Explorer 11への対応

23 |
24 | 25 |
26 |
27 | 28 |

基本方針

29 | 30 |

かつてのWindowsの主要ブラウザであったInternet Explorer 11は、多くの新しい技術を使用することができず、開発元のMicrosoftも使用を推薦していません。

31 | 32 |

しかし、サポートが最長で2025年まで続く現状では、想定されるウェブサイトの利用者層によっては、対応を必要とされる場面もあります。

33 | 34 |

echo.cssでは、Version2.0.0から、以下の方針に基づいて対応・非対応を決定しています。

35 | 36 |
37 |
    38 |
  1. 順次、対応を終了する
    2. 39 |
  2. 対応することによって、他のブラウザに明確な機能の悪化が生じる場合は対応しない
    3. 40 |
  3. 対応することによって、フレームワークの使い勝手が大幅に悪化する場合は対応しない
    4. 41 |
  4. 重要ではない、オプション機能の場合は対応しない
    5. 42 |
  5. ライブラリの導入で代替できる場合は対応しない
    6. 43 |
  6. 対応していないコードが業界内の最良手段となった場合は対応しない
    7. 44 |
45 |
46 | 47 |

非対応の機能

48 | 49 |

.echo-buttons, .echo-cards, .echo-mediasが段組にならない

50 | 51 |

Internet Explorer 11は、柔軟なグリッドレイアウトを定義する、grid-template-columnsプロパティに対応していません。このため、すべてのセルが余白がない状態で縦に並びます。
52 | IEで同じ体裁とする場合は、このコンポーネントを使用せず、 .echo-grid, .echo-table 等に書き換えてください。

53 | 54 | 55 |

img要素をCSSでトリミングしたときに画像が歪む

56 | 57 |

Internet Explorerでは非対応のプロパティである、object-fitによるトリミングを行うようになりました。
58 | 対応する場合は、以下のクラスに別途ポリフィル（補正ライブラリ）を適用してください。

59 | 60 |

.echo-thumbnail

61 | 62 |

.echo-thumbnail-square, .echo-thumbnail-round, .echo-thumbnail-(ratio-x)to(ratio-y) を使用した場合

63 | 64 |

.echo-hero

65 | 66 |

.echo-hero-fit を使用した場合

67 | 68 |

ラベル・ナビゲーションの文字が上にずれる

69 | 70 |

Internet Explorerは、 display: flex を指定した要素のheightプロパティが auto になっていると、align-itemsプロパティが反映されない不具合があります。
71 | このため、min-heightプロパティのみとなっている .echo-label, .echo-nav-label のテキストが上にずれて見えます。
72 | 対応する場合は、 .echo-label, .echo-nav-label のheightプロパティに、具体的な値を指定してください（ただし、テキストの増減による柔軟性は失われます）。

73 | 74 | -------------------------------------------------------------------------------- /dist/docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Documentation | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

Documentation

23 |
24 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /dist/docs/introduction-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BEM記法で使用する | はじめに | Documentation | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

BEM記法で使用する

23 |
24 | 25 |
26 |
27 | 28 |

SMACSS採用の理由

29 | 30 |

CSSのクラス命名記法は、ハイフンで接続する「SMACSS」と、アンダースコアで接続する「BEM」に大きく分けられます。

31 | 32 |

echo.cssは、コーディングルールにSMACSSを採用しています。理由は以下のとおりです。

33 | 34 |
35 |
    36 |
  • クラス名が短く簡潔
    • 37 |
  • コーディングスキルが高くない制作者にも理解しやすい
    • 38 |
  • PHPやJavaScriptの変数名と重複しにくい（変数名にはキャメルケースやアンダースコアが使用されることが多いため）
    • 39 |
40 |
41 | 42 |

BEM記法に変更する手順

43 | 44 |

Sassを使用できる環境では、BEM記法に変更することができます。

45 | 46 |

設定ファイル _scss/_config_basic.scss をエディタで開き、15行目付近にある変数 $rule の値を 'bem' に変更して、リビルドしてください。

47 | 48 | 
$rule: 'bem' !default;
49 | 50 |

BEM記法の場合の基本ルール

51 | 52 |

要素同士はアンダースコア2つで接続されます。

53 | 54 | 
.echo-card__header {
55 |   padding: 10px 10px;
56 | }
57 | 
58 | .echo-card__contents {
59 |   padding: 10px 10px;
60 |   font-size: 0.75rem;
61 |   line-height: 1.125rem;
62 | }
63 | 64 |

「色」「大きさ」などを示すモディファーはハイフン2つで接続されます。

65 | 66 | 
.echo-button--info {
67 |   ...
68 | }
69 | 70 |

「AがB」といった挙動を表す key, value はハイフン2つで接続されます。

71 | 72 | 
.echo-grid__col--order--lg--last {
73 |   ...
74 | }
75 | 76 |

これらのルールを変更したい場合は、 _scss/_config_advance.scss を参照ください。

77 | 78 |
79 |
80 | Next レイヤー構造 81 |
82 |
83 | 84 | 85 | -------------------------------------------------------------------------------- /dist/docs/outline-breakpoint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ブレークポイント | 概要 | Documentation | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

ブレークポイント

23 |
24 | 25 |
26 |
27 | 28 |

ブレークポイントとは

29 | 30 |

ブレークポイントとは、echo.cssでは、ブレークポイントを定義するクラス名には、画面サイズや解像度規格名ではなく、代替名を使用しています。
31 | xxs, xs, sm, md, lg, xl, xxl の7段階があります。

32 | 33 |

スタイルガイドでは (breakpoint) と記載しています。

34 | 35 |

ブレークポイントと画面サイズ

36 | 37 |

(breakpoint) と画面サイズの対応は以下のとおりです。

38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
(breakpoint)画面サイズ想定される端末
xxs20rem (320px)iPhone SE、拡大モード
xs22.5rem (360px)一般的なスマートフォン
sm26.75rem (428px)iPhone Plusシリーズ, Pixel XLシリーズ
md48rem (768px)一般的なタブレット(portrait)
lg62.5rem (1000px)一般的なタブレット(landscape)
xl80rem (1280px)小さくしたウィンドウでの閲覧、拡大モード
xxl90rem (1440px)一般的なデスクトップ
54 |
55 | 56 |
57 |
58 | Next レイヤー構造 59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /dist/images/_dummy/image_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_01.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_01_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_01_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_02.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_02_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_02_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_03.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_03_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_03_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_04.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_04_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_04_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_05.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_05_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_05_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_06.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_06_m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_06_m.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_06_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_06_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_07.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_07_m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_07_m.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_07_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_07_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_08.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_08_m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_08_m.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_08_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_08_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_09.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_09_m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_09_m.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_09_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_09_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_10.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_10_m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_10_m.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/image_10_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/_dummy/image_10_s.jpg -------------------------------------------------------------------------------- /dist/images/_dummy/logo.svg: -------------------------------------------------------------------------------- 1 | dummy_logo -------------------------------------------------------------------------------- /dist/images/echo/img_mainvisual_large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_mainvisual_large.jpg -------------------------------------------------------------------------------- /dist/images/echo/img_mainvisual_medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_mainvisual_medium.jpg -------------------------------------------------------------------------------- /dist/images/echo/img_mainvisual_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_mainvisual_small.jpg -------------------------------------------------------------------------------- /dist/images/echo/img_mainvisual_xsmall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_mainvisual_xsmall.jpg -------------------------------------------------------------------------------- /dist/images/echo/img_material-design_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_material-design_01.jpg -------------------------------------------------------------------------------- /dist/images/echo/img_presentation_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_presentation_01.jpg -------------------------------------------------------------------------------- /dist/images/echo/img_presentation_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_presentation_02.jpg -------------------------------------------------------------------------------- /dist/images/echo/img_presentation_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/images/echo/img_presentation_03.jpg -------------------------------------------------------------------------------- /dist/plugins/scrollto.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * echo.scrollTo.js v1.0.0 3 | * Scroll smoothly to the position that considers the navigation fixed at the top of the screen. 4 | * 5 | * Copyright 2018 WebbingStudio 6 | * Released under the MIT license 7 | * https://opensource.org/licenses/MIT 8 | */ 9 | 10 | ;(function($){ 11 | "use strict"; 12 | 13 | var EchoScrollTo = window.EchoScrollTo || {}; 14 | 15 | EchoScrollTo = (function() { 16 | 17 | function EchoScrollTo(element, options) { 18 | var 19 | t = this; 20 | 21 | t.initials = { 22 | margin: 0, 23 | margin_off: 0, 24 | margin_extend: 0, 25 | speed: 300 26 | }; 27 | t.settings = $.extend({}, t.initials, options); 28 | 29 | t.init(element); 30 | 31 | $(element).on('click', function() { 32 | t.run(element); 33 | return false; 34 | }); 35 | return false; 36 | 37 | } 38 | 39 | return EchoScrollTo; 40 | 41 | }()); 42 | 43 | EchoScrollTo.prototype.init = function(element) { 44 | var 45 | t = this; 46 | 47 | return false; 48 | }; 49 | 50 | EchoScrollTo.prototype.run = function(element) { 51 | var 52 | t = this, 53 | href, 54 | target, 55 | wt, 56 | tt, 57 | ss; 58 | 59 | href = element.hash; 60 | target = $(href == '#top' ? 'body' : href); 61 | 62 | if(target.size()){ 63 | wt = $(window).scrollTop(); 64 | tt = parseFloat(target.offset().top, 10) - parseFloat(t.settings.margin, 10); 65 | if(wt < t.settings.margin_off) { 66 | tt -= parseFloat(t.settings.margin_extend, 10); 67 | } 68 | 69 | // If the moving distance exceeds 2000px, increase scroll time 70 | ss = t.settings.speed; 71 | if( Math.abs(wt - tt) > 2000 ) { 72 | ss = ( Math.abs(wt - tt) / 2000 ) / 1.5 * ss; 73 | } 74 | 75 | $('html, body').animate({ 76 | scrollTop: tt 77 | }, ss, 'swing'); 78 | } 79 | return false; 80 | }; 81 | 82 | $.fn.EchoScrollTo = function() { 83 | var 84 | element = this, 85 | options = arguments[0], 86 | args = Array.prototype.slice.call(arguments, 1), 87 | i; 88 | for (i = 0; i < element.length; i++) { 89 | if (typeof options == 'object' || typeof options == 'undefined') { 90 | element[i].EchoScrollTo = new EchoScrollTo(element[i], options); 91 | } 92 | } 93 | return element; 94 | 95 | }; 96 | 97 | $(function(){ 98 | 99 | $('.js-scrollto').EchoScrollTo(); 100 | 101 | }); 102 | 103 | })(jQuery); 104 | 105 | 106 | -------------------------------------------------------------------------------- /dist/plugins/scrollto.min.js: -------------------------------------------------------------------------------- 1 | (function($){"use strict";var EchoScrollTo=window.EchoScrollTo||{};EchoScrollTo=function(){function EchoScrollTo(element,options){var t=this;t.initials={margin:0,margin_off:0,margin_extend:0,speed:300};t.settings=$.extend({},t.initials,options);t.init(element);$(element).on("click",function(){t.run(element);return false});return false}return EchoScrollTo}();EchoScrollTo.prototype.init=function(element){var t=this;return false};EchoScrollTo.prototype.run=function(element){var t=this,href,target,wt,tt,ss;href=element.hash;target=$(href=="#top"?"body":href);if(target.size()){wt=$(window).scrollTop();tt=parseFloat(target.offset().top,10)-parseFloat(t.settings.margin,10);if(wt2e3){ss=Math.abs(wt-tt)/2e3/1.5*ss}$("html, body").animate({scrollTop:tt},ss,"swing")}return false};$.fn.EchoScrollTo=function(){var element=this,options=arguments[0],args=Array.prototype.slice.call(arguments,1),i;for(i=0;i 2 | 3 | 4 | 5 | 6 | #ffffff 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist/share/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/share/favicon-16x16.png -------------------------------------------------------------------------------- /dist/share/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/share/favicon-32x32.png -------------------------------------------------------------------------------- /dist/share/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/share/favicon.ico -------------------------------------------------------------------------------- /dist/share/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/share/mstile-150x150.png -------------------------------------------------------------------------------- /dist/share/ogp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webbingstudio/echo-css/f3185bb9d614eac1fc466ce2ff626b2b1c3d9e3e/dist/share/ogp.jpg -------------------------------------------------------------------------------- /dist/share/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 33 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /dist/share/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "echo.css", 3 | "short_name": "echo.css", 4 | "icons": [ 5 | { 6 | "src": "/share/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/share/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /dist/styleguide/component-serial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | component-serial | Style guide | css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

component-serial

23 |
24 | 25 | 32 | 33 | 34 |
35 |

echo-serial

36 | 37 |

前後リンク（ページ移動ナビゲーション）を前提とした外観に変更する。.echo-nav を包括する。
38 | 一般にはやや小さく表示されることが多いため、このサンプルコードでは .echo-nav-sm を付与している。

39 | 40 |

コンポーネント内の .echo-nav-item.prev , .echo-nav-item.next は前後移動リンクとみなされる。

41 | 42 |

.prev, .next, を変更したい場合は、 /_scss/_config_advance.scss の変数
43 | $paginate-prev, $paginate-next を変更すること。

44 | 45 | 46 |
47 | 48 |
49 | 59 |
60 | 61 |
62 | 63 | 64 | 
<div class="echo-serial">
65 |     <nav class="echo-nav echo-nav-sm">
66 |         <ul class="echo-nav-list">
67 |             <li class="echo-nav-item prev">
68 |             <a href="#" class="echo-nav-label" aria-label="prev">ひとつ前、時系列の新着順で表現すると未来のエントリーです</a>
69 |             </li>
70 |             <li class="echo-nav-item next">
71 |             <a href="#" class="echo-nav-label" aria-label="next">ひとつ後、時系列の新着順で表現すると過去のエントリーです</a>
72 |             </li>
73 |         </ul><!-- /.echo-nav-list -->
74 |     </nav><!-- /.echo-nav -->
75 | </div><!-- /.echo-serial -->
76 | 77 |
78 |
79 | 80 | -------------------------------------------------------------------------------- /dist/styleguide/css/prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.15.0 2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+scss */ 3 | /** 4 | * prism.js default theme for JavaScript, CSS and HTML 5 | * Based on dabblet (http://dabblet.com) 6 | * @author Lea Verou 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | color: black; 12 | background: none; 13 | text-shadow: 0 1px white; 14 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | word-wrap: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | } 31 | 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 34 | text-shadow: none; 35 | background: #b3d4fc; 36 | } 37 | 38 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 39 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 40 | text-shadow: none; 41 | background: #b3d4fc; 42 | } 43 | 44 | @media print { 45 | code[class*="language-"], 46 | pre[class*="language-"] { 47 | text-shadow: none; 48 | } 49 | } 50 | 51 | /* Code blocks */ 52 | pre[class*="language-"] { 53 | padding: 1em; 54 | margin: .5em 0; 55 | overflow: auto; 56 | } 57 | 58 | :not(pre) > code[class*="language-"], 59 | pre[class*="language-"] { 60 | background: #f5f2f0; 61 | } 62 | 63 | /* Inline code */ 64 | :not(pre) > code[class*="language-"] { 65 | padding: .1em; 66 | border-radius: .3em; 67 | white-space: normal; 68 | } 69 | 70 | .token.comment, 71 | .token.prolog, 72 | .token.doctype, 73 | .token.cdata { 74 | color: slategray; 75 | } 76 | 77 | .token.punctuation { 78 | color: #999; 79 | } 80 | 81 | .namespace { 82 | opacity: .7; 83 | } 84 | 85 | .token.property, 86 | .token.tag, 87 | .token.boolean, 88 | .token.number, 89 | .token.constant, 90 | .token.symbol, 91 | .token.deleted { 92 | color: #905; 93 | } 94 | 95 | .token.selector, 96 | .token.attr-name, 97 | .token.string, 98 | .token.char, 99 | .token.builtin, 100 | .token.inserted { 101 | color: #690; 102 | } 103 | 104 | .token.operator, 105 | .token.entity, 106 | .token.url, 107 | .language-css .token.string, 108 | .style .token.string { 109 | color: #9a6e3a; 110 | background: hsla(0, 0%, 100%, .5); 111 | } 112 | 113 | .token.atrule, 114 | .token.attr-value, 115 | .token.keyword { 116 | color: #07a; 117 | } 118 | 119 | .token.function, 120 | .token.class-name { 121 | color: #DD4A68; 122 | } 123 | 124 | .token.regex, 125 | .token.important, 126 | .token.variable { 127 | color: #e90; 128 | } 129 | 130 | .token.important, 131 | .token.bold { 132 | font-weight: bold; 133 | } 134 | .token.italic { 135 | font-style: italic; 136 | } 137 | 138 | .token.entity { 139 | cursor: help; 140 | } 141 | 142 | -------------------------------------------------------------------------------- /dist/styleguide/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Style guide | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

Style guide

23 |
24 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /dist/styleguide/js/common.js: -------------------------------------------------------------------------------- 1 | (function($){ // start jquery 2 | $(function(){ 3 | 4 | $('.s-header.js-fixnav').EchoFixNav({ 5 | et: $('.s-header').height() 6 | }); 7 | 8 | }); // end $(function 9 | })(jQuery); // end jquery 10 | 11 | -------------------------------------------------------------------------------- /dist/styleguide/project-main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | project-main | Style guide | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |
19 | 20 |
21 |

project-main

22 |
23 | 24 |
25 |

echo-p-main

26 | 27 |

ドキュメント内で、本文となるコンテンツ群を包括する。
28 | プロジェクトごとにスタイルが上書きされることを前提としているため、echo.cssでは上下余白のみ定義している。

29 |
30 |
(contents)
31 |
32 | 
<div class="echo-p-main">
33 |     <div style="background-color: #ffd5d5; padding: 10px; text-align: center;">(contents)</div>
34 | </div>
35 |
36 | 37 | -------------------------------------------------------------------------------- /dist/styleguide/utility-hidden.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | utility-hidden | Style guide | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |
19 | 20 |
21 |

utility-hidden

22 |
23 | 24 | 33 | 34 |
35 |
36 | 37 |

echo-hidden-(breakpoint)-up

38 | 39 |

(breakpoint)で指定した画面幅以上で要素を非表示にする。特性上、echo-hidden-xs-upはない。

40 |
echo-hidden-sm-up
41 |
echo-hidden-md-up
42 |
echo-hidden-lg-up
43 |
echo-hidden-xl-up
44 |
echo-hidden-xxl-up
45 |
46 | 47 | 48 |

echo-hidden-(breakpoint)-down

49 | 50 |

(breakpoint)で指定した画面幅未満で要素を非表示にする。特性上、echo-hidden-xxl-downはない。

51 |
echo-hidden-xs-down
52 |
echo-hidden-sm-down
53 |
echo-hidden-md-down
54 |
echo-hidden-lg-down
55 |
echo-hidden-xl-down
56 |
57 | 58 | -------------------------------------------------------------------------------- /dist/styleguide/utility-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | utility-image | Style guide | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |
19 | 20 |
21 |

utility-image

22 |
23 | 24 | 33 | 34 |
35 |

echo-image-responsive

36 | 37 |

画像が包括要素よりも大きくなった場合のみ、縦横比を保って伸縮させる。

38 |
39 | 
<img src="../images/_dummy/image_01_s.jpg" alt="" class="echo-image-responsive">
40 |
41 |

echo-image-fill

42 | 43 |

画像の大きさに関係なく、常に包括要素の幅いっぱいに伸縮させる。

44 |
45 | 
<img src="../images/_dummy/image_01_s.jpg" alt="" class="echo-image-fill">
46 |
47 | 48 | -------------------------------------------------------------------------------- /dist/styleguide/utility-line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | utility-line | Style guide | echo-css 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |
19 | 20 |
21 |

utility-line

22 |
23 | 24 |
25 |

echo-line-(size)

26 | 27 |

文章を指定した行高さに変更する。 none, sm, md, lg に対応している。
28 | 行間を最低にするクラスは、0ではなく none である点に注意。

29 |

echo-line-none:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

30 |

echo-line-sm:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

31 |

echo-line-md:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

32 |

echo-line-lg:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

33 | 
<p class="echo-line-none">echo-line-none:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
34 | <p class="echo-line-sm">echo-line-sm:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
35 | <p class="echo-line-md">echo-line-md:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
36 | <p class="echo-line-lg">echo-line-lg:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
37 |
38 | 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "echo-css", 3 | "version": "3.1.2", 4 | "description": "CSS framework optimized for CMS theming", 5 | "main": "index.js", 6 | "scripts": { 7 | "watch": "watch \"npm run css\" src/scss", 8 | "css": "run-s css:scssmin css:rename", 9 | "css-org": "run-s css:scssorg", 10 | "js": "run-s js:jscopy js:jsuscrollto js:jsutoggle", 11 | "css:scssorg": "sass src/scss:dist/css/_uncompressed --style expanded --no-source-map", 12 | "css:scssmin": "rimraf ./dist/css/*.min.css && sass src/scss:dist/css --style compressed --no-source-map", 13 | "css:postcssorg": "postcss ./dist/css/_uncompressed -c=postcss.config.js --no-map --dir ./dist/css/_uncompressed", 14 | "css:postcssmin": "postcss ./dist/css -c=postcss.config.js --no-map --dir ./dist/css", 15 | "css:rename": "rename ./dist/css/*.css {{f}}.min.css", 16 | "js:jscopy": "cpx \"./src/js/*.js\" ./dist/plugins", 17 | "js:jsuscrollto": "uglifyjs dist/plugins/scrollto.js -o dist/plugins/scrollto.min.js", 18 | "js:jsutoggle": "uglifyjs dist/plugins/toggle.js -o dist/plugins/toggle.min.js" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/webbingstudio/echo-css.git" 23 | }, 24 | "keywords": [], 25 | "author": "webbingstudio", 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/webbingstudio/echo-css/issues" 29 | }, 30 | "homepage": "https://echocss.webbingstudio.com", 31 | "devDependencies": { 32 | "autoprefixer": "^10.3.1", 33 | "cpx": "^1.5.0", 34 | "cssnano": "^5.0.7", 35 | "npm-run-all": "^4.1.5", 36 | "postcss": "^8.3.6", 37 | "postcss-cli": "^8.3.1", 38 | "rename-cli": "^6.2.1", 39 | "rimraf": "^3.0.2", 40 | "sass": "^1.37.5", 41 | "uglify-js": "^3.14.1", 42 | "watch": "^1.0.2" 43 | }, 44 | "browserslist": [ 45 | "> .2%", 46 | "not ie <= 11", 47 | "not op_mini all" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | echo.css 2 | ==================================== 3 | 4 | echo 5 | 6 | CSS framework optimized for CMS theming 7 | 8 | version 3.1.2 9 | 10 | Copyright 2018 - 2021 WebbingStudio 11 | Released under the MIT license 12 | http://opensource.org/licenses/MIT 13 | 14 | - - - - - - - - - - - - - - - - - - - 15 | 16 | ## "echo.css"とは? 17 | 18 | "echo.css"は、SMACSS, FLOCSSを設計ベースとしたCSSフレームワークです。 19 | 20 | https://echocss.webbingstudio.com/ 21 | 22 | - CMSを組み込んだウェブサイトの制作に最適化 23 | - 東アジア諸国の言語に配慮したタイポグラフィ 24 | - スケーラビリティ: モジュールの拡張を想定した構造 25 | - Atomic Designを導入しやすい構造 26 | - 色、フォントを変更可能 27 | - コーディングルールをBEMに変更可能（Sassの利用が前提） 28 | 29 | ---- 30 | 31 | ## What's "echo"? 32 | 33 | "echo" is a CSS framework based on the design of SMACSS and FLOCSS. 34 | 35 | https://echocss.webbingstudio.com/ 36 | 37 | - Optimized for the creation of website incorporating CMS 38 | - Language-friendly typography in East Asian countries 39 | - Scalability: Structure assuming expansion of modules 40 | - Easy to introduce Atomic Design 41 | - color and fonts can be changed 42 | - Coding rule can be changed from SMACSS to BEM (Sass premise) 43 | 44 | ---- 45 | 46 | ## Browser compatible 47 | 48 | Windows X and MacOS 10.15+ 49 | 50 | - Chrome: latest 51 | - Safari: latest 52 | - Edge: latest 53 | - Firefox: latest 54 | 55 | Support status of Internet Explorer 11 56 | https://echocss.webbingstudio.com/docs/etc-ie11.html -------------------------------------------------------------------------------- /src/js/scrollto.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * echo.scrollTo.js v1.0.0 3 | * Scroll smoothly to the position that considers the navigation fixed at the top of the screen. 4 | * 5 | * Copyright 2018 WebbingStudio 6 | * Released under the MIT license 7 | * https://opensource.org/licenses/MIT 8 | */ 9 | 10 | ;(function($){ 11 | "use strict"; 12 | 13 | var EchoScrollTo = window.EchoScrollTo || {}; 14 | 15 | EchoScrollTo = (function() { 16 | 17 | function EchoScrollTo(element, options) { 18 | var 19 | t = this; 20 | 21 | t.initials = { 22 | margin: 0, 23 | margin_off: 0, 24 | margin_extend: 0, 25 | speed: 300 26 | }; 27 | t.settings = $.extend({}, t.initials, options); 28 | 29 | t.init(element); 30 | 31 | $(element).on('click', function() { 32 | t.run(element); 33 | return false; 34 | }); 35 | return false; 36 | 37 | } 38 | 39 | return EchoScrollTo; 40 | 41 | }()); 42 | 43 | EchoScrollTo.prototype.init = function(element) { 44 | var 45 | t = this; 46 | 47 | return false; 48 | }; 49 | 50 | EchoScrollTo.prototype.run = function(element) { 51 | var 52 | t = this, 53 | href, 54 | target, 55 | wt, 56 | tt, 57 | ss; 58 | 59 | href = element.hash; 60 | target = $(href == '#top' ? 'body' : href); 61 | 62 | if(target.size()){ 63 | wt = $(window).scrollTop(); 64 | tt = parseFloat(target.offset().top, 10) - parseFloat(t.settings.margin, 10); 65 | if(wt < t.settings.margin_off) { 66 | tt -= parseFloat(t.settings.margin_extend, 10); 67 | } 68 | 69 | // If the moving distance exceeds 2000px, increase scroll time 70 | ss = t.settings.speed; 71 | if( Math.abs(wt - tt) > 2000 ) { 72 | ss = ( Math.abs(wt - tt) / 2000 ) / 1.5 * ss; 73 | } 74 | 75 | $('html, body').animate({ 76 | scrollTop: tt 77 | }, ss, 'swing'); 78 | } 79 | return false; 80 | }; 81 | 82 | $.fn.EchoScrollTo = function() { 83 | var 84 | element = this, 85 | options = arguments[0], 86 | args = Array.prototype.slice.call(arguments, 1), 87 | i; 88 | for (i = 0; i < element.length; i++) { 89 | if (typeof options == 'object' || typeof options == 'undefined') { 90 | element[i].EchoScrollTo = new EchoScrollTo(element[i], options); 91 | } 92 | } 93 | return element; 94 | 95 | }; 96 | 97 | $(function(){ 98 | 99 | $('.js-scrollto').EchoScrollTo(); 100 | 101 | }); 102 | 103 | })(jQuery); 104 | 105 | 106 | -------------------------------------------------------------------------------- /src/scss/echo-color.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * echo.css(color) - version 3.0.1 3 | * 4 | * "echo" is CSS framework, built with consider CMS theming in East asian countries. 5 | * https://echocss.webbingstudio.com/ 6 | * 7 | * Copyright 2018 - 2021 WebbingStudio 8 | * Released under the MIT license 9 | * https://opensource.org/licenses/MIT 10 | * 11 | */ 12 | 13 | @use "sass:math"; 14 | @import "_config_basic"; 15 | @import "_config_advance"; 16 | @import "mixin/_mixin"; 17 | 18 | @import "foundation/_base_color"; 19 | @import "object/module/_checkbox_color"; 20 | @import "object/module/_button_color"; 21 | @import "object/module/_label_color"; 22 | @import "object/module/_nav_color"; 23 | @import "object/module/_radio_color"; 24 | @import "object/module/_title_color"; 25 | @import "object/module/_toggle_color"; 26 | @import "object/component/_alert_color"; 27 | @import "object/component/_box_color"; 28 | @import "object/component/_paginate_color"; 29 | @import "object/component/_serial_color"; 30 | @import "object/component/_step_color"; 31 | @import "object/component/_topicpath_color"; 32 | @import "object/utility/_bg"; 33 | @import "object/utility/_text_color"; 34 | -------------------------------------------------------------------------------- /src/scss/echo-font.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * echo.css(font) - version 3.0.1 3 | * 4 | * "echo" is CSS framework, built with consider CMS theming in East asian countries. 5 | * https://echocss.webbingstudio.com/ 6 | * 7 | * Copyright 2018 - 2021 WebbingStudio 8 | * Released under the MIT license 9 | * https://opensource.org/licenses/MIT 10 | * 11 | */ 12 | 13 | @use "sass:math"; 14 | @import "_config_basic"; 15 | @import "_config_advance"; 16 | @import "mixin/_mixin"; 17 | 18 | @import "foundation/_reset_font"; 19 | @import "foundation/_base_font"; 20 | @import "object/module/_title_font"; 21 | @import "object/component/_flip_font"; 22 | @import "object/component/_form_font"; 23 | @import "object/component/_headline_font"; 24 | @import "object/component/_hero_font"; 25 | @import "object/component/_topicpath_font"; 26 | @import "layout/_forms_font"; 27 | @import "object/utility/_font"; 28 | -------------------------------------------------------------------------------- /src/scss/foundation/_base.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | typography 4 | -------------------- 5 | */ 6 | 7 | html { 8 | font-size: $font-size-md; 9 | } 10 | 11 | body { 12 | background-color: $body-bg; 13 | color: $body-color; 14 | } 15 | 16 | /* 17 | note: Underline of Link 18 | wysiwyg(リッチテキスト)の適用範囲内のみ、リンクにcolorやtext-decorationを指定することは、適切ではありません。スタイルの優先度が、その装飾を必要としないモジュールよりも、高くなってしまうことを回避するためです。 19 | It is not appropriate to specify color or text-decoration for the link only within the scope of wysiwyg (rich text). This is to avoid that the priority of the style will be higher than the module that does not require that decoration. 20 | -------------------- 21 | */ 22 | 23 | a { 24 | text-decoration: underline; 25 | 26 | &:hover, 27 | &:focus { 28 | text-decoration: none; 29 | } 30 | 31 | } 32 | 33 | h1, 34 | h2 { 35 | margin: 0 0 1em; 36 | } 37 | 38 | h3, 39 | h4, 40 | h5, 41 | h6 { 42 | margin: 0 0 .5em; 43 | } 44 | 45 | h1 { 46 | font-size: 2em; 47 | } 48 | 49 | h2 { 50 | font-size: 1.75em; 51 | } 52 | 53 | h3 { 54 | font-size: 1.5em; 55 | } 56 | 57 | h4 { 58 | font-size: 1.25em; 59 | } 60 | 61 | h5 { 62 | font-size: 1.125em; 63 | } 64 | 65 | h6 { 66 | font-size: 1em; 67 | } 68 | 69 | pre, 70 | code { 71 | margin: 0; 72 | } 73 | 74 | p, 75 | pre, 76 | blockquote { 77 | margin: 0 0 1em; 78 | } 79 | 80 | ul, 81 | ol { 82 | margin: 0 0 1em; 83 | padding-left: 1.25em; 84 | } 85 | 86 | li { 87 | margin: 0 0 .5em; 88 | 89 | > ul, 90 | > ol { 91 | margin: .5em 0; 92 | } 93 | 94 | } 95 | 96 | dl { 97 | margin: 0 0 1em; 98 | } 99 | 100 | dt { 101 | margin: 0 0 .5em; 102 | } 103 | 104 | dd { 105 | margin: 0 0 1em 2em; 106 | } 107 | 108 | img { 109 | border: 0 none; 110 | } 111 | 112 | textarea, 113 | input { 114 | font-size: 1em; 115 | } 116 | 117 | input[type="text"], 118 | input[type="password"], 119 | input[type="date"], 120 | input[type="time"], 121 | input[type="number"] { 122 | line-height: 1; 123 | } 124 | 125 | select { 126 | line-height: 1; 127 | } 128 | -------------------------------------------------------------------------------- /src/scss/foundation/_base_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | typography(color) 4 | -------------------- 5 | */ 6 | 7 | a { 8 | color: $link-color; 9 | 10 | &:hover, 11 | &:focus { 12 | color: $link-hover-color; 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/foundation/_base_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | typography(font) 4 | -------------------- 5 | */ 6 | 7 | html { 8 | @include font-family-weight( 'root', 'normal' ); 9 | } 10 | 11 | /* 12 | note: Font Families in Form 13 | 日本では、フォームの入力フィールドにサンセリフフォントを指定する傾向があります。 これは、入力フォームに適用される標準フォントが、OSによって大きく異なるためです。 14 | In Japan, there is a tendency to specify sans-serif fonts in the form input fields. This is because standard fonts applied to input fields vary greatly depending on the OS. 15 | -------------------- 16 | */ 17 | 18 | textarea, 19 | input { 20 | @include font-family-weight( 'root', 'normal' ); 21 | } 22 | 23 | select { 24 | font-family: '-apple-system', 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; 25 | font-weight: 300; 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/foundation/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | reset 4 | -------------------- 5 | */ 6 | 7 | @include font-face-mapping(); 8 | 9 | * { 10 | box-sizing: border-box; 11 | } 12 | 13 | html { 14 | font-family: sans-serif; 15 | -ms-text-size-adjust: 100%; 16 | -webkit-text-size-adjust: 100%; 17 | text-size-adjust: 100%; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | } 23 | 24 | main { 25 | display: block; 26 | } 27 | 28 | figure { 29 | margin: 0; 30 | } 31 | 32 | table { 33 | border-collapse: collapse; 34 | border-spacing: 0; 35 | } 36 | 37 | td, 38 | th { 39 | padding: 0; 40 | } 41 | 42 | th { 43 | text-align: left; 44 | } 45 | 46 | 47 | b, 48 | th, 49 | dt, 50 | optgroup, 51 | strong, 52 | h1, 53 | h2, 54 | h3, 55 | h4, 56 | h5, 57 | h6 { 58 | @include font-family-weight( 'root', 'bold' ); 59 | } 60 | 61 | button, 62 | input[type="button"], 63 | input[type="submit"], 64 | input[type="reset"] { 65 | cursor: pointer; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /src/scss/foundation/_reset_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | reset(font) 4 | -------------------- 5 | */ 6 | 7 | @include font-face-mapping(); 8 | 9 | b, 10 | th, 11 | dt, 12 | optgroup, 13 | strong, 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6 { 20 | @include font-family-weight( 'root', 'bold' ); 21 | } 22 | -------------------------------------------------------------------------------- /src/scss/layout/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}buttons 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}buttons { 8 | display: grid; 9 | grid-template-columns: repeat( auto-fit, minmax( calc( 50% - #{map-get( $grid-gutter-widths, 'md' )} ), 1fr ) ); 10 | gap: map-get( $grid-gutter-widths, md ); 11 | width: calc( 100% - #{map-get( $grid-gutter-widths, md )} ); 12 | max-width: map-get( $container-max-widths-md, md ) - map-get( $grid-gutter-widths, 'md' ); 13 | margin: 0 auto; 14 | 15 | @include media-breakpoint-up(lg) { 16 | gap: map-get( $grid-gutter-widths, lg ); 17 | grid-template-columns: repeat( auto-fit, minmax( calc( 1% - #{map-get( $grid-gutter-widths, 'md' )} ), 1fr ) ); 18 | } 19 | 20 | .#{$pr}#{$l}container &, 21 | .#{$pr}#{$c}card &, 22 | .#{$pr}#{$c}flip &, 23 | .#{$pr}#{$c}hero & { 24 | width: 100%; 25 | } 26 | 27 | @at-root { 28 | 29 | ul#{&} { 30 | padding: 0; 31 | list-style-type: none; 32 | } 33 | 34 | } 35 | 36 | } 37 | 38 | .#{$pr}#{$l}buttons#{$c1}item { 39 | display: flex; 40 | align-items: center; 41 | margin: 0; 42 | 43 | .#{$pr}#{$m}button { 44 | 45 | &:not(.#{$pr}#{$m}button#{$c3}square):not(.#{$pr}#{$m}button#{$c3}circle) { 46 | width: 100%; 47 | margin-left: auto; 48 | margin-right: auto; 49 | } 50 | 51 | } 52 | 53 | [class*="#{$pr}#{$m}button#{$c2}icon"] { 54 | padding-left: 1em; 55 | padding-right: 1em; 56 | } 57 | 58 | } 59 | 60 | .#{$pr}#{$l}buttons#{$c3}grow { 61 | @include media-breakpoint-down(md) { 62 | grid-template-columns: repeat( auto-fit, minmax( calc( 33.33333333% - #{map-get( $grid-gutter-widths, 'md' )} ), 1fr ) ); 63 | } 64 | 65 | .#{$pr}#{$l}buttons#{$c1}item { 66 | 67 | &:last-child() { 68 | grid-column: span 2; 69 | } 70 | 71 | &:nth-child(4n):last-child() { 72 | grid-column: span 3; 73 | } 74 | 75 | } 76 | 77 | } 78 | -------------------------------------------------------------------------------- /src/scss/layout/_cards.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}cards 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}cards { 8 | display: grid; 9 | width: calc( 100% - #{map-get( $grid-gutter-widths, md )} ); 10 | gap: map-get( $grid-gutter-widths, lg ); 11 | margin: 0 auto; 12 | 13 | @include media-breakpoint-up(sm) { 14 | gap: map-get( $grid-gutter-widths, md ); 15 | grid-template-columns: 1fr 1fr; 16 | } 17 | 18 | @include media-breakpoint-up(md) { 19 | grid-template-columns: 1fr 1fr 1fr; 20 | } 21 | 22 | @include media-breakpoint-up(xl) { 23 | grid-template-columns: 1fr 1fr 1fr 1fr; 24 | } 25 | 26 | } 27 | 28 | .#{$pr}#{$l}cards#{$c1}item { 29 | display: flex; 30 | align-items: stretch; 31 | justify-content: center; 32 | width: 100%; 33 | 34 | .#{$pr}#{$c}card { 35 | 36 | @include media-breakpoint-up(sm) { 37 | max-width: none; 38 | } 39 | 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/layout/_container.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}container 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}container { 8 | margin-left: auto; 9 | margin-right: auto; 10 | padding-left: (math.div(map-get($grid-gutter-widths, md),2)); 11 | padding-right: (math.div(map-get($grid-gutter-widths, md),2)); 12 | 13 | @each $breakpoint, $container-max-width in $container-max-widths-md { 14 | 15 | @include media-breakpoint-up($breakpoint) { 16 | max-width: $container-max-width; 17 | } 18 | 19 | } 20 | 21 | } 22 | 23 | 24 | /* 25 | .#{$pr}#{$l}containerが二重になった場合の対策 26 | -------------------- 27 | */ 28 | @include media-breakpoint-up(sm) { 29 | 30 | .#{$pr}#{$l}container { 31 | 32 | .#{$pr}#{$l}container { 33 | padding-left: 0; 34 | padding-right: 0; 35 | } 36 | 37 | } 38 | 39 | } 40 | 41 | 42 | /* 43 | -------------------- 44 | #{$pr}#{$l}container#{$c3}fluid 45 | -------------------- 46 | */ 47 | 48 | .#{$pr}#{$l}container#{$c3}fluid { 49 | 50 | @include media-breakpoint-up(0px) { 51 | max-width: none; 52 | } 53 | 54 | } 55 | 56 | -------------------------------------------------------------------------------- /src/scss/layout/_container_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}container#{$c3}(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}container#{$c3}xs { 8 | 9 | @each $breakpoint, $container-max-width in $container-max-widths-xs { 10 | 11 | @include media-breakpoint-up($breakpoint) { 12 | max-width: $container-max-width; 13 | } 14 | 15 | } 16 | 17 | } 18 | 19 | .#{$pr}#{$l}container#{$c3}sm { 20 | 21 | @each $breakpoint, $container-max-width in $container-max-widths-sm { 22 | 23 | @include media-breakpoint-up($breakpoint) { 24 | max-width: $container-max-width; 25 | } 26 | 27 | } 28 | 29 | } 30 | 31 | .#{$pr}#{$l}container#{$c3}lg { 32 | 33 | @each $breakpoint, $container-max-width in $container-max-widths-lg { 34 | 35 | @include media-breakpoint-up($breakpoint) { 36 | max-width: $container-max-width; 37 | } 38 | 39 | } 40 | 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/layout/_forms.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}forms 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}forms { 8 | line-height: 1; 9 | 10 | @include media-breakpoint-up(lg) { 11 | display: grid; 12 | gap: map-get( $grid-gutter-widths, xl ); 13 | grid-template-columns: auto 1fr; 14 | } 15 | 16 | } 17 | 18 | .#{$pr}#{$l}forms#{$c1}header { 19 | display: flex; 20 | align-items: center; 21 | justify-content: flex-start; 22 | 23 | @include media-breakpoint-down(md) { 24 | margin-bottom: 1em; 25 | } 26 | 27 | @include media-breakpoint-up(lg) { 28 | justify-content: space-between; 29 | } 30 | 31 | > * + * { 32 | margin-left: 2em; 33 | } 34 | 35 | } 36 | 37 | .#{$pr}#{$l}forms#{$c1}label { 38 | 39 | } 40 | 41 | .#{$pr}#{$l}forms#{$c1}meta { 42 | 43 | } 44 | 45 | .#{$pr}#{$l}forms#{$c1}contents { 46 | 47 | @include media-breakpoint-down(md) { 48 | margin-bottom: map-get( $grid-gutter-widths, xl ); 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /src/scss/layout/_forms_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}forms(font) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}forms#{$c1}label { 8 | @include font-family-weight( 'root', 'bold' ); 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/layout/_headlines.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}headlines 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}headlines { 8 | width: calc( 100% - #{map-get( $grid-gutter-widths, md )} ); 9 | margin: 0 auto ( map-get( $grid-gutter-widths, md ) * -1 ); 10 | } 11 | 12 | .#{$pr}#{$l}headlines#{$c1}item { 13 | margin: 0 0 map-get( $grid-gutter-widths, md ); 14 | 15 | .#{$pr}#{$c}headline { 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/layout/_labels.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}labels 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}labels { 8 | max-width: 100%; 9 | overflow: hidden; 10 | } 11 | 12 | .#{$pr}#{$l}labels#{$c1}list { 13 | display: flex; 14 | flex-wrap: wrap; 15 | align-items: center; 16 | margin: 0 math.div(map-get( $grid-gutter-widths, sm ),-1) math.div(map-get( $grid-gutter-widths, sm ),-1) 0; 17 | padding: 0; 18 | list-style-type: none; 19 | } 20 | 21 | .#{$pr}#{$l}labels#{$c1}header { 22 | margin-bottom: map-get( $grid-gutter-widths, sm ); 23 | 24 | @include media-breakpoint-down(sm) { 25 | flex-grow: 1; 26 | width: 100%; 27 | } 28 | 29 | @include media-breakpoint-up(md) { 30 | flex-grow: 0; 31 | margin-right: 1rem; 32 | } 33 | 34 | } 35 | 36 | .#{$pr}#{$l}labels#{$c1}item { 37 | flex-grow: 0; 38 | margin: 0 map-get( $grid-gutter-widths, sm ) map-get( $grid-gutter-widths, sm ) 0; 39 | 40 | .#{$pr}#{$m}label { 41 | position: static; 42 | top: 0; 43 | display: flex; 44 | } 45 | 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/layout/_medias.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$l}medias 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$l}medias { 8 | display: grid; 9 | gap: map-get( $grid-gutter-widths, lg ); 10 | width: calc( 100% - #{map-get( $grid-gutter-widths, md )} ); 11 | margin: 0 auto; 12 | 13 | @include media-breakpoint-up(lg) { 14 | gap: map-get( $grid-gutter-widths, md ); 15 | grid-template-columns: 1fr 1fr; 16 | } 17 | 18 | } 19 | 20 | .#{$pr}#{$l}medias#{$c1}item { 21 | 22 | .#{$pr}#{$c}media { 23 | width: 100%; 24 | height: 100%; 25 | } 26 | 27 | .#{$pr}#{$c}media#{$c3}inner { 28 | height: 100%; 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/mixin/_grid.scss: -------------------------------------------------------------------------------- 1 | @mixin make-col-flex($size, $columns: $grid-columns) { 2 | flex-basis: percentage(math.div($size,$columns)); 3 | max-width: percentage(math.div($size,$columns)); 4 | } 5 | 6 | @mixin make-grid-columns-flex($columns: $grid-columns, $breakpoints: $grid-breakpoints) { 7 | %grid-column { 8 | flex-basis: 0%; 9 | flex-grow: 1; 10 | max-width: 100%; 11 | } 12 | 13 | @each $breakpoint in map-keys($breakpoints) { 14 | $infix: breakpoint-infix($breakpoint, $breakpoints); 15 | 16 | @if ($breakpoint == 'sm') { 17 | 18 | @include media-breakpoint-down(sm) { 19 | .#{$pr}#{$col} { 20 | flex-basis: 100%; 21 | } 22 | 23 | } 24 | 25 | } 26 | 27 | @for $i from 1 through $columns { 28 | 29 | @if ($optimize != true) or ( ($optimize == true) and ( $i > 1 ) and ( $i != $grid-columns-max ) ) { 30 | 31 | .#{$pr}#{$col}#{$infix}#{$c3}#{$i} { 32 | @extend %grid-column; 33 | } 34 | 35 | } 36 | 37 | } 38 | 39 | .#{$pr}#{$col}#{$infix} { 40 | @extend %grid-column; 41 | } 42 | 43 | @include media-breakpoint-up($breakpoint, $breakpoints) { 44 | 45 | @for $i from 1 through $columns { 46 | 47 | @if ($optimize != true) or ( ($optimize == true) and ( $i > 1 ) and ( $i != $grid-columns-max ) ) { 48 | 49 | .#{$pr}#{$col}#{$infix}#{$c3}#{$i} { 50 | @include make-col-flex($i, $columns); 51 | } 52 | 53 | } 54 | 55 | } 56 | 57 | .#{$pr}#{$col}#{$c2}order#{$infix}#{$c3}first { 58 | order: -1; 59 | } 60 | 61 | .#{$pr}#{$col}#{$c2}order#{$infix}#{$c3}last { 62 | order: $columns + 1; 63 | } 64 | 65 | @for $i from 0 through $columns { 66 | 67 | .#{$pr}#{$col}#{$c2}order#{$infix}#{$c3}#{$i} { 68 | order: $i; 69 | } 70 | 71 | } 72 | 73 | } 74 | 75 | } 76 | 77 | } 78 | -------------------------------------------------------------------------------- /src/scss/mixin/_responsive-spacing.scss: -------------------------------------------------------------------------------- 1 | @mixin responsive-spacing( $property, $min, $max ) { 2 | 3 | $diff_space: $max - $min; 4 | $diff_breakpoint: map-get( $responsive-breakpoints, 'max' ) - map-get( $responsive-breakpoints, 'min' ); 5 | 6 | $vw: math.div( ( 100 * $diff_space ), $diff_breakpoint ); 7 | $increase: $min - math.div( map-get( $responsive-breakpoints, 'min' ), 100 ) * $vw; 8 | 9 | #{$property}: #{$max}rem; 10 | #{$property}: clamp( #{$min}rem, calc( #{$vw}vw + #{$increase}rem ), #{$max}rem ); 11 | 12 | } -------------------------------------------------------------------------------- /src/scss/object/component/_alert.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}alert 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}alert { 8 | display: flex; 9 | align-items: stretch; 10 | margin: 0; 11 | padding: map-get( $grid-gutter-widths, 'sm' ); 12 | background-color: $default-fade; 13 | border: $border-alert-width solid $border-color; 14 | font-size: $font-size-xs; 15 | line-height: $line-height-sm; 16 | 17 | @include media-breakpoint-up(lg) { 18 | padding-left: map-get( $grid-gutter-widths, 'md' ); 19 | padding-right: map-get( $grid-gutter-widths, 'md' ); 20 | font-size: $font-size-sm; 21 | } 22 | 23 | > p { 24 | margin-bottom: 0; 25 | } 26 | 27 | } 28 | 29 | .#{$pr}#{$c}alert#{$c1}header { 30 | flex: 0 0 auto; 31 | align-self: center; 32 | margin-right: .5em; 33 | text-align: left; 34 | } 35 | 36 | .#{$pr}#{$c}alert#{$c1}footer { 37 | flex: 1 0 auto; 38 | align-self: center; 39 | margin-left: .5em; 40 | text-align: right; 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/object/component/_alert_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}alert#{$c3}(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}alert#{$c3}info { 8 | color: $info-strong; 9 | border-color: $info; 10 | background-color: $info-fade; 11 | } 12 | 13 | .#{$pr}#{$c}alert#{$c3}important { 14 | color: $important-strong; 15 | border-color: $important; 16 | background-color: $important-fade; 17 | } 18 | 19 | .#{$pr}#{$c}alert#{$c3}inverse { 20 | color: $inverse-strong; 21 | border-color: $inverse; 22 | background-color: $inverse-fade; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /src/scss/object/component/_body.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}body 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}body { 8 | margin: 0; 9 | line-height: $line-height-md; 10 | 11 | * { 12 | &:last-child { 13 | margin-bottom: 0; 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/object/component/_body_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}body(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}body { 8 | font-size: map-get( $body-min-font-sizes, 'md' ); 9 | 10 | @include media-breakpoint-up(lg) { 11 | font-size: map-get( $body-max-font-sizes, 'md' ); 12 | } 13 | 14 | &.#{$pr}#{$c}body#{$c3}fixed { 15 | 16 | @include media-breakpoint-up(lg) { 17 | font-size: map-get( $body-min-font-sizes, 'md' ); 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | -------------------------------------------------------------------------------- /src/scss/object/component/_box.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}box 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}box { 8 | margin: 0; 9 | padding: map-get( $grid-gutter-widths, 'sm' ); 10 | line-height: $line-height-md; 11 | 12 | @include media-breakpoint-up(md) { 13 | padding: map-get( $grid-gutter-widths, 'md' ); 14 | } 15 | 16 | @include media-breakpoint-up(xxl) { 17 | padding-left: map-get( $grid-gutter-widths, 'lg' ); 18 | padding-right: map-get( $grid-gutter-widths, 'lg' ); 19 | } 20 | 21 | border: $border-box-width solid transparent; 22 | color: $body-color; 23 | background-color: $default-fade; 24 | border-radius: $border-radius-lg; 25 | 26 | * { 27 | &:last-child { 28 | margin-bottom: 0; 29 | } 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/object/component/_box_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}box#{$c3}(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}box#{$c3}style#{$c3}a { 8 | 9 | &.#{$pr}#{$c}box#{$c3}info { 10 | background-color: $info-fade; 11 | } 12 | 13 | &.#{$pr}#{$c}box#{$c3}important { 14 | background-color: $important-fade; 15 | } 16 | 17 | &.#{$pr}#{$c}box#{$c3}inverse { 18 | color: $inverse; 19 | background-color: $inverse-fade; 20 | } 21 | 22 | } 23 | 24 | .#{$pr}#{$c}box#{$c3}style#{$c3}b { 25 | 26 | &.#{$pr}#{$c}box#{$c3}info { 27 | border-color: $info; 28 | } 29 | 30 | &.#{$pr}#{$c}box#{$c3}important { 31 | border-color: $important; 32 | } 33 | 34 | &.#{$pr}#{$c}box#{$c3}inverse { 35 | color: $inverse; 36 | border-color: $inverse; 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/object/component/_box_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}box(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}box { 8 | font-size: map-get( $body-min-font-sizes, 'md' ); 9 | 10 | @include media-breakpoint-up(lg) { 11 | font-size: map-get( $body-max-font-sizes, 'md' ); 12 | } 13 | 14 | &.#{$pr}#{$c}box#{$c3}fixed { 15 | 16 | @include media-breakpoint-up(md) { 17 | padding: map-get( $grid-gutter-widths, 'sm' ); 18 | } 19 | 20 | @include media-breakpoint-up(lg) { 21 | font-size: map-get( $body-min-font-sizes, 'md' ); 22 | } 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/object/component/_box_style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}box#{$c3}style#{$c3}(style) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}box#{$c3}style#{$c3}a { 8 | background-color: $default-fade; 9 | } 10 | 11 | .#{$pr}#{$c}box#{$c3}style#{$c3}b { 12 | background-color: transparent; 13 | border-color: $default; 14 | } 15 | -------------------------------------------------------------------------------- /src/scss/object/component/_card.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}card 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}card { 8 | position: relative; 9 | width: 100%; 10 | margin: 0 auto; 11 | background-color: $body-bg; 12 | color: $body-color; 13 | box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3); 14 | } 15 | 16 | time[class*="#{$pr}#{$c}card"] { 17 | display: block; 18 | } 19 | 20 | .#{$pr}#{$c}card#{$c1}inner { 21 | display: flex; 22 | align-items: stretch; 23 | flex-direction: column; 24 | justify-content: space-between; 25 | width: 100%; 26 | height: 100%; 27 | 28 | > * { 29 | flex-grow: 0; 30 | } 31 | 32 | } 33 | 34 | a.#{$pr}#{$c}card#{$c1}inner { 35 | 36 | &:not(:hover), 37 | &:not(:focus), 38 | &:not(:active) { 39 | color: $body-color; 40 | text-decoration: none; 41 | 42 | .#{$pr}#{$c}card#{$c1}title { 43 | text-decoration: underline; 44 | } 45 | 46 | } 47 | 48 | &:hover, 49 | &:focus, 50 | &:active { 51 | color: $body-color; 52 | text-decoration: none; 53 | 54 | .#{$pr}#{$m}thumbnail { 55 | 56 | img { 57 | transform: scale(1.05); 58 | opacity: .75; 59 | } 60 | 61 | } 62 | 63 | .#{$pr}#{$c}card#{$c1}title { 64 | text-decoration: none; 65 | } 66 | 67 | } 68 | 69 | } 70 | 71 | .#{$pr}#{$c}card#{$c1}object { 72 | position: relative; 73 | flex-grow: 0; 74 | z-index: 11; 75 | 76 | .#{$pr}#{$m}thumbnail { 77 | background-color: $body-inverse-bg; 78 | border: 0 none; 79 | } 80 | 81 | } 82 | 83 | .#{$pr}#{$c}card#{$c1}meta { 84 | line-height: $line-height-xs; 85 | } 86 | 87 | .#{$pr}#{$c}card#{$c1}contents { 88 | padding: map-get( $grid-gutter-widths, 'md' ); 89 | word-break: break-word; 90 | } 91 | 92 | .#{$pr}#{$c}card#{$c1}header { 93 | padding: map-get( $grid-gutter-widths, 'sm' ) map-get( $grid-gutter-widths, 'md' ); 94 | word-break: break-word; 95 | } 96 | 97 | .#{$pr}#{$c}card#{$c1}contents { 98 | flex-grow: 1; 99 | } 100 | 101 | .#{$pr}#{$c}card#{$c1}contents > * { 102 | margin: 0; 103 | } 104 | 105 | .#{$pr}#{$c}card#{$c1}contents > *:not(:last-child) { 106 | margin-bottom: 0.5em; 107 | } 108 | 109 | .#{$pr}#{$c}card#{$c1}footer { 110 | flex-grow: 1; 111 | display: flex; 112 | flex-direction: column; 113 | align-items: center; 114 | justify-content: flex-end; 115 | padding: map-get( $grid-gutter-widths, 'sm' ) map-get( $grid-gutter-widths, 'md' ); 116 | word-break: break-word; 117 | 118 | > .#{$pr}#{$m}button { 119 | display: flex; 120 | width: 100%; 121 | margin-left: auto; 122 | margin-right: auto; 123 | } 124 | 125 | > [class*="#{$pr}#{$m}button#{$c2}icon"] { 126 | padding-left: 1em; 127 | padding-right: 1em; 128 | } 129 | 130 | } 131 | -------------------------------------------------------------------------------- /src/scss/object/component/_card_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}card(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}card { 8 | font-size: $font-size-sm; 9 | max-width: map-get( $object-max-widths, 'xl' ); 10 | 11 | @include media-breakpoint-up(lg) { 12 | font-size: $font-size-md; 13 | } 14 | 15 | &.#{$pr}#{$c}card#{$c3}fixed { 16 | 17 | @include media-breakpoint-up(lg) { 18 | font-size: $font-size-sm; 19 | } 20 | 21 | } 22 | 23 | } 24 | 25 | .#{$pr}#{$c}card#{$c3}sm { 26 | font-size: $font-size-xs; 27 | max-width: map-get( $object-max-widths, 'md' ); 28 | 29 | @include media-breakpoint-up(lg) { 30 | font-size: $font-size-sm; 31 | } 32 | 33 | &.#{$pr}#{$c}card#{$c3}fixed { 34 | 35 | @include media-breakpoint-up(lg) { 36 | font-size: $font-size-xs; 37 | } 38 | 39 | } 40 | 41 | } 42 | 43 | .#{$pr}#{$c}card#{$c3}lg { 44 | font-size: $font-size-md; 45 | max-width: map-get( $object-max-widths, 'xxl' ); 46 | 47 | @include media-breakpoint-up(lg) { 48 | font-size: $font-size-lg; 49 | } 50 | 51 | .#{$pr}#{$c}card#{$c1}contents { 52 | 53 | @include media-breakpoint-up(xl) { 54 | padding: map-get( $grid-gutter-widths, 'lg' ); 55 | } 56 | 57 | } 58 | 59 | &.#{$pr}#{$c}card#{$c3}fixed { 60 | 61 | @include media-breakpoint-up(lg) { 62 | font-size: $font-size-md; 63 | } 64 | 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /src/scss/object/component/_flip_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}flip(font) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}flip#{$c1}lead { 8 | @include font-family-weight( 'root', 'bold' ); 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/object/component/_flip_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}flip(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}flip#{$c1}header { 8 | font-size: $font-size-lg; 9 | 10 | @include media-breakpoint-up(md) { 11 | font-size: $font-size-xl; 12 | } 13 | 14 | @include media-breakpoint-up(xl) { 15 | font-size: $font-size-xxl; 16 | } 17 | 18 | } 19 | 20 | .#{$pr}#{$c}flip#{$c1}lead { 21 | font-size: $font-size-md; 22 | 23 | @include media-breakpoint-up(md) { 24 | font-size: $font-size-lg; 25 | } 26 | 27 | @include media-breakpoint-up(xl) { 28 | font-size: $font-size-xl; 29 | } 30 | 31 | } 32 | 33 | .#{$pr}#{$c}flip#{$c1}body { 34 | font-size: $font-size-sm; 35 | 36 | @include media-breakpoint-up(md) { 37 | font-size: $font-size-md; 38 | } 39 | 40 | @include media-breakpoint-up(xl) { 41 | font-size: $font-size-lg; 42 | } 43 | 44 | } 45 | 46 | .#{$pr}#{$c}flip#{$c1}link { 47 | font-size: $font-size-sm; 48 | 49 | @include media-breakpoint-up(md) { 50 | font-size: $font-size-md; 51 | } 52 | 53 | @include media-breakpoint-up(xl) { 54 | font-size: $font-size-lg; 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/object/component/_form.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}form 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}form { 8 | display: flex; 9 | align-items: center; 10 | flex-direction: row; 11 | flex-wrap: wrap; 12 | margin: 0 0 -1em; 13 | line-height: 1; 14 | 15 | > .#{$pr}#{$m}checkbox, 16 | > .#{$pr}#{$m}radio { 17 | margin-right: 2em; 18 | } 19 | 20 | > * { 21 | flex-grow: 0; 22 | flex-shrink: 1; 23 | flex-basis: auto; 24 | margin: 0 map-get( $grid-gutter-widths, 'sm' ) 1em 0; 25 | 26 | &:last-child { 27 | margin-right: 0; 28 | } 29 | 30 | } 31 | 32 | } 33 | 34 | 35 | /* 36 | -------------------- 37 | #{$pr}#{$c}form#{$c3}grow 38 | -------------------- 39 | */ 40 | 41 | .#{$pr}#{$c}form#{$c3}grow { 42 | 43 | .#{$pr}#{$m}input, 44 | .#{$pr}#{$m}select { 45 | flex-grow: 1; 46 | flex-basis: 0%; 47 | } 48 | 49 | } 50 | 51 | 52 | /* 53 | -------------------- 54 | #{$pr}#{$c}form#{$c3}append 55 | -------------------- 56 | */ 57 | 58 | .#{$pr}#{$c}form#{$c3}append { 59 | 60 | .#{$pr}#{$m}input { 61 | margin-right: 0; 62 | border-top-right-radius: 0; 63 | border-bottom-right-radius: 0; 64 | 65 | + .#{$pr}#{$m}button { 66 | margin-left: ( $ui-btn-border-width * -1 ); 67 | border-top-left-radius: 0; 68 | border-bottom-left-radius: 0; 69 | } 70 | 71 | } 72 | 73 | } 74 | 75 | 76 | /* 77 | -------------------- 78 | #{$pr}#{$c}form#{$c1}info 79 | -------------------- 80 | */ 81 | 82 | .#{$pr}#{$c}form#{$c1}info { 83 | width: 100%; 84 | margin: 0; 85 | color: $info; 86 | line-height: $line-height-sm; 87 | } 88 | 89 | 90 | /* 91 | -------------------- 92 | #{$pr}#{$c}form#{$c1}error 93 | -------------------- 94 | */ 95 | 96 | .#{$pr}#{$c}form#{$c1}error { 97 | width: 100%; 98 | margin: 0; 99 | color: $important; 100 | line-height: $line-height-sm; 101 | } 102 | -------------------------------------------------------------------------------- /src/scss/object/component/_form_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}form(font) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}form#{$c1}label { 8 | @include font-family-weight( 'root', 'bold' ); 9 | } 10 | 11 | .#{$pr}#{$c}form#{$c1}error { 12 | @include font-family-weight( 'root', 'bold' ); 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/object/component/_form_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}form(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}form { 8 | font-size: $font-size-sm; 9 | 10 | @include media-breakpoint-up(lg) { 11 | font-size: $font-size-md; 12 | } 13 | 14 | &.#{$pr}#{$c}form#{$c3}fixed { 15 | 16 | @include media-breakpoint-up(lg) { 17 | font-size: $font-size-sm; 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | .#{$pr}#{$c}form#{$c1}info { 25 | font-size: $font-size-xs; 26 | 27 | @include media-breakpoint-up(lg) { 28 | font-size: $font-size-sm; 29 | } 30 | 31 | .#{$pr}#{$c}form#{$c3}fixed & { 32 | 33 | @include media-breakpoint-up(lg) { 34 | font-size: $font-size-xs; 35 | } 36 | 37 | } 38 | 39 | } 40 | 41 | .#{$pr}#{$c}form#{$c1}error { 42 | font-size: $font-size-xs; 43 | 44 | @include media-breakpoint-up(lg) { 45 | font-size: $font-size-sm; 46 | } 47 | 48 | .#{$pr}#{$c}form#{$c3}fixed & { 49 | 50 | @include media-breakpoint-up(lg) { 51 | font-size: $font-size-xs; 52 | } 53 | 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/object/component/_headline.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}headline 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}headline { 8 | line-height: $line-height-sm; 9 | } 10 | 11 | .#{$pr}#{$c}headline#{$c1}inner { 12 | position: relative; 13 | display: flex; 14 | flex-wrap: wrap; 15 | flex-direction: row; 16 | align-items: flex-start; 17 | justify-content: flex-start; 18 | width: 100%; 19 | 20 | & > [class*="#{$pr}#{$c}headline#{$c1}"] { 21 | flex-shrink: 1; 22 | } 23 | 24 | & > :not(.#{$pr}#{$c}headline#{$c1}title) { 25 | flex-grow: 0; 26 | flex-basis: auto; 27 | } 28 | 29 | & > .#{$pr}#{$c}headline#{$c1}title { 30 | flex-grow: 1; 31 | flex-basis: 100%; 32 | font-size: 1em; 33 | } 34 | 35 | @at-root { 36 | 37 | a#{&} { 38 | color: $body-color; 39 | text-decoration: none; 40 | 41 | &:not(:hover):not(:focus){ 42 | 43 | .#{$pr}#{$c}headline#{$c1}title { 44 | text-decoration: underline; 45 | } 46 | 47 | } 48 | 49 | } 50 | 51 | } 52 | 53 | } 54 | 55 | .#{$pr}#{$c}headline#{$c1}header { 56 | margin: 0 .5em 0 0; 57 | white-space: nowrap; 58 | } 59 | 60 | .#{$pr}#{$c}headline#{$c1}category { 61 | margin: 0 1em 0 0; 62 | 63 | .#{$pr}#{$m}label { 64 | min-width: 8em; 65 | padding: .25em 0; 66 | margin-right: 0; 67 | vertical-align: baseline; 68 | } 69 | 70 | } 71 | 72 | .#{$pr}#{$c}headline#{$c1}title { 73 | margin: .25em 0 0; 74 | 75 | a { 76 | color: $body-color; 77 | 78 | &:not(:hover):not(:focus) { 79 | text-decoration: underline; 80 | } 81 | 82 | } 83 | 84 | } 85 | 86 | .#{$pr}#{$c}headline:not(.#{$pr}#{$c}headline#{$c3}fixed) { 87 | 88 | & .#{$pr}#{$c}headline#{$c1}header { 89 | 90 | @include media-breakpoint-up(lg) { 91 | min-width: 8.5em; 92 | } 93 | 94 | } 95 | 96 | & .#{$pr}#{$c}headline#{$c1}title { 97 | 98 | @include media-breakpoint-up(lg) { 99 | flex-basis: 0; 100 | margin-top: 0; 101 | } 102 | 103 | } 104 | 105 | } 106 | -------------------------------------------------------------------------------- /src/scss/object/component/_headline_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}headline(font) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}headline#{$c1}header { 8 | @include font-family-weight( 'root', 'normal' ); 9 | } 10 | 11 | .#{$pr}#{$c}headline#{$c1}title { 12 | @include font-family-weight( 'root', 'normal' ); 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/object/component/_headline_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}headline(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}headline { 8 | font-size: $font-size-sm; 9 | 10 | @include media-breakpoint-up(lg) { 11 | font-size: $font-size-md; 12 | } 13 | 14 | &.#{$pr}#{$c}headline#{$c3}fixed { 15 | 16 | @include media-breakpoint-up(lg) { 17 | font-size: $font-size-md; 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | .#{$pr}#{$c}headline#{$c3}sm { 25 | font-size: $font-size-xs; 26 | 27 | @include media-breakpoint-up(lg) { 28 | font-size: $font-size-sm; 29 | } 30 | 31 | &.#{$pr}#{$c}headline#{$c3}fixed { 32 | 33 | @include media-breakpoint-up(lg) { 34 | font-size: $font-size-xs; 35 | } 36 | 37 | } 38 | 39 | } 40 | 41 | .#{$pr}#{$c}headline#{$c3}lg { 42 | font-size: $font-size-md; 43 | 44 | @include media-breakpoint-up(lg) { 45 | font-size: $font-size-lg; 46 | } 47 | 48 | &.#{$pr}#{$c}headline#{$c3}fixed { 49 | 50 | @include media-breakpoint-up(lg) { 51 | font-size: $font-size-md; 52 | } 53 | 54 | } 55 | 56 | } 57 | 58 | -------------------------------------------------------------------------------- /src/scss/object/component/_hero_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}hero(font) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}hero#{$c1}lead { 8 | @include font-family-weight( 'root', 'bold' ); 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/object/component/_hero_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}hero(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}hero#{$c1}header { 8 | font-size: $font-size-lg; 9 | 10 | @include media-breakpoint-up(md) { 11 | font-size: $font-size-xl; 12 | } 13 | 14 | @include media-breakpoint-up(xl) { 15 | font-size: $font-size-xxl; 16 | } 17 | 18 | } 19 | 20 | .#{$pr}#{$c}hero#{$c1}lead { 21 | font-size: $font-size-md; 22 | 23 | @include media-breakpoint-up(md) { 24 | font-size: $font-size-lg; 25 | } 26 | 27 | @include media-breakpoint-up(xl) { 28 | font-size: $font-size-xl; 29 | } 30 | 31 | } 32 | 33 | .#{$pr}#{$c}hero#{$c1}body { 34 | font-size: $font-size-sm; 35 | 36 | @include media-breakpoint-up(md) { 37 | font-size: $font-size-md; 38 | } 39 | 40 | @include media-breakpoint-up(xl) { 41 | font-size: $font-size-lg; 42 | } 43 | 44 | } 45 | 46 | .#{$pr}#{$c}hero#{$c1}link { 47 | font-size: $font-size-sm; 48 | 49 | @include media-breakpoint-up(md) { 50 | font-size: $font-size-md; 51 | } 52 | 53 | @include media-breakpoint-up(xl) { 54 | font-size: $font-size-lg; 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/object/component/_media.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}media 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}media { 8 | position: relative; 9 | } 10 | 11 | time[class*="#{$pr}#{$c}media"] { 12 | display: block; 13 | } 14 | 15 | .#{$pr}#{$c}media#{$c1}inner { 16 | display: flex; 17 | align-items: flex-start; 18 | width: 100%; 19 | height: 100%; 20 | 21 | > * { 22 | flex-grow: 0; 23 | } 24 | 25 | } 26 | 27 | a.#{$pr}#{$c}media#{$c1}inner { 28 | 29 | &:not(:hover), 30 | &:not(:focus), 31 | &:not(:active) { 32 | color: $body-color; 33 | text-decoration: none; 34 | 35 | .#{$pr}#{$c}media#{$c1}title { 36 | text-decoration: underline; 37 | } 38 | 39 | } 40 | 41 | &:hover, 42 | &:focus, 43 | &:active { 44 | color: $body-color; 45 | text-decoration: none; 46 | 47 | .#{$pr}#{$m}thumbnail { 48 | 49 | img { 50 | transform: scale(1.05); 51 | opacity: .75; 52 | } 53 | 54 | } 55 | 56 | .#{$pr}#{$c}media#{$c1}title { 57 | text-decoration: none; 58 | } 59 | 60 | } 61 | 62 | } 63 | 64 | .#{$pr}#{$c}media#{$c1}object { 65 | flex-grow: 0; 66 | flex-shrink: 1; 67 | flex-basis: auto; 68 | width: 33.33333333%; 69 | min-width: 100px; 70 | } 71 | 72 | .#{$pr}#{$c}media#{$c1}meta { 73 | line-height: $line-height-xs; 74 | } 75 | 76 | .#{$pr}#{$c}media#{$c1}contents { 77 | flex-grow: 1; 78 | flex-shrink: 1; 79 | flex-basis: 0%; 80 | padding-left: 3%; 81 | padding-left: clamp( .5rem, 3.5%, 3rem ); 82 | } 83 | 84 | .#{$pr}#{$c}media#{$c1}contents > * { 85 | margin: 0; 86 | } 87 | 88 | .#{$pr}#{$c}media#{$c1}contents > *:not(:last-child) { 89 | margin-bottom: map-get( $grid-gutter-widths, 'sm' ); 90 | } 91 | 92 | 93 | /* 94 | -------------------- 95 | #{$pr}#{$c}media#{$c1}middle 96 | -------------------- 97 | */ 98 | 99 | .#{$pr}#{$c}media#{$c1}middle { 100 | 101 | .#{$pr}#{$c}media#{$c1}inner { 102 | align-items: center; 103 | } 104 | 105 | } 106 | 107 | 108 | /* 109 | -------------------- 110 | #{$pr}#{$c}media#{$c3}reverse 111 | -------------------- 112 | */ 113 | 114 | .#{$pr}#{$c}media#{$c3}reverse { 115 | 116 | .#{$pr}#{$c}media#{$c1}inner { 117 | flex-direction: row-reverse; 118 | } 119 | 120 | .#{$pr}#{$c}media#{$c1}contents { 121 | padding-left: 0; 122 | padding-right: 3%; 123 | padding-right: clamp( .5rem, 3.5%, 3rem ); 124 | } 125 | 126 | } 127 | 128 | -------------------------------------------------------------------------------- /src/scss/object/component/_media_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}media(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}media { 8 | font-size: $font-size-sm; 9 | 10 | @include media-breakpoint-up(lg) { 11 | font-size: $font-size-md; 12 | } 13 | 14 | &.#{$pr}#{$c}media#{$c3}fixed { 15 | 16 | @include media-breakpoint-up(lg) { 17 | font-size: $font-size-sm; 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | .#{$pr}#{$c}media#{$c3}sm { 25 | font-size: $font-size-xs; 26 | 27 | @include media-breakpoint-up(lg) { 28 | font-size: $font-size-sm; 29 | } 30 | 31 | &.#{$pr}#{$c}media#{$c3}fixed { 32 | 33 | @include media-breakpoint-up(lg) { 34 | font-size: $font-size-xs; 35 | } 36 | 37 | } 38 | 39 | } 40 | 41 | .#{$pr}#{$c}media#{$c3}lg { 42 | font-size: $font-size-md; 43 | 44 | @include media-breakpoint-up(lg) { 45 | font-size: $font-size-lg; 46 | } 47 | 48 | &.#{$pr}#{$c}media#{$c3}fixed { 49 | 50 | @include media-breakpoint-up(lg) { 51 | font-size: $font-size-md; 52 | } 53 | 54 | } 55 | 56 | } 57 | 58 | -------------------------------------------------------------------------------- /src/scss/object/component/_overlay.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}overlay 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}overlay { 8 | display: none; 9 | position: fixed; 10 | top: 0; 11 | bottom: 0; 12 | left: 0; 13 | right: 0; 14 | z-index: 998; 15 | } 16 | 17 | .#{$pr}#{$c}overlay#{$c1}bg { 18 | position: absolute; 19 | top: 0; 20 | bottom: 0; 21 | left: 0; 22 | right: 0; 23 | background-color: rgba($body-bg, .9); 24 | z-index: 999; 25 | } 26 | 27 | .#{$pr}#{$c}overlay#{$c1}contents { 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | max-height: 100vh; 33 | color: $body-color; 34 | z-index: 1000; 35 | overflow: auto; 36 | 37 | @include media-breakpoint-up(md) { 38 | min-width: map-get($container-max-widths-md, md); 39 | } 40 | 41 | @include media-breakpoint-up(lg) { 42 | min-width: map-get($container-max-widths-md, lg); 43 | } 44 | 45 | } 46 | 47 | .#{$pr}#{$c}overlay#{$c3}inverse { 48 | 49 | .#{$pr}#{$c}overlay#{$c1}bg { 50 | background-color: rgba($body-inverse-bg, .9); 51 | } 52 | 53 | .#{$pr}#{$c}overlay#{$c1}contents { 54 | color: $body-inverse-color; 55 | } 56 | 57 | } 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/scss/object/component/_paginate_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}paginate(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}paginate { 8 | 9 | .#{$pr}#{$m}nav#{$c1}item { 10 | 11 | &.#{$paginate-prev}, 12 | &.#{$paginate-next} { 13 | 14 | .#{$pr}#{$m}nav#{$c1}label { 15 | 16 | &:after { 17 | border-top-color: currentcolor; 18 | border-left-color: currentcolor; 19 | } 20 | 21 | } 22 | 23 | } 24 | 25 | } 26 | 27 | // not inverse ================================ 28 | 29 | .#{$pr}#{$m}nav:not(.#{$pr}#{$m}nav#{$c3}inverse) { 30 | 31 | .#{$pr}#{$m}nav#{$c1}item { 32 | 33 | &.#{$paginate-current} { 34 | 35 | .#{$pr}#{$m}nav#{$c1}label { 36 | background-color: $paginate-current-bg; 37 | border-color: $paginate-current-border-color; 38 | color: $paginate-current-color; 39 | } 40 | 41 | } 42 | 43 | } 44 | 45 | a.#{$pr}#{$m}nav#{$c1}label { 46 | background-color: $paginate-bg; 47 | border-color: $paginate-border-color; 48 | color: $paginate-color; 49 | 50 | &:hover, 51 | &:focus { 52 | background-color: $paginate-hover-bg; 53 | border-color: $paginate-hover-border-color; 54 | color: $paginate-hover-color; 55 | } 56 | 57 | } 58 | 59 | } 60 | 61 | // inverse ================================ 62 | 63 | .#{$pr}#{$m}nav#{$c3}inverse { 64 | 65 | .#{$pr}#{$m}nav#{$c1}item { 66 | 67 | &.#{$paginate-current} { 68 | 69 | .#{$pr}#{$m}nav#{$c1}label { 70 | background-color: $paginate-inverse-current-bg; 71 | border-color: $paginate-inverse-current-border-color; 72 | color: $paginate-inverse-current-color; 73 | } 74 | 75 | } 76 | 77 | } 78 | 79 | a.#{$pr}#{$m}nav#{$c1}label { 80 | background-color: $paginate-inverse-bg; 81 | border-color: $paginate-inverse-border-color; 82 | color: $paginate-inverse-color; 83 | 84 | &:hover, 85 | &:focus { 86 | background-color: $paginate-inverse-hover-bg; 87 | border-color: $paginate-inverse-hover-border-color; 88 | color: $paginate-inverse-hover-color; 89 | } 90 | 91 | } 92 | 93 | } 94 | 95 | } 96 | -------------------------------------------------------------------------------- /src/scss/object/component/_paginate_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}paginate(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}paginate { 8 | 9 | .#{$pr}#{$m}nav#{$c1}label { 10 | width: map-get( $nav-min-heights, 'md' ); 11 | height: map-get( $nav-min-heights, 'md' ); 12 | 13 | @include media-breakpoint-up(lg) { 14 | width: map-get( $nav-max-heights, 'md' ); 15 | height: map-get( $nav-max-heights, 'md' ); 16 | } 17 | 18 | } 19 | 20 | &.#{$pr}#{$m}nav#{$c3}fixed { 21 | 22 | .#{$pr}#{$m}nav#{$c1}label { 23 | 24 | @include media-breakpoint-up(lg) { 25 | width: map-get( $nav-min-heights, 'md' ); 26 | height: map-get( $nav-min-heights, 'md' ); 27 | } 28 | 29 | } 30 | 31 | } 32 | 33 | .#{$pr}#{$m}nav#{$c3}sm { 34 | 35 | .#{$pr}#{$m}nav#{$c1}label { 36 | width: map-get( $nav-min-heights, 'sm' ); 37 | height: map-get( $nav-min-heights, 'sm' ); 38 | 39 | @include media-breakpoint-up(lg) { 40 | width: map-get( $nav-max-heights, 'sm' ); 41 | height: map-get( $nav-max-heights, 'sm' ); 42 | } 43 | 44 | } 45 | 46 | } 47 | 48 | .#{$pr}#{$m}nav#{$c3}sm.#{$pr}#{$m}nav#{$c3}fixed { 49 | 50 | .#{$pr}#{$m}nav#{$c1}label { 51 | 52 | @include media-breakpoint-up(lg) { 53 | width: map-get( $nav-min-heights, 'sm' ); 54 | height: map-get( $nav-min-heights, 'sm' ); 55 | } 56 | 57 | } 58 | 59 | } 60 | 61 | .#{$pr}#{$m}nav#{$c3}lg { 62 | 63 | .#{$pr}#{$m}nav#{$c1}label { 64 | width: map-get( $nav-min-heights, 'lg' ); 65 | height: map-get( $nav-min-heights, 'lg' ); 66 | 67 | @include media-breakpoint-up(lg) { 68 | width: map-get( $nav-max-heights, 'lg' ); 69 | height: map-get( $nav-max-heights, 'lg' ); 70 | } 71 | 72 | } 73 | 74 | } 75 | 76 | .#{$pr}#{$m}nav#{$c3}lg.#{$pr}#{$m}nav#{$c3}fixed { 77 | 78 | .#{$pr}#{$m}nav#{$c1}label { 79 | 80 | @include media-breakpoint-up(lg) { 81 | width: map-get( $nav-min-heights, 'lg' ); 82 | height: map-get( $nav-min-heights, 'lg' ); 83 | } 84 | 85 | } 86 | 87 | } 88 | 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/object/component/_serial.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}serial 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}serial { 8 | 9 | .#{$pr}#{$m}nav { 10 | display: block; 11 | width: 100%; 12 | } 13 | 14 | .#{$pr}#{$m}nav#{$c1}list { 15 | flex-wrap: wrap; 16 | flex-direction: column; 17 | } 18 | 19 | .#{$pr}#{$m}nav#{$c1}item { 20 | flex-grow: 1; 21 | 22 | &.#{$paginate-prev}, 23 | &.#{$paginate-next} { 24 | 25 | .#{$pr}#{$m}nav#{$c1}label { 26 | position: relative; 27 | 28 | &:after { 29 | content: ""; 30 | position: absolute; 31 | top: 50%; 32 | width: .5em; 33 | height: .5em; 34 | transform-origin: center center; 35 | border-top: .2em solid currentcolor; 36 | border-left: .2em solid currentcolor; 37 | border-radius: .1em; 38 | } 39 | 40 | } 41 | 42 | } 43 | 44 | } 45 | 46 | .#{$pr}#{$m}nav#{$c1}item.#{$paginate-prev} { 47 | 48 | .#{$pr}#{$m}nav#{$c1}label { 49 | justify-content: flex-start; 50 | padding-left: 2em; 51 | text-align: left; 52 | 53 | &:after { 54 | left: .65em; 55 | transform: 56 | translateY( -50% ) 57 | rotate( -45deg ); 58 | } 59 | 60 | } 61 | 62 | } 63 | 64 | .#{$pr}#{$m}nav#{$c1}item.#{$paginate-next} { 65 | 66 | .#{$pr}#{$m}nav#{$c1}label { 67 | justify-content: flex-end; 68 | padding-right: 2em; 69 | text-align: right; 70 | 71 | &:after { 72 | right: .65em; 73 | transform: 74 | translateY( -50% ) 75 | rotate( 135deg ); 76 | } 77 | 78 | } 79 | 80 | } 81 | 82 | } 83 | -------------------------------------------------------------------------------- /src/scss/object/component/_serial_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}serial(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}serial { 8 | 9 | .#{$pr}#{$m}nav#{$c1}item { 10 | 11 | &.#{$paginate-prev}, 12 | &.#{$paginate-next} { 13 | 14 | .#{$pr}#{$m}nav#{$c1}label { 15 | 16 | &:after { 17 | border-top-color: currentcolor; 18 | border-left-color: currentcolor; 19 | } 20 | 21 | } 22 | 23 | } 24 | 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/object/component/_step.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}step 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}step { 8 | width: calc( 100% - #{map-get( $grid-gutter-widths, 'md' )} ); 9 | margin: 0 auto; 10 | 11 | @include media-breakpoint-up(sm) { 12 | max-width: map-get( $object-max-widths, 'lg' ); 13 | } 14 | 15 | .#{$pr}#{$m}nav.#{$pr}#{$m}nav#{$c3}vertical { 16 | 17 | .#{$pr}#{$m}nav#{$c1}list { 18 | margin-bottom: -.5em; 19 | } 20 | 21 | .#{$pr}#{$m}nav#{$c1}item { 22 | margin-bottom: .5em; 23 | } 24 | 25 | .#{$pr}#{$m}nav#{$c1}label { 26 | justify-content: center; 27 | text-align: center; 28 | height: math-div(44,16) + em; 29 | padding-top: 0; 30 | padding-bottom: 0; 31 | border: $ui-border-width solid transparent; 32 | 33 | &:not(.#{$nav-current}) { 34 | 35 | &:hover, 36 | &:focus, 37 | &:active { 38 | background-color: $nav-hover-bg; 39 | } 40 | 41 | } 42 | 43 | &.#{$nav-current} { 44 | color: $nav-color; 45 | background-color: $nav-bg; 46 | border-color: $nav-color; 47 | } 48 | 49 | } 50 | 51 | ol.#{$pr}#{$m}nav#{$c1}list { 52 | counter-reset: item; 53 | 54 | .#{$pr}#{$m}nav#{$c1}label { 55 | position: relative; 56 | padding-left: math.div(44,16) + math.div(8,16) + em; 57 | 58 | &:before { 59 | position: absolute; 60 | top: 0; 61 | left: 0; 62 | display: flex; 63 | align-items: center; 64 | justify-content: center; 65 | counter-increment: item; 66 | content: counter( item ); 67 | min-width: math.div(44,16) + em; 68 | height: 100%; 69 | background-color: $nav-hover-bg; 70 | transition: 71 | background-color .3s, 72 | color .3s; 73 | } 74 | 75 | &.#{$nav-current} { 76 | 77 | &:before { 78 | color: $ui-current-color; 79 | background-color: $ui-current-bg; 80 | } 81 | 82 | } 83 | 84 | } 85 | 86 | } 87 | 88 | } 89 | 90 | } 91 | -------------------------------------------------------------------------------- /src/scss/object/component/_step_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}step(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}step { 8 | 9 | .#{$pr}#{$m}nav.#{$pr}#{$m}nav#{$c3}vertical { 10 | 11 | .#{$pr}#{$m}nav#{$c1}label { 12 | border-color: transparent; 13 | 14 | &:not(.#{$nav-current}) { 15 | 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | background-color: $nav-hover-bg; 20 | } 21 | 22 | } 23 | 24 | &.#{$nav-current} { 25 | color: $nav-color; 26 | background-color: $nav-bg; 27 | border-color: $nav-color; 28 | } 29 | 30 | } 31 | 32 | ol.#{$pr}#{$m}nav#{$c1}list { 33 | 34 | .#{$pr}#{$m}nav#{$c1}label { 35 | 36 | &:before { 37 | background-color: $nav-hover-bg; 38 | } 39 | 40 | &.#{$nav-current} { 41 | 42 | &:before { 43 | color: $ui-current-color; 44 | background-color: $ui-current-bg; 45 | } 46 | 47 | } 48 | 49 | } 50 | 51 | } 52 | 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /src/scss/object/component/_topicpath.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}topicpath 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}topicpath { 8 | position: relative; 9 | 10 | &:after { 11 | content: ""; 12 | position: absolute; 13 | top: 0; 14 | right: 0; 15 | width: 3em; 16 | height: 100%; 17 | background: linear-gradient( 90deg, rgba( $body-bg, 0 ) 0%, rgba( $body-bg, 1 ) 100% ); 18 | z-index: 12; 19 | } 20 | 21 | .#{$pr}#{$m}nav { 22 | } 23 | 24 | .#{$pr}#{$m}nav#{$c1}list { 25 | flex-wrap: nowrap; 26 | } 27 | 28 | .#{$pr}#{$m}nav#{$c1}item { 29 | display: flex; 30 | flex-wrap: nowrap; 31 | margin-right: .5em; 32 | align-items: center; 33 | 34 | &:not(:first-child) { 35 | 36 | &:before { 37 | flex-grow: 0; 38 | content: ""; 39 | width: .4em; 40 | height: .4em; 41 | transform-origin: center center; 42 | border-top: .0625rem solid currentcolor; 43 | border-left: .0625rem solid currentcolor; 44 | margin-right: .75em; 45 | transform: rotate( 135deg ); 46 | } 47 | 48 | } 49 | 50 | &:last-child { 51 | padding-right: 3em; 52 | } 53 | 54 | } 55 | 56 | .#{$pr}#{$m}nav#{$c1}label { 57 | padding-left: 0; 58 | padding-right: 0; 59 | } 60 | 61 | } 62 | 63 | .#{$pr}#{$c}topicpath#{$c1}inner { 64 | position: relative; 65 | width: 100%; 66 | height: 100%; 67 | overflow-x: auto; 68 | overflow-y: hidden; 69 | -webkit-overflow-scrolling: touch; 70 | overflow-scrolling: touch; 71 | overflow: auto; 72 | white-space: nowrap; 73 | z-index: 11; 74 | } 75 | -------------------------------------------------------------------------------- /src/scss/object/component/_topicpath_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}topicpath 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}topicpath { 8 | 9 | &:after { 10 | background: linear-gradient( 90deg, rgba( $body-bg, 0 ) 0%, rgba( $body-bg, 1 ) 100% ); 11 | } 12 | 13 | .#{$pr}#{$m}nav#{$c1}item { 14 | 15 | &:not(:first-child) { 16 | 17 | &:before { 18 | border-top-color: currentcolor; 19 | border-left-color: currentcolor; 20 | } 21 | 22 | } 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/object/component/_topicpath_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$c}topicpath(font) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$c}topicpath { 8 | 9 | .#{$pr}#{$m}nav#{$c1}item { 10 | 11 | &:last-child { 12 | @include font-family-weight( 'root', 'bold' ); 13 | } 14 | 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/object/module/_button.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}button 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}button { 8 | position: relative; 9 | display: inline-flex; 10 | flex-wrap: nowrap; 11 | align-items: center; 12 | justify-content: center; 13 | text-align: center; 14 | max-width: map-get( $button-min-widths, 'md' ); 15 | min-height: map-get( $button-min-heights, 'md' ); 16 | margin: 0 auto; 17 | 18 | // padding-bottom, slightly subtracts baseline 19 | padding: .5em 1em .4em; 20 | 21 | background-color: $default-fade; 22 | border: $ui-btn-border-width solid $default-fade; 23 | color: $body-color; 24 | font-size: map-get( $button-min-font-sizes, 'md' ); 25 | line-height: $line-height-xs; 26 | border-radius: $btn-border-radius; 27 | vertical-align: middle; 28 | cursor: pointer; 29 | -webkit-appearance: none; 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | color: $body-color; 35 | text-decoration: none; 36 | } 37 | 38 | a:hover &, 39 | a:focus &, 40 | a:active & { 41 | color: $body-color; 42 | text-decoration: none; 43 | } 44 | 45 | &.disabled, 46 | &[disabled], 47 | fieldset[disabled] & { 48 | cursor: default; 49 | opacity: .65; 50 | pointer-events: none; 51 | } 52 | 53 | @at-root { 54 | 55 | a#{&} { 56 | text-decoration: none; 57 | 58 | &:hover, 59 | &:focus { 60 | text-decoration: none; 61 | } 62 | 63 | } 64 | 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /src/scss/object/module/_button_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}button#{$c3}(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}button#{$c3}style#{$c3}a { 8 | @include button-variant( 9 | $body-inverse-color, 10 | $default, 11 | $default, 12 | $body-color, 13 | transparent, 14 | $default 15 | ); 16 | 17 | &.#{$pr}#{$m}button#{$c3}info { 18 | @include button-variant( 19 | $body-inverse-color, 20 | $info, 21 | $info, 22 | $body-color, 23 | transparent, 24 | $info 25 | ); 26 | } 27 | 28 | &.#{$pr}#{$m}button#{$c3}important { 29 | @include button-variant( 30 | $body-inverse-color, 31 | $important, 32 | $important, 33 | $body-color, 34 | transparent, 35 | $important 36 | ); 37 | } 38 | 39 | &.#{$pr}#{$m}button#{$c3}inverse { 40 | @include button-variant( 41 | $body-color, 42 | $inverse, 43 | $inverse, 44 | $body-inverse-color, 45 | transparent, 46 | $inverse 47 | ); 48 | } 49 | 50 | } 51 | 52 | 53 | .#{$pr}#{$m}button#{$c3}style#{$c3}b { 54 | @include button-variant( 55 | $body-color, 56 | transparent, 57 | $default, 58 | $body-inverse-color, 59 | $default, 60 | $default 61 | ); 62 | 63 | &.#{$pr}#{$m}button#{$c3}info { 64 | @include button-variant( 65 | $body-color, 66 | transparent, 67 | $info, 68 | $body-inverse-color, 69 | $info, 70 | transparent 71 | ); 72 | } 73 | 74 | &.#{$pr}#{$m}button#{$c3}important { 75 | @include button-variant( 76 | $body-color, 77 | transparent, 78 | $important, 79 | $body-inverse-color, 80 | $important, 81 | transparent 82 | ); 83 | } 84 | 85 | &.#{$pr}#{$m}button#{$c3}inverse { 86 | @include button-variant( 87 | $body-inverse-color, 88 | transparent, 89 | $inverse, 90 | $body-color, 91 | $inverse, 92 | transparent 93 | ); 94 | } 95 | 96 | } 97 | -------------------------------------------------------------------------------- /src/scss/object/module/_button_icon.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}button#{$c2}icon 4 | -------------------- 5 | */ 6 | 7 | [class*="#{$pr}#{$m}button#{$c2}icon"] { 8 | padding-right: 2.65em; 9 | 10 | &:after { 11 | content: ""; 12 | position: absolute; 13 | top: 50%; 14 | right: .65em; 15 | transform: translateY( -50% ); 16 | width: 1em; 17 | height: 1em; 18 | font-size: 1em; 19 | transform-origin: center center; 20 | } 21 | 22 | } 23 | 24 | .#{$pr}#{$m}button#{$c2}icon#{$c3}left { 25 | padding-left: 2.65em; 26 | 27 | &:after { 28 | right: auto; 29 | left: .65em; 30 | } 31 | 32 | } 33 | 34 | .#{$pr}#{$m}button#{$c2}icon#{$c3}arrow { 35 | 36 | &:after { 37 | width: .5em; 38 | height: .5em; 39 | border-top: .2em solid currentcolor; 40 | border-left: .2em solid currentcolor; 41 | border-radius: .1em; 42 | transform: 43 | translateY( -50% ) 44 | rotate( 135deg ); 45 | } 46 | 47 | &.#{$pr}#{$m}button#{$c2}icon#{$c3}left { 48 | 49 | &:after { 50 | transform: 51 | translateY( -50% ) 52 | rotate( -45deg ); 53 | } 54 | 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/object/module/_button_oval.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}button#{$c3}oval 4 | -------------------- 5 | */ 6 | 7 | /* 8 | note: Meaning of "10em" 9 | 「em」で大きな値を指定すると、ボタンが小判型になります。 10 | Specify a large value for "em", the button becomes an oval type 11 | -------------------- 12 | */ 13 | 14 | .#{$pr}#{$m}button#{$c3}oval { 15 | border-radius: 10em; 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/object/module/_button_style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}button#{$c3}style#{$c3}(style) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}button#{$c3}style#{$c3}a { 8 | @include button-variant( 9 | $body-inverse-color, 10 | $default, 11 | $default, 12 | $body-color, 13 | transparent, 14 | $default 15 | ); 16 | 17 | transition: 18 | background-color .3s, 19 | border-color .3s, 20 | color .3s; 21 | 22 | } 23 | 24 | 25 | .#{$pr}#{$m}button#{$c3}style#{$c3}b { 26 | @include button-variant( 27 | $body-color, 28 | transparent, 29 | $default, 30 | $body-inverse-color, 31 | $default, 32 | $default 33 | ); 34 | 35 | transition: 36 | background-color .3s, 37 | border-color .3s, 38 | color .3s; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /src/scss/object/module/_checkbox.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}checkbox 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}checkbox { 8 | position: relative; 9 | display: inline-block; 10 | cursor: pointer; 11 | font-size: 1em; 12 | line-height: $line-height-xs; 13 | 14 | .#{$pr}#{$m}checkbox-icon { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 1.25em; 19 | height: 1.25em; 20 | border: $checkbox-border-width solid $checkbox-border-color; 21 | background-color: $checkbox-bg; 22 | border-radius: $border-radius-sm; 23 | z-index: 4; 24 | } 25 | 26 | input[type="checkbox"] { 27 | position: absolute; 28 | opacity: 0; 29 | top: -.125em; 30 | left: -.125em; 31 | width: 1.5em; 32 | height: 1.5em; 33 | margin: 0; 34 | font-size: 1em; 35 | -webkit-appearance: none; 36 | appearance: none; 37 | z-index: 2; 38 | 39 | &:checked + .#{$pr}#{$m}checkbox-icon { 40 | background: $checkbox-checked-bg; 41 | border: $checkbox-border-width solid $checkbox-checked-border-color; 42 | 43 | &:after { 44 | display: block; 45 | content: ""; 46 | position: absolute; 47 | top: 0; 48 | left: 50%; 49 | width: 30%; 50 | height: 60%; 51 | border-bottom: .2em solid $checkbox-checked-color; 52 | border-right: .2em solid $checkbox-checked-color; 53 | transform: 54 | translate( -50%, 0 ) 55 | rotate( 45deg ); 56 | } 57 | 58 | } 59 | 60 | &:focus { 61 | opacity: 1; 62 | } 63 | 64 | } 65 | 66 | .#{$pr}#{$m}checkbox-label { 67 | position: relative; 68 | padding-left: 1.75em; 69 | z-index: 3; 70 | } 71 | 72 | &.#{$error} { 73 | color: $important-strong; 74 | 75 | .#{$pr}#{$m}checkbox-icon { 76 | border-color: $important; 77 | } 78 | 79 | input[type="checkbox"] { 80 | 81 | &:checked + .#{$pr}#{$m}checkbox-icon { 82 | background-color: $important; 83 | border-color: $important; 84 | } 85 | 86 | } 87 | 88 | } 89 | 90 | } 91 | -------------------------------------------------------------------------------- /src/scss/object/module/_checkbox_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}checkbox(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}checkbox:not(.#{$error}) { 8 | 9 | .#{$pr}#{$m}checkbox-icon { 10 | background-color: $checkbox-bg; 11 | border-color: $checkbox-border-color; 12 | } 13 | 14 | input[type="checkbox"] { 15 | 16 | &:checked + .#{$pr}#{$m}checkbox-icon { 17 | background-color: $checkbox-checked-bg; 18 | border-color: $checkbox-checked-border-color; 19 | 20 | &:after { 21 | border-bottom-color: $checkbox-checked-color; 22 | border-right-color: $checkbox-checked-color; 23 | } 24 | 25 | } 26 | 27 | } 28 | 29 | } 30 | 31 | .#{$pr}#{$m}checkbox.#{$error} { 32 | color: $important-strong; 33 | 34 | .#{$pr}#{$m}checkbox-icon { 35 | background-color: $body-inverse-color; 36 | border-color: $important; 37 | } 38 | 39 | input[type="checkbox"] { 40 | 41 | &:checked + .#{$pr}#{$m}checkbox-icon { 42 | background-color: $important; 43 | border-color: $important; 44 | 45 | &:after { 46 | border-bottom-color: $body-inverse-color; 47 | border-right-color: $body-inverse-color; 48 | } 49 | 50 | } 51 | 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /src/scss/object/module/_embed.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}embed 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}embed { 8 | overflow: hidden; 9 | position: relative; 10 | display: block; 11 | width: 100%; 12 | 13 | &:before { 14 | display: block; 15 | content: ""; 16 | } 17 | 18 | iframe, 19 | embed, 20 | object, 21 | video { 22 | display: block; 23 | margin: 0 auto; 24 | } 25 | 26 | } 27 | 28 | 29 | /* 30 | -------------------- 31 | #{$pr}#{$m}embed#{$c3}square 32 | #{$pr}#{$m}embed#{$c3}(ratio-x)to(ratio-y) 33 | -------------------- 34 | */ 35 | 36 | .#{$pr}#{$m}embed#{$c3}square, 37 | .#{$pr}#{$m}embed#{$c3}3to2, 38 | .#{$pr}#{$m}embed#{$c3}4to3, 39 | .#{$pr}#{$m}embed#{$c3}16to9, 40 | .#{$pr}#{$m}embed#{$c3}ogimage, 41 | .#{$pr}#{$m}embed#{$c3}21to9 { 42 | 43 | iframe, 44 | embed, 45 | object, 46 | video { 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | width: 100%; 51 | height: 100%; 52 | border: 0; 53 | } 54 | 55 | } 56 | 57 | .#{$pr}#{$m}embed#{$c3}square { 58 | 59 | &:before { 60 | padding-top: percentage(math.div(1,1)); 61 | } 62 | 63 | } 64 | 65 | .#{$pr}#{$m}embed#{$c3}3to2 { 66 | 67 | &:before { 68 | padding-top: percentage(math.div(2,3)); 69 | } 70 | 71 | } 72 | 73 | .#{$pr}#{$m}embed#{$c3}4to3 { 74 | 75 | &:before { 76 | padding-top: percentage(math.div(3,4)); 77 | } 78 | 79 | } 80 | 81 | .#{$pr}#{$m}embed#{$c3}16to9 { 82 | 83 | &:before { 84 | padding-top: percentage(math.div(9,16)); 85 | } 86 | 87 | } 88 | 89 | .#{$pr}#{$m}embed#{$c3}ogimage { 90 | 91 | &:before { 92 | padding-top: percentage(math.div(100,191)); 93 | } 94 | 95 | } 96 | 97 | .#{$pr}#{$m}embed#{$c3}21to9 { 98 | 99 | &:before { 100 | padding-top: percentage(math.div(9,21)); 101 | } 102 | 103 | } 104 | 105 | -------------------------------------------------------------------------------- /src/scss/object/module/_input.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}input 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}input { 8 | max-width: 100%; 9 | padding: .75em 1em; 10 | background: $input-bg none; 11 | border: $input-border-width solid $input-border-color; 12 | color: $input-color; 13 | border-radius: $border-radius-md; 14 | vertical-align: middle; 15 | -webkit-appearance: none; 16 | appearance: none; 17 | 18 | @at-root { 19 | 20 | textarea#{&} { 21 | line-height: $line-height-sm; 22 | } 23 | 24 | #{&}:not(textarea) { 25 | padding-top: 0; 26 | padding-bottom: 0; 27 | } 28 | 29 | } 30 | 31 | &:focus { 32 | color: $input-focus-color; 33 | background-color: $input-focus-bg; 34 | border-color: $input-focus-border-color; 35 | } 36 | 37 | &::-webkit-search-decoration { 38 | display: none; 39 | } 40 | 41 | &.#{$error}, 42 | .#{$error} & { 43 | background-color: $input-bg; 44 | border-color: $important-strong; 45 | color: $important-strong; 46 | 47 | &:focus { 48 | background-color: $important-fade; 49 | } 50 | 51 | } 52 | 53 | } 54 | 55 | -------------------------------------------------------------------------------- /src/scss/object/module/_input_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}input#{$c3}(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}input { 8 | font-size: map-get( $nav-min-font-sizes, 'md' ); 9 | min-height: map-get( $nav-min-heights, 'md' ); 10 | 11 | @include media-breakpoint-up(lg) { 12 | font-size: map-get( $nav-max-font-sizes, 'md' ); 13 | min-height: map-get( $nav-max-heights, 'md' ); 14 | } 15 | 16 | &.#{$pr}#{$m}input#{$c3}fixed { 17 | 18 | @include media-breakpoint-up(lg) { 19 | font-size: map-get( $nav-min-font-sizes, 'md' ); 20 | min-height: map-get( $nav-min-heights, 'md' ); 21 | } 22 | 23 | } 24 | 25 | } 26 | 27 | .#{$pr}#{$m}input#{$c3}sm { 28 | font-size: map-get( $nav-min-font-sizes, 'sm' ); 29 | min-height: map-get( $nav-min-heights, 'sm' ); 30 | 31 | @include media-breakpoint-up(lg) { 32 | font-size: map-get( $nav-max-font-sizes, 'sm' ); 33 | min-height: map-get( $nav-max-heights, 'sm' ); 34 | } 35 | 36 | &.#{$pr}#{$m}input#{$c3}fixed { 37 | 38 | @include media-breakpoint-up(lg) { 39 | font-size: map-get( $nav-min-font-sizes, 'sm' ); 40 | min-height: map-get( $nav-min-heights, 'sm' ); 41 | } 42 | 43 | } 44 | 45 | } 46 | 47 | .#{$pr}#{$m}input#{$c3}lg { 48 | font-size: map-get( $nav-min-font-sizes, 'lg' ); 49 | min-height: map-get( $nav-min-heights, 'lg' ); 50 | 51 | @include media-breakpoint-up(lg) { 52 | font-size: map-get( $nav-max-font-sizes, 'lg' ); 53 | min-height: map-get( $nav-max-heights, 'lg' ); 54 | } 55 | 56 | &.#{$pr}#{$m}input#{$c3}fixed { 57 | 58 | @include media-breakpoint-up(lg) { 59 | font-size: map-get( $nav-min-font-sizes, 'lg' ); 60 | min-height: map-get( $nav-min-heights, 'lg' ); 61 | } 62 | 63 | } 64 | 65 | } 66 | -------------------------------------------------------------------------------- /src/scss/object/module/_label.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}label 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}label { 8 | position: relative; 9 | top: -.1em; 10 | display: inline-flex; 11 | min-height: 2em; 12 | align-items: center; 13 | justify-content: center; 14 | padding: 0 .5em; 15 | background-color: $default-fade; 16 | border: $ui-border-width solid $default-fade; 17 | color: $body-color; 18 | font-size: .7em; 19 | line-height: 1; 20 | vertical-align: middle; 21 | white-space: nowrap; 22 | 23 | & + & { 24 | margin-left: .5rem; 25 | } 26 | 27 | @at-root { 28 | 29 | a#{&} { 30 | text-decoration: none; 31 | 32 | &:hover, 33 | &:focus { 34 | color: $body-color; 35 | text-decoration: none; 36 | } 37 | 38 | } 39 | 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/object/module/_label_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}label#{$c3}(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}label#{$c3}style#{$c3}a { 8 | 9 | &.#{$pr}#{$m}label#{$c3}info { 10 | @include label-variant( 11 | $body-inverse-color, 12 | $info, 13 | $info, 14 | $body-color, 15 | transparent, 16 | $info 17 | ); 18 | } 19 | 20 | &.#{$pr}#{$m}label#{$c3}important { 21 | @include label-variant( 22 | $body-inverse-color, 23 | $important, 24 | $important, 25 | $body-color, 26 | transparent, 27 | $important 28 | ); 29 | } 30 | 31 | &.#{$pr}#{$m}label#{$c3}inverse { 32 | @include label-variant( 33 | $body-color, 34 | $inverse, 35 | $inverse, 36 | $body-inverse-color, 37 | transparent, 38 | $inverse 39 | ); 40 | } 41 | 42 | } 43 | 44 | 45 | .#{$pr}#{$m}label#{$c3}style#{$c3}b { 46 | 47 | &.#{$pr}#{$m}label#{$c3}info { 48 | @include label-variant( 49 | $body-color, 50 | $info-fade, 51 | transparent, 52 | $body-inverse-color, 53 | $info, 54 | transparent 55 | ); 56 | } 57 | 58 | &.#{$pr}#{$m}label#{$c3}important { 59 | @include label-variant( 60 | $body-color, 61 | $important-fade, 62 | transparent, 63 | $body-inverse-color, 64 | $important, 65 | transparent 66 | ); 67 | } 68 | 69 | &.#{$pr}#{$m}label#{$c3}inverse { 70 | @include label-variant( 71 | $body-inverse-color, 72 | $inverse-fade, 73 | transparent, 74 | $body-color, 75 | $inverse, 76 | transparent 77 | ); 78 | } 79 | 80 | } 81 | -------------------------------------------------------------------------------- /src/scss/object/module/_label_shape.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}label#{$c3}oval 4 | -------------------- 5 | */ 6 | 7 | /* 8 | note: Meaning of "10em" 9 | 「em」で大きな値を指定すると、ボタンが小判型になります。 10 | Specify a large value for "em", the button becomes an oval type 11 | -------------------- 12 | */ 13 | 14 | .#{$pr}#{$m}label#{$c3}oval { 15 | border-radius: 10em; 16 | padding-left: 1em; 17 | padding-right: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/object/module/_label_style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}label#{$c3}style#{$c3}(style) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}label#{$c3}style#{$c3}a { 8 | @include label-variant( 9 | $body-inverse-color, 10 | $default, 11 | $default, 12 | $body-color, 13 | transparent, 14 | $default 15 | ); 16 | 17 | transition: 18 | background-color .3s, 19 | border-color .3s, 20 | color .3s; 21 | 22 | } 23 | 24 | 25 | .#{$pr}#{$m}label#{$c3}style#{$c3}b { 26 | @include label-variant( 27 | $body-color, 28 | $default-fade, 29 | transparent, 30 | $body-inverse-color, 31 | $default, 32 | $default 33 | ); 34 | 35 | transition: 36 | background-color .3s, 37 | border-color .3s, 38 | color .3s; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /src/scss/object/module/_list.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}list 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}list { 8 | margin: 0; 9 | padding: 0; 10 | list-style-type: none; 11 | } 12 | 13 | .#{$pr}#{$m}list li, 14 | .#{$pr}#{$m}list#{$c1}item { 15 | position: relative; 16 | margin: 0; 17 | } 18 | 19 | .#{$pr}#{$m}list li ul, 20 | .#{$pr}#{$m}list li ol, 21 | .#{$pr}#{$m}list#{$c1}children { 22 | margin: 0; 23 | padding-left: 0; 24 | list-style-type: none; 25 | } 26 | 27 | 28 | /* 29 | -------------------- 30 | #{$pr}#{$m}list#{$c3}vertical 31 | -------------------- 32 | */ 33 | 34 | .#{$pr}#{$m}list#{$c3}vertical li, 35 | .#{$pr}#{$m}list#{$c3}vertical .#{$pr}#{$m}list#{$c1}item { 36 | 37 | &:not(:first-child) { 38 | margin-top: .75em; 39 | } 40 | 41 | } 42 | 43 | .#{$pr}#{$m}list#{$c3}vertical li ul, 44 | .#{$pr}#{$m}list#{$c3}vertical li ol, 45 | .#{$pr}#{$m}list#{$c3}vertical .#{$pr}#{$m}list#{$c1}children { 46 | padding-left: 1.5em; 47 | } 48 | 49 | 50 | /* 51 | -------------------- 52 | #{$pr}#{$m}list#{$c3}horizontal 53 | -------------------- 54 | */ 55 | 56 | .#{$pr}#{$m}list#{$c3}horizontal { 57 | display: flex; 58 | flex-wrap: wrap; 59 | justify-content: center; 60 | } 61 | 62 | .#{$pr}#{$m}list#{$c3}horizontal li, 63 | .#{$pr}#{$m}list#{$c3}horizontal .#{$pr}#{$m}list#{$c1}item { 64 | flex-grow: 0; 65 | margin-left: 1em; 66 | margin-right: 1em; 67 | 68 | &:not(:first-child) { 69 | margin-top: 0; 70 | } 71 | 72 | } 73 | 74 | -------------------------------------------------------------------------------- /src/scss/object/module/_list_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}list(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}list { 8 | font-size: map-get( $body-min-font-sizes, 'md' ); 9 | 10 | @include media-breakpoint-up(lg) { 11 | font-size: map-get( $body-max-font-sizes, 'md' ); 12 | } 13 | 14 | &.#{$pr}#{$m}list#{$c3}fixed { 15 | 16 | @include media-breakpoint-up(lg) { 17 | font-size: map-get( $body-min-font-sizes, 'md' ); 18 | } 19 | 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/scss/object/module/_nav.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}nav 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}nav { 8 | display: inline-block; 9 | vertical-align: middle; 10 | 11 | &:not(.#{$pr}#{$m}nav#{$c3}vertical) { 12 | 13 | .#{$pr}#{$m}nav#{$c1}label { 14 | white-space: nowrap; 15 | } 16 | 17 | } 18 | 19 | } 20 | 21 | .#{$pr}#{$m}nav#{$c1}list { 22 | display: flex; 23 | flex-wrap: nowrap; 24 | justify-content: center; 25 | align-items: stretch; 26 | margin: 0; 27 | padding: 0; 28 | list-style-type: none; 29 | } 30 | 31 | .#{$pr}#{$m}nav#{$c1}item { 32 | flex-grow: 1; 33 | flex-shrink: 1; 34 | flex-basis: auto; 35 | margin: 0; 36 | padding: 0; 37 | } 38 | 39 | .#{$pr}#{$m}nav#{$c1}label { 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | text-align: center; 44 | width: 100%; 45 | height: 100%; 46 | 47 | // padding-bottom, slightly subtracts baseline 48 | padding: .5em 1em .4em; 49 | 50 | line-height: 1; 51 | transition: 52 | background-color .3s, 53 | border-color .3s, 54 | color .3s; 55 | 56 | @at-root { 57 | 58 | a#{&} { 59 | text-decoration: none; 60 | cursor: pointer; 61 | 62 | &:hover, 63 | &:focus { 64 | text-decoration: none; 65 | } 66 | 67 | } 68 | 69 | } 70 | 71 | } 72 | 73 | 74 | /* 75 | -------------------- 76 | #{$pr}#{$m}nav#{$c3}vertical 77 | -------------------- 78 | */ 79 | 80 | .#{$pr}#{$m}nav#{$c3}vertical { 81 | width: 100%; 82 | } 83 | 84 | .#{$pr}#{$m}nav#{$c3}vertical .#{$pr}#{$m}nav#{$c1}list { 85 | display: flex; 86 | flex-wrap: wrap; 87 | flex-direction: column; 88 | } 89 | 90 | .#{$pr}#{$m}nav#{$c3}vertical .#{$pr}#{$m}nav#{$c1}label { 91 | height: auto; 92 | min-height: auto; 93 | padding-top: .75em; 94 | padding-bottom: .75em; 95 | justify-content: flex-start; 96 | text-align: left; 97 | } 98 | 99 | .#{$pr}#{$m}nav#{$c1}children .#{$pr}#{$m}nav#{$c1}label { 100 | padding-left: 3rem; 101 | } 102 | 103 | 104 | .#{$pr}#{$m}nav#{$c1}children .#{$pr}#{$m}nav#{$c1}children .#{$pr}#{$m}nav#{$c1}label { 105 | padding-left: 5rem; 106 | } 107 | 108 | -------------------------------------------------------------------------------- /src/scss/object/module/_nav_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}nav(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}nav#{$c1}label { 8 | color: $nav-color; 9 | background-color: $nav-bg; 10 | 11 | @at-root { 12 | 13 | a#{&} { 14 | 15 | &:hover, 16 | &:focus { 17 | color: $nav-hover-color; 18 | background-color: $nav-hover-bg; 19 | } 20 | 21 | } 22 | 23 | } 24 | 25 | } 26 | 27 | .#{$pr}#{$m}nav#{$c1}label.#{$nav-current} { 28 | color: $nav-current-color; 29 | background-color: $nav-current-bg; 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | color: $nav-current-hover-color; 35 | background-color: $nav-current-hover-bg; 36 | } 37 | 38 | } 39 | 40 | .#{$pr}#{$m}nav#{$c3}inverse { 41 | background-color: $nav-inverse-bg; 42 | 43 | .#{$pr}#{$m}nav#{$c1}label { 44 | color: $nav-inverse-color; 45 | background-color: $nav-inverse-bg; 46 | } 47 | 48 | a.#{$pr}#{$m}nav#{$c1}label { 49 | 50 | &:hover, 51 | &:focus { 52 | color: $nav-inverse-hover-color; 53 | background-color: $nav-inverse-hover-bg; 54 | } 55 | 56 | } 57 | 58 | .#{$pr}#{$m}nav#{$c1}label.#{$nav-current} { 59 | color: $nav-inverse-current-color; 60 | background-color: $nav-inverse-current-bg; 61 | 62 | &:hover, 63 | &:focus, 64 | &:active { 65 | color: $nav-inverse-current-hover-color; 66 | background-color: $nav-inverse-current-hover-bg; 67 | } 68 | 69 | } 70 | 71 | } 72 | 73 | -------------------------------------------------------------------------------- /src/scss/object/module/_nav_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}nav#{$c3}(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}nav { 8 | 9 | .#{$pr}#{$m}nav#{$c3}label { 10 | font-size: map-get( $nav-min-font-sizes, 'md' ); 11 | min-height: map-get( $nav-min-heights, 'md' ); 12 | 13 | @include media-breakpoint-up(lg) { 14 | font-size: map-get( $nav-max-font-sizes, 'md' ); 15 | min-height: map-get( $nav-max-heights, 'md' ); 16 | } 17 | 18 | } 19 | 20 | &.#{$pr}#{$m}nav#{$c3}fixed { 21 | 22 | .#{$pr}#{$m}nav#{$c3}label { 23 | 24 | @include media-breakpoint-up(lg) { 25 | font-size: map-get( $nav-min-font-sizes, 'md' ); 26 | min-height: map-get( $nav-min-heights, 'md' ); 27 | } 28 | 29 | } 30 | 31 | } 32 | 33 | } 34 | 35 | .#{$pr}#{$m}nav#{$c3}sm { 36 | 37 | .#{$pr}#{$m}nav#{$c3}label { 38 | font-size: map-get( $nav-min-font-sizes, 'sm' ); 39 | min-height: map-get( $nav-min-heights, 'sm' ); 40 | 41 | @include media-breakpoint-up(lg) { 42 | font-size: map-get( $nav-max-font-sizes, 'sm' ); 43 | min-height: map-get( $nav-max-heights, 'sm' ); 44 | } 45 | 46 | } 47 | 48 | @at-root { 49 | 50 | #{&}.#{$pr}#{$m}nav#{$c3}fixed { 51 | 52 | .#{$pr}#{$m}nav#{$c3}label { 53 | 54 | @include media-breakpoint-up(lg) { 55 | font-size: map-get( $nav-min-font-sizes, 'sm' ); 56 | min-height: map-get( $nav-min-heights, 'sm' ); 57 | } 58 | 59 | } 60 | 61 | } 62 | 63 | } 64 | 65 | } 66 | 67 | .#{$pr}#{$m}nav#{$c3}lg { 68 | 69 | .#{$pr}#{$m}nav#{$c3}label { 70 | font-size: map-get( $nav-min-font-sizes, 'lg' ); 71 | min-height: map-get( $nav-min-heights, 'lg' ); 72 | 73 | @include media-breakpoint-up(lg) { 74 | font-size: map-get( $nav-max-font-sizes, 'lg' ); 75 | min-height: map-get( $nav-max-heights, 'lg' ); 76 | } 77 | 78 | } 79 | 80 | @at-root { 81 | 82 | #{&}.#{$pr}#{$m}nav#{$c3}fixed { 83 | 84 | .#{$pr}#{$m}nav#{$c3}label { 85 | 86 | @include media-breakpoint-up(lg) { 87 | font-size: map-get( $nav-min-font-sizes, 'lg' ); 88 | min-height: map-get( $nav-min-heights, 'lg' ); 89 | } 90 | 91 | } 92 | 93 | } 94 | 95 | } 96 | 97 | } 98 | -------------------------------------------------------------------------------- /src/scss/object/module/_radio.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}radio 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}radio { 8 | position: relative; 9 | display: inline-block; 10 | cursor: pointer; 11 | font-size: 1em; 12 | line-height: $line-height-xs; 13 | 14 | .#{$pr}#{$m}radio-icon { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 1.25em; 19 | height: 1.25em; 20 | border: $radio-border-width solid $radio-border-color; 21 | background-color: $radio-bg; 22 | border-radius: 50%; 23 | z-index: 4; 24 | } 25 | 26 | input[type="radio"] { 27 | position: absolute; 28 | opacity: 0; 29 | top: -.125em; 30 | left: -.125em; 31 | width: 1.5em; 32 | height: 1.5em; 33 | margin: 0; 34 | font-size: 1em; 35 | -webkit-appearance: none; 36 | appearance: none; 37 | z-index: 2; 38 | 39 | &:checked + .#{$pr}#{$m}radio-icon { 40 | background: $radio-checked-bg; 41 | border: $radio-border-width solid $radio-checked-border-color; 42 | 43 | &:after { 44 | display: block; 45 | content: ""; 46 | position: absolute; 47 | top: 50%; 48 | left: 50%; 49 | width: 65%; 50 | height: 65%; 51 | background-color: $radio-checked-color; 52 | border-radius: 50%; 53 | transform: translate( -50%, -50% ); 54 | } 55 | 56 | } 57 | 58 | &:focus { 59 | opacity: 1; 60 | } 61 | 62 | } 63 | 64 | .#{$pr}#{$m}radio-label { 65 | position: relative; 66 | padding-left: 1.75em; 67 | z-index: 3; 68 | } 69 | 70 | &.#{$error} { 71 | color: $important-strong; 72 | 73 | .#{$pr}#{$m}radio-icon { 74 | border-color: $important; 75 | } 76 | 77 | input[type="radio"] { 78 | 79 | &:checked + .#{$pr}#{$m}radio-icon { 80 | background-color: $radio-checked-bg; 81 | border-color: $important; 82 | 83 | &:after { 84 | background-color: $important; 85 | } 86 | 87 | } 88 | 89 | } 90 | 91 | } 92 | 93 | } -------------------------------------------------------------------------------- /src/scss/object/module/_radio_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}radio(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}radio:not(.#{$error}) { 8 | 9 | .#{$pr}#{$m}radio-icon { 10 | background-color: $radio-bg; 11 | border-color: $radio-border-color; 12 | } 13 | 14 | input[type="radio"] { 15 | 16 | &:checked + .#{$pr}#{$m}radio-icon { 17 | background-color: $radio-checked-bg; 18 | border-color: $radio-checked-border-color; 19 | 20 | &:after { 21 | background-color: $radio-checked-color; 22 | } 23 | 24 | } 25 | 26 | } 27 | 28 | } 29 | 30 | .#{$pr}#{$m}radio.#{$error} { 31 | 32 | .#{$pr}#{$m}radio-icon { 33 | color: $important-strong; 34 | background-color: $body-inverse-color; 35 | border-color: $important; 36 | } 37 | 38 | input[type="radio"] { 39 | 40 | &:checked + .#{$pr}#{$m}radio-icon { 41 | background-color: $body-inverse-color; 42 | border-color: $important; 43 | 44 | &:after { 45 | background-color: $important; 46 | } 47 | 48 | } 49 | 50 | } 51 | 52 | } -------------------------------------------------------------------------------- /src/scss/object/module/_select.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}select 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}select { 8 | display: inline-block; 9 | position: relative; 10 | vertical-align: middle; 11 | 12 | &:after { 13 | content: ""; 14 | position: absolute; 15 | top: 50%; 16 | right: .75em; 17 | width: .5em; 18 | height: .5em; 19 | transform-origin: center center; 20 | border-top: .142857143em solid $ui-color; 21 | border-left: .142857143em solid $ui-color; 22 | transform: 23 | translateY( -70% ) 24 | rotate( -135deg ); 25 | z-index: 3; 26 | } 27 | 28 | > select { 29 | overflow: hidden; 30 | -webkit-appearance: none; 31 | appearance: none; 32 | font-size: 1em; 33 | color: $body-color; 34 | width: 100%; 35 | padding: 0 2.5em 0 .75em; 36 | background-color: $input-bg; 37 | border: $input-border-width solid $input-border-color; 38 | vertical-align: middle; 39 | border-radius: $border-radius-md; 40 | z-index: 2; 41 | 42 | &::-ms-expand { 43 | display: none; 44 | } 45 | 46 | &:focus { 47 | color: $input-focus-color; 48 | background-color: $input-focus-bg; 49 | border-color: $input-focus-border-color; 50 | } 51 | 52 | } 53 | 54 | @at-root { 55 | 56 | &.#{$error}, 57 | .#{$error} > & { 58 | 59 | &:after { 60 | border-top-color: $important-strong; 61 | border-left-color: $important-strong; 62 | } 63 | 64 | select { 65 | background-color: $input-bg; 66 | border-color: $important-strong; 67 | color: $important-strong; 68 | 69 | &:focus { 70 | background-color: $important-fade; 71 | } 72 | 73 | } 74 | 75 | } 76 | 77 | } 78 | 79 | option { 80 | outline: none; 81 | padding: 0; 82 | } 83 | 84 | } 85 | 86 | -------------------------------------------------------------------------------- /src/scss/object/module/_select_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}select#{$c3}(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}select { 8 | font-size: map-get( $nav-min-font-sizes, 'md' ); 9 | 10 | > select { 11 | min-height: map-get( $nav-min-heights, 'md' ); 12 | } 13 | 14 | @include media-breakpoint-up(lg) { 15 | font-size: map-get( $nav-max-font-sizes, 'md' ); 16 | 17 | > select { 18 | min-height: map-get( $nav-max-heights, 'md' ); 19 | } 20 | 21 | } 22 | 23 | &.#{$pr}#{$m}select#{$c3}fixed { 24 | 25 | @include media-breakpoint-up(lg) { 26 | font-size: map-get( $nav-min-font-sizes, 'md' ); 27 | 28 | > select { 29 | min-height: map-get( $nav-min-heights, 'md' ); 30 | } 31 | 32 | } 33 | 34 | } 35 | 36 | } 37 | 38 | .#{$pr}#{$m}select#{$c3}sm { 39 | font-size: map-get( $nav-min-font-sizes, 'sm' ); 40 | 41 | > select { 42 | min-height: map-get( $nav-min-heights, 'sm' ); 43 | } 44 | 45 | @include media-breakpoint-up(lg) { 46 | font-size: map-get( $nav-max-font-sizes, 'sm' ); 47 | 48 | > select { 49 | min-height: map-get( $nav-max-heights, 'sm' ); 50 | } 51 | 52 | } 53 | 54 | &.#{$pr}#{$m}select#{$c3}fixed { 55 | 56 | @include media-breakpoint-up(lg) { 57 | font-size: map-get( $nav-min-font-sizes, 'sm' ); 58 | 59 | > select { 60 | min-height: map-get( $nav-min-heights, 'sm' ); 61 | } 62 | 63 | } 64 | 65 | } 66 | 67 | } 68 | 69 | .#{$pr}#{$m}select#{$c3}lg { 70 | font-size: map-get( $nav-min-font-sizes, 'lg' ); 71 | 72 | > select { 73 | min-height: map-get( $nav-min-heights, 'lg' ); 74 | } 75 | 76 | @include media-breakpoint-up(lg) { 77 | font-size: map-get( $nav-max-font-sizes, 'lg' ); 78 | 79 | > select { 80 | min-height: map-get( $nav-max-heights, 'lg' ); 81 | } 82 | 83 | } 84 | 85 | &.#{$pr}#{$m}select#{$c3}fixed { 86 | 87 | @include media-breakpoint-up(lg) { 88 | font-size: map-get( $nav-min-font-sizes, 'lg' ); 89 | 90 | > select { 91 | min-height: map-get( $nav-min-heights, 'lg' ); 92 | } 93 | 94 | } 95 | 96 | } 97 | 98 | } 99 | -------------------------------------------------------------------------------- /src/scss/object/module/_title.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}title 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}title { 8 | position: relative; 9 | margin-top: 0; 10 | margin-bottom: 0; 11 | line-height: $line-height-xs; 12 | 13 | a { 14 | color: $body-color; 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/object/module/_title_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}title#{$c3}(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}title#{$c3}style#{$c3}c, 8 | .#{$pr}#{$m}title#{$c3}style#{$c3}d, 9 | .#{$pr}#{$m}title#{$c3}style#{$c3}f { 10 | 11 | &:after { 12 | background-color: $title-key-color; 13 | } 14 | 15 | } 16 | 17 | .#{$pr}#{$m}title#{$c3}style#{$c3}e { 18 | background-color: $title-key-bg; 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/object/module/_title_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}title(font) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}title { 8 | @include font-family-weight( 'first', 'bold' ); 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/object/module/_title_level.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}title#{$c2}level#{$c3}(level) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}title#{$c2}level#{$c3}6 { 8 | font-size: map-get( $title-min-font-sizes, '6' ); 9 | 10 | @include media-breakpoint-up(lg) { 11 | font-size: map-get( $title-max-font-sizes, '6' ); 12 | } 13 | 14 | &.#{$pr}#{$m}title#{$c3}fixed { 15 | 16 | @include media-breakpoint-up(lg) { 17 | font-size: map-get( $title-min-font-sizes, '6' ); 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | .#{$pr}#{$m}title#{$c2}level#{$c3}5 { 25 | font-size: map-get( $title-min-font-sizes, '5' ); 26 | 27 | @include media-breakpoint-up(lg) { 28 | font-size: map-get( $title-max-font-sizes, '5' ); 29 | } 30 | 31 | &.#{$pr}#{$m}title#{$c3}fixed { 32 | 33 | @include media-breakpoint-up(lg) { 34 | font-size: map-get( $title-min-font-sizes, '5' ); 35 | } 36 | 37 | } 38 | 39 | } 40 | 41 | .#{$pr}#{$m}title#{$c2}level#{$c3}4 { 42 | font-size: map-get( $title-min-font-sizes, '4' ); 43 | 44 | @include media-breakpoint-up(lg) { 45 | font-size: map-get( $title-max-font-sizes, '4' ); 46 | } 47 | 48 | &.#{$pr}#{$m}title#{$c3}fixed { 49 | 50 | @include media-breakpoint-up(lg) { 51 | font-size: map-get( $title-min-font-sizes, '4' ); 52 | } 53 | 54 | } 55 | 56 | } 57 | 58 | .#{$pr}#{$m}title#{$c2}level#{$c3}3 { 59 | font-size: map-get( $title-min-font-sizes, '3' ); 60 | 61 | @include media-breakpoint-up(lg) { 62 | font-size: map-get( $title-max-font-sizes, '3' ); 63 | } 64 | 65 | &.#{$pr}#{$m}title#{$c3}fixed { 66 | 67 | @include media-breakpoint-up(lg) { 68 | font-size: map-get( $title-min-font-sizes, '3' ); 69 | } 70 | 71 | } 72 | 73 | } 74 | 75 | .#{$pr}#{$m}title#{$c2}level#{$c3}2 { 76 | font-size: map-get( $title-min-font-sizes, '2' ); 77 | 78 | @include media-breakpoint-up(lg) { 79 | font-size: map-get( $title-max-font-sizes, '2' ); 80 | } 81 | 82 | &.#{$pr}#{$m}title#{$c3}fixed { 83 | 84 | @include media-breakpoint-up(lg) { 85 | font-size: map-get( $title-min-font-sizes, '2' ); 86 | } 87 | 88 | } 89 | 90 | } 91 | 92 | .#{$pr}#{$m}title#{$c2}level#{$c3}1 { 93 | font-size: map-get( $title-min-font-sizes, '1' ); 94 | 95 | @include media-breakpoint-up(lg) { 96 | font-size: map-get( $title-max-font-sizes, '1' ); 97 | } 98 | 99 | &.#{$pr}#{$m}title#{$c3}fixed { 100 | 101 | @include media-breakpoint-up(lg) { 102 | font-size: map-get( $title-min-font-sizes, '1' ); 103 | } 104 | 105 | } 106 | 107 | } 108 | -------------------------------------------------------------------------------- /src/scss/object/module/_title_style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}title#{$c3}style#{$c3}(style) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}title#{$c3}style#{$c3}a { 8 | 9 | } 10 | 11 | .#{$pr}#{$m}title#{$c3}style#{$c3}b { 12 | text-align: center; 13 | } 14 | 15 | .#{$pr}#{$m}title#{$c3}style#{$c3}c { 16 | text-align: center; 17 | padding-bottom: 1em; 18 | 19 | &:after { 20 | position: absolute; 21 | content: ""; 22 | bottom: 0; 23 | left: 50%; 24 | transform: translateX( -50% ); 25 | width: 3em; 26 | height: .1875em; 27 | min-height: 3px; 28 | max-height: 6px; 29 | background-color: $default-fade; 30 | } 31 | 32 | &.#{$pr}#{$m}title#{$c3}level#{$c3}4, 33 | &.#{$pr}#{$m}title#{$c3}level#{$c3}5, 34 | &.#{$pr}#{$m}title#{$c3}level#{$c3}6 { 35 | } 36 | 37 | } 38 | 39 | .#{$pr}#{$m}title#{$c3}style#{$c3}d { 40 | padding-bottom: .5em; 41 | 42 | &:before { 43 | position: absolute; 44 | content: ""; 45 | bottom: 0; 46 | left: 0; 47 | width: 100%; 48 | height: .125rem; 49 | min-height: 1px; 50 | background-color: $default; 51 | z-index: 11; 52 | } 53 | 54 | &:after { 55 | position: absolute; 56 | content: ""; 57 | top: 100%; 58 | left: 0; 59 | transform: translateY( -.125rem ); 60 | width: 3em; 61 | height: .1875em; 62 | min-height: 3px; 63 | max-height: 6px; 64 | background-color: $default-fade; 65 | z-index: 12; 66 | } 67 | 68 | &.#{$pr}#{$m}title#{$c3}level#{$c3}4, 69 | &.#{$pr}#{$m}title#{$c3}level#{$c3}5, 70 | &.#{$pr}#{$m}title#{$c3}level#{$c3}6 { 71 | 72 | &:before { 73 | height: .0625rem; 74 | } 75 | 76 | &:after { 77 | transform: translateY( -.0625rem ); 78 | } 79 | 80 | } 81 | 82 | } 83 | 84 | .#{$pr}#{$m}title#{$c3}style#{$c3}e { 85 | padding: .1em .25em; 86 | background-color: $default-fade; 87 | } 88 | 89 | .#{$pr}#{$m}title#{$c3}style#{$c3}f { 90 | padding-left: 1em; 91 | 92 | &:after { 93 | position: absolute; 94 | content: ""; 95 | top: 50%; 96 | left: 0; 97 | transform: translateY( -50% ); 98 | width: .75em; 99 | height: .1875em; 100 | min-height: 3px; 101 | max-height: 6px; 102 | background-color: $default-fade; 103 | } 104 | 105 | &.#{$pr}#{$m}title#{$c3}level#{$c3}4, 106 | &.#{$pr}#{$m}title#{$c3}level#{$c3}5, 107 | &.#{$pr}#{$m}title#{$c3}level#{$c3}6 { 108 | } 109 | 110 | } 111 | -------------------------------------------------------------------------------- /src/scss/object/module/_toggle.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}toggle 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}toggle { 8 | position: relative; 9 | display: inline-block; 10 | padding: 0; 11 | line-height: 1; 12 | border-width: 0; 13 | color: $ui-color; 14 | background-color: $ui-bg; 15 | vertical-align: middle; 16 | -webkit-appearance: none; 17 | -moz-appearance: none; 18 | appearance: none; 19 | cursor: pointer; 20 | transition: 21 | background-color .3s, 22 | border-color .3s, 23 | color .3s; 24 | 25 | .#{$pr}#{$m}toggle#{$c1}line { 26 | 27 | &:before, 28 | &:after { 29 | background-color: $ui-color; 30 | } 31 | 32 | } 33 | 34 | &:hover, 35 | &:focus { 36 | color: $ui-hover-color; 37 | background-color: $ui-hover-bg; 38 | 39 | .#{$pr}#{$m}toggle#{$c1}line { 40 | 41 | &:before, 42 | &:after { 43 | background-color: $ui-hover-color; 44 | } 45 | 46 | } 47 | 48 | } 49 | 50 | &[aria-expanded="false"] { 51 | 52 | .#{$pr}#{$m}toggle#{$c1}line { 53 | background-color: $ui-color; 54 | } 55 | 56 | &:hover, 57 | &:focus { 58 | 59 | .#{$pr}#{$m}toggle#{$c1}line { 60 | background-color: $ui-hover-color; 61 | } 62 | 63 | } 64 | 65 | } 66 | 67 | } 68 | 69 | .#{$pr}#{$m}toggle#{$c1}line { 70 | display: block; 71 | position: absolute; 72 | top: 50%; 73 | left: 50%; 74 | width: 50%; 75 | height: .1875rem; 76 | transform: translate( -50%, -50% ); 77 | transition: background-color .3s; 78 | 79 | &:before, 80 | &:after { 81 | content: ""; 82 | display: block; 83 | position: absolute; 84 | left: 0; 85 | right: 0; 86 | height: .1875rem; 87 | transform: rotate( 0deg ); 88 | transform-origin: center center; 89 | transition: 90 | background-color .3s, 91 | transform .3s; 92 | } 93 | 94 | &:before { 95 | top: -.5625rem; 96 | } 97 | 98 | &:after { 99 | bottom: -.5625rem; 100 | } 101 | 102 | .#{$pr}#{$m}toggle[aria-expanded="true"] & { 103 | width: 60%; 104 | 105 | &:before { 106 | top: 0; 107 | transform: rotate( 45deg ); 108 | } 109 | 110 | &:after { 111 | top: 0; 112 | transform: rotate( -45deg ); 113 | } 114 | 115 | } 116 | 117 | } 118 | 119 | -------------------------------------------------------------------------------- /src/scss/object/module/_toggle_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}toggle#{$c3}(color) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}toggle:not(.#{$pr}#{$m}toggle#{$c3}inverse) { 8 | color: $ui-color; 9 | background-color: $ui-bg; 10 | 11 | .#{$pr}#{$m}toggle#{$c1}line { 12 | 13 | &:before, 14 | &:after { 15 | background-color: $ui-color; 16 | } 17 | 18 | } 19 | 20 | &:hover, 21 | &:focus { 22 | color: $ui-hover-color; 23 | background-color: $ui-hover-bg; 24 | 25 | .#{$pr}#{$m}toggle#{$c1}line { 26 | 27 | &:before, 28 | &:after { 29 | background-color: $ui-hover-color; 30 | } 31 | 32 | } 33 | 34 | } 35 | 36 | &[aria-expanded="false"] { 37 | 38 | .#{$pr}#{$m}toggle#{$c1}line { 39 | background-color: $ui-color; 40 | } 41 | 42 | &:hover, 43 | &:focus { 44 | 45 | .#{$pr}#{$m}toggle#{$c1}line { 46 | background-color: $ui-hover-color; 47 | } 48 | 49 | } 50 | 51 | } 52 | 53 | } 54 | 55 | .#{$pr}#{$m}toggle#{$c3}inverse { 56 | color: $ui-inverse-color; 57 | background-color: $ui-inverse-bg; 58 | 59 | .#{$pr}#{$m}toggle#{$c1}line { 60 | 61 | &:before, 62 | &:after { 63 | background-color: $ui-inverse-color; 64 | } 65 | 66 | } 67 | 68 | &:hover, 69 | &:focus { 70 | color: $ui-inverse-hover-color; 71 | background-color: $ui-inverse-hover-bg; 72 | 73 | .#{$pr}#{$m}toggle#{$c1}line { 74 | 75 | &:before, 76 | &:after { 77 | background-color: $ui-inverse-hover-color; 78 | } 79 | 80 | } 81 | 82 | } 83 | 84 | &[aria-expanded="false"] { 85 | 86 | .#{$pr}#{$m}toggle#{$c1}line { 87 | background-color: $ui-inverse-color; 88 | } 89 | 90 | &:hover, 91 | &:focus { 92 | 93 | .#{$pr}#{$m}toggle#{$c1}line { 94 | background-color: $ui-inverse-hover-color; 95 | } 96 | 97 | } 98 | 99 | } 100 | 101 | } 102 | -------------------------------------------------------------------------------- /src/scss/object/module/_toggle_size.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$m}toggle(size) 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$m}toggle { 8 | width: map-get( $button-square-min-widths, 'md' ); 9 | height: map-get( $button-square-min-widths, 'md' ); 10 | 11 | @include media-breakpoint-up(lg) { 12 | width: map-get( $button-square-max-widths, 'md' ); 13 | height: map-get( $button-square-max-widths, 'md' ); 14 | } 15 | 16 | &.#{$pr}#{$m}toggle#{$c3}fixed { 17 | 18 | @include media-breakpoint-up(lg) { 19 | width: map-get( $button-square-min-widths, 'md' ); 20 | height: map-get( $button-square-min-widths, 'md' ); 21 | font-size: map-get( $button-min-font-sizes, 'md' ); 22 | } 23 | 24 | } 25 | 26 | } 27 | 28 | -------------------------------------------------------------------------------- /src/scss/object/project/_footer.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$p}footer 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$p}footer { 8 | @include responsive-spacing( 9 | 'padding-top', 10 | map-get( $responsive-spacing-min, 'md' ), 11 | map-get( $responsive-spacing-max, 'md' ) 12 | ); 13 | @include responsive-spacing( 14 | 'padding-bottom', 15 | map-get( $responsive-spacing-min, 'xl' ), 16 | map-get( $responsive-spacing-max, 'xl' ) 17 | ); 18 | } 19 | 20 | .#{$pr}#{$p}footer#{$c1}nav { 21 | } 22 | 23 | .#{$pr}#{$p}footer#{$c1}copyright { 24 | } 25 | -------------------------------------------------------------------------------- /src/scss/object/project/_header.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$p}header 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$p}header { 8 | background-color: $body-bg; 9 | } 10 | 11 | .#{$pr}#{$p}header#{$c1}contents { 12 | display: flex; 13 | flex-wrap: nowrap; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | 18 | .#{$pr}#{$p}header#{$c1}title { 19 | flex-grow: 0; 20 | flex-shrink: 1; 21 | flex-basis: auto; 22 | height: 100%; 23 | margin: 0; 24 | padding-right: map-get( $grid-gutter-widths, 'sm' ); 25 | line-height: 1; 26 | 27 | img { 28 | display: block; 29 | width: auto; 30 | height: ( map-get( $nav-min-heights, 'md' ) * 0.8 ); 31 | 32 | @include media-breakpoint-up(lg) { 33 | height: ( map-get( $nav-max-heights, 'md' ) * 0.8 ); 34 | } 35 | 36 | } 37 | 38 | } 39 | 40 | .#{$pr}#{$p}header#{$c1}nav { 41 | display: none; 42 | flex-grow: 1; 43 | flex-shrink: 1; 44 | flex-basis: auto; 45 | 46 | @include media-breakpoint-up(lg) { 47 | display: block; 48 | padding-right: map-get( $grid-gutter-widths, 'sm' ); 49 | text-align: right; 50 | } 51 | 52 | } 53 | 54 | .#{$pr}#{$p}header#{$c1}button { 55 | flex-grow: 1; 56 | flex-shrink: 1; 57 | flex-basis: auto; 58 | 59 | @include media-breakpoint-up(lg) { 60 | flex-grow: 0; 61 | padding-right: 0; 62 | } 63 | 64 | .#{$pr}#{$m}list-horizontal { 65 | justify-content: flex-end; 66 | 67 | .#{$pr}#{$m}list#{$c1}item { 68 | margin-left: 0; 69 | margin-right: map-get( $grid-gutter-widths, 'sm' ); 70 | } 71 | 72 | } 73 | 74 | } 75 | 76 | .#{$pr}#{$p}header#{$c1}menu { 77 | flex-grow: 0; 78 | flex-shrink: 1; 79 | flex-basis: auto; 80 | 81 | @include media-breakpoint-up(lg) { 82 | display: none; 83 | } 84 | 85 | } 86 | 87 | -------------------------------------------------------------------------------- /src/scss/object/project/_main.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$p}main 4 | -------------------- 5 | */ 6 | 7 | .#{$pr}#{$p}main { 8 | @include responsive-spacing( 9 | 'padding-top', 10 | map-get( $responsive-spacing-min, 'lg' ), 11 | map-get( $responsive-spacing-max, 'lg' ) 12 | ); 13 | @include responsive-spacing( 14 | 'padding-bottom', 15 | map-get( $responsive-spacing-min, 'lg' ), 16 | map-get( $responsive-spacing-max, 'lg' ) 17 | ); 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/object/utility/_bg.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}bg#{$c3}(color) 4 | #{$pr}#{$u}bg#{$c3}fade 5 | -------------------- 6 | */ 7 | 8 | #{$u-wrap} { 9 | 10 | .#{$pr}#{$u}bg#{$c3}default { 11 | background-color: $default; 12 | 13 | &:not(.#{$pr}#{$u}bg#{$c3}fade) { 14 | color: $body-inverse-color; 15 | 16 | & a:not([class]) { 17 | color: $body-inverse-color; 18 | } 19 | 20 | } 21 | 22 | &.#{$pr}#{$u}bg#{$c3}fade { 23 | background-color: $default-fade; 24 | } 25 | 26 | } 27 | 28 | .#{$pr}#{$u}bg#{$c3}info { 29 | background-color: $info; 30 | 31 | &:not(.#{$pr}#{$u}bg#{$c3}fade) { 32 | color: $body-inverse-color; 33 | 34 | & a:not([class]) { 35 | color: $body-inverse-color; 36 | } 37 | 38 | } 39 | 40 | &.#{$pr}#{$u}bg#{$c3}fade { 41 | background-color: $info-fade; 42 | } 43 | 44 | } 45 | 46 | .#{$pr}#{$u}bg#{$c3}important { 47 | background-color: $important; 48 | 49 | &:not(.#{$pr}#{$u}bg#{$c3}fade) { 50 | color: $body-inverse-color; 51 | 52 | & a:not([class]) { 53 | color: $body-inverse-color; 54 | } 55 | 56 | } 57 | 58 | &.#{$pr}#{$u}bg#{$c3}fade { 59 | background-color: $important-fade; 60 | } 61 | 62 | } 63 | 64 | .#{$pr}#{$u}bg#{$c3}inverse { 65 | background-color: $inverse; 66 | 67 | &:not(.#{$pr}#{$u}bg#{$c3}fade) { 68 | color: $body-color; 69 | 70 | & a:not([class]) { 71 | color: $body-color; 72 | } 73 | 74 | } 75 | 76 | &.#{$pr}#{$u}bg#{$c3}fade { 77 | background-color: $inverse-fade; 78 | } 79 | 80 | } 81 | 82 | } 83 | -------------------------------------------------------------------------------- /src/scss/object/utility/_clearfix.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}clearfix 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | .#{$pr}#{$u}clearfix { 10 | @include clearfix(); 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/object/utility/_font.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}font#{$c3}(face) 4 | #{$pr}#{$u}font#{$c3}bold 5 | -------------------- 6 | */ 7 | 8 | #{$u-wrap} { 9 | 10 | .#{$pr}#{$u}font#{$c3}bold { 11 | @include font-family-weight( 'root', 'bold' ); 12 | } 13 | 14 | .#{$pr}#{$u}font#{$c3}root { 15 | @include font-family-weight( 'root', 'normal' ); 16 | 17 | &.#{$pr}#{$u}font#{$c3}bold { 18 | @include font-family-weight( 'root', 'bold' ); 19 | } 20 | 21 | } 22 | 23 | .#{$pr}#{$u}font#{$c3}first { 24 | @include font-family-weight( 'first', 'normal' ); 25 | 26 | &.#{$pr}#{$u}font#{$c3}bold { 27 | @include font-family-weight( 'first', 'bold' ); 28 | } 29 | 30 | } 31 | 32 | .#{$pr}#{$u}font#{$c3}second { 33 | @include font-family-weight( 'second', 'normal' ); 34 | 35 | &.#{$pr}#{$u}font#{$c3}bold { 36 | @include font-family-weight( 'second', 'bold' ); 37 | } 38 | 39 | } 40 | 41 | .#{$pr}#{$u}font#{$c3}third { 42 | @include font-family-weight( 'third', 'normal' ); 43 | 44 | &.#{$pr}#{$u}font#{$c3}bold { 45 | @include font-family-weight( 'third', 'bold' ); 46 | } 47 | 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /src/scss/object/utility/_hidden.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}hidden#{$c3}(breakpoint)#{$c3}up 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | @each $breakpoint in map-keys($grid-breakpoints) { 10 | 11 | @if ( $breakpoint != 'default' ) { 12 | 13 | @include media-breakpoint-up($breakpoint) { 14 | 15 | @if ($breakpoint != 'xxs') { 16 | 17 | .#{$pr}#{$u}hidden#{$c3}#{$breakpoint}#{$c3}up { 18 | display: none; 19 | } 20 | 21 | } 22 | 23 | } 24 | 25 | } 26 | 27 | } 28 | 29 | } 30 | 31 | 32 | /* 33 | -------------------- 34 | #{$pr}#{$u}hidden#{$c3}(breakpoint)#{$c3}down 35 | -------------------- 36 | */ 37 | 38 | #{$u-wrap} { 39 | 40 | @each $breakpoint in map-keys($grid-breakpoints) { 41 | 42 | @include media-breakpoint-down($breakpoint) { 43 | 44 | @if ($breakpoint != 'xxl') { 45 | 46 | .#{$pr}#{$u}hidden#{$c3}#{$breakpoint}#{$c3}down { 47 | display: none; 48 | } 49 | 50 | } 51 | 52 | } 53 | 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/object/utility/_image.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}image#{$c3}responsive 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | .#{$pr}#{$u}image#{$c3}responsive { 10 | max-width: 100%; 11 | height: auto; 12 | } 13 | 14 | } 15 | 16 | 17 | /* 18 | -------------------- 19 | #{$pr}#{$u}image#{$c3}fill 20 | -------------------- 21 | */ 22 | 23 | #{$u-wrap} { 24 | 25 | .#{$pr}#{$u}image#{$c3}fill { 26 | width: 100%; 27 | height: auto; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/object/utility/_line.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}line#{$c3}(size) 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | .#{$pr}#{$u}line#{$c3}none { 10 | line-height: 1; 11 | } 12 | 13 | .#{$pr}#{$u}line#{$c3}sm { 14 | line-height: $line-height-sm; 15 | } 16 | 17 | .#{$pr}#{$u}line#{$c3}md { 18 | line-height: $line-height-md; 19 | } 20 | 21 | .#{$pr}#{$u}line#{$c3}lg { 22 | line-height: $line-height-lg; 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/object/utility/_position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}position#{$c3}(y)-(x) 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | .#{$pr}#{$u}position#{$c3}top#{$c3}left, 10 | .#{$pr}#{$u}position#{$c3}top#{$c3}center, 11 | .#{$pr}#{$u}position#{$c3}top#{$c3}right, 12 | .#{$pr}#{$u}position#{$c3}center#{$c3}left, 13 | .#{$pr}#{$u}position#{$c3}center#{$c3}center, 14 | .#{$pr}#{$u}position#{$c3}center#{$c3}right, 15 | .#{$pr}#{$u}position#{$c3}bottom#{$c3}left, 16 | .#{$pr}#{$u}position#{$c3}bottom#{$c3}center, 17 | .#{$pr}#{$u}position#{$c3}bottom#{$c3}right { 18 | position: absolute; 19 | z-index: 99; 20 | } 21 | 22 | .#{$pr}#{$u}position#{$c3}top#{$c3}left { 23 | top: 0; 24 | left: 0; 25 | } 26 | 27 | .#{$pr}#{$u}position#{$c3}top#{$c3}center { 28 | top: 0; 29 | left: 50%; 30 | transform: translate(-50%, 0); 31 | } 32 | 33 | .#{$pr}#{$u}position#{$c3}top#{$c3}right { 34 | top: 0; 35 | right: 0; 36 | } 37 | 38 | .#{$pr}#{$u}position#{$c3}center#{$c3}left { 39 | top: 50%; 40 | left: 0; 41 | transform: translate(0, -50%); 42 | } 43 | 44 | .#{$pr}#{$u}position#{$c3}center#{$c3}center { 45 | top: 50%; 46 | left: 50%; 47 | transform: translate(-50%, 0); 48 | } 49 | 50 | .#{$pr}#{$u}position#{$c3}center#{$c3}right { 51 | top: 50%; 52 | right: 0; 53 | transform: translate(0, -50%); 54 | } 55 | 56 | .#{$pr}#{$u}position#{$c3}bottom#{$c3}left { 57 | bottom: 0; 58 | left: 0; 59 | } 60 | 61 | .#{$pr}#{$u}position#{$c3}bottom#{$c3}center { 62 | bottom: 0; 63 | left: 50%; 64 | transform: translate(-50%, 0); 65 | } 66 | 67 | .#{$pr}#{$u}position#{$c3}bottom#{$c3}right { 68 | bottom: 0; 69 | right: 0; 70 | } 71 | 72 | } 73 | -------------------------------------------------------------------------------- /src/scss/object/utility/_shadow.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}shadow 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | .#{$pr}#{$u}shadow { 10 | box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3); 11 | } 12 | 13 | } 14 | 15 | 16 | /* 17 | -------------------- 18 | #{$pr}#{$u}shadow#{$c3}none 19 | -------------------- 20 | */ 21 | 22 | #{$u-wrap} { 23 | 24 | .#{$pr}#{$u}shadow#{$c3}none { 25 | box-shadow: none; 26 | } 27 | 28 | } 29 | 30 | 31 | /* 32 | -------------------- 33 | #{$pr}#{$u}shadow#{$c3}(size) 34 | -------------------- 35 | */ 36 | 37 | #{$u-wrap} { 38 | 39 | .#{$pr}#{$u}shadow#{$c3}sm { 40 | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); 41 | } 42 | 43 | .#{$pr}#{$u}shadow#{$c3}lg { 44 | box-shadow: 45 | 0 2px 4px rgba(0, 0, 0, 0.1), 46 | 2px 6px 12px rgba(0, 0, 0, 0.2); 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/object/utility/_sr.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}sr 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | .#{$pr}#{$u}sr { 10 | position: absolute; 11 | width: 1px; 12 | height: 1px; 13 | padding: 0; 14 | margin: -1px; 15 | overflow: hidden; 16 | clip: rect(0, 0, 0, 0); 17 | border: 0; 18 | } 19 | 20 | } 21 | 22 | 23 | /* 24 | -------------------- 25 | #{$pr}#{$u}sr#{$c3}focus 26 | -------------------- 27 | */ 28 | 29 | #{$u-wrap} { 30 | 31 | .#{$pr}#{$u}sr#{$c3}focus { 32 | position: absolute; 33 | width: 1px; 34 | height: 1px; 35 | padding: 0; 36 | margin: -1px; 37 | overflow: hidden; 38 | clip: rect(0, 0, 0, 0); 39 | border: 0; 40 | 41 | &:focus, 42 | &:active { 43 | position: static; 44 | width: auto; 45 | height: auto; 46 | margin: 0; 47 | overflow: visible; 48 | clip: auto; 49 | } 50 | 51 | } 52 | 53 | } 54 | 55 | 56 | /* 57 | -------------------- 58 | #{$pr}#{$u}sr#{$c3}focus#{$c3}inner 59 | -------------------- 60 | */ 61 | 62 | #{$u-wrap} { 63 | 64 | .#{$pr}#{$u}sr#{$c3}focus#{$c3}inner { 65 | 66 | .#{$pr}#{$u}sr { 67 | position: absolute; 68 | width: 1px; 69 | height: 1px; 70 | padding: 0; 71 | margin: -1px; 72 | overflow: hidden; 73 | clip: rect(0, 0, 0, 0); 74 | border: 0; 75 | } 76 | 77 | &:focus, 78 | &:active { 79 | 80 | .#{$pr}#{$u}sr { 81 | position: static; 82 | width: auto; 83 | height: auto; 84 | margin: 0; 85 | overflow: visible; 86 | clip: auto; 87 | } 88 | 89 | } 90 | 91 | } 92 | 93 | } 94 | -------------------------------------------------------------------------------- /src/scss/object/utility/_text_color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}text#{$c3}(color) 4 | -------------------- 5 | */ 6 | 7 | #{$u-wrap} { 8 | 9 | .#{$pr}#{$u}text#{$c3}default { 10 | color: $body-color; 11 | } 12 | 13 | .#{$pr}#{$u}text#{$c3}info { 14 | color: $info-strong; 15 | } 16 | 17 | .#{$pr}#{$u}text#{$c3}important { 18 | color: $important-strong; 19 | } 20 | 21 | .#{$pr}#{$u}text#{$c3}inverse { 22 | color: $body-inverse-color; 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/object/utility/_text_direction.scss: -------------------------------------------------------------------------------- 1 | /* 2 | -------------------- 3 | #{$pr}#{$u}text#{$c3}(direction) 4 | #{$pr}#{$u}text#{$c3}(direction)#{$c2}(breakpont)#{$c3}(up or down) 5 | -------------------- 6 | */ 7 | 8 | #{$u-wrap} { 9 | 10 | @include make-text-direction(); 11 | 12 | } 13 | --------------------------------------------------------------------------------