From 4c8749cb9e1e4a8d61697434e372f342def7bc70 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 8 Jun 2022 16:14:24 +0200 Subject: Migrate to bootstrap 5 --- client/src/sass/bootstrap.scss | 112 ++++++++--------------------------------- 1 file changed, 22 insertions(+), 90 deletions(-) (limited to 'client/src/sass/bootstrap.scss') diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index bc37134dd..2df2d0680 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -7,27 +7,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; - @import '~bootstrap/scss/mixins'; +@import '~bootstrap/scss/utilities'; + @import '~bootstrap/scss/root'; @import '~bootstrap/scss/reboot'; @import '~bootstrap/scss/type'; @import '~bootstrap/scss/grid'; -@import '~bootstrap/scss/tables'; @import '~bootstrap/scss/forms'; @import '~bootstrap/scss/buttons'; @import '~bootstrap/scss/dropdown'; @import '~bootstrap/scss/button-group'; -@import '~bootstrap/scss/input-group'; @import '~bootstrap/scss/nav'; @import '~bootstrap/scss/card'; -@import '~bootstrap/scss/badge'; +@import '~bootstrap/scss/accordion'; @import '~bootstrap/scss/alert'; @import '~bootstrap/scss/close'; @import '~bootstrap/scss/modal'; @import '~bootstrap/scss/tooltip'; @import '~bootstrap/scss/popover'; -@import '~bootstrap/scss/utilities'; + +@import '~bootstrap/scss/helpers'; +@import '~bootstrap/scss/utilities/api'; @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; @@ -36,16 +37,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; animation: spin 0.7s infinite linear; } -.glyphicon-duplicate { - font-size: 70%; -} - .flex-auto { flex: auto; } .c-hand { - cursor: pointer; + cursor: pointer !important; } @keyframes spin { @@ -58,16 +55,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } -.btn-group > .btn:not(:first-child) { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; -} - .dropdown-menu { - border-radius: 3px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); font-size: 15px; - color: pvar(--mainForegroundColor); background-color: pvar(--mainBackgroundColor); @@ -78,39 +67,22 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .dropdown-item { padding: 3px 15px; - color: pvar(--mainForegroundColor); - background-color: pvar(--mainBackgroundColor); - &.active { color: pvar(--mainBackgroundColor) !important; background-color: pvar(--mainHoverColor); opacity: 0.9; } - a:active, - &:hover { - color: pvar(--mainForegroundColor) !important; - background-color: pvar(--mainBackgroundHoverColor); - } - &::after { display: none; } } - button { - @include disable-default-a-behaviour; - } - a { @include disable-default-a-behaviour; } } -.badge { - line-height: 1.1; -} - @media screen and (min-width: #{breakpoint(md)}) { .modal::before { vertical-align: middle; @@ -350,22 +322,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } .input-group { - > .form-control { - flex: initial; + > .btn, + > .input-group-text { + height: $button-height; } - input.form-control { - width: unset !important; - flex-grow: 1; + > .input-group-text { + font-size: 15px; + line-height: normal; + opacity: 0.9; } - .input-group-prepend + input { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; + .input-group-text > .dropdown-toggle { + display: flex; + } + + .last-in-group { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } } -.has-feedback.has-clear { +.has-clear { position: relative; input { @@ -374,11 +352,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .form-control-clear { color: rgba(0, 0, 0, 0.4); - /* - * Enable pointer events as they have been disabled since Bootstrap 3.3 - * See https://github.com/twbs/bootstrap/pull/14104 - */ - pointer-events: all; display: flex; justify-content: center; align-items: center; @@ -397,44 +370,3 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; display: none; } } - -.callout { - padding: 1.25rem; - border: 1px solid #eee; - border-radius: .25rem; - - > label { - position: relative; - top: -5px; - left: -10px; - color: #6c757d !important; - } - - &:not(.callout-light) { - border-left-width: .25rem; - } - - &.callout-info { - border-color: pvar(--mainColorLightest); - border-left-color: pvar(--mainColor); - } -} - -// Override these properties for Bidi support -@each $size, $length in $spacers { - .ml-#{$size} { - @include margin-left($length); - } - - .mr-#{$size} { - @include margin-right($length); - } - - .pl-#{$size} { - @include padding-left($length); - } - - .pr-#{$size} { - @include padding-right($length); - } -} -- cgit v1.2.3