Commit a5de7e5b authored by Sigrid Suski's avatar Sigrid Suski

modals revised again

git-svn-id: https://svn.sobi.pro/SobiPro/Addons/branches/SobiPro-1.1/Templates/SobiAdminBS@5207 42bd815b-6740-4516-9028-ea9f7a097aa0
parent 3cb263ef
// Modals
body.modal-open {
-ms-overflow-style: none;
}
.modal-header {
padding: 0 20px;
text-align: left;
h3 {
font-weight: normal;
line-height: 50px;
}
.close {
width: 50px;
margin-top: 0;
margin-right: -15px;
font-size: 2rem;
line-height: 50px;
border-left: 1px solid #ccc;
padding: 0; // Sigsiu.NET
}
}
.modal-body {
padding: 0;
width: 100%;
height: auto;
.container-fluid {
padding-top: 15px;
padding-bottom: 15px;
}
}
.modal-footer {
clear: both;
}
.contentpane {
padding: 10px;
height: auto
}
......@@ -2,124 +2,123 @@
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
// Core
.btn {
display: inline-block;
.ie7-inline-block();
padding: 4px 12px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: @btnBackground;
color: #333;
// .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
.border-radius(@baseBorderRadius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
&:hover,
&:focus {
background-color: @btnBackgroundHighlight;
text-decoration: none;
text-shadow: none;
}
// Focus state for keyboard and accessibility
&:focus {
.tab-focus();
}
// Active state
&.active,
&:active {
background-image: none;
outline: 0;
// .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
background-image: none;
.opacity(65);
.box-shadow(none);
}
display: inline-block;
.ie7-inline-block();
padding: 4px 12px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: @btnBackground;
color: @textColor;
// .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
.border-radius(@baseBorderRadius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
&:hover,
&:focus {
background-color: @btnBackgroundHighlight;
text-decoration: none;
text-shadow: none;
color: @textColor; //Sigsiu.NET
}
// Focus state for keyboard and accessibility
&:focus {
.tab-focus();
}
// Active state
&.active,
&:active {
background-image: none;
outline: 0;
// .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
background-image: none;
.opacity(65);
.box-shadow(none);
}
}
// Button Sizes
// --------------------------------------------------
// Large
.btn-large {
padding: @paddingLarge;
font-size: @fontSizeLarge;
.border-radius(@borderRadiusLarge);
padding: @paddingLarge;
font-size: @fontSizeLarge;
.border-radius(@borderRadiusLarge);
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
margin-top: 4px;
margin-top: 4px;
}
// Small
.btn-small {
padding: @paddingSmall;
font-size: @fontSizeSmall;
.border-radius(@borderRadiusSmall);
padding: @paddingSmall;
font-size: @fontSizeSmall;
.border-radius(@borderRadiusSmall);
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
margin-top: 0;
margin-top: 0;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
margin-top: -1px;
margin-top: -1px;
}
// Mini
.btn-mini {
padding: @paddingMini;
font-size: @fontSizeMini;
.border-radius(@borderRadiusSmall);
padding: @paddingMini;
font-size: @fontSizeMini;
.border-radius(@borderRadiusSmall);
}
// Block button
// -------------------------
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
.box-sizing(border-box);
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
.box-sizing(border-box);
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
&.btn-block {
width: 100%;
}
}
// Alternate buttons
// --------------------------------------------------
......@@ -130,7 +129,7 @@ input[type="button"] {
.btn-info,
.btn-sobipro,
.btn-inverse {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
// Provide *some* extra contrast for those who can get it
......@@ -140,76 +139,81 @@ input[type="button"] {
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
// color: rgba(255,255,255,.75);
// color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
.btn-primary {
border: 1px solid @btnPrimaryBackgroundHighlight;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnPrimaryBackground;
&:hover,
&:focus {
background-color: darken(@btnPrimaryBackground, 15%);
color: #fff;
text-decoration: none;
}
border: 1px solid @btnPrimaryBackgroundHighlight;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnPrimaryBackground;
&:hover,
&:focus {
background-color: darken(@btnPrimaryBackground, 15%);
color: #fff;
text-decoration: none;
}
}
// Warning appears are orange
.btn-warning {
border: 1px solid @btnWarningBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnWarningBackground;
&:hover,
&:focus {
background-color: darken(@btnWarningBackground, 15%);
color: #fff;
text-decoration: none;
text-shadow: none;
}
border: 1px solid @btnWarningBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnWarningBackground;
&:hover,
&:focus {
background-color: darken(@btnWarningBackground, 15%);
color: #fff;
text-decoration: none;
text-shadow: none;
}
}
// Danger and error appear as red
.btn-danger {
border: 1px solid @btnDangerBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnDangerBackground;
&:hover,
&:focus {
background-color: darken(@btnDangerBackground, 15%);
color: #fff;
text-decoration: none;
}
border: 1px solid @btnDangerBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnDangerBackground;
&:hover,
&:focus {
background-color: darken(@btnDangerBackground, 15%);
color: #fff;
text-decoration: none;
}
}
// Success appears as green
.btn-success {
border: 1px solid @btnSuccessBackgroundHighlight;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnSuccessBackground;
&:hover,
&:focus {
background-color: darken(@btnSuccessBackground, 15%);
color: #fff;
text-decoration: none;
}
border: 1px solid @btnSuccessBackgroundHighlight;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnSuccessBackground;
&:hover,
&:focus {
background-color: darken(@btnSuccessBackground, 15%);
color: #fff;
text-decoration: none;
}
}
// Info appears as a neutral blue
.btn-info {
border: 1px solid @btnInfoBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnInfoBackground;
&:hover,
&:focus {
background-color: darken(@btnInfoBackground, 15%);
color: #fff;
text-decoration: none;
}
border: 1px solid @btnInfoBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnInfoBackground;
&:hover,
&:focus {
background-color: darken(@btnInfoBackground, 15%);
color: #fff;
text-decoration: none;
}
}
// SobiPro button; Sigsiu.NET
.btn-sobipro {
border: 1px solid @btnSobiProBackgroundHighlight;
......@@ -226,49 +230,47 @@ input[type="button"] {
// Inverse appears as dark gray
.btn-inverse {
border: 1px solid @btnInverseBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnInverseBackground;
&:hover,
&:focus {
background-color: darken(@btnInverseBackground, 15%);
color: #fff;
text-decoration: none;
}
border: 1px solid @btnInverseBackground;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #fff;
background-color: @btnInverseBackground;
&:hover,
&:focus {
background-color: darken(@btnInverseBackground, 15%);
color: #fff;
text-decoration: none;
}
}
// Cross-browser Jank
// --------------------------------------------------
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
}
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
}
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}
// Link buttons
// --------------------------------------------------
......@@ -277,24 +279,27 @@ input[type="submit"].btn {
.btn-link,
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
.box-shadow(none);
background-color: transparent;
background-image: none;
.box-shadow(none);
}
.btn-link {
border-color: transparent;
cursor: pointer;
color: @linkColor;
.border-radius(0);
border-color: transparent;
cursor: pointer;
color: @linkColor;
.border-radius(0);
}
.btn-link:hover,
.btn-link:focus {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
color: @grayDark;
text-decoration: none;
color: @grayDark;
text-decoration: none;
}
......@@ -47,10 +47,10 @@ a.disabled:hover {
border: 0;
}
/* Modal */
body.modal {
padding-top: 0;
}
///* Modal */
//body.modal {
// padding-top: 0;
//}
/* Alternating Rows */
.row-even,.row-odd {
......
//
// Modals
// --------------------------------------------------
/* Joomla JUI NOTE: Original .modal definition has to be commented */
// > Joomla JUI
// Base modal
div.modal {
position: fixed;
top: 5%;
left: 50%;
z-index: @zindexModal;
width: 80%;
margin-left: -40%;
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);
// Remove focus outline from opened modal
outline: none;
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
}
&.fade.in { top: 5%; }
}
//Modal for Batch views
.modal-batch {
overflow-y: visible;
}
// Modal viewport dimensions
.modal-body[class^="jviewport-height"],
.modal-body[class*="jviewport-height"] {
max-height: none;
}
//
// Modals
// --------------------------------------------------
// Background
// Sigsiu.NET: modal-backdrop without SobiPro scope
//.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
// > Joomla JUI
// .modal REMOVED
// < Joomla JUI
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
// Close icon
.close { margin-top: 2px; }
// Heading
h3 {
margin: 0;
line-height: 30px;
}
}
// Body (where all modal content resides)
.modal-body {
width: 98%;
position: relative;
max-height: 400px;
padding: 1%;
}
// Remove border and scrollbar from iframe modal
.modal-body iframe {
width: 100%;
max-height: none;
border: 0 !important;
}
// 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;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}
//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------
/* Joomla JUI NOTE: Original .modal definition has to be commented */
// > Joomla JUI
@media (max-width: 767px) {
// Modals
div.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
&.fade { top: -100px; }
&.fade.in { top: 20px; }
}
// Modals viewport width
div.modal[class*="jviewport-width"] {
width: auto;
margin: 0;
}
// Sigsiu.NET
.input-splarge {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
// UP TO LANDSCAPE PHONE
// ---------------------
@media (max-width: 480px) {
// Modals
div.modal {
top: 10px;
left: 10px;
right: 10px;
}
}
// < Joomla JUI
......@@ -2,184 +2,201 @@
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------
@media (max-width: 767px) {
// Padding to set content in a bit
body {
padding-left: 20px;
padding-right: 20px;
}
// Negative indent the now static "fixed" navbar
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
// Remove padding on container given explicit padding set on body
.container-fluid {
padding: 0;
}
// TYPOGRAPHY
// ----------
// Reset horizontal dl
.dl-horizontal {
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
// Undo negative margin on rows and thumbnails
.row,
.thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: none;
margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
}
// Make all grid-sized elements block level again
[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;