Skip to content

Instantly share code, notes, and snippets.

Avatar

Claudia Romano claudia-romano

View GitHub Profile
View autocomplete.js
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
View custom-checkbox-radio-buttons-1.html
<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">
View custom-checkbox-radio-buttons-2.html
<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">
View custom-checkbox-radio-buttons.css
.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;
View custom-checkbox-radio-buttons.js
(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');
View 48px-colored_i-switcher.html
<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() {
View layout_01_grid-mixin.scss
$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;
}
}
View layout_02_gridAuto-mixin.scss
@mixin gridAuto($min-width) {
@supports(grid-area: auto) {
grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
}
}
View layout_03_grid-mixin-fallback.scss
$gap-horizontal: 10px;
$gap-vertical: $gap-horizontal;
@mixin grid {
// fallback for IE
&::before, &::after {
content: '';
display: table;
}
View layout_04_gridAuto-mixin-fallback.scss
@mixin gridAuto($min-width, $fallback: 3) {
> * {
float: left;
width: calc(100%/#{$fallback} - #{$gap-horizontal});
&:nth-child(#{$fallback}n + 1) {
clear: both;
}
}