Skip to content

Instantly share code, notes, and snippets.

View claudia-romano's full-sized avatar

Claudia Romano claudia-romano

View GitHub Profile
@claudia-romano
claudia-romano / codyframe-php-config.js
Last active December 29, 2022 09:33
CodyFrame gulp config file for a PHP project
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass-embedded'));
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var connect = require('gulp-connect-php');
@claudia-romano
claudia-romano / codyframe-v2-php-config.js
Last active August 25, 2021 10:15
CodyFrame gulp config file for a PHP project
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssvariables = require('postcss-css-variables');
var calc = require('postcss-calc');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
.theme--dark .icon {
color: #fff;
}
.theme--dark .icon use {
fill: #d4c1be;
}
.theme--dark .icon.icon--outline use {
stroke: #d4c1be;
:root {
/* line-height */
--heading-line-height: 1.2;
--body-line-height: 1.4;
--article-line-height: 1.58;
/* capital letters - used in combo with the lhCrop mixin */
--font-primary-capital-letter: 0.75;
--font-secondary-capital-letter: 0.69;
}
:root {
/* line-height */
--heading-line-height: 1.2;
--body-line-height: 1.4;
--article-line-height: 1.58;
}
.text-to-crop {
@include lhCrop(var(--heading-line-height));
}
TransitionIcon.prototype.triggerAnimation = function(timestamp) {
var progress = this.getProgress(timestamp);
this.animateIcon(progress);
this.checkProgress(progress);
};
TransitionIcon.prototype.getProgress = function(timestamp) {
//make sure the progress value is in the right interval
if (!this.time.start) this.time.start = timestamp;
return timestamp - this.time.start;
(function() {
function TransitionIcon( element ) {
this.element = element;
this.size = this.element.getBoundingClientRect();
this.states = this.element.querySelectorAll('.js-transition-icon__state');
this.time = {start: null, total: 200};
this.status = {interacted : false, animating : false};
this.init();
};
<svg class="js-transition-icon" width="32px" height="32px" viewBox="0 0 32 32">
<g class="js-transition-icon__state">
<title>Search</title>
<line fill="none" stroke="#111111" x1="30" y1="30" x2="21.5" y2="21.5"/>
<circle fill="none" stroke="#111111" cx="13" cy="13" r="12"/>
</g>
<g class="js-transition-icon__state" style="display: none;" aria-hidden="true">
<title>Close search</title>
<line fill="none" stroke="#111111" x1="27" y1="5" x2="5" y2="27"/>
<svg width="32px" height="32px" viewBox="0 0 32 32">
<g class="js-transition-icon__state">
<title>Close search</title>
<line fill="none" stroke="#111111" x1="27" y1="5" x2="5" y2="27"/>
<line fill="none" stroke="#111111" x1="27" y1="27" x2="5" y2="5"/>
</g>
</svg>
<svg width="32px" height="32px" viewBox="0 0 32 32">
<g class="js-transition-icon__state">
<title>Search</title>
<line fill="none" stroke="#111111" x1="30" y1="30" x2="21.5" y2="21.5"/>
<circle fill="none" stroke="#111111" cx="13" cy="13" r="12"/>
</g>
</svg>