@graupl/graupl 1.0.0-beta.5 → 1.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/css/base/button.css +1 -1
  3. package/dist/css/base/button.css.map +1 -1
  4. package/dist/css/base/link.css +1 -1
  5. package/dist/css/base/link.css.map +1 -1
  6. package/dist/css/base.css +1 -1
  7. package/dist/css/base.css.map +1 -1
  8. package/dist/css/component/menu.css +1 -1
  9. package/dist/css/component/menu.css.map +1 -1
  10. package/dist/css/component/navigation.css +1 -1
  11. package/dist/css/component/navigation.css.map +1 -1
  12. package/dist/css/component.css +1 -1
  13. package/dist/css/component.css.map +1 -1
  14. package/dist/css/graupl.css +1 -1
  15. package/dist/css/graupl.css.map +1 -1
  16. package/dist/css/layout/container.css +1 -1
  17. package/dist/css/layout/container.css.map +1 -1
  18. package/dist/css/layout.css +1 -1
  19. package/dist/css/layout.css.map +1 -1
  20. package/dist/css/utilities/background.css +1 -1
  21. package/dist/css/utilities/background.css.map +1 -1
  22. package/dist/css/utilities/height.css +1 -1
  23. package/dist/css/utilities/height.css.map +1 -1
  24. package/dist/css/utilities/position.css +2 -0
  25. package/dist/css/utilities/position.css.map +1 -0
  26. package/dist/css/utilities/spacing.css +1 -1
  27. package/dist/css/utilities/spacing.css.map +1 -1
  28. package/dist/css/utilities/visually-hidden.css +1 -1
  29. package/dist/css/utilities/visually-hidden.css.map +1 -1
  30. package/dist/css/utilities/width.css +1 -1
  31. package/dist/css/utilities/width.css.map +1 -1
  32. package/dist/css/utilities/z-index.css +2 -0
  33. package/dist/css/utilities/z-index.css.map +1 -0
  34. package/dist/css/utilities.css +1 -1
  35. package/dist/css/utilities.css.map +1 -1
  36. package/docs/.vitepress/config.js +30 -1
  37. package/docs/.vitepress/theme/custom.scss +14 -15
  38. package/docs/compiling-graupl.md +6 -5
  39. package/docs/utilities/alignment.md +405 -0
  40. package/docs/utilities/background.md +186 -0
  41. package/docs/utilities/border.md +262 -0
  42. package/docs/utilities/color.md +342 -0
  43. package/docs/utilities/display.md +3 -0
  44. package/docs/utilities/flex.md +3 -0
  45. package/docs/utilities/gradient.md +3 -0
  46. package/docs/utilities/height.md +3 -0
  47. package/docs/utilities/inset.md +3 -0
  48. package/docs/utilities/justification.md +3 -0
  49. package/docs/utilities/list.md +3 -0
  50. package/docs/utilities/order.md +3 -0
  51. package/docs/utilities/position.md +3 -0
  52. package/docs/utilities/ratio.md +3 -0
  53. package/docs/utilities/responsive-classes.md +3 -0
  54. package/docs/utilities/spacing.md +3 -0
  55. package/docs/utilities/typography.md +3 -0
  56. package/docs/utilities/visibility.md +3 -0
  57. package/docs/utilities/visually-hidden.md +3 -0
  58. package/docs/utilities/width.md +3 -0
  59. package/docs/utilities/z-index.md +3 -0
  60. package/index.html +82 -0
  61. package/package.json +1 -1
  62. package/scss/utilities/z-index.scss +3 -0
  63. package/src/scss/_defaults.scss +6 -0
  64. package/src/scss/layout/container/_defaults.scss +10 -0
  65. package/src/scss/layout/container/_index.scss +472 -1
  66. package/src/scss/layout/container/_variables.scss +22 -0
  67. package/src/scss/utilities/_index.scss +1 -0
  68. package/src/scss/utilities/background/_defaults.scss +0 -35
  69. package/src/scss/utilities/background/_index.scss +0 -35
  70. package/src/scss/utilities/z-index/_defaults.scss +34 -0
  71. package/src/scss/utilities/z-index/_index.scss +140 -0
  72. package/src/scss/utilities/z-index/_variables.scss +6 -0
  73. package/dist/css/utilities/postion.css +0 -2
  74. package/dist/css/utilities/postion.css.map +0 -1
  75. /package/scss/utilities/{postion.scss → position.scss} +0 -0
