Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS custom properties documentation #14850

Closed
86 tasks done
camwiegert opened this issue Jul 24, 2018 · 4 comments
Closed
86 tasks done

CSS custom properties documentation #14850

camwiegert opened this issue Jul 24, 2018 · 4 comments
Assignees
@camwiegert @brandyscarney
Labels
package: core @ionic/core package

Comments

@camwiegert
Copy link
Contributor

camwiegert commented Jul 24, 2018 •
edited
Loading

As theming is now based on CSS custom properties, we need to properly document them. We'll be using comments in the source to do so:

/** @prop --max-width: Max width of the alert */
  • action-sheet
  • alert
  • anchor
  • avatar
  • back-button
  • backdrop
  • badge
  • button
  • buttons
  • card-content
  • card-header
  • card-subtitle
  • card-title
  • card
  • checkbox
  • chip-button
  • chip-icon
  • chip
  • col
  • content
  • datetime
  • fab-button
  • fab-list
  • fab
  • footer
  • grid
  • header
  • icon
  • img
  • infinite-scroll-content
  • infinite-scroll
  • input
  • item-divider
  • item-group
  • item-option
  • item-options
  • item-sliding
  • item
  • label
  • list-header
  • list
  • loading
  • menu-button
  • menu-toggle
  • menu
  • modal
  • nav
  • note
  • picker-column
  • picker
  • popover
  • radio-group
  • radio
  • range-knob
  • range
  • refresher-content
  • refresher
  • reorder-group
  • reorder
  • ripple-effect
  • row
  • scroll
  • searchbar
  • segment-button
  • segment
  • select-option
  • select-popover
  • select
  • skeleton-text
  • slide
  • slides
  • spinner
  • split-pane
  • tab-button
  • tab-bar
  • tab
  • tabs
  • tap-click
  • text
  • textarea
  • thumbnail
  • title
  • toast
  • toggle
  • toolbar
  • virtual-scroll
@camwiegert camwiegert added the package: core @ionic/core package label Jul 24, 2018
@camwiegert camwiegert changed the title Core CSS custom properties documentation CSS custom properties documentation Jul 24, 2018
@camwiegert camwiegert added the css label Jul 24, 2018
@adamdbradley
Copy link
Contributor

Ok with a format like jsdocs?

/**
 * @prop --max-width: Max width of the alert
 * @prop --min-width: Min width of the alert
 */

@camwiegert camwiegert mentioned this issue Aug 2, 2018
Closed
91 tasks
brandyscarney added a commit that referenced this issue Aug 8, 2018
@brandyscarney
fix(anchor): add custom properties and make sure color works properly
3b0e627 
references #14850
brandyscarney added a commit that referenced this issue Aug 8, 2018
@brandyscarney
docs(css): add custom properties documentation
c5a0076 
references #14850
brandyscarney added a commit that referenced this issue Aug 8, 2018
@brandyscarney
fix(anchor): add custom properties and make sure color works properly
8fef263 
references #14850
brandyscarney added a commit that referenced this issue Aug 8, 2018
@brandyscarney
fix(badge): add custom properties and make sure color works properly
9beca98 
references #14850
camwiegert added a commit that referenced this issue Aug 8, 2018
@camwiegert
fix(toggle): add and document custom properties
773c2c2 
references #14850
camwiegert added a commit that referenced this issue Aug 8, 2018
@camwiegert
fix(toast): add and document custom properties
5f6f6a1 
references #14850
camwiegert added a commit that referenced this issue Aug 8, 2018
@camwiegert
fix(thumbnail): add and document custom properties
c88e1ad 
references #14850
brandyscarney added a commit that referenced this issue Aug 8, 2018
@brandyscarney
fix(avatar): document and add custom properties
6738ab7 
references #14850
camwiegert pushed a commit that referenced this issue Aug 8, 2018
@brandyscarney @camwiegert
fix(avatar): document and add custom properties
f1389f7 
references #14850
camwiegert added a commit that referenced this issue Aug 9, 2018
@camwiegert
fix(spinner): add and document custom properties
da6df2a 
references #14850
camwiegert added a commit that referenced this issue Aug 10, 2018
@camwiegert
fix(segment-button): add and document custom properties
85ffe01 
references #14850
brandyscarney added a commit that referenced this issue Aug 13, 2018
@brandyscarney
fix(select): apply proper styles for stacked/floating selects
42ca99d 
adds padding attributes to select to style the correct padding with a
stacked/floating label

fixes #15140 references #14850
brandyscarney added a commit that referenced this issue Aug 14, 2018
@brandyscarney
fix(card-subtitle): add and document custom CSS properties
7050039 
references #14850 references #14808
brandyscarney added a commit that referenced this issue Aug 14, 2018
@brandyscarney
fix(card-title): add and document custom CSS properties
1ad9818 
references #14850 references #14808
brandyscarney added a commit that referenced this issue Aug 14, 2018
@brandyscarney
fix(card): add custom CSS properties and remove css overrides on item
5ed2201 
references #14850 references #14808
fixes #9198 fixes #12646
brandyscarney added a commit that referenced this issue Aug 14, 2018
@brandyscarney
fix(checkbox): document and add custom CSS properties
3e3cc6c 
references #14850 references #14808
@brandyscarney
Copy link
Member

As part of this issue we are also resolving the following issues:

