Phoen1x84

Form label animation with no-js fallback

Simply add a surrounding element with a class name of "input-wrap" then add a class to your input, textarea etc... of "input-wrap__field" and you should see some sweet animation :)

Built using .Less and Javascript

A Pen by Matthew Neil on CodePen.

License.

Phoen1x84

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

Phoen1x84

/webApplication
  /assets
    /styles
      /banner
        /- _banner.less or _banner.scss
      /- app.less or app.scss
    /js
      /banner
        /- banner.js
      /- app.js

Phoen1x84

// noConflict mode 
jQuery.noConflict();

var app = app || {};

app.myFunction = (function ($, undefined) {
	// do all the things
	var init = function(){
		if (!$('body').hasClass('page-editor')) { // custom class added to the body to check for page editor 
			console.log('Hi friends!');

Phoen1x84

var UTILS = UTILS || {};

UTILS.editorGridToggle = (function ($) {
    'use strict';
    var init = function () {
        if ($('#scWebEditRibbon').length) {

            $('.overlay-grid-toggle-btn').show();

            $(document).on('click', '.overlay-grid-toggle-btn', function (e) {

Phoen1x84

 <a href="#" class="sc-ribbon-btn js-toggle-sc-ribbon">
    <span class="sc-ribbon-btn__inner">
        <svg class="sc-ribbon-btn__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 16 16">
            <path d="M4 2v14l5-5 5 5v-14zM12 0h-10v14l1-1v-12h9z"></path>
        </svg>
    </span>
</a>

Phoen1x84

@sc-red: #DC291E;
@black: #222;
@white: #fff;
@ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

.sc-ribbon-btn {
    position: fixed;
    bottom: 100px;
    right: 100px;
    border-radius: 100%;

Phoen1x84

/ Feature
  /Navigation
    /Name.Feature.Navigation.csproj
      /Views
        /Navigation
          PrimaryNavigation.cshtml
          
/Project
  /MySite
    /Name.MySite.Website

Phoen1x84

// quick code mock not tested
.banner {
  background: #f1f1f1;
  
  &__inner {
    display: flex;
    max-width: 1320px;
    margin: 0 auto;
  }
  

Phoen1x84

// quick code mock not tested
.banner {
  background: #f1f1f1;
  
  &__inner {
    display: flex;
    max-width: 1320px;
    margin: 0 auto;
  }