X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=6a5d366394985b036a85215e6cbebce5fc667b97;hb=5b0ec7cddb1ae6dbd2057f067382866f846b882c;hp=58256a065fc5870c1f44d9f40e99662ca9443c9f;hpb=2856af48ac79d614c79ed9e962d70564afbec1e1;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 58256a065..6a5d36639 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,59 +1,52 @@ -$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; -@import '_bootstrap'; - -@import '_variables'; -@import '_mixins'; - -// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d -.glyphicon-refresh-animate { - animation: spin .7s infinite linear; -} +@use '_variables' as *; +@use '_mixins' as *; + +@import './_bootstrap-variables'; + +@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/forms'; +@import '~bootstrap/scss/buttons'; +@import '~bootstrap/scss/dropdown'; +@import '~bootstrap/scss/button-group'; +@import '~bootstrap/scss/nav'; +@import '~bootstrap/scss/card'; +@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/spinners'; + +@import '~bootstrap/scss/helpers'; +@import '~bootstrap/scss/utilities/api'; .flex-auto { flex: auto; } .c-hand { - cursor: pointer; -} - -@keyframes spin { - 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 { - z-index: z(dropdown) !important; -} - -.list-overflow-menu, -.parent-entry { - z-index: z(header) - 1 !important; -} - -.btn-group, -.dropdown-root, -.action-dropdown, -.input-group-prepend, -.column-toggle { - z-index: inherit !important; + cursor: pointer !important; } +// --------------------------------------------------------------------------- +// Dropdown +// --------------------------------------------------------------------------- .dropdown-menu { - z-index: z(dropdown) + 1 !important; - - 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); .dropdown-header { - padding-left: 1rem; + @include padding-left(1rem); } .dropdown-item { @@ -62,7 +55,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; &.active { color: pvar(--mainBackgroundColor) !important; background-color: pvar(--mainHoverColor); - opacity: .9; + opacity: 0.9; } &::after { @@ -70,26 +63,38 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } - button { + a { @include disable-default-a-behaviour; } +} - a { - @include disable-default-a-behaviour; - color: #000 !important; +.dropdown-divider { + margin: 0.3rem 0; +} + +// --------------------------------------------------------------------------- +// Alert +// --------------------------------------------------------------------------- + +.alert { + p:last-child { + margin-bottom: 0; } } +// --------------------------------------------------------------------------- +// Modal +// --------------------------------------------------------------------------- @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; @@ -104,10 +109,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 { @@ -118,36 +124,20 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; my-global-icon { @include icon(22px); - position: relative; - top: 5px; - float: right; - - margin: 0; - padding: 0; - opacity: .5; + opacity: 0.5; - &[iconName="cross"] { - @include icon(16px); - top: -3px; + &:hover { + opacity: 0.8; } } } .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; + > *:not(:first-child) { + @include margin-left(10px); } } } @@ -161,7 +151,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll @media (hover: none) and (pointer: coarse) { - .modal-open, .menu-open { + .modal-open, + .menu-open { overflow: hidden !important; } @@ -169,20 +160,21 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .menu-open { .main-col { &::before { - background-color: black; + background-color: #000; width: 100vw; height: 100vh; opacity: 0.75; content: ''; display: block; - position: fixed; - z-index: z('header') - 1; } } } } -// Nav customizations +// --------------------------------------------------------------------------- +// Nav +// --------------------------------------------------------------------------- + .nav .nav-link { display: flex !important; align-items: center; @@ -197,7 +189,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; } } @@ -214,7 +209,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; @@ -224,11 +219,18 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; border-bottom-color: pvar(--mainColor); } - &.active, &:hover, &:active, &:focus { + &.active, + &:hover, + &:active, + &:focus { opacity: 1; } } +// --------------------------------------------------------------------------- +// Card, collapse and accordion +// --------------------------------------------------------------------------- + .card { background-color: pvar(--mainBackgroundColor); border-color: #dee2e6; @@ -243,27 +245,17 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; &.show { max-height: 1500px; + overflow: inherit !important; } } -.dropdown-divider { - margin: 0.3rem 0; -} - -ngb-modal-backdrop { - z-index: z(modal) - 1 !important; -} - -ngb-modal-window { - z-index: z(modal) !important; -} - -ngb-popover-window { - z-index: z(popover) !important; -} +// --------------------------------------------------------------------------- +// Buttons & form controls +// --------------------------------------------------------------------------- -ngb-tooltip-window { - z-index: z(tooltip) !important; +.btn:not(.btn-sm) { + font-size: $button-font-size; + line-height: 1.2; } .btn-outline-secondary { @@ -277,25 +269,40 @@ ngb-tooltip-window { } } -.btn-outline-tertiary { - color: pvar(--secondaryColor); - border-color: pvar(--secondaryColor); +.btn-group.select-button { + font-weight: $font-semibold; - &:focus-within, - &:focus, - &:hover { - color: pvar(--mainBackgroundColor); - background-color: pvar(--secondaryColor); + .active { + @include orange-button; + } + + :not(.active) { + @include grey-button; + } + + > * { + @include peertube-button-link; + + box-shadow: none !important; + + &:not(:first-child) { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + + &:not(:last-child) { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } } } -// input box-shadow on focus .form-control { - font-size: 15px; color: pvar(--mainForegroundColor); background-color: pvar(--inputBackgroundColor); outline: none; + // Input box-shadow on focus &:focus-within, &:focus { box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); @@ -307,41 +314,40 @@ ngb-tooltip-window { } .input-group { - & > .form-control { - flex: initial; + > .btn, + > .input-group-text { + height: $button-height; + } + + > .input-group-text { + line-height: normal; + opacity: 0.9; } - input.form-control { - width: unset !important; - flex-grow: 1; + + .input-group-text > .dropdown-toggle { + display: flex; } - .input-group-prepend + input { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; + .last-in-group { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } } -.has-feedback.has-clear { - position: relative; - +.has-clear { input { - padding-right: 1.5rem !important; + @include padding-right(1.5rem !important); } .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; - position: absolute; - right: .5rem; height: 95%; font-size: 14px; + position: absolute; + right: .5rem; &:hover { color: rgba(0, 0, 0, 0.7);