diff --git a/src/elements/button.less b/src/elements/button.less index b1a6bf97a..278c70f72 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -193,6 +193,155 @@ } +/*-------------- + Error +---------------*/ + +.ui.button.error, +.ui.button.error.hover, +.ui.button.error.down { + cursor: default; + + position: relative !important; + background-color: #D95C5C !important; + color: transparent !important; + text-shadow: none; + + -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.button.error .icon { + opacity: 1; + color: #FFFFFF; +} +.ui.button.error:after { + position: absolute; + left: 50%; + content: "Error"; + margin-left: -1.8em; + color: #FFFFFF; + + -webkit-animation: button-text 0.5s; + -moz-animation: button-text 0.5s; + -ms-animation: button-text 0.5s; + -o-animation: button-text 0.5s; + animation: button-text 0.5s; +} +.ui.button.error .icon:before { + font-family: 'Icons'; + content: '\26a0'; +} + +/*-------------- + Success +---------------*/ + +.ui.button.success, +.ui.button.success.hover, +.ui.button.success.down { + position: relative !important; + background-color: #5BBD72 !important; + color: transparent !important; +} +.ui.button.success .icon { + opacity: 1; + color: #FFFFFF; +} +.ui.button.success .icon:before { + font-family: 'Icons'; + content: '\2611'; +} +.ui.button.success:after { + position: absolute; + left: 50%; + content: "Success"; + margin-left: -2em; + color: #FFFFFF; + + -webkit-animation: button-text 0.5s; + -moz-animation: button-text 0.5s; + -ms-animation: button-text 0.5s; + -o-animation: button-text 0.5s; + animation: button-text 0.5s; +} + +@-webkit-keyframes button-text { + 0% { + -webkit-transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes button-text { + 0% { + -moz-transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@keyframes button-text { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/*-------------- + Loading +---------------*/ + +.ui.button.loading, +.ui.button.loading.hover { + position: relative; + cursor: default; + + background-color: #F3F3F3 !important; + color: transparent !important; + text-shadow: none !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.button.loading: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.button.loading .icon { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + /*------------------- Disabled --------------------*/ @@ -489,6 +638,7 @@ .ui.icon.button > .icon { opacity: 1; margin: 0em; + vertical-align: top; } @@ -644,9 +794,9 @@ .ui.button.attached { display: block; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -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.button.attached.top { @@ -981,155 +1131,4 @@ -moz-border-radius: 0px 0px 0.3125em 0.3125em; -webkit-border-radius: 0px 0px 0.3125em 0.3125em; border-radius: 0px 0px 0.3125em 0.3125em; -} - - - -/*-------------- - Loading ----------------*/ - -.ui.button.loading, -.ui.button.loading.hover { - position: relative; - cursor: default; - - background-color: #F3F3F3 !important; - color: transparent !important; - text-shadow: none !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.button.loading: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.button.loading .icon { - background-color: transparent; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} - -/*-------------- - Error ----------------*/ - -.ui.button.error, -.ui.button.error.hover, -.ui.button.error.down { - cursor: default; - - position: relative !important; - background-color: #D95C5C !important; - color: transparent !important; - text-shadow: none; - - -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.button.error .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.button.error:after { - position: absolute; - left: 50%; - content: "Error"; - margin-left: -1.8em; - color: #FFFFFF; - - -webkit-animation: button-text 0.5s; - -moz-animation: button-text 0.5s; - -ms-animation: button-text 0.5s; - -o-animation: button-text 0.5s; - animation: button-text 0.5s; -} -.ui.button.error .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} - -/*-------------- - Success ----------------*/ - -.ui.button.success, -.ui.button.success.hover, -.ui.button.success.down { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.button.success .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.button.success .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.button.success:after { - position: absolute; - left: 50%; - content: "Success"; - margin-left: -2em; - color: #FFFFFF; - - -webkit-animation: button-text 0.5s; - -moz-animation: button-text 0.5s; - -ms-animation: button-text 0.5s; - -o-animation: button-text 0.5s; - animation: button-text 0.5s; -} - -@-webkit-keyframes button-text { - 0% { - -webkit-transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes button-text { - 0% { - -moz-transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@keyframes button-text { - 0% { - transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - transform: translateY(0); - } } \ No newline at end of file