chore: add component variables @docs comment wrapper (#114)

oruga-ui · Jul 30, 2024 · 20f5403 · 20f5403
1 parent 41a1363
commit 20f5403
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 0 deletions.
diff --git a/src/assets/scss/components/_autocomplete.scss b/src/assets/scss/components/_autocomplete.scss
@@ -1,6 +1,8 @@
 @use "bulma/bulma";
 
+/* @docs */
 $dropdown-content-max-height: 200px !default;
+/* @docs */
 
 .autocomplete {
     position: relative;

diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss
@@ -1,6 +1,7 @@
 @use "bulma/bulma";
 @use "utils/variables" as var;
 
+/* @docs */
 $carousel-arrow-background: bulma.$scheme-main !default;
 $carousel-arrow-color: bulma.$primary !default;
 $carousel-arrow-icon-spaced: 1.5rem !default;
@@ -13,6 +14,7 @@ $carousel-indicator-spaced: 0.5rem !default;
 
 $carousel-overlay-background: rgba(bulma.$scheme-invert, 0.86) !default;
 $carousel-overlay-z: 40 !default;
+/* @docs */
 
 .carousel {
     @extend %unselectable;

diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
@@ -3,6 +3,7 @@
 @use "utils/variables" as var;
 @use "utils/functions" as fn;
 
+/* @docs */
 $checkbox-active-background-color: bulma.$primary !default;
 $checkbox-background-color: transparent !default;
 $checkbox-border-color: bulma.$grey !default;
@@ -11,6 +12,7 @@ $checkbox-border-width: 2px !default;
 $checkbox-checkmark-color: bulma.$primary-invert !default;
 $checkbox-size: 1.25em !default;
 $checkbox-colors: bulma.$form-colors !default;
+/* @docs */
 
 .b-checkbox.checkbox {
     @extend %unselectable;

diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
@@ -2,6 +2,7 @@
 @use "sass:color";
 @use "bulma/bulma";
 
+/* @docs */
 $datepicker-background-color: bulma.$dropdown-content-background-color !default;
 $datepicker-radius: bulma.$dropdown-content-radius !default;
 $datepicker-shadow: bulma.$dropdown-content-shadow !default;
@@ -14,6 +15,7 @@ $datepicker-item-hover-background-color: bulma.$background !default;
 $datepicker-item-selected-color: bulma.$primary-invert !default;
 $datepicker-item-selected-background-color: bulma.$primary !default;
 $datepicker-event-background-color: bulma.$grey-light !default;
+/* @docs */
 
 .datepicker {
     font-size: 0.875rem;

diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
@@ -1,9 +1,11 @@
 @use "bulma/bulma";
 
+/* @docs */
 $dropdown-mobile-breakpoint: bulma.$desktop !default;
 $dropdown-background-color: rgba(bulma.$scheme-invert, 0.86) !default;
 $dropdown-disabled-opacity: 0.5 !default;
 $dropdown-gap: 0px !default;
+/* @docs */
 
 .dropdown {
     & + .dropdown {

diff --git a/src/assets/scss/components/_form.scss b/src/assets/scss/components/_form.scss
@@ -1,6 +1,8 @@
 @use "bulma/bulma";
 
+/* @docs */
 $floating-in-height: 3.25em !default;
+/* @docs */
 
 .field {
     &.is-grouped {

diff --git a/src/assets/scss/components/_loading.scss b/src/assets/scss/components/_loading.scss
@@ -1,9 +1,11 @@
 @use "bulma/bulma";
 
+/* @docs */
 $loading-background-legacy: #7f7f7f !default;
 $loading-background: rgba(255, 255, 255, 0.5) !default;
 $loading-icon-size: 3em !default;
 $loading-full-page-icon-size: 5em !default;
+/* @docs */
 
 .loading {
     @include bulma.overlay;

diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
@@ -2,9 +2,11 @@
 @use "bulma/bulma";
 @use "utils/variables" as var;
 
+/* @docs */
 $radio-active-background-color: bulma.$primary !default;
 $radio-size: 1.25em !default;
 $radio-colors: bulma.$form-colors !default;
+/* @docs */
 
 .b-radio.radio {
     @extend %unselectable;

diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss
@@ -2,12 +2,14 @@
 @use "bulma/bulma";
 @use "utils/variables" as var;
 
+/* @docs */
 $sidebar-background: bulma.$modal-background-background-color !default;
 $sidebar-box-shadow: 5px 0px 13px 3px rgba(bulma.$black, 0.1) !default;
 $sidebar-width: 260px !default;
 $sidebar-mobile-width: 80px !default;
 $sidebar-mobile-breakpoint: bulma.$tablet !default;
 $sidebar-colors: bulma.$navbar-colors !default;
+/* @docs */
 
 .b-sidebar {
     .sidebar-content {

diff --git a/src/assets/scss/components/_skeleton.scss b/src/assets/scss/components/_skeleton.scss
@@ -1,5 +1,6 @@
 @use "bulma/bulma";
 
+/* @docs */
 $skeleton-color: bulma.$grey-lighter !default;
 $skeleton-background: linear-gradient(
     90deg,
@@ -10,6 +11,7 @@ $skeleton-background: linear-gradient(
 $skeleton-border-radius: bulma.$radius !default;
 $skeleton-duration: 1.5s !default;
 $skeleton-margin-top: 0.5rem !default;
+/* @docs */
 
 .b-skeleton {
     @mixin steps-size($size) {

diff --git a/src/assets/scss/components/_slider.scss b/src/assets/scss/components/_slider.scss
@@ -1,6 +1,7 @@
 @use "sass:list";
 @use "bulma/bulma";
 
+/* @docs */
 $slider-radius: bulma.$radius !default;
 $slider-track-background: bulma.$grey-lighter !default;
 $slider-fill-background: bulma.$primary !default;
@@ -18,6 +19,7 @@ $slider-tick-radius: bulma.$radius !default;
 $slider-tick-background: bulma.$grey-light !default;
 $slider-mark-size: 0.75rem !default;
 $slider-colors: bulma.$colors !default;
+/* @docs */
 
 @mixin slider-size($size) {
     $track-height: calc($size / $slider-thumb-to-track-ratio);

diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss
@@ -9,6 +9,7 @@ MIT (https://github.com/Wikiki/bulma-steps/blob/master/LICENSE)
 @use "bulma/bulma";
 @use "utils/variables" as var;
 
+/* @docs */
 $steps-items-focused-outline: none !default;
 $steps-details-background-color: bulma.$body-background-color !default;
 $steps-maker-default-color: bulma.$grey-light !default;
@@ -20,6 +21,7 @@ $steps-divider-height: 0.2em !default;
 $steps-vertical-padding: 1em 0 !default;
 $steps-mobile-max-width: bulma.$tablet !default;
 $steps-colors: bulma.$colors !default;
+/* @docs */
 
 @mixin steps-size($size) {
     .steps {

diff --git a/src/assets/scss/components/_switch.scss b/src/assets/scss/components/_switch.scss
@@ -2,11 +2,13 @@
 @use "bulma/bulma";
 @use "utils/variables" as var;
 
+/* @docs */
 $switch-width-number: 2.75 !default;
 $switch-width: $switch-width-number * 1em !default;
 $switch-padding: 0.2em !default;
 $switch-active-background-color: bulma.$primary !default;
 $switch-colors: bulma.$form-colors !default;
+/* @docs */
 
 .switch {
     @extend %unselectable;

diff --git a/src/assets/scss/components/_table.scss b/src/assets/scss/components/_table.scss
@@ -2,7 +2,9 @@
 @use "utils/variables" as var;
 @use "utils/functions" as fn;
 
+/* @docs */
 $table-sticky-header-height: 300px !default;
+/* @docs */
 
 @mixin table-cards {
     .table {

diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss
@@ -1,5 +1,6 @@
 @use "bulma/bulma";
 
+/* @docs */
 $tabs-focused-outline: none !default;
 $tabs-items-focused-outline: none !default;
 $tabs-link-focus-active-border-bottom-color: bulma.$tabs-link-active-border-bottom-color !default;
@@ -12,6 +13,7 @@ $tabs-toggle-link-focus-active-background-color: bulma.$tabs-toggle-link-active-
 $tabs-toggle-link-focus-background-color: bulma.$tabs-toggle-link-hover-background-color !default;
 $tabs-toggle-link-focus-active-border-color: bulma.$tabs-toggle-link-active-border-color !default;
 $tabs-toggle-link-focus-border-color: bulma.$tabs-toggle-link-hover-border-color !default;
+/* @docs */
 
 .b-tabs {
     .tabs {

diff --git a/src/assets/scss/components/_taginput.scss b/src/assets/scss/components/_taginput.scss
@@ -1,6 +1,8 @@
 @use "bulma/bulma";
 
+/* @docs */
 $taginput-height: calc(2em - 1px) !default;
+/* @docs */
 
 .taginput {
     .taginput-container {

diff --git a/src/assets/scss/components/_tooltip.scss b/src/assets/scss/components/_tooltip.scss
@@ -1,10 +1,12 @@
 @use "sass:list";
 @use "bulma/bulma";
 
+/* @docs */
 $tooltip-arrow-size: 5px !default;
 $tooltip-arrow-margin: 2px !default;
 $tooltip-content-multiline-width: 300px !default;
 $tooltip-colors: bulma.$colors !default;
+/* @docs */
 
 @mixin tooltip-arrow-color($direction, $color) {
     @if ($direction == "is-top") {