Skip to content

Commit

Permalink
scroll cart tab widget. closes #22
Browse files Browse the repository at this point in the history
  • Loading branch information
@jameskoster
jameskoster committed May 23, 2016
1 parent 11b1adc commit 41cabee
Show file tree
Hide file tree
Showing 4 changed files with 184 additions and 10 deletions.
182 changes: 181 additions & 1 deletion assets/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,181 @@
.cart-tab{width:22em;position:fixed;top:5em;z-index:9999999}.cart-tab a.cart-parent{position:absolute;top:0;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1.618em;text-decoration:none}.cart-tab a.cart-parent span.contents{display:block;color:#666;font-size:.8em}.cart-tab a.cart-parent:hover{text-decoration:none}.cart-tab .widget{padding:1.618em;margin:0}.cart-tab.light{background:#fff}.cart-tab.light a.cart-parent,.cart-tab.light .widget{box-shadow:0 2px 1em 0 rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 1em 0 rgba(0,0,0,0.2);-moz-box-shadow:0 2px 1em 0 rgba(0,0,0,0.2);-o-box-shadow:0 2px 1em 0 rgba(0,0,0,0.2)}.cart-tab.light a.cart-parent{background:#fff}.cart-tab.light a.cart-parent:after{content:"";display:block;width:10px;height:100%;background:#fff;position:absolute;top:0;right:-10px}.cart-tab.dark{background:#333}.cart-tab.dark a.cart-parent,.cart-tab.dark .widget{box-shadow:0 2px 1em 0 rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 1em 0 rgba(0,0,0,0.2);-moz-box-shadow:0 2px 1em 0 rgba(0,0,0,0.2);-o-box-shadow:0 2px 1em 0 rgba(0,0,0,0.2)}.cart-tab.dark a.cart-parent{background:#333}.cart-tab.dark a.cart-parent:after{content:"";display:block;width:10px;height:100%;background:#333;position:absolute;top:0;right:-10px}.cart-tab.right{right:-22em;-webkit-transition:right ease .5s;-moz-transition:right ease .5s;-o-transition:right ease .5s;transition:right ease .5s}.cart-tab.right a.cart-parent{left:-8.402328em;width:8.402328em;-webkit-transition:left ease .5s;-moz-transition:left ease .5s;-o-transition:left ease .5s;transition:left ease .5s;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}.cart-tab.right a.cart-parent.hidden{left:0}.cart-tab.right a.cart-parent.visible{left:-8.402328em}.cart-tab.right:hover{right:0}.cart-tab.right .widget{-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;border-top-right-radius:0;border-bottom-right-radius:0}.cart-tab.left{left:-22em;-webkit-transition:left ease .5s;-moz-transition:left ease .5s;-o-transition:left ease .5s;transition:left ease .5s}.cart-tab.left a.cart-parent{right:-8.402328em;width:8.402328em;-webkit-transition:right ease .5s;-moz-transition:right ease .5s;-o-transition:right ease .5s;transition:right ease .5s;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.cart-tab.left a.cart-parent.hidden{right:0}.cart-tab.left a.cart-parent.visible{right:-8.402328em}.cart-tab.left:hover{left:0}.cart-tab.left .widget{-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;-webkit-border-top-left-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:0;-moz-border-radius-bottomleft:0;border-top-left-radius:0;border-bottom-left-radius:0}.cart-tab.left.light a.cart-parent:after,.cart-tab.left.dark a.cart-parent:after{right:auto;left:-10px}.cart-tab.no-animation.right:hover{right:-22em}.cart-tab.no-animation.left:hover{left:-22em}.cart-tab.hidden{display:none}
.cart-tab {
width: 22em;
position: fixed;
top: 5em;
z-index: 9999999;
}
.cart-tab a.cart-parent {
position: absolute;
top: 0;
display: block;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
padding: 1.618em;
text-decoration: none;
}
.cart-tab a.cart-parent span.contents {
display: block;
color: #666;
font-size: .8em;
}
.cart-tab a.cart-parent:hover {
text-decoration: none;
}
.cart-tab .widget {
padding: 1.618em;
margin: 0;
max-height: 600px;
overflow: auto;
}
.cart-tab.light {
background: #fff;
}
.cart-tab.light a.cart-parent,
.cart-tab.light .widget {
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
}
.cart-tab.light a.cart-parent {
background: #fff;
}
.cart-tab.light a.cart-parent:after {
content: "";
display: block;
width: 10px;
height: 100%;
background: #fff;
position: absolute;
top: 0;
right: -10px;
}
.cart-tab.dark {
background: #333;
}
.cart-tab.dark a.cart-parent,
.cart-tab.dark .widget {
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
}
.cart-tab.dark a.cart-parent {
background: #333;
}
.cart-tab.dark a.cart-parent:after {
content: "";
display: block;
width: 10px;
height: 100%;
background: #333;
position: absolute;
top: 0;
right: -10px;
}
.cart-tab.right {
right: -22em;
-webkit-transition: right ease 0.5s;
-moz-transition: right ease 0.5s;
-o-transition: right ease 0.5s;
transition: right ease 0.5s;
}
.cart-tab.right a.cart-parent {
left: -8.402328em;
width: 8.402328em;
-webkit-transition: left ease 0.5s;
-moz-transition: left ease 0.5s;
-o-transition: left ease 0.5s;
transition: left ease 0.5s;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.cart-tab.right a.cart-parent.hidden {
left: 0;
}
.cart-tab.right a.cart-parent.visible {
left: -8.402328em;
}
.cart-tab.right:hover {
right: 0;
}
.cart-tab.right .widget {
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.cart-tab.left {
left: -22em;
-webkit-transition: left ease 0.5s;
-moz-transition: left ease 0.5s;
-o-transition: left ease 0.5s;
transition: left ease 0.5s;
}
.cart-tab.left a.cart-parent {
right: -8.402328em;
width: 8.402328em;
-webkit-transition: right ease 0.5s;
-moz-transition: right ease 0.5s;
-o-transition: right ease 0.5s;
transition: right ease 0.5s;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.cart-tab.left a.cart-parent.hidden {
right: 0;
}
.cart-tab.left a.cart-parent.visible {
right: -8.402328em;
}
.cart-tab.left:hover {
left: 0;
}
.cart-tab.left .widget {
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.cart-tab.left.light a.cart-parent:after,
.cart-tab.left.dark a.cart-parent:after {
right: auto;
left: -10px;
}
.cart-tab.no-animation.right:hover {
right: -22em;
}
.cart-tab.no-animation.left:hover {
left: -22em;
}
.cart-tab.hidden {
display: none;
}
2 changes: 2 additions & 0 deletions assets/css/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
.widget {
padding:1.618em;
margin:0;
max-height: 600px;
overflow: auto;
}

// The light colour scheme
Expand Down
9 changes: 0 additions & 9 deletions config.codekit
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,6 @@
"strictMath": 0,
"strictUnits": 0
},
"\/assets\/css\/style.css": {
"fileType": 16,
"ignore": 1,
"ignoreWasSetByUser": 0,
"inputAbbreviatedPath": "\/assets\/css\/style.css",
"outputAbbreviatedPath": "No Output Path",
"outputPathIsOutsideProject": 0,
"outputPathIsSetByUser": 0
},
"\/assets\/css\/style.less": {
"allowInsecureImports": 0,
"createSourceMap": 0,
Expand Down
1 change: 1 addition & 0 deletions readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ Thanks! Please fork the repo on <a href="https://github.com/jameskoster/woocomme
== Changelog ==

= 0.4.0 - 23/05/2016 =
* New - Cart tab widget now has a max-height and will scroll if the contents are larger than the container.
* New - Option to display cart total or subtotal. Props @craigtracey
* Tweak - Translations now managed on .org (https://translate.wordpress.org/projects/wp-plugins/woocommerce-cart-tab).

Expand Down

0 comments on commit 41cabee

Please sign in to comment.