styleguide elements 01

In this example below you will see how to do a styleguide elements 01 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ikbenivo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ikbenivo ©
  • HTML
  • CSS
  • JavaScript
        
<header>
  <div class="loading-bug">

<svg width="15px" height="30px" viewBox="0 0 15 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Relatie-Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-2" transform="translate(-712.000000, -15.000000)" fill="#EEF1F6">
            <g id="HEADER">
                <g id="Page-1" transform="translate(712.000000, 15.000000)">
                    <path d="M9.61164474,5.52489474 C9.62664474,4.96160526 9.79894737,1.11331579 11.5918421,1.04265789 C11.8790132,1.032 12.1042105,0.789236842 12.0935526,0.500486842 C12.0807237,0.212526316 11.8357895,-0.0148421053 11.5519737,0.000947368421 C10.3227632,0.0489078947 9.41802632,1.01107895 8.93546053,2.78305263 C8.64453947,3.85259211 8.58236842,4.93989474 8.56934211,5.39344737 C8.19315789,5.3595 7.82427632,5.34134211 7.47236842,5.34134211 C6.95309211,5.34134211 6.38921053,5.38061842 5.81210526,5.45265789 C5.80282895,5.04331579 5.74973684,3.90469737 5.44440789,2.78305263 C4.96184211,1.01107895 4.05710526,0.0489078947 2.82868421,0.000947368421 C2.68776316,-0.00714473684 2.55769737,0.0433815789 2.45506579,0.137328947 C2.35223684,0.232065789 2.29243421,0.361144737 2.28671053,0.500881579 C2.28098684,0.639828947 2.32993421,0.772855263 2.42486842,0.875486842 C2.51980263,0.978118421 2.64888158,1.03752632 2.78763158,1.04265789 C3.77565789,1.08153947 4.26157895,2.29081579 4.49506579,3.29838158 C4.76131579,4.44548684 4.76980263,5.58430263 4.76980263,5.59515789 L4.87322368,5.59594737 C1.64763158,6.17818421 -1.47828947,7.65153947 0.754539474,8.89338158 C5.09782895,11.2612105 6.57414474,12.2000921 7.47236842,12.2000921 C8.36940789,12.2000921 9.44151316,11.2612105 13.7836184,8.89338158 C16.11375,7.59726316 12.8778947,6.04871053 9.61164474,5.52489474 M14.9439474,11.8554868 C14.9439474,25.1885132 7.49822368,30.1787763 7.49822368,29.0296974 C7.49822368,27.3690395 7.51440789,18.3301579 7.51440789,16.3302237 C7.51440789,15.0978553 14.9439474,10.9886447 14.9439474,11.8554868" id="Fill-1"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
</header> 



<!-- form uitprobeersels -->
<section class="">
  <form>
 <div class="form-group row">
  <label for="example-text-input" class="col-4 col-form-label">Voornaam</label>
  <div class="col-8">
    <input class="form-control" type="text" value="Pepijn" id="example-text-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-text-input" class="col-4 col-form-label">Tussenvoegsels</label>
  <div class="col-8">
    <input class="form-control" type="text" value="" placeholder="van der" id="example-text-input">
  </div>
</div>
<div class="form-group row">
  <label for="example-text-input" class="col-4 col-form-label">Achternaam</label>
  <div class="col-8">
    <input class="form-control" type="text" value="Bakker" id="example-text-input">
  </div>
</div>    
<div class="form-group form-upload row ">
    <div class="col-12">

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />

      <label for="file"><span>
        
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Bestanden" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Bestanden-uploaden" transform="translate(-749.000000, -391.000000)" fill-rule="nonzero" fill="#06ABF0">
            <g id="dashboard" transform="translate(330.000000, 105.000000)">
                <g id="upload" transform="translate(30.000000, 255.000000)">
                    <g id="Group" transform="translate(389.000000, 14.000000)">
                        <g id="outbox" transform="translate(0.000000, 17.000000)">
                            <path d="M14.9725,6.832 L13.4545,2.3875 C13.387,2.19 13.2015,2.0575 12.993,2.0575 L9.752,2.06 L10.0435,2.527 C10.142,2.6855 10.1915,2.865 10.1935,3.0445 L12.614,3.041 L13.993,7.0565 L11,7.0565 C10.448,7.0565 10,7.5045 10,8.0565 L10,8.5565 L5,8.5565 L5,8.0565 C5,7.5045 4.552,7.0565 4,7.0565 L1.0065,7.0565 L2.328,3.056 L5.0025,3.052 C5.0035,2.8695 5.052,2.6875 5.152,2.526 L5.441,2.063 L2.004,2.0665 C1.7955,2.0665 1.61,2.1995 1.5425,2.3965 L0.0255,6.838 C0.0085,6.8885 0,6.9415 0,6.9945 L0,13.5565 C0,14.1085 0.448,14.5565 1,14.5565 L14,14.5565 C14.552,14.5565 15,14.1085 15,13.5565 L15,6.9945 C15,6.9395 14.9905,6.885 14.9725,6.832 Z" id="Shape"></path>
                            <path d="M5.9995,3.5565 L6.597,3.5565 L6.597,5.5565 C6.597,5.833 6.8205,6.0565 7.097,6.0565 L8.097,6.0565 C8.3735,6.0565 8.597,5.833 8.597,5.5565 L8.597,3.5565 L9.1945,3.5565 C9.3765,3.5565 9.544,3.458 9.632,3.2985 C9.7205,3.14 9.715,2.9455 9.619,2.791 L8.021,0.235 C7.9295,0.089 7.7695,0 7.597,0 C7.4245,0 7.2645,0.089 7.173,0.235 L5.575,2.7915 C5.479,2.946 5.4735,3.14 5.562,3.299 C5.65,3.458 5.8175,3.5565 5.9995,3.5565 Z" id="Shape"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
        <u>Selecteer een bestand...</u></span></label>
  </div>
  </div>
</div>   

    
  </form>
 </section>

<!-- ==== Buttons ==== -->
<section>
<a href="#" class="btn btn-primary">hover me!</a>
<input type="submit" value="call to action" class="btn btn-primary">
</section>



<!-- ==== Card ==== -->
<section>

<div class="card box">
  <h3 class="card__title">Personenauto - Wa</h3>
  <div class="card__subtitle">34xxp1 VOLKSWAGEN P</div>
  <div class="card__icon">

  
<svg width="60px" height="45px" viewBox="0 0 60 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="other-elements" transform="translate(-121.000000, -631.000000)" fill="#3C4858">
            <g id="Group-3" transform="translate(60.000000, 540.000000)">
                <path d="M119.754327,103.96161 C119.163998,103.151167 118.060995,103.07872 117.398165,103.07872 C117.178086,103.07872 115.629734,103.00622 114.304074,104.109222 C114.156489,104.256808 113.78883,104.551973 113.493632,104.919664 L113.421138,104.772079 C109.59177,95.9352275 107.823339,91.5877248 107.750825,91.3676652 C107.60324,91.1475858 107.235581,91 107.160496,91 L92.0632143,91 L89.1167356,91 L74.0194543,91 C73.9469539,91 73.5767037,91.0725004 73.4291245,91.3676652 C73.3566242,91.515251 71.5131478,95.8598637 67.7588118,104.772079 L67.6863181,104.919664 C67.3186528,104.476914 67.023488,104.256834 66.8758757,104.109222 C65.5502155,103.003621 64.1520417,103.07872 63.7817848,103.07872 C63.1189547,103.151214 62.013354,103.151214 61.4256226,103.96161 C60.9103782,104.62444 60.8352928,105.802488 61.3531222,106.39287 C61.7207875,106.835621 62.1635646,106.908115 63.1940003,107.128214 C64.3720482,107.348294 64.4471469,107.200715 65.0348783,107.495879 C65.477629,107.643465 65.6977084,107.93863 65.917768,108.086209 L67.0233687,127.160471 L67.2434481,127.160471 L67.2434481,134.451602 C67.2434481,135.186946 67.8337779,135.777263 68.5691084,135.777263 L72.3984767,135.777263 C72.766142,135.777263 73.0613068,135.629677 73.2813664,135.334512 C73.7241171,134.966847 73.7241171,134.52407 73.7241171,134.451622 L73.7241171,127.45545 C75.6400938,127.898201 77.84871,128.265893 80.1323585,128.561051 C82.4885207,128.781131 84.9922289,129.003802 87.6435493,129.076295 L89.0417232,129.076295 L91.9882018,129.076295 L93.3863757,129.076295 C98.7615301,129.003795 103.401076,128.340952 107.233559,127.455477 L107.233559,134.67436 C107.233559,134.74686 107.233559,135.264689 107.67631,135.557249 C107.89639,135.777329 108.26664,136 108.5592,136 L112.388568,136 C113.123912,136 113.714228,135.40967 113.714228,134.67434 L113.714228,127.383209 L113.934308,127.383209 L115.039908,108.308947 C115.259988,108.088867 115.555153,107.866196 115.922798,107.718617 C116.513128,107.498537 116.513128,107.718617 117.763676,107.350952 C118.794178,107.130872 119.384495,106.983286 119.604554,106.615608 C120.345068,105.80258 120.197476,104.697046 119.754725,103.961702 L119.754327,103.96161 Z M75.0524021,94.534177 C75.1249024,94.4616833 75.4951527,94.1665118 75.5676464,94.1665118 L105.837772,94.1665118 C105.985358,94.1665118 106.353016,94.3140975 106.353016,94.534177 C108.046348,98.0683871 109.814779,101.530349 111.508045,105.06721 L69.8975591,105.06721 C71.5908912,101.530415 73.3567369,98.0683871 75.0525877,94.534177 L75.0524021,94.534177 Z M81.5330909,117.733231 L99.7244632,117.733231 C100.167214,117.733231 100.534906,118.175981 100.534906,118.543673 C100.534906,119.058917 100.092155,119.354116 99.7244632,119.354116 L81.5330909,119.354116 C81.0903403,119.354116 80.7226485,118.98645 80.7226485,118.543673 C80.7226485,118.100896 81.0903138,117.733231 81.5330909,117.733231 Z M80.8702608,115.669642 C80.8702608,115.006812 81.4605972,114.416495 82.1234074,114.416495 L99.2847417,114.416495 C99.9475718,114.416495 100.537888,115.006825 100.537888,115.669642 C100.537888,116.332459 99.9475519,116.922788 99.2847417,116.922788 L82.1234074,116.922788 C81.4579923,116.922788 80.8702608,116.332459 80.8702608,115.669642 Z M72.9162995,117.733231 C71.0003228,117.733231 69.3820894,116.112412 69.3820894,114.199021 C69.3820894,112.283044 71.0029078,110.66481 72.9162995,110.66481 C74.8322762,110.66481 76.4505096,112.285629 76.4505096,114.199021 C76.4505096,116.184926 74.8296912,117.733231 72.9162995,117.733231 Z M101.417994,122.077883 L79.83956,122.077883 C79.3968094,122.077883 79.0291176,121.710218 79.0291176,121.267441 C79.0291176,120.82469 79.4718682,120.456999 79.83956,120.456999 L101.417994,120.456999 C101.860745,120.456999 102.228437,120.899749 102.228437,121.267441 C102.300937,121.782685 101.933272,122.077883 101.417994,122.077883 Z M108.414166,117.733231 C106.498189,117.733231 104.879956,116.112412 104.879956,114.199021 C104.879956,112.283044 106.500774,110.66481 108.414166,110.66481 C110.330143,110.66481 111.948376,112.285629 111.948376,114.199021 C111.948376,116.184926 110.402656,117.733231 108.414166,117.733231 Z" id="car"></path>
            </g>
        </g>
    </g>
</svg>

  </div>
  <div class="card__divider"></div>
  <div class="card__company">Generali Schadeverz...</div>
  <div class="card__polis">MR50003</div>
</div>

</section>

<section>
  <!-- next -->
  <div class="box circle"><div>
</section>

<div class="loader">
  <div class="loader__bug">
  
    
<svg width="15px" height="29px" viewBox="0 0 15 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="7.39463073 0.111501796 7.39463073 17.3413883 0.189110781 17.3413883 0.189110781 0.111501796 7.39463073 0.111501796"></polygon>
    </defs>
    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Modal" transform="translate(-290.000000, -646.000000)">
            <g id="bug-dark" transform="translate(290.000000, 646.000000)">
                <g id="Group-3" transform="translate(7.067063, 11.669409)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Clip-2"></g>
                    <path d="M7.39464983,0.229043083 C7.39464983,-0.626726564 0.204963922,3.43019052 0.204963922,4.64662265 C0.204963922,6.62101104 0.189110781,15.544436 0.189110781,17.1838818 C0.189110781,18.3182832 7.39464983,13.3919571 7.39464983,0.229043083" id="Fill-1" fill="#8492A6" mask="url(#mask-2)"></path>
                </g>
                <g id="Group-7" transform="translate(2.292020, 0.173414)">
                    <path d="M2.4192848,5.54549253 C2.41985781,5.50126218 2.37802844,1.03224291 0.409564941,0.953134878 C0.184946944,0.944561593 0.00693336163,0.750103919 0.0164834465,0.51959948 C0.0254605263,0.288705347 0.216462224,0.10925092 0.441271222,0.119188136 C3.22664898,0.230445984 3.23887309,5.33135527 3.23887309,5.54938948" id="Fill-4" fill="#8492A6"></path>
                    <path d="M2.4192848,5.54549253 C2.41985781,5.50126218 2.37802844,1.03224291 0.409564941,0.953134878 C0.184946944,0.944561593 0.00693336163,0.750103919 0.0164834465,0.51959948 C0.0254605263,0.288705347 0.216462224,0.10925092 0.441271222,0.119188136 C3.22664898,0.230445984 3.23887309,5.33135527 3.23887309,5.54938948" id="Stroke-6" stroke="#8492A6" stroke-width="0.5"></path>
                </g>
                <g id="Group-11" transform="translate(8.213073, 0.173414)">
                    <path d="M0.991814516,5.54549253 C0.991050509,5.50126218 1.03287988,1.03224291 3.00134338,0.953134878 C3.22596138,0.944561593 3.40340195,0.750103919 3.39518888,0.51959948 C3.38487479,0.288705347 3.1952101,0.10925092 2.9698281,0.119188136 C0.184259338,0.230445984 0.172035229,5.33135527 0.172035229,5.54938948" id="Fill-8" fill="#8492A6"></path>
                    <path d="M0.991814516,5.54549253 C0.991050509,5.50126218 1.03287988,1.03224291 3.00134338,0.953134878 C3.22596138,0.944561593 3.40340195,0.750103919 3.39518888,0.51959948 C3.38487479,0.288705347 3.1952101,0.10925092 2.9698281,0.119188136 C0.184259338,0.230445984 0.172035229,5.33135527 0.172035229,5.54938948" id="Stroke-10" stroke="#8492A6" stroke-width="0.5"></path>
                </g>
                <path d="M7.23143888,5.4675341 C3.67594228,5.4675341 -2.03099745,7.4078242 0.730314092,8.97420221 C4.93330645,11.3117861 6.36219015,12.238675 7.23143888,12.238675 C8.09935059,12.238675 9.13687182,11.3117861 13.3391002,8.97420221 C16.0996477,7.4078242 10.7871265,5.4675341 7.23143888,5.4675341" id="Fill-12" fill="#8492A6"></path>
            </g>
        </g>
    </g>
</svg>
    
  </div>
  <div class="loader__text">We pakken even de juiste gegevens erbij</div>
</div>
<br /><br />
<section>
  <div class="numbers-test">
    <div style="font-size:13px">
      13 0123456789AYF0123-A9876
    </div>
    <div style="font-size:14px">
      14 0123456789AYF0123-A9876
    </div>
     <div style="font-size:15px">
      15 0123456789AYF0123-A9876
    </div>   
    <div style="font-size:16px">
      16 0123456789AYF0123-A9876
    </div>   
     <div style="font-size:17px">
      17 0123456789AYF0123-A9876
    </div>    
      <div style="font-size:30px">
      30 0123456789AYF0123-A9876
    </div>     
  </div>
