fixed issue 1594:radio widget layout conflicts with bootstrap, thanks Paolo Caruccio

This commit is contained in:
mdipierro
2013-07-19 04:33:18 -05:00
parent 5add14bf68
commit bf3d345ce5
4 changed files with 283 additions and 263 deletions
+1 -1
View File
@@ -1 +1 @@
Version 2.6.0-development+timestamp.2013.07.19.03.27.22 Version 2.6.0-development+timestamp.2013.07.19.04.32.07
@@ -233,10 +233,11 @@ div.controls .error {
@media only screen and (max-width:979px){ @media only screen and (max-width:979px){
body{padding-top:0px;} body{padding-top:0px;}
#navbar{top:5px;} #navbar{/*top:5px;*/}
div.flash{right:5px;} div.flash{right:5px;}
.dropdown-menu ul{visibility:visible;} .dropdown-menu ul{visibility:visible;}
} }
@media only screen and (max-width:479px){ @media only screen and (max-width:479px){
body{ body{
padding-left:10px; padding-left:10px;
@@ -250,3 +251,10 @@ div.controls .error {
width:95%; width:95%;
} }
} }
@media (max-width: 767px) {
.navbar {
margin-right: -20px;
margin-left: -20px;
}
}
@@ -233,10 +233,11 @@ div.controls .error {
@media only screen and (max-width:979px){ @media only screen and (max-width:979px){
body{padding-top:0px;} body{padding-top:0px;}
#navbar{top:5px;} #navbar{/*top:5px;*/}
div.flash{right:5px;} div.flash{right:5px;}
.dropdown-menu ul{visibility:visible;} .dropdown-menu ul{visibility:visible;}
} }
@media only screen and (max-width:479px){ @media only screen and (max-width:479px){
body{ body{
padding-left:10px; padding-left:10px;
@@ -250,3 +251,10 @@ div.controls .error {
width:95%; width:95%;
} }
} }
@media (max-width: 767px) {
.navbar {
margin-right: -20px;
margin-left: -20px;
}
}
@@ -1,260 +1,264 @@
/*============================================================= /*=============================================================
CUSTOM RULES CUSTOM RULES
==============================================================*/ ==============================================================*/
body{height:auto;} /* to avoid vertical scroll bar */ body{height:auto;} /* to avoid vertical scroll bar */
a{} a{}
a:visited{} a:visited{}
a:hover{} a:hover{}
a:focus{} a:focus{}
a:active{} a:active{}
h1{} h1{}
h2{} h2{}
h3{} h3{}
h4{} h4{}
h5{} h5{}
h6{} h6{}
div.flash.flash-center{left:25%;right:25%;} div.flash.flash-center{left:25%;right:25%;}
div.flash.flash-top,div.flash.flash-top:hover{ div.flash.flash-top,div.flash.flash-top:hover{
position:relative; position:relative;
display:block; display:block;
margin:0; margin:0;
padding:1em; padding:1em;
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
text-align:center; text-align:center;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
color:#865100; color:#865100;
background:#feea9a; background:#feea9a;
border:1px solid; border:1px solid;
border-top:0px; border-top:0px;
border-left:0px; border-left:0px;
border-right:0px; border-right:0px;
border-radius:0; border-radius:0;
opacity:1; opacity:1;
} }
#header{margin-top:60px;} #header{margin-top:60px;}
.mastheader h1 { .mastheader h1 {
margin-bottom:9px; margin-bottom:9px;
font-size:81px; font-size:81px;
font-weight:bold; font-weight:bold;
letter-spacing:-1px; letter-spacing:-1px;
line-height:1; line-height:1;
font-size:54px; font-size:54px;
} }
.mastheader small { .mastheader small {
font-size:20px; font-size:20px;
font-weight:300; font-weight:300;
} }
/* auth navbar - primitive style */ /* auth navbar - primitive style */
.auth_navbar,.auth_navbar a{color:inherit;} .auth_navbar,.auth_navbar a{color:inherit;}
.navbar-inner {-webkit-border-radius:0;-moz-border-radius:0;border-radius:0} .navbar-inner {-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.ie-lte7 .auth_navbar,.auth_navbar a{color:expression(this.parentNode.currentStyle['color']); /* ie7 doesn't support inherit */} .ie-lte7 .auth_navbar,.auth_navbar a{color:expression(this.parentNode.currentStyle['color']); /* ie7 doesn't support inherit */}
.auth_navbar a{white-space:nowrap;} /* to avoid the nav split on more lines */ .auth_navbar a{white-space:nowrap;} /* to avoid the nav split on more lines */
.auth_navbar a:hover{color:white;text-decoration:none;} .auth_navbar a:hover{color:white;text-decoration:none;}
ul#navbar>.auth_navbar{ ul#navbar>.auth_navbar{
display:inline-block; display:inline-block;
padding:5px; padding:5px;
} }
/* form errors message box customization */ /* form errors message box customization */
div.error_wrapper{margin-bottom:9px;} div.error_wrapper{margin-bottom:9px;}
div.error_wrapper .error{ div.error_wrapper .error{
border-radius: 4px; border-radius: 4px;
-o-border-radius: 4px; -o-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
} }
/* below rules are only for formstyle = bootstrap /* below rules are only for formstyle = bootstrap
trying to make errors look like bootstrap ones */ trying to make errors look like bootstrap ones */
div.controls .error_wrapper{ div.controls .error_wrapper{
display:inline-block; display:inline-block;
margin-bottom:0; margin-bottom:0;
vertical-align:middle; vertical-align:middle;
} }
div.controls .error{ div.controls .error{
min-width:5px; min-width:5px;
background:inherit; background:inherit;
color:#B94A48; color:#B94A48;
border:none; border:none;
padding:0; padding:0;
margin:0; margin:0;
/*display:inline;*/ /* uncommenting this, the animation effect is lost */ /*display:inline;*/ /* uncommenting this, the animation effect is lost */
} }
div.controls .help-inline{color:#3A87AD;} div.controls .help-inline{color:#3A87AD;}
div.controls .error_wrapper +.help-inline {margin-left:-99999px;} div.controls .error_wrapper +.help-inline {margin-left:-99999px;}
div.controls select +.error_wrapper {margin-left:5px;} div.controls select +.error_wrapper {margin-left:5px;}
.ie-lte7 div.error{color:#fff;} .ie-lte7 div.error{color:#fff;}
/* beautify brand */ /* beautify brand */
.navbar {margin-bottom:0} .navbar {margin-bottom:0}
.navbar-inverse .brand{color:#c6cecc;} .navbar-inverse .brand{color:#c6cecc;}
.navbar-inverse .brand b{display:inline-block;margin-top:-1px;} .navbar-inverse .brand b{display:inline-block;margin-top:-1px;}
.navbar-inverse .brand b>span{font-size:22px;color:white} .navbar-inverse .brand b>span{font-size:22px;color:white}
.navbar-inverse .brand:hover b>span{color:white} .navbar-inverse .brand:hover b>span{color:white}
/* beautify web2py link in navbar */ /* beautify web2py link in navbar */
span.highlighted{color:#d8d800;} span.highlighted{color:#d8d800;}
.open span.highlighted{color:#ffff00;} .open span.highlighted{color:#ffff00;}
/*============================================================= /*=============================================================
OVERRIDING WEB2PY.CSS RULES OVERRIDING WEB2PY.CSS RULES
==============================================================*/ ==============================================================*/
/* reset to default */ /* reset to default */
a{white-space:normal;} a{white-space:normal;}
li{margin-bottom:0;} li{margin-bottom:0;}
textarea,button{display:block;} textarea,button{display:block;}
/*reset ul padding */ /*reset ul padding */
ul#navbar{padding:0;} ul#navbar{padding:0;}
/* label aligned to related input */ /* label aligned to related input */
td.w2p_fl,td.w2p_fc {padding:0;} td.w2p_fl,td.w2p_fc {padding:0;}
#web2py_user_form td{vertical-align:middle;} #web2py_user_form td{vertical-align:middle;}
/*============================================================= /*=============================================================
OVERRIDING BOOTSTRAP.CSS RULES OVERRIDING BOOTSTRAP.CSS RULES
==============================================================*/ ==============================================================*/
/* because web2py handles this via js */ /* because web2py handles this via js */
textarea { width:90%} textarea { width:90%}
.hidden{visibility:visible;} .hidden{visibility:visible;}
/* right folder for bootstrap black images/icons */ /* right folder for bootstrap black images/icons */
[class^="icon-"],[class*=" icon-"]{ [class^="icon-"],[class*=" icon-"]{
background-image:url("../images/glyphicons-halflings.png") background-image:url("../images/glyphicons-halflings.png")
} }
/* right folder for bootstrap white images/icons */ /* right folder for bootstrap white images/icons */
.icon-white, .icon-white,
.nav-tabs > .active > a > [class^="icon-"], .nav-tabs > .active > a > [class^="icon-"],
.nav-tabs > .active > a > [class*=" icon-"], .nav-tabs > .active > a > [class*=" icon-"],
.nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"], .nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"], .nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"] { .dropdown-menu > .active > a > [class*=" icon-"] {
background-image:url("../images/glyphicons-halflings-white.png"); background-image:url("../images/glyphicons-halflings-white.png");
} }
/* bootstrap has a label as input's wrapper while web2py has a div */ /* bootstrap has a label as input's wrapper while web2py has a div */
div>input[type="radio"],div>input[type="checkbox"]{margin:0;} div>input[type="radio"],div>input[type="checkbox"]{margin:0;}
/* bootstrap has button instead of input */ /* bootstrap has button instead of input */
input[type="button"], input[type="submit"]{margin-right:8px;} input[type="button"], input[type="submit"]{margin-right:8px;}
/*============================================================= /* web2py radio widget adjustment */
RULES FOR SOLVING CONFLICTS BETWEEN WEB2PY.CSS AND BOOTSTRAP.CSS .generic-widget input[type='radio'] {margin:-1px 0 0 0; vertical-align: middle;}
==============================================================*/ .generic-widget input[type='radio'] + label {display:inline-block; margin:0 0 0 6px; vertical-align: middle;}
/*when formstyle=table3cols*/ /*=============================================================
tr#auth_user_remember__row>td.w2p_fw>div{padding-bottom:8px;} RULES FOR SOLVING CONFLICTS BETWEEN WEB2PY.CSS AND BOOTSTRAP.CSS
td.w2p_fw div>label{vertical-align:middle;} ==============================================================*/
td.w2p_fc {padding-bottom:5px;}
/*when formstyle=divs*/ /*when formstyle=table3cols*/
div#auth_user_remember__row{margin-top:4px;} tr#auth_user_remember__row>td.w2p_fw>div{padding-bottom:8px;}
div#auth_user_remember__row>.w2p_fl{display:none;} td.w2p_fw div>label{vertical-align:middle;}
div#auth_user_remember__row>.w2p_fw{min-height:39px;} td.w2p_fc {padding-bottom:5px;}
div.w2p_fw,div.w2p_fc{ /*when formstyle=divs*/
display:inline-block; div#auth_user_remember__row{margin-top:4px;}
vertical-align:middle; div#auth_user_remember__row>.w2p_fl{display:none;}
margin-bottom:0; div#auth_user_remember__row>.w2p_fw{min-height:39px;}
} div.w2p_fw,div.w2p_fc{
div.w2p_fc{ display:inline-block;
padding-left:5px; vertical-align:middle;
margin-top:-8px; margin-bottom:0;
} }
/*when formstyle=ul*/ div.w2p_fc{
form>ul{ padding-left:5px;
list-style:none; margin-top:-8px;
margin:0; }
} /*when formstyle=ul*/
li#auth_user_remember__row{margin-top:4px;} form>ul{
li#auth_user_remember__row>.w2p_fl{display:none;} list-style:none;
li#auth_user_remember__row>.w2p_fw{min-height:39px;} margin:0;
/*when formstyle=bootstrap*/ }
#auth_user_remember__row label.checkbox{display:block;} li#auth_user_remember__row{margin-top:4px;}
span.inline-help{display:inline-block;} li#auth_user_remember__row>.w2p_fl{display:none;}
input[type="text"].input-xlarge,input[type="password"].input-xlarge{width:270px;} li#auth_user_remember__row>.w2p_fw{min-height:39px;}
/*when recaptcha is used*/ /*when formstyle=bootstrap*/
#recaptcha{min-height:30px;display:inline-block;margin-bottom:0;line-height:30px;vertical-align:middle;} #auth_user_remember__row label.checkbox{display:block;}
td>#recaptcha{margin-bottom:6px;} span.inline-help{display:inline-block;}
div>#recaptcha{margin-bottom:9px;} input[type="text"].input-xlarge,input[type="password"].input-xlarge{width:270px;}
div.control-group.error{ /*when recaptcha is used*/
width:auto; #recaptcha{min-height:30px;display:inline-block;margin-bottom:0;line-height:30px;vertical-align:middle;}
background:transparent; td>#recaptcha{margin-bottom:6px;}
border:0; div>#recaptcha{margin-bottom:9px;}
color:inherit; div.control-group.error{
padding:0; width:auto;
background-repeat:repeat; background:transparent;
} border:0;
color:inherit;
/*============================================================= padding:0;
OTHER RULES background-repeat:repeat;
==============================================================*/ }
/* Massimo Di Pierro fixed alignment in forms with list:string */ /*=============================================================
form table tr{margin-bottom:9px;} OTHER RULES
td.w2p_fw ul{margin-left:0px;} ==============================================================*/
/* web2py_console in grid and smartgrid */ /* Massimo Di Pierro fixed alignment in forms with list:string */
.hidden{visibility:visible;} form table tr{margin-bottom:9px;}
.web2py_console input{ td.w2p_fw ul{margin-left:0px;}
display: inline-block;
margin-bottom: 0; /* web2py_console in grid and smartgrid */
vertical-align: middle; .hidden{visibility:visible;}
} .web2py_console input{
.web2py_console input[type="submit"], display: inline-block;
.web2py_console input[type="button"], margin-bottom: 0;
.web2py_console button{ vertical-align: middle;
padding-top:4px; }
padding-bottom:4px; .web2py_console input[type="submit"],
margin:3px 0 0 2px; .web2py_console input[type="button"],
} .web2py_console button{
.web2py_console a, padding-top:4px;
.web2py_console select, padding-bottom:4px;
.web2py_console input margin:3px 0 0 2px;
{ }
margin:3px 0 0 2px; .web2py_console a,
} .web2py_console select,
.web2py_grid form table{width:auto;} .web2py_console input
/* auth_user_remember checkbox extrapadding in IE fix */ {
.ie-lte9 input#auth_user_remember.checkbox {padding-left:0;} margin:3px 0 0 2px;
}
div.controls .error { .web2py_grid form table{width:auto;}
width: auto; /* auth_user_remember checkbox extrapadding in IE fix */
} .ie-lte9 input#auth_user_remember.checkbox {padding-left:0;}
/*============================================================= div.controls .error {
MEDIA QUERIES width: auto;
==============================================================*/ }
@media only screen and (max-width:979px){ /*=============================================================
body{padding-top:0px;} MEDIA QUERIES
#navbar{/*top:5px;*/} ==============================================================*/
div.flash{right:5px;}
.dropdown-menu ul{visibility:visible;} @media only screen and (max-width:979px){
} body{padding-top:0px;}
#navbar{/*top:5px;*/}
@media only screen and (max-width:479px){ div.flash{right:5px;}
body{ .dropdown-menu ul{visibility:visible;}
padding-left:10px; }
padding-right:10px;
} @media only screen and (max-width:479px){
.navbar-fixed-top,.navbar-fixed-bottom { body{
margin-left:-10px; padding-left:10px;
margin-right:-10px; padding-right:10px;
} }
input[type="text"],input[type="password"],select{ .navbar-fixed-top,.navbar-fixed-bottom {
width:95%; margin-left:-10px;
} margin-right:-10px;
} }
input[type="text"],input[type="password"],select{
@media (max-width: 767px) { width:95%;
.navbar { }
margin-right: -20px; }
margin-left: -20px;
} @media (max-width: 767px) {
} .navbar {
margin-right: -20px;
margin-left: -20px;
}
}