app/assets/stylesheets/pages_core/admin/components/toolbar.css
.toolbar {
position: relative;
display: block;
list-style: none;
margin: 0px;
border: 1px solid var(--border-color);
background-color: #fafafa;
padding: 0px 10px 0px 0px;
line-height: 30px;
width: auto;
&:after {
content: "";
display: table;
clear: both;
}
li {
list-style: none;
margin: 0;
padding: 0;
}
.info {
float: right;
color: var(--text-lighter-color);
padding: 0px 10px;
}
.label {
float: left;
padding: 0px 10px;
color: var(--text-light-color);
border-right: 1px solid var(--border-color);
}
.button,
button {
float: left;
display: inline;
margin: 0px;
padding: 0px 7px;
height: 30px;
vertical-align: middle;
line-height: 30px;
text-align: center;
display: block;
cursor: pointer;
min-width: 35px;
border: 0px;
border-left: 1px solid #fff;
border-right: 1px solid var(--border-color);
color: var(--text-light-color);
font-size: 0.875rem;
background-color: #f8f8f8;
transition: all 200ms ease-out;
i.fa {
font-size: 1rem;
}
&:focus,
&:hover {
color: var(--text-color);
background: #fdfdfd;
}
&[disabled] {
opacity: 0.33;
cursor: default;
&:focus,
&:hover {
color: var(--text-light-color);
background: inherit;
}
}
&.active {
color: var(--text-invert-color);
background: #666;
border-left: 1px solid #555;
border-right: 1px solid #888;
}
/* font-awesome doesn't have h1-h6, so we'll apply some tricks */
&.header {
vertical-align: bottom;
i {
margin-left: -6px;
}
i:after {
font-family: var(--font-os-sans);
font-weight: bold;
font-size: 13px;
display: inline-block;
position: absolute;
bottom: 5px;
}
&.h1 i::after {
content: "1";
}
&.h2 i::after {
content: "2";
}
&.h3 i::after {
content: "3";
}
&.h4 i::after {
content: "4";
}
&.h5 i::after {
content: "5";
}
&.h6 i::after {
content: "6";
}
}
}
&.rich-text {
margin: 0px 1px 0px 1px;
border-left: none;
border-right: none;
box-shadow: 0px 1px 1px #fff;
}
}