2020-10-28 02:44:06 +03:00
/ *
* # Fomantic UI - 2 . 8 . 7
* https : / / github . com / fomantic / Fomantic-UI
* http : / / fomantic-ui . com /
*
* Copyright 2014 Contributors
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * !
* # Fomantic-UI - Dropdown
* http : / / github . com / fomantic / Fomantic-UI /
*
*
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Dropdown
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
. ui . dropdown {
cursor : pointer ;
position : relative ;
display : inline-block ;
outline : none ;
text-align : left ;
transition : box-shadow 0 . 1s ease , width 0 . 1s ease ;
-webkit-user-select : none ;
-moz-user-select : none ;
user-select : none ;
-webkit-tap-highlight-color : rgba ( 0 , 0 , 0 , 0 ) ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Menu
--------------- * /
. ui . dropdown . menu {
cursor : auto ;
position : absolute ;
display : none ;
outline : none ;
top : 100 % ;
min-width : -moz-max-content ;
min-width : max-content ;
margin : 0 ;
padding : 0 0 ;
background : # FFFFFF ;
font-size : 1em ;
text-shadow : none ;
text-align : left ;
box-shadow : 0 2px 3px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
border-radius : 0 . 28571429rem ;
transition : opacity 0 . 1s ease ;
z-index : 11 ;
will-change : transform , opacity ;
}
. ui . dropdown . menu > * {
white-space : nowrap ;
}
/ * --------------
Hidden Input
--------------- * /
. ui . dropdown > input : not ( . search ) : first-child ,
. ui . dropdown > select {
display : none ! important ;
}
/ * --------------
Dropdown Icon
--------------- * /
. ui . dropdown : not ( . labeled ) > . dropdown . icon {
position : relative ;
width : auto ;
font-size : 0 . 85714286em ;
margin : 0 0 0 1em ;
}
. ui . dropdown . menu > . item . dropdown . icon {
width : auto ;
float : right ;
margin : 0em 0 0 1em ;
}
. ui . dropdown . menu > . item . dropdown . icon + . text {
margin-right : 1em ;
}
/ * --------------
Text
--------------- * /
. ui . dropdown > . text {
display : inline-block ;
transition : none ;
}
/ * --------------
Menu Item
--------------- * /
. ui . dropdown . menu > . item {
position : relative ;
cursor : pointer ;
display : block ;
border : none ;
height : auto ;
min-height : 2 . 57142857rem ;
text-align : left ;
border-top : none ;
line-height : 1em ;
font-size : 1rem ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
padding : 0 . 78571429rem 1 . 14285714rem ! important ;
text-transform : none ;
font-weight : normal ;
box-shadow : none ;
-webkit-touch-callout : none ;
}
. ui . dropdown . menu > . item : first-child {
border-top-width : 0 ;
}
. ui . dropdown . menu > . item . vertical {
display : flex ;
flex-direction : column-reverse ;
}
/ * --------------
Floated Content
--------------- * /
. ui . dropdown > . text > [ class * = "right floated" ] ,
. ui . dropdown . menu . item > [ class * = "right floated" ] {
float : right ! important ;
margin-right : 0 ! important ;
margin-left : 1em ! important ;
}
. ui . dropdown > . text > [ class * = "left floated" ] ,
. ui . dropdown . menu . item > [ class * = "left floated" ] {
float : left ! important ;
margin-left : 0 ! important ;
margin-right : 1em ! important ;
}
. ui . dropdown . menu . item > i . icon . floated ,
. ui . dropdown . menu . item > . flag . floated ,
. ui . dropdown . menu . item > . image . floated ,
. ui . dropdown . menu . item > img . floated {
margin-top : 0em ;
}
/ * --------------
Menu Divider
--------------- * /
. ui . dropdown . menu > . header {
margin : 1rem 0 0 . 75rem ;
padding : 0 1 . 14285714rem ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
text-transform : uppercase ;
}
. ui . dropdown . menu > . header : not ( . ui ) {
color : rgba ( 0 , 0 , 0 , 0 . 85 ) ;
font-size : 0 . 78571429em ;
}
. ui . dropdown . menu > . divider {
border-top : 1px solid rgba ( 34 , 36 , 38 , 0 . 1 ) ;
height : 0 ;
margin : 0 . 5em 0 ;
}
. ui . dropdown . menu > . horizontal . divider {
border-top : none ;
}
. ui . dropdown . dropdown . menu > . input {
width : auto ;
display : flex ;
margin : 1 . 14285714rem 0 . 78571429rem ;
min-width : 10rem ;
}
. ui . dropdown . menu > . header + . input {
margin-top : 0 ;
}
. ui . dropdown . menu > . input : not ( . transparent ) input {
padding : 0 . 5em 1em ;
}
. ui . dropdown . menu > . input : not ( . transparent ) . button ,
. ui . dropdown . menu > . input : not ( . transparent ) i . icon ,
. ui . dropdown . menu > . input : not ( . transparent ) . label {
padding-top : 0 . 5em ;
padding-bottom : 0 . 5em ;
}
/ * -----------------
Item Description
------------------- * /
. ui . dropdown > . text > . description ,
. ui . dropdown . menu > . item > . description {
float : right ;
margin : 0 0 0 1em ;
color : rgba ( 0 , 0 , 0 , 0 . 4 ) ;
}
. ui . dropdown . menu > . item . vertical > . description {
margin : 0 ;
}
/ * -----------------
Item Text
------------------- * /
. ui . dropdown . menu > . item . vertical > . text {
margin-bottom : 0 . 25em ;
}
/ * -----------------
Message
------------------- * /
. ui . dropdown . menu > . message {
padding : 0 . 78571429rem 1 . 14285714rem ;
font-weight : normal ;
}
. ui . dropdown . menu > . message : not ( . ui ) {
color : rgba ( 0 , 0 , 0 , 0 . 4 ) ;
}
/ * --------------
Sub Menu
--------------- * /
. ui . dropdown . menu . menu {
top : 0 ;
left : 100 % ;
right : auto ;
margin : 0 -0 . 5em ! important ;
border-radius : 0 . 28571429rem ! important ;
z-index : 21 ! important ;
}
/* Hide Arrow */
. ui . dropdown . menu . menu : after {
display : none ;
}
/ * --------------
Sub Elements
--------------- * /
/* Icons / Flags / Labels / Image */
. ui . dropdown > . text > i . icon ,
. ui . dropdown > . text > . label ,
. ui . dropdown > . text > . flag ,
. ui . dropdown > . text > img ,
. ui . dropdown > . text > . image {
margin-top : 0em ;
}
. ui . dropdown . menu > . item > i . icon ,
. ui . dropdown . menu > . item > . label ,
. ui . dropdown . menu > . item > . flag ,
. ui . dropdown . menu > . item > . image ,
. ui . dropdown . menu > . item > img {
margin-top : 0em ;
}
. ui . dropdown > . text > i . icon ,
. ui . dropdown > . text > . label ,
. ui . dropdown > . text > . flag ,
. ui . dropdown > . text > img ,
. ui . dropdown > . text > . image ,
. ui . dropdown . menu > . item > i . icon ,
. ui . dropdown . menu > . item > . label ,
. ui . dropdown . menu > . item > . flag ,
. ui . dropdown . menu > . item > . image ,
. ui . dropdown . menu > . item > img {
margin-left : 0 ;
float : none ;
margin-right : 0 . 78571429rem ;
}
/ * --------------
Image
--------------- * /
. ui . dropdown > . text > img ,
. ui . dropdown > . text > . image : not ( . icon ) ,
. ui . dropdown . menu > . item > . image : not ( . icon ) ,
. ui . dropdown . menu > . item > img {
display : inline-block ;
vertical-align : top ;
width : auto ;
margin-top : -0 . 5em ;
margin-bottom : -0 . 5em ;
max-height : 2em ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Coupling
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Menu
--------------- * /
/* Remove Menu Item Divider */
. ui . dropdown . ui . menu > . item : before ,
. ui . menu . ui . dropdown . menu > . item : before {
display : none ;
}
/* Prevent Menu Item Border */
. ui . menu . ui . dropdown . menu . active . item {
border-left : none ;
}
/* Automatically float dropdown menu right on last menu item */
. ui . menu . right . menu . dropdown : last-child > . menu : not ( . left ) ,
. ui . menu . right . dropdown . item > . menu : not ( . left ) ,
. ui . buttons > . ui . dropdown : last-child > . menu : not ( . left ) {
left : auto ;
right : 0 ;
}
/ * --------------
Label
--------------- * /
/* Dropdown Menu */
. ui . label . dropdown . menu {
min-width : 100 % ;
}
/ * --------------
Button
--------------- * /
/* No Margin On Icon Button */
. ui . dropdown . icon . button > . dropdown . icon {
margin : 0 ;
}
. ui . button . dropdown . menu {
min-width : 100 % ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Types
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
select . ui . dropdown {
height : 38px ;
padding : 0 . 5em ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
visibility : visible ;
}
/ * --------------
Selection
--------------- * /
/* Displays like a select box */
. ui . selection . dropdown {
cursor : pointer ;
word-wrap : break-word ;
line-height : 1em ;
white-space : normal ;
outline : 0 ;
transform : rotateZ ( 0deg ) ;
min-width : 14em ;
min-height : 2 . 71428571em ;
background : # FFFFFF ;
display : inline-block ;
padding : 0 . 78571429em 3 . 2em 0 . 78571429em 1em ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
box-shadow : none ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
border-radius : 0 . 28571429rem ;
transition : box-shadow 0 . 1s ease , width 0 . 1s ease ;
}
. ui . selection . dropdown . visible ,
. ui . selection . dropdown . active {
z-index : 10 ;
}
. ui . selection . dropdown > . search . icon ,
. ui . selection . dropdown > . delete . icon ,
. ui . selection . dropdown > . dropdown . icon {
cursor : pointer ;
position : absolute ;
width : auto ;
height : auto ;
line-height : 1 . 21428571em ;
top : 0 . 78571429em ;
right : 1em ;
z-index : 3 ;
margin : -0 . 78571429em ;
padding : 0 . 91666667em ;
opacity : 0 . 8 ;
transition : opacity 0 . 1s ease ;
}
/* Compact */
. ui . compact . selection . dropdown {
min-width : 0 ;
}
/* Selection Menu */
. ui . selection . dropdown . menu {
overflow-x : hidden ;
overflow-y : auto ;
backface-visibility : hidden ;
-webkit-overflow-scrolling : touch ;
border-top-width : 0 ! important ;
width : auto ;
outline : none ;
margin : 0 -1px ;
min-width : calc ( 100 % + 2px ) ;
width : calc ( 100 % + 2px ) ;
border-radius : 0 0 0 . 28571429rem 0 . 28571429rem ;
box-shadow : 0 2px 3px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
transition : opacity 0 . 1s ease ;
}
. ui . selection . dropdown . menu : after ,
. ui . selection . dropdown . menu : before {
display : none ;
}
/ * --------------
Message
--------------- * /
. ui . selection . dropdown . menu > . message {
padding : 0 . 78571429rem 1 . 14285714rem ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . selection . dropdown . short . menu {
max-height : 6 . 01071429rem ;
}
. ui . selection . dropdown [ class * = "very short" ] . menu {
max-height : 4 . 00714286rem ;
}
. ui . selection . dropdown . menu {
max-height : 8 . 01428571rem ;
}
. ui . selection . dropdown . long . menu {
max-height : 16 . 02857143rem ;
}
. ui . selection . dropdown [ class * = "very long" ] . menu {
max-height : 24 . 04285714rem ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . selection . dropdown . short . menu {
max-height : 8 . 01428571rem ;
}
. ui . selection . dropdown [ class * = "very short" ] . menu {
max-height : 5 . 34285714rem ;
}
. ui . selection . dropdown . menu {
max-height : 10 . 68571429rem ;
}
. ui . selection . dropdown . long . menu {
max-height : 21 . 37142857rem ;
}
. ui . selection . dropdown [ class * = "very long" ] . menu {
max-height : 32 . 05714286rem ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . selection . dropdown . short . menu {
max-height : 12 . 02142857rem ;
}
. ui . selection . dropdown [ class * = "very short" ] . menu {
max-height : 8 . 01428571rem ;
}
. ui . selection . dropdown . menu {
max-height : 16 . 02857143rem ;
}
. ui . selection . dropdown . long . menu {
max-height : 32 . 05714286rem ;
}
. ui . selection . dropdown [ class * = "very long" ] . menu {
max-height : 48 . 08571429rem ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . selection . dropdown . short . menu {
max-height : 16 . 02857143rem ;
}
. ui . selection . dropdown [ class * = "very short" ] . menu {
max-height : 10 . 68571429rem ;
}
. ui . selection . dropdown . menu {
max-height : 21 . 37142857rem ;
}
. ui . selection . dropdown . long . menu {
max-height : 42 . 74285714rem ;
}
. ui . selection . dropdown [ class * = "very long" ] . menu {
max-height : 64 . 11428571rem ;
}
}
/* Menu Item */
. ui . selection . dropdown . menu > . item {
border-top : 1px solid # FAFAFA ;
padding : 0 . 78571429rem 1 . 14285714rem ! important ;
white-space : normal ;
word-wrap : normal ;
}
/* User Item */
. ui . selection . dropdown . menu > . hidden . addition . item {
display : none ;
}
/* Hover */
. ui . selection . dropdown : hover {
border-color : rgba ( 34 , 36 , 38 , 0 . 35 ) ;
box-shadow : none ;
}
/* Active */
. ui . selection . active . dropdown {
border-color : # 96C8DA ;
box-shadow : 0 2px 3px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
. ui . selection . active . dropdown . menu {
border-color : # 96C8DA ;
box-shadow : 0 2px 3px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
/* Focus */
. ui . selection . dropdown : focus {
border-color : # 96C8DA ;
box-shadow : none ;
}
. ui . selection . dropdown : focus . menu {
border-color : # 96C8DA ;
box-shadow : 0 2px 3px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
/* Visible */
. ui . selection . visible . dropdown > . text : not ( . default ) {
font-weight : normal ;
color : rgba ( 0 , 0 , 0 , 0 . 8 ) ;
}
/* Visible Hover */
. ui . selection . active . dropdown : hover {
border-color : # 96C8DA ;
box-shadow : 0 2px 3px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
. ui . selection . active . dropdown : hover . menu {
border-color : # 96C8DA ;
box-shadow : 0 2px 3px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
/* Dropdown Icon */
. ui . active . selection . dropdown > . dropdown . icon ,
. ui . visible . selection . dropdown > . dropdown . icon {
opacity : '' ;
z-index : 3 ;
}
/* Connecting Border */
. ui . active . selection . dropdown {
border-bottom-left-radius : 0 ! important ;
border-bottom-right-radius : 0 ! important ;
}
/* Empty Connecting Border */
. ui . active . empty . selection . dropdown {
border-radius : 0 . 28571429rem ! important ;
box-shadow : none ! important ;
}
. ui . active . empty . selection . dropdown . menu {
border : none ! important ;
box-shadow : none ! important ;
}
/* CSS specific to iOS devices or firefox mobile only */
@ supports ( -webkit-touch-callout : none ) or ( -webkit-overflow-scrolling : touch ) or ( -moz-appearance : none ) {
@ media ( -moz-touch-enabled ) , ( pointer : coarse ) {
. ui . dropdown . scrollhint . menu : not ( . hidden ) : before {
animation : scrollhint 2s ease 2 ;
content : '' ;
z-index : 15 ;
display : block ;
position : absolute ;
opacity : 0 ;
right : 0 . 25em ;
top : 0 ;
height : 100 % ;
border-right : 0 . 25em solid ;
border-left : 0 ;
-o-border-image : linear-gradient ( to bottom , rgba ( 0 , 0 , 0 , 0 . 75 ) , rgba ( 0 , 0 , 0 , 0 ) ) 1 100 % ;
border-image : linear-gradient ( to bottom , rgba ( 0 , 0 , 0 , 0 . 75 ) , rgba ( 0 , 0 , 0 , 0 ) ) 1 100 % ;
}
. ui . inverted . dropdown . scrollhint . menu : not ( . hidden ) : before {
-o-border-image : linear-gradient ( to bottom , rgba ( 255 , 255 , 255 , 0 . 75 ) , rgba ( 255 , 255 , 255 , 0 ) ) 1 100 % ;
border-image : linear-gradient ( to bottom , rgba ( 255 , 255 , 255 , 0 . 75 ) , rgba ( 255 , 255 , 255 , 0 ) ) 1 100 % ;
}
@ keyframes scrollhint {
0 % {
opacity : 1 ;
top : 100 % ;
}
100 % {
opacity : 0 ;
top : 0 ;
}
}
}
}
/ * --------------
Searchable
--------------- * /
/* Search Selection */
. ui . search . dropdown {
min-width : '' ;
}
/* Search Dropdown */
. ui . search . dropdown > input . search {
background : none transparent ! important ;
border : none ! important ;
box-shadow : none ! important ;
cursor : text ;
top : 0 ;
left : 1px ;
width : 100 % ;
outline : none ;
-webkit-tap-highlight-color : rgba ( 255 , 255 , 255 , 0 ) ;
padding : inherit ;
}
/* Text Layering */
. ui . search . dropdown > input . search {
position : absolute ;
z-index : 2 ;
}
. ui . search . dropdown > . text {
cursor : text ;
position : relative ;
left : 1px ;
z-index : auto ;
}
/* Search Selection */
. ui . search . selection . dropdown > input . search {
line-height : 1 . 21428571em ;
padding : 0 . 67857143em 3 . 2em 0 . 67857143em 1em ;
}
/* Used to size multi select input to character width */
. ui . search . selection . dropdown > span . sizer {
line-height : 1 . 21428571em ;
padding : 0 . 67857143em 3 . 2em 0 . 67857143em 1em ;
display : none ;
white-space : pre ;
}
/* Active/Visible Search */
. ui . search . dropdown . active > input . search ,
. ui . search . dropdown . visible > input . search {
cursor : auto ;
}
. ui . search . dropdown . active > . text ,
. ui . search . dropdown . visible > . text {
pointer-events : none ;
}
/* Filtered Text */
. ui . active . search . dropdown input . search : focus + . text i . icon ,
. ui . active . search . dropdown input . search : focus + . text . flag {
2020-12-27 13:53:53 +03:00
opacity : var ( --opacity-disabled ) ;
2020-10-28 02:44:06 +03:00
}
. ui . active . search . dropdown input . search : focus + . text {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ! important ;
}
. ui . search . dropdown . button > span . sizer {
display : none ;
}
/* Search Menu */
. ui . search . dropdown . menu {
overflow-x : hidden ;
overflow-y : auto ;
backface-visibility : hidden ;
-webkit-overflow-scrolling : touch ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . search . dropdown . menu {
max-height : 8 . 01428571rem ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . search . dropdown . menu {
max-height : 10 . 68571429rem ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . search . dropdown . menu {
max-height : 16 . 02857143rem ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . search . dropdown . menu {
max-height : 21 . 37142857rem ;
}
}
/* Clearable Selection */
. ui . dropdown > . remove . icon {
cursor : pointer ;
font-size : 0 . 85714286em ;
margin : -0 . 78571429em ;
padding : 0 . 91666667em ;
right : 3em ;
top : 0 . 78571429em ;
position : absolute ;
opacity : 0 . 6 ;
z-index : 3 ;
}
. ui . clearable . dropdown . text ,
. ui . clearable . dropdown a : last-of-type {
margin-right : 1 . 5em ;
}
. ui . dropdown select . noselection ~ . remove . icon ,
. ui . dropdown input [ value = '' ] ~ . remove . icon ,
. ui . dropdown input : not ( [ value ] ) ~ . remove . icon ,
. ui . dropdown . loading > . remove . icon {
display : none ;
}
/ * --------------
Multiple
--------------- * /
/* Multiple Selection */
. ui . ui . multiple . dropdown {
padding : 0 . 22619048em 3 . 2em 0 . 22619048em 0 . 35714286em ;
}
. ui . multiple . dropdown . menu {
cursor : auto ;
}
/* Selection Label */
. ui . multiple . dropdown > . label {
display : inline-block ;
white-space : normal ;
font-size : 1em ;
padding : 0 . 35714286em 0 . 78571429em ;
margin : 0 . 14285714rem 0 . 28571429rem 0 . 14285714rem 0 ;
box-shadow : 0 0 0 1px rgba ( 34 , 36 , 38 , 0 . 15 ) inset ;
}
/* Dropdown Icon */
. ui . multiple . dropdown . dropdown . icon {
margin : '' ;
padding : '' ;
}
/* Text */
. ui . multiple . dropdown > . text {
position : static ;
padding : 0 ;
max-width : 100 % ;
margin : 0 . 45238095em 0 0 . 45238095em 0 . 64285714em ;
line-height : 1 . 21428571em ;
}
. ui . multiple . dropdown > . text . default {
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
}
. ui . multiple . dropdown > . label ~ input . search {
margin-left : 0 . 14285714em ! important ;
}
. ui . multiple . dropdown > . label ~ . text {
display : none ;
}
. ui . multiple . dropdown > . label : not ( . image ) > img : not ( . centered ) {
margin-right : 0 . 78571429rem ;
}
. ui . multiple . dropdown > . label : not ( . image ) > img . ui : not ( . avatar ) {
margin-bottom : 0 . 39285714rem ;
}
. ui . multiple . dropdown > . image . label img {
margin : -0 . 35714286em 0 . 78571429em -0 . 35714286em -0 . 78571429em ;
height : 1 . 71428571em ;
}
/ * -----------------
Multiple Search
----------------- * /
/* Multiple Search Selection */
. ui . multiple . search . dropdown ,
. ui . multiple . search . dropdown > input . search {
cursor : text ;
}
/* Prompt Text */
. ui . multiple . search . dropdown > . text {
display : inline-block ;
position : absolute ;
top : 0 ;
left : 0 ;
padding : inherit ;
margin : 0 . 45238095em 0 0 . 45238095em 0 . 64285714em ;
line-height : 1 . 21428571em ;
}
. ui . multiple . search . dropdown > . label ~ . text {
display : none ;
}
/* Search */
. ui . multiple . search . dropdown > input . search {
position : static ;
padding : 0 ;
max-width : 100 % ;
margin : 0 . 45238095em 0 0 . 45238095em 0 . 64285714em ;
width : 2 . 2em ;
line-height : 1 . 21428571em ;
}
. ui . multiple . search . dropdown . button {
min-width : 14em ;
}
/ * --------------
Inline
--------------- * /
. ui . inline . dropdown {
cursor : pointer ;
display : inline-block ;
color : inherit ;
}
. ui . inline . dropdown . dropdown . icon {
margin : 0 0 . 21428571em 0 0 . 21428571em ;
vertical-align : baseline ;
}
. ui . inline . dropdown > . text {
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
}
. ui . inline . dropdown . menu {
cursor : auto ;
margin-top : 0 . 21428571em ;
border-radius : 0 . 28571429rem ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
States
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Active
---------------------- * /
/* Menu Item Active */
. ui . dropdown . menu . active . item {
background : transparent ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
color : rgba ( 0 , 0 , 0 , 0 . 95 ) ;
box-shadow : none ;
z-index : 12 ;
}
/ * --------------------
Hover
---------------------- * /
/* Menu Item Hover */
. ui . dropdown . menu > . item : hover {
background : rgba ( 0 , 0 , 0 , 0 . 05 ) ;
color : rgba ( 0 , 0 , 0 , 0 . 95 ) ;
z-index : 13 ;
}
/ * --------------------
Default Text
---------------------- * /
. ui . dropdown : not ( . button ) > . default . text ,
. ui . default . dropdown : not ( . button ) > . text {
color : rgba ( 191 , 191 , 191 , 0 . 87 ) ;
}
. ui . dropdown : not ( . button ) > input : focus ~ . default . text ,
. ui . default . dropdown : not ( . button ) > input : focus ~ . text {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ;
}
/ * --------------------
Loading
--------------------- * /
. ui . loading . dropdown > i . icon {
height : 1em ! important ;
}
. ui . loading . selection . dropdown > i . icon {
padding : 1 . 5em 1 . 28571429em ! important ;
}
. ui . loading . dropdown > i . icon : 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 . 1 ) ;
}
. ui . loading . dropdown > i . icon : after {
position : absolute ;
content : '' ;
top : 50 % ;
left : 50 % ;
box-shadow : 0 0 0 1px transparent ;
margin : -0 . 64285714em 0 0 -0 . 64285714em ;
width : 1 . 28571429em ;
height : 1 . 28571429em ;
animation : loader 0 . 6s infinite linear ;
border : 0 . 2em solid # 767676 ;
border-radius : 500rem ;
}
/* Coupling */
. ui . loading . dropdown . button > i . icon : before ,
. ui . loading . dropdown . button > i . icon : after {
display : none ;
}
. ui . loading . dropdown > . text {
transition : none ;
}
/* Used To Check Position */
. ui . dropdown . loading . menu {
display : block ;
visibility : hidden ;
z-index : -1 ;
}
. ui . dropdown > . loading . menu {
left : 0 ! important ;
right : auto ! important ;
}
. ui . dropdown > . menu . loading . menu {
left : 100 % ! important ;
right : auto ! important ;
}
/ * --------------------
Keyboard Select
---------------------- * /
/* Selected Item */
. ui . dropdown . selected ,
. ui . dropdown . menu . selected . item {
background : rgba ( 0 , 0 , 0 , 0 . 03 ) ;
color : rgba ( 0 , 0 , 0 , 0 . 95 ) ;
}
/ * --------------------
Search Filtered
---------------------- * /
/* Filtered Item */
. ui . dropdown > . filtered . text {
visibility : hidden ;
}
. ui . dropdown . filtered . item {
display : none ! important ;
}
/ * --------------------
States
---------------------- * /
. ui . dropdown . error ,
. ui . dropdown . error > . text ,
. ui . dropdown . error > . default . text {
color : # 9F3A38 ;
}
. ui . selection . dropdown . error {
background : # FFF6F6 ;
border-color : # E0B4B4 ;
}
. ui . selection . dropdown . error : hover {
border-color : # E0B4B4 ;
}
. ui . multiple . selection . error . dropdown > . label {
border-color : # E0B4B4 ;
}
. ui . dropdown . error > . menu ,
. ui . dropdown . error > . menu . menu {
border-color : # E0B4B4 ;
}
. ui . dropdown . error > . menu > . item {
color : # 9F3A38 ;
}
/* Item Hover */
. ui . dropdown . error > . menu > . item : hover {
background-color : # FBE7E7 ;
}
/* Item Active */
. ui . dropdown . error > . menu . active . item {
background-color : # FDCFCF ;
}
. ui . dropdown . info ,
. ui . dropdown . info > . text ,
. ui . dropdown . info > . default . text {
color : # 276F86 ;
}
. ui . selection . dropdown . info {
background : # F8FFFF ;
border-color : # A9D5DE ;
}
. ui . selection . dropdown . info : hover {
border-color : # A9D5DE ;
}
. ui . multiple . selection . info . dropdown > . label {
border-color : # A9D5DE ;
}
. ui . dropdown . info > . menu ,
. ui . dropdown . info > . menu . menu {
border-color : # A9D5DE ;
}
. ui . dropdown . info > . menu > . item {
color : # 276F86 ;
}
/* Item Hover */
. ui . dropdown . info > . menu > . item : hover {
background-color : # e9f2fb ;
}
/* Item Active */
. ui . dropdown . info > . menu . active . item {
background-color : # cef1fd ;
}
. ui . dropdown . success ,
. ui . dropdown . success > . text ,
. ui . dropdown . success > . default . text {
color : # 2C662D ;
}
. ui . selection . dropdown . success {
background : # FCFFF5 ;
border-color : # A3C293 ;
}
. ui . selection . dropdown . success : hover {
border-color : # A3C293 ;
}
. ui . multiple . selection . success . dropdown > . label {
border-color : # A3C293 ;
}
. ui . dropdown . success > . menu ,
. ui . dropdown . success > . menu . menu {
border-color : # A3C293 ;
}
. ui . dropdown . success > . menu > . item {
color : # 2C662D ;
}
/* Item Hover */
. ui . dropdown . success > . menu > . item : hover {
background-color : # e9fbe9 ;
}
/* Item Active */
. ui . dropdown . success > . menu . active . item {
background-color : # dafdce ;
}
. ui . dropdown . warning ,
. ui . dropdown . warning > . text ,
. ui . dropdown . warning > . default . text {
color : # 573A08 ;
}
. ui . selection . dropdown . warning {
background : # FFFAF3 ;
border-color : # C9BA9B ;
}
. ui . selection . dropdown . warning : hover {
border-color : # C9BA9B ;
}
. ui . multiple . selection . warning . dropdown > . label {
border-color : # C9BA9B ;
}
. ui . dropdown . warning > . menu ,
. ui . dropdown . warning > . menu . menu {
border-color : # C9BA9B ;
}
. ui . dropdown . warning > . menu > . item {
color : # 573A08 ;
}
/* Item Hover */
. ui . dropdown . warning > . menu > . item : hover {
background-color : # fbfbe9 ;
}
/* Item Active */
. ui . dropdown . warning > . menu . active . item {
background-color : # fdfdce ;
}
/ * --------------------
Clear
---------------------- * /
. ui . dropdown > . clear . dropdown . icon {
opacity : 0 . 8 ;
transition : opacity 0 . 1s ease ;
}
. ui . dropdown > . clear . dropdown . icon : hover {
opacity : 1 ;
}
/ * --------------------
Disabled
---------------------- * /
/* Disabled */
. ui . disabled . dropdown ,
. ui . dropdown . menu > . disabled . item {
cursor : default ;
pointer-events : none ;
2020-12-27 13:53:53 +03:00
opacity : var ( --opacity-disabled ) ;
2020-10-28 02:44:06 +03:00
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Variations
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Direction
--------------- * /
/* Flyout Direction */
. ui . dropdown . menu {
left : 0 ;
}
/* Default Side (Right) */
. ui . dropdown . right . menu > . menu ,
. ui . dropdown . menu . right . menu {
left : 100 % ! important ;
right : auto ! important ;
border-radius : 0 . 28571429rem ! important ;
}
/* Leftward Opening Menu */
. ui . dropdown > . left . menu {
left : auto ! important ;
right : 0 ! important ;
}
. ui . dropdown > . left . menu . menu ,
. ui . dropdown . menu . left . menu {
left : auto ;
right : 100 % ;
margin : 0 -0 . 5em 0 0 ! important ;
border-radius : 0 . 28571429rem ! important ;
}
. ui . dropdown . item . left . dropdown . icon ,
. ui . dropdown . left . menu . item . dropdown . icon {
width : auto ;
float : left ;
margin : 0em 0 0 0 ;
}
. ui . dropdown . item . left . dropdown . icon ,
. ui . dropdown . left . menu . item . dropdown . icon {
width : auto ;
float : left ;
margin : 0em 0 0 0 ;
}
. ui . dropdown . item . left . dropdown . icon + . text ,
. ui . dropdown . left . menu . item . dropdown . icon + . text {
margin-left : 1em ;
margin-right : 0 ;
}
/ * --------------
Upward
--------------- * /
/* Upward Main Menu */
. ui . upward . dropdown > . menu {
top : auto ;
bottom : 100 % ;
box-shadow : 0 0 3px 0 rgba ( 0 , 0 , 0 , 0 . 08 ) ;
border-radius : 0 . 28571429rem 0 . 28571429rem 0 0 ;
}
/* Upward Sub Menu */
. ui . dropdown . upward . menu {
top : auto ! important ;
bottom : 0 ! important ;
}
/* Active Upward */
. ui . simple . upward . active . dropdown ,
. ui . simple . upward . dropdown : hover {
border-radius : 0 . 28571429rem 0 . 28571429rem 0 0 ! important ;
}
. ui . upward . dropdown . button : not ( . pointing ) : not ( . floating ) . active {
border-radius : 0 . 28571429rem 0 . 28571429rem 0 0 ;
}
/* Selection */
. ui . upward . selection . dropdown . menu {
border-top-width : 1px ! important ;
border-bottom-width : 0 ! important ;
box-shadow : 0 -2px 3px 0 rgba ( 0 , 0 , 0 , 0 . 08 ) ;
}
. ui . upward . selection . dropdown : hover {
box-shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , 0 . 05 ) ;
}
/* Active Upward */
. ui . active . upward . selection . dropdown {
border-radius : 0 0 0 . 28571429rem 0 . 28571429rem ! important ;
}
/* Visible Upward */
. ui . upward . selection . dropdown . visible {
box-shadow : 0 0 3px 0 rgba ( 0 , 0 , 0 , 0 . 08 ) ;
border-radius : 0 0 0 . 28571429rem 0 . 28571429rem ! important ;
}
/* Visible Hover Upward */
. ui . upward . active . selection . dropdown : hover {
box-shadow : 0 0 3px 0 rgba ( 0 , 0 , 0 , 0 . 05 ) ;
}
. ui . upward . active . selection . dropdown : hover . menu {
box-shadow : 0 -2px 3px 0 rgba ( 0 , 0 , 0 , 0 . 08 ) ;
}
/ * --------------
Scrolling
--------------- * /
/* Selection Menu */
. ui . scrolling . dropdown . menu ,
. ui . dropdown . scrolling . menu {
overflow-x : hidden ;
overflow-y : auto ;
}
. ui . scrolling . dropdown . menu {
overflow-x : hidden ;
overflow-y : auto ;
backface-visibility : hidden ;
-webkit-overflow-scrolling : touch ;
min-width : 100 % ! important ;
width : auto ! important ;
}
. ui . dropdown . scrolling . menu {
position : static ;
overflow-y : auto ;
border : none ;
box-shadow : none ! important ;
border-radius : 0 ! important ;
margin : 0 ! important ;
min-width : 100 % ! important ;
width : auto ! important ;
border-top : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
. ui . scrolling . dropdown . menu . item . item . item ,
. ui . dropdown . scrolling . menu > . item . item . item {
border-top : none ;
}
. ui . scrolling . dropdown . menu . item : first-child ,
. ui . dropdown . scrolling . menu . item : first-child {
border-top : none ;
}
. ui . dropdown > . animating . menu . scrolling . menu ,
. ui . dropdown > . visible . menu . scrolling . menu {
display : block ;
}
/* Scrollbar in IE */
@ media all and ( -ms-high-contrast : none ) {
. ui . scrolling . dropdown . menu ,
. ui . dropdown . scrolling . menu {
min-width : calc ( 100 % - 17px ) ;
}
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . scrolling . dropdown . menu ,
. ui . dropdown . scrolling . menu {
max-height : 10 . 28571429rem ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . scrolling . dropdown . menu ,
. ui . dropdown . scrolling . menu {
max-height : 15 . 42857143rem ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . scrolling . dropdown . menu ,
. ui . dropdown . scrolling . menu {
max-height : 20 . 57142857rem ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . scrolling . dropdown . menu ,
. ui . dropdown . scrolling . menu {
max-height : 20 . 57142857rem ;
}
}
/ * --------------
Columnar
--------------- * /
. ui . column . dropdown > . menu {
flex-wrap : wrap ;
}
. ui . dropdown [ class * = "two column" ] > . menu > . item {
width : 50 % ;
}
. ui . dropdown [ class * = "three column" ] > . menu > . item {
width : 33 % ;
}
. ui . dropdown [ class * = "four column" ] > . menu > . item {
width : 25 % ;
}
. ui . dropdown [ class * = "five column" ] > . menu > . item {
width : 20 % ;
}
/ * --------------
Simple
--------------- * /
/* Displays without javascript */
. ui . simple . dropdown . menu : before ,
. ui . simple . dropdown . menu : after {
display : none ;
}
. ui . simple . dropdown . menu {
position : absolute ;
/* IE hack to make dropdown icons appear inline */
display : -ms-inline-flexbox ! important ;
display : block ;
overflow : hidden ;
top : -9999px ;
opacity : 0 ;
width : 0 ;
height : 0 ;
transition : opacity 0 . 1s ease ;
margin-top : 0 ! important ;
}
. ui . simple . active . dropdown ,
. ui . simple . dropdown : hover {
border-bottom-left-radius : 0 ! important ;
border-bottom-right-radius : 0 ! important ;
}
. ui . simple . active . dropdown > . menu ,
. ui . simple . dropdown : hover > . menu {
overflow : visible ;
width : auto ;
height : auto ;
top : 100 % ;
opacity : 1 ;
}
. ui . simple . dropdown > . menu > . item : active > . menu ,
. ui . simple . dropdown . menu . item : hover > . menu {
overflow : visible ;
width : auto ;
height : auto ;
top : 0 ! important ;
left : 100 % ;
opacity : 1 ;
}
. ui . simple . dropdown > . menu > . item : active > . left . menu ,
. ui . simple . dropdown . menu . item : hover > . left . menu ,
. right . menu . ui . simple . dropdown > . menu > . item : active > . menu : not ( . right ) ,
. right . menu . ui . simple . dropdown > . menu . item : hover > . menu : not ( . right ) {
left : auto ;
right : 100 % ;
}
. ui . simple . disabled . dropdown : hover . menu {
display : none ;
height : 0 ;
width : 0 ;
overflow : hidden ;
}
/* Visible */
. ui . simple . visible . dropdown > . menu {
display : block ;
}
/* Scrolling */
. ui . simple . scrolling . active . dropdown > . menu ,
. ui . simple . scrolling . dropdown : hover > . menu {
overflow-x : hidden ;
overflow-y : auto ;
}
/ * --------------
Fluid
--------------- * /
. ui . fluid . dropdown {
display : block ;
width : 100 % ! important ;
min-width : 0 ;
}
. ui . fluid . dropdown > . dropdown . icon {
float : right ;
}
/ * --------------
Floating
--------------- * /
. ui . floating . dropdown . menu {
left : 0 ;
right : auto ;
box-shadow : 0 2px 4px 0 rgba ( 34 , 36 , 38 , 0 . 12 ) , 0 2px 10px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ! important ;
border-radius : 0 . 28571429rem ! important ;
}
. ui . floating . dropdown > . menu {
border-radius : 0 . 28571429rem ! important ;
}
. ui : not ( . upward ) . floating . dropdown > . menu {
margin-top : 0 . 5em ;
}
. ui . upward . floating . dropdown > . menu {
margin-bottom : 0 . 5em ;
}
/ * --------------
Pointing
--------------- * /
. ui . pointing . dropdown > . menu {
top : 100 % ;
margin-top : 0 . 78571429rem ;
border-radius : 0 . 28571429rem ;
}
. ui . pointing . dropdown > . menu : not ( . hidden ) : after {
display : block ;
position : absolute ;
pointer-events : none ;
content : '' ;
visibility : visible ;
transform : rotate ( 45deg ) ;
width : 0 . 5em ;
height : 0 . 5em ;
box-shadow : -1px -1px 0 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
background : # FFFFFF ;
z-index : 2 ;
}
. ui . pointing . dropdown > . menu : not ( . hidden ) : after {
top : -0 . 25em ;
left : 50 % ;
margin : 0 0 0 -0 . 25em ;
}
/* Top Left Pointing */
. ui . top . left . pointing . dropdown > . menu {
top : 100 % ;
bottom : auto ;
left : 0 ;
right : auto ;
margin : 1em 0 0 ;
}
. ui . top . left . pointing . dropdown > . menu {
top : 100 % ;
bottom : auto ;
left : 0 ;
right : auto ;
margin : 1em 0 0 ;
}
. ui . top . left . pointing . dropdown > . menu : after {
top : -0 . 25em ;
left : 1em ;
right : auto ;
margin : 0 ;
transform : rotate ( 45deg ) ;
}
/* Top Right Pointing */
. ui . top . right . pointing . dropdown > . menu {
top : 100 % ;
bottom : auto ;
right : 0 ;
left : auto ;
margin : 1em 0 0 ;
}
. ui . top . pointing . dropdown > . left . menu : after ,
. ui . top . right . pointing . dropdown > . menu : after {
top : -0 . 25em ;
left : auto ! important ;
right : 1em ! important ;
margin : 0 ;
transform : rotate ( 45deg ) ;
}
/* Left Pointing */
. ui . left . pointing . dropdown > . menu {
top : 0 ;
left : 100 % ;
right : auto ;
margin : 0 0 0 1em ;
}
. ui . left . pointing . dropdown > . menu : after {
top : 1em ;
left : -0 . 25em ;
margin : 0 0 0 0 ;
transform : rotate ( -45deg ) ;
}
. ui . left : not ( . top ) : not ( . bottom ) . pointing . dropdown > . left . menu {
left : auto ! important ;
right : 100 % ! important ;
margin : 0 1em 0 0 ;
}
. ui . left : not ( . top ) : not ( . bottom ) . pointing . dropdown > . left . menu : after {
top : 1em ;
left : auto ;
right : -0 . 25em ;
margin : 0 0 0 0 ;
transform : rotate ( 135deg ) ;
}
/* Right Pointing */
. ui . right . pointing . dropdown > . menu {
top : 0 ;
left : auto ;
right : 100 % ;
margin : 0 1em 0 0 ;
}
. ui . right . pointing . dropdown > . menu : after {
top : 1em ;
left : auto ;
right : -0 . 25em ;
margin : 0 0 0 0 ;
transform : rotate ( 135deg ) ;
}
/* Bottom Pointing */
. ui . bottom . pointing . dropdown > . menu {
top : auto ;
bottom : 100 % ;
left : 0 ;
right : auto ;
margin : 0 0 1em ;
}
. ui . bottom . pointing . dropdown > . menu : after {
top : auto ;
bottom : -0 . 25em ;
right : auto ;
margin : 0 ;
transform : rotate ( -135deg ) ;
}
/* Reverse Sub-Menu Direction */
. ui . bottom . pointing . dropdown > . menu . menu {
top : auto ! important ;
bottom : 0 ! important ;
}
/* Bottom Left */
. ui . bottom . left . pointing . dropdown > . menu {
left : 0 ;
right : auto ;
}
. ui . bottom . left . pointing . dropdown > . menu : after {
left : 1em ;
right : auto ;
}
/* Bottom Right */
. ui . bottom . right . pointing . dropdown > . menu {
right : 0 ;
left : auto ;
}
. ui . bottom . right . pointing . dropdown > . menu : after {
left : auto ;
right : 1em ;
}
/* Upward pointing */
. ui . pointing . upward . dropdown . menu ,
. ui . top . pointing . upward . dropdown . menu {
top : auto ! important ;
bottom : 100 % ! important ;
margin : 0 0 0 . 78571429rem ;
border-radius : 0 . 28571429rem ;
}
. ui . pointing . upward . dropdown . menu : after ,
. ui . top . pointing . upward . dropdown . menu : after {
top : 100 % ! important ;
bottom : auto ! important ;
box-shadow : 1px 1px 0 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
margin : -0 . 25em 0 0 ;
}
/* Right Pointing Upward */
. ui . right . pointing . upward . dropdown : not ( . top ) : not ( . bottom ) . menu {
top : auto ! important ;
bottom : 0 ! important ;
margin : 0 1em 0 0 ;
}
. ui . right . pointing . upward . dropdown : not ( . top ) : not ( . bottom ) . menu : after {
top : auto ! important ;
bottom : 0 ! important ;
margin : 0 0 1em 0 ;
box-shadow : -1px -1px 0 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
/* Left Pointing Upward */
. ui . left . pointing . upward . dropdown : not ( . top ) : not ( . bottom ) . menu {
top : auto ! important ;
bottom : 0 ! important ;
margin : 0 0 0 1em ;
}
. ui . left . pointing . upward . dropdown : not ( . top ) : not ( . bottom ) . menu : after {
top : auto ! important ;
bottom : 0 ! important ;
margin : 0 0 1em 0 ;
box-shadow : -1px -1px 0 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
/ * --------------------
Sizes
--------------------- * /
. ui . dropdown ,
. ui . dropdown . menu > . item {
font-size : 1rem ;
}
. ui . mini . dropdown ,
. ui . mini . dropdown . menu > . item {
font-size : 0 . 78571429rem ;
}
. ui . tiny . dropdown ,
. ui . tiny . dropdown . menu > . item {
font-size : 0 . 85714286rem ;
}
. ui . small . dropdown ,
. ui . small . dropdown . menu > . item {
font-size : 0 . 92857143rem ;
}
. ui . large . dropdown ,
. ui . large . dropdown . menu > . item {
font-size : 1 . 14285714rem ;
}
. ui . big . dropdown ,
. ui . big . dropdown . menu > . item {
font-size : 1 . 28571429rem ;
}
. ui . huge . dropdown ,
. ui . huge . dropdown . menu > . item {
font-size : 1 . 42857143rem ;
}
. ui . massive . dropdown ,
. ui . massive . dropdown . menu > . item {
font-size : 1 . 71428571rem ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/* Dropdown Carets */
@ font-face {
font-family : 'Dropdown' ;
src : url ( data : application / x-font-ttf ; charset = utf-8 ; base64 , AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg / + D / 4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa / / 3 / / wAAAAAAIPDX / / 3 / / wAB / + MPLQADAAEAAAAAAAAAAAAAAAEAAf / / AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ / BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI / wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ / ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ / BwEBBwQJ / wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD / 4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA = ) format ( 'truetype' ) , url ( data : application / font-woff ; charset = utf-8 ; base64 , d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE / 09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9 + 4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6 + BwC + BsD + BgEHgoAGVP / i4seCgAZU / + LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL / yUDvyUDvyUDvuUDvtvi / emFYuQjZCOjo + Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU + xQFiIiGiYaLhouHjYeOCPsU9xQFiI + Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo + NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI + 5SLBYaLh42HjoiPiY + LkAgO + 92d928Vi5CNkI + OCPcU9xQFjo + QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I + xT3FAWHjomPi5AIDvvdi + YVi / eUBYuQjZCOjo + Pj42Qi5CLkImOhwj3FPsUBY + IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY + LkAgO + JQU + JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P / g / + AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v / 9 / / 8AAAAAACDw1 / / 9 / / 8AAf / jDy0AAwABAAAAAAAAAAAAAAABAAH / / wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD / 4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA ) format ( 'woff' ) ;
font-weight : normal ;
font-style : normal ;
}
. ui . dropdown > . dropdown . icon {
font-family : 'Dropdown' ;
line-height : 1 ;
height : 1em ;
width : 1 . 23em ;
backface-visibility : hidden ;
font-weight : normal ;
font-style : normal ;
text-align : center ;
}
. ui . dropdown > . dropdown . icon {
width : auto ;
}
. ui . dropdown > . dropdown . icon : before {
content : '\f0d7' ;
}
/* Sub Menu */
. ui . dropdown . menu . item . dropdown . icon : before {
content : '\f0da' ;
}
. ui . dropdown . item . left . dropdown . icon : before ,
. ui . dropdown . left . menu . item . dropdown . icon : before {
content : "\f0d9" ;
}
/* Vertical Menu Dropdown */
. ui . vertical . menu . dropdown . item > . dropdown . icon : before {
content : "\f0da" ;
}
/ * Icons for Reference
. dropdown . down . icon {
content : "\f0d7" ;
}
. dropdown . up . icon {
content : "\f0d8" ;
}
. dropdown . left . icon {
content : "\f0d9" ;
}
. dropdown . icon . icon {
content : "\f0da" ;
}
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
User Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * !
* # Fomantic-UI - Form
* http : / / github . com / fomantic / Fomantic-UI /
*
*
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Elements
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Form
--------------------- * /
. ui . form {
position : relative ;
max-width : 100 % ;
}
/ * --------------------
Content
--------------------- * /
. ui . form > p {
margin : 1em 0 ;
}
/ * --------------------
Field
--------------------- * /
. ui . form . field {
clear : both ;
margin : 0 0 1em ;
}
. ui . form . fields . fields ,
. ui . form . field : last-child ,
. ui . form . fields : last-child . field {
margin-bottom : 0 ;
}
. ui . form . fields . field {
clear : both ;
margin : 0 ;
}
/ * --------------------
Labels
--------------------- * /
. ui . form . field > label {
display : block ;
margin : 0 0 0 . 28571429rem 0 ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
font-size : 0 . 92857143em ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
text-transform : none ;
}
/ * --------------------
Standard Inputs
--------------------- * /
. ui . form textarea ,
. ui . form input : not ( [ type ] ) ,
. ui . form input [ type = "date" ] ,
. ui . form input [ type = "datetime-local" ] ,
. ui . form input [ type = "email" ] ,
. ui . form input [ type = "number" ] ,
. ui . form input [ type = "password" ] ,
. ui . form input [ type = "search" ] ,
. ui . form input [ type = "tel" ] ,
. ui . form input [ type = "time" ] ,
. ui . form input [ type = "text" ] ,
. ui . form input [ type = "file" ] ,
. ui . form input [ type = "url" ] {
width : 100 % ;
vertical-align : top ;
}
/* Set max height on unusual input */
. ui . form :: -webkit-datetime-edit ,
. ui . form :: -webkit-inner-spin-button {
height : 1 . 21428571em ;
}
. ui . form input : not ( [ type ] ) ,
. ui . form input [ type = "date" ] ,
. ui . form input [ type = "datetime-local" ] ,
. ui . form input [ type = "email" ] ,
. ui . form input [ type = "number" ] ,
. ui . form input [ type = "password" ] ,
. ui . form input [ type = "search" ] ,
. ui . form input [ type = "tel" ] ,
. ui . form input [ type = "time" ] ,
. ui . form input [ type = "text" ] ,
. ui . form input [ type = "file" ] ,
. ui . form input [ type = "url" ] {
2020-11-08 21:01:38 +03:00
font-family : var ( --fonts-regular ) ;
2020-10-28 02:44:06 +03:00
margin : 0 ;
outline : none ;
-webkit-appearance : none ;
-webkit-tap-highlight-color : rgba ( 255 , 255 , 255 , 0 ) ;
line-height : 1 . 21428571em ;
padding : 0 . 67857143em 1em ;
font-size : 1em ;
background : # FFFFFF ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
border-radius : 0 . 28571429rem ;
box-shadow : 0 0 0 0 transparent inset ;
transition : color 0 . 1s ease , border-color 0 . 1s ease ;
}
/* Text Area */
. ui . input textarea ,
. ui . form textarea {
margin : 0 ;
-webkit-appearance : none ;
-webkit-tap-highlight-color : rgba ( 255 , 255 , 255 , 0 ) ;
padding : 0 . 78571429em 1em ;
background : # FFFFFF ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
outline : none ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
border-radius : 0 . 28571429rem ;
box-shadow : 0 0 0 0 transparent inset ;
transition : color 0 . 1s ease , border-color 0 . 1s ease ;
font-size : 1em ;
2020-11-08 21:01:38 +03:00
font-family : var ( --fonts-regular ) ;
2020-10-28 02:44:06 +03:00
line-height : 1 . 2857 ;
resize : vertical ;
}
. ui . form textarea : not ( [ rows ] ) {
height : 12em ;
min-height : 8em ;
max-height : 24em ;
}
. ui . form textarea ,
. ui . form input [ type = "checkbox" ] {
vertical-align : top ;
}
/ * --------------------
Checkbox margin
--------------------- * /
. ui . form . fields : not ( . grouped ) : not ( . inline ) . field : not ( : only-child ) label + . ui . ui . checkbox {
margin-top : 0 . 7em ;
}
. ui . form . fields : not ( . grouped ) : not ( . inline ) . field : not ( : only-child ) . ui . checkbox {
margin-top : 2 . 41428571em ;
}
. ui . form . fields : not ( . grouped ) : not ( . inline ) . field : not ( : only-child ) . ui . toggle . checkbox {
margin-top : 2 . 21428571em ;
}
. ui . form . fields : not ( . grouped ) : not ( . inline ) . field : not ( : only-child ) . ui . slider . checkbox {
margin-top : 2 . 61428571em ;
}
. ui . ui . form . field . fields . field : not ( : only-child ) . ui . checkbox {
margin-top : 0 . 6em ;
}
. ui . ui . form . field . fields . field : not ( : only-child ) . ui . toggle . checkbox {
margin-top : 0 . 5em ;
}
. ui . ui . form . field . fields . field : not ( : only-child ) . ui . slider . checkbox {
margin-top : 0 . 7em ;
}
/ * --------------------------
Input w / attached Button
--------------------------- * /
. ui . form input . attached {
width : auto ;
}
/ * --------------------
Basic Select
--------------------- * /
. ui . form select {
display : block ;
height : auto ;
width : 100 % ;
background : # FFFFFF ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
border-radius : 0 . 28571429rem ;
box-shadow : 0 0 0 0 transparent inset ;
padding : 0 . 62em 1em ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
transition : color 0 . 1s ease , border-color 0 . 1s ease ;
}
/ * --------------------
Dropdown
--------------------- * /
/* Block */
. ui . form . field > . selection . dropdown {
min-width : auto ;
width : 100 % ;
}
. ui . form . field > . selection . dropdown > . dropdown . icon {
float : right ;
}
/* Inline */
. ui . form . inline . fields . field > . selection . dropdown ,
. ui . form . inline . field > . selection . dropdown {
width : auto ;
}
. ui . form . inline . fields . field > . selection . dropdown > . dropdown . icon ,
. ui . form . inline . field > . selection . dropdown > . dropdown . icon {
float : none ;
}
/ * --------------------
UI Input
--------------------- * /
/* Block */
. ui . form . field . ui . input ,
. ui . form . fields . field . ui . input ,
. ui . form . wide . field . ui . input {
width : 100 % ;
}
/* Inline */
. ui . form . inline . fields . field : not ( . wide ) . ui . input ,
. ui . form . inline . field : not ( . wide ) . ui . input {
width : auto ;
vertical-align : middle ;
}
/* Auto Input */
. ui . form . fields . field . ui . input input ,
. ui . form . field . ui . input input {
width : auto ;
}
/* Full Width Input */
. ui . form . ten . fields . ui . input input ,
. ui . form . nine . fields . ui . input input ,
. ui . form . eight . fields . ui . input input ,
. ui . form . seven . fields . ui . input input ,
. ui . form . six . fields . ui . input input ,
. ui . form . five . fields . ui . input input ,
. ui . form . four . fields . ui . input input ,
. ui . form . three . fields . ui . input input ,
. ui . form . two . fields . ui . input input ,
. ui . form . wide . field . ui . input input {
flex : 1 0 auto ;
width : 0 ;
}
/ * --------------------
Types of Messages
--------------------- * /
. ui . form . error . message ,
. ui . form . error . message : empty {
display : none ;
}
. ui . form . info . message ,
. ui . form . info . message : empty {
display : none ;
}
. ui . form . success . message ,
. ui . form . success . message : empty {
display : none ;
}
. ui . form . warning . message ,
. ui . form . warning . message : empty {
display : none ;
}
/* Assumptions */
. ui . form . message : first-child {
margin-top : 0 ;
}
/ * --------------------
Validation Prompt
--------------------- * /
. ui . form . field . prompt . label {
white-space : normal ;
background : # FFFFFF ! important ;
border : 1px solid # E0B4B4 ! important ;
color : # 9F3A38 ! important ;
}
. ui . form . inline . fields . field . prompt ,
. ui . form . inline . field . prompt {
vertical-align : top ;
margin : -0 . 25em 0 -0 . 5em 0 . 5em ;
}
. ui . form . inline . fields . field . prompt : before ,
. ui . form . inline . field . prompt : before {
border-width : 0 0 1px 1px ;
bottom : auto ;
right : auto ;
top : 50 % ;
left : 0 ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
States
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Autofilled
--------------------- * /
. ui . form . field . field input : -webkit-autofill {
box-shadow : 0 0 0 100px # FFFFF0 inset ! important ;
border-color : # E5DFA1 ! important ;
}
/* Focus */
. ui . form . field . field input : -webkit-autofill : focus {
box-shadow : 0 0 0 100px # FFFFF0 inset ! important ;
border-color : # D5C315 ! important ;
}
/ * --------------------
Placeholder
--------------------- * /
/* browsers require these rules separate */
. ui . form :: -webkit-input-placeholder {
color : rgba ( 191 , 191 , 191 , 0 . 87 ) ;
}
. ui . form : -ms-input-placeholder {
color : rgba ( 191 , 191 , 191 , 0 . 87 ) ! important ;
}
. ui . form :: -moz-placeholder {
color : rgba ( 191 , 191 , 191 , 0 . 87 ) ;
}
. ui . form : focus :: -webkit-input-placeholder {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ;
}
. ui . form : focus : -ms-input-placeholder {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ! important ;
}
. ui . form : focus :: -moz-placeholder {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ;
}
/ * --------------------
Focus
--------------------- * /
. ui . form input : not ( [ type ] ) : focus ,
. ui . form input [ type = "date" ] : focus ,
. ui . form input [ type = "datetime-local" ] : focus ,
. ui . form input [ type = "email" ] : focus ,
. ui . form input [ type = "number" ] : focus ,
. ui . form input [ type = "password" ] : focus ,
. ui . form input [ type = "search" ] : focus ,
. ui . form input [ type = "tel" ] : focus ,
. ui . form input [ type = "time" ] : focus ,
. ui . form input [ type = "text" ] : focus ,
. ui . form input [ type = "file" ] : focus ,
. ui . form input [ type = "url" ] : focus {
color : rgba ( 0 , 0 , 0 , 0 . 95 ) ;
border-color : # 85B7D9 ;
border-radius : 0 . 28571429rem ;
background : # FFFFFF ;
box-shadow : 0 0 0 0 rgba ( 34 , 36 , 38 , 0 . 35 ) inset ;
}
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input : not ( [ type ] ) : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "date" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "datetime-local" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "email" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "number" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "password" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "search" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "tel" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "time" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "text" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "file" ] : focus ,
. ui . form . ui . action . input : not ( [ class * = "left action" ] ) input [ type = "url" ] : focus {
border-top-right-radius : 0 ;
border-bottom-right-radius : 0 ;
}
. ui . form . ui [ class * = "left action" ] . input input : not ( [ type ] ) ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "date" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "datetime-local" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "email" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "number" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "password" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "search" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "tel" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "time" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "text" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "file" ] ,
. ui . form . ui [ class * = "left action" ] . input input [ type = "url" ] {
border-bottom-left-radius : 0 ;
border-top-left-radius : 0 ;
}
. ui . form textarea : focus {
color : rgba ( 0 , 0 , 0 , 0 . 95 ) ;
border-color : # 85B7D9 ;
border-radius : 0 . 28571429rem ;
background : # FFFFFF ;
box-shadow : 0 0 0 0 rgba ( 34 , 36 , 38 , 0 . 35 ) inset ;
-webkit-appearance : none ;
}
/ * --------------------
States
--------------------- * /
/* On Form */
. ui . form . error . error . message : not ( : empty ) {
display : block ;
}
. ui . form . error . compact . error . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . error . icon . error . message : not ( : empty ) {
display : flex ;
}
/* On Field(s) */
. ui . form . fields . error . error . message : not ( : empty ) ,
. ui . form . field . error . error . message : not ( : empty ) {
display : block ;
}
. ui . form . fields . error . compact . error . message : not ( : empty ) ,
. ui . form . field . error . compact . error . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . fields . error . icon . error . message : not ( : empty ) ,
. ui . form . field . error . icon . error . message : not ( : empty ) {
display : flex ;
}
. ui . ui . form . fields . error . field label ,
. ui . ui . form . field . error label ,
. ui . ui . form . fields . error . field . input ,
. ui . ui . form . field . error . input {
color : # 9F3A38 ;
}
. ui . form . fields . error . field . corner . label ,
. ui . form . field . error . corner . label {
border-color : # 9F3A38 ;
color : # FFFFFF ;
}
. ui . form . fields . error . field textarea ,
. ui . form . fields . error . field select ,
. ui . form . fields . error . field input : not ( [ type ] ) ,
. ui . form . fields . error . field input [ type = "date" ] ,
. ui . form . fields . error . field input [ type = "datetime-local" ] ,
. ui . form . fields . error . field input [ type = "email" ] ,
. ui . form . fields . error . field input [ type = "number" ] ,
. ui . form . fields . error . field input [ type = "password" ] ,
. ui . form . fields . error . field input [ type = "search" ] ,
. ui . form . fields . error . field input [ type = "tel" ] ,
. ui . form . fields . error . field input [ type = "time" ] ,
. ui . form . fields . error . field input [ type = "text" ] ,
. ui . form . fields . error . field input [ type = "file" ] ,
. ui . form . fields . error . field input [ type = "url" ] ,
. ui . form . field . error textarea ,
. ui . form . field . error select ,
. ui . form . field . error input : not ( [ type ] ) ,
. ui . form . field . error input [ type = "date" ] ,
. ui . form . field . error input [ type = "datetime-local" ] ,
. ui . form . field . error input [ type = "email" ] ,
. ui . form . field . error input [ type = "number" ] ,
. ui . form . field . error input [ type = "password" ] ,
. ui . form . field . error input [ type = "search" ] ,
. ui . form . field . error input [ type = "tel" ] ,
. ui . form . field . error input [ type = "time" ] ,
. ui . form . field . error input [ type = "text" ] ,
. ui . form . field . error input [ type = "file" ] ,
. ui . form . field . error input [ type = "url" ] {
color : # 9F3A38 ;
background : # FFF6F6 ;
border-color : # E0B4B4 ;
border-radius : '' ;
box-shadow : none ;
}
. ui . form . field . error textarea : focus ,
. ui . form . field . error select : focus ,
. ui . form . field . error input : not ( [ type ] ) : focus ,
. ui . form . field . error input [ type = "date" ] : focus ,
. ui . form . field . error input [ type = "datetime-local" ] : focus ,
. ui . form . field . error input [ type = "email" ] : focus ,
. ui . form . field . error input [ type = "number" ] : focus ,
. ui . form . field . error input [ type = "password" ] : focus ,
. ui . form . field . error input [ type = "search" ] : focus ,
. ui . form . field . error input [ type = "tel" ] : focus ,
. ui . form . field . error input [ type = "time" ] : focus ,
. ui . form . field . error input [ type = "text" ] : focus ,
. ui . form . field . error input [ type = "file" ] : focus ,
. ui . form . field . error input [ type = "url" ] : focus {
background : # FFF6F6 ;
border-color : # E0B4B4 ;
color : # 9F3A38 ;
box-shadow : none ;
}
/* Preserve Native Select Stylings */
. ui . form . field . error select {
-webkit-appearance : menulist-button ;
}
/ * ------------------
Input State
-------------------- * /
/* Transparent */
. ui . form . field . error . transparent . input input ,
. ui . form . field . error . transparent . input textarea ,
. ui . form . field . error input . transparent ,
. ui . form . field . error textarea . transparent {
background-color : # FFF6F6 ! important ;
color : # 9F3A38 ! important ;
}
/* Autofilled */
. ui . form . error . error input : -webkit-autofill {
box-shadow : 0 0 0 100px # FFFAF0 inset ! important ;
border-color : # E0B4B4 ! important ;
}
/* Placeholder */
. ui . form . error :: -webkit-input-placeholder {
color : # e7bdbc ;
}
. ui . form . error : -ms-input-placeholder {
color : # e7bdbc ! important ;
}
. ui . form . error :: -moz-placeholder {
color : # e7bdbc ;
}
. ui . form . error : focus :: -webkit-input-placeholder {
color : # da9796 ;
}
. ui . form . error : focus : -ms-input-placeholder {
color : # da9796 ! important ;
}
. ui . form . error : focus :: -moz-placeholder {
color : # da9796 ;
}
/ * ------------------
Dropdown State
-------------------- * /
. ui . form . fields . error . field . ui . dropdown ,
. ui . form . fields . error . field . ui . dropdown . item ,
. ui . form . field . error . ui . dropdown ,
. ui . form . field . error . ui . dropdown . text ,
. ui . form . field . error . ui . dropdown . item {
background : # FFF6F6 ;
color : # 9F3A38 ;
}
. ui . form . fields . error . field . ui . dropdown ,
. ui . form . field . error . ui . dropdown {
border-color : # E0B4B4 ! important ;
}
. ui . form . fields . error . field . ui . dropdown : hover ,
. ui . form . field . error . ui . dropdown : hover {
border-color : # E0B4B4 ! important ;
}
. ui . form . fields . error . field . ui . dropdown : hover . menu ,
. ui . form . field . error . ui . dropdown : hover . menu {
border-color : # E0B4B4 ;
}
. ui . form . fields . error . field . ui . multiple . selection . dropdown > . label ,
. ui . form . field . error . ui . multiple . selection . dropdown > . label {
background-color : # EACBCB ;
color : # 9F3A38 ;
}
/* Hover */
. ui . form . fields . error . field . ui . dropdown . menu . item : hover ,
. ui . form . field . error . ui . dropdown . menu . item : hover {
background-color : # FBE7E7 ;
}
/* Selected */
. ui . form . fields . error . field . ui . dropdown . menu . selected . item ,
. ui . form . field . error . ui . dropdown . menu . selected . item {
background-color : # FBE7E7 ;
}
/* Active */
. ui . form . fields . error . field . ui . dropdown . menu . active . item ,
. ui . form . field . error . ui . dropdown . menu . active . item {
background-color : # FDCFCF ! important ;
}
/ * --------------------
Checkbox State
--------------------- * /
. ui . form . fields . error . field . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . field . error . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . fields . error . field . checkbox : not ( . toggle ) : not ( . slider ) . box ,
. ui . form . field . error . checkbox : not ( . toggle ) : not ( . slider ) . box {
color : # 9F3A38 ;
}
. ui . form . fields . error . field . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . field . error . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . fields . error . field . checkbox : not ( . toggle ) : not ( . slider ) . box : before ,
. ui . form . field . error . checkbox : not ( . toggle ) : not ( . slider ) . box : before {
background : # FFF6F6 ;
border-color : # E0B4B4 ;
}
. ui . form . fields . error . field . checkbox label : after ,
. ui . form . field . error . checkbox label : after ,
. ui . form . fields . error . field . checkbox . box : after ,
. ui . form . field . error . checkbox . box : after {
color : # 9F3A38 ;
}
/* On Form */
. ui . form . info . info . message : not ( : empty ) {
display : block ;
}
. ui . form . info . compact . info . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . info . icon . info . message : not ( : empty ) {
display : flex ;
}
/* On Field(s) */
. ui . form . fields . info . info . message : not ( : empty ) ,
. ui . form . field . info . info . message : not ( : empty ) {
display : block ;
}
. ui . form . fields . info . compact . info . message : not ( : empty ) ,
. ui . form . field . info . compact . info . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . fields . info . icon . info . message : not ( : empty ) ,
. ui . form . field . info . icon . info . message : not ( : empty ) {
display : flex ;
}
. ui . ui . form . fields . info . field label ,
. ui . ui . form . field . info label ,
. ui . ui . form . fields . info . field . input ,
. ui . ui . form . field . info . input {
color : # 276F86 ;
}
. ui . form . fields . info . field . corner . label ,
. ui . form . field . info . corner . label {
border-color : # 276F86 ;
color : # FFFFFF ;
}
. ui . form . fields . info . field textarea ,
. ui . form . fields . info . field select ,
. ui . form . fields . info . field input : not ( [ type ] ) ,
. ui . form . fields . info . field input [ type = "date" ] ,
. ui . form . fields . info . field input [ type = "datetime-local" ] ,
. ui . form . fields . info . field input [ type = "email" ] ,
. ui . form . fields . info . field input [ type = "number" ] ,
. ui . form . fields . info . field input [ type = "password" ] ,
. ui . form . fields . info . field input [ type = "search" ] ,
. ui . form . fields . info . field input [ type = "tel" ] ,
. ui . form . fields . info . field input [ type = "time" ] ,
. ui . form . fields . info . field input [ type = "text" ] ,
. ui . form . fields . info . field input [ type = "file" ] ,
. ui . form . fields . info . field input [ type = "url" ] ,
. ui . form . field . info textarea ,
. ui . form . field . info select ,
. ui . form . field . info input : not ( [ type ] ) ,
. ui . form . field . info input [ type = "date" ] ,
. ui . form . field . info input [ type = "datetime-local" ] ,
. ui . form . field . info input [ type = "email" ] ,
. ui . form . field . info input [ type = "number" ] ,
. ui . form . field . info input [ type = "password" ] ,
. ui . form . field . info input [ type = "search" ] ,
. ui . form . field . info input [ type = "tel" ] ,
. ui . form . field . info input [ type = "time" ] ,
. ui . form . field . info input [ type = "text" ] ,
. ui . form . field . info input [ type = "file" ] ,
. ui . form . field . info input [ type = "url" ] {
color : # 276F86 ;
background : # F8FFFF ;
border-color : # A9D5DE ;
border-radius : '' ;
box-shadow : none ;
}
. ui . form . field . info textarea : focus ,
. ui . form . field . info select : focus ,
. ui . form . field . info input : not ( [ type ] ) : focus ,
. ui . form . field . info input [ type = "date" ] : focus ,
. ui . form . field . info input [ type = "datetime-local" ] : focus ,
. ui . form . field . info input [ type = "email" ] : focus ,
. ui . form . field . info input [ type = "number" ] : focus ,
. ui . form . field . info input [ type = "password" ] : focus ,
. ui . form . field . info input [ type = "search" ] : focus ,
. ui . form . field . info input [ type = "tel" ] : focus ,
. ui . form . field . info input [ type = "time" ] : focus ,
. ui . form . field . info input [ type = "text" ] : focus ,
. ui . form . field . info input [ type = "file" ] : focus ,
. ui . form . field . info input [ type = "url" ] : focus {
background : # F8FFFF ;
border-color : # A9D5DE ;
color : # 276F86 ;
box-shadow : none ;
}
/* Preserve Native Select Stylings */
. ui . form . field . info select {
-webkit-appearance : menulist-button ;
}
/ * ------------------
Input State
-------------------- * /
/* Transparent */
. ui . form . field . info . transparent . input input ,
. ui . form . field . info . transparent . input textarea ,
. ui . form . field . info input . transparent ,
. ui . form . field . info textarea . transparent {
background-color : # F8FFFF ! important ;
color : # 276F86 ! important ;
}
/* Autofilled */
. ui . form . info . info input : -webkit-autofill {
box-shadow : 0 0 0 100px # F0FAFF inset ! important ;
border-color : # b3e0e0 ! important ;
}
/* Placeholder */
. ui . form . info :: -webkit-input-placeholder {
color : # 98cfe1 ;
}
. ui . form . info : -ms-input-placeholder {
color : # 98cfe1 ! important ;
}
. ui . form . info :: -moz-placeholder {
color : # 98cfe1 ;
}
. ui . form . info : focus :: -webkit-input-placeholder {
color : # 70bdd6 ;
}
. ui . form . info : focus : -ms-input-placeholder {
color : # 70bdd6 ! important ;
}
. ui . form . info : focus :: -moz-placeholder {
color : # 70bdd6 ;
}
/ * ------------------
Dropdown State
-------------------- * /
. ui . form . fields . info . field . ui . dropdown ,
. ui . form . fields . info . field . ui . dropdown . item ,
. ui . form . field . info . ui . dropdown ,
. ui . form . field . info . ui . dropdown . text ,
. ui . form . field . info . ui . dropdown . item {
background : # F8FFFF ;
color : # 276F86 ;
}
. ui . form . fields . info . field . ui . dropdown ,
. ui . form . field . info . ui . dropdown {
border-color : # A9D5DE ! important ;
}
. ui . form . fields . info . field . ui . dropdown : hover ,
. ui . form . field . info . ui . dropdown : hover {
border-color : # A9D5DE ! important ;
}
. ui . form . fields . info . field . ui . dropdown : hover . menu ,
. ui . form . field . info . ui . dropdown : hover . menu {
border-color : # A9D5DE ;
}
. ui . form . fields . info . field . ui . multiple . selection . dropdown > . label ,
. ui . form . field . info . ui . multiple . selection . dropdown > . label {
background-color : # cce3ea ;
color : # 276F86 ;
}
/* Hover */
. ui . form . fields . info . field . ui . dropdown . menu . item : hover ,
. ui . form . field . info . ui . dropdown . menu . item : hover {
background-color : # e9f2fb ;
}
/* Selected */
. ui . form . fields . info . field . ui . dropdown . menu . selected . item ,
. ui . form . field . info . ui . dropdown . menu . selected . item {
background-color : # e9f2fb ;
}
/* Active */
. ui . form . fields . info . field . ui . dropdown . menu . active . item ,
. ui . form . field . info . ui . dropdown . menu . active . item {
background-color : # cef1fd ! important ;
}
/ * --------------------
Checkbox State
--------------------- * /
. ui . form . fields . info . field . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . field . info . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . fields . info . field . checkbox : not ( . toggle ) : not ( . slider ) . box ,
. ui . form . field . info . checkbox : not ( . toggle ) : not ( . slider ) . box {
color : # 276F86 ;
}
. ui . form . fields . info . field . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . field . info . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . fields . info . field . checkbox : not ( . toggle ) : not ( . slider ) . box : before ,
. ui . form . field . info . checkbox : not ( . toggle ) : not ( . slider ) . box : before {
background : # F8FFFF ;
border-color : # A9D5DE ;
}
. ui . form . fields . info . field . checkbox label : after ,
. ui . form . field . info . checkbox label : after ,
. ui . form . fields . info . field . checkbox . box : after ,
. ui . form . field . info . checkbox . box : after {
color : # 276F86 ;
}
/* On Form */
. ui . form . success . success . message : not ( : empty ) {
display : block ;
}
. ui . form . success . compact . success . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . success . icon . success . message : not ( : empty ) {
display : flex ;
}
/* On Field(s) */
. ui . form . fields . success . success . message : not ( : empty ) ,
. ui . form . field . success . success . message : not ( : empty ) {
display : block ;
}
. ui . form . fields . success . compact . success . message : not ( : empty ) ,
. ui . form . field . success . compact . success . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . fields . success . icon . success . message : not ( : empty ) ,
. ui . form . field . success . icon . success . message : not ( : empty ) {
display : flex ;
}
. ui . ui . form . fields . success . field label ,
. ui . ui . form . field . success label ,
. ui . ui . form . fields . success . field . input ,
. ui . ui . form . field . success . input {
color : # 2C662D ;
}
. ui . form . fields . success . field . corner . label ,
. ui . form . field . success . corner . label {
border-color : # 2C662D ;
color : # FFFFFF ;
}
. ui . form . fields . success . field textarea ,
. ui . form . fields . success . field select ,
. ui . form . fields . success . field input : not ( [ type ] ) ,
. ui . form . fields . success . field input [ type = "date" ] ,
. ui . form . fields . success . field input [ type = "datetime-local" ] ,
. ui . form . fields . success . field input [ type = "email" ] ,
. ui . form . fields . success . field input [ type = "number" ] ,
. ui . form . fields . success . field input [ type = "password" ] ,
. ui . form . fields . success . field input [ type = "search" ] ,
. ui . form . fields . success . field input [ type = "tel" ] ,
. ui . form . fields . success . field input [ type = "time" ] ,
. ui . form . fields . success . field input [ type = "text" ] ,
. ui . form . fields . success . field input [ type = "file" ] ,
. ui . form . fields . success . field input [ type = "url" ] ,
. ui . form . field . success textarea ,
. ui . form . field . success select ,
. ui . form . field . success input : not ( [ type ] ) ,
. ui . form . field . success input [ type = "date" ] ,
. ui . form . field . success input [ type = "datetime-local" ] ,
. ui . form . field . success input [ type = "email" ] ,
. ui . form . field . success input [ type = "number" ] ,
. ui . form . field . success input [ type = "password" ] ,
. ui . form . field . success input [ type = "search" ] ,
. ui . form . field . success input [ type = "tel" ] ,
. ui . form . field . success input [ type = "time" ] ,
. ui . form . field . success input [ type = "text" ] ,
. ui . form . field . success input [ type = "file" ] ,
. ui . form . field . success input [ type = "url" ] {
color : # 2C662D ;
background : # FCFFF5 ;
border-color : # A3C293 ;
border-radius : '' ;
box-shadow : none ;
}
. ui . form . field . success textarea : focus ,
. ui . form . field . success select : focus ,
. ui . form . field . success input : not ( [ type ] ) : focus ,
. ui . form . field . success input [ type = "date" ] : focus ,
. ui . form . field . success input [ type = "datetime-local" ] : focus ,
. ui . form . field . success input [ type = "email" ] : focus ,
. ui . form . field . success input [ type = "number" ] : focus ,
. ui . form . field . success input [ type = "password" ] : focus ,
. ui . form . field . success input [ type = "search" ] : focus ,
. ui . form . field . success input [ type = "tel" ] : focus ,
. ui . form . field . success input [ type = "time" ] : focus ,
. ui . form . field . success input [ type = "text" ] : focus ,
. ui . form . field . success input [ type = "file" ] : focus ,
. ui . form . field . success input [ type = "url" ] : focus {
background : # FCFFF5 ;
border-color : # A3C293 ;
color : # 2C662D ;
box-shadow : none ;
}
/* Preserve Native Select Stylings */
. ui . form . field . success select {
-webkit-appearance : menulist-button ;
}
/ * ------------------
Input State
-------------------- * /
/* Transparent */
. ui . form . field . success . transparent . input input ,
. ui . form . field . success . transparent . input textarea ,
. ui . form . field . success input . transparent ,
. ui . form . field . success textarea . transparent {
background-color : # FCFFF5 ! important ;
color : # 2C662D ! important ;
}
/* Autofilled */
. ui . form . success . success input : -webkit-autofill {
box-shadow : 0 0 0 100px # F0FFF0 inset ! important ;
border-color : # bee0b3 ! important ;
}
/* Placeholder */
. ui . form . success :: -webkit-input-placeholder {
color : # 8fcf90 ;
}
. ui . form . success : -ms-input-placeholder {
color : # 8fcf90 ! important ;
}
. ui . form . success :: -moz-placeholder {
color : # 8fcf90 ;
}
. ui . form . success : focus :: -webkit-input-placeholder {
color : # 6cbf6d ;
}
. ui . form . success : focus : -ms-input-placeholder {
color : # 6cbf6d ! important ;
}
. ui . form . success : focus :: -moz-placeholder {
color : # 6cbf6d ;
}
/ * ------------------
Dropdown State
-------------------- * /
. ui . form . fields . success . field . ui . dropdown ,
. ui . form . fields . success . field . ui . dropdown . item ,
. ui . form . field . success . ui . dropdown ,
. ui . form . field . success . ui . dropdown . text ,
. ui . form . field . success . ui . dropdown . item {
background : # FCFFF5 ;
color : # 2C662D ;
}
. ui . form . fields . success . field . ui . dropdown ,
. ui . form . field . success . ui . dropdown {
border-color : # A3C293 ! important ;
}
. ui . form . fields . success . field . ui . dropdown : hover ,
. ui . form . field . success . ui . dropdown : hover {
border-color : # A3C293 ! important ;
}
. ui . form . fields . success . field . ui . dropdown : hover . menu ,
. ui . form . field . success . ui . dropdown : hover . menu {
border-color : # A3C293 ;
}
. ui . form . fields . success . field . ui . multiple . selection . dropdown > . label ,
. ui . form . field . success . ui . multiple . selection . dropdown > . label {
background-color : # cceacc ;
color : # 2C662D ;
}
/* Hover */
. ui . form . fields . success . field . ui . dropdown . menu . item : hover ,
. ui . form . field . success . ui . dropdown . menu . item : hover {
background-color : # e9fbe9 ;
}
/* Selected */
. ui . form . fields . success . field . ui . dropdown . menu . selected . item ,
. ui . form . field . success . ui . dropdown . menu . selected . item {
background-color : # e9fbe9 ;
}
/* Active */
. ui . form . fields . success . field . ui . dropdown . menu . active . item ,
. ui . form . field . success . ui . dropdown . menu . active . item {
background-color : # dafdce ! important ;
}
/ * --------------------
Checkbox State
--------------------- * /
. ui . form . fields . success . field . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . field . success . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . fields . success . field . checkbox : not ( . toggle ) : not ( . slider ) . box ,
. ui . form . field . success . checkbox : not ( . toggle ) : not ( . slider ) . box {
color : # 2C662D ;
}
. ui . form . fields . success . field . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . field . success . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . fields . success . field . checkbox : not ( . toggle ) : not ( . slider ) . box : before ,
. ui . form . field . success . checkbox : not ( . toggle ) : not ( . slider ) . box : before {
background : # FCFFF5 ;
border-color : # A3C293 ;
}
. ui . form . fields . success . field . checkbox label : after ,
. ui . form . field . success . checkbox label : after ,
. ui . form . fields . success . field . checkbox . box : after ,
. ui . form . field . success . checkbox . box : after {
color : # 2C662D ;
}
/* On Form */
. ui . form . warning . warning . message : not ( : empty ) {
display : block ;
}
. ui . form . warning . compact . warning . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . warning . icon . warning . message : not ( : empty ) {
display : flex ;
}
/* On Field(s) */
. ui . form . fields . warning . warning . message : not ( : empty ) ,
. ui . form . field . warning . warning . message : not ( : empty ) {
display : block ;
}
. ui . form . fields . warning . compact . warning . message : not ( : empty ) ,
. ui . form . field . warning . compact . warning . message : not ( : empty ) {
display : inline-block ;
}
. ui . form . fields . warning . icon . warning . message : not ( : empty ) ,
. ui . form . field . warning . icon . warning . message : not ( : empty ) {
display : flex ;
}
. ui . ui . form . fields . warning . field label ,
. ui . ui . form . field . warning label ,
. ui . ui . form . fields . warning . field . input ,
. ui . ui . form . field . warning . input {
color : # 573A08 ;
}
. ui . form . fields . warning . field . corner . label ,
. ui . form . field . warning . corner . label {
border-color : # 573A08 ;
color : # FFFFFF ;
}
. ui . form . fields . warning . field textarea ,
. ui . form . fields . warning . field select ,
. ui . form . fields . warning . field input : not ( [ type ] ) ,
. ui . form . fields . warning . field input [ type = "date" ] ,
. ui . form . fields . warning . field input [ type = "datetime-local" ] ,
. ui . form . fields . warning . field input [ type = "email" ] ,
. ui . form . fields . warning . field input [ type = "number" ] ,
. ui . form . fields . warning . field input [ type = "password" ] ,
. ui . form . fields . warning . field input [ type = "search" ] ,
. ui . form . fields . warning . field input [ type = "tel" ] ,
. ui . form . fields . warning . field input [ type = "time" ] ,
. ui . form . fields . warning . field input [ type = "text" ] ,
. ui . form . fields . warning . field input [ type = "file" ] ,
. ui . form . fields . warning . field input [ type = "url" ] ,
. ui . form . field . warning textarea ,
. ui . form . field . warning select ,
. ui . form . field . warning input : not ( [ type ] ) ,
. ui . form . field . warning input [ type = "date" ] ,
. ui . form . field . warning input [ type = "datetime-local" ] ,
. ui . form . field . warning input [ type = "email" ] ,
. ui . form . field . warning input [ type = "number" ] ,
. ui . form . field . warning input [ type = "password" ] ,
. ui . form . field . warning input [ type = "search" ] ,
. ui . form . field . warning input [ type = "tel" ] ,
. ui . form . field . warning input [ type = "time" ] ,
. ui . form . field . warning input [ type = "text" ] ,
. ui . form . field . warning input [ type = "file" ] ,
. ui . form . field . warning input [ type = "url" ] {
color : # 573A08 ;
background : # FFFAF3 ;
border-color : # C9BA9B ;
border-radius : '' ;
box-shadow : none ;
}
. ui . form . field . warning textarea : focus ,
. ui . form . field . warning select : focus ,
. ui . form . field . warning input : not ( [ type ] ) : focus ,
. ui . form . field . warning input [ type = "date" ] : focus ,
. ui . form . field . warning input [ type = "datetime-local" ] : focus ,
. ui . form . field . warning input [ type = "email" ] : focus ,
. ui . form . field . warning input [ type = "number" ] : focus ,
. ui . form . field . warning input [ type = "password" ] : focus ,
. ui . form . field . warning input [ type = "search" ] : focus ,
. ui . form . field . warning input [ type = "tel" ] : focus ,
. ui . form . field . warning input [ type = "time" ] : focus ,
. ui . form . field . warning input [ type = "text" ] : focus ,
. ui . form . field . warning input [ type = "file" ] : focus ,
. ui . form . field . warning input [ type = "url" ] : focus {
background : # FFFAF3 ;
border-color : # C9BA9B ;
color : # 573A08 ;
box-shadow : none ;
}
/* Preserve Native Select Stylings */
. ui . form . field . warning select {
-webkit-appearance : menulist-button ;
}
/ * ------------------
Input State
-------------------- * /
/* Transparent */
. ui . form . field . warning . transparent . input input ,
. ui . form . field . warning . transparent . input textarea ,
. ui . form . field . warning input . transparent ,
. ui . form . field . warning textarea . transparent {
background-color : # FFFAF3 ! important ;
color : # 573A08 ! important ;
}
/* Autofilled */
. ui . form . warning . warning input : -webkit-autofill {
box-shadow : 0 0 0 100px # FFFFe0 inset ! important ;
border-color : # e0e0b3 ! important ;
}
/* Placeholder */
. ui . form . warning :: -webkit-input-placeholder {
color : # edad3e ;
}
. ui . form . warning : -ms-input-placeholder {
color : # edad3e ! important ;
}
. ui . form . warning :: -moz-placeholder {
color : # edad3e ;
}
. ui . form . warning : focus :: -webkit-input-placeholder {
color : # e39715 ;
}
. ui . form . warning : focus : -ms-input-placeholder {
color : # e39715 ! important ;
}
. ui . form . warning : focus :: -moz-placeholder {
color : # e39715 ;
}
/ * ------------------
Dropdown State
-------------------- * /
. ui . form . fields . warning . field . ui . dropdown ,
. ui . form . fields . warning . field . ui . dropdown . item ,
. ui . form . field . warning . ui . dropdown ,
. ui . form . field . warning . ui . dropdown . text ,
. ui . form . field . warning . ui . dropdown . item {
background : # FFFAF3 ;
color : # 573A08 ;
}
. ui . form . fields . warning . field . ui . dropdown ,
. ui . form . field . warning . ui . dropdown {
border-color : # C9BA9B ! important ;
}
. ui . form . fields . warning . field . ui . dropdown : hover ,
. ui . form . field . warning . ui . dropdown : hover {
border-color : # C9BA9B ! important ;
}
. ui . form . fields . warning . field . ui . dropdown : hover . menu ,
. ui . form . field . warning . ui . dropdown : hover . menu {
border-color : # C9BA9B ;
}
. ui . form . fields . warning . field . ui . multiple . selection . dropdown > . label ,
. ui . form . field . warning . ui . multiple . selection . dropdown > . label {
background-color : # eaeacc ;
color : # 573A08 ;
}
/* Hover */
. ui . form . fields . warning . field . ui . dropdown . menu . item : hover ,
. ui . form . field . warning . ui . dropdown . menu . item : hover {
background-color : # fbfbe9 ;
}
/* Selected */
. ui . form . fields . warning . field . ui . dropdown . menu . selected . item ,
. ui . form . field . warning . ui . dropdown . menu . selected . item {
background-color : # fbfbe9 ;
}
/* Active */
. ui . form . fields . warning . field . ui . dropdown . menu . active . item ,
. ui . form . field . warning . ui . dropdown . menu . active . item {
background-color : # fdfdce ! important ;
}
/ * --------------------
Checkbox State
--------------------- * /
. ui . form . fields . warning . field . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . field . warning . checkbox : not ( . toggle ) : not ( . slider ) label ,
. ui . form . fields . warning . field . checkbox : not ( . toggle ) : not ( . slider ) . box ,
. ui . form . field . warning . checkbox : not ( . toggle ) : not ( . slider ) . box {
color : # 573A08 ;
}
. ui . form . fields . warning . field . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . field . warning . checkbox : not ( . toggle ) : not ( . slider ) label : before ,
. ui . form . fields . warning . field . checkbox : not ( . toggle ) : not ( . slider ) . box : before ,
. ui . form . field . warning . checkbox : not ( . toggle ) : not ( . slider ) . box : before {
background : # FFFAF3 ;
border-color : # C9BA9B ;
}
. ui . form . fields . warning . field . checkbox label : after ,
. ui . form . field . warning . checkbox label : after ,
. ui . form . fields . warning . field . checkbox . box : after ,
. ui . form . field . warning . checkbox . box : after {
color : # 573A08 ;
}
/ * --------------------
Disabled
--------------------- * /
. ui . form . disabled . fields . field ,
. ui . form . disabled . field ,
. ui . form . field : disabled {
pointer-events : none ;
2020-12-27 13:53:53 +03:00
opacity : var ( --opacity-disabled ) ;
2020-10-28 02:44:06 +03:00
}
. ui . form . field . disabled > label ,
. ui . form . fields . disabled > label {
2020-12-27 13:53:53 +03:00
opacity : var ( --opacity-disabled ) ;
2020-10-28 02:44:06 +03:00
}
. ui . form . field . disabled : disabled {
opacity : 1 ;
}
/ * --------------
Loading
--------------- * /
. ui . loading . form {
position : relative ;
cursor : default ;
pointer-events : none ;
}
. ui . loading . form : before {
position : absolute ;
content : '' ;
top : 0 ;
left : 0 ;
background : rgba ( 255 , 255 , 255 , 0 . 8 ) ;
width : 100 % ;
height : 100 % ;
z-index : 100 ;
}
. ui . loading . form . segments : before {
border-radius : 0 . 28571429rem ;
}
. ui . loading . form : after {
position : absolute ;
content : '' ;
top : 50 % ;
left : 50 % ;
margin : -1 . 5em 0 0 -1 . 5em ;
width : 3em ;
height : 3em ;
animation : loader 0 . 6s infinite linear ;
border : 0 . 2em solid # 767676 ;
border-radius : 500rem ;
box-shadow : 0 0 0 1px transparent ;
visibility : visible ;
z-index : 101 ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Element Types
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Required Field
--------------------- * /
. ui . form . required . fields : not ( . grouped ) > . field > label : after ,
. ui . form . required . fields . grouped > label : after ,
. ui . form . required . field > label : after ,
. ui . form . required . fields : not ( . grouped ) > . field > . checkbox : after ,
. ui . form . required . field > . checkbox : after ,
. ui . form label . required : after {
margin : -0 . 2em 0 0 0 . 2em ;
content : '*' ;
color : # DB2828 ;
}
. ui . form . required . fields : not ( . grouped ) > . field > label : after ,
. ui . form . required . fields . grouped > label : after ,
. ui . form . required . field > label : after ,
. ui . form label . required : after {
display : inline-block ;
vertical-align : top ;
}
. ui . form . required . fields : not ( . grouped ) > . field > . checkbox : after ,
. ui . form . required . field > . checkbox : after {
position : absolute ;
top : 0 ;
left : 100 % ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Variations
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Field Groups
--------------------- * /
/* Grouped Vertically */
. ui . form . grouped . fields {
display : block ;
margin : 0 0 1em ;
}
. ui . form . grouped . fields : last-child {
margin-bottom : 0 ;
}
. ui . form . grouped . fields > label {
margin : 0 0 0 . 28571429rem 0 ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
font-size : 0 . 92857143em ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
text-transform : none ;
}
. ui . form . grouped . fields . field ,
. ui . form . grouped . inline . fields . field {
display : block ;
margin : 0 . 5em 0 ;
padding : 0 ;
}
. ui . form . grouped . inline . fields . ui . checkbox {
margin-bottom : 0 . 4em ;
}
/ * --------------------
Fields
--------------------- * /
/* Split fields */
. ui . form . fields {
display : flex ;
flex-direction : row ;
margin : 0 -0 . 5em 1em ;
}
. ui . form . fields > . field {
flex : 0 1 auto ;
padding-left : 0 . 5em ;
padding-right : 0 . 5em ;
}
. ui . form . fields > . field : first-child {
border-left : none ;
box-shadow : none ;
}
/* Other Combinations */
. ui . form . two . fields > . fields ,
. ui . form . two . fields > . field {
width : 50 % ;
}
. ui . form . three . fields > . fields ,
. ui . form . three . fields > . field {
width : 33 . 33333333 % ;
}
. ui . form . four . fields > . fields ,
. ui . form . four . fields > . field {
width : 25 % ;
}
. ui . form . five . fields > . fields ,
. ui . form . five . fields > . field {
width : 20 % ;
}
. ui . form . six . fields > . fields ,
. ui . form . six . fields > . field {
width : 16 . 66666667 % ;
}
. ui . form . seven . fields > . fields ,
. ui . form . seven . fields > . field {
width : 14 . 28571429 % ;
}
. ui . form . eight . fields > . fields ,
. ui . form . eight . fields > . field {
width : 12 . 5 % ;
}
. ui . form . nine . fields > . fields ,
. ui . form . nine . fields > . field {
width : 11 . 11111111 % ;
}
. ui . form . ten . fields > . fields ,
. ui . form . ten . fields > . field {
width : 10 % ;
}
/* Swap to full width on mobile */
@ media only screen and ( max-width : 767 . 98px ) {
. ui . form . fields {
flex-wrap : wrap ;
margin-bottom : 0 ;
}
. ui . form : not ( . unstackable ) . fields : not ( . unstackable ) > . fields ,
. ui . form : not ( . unstackable ) . fields : not ( . unstackable ) > . field {
width : 100 % ;
margin : 0 0 1em ;
}
}
/* Sizing Combinations */
. ui . form . fields . wide . field {
width : 6 . 25 % ;
padding-left : 0 . 5em ;
padding-right : 0 . 5em ;
}
. ui . form . one . wide . field {
width : 6 . 25 % ;
}
. ui . form . two . wide . field {
width : 12 . 5 % ;
}
. ui . form . three . wide . field {
width : 18 . 75 % ;
}
. ui . form . four . wide . field {
width : 25 % ;
}
. ui . form . five . wide . field {
width : 31 . 25 % ;
}
. ui . form . six . wide . field {
width : 37 . 5 % ;
}
. ui . form . seven . wide . field {
width : 43 . 75 % ;
}
. ui . form . eight . wide . field {
width : 50 % ;
}
. ui . form . nine . wide . field {
width : 56 . 25 % ;
}
. ui . form . ten . wide . field {
width : 62 . 5 % ;
}
. ui . form . eleven . wide . field {
width : 68 . 75 % ;
}
. ui . form . twelve . wide . field {
width : 75 % ;
}
. ui . form . thirteen . wide . field {
width : 81 . 25 % ;
}
. ui . form . fourteen . wide . field {
width : 87 . 5 % ;
}
. ui . form . fifteen . wide . field {
width : 93 . 75 % ;
}
. ui . form . sixteen . wide . field {
width : 100 % ;
}
/ * --------------------
Equal Width
--------------------- * /
. ui [ class * = "equal width" ] . form . fields > . field ,
. ui . form [ class * = "equal width" ] . fields > . field {
width : 100 % ;
flex : 1 1 auto ;
}
/ * --------------------
Inline Fields
--------------------- * /
. ui . form . inline . fields {
margin : 0 0 1em ;
align-items : center ;
}
. ui . form . inline . fields . field {
margin : 0 ;
padding : 0 1em 0 0 ;
}
/* Inline Label */
. ui . form . inline . fields > label ,
. ui . form . inline . fields . field > label ,
. ui . form . inline . fields . field > p ,
. ui . form . inline . field > label ,
. ui . form . inline . field > p {
display : inline-block ;
width : auto ;
margin-top : 0 ;
margin-bottom : 0 ;
vertical-align : baseline ;
font-size : 0 . 92857143em ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
text-transform : none ;
}
/* Grouped Inline Label */
. ui . form . inline . fields > label {
margin : 0 . 035714em 1em 0 0 ;
}
/* Inline Input */
. ui . form . inline . fields . field > input ,
. ui . form . inline . fields . field > select ,
. ui . form . inline . field > input ,
. ui . form . inline . field > select {
display : inline-block ;
width : auto ;
margin-top : 0 ;
margin-bottom : 0 ;
vertical-align : middle ;
font-size : 1em ;
}
. ui . form . inline . fields . field . calendar : not ( . popup ) ,
. ui . form . inline . field . calendar : not ( . popup ) {
display : inline-block ;
}
. ui . form . inline . fields . field . calendar : not ( . popup ) > . input > input ,
. ui . form . inline . field . calendar : not ( . popup ) > . input > input {
width : 13 . 11em ;
}
/* Label */
. ui . form . inline . fields . field > : first-child ,
. ui . form . inline . field > : first-child {
margin : 0 0 . 85714286em 0 0 ;
}
. ui . form . inline . fields . field > : only-child ,
. ui . form . inline . field > : only-child {
margin : 0 ;
}
/* Wide */
. ui . form . inline . fields . wide . field {
display : flex ;
align-items : center ;
}
. ui . form . inline . fields . wide . field > input ,
. ui . form . inline . fields . wide . field > select {
width : 100 % ;
}
/ * --------------------
Sizes
--------------------- * /
. ui . form ,
. ui . form . field . dropdown ,
. ui . form . field . dropdown . menu > . item {
font-size : 1rem ;
}
. ui . mini . form ,
. ui . mini . form . field . dropdown ,
. ui . mini . form . field . dropdown . menu > . item {
font-size : 0 . 78571429rem ;
}
. ui . tiny . form ,
. ui . tiny . form . field . dropdown ,
. ui . tiny . form . field . dropdown . menu > . item {
font-size : 0 . 85714286rem ;
}
. ui . small . form ,
. ui . small . form . field . dropdown ,
. ui . small . form . field . dropdown . menu > . item {
font-size : 0 . 92857143rem ;
}
. ui . large . form ,
. ui . large . form . field . dropdown ,
. ui . large . form . field . dropdown . menu > . item {
font-size : 1 . 14285714rem ;
}
. ui . big . form ,
. ui . big . form . field . dropdown ,
. ui . big . form . field . dropdown . menu > . item {
font-size : 1 . 28571429rem ;
}
. ui . huge . form ,
. ui . huge . form . field . dropdown ,
. ui . huge . form . field . dropdown . menu > . item {
font-size : 1 . 42857143rem ;
}
. ui . massive . form ,
. ui . massive . form . field . dropdown ,
. ui . massive . form . field . dropdown . menu > . item {
font-size : 1 . 71428571rem ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Site Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * !
* # Fomantic-UI - Modal
* http : / / github . com / fomantic / Fomantic-UI /
*
*
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Modal
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
. ui . modal {
position : absolute ;
display : none ;
z-index : 1001 ;
text-align : left ;
background : # FFFFFF ;
border : none ;
box-shadow : 1px 3px 3px 0 rgba ( 0 , 0 , 0 , 0 . 2 ) , 1px 3px 15px 2px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
transform-origin : 50 % 25 % ;
flex : 0 0 auto ;
border-radius : 0 . 28571429rem ;
-webkit-user-select : text ;
-moz-user-select : text ;
user-select : text ;
will-change : top , left , margin , transform , opacity ;
}
. ui . modal > : first-child : not ( . icon ) : not ( . dimmer ) ,
. ui . modal > i . icon : first-child + * ,
. ui . modal > . dimmer : first-child + * : not ( . icon ) ,
. ui . modal > . dimmer : first-child + i . icon + * {
border-top-left-radius : 0 . 28571429rem ;
border-top-right-radius : 0 . 28571429rem ;
}
. ui . modal > : last-child {
border-bottom-left-radius : 0 . 28571429rem ;
border-bottom-right-radius : 0 . 28571429rem ;
}
. ui . modal > . ui . dimmer {
border-radius : inherit ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Close
--------------- * /
. ui . modal > . close {
cursor : pointer ;
position : absolute ;
top : -2 . 5rem ;
right : -2 . 5rem ;
z-index : 1 ;
opacity : 0 . 8 ;
font-size : 1 . 25em ;
color : # FFFFFF ;
width : 2 . 25rem ;
height : 2 . 25rem ;
padding : 0 . 625rem 0 0 0 ;
}
. ui . modal > . close : hover {
opacity : 1 ;
}
/ * --------------
Header
--------------- * /
. ui . modal > . header {
display : block ;
2020-11-08 21:01:38 +03:00
font-family : var ( --fonts-regular ) ;
2020-10-28 02:44:06 +03:00
background : # FFFFFF ;
margin : 0 ;
padding : 1 . 25rem 1 . 5rem ;
box-shadow : none ;
color : rgba ( 0 , 0 , 0 , 0 . 85 ) ;
border-bottom : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
. ui . modal > . header : not ( . ui ) {
font-size : 1 . 42857143rem ;
line-height : 1 . 28571429em ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
}
/ * --------------
Content
--------------- * /
. ui . modal > . content {
display : block ;
width : 100 % ;
font-size : 1em ;
line-height : 1 . 4 ;
padding : 1 . 5rem ;
background : # FFFFFF ;
}
. ui . modal > . image . content {
display : flex ;
flex-direction : row ;
}
/* Image */
. ui . modal > . content > . image {
display : block ;
flex : 0 1 auto ;
width : '' ;
align-self : start ;
max-width : 100 % ;
}
. ui . modal > [ class * = "top aligned" ] {
align-self : start ;
}
. ui . modal > [ class * = "middle aligned" ] {
align-self : center ;
}
. ui . modal > [ class * = "stretched" ] {
align-self : stretch ;
}
/* Description */
. ui . modal > . content > . description {
display : block ;
flex : 1 0 auto ;
min-width : 0 ;
align-self : start ;
}
. ui . modal > . content > i . icon + . description ,
. ui . modal > . content > . image + . description {
flex : 0 1 auto ;
min-width : '' ;
width : auto ;
padding-left : 2em ;
}
/*rtl:ignore*/
. ui . modal > . content > . image > i . icon {
margin : 0 ;
opacity : 1 ;
width : auto ;
line-height : 1 ;
font-size : 8rem ;
}
/ * --------------
Actions
--------------- * /
. ui . modal > . actions {
background : # F9FAFB ;
padding : 1rem 1rem ;
border-top : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
text-align : right ;
}
. ui . modal . actions > . button : not ( . fluid ) {
margin-left : 0 . 75em ;
}
. ui . basic . modal > . actions {
border-top : none ;
}
/ * -------------------
Responsive
-------------------- * /
/* Modal Width */
@ media only screen and ( max-width : 767 . 98px ) {
. ui . modal : not ( . fullscreen ) {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . modal : not ( . fullscreen ) {
width : 88 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . modal : not ( . fullscreen ) {
width : 850px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . modal : not ( . fullscreen ) {
width : 900px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . modal : not ( . fullscreen ) {
width : 950px ;
margin : 0 0 0 0 ;
}
}
/* Tablet and Mobile */
@ media only screen and ( max-width : 991 . 98px ) {
. ui . modal > . header {
padding-right : 2 . 25rem ;
}
. ui . modal > . close {
top : 1 . 0535rem ;
right : 1rem ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
}
}
/* Mobile */
@ media only screen and ( max-width : 767 . 98px ) {
. ui . modal > . header {
padding : 0 . 75rem 1rem ! important ;
padding-right : 2 . 25rem ! important ;
}
. ui . overlay . fullscreen . modal > . content . content . content {
min-height : calc ( 100vh - 8 . 1rem ) ;
}
. ui . overlay . fullscreen . modal > . scrolling . content . content . content {
max-height : calc ( 100vh - 8 . 1rem ) ;
}
. ui . modal > . content {
display : block ;
padding : 1rem ! important ;
}
. ui . modal > . close {
top : 0 . 5rem ! important ;
right : 0 . 5rem ! important ;
}
/*rtl:ignore*/
. ui . modal . image . content {
flex-direction : column ;
}
. ui . modal > . content > . image {
display : block ;
max-width : 100 % ;
margin : 0 auto ! important ;
text-align : center ;
padding : 0 0 1rem ! important ;
}
. ui . modal > . content > . image > i . icon {
font-size : 5rem ;
text-align : center ;
}
/*rtl:ignore*/
. ui . modal > . content > . description {
display : block ;
width : 100 % ! important ;
margin : 0 ! important ;
padding : 1rem 0 ! important ;
box-shadow : none ;
}
/* Let Buttons Stack */
. ui . modal > . actions {
padding : 1rem 1rem 0rem ! important ;
}
. ui . modal . actions > . buttons ,
. ui . modal . actions > . button {
margin-bottom : 1rem ;
}
}
/ * --------------
Coupling
--------------- * /
. ui . inverted . dimmer > . ui . modal {
box-shadow : 1px 3px 10px 2px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Types
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
. ui . basic . modal {
background-color : transparent ;
border : none ;
border-radius : 0 ;
box-shadow : none ! important ;
color : # FFFFFF ;
}
. ui . basic . modal > . header ,
. ui . basic . modal > . content ,
. ui . basic . modal > . actions {
background-color : transparent ;
}
. ui . basic . modal > . header {
color : # FFFFFF ;
border-bottom : none ;
}
. ui . basic . modal > . close {
top : 1rem ;
right : 1 . 5rem ;
color : # FFFFFF ;
}
. ui . inverted . dimmer > . basic . modal {
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
}
. ui . inverted . dimmer > . ui . basic . modal > . header {
color : rgba ( 0 , 0 , 0 , 0 . 85 ) ;
}
/* Resort to margin positioning if legacy */
. ui . legacy . legacy . modal ,
. ui . legacy . legacy . page . dimmer > . ui . modal {
left : 50 % ! important ;
}
. ui . legacy . legacy . modal : not ( . aligned ) ,
. ui . legacy . legacy . page . dimmer > . ui . modal : not ( . aligned ) {
top : 50 % ;
}
. ui . legacy . legacy . page . dimmer > . ui . scrolling . modal : not ( . aligned ) ,
. ui . page . dimmer > . ui . scrolling . legacy . legacy . modal : not ( . aligned ) ,
. ui . top . aligned . legacy . legacy . page . dimmer > . ui . modal : not ( . aligned ) ,
. ui . top . aligned . dimmer > . ui . legacy . legacy . modal : not ( . aligned ) {
top : auto ;
}
. ui . legacy . overlay . fullscreen . modal {
margin-top : -2rem ! important ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
States
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
. ui . loading . modal {
display : block ;
visibility : hidden ;
z-index : -1 ;
}
. ui . active . modal {
display : block ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Variations
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Aligned
--------------- * /
. modals . dimmer . ui . top . aligned . modal {
top : 5vh ;
}
. modals . dimmer . ui . bottom . aligned . modal {
bottom : 5vh ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. modals . dimmer . ui . top . aligned . modal {
top : 1rem ;
}
. modals . dimmer . ui . bottom . aligned . modal {
bottom : 1rem ;
}
}
/ * --------------
Scrolling
--------------- * /
/* Scrolling Dimmer */
. scrolling . dimmable . dimmed {
overflow : hidden ;
}
. scrolling . dimmable > . dimmer {
justify-content : flex-start ;
position : fixed ;
}
. scrolling . dimmable . dimmed > . dimmer {
overflow : auto ;
-webkit-overflow-scrolling : touch ;
}
. modals . dimmer . ui . scrolling . modal : not ( . fullscreen ) {
margin : 2rem auto ;
}
/* Fix for Firefox, Edge, IE11 */
. modals . dimmer . ui . scrolling . modal : not ( [ class * = "overlay fullscreen" ] ) :: after {
content : '\00A0' ;
position : absolute ;
height : 2rem ;
}
/* Undetached Scrolling */
. scrolling . undetached . dimmable . dimmed {
overflow : auto ;
-webkit-overflow-scrolling : touch ;
}
. scrolling . undetached . dimmable . dimmed > . dimmer {
overflow : hidden ;
}
. scrolling . undetached . dimmable . ui . scrolling . modal : not ( . fullscreen ) {
position : absolute ;
left : 50 % ;
}
/* Scrolling Content */
. ui . modal > . scrolling . content {
max-height : calc ( 80vh - 10rem ) ;
overflow : auto ;
}
. ui . overlay . fullscreen . modal > . content {
min-height : calc ( 100vh - 9 . 1rem ) ;
}
. ui . overlay . fullscreen . modal > . scrolling . content {
max-height : calc ( 100vh - 9 . 1rem ) ;
}
/ * --------------
Full Screen
--------------- * /
. ui . fullscreen . modal {
width : 95 % ;
left : 2 . 5 % ;
margin : 1em auto ;
}
. ui . overlay . fullscreen . modal {
width : 100 % ;
left : 0 ;
margin : 0 auto ;
top : 0 ;
border-radius : 0 ;
}
. ui . modal > . close . inside + . header ,
. ui . fullscreen . modal > . header {
padding-right : 2 . 25rem ;
}
. ui . modal > . close . inside ,
. ui . fullscreen . modal > . close {
top : 1 . 0535rem ;
right : 1rem ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
}
. ui . basic . fullscreen . modal > . close {
color : # FFFFFF ;
}
/ * --------------
Size
--------------- * /
. ui . modal {
font-size : 1rem ;
}
. ui . mini . modal > . header : not ( . ui ) {
font-size : 1 . 3em ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . mini . modal {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . mini . modal {
width : 35 . 2 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . mini . modal {
width : 340px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . mini . modal {
width : 360px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . mini . modal {
width : 380px ;
margin : 0 0 0 0 ;
}
}
. ui . tiny . modal > . header : not ( . ui ) {
font-size : 1 . 3em ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . tiny . modal {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . tiny . modal {
width : 52 . 8 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . tiny . modal {
width : 510px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . tiny . modal {
width : 540px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . tiny . modal {
width : 570px ;
margin : 0 0 0 0 ;
}
}
. ui . small . modal > . header : not ( . ui ) {
font-size : 1 . 3em ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . small . modal {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . small . modal {
width : 70 . 4 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . small . modal {
width : 680px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . small . modal {
width : 720px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . small . modal {
width : 760px ;
margin : 0 0 0 0 ;
}
}
. ui . large . modal > . header : not ( . ui ) {
font-size : 1 . 6em ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . large . modal {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . large . modal {
width : 88 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . large . modal {
width : 1020px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . large . modal {
width : 1080px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . large . modal {
width : 1140px ;
margin : 0 0 0 0 ;
}
}
. ui . big . modal > . header : not ( . ui ) {
font-size : 1 . 6em ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . big . modal {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . big . modal {
width : 88 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . big . modal {
width : 1190px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . big . modal {
width : 1260px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . big . modal {
width : 1330px ;
margin : 0 0 0 0 ;
}
}
. ui . huge . modal > . header : not ( . ui ) {
font-size : 1 . 6em ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . huge . modal {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . huge . modal {
width : 88 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . huge . modal {
width : 1360px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . huge . modal {
width : 1440px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . huge . modal {
width : 1520px ;
margin : 0 0 0 0 ;
}
}
. ui . massive . modal > . header : not ( . ui ) {
font-size : 1 . 8em ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . massive . modal {
width : 95 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . massive . modal {
width : 88 % ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . massive . modal {
width : 1530px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1200px ) {
. ui . massive . modal {
width : 1620px ;
margin : 0 0 0 0 ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . massive . modal {
width : 1710px ;
margin : 0 0 0 0 ;
}
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Site Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * !
* # Fomantic-UI - Search
* http : / / github . com / fomantic / Fomantic-UI /
*
*
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Search
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
. ui . search {
position : relative ;
}
. ui . search > . prompt {
margin : 0 ;
outline : none ;
-webkit-appearance : none ;
-webkit-tap-highlight-color : rgba ( 255 , 255 , 255 , 0 ) ;
text-shadow : none ;
font-style : normal ;
font-weight : normal ;
line-height : 1 . 21428571em ;
padding : 0 . 67857143em 1em ;
font-size : 1em ;
background : # FFFFFF ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
box-shadow : 0 0 0 0 transparent inset ;
transition : background-color 0 . 1s ease , color 0 . 1s ease , box-shadow 0 . 1s ease , border-color 0 . 1s ease ;
}
. ui . search . prompt {
border-radius : 500rem ;
}
/ * --------------
Icon
--------------- * /
. ui . search . prompt ~ . search . icon {
cursor : pointer ;
}
/ * --------------
Results
--------------- * /
. ui . search > . results {
display : none ;
position : absolute ;
top : 100 % ;
left : 0 ;
transform-origin : center top ;
white-space : normal ;
text-align : left ;
text-transform : none ;
background : # FFFFFF ;
margin-top : 0 . 5em ;
width : 18em ;
border-radius : 0 . 28571429rem ;
box-shadow : 0 2px 4px 0 rgba ( 34 , 36 , 38 , 0 . 12 ) , 0 2px 10px 0 rgba ( 34 , 36 , 38 , 0 . 15 ) ;
border : 1px solid # D4D4D5 ;
z-index : 998 ;
}
. ui . search > . results > : first-child {
border-radius : 0 . 28571429rem 0 . 28571429rem 0 0 ;
}
. ui . search > . results > : last-child {
border-radius : 0 0 0 . 28571429rem 0 . 28571429rem ;
}
/ * --------------
Result
--------------- * /
. ui . search > . results . result {
cursor : pointer ;
display : block ;
overflow : hidden ;
font-size : 1em ;
padding : 0 . 85714286em 1 . 14285714em ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
line-height : 1 . 33 ;
border-bottom : 1px solid rgba ( 34 , 36 , 38 , 0 . 1 ) ;
}
. ui . search > . results . result : last-child {
border-bottom : none ! important ;
}
/* Image */
. ui . search > . results . result . image {
float : right ;
overflow : hidden ;
background : none ;
width : 5em ;
height : 3em ;
border-radius : 0 . 25em ;
}
. ui . search > . results . result . image img {
display : block ;
width : auto ;
height : 100 % ;
}
/ * --------------
Info
--------------- * /
. ui . search > . results . result . image + . content {
margin : 0 6em 0 0 ;
}
. ui . search > . results . result . title {
margin : -0 . 14285714em 0 0 ;
2020-11-08 21:01:38 +03:00
font-family : var ( --fonts-regular ) ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
font-size : 1em ;
color : rgba ( 0 , 0 , 0 , 0 . 85 ) ;
}
. ui . search > . results . result . description {
margin-top : 0 ;
font-size : 0 . 92857143em ;
color : rgba ( 0 , 0 , 0 , 0 . 4 ) ;
}
. ui . search > . results . result . price {
float : right ;
color : # 21BA45 ;
}
/ * --------------
Message
--------------- * /
. ui . search > . results > . message {
padding : 1em 1em ;
}
. ui . search > . results > . message . header {
2020-11-08 21:01:38 +03:00
font-family : var ( --fonts-regular ) ;
2020-10-28 02:44:06 +03:00
font-size : 1rem ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
}
. ui . search > . results > . message . description {
margin-top : 0 . 25rem ;
font-size : 1em ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
}
/* View All Results */
. ui . search > . results > . action {
display : block ;
border-top : none ;
background : # F3F4F5 ;
padding : 0 . 92857143em 1em ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
text-align : center ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
States
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Focus
--------------------- * /
. ui . search > . prompt : focus {
border-color : rgba ( 34 , 36 , 38 , 0 . 35 ) ;
background : # FFFFFF ;
color : rgba ( 0 , 0 , 0 , 0 . 95 ) ;
}
/ * --------------------
Loading
--------------------- * /
. ui . loading . search . input > i . icon : 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 . 1 ) ;
}
. ui . loading . search . input > i . icon : after {
position : absolute ;
content : '' ;
top : 50 % ;
left : 50 % ;
margin : -0 . 64285714em 0 0 -0 . 64285714em ;
width : 1 . 28571429em ;
height : 1 . 28571429em ;
animation : loader 0 . 6s infinite linear ;
border : 0 . 2em solid # 767676 ;
border-radius : 500rem ;
box-shadow : 0 0 0 1px transparent ;
}
/ * --------------
Hover
--------------- * /
. ui . search > . results . result : hover ,
. ui . category . search > . results . category . result : hover {
background : # F9FAFB ;
}
. ui . search . action : hover : not ( div ) {
background : # E0E0E0 ;
}
/ * --------------
Active
--------------- * /
. ui . category . search > . results . category . active {
background : # F3F4F5 ;
}
. ui . category . search > . results . category . active > . name {
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
}
. ui . search > . results . result . active ,
. ui . category . search > . results . category . result . active {
position : relative ;
border-left-color : rgba ( 34 , 36 , 38 , 0 . 1 ) ;
background : # F3F4F5 ;
box-shadow : none ;
}
. ui . search > . results . result . active . title {
color : rgba ( 0 , 0 , 0 , 0 . 85 ) ;
}
. ui . search > . results . result . active . description {
color : rgba ( 0 , 0 , 0 , 0 . 85 ) ;
}
/ * --------------------
Disabled
---------------------- * /
/* Disabled */
. ui . disabled . search {
cursor : default ;
pointer-events : none ;
2020-12-27 13:53:53 +03:00
opacity : var ( --opacity-disabled ) ;
2020-10-28 02:44:06 +03:00
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Types
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Selection
--------------- * /
. ui . search . selection . prompt {
border-radius : 0 . 28571429rem ;
}
/* Remove input */
. ui . search . selection > . icon . input > . remove . icon {
pointer-events : none ;
position : absolute ;
left : auto ;
opacity : 0 ;
color : '' ;
top : 0 ;
right : 0 ;
transition : color 0 . 1s ease , opacity 0 . 1s ease ;
}
. ui . search . selection > . icon . input > . active . remove . icon {
cursor : pointer ;
opacity : 0 . 8 ;
pointer-events : auto ;
}
. ui . search . selection > . icon . input : not ( [ class * = "left icon" ] ) > . icon ~ . remove . icon {
right : 1 . 85714em ;
}
. ui . search . selection > . icon . input > . remove . icon : hover {
opacity : 1 ;
color : # DB2828 ;
}
/ * --------------
Category
--------------- * /
. ui . category . search . results {
width : 28em ;
}
. ui . category . search . results . animating ,
. ui . category . search . results . visible {
display : table ;
}
/* Category */
. ui . category . search > . results . category {
display : table-row ;
background : # F3F4F5 ;
box-shadow : none ;
transition : background 0 . 1s ease , border-color 0 . 1s ease ;
}
/* Last Category */
. ui . category . search > . results . category : last-child {
border-bottom : none ;
}
/* First / Last */
. ui . category . search > . results . category : first-child . name + . result {
border-radius : 0 0 . 28571429rem 0 0 ;
}
. ui . category . search > . results . category : last-child . result : last-child {
border-radius : 0 0 0 . 28571429rem 0 ;
}
/* Category Result Name */
. ui . category . search > . results . category > . name {
display : table-cell ;
text-overflow : ellipsis ;
width : 100px ;
white-space : nowrap ;
background : transparent ;
2020-11-08 21:01:38 +03:00
font-family : var ( --fonts-regular ) ;
2020-10-28 02:44:06 +03:00
font-size : 1em ;
padding : 0 . 4em 1em ;
2020-11-15 23:58:16 +03:00
font-weight : 500 ;
2020-10-28 02:44:06 +03:00
color : rgba ( 0 , 0 , 0 , 0 . 4 ) ;
border-bottom : 1px solid rgba ( 34 , 36 , 38 , 0 . 1 ) ;
}
/* Category Result */
. ui . category . search > . results . category . results {
display : table-cell ;
background : # FFFFFF ;
border-left : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
border-bottom : 1px solid rgba ( 34 , 36 , 38 , 0 . 1 ) ;
}
. ui . category . search > . results . category . result {
border-bottom : 1px solid rgba ( 34 , 36 , 38 , 0 . 1 ) ;
transition : background 0 . 1s ease , border-color 0 . 1s ease ;
padding : 0 . 85714286em 1 . 14285714em ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Variations
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * -------------------
Scrolling
-------------------- * /
. ui . scrolling . search > . results ,
. ui . search . long > . results ,
. ui . search . short > . results {
overflow-x : hidden ;
overflow-y : auto ;
backface-visibility : hidden ;
-webkit-overflow-scrolling : touch ;
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . scrolling . search > . results {
max-height : 12 . 17714286em ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . scrolling . search > . results {
max-height : 18 . 26571429em ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . scrolling . search > . results {
max-height : 24 . 35428571em ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . scrolling . search > . results {
max-height : 36 . 53142857em ;
}
}
@ media only screen and ( max-width : 767 . 98px ) {
. ui . search . short > . results {
max-height : 12 . 17714286em ;
}
. ui . search [ class * = "very short" ] > . results {
max-height : 9 . 13285714em ;
}
. ui . search . long > . results {
max-height : 24 . 35428571em ;
}
. ui . search [ class * = "very long" ] > . results {
max-height : 36 . 53142857em ;
}
}
@ media only screen and ( min-width : 768px ) {
. ui . search . short > . results {
max-height : 18 . 26571429em ;
}
. ui . search [ class * = "very short" ] > . results {
max-height : 13 . 69928571em ;
}
. ui . search . long > . results {
max-height : 36 . 53142857em ;
}
. ui . search [ class * = "very long" ] > . results {
max-height : 54 . 79714286em ;
}
}
@ media only screen and ( min-width : 992px ) {
. ui . search . short > . results {
max-height : 24 . 35428571em ;
}
. ui . search [ class * = "very short" ] > . results {
max-height : 18 . 26571429em ;
}
. ui . search . long > . results {
max-height : 48 . 70857143em ;
}
. ui . search [ class * = "very long" ] > . results {
max-height : 73 . 06285714em ;
}
}
@ media only screen and ( min-width : 1920px ) {
. ui . search . short > . results {
max-height : 36 . 53142857em ;
}
. ui . search [ class * = "very short" ] > . results {
max-height : 27 . 39857143em ;
}
. ui . search . long > . results {
max-height : 73 . 06285714em ;
}
. ui . search [ class * = "very long" ] > . results {
max-height : 109 . 59428571em ;
}
}
/ * -------------------
Left / Right
-------------------- * /
. ui [ class * = "left aligned" ] . search > . results {
right : auto ;
left : 0 ;
}
. ui [ class * = "right aligned" ] . search > . results {
right : 0 ;
left : auto ;
}
/ * --------------
Fluid
--------------- * /
. ui . fluid . search . results {
width : 100 % ;
}
/ * --------------
Sizes
--------------- * /
. ui . search {
font-size : 1em ;
}
. ui . mini . search {
font-size : 0 . 78571429em ;
}
. ui . tiny . search {
font-size : 0 . 85714286em ;
}
. ui . small . search {
font-size : 0 . 92857143em ;
}
. ui . large . search {
font-size : 1 . 14285714em ;
}
. ui . big . search {
font-size : 1 . 28571429em ;
}
. ui . huge . search {
font-size : 1 . 42857143em ;
}
. ui . massive . search {
font-size : 1 . 71428571em ;
}
/ * --------------
Mobile
--------------- * /
@ media only screen and ( max-width : 767 . 98px ) {
. ui . search . results {
max-width : calc ( 100vw - 2rem ) ;
}
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Site Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * !
* # Fomantic-UI - Tab
* http : / / github . com / fomantic / Fomantic-UI /
*
*
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
UI Tabs
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
. ui . tab {
display : none ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
States
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Active
--------------------- * /
. ui . tab . active ,
. ui . tab . open {
display : block ;
}
/ * --------------------
Loading
--------------------- * /
. ui . tab . loading {
position : relative ;
overflow : hidden ;
display : block ;
min-height : 250px ;
}
. ui . tab . loading * {
position : relative ! important ;
left : -10000px ! important ;
}
. ui . tab . loading : before ,
. ui . tab . loading . segment : before {
position : absolute ;
content : '' ;
top : 50 % ;
left : 50 % ;
margin : -1 . 25em 0 0 -1 . 25em ;
width : 2 . 5em ;
height : 2 . 5em ;
border-radius : 500rem ;
border : 0 . 2em solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
}
. ui . tab . loading : after ,
. ui . tab . loading . segment : after {
position : absolute ;
content : '' ;
top : 50 % ;
left : 50 % ;
margin : -1 . 25em 0 0 -1 . 25em ;
width : 2 . 5em ;
height : 2 . 5em ;
animation : loader 0 . 6s infinite linear ;
border : 0 . 2em solid # 767676 ;
border-radius : 500rem ;
box-shadow : 0 0 0 1px transparent ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Tab Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
User Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /