Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-05-10 00:06:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixing buttons (incomplete)

Browse source
This commit is contained in:
Dave Cranwell 2014-06-27 09:24:53 +01:00
parent 307ad3462a
commit b73dc91898
2 changed files with 53 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
View file

@ -149,29 +149,33 @@
<section id="buttons">
<h2>Buttons</h2>
<div href="" class="button">button</div>
<a href="#" class="button">button</a>
<div href="" class="button button-secondary">button-secondary</div>
<a href="#" class="button button-secondary">button-secondary</a>
<div href="" class="button yes">yes</div>
<a href="#" class="button yes">yes</a>
<div href="" class="button no">no / serious</div>
<a href="#" class="button no">no / serious</a>
<div href="" class="button bicolor icon icon-plus">bicolor with icon</div>
<a href="#" class="button bicolor icon icon-plus">bicolor with icon</a>
<div href="" class="button button-small">button-small</div>
<a href="#" class="button button-small">button-small</a>
<div href="" class="button bicolor button-small icon icon-plus">bicolo button-small</div>
<a href="#" class="button bicolor button-small icon icon-plus">bicolo button-small</a>
<div href="" class="button button-secondary no">mixed 1</div>
<a href="#" class="button button-secondary no">mixed 1</a>
<div href="" class="button no bicolor icon icon-cog">mixed 2</div>
<a href="#" class="button no bicolor icon icon-cog">mixed 2</a>
<div class="button no bicolor icon icon-cog">button on a div</div>
<p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
<button>button</button>
<button class="bicolor icon icon-plus">bicolor with icon</button>
<input type="submit" class="bicolor icon icon-plus" value="bicolor only supported on button elements" />
</section>
<section id="dropdowns">
@ -191,7 +195,7 @@
<div class="col3">
<div class="dropdown dropdown-button">
<div class="button">drop down</div>
<input type="button" value="drop down" class="button" />
<div class="dropdown-toggle icon icon-arrow-down"></div>
<ul role="menu">
<li><a href="#">Items in this list do not match button width</a></li>

50
wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
View file

@ -55,6 +55,7 @@ input, textarea, select, .richtext, .tagit{
border: 0 !important;
margin-top:-3px !important;
margin-bottom: -2px !important;
line-height:1em !important;
}
&:hover{
@ -76,13 +77,14 @@ input, textarea, select, .richtext, .tagit{
outline:none;
}
&:after{
/* Add select arrow back on browsers where native ui has been removed */
select ~ span:after{
@include border-radius(0 6px 6px 0);
z-index:0;
position:absolute;
right:1px;
right:0px;
top:1px;
height:95%;
bottom:0px;
width:1.5em;
font-family:wagtail;
content:"q";
@ -94,12 +96,14 @@ input, textarea, select, .richtext, .tagit{
pointer-events:none;
color:$color-grey-3;
background-color:$color-fieldset-hover;
margin:0px 1px 0 0;
margin:0px 1px 1px 0;
.ie &{
display:none;
}
}
.ie &:after{
display:none;
}
}
/* radio and check boxes */
@ -166,7 +170,9 @@ input[type=checkbox]:checked:before{
color:$color-teal;
}
/* Core button style */
/* Core button style
Note that these styles include methods to render buttons the same x-browser, described here:
http://cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights */
input[type=submit], input[type=reset], input[type=button], .button, button{
font-family:Open Sans,Arial,sans-serif;
@include border-radius(3px);
@ -182,7 +188,6 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
position:relative;
-webkit-font-smoothing: auto;
vertical-align: middle;
line-height:1em;
display:inline-block;
overflow:hidden;
position:relative;
@ -280,6 +285,14 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
}
}
/* Special styles to counteract Firefox's completely unwarranted assumptions about button styles */
input[type=submit], input[type=reset], input[type=button], button{
padding:0 1em;
height: em;
vertical-align: middle;
line-height:inherit;
}
button.icon{
&:before,
&:after{
@ -394,7 +407,7 @@ li.focused > .help{
opacity:1;
}
.required label:after{
.required .field > label:after{
content:"*";
color:$color-red;
font-weight:bold;
@ -652,7 +665,7 @@ ul.tagit li.tagit-choice-editable{
/* search-bars */
.search-bar{
.required label:after{
.required .field > label:after{
display:none;
}
}
@ -674,6 +687,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
padding-top:1.2em;
padding-left:0;
.choice_field &,
.model_multiple_choice_field &,
.boolean_field &,
.model_choice_field &,
@ -691,6 +705,11 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
font-size:0.95em;
padding:0.75em 1.4em;
padding:0 1.4em;
height: 2.8em;
vertical-align: middle;
line-height:inherit;
&.bicolor{
padding-left:3.5em;
@ -701,6 +720,15 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
}
}
/* Special styles to counteract Firefox's completely unwarranted assumptions about button styles */
input[type=submit], input[type=reset], input[type=button], button{
padding:0 1.4em;
height: 2.8em;
vertical-align: middle;
line-height:inherit;
}
.help{
opacity:1;
}