I can do better than that … I believe this is the CSS (UPDATED):
@mixin buttonShadow {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
@mixin buttonTransition {
transition: right 0.5s, bottom 0.5s, border-radius 0.5s, text-indent 0.2s,
visibility 1s, width 0.2s ease, height 0.5s ease 0.4s, color 0.5s,
background-color 2s, transform 0.5s;
}
//New Topic Fab
#create-topic.btn-default {
display: flex;
align-items: center;
justify-content: center;
@include buttonShadow;
@include buttonTransition;
padding: 0;
margin: 0;
width: 63px;
height: 63px;
border-radius: 40px;
position: fixed;
bottom: 30px;
right: 50px;
z-index: 999;
background-color: $tertiary;
color: $secondary;
white-space: nowrap;
overflow: hidden;
.d-icon {
margin: 0;
}
.d-button-label {
display: inline-block;
transition: all 0.3s;
margin: 0 0.25em;
}
&:not(:hover):not(:active):not(:focus) {
.d-button-label {
opacity: 0;
width: 0;
margin: 0;
}
.d-icon {
margin: 0 0.25em;
}
}
}
#create-topic.btn-default .fa-plus {
color: $secondary;
}
#create-topic.btn-default:hover {
width: 190px;
}
