Skip to content

Instantly share code, notes, and snippets.

@sonipranjal

sonipranjal/index.haml

Created August 29, 2019 18:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sonipranjal/8437bc089283f8968d4631ad5f86e68c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sonipranjal/8437bc089283f8968d4631ad5f86e68c to your computer and use it in GitHub Desktop.
Download ZIP
No Questions Asked Form & Magic Focus
Raw
index.haml
%form.form{action: ''}
%p.field.required
%label.label.required{for: 'name'} Full name
%input.text-input#name{type: 'text', name: 'name', required: true, value: 'Use Tab'}
%p.field.required.half
%label.label{for: 'email'} E-mail
%input.text-input#email{type: 'email', name: 'email', required: true}
%p.field.half
%label.label{for: 'phone'} Phone
%input.text-input#phone{type: 'phone', name: 'phone'}
%p.field.half.required.error
%label.label{for: 'login'} Login
%input.text-input#login{type: 'text', name: 'login', required: true, value: 'mican'}
-# %span.message Already taken
%p.field.half.required
%label.label{for: 'password'} Password
%input.text-input#password{type: 'password', name: 'password', required: true}
%div.field
%label.label Sport?
%ul.checkboxes
- %w(Football Basketball Volleyball Golf Swimming).each_with_index do |item,i|
%li.checkbox
%input.checkbox-input{name: 'choice', type: 'checkbox', value: i, id: "choice-#{i}"}/
%label.checkbox-label{:for => "choice-#{i}"}= item
%div.field
%label.label Favourite JS framework
%ul.options
- %w(React Vue Angular Riot Polymer Ember Meteor Knockout).each_with_index do |item,i|
%li.option
%input.option-input{name: 'option', type: 'radio', value: i, id: "option-#{i}"}/
%label.option-label{:for => "option-#{i}"}= item
%p.field
%label.label{for: "about"} About
%textarea.textarea#about{cols: 50, name: "about", rows: 4}
%p.field.half
%label.label{for: "select"} Position
%select#select.select
%option{value: '', selected: true}
%option{value: "ceo"} CEO
%option{value: "front-end"} Front-end developer
%option{value: "back-end"} Back-end developer
%p.field.half
%input.button{type: "submit", value: "Send"}
Raw
no-questions-asked-form-magic-focus.markdown
Raw
script.coffeescript
class magicFocus
constructor: (@parent) ->
return unless @parent
@focus = document.createElement 'div'
@focus.classList.add 'magic-focus'
@parent.classList.add 'has-magic-focus'
@parent.appendChild @focus
for input in @parent.querySelectorAll('input, textarea, select')
input.addEventListener 'focus', ->
window.magicFocus.show()
input.addEventListener 'blur', ->
window.magicFocus.hide()
show: =>
return unless ['INPUT','SELECT','TEXTAREA'].includes? (el = document.activeElement).nodeName
clearTimeout(@reset)
el = document.querySelector("[for=#{el.id}]") if ['checkbox', 'radio'].includes? el.type
@focus.style.top = "#{el.offsetTop||0}px"
@focus.style.left = "#{el.offsetLeft||0}px"
@focus.style.width = "#{el.offsetWidth||0}px"
@focus.style.height = "#{el.offsetHeight||0}px"
hide: =>
@focus.style.width = 0 unless ['INPUT','SELECT','TEXTAREA', 'LABEL'].includes? (el = document.activeElement).nodeName
@reset = setTimeout ->
window.magicFocus.focus.removeAttribute('style')
, 200
# initialize
window.magicFocus = new magicFocus document.querySelector('.form')
$ ->
$('.select').customSelect()
Raw
scripts
<script src="https://codepen.io/mican/pen/XgRmNr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.customSelect/0.5.1/jquery.customSelect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.sass
// colors
$bg: #111111
$vibrant: #E8474C
$text: white
$label: white
$border: transparent
$static: #222222
$focus: #4E4E4E
$active: white
$inactive: #4E4E4E
$error: #E8474C
html
-webkit-font-smoothing: antialiased
body
background-color: $bg
font-family: 'Titillium Web', sans-serif
@media screen and (min-width: 40em)
font-size: 1.25em
%block
padding: .75em 1em
appearance: none
outline: none
line-height: normal
border-radius: 0
border: none
background: none
display: block
%label
@extend %block
font-weight: bold
color: $label
padding:
top: 0
left: 0
letter-spacing: .025em
font-size: 1.125em
line-height: 1.25
position: relative
z-index: 100
.required &:after
content: '\0020*'
color: $error
font-weight: normal
font-size: .75em
vertical-align: top
=stripes($color1: #555, $color2: transparent, $angle: 0deg, $stripe1-width: 25px, $stripe2-width: null)
@if $stripe2-width == null
$stripe2-width: $stripe1-width
$tile-size: ($stripe1-width + $stripe2-width) * 2
$stripe2-start: $stripe1-width / $tile-size * 100%
$stripe3-start: $stripe2-start + $stripe2-width / $tile-size * 100%
$stripe4-start: $stripe3-start + $stripe1-width / $tile-size * 100%
background-size: $tile-size $tile-size
background-image: linear-gradient($angle, $color1, $color1 $stripe2-start, $color2 $stripe2-start, $color2 $stripe3-start, $color1 $stripe3-start, $color1 $stripe4-start, $color2 $stripe4-start, $color2)
background-repeat: repeat
%input
@extend %block
font: inherit
line-height: normal
width: 100%
box-sizing: border-box
background: $static
color: white
position: relative
&:placeholder
color: $label
&:-webkit-autofill
box-shadow: 0 0 0px 1000px $bg inset
-webkit-text-fill-color: white
border-top-color: $bg
border-left-color: $bg
border-right-color: $bg
&.required, &[required]
&:not(:focus):not(:active)
&.error, .error &
+stripes(rgba($vibrant,.5), transparent, 135deg, 2px, 2px)
&:active, &:focus
.form:not(.has-magic-focus) &
background: $focus
%error
@extend %block
// color: red
position: absolute
bottom: 0
right: 0
z-index: 100
font-size: .625em
color: $label
%checkbox
border: 0
clip: rect(0 0 0 0)
height: 1px
margin: -1px
overflow: hidden
padding: 0
position: absolute
width: 1px
+ label
@extend %input
display: inline-block
width: auto
color: $inactive
position: relative
user-select: none
cursor: pointer
&:focus, &:active
+ label
color: $focus
&:checked
+ label
color: $active
// &:focus, &:active
// + label:before
// box-shadow: inset 0px 0px 0px .5em $focus
// color: $active
%option
+ label
// &:before
// border-radius: 50%
// &:after
// top: 1px
// left: 1px
// width: 1em
// height: 1em
// box-sizing: border-box
// border: 3px solid $bg
// border-radius: 50%
// transform: none
%button
@extend %block
font: inherit
// font-size: 1em
line-height: normal
cursor: pointer
background: $vibrant
color: white
font-weight: bold
width: auto
margin-left: auto
font-weight: bold
padding:
left: 2em
right: 2em
&:hover, &:focus, &:active
color: white
border-color: white
&:active
position: relative
top: 1px
left: 1px
body
padding: 2em
.form
max-width: 40em
margin: 0 auto
position: relative
display: flex
flex-flow: row wrap
justify-content: space-between
align-items: flex-end
.field
width: 100%
margin: 0 0 1.5em 0
&.half
@media screen and (min-width: 40em)
width: calc(50% - 1px)
&.last
margin-left: auto
.text-input
@extend %input
.textarea
@extend %input
max-width: 100%
.button
@extend %button
.label
@extend %label
.message
@extend %error
.select
@extend %input
text-indent: 0.01px
text-overflow: ""!important
&::-ms-expand
display: none
.checkboxes, .options
padding: 0
margin: 0
list-style-type: none
overflow: hidden
.checkbox, .option
float: left
margin: 1px
.checkbox-input
@extend %checkbox
.option-input
@extend %checkbox
// @extend %option
.customSelect
@extend %input
pointer-events: none
&:after
content: ''
pointer-events: none
width: .5em
height: .5em
border-style: solid
border-color: $label
border-width: 0 3px 3px 0
position: absolute
top: 50%
margin-top: -.625em
right: 1em
transform-origin: 0 0
transform: rotate(45deg)
&.customSelectHover
&.customSelectOpen
&.customSelectFocus
@extend %input:active
&:after
border-color: white
.customSelectInner
.magic-focus
position: absolute
z-index: 0
width: 0
// height: 0
pointer-events: none
background: rgba(white,.15)
transition: top .2s, left .2s, width .2s
backface-visibility: hidden
transform-style: preserve-3d
will-change: top, left, width
transform-origin: 0 0
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment