aboutsummaryrefslogtreecommitdiff
path: root/assets/css/lib/bootstrap/_modals.scss
diff options
context:
space:
mode:
authorMaZderMind2015-02-26 17:57:42 +0100
committerMaZderMind2015-02-26 17:57:42 +0100
commit6db2f0f4b9816ccd271332b89a05a9d0d753216b (patch)
treefd7ecf7cf16b33bdb75c45e747d12f9ecca43358 /assets/css/lib/bootstrap/_modals.scss
parent9fb5b19bb0652b9c187c9b552c0a7ec4d6778222 (diff)
shuffle things around on the way to a bootstrap-based configurable website
Diffstat (limited to '')
-rw-r--r--assets/css/bootstrap-3.3.2/modals.less (renamed from assets/css/lib/bootstrap/_modals.scss)56
1 files changed, 27 insertions, 29 deletions
diff --git a/assets/css/lib/bootstrap/_modals.scss b/assets/css/bootstrap-3.3.2/modals.less
index 785ca5c..032a497 100644
--- a/assets/css/lib/bootstrap/_modals.scss
+++ b/assets/css/bootstrap-3.3.2/modals.less
@@ -21,7 +21,7 @@
right: 0;
bottom: 0;
left: 0;
- z-index: $zindex-modal;
+ z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
@@ -30,10 +30,10 @@
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
- @include translate3d(0, -25%, 0);
- @include transition-transform(0.3s ease-out);
+ .translate(0, -25%);
+ .transition-transform(~"0.3s ease-out");
}
- &.in .modal-dialog { @include translate3d(0, 0, 0) }
+ &.in .modal-dialog { .translate(0, 0) }
}
.modal-open .modal {
overflow-x: hidden;
@@ -50,11 +50,11 @@
// Actual modal
.modal-content {
position: relative;
- background-color: $modal-content-bg;
- border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
- border: 1px solid $modal-content-border-color;
- border-radius: $border-radius-large;
- @include box-shadow(0 3px 9px rgba(0,0,0,.5));
+ background-color: @modal-content-bg;
+ border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+ border: 1px solid @modal-content-border-color;
+ border-radius: @border-radius-large;
+ .box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
@@ -62,24 +62,22 @@
// Modal background
.modal-backdrop {
- position: fixed;
+ position: absolute;
top: 0;
right: 0;
- bottom: 0;
left: 0;
- z-index: $zindex-modal-background;
- background-color: $modal-backdrop-bg;
+ background-color: @modal-backdrop-bg;
// Fade for backdrop
- &.fade { @include opacity(0); }
- &.in { @include opacity($modal-backdrop-opacity); }
+ &.fade { .opacity(0); }
+ &.in { .opacity(@modal-backdrop-opacity); }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
- padding: $modal-title-padding;
- border-bottom: 1px solid $modal-header-border-color;
- min-height: ($modal-title-padding + $modal-title-line-height);
+ padding: @modal-title-padding;
+ border-bottom: 1px solid @modal-header-border-color;
+ min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close {
@@ -89,22 +87,22 @@
// Title text within header
.modal-title {
margin: 0;
- line-height: $modal-title-line-height;
+ line-height: @modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
- padding: $modal-inner-padding;
+ padding: @modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
- padding: $modal-inner-padding;
+ padding: @modal-inner-padding;
text-align: right; // right align buttons
- border-top: 1px solid $modal-footer-border-color;
- @include clearfix(); // clear it in case folks use .pull-* classes on buttons
+ border-top: 1px solid @modal-footer-border-color;
+ &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
@@ -131,20 +129,20 @@
}
// Scale up the modal
-@media (min-width: $screen-sm-min) {
+@media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
- width: $modal-md;
+ width: @modal-md;
margin: 30px auto;
}
.modal-content {
- @include box-shadow(0 5px 15px rgba(0,0,0,.5));
+ .box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
- .modal-sm { width: $modal-sm; }
+ .modal-sm { width: @modal-sm; }
}
-@media (min-width: $screen-md-min) {
- .modal-lg { width: $modal-lg; }
+@media (min-width: @screen-md-min) {
+ .modal-lg { width: @modal-lg; }
}