siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
79 lines (78 loc) • 3.1 kB
CSS
.FontOptionContainer {
border: 1px #dbdbdb solid;
background-color: #fff;
position: fixed;
right: 0;
width: 250px;
padding: 20px 20px 8px 20px;
transition: all .3s ease-out; }
.FontOptionContainer .FontOptionContainer__Item {
padding-bottom: 12px; }
.FontOptionContainer .FontOptionContainer__Title {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
margin-bottom: 12px; }
.FontOptionContainer ul {
display: flex;
width: 100%;
flex-wrap: wrap; }
.FontOptionContainer ul li {
border: 3px #ffdf01 solid;
border-radius: 3px;
padding: 4px 5px;
display: flex;
justify-content: center;
width: 100px;
margin-bottom: 10px;
cursor: pointer;
text-transform: capitalize; }
.FontOptionContainer ul li:nth-child(even) {
margin-left: 8px; }
.FontOptionContainer ul li:hover {
background: #000000;
color: #ffffff; }
.FontOptionContainer ul li.active {
background: #ffdf01;
color: #000; }
.FontOptionContainer .FontOptionContainer__Properties {
display: flex;
flex-direction: column; }
.FontOptionContainer .FontOptionContainer__Properties .Select-option.is-selected, .FontOptionContainer .FontOptionContainer__Properties .Select-option.is-focused {
background-color: rgba(255, 224, 0, 0.2);
color: #333; }
.FontOptionContainer .FontOptionContainer__Properties .Select {
width: 100%;
margin-bottom: 10px; }
.FontOptionContainer .FontOptionContainer__Properties .Select.is-focused:not(.is-open) > .Select-control {
border-color: #ffe000;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(255, 224, 0, 0.2); }
.FontOptionContainer .FontOptionContainer__Properties .OtherProperties label {
font-size: 16px;
width: 200px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Oswald', sans-serif; }
.FontOptionContainer .FontOptionContainer__Properties .OtherProperties .OtherProperties__Option {
display: flex;
align-items: center;
margin-bottom: 10px; }
.FontOptionContainer .FontOptionContainer__Properties .FontSize__Option input[type="number"] {
width: 45px;
height: 36px;
text-align: center;
-webkit-appearance: none;
border: none;
background: none;
border: 1px #ccc solid;
border-radius: 4px;
font-size: inherit; }
.FontOptionContainer .FontOptionContainer__Properties .FontSize__Option input[type="number"]:focus {
outline: none;
border-color: #ffe000;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(255, 224, 0, 0.2); }
.FontOptionContainer .FontOptionContainer__Properties .ColorOption__BackGround .ColorPicker .ColorPicker__Color {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.FontOptionContainer .FontOptionContainer__Properties .ColorOption__ForeGround .ColorPicker .ColorPicker__Color {
font-size: 32px;
text-align: center;
line-height: 27px; }