style.scss

/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

$button_margin: .5em;
$color_board: #ffba00;
$color_column: #39ba48;
$color_card: #0076da;
$font_primary: Lato;

@import url(https://fonts.googleapis.com/css?family=#{str-replace(unquote($font_primary), ' ', '+')});

@mixin button {
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	font-size: 1.2em;
	opacity: 1;
	outline: none;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	&:focus {
		outline: none;
	}
}

/* MAIN COMPONENTS */

.kanban-board {
	font-family: $font_primary, sans-serif;
	margin-bottom: 30px;

	& > .kanban-header {
		background-color: $color_board;
		color: #000;
		margin-bottom: 20px;
		padding: 30px;
	}

}

.kanban-column {
	background-color: $color_column;
	border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(#000, .5);
	color: #000;
	float: left;
	margin: 20px 30px;

	& > .kanban-header {
		background-color: darken($color_column, 15%);
		border-radius: 5px 5px 0 0;
		color: #fff;
		margin-bottom: 15px;
		padding: 10px;
	}
}

.kanban-card {
	color: #000;
	padding: 10px 10px 10px 30px;

	&:last-child {
		padding-bottom: 25px;
	}

}

/* UNIVERSAL SUB-COMPONENTS */

.kanban-header {
	display: flex;
}

.kanban-title::selection {
	background-color: #fff;
	color: #000;
}

.kanban-btn {
	@include button;
	margin-left: $button_margin;
	transition: transform .1s;

	&:hover {
		opacity: .7;
	}

	&:active {
		transform: scale(.8, .8);
	}
}

.kanban-drag {
	@include button;
	margin-right: $button_margin;
}

/* SPECIFIC SUB-COMPONENTS */

.kanban-column-container {
	padding: 0 30px;
}

.kanban-card-container {
	min-height: 50px;
}