HEX
Server: Apache
System: Linux v38079.2is.nl 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64
User: democfellows (10015)
PHP: 8.1.34
Disabled: opcache_get_status
Upload Files
File: /var/www/vhosts/creativefellows.nl/comtel.creativefellows.nl/public/scss/_mixins.scss
/*$nec-palette: (
  0: #04127c,
  1: #2030a4,
  2: #2a70bc,
  3: #3f9b90,
  4: #d1bd01,
  5: #db8c23,
  6: #bf375b
);*/

$nec-palette: (
	0: rgb(17,46,92),
	1: rgb(95,71,113),
	2: rgb(236,103,6),
	3: rgb(171,130,72),
	4: rgb(56,88,64),
	5: rgb(6,63,75),
	6: rgb(118,22,27),
	7: rgb(56,66,73),
);



@mixin animate($duration:0.3s){
	transition: all $duration;
}

@mixin font-for-header($font-weight:300) {
	font-family: azo-sans-web, sans-serif;
	font-weight: $font-weight;
	font-style: normal;
}

@mixin font-for-body($font-weight:500) {
	font-family: azo-sans-web, sans-serif;
	font-weight: $font-weight;
	font-style: normal;
}

@function get-color-nec($key){
	
    @if map-has-key($nec-palette, $key) {
      @return map-get($nec-palette, $key);
    }
    @else {
      @error 'given $key is not available in $nec-palette';
    }
		
}


@mixin list-chevron(){
	content:"";
	position:absolute;
	left:-1.25rem;
	top:0.25rem;
	width:1rem;
	height:1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 36'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23ea5b0c;%7D.b%7Bfill:%23f7941d;%7D.c%7Bfill:%23e30613;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M4.53,0a4.42,4.42,0,0,0-3.2,1.39,4.94,4.94,0,0,0,0,6.74L10.72,18l3.2-3.37a4.38,4.38,0,0,1,6.4,0L7.73,1.39A4.44,4.44,0,0,0,4.53,0'/%3E%3Cpath class='b' d='M10.72,18,1.33,27.87a4.94,4.94,0,0,0,0,6.74,4.38,4.38,0,0,0,6.4,0L20.32,21.37a4.38,4.38,0,0,1-6.4,0Z'/%3E%3Cpath class='c' d='M17.12,13.24a4.42,4.42,0,0,0-3.2,1.39L10.72,18l3.2,3.37a4.38,4.38,0,0,0,6.4,0,4.93,4.93,0,0,0,0-6.74,4.42,4.42,0,0,0-3.2-1.39'/%3E%3C/svg%3E") no-repeat 0 50%;
	background-size:auto 1rem;
}

@mixin header-line-before(){
	text-align:center;
	span::before {
	    content: "";
	    padding-right: 1rem;
	    border-left: solid 2px #ec6600;
	}
}

@mixin button-arrow(){
    
	font-weight: 400;
	position:relative;
	background:none;
	margin-left:1.5rem;
	
	&::before{
		@include blue-pointer-icon();
		@include animate();	
	}
	
	&:hover{
		background:none;
		color:$primary-color;
		&::before{left:0.5rem;}
	}
	
}

@mixin blue-pointer-icon(){
	content:"";
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:1.5rem;
	height:1.5rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 36'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23ea5b0c;%7D.b%7Bfill:%23f7941d;%7D.c%7Bfill:%23e30613;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M4.53,0a4.42,4.42,0,0,0-3.2,1.39,4.94,4.94,0,0,0,0,6.74L10.72,18l3.2-3.37a4.38,4.38,0,0,1,6.4,0L7.73,1.39A4.44,4.44,0,0,0,4.53,0'/%3E%3Cpath class='b' d='M10.72,18,1.33,27.87a4.94,4.94,0,0,0,0,6.74,4.38,4.38,0,0,0,6.4,0L20.32,21.37a4.38,4.38,0,0,1-6.4,0Z'/%3E%3Cpath class='c' d='M17.12,13.24a4.42,4.42,0,0,0-3.2,1.39L10.72,18l3.2,3.37a4.38,4.38,0,0,0,6.4,0,4.93,4.93,0,0,0,0-6.74,4.42,4.42,0,0,0-3.2-1.39'/%3E%3C/svg%3E") no-repeat 0 50%;
}



@keyframes fadeIn {
	//animation-iteration-count: 1
	
    0%   { opacity: 0; }
    100% { opacity: 1; }
}