X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=03b2e8b157489ad498d35bfdd3bb4c26e54d6d68;hb=a14c176472614874586cbc64cf25e82bbdc52868;hp=259af7a779e4fa36ec0748c7e39ba4648c724f4e;hpb=5d666c0eb25a1b665caa46c4210c1dc2a6b5b333;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 259af7a77..03b2e8b15 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,59 +1,57 @@ $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'; + +@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; .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 +60,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 +68,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } - button { - @include disable-default-a-behaviour; - } - a { @include disable-default-a-behaviour; - color: #000 !important; } } +.dropdown-divider { + margin: 0.3rem 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 +104,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 { @@ -124,10 +125,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; } } @@ -135,19 +137,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; + > *:not(:first-child) { + @include margin-left(10px); } } } @@ -161,7 +154,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 +163,23 @@ $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('menu') - 1; + z-index: z(overlay); } } } } -// Nav customizations +// --------------------------------------------------------------------------- +// Nav +// --------------------------------------------------------------------------- + .nav .nav-link { display: flex !important; align-items: center; @@ -197,7 +194,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 +214,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 +224,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,28 +250,13 @@ $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; -} - -ngb-tooltip-window { - z-index: z(tooltip) !important; -} +// --------------------------------------------------------------------------- +// Buttons & form controls +// --------------------------------------------------------------------------- .btn-outline-secondary { border-color: $input-border-color; @@ -277,25 +269,41 @@ 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,34 +315,36 @@ ngb-tooltip-window { } .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-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 { +.has-clear { position: relative; 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;