@curtissimo/elm-split-pane 1.0.0-alpha.0 → 1.0.0

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 (4) hide show
  1. package/README.md +37 -40
  2. package/build/styles/main.css +2 -0
  3. package/build/styles/main.css.map +1 -0
  4. package/package.json +7 -4
package/README.md CHANGED
@@ -1,54 +1,52 @@
1
- # Curtissimo.ElmSplit-pane
1
+ # Curtissimo.SplitPane
2
2
 
3
3
  [![Pipeline](https://gitlab.example.com/curtissimo/elm-split-pane/badges/main/pipeline.svg?ignore_skipped=true)](https://gitlab.com/curtissimo/elm-split-pane/-/pipelines/latest)
4
4
 
5
5
  A nestable split pane for Elm.
6
6
 
7
- <!-- Replace the link if you choose to use the GitLab Unique Domain feature. -->
8
7
  Check out the [live example](https://curtissimo.gitlab.io/elm-split-pane).
9
- Source for the examples can be found in the [`./examples`](./examples)
8
+ Source for the examples can be found in the [`./examples`](https://gitlab.com/curtissimo/elm-split-pane/-/tree/main/examples)
10
9
  directory.
11
10
 
12
11
  ## Design Goals
13
12
 
14
- > Adapted from Dillon Kearns' [design goals
15
- > advice](https://github.com/dillonkearns/idiomatic-elm-package-guide#explicitly-state-design-goals-in-your-readme):
16
- >
17
- > **What differentiates your project from any other project out there?**
18
- >
19
- > Since Elm
20
- > packages are reliable due to the nature of the elm language and its guarantees,
21
- > what makes Elm packages stick out more is not its reliability, but its design
22
- > philosophy. So we put the design philosophy as the first section after the
23
- > initial introduction.
24
- >
25
- > Writing out explicit design goals is a great idea even before you write any code
26
- > (of course you can always revise them). They serve as:
27
- >
28
- > - A reminder to the package author of the core principles during design
29
- > iteration
30
- > - A clear statement of goals to help users decide whether the library is a good
31
- > fit for them
32
- > - A reference point for conversations about feature requests that helps ground
33
- > the conversation in the basic goals of the library. This makes for a much more
34
- > empathetic conversation (for example, someone could have a great idea that's
35
- > not inline with the design goals of a library... in that case, perhaps a new
36
- > library could be created, OR a different solution could be considered that
37
- > honors the design goals of the library)
38
-
39
- ## Overview
40
-
41
- **Document the most common usage of your package with a code sample and BRIEF
42
- explanation.**
13
+ So, I needed a nestable split pane for an app I was building with the
14
+ following features:
15
+
16
+ - Sets the fewest style attributes possible in the DOM
17
+ - Provides CSS classes on child panes to indicate width
18
+ - Can handle absolute and relative measures
19
+ - Can handle nested split panes
20
+ - Can show and hide the secondary panes
21
+ - Can properly handle overflow
22
+ - Customizable via CSS
23
+
24
+ Turns out, that's a lot to ask of some split panes. There's a nice
25
+ version with
26
+ [whale9490/elm-split-pane](https://package.elm-lang.org/packages/whale9490/elm-split-pane/latest/),
27
+ but it unfortunately didn't meet the needs of what I wanted for the first,
28
+ second, and last items.
43
29
 
44
30
  ## Usage
45
31
 
46
- **Provide more documentation about the use of your package.**
32
+ The split pane relies on the size of the container that it's put in. So, either
33
+ set a fixed height/width on the container, or do some Grid Layout stuff (which
34
+ is what I do).
35
+
36
+ The following table shows the CSS variables available for customization with
37
+ their default values.
38
+
39
+ | Name | Default |
40
+ | --------------------------------------------------- | :-------: |
41
+ | `--curtissimo-split-pane-gutter-width` | `8px` |
42
+ | `--curtissimo-split-pane-gutter-border-color` | `#aaaaaa` |
43
+ | `--curtissimo-split-pane-gutter-handle-color` | `black` |
44
+ | `--curtissimo-split-pane-gutter-hover-color` | `#f5c264` |
45
+ | `--curtissimo-split-pane-gutter-hover-handle-color` | `#333333` |
47
46
 
48
47
  ### NPM Package
49
48
 
50
- This package relies on external
51
- styles.
49
+ This package relies on external styles.
52
50
 
53
51
  Install the package from NPM using the following command.
54
52
 
@@ -56,11 +54,10 @@ Install the package from NPM using the following command.
56
54
  npm install --save-dev @curtissimo/elm-split-pane
57
55
  ```
58
56
 
59
- Then, as part of your build process, include the external
60
- styles.
61
-
62
- To include the CSS, use the following import.
57
+ Then, as part of your build process, include the external
58
+ styles. To include the CSS, use the following import adapted to your
59
+ build's needs.
63
60
 
64
- ```css
61
+ ```css
65
62
  @import url(@curtissimo/elm-split-pane/main.css);
66
63
  ```
package/build/styles/main.css ADDED
@@ -0,0 +1,2 @@
1
+ .curtissimo-split-pane{--curtissimo-split-pane-gutter-width-default:8px;--curtissimo-split-pane-gutter-border-color-default:#aaa;--curtissimo-split-pane-gutter-handle-color-default:black;--curtissimo-split-pane-gutter-hover-color-default:#f5c264;--curtissimo-split-pane-gutter-hover-handle-color-default:#333;display:flex;overflow:hidden}@media screen and (prefers-color-scheme:dark){.curtissimo-split-pane{--curtissimo-split-pane-gutter-border-color-default:#aaa;--curtissimo-split-pane-gutter-handle-color-default:white;--curtissimo-split-pane-gutter-hover-handle-color-default:white}}.curtissimo-split-pane *{overflow:hidden}.curtissimo-split-pane-primary{flex-grow:1}.curtissimo-split-pane-primary,.curtissimo-split-pane-secondary{display:grid}.curtissimo-split-pane-secondary{flex-shrink:0}.curtissimo-split-pane-horizontal.curtissimo-split-pane-secondary-after{flex-direction:column}.curtissimo-split-pane-horizontal.curtissimo-split-pane-secondary-before{flex-direction:column-reverse}.curtissimo-split-pane-vertical.curtissimo-split-pane-secondary-after{flex-direction:row}.curtissimo-split-pane-vertical.curtissimo-split-pane-secondary-before{flex-direction:row-reverse}.curtissimo-split-pane-horizontal.curtissimo-split-pane-active,.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter{cursor:ns-resize}.curtissimo-split-pane-vertical.curtissimo-split-pane-active,.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter{cursor:ew-resize}.curtissimo-split-pane-gutter{-webkit-user-select:none;user-select:none;flex-shrink:0;display:grid;position:relative;overflow:visible}.curtissimo-split-pane-gutter-thick{border:1px solid var(--curtissimo-split-pane-gutter-handle-color,var(--curtissimo-split-pane-gutter-handle-color-default))}.curtissimo-split-pane-active>.curtissimo-split-pane-gutter-thick,.curtissimo-split-pane-gutter-thick:hover{background-color:var(--curtissimo-split-pane-gutter-hover-color,var(--curtissimo-split-pane-gutter-hover-color-default));border-color:var(--curtissimo-split-pane-gutter-border-color,var(--curtissimo-split-pane-gutter-border-color-default))}.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle{border-radius:var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default));border:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / 2) solid var(--curtissimo-split-pane-gutter-handle-color,var(--curtissimo-split-pane-gutter-handle-color-default));height:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / 2);margin:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / 2);width:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / 2)}.curtissimo-split-pane-active>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle,.curtissimo-split-pane-gutter-thick:hover>.curtissimo-split-pane-gutter-handle{border-color:var(--curtissimo-split-pane-gutter-hover-handle-color,var(--curtissimo-split-pane-gutter-hover-handle-color-default))}.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter-thick{height:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) * 2);border-left-width:0;border-right-width:0;grid-template-columns:1fr auto 1fr}.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle{margin-top:0;margin-bottom:0}.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle:first-child{place-self:center end}.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle:nth-child(2){place-self:center}.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle:nth-child(3){place-self:center start}.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter-thick{width:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) * 2);border-top-width:0;border-bottom-width:0;grid-template-rows:1fr auto 1fr}.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle{margin-left:0;margin-right:0}.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle:first-child{place-self:end center}.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle:nth-child(2){place-self:center}.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter-thick>.curtissimo-split-pane-gutter-handle:nth-child(3){place-self:start center}.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle{display:none}.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle:first-child:after{content:" ";background-color:#0000;position:absolute;overflow:visible}.curtissimo-split-pane-active>.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle:first-child:after,.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle:first-child:hover:after{background-color:var(--curtissimo-split-pane-gutter-hover-color,var(--curtissimo-split-pane-gutter-hover-color-default))}.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle:first-child{border-top:1px solid var(--curtissimo-split-pane-gutter-border-color,var(--curtissimo-split-pane-gutter-border-color-default));height:1px;display:block}.curtissimo-split-pane-horizontal>.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle:first-child:after{bottom:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / -2);cursor:ns-resize;left:0;right:0;top:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / -2)}.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle:first-child:after{bottom:0;left:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / -2);right:calc(var(--curtissimo-split-pane-gutter-width,var(--curtissimo-split-pane-gutter-width-default)) / -2);top:0}.curtissimo-split-pane-vertical>.curtissimo-split-pane-gutter-thin>.curtissimo-split-pane-gutter-handle:first-child{border-left:1px solid var(--curtissimo-split-pane-gutter-border-color,var(--curtissimo-split-pane-gutter-border-color-default));width:1px;display:block}
2
+ /*# sourceMappingURL=main.css.map */
package/build/styles/main.css.map ADDED
@@ -0,0 +1 @@
1
+ {"mappings":"ACAA,kVAWA,8CACE,2MAOF,yCAIA,2CAIA,6EAKA,+CAIA,8FAIA,uGAIA,yFAIA,kGAIA,gJAKA,4IAOA,sIAUA,+J,4V,stB,yT,+P,wI,6I,0I,gJ,yP,sI,2I,wI,8I,qF,gK,iV,8Q,qX,kW","sources":["main.css","assets/styles/main.css"],"sourcesContent":[".curtissimo-split-pane {\n --curtissimo-split-pane-gutter-width-default: 8px;\n --curtissimo-split-pane-gutter-border-color-default: #aaa;\n --curtissimo-split-pane-gutter-handle-color-default: black;\n --curtissimo-split-pane-gutter-hover-color-default: #f5c264;\n --curtissimo-split-pane-gutter-hover-handle-color-default: #333;\n display: flex;\n overflow: hidden;\n}\n\n@media screen and (prefers-color-scheme: dark) {\n .curtissimo-split-pane {\n --curtissimo-split-pane-gutter-border-color-default: #aaa;\n --curtissimo-split-pane-gutter-handle-color-default: white;\n --curtissimo-split-pane-gutter-hover-handle-color-default: white;\n }\n}\n\n.curtissimo-split-pane * {\n overflow: hidden;\n}\n\n.curtissimo-split-pane-primary {\n flex-grow: 1;\n}\n\n.curtissimo-split-pane-primary, .curtissimo-split-pane-secondary {\n display: grid;\n}\n\n.curtissimo-split-pane-secondary {\n flex-shrink: 0;\n}\n\n.curtissimo-split-pane-horizontal.curtissimo-split-pane-secondary-after {\n flex-direction: column;\n}\n\n.curtissimo-split-pane-horizontal.curtissimo-split-pane-secondary-before {\n flex-direction: column-reverse;\n}\n\n.curtissimo-split-pane-vertical.curtissimo-split-pane-secondary-after {\n flex-direction: row;\n}\n\n.curtissimo-split-pane-vertical.curtissimo-split-pane-secondary-before {\n flex-direction: row-reverse;\n}\n\n.curtissimo-split-pane-horizontal.curtissimo-split-pane-active, .curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter {\n cursor: ns-resize;\n}\n\n.curtissimo-split-pane-vertical.curtissimo-split-pane-active, .curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter {\n cursor: ew-resize;\n}\n\n.curtissimo-split-pane-gutter {\n -webkit-user-select: none;\n user-select: none;\n flex-shrink: 0;\n display: grid;\n position: relative;\n overflow: visible;\n}\n\n.curtissimo-split-pane-gutter-thick {\n border: 1px solid\n var(--curtissimo-split-pane-gutter-handle-color, var(--curtissimo-split-pane-gutter-handle-color-default));\n}\n\n.curtissimo-split-pane-active > .curtissimo-split-pane-gutter-thick, .curtissimo-split-pane-gutter-thick:hover {\n background-color: var(--curtissimo-split-pane-gutter-hover-color, var(--curtissimo-split-pane-gutter-hover-color-default));\n border-color: var(--curtissimo-split-pane-gutter-border-color, var(--curtissimo-split-pane-gutter-border-color-default));\n}\n\n.curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle {\n border-radius: var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default));\n border: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n 2)\n solid\n var(--curtissimo-split-pane-gutter-handle-color, var(--curtissimo-split-pane-gutter-handle-color-default));\n height: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n 2);\n margin: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n 2);\n width: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n 2);\n}\n\n.curtissimo-split-pane-active > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle, .curtissimo-split-pane-gutter-thick:hover > .curtissimo-split-pane-gutter-handle {\n border-color: var(--curtissimo-split-pane-gutter-hover-handle-color, var(--curtissimo-split-pane-gutter-hover-handle-color-default));\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thick {\n height: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) *\n 2);\n border-left-width: 0;\n border-right-width: 0;\n grid-template-columns: 1fr auto 1fr;\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle:first-child {\n place-self: center end;\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle:nth-child(2) {\n place-self: center;\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle:nth-child(3) {\n place-self: center start;\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thick {\n width: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) *\n 2);\n border-top-width: 0;\n border-bottom-width: 0;\n grid-template-rows: 1fr auto 1fr;\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle {\n margin-left: 0;\n margin-right: 0;\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle:first-child {\n place-self: end center;\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle:nth-child(2) {\n place-self: center;\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle:nth-child(3) {\n place-self: start center;\n}\n\n.curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle {\n display: none;\n}\n\n.curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle:first-child:after {\n content: \" \";\n background-color: #0000;\n position: absolute;\n overflow: visible;\n}\n\n.curtissimo-split-pane-active > .curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle:first-child:after, .curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle:first-child:hover:after {\n background-color: var(--curtissimo-split-pane-gutter-hover-color, var(--curtissimo-split-pane-gutter-hover-color-default));\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle:first-child {\n border-top: 1px solid\n var(--curtissimo-split-pane-gutter-border-color, var(--curtissimo-split-pane-gutter-border-color-default));\n height: 1px;\n display: block;\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle:first-child:after {\n bottom: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n -2);\n cursor: ns-resize;\n left: 0;\n right: 0;\n top: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n -2);\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle:first-child:after {\n bottom: 0;\n left: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n -2);\n right: calc(var(--curtissimo-split-pane-gutter-width, var(--curtissimo-split-pane-gutter-width-default)) /\n -2);\n top: 0;\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle:first-child {\n border-left: 1px solid\n var(--curtissimo-split-pane-gutter-border-color, var(--curtissimo-split-pane-gutter-border-color-default));\n width: 1px;\n display: block;\n}\n/*# sourceMappingURL=main.css.map */\n",".curtissimo-split-pane {\n display: flex;\n overflow: hidden;\n\n --curtissimo-split-pane-gutter-width-default: 8px;\n --curtissimo-split-pane-gutter-border-color-default: #aaaaaa;\n --curtissimo-split-pane-gutter-handle-color-default: black;\n --curtissimo-split-pane-gutter-hover-color-default: #f5c264;\n --curtissimo-split-pane-gutter-hover-handle-color-default: #333333;\n}\n\n@media screen and (prefers-color-scheme: dark) {\n .curtissimo-split-pane {\n --curtissimo-split-pane-gutter-border-color-default: #aaaaaa;\n --curtissimo-split-pane-gutter-handle-color-default: white;\n --curtissimo-split-pane-gutter-hover-handle-color-default: white;\n }\n}\n\n.curtissimo-split-pane * {\n overflow: hidden;\n}\n\n.curtissimo-split-pane-primary {\n flex-grow: 1;\n}\n\n.curtissimo-split-pane-primary,\n.curtissimo-split-pane-secondary {\n display: grid;\n}\n\n.curtissimo-split-pane-secondary {\n flex-shrink: 0;\n}\n\n.curtissimo-split-pane-horizontal.curtissimo-split-pane-secondary-after {\n flex-direction: column;\n}\n\n.curtissimo-split-pane-horizontal.curtissimo-split-pane-secondary-before {\n flex-direction: column-reverse;\n}\n\n.curtissimo-split-pane-vertical.curtissimo-split-pane-secondary-after {\n flex-direction: row;\n}\n\n.curtissimo-split-pane-vertical.curtissimo-split-pane-secondary-before {\n flex-direction: row-reverse;\n}\n\n.curtissimo-split-pane-horizontal.curtissimo-split-pane-active,\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter {\n cursor: ns-resize;\n}\n\n.curtissimo-split-pane-vertical.curtissimo-split-pane-active,\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter {\n cursor: ew-resize;\n}\n\n/* GUTTERS */\n\n.curtissimo-split-pane-gutter {\n position: relative;\n display: grid;\n overflow: visible;\n user-select: none;\n flex-shrink: 0;\n}\n\n/* THICK GUTTERS */\n\n.curtissimo-split-pane-gutter-thick {\n border: 1px solid\n var(\n --curtissimo-split-pane-gutter-handle-color,\n var(--curtissimo-split-pane-gutter-handle-color-default)\n );\n}\n\n.curtissimo-split-pane-active > .curtissimo-split-pane-gutter-thick,\n.curtissimo-split-pane-gutter-thick:hover {\n background-color: var(\n --curtissimo-split-pane-gutter-hover-color,\n var(--curtissimo-split-pane-gutter-hover-color-default)\n );\n border-color: var(\n --curtissimo-split-pane-gutter-border-color,\n var(--curtissimo-split-pane-gutter-border-color-default)\n );\n}\n\n.curtissimo-split-pane-gutter-thick > .curtissimo-split-pane-gutter-handle {\n border-radius: var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n );\n border: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n 2\n )\n solid\n var(\n --curtissimo-split-pane-gutter-handle-color,\n var(--curtissimo-split-pane-gutter-handle-color-default)\n );\n height: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n 2\n );\n margin: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n 2\n );\n width: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n 2\n );\n}\n\n.curtissimo-split-pane-active\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle,\n.curtissimo-split-pane-gutter-thick:hover\n > .curtissimo-split-pane-gutter-handle {\n border-color: var(\n --curtissimo-split-pane-gutter-hover-handle-color,\n var(--curtissimo-split-pane-gutter-hover-handle-color-default)\n );\n}\n\n.curtissimo-split-pane-horizontal > .curtissimo-split-pane-gutter-thick {\n border-left-width: 0;\n border-right-width: 0;\n grid-template-columns: 1fr auto 1fr;\n height: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) *\n 2\n );\n}\n\n.curtissimo-split-pane-horizontal\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle {\n margin-bottom: 0;\n margin-top: 0;\n}\n\n.curtissimo-split-pane-horizontal\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle:nth-child(1) {\n align-self: center;\n justify-self: end;\n}\n\n.curtissimo-split-pane-horizontal\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle:nth-child(2) {\n align-self: center;\n justify-self: center;\n}\n\n.curtissimo-split-pane-horizontal\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle:nth-child(3) {\n align-self: center;\n justify-self: start;\n}\n\n.curtissimo-split-pane-vertical > .curtissimo-split-pane-gutter-thick {\n border-bottom-width: 0;\n border-top-width: 0;\n grid-template-rows: 1fr auto 1fr;\n width: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) *\n 2\n );\n}\n\n.curtissimo-split-pane-vertical\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle {\n margin-left: 0;\n margin-right: 0;\n}\n\n.curtissimo-split-pane-vertical\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle:nth-child(1) {\n align-self: end;\n justify-self: center;\n}\n\n.curtissimo-split-pane-vertical\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle:nth-child(2) {\n align-self: center;\n justify-self: center;\n}\n\n.curtissimo-split-pane-vertical\n > .curtissimo-split-pane-gutter-thick\n > .curtissimo-split-pane-gutter-handle:nth-child(3) {\n align-self: start;\n justify-self: center;\n}\n\n/* THIN GUTTERS */\n\n.curtissimo-split-pane-gutter-thin > .curtissimo-split-pane-gutter-handle {\n display: none;\n}\n\n.curtissimo-split-pane-gutter-thin\n > .curtissimo-split-pane-gutter-handle:first-child::after {\n background-color: transparent;\n content: \" \";\n overflow: visible;\n position: absolute;\n}\n\n.curtissimo-split-pane-active\n > .curtissimo-split-pane-gutter-thin\n > .curtissimo-split-pane-gutter-handle:first-child:after,\n.curtissimo-split-pane-gutter-thin\n > .curtissimo-split-pane-gutter-handle:first-child:hover:after {\n background-color: var(\n --curtissimo-split-pane-gutter-hover-color,\n var(--curtissimo-split-pane-gutter-hover-color-default)\n );\n}\n\n.curtissimo-split-pane-horizontal\n > .curtissimo-split-pane-gutter-thin\n > .curtissimo-split-pane-gutter-handle:first-child {\n border-top: 1px solid\n var(\n --curtissimo-split-pane-gutter-border-color,\n var(--curtissimo-split-pane-gutter-border-color-default)\n );\n display: block;\n height: 1px;\n}\n\n.curtissimo-split-pane-horizontal\n > .curtissimo-split-pane-gutter-thin\n > .curtissimo-split-pane-gutter-handle:first-child::after {\n bottom: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n -2\n );\n cursor: ns-resize;\n left: 0;\n right: 0;\n top: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n -2\n );\n}\n\n.curtissimo-split-pane-vertical\n > .curtissimo-split-pane-gutter-thin\n > .curtissimo-split-pane-gutter-handle:first-child::after {\n bottom: 0;\n left: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n -2\n );\n right: calc(\n var(\n --curtissimo-split-pane-gutter-width,\n var(--curtissimo-split-pane-gutter-width-default)\n ) /\n -2\n );\n top: 0;\n}\n\n.curtissimo-split-pane-vertical\n > .curtissimo-split-pane-gutter-thin\n > .curtissimo-split-pane-gutter-handle:first-child {\n border-left: 1px solid\n var(\n --curtissimo-split-pane-gutter-border-color,\n var(--curtissimo-split-pane-gutter-border-color-default)\n );\n display: block;\n width: 1px;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
package/package.json CHANGED
@@ -1,12 +1,14 @@
1
1
  {
2
2
  "name": "@curtissimo/elm-split-pane",
3
- "version": "1.0.0-alpha.0",
4
- "main": "./build/scripts/main.js",
3
+ "version": "1.0.0",
5
4
  "files": [
6
- "./build/scripts/main.js.map",
7
5
  "./build/styles/main.css",
8
6
  "./build/styles/main.css.map"
9
7
  ],
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://gitlab.com/curtissimo/elm-split-pane.git"
11
+ },
10
12
  "description": "A nestable split pane for Elm.",
11
13
  "devDependencies": {
12
14
  "@curtissimo/elm-hot": "latest",
@@ -22,7 +24,8 @@
22
24
  "parcel": "latest"
23
25
  },
24
26
  "scripts": {
25
- "build:assets": "parcel build assets/styles/main.css --dist-dir build",
27
+ "build:assets:css": "parcel build assets/styles/main.css --dist-dir build/styles",
28
+ "build:assets": "npm run build:assets:css;",
26
29
  "build:examples": "parcel build examples/src/index.html --dist-dir public",
27
30
  "git:set-remote": "npm run git:set-remote:ssh",
28
31
  "git:set-remote:http": "git remote add origin https://gitlab.com/curtissimo/elm-split-pane.git",