515 lines
10 KiB
Plaintext
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: #bfe2ff;
|
|
}
|
|
|
|
.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);
|
|
} |