diff --git a/static/usage/v7/datetime/theming/angular/example_component_html.md b/static/usage/v7/datetime/theming/angular/example_component_html.md new file mode 100644 index 00000000000..0a38b1bc5b6 --- /dev/null +++ b/static/usage/v7/datetime/theming/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/theming/angular/global_css.md new file mode 100644 index 00000000000..4ec3d3ecdf9 --- /dev/null +++ b/static/usage/v7/datetime/theming/angular/global_css.md @@ -0,0 +1,66 @@ +```css +/* Core CSS required for Ionic components to work properly */ +@import '~@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '~@ionic/angular/css/normalize.css'; +@import '~@ionic/angular/css/structure.css'; +@import '~@ionic/angular/css/typography.css'; +@import '~@ionic/angular/css/display.css'; + +/* Optional CSS utils that can be commented out */ +@import '~@ionic/angular/css/padding.css'; +@import '~@ionic/angular/css/float-elements.css'; +@import '~@ionic/angular/css/text-alignment.css'; +@import '~@ionic/angular/css/text-transformation.css'; +@import '~@ionic/angular/css/flex-utils.css'; + +:root { + --ion-color-rose: #831843; + --ion-color-rose-rgb: 131, 24, 67; + --ion-color-rose-contrast: #ffffff; + --ion-color-rose-contrast-rgb: 255, 255, 255; + --ion-color-rose-shade: #73153b; + --ion-color-rose-tint: #8f2f56; + + --ion-text-color: #881337; + --ion-text-color-rgb: 136, 19, 55; + + --ion-color-step-50: #f9e6e9; + --ion-color-step-100: #f3dbdf; + --ion-color-step-150: #edd0d6; + --ion-color-step-200: #e7c5cd; + --ion-color-step-250: #e1bac3; + --ion-color-step-300: #dbaeba; + --ion-color-step-350: #d5a3b1; + --ion-color-step-400: #cf98a7; + --ion-color-step-450: #c98d9e; + --ion-color-step-500: #c48295; + --ion-color-step-550: #be778b; + --ion-color-step-600: #b86c82; + --ion-color-step-650: #b26178; + --ion-color-step-700: #ac566f; + --ion-color-step-750: #a64b66; + --ion-color-step-800: #a03f5c; + --ion-color-step-850: #9a3453; + --ion-color-step-900: #94294a; + --ion-color-step-950: #8e1e40; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/theming/demo.html new file mode 100644 index 00000000000..f2e502cfe56 --- /dev/null +++ b/static/usage/v7/datetime/theming/demo.html @@ -0,0 +1,76 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/theming/index.md b/static/usage/v7/datetime/theming/index.md new file mode 100644 index 00000000000..3ed5817346f --- /dev/null +++ b/static/usage/v7/datetime/theming/index.md @@ -0,0 +1,35 @@ +# TODO FW-4608 + +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v7/datetime/theming/javascript.md b/static/usage/v7/datetime/theming/javascript.md new file mode 100644 index 00000000000..3da768ccbb4 --- /dev/null +++ b/static/usage/v7/datetime/theming/javascript.md @@ -0,0 +1,54 @@ +```html + + + +``` diff --git a/static/usage/v7/datetime/theming/react/main_css.md b/static/usage/v7/datetime/theming/react/main_css.md new file mode 100644 index 00000000000..dccf6c7d370 --- /dev/null +++ b/static/usage/v7/datetime/theming/react/main_css.md @@ -0,0 +1,50 @@ +```css +:root { + --ion-color-rose: #831843; + --ion-color-rose-rgb: 131, 24, 67; + --ion-color-rose-contrast: #ffffff; + --ion-color-rose-contrast-rgb: 255, 255, 255; + --ion-color-rose-shade: #73153b; + --ion-color-rose-tint: #8f2f56; + + --ion-text-color: #881337; + --ion-text-color-rgb: 136, 19, 55; + + --ion-color-step-50: #f9e6e9; + --ion-color-step-100: #f3dbdf; + --ion-color-step-150: #edd0d6; + --ion-color-step-200: #e7c5cd; + --ion-color-step-250: #e1bac3; + --ion-color-step-300: #dbaeba; + --ion-color-step-350: #d5a3b1; + --ion-color-step-400: #cf98a7; + --ion-color-step-450: #c98d9e; + --ion-color-step-500: #c48295; + --ion-color-step-550: #be778b; + --ion-color-step-600: #b86c82; + --ion-color-step-650: #b26178; + --ion-color-step-700: #ac566f; + --ion-color-step-750: #a64b66; + --ion-color-step-800: #a03f5c; + --ion-color-step-850: #9a3453; + --ion-color-step-900: #94294a; + --ion-color-step-950: #8e1e40; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v7/datetime/theming/react/main_tsx.md b/static/usage/v7/datetime/theming/react/main_tsx.md new file mode 100644 index 00000000000..37e658cdcd1 --- /dev/null +++ b/static/usage/v7/datetime/theming/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v7/datetime/theming/vue.md b/static/usage/v7/datetime/theming/vue.md new file mode 100644 index 00000000000..32e682cfbc9 --- /dev/null +++ b/static/usage/v7/datetime/theming/vue.md @@ -0,0 +1,65 @@ +```html + + + + + +``` diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/basic/angular.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v7/range/basic/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html new file mode 100644 index 00000000000..55216a9dd4b --- /dev/null +++ b/static/usage/v7/range/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md new file mode 100644 index 00000000000..7da08dbd165 --- /dev/null +++ b/static/usage/v7/range/basic/index.md @@ -0,0 +1,10 @@ +# TODO FW-4608 + +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + \ No newline at end of file diff --git a/static/usage/v7/range/basic/javascript.md b/static/usage/v7/range/basic/javascript.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v7/range/basic/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/range/basic/react.md b/static/usage/v7/range/basic/react.md new file mode 100644 index 00000000000..ed85af943b5 --- /dev/null +++ b/static/usage/v7/range/basic/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md new file mode 100644 index 00000000000..421bea060e4 --- /dev/null +++ b/static/usage/v7/range/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +```