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 | |
parent | 153f6c72ce8ac49453125efab0c28d82f52cf2ec (diff) |
docs(cheatsheet): various fixes
Diffstat (limited to 'site/content/docs/5.0/examples')
4 files changed, 166 insertions, 120 deletions
diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html index 51a07eafa0..e01b15bfd7 100644 --- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html @@ -2,9 +2,9 @@ layout: examples title: ورقة غش extra_css: -- "../cheatsheet/cheatsheet.rtl.css" + - "../cheatsheet/cheatsheet.rtl.css" extra_js: -- src: "../cheatsheet/cheatsheet.js" + - src: "../cheatsheet/cheatsheet.js" body_class: "bg-light" direction: rtl --- @@ -23,48 +23,48 @@ direction: rtl <nav class="small" id="toc"> <ul class="list-unstyled"> <li class="my-2"> - <a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#contents-collapse" aria-controls="contents-collapse">محتويات</a> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">محتويات</button> <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> - <li><a href="#typography">الطباعة</a></li> - <li><a href="#images">صور</a></li> - <li><a href="#tables">جدول</a></li> - <li><a href="#figures">رقم</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#typography">الطباعة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#images">صور</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#tables">جدول</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#figures">رقم</a></li> </ul> </li> <li class="my-2"> - <a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#forms-collapse" aria-controls="forms-collapse">نماذج</a> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">نماذج</button> <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> - <li><a href="#overview">نظرة عامة</a></li> - <li><a href="#disabled-forms">أشكال المعطلين</a></li> - <li><a href="#sizing">تحجيم</a></li> - <li><a href="#input-group">مجموعة الإدخال</a></li> - <li><a href="#floating-labels">تسميات عائمة</a></li> - <li><a href="#validation">التحقق</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">أشكال المعطلين</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#sizing">تحجيم</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">تسميات عائمة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li> </ul> </li> <li class="my-2"> - <a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#components-collapse" aria-controls="components-collapse">مكونات</a> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button> <ul class="list-unstyled ps-3 collapse" id="components-collapse"> - <li><a href="#accordion">الأكورديون</a></li> - <li><a href="#alerts">إنذار</a></li> - <li><a href="#badge">شارة</a></li> - <li><a href="#breadcrumb">مسار التنقل</a></li> - <li><a href="#buttons">أزرار</a></li> - <li><a href="#button-group">مجموعة الأزرار</a></li> - <li><a href="#card">بطاقة</a></li> - <li><a href="#carousel">شرائح عرض</a></li> - <li><a href="#dropdowns">هبوط قطرة</a></li> - <li><a href="#list-group">مجموعة القوائم</a></li> - <li><a href="#modal">مشروط</a></li> - <li><a href="#navs">التنقل</a></li> - <li><a href="#navbar">شريط التنقل</a></li> - <li><a href="#pagination">ترقيم الصفحات</a></li> - <li><a href="#popovers">بوبوفيرس</a></li> - <li><a href="#progress">شريط التقدم</a></li> - <li><a href="#scrollspy">مخطوطة</a></li> - <li><a href="#spinners">المغازل</a></li> - <li><a href="#toasts">نخب</a></li> - <li><a href="#tooltips">تلميحات الأدوات</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#accordion">الأكورديون</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#alerts">إنذار</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#badge">شارة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#buttons">أزرار</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#card">بطاقة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح عرض</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">هبوط قطرة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة القوائم</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#modal">مشروط</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#popovers">بوبوفيرس</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">مخطوطة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#spinners">المغازل</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#toasts">نخب</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">تلميحات الأدوات</a></li> </ul> </li> </ul> @@ -72,7 +72,7 @@ direction: rtl </aside> <div class="bd-cheatsheet container-fluid bg-white"> <section id="content"> - <h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2> <article class="my-3" id="typography"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> @@ -318,7 +318,7 @@ direction: rtl </section> <section id="forms"> - <h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2> <article class="my-3" id="overview"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> @@ -510,7 +510,7 @@ direction: rtl <div> {{< example show_markup="false" >}} - <form class="row g-3"> + <form> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">عنوان بريد الكتروني</label> @@ -601,7 +601,7 @@ direction: rtl </section> <section id="components"> - <h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2> <article class="my-3" id="accordion"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css index fba8fd0a45..e2018e91aa 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css @@ -23,39 +23,54 @@ body { /* Table of contents */ .bd-aside a { - padding: .125rem 1rem; - color: inherit; + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: .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-left: -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)/* rtl:ignore */; +} + + /* Examples */ .scrollspy-example { position: relative; @@ -125,8 +140,17 @@ body { scroll-margin-top: 2rem; } - .bd-cheatsheet section > h2 { - grid-column: 1 / span 2; + .bd-cheatsheet section > h2::before { + position: absolute; + /* rtl:begin:ignore */ + top: 0; + right: 0; + bottom: -2rem; + left: 0; + /* rtl:end:ignore */ + z-index: -1; + content: ""; + background-image: linear-gradient(to bottom, #fff calc(100% - 3rem), transparent); } .bd-cheatsheet article, 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, diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html index d51f929f96..790bf546b5 100644 --- a/site/content/docs/5.0/examples/cheatsheet/index.html +++ b/site/content/docs/5.0/examples/cheatsheet/index.html @@ -2,9 +2,9 @@ layout: examples title: Cheatsheet extra_css: -- "cheatsheet.css" + - "cheatsheet.css" extra_js: -- src: "cheatsheet.js" + - src: "cheatsheet.js" body_class: "bg-light" --- @@ -22,48 +22,48 @@ body_class: "bg-light" <nav class="small" id="toc"> <ul class="list-unstyled"> <li class="my-2"> - <a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#contents-collapse" aria-controls="contents-collapse">Contents</a> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button> <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> - <li><a href="#typography">Typography</a></li> - <li><a href="#images">Images</a></li> - <li><a href="#tables">Tables</a></li> - <li><a href="#figures">Figures</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#typography">Typography</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#images">Images</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#tables">Tables</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#figures">Figures</a></li> </ul> </li> <li class="my-2"> - <a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#forms-collapse" aria-controls="forms-collapse">Forms</a> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button> <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> - <li><a href="#overview">Overview</a></li> - <li><a href="#disabled-forms">Disabled forms</a></li> - <li><a href="#sizing">Sizing</a></li> - <li><a href="#input-group">Input group</a></li> - <li><a href="#floating-labels">Floating labels</a></li> - <li><a href="#validation">Validation</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#overview">Overview</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#sizing">Sizing</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#input-group">Input group</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#validation">Validation</a></li> </ul> </li> <li class="my-2"> - <a class="collapsed font-weight-bold d-inline-flex align-items-center" data-bs-toggle="collapse" role="button" aria-expanded="false" href="#components-collapse" aria-controls="components-collapse">Components</a> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button> <ul class="list-unstyled ps-3 collapse" id="components-collapse"> - <li><a href="#accordion">Accordion</a></li> - <li><a href="#alerts">Alerts</a></li> - <li><a href="#badge">Badge</a></li> - <li><a href="#breadcrumb">Breadcrumb</a></li> - <li><a href="#buttons">Buttons</a></li> - <li><a href="#button-group">Button group</a></li> - <li><a href="#card">Card</a></li> - <li><a href="#carousel">Carousel</a></li> - <li><a href="#dropdowns">Dropdowns</a></li> - <li><a href="#list-group">List group</a></li> - <li><a href="#modal">Modal</a></li> - <li><a href="#navs">Navs</a></li> - <li><a href="#navbar">Navbar</a></li> - <li><a href="#pagination">Pagination</a></li> - <li><a href="#popovers">Popovers</a></li> - <li><a href="#progress">Progress</a></li> - <li><a href="#scrollspy">Scrollspy</a></li> - <li><a href="#spinners">Spinners</a></li> - <li><a href="#toasts">Toasts</a></li> - <li><a href="#tooltips">Tooltips</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#accordion">Accordion</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#alerts">Alerts</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#badge">Badge</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#buttons">Buttons</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#button-group">Button group</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#card">Card</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#spinners">Spinners</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">Tooltips</a></li> </ul> </li> </ul> @@ -71,7 +71,7 @@ body_class: "bg-light" </aside> <div class="bd-cheatsheet container-fluid bg-white"> <section id="content"> - <h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2> <article class="my-3" id="typography"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> @@ -317,7 +317,7 @@ body_class: "bg-light" </section> <section id="forms"> - <h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2> <article class="my-3" id="overview"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> @@ -509,7 +509,7 @@ body_class: "bg-light" <div> {{< example show_markup="false" >}} - <form class="row g-3"> + <form> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> @@ -600,7 +600,7 @@ body_class: "bg-light" </section> <section id="components"> - <h2 class="sticky-xl-top font-weight-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Components</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Components</h2> <article class="my-3" id="accordion"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> |