claudia-romano

function completely(c,f){f=f||{};f.fontSize=f.fontSize||"16px";f.fontFamily=f.fontFamily||"sans-serif";f.promptInnerHTML=f.promptInnerHTML||"";f.color=f.color||"#333";f.hintColor=f.hintColor||"#aaa";f.backgroundColor=f.backgroundColor||"#fff";f.dropDownBorderColor=f.dropDownBorderColor||"#aaa";f.dropDownZIndex=f.dropDownZIndex||"100";f.dropDownOnHoverBackgroundColor=f.dropDownOnHoverBackgroundColor||"#ddd";var l=document.createElement("input");l.type="text";l.spellcheck=false;l.style.fontSize=f.fontSize;l.style.fontFamily=f.fontFamily;l.style.color=f.color;l.style.backgroundColor=f.backgroundColor;l.style.width="100%";l.style.outline="0";l.style.border="0";l.style.margin="0";l.style.padding="0";var k=l.cloneNode();k.disabled="";k.style.position="absolute";k.style.top="0";k.style.left="0";k.style.borderColor="transparent";k.style.boxShadow="none";k.style.color=f.hintColor;l.style.backgroundColor="transparent";l.style.verticalAlign="top";l.style.position="relative";var b=document.createElement("div");b.style.po

claudia-romano

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
   <title>Switcher</title>
   <g class="nc-interact_switcher-c-48">
	<rect x="2" y="11" width="44" height="26" rx="13" ry="13" fill="#d1d1d1"/>
	<rect class="nc-switcher-background" x="2" y="11" width="44" height="26" rx="13" ry="13" fill="#72C472" opacity="0"/>
	<circle cx="15" cy="24" r="11" fill="#fff"/>
   </g>

   <script>
        (function() {

claudia-romano

<form>
	<fieldset class="js-nc-form-buttons">
		<legend>This is the radio selection</legend>
		<p class="nc-button-wrapper">
			<input type="radio" name="color" id="color_1" value="red">
			<label for="color_1">
				Red
			</label>
		</p>
		<p class="nc-button-wrapper">

claudia-romano

<fieldset class="js-nc-form-buttons">
  <legend>This is the radio selection</legend>
  <p class="nc-button-wrapper">
    <input type="radio" name="color" id="color_1" value="red">
    <label for="color_1">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><g class="nc-interact_input-radio-c-16"><defs><clipPath id="nc-i-radio-mask"><circle cx="8" cy="8" r="8"></circle> </clipPath> </defs> <circle cx="8" cy="8" r="8" fill="#d1d1d1"></circle><circle cx="8" cy="8" r="12" fill="#43a6dd" clip-path="url(#nc-i-radio-mask)" transform="translate(-8 -8) scale(0)"></circle><circle cx="8" cy="8" r="3" fill="#fff" transform="translate(-8 -8) scale(0)"></circle></g></g></svg>
      Red
    </label>
  </p>
  <p class="nc-button-wrapper">

claudia-romano

.js .nc-button-wrapper {
  position: relative;
}

.js .nc-button-wrapper input[type=radio],
.js .nc-button-wrapper input[type=checkbox] {
  /* hide native checkbox and radio input if JavaScript is enabled */
  position: absolute;
  left: 0;
  top: 0;

claudia-romano

(function() {
	function ncCreateCustomEvent(eventName) {
		//this function is used to create custom events in Javascript
		//you can use your own if you already have one
		var customEvent;
		if (typeof window.Event == 'function') {
			customEvent = new Event(eventName, {'bubbles': false, 'cancelable': true});
		} else {
			//fallback for IE - initEvent is deprecated but this will run only for IE9/IE10
			customEvent = document.createEvent('Event');

claudia-romano

$gap-horizontal: 10px;
$gap-vertical: $gap-horizontal;

@mixin grid {
  @supports(grid-area: auto) {
    display: grid;
    grid-column-gap: $gap-horizontal;
    grid-row-gap: $gap-vertical;
  }
}

claudia-romano

@mixin gridAuto($min-width) {
  @supports(grid-area: auto) {
    grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
  }
}

claudia-romano

$gap-horizontal: 10px;
$gap-vertical: $gap-horizontal;

@mixin grid {
  // fallback for IE
  &::before, &::after {
    content: '';
    display: table;
  }
  

claudia-romano

@mixin gridAuto($min-width, $fallback: 3) {
  > * {
    float: left;
    width: calc(100%/#{$fallback} - #{$gap-horizontal});
  
    &:nth-child(#{$fallback}n + 1) {
      clear: both;
    }
  }