Fix fields

This commit is contained in:
Jeremy Thomas 2017-03-12 17:49:24 +00:00
parent dc3e216da9
commit 718bbdbfd0
4 changed files with 80 additions and 58 deletions

View File

@ -1286,12 +1286,12 @@ a.box:active {
border-top-color: transparent; border-top-color: transparent;
content: ""; content: "";
display: block; display: block;
height: 1rem; height: 1em;
position: relative; position: relative;
width: 1rem; width: 1em;
left: 50%; left: 50%;
margin-left: -8px; margin-left: -0.5em;
margin-top: -8px; margin-top: -0.5em;
position: absolute; position: absolute;
top: 50%; top: 50%;
position: absolute !important; position: absolute !important;
@ -2021,9 +2021,9 @@ a.box:active {
border-top-color: transparent; border-top-color: transparent;
content: ""; content: "";
display: block; display: block;
height: 1rem; height: 1em;
position: relative; position: relative;
width: 1rem; width: 1em;
position: absolute !important; position: absolute !important;
right: 0.625em; right: 0.625em;
top: 0.625em; top: 0.625em;
@ -2715,9 +2715,9 @@ a.box:active {
border-top-color: transparent; border-top-color: transparent;
content: ""; content: "";
display: block; display: block;
height: 1rem; height: 1em;
position: relative; position: relative;
width: 1rem; width: 1em;
} }
.number { .number {

View File

@ -160,10 +160,14 @@ route: index
</div> </div>
</div> </div>
</div> </div>
<p class="control has-addons has-addons-centered"> <div class="field has-addons has-addons-centered">
<p class="control">
<a id="add" class="button is-unselectable">Add column</a> <a id="add" class="button is-unselectable">Add column</a>
</p>
<p class="control">
<a id="remove" class="button is-unselectable">Remove column</a> <a id="remove" class="button is-unselectable">Remove column</a>
</p> </p>
</div>
<div id="message" class="message is-info"> <div id="message" class="message is-info">
<p class="message-header">Info</p> <p class="message-header">Info</p>
<p class="message-body">While it's possible to add as many columns as you want, it is recommend to stick with <strong>12 columns</strong>.<br> <p class="message-body">While it's possible to add as many columns as you want, it is recommend to stick with <strong>12 columns</strong>.<br>
@ -301,14 +305,18 @@ route: index
</a> </a>
</p> </p>
<div class="level-item"> <div class="level-item">
<p class="control has-addons"> <div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Filter"> <input class="input" type="text" placeholder="Filter">
</p>
<p class="control">
<button class="button"> <button class="button">
Search Search
</button> </button>
</p> </p>
</div> </div>
</div> </div>
</div>
<div class="level-right"> <div class="level-right">
<div class="level-item"> <div class="level-item">
Show: Show:
@ -370,7 +378,7 @@ route: index
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p> </p>
</div> </div>
<nav class="level"> <nav class="level is-mobile">
<div class="level-left"> <div class="level-left">
<a class="level-item"> <a class="level-item">
<span class="icon is-small"><i class="fa fa-reply"></i></span> <span class="icon is-small"><i class="fa fa-reply"></i></span>
@ -443,27 +451,35 @@ route: index
</div> </div>
<div class="column"> <div class="column">
<div class="block"> <div class="block">
<div class="field">
<p class="control"> <p class="control">
<code>button</code> <code>button</code>
</p> </p>
</div>
<a class="button">Button</a> <a class="button">Button</a>
</div> </div>
<div class="block"> <div class="block">
<div class="field">
<p class="control"> <p class="control">
<code>button is-primary</code> <code>button is-primary</code>
</p> </p>
</div>
<a class="button is-primary">Button</a> <a class="button is-primary">Button</a>
</div> </div>
<div class="block"> <div class="block">
<div class="field">
<p class="control"> <p class="control">
<code>button is-primary is-large</code> <code>button is-primary is-large</code>
</p> </p>
</div>
<a class="button is-primary is-large">Button</a> <a class="button is-primary is-large">Button</a>
</div> </div>
<div class="block"> <div class="block">
<div class="field">
<p class="control"> <p class="control">
<code>button is-primary is-large is-loading</code> <code>button is-primary is-large is-loading</code>
</p> </p>
</div>
<a class="button is-primary is-large is-loading">Button</a> <a class="button is-primary is-large is-loading">Button</a>
</div> </div>
</div> </div>
@ -517,7 +533,7 @@ route: index
<div class="column"> <div class="column">
<p class="title">Title</p> <p class="title">Title</p>
<p class="subtitle">Subtitle</p> <p class="subtitle">Subtitle</p>
<div class="control is-grouped"> <div class="field is-grouped">
<p class="control"> <p class="control">
<span class="select"> <span class="select">
<select> <select>
@ -529,12 +545,15 @@ route: index
<input class="input" type="text" placeholder="Text input"> <input class="input" type="text" placeholder="Text input">
</p> </p>
</div> </div>
<div class="field">
<p class="control"> <p class="control">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> <input type="checkbox">
Checkbox Checkbox
</label> </label>
</p> </p>
</div>
<div class="field">
<p class="control"> <p class="control">
<label class="radio"> <label class="radio">
<input type="radio" name="question"> <input type="radio" name="question">
@ -545,9 +564,12 @@ route: index
Buttons Buttons
</label> </label>
</p> </p>
</div>
<div class="field">
<p class="control"> <p class="control">
<button class="button is-primary">Button</button> <a class="button is-primary">Button</a>
</p> </p>
</div>
<div class="tabs is-boxed"> <div class="tabs is-boxed">
<ul> <ul>
<li class="is-active"> <li class="is-active">
@ -577,9 +599,9 @@ route: index
</ul> </ul>
</div> </div>
<p class="block"> <p class="block">
<span class="tag is-dark">Tag<button class="delete is-small"></button></span> <span class="tag is-dark">Tag<a class="delete is-small"></a></span>
<span class="tag is-info">Two<button class="delete is-small"></button></span> <span class="tag is-info">Two<a class="delete is-small"></a></span>
<span class="tag is-danger">Three<button class="delete is-small"></button></span> <span class="tag is-danger">Three<a class="delete is-small"></a></span>
</p> </p>
<div class="message is-warning"> <div class="message is-warning">
<div class="message-header"> <div class="message-header">
@ -590,7 +612,7 @@ route: index
</div> </div>
</div> </div>
<div class="notification is-success"> <div class="notification is-success">
<button class="delete"></button> <a class="delete"></a>
Success! Success!
</div> </div>
</div> </div>

View File

@ -151,5 +151,5 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
pointer-events: none pointer-events: none
&:after &:after
+loader +loader
+center(16px) +center(1em)
position: absolute !important position: absolute !important

View File

@ -137,9 +137,9 @@
border-top-color: transparent border-top-color: transparent
content: "" content: ""
display: block display: block
height: 1rem height: 1em
position: relative position: relative
width: 1rem width: 1em
=overflow-touch =overflow-touch
-webkit-overflow-scrolling: touch -webkit-overflow-scrolling: touch