package/dist/css/layout/container.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer graupl.layout{.container{display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0),var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width,min(var(--graupl-container-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-container-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)),var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0),var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container>.container{grid-column:1/-1;grid-template-columns:subgrid}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container>.contain{display:grid;grid-template-columns:subgrid}.container>.contain>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .breakout{grid-column:breakout}.container .feature{grid-column:feature}.container .full-width{grid-column:full-width}}
1
+ @layer graupl.layout{.container{display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0),var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start] var(--graupl-container-content-section-width,min(var(--graupl-container-content-section-min-width,calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-container-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)),var(--graupl-container-content-section-max-width,var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch))))) [content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0),var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container>.container{grid-column:1/-1;grid-template-columns:subgrid}.container>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .contain{display:grid;grid-template-columns:subgrid}.container .contain>:not(.container,.breakout,.full-width,.feature){grid-column:content}.container .breakout{grid-column:breakout}.container .feature{grid-column:feature}.container .full-width{grid-column:full-width}.container.sidebars .sidebar-left{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left){grid-column:content}.container.sidebars .sidebar-right{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content-right{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .content-right .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-right),.container.sidebars .content-right>:not(.container,.breakout,.full-width,.feature,.sidebar-right){grid-column:content}.container.sidebars .content-left{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .content-left .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .content-left>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}.container.sidebars .inner-content{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.container.sidebars .inner-content .contain>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right),.container.sidebars .inner-content>:not(.container,.breakout,.full-width,.feature,.sidebar-left,.sidebar-right){grid-column:content}@media screen and (108ch <= width){.container.sidebars{grid-template-columns:[full-width-start] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [feature-start] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0),var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [breakout-start] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [content-start sidebar-left-start content-left-start] var(--graupl-container-sidebar-left-section-width,var(--graupl-container-sidebar-width,20ch)) [sidebar-left-end inner-content-start content-right-start] var(--graupl-container-inner-content-section-width,calc(var(--graupl-container-content-section-width, min(var(--graupl-container-content-section-min-width, calc(100% - var(--graupl-container-full-width-section-min-width, var(--graupl-container-gap, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))) * 2 - var(--graupl-container-feature-section-min-width, 0rem) * 2 - var(--graupl-container-breakout-section-min-width, 0rem) * 2)), var(--graupl-container-content-section-max-width, var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))))) - var(--graupl-container-sidebar-left-section-width, var(--graupl-container-sidebar-width, 20ch)) - var(--graupl-container-sidebar-right-section-width, var(--graupl-container-sidebar-width, 20ch)))) [content-left-end inner-content-end sidebar-right-start] var(--graupl-container-sidebar-right-section-width,var(--graupl-container-sidebar-width,20ch)) [content-right-end sidebar-right-end content-end] var(--graupl-container-breakout-section-width,minmax(var(--graupl-container-breakout-section-min-width,0),var(--graupl-container-breakout-section-max-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)))) [breakout-end] var(--graupl-container-feature-section-width,minmax(var(--graupl-container-feature-section-min-width,0),var(--graupl-container-feature-section-max-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)))) [feature-end] var(--graupl-container-full-width-section-width,minmax(var(--graupl-container-full-width-section-min-width,var(--graupl-container-gap,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer, 1rem))))),var(--graupl-container-full-width-section-max-width,1fr))) [full-width-end]}.container.sidebars .sidebar-left{grid-row:1}.container.sidebars .sidebar-left:not(.container),.container.sidebars .sidebar-left:not(.container) .breakout,.container.sidebars .sidebar-left:not(.container) .container,.container.sidebars .sidebar-left:not(.container) .feature,.container.sidebars .sidebar-left:not(.container) .full-width{grid-column-end:sidebar-left-end}.container.sidebars .sidebar-left .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .sidebar-left>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-left}.container.sidebars .sidebar-right{grid-row:1}.container.sidebars .sidebar-right:not(.container),.container.sidebars .sidebar-right:not(.container) .breakout,.container.sidebars .sidebar-right:not(.container) .container,.container.sidebars .sidebar-right:not(.container) .feature,.container.sidebars .sidebar-right:not(.container) .full-width{grid-column-start:sidebar-right-start}.container.sidebars .sidebar-right .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .sidebar-right>:not(.container,.breakout,.full-width,.feature){grid-column:sidebar-right}.container.sidebars .content-right{grid-row:1}.container.sidebars .content-right:not(.container),.container.sidebars .content-right:not(.container) .breakout,.container.sidebars .content-right:not(.container) .container,.container.sidebars .content-right:not(.container) .feature,.container.sidebars .content-right:not(.container) .full-width{grid-column-start:content-right-start}.container.sidebars .content-right .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .content-right>:not(.container,.breakout,.full-width,.feature){grid-column:content-right}.container.sidebars .content-left{grid-row:1}.container.sidebars .content-left:not(.container),.container.sidebars .content-left:not(.container) .breakout,.container.sidebars .content-left:not(.container) .container,.container.sidebars .content-left:not(.container) .feature,.container.sidebars .content-left:not(.container) .full-width{grid-column-end:content-left-end}.container.sidebars .content-left .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .content-left>:not(.container,.breakout,.full-width,.feature){grid-column:content-left}.container.sidebars .inner-content{grid-row:1}.container.sidebars .inner-content .contain>:not(.container,.breakout,.full-width,.feature),.container.sidebars .inner-content:not(.container),.container.sidebars .inner-content:not(.container) .breakout,.container.sidebars .inner-content:not(.container) .container,.container.sidebars .inner-content:not(.container) .feature,.container.sidebars .inner-content:not(.container) .full-width,.container.sidebars .inner-content>:not(.container,.breakout,.full-width,.feature){grid-column:inner-content}}}
2
2
  /*# sourceMappingURL=container.css.map */
