diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-compass.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-compass.scss index 8fbc3cda5..82706c47c 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-compass.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-compass.scss @@ -5,5 +5,3 @@ @function twbs-image-path($path) { @return image-url($path, true); } - -$bootstrap-sass-asset-helper: true; diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-mincer.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-mincer.scss index 0c4655e32..34132501f 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-mincer.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-mincer.scss @@ -9,11 +9,9 @@ // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>" // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>" // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>" - @return "<%- asset_path("#{$path}".replace(/[#?].*$/, '')) + "#{$path}".replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>"; + @return "<%- asset_path('#{$path}'.replace(/[#?].*$/, '')) + '#{$path}'.replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>"; } @function twbs-image-path($file) { - @return "<%- asset_path("#{$file}") %>"; + @return "<%- asset_path('#{$file}') %>"; } - -$bootstrap-sass-asset-helper: true; diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-sprockets.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-sprockets.scss index 9fffc1eb4..7d3069280 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-sprockets.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-sprockets.scss @@ -5,5 +5,3 @@ @function twbs-image-path($path) { @return image-path($path); } - -$bootstrap-sass-asset-helper: true; diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_alerts.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_alerts.scss index f9e69bd08..e45de8305 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_alerts.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_alerts.scss @@ -15,9 +15,9 @@ // Headings for larger alerts h4 { margin-top: 0; - color: inherit; // Specified for the h4 to prevent conflicts of changing $headings-color + // Specified for the h4 to prevent conflicts of changing $headings-color + color: inherit; } - // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; @@ -28,7 +28,6 @@ > ul { margin-bottom: 0; } - > p + p { margin-top: 5px; } @@ -38,8 +37,7 @@ // // Expand the right padding and account for the close button's positioning. -// The misspelled .alert-dismissable was deprecated in 3.2.0. -.alert-dismissable, +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. .alert-dismissible { padding-right: ($alert-padding + 20); @@ -59,15 +57,12 @@ .alert-success { @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); } - .alert-info { @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); } - .alert-warning { @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); } - .alert-danger { @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_badges.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_badges.scss index 44d5dd6f4..02394ae7f 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_badges.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_badges.scss @@ -10,11 +10,11 @@ padding: 3px 7px; font-size: $font-size-small; font-weight: $badge-font-weight; - line-height: $badge-line-height; color: $badge-color; - text-align: center; + line-height: $badge-line-height; + vertical-align: baseline; white-space: nowrap; - vertical-align: middle; + text-align: center; background-color: $badge-bg; border-radius: $badge-border-radius; @@ -28,9 +28,7 @@ position: relative; top: -1px; } - - .btn-xs &, - .btn-group-xs > .btn & { + .btn-xs & { top: 0; padding: 1px 5px; } @@ -38,20 +36,11 @@ // [converter] extracted a& to a.badge // Account for badges in navs - .list-group-item.active > &, + a.list-group-item.active > &, .nav-pills > .active > a > & { color: $badge-active-color; background-color: $badge-active-bg; } - - .list-group-item > & { - float: right; - } - - .list-group-item > & + & { - margin-right: 5px; - } - .nav-pills > li > a > & { margin-left: 3px; } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_breadcrumbs.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_breadcrumbs.scss index 67e39d909..3641e333b 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_breadcrumbs.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_breadcrumbs.scss @@ -14,11 +14,9 @@ display: inline-block; + li:before { + content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space padding: 0 5px; color: $breadcrumb-color; - // [converter] Workaround for https://github.com/sass/libsass/issues/1115 - $nbsp: "\00a0"; - content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space } } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_button-groups.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_button-groups.scss index 6a62faf5d..63ccd927c 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_button-groups.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_button-groups.scss @@ -18,6 +18,10 @@ &.active { z-index: 2; } + &:focus { + // Remove focus outline when dropdown JS adds it after closing the menu + outline: 0; + } } } @@ -34,9 +38,8 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { margin-left: -5px; // Offset the first child's margin - @include clearfix; + @include clearfix(); - .btn, .btn-group, .input-group { float: left; @@ -59,7 +62,7 @@ @include border-right-radius(0); } } -// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { @include border-left-radius(0); @@ -72,13 +75,13 @@ .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:first-child:not(:last-child) { +.btn-group > .btn-group:first-child { > .btn:last-child, > .dropdown-toggle { @include border-right-radius(0); } } -.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { +.btn-group > .btn-group:last-child > .btn:first-child { @include border-left-radius(0); } @@ -103,18 +106,18 @@ // Give the line between buttons some depth .btn-group > .btn + .dropdown-toggle { - padding-right: 8px; padding-left: 8px; + padding-right: 8px; } .btn-group > .btn-lg + .dropdown-toggle { - padding-right: 12px; padding-left: 12px; + padding-right: 12px; } // The clickable button for toggling the menu // Remove the gradient and set the same inset shadow as the :active state .btn-group.open .dropdown-toggle { - @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125)); + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); // Show no shadow for `.btn-link` since it has no other button styles. &.btn-link { @@ -153,7 +156,7 @@ // Clear floats so dropdown menus can be properly placed > .btn-group { - @include clearfix; + @include clearfix(); > .btn { float: none; } @@ -173,12 +176,12 @@ border-radius: 0; } &:first-child:not(:last-child) { - @include border-top-radius($btn-border-radius-base); + border-top-right-radius: $border-radius-base; @include border-bottom-radius(0); } &:last-child:not(:first-child) { + border-bottom-left-radius: $border-radius-base; @include border-top-radius(0); - @include border-bottom-radius($btn-border-radius-base); } } .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { @@ -195,6 +198,7 @@ } + // Justified button groups // ---------------------- @@ -205,8 +209,8 @@ border-collapse: separate; > .btn, > .btn-group { - display: table-cell; float: none; + display: table-cell; width: 1%; } > .btn-group .btn { @@ -222,23 +226,15 @@ // Checkbox and radio options // // In order to support the browser's form validation feedback, powered by the -// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use -// `display: none;` or `visibility: hidden;` as that also hides the popover. -// Simply visually hiding the inputs via `opacity` would leave them clickable in -// certain cases which is prevented by using `clip` and `pointer-events`. +// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot +// use `display: none;` or `visibility: hidden;` as that also hides the popover. // This way, we ensure a DOM element is visible to position the popover from. // -// See https://github.com/twbs/bootstrap/pull/12794 and -// https://github.com/twbs/bootstrap/pull/14559 for more information. +// See https://github.com/twbs/bootstrap/pull/12794 for more. -[data-toggle="buttons"] { - > .btn, - > .btn-group > .btn { - input[type="radio"], - input[type="checkbox"] { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; - } - } +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { + position: absolute; + z-index: -1; + @include opacity(0); } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_buttons.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_buttons.scss index 62962d786..f2684c1b7 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_buttons.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_buttons.scss @@ -11,54 +11,45 @@ margin-bottom: 0; // For input.btn font-weight: $btn-font-weight; text-align: center; - white-space: nowrap; vertical-align: middle; - touch-action: manipulation; cursor: pointer; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid transparent; - @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base); + white-space: nowrap; + @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base); @include user-select(none); + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); + &, &:active, &.active { - &:focus, - &.focus { - @include tab-focus; + &:focus { + @include tab-focus(); } } &:hover, - &:focus, - &.focus { + &:focus { color: $btn-default-color; text-decoration: none; } &:active, &.active { - background-image: none; outline: 0; - @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125)); + background-image: none; + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } &.disabled, &[disabled], fieldset[disabled] & { - cursor: $cursor-disabled; + cursor: not-allowed; + pointer-events: none; // Future-proof disabling of clicks @include opacity(.65); @include box-shadow(none); } - - // [converter] extracted a& to a.btn -} - -a.btn { - &.disabled, - fieldset[disabled] & { - pointer-events: none; // Future-proof disabling of clicks on `` elements - } } @@ -94,13 +85,13 @@ a.btn { // Make a button look and behave like a link .btn-link { - font-weight: 400; color: $link-color; + font-weight: normal; + cursor: pointer; border-radius: 0; &, &:active, - &.active, &[disabled], fieldset[disabled] & { background-color: transparent; @@ -115,7 +106,7 @@ a.btn { &:hover, &:focus { color: $link-hover-color; - text-decoration: $link-hover-decoration; + text-decoration: underline; background-color: transparent; } &[disabled], @@ -134,14 +125,14 @@ a.btn { .btn-lg { // line-height: ensure even-numbered height of button next to large input - @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large); + @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); } .btn-sm { // line-height: ensure proper height of button next to small input - @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); + @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); } .btn-xs { - @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); + @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small); } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_carousel.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_carousel.scss index 52a1f7bff..e9e2f7ce1 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_carousel.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_carousel.scss @@ -10,44 +10,20 @@ .carousel-inner { position: relative; - width: 100%; overflow: hidden; + width: 100%; > .item { - position: relative; display: none; + position: relative; @include transition(.6s ease-in-out left); // Account for jankitude on images > img, > a > img { - @include img-responsive; + @include img-responsive(); line-height: 1; } - - // WebKit CSS3 transforms for supported devices - @media all and (transform-3d), (-webkit-transform-3d) { - @include transition-transform(0.6s ease-in-out); - @include backface-visibility(hidden); - @include perspective(1000px); - - &.next, - &.active.right { - @include translate3d(100%, 0, 0); - left: 0; - } - &.prev, - &.active.left { - @include translate3d(-100%, 0, 0); - left: 0; - } - &.next.left, - &.prev.right, - &.active { - @include translate3d(0, 0, 0); - left: 0; - } - } } > .active, @@ -93,34 +69,33 @@ .carousel-control { position: absolute; top: 0; - bottom: 0; left: 0; + bottom: 0; width: $carousel-control-width; + @include opacity($carousel-control-opacity); font-size: $carousel-control-font-size; color: $carousel-control-color; text-align: center; text-shadow: $carousel-text-shadow; - background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug - @include opacity($carousel-control-opacity); // We can't have this transition here because WebKit cancels the carousel // animation if you trip this while in the middle of another animation. // Set gradients for backgrounds &.left { - @include gradient-horizontal($start-color: rgba(0, 0, 0, .5), $end-color: rgba(0, 0, 0, .0001)); + @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); } &.right { - right: 0; left: auto; - @include gradient-horizontal($start-color: rgba(0, 0, 0, .0001), $end-color: rgba(0, 0, 0, .5)); + right: 0; + @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); } // Hover/focus state &:hover, &:focus { + outline: 0; color: $carousel-control-color; text-decoration: none; - outline: 0; @include opacity(.9); } @@ -133,7 +108,6 @@ top: 50%; z-index: 5; display: inline-block; - margin-top: -10px; } .icon-prev, .glyphicon-chevron-left { @@ -147,20 +121,21 @@ } .icon-prev, .icon-next { - width: 20px; + width: 20px; height: 20px; + margin-top: -10px; font-family: serif; - line-height: 1; } + .icon-prev { &:before { - content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) } } .icon-next { &:before { - content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) } } } @@ -176,38 +151,36 @@ left: 50%; z-index: 15; width: 60%; - padding-left: 0; margin-left: -30%; - text-align: center; + padding-left: 0; list-style: none; + text-align: center; li { display: inline-block; - width: 10px; + width: 10px; height: 10px; margin: 1px; text-indent: -999px; + border: 1px solid $carousel-indicator-border-color; + border-radius: 10px; cursor: pointer; + // IE8-9 hack for event handling // // Internet Explorer 8-9 does not support clicks on elements without a set // `background-color`. We cannot use `filter` since that's not viewed as a // background color by the browser. Thus, a hack is needed. - // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer // // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we // set alpha transparency for the best results possible. background-color: #000 \9; // IE8 - background-color: rgba(0, 0, 0, 0); // IE9 - - border: 1px solid $carousel-indicator-border-color; - border-radius: 10px; + background-color: rgba(0,0,0,0); // IE9 } - .active { - width: 12px; - height: 12px; margin: 0; + width: 12px; + height: 12px; background-color: $carousel-indicator-active-bg; } } @@ -217,16 +190,15 @@ // Hidden by default for smaller viewports .carousel-caption { position: absolute; + left: 15%; right: 15%; bottom: 20px; - left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: $carousel-caption-color; text-align: center; text-shadow: $carousel-text-shadow; - & .btn { text-shadow: none; // No shadow for button elements in carousel-caption } @@ -242,25 +214,25 @@ .glyphicon-chevron-right, .icon-prev, .icon-next { - width: ($carousel-control-font-size * 1.5); - height: ($carousel-control-font-size * 1.5); - margin-top: ($carousel-control-font-size / -2); - font-size: ($carousel-control-font-size * 1.5); + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; } .glyphicon-chevron-left, .icon-prev { - margin-left: ($carousel-control-font-size / -2); + margin-left: -15px; } .glyphicon-chevron-right, .icon-next { - margin-right: ($carousel-control-font-size / -2); + margin-right: -15px; } } // Show and left align the captions .carousel-caption { - right: 20%; left: 20%; + right: 20%; padding-bottom: 30px; } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_close.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_close.scss index a858a8f36..62ce30fa3 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_close.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_close.scss @@ -26,12 +26,10 @@ // Additional properties for button version // iOS requires the button element instead of an anchor tag. // If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; - appearance: none; } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss index 8e2b2a7f4..8d83b14d7 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss @@ -27,12 +27,11 @@ kbd { color: $kbd-color; background-color: $kbd-bg; border-radius: $border-radius-small; - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); kbd { padding: 0; font-size: 100%; - font-weight: 700; box-shadow: none; } } @@ -44,9 +43,9 @@ pre { margin: 0 0 ($line-height-computed / 2); font-size: ($font-size-base - 1); // 14px to 13px line-height: $line-height-base; - color: $pre-color; word-break: break-all; word-wrap: break-word; + color: $pre-color; background-color: $pre-bg; border: 1px solid $pre-border-color; border-radius: $border-radius-base; diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_component-animations.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_component-animations.scss index ca4d6b068..8c3fd07a2 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_component-animations.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_component-animations.scss @@ -10,7 +10,6 @@ .fade { opacity: 0; @include transition(opacity .15s linear); - &.in { opacity: 1; } @@ -32,7 +31,5 @@ tbody.collapse.in { display: table-row-group; } position: relative; height: 0; overflow: hidden; - @include transition-property(height, visibility); - @include transition-duration(.35s); - @include transition-timing-function(ease); + @include transition(height .35s ease); } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_dropdowns.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_dropdowns.scss index 0a5898a8d..df50ec0cb 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_dropdowns.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_dropdowns.scss @@ -10,14 +10,12 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: $caret-width-base dashed; - border-top: $caret-width-base solid \9; // IE8 + border-top: $caret-width-base solid; border-right: $caret-width-base solid transparent; - border-left: $caret-width-base solid transparent; + border-left: $caret-width-base solid transparent; } // The dropdown wrapper (div) -.dropup, .dropdown { position: relative; } @@ -38,15 +36,15 @@ min-width: 160px; padding: 5px 0; margin: 2px 0 0; // override default ul + list-style: none; font-size: $font-size-base; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) - list-style: none; background-color: $dropdown-bg; - background-clip: padding-box; border: 1px solid $dropdown-fallback-border; // IE8 fallback border: 1px solid $dropdown-border; border-radius: $border-radius-base; - @include box-shadow(0 6px 12px rgba(0, 0, 0, .175)); + @include box-shadow(0 6px 12px rgba(0,0,0,.175)); + background-clip: padding-box; // Aligns the dropdown menu to right // @@ -66,17 +64,20 @@ display: block; padding: 3px 20px; clear: both; - font-weight: 400; + font-weight: normal; line-height: $line-height-base; color: $dropdown-link-color; white-space: nowrap; // prevent links from randomly breaking onto new lines + } +} - &:hover, - &:focus { - color: $dropdown-link-hover-color; - text-decoration: none; - background-color: $dropdown-link-hover-bg; - } +// Hover/Focus state +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: $dropdown-link-hover-color; + background-color: $dropdown-link-hover-bg; } } @@ -87,8 +88,8 @@ &:focus { color: $dropdown-link-active-color; text-decoration: none; - background-color: $dropdown-link-active-bg; outline: 0; + background-color: $dropdown-link-active-bg; } } @@ -102,15 +103,16 @@ &:focus { color: $dropdown-link-disabled-color; } - - // Nuke hover/focus effects +} +// Nuke hover/focus effects +.dropdown-menu > .disabled > a { &:hover, &:focus { text-decoration: none; - cursor: $cursor-disabled; background-color: transparent; background-image: none; // Remove CSS gradient - @include reset-filter; + @include reset-filter(); + cursor: not-allowed; } } @@ -132,8 +134,8 @@ // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown // menu with the parent. .dropdown-menu-right { - right: 0; left: auto; // Reset the default from `.dropdown-menu` + right: 0; } // With v3, we enabled auto-flipping if you have a dropdown within a right // aligned nav component. To enable the undoing of that, we provide an override @@ -142,8 +144,8 @@ // This is only for left-aligning a dropdown menu within a `.navbar-right` or // `.pull-right` nav component. .dropdown-menu-left { - right: auto; left: 0; + right: auto; } // Dropdown section headers @@ -159,10 +161,10 @@ // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop { position: fixed; - top: 0; + left: 0; right: 0; bottom: 0; - left: 0; + top: 0; z-index: ($zindex-dropdown - 10); } @@ -181,16 +183,15 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { - content: ""; border-top: 0; - border-bottom: $caret-width-base dashed; - border-bottom: $caret-width-base solid \9; // IE8 + border-bottom: $caret-width-base solid; + content: ""; } // Different positioning for bottom up menu .dropdown-menu { top: auto; bottom: 100%; - margin-bottom: 2px; + margin-bottom: 1px; } } diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss index d2e2bac5c..ea6b36a7a 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss @@ -8,13 +8,13 @@ // Restyle and baseline non-control form elements. fieldset { - // Chrome and Firefox set a `min-width: min-content;` on fieldsets, - // so we reset that to ensure it behaves more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359. - min-width: 0; padding: 0; margin: 0; border: 0; + // Chrome and Firefox set a min-width: min-content; on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; } legend { @@ -33,7 +33,7 @@ label { display: inline-block; max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) margin-bottom: 5px; - font-weight: 700; + font-weight: normal; } @@ -43,18 +43,9 @@ label { // is required to ensure optimum display with or without those classes to better // address browser inconsistencies. +// Override content-box in Normalize (isnt specific enough) input[type="search"] { - // Override content-box in Normalize (* isn't specific enough) @include box-sizing(border-box); - - // Search inputs in iOS - // - // This overrides the extra rounded corners on search inputs in iOS so that our - // `.form-control` class can properly style them. Note that this cannot simply - // be added to `.form-control` as it's not specific enough. For details, see - // https://github.com/twbs/bootstrap/issues/11586. - -webkit-appearance: none; - appearance: none; } // Position radios and checkboxes better @@ -63,18 +54,9 @@ input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px \9; // IE8-9 line-height: normal; - - // Apply same disabled cursor tweak as for inputs - // Some special care is needed because