Skip to content

Commit

Permalink
chore: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@TeyaVes
TeyaVes committed Dec 23, 2024
1 parent c7f5c73 commit 1e6963c
Show file tree
Hide file tree
Showing 20 changed files with 6,130 additions and 30 deletions.
312 changes: 312 additions & 0 deletions packages/bootstrap/docs/customization-color-editor.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,36 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-min-width</td>
<td>Number</td>
<td><code>252px</code></td>
<td><code>252px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-min-width</td>
<td>Number</td>
<td><code>$kendo-color-editor-min-width</code></td>
<td><code>328px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-min-width</td>
<td>Number</td>
<td><code>362px</code></td>
<td><code>362px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-border-width</td>
<td>Number</td>
Expand Down Expand Up @@ -177,6 +207,66 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-header-padding-y</td>
<td>String</td>
<td><code>$kendo-color-editor-header-padding-y</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-header-padding-x</td>
<td>String</td>
<td><code>$kendo-color-editor-header-padding-x</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-header-padding-y</td>
<td>String</td>
<td><code>$kendo-color-editor-header-padding-y</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-header-padding-x</td>
<td>String</td>
<td><code>$kendo-color-editor-header-padding-x</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-header-padding-y</td>
<td>String</td>
<td><code>k-spacing(4.5)</code></td>
<td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-header-padding-x</td>
<td>String</td>
<td><code>k-spacing(4.5)</code></td>
<td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-color-preview-width</td>
<td>Number</td>
Expand Down Expand Up @@ -207,6 +297,96 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-preview-gap</td>
<td>String</td>
<td><code>k-spacing(1)</code></td>
<td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-preview-gap</td>
<td>String</td>
<td><code>$kendo-color-editor-preview-gap</code></td>
<td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-preview-gap</td>
<td>String</td>
<td><code>k-spacing(1)</code></td>
<td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-color-preview-width</td>
<td>Number</td>
<td><code>32px</code></td>
<td><code>32px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-color-preview-height</td>
<td>Number</td>
<td><code>10px</code></td>
<td><code>10px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-color-preview-width</td>
<td>Number</td>
<td><code>$kendo-color-editor-color-preview-width</code></td>
<td><code>32px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-color-preview-height</td>
<td>Number</td>
<td><code>$kendo-color-editor-color-preview-height</code></td>
<td><code>12px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-color-preview-width</td>
<td>Number</td>
<td><code>32px</code></td>
<td><code>32px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-color-preview-height</td>
<td>Number</td>
<td><code>12px</code></td>
<td><code>12px</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-views-padding-y</td>
<td>String</td>
Expand Down Expand Up @@ -237,6 +417,96 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-views-padding-y</td>
<td>String</td>
<td><code>$kendo-color-editor-spacer</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-views-padding-x</td>
<td>String</td>
<td><code>$kendo-color-editor-views-padding-y</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sm-views-gap</td>
<td>String</td>
<td><code>$kendo-color-editor-spacer</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-views-padding-y</td>
<td>String</td>
<td><code>$kendo-color-editor-views-padding-y</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-views-padding-x</td>
<td>String</td>
<td><code>$kendo-color-editor-views-padding-x</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-md-views-gap</td>
<td>String</td>
<td><code>$kendo-color-editor-views-gap</code></td>
<td><code>var(--kendo-spacing-4, 1rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-views-padding-y</td>
<td>String</td>
<td><code>k-spacing(4.5)</code></td>
<td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-views-padding-x</td>
<td>String</td>
<td><code>k-spacing(4.5)</code></td>
<td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-lg-views-gap</td>
<td>String</td>
<td><code>k-spacing(4.5)</code></td>
<td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-color-gradient-focus-outline-color</td>
<td>Color</td>
Expand Down Expand Up @@ -267,6 +537,48 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
</td>
</tr>
<tr>
<td>$kendo-color-editor-sizes</td>
<td>Map</td>
<td><code>(
sm: (
min-width: $kendo-color-editor-sm-min-width,
header-padding-x: $kendo-color-editor-sm-header-padding-x,
header-padding-y: $kendo-color-editor-sm-header-padding-y,
views-padding-x: $kendo-color-editor-sm-views-padding-x,
views-padding-y: $kendo-color-editor-sm-views-padding-y,
preview-gap: $kendo-color-editor-sm-preview-gap,
preview-width: $kendo-color-editor-sm-color-preview-width,
preview-height: $kendo-color-editor-sm-color-preview-height,

),
md: (
min-width: $kendo-color-editor-md-min-width,
header-padding-x: $kendo-color-editor-md-header-padding-x,
header-padding-y: $kendo-color-editor-md-header-padding-y,
views-padding-x: $kendo-color-editor-md-views-padding-x,
views-padding-y: $kendo-color-editor-md-views-padding-y,
preview-gap: $kendo-color-editor-md-preview-gap,
preview-width: $kendo-color-editor-md-color-preview-width,
preview-height: $kendo-color-editor-md-color-preview-height,
),
lg: (
min-width: $kendo-color-editor-lg-min-width,
header-padding-x: $kendo-color-editor-lg-header-padding-x,
header-padding-y: $kendo-color-editor-lg-header-padding-y,
views-padding-x: $kendo-color-editor-lg-views-padding-x,
views-padding-y: $kendo-color-editor-lg-views-padding-y,
preview-gap: $kendo-color-editor-lg-preview-gap,
preview-width: $kendo-color-editor-lg-color-preview-width,
preview-height: $kendo-color-editor-lg-color-preview-height,
)
)</code></td>
<td><ul><li>sm: "min-width":"252px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"10px"</li><li>md: "min-width":"328px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"362px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li></ul></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
</td>
</tr>
</tbody>
</table>

Expand Down
Loading

0 comments on commit 1e6963c

Please sign in to comment.