Skip to content

Instantly share code, notes, and snippets.

@mooror

mooror/_button.scss

Last active November 19, 2018 22:34
Show Gist options
  • Save mooror/c6640d5c70f6b7fa2eb997edd47b94a0 to your computer and use it in GitHub Desktop.
Save mooror/c6640d5c70f6b7fa2eb997edd47b94a0 to your computer and use it in GitHub Desktop.
Download ZIP
Iota Css Example Code - Button component file for those who are following along with the "Button Component" iota CSS Tutorial
Raw
_button.scss
// Button Component Settings
$button-padding: $baseline-x2 $baseline-x3;
$button-bgcolor: $color-blue;
$button-bgcolor-hover: darken($color-blue, 10%);
$button-color: $color-white;
$button-radius: 3px;
$button-outline-padding: ($baseline-x2 - 2) ($baseline-x3 - 2);
$button-outline-bgcolor: transparent;
$button-outline-color: $color-blue;
$button-outline-color-hover: darken($color-blue, 10%);
// Button Component Styles
.c-button {
padding: $button-padding;
display: inline-block;
font: inherit;
color: $button-color;
white-space: nowrap;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-decoration: none;
border: none;
background-color: $button-bgcolor;
border-radius: $button-radius;
}
.c-button:hover {
background-color: $button-bgcolor-hover;
}
.c-button--outline {
padding: $button-outline-padding;
color: $button-outline-color;
border: 1px solid $button-outline-color;
background-color: $button-outline-bgcolor;
}
.c-button--outline:hover {
color: $button-outline-color-hover;
border-color: $button-outline-color-hover;
background-color: $button-outline-bgcolor;
}
Raw
_colors.scss
//...
$color-blue: #38b2ff;
//...
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting started with iotaCSS</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Button Component -->
<button class="c-button">Button</button>
<button class="c-button c-button--outline">Outline Button</button>
</body>
</html>
Raw
main.scss
// ...
@import 'components/button';
//...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment