Commit b2ebd5c4 authored by Mark Otto's avatar Mark Otto
Browse files

update button styles to use updated 14px base font size, align carets to...

update button styles to use updated 14px base font size, align carets to others with no opacity changes
parent 7fa99fb1
main cleanup-floating-forms cssvar-function dependabot/npm_and_yarn/stylelint-and-stylelint-config-twbs-bootstrap-15.3.0 extend-snippets feat/data-target floating-always-visible floating-labels-icons fod-main-banner form-controls-with-icons gh-pages gh-pages-530-alpha2 github/fork/719media/patch-13 github/fork/719media/patch-14 github/fork/719media/patch-9 github/fork/ChellyAhmed/fix-typo-reboot.md github/fork/ChellyAhmed/offcanvas-scroll-back github/fork/CtrlAltLilith/main github/fork/Elysiome/offcanvas-optional-window-resizing github/fork/JanSargsyan/main github/fork/LunicLynx/support-different-line-height-for-buttons github/fork/Psixodelik/main github/fork/Ronid1/ronid1/offcanvas_static_backdrop github/fork/RyanBerliner/tooltip-accessibility github/fork/SantiagoPVazquez/Feature-default-border-bottom-to-dropdown-item github/fork/Sir-Genius/utils github/fork/Sumit-Singh-8/main github/fork/Viktor-VERA2020/offcanvas-slide github/fork/Zivangu9/input-group-for-form-control-plaintext github/fork/alpadev/alpadev/call-dispose-on-component-reinstantiation github/fork/astagi/fix/tree-shake-modules github/fork/compnerd/dark-accordion-icon github/fork/derSascha/dropdown-dont-close-on-input-click github/fork/dev-ph1l/main github/fork/donquixote/issue-33861-utl-mixin github/fork/florianlacreuse/mixin-make-row-gutter-y github/fork/gregorw/main github/fork/iteggmbh/transitionend-dispose-race github/fork/jdelStrother/patch-1 github/fork/jonnysp/form-floating github/fork/jonnysp/independent-offcanvas github/fork/jonnysp/theme-dark-on-card-and-modal-fix github/fork/josefdlange/floating-label-placeholder-opacity github/fork/julien-deramond/enhance-change-version.js github/fork/julien-deramond/main-jd-fix-offset-content github/fork/julien-deramond/main-jd-issue-with-utitlies github/fork/julien-deramond/main-xmr-pa11y-ci-jd-add-hideElements github/fork/kyletsang/fix-tooltip-padding github/fork/lacutah/CheckboxCenteringDocumentation github/fork/lekoala/patch-3 github/fork/louismaximepiton/main-kld-lmp-collapse-proposal github/fork/louismaximepiton/main-lmp-card-inner-border-radius-fix github/fork/louismaximepiton/main-lmp-carousel-multiple-images github/fork/louismaximepiton/main-lmp-css-var-init github/fork/louismaximepiton/main-lmp-disabled-floating-label-fix github/fork/louismaximepiton/main-lmp-input-range-fix github/fork/louismaximepiton/main-lmp-shift-color github/fork/louismaximepiton/main-lmp-table-active-tr-fix github/fork/maciek-szn/switch github/fork/michael-roth/feature/19964-multiple-tab-targets github/fork/mistic100/dom-utils github/fork/nkdas91/accordion github/fork/nstungcom/fix-missing-modal-open-class github/fork/oraliahdz/animation-utilities github/fork/pine3ree/patch-7 github/fork/pouwerkerk/unindent-scss-docs-shortcode github/fork/smares/smares-no-scolling-on-modal-close github/fork/tgm-git/patch-1 gs-forms gs-toasts-with-animated-progress-bar gs/add-history-helper gs/change-version-dir-on-docs gs/data-must-set-onlu-one-instance gs/docs/fix-drop-down-error gs/event-handler-2 gs/make-docs-js-build gs/make-simple-attribute-toggler gs/popover-fix-doc gs/provide-steConfig-method gs/scrollspy-smoothscroll-option-use-browser-history gs/streamline-jqueryInterface gs/support-drop-down-in-navbar gs/test-js-generic-trigger gs/try-web-components gs/tweak-collapse-js-selector gs/use-event-handler-in-cocmponent gs/use-rollup-replace-for-version jo-docs-thanks-page jo-ssr-friendly logical-props-spacing-utils main-fod-disabled-form-check-label main-fod-nested-accordion main-fod-simpler-table-structure main-fod-table-separator main-fod-utilities-contrast main-jd-abbr-title main-jd-add-chips main-jd-add-doc-for-sass-custom-colors main-jd-add-enable-host-to-handle-web-components main-jd-browserstack-fine-tune main-jd-browserstack-updates main-jd-docs-consistent-usage-of-css-sections-step-2 main-jd-fix-docs-headers-in-white main-jd-fix-highlight-docs-border-radius main-jd-fix-placeholder-color-background-params-for-img-markup main-jd-glossary-experiment main-jd-postcss-drop-empty-css-vars main-jd-proto-doc-astro main-jd-skip-navigation-component main-jd-stackblitz-for-examples main-jd-upgrade-browserlistrc main-jd-use-host main-lmp-dark-theme-customization main-lmp-handle-scroll-target main-lmp-tab-fix main-mc-opensearch main-xmr-bundlewatch-action main-xmr-eslint-plugin-compat main-xmr-hugo-docs-vendor main-xmr-hugo-rm-ver main-xmr-linkinator-prod main-xmr-min-mangle main-xmr-pa11y-ci more-darkmode-examples nested-dropdowns patrickhlauke-issue37428 patrickhlauke-use-of-color-tweaks pr/34102 pr/37590 previous-next-docs-links sticky-thead utilities-functions-mixin v3-dev v4-dev v4-dev-dropdown-hide-method v530-dev v6-postcss-custom-media v6-spinner-dots v6/gs/use-floating-ui-in-place-of-popper xmr/dev xmr/docs-png xmr/docs-svgs xmr/hugo-reorg-files xmr/js-2 xmr/markdownlint xmr/prepare-530-alpha2 xmr/xo v5.3.0-alpha1 v5.2.3 v5.2.2 v5.2.1 v5.2.0 v5.2.0-beta1 v5.1.3 v5.1.2 v5.1.1 v5.1.0 v5.0.2 v5.0.1 v5.0.0 v5.0.0-beta3 v5.0.0-beta2 v5.0.0-beta1 v5.0.0-alpha3 v5.0.0-alpha2 v5.0.0-alpha1 v4.6.2 v4.6.1 v4.6.0 v4.5.3 v4.5.2 v4.5.1 v4.5.0 v4.4.1 v4.4.0 v4.3.1 v4.3.0 v4.2.1 v4.2.0 v4.1.3 v4.1.2 v4.1.1 v4.1.0 v4.0.0 v4.0.0-beta.3 v4.0.0-beta.2 v4.0.0-beta v4.0.0-alpha.6 v4.0.0-alpha.5 v4.0.0-alpha.4 v4.0.0-alpha.3 v4.0.0-alpha.2 v4.0.0-alpha v3.4.1 v3.4.0 v3.3.7 v3.3.6 v3.3.5 v3.3.4 v3.3.2 v3.3.1 v3.3.0 v3.2.0 v3.1.1 v3.1.0 v3.0.3 v3.0.2 v3.0.1 v3.0.0 v3.0.0-rc.2 v3.0.0-rc1 v2.3.2 v2.3.1 v2.3.0 v2.2.2 v2.2.1 v2.2.0 v2.1.1 v2.1.0
5 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible
Showing with 34 additions and 47 deletions
+34 -47
...@@ -2893,7 +2893,7 @@ button.close { ...@@ -2893,7 +2893,7 @@ button.close {
padding: 4px 14px; padding: 4px 14px;
margin-bottom: 0; margin-bottom: 0;
*margin-left: .3em; *margin-left: .3em;
font-size: 13px; font-size: 14px;
line-height: 20px; line-height: 20px;
*line-height: 20px; *line-height: 20px;
color: #333333; color: #333333;
...@@ -2909,11 +2909,11 @@ button.close { ...@@ -2909,11 +2909,11 @@ button.close {
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x; background-repeat: repeat-x;
border: 1px solid #cccccc; border: 1px solid #bbbbbb;
*border: 0; *border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3; border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
...@@ -3012,7 +3012,7 @@ button.close { ...@@ -3012,7 +3012,7 @@ button.close {
.btn-mini { .btn-mini {
padding: 2px 6px; padding: 2px 6px;
font-size: 12px; font-size: 11px;
line-height: 16px; line-height: 16px;
} }
...@@ -3324,10 +3324,13 @@ input[type="submit"].btn.btn-mini { ...@@ -3324,10 +3324,13 @@ input[type="submit"].btn.btn-mini {
.btn-group > .btn, .btn-group > .btn,
.btn-group > .dropdown-menu { .btn-group > .dropdown-menu {
font-size: 13px; font-size: 14px;
}
.btn-group > .btn-mini {
font-size: 11px;
} }
.btn-group > .btn-mini,
.btn-group > .btn-small { .btn-group > .btn-small {
font-size: 12px; font-size: 12px;
} }
...@@ -3388,7 +3391,7 @@ input[type="submit"].btn.btn-mini { ...@@ -3388,7 +3391,7 @@ input[type="submit"].btn.btn-mini {
outline: 0; outline: 0;
} }
.btn-group > .dropdown-toggle { .btn-group > .btn + .dropdown-toggle {
*padding-top: 4px; *padding-top: 4px;
padding-right: 8px; padding-right: 8px;
*padding-bottom: 4px; *padding-bottom: 4px;
...@@ -3398,17 +3401,17 @@ input[type="submit"].btn.btn-mini { ...@@ -3398,17 +3401,17 @@ input[type="submit"].btn.btn-mini {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
} }
.btn-group > .btn-mini.dropdown-toggle { .btn-group > .btn-mini + .dropdown-toggle {
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
} }
.btn-group > .btn-small.dropdown-toggle { .btn-group > .btn-small + .dropdown-toggle {
*padding-top: 4px; *padding-top: 4px;
*padding-bottom: 4px; *padding-bottom: 4px;
} }
.btn-group > .btn-large.dropdown-toggle { .btn-group > .btn-large + .dropdown-toggle {
padding-right: 12px; padding-right: 12px;
padding-left: 12px; padding-left: 12px;
} }
...@@ -3449,26 +3452,17 @@ input[type="submit"].btn.btn-mini { ...@@ -3449,26 +3452,17 @@ input[type="submit"].btn.btn-mini {
} }
.btn .caret { .btn .caret {
margin-top: 7px; margin-top: 8px;
margin-left: 0; margin-left: 0;
} }
.btn:hover .caret, .btn-mini .caret,
.open.btn-group .caret { .btn-small .caret,
opacity: 1; .btn-large .caret {
filter: alpha(opacity=100);
}
.btn-mini .caret {
margin-top: 5px;
}
.btn-small .caret {
margin-top: 6px; margin-top: 6px;
} }
.btn-large .caret { .btn-large .caret {
margin-top: 6px;
border-top-width: 5px; border-top-width: 5px;
border-right-width: 5px; border-right-width: 5px;
border-left-width: 5px; border-left-width: 5px;
...@@ -3487,8 +3481,6 @@ input[type="submit"].btn.btn-mini { ...@@ -3487,8 +3481,6 @@ input[type="submit"].btn.btn-mini {
.btn-inverse .caret { .btn-inverse .caret {
border-top-color: #ffffff; border-top-color: #ffffff;
border-bottom-color: #ffffff; border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
} }
.btn-group-vertical { .btn-group-vertical {
......
...@@ -34,11 +34,13 @@ ...@@ -34,11 +34,13 @@
} }
.btn-group > .btn, .btn-group > .btn,
.btn-group > .dropdown-menu { .btn-group > .dropdown-menu {
font-size: 13px; // redeclare as part 2 of font-size inline-block hack font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
} }
// Reset fonts for other sizes // Reset fonts for other sizes
.btn-group > .btn-mini, .btn-group > .btn-mini {
font-size: 11px;
}
.btn-group > .btn-small { .btn-group > .btn-small {
font-size: 12px; font-size: 12px;
} }
...@@ -106,22 +108,22 @@ ...@@ -106,22 +108,22 @@
// ---------------------- // ----------------------
// Give the line between buttons some depth // Give the line between buttons some depth
.btn-group > .dropdown-toggle { .btn-group > .btn + .dropdown-toggle {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
*padding-top: 4px; *padding-top: 4px;
*padding-bottom: 4px; *padding-bottom: 4px;
} }
.btn-group > .btn-mini.dropdown-toggle { .btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.btn-group > .btn-small.dropdown-toggle { .btn-group > .btn-small + .dropdown-toggle {
*padding-top: 4px; *padding-top: 4px;
*padding-bottom: 4px; *padding-bottom: 4px;
} }
.btn-group > .btn-large.dropdown-toggle { .btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
...@@ -162,22 +164,16 @@ ...@@ -162,22 +164,16 @@
// Reposition the caret // Reposition the caret
.btn .caret { .btn .caret {
margin-top: 7px; margin-top: 8px;
margin-left: 0; margin-left: 0;
} }
.btn:hover .caret,
.open.btn-group .caret {
.opacity(100);
}
// Carets in other button sizes // Carets in other button sizes
.btn-mini .caret { .btn-mini .caret,
margin-top: 5px; .btn-small .caret,
} .btn-large .caret {
.btn-small .caret {
margin-top: 6px; margin-top: 6px;
} }
.btn-large .caret { .btn-large .caret {
margin-top: 6px;
border-left-width: 5px; border-left-width: 5px;
border-right-width: 5px; border-right-width: 5px;
border-top-width: 5px; border-top-width: 5px;
...@@ -200,7 +196,6 @@ ...@@ -200,7 +196,6 @@
.caret { .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white; border-bottom-color: @white;
.opacity(75);
} }
} }
......
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
.ie7-inline-block(); .ie7-inline-block();
padding: 4px 14px; padding: 4px 14px;
margin-bottom: 0; // For input.btn margin-bottom: 0; // For input.btn
font-size: 13px; font-size: @baseFontSize;
line-height: 20px; line-height: @baseLineHeight;
*line-height: 20px; *line-height: @baseLineHeight;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
// Mini // Mini
.btn-mini { .btn-mini {
padding: 2px 6px; padding: 2px 6px;
font-size: @baseFontSize - 2px; font-size: @baseFontSize - 3px;
line-height: @baseLineHeight - 4px; line-height: @baseLineHeight - 4px;
} }
......
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
// ------------------------- // -------------------------
@btnBackground: @white; @btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%); @btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #ccc; @btnBorder: #bbb;
@btnPrimaryBackground: @linkColor; @btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment