- 投稿日:2020-11-24T22:14:39+09:00
要素を非表示にするCSSプロパティ3つ
要素を隠すときによく使うのが、
display:none
かなと思いますが、ほかにもいくつか要素を隠す方法があるのでご紹介します。こちらの記事を参考にしました。(https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/)
- 投稿日:2020-11-24T22:04:58+09:00
コーディング作業短縮化プラグイン『Emmet』をベースにCSSにしてみました
コーディング作業短縮化プラグイン『Emmet』をベースにしたCSS
『Emmet』とは入力補完機能によりHTML、CSS等を素早く編集できる、
テキストエディタ用のプラグインのことです。記述法や練習だったりでわかりやすいページはこのあたり
Emmetの使い方を覚えてHTML/CSSの高速コーディングを身に付けよう
https://webdesign-trends.net/entry/10748それで、これはいいなとタッチタイピングの練習をしていたのですけど、かんたんな調整用CSSとしても共通認識と入力の手間的にいいんじゃないかと思ったのでCSSにしてみました。
primer-emmet(emmet文法に合わせた調整用CSS)
/* primer-emmet (emmet文法に合わせた調整用CSS設定) =================================================================== # 目次 - visual Formatting - box Sizing - font - text - background - border - list =================================================================== */ /* Visual Formatting ------------------------------------------------------------------- */ .pos--s { position: static; } .pos--a { position: absolute; } .pos--r { position: relative; } .pos--f { position: fixed; } .t--a { top: auto; } .r--a { right: auto; } .b--a { bottom: auto; } .l--a { left: auto; } .z--a { z-index: auto; } .fl--n { float: none; } .fl--l { float: left; } .fl--r { float: right; } .cl--n { clear: none; } .cl--l { clear: left; } .cl--r { clear: right; } .cl--b { clear: both; } .d--n { display: none; } .d--b { display: block; } .d--f { display: flex; } .d--if { display: inline-flex; } .d--i { display: inline; } .d--ib { display: inline-block; } .d--li { display: list-item; } .d--tb { display: table; } .d--itb { display: inline-table; } .d--tbcp { display: table-caption; } .d--tbcl { display: table-column; } .d--tbclg { display: table-column-group; } .d--tbhg { display: table-header-group; } .d--tbfg { display: table-footer-group; } .d--tbr { display: table-row; } .d--tbrg { display: table-row-group; } .d--tbc { display: table-cell; } .d--rb { display: ruby; } .d--rbb { display: ruby-base; } .d--rbt { display: ruby-text; } .v--v { visibility: visible; } .v--h { visibility: hidden; } .v--c { visibility: collapse; } .ov--v { overflow: visible; } .ov--h { overflow: hidden; } .ov--s { overflow: scroll; } .ov--a { overflow: auto; } .ovx--v { overflow-x: visible; } .ovx--h { overflow-x: hidden; } .ovx--s { overflow-x: scroll; } .ovx--a { overflow-x: auto; } .ovy--v { overflow-y: visible; } .ovy--h { overflow-y: hidden; } .ovy--s { overflow-y: scroll; } .ovy--a { overflow-y: auto; } .rsz--n { resize: none; } .rsz--b { resize: both; } .rsz--h { resize: horizontal; } .rsz--v { resize: vertical; } /* Box Sizing ------------------------------------------------------------------- */ .bxz--cb { box-sizing: content-box; } .bxz--bb { box-sizing: border-box; } .bxsh--n { box-shadow: none; } /* Font ------------------------------------------------------------------- */ .fw--n { font-weight: normal; } .fw--b { font-weight: bold; } .fw--br { font-weight: bolder; } .fw--lr { font-weight: lighter; } .fs--n { font-style: normal; } .fs--i { font-style: italic; } .fs--o { font-style: oblique; } .fst--n { font-stretch: normal; } .fst--uc { font-stretch: ultra-condensed; } .fst--ec { font-stretch: extra-condensed; } .fst--c { font-stretch: condensed; } .fst--sc { font-stretch: semi-condensed; } .fst--se { font-stretch: semi-expanded; } .fst--e { font-stretch: expanded; } .fst--ee { font-stretch: extra-expanded; } .fst--ue { font-stretch: ultra-expanded; } /* text ------------------------------------------------------------------- */ .va--sup { vertical-align: super; } .va--t { vertical-align: top; } .va--tt { vertical-align: text-top; } .va--m { vertical-align: middle; } .va--bl { vertical-align: baseline; } .va--b { vertical-align: bottom; } .va--tb { vertical-align: text-bottom; } .va--sub { vertical-align: sub; } .ta--l { text-align: left; } .ta--c { text-align: center; } .ta--r { text-align: right; } .ta--j { text-align: justify; } .tal--a { text-align-last: auto; } .tal--l { text-align-last: left; } .tal--c { text-align-last: center; } .tal--r { text-align-last: right; } .td--n { text-decoration: none; } .td--u { text-decoration: underline; } .td--o { text-decoration: overline; } .td--l { text-decoration: line-through; } .te--n { text-emphasis: none; } .te--ac { text-emphasis: accent; } .te--dt { text-emphasis: dot; } .te--c { text-emphasis: circle; } .te--ds { text-emphasis: disc; } .te--b { text-emphasis: before; } .te--a { text-emphasis: after; } .tt--n { text-transform: none; } .tt--c { text-transform: capitalize; } .tt--u { text-transform: uppercase; } .tt--l { text-transform: lowercase; } .tsh--n { text-shadow: none; } .whs--n { white-space: normal; } .whs--p { white-space: pre; } .whs--nw { white-space: nowrap; } .whs--pw { white-space: pre-wrap; } .whs--pl { white-space: pre-line; } .wob--n { word-break: normal; } .wob--k { word-break: keep-all; } .wob--ba { word-break: break-all; } .wow--nm { word-wrap: normal; } .wow--n { word-wrap: none; } .wow--u { word-wrap: unrestricted; } .wow--s { word-wrap: suppress; } .wow--b { word-wrap: break-word; } /* background ------------------------------------------------------------------- */ .bg--n { background: none; } .bgc--t { background-color: transparent; } .bgi--n { background-image: none; } .bgr--n { background-repeat: no-repeat; } .bgr--x { background-repeat: repeat-x; } .bgr--y { background-repeat: repeat-y; } .bgr--sp { background-repeat: space; } .bgr--rd { background-repeat: round; } .bga--f { background-attachment: fixed; } .bga--s { background-attachment: scroll; } .bgsz--a { background-size: auto; } .bgsz--ct { background-size: contain; } .bgsz--cv { background-size: cover; } /* outline ------------------------------------------------------------------- */ .olw--tn { outline-style: none; } .ols--dt { outline-style: dotted; } .ols--ds { outline-style: dashed; } .ols--s { outline-style: solid; } .ols--db { outline-style: double; } .ols--g { outline-style: groove; } .ols--r { outline-style: ridge; } .ols--i { outline-style: inset; } .ols--o { outline-style: outset; } .tbl--a { table-layout: auto; } /* table ------------------------------------------------------------------- */ .tbl--a { table-layout: auto; } .tbl--f { table-layout: fixed; } .cps--t { caption-side: top; } .cps--b { caption-side: bottom; } .es--s { empty-cells: show; } .es--h { empty-cells: hide; } /* border ------------------------------------------------------------------- */ .bd--n { border: none; } .bdcl--c { border-collapse: collapse; } .bdcl--s { border-collapse: separate; } .bds--n { border-style: none; } .bds--h { border-style: hidden; } .bds--dt { border-style: dotted; } .bds--ds { border-style: dashed; } .bds--s { border-style: solid; } .bds--db { border-style: double; } .bds--dtds { border-style: dot-dash; } .bds--dtdtds { border-style: dot-dot-dash; } .bds--w { border-style: wave; } .bds--g { border-style: groove; } .bds--r { border-style: ridge; } .bds--i { border-style: inset; } .bds--o { border-style: outset; } /* border-top ------------------------------------------------------------------- */ .bdt--n { border-top: none; } .bdts--n { border-top-style: none; } .bdts--h { border-top-style: hidden; } .bdts--dt { border-top-style: dotted; } .bdts--ds { border-top-style: dashed; } .bdts--s { border-top-style: solid; } .bdts--db { border-top-style: double; } .bdts--dtds { border-top-style: dot-dash; } .bdts--dtdtds { border-top-style: dot-dot-dash; } .bdts--w { border-top-style: wave; } .bdts--g { border-top-style: groove; } .bdts--r { border-top-style: ridge; } .bdts--i { border-top-style: inset; } .bdts--o { border-top-style: outset; } /* border-right ------------------------------------------------------------------- */ .bdr--n { border-right: none; } .bdrs--n { border-right-style: none; } .bdrs--h { border-right-style: hidden; } .bdrs--dt { border-right-style: dotted; } .bdrs--ds { border-right-style: dashed; } .bdrs--s { border-right-style: solid; } .bdrs--db { border-right-style: double; } .bdrs--dtds { border-right-style: dot-dash; } .bdrs--dtdtds { border-right-style: dot-dot-dash; } .bdrs--w { border-right-style: wave; } .bdrs--g { border-right-style: groove; } .bdrs--r { border-right-style: ridge; } .bdrs--i { border-right-style: inset; } .bdrs--o { border-right-style: outset; } /* border-bottom ------------------------------------------------------------------- */ .bdb--n { border-bottom: none; } .bdbs--n { border-bottom-style: none; } .bdbs--h { border-bottom-style: hidden; } .bdbs--dt { border-bottom-style: dotted; } .bdbs--ds { border-bottom-style: dashed; } .bdbs--s { border-bottom-style: solid; } .bdbs--db { border-bottom-style: double; } .bdbs--dtds { border-bottom-style: dot-dash; } .bdbs--dtdtds { border-bottom-style: dot-dot-dash; } .bdbs--w { border-bottom-style: wave; } .bdbs--g { border-bottom-style: groove; } .bdbs--r { border-bottom-style: ridge; } .bdbs--i { border-bottom-style: inset; } .bdbs--o { border-bottom-style: outset; } /* border-left ------------------------------------------------------------------- */ .bdl--n { border-left: none; } .bdls--n { border-left-style: none; } .bdls--h { border-left-style: hidden; } .bdls--dt { border-left-style: dotted; } .bdls--ds { border-left-style: dashed; } .bdls--s { border-left-style: solid; } .bdls--db { border-left-style: double; } .bdls--dtds { border-left-style: dot-dash; } .bdls--dtdtds { border-left-style: dot-dot-dash; } .bdls--w { border-left-style: wave; } .bdls--g { border-left-style: groove; } .bdls--r { border-left-style: ridge; } .bdls--i { border-left-style: inset; } .bdls--o { border-left-style: outset; } /* list ------------------------------------------------------------------- */ .lisp--i { list-style-position: inside; } .lisp--o { list-style-position: outside; } .list--n { list-style-type: none; } .list--d { list-style-type: disc; } .list--c { list-style-type: circle; } .list--s { list-style-type: square; } .list--dc { list-style-type: disc; } .list--lr { list-style-type: lower-roman; } .list--ur { list-style-type: upper-roman; } /*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––– primer-emmet */primer-emmet-parameter(emmet文法に合わせた調整用CSS。値が固定値でないもの)
/* scss/_primer-emmet-parameter.scss (emmet文法に合わせた調整用CSS。値が固定値でないもの) =================================================================== # 目次 - margin - padding - top, right, bottom, left - width, height - text-indent - word-spacing - opacity - border-width =================================================================== */ /* margin ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ .m--a, .m--auto { margin: auto; } .m--a-0, .m--auto-0 { margin: auto 0; } .m--0 { margin: 0; } .m--0-auto { margin: 0 auto; } /* em */ .m--d25e { margin: 0.25em; } .m--d50e { margin: 0.50em; } .m--d75e { margin: 0.75em; } .m--1e { margin: 1em; } .m--2e { margin: 2em; } .m--3e { margin: 3em; } .m--4e { margin: 4em; } .m--5e { margin: 5em; } .m--6e { margin: 6em; } .m--7e { margin: 7em; } .m--8e { margin: 8em; } .m--9e { margin: 9em; } .m--10e { margin: 10em; } /* rem */ .m--d25r { margin: 0.25rem; } .m--d50r { margin: 0.50rem; } .m--d75r { margin: 0.75rem; } .m--1r { margin: 1rem; } .m--2r { margin: 2rem; } .m--3r { margin: 3rem; } .m--4r { margin: 4rem; } .m--5r { margin: 5rem; } .m--6r { margin: 6rem; } .m--7r { margin: 7rem; } .m--8r { margin: 8rem; } .m--9r { margin: 9rem; } .m--10r { margin: 10rem; } /* % */ .m--25p { margin: 25%; } .m--50p { margin: 50%; } .m--75p { margin: 75%; } .m--10p { margin: 10%; } .m--20p { margin: 20%; } .m--30p { margin: 30%; } .m--40p { margin: 40%; } .m--60p { margin: 60%; } .m--70p { margin: 70%; } .m--80p { margin: 80%; } .m--90p { margin: 90%; } .m--100p { margin: 100%; } /* vw */ .m--25vw { margin: 25vw; } .m--50vw { margin: 50vw; } .m--75vw { margin: 75vw; } .m--10vw { margin: 10vw; } .m--20vw { margin: 20vw; } .m--30vw { margin: 30vw; } .m--40vw { margin: 40vw; } .m--60vw { margin: 60vw; } .m--70vw { margin: 70vw; } .m--80vw { margin: 80vw; } .m--90vw { margin: 90vw; } .m--100vw { margin: 100vw; } /* vh */ .m--25vh { margin: 25vh; } .m--50vh { margin: 50vh; } .m--75vh { margin: 75vh; } .m--10vh { margin: 10vh; } .m--20vh { margin: 20vh; } .m--30vh { margin: 30vh; } .m--40vh { margin: 40vh; } .m--60vh { margin: 60vh; } .m--70vh { margin: 70vh; } .m--80vh { margin: 80vh; } .m--90vh { margin: 90vh; } .m--100vh { margin: 100vh; } /* px */ .m--1px { margin: 1px; } .m--2px { margin: 2px; } .m--3px { margin: 3px; } .m--4px { margin: 4px; } .m--5px { margin: 5px; } .m--6px { margin: 6px; } .m--7px { margin: 7px; } .m--8px { margin: 8px; } .m--9px { margin: 9px; } .m--10px { margin: 10px; } .m--20px { margin: 20px; } .m--30px { margin: 30px; } .m--40px { margin: 40px; } .m--50px { margin: 50px; } .m--60px { margin: 60px; } .m--70px { margin: 70px; } .m--80px { margin: 80px; } .m--90px { margin: 90px; } .m--100px { margin: 100px; } .m--150px { margin: 150px; } .m--200px { margin: 200px; } .m--250px { margin: 250px; } .m--300px { margin: 300px; } /* margin-top ------------------------------------------------------------------- */ .mt--a, .mt--auto { margin-top: auto; } .mt--0 { margin-top: 0; } /* em */ .mt--d25e { margin-top: 0.25em; } .mt--d50e { margin-top: 0.50em; } .mt--d75e { margin-top: 0.75em; } .mt--1e { margin-top: 1em; } .mt--2e { margin-top: 2em; } .mt--3e { margin-top: 3em; } .mt--4e { margin-top: 4em; } .mt--5e { margin-top: 5em; } .mt--6e { margin-top: 6em; } .mt--7e { margin-top: 7em; } .mt--8e { margin-top: 8em; } .mt--9e { margin-top: 9em; } .mt--10e { margin-top: 10em; } /* rem */ .mt--d25r { margin-top: 0.25rem; } .mt--d50r { margin-top: 0.50rem; } .mt--d75r { margin-top: 0.75rem; } .mt--1r { margin-top: 1rem; } .mt--2r { margin-top: 2rem; } .mt--3r { margin-top: 3rem; } .mt--4r { margin-top: 4rem; } .mt--5r { margin-top: 5rem; } .mt--6r { margin-top: 6rem; } .mt--7r { margin-top: 7rem; } .mt--8r { margin-top: 8rem; } .mt--9r { margin-top: 9rem; } .mt--10r { margin-top: 10rem; } /* % */ .mt--25p { margin-top: 25%; } .mt--50p { margin-top: 50%; } .mt--75p { margin-top: 75%; } .mt--10p { margin-top: 10%; } .mt--20p { margin-top: 20%; } .mt--30p { margin-top: 30%; } .mt--40p { margin-top: 40%; } .mt--60p { margin-top: 60%; } .mt--70p { margin-top: 70%; } .mt--80p { margin-top: 80%; } .mt--90p { margin-top: 90%; } .mt--100p { margin-top: 100%; } /* vw */ .mt--25vw { margin-top: 25vw; } .mt--50vw { margin-top: 50vw; } .mt--75vw { margin-top: 75vw; } .mt--10vw { margin-top: 10vw; } .mt--20vw { margin-top: 20vw; } .mt--30vw { margin-top: 30vw; } .mt--40vw { margin-top: 40vw; } .mt--60vw { margin-top: 60vw; } .mt--70vw { margin-top: 70vw; } .mt--80vw { margin-top: 80vw; } .mt--90vw { margin-top: 90vw; } .mt--100vw { margin-top: 100vw; } /* vh */ .mt--25vh { margin-top: 25vh; } .mt--50vh { margin-top: 50vh; } .mt--75vh { margin-top: 75vh; } .mt--10vh { margin-top: 10vh; } .mt--20vh { margin-top: 20vh; } .mt--30vh { margin-top: 30vh; } .mt--40vh { margin-top: 40vh; } .mt--60vh { margin-top: 60vh; } .mt--70vh { margin-top: 70vh; } .mt--80vh { margin-top: 80vh; } .mt--90vh { margin-top: 90vh; } .mt--100vh { margin-top: 100vh; } /* px */ .mt--1px { margin-top: 1px; } .mt--2px { margin-top: 2px; } .mt--3px { margin-top: 3px; } .mt--4px { margin-top: 4px; } .mt--5px { margin-top: 5px; } .mt--6px { margin-top: 6px; } .mt--7px { margin-top: 7px; } .mt--8px { margin-top: 8px; } .mt--9px { margin-top: 9px; } .mt--10px { margin-top: 10px; } .mt--20px { margin-top: 20px; } .mt--30px { margin-top: 30px; } .mt--40px { margin-top: 40px; } .mt--50px { margin-top: 50px; } .mt--60px { margin-top: 60px; } .mt--70px { margin-top: 70px; } .mt--80px { margin-top: 80px; } .mt--90px { margin-top: 90px; } .mt--100px { margin-top: 100px; } .mt--150px { margin-top: 150px; } .mt--200px { margin-top: 200px; } .mt--250px { margin-top: 250px; } .mt--300px { margin-top: 300px; } /* margin-right ------------------------------------------------------------------- */ .mr--a, .mr--auto { margin-right: auto; } .mr--0 { margin-right: 0; } /* em */ .mr--d25e { margin-right: 0.25em; } .mr--d50e { margin-right: 0.50em; } .mr--d75e { margin-right: 0.75em; } .mr--1e { margin-right: 1em; } .mr--2e { margin-right: 2em; } .mr--3e { margin-right: 3em; } .mr--4e { margin-right: 4em; } .mr--5e { margin-right: 5em; } .mr--6e { margin-right: 6em; } .mr--7e { margin-right: 7em; } .mr--8e { margin-right: 8em; } .mr--9e { margin-right: 9em; } .mr--10e { margin-right: 10em; } /* rem */ .mr--d25r { margin-right: 0.25rem; } .mr--d50r { margin-right: 0.50rem; } .mr--d75r { margin-right: 0.75rem; } .mr--1r { margin-right: 1rem; } .mr--2r { margin-right: 2rem; } .mr--3r { margin-right: 3rem; } .mr--4r { margin-right: 4rem; } .mr--5r { margin-right: 5rem; } .mr--6r { margin-right: 6rem; } .mr--7r { margin-right: 7rem; } .mr--8r { margin-right: 8rem; } .mr--9r { margin-right: 9rem; } .mr--10r { margin-right: 10rem; } /* % */ .mr--25p { margin-right: 25%; } .mr--50p { margin-right: 50%; } .mr--75p { margin-right: 75%; } .mr--10p { margin-right: 10%; } .mr--20p { margin-right: 20%; } .mr--30p { margin-right: 30%; } .mr--40p { margin-right: 40%; } .mr--60p { margin-right: 60%; } .mr--70p { margin-right: 70%; } .mr--80p { margin-right: 80%; } .mr--90p { margin-right: 90%; } .mr--100p { margin-right: 100%; } /* vw */ .mr--25vw { margin-right: 25vw; } .mr--50vw { margin-right: 50vw; } .mr--75vw { margin-right: 75vw; } .mr--10vw { margin-right: 10vw; } .mr--20vw { margin-right: 20vw; } .mr--30vw { margin-right: 30vw; } .mr--40vw { margin-right: 40vw; } .mr--60vw { margin-right: 60vw; } .mr--70vw { margin-right: 70vw; } .mr--80vw { margin-right: 80vw; } .mr--90vw { margin-right: 90vw; } .mr--100vw { margin-right: 100vw; } /* vh */ .mr--25vh { margin-right: 25vh; } .mr--50vh { margin-right: 50vh; } .mr--75vh { margin-right: 75vh; } .mr--10vh { margin-right: 10vh; } .mr--20vh { margin-right: 20vh; } .mr--30vh { margin-right: 30vh; } .mr--40vh { margin-right: 40vh; } .mr--60vh { margin-right: 60vh; } .mr--70vh { margin-right: 70vh; } .mr--80vh { margin-right: 80vh; } .mr--90vh { margin-right: 90vh; } .mr--100vh { margin-right: 100vh; } /* px */ .mr--1px { margin-right: 1px; } .mr--2px { margin-right: 2px; } .mr--3px { margin-right: 3px; } .mr--4px { margin-right: 4px; } .mr--5px { margin-right: 5px; } .mr--6px { margin-right: 6px; } .mr--7px { margin-right: 7px; } .mr--8px { margin-right: 8px; } .mr--9px { margin-right: 9px; } .mr--10px { margin-right: 10px; } .mr--20px { margin-right: 20px; } .mr--30px { margin-right: 30px; } .mr--40px { margin-right: 40px; } .mr--50px { margin-right: 50px; } .mr--60px { margin-right: 60px; } .mr--70px { margin-right: 70px; } .mr--80px { margin-right: 80px; } .mr--90px { margin-right: 90px; } .mr--100px { margin-right: 100px; } .mr--150px { margin-right: 150px; } .mr--200px { margin-right: 200px; } .mr--250px { margin-right: 250px; } .mr--300px { margin-right: 300px; } /* margin-bottom ------------------------------------------------------------------- */ .mb--a, .mb--auto { margin-bottom: auto; } .mb--0 { margin-bottom: 0; } /* em */ .mb--d25e { margin-bottom: 0.25em; } .mb--d50e { margin-bottom: 0.50em; } .mb--d75e { margin-bottom: 0.75em; } .mb--1e { margin-bottom: 1em; } .mb--2e { margin-bottom: 2em; } .mb--3e { margin-bottom: 3em; } .mb--4e { margin-bottom: 4em; } .mb--5e { margin-bottom: 5em; } .mb--6e { margin-bottom: 6em; } .mb--7e { margin-bottom: 7em; } .mb--8e { margin-bottom: 8em; } .mb--9e { margin-bottom: 9em; } .mb--10e { margin-bottom: 10em; } /* rem */ .mb--d25r { margin-bottom: 0.25rem; } .mb--d50r { margin-bottom: 0.50rem; } .mb--d75r { margin-bottom: 0.75rem; } .mb--1r { margin-bottom: 1rem; } .mb--2r { margin-bottom: 2rem; } .mb--3r { margin-bottom: 3rem; } .mb--4r { margin-bottom: 4rem; } .mb--5r { margin-bottom: 5rem; } .mb--6r { margin-bottom: 6rem; } .mb--7r { margin-bottom: 7rem; } .mb--8r { margin-bottom: 8rem; } .mb--9r { margin-bottom: 9rem; } .mb--10r { margin-bottom: 10rem; } /* % */ .mb--25p { margin-bottom: 25%; } .mb--50p { margin-bottom: 50%; } .mb--75p { margin-bottom: 75%; } .mb--10p { margin-bottom: 10%; } .mb--20p { margin-bottom: 20%; } .mb--30p { margin-bottom: 30%; } .mb--40p { margin-bottom: 40%; } .mb--60p { margin-bottom: 60%; } .mb--70p { margin-bottom: 70%; } .mb--80p { margin-bottom: 80%; } .mb--90p { margin-bottom: 90%; } .mb--100p { margin-bottom: 100%; } /* vw */ .mb--25vw { margin-bottom: 25vw; } .mb--50vw { margin-bottom: 50vw; } .mb--75vw { margin-bottom: 75vw; } .mb--10vw { margin-bottom: 10vw; } .mb--20vw { margin-bottom: 20vw; } .mb--30vw { margin-bottom: 30vw; } .mb--40vw { margin-bottom: 40vw; } .mb--60vw { margin-bottom: 60vw; } .mb--70vw { margin-bottom: 70vw; } .mb--80vw { margin-bottom: 80vw; } .mb--90vw { margin-bottom: 90vw; } .mb--100vw { margin-bottom: 100vw; } /* vh */ .mb--25vh { margin-bottom: 25vh; } .mb--50vh { margin-bottom: 50vh; } .mb--75vh { margin-bottom: 75vh; } .mb--10vh { margin-bottom: 10vh; } .mb--20vh { margin-bottom: 20vh; } .mb--30vh { margin-bottom: 30vh; } .mb--40vh { margin-bottom: 40vh; } .mb--60vh { margin-bottom: 60vh; } .mb--70vh { margin-bottom: 70vh; } .mb--80vh { margin-bottom: 80vh; } .mb--90vh { margin-bottom: 90vh; } .mb--100vh { margin-bottom: 100vh; } /* px */ .mb--1px { margin-bottom: 1px; } .mb--2px { margin-bottom: 2px; } .mb--3px { margin-bottom: 3px; } .mb--4px { margin-bottom: 4px; } .mb--5px { margin-bottom: 5px; } .mb--6px { margin-bottom: 6px; } .mb--7px { margin-bottom: 7px; } .mb--8px { margin-bottom: 8px; } .mb--9px { margin-bottom: 9px; } .mb--10px { margin-bottom: 10px; } .mb--20px { margin-bottom: 20px; } .mb--30px { margin-bottom: 30px; } .mb--40px { margin-bottom: 40px; } .mb--50px { margin-bottom: 50px; } .mb--60px { margin-bottom: 60px; } .mb--70px { margin-bottom: 70px; } .mb--80px { margin-bottom: 80px; } .mb--90px { margin-bottom: 90px; } .mb--100px { margin-bottom: 100px; } .mb--150px { margin-bottom: 150px; } .mb--200px { margin-bottom: 200px; } .mb--250px { margin-bottom: 250px; } .mb--300px { margin-bottom: 300px; } /* margin-left ------------------------------------------------------------------- */ .ml--a, .ml--auto { margin-left: auto; } .ml--0 { margin-left: 0; } /* em */ .ml--d25e { margin-left: 0.25em; } .ml--d50e { margin-left: 0.50em; } .ml--d75e { margin-left: 0.75em; } .ml--1e { margin-left: 1em; } .ml--2e { margin-left: 2em; } .ml--3e { margin-left: 3em; } .ml--4e { margin-left: 4em; } .ml--5e { margin-left: 5em; } .ml--6e { margin-left: 6em; } .ml--7e { margin-left: 7em; } .ml--8e { margin-left: 8em; } .ml--9e { margin-left: 9em; } .ml--10e { margin-left: 10em; } /* rem */ .ml--d25r { margin-left: 0.25rem; } .ml--d50r { margin-left: 0.50rem; } .ml--d75r { margin-left: 0.75rem; } .ml--1r { margin-left: 1rem; } .ml--2r { margin-left: 2rem; } .ml--3r { margin-left: 3rem; } .ml--4r { margin-left: 4rem; } .ml--5r { margin-left: 5rem; } .ml--6r { margin-left: 6rem; } .ml--7r { margin-left: 7rem; } .ml--8r { margin-left: 8rem; } .ml--9r { margin-left: 9rem; } .ml--10r { margin-left: 10rem; } /* % */ .ml--25p { margin-left: 25%; } .ml--50p { margin-left: 50%; } .ml--75p { margin-left: 75%; } .ml--10p { margin-left: 10%; } .ml--20p { margin-left: 20%; } .ml--30p { margin-left: 30%; } .ml--40p { margin-left: 40%; } .ml--60p { margin-left: 60%; } .ml--70p { margin-left: 70%; } .ml--80p { margin-left: 80%; } .ml--90p { margin-left: 90%; } .ml--100p { margin-left: 100%; } /* vw */ .ml--25vw { margin-left: 25vw; } .ml--50vw { margin-left: 50vw; } .ml--75vw { margin-left: 75vw; } .ml--10vw { margin-left: 10vw; } .ml--20vw { margin-left: 20vw; } .ml--30vw { margin-left: 30vw; } .ml--40vw { margin-left: 40vw; } .ml--60vw { margin-left: 60vw; } .ml--70vw { margin-left: 70vw; } .ml--80vw { margin-left: 80vw; } .ml--90vw { margin-left: 90vw; } .ml--100vw { margin-left: 100vw; } /* vh */ .ml--25vh { margin-left: 25vh; } .ml--50vh { margin-left: 50vh; } .ml--75vh { margin-left: 75vh; } .ml--10vh { margin-left: 10vh; } .ml--20vh { margin-left: 20vh; } .ml--30vh { margin-left: 30vh; } .ml--40vh { margin-left: 40vh; } .ml--60vh { margin-left: 60vh; } .ml--70vh { margin-left: 70vh; } .ml--80vh { margin-left: 80vh; } .ml--90vh { margin-left: 90vh; } .ml--100vh { margin-left: 100vh; } /* px */ .ml--1px { margin-left: 1px; } .ml--2px { margin-left: 2px; } .ml--3px { margin-left: 3px; } .ml--4px { margin-left: 4px; } .ml--5px { margin-left: 5px; } .ml--6px { margin-left: 6px; } .ml--7px { margin-left: 7px; } .ml--8px { margin-left: 8px; } .ml--9px { margin-left: 9px; } .ml--10px { margin-left: 10px; } .ml--20px { margin-left: 20px; } .ml--30px { margin-left: 30px; } .ml--40px { margin-left: 40px; } .ml--50px { margin-left: 50px; } .ml--60px { margin-left: 60px; } .ml--70px { margin-left: 70px; } .ml--80px { margin-left: 80px; } .ml--90px { margin-left: 90px; } .ml--100px { margin-left: 100px; } .ml--150px { margin-left: 150px; } .ml--200px { margin-left: 200px; } .ml--250px { margin-left: 250px; } .ml--300px { margin-left: 300px; } /* margin-top-bottom ------------------------------------------------------------------- */ .mtb--a, .mtb--auto { margin-top: auto; margin-bottom: auto; } .mtb--0 { margin-top: 0; margin-bottom: 0; } /* em */ .mtb--d25e { margin-top: 0.25em; margin-bottom: 0.25em; } .mtb--d50e { margin-top: 0.50em; margin-bottom: 0.50em; } .mtb--d75e { margin-top: 0.75em; margin-bottom: 0.75em; margin: 1rem 1rem; } .mtb--1e { margin-top: 1em; margin-bottom: 1em; } .mtb--2e { margin-top: 2em; margin-bottom: 2em; } .mtb--3e { margin-top: 3em; margin-bottom: 3em; } .mtb--4e { margin-top: 4em; margin-bottom: 4em; } .mtb--5e { margin-top: 5em; margin-bottom: 5em; } .mtb--6e { margin-top: 6em; margin-bottom: 6em; } .mtb--7e { margin-top: 7em; margin-bottom: 7em; } .mtb--8e { margin-top: 8em; margin-bottom: 8em; } .mtb--9e { margin-top: 9em; margin-bottom: 9em; } .mtb--10e { margin-top: 10em; margin-bottom: 10em; } /* rem */ .mtb--d25r { margin-top: 0.25rem; margin-bottom: 0.25rem; } .mtb--d50r { margin-top: 0.50rem; margin-bottom: 0.50rem; } .mtb--d75r { margin-top: 0.75rem; margin-bottom: 0.75rem; } .mtb--1r { margin-top: 1rem; margin-bottom: 1rem; } .mtb--2r { margin-top: 2rem; margin-bottom: 2rem; } .mtb--3r { margin-top: 3rem; margin-bottom: 3rem; } .mtb--4r { margin-top: 4rem; margin-bottom: 4rem; } .mtb--5r { margin-top: 5rem; margin-bottom: 5rem; } .mtb--6r { margin-top: 6rem; margin-bottom: 6rem; } .mtb--7r { margin-top: 7rem; margin-bottom: 7rem; } .mtb--8r { margin-top: 8rem; margin-bottom: 8rem; } .mtb--9r { margin-top: 9rem; margin-bottom: 9rem; } .mtb--10r { margin-top: 10rem; margin-bottom: 10rem; } /* % */ .mtb--25p { margin-top: 25%; margin-bottom: 25%; } .mtb--50p { margin-top: 50%; margin-bottom: 50%; } .mtb--75p { margin-top: 75%; margin-bottom: 75%; } .mtb--10p { margin-top: 10%; margin-bottom: 10%; } .mtb--20p { margin-top: 20%; margin-bottom: 20%; } .mtb--30p { margin-top: 30%; margin-bottom: 30%; } .mtb--40p { margin-top: 40%; margin-bottom: 40%; } .mtb--60p { margin-top: 60%; margin-bottom: 60%; } .mtb--70p { margin-top: 70%; margin-bottom: 70%; } .mtb--80p { margin-top: 80%; margin-bottom: 80%; } .mtb--90p { margin-top: 90%; margin-bottom: 90%; } .mtb--100p { margin-top: 100%; margin-bottom: 100%; } /* vw */ .mtb--25vw { margin-top: 25vw; margin-bottom: 25vw; } .mtb--50vw { margin-top: 50vw; margin-bottom: 50vw; } .mtb--75vw { margin-top: 75vw; margin-bottom: 75vw; } .mtb--10vw { margin-top: 10vw; margin-bottom: 10vw; } .mtb--20vw { margin-top: 20vw; margin-bottom: 20vw; } .mtb--30vw { margin-top: 30vw; margin-bottom: 30vw; } .mtb--40vw { margin-top: 40vw; margin-bottom: 40vw; } .mtb--60vw { margin-top: 60vw; margin-bottom: 60vw; } .mtb--70vw { margin-top: 70vw; margin-bottom: 70vw; m:1r1r ; } .mtb--80vw { margin-top: 80vw; margin-bottom: 80vw; } .mtb--90vw { margin-top: 90vw; margin-bottom: 90vw; } .mtb--100vw { margin-top: 100vw; margin-bottom: 100vw; } /* vh */ .mtb--25vh { margin-top: 25vh; margin-bottom: 25vh; } .mtb--50vh { margin-top: 50vh; margin-bottom: 50vh; } .mtb--75vh { margin-top: 75vh; margin-bottom: 75vh; } .mtb--10vh { margin-top: 10vh; margin-bottom: 10vh; } .mtb--20vh { margin-top: 20vh; margin-bottom: 20vh; } .mtb--30vh { margin-top: 30vh; margin-bottom: 30vh; } .mtb--40vh { margin-top: 40vh; margin-bottom: 40vh; } .mtb--60vh { margin-top: 60vh; margin-bottom: 60vh; } .mtb--70vh { margin-top: 70vh; margin-bottom: 70vh; } .mtb--80vh { margin-top: 80vh; margin-bottom: 80vh; } .mtb--90vh { margin-top: 90vh; margin-t: 90vh; } .mtb--100vh { margin-top: 100vh; margin-bottom: 100vh; } /* px */ .mtb--1px { margin-top: 1px; margin-bottom: 1px; } .mtb--2px { margin-top: 2px; margin-bottom: 2px; } .mtb--3px { margin-top: 3px; margin-bottom: 3px; } .mtb--4px { margin-top: 4px; margin-bottom: 4px; } .mtb--5px { margin-top: 5px; margin-bottom: 5px; } .mtb--6px { margin-top: 6px; margin-bottom: 6px; } .mtb--7px { margin-top: 7px; margin-bottom: 7px; } .mtb--8px { margin-top: 8px; margin-bottom: 8px; } .mtb--9px { margin-top: 9px; margin-bottom: 9px; } .mtb--10px { margin-top: 10px; margin-bottom: 10px; } .mtb--20px { margin-top: 20px; margin-bottom: 20px; } .mtb--30px { margin-top: 30px; margin-bottom: 30px; } .mtb--40px { margin-top: 40px; margin-bottom: 40px; } .mtb--50px { margin-top: 50px; margin-bottom: 50px; } .mtb--60px { margin-top: 60px; margin-bottom: 60px; } .mtb--70px { margin-top: 70px; margin-bottom: 70px; } .mtb--80px { margin-top: 80px; margin-bottom: 80px; } .mtb--90px { margin-top: 90px; margin-bottom: 90px; } .mtb--100px { margin-top: 100px; margin-bottom: 100px; } .mtb--150px { margin-top: 150px; margin-bottom: 150px; } .mtb--200px { margin-top: 200px; margin-bottom: 200px; } .mtb--250px { margin-top: 250px; margin-bottom: 250px; } .mtb--300px { margin-top: 300px; margin-bottom: 300px; } /* margin-right-left ------------------------------------------------------------------- */ .mrl--a, .mrl--auto { margin-right: auto; margin-left: auto; } .mrl--0 { margin-right: 0; margin-left: 0; } /* em */ .mrl--d25e { margin-right: 0.25em; margin-left: 0.25em; } .mrl--d50e { margin-right: 0.50em; margin-left: 0.50em; } .mrl--d75e { margin-right: 0.75em; margin-left: 0.75em; margin: 1rem 1rem; } .mrl--1e { margin-right: 1em; margin-left: 1em; } .mrl--2e { margin-right: 2em; margin-left: 2em; } .mrl--3e { margin-right: 3em; margin-left: 3em; } .mrl--4e { margin-right: 4em; margin-left: 4em; } .mrl--5e { margin-right: 5em; margin-left: 5em; } .mrl--6e { margin-right: 6em; margin-left: 6em; } .mrl--7e { margin-right: 7em; margin-left: 7em; } .mrl--8e { margin-right: 8em; margin-left: 8em; } .mrl--9e { margin-right: 9em; margin-left: 9em; } .mrl--10e { margin-right: 10em; margin-left: 10em; } /* rem */ .mrl--d25r { margin-right: 0.25rem; margin-left: 0.25rem; } .mrl--d50r { margin-right: 0.50rem; margin-left: 0.50rem; } .mrl--d75r { margin-right: 0.75rem; margin-left: 0.75rem; } .mrl--1r { margin-right: 1rem; margin-left: 1rem; } .mrl--2r { margin-right: 2rem; margin-left: 2rem; } .mrl--3r { margin-right: 3rem; margin-left: 3rem; } .mrl--4r { margin-right: 4rem; margin-left: 4rem; } .mrl--5r { margin-right: 5rem; margin-left: 5rem; } .mrl--6r { margin-right: 6rem; margin-left: 6rem; } .mrl--7r { margin-right: 7rem; margin-left: 7rem; } .mrl--8r { margin-right: 8rem; margin-left: 8rem; } .mrl--9r { margin-right: 9rem; margin-left: 9rem; } .mrl--10r { margin-right: 10rem; margin-left: 10rem; } /* % */ .mrl--25p { margin-right: 25%; margin-left: 25%; } .mrl--50p { margin-right: 50%; margin-left: 50%; } .mrl--75p { margin-right: 75%; margin-left: 75%; } .mrl--10p { margin-right: 10%; margin-left: 10%; } .mrl--20p { margin-right: 20%; margin-left: 20%; } .mrl--30p { margin-right: 30%; margin-left: 30%; } .mrl--40p { margin-right: 40%; margin-left: 40%; } .mrl--60p { margin-right: 60%; margin-left: 60%; } .mrl--70p { margin-right: 70%; margin-left: 70%; } .mrl--80p { margin-right: 80%; margin-left: 80%; } .mrl--90p { margin-right: 90%; margin-left: 90%; } .mrl--100p { margin-right: 100%; margin-left: 100%; } /* vw */ .mrl--25vw { margin-right: 25vw; margin-left: 25vw; } .mrl--50vw { margin-right: 50vw; margin-left: 50vw; } .mrl--75vw { margin-right: 75vw; margin-left: 75vw; } .mrl--10vw { margin-right: 10vw; margin-left: 10vw; } .mrl--20vw { margin-right: 20vw; margin-left: 20vw; } .mrl--30vw { margin-right: 30vw; margin-left: 30vw; } .mrl--40vw { margin-right: 40vw; margin-left: 40vw; } .mrl--60vw { margin-right: 60vw; margin-left: 60vw; } .mrl--70vw { margin-right: 70vw; margin-left: 70vw; m:1r1r ; } .mrl--80vw { margin-right: 80vw; margin-left: 80vw; } .mrl--90vw { margin-right: 90vw; margin-left: 90vw; } .mrl--100vw { margin-right: 100vw; margin-left: 100vw; } /* vh */ .mrl--25vh { margin-right: 25vh; margin-left: 25vh; } .mrl--50vh { margin-right: 50vh; margin-left: 50vh; } .mrl--75vh { margin-right: 75vh; margin-left: 75vh; } .mrl--10vh { margin-right: 10vh; margin-left: 10vh; } .mrl--20vh { margin-right: 20vh; margin-left: 20vh; } .mrl--30vh { margin-right: 30vh; margin-left: 30vh; } .mrl--40vh { margin-right: 40vh; margin-left: 40vh; } .mrl--60vh { margin-right: 60vh; margin-left: 60vh; } .mrl--70vh { margin-right: 70vh; margin-left: 70vh; } .mrl--80vh { margin-right: 80vh; margin-left: 80vh; } .mrl--90vh { margin-right: 90vh; margin-left: 90vh; } .mrl--100vh { margin-right: 100vh; margin-left: 100vh; } /* px */ .mrl--1px { margin-right: 1px; margin-left: 1px; } .mrl--2px { margin-right: 2px; margin-left: 2px; } .mrl--3px { margin-right: 3px; margin-left: 3px; } .mrl--4px { margin-right: 4px; margin-left: 4px; } .mrl--5px { margin-right: 5px; margin-left: 5px; } .mrl--6px { margin-right: 6px; margin-left: 6px; } .mrl--7px { margin-right: 7px; margin-left: 7px; } .mrl--8px { margin-right: 8px; margin-left: 8px; } .mrl--9px { margin-right: 9px; margin-left: 9px; } .mrl--10px { margin-right: 10px; margin-left: 10px; } .mrl--20px { margin-right: 20px; margin-left: 20px; } .mrl--30px { margin-right: 30px; margin-left: 30px; } .mrl--40px { margin-right: 40px; margin-left: 40px; } .mrl--50px { margin-right: 50px; margin-left: 50px; } .mrl--60px { margin-right: 60px; margin-left: 60px; } .mrl--70px { margin-right: 70px; margin-left: 70px; } .mrl--80px { margin-right: 80px; margin-left: 80px; } .mrl--90px { margin-right: 90px; margin-left: 90px; } .mrl--100px { margin-right: 100px; margin-left: 100px; } .mrl--150px { margin-right: 150px; margin-left: 150px; } .mrl--200px { margin-right: 200px; margin-left: 200px; } .mrl--250px { margin-right: 250px; margin-left: 250px; } .mrl--300px { margin-right: 300px; margin-left: 300px; } /*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––––––––– margin */ /* padding ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ .p--0 { padding: 0; } /* em */ .p--d25e { padding: 0.25em; } .p--d50e { padding: 0.50em; } .p--d75e { padding: 0.75em; } .p--1e { padding: 1em; } .p--2e { padding: 2em; } .p--3e { padding: 3em; } .p--4e { padding: 4em; } .p--5e { padding: 5em; } .p--6e { padding: 6em; } .p--7e { padding: 7em; } .p--8e { padding: 8em; } .p--9e { padding: 9em; } .p--10e { padding: 10em; } /* rem */ .p--d25r { padding: 0.25rem; } .p--d50r { padding: 0.50rem; } .p--d75r { padding: 0.75rem; } .p--1r { padding: 1rem; } .p--2r { padding: 2rem; } .p--3r { padding: 3rem; } .p--4r { padding: 4rem; } .p--5r { padding: 5rem; } .p--6r { padding: 6rem; } .p--7r { padding: 7rem; } .p--8r { padding: 8rem; } .p--9r { padding: 9rem; } .p--10r { padding: 10rem; } /* % */ .p--25p { padding: 25%; } .p--50p { padding: 50%; } .p--75p { padding: 75%; } .p--10p { padding: 10%; } .p--20p { padding: 20%; } .p--30p { padding: 30%; } .p--40p { padding: 40%; } .p--60p { padding: 60%; } .p--70p { padding: 70%; } .p--80p { padding: 80%; } .p--90p { padding: 90%; } .p--100p { padding: 100%; } /* vw */ .p--25vw { padding: 25vw; } .p--50vw { padding: 50vw; } .p--75vw { padding: 75vw; } .p--10vw { padding: 10vw; } .p--20vw { padding: 20vw; } .p--30vw { padding: 30vw; } .p--40vw { padding: 40vw; } .p--60vw { padding: 60vw; } .p--70vw { padding: 70vw; } .p--80vw { padding: 80vw; } .p--90vw { padding: 90vw; } .p--100vw { padding: 100vw; } /* vh */ .p--25vh { padding: 25vh; } .p--50vh { padding: 50vh; } .p--75vh { padding: 75vh; } .p--10vh { padding: 10vh; } .p--20vh { padding: 20vh; } .p--30vh { padding: 30vh; } .p--40vh { padding: 40vh; } .p--60vh { padding: 60vh; } .p--70vh { padding: 70vh; } .p--80vh { padding: 80vh; } .p--90vh { padding: 90vh; } .p--100vh { padding: 100vh; } /* px */ .p--1px { padding: 1px; } .p--2px { padding: 2px; } .p--3px { padding: 3px; } .p--4px { padding: 4px; } .p--5px { padding: 5px; } .p--6px { padding: 6px; } .p--7px { padding: 7px; } .p--8px { padding: 8px; } .p--9px { padding: 9px; } .p--10px { padding: 10px; } .p--20px { padding: 20px; } .p--30px { padding: 30px; } .p--40px { padding: 40px; } .p--50px { padding: 50px; } .p--60px { padding: 60px; } .p--70px { padding: 70px; } .p--80px { padding: 80px; } .p--90px { padding: 90px; } .p--100px { padding: 100px; } .p--150px { padding: 150px; } .p--200px { padding: 200px; } .p--250px { padding: 250px; } .p--300px { padding: 300px; } /* padding-top ------------------------------------------------------------------- */ .pt--0 { padding-top: 0; } /* em */ .pt--d25e { padding-top: 0.25em; } .pt--d50e { padding-top: 0.50em; } .pt--d75e { padding-top: 0.75em; } .pt--1e { padding-top: 1em; } .pt--2e { padding-top: 2em; } .pt--3e { padding-top: 3em; } .pt--4e { padding-top: 4em; } .pt--5e { padding-top: 5em; } .pt--6e { padding-top: 6em; } .pt--7e { padding-top: 7em; } .pt--8e { padding-top: 8em; } .pt--9e { padding-top: 9em; } .pt--10e { padding-top: 10em; } /* rem */ .pt--d25r { padding-top: 0.25rem; } .pt--d50r { padding-top: 0.50rem; } .pt--d75r { padding-top: 0.75rem; } .pt--1r { padding-top: 1rem; } .pt--2r { padding-top: 2rem; } .pt--3r { padding-top: 3rem; } .pt--4r { padding-top: 4rem; } .pt--5r { padding-top: 5rem; } .pt--6r { padding-top: 6rem; } .pt--7r { padding-top: 7rem; } .pt--8r { padding-top: 8rem; } .pt--9r { padding-top: 9rem; } .pt--10r { padding-top: 10rem; } /* % */ .pt--25p { padding-top: 25%; } .pt--50p { padding-top: 50%; } .pt--75p { padding-top: 75%; } .pt--10p { padding-top: 10%; } .pt--20p { padding-top: 20%; } .pt--30p { padding-top: 30%; } .pt--40p { padding-top: 40%; } .pt--60p { padding-top: 60%; } .pt--70p { padding-top: 70%; } .pt--80p { padding-top: 80%; } .pt--90p { padding-top: 90%; } .pt--100p { padding-top: 100%; } /* vw */ .pt--25vw { padding-top: 25vw; } .pt--50vw { padding-top: 50vw; } .pt--75vw { padding-top: 75vw; } .pt--10vw { padding-top: 10vw; } .pt--20vw { padding-top: 20vw; } .pt--30vw { padding-top: 30vw; } .pt--40vw { padding-top: 40vw; } .pt--60vw { padding-top: 60vw; } .pt--70vw { padding-top: 70vw; } .pt--80vw { padding-top: 80vw; } .pt--90vw { padding-top: 90vw; } .pt--100vw { padding-top: 100vw; } /* vh */ .pt--25vh { padding-top: 25vh; } .pt--50vh { padding-top: 50vh; } .pt--75vh { padding-top: 75vh; } .pt--10vh { padding-top: 10vh; } .pt--20vh { padding-top: 20vh; } .pt--30vh { padding-top: 30vh; } .pt--40vh { padding-top: 40vh; } .pt--60vh { padding-top: 60vh; } .pt--70vh { padding-top: 70vh; } .pt--80vh { padding-top: 80vh; } .pt--90vh { padding-top: 90vh; } .pt--100vh { padding-top: 100vh; } /* px */ .pt--1px { padding-top: 1px; } .pt--2px { padding-top: 2px; } .pt--3px { padding-top: 3px; } .pt--4px { padding-top: 4px; } .pt--5px { padding-top: 5px; } .pt--6px { padding-top: 6px; } .pt--7px { padding-top: 7px; } .pt--8px { padding-top: 8px; } .pt--9px { padding-top: 9px; } .pt--10px { padding-top: 10px; } .pt--20px { padding-top: 20px; } .pt--30px { padding-top: 30px; } .pt--40px { padding-top: 40px; } .pt--50px { padding-top: 50px; } .pt--60px { padding-top: 60px; } .pt--70px { padding-top: 70px; } .pt--80px { padding-top: 80px; } .pt--90px { padding-top: 90px; } .pt--100px { padding-top: 100px; } .pt--150px { padding-top: 150px; } .pt--200px { padding-top: 200px; } .pt--250px { padding-top: 250px; } .pt--300px { padding-top: 300px; } /* padding-right ------------------------------------------------------------------- */ .pr--0 { padding-right: 0; } /* em */ .pr--d25e { padding-right: 0.25em; } .pr--d50e { padding-right: 0.50em; } .pr--d75e { padding-right: 0.75em; } .pr--1e { padding-right: 1em; } .pr--2e { padding-right: 2em; } .pr--3e { padding-right: 3em; } .pr--4e { padding-right: 4em; } .pr--5e { padding-right: 5em; } .pr--6e { padding-right: 6em; } .pr--7e { padding-right: 7em; } .pr--8e { padding-right: 8em; } .pr--9e { padding-right: 9em; } .pr--10e { padding-right: 10em; } /* rem */ .pr--d25r { padding-right: 0.25rem; } .pr--d50r { padding-right: 0.50rem; } .pr--d75r { padding-right: 0.75rem; } .pr--1r { padding-right: 1rem; } .pr--2r { padding-right: 2rem; } .pr--3r { padding-right: 3rem; } .pr--4r { padding-right: 4rem; } .pr--5r { padding-right: 5rem; } .pr--6r { padding-right: 6rem; } .pr--7r { padding-right: 7rem; } .pr--8r { padding-right: 8rem; } .pr--9r { padding-right: 9rem; } .pr--10r { padding-right: 10rem; } /* % */ .pr--25p { padding-right: 25%; } .pr--50p { padding-right: 50%; } .pr--75p { padding-right: 75%; } .pr--10p { padding-right: 10%; } .pr--20p { padding-right: 20%; } .pr--30p { padding-right: 30%; } .pr--40p { padding-right: 40%; } .pr--60p { padding-right: 60%; } .pr--70p { padding-right: 70%; } .pr--80p { padding-right: 80%; } .pr--90p { padding-right: 90%; } .pr--100p { padding-right: 100%; } /* vw */ .pr--25vw { padding-right: 25vw; } .pr--50vw { padding-right: 50vw; } .pr--75vw { padding-right: 75vw; } .pr--10vw { padding-right: 10vw; } .pr--20vw { padding-right: 20vw; } .pr--30vw { padding-right: 30vw; } .pr--40vw { padding-right: 40vw; } .pr--60vw { padding-right: 60vw; } .pr--70vw { padding-right: 70vw; } .pr--80vw { padding-right: 80vw; } .pr--90vw { padding-right: 90vw; } .pr--100vw { padding-right: 100vw; } /* vh */ .pr--25vh { padding-right: 25vh; } .pr--50vh { padding-right: 50vh; } .pr--75vh { padding-right: 75vh; } .pr--10vh { padding-right: 10vh; } .pr--20vh { padding-right: 20vh; } .pr--30vh { padding-right: 30vh; } .pr--40vh { padding-right: 40vh; } .pr--60vh { padding-right: 60vh; } .pr--70vh { padding-right: 70vh; } .pr--80vh { padding-right: 80vh; } .pr--90vh { padding-right: 90vh; } .pr--100vh { padding-right: 100vh; } /* px */ .pr--1px { padding-right: 1px; } .pr--2px { padding-right: 2px; } .pr--3px { padding-right: 3px; } .pr--4px { padding-right: 4px; } .pr--5px { padding-right: 5px; } .pr--6px { padding-right: 6px; } .pr--7px { padding-right: 7px; } .pr--8px { padding-right: 8px; } .pr--9px { padding-right: 9px; } .pr--10px { padding-right: 10px; } .pr--20px { padding-right: 20px; } .pr--30px { padding-right: 30px; } .pr--40px { padding-right: 40px; } .pr--50px { padding-right: 50px; } .pr--60px { padding-right: 60px; } .pr--70px { padding-right: 70px; } .pr--80px { padding-right: 80px; } .pr--90px { padding-right: 90px; } .pr--100px { padding-right: 100px; } .pr--150px { padding-right: 150px; } .pr--200px { padding-right: 200px; } .pr--250px { padding-right: 250px; } .pr--300px { padding-right: 300px; } /* padding-bottom ------------------------------------------------------------------- */ .pb--0 { padding-bottom: 0; } /* em */ .pb--d25e { padding-bottom: 0.25em; } .pb--d50e { padding-bottom: 0.50em; } .pb--d75e { padding-bottom: 0.75em; } .pb--1e { padding-bottom: 1em; } .pb--2e { padding-bottom: 2em; } .pb--3e { padding-bottom: 3em; } .pb--4e { padding-bottom: 4em; } .pb--5e { padding-bottom: 5em; } .pb--6e { padding-bottom: 6em; } .pb--7e { padding-bottom: 7em; } .pb--8e { padding-bottom: 8em; } .pb--9e { padding-bottom: 9em; } .pb--10e { padding-bottom: 10em; } /* rem */ .pb--d25r { padding-bottom: 0.25rem; } .pb--d50r { padding-bottom: 0.50rem; } .pb--d75r { padding-bottom: 0.75rem; } .pb--1r { padding-bottom: 1rem; } .pb--2r { padding-bottom: 2rem; } .pb--3r { padding-bottom: 3rem; } .pb--4r { padding-bottom: 4rem; } .pb--5r { padding-bottom: 5rem; } .pb--6r { padding-bottom: 6rem; } .pb--7r { padding-bottom: 7rem; } .pb--8r { padding-bottom: 8rem; } .pb--9r { padding-bottom: 9rem; } .pb--10r { padding-bottom: 10rem; } /* % */ .pb--25p { padding-bottom: 25%; } .pb--50p { padding-bottom: 50%; } .pb--75p { padding-bottom: 75%; } .pb--10p { padding-bottom: 10%; } .pb--20p { padding-bottom: 20%; } .pb--30p { padding-bottom: 30%; } .pb--40p { padding-bottom: 40%; } .pb--60p { padding-bottom: 60%; } .pb--70p { padding-bottom: 70%; } .pb--80p { padding-bottom: 80%; } .pb--90p { padding-bottom: 90%; } .pb--100p { padding-bottom: 100%; } /* vw */ .pb--25vw { padding-bottom: 25vw; } .pb--50vw { padding-bottom: 50vw; } .pb--75vw { padding-bottom: 75vw; } .pb--10vw { padding-bottom: 10vw; } .pb--20vw { padding-bottom: 20vw; } .pb--30vw { padding-bottom: 30vw; } .pb--40vw { padding-bottom: 40vw; } .pb--60vw { padding-bottom: 60vw; } .pb--70vw { padding-bottom: 70vw; } .pb--80vw { padding-bottom: 80vw; } .pb--90vw { padding-bottom: 90vw; } .pb--100vw { padding-bottom: 100vw; } /* vh */ .pb--25vh { padding-bottom: 25vh; } .pb--50vh { padding-bottom: 50vh; } .pb--75vh { padding-bottom: 75vh; } .pb--10vh { padding-bottom: 10vh; } .pb--20vh { padding-bottom: 20vh; } .pb--30vh { padding-bottom: 30vh; } .pb--40vh { padding-bottom: 40vh; } .pb--60vh { padding-bottom: 60vh; } .pb--70vh { padding-bottom: 70vh; } .pb--80vh { padding-bottom: 80vh; } .pb--90vh { padding-bottom: 90vh; } .pb--100vh { padding-bottom: 100vh; } /* px */ .pb--1px { padding-bottom: 1px; } .pb--2px { padding-bottom: 2px; } .pb--3px { padding-bottom: 3px; } .pb--4px { padding-bottom: 4px; } .pb--5px { padding-bottom: 5px; } .pb--6px { padding-bottom: 6px; } .pb--7px { padding-bottom: 7px; } .pb--8px { padding-bottom: 8px; } .pb--9px { padding-bottom: 9px; } .pb--10px { padding-bottom: 10px; } .pb--20px { padding-bottom: 20px; } .pb--30px { padding-bottom: 30px; } .pb--40px { padding-bottom: 40px; } .pb--50px { padding-bottom: 50px; } .pb--60px { padding-bottom: 60px; } .pb--70px { padding-bottom: 70px; } .pb--80px { padding-bottom: 80px; } .pb--90px { padding-bottom: 90px; } .pb--100px { padding-bottom: 100px; } .pb--150px { padding-bottom: 150px; } .pb--200px { padding-bottom: 200px; } .pb--250px { padding-bottom: 250px; } .pb--300px { padding-bottom: 300px; } /* padding-left ------------------------------------------------------------------- */ .pl--0 { padding-left: 0; } /* em */ .pl--d25e { padding-left: 0.25em; } .pl--d50e { padding-left: 0.50em; } .pl--d75e { padding-left: 0.75em; } .pl--1e { padding-left: 1em; } .pl--2e { padding-left: 2em; } .pl--3e { padding-left: 3em; } .pl--4e { padding-left: 4em; } .pl--5e { padding-left: 5em; } .pl--6e { padding-left: 6em; } .pl--7e { padding-left: 7em; } .pl--8e { padding-left: 8em; } .pl--9e { padding-left: 9em; } .pl--10e { padding-left: 10em; } /* rem */ .pl--d25r { padding-left: 0.25rem; } .pl--d50r { padding-left: 0.50rem; } .pl--d75r { padding-left: 0.75rem; } .pl--1r { padding-left: 1rem; } .pl--2r { padding-left: 2rem; } .pl--3r { padding-left: 3rem; } .pl--4r { padding-left: 4rem; } .pl--5r { padding-left: 5rem; } .pl--6r { padding-left: 6rem; } .pl--7r { padding-left: 7rem; } .pl--8r { padding-left: 8rem; } .pl--9r { padding-left: 9rem; } .pl--10r { padding-left: 10rem; } /* % */ .pl--25p { padding-left: 25%; } .pl--50p { padding-left: 50%; } .pl--75p { padding-left: 75%; } .pl--10p { padding-left: 10%; } .pl--20p { padding-left: 20%; } .pl--30p { padding-left: 30%; } .pl--40p { padding-left: 40%; } .pl--60p { padding-left: 60%; } .pl--70p { padding-left: 70%; } .pl--80p { padding-left: 80%; } .pl--90p { padding-left: 90%; } .pl--100p { padding-left: 100%; } /* vw */ .pl--25vw { padding-left: 25vw; } .pl--50vw { padding-left: 50vw; } .pl--75vw { padding-left: 75vw; } .pl--10vw { padding-left: 10vw; } .pl--20vw { padding-left: 20vw; } .pl--30vw { padding-left: 30vw; } .pl--40vw { padding-left: 40vw; } .pl--60vw { padding-left: 60vw; } .pl--70vw { padding-left: 70vw; } .pl--80vw { padding-left: 80vw; } .pl--90vw { padding-left: 90vw; } .pl--100vw { padding-left: 100vw; } /* vh */ .pl--25vh { padding-left: 25vh; } .pl--50vh { padding-left: 50vh; } .pl--75vh { padding-left: 75vh; } .pl--10vh { padding-left: 10vh; } .pl--20vh { padding-left: 20vh; } .pl--30vh { padding-left: 30vh; } .pl--40vh { padding-left: 40vh; } .pl--60vh { padding-left: 60vh; } .pl--70vh { padding-left: 70vh; } .pl--80vh { padding-left: 80vh; } .pl--90vh { padding-left: 90vh; } .pl--100vh { padding-left: 100vh; } /* px */ .pl--1px { padding-left: 1px; } .pl--2px { padding-left: 2px; } .pl--3px { padding-left: 3px; } .pl--4px { padding-left: 4px; } .pl--5px { padding-left: 5px; } .pl--6px { padding-left: 6px; } .pl--7px { padding-left: 7px; } .pl--8px { padding-left: 8px; } .pl--9px { padding-left: 9px; } .pl--10px { padding-left: 10px; } .pl--20px { padding-left: 20px; } .pl--30px { padding-left: 30px; } .pl--40px { padding-left: 40px; } .pl--50px { padding-left: 50px; } .pl--60px { padding-left: 60px; } .pl--70px { padding-left: 70px; } .pl--80px { padding-left: 80px; } .pl--90px { padding-left: 90px; } .pl--100px { padding-left: 100px; } .pl--150px { padding-left: 150px; } .pl--200px { padding-left: 200px; } .pl--250px { padding-left: 250px; } .pl--300px { padding-left: 300px; } /* padding-top-bottom ------------------------------------------------------------------- */ .ptb--0 { padding-top: 0; padding-bottom: 0; } /* em */ .ptb--d25e { padding-top: 0.25em; padding-bottom: 0.25em; } .ptb--d50e { padding-top: 0.50em; padding-bottom: 0.50em; } .ptb--d75e { padding-top: 0.75em; padding-bottom: 0.75em; padding: 1rem 1rem; } .ptb--1e { padding-top: 1em; padding-bottom: 1em; } .ptb--2e { padding-top: 2em; padding-bottom: 2em; } .ptb--3e { padding-top: 3em; padding-bottom: 3em; } .ptb--4e { padding-top: 4em; padding-bottom: 4em; } .ptb--5e { padding-top: 5em; padding-bottom: 5em; } .ptb--6e { padding-top: 6em; padding-bottom: 6em; } .ptb--7e { padding-top: 7em; padding-bottom: 7em; } .ptb--8e { padding-top: 8em; padding-bottom: 8em; } .ptb--9e { padding-top: 9em; padding-bottom: 9em; } .ptb--10e { padding-top: 10em; padding-bottom: 10em; } /* rem */ .ptb--d25r { padding-top: 0.25rem; padding-bottom: 0.25rem; } .ptb--d50r { padding-top: 0.50rem; padding-bottom: 0.50rem; } .ptb--d75r { padding-top: 0.75rem; padding-bottom: 0.75rem; } .ptb--1r { padding-top: 1rem; padding-bottom: 1rem; } .ptb--2r { padding-top: 2rem; padding-bottom: 2rem; } .ptb--3r { padding-top: 3rem; padding-bottom: 3rem; } .ptb--4r { padding-top: 4rem; padding-bottom: 4rem; } .ptb--5r { padding-top: 5rem; padding-bottom: 5rem; } .ptb--6r { padding-top: 6rem; padding-bottom: 6rem; } .ptb--7r { padding-top: 7rem; padding-bottom: 7rem; } .ptb--8r { padding-top: 8rem; padding-bottom: 8rem; } .ptb--9r { padding-top: 9rem; padding-bottom: 9rem; } .ptb--10r { padding-top: 10rem; padding-bottom: 10rem; } /* % */ .ptb--25p { padding-top: 25%; padding-bottom: 25%; } .ptb--50p { padding-top: 50%; padding-bottom: 50%; } .ptb--75p { padding-top: 75%; padding-bottom: 75%; } .ptb--10p { padding-top: 10%; padding-bottom: 10%; } .ptb--20p { padding-top: 20%; padding-bottom: 20%; } .ptb--30p { padding-top: 30%; padding-bottom: 30%; } .ptb--40p { padding-top: 40%; padding-bottom: 40%; } .ptb--60p { padding-top: 60%; padding-bottom: 60%; } .ptb--70p { padding-top: 70%; padding-bottom: 70%; } .ptb--80p { padding-top: 80%; padding-bottom: 80%; } .ptb--90p { padding-top: 90%; padding-bottom: 90%; } .ptb--100p { padding-top: 100%; padding-bottom: 100%; } /* vw */ .ptb--25vw { padding-top: 25vw; padding-bottom: 25vw; } .ptb--50vw { padding-top: 50vw; padding-bottom: 50vw; } .ptb--75vw { padding-top: 75vw; padding-bottom: 75vw; } .ptb--10vw { padding-top: 10vw; padding-bottom: 10vw; } .ptb--20vw { padding-top: 20vw; padding-bottom: 20vw; } .ptb--30vw { padding-top: 30vw; padding-bottom: 30vw; } .ptb--40vw { padding-top: 40vw; padding-bottom: 40vw; } .ptb--60vw { padding-top: 60vw; padding-bottom: 60vw; } .ptb--70vw { padding-top: 70vw; padding-bottom: 70vw; m:1r1r ; } .ptb--80vw { padding-top: 80vw; padding-bottom: 80vw; } .ptb--90vw { padding-top: 90vw; padding-bottom: 90vw; } .ptb--100vw { padding-top: 100vw; padding-bottom: 100vw; } /* vh */ .ptb--25vh { padding-top: 25vh; padding-bottom: 25vh; } .ptb--50vh { padding-top: 50vh; padding-bottom: 50vh; } .ptb--75vh { padding-top: 75vh; padding-bottom: 75vh; } .ptb--10vh { padding-top: 10vh; padding-bottom: 10vh; } .ptb--20vh { padding-top: 20vh; padding-bottom: 20vh; } .ptb--30vh { padding-top: 30vh; padding-bottom: 30vh; } .ptb--40vh { padding-top: 40vh; padding-bottom: 40vh; } .ptb--60vh { padding-top: 60vh; padding-bottom: 60vh; } .ptb--70vh { padding-top: 70vh; padding-bottom: 70vh; } .ptb--80vh { padding-top: 80vh; padding-bottom: 80vh; } .ptb--90vh { padding-top: 90vh; padding-t: 90vh; } .ptb--100vh { padding-top: 100vh; padding-bottom: 100vh; } /* px */ .ptb--1px { padding-top: 1px; padding-bottom: 1px; } .ptb--2px { padding-top: 2px; padding-bottom: 2px; } .ptb--3px { padding-top: 3px; padding-bottom: 3px; } .ptb--4px { padding-top: 4px; padding-bottom: 4px; } .ptb--5px { padding-top: 5px; padding-bottom: 5px; } .ptb--6px { padding-top: 6px; padding-bottom: 6px; } .ptb--7px { padding-top: 7px; padding-bottom: 7px; } .ptb--8px { padding-top: 8px; padding-bottom: 8px; } .ptb--9px { padding-top: 9px; padding-bottom: 9px; } .ptb--10px { padding-top: 10px; padding-bottom: 10px; } .ptb--20px { padding-top: 20px; padding-bottom: 20px; } .ptb--30px { padding-top: 30px; padding-bottom: 30px; } .ptb--40px { padding-top: 40px; padding-bottom: 40px; } .ptb--50px { padding-top: 50px; padding-bottom: 50px; } .ptb--60px { padding-top: 60px; padding-bottom: 60px; } .ptb--70px { padding-top: 70px; padding-bottom: 70px; } .ptb--80px { padding-top: 80px; padding-bottom: 80px; } .ptb--90px { padding-top: 90px; padding-bottom: 90px; } .ptb--100px { padding-top: 100px; padding-bottom: 100px; } .ptb--150px { padding-top: 150px; padding-bottom: 150px; } .ptb--200px { padding-top: 200px; padding-bottom: 200px; } .ptb--250px { padding-top: 250px; padding-bottom: 250px; } .ptb--300px { padding-top: 300px; padding-bottom: 300px; } /* padding-right-left ------------------------------------------------------------------- */ .prl--0 { padding-right: 0; padding-left: 0; } /* em */ .prl--d25e { padding-right: 0.25em; padding-left: 0.25em; } .prl--d50e { padding-right: 0.50em; padding-left: 0.50em; } .prl--d75e { padding-right: 0.75em; padding-left: 0.75em; padding: 1rem 1rem; } .prl--1e { padding-right: 1em; padding-left: 1em; } .prl--2e { padding-right: 2em; padding-left: 2em; } .prl--3e { padding-right: 3em; padding-left: 3em; } .prl--4e { padding-right: 4em; padding-left: 4em; } .prl--5e { padding-right: 5em; padding-left: 5em; } .prl--6e { padding-right: 6em; padding-left: 6em; } .prl--7e { padding-right: 7em; padding-left: 7em; } .prl--8e { padding-right: 8em; padding-left: 8em; } .prl--9e { padding-right: 9em; padding-left: 9em; } .prl--10e { padding-right: 10em; padding-left: 10em; } /* rem */ .prl--d25r { padding-right: 0.25rem; padding-left: 0.25rem; } .prl--d50r { padding-right: 0.50rem; padding-left: 0.50rem; } .prl--d75r { padding-right: 0.75rem; padding-left: 0.75rem; } .prl--1r { padding-right: 1rem; padding-left: 1rem; } .prl--2r { padding-right: 2rem; padding-left: 2rem; } .prl--3r { padding-right: 3rem; padding-left: 3rem; } .prl--4r { padding-right: 4rem; padding-left: 4rem; } .prl--5r { padding-right: 5rem; padding-left: 5rem; } .prl--6r { padding-right: 6rem; padding-left: 6rem; } .prl--7r { padding-right: 7rem; padding-left: 7rem; } .prl--8r { padding-right: 8rem; padding-left: 8rem; } .prl--9r { padding-right: 9rem; padding-left: 9rem; } .prl--10r { padding-right: 10rem; padding-left: 10rem; } /* % */ .prl--25p { padding-right: 25%; padding-left: 25%; } .prl--50p { padding-right: 50%; padding-left: 50%; } .prl--75p { padding-right: 75%; padding-left: 75%; } .prl--10p { padding-right: 10%; padding-left: 10%; } .prl--20p { padding-right: 20%; padding-left: 20%; } .prl--30p { padding-right: 30%; padding-left: 30%; } .prl--40p { padding-right: 40%; padding-left: 40%; } .prl--60p { padding-right: 60%; padding-left: 60%; } .prl--70p { padding-right: 70%; padding-left: 70%; } .prl--80p { padding-right: 80%; padding-left: 80%; } .prl--90p { padding-right: 90%; padding-left: 90%; } .prl--100p { padding-right: 100%; padding-left: 100%; } /* vw */ .prl--25vw { padding-right: 25vw; padding-left: 25vw; } .prl--50vw { padding-right: 50vw; padding-left: 50vw; } .prl--75vw { padding-right: 75vw; padding-left: 75vw; } .prl--10vw { padding-right: 10vw; padding-left: 10vw; } .prl--20vw { padding-right: 20vw; padding-left: 20vw; } .prl--30vw { padding-right: 30vw; padding-left: 30vw; } .prl--40vw { padding-right: 40vw; padding-left: 40vw; } .prl--60vw { padding-right: 60vw; padding-left: 60vw; } .prl--70vw { padding-right: 70vw; padding-left: 70vw; m:1r1r ; } .prl--80vw { padding-right: 80vw; padding-left: 80vw; } .prl--90vw { padding-right: 90vw; padding-left: 90vw; } .prl--100vw { padding-right: 100vw; padding-left: 100vw; } /* vh */ .prl--25vh { padding-right: 25vh; padding-left: 25vh; } .prl--50vh { padding-right: 50vh; padding-left: 50vh; } .prl--75vh { padding-right: 75vh; padding-left: 75vh; } .prl--10vh { padding-right: 10vh; padding-left: 10vh; } .prl--20vh { padding-right: 20vh; padding-left: 20vh; } .prl--30vh { padding-right: 30vh; padding-left: 30vh; } .prl--40vh { padding-right: 40vh; padding-left: 40vh; } .prl--60vh { padding-right: 60vh; padding-left: 60vh; } .prl--70vh { padding-right: 70vh; padding-left: 70vh; } .prl--80vh { padding-right: 80vh; padding-left: 80vh; } .prl--90vh { padding-right: 90vh; padding-t: 90vh; } .prl--100vh { padding-right: 100vh; padding-left: 100vh; } /* px */ .prl--1px { padding-right: 1px; padding-left: 1px; } .prl--2px { padding-right: 2px; padding-left: 2px; } .prl--3px { padding-right: 3px; padding-left: 3px; } .prl--4px { padding-right: 4px; padding-left: 4px; } .prl--5px { padding-right: 5px; padding-left: 5px; } .prl--6px { padding-right: 6px; padding-left: 6px; } .prl--7px { padding-right: 7px; padding-left: 7px; } .prl--8px { padding-right: 8px; padding-left: 8px; } .prl--9px { padding-right: 9px; padding-left: 9px; } .prl--10px { padding-right: 10px; padding-left: 10px; } .prl--20px { padding-right: 20px; padding-left: 20px; } .prl--30px { padding-right: 30px; padding-left: 30px; } .prl--40px { padding-right: 40px; padding-left: 40px; } .prl--50px { padding-right: 50px; padding-left: 50px; } .prl--60px { padding-right: 60px; padding-left: 60px; } .prl--70px { padding-right: 70px; padding-left: 70px; } .prl--80px { padding-right: 80px; padding-left: 80px; } .prl--90px { padding-right: 90px; padding-left: 90px; } .prl--100px { padding-right: 100px; padding-left: 100px; } .prl--150px { padding-right: 150px; padding-left: 150px; } .prl--200px { padding-right: 200px; padding-left: 200px; } .prl--250px { padding-right: 250px; padding-left: 250px; } .prl--300px { padding-right: 300px; padding-left: 300px; } /*ƒ ––––––––––––––––––––––––––––––––––––––––––––––––––––––– padding */ /* top, right, bottom, left ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* top ------------------------------------------------------------------- */ .t--a, .t--auto { top: auto; } .t--0 { top: 0; } /* em */ .t--d25e { top: 0.25em; } .t--d50e { top: 0.50em; } .t--d75e { top: 0.75em; } .t--1e { top: 1em; } .t--2e { top: 2em; } .t--3e { top: 3em; } .t--4e { top: 4em; } .t--5e { top: 5em; } .t--6e { top: 6em; } .t--7e { top: 7em; } .t--8e { top: 8em; } .t--9e { top: 9em; } .t--10e { top: 10em; } /* rem */ .t--d25r { top: 0.25rem; } .t--d50r { top: 0.50rem; } .t--d75r { top: 0.75rem; } .t--1r { top: 1rem; } .t--2r { top: 2rem; } .t--3r { top: 3rem; } .t--4r { top: 4rem; } .t--5r { top: 5rem; } .t--6r { top: 6rem; } .t--7r { top: 7rem; } .t--8r { top: 8rem; } .t--9r { top: 9rem; } .t--10r { top: 10rem; } /* % */ .t--25p { top: 25%; } .t--50p { top: 50%; } .t--75p { top: 75%; } .t--10p { top: 10%; } .t--20p { top: 20%; } .t--30p { top: 30%; } .t--40p { top: 40%; } .t--60p { top: 60%; } .t--70p { top: 70%; } .t--80p { top: 80%; } .t--90p { top: 90%; } .t--100p { top: 100%; } /* vw */ .t--25vw { top: 25vw; } .t--50vw { top: 50vw; } .t--75vw { top: 75vw; } .t--10vw { top: 10vw; } .t--20vw { top: 20vw; } .t--30vw { top: 30vw; } .t--40vw { top: 40vw; } .t--60vw { top: 60vw; } .t--70vw { top: 70vw; } .t--80vw { top: 80vw; } .t--90vw { top: 90vw; } .t--100vw { top: 100vw; } /* vh */ .t--25vh { top: 25vh; } .t--50vh { top: 50vh; } .t--75vh { top: 75vh; } .t--10vh { top: 10vh; } .t--20vh { top: 20vh; } .t--30vh { top: 30vh; } .t--40vh { top: 40vh; } .t--60vh { top: 60vh; } .t--70vh { top: 70vh; } .t--80vh { top: 80vh; } .t--90vh { top: 90vh; } .t--100vh { top: 100vh; } /* px */ .t--1px { top: 1px; } .t--2px { top: 2px; } .t--3px { top: 3px; } .t--4px { top: 4px; } .t--5px { top: 5px; } .t--6px { top: 6px; } .t--7px { top: 7px; } .t--8px { top: 8px; } .t--9px { top: 9px; } .t--10px { top: 10px; } .t--20px { top: 20px; } .t--30px { top: 30px; } .t--40px { top: 40px; } .t--50px { top: 50px; } .t--60px { top: 60px; } .t--70px { top: 70px; } .t--80px { top: 80px; } .t--90px { top: 90px; } .t--100px { top: 100px; } .t--150px { top: 150px; } .t--200px { top: 200px; } .t--250px { top: 250px; } .t--300px { top: 300px; } /* right ------------------------------------------------------------------- */ .r--a, .r--auto { right: auto; } .r--0 { right: 0; } /* em */ .r--d25e { right: 0.25em; } .r--d50e { right: 0.50em; } .r--d75e { right: 0.75em; } .r--1e { right: 1em; } .r--2e { right: 2em; } .r--3e { right: 3em; } .r--4e { right: 4em; } .r--5e { right: 5em; } .r--6e { right: 6em; } .r--7e { right: 7em; } .r--8e { right: 8em; } .r--9e { right: 9em; } .r--10e { right: 10em; } /* rem */ .r--d25r { right: 0.25rem; } .r--d50r { right: 0.50rem; } .r--d75r { right: 0.75rem; } .r--1r { right: 1rem; } .r--2r { right: 2rem; } .r--3r { right: 3rem; } .r--4r { right: 4rem; } .r--5r { right: 5rem; } .r--6r { right: 6rem; } .r--7r { right: 7rem; } .r--8r { right: 8rem; } .r--9r { right: 9rem; } .r--10r { right: 10rem; } /* % */ .r--25p { right: 25%; } .r--50p { right: 50%; } .r--75p { right: 75%; } .r--10p { right: 10%; } .r--20p { right: 20%; } .r--30p { right: 30%; } .r--40p { right: 40%; } .r--60p { right: 60%; } .r--70p { right: 70%; } .r--80p { right: 80%; } .r--90p { right: 90%; } .r--100p { right: 100%; } /* vw */ .r--25vw { right: 25vw; } .r--50vw { right: 50vw; } .r--75vw { right: 75vw; } .r--10vw { right: 10vw; } .r--20vw { right: 20vw; } .r--30vw { right: 30vw; } .r--40vw { right: 40vw; } .r--60vw { right: 60vw; } .r--70vw { right: 70vw; } .r--80vw { right: 80vw; } .r--90vw { right: 90vw; } .r--100vw { right: 100vw; } /* vh */ .r--25vh { right: 25vh; } .r--50vh { right: 50vh; } .r--75vh { right: 75vh; } .r--10vh { right: 10vh; } .r--20vh { right: 20vh; } .r--30vh { right: 30vh; } .r--40vh { right: 40vh; } .r--60vh { right: 60vh; } .r--70vh { right: 70vh; } .r--80vh { right: 80vh; } .r--90vh { right: 90vh; } .r--100vh { right: 100vh; } /* px */ .r--1px { right: 1px; } .r--2px { right: 2px; } .r--3px { right: 3px; } .r--4px { right: 4px; } .r--5px { right: 5px; } .r--6px { right: 6px; } .r--7px { right: 7px; } .r--8px { right: 8px; } .r--9px { right: 9px; } .r--10px { right: 10px; } .r--20px { right: 20px; } .r--30px { right: 30px; } .r--40px { right: 40px; } .r--50px { right: 50px; } .r--60px { right: 60px; } .r--70px { right: 70px; } .r--80px { right: 80px; } .r--90px { right: 90px; } .r--100px { right: 100px; } .r--150px { right: 150px; } .r--200px { right: 200px; } .r--250px { right: 250px; } .r--300px { right: 300px; } /* bottom ------------------------------------------------------------------- */ .b--a, .b--auto { bottom: auto; } .b--0 { bottom: 0; } /* em */ .b--d25e { bottom: 0.25em; } .b--d50e { bottom: 0.50em; } .b--d75e { bottom: 0.75em; } .b--1e { bottom: 1em; } .b--2e { bottom: 2em; } .b--3e { bottom: 3em; } .b--4e { bottom: 4em; } .b--5e { bottom: 5em; } .b--6e { bottom: 6em; } .b--7e { bottom: 7em; } .b--8e { bottom: 8em; } .b--9e { bottom: 9em; } .b--10e { bottom: 10em; } /* rem */ .b--d25r { bottom: 0.25rem; } .b--d50r { bottom: 0.50rem; } .b--d75r { bottom: 0.75rem; } .b--1r { bottom: 1rem; } .b--2r { bottom: 2rem; } .b--3r { bottom: 3rem; } .b--4r { bottom: 4rem; } .b--5r { bottom: 5rem; } .b--6r { bottom: 6rem; } .b--7r { bottom: 7rem; } .b--8r { bottom: 8rem; } .b--9r { bottom: 9rem; } .b--10r { bottom: 10rem; } /* % */ .b--25p { bottom: 25%; } .b--50p { bottom: 50%; } .b--75p { bottom: 75%; } .b--10p { bottom: 10%; } .b--20p { bottom: 20%; } .b--30p { bottom: 30%; } .b--40p { bottom: 40%; } .b--60p { bottom: 60%; } .b--70p { bottom: 70%; } .b--80p { bottom: 80%; } .b--90p { bottom: 90%; } .b--100p { bottom: 100%; } /* vw */ .b--25vw { bottom: 25vw; } .b--50vw { bottom: 50vw; } .b--75vw { bottom: 75vw; } .b--10vw { bottom: 10vw; } .b--20vw { bottom: 20vw; } .b--30vw { bottom: 30vw; } .b--40vw { bottom: 40vw; } .b--60vw { bottom: 60vw; } .b--70vw { bottom: 70vw; } .b--80vw { bottom: 80vw; } .b--90vw { bottom: 90vw; } .b--100vw { bottom: 100vw; } /* vh */ .b--25vh { bottom: 25vh; } .b--50vh { bottom: 50vh; } .b--75vh { bottom: 75vh; } .b--10vh { bottom: 10vh; } .b--20vh { bottom: 20vh; } .b--30vh { bottom: 30vh; } .b--40vh { bottom: 40vh; } .b--60vh { bottom: 60vh; } .b--70vh { bottom: 70vh; } .b--80vh { bottom: 80vh; } .b--90vh { bottom: 90vh; } .b--100vh { bottom: 100vh; } /* px */ .b--1px { bottom: 1px; } .b--2px { bottom: 2px; } .b--3px { bottom: 3px; } .b--4px { bottom: 4px; } .b--5px { bottom: 5px; } .b--6px { bottom: 6px; } .b--7px { bottom: 7px; } .b--8px { bottom: 8px; } .b--9px { bottom: 9px; } .b--10px { bottom: 10px; } .b--20px { bottom: 20px; } .b--30px { bottom: 30px; } .b--40px { bottom: 40px; } .b--50px { bottom: 50px; } .b--60px { bottom: 60px; } .b--70px { bottom: 70px; } .b--80px { bottom: 80px; } .b--90px { bottom: 90px; } .b--100px { bottom: 100px; } .b--150px { bottom: 150px; } .b--200px { bottom: 200px; } .b--250px { bottom: 250px; } .b--300px { bottom: 300px; } /* left ------------------------------------------------------------------- */ .l--a, .l--auto { left: auto; } .l--0 { left: 0; } /* em */ .l--d25e { left: 0.25em; } .l--d50e { left: 0.50em; } .l--d75e { left: 0.75em; } .l--1e { left: 1em; } .l--2e { left: 2em; } .l--3e { left: 3em; } .l--4e { left: 4em; } .l--5e { left: 5em; } .l--6e { left: 6em; } .l--7e { left: 7em; } .l--8e { left: 8em; } .l--9e { left: 9em; } .l--10e { left: 10em; } /* rem */ .l--d25r { left: 0.25rem; } .l--d50r { left: 0.50rem; } .l--d75r { left: 0.75rem; } .l--1r { left: 1rem; } .l--2r { left: 2rem; } .l--3r { left: 3rem; } .l--4r { left: 4rem; } .l--5r { left: 5rem; } .l--6r { left: 6rem; } .l--7r { left: 7rem; } .l--8r { left: 8rem; } .l--9r { left: 9rem; } .l--10r { left: 10rem; } /* % */ .l--25p { left: 25%; } .l--50p { left: 50%; } .l--75p { left: 75%; } .l--10p { left: 10%; } .l--20p { left: 20%; } .l--30p { left: 30%; } .l--40p { left: 40%; } .l--60p { left: 60%; } .l--70p { left: 70%; } .l--80p { left: 80%; } .l--90p { left: 90%; } .l--100p { left: 100%; } /* vw */ .l--25vw { left: 25vw; } .l--50vw { left: 50vw; } .l--75vw { left: 75vw; } .l--10vw { left: 10vw; } .l--20vw { left: 20vw; } .l--30vw { left: 30vw; } .l--40vw { left: 40vw; } .l--60vw { left: 60vw; } .l--70vw { left: 70vw; } .l--80vw { left: 80vw; } .l--90vw { left: 90vw; } .l--100vw { left: 100vw; } /* vh */ .l--25vh { left: 25vh; } .l--50vh { left: 50vh; } .l--75vh { left: 75vh; } .l--10vh { left: 10vh; } .l--20vh { left: 20vh; } .l--30vh { left: 30vh; } .l--40vh { left: 40vh; } .l--60vh { left: 60vh; } .l--70vh { left: 70vh; } .l--80vh { left: 80vh; } .l--90vh { left: 90vh; } .l--100vh { left: 100vh; } /* px */ .l--1px { left: 1px; } .l--2px { left: 2px; } .l--3px { left: 3px; } .l--4px { left: 4px; } .l--5px { left: 5px; } .l--6px { left: 6px; } .l--7px { left: 7px; } .l--8px { left: 8px; } .l--9px { left: 9px; } .l--10px { left: 10px; } .l--20px { left: 20px; } .l--30px { left: 30px; } .l--40px { left: 40px; } .l--50px { left: 50px; } .l--60px { left: 60px; } .l--70px { left: 70px; } .l--80px { left: 80px; } .l--90px { left: 90px; } .l--100px { left: 100px; } .l--150px { left: 150px; } .l--200px { left: 200px; } .l--250px { left: 250px; } .l--300px { left: 300px; } /*ƒ –––––––––––––––––––––––––––––––––––––– top, right, bottom, left */ /* top, right, bottom, left ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* width, height ------------------------------------------------------------------- */ .w--a, .w--auto { width: auto; } .w--0 { width: 0; } /* em */ .w--d25e { width: 0.25em; } .w--d50e { width: 0.50em; } .w--d75e { width: 0.75em; } .w--1e { width: 1em; } .w--2e { width: 2em; } .w--3e { width: 3em; } .w--4e { width: 4em; } .w--5e { width: 5em; } .w--6e { width: 6em; } .w--7e { width: 7em; } .w--8e { width: 8em; } .w--9e { width: 9em; } .w--10e { width: 10em; } /* rem */ .w--d25r { width: 0.25rem; } .w--d50r { width: 0.50rem; } .w--d75r { width: 0.75rem; } .w--1r { width: 1rem; } .w--2r { width: 2rem; } .w--3r { width: 3rem; } .w--4r { width: 4rem; } .w--5r { width: 5rem; } .w--6r { width: 6rem; } .w--7r { width: 7rem; } .w--8r { width: 8rem; } .w--9r { width: 9rem; } .w--10r { width: 10rem; } /* % */ .w--25p { width: 25%; } .w--50p { width: 50%; } .w--75p { width: 75%; } .w--10p { width: 10%; } .w--20p { width: 20%; } .w--30p { width: 30%; } .w--40p { width: 40%; } .w--60p { width: 60%; } .w--70p { width: 70%; } .w--80p { width: 80%; } .w--90p { width: 90%; } .w--100p { width: 100%; } /* vw */ .w--25vw { width: 25vw; } .w--50vw { width: 50vw; } .w--75vw { width: 75vw; } .w--10vw { width: 10vw; } .w--20vw { width: 20vw; } .w--30vw { width: 30vw; } .w--40vw { width: 40vw; } .w--60vw { width: 60vw; } .w--70vw { width: 70vw; } .w--80vw { width: 80vw; } .w--90vw { width: 90vw; } .w--100vw { width: 100vw; } /* vh */ .w--25vh { width: 25vh; } .w--50vh { width: 50vh; } .w--75vh { width: 75vh; } .w--10vh { width: 10vh; } .w--20vh { width: 20vh; } .w--30vh { width: 30vh; } .w--40vh { width: 40vh; } .w--60vh { width: 60vh; } .w--70vh { width: 70vh; } .w--80vh { width: 80vh; } .w--90vh { width: 90vh; } .w--100vh { width: 100vh; } /* px */ .w--1px { width: 1px; } .w--2px { width: 2px; } .w--3px { width: 3px; } .w--4px { width: 4px; } .w--5px { width: 5px; } .w--6px { width: 6px; } .w--7px { width: 7px; } .w--8px { width: 8px; } .w--9px { width: 9px; } .w--10px { width: 10px; } .w--20px { width: 20px; } .w--30px { width: 30px; } .w--40px { width: 40px; } .w--50px { width: 50px; } .w--60px { width: 60px; } .w--70px { width: 70px; } .w--80px { width: 80px; } .w--90px { width: 90px; } .w--100px { width: 100px; } .w--150px { width: 150px; } .w--200px { width: 200px; } .w--250px { width: 250px; } .w--300px { width: 300px; } /* height ------------------------------------------------------------------- */ .h--a, .h--auto { height: auto; } .h--0 { height: 0; } /* em */ .h--d25e { height: 0.25em; } .h--d50e { height: 0.50em; } .h--d75e { height: 0.75em; } .h--1e { height: 1em; } .h--2e { height: 2em; } .h--3e { height: 3em; } .h--4e { height: 4em; } .h--5e { height: 5em; } .h--6e { height: 6em; } .h--7e { height: 7em; } .h--8e { height: 8em; } .h--9e { height: 9em; } .h--10e { height: 10em; } /* rem */ .h--d25r { height: 0.25rem; } .h--d50r { height: 0.50rem; } .h--d75r { height: 0.75rem; } .h--1r { height: 1rem; } .h--2r { height: 2rem; } .h--3r { height: 3rem; } .h--4r { height: 4rem; } .h--5r { height: 5rem; } .h--6r { height: 6rem; } .h--7r { height: 7rem; } .h--8r { height: 8rem; } .h--9r { height: 9rem; } .h--10r { height: 10rem; } /* % */ .h--25p { height: 25%; } .h--50p { height: 50%; } .h--75p { height: 75%; } .h--10p { height: 10%; } .h--20p { height: 20%; } .h--30p { height: 30%; } .h--40p { height: 40%; } .h--60p { height: 60%; } .h--70p { height: 70%; } .h--80p { height: 80%; } .h--90p { height: 90%; } .h--100p { height: 100%; } /* vw */ .h--25vw { height: 25vw; } .h--50vw { height: 50vw; } .h--75vw { height: 75vw; } .h--10vw { height: 10vw; } .h--20vw { height: 20vw; } .h--30vw { height: 30vw; } .h--40vw { height: 40vw; } .h--60vw { height: 60vw; } .h--70vw { height: 70vw; } .h--80vw { height: 80vw; } .h--90vw { height: 90vw; } .h--100vw { height: 100vw; } /* vh */ .h--25vh { height: 25vh; } .h--50vh { height: 50vh; } .h--75vh { height: 75vh; } .h--10vh { height: 10vh; } .h--20vh { height: 20vh; } .h--30vh { height: 30vh; } .h--40vh { height: 40vh; } .h--60vh { height: 60vh; } .h--70vh { height: 70vh; } .h--80vh { height: 80vh; } .h--90vh { height: 90vh; } .h--100vh { height: 100vh; } /* px */ .h--1px { height: 1px; } .h--2px { height: 2px; } .h--3px { height: 3px; } .h--4px { height: 4px; } .h--5px { height: 5px; } .h--6px { height: 6px; } .h--7px { height: 7px; } .h--8px { height: 8px; } .h--9px { height: 9px; } .h--10px { height: 10px; } .h--20px { height: 20px; } .h--30px { height: 30px; } .h--40px { height: 40px; } .h--50px { height: 50px; } .h--60px { height: 60px; } .h--70px { height: 70px; } .h--80px { height: 80px; } .h--90px { height: 90px; } .h--100px { height: 100px; } .h--150px { height: 150px; } .h--200px { height: 200px; } .h--250px { height: 250px; } .h--300px { height: 300px; } /*ƒ ––––––––––––––––––––––––––––––––––––––––––––––––– width, height */ /* text-indent ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ .ti--0 { text-indent: 0; } .ti--n { text-indent: -9999px; } /* em */ .ti--d25e { text-indent: 0.25em; } .ti--d50e { text-indent: 0.50em; } .ti--d75e { text-indent: 0.75em; } .ti--1e { text-indent: 1em; } .ti--2e { text-indent: 2em; } .ti--3e { text-indent: 3em; } .ti--4e { text-indent: 4em; } .ti--5e { text-indent: 5em; } .ti--6e { text-indent: 6em; } .ti--7e { text-indent: 7em; } .ti--8e { text-indent: 8em; } .ti--9e { text-indent: 9em; } .ti--10e { text-indent: 10em; } .ti--nd25e { text-indent: -0.25em; } .ti--nd50e { text-indent: -0.50em; } .ti--nd75e { text-indent: -0.75em; } .ti--n1e { text-indent: -1em; } .ti--n2e { text-indent: -2em; } .ti--n3e { text-indent: -3em; } .ti--n4e { text-indent: -4em; } .ti--n5e { text-indent: -5em; } .ti--n6e { text-indent: -6em; } .ti--n7e { text-indent: -7em; } .ti--n8e { text-indent: -8em; } .ti--n9e { text-indent: -9em; } .ti--n10e { text-indent: -10em; } /*ƒ ––––––––––––––––––––––––––––––––––––––––––––––––––– text-indent */ /* word-spacing ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ .wos--0 { word-spacing: 0; } .wos--n { word-spacing: -9999px; } /* em */ .wos--d25e { word-spacing: 0.25em; } .wos--d50e { word-spacing: 0.50em; } .wos--d75e { word-spacing: 0.75em; } .wos--1e { word-spacing: 1em; } .wos--2e { word-spacing: 2em; } .wos--3e { word-spacing: 3em; } .wos--4e { word-spacing: 4em; } .wos--5e { word-spacing: 5em; } .wos--6e { word-spacing: 6em; } .wos--7e { word-spacing: 7em; } .wos--8e { word-spacing: 8em; } .wos--9e { word-spacing: 9em; } .wos--10e { word-spacing: 10em; } .wos--nd25e { word-spacing: -0.25em; } .wos--nd50e { word-spacing: -0.50em; } .wos--nd75e { word-spacing: -0.75em; } .wos--n1e { word-spacing: -1em; } .wos--n2e { word-spacing: -2em; } .wos--n3e { word-spacing: -3em; } .wos--n4e { word-spacing: -4em; } .wos--n5e { word-spacing: -5em; } .wos--n6e { word-spacing: -6em; } .wos--n7e { word-spacing: -7em; } .wos--n8e { word-spacing: -8em; } .wos--n9e { word-spacing: -9em; } .wos--n10e { word-spacing: -10em; } /*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––– word-spacing */ /* oppacity ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ .op--0 { opacity: 0; } .op--d1 { opacity: 0.1; } .op-d2 { opacity: 0.2; } .op--d3 { opacity: 0.3; } .op--d4 { opacity: 0.4; } .op--d5 { opacity: 0.5; } .op--d6 { opacity: 0.6; } .op--d7 { opacity: 0.7; } .op--d8 { opacity: 0.8; } .op--d9 { opacity: 0.9; } .op--1 { opacity: 1; } /*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––––––– oppacity */ /* border-width ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* px */ .bdw--1px { border-width: 1px; } .bdw--2px { border-width: 2px; } .bdw--3px { border-width: 3px; } .bdw--4px { border-width: 4px; } .bdw--5px { border-width: 5px; } .bdw--6px { border-width: 6px; } .bdw--7px { border-width: 7px; } .bdw--8px { border-width: 8px; } .bdw--9px { border-width: 9px; } .bdw--10px { border-width: 10px; } .bdw--20px { border-width: 20px; } .bdw--30px { border-width: 30px; } .bdw--40px { border-width: 40px; } .bdw--50px { border-width: 50px; } .bdw--60px { border-width: 60px; } .bdw--70px { border-width: 70px; } .bdw--80px { border-width: 80px; } .bdw--90px { border-width: 90px; } .bdw--100px { border-width: 100px; } .bdw--150px { border-width: 150px; } .bdw--200px { border-width: 200px; } .bdw--250px { border-width: 250px; } .bdw--300px { border-width: 300px; } .bdtw--1px { border-top-width: 1px; } /* border-top-width ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* px */ .bdtw--1px { border-top-width: 1px; } .bdtw--2px { border-top-width: 2px; } .bdtw--3px { border-top-width: 3px; } .bdtw--4px { border-top-width: 4px; } .bdtw--5px { border-top-width: 5px; } .bdtw--6px { border-top-width: 6px; } .bdtw--7px { border-top-width: 7px; } .bdtw--8px { border-top-width: 8px; } .bdtw--9px { border-top-width: 9px; } .bdtw--10px { border-top-width: 10px; } .bdtw--20px { border-top-width: 20px; } .bdtw--30px { border-top-width: 30px; } .bdtw--40px { border-top-width: 40px; } .bdtw--50px { border-top-width: 50px; } .bdtw--60px { border-top-width: 60px; } .bdtw--70px { border-top-width: 70px; } .bdtw--80px { border-top-width: 80px; } .bdtw--90px { border-top-width: 90px; } .bdtw--100px { border-top-width: 100px; } .bdtw--150px { border-top-width: 150px; } .bdtw--200px { border-top-width: 200px; } .bdtw--250px { border-top-width: 250px; } .bdtw--300px { border-top-width: 300px; } /* border-right-width ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* px */ .bdrw--1px { border-right-width: 1px; } .bdrw--2px { border-right-width: 2px; } .bdrw--3px { border-right-width: 3px; } .bdrw--4px { border-right-width: 4px; } .bdrw--5px { border-right-width: 5px; } .bdrw--6px { border-right-width: 6px; } .bdrw--7px { border-right-width: 7px; } .bdrw--8px { border-right-width: 8px; } .bdrw--9px { border-right-width: 9px; } .bdrw--10px { border-right-width: 10px; } .bdrw--20px { border-right-width: 20px; } .bdrw--30px { border-right-width: 30px; } .bdrw--40px { border-right-width: 40px; } .bdrw--50px { border-right-width: 50px; } .bdrw--60px { border-right-width: 60px; } .bdrw--70px { border-right-width: 70px; } .bdrw--80px { border-right-width: 80px; } .bdrw--90px { border-right-width: 90px; } .bdrw--100px { border-right-width: 100px; } .bdrw--150px { border-right-width: 150px; } .bdrw--200px { border-right-width: 200px; } .bdrw--250px { border-right-width: 250px; } .bdrw--300px { border-right-width: 300px; } /* border-bottom-width ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* px */ .bdbw--1px { border-bottom-width: 1px; } .bdbw--2px { border-bottom-width: 2px; } .bdbw--3px { border-bottom-width: 3px; } .bdbw--4px { border-bottom-width: 4px; } .bdbw--5px { border-bottom-width: 5px; } .bdbw--6px { border-bottom-width: 6px; } .bdbw--7px { border-bottom-width: 7px; } .bdbw--8px { border-bottom-width: 8px; } .bdbw--9px { border-bottom-width: 9px; } .bdbw--10px { border-bottom-width: 10px; } .bdbw--20px { border-bottom-width: 20px; } .bdbw--30px { border-bottom-width: 30px; } .bdbw--40px { border-bottom-width: 40px; } .bdbw--50px { border-bottom-width: 50px; } .bdbw--60px { border-bottom-width: 60px; } .bdbw--70px { border-bottom-width: 70px; } .bdbw--80px { border-bottom-width: 80px; } .bdbw--90px { border-bottom-width: 90px; } .bdbw--100px { border-bottom-width: 100px; } .bdbw--150px { border-bottom-width: 150px; } .bdbw--200px { border-bottom-width: 200px; } .bdbw--250px { border-bottom-width: 250px; } .bdbw--300px { border-bottom-width: 300px; } /* border-left-width ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* px */ .bdlw--1px { border-left-width: 1px; } .bdlw--2px { border-left-width: 2px; } .bdlw--3px { border-left-width: 3px; } .bdlw--4px { border-left-width: 4px; } .bdlw--5px { border-left-width: 5px; } .bdlw--6px { border-left-width: 6px; } .bdlw--7px { border-left-width: 7px; } .bdlw--8px { border-left-width: 8px; } .bdlw--9px { border-left-width: 9px; } .bdlw--10px { border-left-width: 10px; } .bdlw--20px { border-left-width: 20px; } .bdlw--30px { border-left-width: 30px; } .bdlw--40px { border-left-width: 40px; } .bdlw--50px { border-left-width: 50px; } .bdlw--60px { border-left-width: 60px; } .bdlw--70px { border-left-width: 70px; } .bdlw--80px { border-left-width: 80px; } .bdlw--90px { border-left-width: 90px; } .bdlw--100px { border-left-width: 100px; } .bdlw--150px { border-left-width: 150px; } .bdlw--200px { border-left-width: 200px; } .bdlw--250px { border-left-width: 250px; } .bdlw--300px { border-left-width: 300px; } /*ƒ –––––––––––––––––––––––––––––––––––––––– primer-emmet-parameter */
--
(double-hiphen)にしているのは、一応競合防止と、
(※例えば『Bootstrap』のm-0
もmargin: 0;
で、
『Emmet』なら競合しても大きく問題出ないような気がしますが)自分の場合は若干コードをわかりやすくするために、
element .class-property
(※種類・属性。主に .(dot) の代わり) と、
element .class--value
(※値。主に : (colon) 、= (equal) の代わり)で分類しようとしているのが理由です。以上です。
- 投稿日:2020-11-24T20:38:48+09:00
WEBサイトで「乗算」を再現?IE非対応でいいならCSSできるよ
どうも7noteです。忌々しい乗算に悩まされない日が近づいています。
WEBデザインで一番困るといっても過言ではない「乗算」。
現状全てのブラウザに対応するための一般的な方法は存在しません。そのためコーダーは透明度や色合いなどで微調整するしかなかったのですが、
実はIEを無視すれば乗算に対応することができます!このように、薄い背景であれば白背景付きのロゴ画像でも色付きの場所になじませて配置することが可能なんです。
ソース
index.html<div class="bg"> <img src="logo.png"> <img src="logo.png" class="mbm"> </div>style.css.bg { background: #fdd; padding: 10px; } .bg .mbm { mix-blend-mode: multiply; /* 「乗算」する */ }解説
本日の主役「
mix-blend-mode: multiply;
」です。
何度も言いますがmix-blend-mode
はIEに非対応です。https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode#Browser_compatibility
ですがそれさえ無視すれば、乗算にしたい要素に
mix-blend-mode: multiply;
を記述するだけなので非常に簡単に実装することができます。
mix-blend-mode
は他にもさまざまな加工ができるので使ってみてください。あぁ。IEさえいなければ・・・
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-11-24T20:08:37+09:00
Font Awesome 5以降のバージョンでWebフォントを使用する方法
概要
Font Awesomeを
<i class="fa fa-hoge"><i>
のようなクラス指定以外での方法で使用する方法について調べたので、
備忘録としてこちらにまとめます。クラス指定以外での使用方法では、CSS3(またはSCSS)の擬似要素
::after
またはbefore
を用います。擬似要素を用いてFont Awesomeを使う
まず、Webページ上でFont AwesomeのCSSを読み込ませます。
Rails等でFontAwesomeのGemを導入する手順を実行済みの場合は下記の手順は不要です
FontAwesomeを使用したページのhead内に記述する<head> <title>FontAwesome5の使い方</title> <!-- 使用するFontAwesomeのバージョンに合わせ、"release/v5.○.○"/cssの数値を変えてください --> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <!-- 以下省略 --> </head>これでFont Awesomeが使えるようになりましたので、
サンプルとして、下記のHTMLに擬似クラスでFontAwesomeを使用してみましょう。
サンプルのHTML<body> <p class="sample">サンプルテキスト</p> </body>適当なCSSファイル内に記述。sampleクラスのpタグ内に、擬似クラスでFontAwesomeのアイコンを表示させるp.sample::after { content: "\f304" font-family: "Font Awesome 5 Free"; font-weight: 900; }これで、サンプルテキストの文字列直後にペンのFontAwesomeアイコンが表示されるようになるはずです。
その際のポイントは下記の通り。
::after(またはbefore)
で対象の要素内を指定するcontent: "\f○○○"
で使いたいアイコンを指定する(アイコンコードはFontAwesome公式サイト参照
- その際、"\(バックスラッシュ)"をコードの先頭につけること
- font-familyで
"Font Awesome 5 Free"
(有料版はFreeではなくPro、BrandsならBrands)と記述
- ※FontAwesomeのバージョンが5になる以前は
font-family: FontAwesome;
の指定だけでOKでした- font-weightでアイコンの種類(solidかregularなど)を指定
また、font-weightで指定するアイコンの種類の数値はこちら
- font-weight: 900; <= Solid
- font-weight: 400; <= Regular
- font-weight: 400; <= Brands
- font-weight: 300; <= Light (Pro)
アイコンではなく四角い枠が表示されてしまう場合
FontAwesomeのCSSかfont-familyまたはアイコンコードの指定が間違っている可能性が考えられます。
記事の内容に間違いがございましたら、コメントの方にてご報告いただけると幸いです
- 投稿日:2020-11-24T12:47:00+09:00
レスポンシブ画像のテンプレートを作ろう
はじめに
img レスポンシブ
というようなワードでimgタグによって出力される画像をレスポンシブ対応させようとしたことはないでしょうか?
いろいろな記事を参考にしてるとどれが正解のコードなのか分からなくなってしまいます。
デザインに正解はないから見た目が整っていればいいんだよという人もいれば、これはHTMLのルールに則っていないからダメだという人もいます。
初学者は何を参考にすればいいのか分からず頭を抱えてしまうので、テンプレートを基にコードを書いて貰えばいいのでは?と思ったので、今回はimgタグのレスポンシブのレンプレートを作ります前置き
以下の知識は知っているものとして話を進めていきます。
- ブロックレベル要素
- インライン要素
- imgタグはインライン要素
- width
- max-width
画像をレスポンシブ対応していく
早速レスポンシブ対応にしていきたいところなのですが、imgタグはブロックレベル要素の子要素にして扱うということを知っておいてください。
HTMLの配置ルールではブロックレベル要素の中にインライン要素を配置するという考え方があるのでそれに則り、imgタグはブロックレベル要素の中に配置していきます。imgタグの親要素は何タグにするべき?
HTMLは文脈を意識してマークアップする必要があるので、その画像がどのような扱われ方をしているかに注目します。
と言われましても。。。という方は少なくないはず。
まずはimgタグの親になるタグを知っておく必要があります。
以下の三種類がimgの親になることが多いです。
- p
- figure
- div どのよう時にpタグ、figureタグ、divタグを使いわかればいいのか次で紹介します。
pタグ
- imgタグにalt属性がある時
- 画像がないとその文脈が分からない時
figureタグ
- 文脈が画像を参照している時
divタグ
- pタグ、figureタグどちらにも当てはまらない時
- 見た目だけを整えたい時
テンプレートを作る
style.cssimg { max-width: 100%; }もしくはこちらでも大丈夫です。
style.cssimg{ width: 100%; }imgのheightは初期値がautoなので、わざわざ
height: auto;
を書かなくても大丈夫です。テンプレートを使用した例
今回は見た目だけ整えたかったのでimgタグの親にはdivタグを用いています。
異なるwidthでもちゃんと比率を保持してくれるようになっています。
See the Pen
responsive-lecture by Daichi Nabeshima (@nabeshi)
on CodePen.
参考サイト
- 投稿日:2020-11-24T11:55:25+09:00
背景色を透過するCSS (opacityとrgba)
はじめに
Railsでオリジナルアプリ制作中、サイドバー部分を実装しました。
sample.html.erb(抜粋)<div class="side-bar-upper"> <h2><%= current_user.nickname %></h2> </div>sample.css(抜粋).side-bar-upper { width: 90%; height: 50px; margin: 5px auto; padding: 5px; background-color: #fff; }サイドバー背景には、個人的にお気に入りのキレイな画像を使用しました。
せっかくなので、重ねた要素は透過して背景画像を生かしたいと思います。開発環境
Ruby 2.6.5
Rails 6.0.3.4
MySQL
Visual Studio Code
(GoogleChrome)検証
まず背景の透過といえば…
opacity
プロパティが挙げられます。opacity
要素の透明度を指定できます。.sample { /* 透明度50% */ opacity: 0.5; }透明度は0.0~1.0内の小数点で指定します。
(0.5であれば、50%の透過率ということです)こちらをCSSに反映してみます。
sample.css(抜粋/修正).side-bar-upper { width: 90%; height: 50px; margin: 5px auto; padding: 5px; background-color: #fff; opacity: 0.5; }要素の透過が出来ました…が
sampleの文字も薄い…一緒に透過されているのが分かります。
opacity
プロパティはその子孫要素にも透明度が適用される点に注意が必要です…!〜文字はそのまま、背景のみ透過したい!!〜
そんな時は…
rgba()
を使用します!rgba
CSS3で追加された、RGBAカラーモデルでカラーと透明度を指定出来る値です。.sample{ color: rgba(0, 0, 0, 0.5); }ここで注意が必要なのが、rgbaそのものはプロパティではなく、あくまで値ということです。
background-color
やbox-shadow
などのカラー指定の出来るプロパティに、値として使用ができます。
そのため、カラーはカラーコードではなく、10進数で指定する必要があります。
各値は、Red, Green, Blue(ここまでがカラー値), alpha(透明度)の順で指定します。
今回使用している#ffffff
は、10進数ですと255, 255, 255
になります。それでは、こちらをCSSに反映してみます。
sample.css(抜粋/修正2).side-bar-upper { width: 90%; height: 50px; margin: 5px auto; padding: 5px; background-color: rgba(255, 255, 255, 0.5); }文字はそのままで、無事に背景の透過が出来ました!
終わりに
背景色透過のプロパティはアプリ制作で多用すると思い、今回記事にまとめてみました。
初学者で拙い記事ですが、少しでもお役に立てると嬉しく思います。
最後まで読んでいただき、誠にありがとうございました。参考記事
要素の透明度の指定(opacity)
カラーの透明度の値(rgba, transparent)
【CSS3リファレンス】opacity
【CSS3リファレンス】rgba()
カラーコードの一覧表(色を調べる/色を作る)
- 投稿日:2020-11-24T09:34:27+09:00
overflow autoについて
overflowとは
CSSのプロパティの1つで、
要素のボックスからはみ出た部分をどう扱うかを指定する。
visible
:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden
:はみ出た部分が隠れる。
scroll
:はみ出た部分が隠れてスクロールできる状態になる。
auto
:ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。auto
はみ出た部分の処理をブラウザに委ねることになる。ほとんどの場合はscrollと同じくスクロールに。
<!-- html --> <p class="menu">あいうえおあいうえおあいうえお</p> /* css */ .menu { width: 50px; height: 50px; overflow: auto; background: rgb(242, 173, 173); }
- 投稿日:2020-11-24T09:30:27+09:00
overflow scrollについて
overflowとは
CSSのプロパティの1つで、
要素のボックスからはみ出た部分をどう扱うかを指定する。
visible
:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden
:はみ出た部分が隠れる。
scroll
:はみ出た部分が隠れてスクロールできる状態になる。
auto
:ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。scroll
はみ出た部分が非表示になるが、スクロールにより表示することができるようになる。
white-space:nowrap;
を指定することで、横向きにスクロールできるようにすることも可能。<!-- html --> <p class="menu">あいうえおあいうえおあいうえお</p> /* css */ .menu { width: 50px; height: 50px; overflow: scroll; background: rgb(242, 173, 173); }
- 投稿日:2020-11-24T09:23:15+09:00
overflow hiddenについて
overflowとは
CSSのプロパティの1つで、
要素のボックスからはみ出た部分をどう扱うかを指定する。
visible
:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden
:はみ出た部分が隠れる。
scroll
:はみ出た部分が隠れてスクロールできる状態になる。
auto
:ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。hidden
要素のボックスからはみ出てしまった部分を非表示にする。
<!-- html --> <p class="menu">あいうえおあいうえおあいうえお</p> /* css */ .menu { width: 50px; height: 50px; overflow: hidden; background: rgb(242, 173, 173); }
- 投稿日:2020-11-24T09:21:52+09:00
overflow visibleについて
overflowとは
CSSのプロパティの1つで、
要素のボックスからはみ出た部分をどう扱うかを指定する。
visible
:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden
:はみ出た部分が隠れる。
scroll
:はみ出た部分が隠れてスクロールできる状態になる。
auto
:ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。visible
<!-- html --> <p class="menu">あいうえおあいうえお</p> /* css */ .menu { width: 50px; height: 50px; /* heightを指定しなければはみ出ない。 */ overflow: visible; /* visibleは初期値の為、書かれていなくても同じ表示になる。 */ background: rgb(242, 173, 173); }・
white-space: nowrap;
heightを指定せずに、
white-space: nowrap;
を指定することで、横にはみ出るようになる。
white-space
=行の折り返しを決めるプロパティ
nowrap
=自動的に改行しない
normal
=右端で折り返す
<!-- html --> <p class="menu">あいうえおあいうえお</p> /* css */ .menu { white-space: nowrap; width: 50px; overflow: visible; /* visibleは初期値の為、書かれていなくても同じ表示になる。 */ background: rgb(242, 173, 173); }
- 投稿日:2020-11-24T08:05:22+09:00
【HTML・CSS】ゲーミングな文字を作ります
ゲーミングPCが欲しい・・・でも高すぎる・・・そんな風に考えたことはありませんか?
雰囲気だけでもゲーミング感を味わいたい・・・そんな私のために、HTMLとCSSでゲーミング風=虹色に光る文字を作ります。
実用性はあまりないので、ネタとしてご覧ください。作り方
作り方としては、大きく分けて2段階あります。
- 背景を文字で切り抜く
- 背景に虹色を適用する
以上の順で、作成していきます。
背景を文字で切り抜く
背景を文字で切り取るには、CSSの
background-clip
を使います。
これは背景を適用する範囲を決めるプロパティです。(参考)
使用できる値には以下があります。
border-box
: 境界の外側の辺まで背景を表示するpadding-box
: パディングの外側の辺まで背景を表示するcontent-box
: コンテンツのみ背景を表示するtext
: テキスト部分のみ背景を表示するこのうち、
text
を使うことで、背景を文字にすることができるようになります。
また、文字の色を透明にすることを忘れないようにしましょう。切り取った背景が文字で見えなくなってしまいます。style.css.gaming{ color: transparent; /*文字を透明にする*/ background-clip: text; /*背景を文字で切り抜く*/ background-image : hogehoge /*文字にしたい背景を入れる*/ }背景に虹色を適用する
背景を虹色にするにはグラデーションを使います。(参考)
background-image
プロパティにlinear-gradient
を使うことでグラデーションを作ることができます。
ここで注意しないといけないのが、background
でも背景をグラデーションにできます。
が、background-clip
はbackground
で指定した背景を切り取ることができません。必ずbackground-image
プロパティに指定しましょう。style.css.gaming{ color: transparent; /*文字を透明にする*/ background-clip: text; /*背景を文字で切り抜く*/ background-image : linear-gradient(45deg, red, orange, yellow, green, aqua, blue, purple); }これで文字が虹色になりました。
さらにアニメーションをつけてゲーミング感をアップさせます。
animation
プロパティで、アニメーションをつけることができます。
詳細はこちらを参照してください。
下の例では、4秒で左右に無限回往復移動するアニメーションになっています。style.css.gaming{ font-size: 36px; color: transparent; /*文字を透明にする*/ background-clip: text; /*背景を文字で切り抜く*/ background-image: linear-gradient(45deg, red, orange, yellow, green, aqua, blue, purple); background-size: 1200%; animation: 4s linear 0s infinite alternate slide; /* slideアニメーションを4秒で往復の線形移動を無限回行う */ } @keyframes slide { from { background-position: 0% 0%; } to { background-position: 100% 0%; } /* 右から左へ移動するアニメーション */ }これで、
gaming
クラスを適用した箇所が、色が変わりながら光る文字ようになります。
ぜひ試してみてください。
- 投稿日:2020-11-24T05:46:13+09:00
ドラッグで移動できるdialogタグをざっくりと作る
<dialog>
タグとは
<dialog>
: ダイアログ要素 - MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialogまともに動くのはChromeとChromeベースのEdgeだけですね。
使いどころが難しいですが、社内システムとかで使う分には良いかなーって感じですね。まずはダイアログを表示するコード
<dialog id="dialog"> <h1>hello</h1> </dialog> <button id="show">show</button> <script> const showBtn = document.querySelector('#show'); const dlg = document.querySelector('#dialog'); showBtn.addEventListener('click', () => { dlg.showModal() }); </script>
dialog要素
はデフォルト非表示になります。
画面にはshow
ボタンしか表示されてませんね。
dialog要素
はjsと共に使用され、dialog要素.showModal()
で表示できます。モーダルの枠線とかはデフォルトです。
モーダルの背景が若干灰色になってますね。
次はスタイルをいじってみましょう。スタイルをいじる
<style> /* モーダル */ dialog { border: none; border-radius: 10px; } /* モーダルの背景 */ dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } </style>枠線を消して、角丸を入れてみました。
dialog::backdrop
はモーダルの背景の疑似要素です。半透明の黒を設定してみました。ドラッグできるようにする
<style> /* モーダル */ dialog { border: none; border-radius: 10px; } /* モーダルの背景 */ dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } /* モーダル内のテキストとかを選択不可にする */ dialog * { user-select: none; } </style> <dialog id="dialog" draggable="true"> <h1>hello</h1> </dialog> <button id="show">show</button> <script> const showBtn = document.querySelector('#show'); const dlg = document.querySelector('#dialog'); showBtn.addEventListener('click', () => { dlg.showModal() }); /** * モーダルのどこをつかんで移動を開始したか保存する用 */ let mouse = { x: 0, y: 0, }; /** * モーダルのどこをつかんで移動を開始したか保存する * ドラッグ時についてくる半透明の要素を空のdivにして消す */ dlg.addEventListener('dragstart', evt => { mouse.y = dlg.offsetTop-evt.pageY; mouse.x = dlg.offsetLeft-evt.pageX; evt.dataTransfer.setDragImage(document.createElement('div'), 0, 0); }); /** * ドラッグ時の座標を */ dlg.addEventListener('drag', evt => { if (evt.x === 0 && evt.y === 0) return; const top = evt.pageY + mouse.y; const left = evt.pageX + mouse.x; const right = window.outerWidth - evt.pageX; dlg.style.top = top + 'px'; dlg.style.left = left + 'px'; dlg.style.right = right + 'px'; }); /** * モーダルのどこをつかんで移動を開始したかをリセットする */ dlg.addEventListener('dragend', evt => { mouse = { x: 0, y: 0, }; }); </script>こんな感じで移動できます。
ドラッグ開始したマウスの位置を設定しないと、マウスの位置がモーダルの左上となります。また、
dialog要素
はデフォルトでdialog { left: 0; right: 0; position: absolute; ...他 }が入ってるのでleftとrightの両方を設定します。
evt.dataTransfer.setDragImage(document.createElement('div'), 0, 0);
は無くても良いですが、半透明の要素がくっついてきます。おしまい
ライブラリも何もなしにモーダル表示できるのは楽ですね。
ちなみにdialog要素
はform要素
を内包して使うことが多いです。<dialog> <form method="dialog"> <button value="ok">OK</button> </form> </dialog> <script> document.querySelector('dialog').addEventListener('close', () => { console.log( document.querySelector('dialog').returnValue ); }); </script>
method="dialog"
を設定してsubmitするとモーダルが非表示になります。
OKのボタンが押されるとok
という文字列をjsで受け取ることもできます。皆さんも使ってみてはいかがでしょうか?
- 投稿日:2020-11-24T00:05:20+09:00
text-overflow: ellipsis を使うのに width を指定したくない
やりたいこと
パンくずリストの構造化データで
- 枠で囲んでいる中のテキストが長いときは三点リーダーをつけたい
- 枠の長さを可変にしたい(widthを指定したくない)
- 短いときはそのまま表示したい実装
パンくずリストのhtmlは下記と同じようにしています。(記事内では長くなるのでmicrodataは省略しています。)
パンくずリスト | Google 検索セントラル | Google Developers<ol> <li><a><span>TOP</span></a></li> › <li><a><span>Category1</span></a></li> › <li><a><span>Category2</span></a></li> › <li><a><span>すごくながいたいとるすごくながいたいとるすごくながいたいとるすごくながいたいとる</span></a></li> </ol>cssも一部抜粋です。構造はすごくシンプルで
ol
をdisplay: flex;
で横並びにしているだけです。/* 横並びにする */ ol { display: flex; } /* 最後のliのテキストが長いとき省略する */ li:last-child { overflow: hidden; } li:last-child span { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }表示はここから確認できます
https://jsfiddle.net/Lb8podhk/なんでこうなるの?
はっきりと原因がわかってないのですが
li
にoverflow: hidden;
が必要なのは下記の記事と同じっぽいです。
flexbox内でtext-overflowが効かない | cly7796.net対応方法としては、text-overflowの要素が入っている.flex-itemに対して、min-width: 0;を指定するといいようです。
もしくは、.flex-itemにoverflow: hidden;を指定でも対応できます。
span
の方はtext-overflow
やoverflow
の適用対象がインライン要素ではないっぽいのでdisplay: block;
などを追加してあげないとダメなのかな?と思っています。text-overflow - CSS: カスケーディングスタイルシート | MDN
適用対象 ブロックコンテナー要素
overflow - CSS: カスケーディングスタイルシート | MDN
適用対象 ブロックコンテナー, フレックスコンテナー, グリッドコンテナー
余談
すごいニッチな悩みだと思うのですが解消するのに地味に時間かかったので共有です。
こんなんすぐ実装できるやろ〜と思っていたのに時間かかってしまったかなしみと
text-overflow: ellipsis
使うときはwidth
が指定してあるサンプルが多くてでも欲しいのはそうじゃない…という気持ちで書きました。