session-desktop/stylesheets/_session.scss

96 lines
2.0 KiB
SCSS
Raw Normal View History

2019-12-05 06:54:24 +01:00
@font-face {
font-family: 'SpaceMono';
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
}
2019-12-05 06:54:24 +01:00
@font-face {
font-family: 'SpaceMono';
src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
font-weight: bold;
}
2019-12-05 06:54:24 +01:00
@font-face {
font-family: 'SpaceMono';
src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
font-style: italic;
}
2019-12-05 06:54:24 +01:00
@font-face {
font-family: 'SpaceMono';
src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
$session-font-family: 'SpaceMono';
2019-12-05 06:12:33 +01:00
$session-color-green: #00f782;
2019-12-05 01:04:48 +01:00
$session-color-white: #fff;
$session-color-black: #000;
$session-transition-duration: 0.25s;
$session-icon-size-sm: 15px;
$session-icon-size-md: 20px;
$session-icon-size-lg: 30px;
2019-12-05 06:12:33 +01:00
.session-button {
min-width: 165px;
width: auto;
height: 45px;
line-height: 45px;
padding: 0 35px 0 35px;
font-size: 15px;
2019-12-05 06:12:33 +01:00
font-family: $session-font-family;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: center;
border-radius: 500px;
@mixin transparent-background($textAndBorderColor) {
background-color: Transparent;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
color: $textAndBorderColor;
border: 2px solid $textAndBorderColor;
}
&.full-green {
background-color: $session-color-green;
color: $session-color-white;
}
&.green {
@include transparent-background($session-color-green);
}
&.white {
@include transparent-background($session-color-white);
2019-12-05 01:04:48 +01:00
}
2019-12-05 06:12:33 +01:00
}
.session-icon-button {
2019-12-05 06:12:33 +01:00
opacity: 0.4;
cursor: pointer;
display: inline-block;
transition: opacity $session-transition-duration;
&:hover {
opacity: 1;
}
@mixin set-icon-margin($size) {
margin: $size / 3;
2019-12-05 06:12:33 +01:00
}
&.small {
@include set-icon-margin($session-icon-size-sm);
}
2019-12-05 06:12:33 +01:00
&.medium {
@include set-icon-margin($session-icon-size-sm);
2019-12-05 06:12:33 +01:00
}
2019-12-05 06:12:33 +01:00
&.large {
@include set-icon-margin($session-icon-size-sm);
2019-12-05 06:12:33 +01:00
}
}
2019-12-05 06:12:33 +01:00
.session-icon {
fill: $session-color-white;
2019-12-05 06:12:33 +01:00
}