/** @TODO: use JS Toolkit to create individual SASS files for *** existing PS components **/ @use "sass:math" as math; /// FormInput ///----------------------------------------------------------------------------- .b-form-input { &[type=password] { letter-spacing: space-x(1); font-weight: 700; } // remove "bootstrap" focus ring for this state &--idled:active, &--idled:focus { border-color: $input-border-color; box-shadow: unset; } } /// Checkbox ///----------------------------------------------------------------------------- .b-form-checkbox { @include clickable(); &--disabled, &--deferred, &--idled { @include unclickable(); } } /// Modal ///----------------------------------------------------------------------------- .b-modal { $self: &; $wrapper-margin: 1.75rem; // from "_modal.scss" &__content { background-color: $modal-content-bg; margin-left: $wrapper-margin; margin-right: $wrapper-margin; max-width: 800px; } &__header { background-color: $card-cap-bg; align-items: center; &__title { color: $primary; font-size: 21px; } &__close { // better positioning due to button overlay $offset-x: 8px; margin-right: $offset-x; } } // @XXX Bootstrap not removing some modal elements on "hide" method // Adding an overlay that the user could click to synchronise the hide // cinematic // @https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear &__overlay { width: 100%; height: 100%; position: absolute; } } /// Spinner ///----------------------------------------------------------------------------- .b-spinner { // regarding sizing, Bootstrap set a default `2rem ^ 2rem` // (cf. "_spinners.scss") font-size: inherit; } /// Button ///----------------------------------------------------------------------------- .b-button { $spinner-size: 20px; $self: &; @include clickable(); position: relative; // (!) `translate` CSS modifiers won't work with bootstrap spinner &__spinner { position: absolute; left: calc(50% - #{ math.div($spinner-size, 2) }); top: calc(50% - #{ math.div($spinner-size, 2) }); width: $spinner-size; height: $spinner-size; } &--disabled, &--deferred, &--idled { @include unclickable(); } &--deferred { #{ $self }__inner { visibility: hidden; } } // icon alignement .b-icon::before { line-height: $btn-line-height; } } .table-header-rename .btn { .fa::before { color: $light !important; } } /// Icon Button ///----------------------------------------------------------------------------- .b-icon-button { $self: &; // $overlay-offset-y: -6px; // $overlay-offset-x: -10px; transition: color 0.2s; position: relative; transition: color 150ms ease-in-out; &__inner { // (due to overlay via pseudo element) z-index: 1; position: relative; } // overlay preparation &::before { // left: $overlay-offset-x; // right: $overlay-offset-x; // top: $overlay-offset-y; // bottom: $overlay-offset-y; // border-radius: $overlay-radius; position: absolute; transition: // background-color 150ms ease-in-out, box-shadow 150ms ease-in-out; } &--overlay::before { content: ""; } // elevation levels &--level-1:hover::before { background-color: $gray-100; } &--level-2::before { background-color: $gray-100; } &--level-2:hover::before { background-color: darken($gray-100, 10%); } // component status UI changes &--enabled, &--muted, &--idled { @include clickable; &#{ $self }--warning { color: darken($warning, 10%); } &#{ $self }--success { color: darken($success, 10%); } &#{ $self }--danger { color: darken($danger, 10%); } &#{ $self }--info { color: darken($info, 10%); } &#{ $self }--primary { color: darken($primary, 10%); } &#{ $self }--secondary { color: darken($secondary, 10%); } &#{ $self }--dark { color: darken($body-color, 10%); } } &--enabled, &--muted { &#{ $self }--warning:hover { color: $warning; } &#{ $self }--success:hover { color: $success; } &#{ $self }--danger:hover { color: $danger; } &#{ $self }--info:hover { color: $info; } &#{ $self }--primary:hover { color: $primary; } &#{ $self }--secondary:hover { color: $secondary; } &#{ $self }--dark:hover { color: $body-color; } } &--enabled#{ $self }--focus-ring, &--muted#{ $self }--focus-ring { &#{ $self }:active, &#{ $self }--active { &::before { box-shadow: 0 0 0 0.2rem mix-alpha($gray-200, 50%); } } } &--idled:hover { @include unclickable(); } &--disabled, &--deferred { @include unclickable(); &#{ $self }--warning { color: lighten($warning, 15%); } &#{ $self }--success { color: lighten($success, 15%); } &#{ $self }--danger { color: lighten($danger, 15%); } &#{ $self }--info { color: lighten($info, 15%); } &#{ $self }--primary { color: lighten($primary, 15%); } &#{ $self }--secondary { color: lighten($secondary, 15%); } &#{ $self }--dark { color: lighten($body-color, 15%); } } &--disabled#{$self}--level-1:hover::before, &--deferred#{$self}--level-2:hover::before { background-color: initial; } &--disabled#{$self}--level-2::before, &--disabled#{$self}--level-2:hover::before, &--deferred#{$self}--level-2::before, &--deferred#{$self}--level-2:hover::before { background-color: lighten($gray-100, 15%); } } /// Simple icons (in Forest action buttons or not clickable or in modal, etc.) /// ---------------------------------------------------------------------------- .main-topbar .b-icon, .main-topbar .fa, .router__aside .b-icon, .router__aside .fa, .router__body .corpus-layout .b-icon, .router__body .corpus-layout .fa, .router__body .nodes-lists-layout-tabs .b-icon, .router__body .nodes-lists-layout-tabs .fa, .router__body .nodes-texts-layout-tabs .b-icon, .router__body .nodes-texts-layout-tabs .fa, .modal-dialog .b-icon, .modal-dialog .fa { &:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times) { &:before { color: $primary; } &:hover:before { color: inherit; } } } .mainleaf__folder-icon:not(.b-icon-button--enabled), .main-topbar__tree-switcher.btn-light .fa, .main-topbar__tree-switcher.btn-outline-light .fa, #portal-topbar .node-topbar .btn-light:hover .fa, #portal-topbar .node-topbar .btn-outline-light .fa { &:before { color: inherit !important; } } .main-topbar .nav-item > a .fa, .popup-container .card-footer .btn-primary, .popup-container .search-bar .btn.fa, .login-modal-form .btn .fa, .corpus-layout__code-section .b-button .fa, .main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa, #portal-topbar .node-topbar__title .fa { color: $light !important; &:before { color: $light !important; } } .alert { .fa-lightbulb-o { font-size: 20px; } } /// Table headings with bg color /// ---------------------------------------------------------------------------- .table .thead-dark th { background-color: $primary; border-color: darken($primary, 10%); } /// Fieldset ///----------------------------------------------------------------------------- .b-fieldset { $margin: space-x(1.5); position: relative; border: $card-border-width solid $card-border-color; border-radius: $card-border-radius; padding-left: $margin; padding-right: $margin; padding-bottom: space-x(0.5); padding-top: calc( #{ $margin } + #{ $headings-margin-bottom } ); background-color: inherit; &__legend { position: absolute; top: 0; font-size: $font-size-sm; font-weight: $headings-font-weight; color: $gray-600; line-height: $headings-line-height; margin: #{ - $headings-margin-bottom } 0 0; padding-left: math.div($margin, 2); padding-right: math.div($margin, 2); background-color: inherit; } &__content { align-self: center; } } /// PhyloExplorer.ConfigForm ///----------------------------------------------------------------------------- .phylo-config-form { &__row { position: relative; display: flex; flex-wrap: wrap; } &__group { margin-bottom: $form-group-margin-bottom; } .b-fieldset { margin-left: $card-spacer-x; margin-right: $card-spacer-x; } &__col { width: 50%; &:first-child { padding-right: space-x(1); } &:last-child { padding-left: space-x(1); } } &__submit { text-align: center; } } .range-simple__input { &:focus { box-shadow: none; } } /// Tabs ///----------------------------------------------------------------------------- .b-tabs { .nav-item:first-child { margin-left: space-x(2); } .nav-item:last-child { margin-right: space-x(2); } } /// Ripple ///----------------------------------------------------------------------------- .b-ripple { @include fit-positions; position: absolute; overflow: hidden; &:after { @include fit-positions; content: ""; position: absolute; pointer-events: none; background-image: radial-gradient( circle, #000 10%, transparent 10% ); background-repeat: no-repeat; background-position: 50%; opacity: 0; transition: transform 0.6s, opacity 0.6s; transform: scale(10); } &:active:after { transform: scale(0); opacity: 0.2; transition: transform 0s, opacity 0s; } @each $name, $value in $palette-semantic { &--#{ $name }:after { background-image: radial-gradient( circle, #{ $value } 10%, transparent 10% ); } } &--disabled:after, &--deferred:after, &--muted:after { content: none; } } /// Preloader ///----------------------------------------------------------------------------- .b-preloader { width: 100%; height: 100%; &__spinner { $size: 100px; $weight: 6px; position: absolute; font-size: $weight; height: $size; width: $size; // (?) `centered` mixin will not work here, due to Bootstrap process // interfering with the transform rule top: calc( 50% - math.div($size, 2) ); left: calc( 50% - math.div($size, 2) ); } } /// Context Menu ///----------------------------------------------------------------------------- .b-context-menu { $minimum-width: 280px; @include fit-positions(); position: fixed; // z-index: z-index('main', 'floaty'); z-index: 10; background-color: transparent; &__inner { position: fixed; box-shadow: $box-shadow-lg; border: 1px solid $gray-100; word-wrap: break-word; background-color: $body-bg; border-radius: $card-border-radius; min-width: $minimum-width; } } .b-context-menu-item { @include clickable(); position: relative; background-color: $body-bg; padding: $list-group-item-padding-y $list-group-item-padding-x; font-size: 15px; &--disabled, &--deferred, &--idled { @include unclickable(); color: $list-group-disabled-color; } &--enabled:hover, &--muted:hover { background-color: $list-group-hover-bg; } } /// Button Group ///----------------------------------------------------------------------------- .b-button-group { $gutter: 2px; &--no-collapse { .btn:not(:first-child) { margin-left: calc( #{ $gutter } / 2 ); } .btn:not(:last-child) { margin-right: calc( #{ $gutter } / 2 ); } } } /// Buttons global ///----------------------------------------------------------------------------- .btn.disabled, .btn:disabled { opacity: .45; } .border-grey { border: 1px solid $gray-400; } .rounded-circle-2 { border-radius: 50px; .form-control { border-radius: 50px; } } details { summary { cursor: pointer; // list-style: initial !important; } }