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

New splitter handles #18

Merged
merged 4 commits into from
Sep 14, 2015
Merged

New splitter handles #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e923ac2
Format LESS file, rename 'default' handle style to 'stripes', add 'de…
Sep 14, 2015
5067a6e
Implement and document 'dots' handle style.
Sep 14, 2015
7dc0180
Merge pull request #17 from hiltonjanfield/master
Sep 14, 2015
baecd7d
Add 'lotsofdots' handle type, and minor fix for 'dots'.
Sep 14, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 69 additions & 9 deletions css/jquery.enhsplitter.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
*
* https://github.com/hiltonjanfield/jquery.enhsplitter
*
* All classes to begin with 'splitter'.
* Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
* Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
*
* Do not make changes to the CSS file; edit the LESS file and compile.
*/
.splitter_container {
position: relative;
Expand Down Expand Up @@ -76,9 +81,9 @@
border-color: #000000;
}
.splitter_bar.splitter-invisible {
background: none!important;
border: none!important;
box-shadow: none!important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
.splitter_bar.splitter-invisible .splitter_handle,
.splitter_bar.splitter-handle-none .splitter_handle {
Expand All @@ -97,16 +102,19 @@
margin-top: -25px;
height: 50px;
}
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle {
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle,
.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle {
width: 3px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background-color: transparent;
}
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover,
.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover {
border-color: #666666;
}
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active {
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active,
.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:active {
border-color: #000000;
}
.splitter-vertical > .splitter_bar.splitter-handle-bar > .splitter_handle {
Expand All @@ -115,6 +123,26 @@
.splitter-vertical > .splitter_bar.splitter-handle-block > .splitter_handle {
width: 5px;
}
.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 50% 10%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #666666 1.5px, transparent 2px);
}
.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
}
.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
height: 100px;
margin-top: -50px;
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 50% 5%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 10%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 15%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 20%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 25%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 30%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 35%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 40%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 45%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 55%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 60%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 65%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 70%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 75%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 80%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 85%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 90%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 95%, #666666 1.5px, transparent 1.5px);
}
.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
background-color: #f0f0f0;
}
.splitter-horizontal > .splitter_bar {
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #666666;
Expand All @@ -126,17 +154,20 @@
.splitter-horizontal > .splitter_bar > .splitter_handle {
width: 50px;
}
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle {
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle,
.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle {
height: 3px;
margin-top: 1px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: transparent;
}
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover,
.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover {
border-color: #666666;
}
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active {
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active,
.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:active {
border-color: #000000;
}
.splitter-horizontal > .splitter_bar.splitter-handle-bar > .splitter_handle {
Expand All @@ -147,6 +178,26 @@
height: 5px;
margin-top: 1px;
}
.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
height: 100%;
margin-top: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 10% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #666666 1.5px, transparent 2px);
}
.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
}
.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
height: 100%;
width: 100px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 5% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 10% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 15% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 20% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 25% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 30% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 35% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 40% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 45% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 55% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 60% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 65% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 70% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 75% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 80% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 85% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 90% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 95% 50%, #666666 1.5px, transparent 1.5px);
}
.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
background-color: #f0f0f0;
}
.splitter_container.splitter-active > .splitter_bar {
z-index: 1000;
/* Important to keep z-index of active splitter above .splitterMask. */
Expand All @@ -159,6 +210,15 @@
.splitter_container.splitter-active > .splitter_bar.splitter-handle-block > .splitter_handle {
background-color: #000000;
}
.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
}
.splitter_container.splitter-active.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
}
.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
background-color: #f0f0f0;
}
.splitter_mask {
position: fixed;
left: 0;
Expand Down
163 changes: 150 additions & 13 deletions css/jquery.enhsplitter.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
*
* https://github.com/hiltonjanfield/jquery.enhsplitter
*
* All classes to begin with 'splitter'.
* Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
* Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
*
* Do not make changes to the CSS file; edit the LESS file and compile.
*/

@splitter_color: silver;
Expand Down Expand Up @@ -106,9 +111,9 @@
}

&.splitter-invisible {
background: none!important;
border: none!important;
box-shadow: none!important;
background: none !important;
border: none !important;
box-shadow: none !important;
}

&.splitter-invisible,
Expand All @@ -134,7 +139,8 @@
height: @handle_size;
}

&.splitter-handle-default {
&.splitter-handle-default,
&.splitter-handle-stripes {
> .splitter_handle {
width: 3px;
border-left: 1px solid @handle_color;
Expand Down Expand Up @@ -162,6 +168,60 @@
width: @splitter_size - 2;
}
}

&.splitter-handle-dots {
> .splitter_handle {
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 50% 10%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 30%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 70%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 90%, @splitter_shadow 1.5px, transparent 2px);

&:hover,
&:active {
background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
}
}
}

&.splitter-handle-lotsofdots {
> .splitter_handle {
height: 100px;
margin-top: -50px;
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 50% 5%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 10%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 15%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 20%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 25%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 30%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 35%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 40%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 45%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 55%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 60%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 65%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 70%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 75%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 80%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 85%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 90%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 95%, @splitter_shadow 1.5px, transparent 1.5px);

&:hover,
&:active {
background-color: #f0f0f0;
}
}
}
}
}

Expand All @@ -178,7 +238,8 @@
width: @handle_size;
}

&.splitter-handle-default {
&.splitter-handle-default,
&.splitter-handle-stripes {
> .splitter_handle {
height: 3px;
margin-top: 1px;
Expand Down Expand Up @@ -209,20 +270,96 @@
margin-top: 1px;
}
}

&.splitter-handle-dots {
> .splitter_handle {
height: 100%;
margin-top: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 10% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 30% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 70% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 90% 50%, @splitter_shadow 1.5px, transparent 2px);

&:hover,
&:active {
background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px);
}
}
}

&.splitter-handle-lotsofdots {
> .splitter_handle {
height: 100%;
width: 100px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 5% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 10% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 15% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 20% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 25% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 30% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 35% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 40% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 45% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 55% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 60% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 65% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 70% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 75% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 80% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 85% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 90% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 95% 50%, @splitter_shadow 1.5px, transparent 1.5px);

&:hover,
&:active {
background-color: #f0f0f0;
}
}
}
}
}

.splitter_container.splitter-active > .splitter_bar {
z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */
.splitter_container.splitter-active {
> .splitter_bar {
z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */

> .splitter_handle {
border-color: @handle_active;
cursor: inherit;
> .splitter_handle {
border-color: @handle_active;
cursor: inherit;
}

&.splitter-handle-bar > .splitter_handle,
&.splitter-handle-block > .splitter_handle {
background-color: @handle_active;
}
}

&.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
}

&.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px),
}

&.splitter-handle-bar > .splitter_handle,
&.splitter-handle-block > .splitter_handle {
background-color: @handle_active;
&.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
background-color: #f0f0f0;
}
}

Expand Down
Loading