From 121f451c75f37a7c449d2c844265e53967507b31 Mon Sep 17 00:00:00 2001 From: "Julia.Svinareva" Date: Wed, 6 Mar 2024 01:17:42 +0300 Subject: [PATCH] [embed] Add missed less, add new bootstrap components in pe, sse --- apps/common/embed/resources/less/common.less | 34 ++-- .../main/resources/mods/less/close.less | 37 +++++ .../main/resources/mods/less/mixins.less | 2 +- .../resources/mods/less/mixins/gradients.less | 59 +++++++ .../main/resources/mods/less/modals.less | 150 ++++++++++++++++++ .../main/resources/mods/less/print.less | 101 ++++++++++++ apps/presentationeditor/embed/index.html | 3 +- apps/spreadsheeteditor/embed/index.html | 3 +- 8 files changed, 369 insertions(+), 20 deletions(-) create mode 100644 apps/common/main/resources/mods/less/close.less create mode 100644 apps/common/main/resources/mods/less/mixins/gradients.less create mode 100644 apps/common/main/resources/mods/less/modals.less create mode 100644 apps/common/main/resources/mods/less/print.less diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less index c3ebcbb671..d4cb8a1dca 100644 --- a/apps/common/embed/resources/less/common.less +++ b/apps/common/embed/resources/less/common.less @@ -1,25 +1,25 @@ // Core variables and mixins -@import "../../../../../vendor/bootstrap/less/variables.less"; +@import "../../../../common/main/resources/mods/less/variables.less"; @icon-font-path: "../../../../../vendor/bootstrap/dist/fonts/"; -@import "../../../../../vendor/bootstrap/less/mixins.less"; +@import "../../../../common/main/resources/mods/less/mixins.less"; // Reset -@import "../../../../../vendor/bootstrap/less/normalize.less"; -@import "../../../../../vendor/bootstrap/less/print.less"; +@import "../../../../common/main/resources/mods/less/normalize.less"; +@import "../../../../common/main/resources/mods/less/print.less"; // Core CSS -@import "../../../../../vendor/bootstrap/less/scaffolding.less"; -@import "../../../../../vendor/bootstrap/less/type.less"; +@import "../../../../common/main/resources/mods/less/scaffolding.less"; +@import "../../../../common/main/resources/mods/less/type.less"; //@import "code.less"; //@import "grid.less"; //@import "tables.less"; -@import "../../../../../vendor/bootstrap/less/forms.less"; -@import "../../../../../vendor/bootstrap/less/buttons.less"; +@import "../../../../common/main/resources/mods/less/forms.less"; +@import "../../../../common/main/resources/mods/less/buttons.less"; // Components -@import "../../../../../vendor/bootstrap/less/component-animations.less"; +@import "../../../../common/main/resources/mods/less/component-animations.less"; //@import "../../../../../vendor/bootstrap/less/glyphicons.less"; //@import "dropdowns.less"; //@import "button-groups.less"; @@ -29,28 +29,28 @@ //@import "breadcrumbs.less"; //@import "pagination.less"; //@import "pager.less"; -@import "../../../../../vendor/bootstrap/less/labels.less"; +//@import "../../../../common/main/resources/mods/less/labels.less"; //@import "badges.less"; //@import "jumbotron.less"; //@import "thumbnails.less"; -@import "../../../../../vendor/bootstrap/less/alerts.less"; +//@import "../../../../common/main/resources/mods/less/alerts.less"; //@import "progress-bars.less"; //@import "media.less"; //@import "list-group.less"; //@import "panels.less"; //@import "wells.less"; -@import "../../../../../vendor/bootstrap/less/close.less"; +@import "../../../../common/main/resources/mods/less/close.less"; // Components w/ JavaScript -@import "../../../../../vendor/bootstrap/less/modals.less"; -@import "../../../../../vendor/bootstrap/less/tooltip.less"; +@import "../../../../common/main/resources/mods/less/modals.less"; +@import "../../../../common/main/resources/mods/less/tooltip.less"; //@import "../../../../../vendor/bootstrap/less/popovers.less"; -@import "../../../../../vendor/bootstrap/less/dropdowns.less"; +@import "../../../../common/main/resources/mods/less/dropdowns.less"; //@import "carousel.less"; // Utility classes -@import "../../../../../vendor/bootstrap/less/utilities.less"; -@import "../../../../../vendor/bootstrap/less/responsive-utilities.less"; +@import "../../../../common/main/resources/mods/less/utilities.less"; +@import "../../../../common/main/resources/mods/less/responsive-utilities.less"; @import "loadmask.less"; diff --git a/apps/common/main/resources/mods/less/close.less b/apps/common/main/resources/mods/less/close.less new file mode 100644 index 0000000000..48baf355fd --- /dev/null +++ b/apps/common/main/resources/mods/less/close.less @@ -0,0 +1,37 @@ +// stylelint-disable property-no-vendor-prefix + +// +// Close icons +// -------------------------------------------------- + + +.close { + float: right; + font-size: (@font-size-base * 1.5); + font-weight: @close-font-weight; + line-height: 1; + color: @close-color; + text-shadow: @close-text-shadow; + .opacity(.2); + + &:hover, + &:focus { + color: @close-color; + text-decoration: none; + cursor: pointer; + .opacity(.5); + } + + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + appearance: none; + } +} diff --git a/apps/common/main/resources/mods/less/mixins.less b/apps/common/main/resources/mods/less/mixins.less index ca6f637c8a..9877fd1c87 100644 --- a/apps/common/main/resources/mods/less/mixins.less +++ b/apps/common/main/resources/mods/less/mixins.less @@ -36,7 +36,7 @@ // Skins @import "mixins/background-variant.less"; @import "mixins/border-radius.less"; -// @import "mixins/gradients.less"; +@import "mixins/gradients.less"; // Layout @import "mixins/clearfix.less"; diff --git a/apps/common/main/resources/mods/less/mixins/gradients.less b/apps/common/main/resources/mods/less/mixins/gradients.less new file mode 100644 index 0000000000..b36f59165d --- /dev/null +++ b/apps/common/main/resources/mods/less/mixins/gradients.less @@ -0,0 +1,59 @@ +// stylelint-disable value-no-vendor-prefix, selector-max-id + +#gradient { + + // Horizontal gradient, from left to right + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down + background-repeat: repeat-x; + } + + // Vertical gradient, from top to bottom + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down + background-repeat: repeat-x; + } + + .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 + background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; + } + .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + background-repeat: no-repeat; + } + .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + background-repeat: no-repeat; + } + .radial(@inner-color: #555; @outer-color: #333) { + background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); + background-image: radial-gradient(circle, @inner-color, @outer-color); + background-repeat: no-repeat; + } + .striped(@color: rgba(255, 255, 255, .15); @angle: 45deg) { + background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + } +} diff --git a/apps/common/main/resources/mods/less/modals.less b/apps/common/main/resources/mods/less/modals.less new file mode 100644 index 0000000000..2fe8e56fa9 --- /dev/null +++ b/apps/common/main/resources/mods/less/modals.less @@ -0,0 +1,150 @@ +// +// Modals +// -------------------------------------------------- + +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and shit + +// Kill the scroll on the body +.modal-open { + overflow: hidden; +} + +// Container that the modal scrolls within +.modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal; + display: none; + overflow: hidden; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + .translate(0, -25%); + .transition-transform(~"0.3s ease-out"); + } + &.in .modal-dialog { .translate(0, 0); } +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} + +// Actual modal +.modal-content { + position: relative; + background-color: @modal-content-bg; + background-clip: padding-box; + border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid @modal-content-border-color; + border-radius: @border-radius-large; + .box-shadow(0 3px 9px rgba(0, 0, 0, .5)); + // Remove focus outline from opened modal + outline: 0; +} + +// Modal background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal-background; + background-color: @modal-backdrop-bg; + // Fade for backdrop + &.fade { .opacity(0); } + &.in { .opacity(@modal-backdrop-opacity); } +} + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + padding: @modal-title-padding; + border-bottom: 1px solid @modal-header-border-color; + &:extend(.clearfix all); +} +// Close icon +.modal-header .close { + margin-top: -2px; +} + +// Title text within header +.modal-title { + margin: 0; + line-height: @modal-title-line-height; +} + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: @modal-inner-padding; +} + +// Footer (for actions) +.modal-footer { + padding: @modal-inner-padding; + text-align: right; // right align buttons + border-top: 1px solid @modal-footer-border-color; + &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons + + // Properly space out buttons + .btn + .btn { + margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + margin-left: 5px; + } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Measure scrollbar width for padding body during modal show/hide +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +// Scale up the modal +@media (min-width: @screen-sm-min) { + // Automatically set modal's width for larger viewports + .modal-dialog { + width: @modal-md; + margin: 30px auto; + } + .modal-content { + .box-shadow(0 5px 15px rgba(0, 0, 0, .5)); + } + + // Modal sizes + .modal-sm { width: @modal-sm; } +} + +@media (min-width: @screen-md-min) { + .modal-lg { width: @modal-lg; } +} diff --git a/apps/common/main/resources/mods/less/print.less b/apps/common/main/resources/mods/less/print.less new file mode 100644 index 0000000000..80458c3683 --- /dev/null +++ b/apps/common/main/resources/mods/less/print.less @@ -0,0 +1,101 @@ +// stylelint-disable declaration-no-important, selector-no-qualifying-type + +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ + +// ========================================================================== +// Print styles. +// Inlined to avoid the additional HTTP request: h5bp.com/r +// ========================================================================== + +@media print { + *, + *:before, + *:after { + color: #000 !important; // Black prints faster: h5bp.com/s + text-shadow: none !important; + background: transparent !important; + box-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + // Don't show links that are fragment identifiers, + // or use the `javascript:` pseudo protocol + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + + // Bootstrap specific changes start + + // Bootstrap components + .navbar { + display: none; + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } + } + .label { + border: 1px solid #000; + } + + .table { + border-collapse: collapse !important; + + td, + th { + background-color: #fff !important; + } + } + .table-bordered { + th, + td { + border: 1px solid #ddd !important; + } + } +} diff --git a/apps/presentationeditor/embed/index.html b/apps/presentationeditor/embed/index.html index 9fbb09d470..f7d96c8b7f 100644 --- a/apps/presentationeditor/embed/index.html +++ b/apps/presentationeditor/embed/index.html @@ -287,7 +287,6 @@ - @@ -309,6 +308,8 @@ + + diff --git a/apps/spreadsheeteditor/embed/index.html b/apps/spreadsheeteditor/embed/index.html index 21b7254852..040c7b4ea3 100644 --- a/apps/spreadsheeteditor/embed/index.html +++ b/apps/spreadsheeteditor/embed/index.html @@ -261,7 +261,6 @@ - @@ -284,6 +283,8 @@ + +