From fe62183cd914a7834c6d6a94d487e2e13e212251 Mon Sep 17 00:00:00 2001 From: Zaran Date: Sun, 15 Apr 2012 05:54:46 -0700 Subject: CSS improvements, first steps on angular * disable the connect form when connected * add a disconnect button when connected * add a research field to filter the contact list (not working) Thinks I want to understand: * how to share a variable between several scopes * could StropheSrv be an attribute of the connect scope ? if yes, we can call it directly and avoid wrapping it (this is the third level of wrapping around libStrophe...) --- alias-angular/app/css/less/modals.less | 90 ++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 alias-angular/app/css/less/modals.less (limited to 'alias-angular/app/css/less/modals.less') diff --git a/alias-angular/app/css/less/modals.less b/alias-angular/app/css/less/modals.less new file mode 100644 index 0000000..4fccea7 --- /dev/null +++ b/alias-angular/app/css/less/modals.less @@ -0,0 +1,90 @@ +// MODALS +// ------ + +// Recalculate z-index where appropriate +.modal-open { + .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } + .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } + .popover { z-index: @zindexPopover + @zindexModal; } + .tooltip { z-index: @zindexTooltip + @zindexModal; } +} + +// Background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindexModalBackdrop; + background-color: @black; + // Fade for backdrop + &.fade { opacity: 0; } +} + +.modal-backdrop, +.modal-backdrop.fade.in { + .opacity(80); +} + +// Base modal +.modal { + position: fixed; + top: 50%; + left: 50%; + z-index: @zindexModal; + overflow: auto; + width: 560px; + margin: -250px 0 0 -280px; + background-color: @white; + border: 1px solid #999; + border: 1px solid rgba(0,0,0,.3); + *border: 1px solid #999; /* IE6-7 */ + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + .background-clip(padding-box); + &.fade { + .transition(e('opacity .3s linear, top .3s ease-out')); + top: -25%; + } + &.fade.in { top: 50%; } +} +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid #eee; + // Close icon + .close { margin-top: 2px; } +} + +// Body (where all modal content resises) +.modal-body { + overflow-y: auto; + max-height: 400px; + padding: 15px; +} +// Remove bottom margin if need be +.modal-form { + margin-bottom: 0; +} + +// Footer (for actions) +.modal-footer { + padding: 14px 15px 15px; + margin-bottom: 0; + text-align: right; // right align buttons + background-color: #f5f5f5; + border-top: 1px solid #ddd; + .border-radius(0 0 6px 6px); + .box-shadow(inset 0 1px 0 @white); + .clearfix(); // clear it in case folks use .pull-* classes on buttons + + // Properly space out buttons + .btn + .btn { + margin-left: 5px; + margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } +} -- cgit v1.2.3-70-g09d2