Skip to content

Commit

Permalink
Merge pull request #105 from HubSpot/revert-104-tall-modal-scroll-fix
Browse files Browse the repository at this point in the history 
Revert "Tall modal scroll fix"
  • Loading branch information
@adamschwartz
adamschwartz committed Feb 18, 2015
2 parents a651bec + 48ab543 commit 2bb8bd7
Show file tree
Hide file tree
Showing 15 changed files with 123 additions and 191 deletions.
30 changes: 2 additions & 28 deletions coffee/vex.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ vexFactory = ($) ->
baseClassNames:
vex: 'vex'
content: 'vex-content'
contentWrap: 'vex-content-wrap'
overlay: 'vex-overlay'
close: 'vex-close'
closing: 'vex-closing'
Expand All @@ -40,8 +39,6 @@ vexFactory = ($) ->
css: {}
overlayClassName: ''
overlayCSS: {}
contentWrapClassName: ''
contentWrapCSS: {}
contentClassName: ''
contentCSS: {}
closeClassName: ''
Expand Down Expand Up @@ -69,26 +66,12 @@ vexFactory = ($) ->
.css(options.overlayCSS)
.data(vex: options)

options.$vex.append options.$vexOverlay

# Content Wrapper to allow better long modal scrolling

options.$vexContentWrap = $('<div>')
.addClass(vex.baseClassNames.contentWrap)
.addClass(options.contentWrapClassName)
.css(options.contentWrapCSS)
.data(vex: options)

# Handling clicks on overlay or wrapper

if options.overlayClosesOnClick
options.$vexOverlay.bind 'click.vex', (e) ->
return unless e.target is @
vex.close $(@).data().vex.id

options.$vexContentWrap.bind 'click.vex', (e) ->
return unless e.target is @
vex.close $(@).data().vex.id
options.$vex.append options.$vexOverlay

# Content

Expand All @@ -99,7 +82,7 @@ vexFactory = ($) ->
.append(options.content)
.data(vex: options)

options.$vex.append options.$vexContentWrap.append options.$vexContent
options.$vex.append options.$vexContent

# Close button

Expand All @@ -125,10 +108,6 @@ vexFactory = ($) ->

vex.setupBodyPadding options.$vex

# Set up overlay margin. We do not want it to cover the scrollbar

vex.setupOverlayPosition options

# Call afterOpen callback and trigger vexOpen event

options.afterOpen options.$vexContent, options if options.afterOpen
Expand Down Expand Up @@ -210,11 +189,6 @@ vexFactory = ($) ->
.bind('vexOpen.vex', -> $('body').css('padding-right', vex.getScrollbarWidth()))
.bind('vexAfterClose.vex', -> $('body').css('padding-right', 0) unless vex.getAllVexes().length)

setupOverlayPosition: (options) ->
$('body')
.bind('vexOpen.vex', -> options.$vexOverlay.css('right', vex.getScrollbarWidth()))
.bind('vexAfterClose.vex', -> options.$vexOverlay.css('right', 0) unless vex.getAllVexes().length)

hideLoading: ->
$('.vex-loading-spinner').remove()

