maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Selects & Ghost Fields (#7607)

Browse source 
* ghost forms

* syntax error

* typo
This commit is contained in:
ludwiczakpawel 2020-05-01 14:14:14 +02:00 • committed by GitHub
parent c734457a44
commit 7e88ad1a7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
app/assets/stylesheets/components/forms.scss
View file

@ -14,6 +14,12 @@
border-color: var(--form-border-hover);
}
&-focus {
background-color: var(--form-bg-focus);
border-color: var(--form-border-focus);
box-shadow: 1px 1px 0 var(--form-border-focus);
}
&-disabled {
opacity: 0.6;
}
@ -45,9 +51,7 @@
}
&:focus {
background-color: var(--form-bg-focus);
border-color: var(--form-border-focus);
box-shadow: 1px 1px 0 var(--form-border-focus);
@extend %form-styling-focus;
}
&--disabled,
@ -106,6 +110,39 @@
}
}
// Selects
.crayons-select {
line-height: $lh-base;
padding: 0.5em;
padding-right: $su-7;
font-family: inherit;
font-size: $fs-base;
width: 100%;
position: relative;
outline: none;
@extend %form-styling;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16l-6-6h12l-6 6z' fill='%2308090A'/%3E%3C/svg%3E");
background-position: calc(100% - #{$su-2}) calc(50% - 1px);
background-repeat: no-repeat;
&:hover {
@extend %form-styling-hover;
}
&:focus {
@extend %form-styling-focus;
}
&--disabled,
&[disabled] {
@extend %form-styling-disabled;
}
&::-ms-clear {
display: none;
}
}
///////////////////////////////////////////////////
// Full Fields markup
@ -183,6 +220,22 @@
}
}
///////////////////////////////////////////////////
.crayons-textfield {
&--ghost,
&--ghost:hover,
&--ghost:focus,
&--ghost[disabled] {
all: unset;
width: 100%;
}
}
textarea.crayons-textfield.crayons-textfield--ghost {
white-space: pre-wrap;
}
///////////////////////////////////////////////////
.crayons-color-selector {
@extend %form-styling;
padding: calc(0.5em - var(--border-width)) 0.5em;

42
app/views/pages/crayons.html.erb
View file

@ -277,22 +277,54 @@
</div>
<div>
<input type="text" class="crayons-textfield" placeholder="This is placeholder..."><br><br>
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled><br><br>
<input type="text" class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textfield...">
</div>
<pre><%= '
<input type="text" class="crayons-textfield" placeholder="This is placeholder...">
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
<input type="text" class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textfield...">
'.rstrip %></pre>
<div>
<textarea class="crayons-textfield" placeholder="This is palceholder..."></textarea><br><br>
<textarea class="crayons-textfield" placeholder="This is palceholder..." disabled>Disabled textarea</textarea>
<textarea class="crayons-textfield" placeholder="This is placeholder..."></textarea><br><br>
<textarea class="crayons-textfield" placeholder="This is placeholder..." disabled>Disabled textarea</textarea><br><br>
<textarea class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textarea..."></textarea>
</div>
<pre><%= '
<textarea class="crayons-textfield" placeholder="This is palceholder..."></textarea>
<textarea class="crayons-textfield" placeholder="This is palceholder..." disabled>Disabled textarea</textarea>
<textarea class="crayons-textfield" placeholder="This is placeholder..."></textarea>
<textarea class="crayons-textfield" placeholder="This is placeholder..." disabled>Disabled textarea</textarea>
<textarea class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textarea..."></textarea>
'.rstrip %></pre>
<div>
<select class="crayons-select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select><br><br>
<select class="crayons-select" disabled>
<option>Option 1 disabled</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<pre><%= '
<select class="crayons-select">
<option>Option 1</option>
...
</select>
<select class="crayons-select" disabled>
<option>Option 1 disbled</option>
...
</select>
'.rstrip %></pre>
<div>

2
app/views/users/_misc.html.erb
View file

@ -4,7 +4,7 @@
<div class="crayons-field">
<%= f.label :inbox_type, "Inbox type", class: "crayons-field__label" %>
<p class="crayons-field__description">Open your inbox to messages from people you don't follow or keep your inbox private to mutual follows.</p>
<%= f.select :inbox_type, [%w[Open open], %w[Private private]], class: "crayons-select" %>
<%= f.select :inbox_type, [%w[Open open], %w[Private private]], {}, { class: "crayons-select" } %>
</div>
<div class="crayons-field">