brandyscarney added a commit that referenced this issue Aug 16, 2018
@brandyscarney
fix(chip): add and document custom properties
07e99a1 
references #14850
references #14853
references #14808
brandyscarney added a commit that referenced this issue Aug 16, 2018
@brandyscarney
fix(content): document and add custom properties
0372aec 
references #14850 references #14808 references #14853
brandyscarney added a commit that referenced this issue Aug 16, 2018
@brandyscarney
docs(grid): document the custom properties for all grid vars
0ef0662 
references #14850
camwiegert added a commit that referenced this issue Aug 17, 2018
@camwiegert
fix(segment): add and document custom properties
08c6c97 
references #14850
references #14808
closes #14854
camwiegert added a commit that referenced this issue Aug 21, 2018
@camwiegert
fix(split-pane): add and document custom properties
9104850 
references #14850
camwiegert added a commit that referenced this issue Aug 21, 2018
@camwiegert
fix(select): add and document custom properties
88613ff 
references #14850
camwiegert added a commit that referenced this issue Aug 30, 2018
@camwiegert
docs(note): document custom properties
88ab4f9 
references #14850
brandyscarney added a commit that referenced this issue Sep 4, 2018
@brandyscarney
docs(button): document the custom properties
5d36d29 
references #14850
@brandyscarney brandyscarney mentioned this issue Sep 4, 2018
Merged
brandyscarney added a commit that referenced this issue Sep 5, 2018
@brandyscarney
fix(button): remove unecessary css and add dark toolbar test
ea81a21 
references #14850
brandyscarney added a commit that referenced this issue Sep 5, 2018
@brandyscarney
fix(button): add custom properties and remove --ion-color overrides (#…
3af4361 
…15463)

- adds custom properties 
- removes the overrides of `--ion-color-*` variables
- documents the properties

references #14808 references #14853 references #14850
@brandyscarney brandyscarney mentioned this issue Sep 6, 2018
Closed
camwiegert added a commit that referenced this issue Sep 6, 2018
@camwiegert
fix(searchbar): add and document custom properties
7f57e02 
references #14850
camwiegert added a commit that referenced this issue Sep 7, 2018
@camwiegert
fix(list-header): add and document custom properties
5ccc1fd 
references #14850
references #14853
references #14808
brandyscarney added a commit that referenced this issue Sep 18, 2018
@brandyscarney
fix(datetime): convert to shadow and fix broken styles
fa77017 
- adds shadow
- adds and documents css variables
- gets placeholder color working
- gets multiple datetimes in an item working

fixes #15547 references #14850
camwiegert added a commit that referenced this issue Sep 20, 2018
@camwiegert
docs(item): document custom properties
2dd4bdb 
references #14850
closes #15648
camwiegert added a commit that referenced this issue Sep 20, 2018
@camwiegert
fix(item-option): add and document custom properties
2a040e0 
references #14850
references #14808
closes #14943
camwiegert added a commit that referenced this issue Sep 24, 2018
@camwiegert
fix(item-divider): add and document custom properties
06cb138 
references #14850
references #14808
pull bot pushed a commit to peterennis/ionic that referenced this issue Sep 24, 2018
@brandyscarney
fix(back-button): add and document custom properties
b3aebb8 
removes use of `--ion-color-*` variables references ionic-team#14808
documents custom properties references ionic-team#14850
uses `—background` vars to prevent overriding the color css references
ionic-team#14853
camwiegert added a commit that referenced this issue Oct 5, 2018
@camwiegert
fix(input): add and document custom properties
23df042 
references #14850
brandyscarney added a commit that referenced this issue Oct 10, 2018
@brandyscarney
fix(label): add color variable, examples to test and document
b485eba 
references #14853 references #14850
brandyscarney added a commit that referenced this issue Oct 10, 2018
@brandyscarney
fix(title): allow color to be set for title without attribute
a9b3064 
references #14853 references #14850
brandyscarney added a commit that referenced this issue Oct 11, 2018
@brandyscarney
fix(fab-button): add and document css properties
098bd82 
references #14853 references #14850 closes #14808
@hiepxanh
Copy link
Contributor

please update for tab, it is very important

@camwiegert camwiegert mentioned this issue Nov 5, 2018
Merged
camwiegert added a commit that referenced this issue Nov 6, 2018
@camwiegert
docs(menu): document custom properties (#16249)
6d3042e 
references #14850
camwiegert added a commit that referenced this issue Nov 6, 2018
@camwiegert
docs(action-sheet): document custom properties
baad5ea 
references #14850
@camwiegert camwiegert mentioned this issue Nov 6, 2018
Merged
camwiegert added a commit that referenced this issue Nov 6, 2018
@camwiegert
docs(action-sheet): document custom properties (#16250)
2fcff2c 
references #14850
camwiegert added a commit that referenced this issue Nov 6, 2018
@camwiegert
docs(alert): document custom properties
338af6c 
references #14850
@camwiegert camwiegert mentioned this issue Nov 6, 2018
Merged
camwiegert added a commit that referenced this issue Nov 6, 2018
@camwiegert
docs(alert): document custom properties (#16251)
93ae2c8 
references #14850
brandyscarney added a commit that referenced this issue Nov 8, 2018
@brandyscarney
fix(segment): fix background states and document properties
bedc7c6 
references #14850 references #14853
@ionitron-bot
Copy link

ionitron-bot bot commented Dec 6, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Dec 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@camwiegert camwiegert

@brandyscarney brandyscarney

Labels
package: core @ionic/core package
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add CSS custom property documentation ionic-team/ionic-framework
4 participants
@adamdbradley @camwiegert @brandyscarney @hiepxanh