From 701daa137870519b3c45dd122575c2dcf25aa7d8 Mon Sep 17 00:00:00 2001 From: Juan Martin Date: Sat, 20 Jul 2024 20:25:25 +0300 Subject: [PATCH] update --- package.json | 10 ++-- src/js/orbit-progress.js | 36 -------------- src/js/orbit-resize.js | 20 -------- src/scss/_capsule.scss | 29 ------------ src/scss/_color-theme.scss | 69 --------------------------- src/scss/_label.scss | 5 -- src/scss/_label_theme.scss | 6 --- src/scss/_orbit-class.scss | 77 ------------------------------ src/scss/_orbit-class_theme.scss | 4 +- src/scss/_orbit-zone.scss | 28 ----------- src/scss/_orbit-zone_theme.scss | 9 ---- src/scss/_progress.scss | 5 -- src/scss/_progress_theme.scss | 8 +--- src/scss/_radial-layout.scss | 80 -------------------------------- src/scss/_satellite.scss | 66 -------------------------- src/scss/_satellite_theme.scss | 4 +- src/scss/_sector.scss | 5 -- src/scss/_sector_theme.scss | 14 ------ src/scss/_segment.scss | 37 --------------- src/scss/_segment_theme.scss | 4 +- src/scss/_settings.scss | 48 ------------------- src/scss/_spoke.scss | 33 ------------- src/scss/_spoke_theme.scss | 4 +- src/scss/_support.scss | 27 ----------- src/scss/_utilities.scss | 25 +--------- 25 files changed, 9 insertions(+), 644 deletions(-) diff --git a/package.json b/package.json index 64c159c..2f1adf8 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,12 @@ { "name": "orbit", "version": "0.0.1", - "description": "CSS radial library", + "description": "The CSS radial composer", "main": "./src/orbit.js", - "directories": { - "example": "examples" - }, "scripts": { "build": "npx @zumerbox/build -n orbit -j src/orbit.js -s src/orbit.scss", - "doc:scss": "npx @zumerbox/doc-extractor src/orbit.scss -folder docs-one-scss -scss-imports -public-folder https://github.com/zumerlab/orbit/blob/main/src/scss", - "doc:scssx": "npx @zumerbox/doc-extractor src/scss -folder docs-scss-mutiple -multiple -public-folder https://github.com/zumerlab/orbit/blob/main/src/scss", - "doc:js": "npx @zumerbox/doc-extractor src/js -folder docs-js-mutiple -multiple -public-folder https://github.com/zumerlab/orbit/blob/main/src/web-components" + "bump": "npx @zumerbox/bump", + "postbump": "npx @zumerbox/changelog && git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags" }, "repository": { "type": "git", diff --git a/src/js/orbit-progress.js b/src/js/orbit-progress.js index 150d735..5c1ed56 100644 --- a/src/js/orbit-progress.js +++ b/src/js/orbit-progress.js @@ -1,40 +1,4 @@ -/*! -## o-progress -`` is a standard web-component for rendering a radial progress bar. Just one o-progress can be used per orbit. -It has two elements: a progress bar and a background bar that show the max range progress bar can achieve. - -### Customization - - - Attribute `value`: To set a number that represents the progress bar value. - - Attribute `max`: To set the max allowed `value`. - - Attribute `bar-color`: To set a color for progress bar. Default `orange` - - Attribute `bg-color`: To set a color for background bar. Default `transparent` - - Attribute `shape`: To set a different endings looks. Currently, you can choose between `circle`, `arrow`, `slash`, `backslash` and `zigzag` shapes. Default `none` - - - - Utility class `.range-*`: Default '360deg' - - Utility class `.from-*`: Default '0deg' - - Utility class `.grow-*x`: To increase `o-progress` height by multiplying orbit radius. Default '1x' - - Utility class `.reduce-*`: To reduce `o-progress` height by reducing current orbit percentage. Default '100' - - Utility class `.inner-orbit`: To place `o-progress` just below its orbit - - Utility class `.outer-orbit`: To place `o-progress` just above its orbit - - Utility class `.quarter-inner-orbit`: To place `o-progress` a 25% into its orbit. - - Utility class `.quarter-outer-orbit`: To place `o-progress` a 25% outer its orbit. - - - - CSS styles. You can customize `o-progress` by adding CSS properties to `o-progress path` - -**Important:** `` can only be used into `.orbit` or `.orbit-*` - -### Usage - -```html -
- -
-``` -*/ export class OrbitProgress extends HTMLElement { static get observedAttributes() { return ['value', 'shape', 'bar-color', 'bg-color', 'max', 'width', 'height']; diff --git a/src/js/orbit-resize.js b/src/js/orbit-resize.js index 868d6ac..256dd5d 100644 --- a/src/js/orbit-resize.js +++ b/src/js/orbit-resize.js @@ -1,24 +1,4 @@ -/*! -## Orbit.resize() -Resize is currently the only JS method of Orbit. - -### Usage - -```html - -
-
- -
-
- - -``` - -*/ let Orbit = {} Orbit = { diff --git a/src/scss/_capsule.scss b/src/scss/_capsule.scss index 6b6a7e9..d8c27b4 100644 --- a/src/scss/_capsule.scss +++ b/src/scss/_capsule.scss @@ -1,33 +1,4 @@ @use './variables' as *; -/*! -## .capsule - -Capsule is a class to put text or another content. Currently, it can be used into `satellites` and `segments`. -There are some utilties to modify `.capsule` orientation content. - -### Usage - -```html -
-
- Some text here. -
-
-``` - -#### Utilities - -- `stable`: to mantain content always horizontal. -- `turn-left`: to turn content 90deg left -- `turn-right`: to turn content 90deg right -- `flip`: to turn content upside-down. - -### TO-DO - -- Add some visual aids to prevent add capsule in elements are no satellite or segment. - - -*/ .capsule { --o-angle-composite: 0deg; diff --git a/src/scss/_color-theme.scss b/src/scss/_color-theme.scss index 82d53fd..c23f437 100644 --- a/src/scss/_color-theme.scss +++ b/src/scss/_color-theme.scss @@ -92,73 +92,4 @@ --o-gray-darker: color-mix(in oklab, var(--o-gray), black 40%); --o-gray-black: color-mix(in oklab, var(--o-gray), black 78%); - /* Primary Colors */ - --primary-color: #fffffe; /* Main primary color, here for overall bg */ - - /* Secondary Colors */ - --secondary-color: #90b4ce; /* Secondary button, link color */ - --tertiary-color: #d8eefe; /* Main primary color, here for overall bg */ - - /* Accent Colors */ - --accent-color: #ef4565; /* Alerts, notifications, call-to-action */ - - /* Highlight Colors */ - --highlight-color: #3da9fc; /* Highlighted elements, important details */ - - /* Stroke Colors */ - --border-color: #094067; /* Borders, outlines, separators, titles */ - - /* Neutral Colors */ - --dark-color: #5f6c7b; /* Used for dark text, icons */ - - --light-color: var(--primary-color); /* Used for light backgrounds, contrasts */ - - /* light theme regular use for pages */ - - --background: var(--primary-color); - - --headline: var(--border-color); - - --dark-text: var(--dark-color); - - --light-text: var(--light-color); - - --button: var(--highlight-color); - - /* dark section theme regular use for pages */ - - --background: var(--tertiary-color); - - --card-background: var(--primary-color); - - --headline: var(--border-color); - - --dark-text: var(--dark-color); - - --light-text: var(--light-color); - - --button: var(--highlight-color); - - /* light section theme regular use for pages */ - - --background: var(--primary-color); - - --card-background: var(--border-color); - - --headline: var(--border-color); - - --dark-text: var(--dark-color); - - --light-text: var(--light-color); - - --button: var(--highlight-color); - - - /* Background Colors */ - --background-color: #f8f9fa; /* Overall background */ - --section-background-color: #ffffff; /* Background for sections */ - - /* Text Colors */ - --text-color: #212529; /* Primary text color */ - --secondary-text-color: #6c757d; /* Secondary text color */ } diff --git a/src/scss/_label.scss b/src/scss/_label.scss index 9040ef9..6c1f5ed 100644 --- a/src/scss/_label.scss +++ b/src/scss/_label.scss @@ -1,10 +1,5 @@ @use './variables' as *; -/* -## -See o-label docs in web-component file. - -*/ o-label { --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1); container-name: otext; diff --git a/src/scss/_label_theme.scss b/src/scss/_label_theme.scss index 9c23b10..145b746 100644 --- a/src/scss/_label_theme.scss +++ b/src/scss/_label_theme.scss @@ -1,7 +1 @@ @use './variables' as *; -/*! -## - -See o-label docs in web-component file. - -*/ diff --git a/src/scss/_orbit-class.scss b/src/scss/_orbit-class.scss index 32e5670..f19afc9 100644 --- a/src/scss/_orbit-class.scss +++ b/src/scss/_orbit-class.scss @@ -1,82 +1,5 @@ @use './variables' as *; -/*! -## .orbit or .orbit-* -This class renders a circumsference inside an .orbit-zone. Inside `.orbit` can be placed many elements, such as satellites, sectors, progress, spokes, segments, and labels. -By default there are 12 orbits. The number can be modify with `$max-orbits` var at `_variables.scss`. - -**Important:** .orbit or .orbit-* is a direct child element of .orbit-zone. - -### Stack order -Orbits stack order is same as any html element. First orbit is below second one. - -### Usage: - -- Basic example that renders two orbits - ```html -
-
-
-
- ``` - -- Basic example that renders two orbits of same radius the latter one is abowe the former. - ```html -
-
-
-
- ``` - -- This renders three orbits with custom distribution - ```html -
-
-
- ``` - -- This renders nested orbits around a satellite - ```html -
-
-
-
-
-
-
-
-
-
- ``` - -### Customization: - -It has some special attributes and css variables to customize it or its children elements: - - - Utility class `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1. - - Utility class `.goey-fx`: This utility allows orbit child elements to look grouped and sticky. Try it! - - - CSS styles. User can customize `.orbit` by adding CSS properties. - -Besides css properties that user can change according his needs, there two css variables to turn `.orbit`or `.orbit-*` into -an ellipse (`--o-ellipse-x`, and `--o-ellipse-y`). This will affect orbit and its children, with an excepcion of ``, ``, and `` web components that will be hiden when orbit is an ellipse. Values range from 0 to 1. - -```html -
-
-
-
-
-
-
-
-
-
-``` - -There are some utility classes that are set on `.orbit` element and affect its child radial layout (`.from-*`, `.range-*`, etc). Please see [**Radial Layout section**]. - -*/ .orbit, [class*='orbit-']:not(.orbit-zone) { container-name: orbit; --o-base-diameter: var(--o-orbit-number) * var(--o-length) / #{$max-orbits}; diff --git a/src/scss/_orbit-class_theme.scss b/src/scss/_orbit-class_theme.scss index 1f0eb4d..daa17c4 100644 --- a/src/scss/_orbit-class_theme.scss +++ b/src/scss/_orbit-class_theme.scss @@ -1,6 +1,4 @@ -/* - .orbit theme -*/ + .orbit, [class*='orbit-']:not(.orbit-zone) { border: 1px solid var(--o-gray); } diff --git a/src/scss/_orbit-zone.scss b/src/scss/_orbit-zone.scss index 1e88ec9..4730eff 100644 --- a/src/scss/_orbit-zone.scss +++ b/src/scss/_orbit-zone.scss @@ -1,32 +1,4 @@ -/*! -## .orbit-zone -Orbit-zone is a container class that groups `.orbit` classes. It serves as a container with a size defined once by `--o-length` when the Orbit app is initialized. -~~When orbit-zone is nested into a `.satellite`, its length will depend on the `.satellite`'s `.orbit` diameter.~~ - -### Customization - - - Aligment class utilities: `.center`, `center-left`, `.center-right`, `.top-left`, `.top-center`, `.top-right`, `.bottom-left`, `.bottom-center`, `.bottom-right`. Default `.center` - -**Note:** Orbit is 100% CSS, but in case user needs Orbit be responsive there is an optional tiny JS script that modifies `--o-length` when a parent element of `.orbit-zone` is resized. See how to use in Orbit.resize docs - -**Important:** The `orbit-zone` class can only be nested into a `.satellite`. - -### Usage - -```html -
-
-
-
-
-
-
-
-
-
-``` -*/ .orbit-zone { container-name: orbitzone; /* Reset to defaults everytime orbit-zone is used */ diff --git a/src/scss/_orbit-zone_theme.scss b/src/scss/_orbit-zone_theme.scss index 8f83512..e69de29 100644 --- a/src/scss/_orbit-zone_theme.scss +++ b/src/scss/_orbit-zone_theme.scss @@ -1,9 +0,0 @@ -/* - .orbital-zone theme - - .orbital-zone { - Your theme setting here - } - - -*/ diff --git a/src/scss/_progress.scss b/src/scss/_progress.scss index bb8ceff..56a479f 100644 --- a/src/scss/_progress.scss +++ b/src/scss/_progress.scss @@ -1,9 +1,4 @@ -/* -## -See o-progress docs in web-component docs. - -*/ o-progress { container-name: oprogress; r: var(--o-radius); diff --git a/src/scss/_progress_theme.scss b/src/scss/_progress_theme.scss index 5ec6363..8b13789 100644 --- a/src/scss/_progress_theme.scss +++ b/src/scss/_progress_theme.scss @@ -1,7 +1 @@ -/* - theme - - o-progress { - Your theme setting here - } -*/ + diff --git a/src/scss/_radial-layout.scss b/src/scss/_radial-layout.scss index 89fb415..5c5344e 100644 --- a/src/scss/_radial-layout.scss +++ b/src/scss/_radial-layout.scss @@ -1,86 +1,6 @@ @use './variables' as *; -/*! -## Orbit radial layout - -Orbit radial layout is the core of Orbit framework that offers a flexible, clean and simple way to design radial UI using just CSS and some optional vanilla web components crafted to improve dev UX. - -### Overview - -To create radial layouts using just CSS, it is neccesary to use CSS variables and do some maths. `.orbit` and `.orbit-*` have `--o-orbit-number` var to individualize their position according to the maximum number of orbits. Similarly, other elements such as `satellites`, `spokes`, `sectors`, and others use `--o-orbit-child-number` to be individualized. - -Besides that, `.orbit` and `.orbit-*` have `--o-angle` var that counts their child elements. - -### Mechanism - -The mechanism is straightforward: - -- `--o-orbit-number` informs where each `orbit` is placed, according to `.orbit-zone` length and maximum number of orbits. For example, with an `.orbit-zone` length of 500px and a maximum of 12 orbits, `orbit-4` will have 166.66 pixels of radius. - -- `--o-angle` is calculated depending on `.orbit` children number. For example, if an orbit has 3 satellites, `--o-angle` is 120deg). Finally, `--o-angle` is multiplied by `--o-orbit-child-number`. For example, satellite one will have 120deg, satellite two 240deg, and satellite three 360deg, and each satellite will be placed along its orbit at 166.66px. - -### Modifiers - -There are some modifiers to adjust orbit child distribution and make radial layout more flexible: - - - Utility class `.range-*`: To define the arc lenght. Default '360deg' - - Utility class `.from-*`: To define starting point. Default '0deg' - - Utility class `.grow-*x`: To increase size according number of orbits. Default 1. - - Utility class `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1. - - Utility class `.inner-orbit`: To place `.satellite` just below its orbit - - Utility class `.outer-orbit`: To place `.satellite` just above its orbit - - Utility class `.quarter-inner-orbit`: To place `.satellite` a 25% into its orbit. - - Utility class `.quarter-outer-orbit`: To place `.satellite` a 25% outer its orbit. - - Utility class `.ccw`: to invert arrange order of orbit child elements. Default clock-wise. - - Utility class `.fit-range`: Useful when range is inferior to 360deg to cover all range. - -### Layout rules - -Any Orbit project should be follow this simple rules: - -- Start with `.orbit-zone`. -- Add as many `.orbit`or `.orbit-*` as needed. -- Put `.satellite`, `o-sector`, `o-progress`,`o-label`,`.segment` or `.spoke` inside an `.orbit`. -- Orbits can be nested by adding `.orbit-zone` into `.satellite`. - -### Usage and Examples - -```html - -
-
-
-
-
-
-
-
-``` - -```html - -
- - - -
-``` - -```html - -
-
-
-
-
-
-
-``` - -*/ - -/* Orbits layout */ .orbit-0 { --o-orbit-number: 0.01; } diff --git a/src/scss/_satellite.scss b/src/scss/_satellite.scss index fd5fa6b..6c5650d 100644 --- a/src/scss/_satellite.scss +++ b/src/scss/_satellite.scss @@ -1,70 +1,4 @@ -/*! -## .satellite -Elements with `.satellite` are placed along an `.orbit` or `.orbit-*` serving as content place and/or to nest `.orbits` using `.orbit-zone`. -By default up to 24 satellites can be placed in an orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`. - -### Content -Satellites are suitable to render different content. It is desirable to use `.capsule` inside a `.satellite` to put content. - -### Shapes - -Satellite provides an unstyled circle shape, but it can be easily changed according project needs. - -A few set of shapes utilities are provided (`.circle`, `.box`, `.rounded-box`). Nevertheless, users can set any shapes using svg, images, etc. At this instance, Orbit is focused on setting a radial layout, not in UI styles. - -### Customization - - - Utility class `.range-*`: Default '360deg' - - Utility class `.from-*`: Default '0deg' - - Utility class `.grow-*x`: To increase size according number of orbits. Default 1. - - Utility class `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1. - - Utility class `.inner-orbit`: To place `.satellite` just below its orbit - - Utility class `.outer-orbit`: To place `.satellite` just above its orbit - - Utility class `.quarter-inner-orbit`: To place `.satellite` a 25% into its orbit. - - Utility class `.quarter-outer-orbit`: To place `.satellite` a 25% outer its orbit. - - - CSS styles. User can customize `.satellite` by adding CSS properties to it. - -### Usage - -- This renders six satellites with different properties -```html -
-
-
- Change volume -
-
-
-
-
-
-
-
-``` - -- This renders two satellites. One of which nests `.orbital-zone` with some orbits -```html -
-
-
-
-
-
-
-
-
-
-``` - -**Important:** - -- `.satellite` can only be placed into a parent `.orbit` or `.orbit-*` -- There is no limit for nesting orbit-zone in satellites. - - -*/ .satellite { container-name: satellite; --o-angle-composite: (var(--o-angle) * var(--o-orbit-child-number) var(--o-offset, + 270deg)) * var(--o-direction, 1); diff --git a/src/scss/_satellite_theme.scss b/src/scss/_satellite_theme.scss index 1d7c5ee..0ec9417 100644 --- a/src/scss/_satellite_theme.scss +++ b/src/scss/_satellite_theme.scss @@ -1,6 +1,4 @@ -/* - .satellite theme -*/ + .satellite { background-color: var(--o-color-white); border: 1px solid var(--o-gray); diff --git a/src/scss/_sector.scss b/src/scss/_sector.scss index 96f227d..6fc05c1 100644 --- a/src/scss/_sector.scss +++ b/src/scss/_sector.scss @@ -1,10 +1,5 @@ @use './variables' as *; -/* -## -See o-sector docs in web-component file. - -*/ o-sector { --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1); container-name: osector; diff --git a/src/scss/_sector_theme.scss b/src/scss/_sector_theme.scss index ebe724e..139597f 100644 --- a/src/scss/_sector_theme.scss +++ b/src/scss/_sector_theme.scss @@ -1,16 +1,2 @@ -@use './variables' as *; -/* - o-sector theme -*/ -o-sector path { - //stroke-opacity: 0.5; - //border: 1px solid purple; -} - -o-sector path:hover { - stroke: red; - // fill: red; - cursor: pointer; -} diff --git a/src/scss/_segment.scss b/src/scss/_segment.scss index 95bd651..bbfe499 100644 --- a/src/scss/_segment.scss +++ b/src/scss/_segment.scss @@ -1,41 +1,4 @@ -/*! -## .segment -This class renders a segment that if it used with other segment renders a regular polygon figure. By default there are 24 segments per orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`. - -### Customization - -It has some special classes and css variables to customize it: - - - Class utility `.range-*`: Default '360deg' - - Class utility `.from-*`: Default '0deg' - - Class utility `.grow-*x`: To increase size according number of orbits. Default 1. - - Class utility `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1. - - Class utility `.inner-orbit`: To place `.segment` just below its orbit - - Class utility `.outer-orbit`: To place `.segment` just above its orbit - - - CSS styles. User can customize `.segment` by adding CSS properties to it. - -### Usage - -This render a regular pentagon -```html -
-
-
-
-
-
-
-``` - -**Important:** `.segment` can only be placed into a parent `.orbit` or `.orbit-*` - -### TO-DO - -- Check is all utilities go with segment. If not create visual aids - -*/ .segment { container-name: segment; diff --git a/src/scss/_segment_theme.scss b/src/scss/_segment_theme.scss index f286d4e..80a7ed3 100644 --- a/src/scss/_segment_theme.scss +++ b/src/scss/_segment_theme.scss @@ -1,6 +1,4 @@ -/* - .segment theme -*/ + .segment { border: none; background: var(--o-color-black); diff --git a/src/scss/_settings.scss b/src/scss/_settings.scss index d3e1c6d..1f7fefb 100644 --- a/src/scss/_settings.scss +++ b/src/scss/_settings.scss @@ -1,52 +1,4 @@ @use './variables' as *; -/*! - -## Orbit initial css variable declaration - -When start a new Orbit project following css variables are declared: - -```css -:root { - --o-from: 0deg; - --o-range: 360deg; - --o-ellipse-x: 1; - --o-ellipse-y: 1; -} -``` - -**Important:** Orbit can have multiples instances in same project. If your want different initial setup for some instances css variables can be redeclare at first `.orbital-zone` - -```css -.instance-1 { - --o-from: 90deg; - --o-range: 360deg; - --o-ellipse-x: 1; - --o-ellipse-y: 1; -} - -.instance-2 { - --o-from: 0deg; - --o-range: 1800deg; - --o-ellipse-x: 0.8; - --o-ellipse-y: 1; -} -``` - -```html -
-
- -
-
-``` - -*/ -:root { - --o-from: 0deg; - --o-range: 360deg; - --o-ellipse-x: 1; - --o-ellipse-y: 1; -} /* Orbit basic reset */ diff --git a/src/scss/_spoke.scss b/src/scss/_spoke.scss index fcfc6c0..e0c09ff 100644 --- a/src/scss/_spoke.scss +++ b/src/scss/_spoke.scss @@ -1,37 +1,4 @@ -/*! -## .spoke -This class renders a perpendicular dash line along an orbit. By default there are 24 spokes per orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`. - -### Customization - -It has some special classes and css variables to customize it: - - - Utility class `.range-*`: Default '360deg' - - Utility class `.from-*`: Default '0deg' - - Utility class `.grow-*x`: To increase size according number of orbits. Default 1. - - Utility class `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1. - - Utility class `.inner-orbit`: To place `.spoke` just below its orbit - - Utility class `.outer-orbit`: To place `.spoke` just above its orbit - - Utility class `.quarter-inner-orbit`: To place `.spoke` a 25% into its orbit. - - Utility class `.quarter-outer-orbit`: To place `.spoke` a 25% outer its orbit. - - - CSS styles. User can customize `.spoke` by adding CSS properties to it. - -### Usage - -```html -
-
-
-
-
-
-``` - -**Important:** `.spoke` can only be placed into a parent `.orbit` or `.orbit-*` - -*/ .spoke { container-name: spoke; diff --git a/src/scss/_spoke_theme.scss b/src/scss/_spoke_theme.scss index c5e4bf9..3611865 100644 --- a/src/scss/_spoke_theme.scss +++ b/src/scss/_spoke_theme.scss @@ -1,6 +1,4 @@ -/* - .vector theme -*/ + .spoke { border: none; background: var(--o-color-black); diff --git a/src/scss/_support.scss b/src/scss/_support.scss index 5332940..13be9c5 100644 --- a/src/scss/_support.scss +++ b/src/scss/_support.scss @@ -1,33 +1,6 @@ @use './variables' as *; -/*! -## Orbit support and compliance checks - -Orbit provides a comprehensive set of rules and visual aids in CSS to assist developers in enhancing user experience. These guidelines ensure adherence to best practices and optimize the utilization of Orbit's features. - -### Checking browser support for `has()` CSS Rule - -Before implementing features reliant on the `has()` CSS rule, it's essential to confirm browser compatibility. Orbit includes checks to verify support for this rule, alerting developers if it's unavailable in the targeted browser environment. - -### Checking browser support for `context-stroke` - -Some browsers doesn't support `context-stroke` which is used to add some fancy ending markers in `o-sector` and `o-progress`. Orbit will alert this porblem and offer a quick-fix. - -### Usage Limitation of `o-sector`, `o-label`, and `o-progress` - -For optimal functionality, `o-sector`, `o-label`, and `o-progress` should only be applied within circular orbits. As Orbit currently doesn't support elliptical shapes, these web-components will be hidden if detected within incompatible orbit shapes. - -### Visual Warning for Invalid Nested Elements - -Orbit incorporates visual cues to identify and warn developers of invalid nested elements within orbit structures: - -- **Invalid Child Elements within `.orbit-zone`:** Orbit detects and notifies developers if `.orbit-zone` contains invalid direct child elements. Only `.orbit` or `.orbit-*` elements are permissible within `.orbit-zone`. - -- **Invalid Child Elements within `.satellite`:** Similarly, Orbit checks for and alerts developers if `.satellite` includes invalid direct child elements. Only `.orbit-zone` elements are permitted within `.satellite`. - - -*/ /* Check Firefox has() support */ @supports not selector(:has(a)) { .orbit-zone { diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss index 58d532e..4e60632 100644 --- a/src/scss/_utilities.scss +++ b/src/scss/_utilities.scss @@ -1,28 +1,5 @@ @use './variables' as *; -/*! -## Orbit utilities - -There is a small set of CSS utilities to use with some orbit classes and componentes: - - - **.orbit-zone aligment utilities** - - `.center`, `center-left`, `.center-right`, `.top-left`, `.top-center`, `.top-right`, `.bottom-left`, `.bottom-center`, `.bottom-right` - - **.orbit or .orbit-* child elements utilities (satellite, spoke, segment, o-sector, o-progress)** - - `.from-*`: To set a starting angle point. From 0 - 360deg. Default 0deg. - - `.range-*`: To set a limit to distribute elements. From 0 - 360deg. Default 360deg. - - `.angle-*`: To set an angle point to place elements. From 0 - 360deg. (not applies to o-progress) - - **Satellite, spoke, segment, o-sector, o-progress utilites** - - `.grow-*x`: To increase size according number of orbits. Default 1. - - `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1. - - `.inner-orbit`: To place element just below its orbit. - - `.outer-orbit`: To place element just above its orbit. - - **satellite utilities** - - `.circle` to render a circle shape. Default - - `.rounded-box` to render a rounded box shape. - - `.box` to render a box shape. - - **o-sector utilities** - - `.gap-*` applied on `.orbit` or `.orbit-*` or in ``: to set a gap space. Default '0' - -*/ + /* .orbit-zone aligment utilities */ .at-top-left {