lib/assets/stylesheets/up/modal.css.sass in upjs-rails-0.1.0 vs lib/assets/stylesheets/up/modal.css.sass in upjs-rails-0.2.0
- old
+ new
@@ -1,50 +1,47 @@
$stratum: 10000
-$width: 700px
-$height: 450px
+//$width: 700px
+//$height: 450px
+$close-height: 24px
+$close-width: 36px
-.up-modal-overlay
+.up-modal
position: fixed
top: 0
left: 0
bottom: 0
right: 0
- background-color: rgba(90, 90, 90, 0.7)
z-index: $stratum
+ background-color: rgba(90, 90, 90, 0.4)
.up-modal-dialog
- position: fixed
- z-index: $stratum + 1
- margin: auto
- top: 0
- left: 0
- bottom: 0
- right: 0
- width: $width
- height: $height
+ position: absolute
+ top: 50%
+ left: 50%
+ transform: translate(-50%, -50%)
max-width: 100%
max-height: 100%
background-color: #fff
- box-shadow: 0 0 10px 5px #000
+ box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3)
+ // In case someone sets padding on the dialog box,
+ // the width and height attributes set by up.modal
+ // should be honored exactly.
+ box-sizing: border-box
.up-modal-close
position: absolute
- top: 20px
- right: 20px
- background-color: #666
+ right: 0
+ top: 0
+ width: $close-width
+ text-align: center
+ line-height: $close-height
+ height: $close-height
+ background-color: #999
color: #fff
font-weight: bold
text-transform: uppercase
- padding: 5px 15px
- z-index: $stratum + 2
cursor: pointer
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
-
-.up-modal-close-label
-
-.up-modal-close-key
- margin-left: 3px
- opacity: 0.5
+ transform: translateY(-100%)
.up-modal-content
overflow-x: hidden
overflow-y: auto
width: 100%