summaryrefslogtreecommitdiff
path: root/doc/_extensions/odoo_ext/static/components.less
diff options
context:
space:
mode:
Diffstat (limited to 'doc/_extensions/odoo_ext/static/components.less')
-rw-r--r--doc/_extensions/odoo_ext/static/components.less515
1 files changed, 515 insertions, 0 deletions
diff --git a/doc/_extensions/odoo_ext/static/components.less b/doc/_extensions/odoo_ext/static/components.less
new file mode 100644
index 00000000000..7dfd79a29b8
--- /dev/null
+++ b/doc/_extensions/odoo_ext/static/components.less
@@ -0,0 +1,515 @@
+// ================================================
+// ================ 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);
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-10-23 16:03:13 +0000