package/dist/css/layout/container.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI,qBC2EF,WACE,YAAA,CACA,m5FChFF,CD8FE,sBACE,gBAAA,CACA,6BC5FJ,CDmGE,2DAME,mBCnGJ,CD0GE,oBACE,YAAA,CACA,6BCxGJ,CD2GI,oEAME,mBC3GN,CDkHE,qBACE,oBChHJ,CDoHE,oBACE,mBClHJ,CDsHE,uBACE,sBCpHJ,CACF","file":"container.css"}
1
+ {"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/layout/container/_index.scss","container.css","../../../src/scss/mixins/_screen.scss"],"names":[],"mappings":"AASI,qBCwIF,WACE,YAAA,CACA,m5FC3IF,CDyJE,sBACE,gBAAA,CACA,6BCvJJ,CD8JE,2DAME,mBC9JJ,CDqKE,oBACE,YAAA,CACA,6BCnKJ,CDsKI,oEAME,mBCtKN,CD6KE,qBACE,oBC3KJ,CD+KE,oBACE,mBC7KJ,CDiLE,uBACE,sBC/KJ,CDqLI,kCACE,YAAA,CACA,gBAAA,CACA,6BCnLN,CDsLM,gGAOE,mBCtLR,CD2LI,mCACE,YAAA,CACA,gBAAA,CACA,6BCzLN,CD4LM,kGAOE,mBC5LR,CDiMI,mCACE,YAAA,CACA,gBAAA,CACA,6BC/LN,CDkNQ,6MAOE,mBC3MV,CDiNI,kCACE,YAAA,CACA,gBAAA,CACA,6BC/MN,CDmOQ,uOAQE,mBC3NV,CDiOI,mCACE,YAAA,CACA,gBAAA,CACA,6BC/NN,CDmPQ,yOAQE,mBC3OV,CC5GA,mCF+VI,oBACE,mhHChPJ,CD6PI,kCACE,UC3PN,CDoQQ,oSAKE,gCClQV,CDwRQ,6KAME,wBClRV,CDwRI,mCACE,UCtRN,CD+RQ,ySAKE,qCC7RV,CDmTQ,+KAME,yBC7SV,CDmTI,mCACE,UCjTN,CD0TQ,ySAKE,qCCxTV,CD8UQ,+KAME,yBCxUV,CD8UI,kCACE,UC5UN,CDqVQ,oSAKE,gCCnVV,CDyWQ,6KAME,wBCnWV,CDyWI,mCACE,UCvWN,CD2YQ,wdAME,yBC9XV,CACF,CACF","file":"container.css"}