Expand Down
48 changes: 24 additions & 24 deletions css/vex-theme-default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,12 @@
box-shadow: inset 0 0 0 300px transparent;
}
}
/* line 15, ../sass/vex-theme-default.sass */
/* line 13, ../sass/vex-theme-default.sass */
.vex.vex-theme-default {
padding-top: 160px;
padding-bottom: 160px;
}
/* line 17, ../sass/vex-theme-default.sass */
.vex.vex-theme-default.vex-closing .vex-content {
animation: vex-flyout 0.5s;
-webkit-animation: vex-flyout 0.5s;
Expand All @@ -273,12 +278,7 @@
-o-animation: vex-flyout 0.5s;
-webkit-backface-visibility: hidden;
}
/* line 18, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-content-wrap {
padding-top: 160px;
padding-bottom: 160px;
}
/* line 22, ../sass/vex-theme-default.sass */
/* line 20, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-content {
animation: vex-flyin 0.5s;
-webkit-animation: vex-flyin 0.5s;
Expand All @@ -287,7 +287,7 @@
-o-animation: vex-flyin 0.5s;
-webkit-backface-visibility: hidden;
}
/* line 25, ../sass/vex-theme-default.sass */
/* line 23, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-content {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Expand All @@ -303,11 +303,11 @@
font-size: 1.1em;
line-height: 1.5em;
}
/* line 38, ../sass/vex-theme-default.sass */
/* line 36, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-content h1, .vex.vex-theme-default .vex-content h2, .vex.vex-theme-default .vex-content h3, .vex.vex-theme-default .vex-content h4, .vex.vex-theme-default .vex-content h5, .vex.vex-theme-default .vex-content h6, .vex.vex-theme-default .vex-content p, .vex.vex-theme-default .vex-content ul, .vex.vex-theme-default .vex-content li {
color: inherit;
}
/* line 41, ../sass/vex-theme-default.sass */
/* line 39, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-close {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Expand All @@ -317,7 +317,7 @@
right: 0;
cursor: pointer;
}
/* line 48, ../sass/vex-theme-default.sass */
/* line 46, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-close:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Expand All @@ -335,20 +335,20 @@
color: #bbb;
background: transparent;
}
/* line 63, ../sass/vex-theme-default.sass */
/* line 61, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-close:hover:before, .vex.vex-theme-default .vex-close:active:before {
color: #777;
background: #e0e0e0;
}
/* line 69, ../sass/vex-theme-default.sass */
/* line 67, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-form .vex-dialog-message {
margin-bottom: 0.5em;
}
/* line 72, ../sass/vex-theme-default.sass */
/* line 70, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em;
}
/* line 75, ../sass/vex-theme-default.sass */
/* line 73, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Expand All @@ -363,14 +363,14 @@
min-height: 2.5em;
margin: 0 0 0.25em;
}
/* line 87, ../sass/vex-theme-default.sass */
/* line 85, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #8dbdf1;
-webkit-box-shadow: inset 0 0 0 2px #8dbdf1;
box-shadow: inset 0 0 0 2px #8dbdf1;
outline: none;
}
/* line 91, ../sass/vex-theme-default.sass */
/* line 89, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons {
*zoom: 1;
}
Expand All @@ -380,7 +380,7 @@
display: table;
clear: both;
}
/* line 94, ../sass/vex-theme-default.sass */
/* line 92, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Expand All @@ -395,11 +395,11 @@
line-height: 1em;
padding: 0.75em 2em;
}
/* line 106, ../sass/vex-theme-default.sass */
/* line 104, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-button.vex-last {
margin-left: 0;
}
/* line 109, ../sass/vex-theme-default.sass */
/* line 107, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-button:focus {
animation: vex-pulse 1.1s infinite;
-webkit-animation: vex-pulse 1.1s infinite;
Expand All @@ -410,7 +410,7 @@
outline: none;
}
@media (max-width: 568px) {
/* line 109, ../sass/vex-theme-default.sass */
/* line 107, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
Expand All @@ -420,18 +420,18 @@
-webkit-backface-visibility: hidden;
}
}
/* line 118, ../sass/vex-theme-default.sass */
/* line 116, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
background: #3288e6;
color: #fff;
}
/* line 122, ../sass/vex-theme-default.sass */
/* line 120, ../sass/vex-theme-default.sass */
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
background: #e0e0e0;
color: #777;
}