</section>

/*Downloaded from https://www.codeseek.co/ikbenivo/styleguide-elements-01-yzMqGZ */
    $btn-primary-bg: #26D064
$btn-primary-bg-hover: #22D965
$gray: #8492A6
$lightgray: #E0E6ED
$mediumgray: #3C4858
$darkgray: #1F2D3D
$blue: #06ABF0

body
  width: 100%
  height: 100%

.grid
  background: url("http://www.aroundseventests.nl/prototype/grid.png") 0 0 #FFF
  
header
  width: 100%
  height: 60px
  background: #FFF
  margin-bottom: 40px //only for demo
  display: flex
  align-items: center
  justify-content: center
 
section
  background: #FFF
  border: #E0E6ED
  border-radius: 10px
  padding: 30px
  margin-left: 80px
  margin-right: 80px
  margin-bottom: 45px

body
  background: $lightgray
  font-family: "nimbus-sans"
  color: #3C4858
  font-size: 15px
  
h3
  font-size: 18px
  font-weight: bold
  color: #3C4858
  letter-spacing: 0
  
.btn
  font-weight: bold
  padding: 12px 25px
  border-radius: 6px
  border: none
  cursor: pointer
  display: inline-block
  position: relative // needed for hover
  top: 0  // needed for hover
  // voor nu even
  margin-right: 20px
  
  
.btn-primary  
  background-color: $btn-primary-bg
  &:hover
    top: -4px
    background-color: $btn-primary-bg-hover
    box-shadow: 0 3px 2px 0 rgba(60,72,88,0.12), 0 6px 6px 0 rgba(132,146,166,0.09)

.box  
  background: #FFF
  transition: all .2s ease-in-out
  border: 1px solid $lightgray
  position: relative
  top: 0
  &:hover
    transform: scale(1.04)
    top: -6px
    cursor: pointer
    border-color: $gray
    box-shadow: 0 3px 2px 0 rgba(60,72,88,0.12), 0 6px 6px 0 rgba(132,146,166,0.09)
  
.card
  width: 180px
  background: #FFF
  text-align: center
  margin:
    right: 30px
  height: 245px
  border-radius: 8px
  &__title
    font-weight: normal
    margin: 30px 0 0 0
  &__subtitle
    color: $gray
    line-height: 25px
    font:
      size: 13px
      weight: 300
  &__icon
    width: 60px
    height: 60px
    margin: 20px auto
  &__divider
    width: 100%
    height: 1px
    background: $lightgray
    margin-bottom: 10px
    
  &__polis
    color: $gray
  
  
    svg g
      fill: $darkgray
    
.circle
  width: 50px
  height: 50px
  border-radius: 100px
.form-group.row
  min-height: 45px
  border-bottom: 1px solid $lightgray
  margin-bottom: 0
  &.form-upload 
    border-bottom: 0
    margin-top: 30px

  /* do not group these rules */
  *::-webkit-input-placeholder 
    color: $gray
    font-size: 12px
    font-weight: 300

  *:-moz-placeholder 
    /* FF 4-18 */
    color: $gray
    font-size: 12px
    font-weight: 300

  *::-moz-placeholder 
    /* FF 19+ */
    color: $gray
    font-size: 12px
    font-weight: 300

  *:-ms-input-placeholder 
    /* IE 10+ */
    color: $gray
    font-size: 12px
    font-weight: 300

  
  
  &:hover
    input[type="text"]
      border-color: $blue
      color: $blue
    
  .col-form-label
    // font-weight: bold
    padding-top: calc(.8rem - 1px * 2)


  input[type="text"],
  input[type="email"]
    font-size: 15px // dit kan vast via de bootstrap settings
    height: 45px
    border: none
    border-bottom: 1px solid $gray
    border-radius: 0
    transition: all .2s ease-in-out

    &:focus
      border-bottom: 3px solid $blue
      // border-radius: 3px
      color: #000
      font-weight: bold
    
