X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=4f6e08c1bbe802865dfb43e26bb261ea98fa3e73;hb=421ff4618da64f0849353383f690a014024c40da;hp=897182e538d0ef82d9fa747b0331c297a4744715;hpb=ed5bb517266c80904c44bf44a335f1003f5aa277;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 897182e53..4f6e08c1b 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,12 +1,43 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; -@import '_bootstrap'; -@import '_variables'; -@import '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; + +@import './_bootstrap-variables'; + +@import '~bootstrap/scss/functions'; +@import '~bootstrap/scss/variables'; + +@import '~bootstrap/scss/mixins'; +@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/alert'; +@import '~bootstrap/scss/close'; +@import '~bootstrap/scss/modal'; +@import '~bootstrap/scss/tooltip'; +@import '~bootstrap/scss/popover'; +@import '~bootstrap/scss/utilities'; + +@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d .glyphicon-refresh-animate { - animation: spin .7s infinite linear; + animation: spin 0.7s infinite linear; +} + +.glyphicon-duplicate { + font-size: 70%; } .flex-auto { @@ -21,19 +52,34 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; from { transform: scale(1) rotate(0deg); } + to { transform: scale(1) rotate(360deg); } } /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */ -.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend) { +.dropdown, +.dropup { z-index: z(dropdown) !important; +} - &.list-overflow-menu, - &.parent-entry { - z-index: z(header) - 1 !important; - } +.list-overflow-menu, +.parent-entry { + z-index: z(menu) - 1 !important; +} + +.btn-group, +.dropdown-root, +.action-dropdown, +.input-group-prepend, +.column-toggle { + z-index: inherit !important; +} + +.btn-group > .btn:not(:first-child) { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; } .dropdown-menu { @@ -44,7 +90,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; font-size: 15px; .dropdown-header { - padding-left: 1rem; + @include padding-left(1rem); } .dropdown-item { @@ -53,7 +99,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; &.active { color: pvar(--mainBackgroundColor) !important; background-color: pvar(--mainHoverColor); - opacity: .9; + opacity: 0.9; + } + + &:active { + color: pvar(--mainForegroundColor) !important; } &::after { @@ -71,16 +121,19 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } +.badge { + line-height: 1.1; +} @media screen and (min-width: #{breakpoint(md)}) { - .modal:before { + .modal::before { vertical-align: middle; - content: " "; + content: ' '; height: 100%; } .modal-dialog { - text-align: left; + text-align: start; &:not(.modal-lg):not(.modal-xl) { min-width: 500px; @@ -95,10 +148,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .modal-content { background-color: pvar(--mainBackgroundColor); + word-break: break-word; } .modal-header { - border-bottom: none; + border-bottom: 0; margin-bottom: 5px; .modal-title { @@ -115,10 +169,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; margin: 0; padding: 0; - opacity: .5; + opacity: 0.5; - &[iconName="cross"] { + &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */ @include icon(16px); + top: -3px; } } @@ -126,19 +181,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .inputs { margin-bottom: 0; - text-align: right; - - .action-button-cancel { - @include peertube-button; - @include tertiary-button; - - display: inline-block; - margin-right: 10px; - } + text-align: end; - .action-button-submit { - @include peertube-button; - @include orange-button; + > .peertube-button:not(:first-child) { + @include margin-left(10px); } } } @@ -147,8 +193,31 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close .modal-open { overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect - position: fixed; // Fix the body position to disable any scroll content - width: 100vw; // Make sure the content fits all the available width when position: fixed + width: 100vw; // Make sure the content fits all the available width +} + +// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll +@media (hover: none) and (pointer: coarse) { + .modal-open, + .menu-open { + overflow: hidden !important; + } + + // On touchscreen devices display content overlay when opened menu + .menu-open { + .main-col { + &::before { + background-color: #000; + width: 100vw; + height: 100vh; + opacity: 0.75; + content: ''; + display: block; + position: fixed; + z-index: z(overlay); + } + } + } } // Nav customizations @@ -166,7 +235,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .nav-link { opacity: 0.6 !important; - &.active, &:hover, &:active, &:focus { + &.active, + &:hover, + &:active, + &:focus { opacity: 1 !important; } } @@ -183,7 +255,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; color: pvar(--mainForegroundColor); font-weight: $font-semibold; - border: none; + border: 0; border-bottom: 2px solid transparent; opacity: 0.6; @@ -193,7 +265,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; border-bottom-color: pvar(--mainColor); } - &.active, &:hover, &:active, &:focus { + &.active, + &:hover, + &:active, + &:focus { opacity: 1; } } @@ -276,9 +351,10 @@ ngb-tooltip-window { } .input-group { - & > .form-control { + > .form-control { flex: initial; } + input.form-control { width: unset !important; flex-grow: 1; @@ -294,7 +370,7 @@ ngb-tooltip-window { position: relative; input { - padding-right: 1.5rem !important; + @include padding-right(1.5rem !important); } .form-control-clear { @@ -310,6 +386,7 @@ ngb-tooltip-window { position: absolute; right: .5rem; height: 95%; + font-size: 14px; &:hover { color: rgba(0, 0, 0, 0.7); @@ -321,3 +398,44 @@ ngb-tooltip-window { 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); + } +}