docs-v2/assets/styles/layouts/_inline-icons.scss

69 lines
1.5 KiB
SCSS

// Helper styles for inline icons used with the "icon" shortcode
.article--content {
.inline {
margin: 0 .15rem;
&.middle:before { vertical-align: middle; }
&.top:before { vertical-align: text-top; }
&.xsmall:before { font-size: .8rem; }
&.small:before { font-size: .9rem; }
&.large:before { font-size: 1.1rem; }
&.add-btn-round {
font-family: "icomoon";
color:#fff;
background:#7a65f2;
border-radius:50%;
margin:0 .25rem;
display: inline-block;
vertical-align: text-top;
font-size: .7rem;
width: 20px;
height: 20px;
padding-left: .28rem;
line-height: 1.25rem;
}
&.ui-toggle {
display: inline-block;
position: relative;
width: 34px;
height: 22px;
background: #1C1C21;
border: 2px solid #383846;
border-radius: .7rem;
vertical-align: text-bottom;
.circle {
display: inline-block;
position: absolute;
border-radius: 50%;
height: 12px;
width: 12px;
background: #22ADF6;
top: 3px;
right: 3px;
}
}
}
.nav-icon {
background: linear-gradient(to right, #50ABEF, #9195f7);
font-family: $roboto;
display: inline-block;
padding: .85rem 1rem;
border-radius: 0 5px 5px 0;
font-size: 1.05rem;
margin-bottom: 1rem;
.icon {
font-size: 1.35rem;
vertical-align: middle;
margin-right: 1.25rem;
}
strong {
color: $g20-white;
}
}
}