.focus
  .col-form-label, .form-control
    // margin-top: 15px
    // margin-bottom: 15px

// styling input type=file... see https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/    
.inputfile 
  width: 0.1px
  height: 0.1px
  opacity: 0
  overflow: hidden
  position: absolute
  z-index: -1

.inputfile + label
  text-align: center
  width: 100%
  height: 75px
  line-height: 75px
  color: $blue
  background-color: rgba($blue, 0.07)
  display: inline-block
  transition: all .2s ease-in-out
  svg
    margin-bottom: -3px


.inputfile:focus + label,
.inputfile + label:hover
  background-color: rgba($blue, 0.2)
  cursor: pointer
  
    
.loading-bug
  animation: LoadingBug linear 4s
  animation-iteration-count: infinite
  transform-origin: 50% 50%
  svg g
    fill: $gray

@keyframes LoadingBug
  0% 
    opacity: 0.2
  
  50%
    opacity: 1  

  100% 
    opacity: 0.2
    
.loader
  display: flex
  width: 100%
  height: 100%
  // voor nu even een min-height
  min-height: 500px
  background: #FFF
  flex-direction: column
  align-items: center
  justify-content: center
  font-size: 20px
  color: $mediumgray
.loader__bug
  width: 60px
  height: 45px
  animation: animationFrames linear 4s
  animation-iteration-count: infinite
  transform-origin: 50% 50%
  

@keyframes animationFrames
  0% 
    opacity: 0
    transform:  translate(0px,4px)  rotate(0deg) 
  
  16% 
    opacity: 1
    transform:  translate(0px,-29px)  rotate(-2deg) 
  
  20% 
    transform:  translate(0px,-37px)  rotate(0deg) 
  
  25% 
    transform:  translate(0px,-48px)  rotate(2deg) 
  
  30% 
    transform:  translate(0px,-58px)  rotate(0deg) 
  
  35% 
    transform:  translate(0px,-68px)  rotate(-2deg) 
  
  35% 
    transform:  translate(0px,-68px)  rotate(-2deg) 
  
  40% 
    transform:  translate(0px,-79px)  rotate(0deg) 
  
  45% 
    transform:  translate(0px,-89px)  rotate(2deg) 
  
  50% 
    transform:  translate(0px,-99px)  rotate(0deg) 
  
  55% 
    transform:  translate(0px,-110px)  rotate(-2deg) 
  
  60% 
    transform:  translate(0px,-120px)  rotate(0deg) 
  
  65% 
    transform:  translate(0px,-131px)  rotate(2deg) 
  
  70% 
    transform:  translate(0px,-141px)  rotate(0deg) 
  
  75% 
    transform:  translate(0px,-151px)  rotate(-2deg) 
  
  81% 
    transform:  translate(0px,-164px)  rotate(0deg) 
  
  86% 
    transform:  translate(0px,-174px)  rotate(2deg) 
  
  90% 
    transform:  translate(0px,-182px)  rotate(0deg) 
  
  95% 
    opacity: 1
    transform:  translate(0px,-193px)  rotate(-2deg) 
  
  100% 
    opacity: 0
    transform:  translate(0px,-203px)  rotate(0deg) 
  
.numbers-test 
  line-height: 45px



/*Downloaded from https://www.codeseek.co/ikbenivo/styleguide-elements-01-yzMqGZ */
    $('.form-control').bind('blur focus', function(){
    $(this).closest( ".row" ).toggleClass('focus');
});

// type = form js
'use strict';

;( function ( document, window, index )
{
	var inputs = document.querySelectorAll( '.inputfile' );
	Array.prototype.forEach.call( inputs, function( input )
	{
		var label	 = input.nextElementSibling,
			labelVal = label.innerHTML;

		input.addEventListener( 'change', function( e )
		{
			var fileName = '';
			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else
				fileName = e.target.value.split( '\\' ).pop();

			if( fileName )
				label.querySelector( 'span' ).innerHTML = fileName;
			else
				label.innerHTML = labelVal;
		});

		// Firefox bug fix
		input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
		input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
	});
}( document, window, 0 ));

Comments