deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-08 08:52:25 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #21 from Fraham/Fraham-DisableInputs

Browse source 
Adding disbaled styling for inputs
This commit is contained in:
Rhyne 2017-11-05 09:41:46 -05:00 committed by GitHub
parent 8e495e1124 45007f7d0d
commit 9dbee0e2a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -240,6 +240,8 @@
<button class="btn-block">Block level</button>
</div>
</div>
<button class="disabled">Disabled</button>
<button disabled>Disabled</button>
<div class="docs">
<pre>
&lt;p&gt;Insprired by &lt;a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank"&gt;Imprefect Buttons&lt;/a&gt;&lt;/p&gt;
@ -251,7 +253,9 @@
&lt;div class="col-6 col"&gt;
&lt;button class="btn-block"&gt;Block level&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;
&lt;button class="disabled"&gt;Disabled&lt;/button&gt;
&lt;button disabled&gt;Disabled&lt;/button&gt;</pre>
</div>
</div>
<div id="forms" class="section">
@ -274,6 +278,10 @@
</div>
</div>
</div>
<div class="form-group">
<label>Disabled</label>
<input type="text" placeholder="Disabled" disabled>
</div>
<div class="form-group">
<label>Select</label>
<select>
@ -320,6 +328,10 @@
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Disabled&lt;/label&gt;
&lt;input type="text" placeholder="Disabled" disabled&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Select&lt;/label&gt;
&lt;select&gt;
@ -629,7 +641,7 @@ function add(x, y) {
<div class="row flex-center">
<div class="card" style="width: 20rem;">
<img class="image-top" src="https://picsum.photos/768" alt="Card example image">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>

5
src/buttons.less
View file

@ -1,4 +1,4 @@
button, .paper-btn {
button, .paper-btn, input[type="button"] {
align-self:center;
background:transparent;
transition:all .5s ease;
@ -27,6 +27,9 @@ button, .paper-btn {
&:hover{
.shadow-hover;
}
&.disabled, &[disabled]{
.disabled;
}
}
a {

28
src/forms.less
View file

@ -13,6 +13,14 @@ input, select {
&:focus {
border: 2px solid @secondary;
}
&.disabled, &[disabled]{
.disabled;
}
}
.disabled{
cursor: not-allowed;
opacity: 0.5;
}
.form-group {
@ -30,11 +38,11 @@ input, select {
margin-bottom: .5rem;
cursor: pointer;
input {
border: 0;
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
border: 0;
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
display: none;
}
@ -53,10 +61,10 @@ input, select {
vertical-align: -0.25em;
}
input[type="radio"] + span:before {
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem .6rem;
border-bottom-right-radius: 1rem .9rem;
border-bottom-left-radius: .7rem 1rem;
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem .6rem;
border-bottom-right-radius: 1rem .9rem;
border-bottom-left-radius: .7rem 1rem;
}
input[type="checkbox"] + span:before {
border-top-left-radius: 255px 15px;
@ -84,4 +92,4 @@ input, select {
fieldset.form-group {
border: none;
padding: 0;
}
}