diff options
author | Gaƫl Poupard <gael.poupard@orange.com> | 2020-12-03 13:38:20 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-12-04 08:52:03 +0300 |
commit | 082723f3f4c12b7f5ca85aa1ebfe34b63ddb9d8c (patch) | |
tree | 5a574daa1cddcee70f31f53279ee360a4416ce55 /site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css | |
parent | 153f6c72ce8ac49453125efab0c28d82f52cf2ec (diff) |
docs(cheatsheet): various fixes
Diffstat (limited to 'site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css')
-rw-r--r-- | site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css | 64 |
1 files changed, 43 insertions, 21 deletions
diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css index 8794e9571f..01a2e31b8e 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css @@ -23,39 +23,54 @@ body { /* Table of contents */ .bd-aside a { - padding: .125rem 1rem; - color: inherit; + padding: .1875rem .5rem; + margin-top: .125rem; + margin-right: .3125rem; + color: rgba(0, 0, 0, .65); + text-decoration: none; } -.bd-aside a:not(:hover) { - text-decoration: none; +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); } -.bd-aside a:not(:only-child) { - margin-right: -1rem; +.bd-aside .active { + font-weight: 600; + color: rgba(0, 0, 0, .85); } -.bd-aside a:not(:only-child)::before { - width: 1rem; - line-height: 0; - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); - transition: transform .35s ease; - transform-origin: .5em 50%; +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); + border: 0; } -.bd-aside a:not(:only-child):not(.collapsed) { - color: #000; +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); } -.bd-aside a:not(:only-child):not(.collapsed)::before { - transform: rotate(-90deg); +.bd-aside .btn:focus { + box-shadow: 0 0 0 1px rgba(121, 82, 179, .7); } -.bd-aside .active { - font-weight: 700; - color: #000; +.bd-aside .btn::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg); } + /* Examples */ .scrollspy-example { position: relative; @@ -123,8 +138,15 @@ body { scroll-margin-top: 2rem; } - .bd-cheatsheet section > h2 { - grid-column: 1 / span 2; + .bd-cheatsheet section > h2::before { + position: absolute; + top: 0; + right: 0; + bottom: -2rem; + left: 0; + z-index: -1; + content: ""; + background-image: linear-gradient(to bottom, #fff calc(100% - 3rem), transparent); } .bd-cheatsheet article, |