client/src/sass/bootstrap.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2 @import '_bootstrap';
   3
   4 @import '_variables';
   5 @import '_mixins';
   6
   7 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
   8 .glyphicon-refresh-animate {
   9   animation: spin .7s infinite linear;
  10 }
  11
  12 .flex-auto {
  13   flex: auto;
  14 }
  15
  16 .c-hand {
  17   cursor: pointer;
  18 }
  19
  20 @keyframes spin {
  21   from {
  22     transform: scale(1) rotate(0deg);
  23   }
  24   to {
  25     transform: scale(1) rotate(360deg);
  26   }
  27 }
  28
  29 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
  30 .dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown) {
  31   z-index: z(dropdown) !important;
  32
  33   &.list-overflow-menu,
  34   &.parent-entry {
  35     z-index: z(header) - 1 !important;
  36   }
  37 }
  38
  39 .dropdown-menu {
  40   border-radius: 3px;
  41   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);
  42   font-size: 15px;
  43
  44   .dropdown-item {
  45     padding: 3px 15px;
  46
  47     &.active {
  48       color: var(--mainBackgroundColor) !important;
  49       background-color: var(--mainHoverColor);
  50       opacity: .9;
  51     }
  52
  53     &::after {
  54       display: none;
  55     }
  56   }
  57
  58   button {
  59     @include disable-default-a-behaviour;
  60   }
  61
  62   a {
  63     @include disable-default-a-behaviour;
  64     color: #000 !important;
  65   }
  66 }
  67
  68
  69 @media screen and (min-width: #{map-get($grid-breakpoints, md)}) {
  70   .modal:before {
  71     vertical-align: middle;
  72     content: " ";
  73     height: 100%;
  74   }
  75
  76   .modal-dialog {
  77     text-align: left;
  78
  79     &:not(.modal-lg):not(.modal-xl) {
  80       min-width: 500px;
  81       width: 40vw;
  82       max-width: 900px;
  83     }
  84   }
  85 }
  86
  87 .modal {
  88   text-align: center;
  89
  90   .modal-content {
  91     background-color: var(--mainBackgroundColor);
  92   }
  93
  94   .modal-header {
  95     border-bottom: none;
  96     margin-bottom: 5px;
  97
  98     .modal-title {
  99       font-size: 20px;
 100       font-weight: $font-semibold;
 101     }
 102
 103     my-global-icon {
 104       @include icon(22px);
 105
 106       position: relative;
 107       top: 5px;
 108       float: right;
 109
 110       margin: 0;
 111       padding: 0;
 112       opacity: .5;
 113
 114       &[iconName="cross"] {
 115         @include icon(16px);
 116         top: -3px;
 117       }
 118     }
 119   }
 120
 121   .inputs {
 122     margin-bottom: 0;
 123     text-align: right;
 124
 125     .action-button-cancel {
 126       @include peertube-button;
 127       @include tertiary-button;
 128
 129       display: inline-block;
 130       margin-right: 10px;
 131     }
 132
 133     .action-button-submit {
 134       @include peertube-button;
 135       @include orange-button;
 136     }
 137   }
 138 }
 139
 140 // Nav customizations
 141 .nav .nav-link {
 142   display: flex !important;
 143   align-items: center;
 144   height: 30px !important;
 145   padding: 10px 15px !important;
 146 }
 147
 148 .nav.nav-pills {
 149   font-size: 16px !important;
 150
 151   .nav-link.active {
 152     font-weight: $font-semibold !important;
 153   }
 154
 155   a {
 156     @include disable-default-a-behaviour;
 157
 158     color: var(--mainForegroundColor);
 159   }
 160 }
 161
 162 .nav-tabs {
 163
 164   .nav-link {
 165     @include disable-default-a-behaviour;
 166
 167     color: var(--mainForegroundColor) !important;
 168   }
 169 }
 170
 171 .nav-tabs .nav-link {
 172   &:not(.active) {
 173     border-bottom: 3px solid transparent;
 174   }
 175   &.active {
 176     font-weight: $font-semibold;
 177     background-color: var(--mainBackgroundColor) !important;
 178     border: none;
 179     border-bottom: 2px solid var(--mainColor);
 180   }
 181   &:hover {
 182     border-top-color: transparent;
 183     border-left-color: transparent;
 184     border-right-color: transparent;
 185   }
 186 }
 187
 188 .card {
 189   background-color: var(--mainBackgroundColor);
 190   border-color: #dee2e6;
 191 }
 192
 193 .collapse-transition {
 194   // Animation when we show/hide the filters
 195   transition: max-height 0.3s;
 196   display: block !important;
 197   overflow: hidden !important;
 198   max-height: 0;
 199
 200   &.show {
 201     max-height: 1500px;
 202   }
 203 }
 204
 205 .dropdown-divider {
 206   margin: 0.3rem 0;
 207 }
 208
 209 ngb-modal-backdrop {
 210   z-index: z(modal) - 1 !important;
 211 }
 212
 213 ngb-modal-window {
 214   z-index: z(modal) !important;
 215 }
 216
 217 ngb-popover-window {
 218   z-index: z(popover) !important;
 219 }
 220
 221 ngb-tooltip-window {
 222   z-index: z(tooltip) !important;
 223 }
 224
 225 .btn-outline-secondary {
 226   border-color: $input-border-color;
 227
 228   &:focus-within,
 229   &:focus,
 230   &:hover {
 231     color: #fff;
 232     background-color: #6c757d;
 233   }
 234 }
 235
 236 .btn-outline-tertiary {
 237   color: var(--secondaryColor);
 238   border-color: var(--secondaryColor);
 239
 240   &:focus-within,
 241   &:focus,
 242   &:hover {
 243     color: var(--mainBackgroundColor);
 244     background-color: var(--secondaryColor);
 245   }
 246 }
 247
 248 // input box-shadow on focus
 249 .form-control {
 250   font-size: 15px;
 251   color: var(--mainForegroundColor);
 252   background-color: var(--inputBackgroundColor);
 253   outline: none;
 254
 255   &:focus-within,
 256   &:focus {
 257     box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 258
 259     &.input-error {
 260       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 261     }
 262   }
 263 }
 264
 265 .input-group > .form-control {
 266   flex: initial;
 267 }