From: Rob Crittenden Date: Wed, 2 Sep 2015 20:54:23 +0000 (-0400) Subject: Update bootstrap, update/add all of PatternFly, add font-awesome X-Git-Tag: v1.1.0~18 X-Git-Url: http://git.cascardo.eti.br/?p=cascardo%2Fipsilon.git;a=commitdiff_plain;h=0afc14ecf1c3d94bc59d2dd7f1cee6420a0b98dd Update bootstrap, update/add all of PatternFly, add font-awesome These are required for the SP Portal as designed by the UI team. Some local changes were done to patternfly to fix the location of bootstrap and font-awesome but it should be fairly similar to the upstream version. patternfly 2.0.0 bootstrap 3.3.5 fontawesome 4.3.0 https://fedorahosted.org/ipsilon/ticket/148 Signed-off-by: Rob Crittenden Reviewed-by: Patrick Uiterwijk --- diff --git a/less/bootstrap/alerts.less b/less/bootstrap/alerts.less index 3eab066..c4199db 100644 --- a/less/bootstrap/alerts.less +++ b/less/bootstrap/alerts.less @@ -18,6 +18,7 @@ // 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,17 +29,19 @@ > ul { margin-bottom: 0; } + > p + p { margin-top: 5px; } } -// Dismissable alerts +// Dismissible alerts // // Expand the right padding and account for the close button's positioning. -.alert-dismissable { - padding-right: (@alert-padding + 20); +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + padding-right: (@alert-padding + 20); // Adjust close link position .close { @@ -56,12 +59,15 @@ .alert-success { .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); } + .alert-info { .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); } + .alert-warning { .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); } + .alert-danger { .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); } diff --git a/less/bootstrap/badges.less b/less/bootstrap/badges.less index 56828ca..6ee16dc 100644 --- a/less/bootstrap/badges.less +++ b/less/bootstrap/badges.less @@ -3,7 +3,7 @@ // -------------------------------------------------- -// Base classes +// Base class .badge { display: inline-block; min-width: 10px; @@ -12,7 +12,7 @@ font-weight: @badge-font-weight; color: @badge-color; line-height: @badge-line-height; - vertical-align: baseline; + vertical-align: middle; white-space: nowrap; text-align: center; background-color: @badge-bg; @@ -28,28 +28,39 @@ position: relative; top: -1px; } - .btn-xs & { + + .btn-xs &, + .btn-group-xs > .btn & { top: 0; padding: 1px 5px; } -} -// Hover state, but only for links -a.badge { - &:hover, - &:focus { - color: @badge-link-hover-color; - text-decoration: none; - cursor: pointer; + // Hover state, but only for links + a& { + &:hover, + &:focus { + color: @badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } } -} -// Account for counters in navs -a.list-group-item.active > .badge, -.nav-pills > .active > a > .badge { - color: @badge-active-color; - background-color: @badge-active-bg; -} -.nav-pills > li > a > .badge { - margin-left: 3px; + // Account for badges in navs + .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/less/bootstrap/bootstrap.less b/less/bootstrap/bootstrap.less index b368b87..4b9916e 100644 --- a/less/bootstrap/bootstrap.less +++ b/less/bootstrap/bootstrap.less @@ -1,10 +1,17 @@ +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + // Core variables and mixins @import "variables.less"; @import "mixins.less"; -// Reset +// Reset and dependencies @import "normalize.less"; @import "print.less"; +@import "glyphicons.less"; // Core CSS @import "scaffolding.less"; @@ -17,7 +24,6 @@ // Components @import "component-animations.less"; -@import "glyphicons.less"; @import "dropdowns.less"; @import "button-groups.less"; @import "input-groups.less"; @@ -35,6 +41,7 @@ @import "media.less"; @import "list-group.less"; @import "panels.less"; +@import "responsive-embed.less"; @import "wells.less"; @import "close.less"; diff --git a/less/bootstrap/button-groups.less b/less/bootstrap/button-groups.less index 58fd906..6a0c5a8 100644 --- a/less/bootstrap/button-groups.less +++ b/less/bootstrap/button-groups.less @@ -18,10 +18,6 @@ &.active { z-index: 2; } - &:focus { - // Remove focus outline when dropdown JS adds it after closing the menu - outline: none; - } } } @@ -40,6 +36,7 @@ margin-left: -5px; // Offset the first child's margin &:extend(.clearfix all); + .btn, .btn-group, .input-group { float: left; @@ -75,13 +72,13 @@ .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:first-child { +.btn-group > .btn-group:first-child:not(:last-child) { > .btn:last-child, > .dropdown-toggle { .border-right-radius(0); } } -.btn-group > .btn-group:last-child > .btn:first-child { +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { .border-left-radius(0); } @@ -96,9 +93,9 @@ // // Remix the default button sizing classes into new ones for easier manipulation. -.btn-group-xs > .btn { .btn-xs(); } -.btn-group-sm > .btn { .btn-sm(); } -.btn-group-lg > .btn { .btn-lg(); } +.btn-group-xs > .btn { &:extend(.btn-xs); } +.btn-group-sm > .btn { &:extend(.btn-sm); } +.btn-group-lg > .btn { &:extend(.btn-lg); } // Split button dropdowns @@ -176,11 +173,11 @@ border-radius: 0; } &:first-child:not(:last-child) { - border-top-right-radius: @border-radius-base; + border-top-right-radius: @btn-border-radius-base; .border-bottom-radius(0); } &:last-child:not(:first-child) { - border-bottom-left-radius: @border-radius-base; + border-bottom-left-radius: @btn-border-radius-base; .border-top-radius(0); } } @@ -198,7 +195,6 @@ } - // Justified button groups // ---------------------- @@ -216,11 +212,33 @@ > .btn-group .btn { width: 100%; } + + > .btn-group .dropdown-menu { + left: auto; + } } // Checkbox and radio options -[data-toggle="buttons"] > .btn > input[type="radio"], -[data-toggle="buttons"] > .btn > input[type="checkbox"] { - display: none; +// +// 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`. +// 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. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } } diff --git a/less/bootstrap/buttons.less b/less/bootstrap/buttons.less index 4858a8a..9cbb8f4 100644 --- a/less/bootstrap/buttons.less +++ b/less/bootstrap/buttons.less @@ -12,19 +12,26 @@ font-weight: @btn-font-weight; text-align: center; 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; white-space: nowrap; - .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); + .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base); .user-select(none); - &:focus { - .tab-focus(); + &, + &:active, + &.active { + &:focus, + &.focus { + .tab-focus(); + } } &:hover, - &:focus { + &:focus, + &.focus { color: @btn-default-color; text-decoration: none; } @@ -39,11 +46,17 @@ &.disabled, &[disabled], fieldset[disabled] & { - cursor: not-allowed; - pointer-events: none; // Future-proof disabling of clicks + cursor: @cursor-disabled; .opacity(.65); .box-shadow(none); } + + a& { + &.disabled, + fieldset[disabled] & { + pointer-events: none; // Future-proof disabling of clicks on `` elements + } + } } @@ -81,11 +94,11 @@ .btn-link { color: @link-color; font-weight: normal; - cursor: pointer; border-radius: 0; &, &:active, + &.active, &[disabled], fieldset[disabled] & { background-color: transparent; @@ -100,7 +113,7 @@ &:hover, &:focus { color: @link-hover-color; - text-decoration: underline; + text-decoration: @link-hover-decoration; background-color: transparent; } &[disabled], @@ -119,14 +132,14 @@ .btn-lg { // line-height: ensure even-numbered height of button next to large input - .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); + .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large); } .btn-sm { // line-height: ensure proper height of button next to small input - .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); } .btn-xs { - .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small); + .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); } @@ -136,8 +149,6 @@ .btn-block { display: block; width: 100%; - padding-left: 0; - padding-right: 0; } // Vertically space out multiple block buttons diff --git a/less/bootstrap/carousel.less b/less/bootstrap/carousel.less index e53365d..87ed696 100644 --- a/less/bootstrap/carousel.less +++ b/less/bootstrap/carousel.less @@ -21,14 +21,40 @@ // Account for jankitude on images > img, > a > img { - .img-responsive(); + &:extend(.img-responsive); line-height: 1; } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-webkit-transform-3d) { + .transition-transform(~'0.6s ease-in-out'); + .backface-visibility(~'hidden'); + .perspective(1000px); + + &.next, + &.active.right { + .translate3d(100%, 0, 0); + left: 0; + } + &.prev, + &.active.left { + .translate3d(-100%, 0, 0); + left: 0; + } + &.next.left, + &.prev.right, + &.active { + .translate3d(0, 0, 0); + left: 0; + } + } } > .active, > .next, - > .prev { display: block; } + > .prev { + display: block; + } > .active { left: 0; @@ -91,7 +117,7 @@ // Hover/focus state &:hover, &:focus { - outline: none; + outline: 0; color: @carousel-control-color; text-decoration: none; .opacity(.9); @@ -104,26 +130,29 @@ .glyphicon-chevron-right { position: absolute; top: 50%; + margin-top: -10px; z-index: 5; display: inline-block; } .icon-prev, .glyphicon-chevron-left { left: 50%; + margin-left: -10px; } .icon-next, .glyphicon-chevron-right { right: 50%; + margin-right: -10px; } .icon-prev, .icon-next { width: 20px; height: 20px; - margin-top: -10px; - margin-left: -10px; + line-height: 1; font-family: serif; } + .icon-prev { &:before { content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) @@ -167,6 +196,7 @@ // 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. @@ -206,16 +236,23 @@ // Scale up the controls a smidge .carousel-control { - .glyphicons-chevron-left, - .glyphicons-chevron-right, + .glyphicon-chevron-left, + .glyphicon-chevron-right, .icon-prev, .icon-next { width: 30px; height: 30px; margin-top: -15px; - margin-left: -15px; font-size: 30px; } + .glyphicon-chevron-left, + .icon-prev { + margin-left: -15px; + } + .glyphicon-chevron-right, + .icon-next { + margin-right: -15px; + } } // Show and left align the captions diff --git a/less/bootstrap/close.less b/less/bootstrap/close.less index 9b4e74f..6d5bfe0 100644 --- a/less/bootstrap/close.less +++ b/less/bootstrap/close.less @@ -23,6 +23,7 @@ // 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& { padding: 0; cursor: pointer; diff --git a/less/bootstrap/code.less b/less/bootstrap/code.less index 3eed26c..a08b4d4 100644 --- a/less/bootstrap/code.less +++ b/less/bootstrap/code.less @@ -17,7 +17,6 @@ code { font-size: 90%; color: @code-color; background-color: @code-bg; - white-space: nowrap; border-radius: @border-radius-base; } @@ -29,6 +28,13 @@ kbd { background-color: @kbd-bg; border-radius: @border-radius-small; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + box-shadow: none; + } } // Blocks of code diff --git a/less/bootstrap/component-animations.less b/less/bootstrap/component-animations.less index 1efe45e..0bcee91 100644 --- a/less/bootstrap/component-animations.less +++ b/less/bootstrap/component-animations.less @@ -5,7 +5,7 @@ // Heads up! // // We don't use the `.opacity()` mixin here since it causes a bug with text -// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. .fade { opacity: 0; @@ -17,13 +17,17 @@ .collapse { display: none; - &.in { - display: block; - } + + &.in { display: block; } + tr&.in { display: table-row; } + tbody&.in { display: table-row-group; } } + .collapsing { position: relative; height: 0; overflow: hidden; - .transition(height .35s ease); + .transition-property(~"height, visibility"); + .transition-duration(.35s); + .transition-timing-function(ease); } diff --git a/less/bootstrap/dropdowns.less b/less/bootstrap/dropdowns.less index dde2038..f6876c1 100644 --- a/less/bootstrap/dropdowns.less +++ b/less/bootstrap/dropdowns.less @@ -10,12 +10,14 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: @caret-width-base solid; + border-top: @caret-width-base dashed; + border-top: @caret-width-base solid ~"\9"; // IE8 border-right: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent; } // The dropdown wrapper (div) +.dropup, .dropdown { position: relative; } @@ -38,6 +40,7 @@ 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) background-color: @dropdown-bg; border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; @@ -47,7 +50,7 @@ // Aligns the dropdown menu to right // - // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]` + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` &.pull-right { right: 0; left: auto; @@ -102,16 +105,15 @@ &:focus { color: @dropdown-link-disabled-color; } -} -// Nuke hover/focus effects -.dropdown-menu > .disabled > a { + + // Nuke hover/focus effects &:hover, &:focus { text-decoration: none; background-color: transparent; background-image: none; // Remove CSS gradient .reset-filter(); - cursor: not-allowed; + cursor: @cursor-disabled; } } @@ -154,6 +156,7 @@ font-size: @font-size-small; line-height: @line-height-base; color: @dropdown-header-color; + white-space: nowrap; // as with > li > a } // Backdrop to catch body clicks on mobile, etc. @@ -182,14 +185,15 @@ // Reverse the caret .caret { border-top: 0; - border-bottom: @caret-width-base solid; + border-bottom: @caret-width-base dashed; + border-bottom: @caret-width-base solid ~"\9"; // IE8 content: ""; } // Different positioning for bottom up menu .dropdown-menu { top: auto; bottom: 100%; - margin-bottom: 1px; + margin-bottom: 2px; } } @@ -210,4 +214,3 @@ } } } - diff --git a/less/bootstrap/forms.less b/less/bootstrap/forms.less index 6b475ae..b064ede 100644 --- a/less/bootstrap/forms.less +++ b/less/bootstrap/forms.less @@ -11,6 +11,10 @@ fieldset { 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 { @@ -27,12 +31,17 @@ legend { 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: bold; } // Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. // Override content-box in Normalize (* isn't specific enough) input[type="search"] { @@ -43,11 +52,10 @@ input[type="search"] { input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - margin-top: 1px \9; /* IE8-9 */ + margin-top: 1px \9; // IE8-9 line-height: normal; } -// Set the height of file controls to match text inputs input[type="file"] { display: block; } @@ -64,13 +72,6 @@ select[size] { height: auto; } -// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611 -select optgroup { - font-size: inherit; - font-style: inherit; - font-family: inherit; -} - // Focus for file, radio, and checkbox input[type="file"]:focus, input[type="radio"]:focus, @@ -78,16 +79,6 @@ input[type="checkbox"]:focus { .tab-focus(); } -// Fix for Chrome number input -// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button. -// See https://github.com/twbs/bootstrap/issues/8350 for more. -input[type="number"] { - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - height: auto; - } -} - // Adjust output element output { display: block; @@ -131,7 +122,7 @@ output { background-color: @input-bg; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid @input-border; - border-radius: @input-border-radius; + border-radius: @input-border-radius; // Note: This has no effect on s in CSS. .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); @@ -139,20 +130,23 @@ output { .form-control-focus(); // Placeholder - // - // Placeholder text gets special styles because when browsers invalidate entire - // lines if it doesn't understand a selector/ .placeholder(); // Disabled and read-only inputs - // Note: HTML5 says that controls under a fieldset > legend:first-child won't - // be disabled if the fieldset is disabled. Due to implementation difficulty, - // we don't honor that edge case; we style them as disabled anyway. + // + // HTML5 says that controls under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, we + // don't honor that edge case; we style them as disabled anyway. &[disabled], &[readonly], fieldset[disabled] & { - cursor: not-allowed; background-color: @input-bg-disabled; + opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 + } + + &[disabled], + fieldset[disabled] & { + cursor: @cursor-disabled; } // Reset height for `textarea`s @@ -161,12 +155,47 @@ output { } } -// Special styles for iOS date input + +// Search inputs in iOS // -// In Mobile Safari, date inputs require a pixel line-height that matches the -// given height of the input. -input[type="date"] { - line-height: @input-height-base; +// 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. + +input[type="search"] { + -webkit-appearance: none; +} + + +// Special styles for iOS temporal inputs +// +// In Mobile Safari, setting `display: block` on temporal inputs causes the +// text within the input to become vertically misaligned. As a workaround, we +// set a pixel line-height that matches the given height of the input, but only +// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 +// +// Note that as of 8.3, iOS doesn't support `datetime` or `week`. + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="month"] { + &.form-control { + line-height: @input-height-base; + } + + &.input-sm, + .input-group-sm & { + line-height: @input-height-small; + } + + &.input-lg, + .input-group-lg & { + line-height: @input-height-large; + } + } } @@ -176,7 +205,7 @@ input[type="date"] { // horizontal forms, use the predefined grid classes. .form-group { - margin-bottom: 15px; + margin-bottom: @form-group-margin-bottom; } @@ -186,13 +215,15 @@ input[type="date"] { .radio, .checkbox { + position: relative; display: block; - min-height: @line-height-computed; // clear the floating input if there is no label text margin-top: 10px; margin-bottom: 10px; - padding-left: 20px; + label { - display: inline; + min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text + padding-left: 20px; + margin-bottom: 0; font-weight: normal; cursor: pointer; } @@ -201,9 +232,11 @@ input[type="date"] { .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { - float: left; + position: absolute; margin-left: -20px; + margin-top: 4px \9; } + .radio + .radio, .checkbox + .checkbox { margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing @@ -212,6 +245,7 @@ input[type="date"] { // Radios and checkboxes on same line .radio-inline, .checkbox-inline { + position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; @@ -226,17 +260,54 @@ input[type="date"] { } // Apply same disabled cursor tweak as for inputs +// Some special care is needed because