/* line 126, ../sass/vex-theme-default.sass */
/* line 124, ../sass/vex-theme-default.sass */
.vex-loading-spinner.vex-theme-default {
-moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
Expand Down
47 changes: 22 additions & 25 deletions css/vex-theme-flat-attack.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,9 +186,11 @@
-moz-perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
perspective-origin: 50% 150px;
padding-top: 100px;
padding-bottom: 100px;
font-size: 1.5em;
}
/* line 36, ../sass/vex-theme-flat-attack.sass */
/* line 38, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack.vex-closing .vex-content {
animation: vex-flipout-horizontal 0.5s;
-webkit-animation: vex-flipout-horizontal 0.5s;
Expand All @@ -197,12 +199,7 @@
-o-animation: vex-flipout-horizontal 0.5s;
-webkit-backface-visibility: hidden;
}
/* line 39, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-content-wrap {
padding-top: 100px;
padding-bottom: 100px;
}
/* line 43, ../sass/vex-theme-flat-attack.sass */
/* line 41, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
Expand All @@ -214,7 +211,7 @@
-o-animation: vex-flipin-horizontal 0.5s;
-webkit-backface-visibility: hidden;
}
/* line 47, ../sass/vex-theme-flat-attack.sass */
/* line 45, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-content {
font-family: "Helvetica Neue", sans-serif;
font-weight: 200;
Expand All @@ -227,18 +224,18 @@
max-width: 100%;
width: 600px;
}
/* line 59, ../sass/vex-theme-flat-attack.sass */
/* line 57, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-content h1, .vex.vex-theme-flat-attack .vex-content h2, .vex.vex-theme-flat-attack .vex-content h3, .vex.vex-theme-flat-attack .vex-content h4, .vex.vex-theme-flat-attack .vex-content h5, .vex.vex-theme-flat-attack .vex-content h6, .vex.vex-theme-flat-attack .vex-content p, .vex.vex-theme-flat-attack .vex-content ul, .vex.vex-theme-flat-attack .vex-content li {
color: inherit;
}
/* line 62, ../sass/vex-theme-flat-attack.sass */
/* line 60, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
/* line 68, ../sass/vex-theme-flat-attack.sass */
/* line 66, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-close:before {
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
Expand All @@ -256,15 +253,15 @@
color: #fff;
background: #666;
}
/* line 87, ../sass/vex-theme-flat-attack.sass */
/* line 85, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-message {
margin-bottom: 0.5em;
}
/* line 90, ../sass/vex-theme-flat-attack.sass */
/* line 88, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input {
margin-bottom: 0.5em;
}
/* line 93, ../sass/vex-theme-flat-attack.sass */
/* line 91, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Expand All @@ -279,14 +276,14 @@
min-height: 2.5em;
margin: 0 0 0.25em;
}
/* line 105, ../sass/vex-theme-flat-attack.sass */
/* line 103, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
-moz-box-shadow: inset 0 0 0 2px #666;
-webkit-box-shadow: inset 0 0 0 2px #666;
box-shadow: inset 0 0 0 2px #666;
outline: none;
}
/* line 109, ../sass/vex-theme-flat-attack.sass */
/* line 107, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons {
*zoom: 1;
padding-top: 1em;
Expand All @@ -300,7 +297,7 @@
display: table;
clear: both;
}
/* line 116, ../sass/vex-theme-flat-attack.sass */
/* line 114, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button {
-moz-border-radius: 0;
-webkit-border-radius: 0;
Expand All @@ -316,39 +313,39 @@
line-height: 1em;
font-family: inherit;
}
/* line 129, ../sass/vex-theme-flat-attack.sass */
/* line 127, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button.vex-last {
margin-left: 0;
}
/* line 132, ../sass/vex-theme-flat-attack.sass */
/* line 130, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button:focus {
outline: none;
}
/* line 135, ../sass/vex-theme-flat-attack.sass */
/* line 133, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary {
background: #666;
color: #fff;
}
/* line 139, ../sass/vex-theme-flat-attack.sass */
/* line 137, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary:focus {
-moz-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.2);
}
/* line 142, ../sass/vex-theme-flat-attack.sass */
/* line 140, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary {
background: #fff;
color: #ccc;
}
/* line 146, ../sass/vex-theme-flat-attack.sass */
/* line 144, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:focus {
-moz-box-shadow: inset 0 3px #aaa;
-webkit-box-shadow: inset 0 3px #aaa;
box-shadow: inset 0 3px #aaa;
background: #eee;
color: #777;
}
/* line 151, ../sass/vex-theme-flat-attack.sass */
/* line 149, ../sass/vex-theme-flat-attack.sass */
.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:hover, .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:active {
color: #777;
}
Expand Down Expand Up @@ -409,7 +406,7 @@
background: #477FA5;
}

/* line 168, ../sass/vex-theme-flat-attack.sass */
/* line 166, ../sass/vex-theme-flat-attack.sass */
.vex-loading-spinner.vex-theme-flat-attack {
height: 4em;
width: 4em;
Expand Down
Loading

0 comments on commit 2bb8bd7

Please sign in to comment.