diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss index faa11d581..7d9397ddd 100644 --- a/build/scss/_variables.scss +++ b/build/scss/_variables.scss @@ -182,15 +182,15 @@ $ribbon-border-size: 3px !default; $ribbon-line-height: 100% !default; $ribbon-padding: .375rem 0 !default; $ribbon-font-size: .8rem !default; -$ribbon-width: 110px !default; -$ribbon-wrapper-size: 90px !default; -$ribbon-top: 9px !default; -$ribbon-right: -12px !default; -$ribbon-lg-wrapper-size: 180px !default; +$ribbon-width: 90px !default; +$ribbon-wrapper-size: 70px !default; +$ribbon-top: 10px !default; +$ribbon-right: -2px !default; +$ribbon-lg-wrapper-size: 120px !default; $ribbon-lg-width: 160px !default; $ribbon-lg-top: 26px !default; -$ribbon-lg-right: -59px !default; -$ribbon-xl-wrapper-size: 240px !default; +$ribbon-lg-right: 0px !default; +$ribbon-xl-wrapper-size: 180px !default; $ribbon-xl-width: 240px !default; -$ribbon-xl-top: 59px !default; -$ribbon-xl-right: -48px !default; +$ribbon-xl-top: 47px !default; +$ribbon-xl-right: 4px !default; diff --git a/docs/_config.yml b/docs/_config.yml index aac9c1c2d..1524159af 100755 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -52,6 +52,8 @@ navigation: url: components/boxes.html - title: Direct Chat url: components/direct-chat.html + - title: Ribbons + url: components/ribbons.html - title: JavaScript icon: fas fa-code url: javascript diff --git a/docs/components/ribbons.md b/docs/components/ribbons.md new file mode 100644 index 000000000..1c17abffb --- /dev/null +++ b/docs/components/ribbons.md @@ -0,0 +1,165 @@ +--- +layout: page +title: Ribbons Component +--- + +The ribbons component is a easy way to display informations above any content. The `.ribbon-warpper` needs to be inside a element with _position:relative;_. In this docs page we place the ribbon always inside `
` for demo purpose but it can placed inside cards, table rows & many more. + +The ribbon comes in three sizes to display more text or use larger font sizes, default (only `.ribbon-wrapper`), large (`.ribbon-wrapper` with `.ribbon-lg`), extra large (`.ribbon-wrapper` with `.ribbon-xl`). + +##### Example Markup +{: .text-bold .text-dark .mt-5} + +
+
+
+ Ribbon +
+
+ Ribbon Default
+ .ribbon-wrapper.ribbon-lg .ribbon +
+ +```html +
+
+ Ribbon +
+
+``` +{: .max-height-300} + +##### Ribbon Size Variations +{: .text-bold .text-dark .mt-5} +
+
+
+
+
+ Ribbon +
+
+ Ribbon Default
+ .ribbon-wrapper.ribbon-lg .ribbon +
+
+
+
+
+
+ Ribbon Large +
+
+ Ribbon Large
+ .ribbon-wrapper.ribbon-lg .ribbon +
+
+
+
+
+
+ Ribbon Extra Large +
+
+ Ribbon Extra Large
+ .ribbon-wrapper.ribbon-xl .ribbon +
+
+
+
+
+```html +
+
+ Ribbon +
+
+``` +
+
+```html +
+
+ Ribbon Large +
+
+``` +
+
+```html +
+
+ Ribbon Extra Large +
+
+``` +
+
+ +##### Text Size Variations +{: .text-bold .text-dark .mt-5} + +
+
+
+
+
+ Ribbon +
+
+ Ribbon Large
with Large Text
+ .ribbon-wrapper.ribbon-lg .ribbon.text-lg +
+
+
+
+
+
+ Ribbon +
+
+ Ribbon Extra Large
with Large Text
+ .ribbon-wrapper.ribbon-xl .ribbon.text-lg +
+
+
+
+
+
+ Ribbon +
+
+ Ribbon Extra Large
with Extra Large Text
+ .ribbon-wrapper.ribbon-xl .ribbon.text-xl +
+
+
+
+
+```html +
+
+ Ribbon +
+
+``` +
+
+```html +
+
+ Ribbon +
+
+``` +
+
+```html +
+
+ Ribbon +
+
+``` +
+
diff --git a/pages/UI/ribbons.html b/pages/UI/ribbons.html new file mode 100644 index 000000000..32861877d --- /dev/null +++ b/pages/UI/ribbons.html @@ -0,0 +1,806 @@ + + + + + + AdminLTE 3 | UI Ribbons + + + + + + + + + + + + + +
+ + + + + + + + +
+ +
+
+
+
+

Ribbons

+
+
+
    +
  1. Home
    2. +
  2. Ribbons
    3. +
+
+
+
+
+ + +
+
+
+
+
+
+

Ribbons

+
+ +
+
+
+
+
+
+ Ribbon +
+
+ Ribbon Default
+ .ribbon-wrapper.ribbon-lg .ribbon +
+
+
+
+
+
+ Ribbon Large +
+
+ Ribbon Large
+ .ribbon-wrapper.ribbon-lg .ribbon +
+
+
+
+
+
+ Ribbon Extra Large +
+
+ Ribbon Extra Large
+ .ribbon-wrapper.ribbon-xl .ribbon +
+
+
+
+
+
+
+
+ Ribbon +
+
+ Ribbon Large
with Large Text
+ .ribbon-wrapper.ribbon-lg .ribbon.text-lg +
+
+
+
+
+
+ Ribbon +
+
+ Ribbon Extra Large
with Large Text
+ .ribbon-wrapper.ribbon-xl .ribbon.text-lg +
+
+
+
+
+
+ Ribbon +
+
+ Ribbon Extra Large
with Extra Large Text
+ .ribbon-wrapper.ribbon-xl .ribbon.text-xl +
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + +