UNPKG

fomantic-ui

Version:

Fomantic empowers designers and developers by creating a shared vocabulary for UI.

2,316 lines (1,885 loc) • 2.03 MB
/* * # Fomantic UI - 2.9.4 * https://github.com/fomantic/Fomantic-UI * https://fomantic-ui.com/ * * Copyright 2025 Contributors * Released under the MIT license * https://opensource.org/licenses/MIT * */ /*! * # Fomantic-UI 2.9.4 - Reset * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Reset *******************************/ /* Border-Box */ *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } /* iPad Input Shadows */ input[type="text"], input[type="email"], input[type="search"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; /* mobile firefox too! */ } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; /* 1 */ } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; /* 1 */ } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI 2.9.4 - Site * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Page *******************************/ @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/LatoLatin-Regular.woff2") format("woff2") , url("./themes/default/assets/fonts/LatoLatin-Regular.woff") format("woff"); font-style: normal; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/LatoLatin-Bold.woff2") format("woff2") , url("./themes/default/assets/fonts/LatoLatin-Bold.woff") format("woff"); font-style: normal; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/LatoLatin-Italic.woff2") format("woff2") , url("./themes/default/assets/fonts/LatoLatin-Italic.woff") format("woff"); font-style: italic; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/LatoLatin-BoldItalic.woff2") format("woff2") , url("./themes/default/assets/fonts/LatoLatin-BoldItalic.woff") format("woff"); font-style: italic; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/Lato-Regular.woff2") format("woff2") , url("./themes/default/assets/fonts/Lato-Regular.woff") format("woff"); font-style: normal; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/Lato-Bold.woff2") format("woff2") , url("./themes/default/assets/fonts/Lato-Bold.woff") format("woff"); font-style: normal; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/Lato-Italic.woff2") format("woff2") , url("./themes/default/assets/fonts/Lato-Italic.woff") format("woff"); font-style: italic; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } @font-face { font-family: "Lato"; src: url("./themes/default/assets/fonts/Lato-BoldItalic.woff2") format("woff2") , url("./themes/default/assets/fonts/Lato-BoldItalic.woff") format("woff"); font-style: italic; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } html, body { height: 100%; } html { font-size: 14px; } body { margin: 0; padding: 0; overflow-x: hidden; min-width: 320px; background: #fff; font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; line-height: 1.4285em; color: rgba(0, 0, 0, 0.87); } /******************************* Headers *******************************/ h1, h2, h3, h4, h5 { font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.28571429em; margin: calc(2rem - 0.1428571428571429em) 0 1rem; font-weight: bold; padding: 0; } h1 { min-height: 1rem; font-size: 2rem; } h2 { font-size: 1.71428571rem; } h3 { font-size: 1.28571429rem; } h4 { font-size: 1.07142857rem; } h5 { font-size: 1rem; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top: 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child { margin-bottom: 0; } /******************************* Text *******************************/ p { margin: 0 0 1em; line-height: 1.4285em; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } /* ------------------- Links -------------------- */ a { color: #4183c4; text-decoration: none; } a:hover { color: #1e70bf; text-decoration: none; } /******************************* Scrollbars *******************************/ /* Force Simple Scrollbars */ body ::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 10px; } body ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0; } body ::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 5px; background: rgba(0, 0, 0, 0.25); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } body ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.15); } body ::-webkit-scrollbar-thumb:hover { background: rgba(128, 135, 139, 0.8); } body .ui { /* IE11 */ scrollbar-face-color: #bfbfbf; scrollbar-shadow-color: #bfbfbf; scrollbar-track-color: #e6e6e6; scrollbar-arrow-color: #e6e6e6; } @supports (-moz-appearance: none) { body .ui { /* firefox: first color thumb, second track */ scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1); scrollbar-width: thin; } } /* Inverted UI */ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } body .ui.inverted:not(.dimmer) { /* IE11 */ scrollbar-face-color: #656565; scrollbar-shadow-color: #656565; scrollbar-track-color: #323232; scrollbar-arrow-color: #323232; } @supports (-moz-appearance: none) { body .ui.inverted:not(.dimmer) { /* firefox: first color thumb, second track */ scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1); } } /******************************* Highlighting *******************************/ /* Site */ ::selection { background-color: #cce2ff; color: rgba(0, 0, 0, 0.87); } /* Form */ textarea::selection, input::selection { background-color: rgba(100, 100, 100, 0.4); color: rgba(0, 0, 0, 0.87); } /******************************* Global Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI 2.9.4 - Button * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Button *******************************/ .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: baseline; background: #e0e1e2 none; color: rgba(0, 0, 0, 0.6); font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin: 0 0.25em 0 0; padding: 0.78571429em 1.5em 0.78571429em; text-transform: none; text-shadow: none; font-weight: bold; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: 0.28571429rem; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -webkit-user-select: none; -ms-user-select: none; user-select: none; transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; will-change: auto; -webkit-tap-highlight-color: transparent; } /******************************* States *******************************/ /* -------------- Hover --------------- */ .ui.button:hover { background-color: #cacbcd; background-image: none; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; color: rgba(0, 0, 0, 0.8); } .ui.button:hover .icon { opacity: 0.85; } /* -------------- Focus --------------- */ .ui.button:focus { background-color: #cacbcd; color: rgba(0, 0, 0, 0.8); background-image: none; box-shadow: ""; } .ui.button:focus .icon { opacity: 0.85; } /* -------------- Down --------------- */ .ui.button:active, .ui.active.button:active { background-color: #babbbc; background-image: ""; color: rgba(0, 0, 0, 0.9); box-shadow: none; } /* -------------- Active --------------- */ .ui.active.button { background-color: #c0c1c2; background-image: none; box-shadow: 0 0 0 1px transparent inset; color: rgba(0, 0, 0, 0.95); } .ui.active.button:hover { background-color: #c0c1c2; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.button:active { background-color: #c0c1c2; background-image: none; } /* -------------- Loading --------------- */ /* Specificity hack */ .ui.ui.ui.ui.ui.ui.loading.button { position: relative; cursor: default; text-shadow: none !important; color: transparent; opacity: 1; pointer-events: auto; transition: all 0s linear, opacity 0.1s ease; } .ui.loading.button::before { position: absolute; content: ""; top: 50%; left: 50%; margin: -0.64285714em 0 0 -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.15); } .ui.loading.button::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -0.64285714em 0 0 -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; animation: loader 0.6s infinite linear; border: 0.2em solid currentColor; color: #fff; box-shadow: 0 0 0 1px transparent; } .ui.ui.ui.loading.button .label { background-color: transparent; border-color: transparent; color: transparent; } .ui.labeled.icon.loading.button .icon { background-color: transparent; box-shadow: none; } .ui.basic.loading.button:not(.inverted)::before { border-color: rgba(0, 0, 0, 0.1); } .ui.basic.loading.button:not(.inverted)::after { border-color: #767676; } /* ------------------- Disabled -------------------- */ .ui.buttons .disabled.button:not(.basic), .ui.disabled.button, .ui.button:disabled, .ui.disabled.button:hover, .ui.disabled.active.button { cursor: default; opacity: 0.45 !important; background-image: none; box-shadow: none; pointer-events: none !important; } /* Basic Group With Disabled */ .ui.basic.buttons .ui.disabled.button { border-color: rgba(34, 36, 38, 0.5); } /******************************* Types *******************************/ /* ------------------- Animated -------------------- */ .ui.animated.button { position: relative; overflow: hidden; padding-right: 0 !important; vertical-align: middle; z-index: 1; } .ui.animated.button .content { will-change: transform, opacity; } .ui.animated.button .visible.content { position: relative; margin-right: 1.5em; } .ui.animated.button .hidden.content { position: absolute; width: 100%; } /* Horizontal */ .ui.animated.button .visible.content, .ui.animated.button .hidden.content { transition: right 0.3s ease 0s; } .ui.animated.button .visible.content { left: auto; right: 0; } .ui.animated.button .hidden.content { top: 50%; left: auto; right: -100%; margin-top: -0.5em; } .ui.animated.button:focus .visible.content, .ui.animated.button:hover .visible.content { left: auto; right: 200%; } .ui.animated.button:focus .hidden.content, .ui.animated.button:hover .hidden.content { left: auto; right: 0; } /* Vertical */ .ui.vertical.animated.button .visible.content, .ui.vertical.animated.button .hidden.content { transition: top 0.3s ease, transform 0.3s ease; } .ui.vertical.animated.button .visible.content { transform: translateY(0); right: auto; } .ui.vertical.animated.button .hidden.content { top: -50%; left: 0; right: auto; } .ui.vertical.animated.button:focus .visible.content, .ui.vertical.animated.button:hover .visible.content { transform: translateY(200%); right: auto; } .ui.vertical.animated.button:focus .hidden.content, .ui.vertical.animated.button:hover .hidden.content { top: 50%; right: auto; } /* Fade */ .ui.fade.animated.button .visible.content, .ui.fade.animated.button .hidden.content { transition: opacity 0.3s ease, transform 0.3s ease; } .ui.fade.animated.button .visible.content { left: auto; right: auto; opacity: 1; transform: scale(1); } .ui.fade.animated.button .hidden.content { opacity: 0; left: 0; right: auto; transform: scale(1.5); } .ui.fade.animated.button:focus .visible.content, .ui.fade.animated.button:hover .visible.content { left: auto; right: auto; opacity: 0; transform: scale(0.75); } .ui.fade.animated.button:focus .hidden.content, .ui.fade.animated.button:hover .hidden.content { left: 0; right: auto; opacity: 1; transform: scale(1); } /* ------------------- Inverted -------------------- */ .ui.inverted.button { box-shadow: 0 0 0 2px #fff inset; background: transparent none; color: #fff; text-shadow: none !important; } /* Group */ .ui.inverted.buttons .button { margin: 0 0 0 -2px; } .ui.inverted.buttons .button:first-child { margin-left: 0; } .ui.inverted.vertical.buttons .button { margin: 0 0 -2px 0; } .ui.inverted.vertical.buttons .button:first-child { margin-top: 0; } /* States */ /* Hover */ .ui.inverted.button:hover { background: #fff; box-shadow: 0 0 0 2px #fff inset; color: rgba(0, 0, 0, 0.8); } /* Active / Focus */ .ui.inverted.button:focus, .ui.inverted.button.active { background: #fff; box-shadow: 0 0 0 2px #fff inset; color: rgba(0, 0, 0, 0.8); } /* Active Focus */ .ui.inverted.button.active:focus { background: #dcddde; box-shadow: 0 0 0 2px #dcddde inset; color: rgba(0, 0, 0, 0.8); } /* ------------------- Labeled Button -------------------- */ .ui.labeled.button:not(.icon) { display: inline-flex; flex-direction: row; background: none; padding: 0 !important; border: none; box-shadow: none; } .ui.labeled.button > .button { margin: 0; } .ui.labeled.button > .label { display: flex; align-items: center; margin: 0 0 0 -1px !important; font-size: 1em; padding: ""; border-color: rgba(34, 36, 38, 0.15); } /* Tag */ .ui.labeled.button > .tag.label::before { width: 1.85em; height: 1.85em; } /* Right */ .ui.labeled.button:not([class*="left labeled"]) > .button { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ui.labeled.button:not([class*="left labeled"]) > .label { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Left Side */ .ui[class*="left labeled"].button > .button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ui[class*="left labeled"].button > .label { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ------------------- Social -------------------- */ /* Facebook */ .ui.facebook.button { background-color: #3b5998; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.facebook.button:hover { background-color: #304d8a; color: #fff; text-shadow: none; } .ui.facebook.button:active { background-color: #2d4373; color: #fff; text-shadow: none; } /* Twitter */ .ui.twitter.button { background-color: #1da1f2; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.twitter.button:hover { background-color: #0298f3; color: #fff; text-shadow: none; } .ui.twitter.button:active { background-color: #0c85d0; color: #fff; text-shadow: none; } /* Google Plus */ .ui.google.plus.button { background-color: #dd4b39; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.google.plus.button:hover { background-color: #e0321c; color: #fff; text-shadow: none; } .ui.google.plus.button:active { background-color: #c23321; color: #fff; text-shadow: none; } /* Linked In */ .ui.linkedin.button { background-color: #0077b5; color: #fff; text-shadow: none; } .ui.linkedin.button:hover { background-color: #00669c; color: #fff; text-shadow: none; } .ui.linkedin.button:active { background-color: #005582; color: #fff; text-shadow: none; } /* YouTube */ .ui.youtube.button { background-color: #f00; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.youtube.button:hover { background-color: #e60000; color: #fff; text-shadow: none; } .ui.youtube.button:active { background-color: #cc0000; color: #fff; text-shadow: none; } /* Instagram */ .ui.instagram.button { background-color: #49769c; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.instagram.button:hover { background-color: #3d698e; color: #fff; text-shadow: none; } .ui.instagram.button:active { background-color: #395c79; color: #fff; text-shadow: none; } /* Pinterest */ .ui.pinterest.button { background-color: #bd081c; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.pinterest.button:hover { background-color: #ac0013; color: #fff; text-shadow: none; } .ui.pinterest.button:active { background-color: #8c0615; color: #fff; text-shadow: none; } /* VK */ .ui.vk.button { background-color: #45668e; color: #fff; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.vk.button:hover { background-color: #395980; color: #fff; } .ui.vk.button:active { background-color: #344d6c; color: #fff; } /* WhatsApp */ .ui.whatsapp.button { background-color: #25d366; color: #fff; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.whatsapp.button:hover { background-color: #19c55a; color: #fff; } .ui.whatsapp.button:active { background-color: #1da851; color: #fff; } /* Telegram */ .ui.telegram.button { background-color: #08c; color: #fff; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.telegram.button:hover { background-color: #0077b3; color: #fff; } .ui.telegram.button:active { background-color: #006699; color: #fff; } /* -------------- Icon --------------- */ .ui.button > .icon:not(.button) { height: auto; opacity: 0.8; transition: opacity 0.1s ease; color: ""; } .ui.button:not(.icon) > .icon:not(.button):not(.dropdown), .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { margin: 0 0.42857143em 0 -0.21428571em; vertical-align: baseline; } .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { vertical-align: baseline; } .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { margin: 0 -0.21428571em 0 0.42857143em; } /******************************* Variations *******************************/ /* -------------- Stackable --------------- */ /* Tablet Or Below */ @media only screen and (max-width: 767.98px) { .ui.stackable.buttons { flex-direction: column; width: 100%; } .ui.stackable.buttons .button:first-child { border-bottom-left-radius: 0; border-top-right-radius: 0.28571429rem; } .ui.stackable.buttons .button:last-child { border-bottom-left-radius: 0.28571429rem; border-top-right-radius: 0; } .ui.stackable.buttons .button:only-child { border-radius: 0.28571429rem; } } /* ------------------- Floated -------------------- */ .ui[class*="left floated"].buttons, .ui[class*="left floated"].button { float: left; margin-left: 0; margin-right: 0.25em; } .ui[class*="right floated"].buttons, .ui[class*="right floated"].button { float: right; margin-right: 0; margin-left: 0.25em; } /* ------------------- Compact -------------------- */ .ui.compact.buttons .button, .ui.compact.button { padding: 0.58928571em 1.125em 0.58928571em; } .ui.compact.icon.buttons .button, .ui.compact.icon.button { padding: 0.58928571em 0.58928571em 0.58928571em; } .ui.compact.labeled.icon.buttons .button, .ui.compact.labeled.icon.button { padding: 0.58928571em 3.69642857em 0.58928571em; } .ui.compact.labeled.icon.buttons .button > .icon, .ui.compact.labeled.icon.button > .icon { padding: 0.58928571em 0; } /* ------------------- Sizes -------------------- */ .ui.buttons .button, .ui.buttons .or, .ui.button { font-size: 1rem; } .ui.mini.buttons .dropdown, .ui.mini.buttons .dropdown .menu > .item, .ui.mini.buttons .button, .ui.mini.buttons .or, .ui.ui.ui.ui.mini.button { font-size: 0.78571429rem; } .ui.tiny.buttons .dropdown, .ui.tiny.buttons .dropdown .menu > .item, .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.ui.ui.ui.tiny.button { font-size: 0.85714286rem; } .ui.small.buttons .dropdown, .ui.small.buttons .dropdown .menu > .item, .ui.small.buttons .button, .ui.small.buttons .or, .ui.ui.ui.ui.small.button { font-size: 0.92857143rem; } .ui.large.buttons .dropdown, .ui.large.buttons .dropdown .menu > .item, .ui.large.buttons .button, .ui.large.buttons .or, .ui.ui.ui.ui.large.button { font-size: 1.14285714rem; } .ui.big.buttons .dropdown, .ui.big.buttons .dropdown .menu > .item, .ui.big.buttons .button, .ui.big.buttons .or, .ui.ui.ui.ui.big.button { font-size: 1.28571429rem; } .ui.huge.buttons .dropdown, .ui.huge.buttons .dropdown .menu > .item, .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.ui.ui.ui.huge.button { font-size: 1.42857143rem; } .ui.massive.buttons .dropdown, .ui.massive.buttons .dropdown .menu > .item, .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.ui.ui.ui.massive.button { font-size: 1.71428571rem; } /* -------------- Icon Only --------------- */ .ui.icon.buttons .button, .ui.icon.button:not(.animated):not(.compact):not(.labeled) { padding: 0.78571429em 0.78571429em 0.78571429em; } .ui.animated.icon.button > .content > .icon, .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { opacity: 0.9; margin: 0 !important; vertical-align: top; } .ui.animated.button > .content > .icon { vertical-align: top; } /* ------------------- Basic -------------------- */ .ui.basic.buttons .button, .ui.basic.button { background: transparent none; color: rgba(0, 0, 0, 0.6); font-weight: normal; border-radius: 0.28571429rem; text-transform: none; text-shadow: none !important; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons { box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; border-right: none; } .ui.basic.buttons .button { border-radius: 0; } .ui.basic.buttons .button:hover, .ui.basic.button:hover { background: #fff; color: rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:focus, .ui.basic.button:focus { background: #fff; color: rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:active, .ui.basic.button:active { background: #f8f8f8; color: rgba(0, 0, 0, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .active.button, .ui.basic.active.button { background: rgba(0, 0, 0, 0.05); box-shadow: ""; color: rgba(0, 0, 0, 0.95); } .ui.basic.buttons .active.button:hover, .ui.basic.active.button:hover { background-color: rgba(0, 0, 0, 0.05); } .ui.basic.buttons .button:hover { box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .active.button { box-shadow: ""; } /* Standard Basic Inverted */ .ui.basic.inverted.buttons .button, .ui.basic.inverted.button { background-color: transparent; color: #f9fafb; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; } .ui.basic.inverted.buttons .button:hover, .ui.basic.inverted.button:hover { color: #fff; box-shadow: 0 0 0 2px #ffffff inset; } .ui.basic.inverted.buttons .button:focus, .ui.basic.inverted.button:focus { color: #fff; box-shadow: 0 0 0 2px #ffffff inset; } .ui.basic.inverted.buttons .button:active, .ui.basic.inverted.button:active { background-color: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset; } .ui.basic.inverted.buttons .active.button, .ui.basic.inverted.active.button { background-color: rgba(255, 255, 255, 0.08); color: #fff; text-shadow: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset; } .ui.basic.inverted.buttons .active.button:hover, .ui.basic.inverted.active.button:hover { background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 2px #ffffff inset; } /* Basic Group */ .ui.basic.buttons:not(.inverted) .button:not(.basic) { border-right: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.vertical.buttons .button { border-left: none; border-left-width: 0; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.basic.vertical.buttons:not(.spaced):not(.circular) .button:first-child { border-top: none; } /* ------------------- Tertiary -------------------- */ /* Overline Mixin */ .ui.tertiary.button { transition: color 0.1s ease !important; border-radius: 0; margin: 0.28571429em 0.25em 0.28571429em 0 !important; padding: 0.5em 0.5em !important; box-shadow: none; color: rgba(0, 0, 0, 0.6); background: none; } .ui.tertiary.button:hover { box-shadow: inset 0 -0.2em 0 #666666; color: #333333; background: none; } .ui.tertiary.button:focus { box-shadow: inset 0 -0.2em 0 #666666; color: #333333; background: none; } .ui.tertiary.button:active { box-shadow: inset 0 -0.2em 0 #999999; border-radius: 0.28571429rem 0.28571429rem 0 0; color: #666666; background: none; } /* -------------- Labeled Icon --------------- */ .ui.labeled.icon.buttons .button, .ui.labeled.icon.button { position: relative; padding-left: 4.07142857em !important; padding-right: 1.5em !important; } /* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { position: absolute; top: 0; left: 0; height: 100%; line-height: 1; border-radius: 0; border-top-left-radius: inherit; border-bottom-left-radius: inherit; text-align: center; animation: none; padding: 0.78571429em 0; margin: 0; width: 2.57142857em; background-color: rgba(0, 0, 0, 0.05); color: ""; box-shadow: -1px 0 0 0 transparent inset; } /* Right Labeled */ .ui[class*="right labeled"].icon.button { padding-right: 4.07142857em !important; padding-left: 1.5em !important; } .ui[class*="right labeled"].icon.button > .icon { left: auto; right: 0; border-radius: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; box-shadow: 1px 0 0 0 transparent inset; } .ui.labeled.icon.buttons > .button > .icon::before, .ui.labeled.icon.button > .icon::before, .ui.labeled.icon.buttons > .button > .icon::after, .ui.labeled.icon.button > .icon::after { display: block; position: relative; width: 100%; top: 0; text-align: center; } .ui.labeled.icon.buttons .button > .icon { border-radius: 0; } .ui.labeled.icon.buttons .button:first-child > .icon { border-top-left-radius: 0.28571429rem; border-bottom-left-radius: 0.28571429rem; } .ui.labeled.icon.buttons .button:last-child > .icon { border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } .ui.vertical.labeled.icon.buttons .button:first-child > .icon { border-radius: 0; border-top-left-radius: 0.28571429rem; } .ui.vertical.labeled.icon.buttons .button:last-child > .icon { border-radius: 0; border-bottom-left-radius: 0.28571429rem; } /* Loading Icon in Labeled Button */ .ui.labeled.icon.button > .loading.icon::before { animation: loader 2s linear infinite; } /* -------------- Toggle --------------- */ /* Toggle (Modifies active state to give affordances) */ .ui.toggle.buttons .active.button, .ui.buttons .button.toggle.active, .ui.button.toggle.active { background-color: #21ba45; box-shadow: none; text-shadow: none; color: #fff; } .ui.button.toggle.active:hover { background-color: #16ab39; text-shadow: none; color: #fff; } /* -------------- Circular --------------- */ .ui.ui.circular.buttons .button, .ui.ui.ui.ui.circular.button { border-radius: 10em; min-width: 2.5em; } .ui.circular.buttons .button > .icon, .ui.circular.button > .icon { width: 1em; vertical-align: baseline; } .ui.circular.buttons:not(.vertical):not(.spaced) .button { margin-right: 0.25em; } .ui.vertical.circular.buttons .button { margin-bottom: 0.25em; } .ui.circular.basic.buttons { border: none; } .ui.circular.basic.buttons .button { border: 1px solid rgba(34, 36, 38, 0.15); } .ui.circular.basic.buttons .button.basic { border: none; } /* ------------------- Or Buttons -------------------- */ .ui.buttons .or { position: relative; width: 0.3em; height: 2.57142857em; z-index: 3; } .ui.buttons .or::before { position: absolute; text-align: center; border-radius: 500rem; content: "or"; top: 50%; left: 50%; background-color: #fff; text-shadow: none; margin-top: -0.89285714em; margin-left: -0.89285714em; width: 1.78571429em; height: 1.78571429em; line-height: 1.78571429em; color: rgba(0, 0, 0, 0.4); font-style: normal; font-weight: bold; box-shadow: 0 0 0 1px transparent inset; } .ui.buttons .or[data-text]::before { content: attr(data-text); } /* Fluid Or */ .ui.fluid.buttons .or { width: 0 !important; } .ui.fluid.buttons .or::after { display: none; } /* ------------------- Attached -------------------- */ /* Singular */ .ui.attached.button { position: relative; display: block; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15); } /* Top / Bottom */ .ui.attached.top.button { border-radius: 0.28571429rem 0.28571429rem 0 0; } .ui.attached.bottom.button { border-radius: 0 0 0.28571429rem 0.28571429rem; } /* Left / Right */ .ui.left.attached.button { display: inline-block; border-left: none; text-align: right; padding-right: 0.75em; border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui.right.attached.button { display: inline-block; text-align: left; padding-left: 0.75em; border-radius: 0 0.28571429rem 0.28571429rem 0; } /* Plural */ .ui.attached.buttons { position: relative; display: flex; border-radius: 0; width: auto !important; z-index: auto; margin-left: -1px; margin-right: -1px; } .ui.attached.buttons .button { margin: 0; } .ui.attached.buttons .button:first-child { border-radius: 0; } .ui.attached.buttons .button:last-child { border-radius: 0; } /* Top / Bottom */ .ui[class*="top attached"].buttons { margin-bottom: 0; border-radius: 0.28571429rem 0.28571429rem 0 0; } .ui[class*="top attached"].buttons .button:first-child { border-radius: 0.28571429rem 0 0 0; } .ui[class*="top attached"].buttons .button:last-child { border-radius: 0 0.28571429rem 0 0; } .ui[class*="bottom attached"].buttons { margin-top: -1px; border-radius: 0 0 0.28571429rem 0.28571429rem; } .ui[class*="bottom attached"].buttons .button:first-child { border-radius: 0 0 0 0.28571429rem; } .ui[class*="bottom attached"].buttons .button:last-child { border-radius: 0 0 0.28571429rem 0; } /* Left / Right */ .ui[class*="left attached"].buttons { display: inline-flex; margin-right: 0; margin-left: -1px; border-radius: 0 0.28571429rem 0.28571429rem 0; } .ui[class*="left attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0 0.28571429rem 0 0; } .ui[class*="left attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0 0 0.28571429rem 0; } .ui[class*="right attached"].buttons { display: inline-flex; margin-left: 0; margin-right: -1px; border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui[class*="right attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0.28571429rem 0 0 0; } .ui[class*="right attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0 0 0 0.28571429rem; } /* ------------------- Fluid -------------------- */ .ui.fluid.buttons, .ui.fluid.button { width: 100%; } .ui.fluid.button { display: block; } .ui.two.buttons { width: 100%; } .ui.two.buttons > .button { width: 50%; } .ui.three.buttons { width: 100%; } .ui.three.buttons > .button { width: 33.333%; } .ui.four.buttons { width: 100%; } .ui.four.buttons > .button { width: 25%; } .ui.five.buttons { width: 100%; } .ui.five.buttons > .button { width: 20%; } .ui.six.buttons { width: 100%; } .ui.six.buttons > .button { width: 16.666%; } .ui.seven.buttons { width: 100%; } .ui.seven.buttons > .button { width: 14.285%; } .ui.eight.buttons { width: 100%; } .ui.eight.buttons > .button { width: 12.5%; } .ui.nine.buttons { width: 100%; } .ui.nine.buttons > .button { width: 11.11%; } .ui.ten.buttons { width: 100%; } .ui.ten.buttons > .button { width: 10%; } .ui.eleven.buttons { width: 100%; } .ui.eleven.buttons > .button { width: 9.09%; } .ui.twelve.buttons { width: 100%; } .ui.twelve.buttons > .button { width: 8.3333%; } /* Fluid Vertical Buttons */ .ui.fluid.vertical.buttons, .ui.fluid.vertical.buttons > .button { display: flex; width: auto; justify-content: center; } .ui.two.vertical.buttons > .button { height: 50%; } .ui.three.vertical.buttons > .button { height: 33.333%; } .ui.four.vertical.buttons > .button { height: 25%; } .ui.five.vertical.buttons > .button { height: 20%; } .ui.six.vertical.buttons > .button { height: 16.666%; } .ui.seven.vertical.buttons > .button { height: 14.285%; } .ui.eight.vertical.buttons > .button { height: 12.5%; } .ui.nine.vertical.buttons > .button { height: 11.11%; } .ui.ten.vertical.buttons > .button { height: 10%; } .ui.eleven.vertical.buttons > .button { height: 9.09%; } .ui.twelve.vertical.buttons > .button { height: 8.3333%; } /* ------------------- Colors -------------------- */ .ui.primary.buttons .button, .ui.primary.button { background-color: #2185d0; color: #fff; text-shadow: none; background-image: none; } .ui.primary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { background-color: #1678c2; color: #fff; text-shadow: none; } .ui.primary.buttons .button:focus, .ui.primary.button:focus { background-color: #0d71bb; color: #fff; text-shadow: none; } .ui.primary.buttons .button:active, .ui.primary.button:active { background-color: #1a69a4; color: #fff; text-shadow: none; } .ui.primary.buttons .active.button, .ui.primary.buttons .active.button:active, .ui.primary.active.button, .ui.primary.button .active.button:active { background-color: #1279c6; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.primary.buttons .button, .ui.basic.primary.button { background: transparent; box-shadow: 0 0 0 1px #2185d0 inset; color: #2185d0; } .ui.basic.primary.buttons .button:hover, .ui.basic.primary.button:hover { background: transparent; box-shadow: 0 0 0 1px #1678c2 inset; color: #1678c2; } .ui.basic.primary.buttons .button:focus, .ui.basic.primary.button:focus { background: transparent; box-shadow: 0 0 0 1px #0d71bb inset; color: #1678c2; } .ui.basic.primary.buttons .active.button, .ui.basic.primary.active.button { background: transparent; box-shadow: 0 0 0 1px #1279c6 inset; color: #1a69a4; } .ui.basic.primary.buttons .button:active, .ui.basic.primary.button:active { box-shadow: 0 0 0 1px #1a69a4 inset; color: #1a69a4; } /* Inverted */ .ui.inverted.primary.buttons .button, .ui.inverted.primary.button { background-color: transparent; box-shadow: 0 0 0 2px #54c8ff inset; color: #54c8ff; } .ui.inverted.primary.buttons .button:hover, .ui.inverted.primary.button:hover, .ui.inverted.primary.buttons .button:focus, .ui.inverted.primary.button:focus, .ui.inverted.primary.buttons .button.active, .ui.inverted.primary.button.active, .ui.inverted.primary.buttons .button:active, .ui.inverted.primary.button:active { box-shadow: none; color: #fff; } .ui