From 2f4c784a92ac50cacef07f4925e284b4041422f4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 12 Jun 2019 12:40:24 +0200 Subject: Add params to share modal --- client/src/sass/application.scss | 118 +----------------------------- client/src/sass/bootstrap.scss | 138 +++++++++++++++++++++++++++++++++++ client/src/sass/include/_mixins.scss | 18 ++--- 3 files changed, 147 insertions(+), 127 deletions(-) create mode 100644 client/src/sass/bootstrap.scss (limited to 'client/src/sass') diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index d84766240..c64a8ebf8 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -12,6 +12,7 @@ $assets-path: '../assets/'; @import './player/index'; @import './loading-bar'; +@import './bootstrap'; @import './primeng-custom'; [hidden] { @@ -181,128 +182,11 @@ label { font-weight: bold; } -// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d -.glyphicon-refresh-animate { - animation: spin .7s infinite linear; -} - @keyframes spin { from { transform: scale(1) rotate(0deg);} to { transform: scale(1) rotate(360deg);} } -// Bootstrap customizations -.dropdown-menu { - border-radius: 3px; - box-shadow: 0 3px 6px; - font-size: 15px; - - .dropdown-item { - padding: 3px 15px; - - &:active { - color: #000 !important; - } - } - - button { - @include disable-default-a-behaviour; - } - - a { - @include disable-default-a-behaviour; - color: #000 !important; - } -} - -.modal { - .modal-content { - background-color: var(--mainBackgroundColor); - } - - .modal-header { - border-bottom: none; - margin-bottom: 5px; - - .modal-title { - font-size: 20px; - font-weight: $font-semibold; - } - - my-global-icon { - @include icon(24px); - - position: relative; - top: 3px; - float: right; - - margin: 0; - padding: 0; - opacity: 1; - } - } - - .inputs { - margin-bottom: 0; - text-align: right; - - .action-button-cancel { - @include peertube-button; - @include grey-button; - - display: inline-block; - margin-right: 10px; - } - - .action-button-submit { - @include peertube-button; - @include orange-button; - } - } -} - -// Nav customizations -.nav .nav-link { - display: flex !important; - align-items: center; - height: 30px !important; - padding: 10px 15px !important; -} - -.nav.nav-pills { - font-size: 16px !important; - - .nav-link.active { - font-weight: $font-semibold !important; - } - - a { - @include disable-default-a-behaviour; - - color: var(--mainForegroundColor); - } -} - -ngb-tabset.bootstrap { - - .nav-link { - &, & a { - @include disable-default-a-behaviour; - - color: var(--mainForegroundColor) !important; - } - } - - .nav-pills .nav-link.active { - color: #000 !important; - } -} - -.nav-tabs .nav-link.active { - background-color: var(--mainBackgroundColor) !important; - border-bottom: none; -} - .orange-button { @include peertube-button; @include orange-button; diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss new file mode 100644 index 000000000..12e73278a --- /dev/null +++ b/client/src/sass/bootstrap.scss @@ -0,0 +1,138 @@ +$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; +} + +@keyframes spin { + from { transform: scale(1) rotate(0deg);} + to { transform: scale(1) rotate(360deg);} +} + +.dropdown-menu { + border-radius: 3px; + box-shadow: 0 3px 6px; + font-size: 15px; + + .dropdown-item { + padding: 3px 15px; + + &:active { + color: #000 !important; + } + } + + button { + @include disable-default-a-behaviour; + } + + a { + @include disable-default-a-behaviour; + color: #000 !important; + } +} + +.modal { + .modal-content { + background-color: var(--mainBackgroundColor); + } + + .modal-header { + border-bottom: none; + margin-bottom: 5px; + + .modal-title { + font-size: 20px; + font-weight: $font-semibold; + } + + my-global-icon { + @include icon(24px); + + position: relative; + top: 3px; + float: right; + + margin: 0; + padding: 0; + opacity: 1; + } + } + + .inputs { + margin-bottom: 0; + text-align: right; + + .action-button-cancel { + @include peertube-button; + @include grey-button; + + display: inline-block; + margin-right: 10px; + } + + .action-button-submit { + @include peertube-button; + @include orange-button; + } + } +} + +// Nav customizations +.nav .nav-link { + display: flex !important; + align-items: center; + height: 30px !important; + padding: 10px 15px !important; +} + +.nav.nav-pills { + font-size: 16px !important; + + .nav-link.active { + font-weight: $font-semibold !important; + } + + a { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor); + } +} + +ngb-tabset.bootstrap { + + .nav-link { + &, & a { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor) !important; + } + } + + .nav-pills .nav-link.active { + color: #000 !important; + } +} + +.nav-tabs .nav-link.active { + background-color: var(--mainBackgroundColor) !important; + border-bottom: none; +} + +.collapse-transition { + // Animation when we show/hide the filters + transition: max-height 0.3s; + display: block !important; + overflow: hidden !important; + max-height: 0; + + &.show { + max-height: 1500px; + } +} diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index d4a2269a1..f608e9299 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -235,6 +235,14 @@ position: relative; font-size: 15px; + &.disabled { + background-color: #E5E5E5; + + select { + cursor: default; + } + } + @media screen and (max-width: $width) { width: 100%; } @@ -282,16 +290,6 @@ } } -@mixin peertube-select-disabled-container ($width) { - @include peertube-select-container($width); - - background-color: #E5E5E5; - - select { - cursor: default; - } -} - // Thanks: https://codepen.io/triss90/pen/XNEdRe/ @mixin peertube-radio-container { input[type="radio"] { -- cgit v1.2.3