|
|
|
@ -98,24 +98,204 @@ |
|
|
|
; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/******************************* |
|
|
|
States |
|
|
|
*******************************/ |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Count |
|
|
|
Active |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.count.button { |
|
|
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; |
|
|
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; |
|
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; |
|
|
|
.ui.buttons .active.button, |
|
|
|
.ui.active.button { |
|
|
|
background-color: #EAEAEA; |
|
|
|
background-image: none; |
|
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; |
|
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Hover |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.button:not(.loading):hover { |
|
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); |
|
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
} |
|
|
|
.ui.button.active:hover { |
|
|
|
background-image: none; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.button:hover .icon, |
|
|
|
.ui.button.hover .icon { |
|
|
|
opacity: 0.85; |
|
|
|
} |
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Down |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.button:not(.loading):active, |
|
|
|
.ui.active.button:not(.loading):active { |
|
|
|
background-color: #F1F1F1; |
|
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; |
|
|
|
} |
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Loading |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.loading.button { |
|
|
|
position: relative; |
|
|
|
cursor: default; |
|
|
|
|
|
|
|
color: transparent !important; |
|
|
|
|
|
|
|
-webkit-transition: all 0s linear; |
|
|
|
-moz-transition: all 0s linear; |
|
|
|
-o-transition: all 0s linear; |
|
|
|
-ms-transition: all 0s linear; |
|
|
|
transition: all 0s linear; |
|
|
|
} |
|
|
|
.ui.loading.button:after { |
|
|
|
position: absolute; |
|
|
|
top: 0em; |
|
|
|
left: 0em; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
content: ''; |
|
|
|
background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.labeled.icon.loading.button .icon { |
|
|
|
background-color: transparent; |
|
|
|
-webkit-box-shadow: none; |
|
|
|
-moz-box-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.count.button > .count { |
|
|
|
/*------------------- |
|
|
|
Disabled |
|
|
|
--------------------*/ |
|
|
|
|
|
|
|
.ui.disabled.button, |
|
|
|
.ui.disabled.button:hover, |
|
|
|
.ui.disabled.button.active { |
|
|
|
background-color: #DDDDDD; |
|
|
|
cursor: default; |
|
|
|
color: rgba(0, 0, 0, 0.5); |
|
|
|
opacity: 0.3 !important; |
|
|
|
background-image: none !important; |
|
|
|
-webkit-box-shadow: none !important; |
|
|
|
-moz-box-shadow: none !important; |
|
|
|
box-shadow: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
/******************************* |
|
|
|
Types |
|
|
|
*******************************/ |
|
|
|
|
|
|
|
/*------------------- |
|
|
|
Animated |
|
|
|
--------------------*/ |
|
|
|
|
|
|
|
.ui.animated.button { |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.animated.button .visible.content { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.ui.animated.button .hidden.content { |
|
|
|
position: absolute; |
|
|
|
background-color: #FFFFFF; |
|
|
|
border: 1px solid #F0F0F0; |
|
|
|
margin: -0.8em -1.5em; |
|
|
|
padding: 0.8em 1.5em; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* Horizontal */ |
|
|
|
.ui.animated.button .visible.content, |
|
|
|
.ui.animated.button .hidden.content { |
|
|
|
transition: right 0.3s ease 0s; |
|
|
|
} |
|
|
|
.ui.animated.button .visible.content { |
|
|
|
left: auto; |
|
|
|
right: 0%; |
|
|
|
} |
|
|
|
.ui.animated.button .hidden.content { |
|
|
|
top: 50%; |
|
|
|
left: auto; |
|
|
|
right: -100%; |
|
|
|
transform: translateY(-50%); |
|
|
|
} |
|
|
|
.ui.animated.button:hover .visible.content { |
|
|
|
left: auto; |
|
|
|
right: 200%; |
|
|
|
} |
|
|
|
.ui.animated.button:hover .hidden.content { |
|
|
|
left: auto; |
|
|
|
right: 0%; |
|
|
|
} |
|
|
|
|
|
|
|
/* Vertical */ |
|
|
|
.ui.vertical.animated.button .visible.content, |
|
|
|
.ui.vertical.animated.button .hidden.content { |
|
|
|
transition: top 0.3s ease 0s, transform 0.3s ease 0s; |
|
|
|
} |
|
|
|
.ui.vertical.animated.button .visible.content { |
|
|
|
transform: translateY(0%); |
|
|
|
right: auto; |
|
|
|
} |
|
|
|
.ui.vertical.animated.button .hidden.content { |
|
|
|
top: -100%; |
|
|
|
left: 0%; |
|
|
|
right: auto; |
|
|
|
} |
|
|
|
.ui.vertical.animated.button:hover .visible.content { |
|
|
|
transform: translateY(200%); |
|
|
|
right: auto; |
|
|
|
} |
|
|
|
.ui.vertical.animated.button:hover .hidden.content { |
|
|
|
top: 50%; |
|
|
|
right: auto; |
|
|
|
} |
|
|
|
|
|
|
|
/* Fade */ |
|
|
|
.ui.fade.animated.button .visible.content, |
|
|
|
.ui.fade.animated.button .hidden.content { |
|
|
|
transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; |
|
|
|
} |
|
|
|
.ui.fade.animated.button .visible.content { |
|
|
|
left: auto; |
|
|
|
right: auto; |
|
|
|
opacity: 1; |
|
|
|
transform: scale(1); |
|
|
|
} |
|
|
|
.ui.fade.animated.button .hidden.content { |
|
|
|
opacity: 0; |
|
|
|
left: 0%; |
|
|
|
right: auto; |
|
|
|
transform: translateY(-50%) scale(1.2); |
|
|
|
} |
|
|
|
.ui.fade.animated.button:hover .visible.content { |
|
|
|
left: auto; |
|
|
|
right: auto; |
|
|
|
opacity: 0; |
|
|
|
transform: scale(0.7); |
|
|
|
} |
|
|
|
.ui.fade.animated.button:hover .hidden.content { |
|
|
|
left: 0%; |
|
|
|
right: auto; |
|
|
|
opacity: 1; |
|
|
|
transform: translateY(-50%) scale(1); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*------------------- |
|
|
|
Primary |
|
|
|
--------------------*/ |
|
|
|
@ -272,112 +452,11 @@ |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/******************************* |
|
|
|
States |
|
|
|
*******************************/ |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Active |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.buttons .active.button, |
|
|
|
.ui.active.button { |
|
|
|
background-color: #EAEAEA; |
|
|
|
background-image: none; |
|
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; |
|
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Hover |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.button:hover { |
|
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); |
|
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
} |
|
|
|
.ui.button.active:hover { |
|
|
|
background-image: none; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.button:hover .icon, |
|
|
|
.ui.button.hover .icon { |
|
|
|
opacity: 0.85; |
|
|
|
} |
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Down |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.button:active, |
|
|
|
.ui.active.button:active { |
|
|
|
background-color: #F1F1F1; |
|
|
|
color: rgba(0, 0, 0, 0.7); |
|
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; |
|
|
|
} |
|
|
|
|
|
|
|
/*-------------- |
|
|
|
Loading |
|
|
|
---------------*/ |
|
|
|
|
|
|
|
.ui.loading.button { |
|
|
|
position: relative; |
|
|
|
cursor: default; |
|
|
|
|
|
|
|
background-color: #F3F3F3 !important; |
|
|
|
color: transparent !important; |
|
|
|
background-image: none !important; |
|
|
|
|
|
|
|
-webkit-box-shadow: none !important; |
|
|
|
-moz-box-shadow: none !important; |
|
|
|
box-shadow: none !important; |
|
|
|
|
|
|
|
-webkit-transition: all 0s linear; |
|
|
|
-moz-transition: all 0s linear; |
|
|
|
-o-transition: all 0s linear; |
|
|
|
-ms-transition: all 0s linear; |
|
|
|
transition: all 0s linear; |
|
|
|
} |
|
|
|
.ui.loading.button:after { |
|
|
|
position: absolute; |
|
|
|
top: 0em; |
|
|
|
left: 0em; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
content: ''; |
|
|
|
background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.labeled.icon.loading.button .icon { |
|
|
|
background-color: transparent; |
|
|
|
-webkit-box-shadow: none; |
|
|
|
-moz-box-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
/*------------------- |
|
|
|
Disabled |
|
|
|
--------------------*/ |
|
|
|
|
|
|
|
.ui.disabled.button { |
|
|
|
cursor: default; |
|
|
|
color: #DDDDDD !important; |
|
|
|
background-color: rgba(50, 50, 50, 0.05) !important; |
|
|
|
background-image: none !important; |
|
|
|
|
|
|
|
-webkit-box-shadow: none !important; |
|
|
|
-moz-box-shadow: none !important; |
|
|
|
box-shadow: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/******************************* |
|
|
|
Variations |
|
|
|
*******************************/ |
|
|
|
|
|
|
|
|
|
|
|
/*------------------- |
|
|
|
Floated |
|
|
|
--------------------*/ |
|
|
|
@ -404,39 +483,77 @@ |
|
|
|
font-size: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.buttons.mini .button, |
|
|
|
.ui.mini.buttons .button, |
|
|
|
.ui.mini.buttons .or, |
|
|
|
.ui.mini.button { |
|
|
|
font-size: 0.8rem; |
|
|
|
} |
|
|
|
.ui.mini.buttons .button, |
|
|
|
.ui.mini.button { |
|
|
|
font-size: 0.8125rem; |
|
|
|
padding: 0.6em 0.8em 0.73em; |
|
|
|
} |
|
|
|
.ui.mini.icon.buttons .button, |
|
|
|
.ui.mini.buttons .icon.button { |
|
|
|
padding: 0.6em 0.6em 0.73em; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.tiny.buttons .button, |
|
|
|
.ui.tiny.buttons .or, |
|
|
|
.ui.tiny.button { |
|
|
|
font-size: 0.875rem; |
|
|
|
} |
|
|
|
.ui.tiny.buttons .button, |
|
|
|
.ui.tiny.buttons .button, |
|
|
|
.ui.tiny.button { |
|
|
|
padding: 0.6em 0.8em 0.73em; |
|
|
|
} |
|
|
|
.ui.tiny.icon.buttons .button, |
|
|
|
.ui.tiny.buttons .icon.button { |
|
|
|
padding: 0.6em 0.6em 0.73em; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.small.buttons .button, |
|
|
|
.ui.small.buttons .or, |
|
|
|
.ui.small.button { |
|
|
|
font-size: 0.875rem; |
|
|
|
} |
|
|
|
|
|
|
|
.ui.large.buttons .button, |
|
|
|
.ui.large.buttons .or, |
|
|
|
.ui.large.button { |
|
|
|
font-size: 1.125rem; |
|
|
|
} |
|
|
|
.ui.big.buttons .button, |
|
|
|
.ui.big.buttons .or, |
|
|
|
.ui.big.button { |
|
|
|
font-size: 1.25rem; |
|
|
|
} |
|
|
|
.ui.huge.buttons .button, |
|
|
|
.ui.huge.buttons .or, |
|
|
|
.ui.huge.button { |
|
|
|
font-size: 1.375rem; |
|
|
|
} |
|
|
|
.ui.massive.buttons .button, |
|
|
|
.ui.massive.buttons .or, |
|
|
|
.ui.massive.button { |
|
|
|
font-size: 1.5rem; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
/* Or resize */ |
|
|
|
.ui.tiny.buttons .or:before, |
|
|
|
.ui.mini.buttons .or:before { |
|
|
|
width: 1.45em; |
|
|
|
height: 1.55em; |
|
|
|
line-height: 1.4; |
|
|
|
margin-left: -0.725em; |
|
|
|
margin-top: -0.25em; |
|
|
|
} |
|
|
|
.ui.tiny.buttons .or:after, |
|
|
|
.ui.mini.buttons .or:after { |
|
|
|
height: 1.45em; |
|
|
|
} |
|
|
|
|
|
|
|
/* loading */ |
|
|
|
.ui.huge.loading.button:after { |
|
|
|
background-image: url(../images/loader-small.gif); |
|
|
|
@ -473,9 +590,8 @@ |
|
|
|
} |
|
|
|
.ui.icon.buttons .button > .icon, |
|
|
|
.ui.icon.button > .icon { |
|
|
|
opacity: 1; |
|
|
|
opacity: 0.9; |
|
|
|
margin: 0em; |
|
|
|
vertical-align: top; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -508,6 +624,7 @@ |
|
|
|
|
|
|
|
.ui.basic.buttons .button:hover, |
|
|
|
.ui.basic.button:hover { |
|
|
|
background-image: none; |
|
|
|
color: #7F7F7F !important; |
|
|
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; |
|
|
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; |
|
|
|
@ -730,7 +847,7 @@ |
|
|
|
position: relative; |
|
|
|
float: left; |
|
|
|
width: 0.3em; |
|
|
|
height: 1em; |
|
|
|
height: 1.1em; |
|
|
|
z-index: 3; |
|
|
|
} |
|
|
|
.ui.buttons .or:before { |
|
|
|
@ -740,13 +857,13 @@ |
|
|
|
content: 'or'; |
|
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
margin-top: -0.15em; |
|
|
|
margin-top: -0.1em; |
|
|
|
margin-left: -0.9em; |
|
|
|
|
|
|
|
width: 1.8em; |
|
|
|
height: 1.8em; |
|
|
|
|
|
|
|
line-height: 1.66; |
|
|
|
line-height: 1.55; |
|
|
|
color: #AAAAAA; |
|
|
|
font-style: normal; |
|
|
|
font-weight: normal; |
|
|
|
@ -756,6 +873,8 @@ |
|
|
|
-webkit-border-radius: 500px; |
|
|
|
border-radius: 500px; |
|
|
|
|
|
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|
|
|
|
|
|
|
-webkit-box-sizing: border-box; |
|
|
|
-moz-box-sizing: border-box; |
|
|
|
-ms-box-sizing: border-box; |
|
|
|
@ -768,11 +887,12 @@ |
|
|
|
content: ' '; |
|
|
|
|
|
|
|
width: 0.3em; |
|
|
|
height: 1.8em; |
|
|
|
height: 1.7em; |
|
|
|
|
|
|
|
background-color: transparent; |
|
|
|
border-top: 0.6em solid #FFFFFF; |
|
|
|
border-bottom: 0.6em solid #FFFFFF; |
|
|
|
border-top: 0.5em solid #FFFFFF; |
|
|
|
border-bottom: 0.5em solid #FFFFFF; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* Fluid Or */ |
|
|
|
|
jlukic
11 years ago