flectra/doc/_extensions/flectra_ext/static/components.less
2018-02-11 23:55:56 -08:00

515 lines
10 KiB
Plaintext

// ================================================
// ================ Components ====================
// ================================================
// Ripple buttons
// ----------------------------------------
@-webkit-keyframes ripple {
to {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@keyframes ripple {
to {
opacity: 0;
.scale(2.5);
}
}
.ripple {
z-index: 2;
.inner-ripple {
display: block;
position: absolute;
border-radius: 100%;
opacity: 1;
z-index: -1;
background: rgba(0, 0, 0, .05);
pointer-events: none;
.scale(0);
&.inner-ripple-animated {
.animation(ripple 0.35s ease-in);
}
}
}
// Code Fields
// ----------------------------------------
article.doc-body .code-fields {
display: table;
width: 100%;
padding: 5px;
font-size: 0.8em;
border: 2px solid @gray-lighter;
.code-field {
display: table-row;
}
.code-field-body {
display: block;
padding-left: 15px;
@media screen and (min-width: @screen-md-min) {
display: table-cell;
padding-left: 0;
}
}
.code-field-name {
width: auto;
display: block;
font-weight: @fw_semibold;
color: @headings-color;
&:after {
content: ":";
}
@media screen and (min-width: @screen-md-min) {
text-align: right;
width: 20%;
padding-right: 10px;
display: table-cell;
}
}
ul {
list-style: none;
margin: 0.2em 0;
> li {
margin: 0 0 8px;
padding-left: 0px;
line-height: 1.5;
&:before {
display: none;
}
}
strong {
color: @headings-color;
font-family: @font-family-monospace;
}
em {
color: @headings-color;
font-family: @font-family-monospace;
font-weight: @fw_semibold;
}
}
}
// Cards
// ----------------------------------------
.card-img {
.o-gradient();
.o-position-absolute(0, 0);
.translate3d(0;0;0);
.square(100%);
display: block;
background-size: cover;
background-position: 50%;
}
.card.top {
position: relative;
overflow: hidden;
margin: 0;
padding: 0 0 2%;
.transform-origin(50% 0px 0px);
@media screen and (min-width: @screen-sm-min) {
padding: 12% 0 5%;
}
@media screen and (min-width: @screen-md-min) {
padding: 10% 0 5%;
}
@media screen and (min-width: @screen-lg-min) {
padding: 8% 0 4%;
}
&.stacked {
background: transparent;
.transition(background 1s);
}
&:before {
content: "";
display: block;
background-image: url("img/banner_bg.png");
background-size: cover;
background-position: 50%;
.o-position-absolute(0, 0);
.square(100%);
}
.card-img {
background-image: url("img/banner_bg.png");
}
.container {
position: relative;
font-size: 32px;
@media screen and (min-width: @screen-sm-min) {
&:not(.o_long_title) {
font-size: 40px;
}
&.o_short_title {
font-size: 50px;
}
}
h1 {
font-weight: @fw_light;
font-size: 1em;
color: white;
line-height: 0.9;
}
}
}
.card.top.has_banner {
background: @footer-bg-color;
&:before {
display: none;
}
.card-img {
opacity: 0.35;
}
}
// Alerts
// ----------------------------------------
main .alert {
padding: 8px 15px;
border-radius: 0;
margin: 5px auto 15px;
border-width: 0 0 0 3px;
// 'INFO' is the default style
border-color: @brand-info;
background-color: lighten(@brand-info, 45%);
&, p {
line-height: 1.3;
font-size: 14px;
}
p {
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
}
> ul {
margin: 0.5em 0;
> li {
margin: 0;
}
}
h3.alert-title {
font-size: 1em;
line-height: 1em;
margin: 0 0 5px;
font-weight: bold;
font-family: @font-family-base;
color: darken(@brand-info, 5%);
&:before {
.mdi-icon( "\e639");
.translate(0, 0.1em);
margin-right: 0.2em;
}
}
&.alert-info {
> h3.alert-title {
display: none;
}
}
&.alert-go_to {
border-color: @o-violet-dark;
background-color: lighten(@o-violet-dark, 52%);
color: darken(@o-violet-dark, 5%);
> h3.alert-title {
color: darken(@o-violet-dark, 15%);
&:before {
content: "\e70d";
}
}
}
&.alert-success {
border-color: lighten(@brand-success, 30%);
background-color: lighten(@brand-success, 45%);
> h3.alert-title {
color: darken(@brand-success, 10%);
&:before {
content: "\e625";
}
}
}
&.alert-warning, &.warning {
border-color: lighten(@brand-warning, 30%);
background-color: lighten(@brand-warning, 35%);
> h3.alert-title {
color: @brand-warning;
&:before {
content: "\e6a4";
}
}
}
&.alert-danger {
border-color: lighten(@brand-danger, 30%);
background-color: lighten(@brand-danger, 40%);
> h3.alert-title {
color: darken(@brand-danger, 10%);
&:before {
content: "\e6a4";
}
}
}
&.alert-exercise {
border-color: lighten(@doc_exercise, 30%);
background-color: lighten(@doc_exercise, 40%);
color: darken(@doc_exercise, 35%);
> h3.alert-title {
color: @doc_exercise;
}
> h3.alert-title:before {
.translate(0;0);
top: 28px;
content: "\e709";
}
}
&.doc-content {
@media (min-width: @screen-lg-min) {
max-width: 55%;
}
}
}
// Elements
// ----------------------------------------
hr.divider {
border-color: fadeout(@gray-lightest, 60%);
position: absolute;
width: 900%;
margin-left: -13px;
}
img.img-responsive {
box-shadow: 0 3px 15px @gray-lighter;
border: 1px solid @gray-lighter;
margin-bottom: 25px;
&:not(:first-child) {
margin-top: 25px;
}
}
.figure {
h4 {
margin: 0.5em 0 1.5em;
padding-left: 1em;
font-size: 1em;
font-style: italic;
}
}
.pq-patch {
em {
display: block;
border-radius: 4px 4px 0 0;
background: @gray-lighter;
padding-left: 10px;
font-size: 0.9em;
font-weight: @fw_semibold;
+ .pq-section .highlight {
border-radius: 0 0 4px 4px;
}
}
}
span.menuselection {
font-weight: @fw_medium;
}
.list-group-item {
border: none;
background: transparent;
}
blockquote {
font-family: @font-family-serif;
font-weight: @fw_semibold;
font-style: italic;
footer {
font-family: @font-family-base;
background: transparent;
text-align: left;
color: @text-color;
font-weight: normal;
font-style: normal;
cite {
font-style: italic;
}
}
@media (min-width:@screen-md-min) {
border-left: 3px solid fade(@brand-primary, 50%);
}
}
.code, code {
font-size: 0.8em;
font-weight: @fw_semibold;
color: darken(@brand-primary, 30%);
background-color: lighten(@brand-primary, 50%);
}
.btn {
border-radius: 0;
}
.table, table {
font-size: 0.9em;
}
.code-attribute, .code-class, .code-classmethod, .code-data, .code-function, .code-method, .code-staticmethod {
// indents *all* content
padding-left: 20px;
margin-bottom: 2em;
// except for item title which gets dedented back
> h6 {
margin-left: -20px;
margin-bottom: 0.3em;
.viewcode-link {
display: none;
float: right;
}
&:hover .viewcode-link {
display: inline;
}
}
p {
margin-bottom: 0.5em;
}
}
article.doc-body {
&.index-category {
min-height: 300px;
min-height: 30vh;
li.toctree-l1 {
padding: 5px 0;
}
}
}
article.doc-body .content-switcher {
margin-top: 0;
> ul {
font-size: 10px;
padding: 0;
margin: 0;
.transition(all .2s ease);
> li {
font-weight: @fw_semibold;
color: @gray-light;
border-bottom: 1px solid transparent;
margin: 0 20px 0 0;
padding-left: 0;
font-size: 1.3em;
cursor: pointer;
display: inline-block;
list-style: none;
.transition(all .2s);
opacity: 0.6;
&:before {
content: none;
}
&.active {
border-bottom: 1px solid @brand-primary;
opacity: 1;
}
}
}
&:hover > ul > li {
.opacity(1);
}
> .tabs > * {
display: none;
max-width: 100%;
overflow-x: auto;
}
> .tabs > .active {
display: block;
}
}
.highlight {
background: @doc_code-bg;
color: @gray-light;
border-radius: @border-radius-base;
margin-bottom: (@line-height-computed / 2);
pre {
margin-bottom: 0;
}
}
pre {
font-size: 0.8em;
color: @gray-light;
background: @doc_code-bg;
font-family: @font-family-monospace;
font-weight: @fw_semibold;
position: relative;
border: none;
max-width: 100%;
overflow: auto;
margin: 0 0 (@line-height-computed / 2);
}