From 5f864996a5da861ccc4f24def0fdcf39af76f760 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 19 Sep 2013 15:14:34 -0400 Subject: [PATCH] removes undocumented error state for buttons, adds in draft components --- build/less/elements/button.less | 104 -- build/uncompressed/elements/button.css | 93 -- node/src/documents/elements/button.html | 45 +- node/src/draft/less/carousel.js | 327 +++++ node/src/draft/less/carousel.less | 71 + node/src/draft/less/extra.transitions.less | 1197 +++++++++++++++++ node/src/draft/less/sitemap.less | 46 + .../files/release/less/elements/button.less | 104 -- .../release/uncompressed/elements/button.css | 93 -- spec/button.json | 95 +- src/elements/button.less | 104 -- 11 files changed, 1726 insertions(+), 553 deletions(-) create mode 100755 node/src/draft/less/carousel.js create mode 100755 node/src/draft/less/carousel.less create mode 100755 node/src/draft/less/extra.transitions.less create mode 100755 node/src/draft/less/sitemap.less diff --git a/build/less/elements/button.less b/build/less/elements/button.less index 6a946e3ed..34fe6083f 100644 --- a/build/less/elements/button.less +++ b/build/less/elements/button.less @@ -295,110 +295,6 @@ box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; } -/*-------------- - Error ----------------*/ - -.ui.error.button { - 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.error.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.error.button: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.error.button .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} - -/*-------------- - Success ----------------*/ - -.ui.success.button { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.success.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.success.button .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.success.button: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 ---------------*/ diff --git a/build/uncompressed/elements/button.css b/build/uncompressed/elements/button.css index 788fadd74..ceaf96704 100644 --- a/build/uncompressed/elements/button.css +++ b/build/uncompressed/elements/button.css @@ -198,99 +198,6 @@ -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; } -/*-------------- - Error ----------------*/ -.ui.error.button { - 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.error.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.error.button: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.error.button .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} -/*-------------- - Success ----------------*/ -.ui.success.button { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.success.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.success.button .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.success.button: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 ---------------*/ diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html index c91b5240d..57db78cab 100755 --- a/node/src/documents/elements/button.html +++ b/node/src/documents/elements/button.html @@ -59,22 +59,6 @@ type : 'UI Element' -
-

Primary

-

A button can be formatted to greatly emphasize interaction with a particular button

-
- Add to Cart -
-
- -
-

Secondary

-

A button can be formatted to show slightly emphasis a particular button

-
- Save -
-
-

Social

A button can be formatted to link to a social website

@@ -153,24 +137,6 @@ type : 'UI Element'
Loading Button
- -

Variations

@@ -202,6 +168,17 @@ type : 'UI Element'
+
+

Ordinality

+

A button can be formatted to show different levels of emphasis

+
+ Add to Cart +
+
+ Save +
+
+

Basic

A basic button removes all unnecessary formatting

diff --git a/node/src/draft/less/carousel.js b/node/src/draft/less/carousel.js new file mode 100755 index 000000000..5b230ae9c --- /dev/null +++ b/node/src/draft/less/carousel.js @@ -0,0 +1,327 @@ +/* ****************************** + Semantic Module: Carousel + Author: Jack Lukic + Notes: First Commit May 28, 2013 + + A carousel alternates between + several pieces of content in sequence. + +****************************** */ + +;(function ( $, window, document, undefined ) { + +$.fn.carousel = function(parameters) { + var + $allModules = $(this), + + settings = $.extend(true, {}, $.fn.carousel.settings, parameters), + + eventNamespace = '.' + settings.namespace, + moduleNamespace = 'module-' + settings.namespace, + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + invokedResponse + ; + + $allModules + .each(function() { + var + $module = $(this), + $arrows = $(settings.selector.arrows), + $leftArrow = $(settings.selector.leftArrow), + $rightArrow = $(settings.selector.rightArrow), + $content = $(settings.selector.content), + $navigation = $(settings.selector.navigation), + $navItem = $(settings.selector.navItem), + + selector = $module.selector || '', + element = this, + instance = $module.data('module-' + settings.namespace), + + className = settings.className, + namespace = settings.namespace, + errors = settings.errors, + module + ; + + module = { + + initialize: function() { + module.openingAnimation(); + module.marquee.autoAdvance(); + $leftArrow + .on('click', module.marquee.left) + ; + $rightArrow + .on('click', module.marquee.right) + ; + $navItem + .on('click', module.marquee.change) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module for', $module); + $module + .off(eventNamespace) + ; + }, + + left: function() { + var + $activeContent = $content.filter('.' + className.active), + currentIndex = $content.index($activeContent), + imageCount = $content.size(), + newIndex = (currentIndex - 1 != -1) + ? (currentIndex - 1) + : (imageCount - 1) + ; + $navItem + .eq(newIndex) + .trigger('click') + ; + }, + + right: function() { + var + $activeContent = $content.filter('.' + className.active), + currentIndex = $content.index($activeContent), + imageCount = $content.size(), + newIndex = (currentIndex + 1 != imageCount) + ? (currentIndex + 1) + : 0 + ; + $navItem + .eq(newIndex) + .trigger('click') + ; + }, + + change: function() { + var + $selected = $(this), + selectedIndex = $navItem.index($selected), + $selectedImage = $content.eq(selectedIndex) + ; + module.marquee.autoAdvance(); + $selected + .addClass('active') + .siblings() + .removeClass('active') + ; + $selectedImage + .addClass('active animated fadeIn') + .siblings('.' + className.active) + .removeClass('animated fadeIn scaleIn') + .animate({ + opacity: 0 + }, 500, function(){ + $(this) + .removeClass('active') + .removeAttr('style') + ; + }) + ; + }, + + autoAdvance: function() { + clearInterval(module.timer); + module.timer = setInterval(module.marquee.right, settings.duration); + }, + + setting: function(name, value) { + if(value !== undefined) { + if( $.isPlainObject(name) ) { + module.verbose('Modifying settings object', name, value); + $.extend(true, settings, name); + } + else { + module.verbose('Modifying setting', name, value); + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if(value !== undefined) { + if( $.isPlainObject(name) ) { + module.verbose('Modifying internal property', name, value); + $.extend(true, module, name); + } + else { + module.verbose('Changing internal method to', value); + module[name] = value; + } + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Element' : element, + 'Name' : message[0], + 'Arguments' : message[1] || 'None', + 'Execution Time' : executionTime + }); + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 100); + } + }, + display: function() { + var + title = settings.moduleName, + caption = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)', + totalExecutionTime = 0 + ; + if(moduleSelector) { + title += ' Performance (' + moduleSelector + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + $.each(performance, function(index, data) { + totalExecutionTime += data['Execution Time']; + }); + console.table(performance); + } + else { + $.each(performance, function(index, data) { + totalExecutionTime += data['Execution Time']; + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.log('Total Execution Time:', totalExecutionTime +'ms'); + console.groupEnd(); + performance = []; + time = false; + } + } + }, + invoke: function(query, passedArguments, context) { + var + maxDepth, + found + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && instance !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { + instance = instance[value]; + return true; + } + else if( instance[value] !== undefined ) { + found = instance[value]; + return true; + } + module.error(errors.method); + return false; + }); + } + if ( $.isFunction( found ) ) { + return found.apply(context, passedArguments); + } + return found || false; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + }) + ; + return (invokedResponse !== undefined) + ? invokedResponse + : this + ; +}; + +$.fn.carousel.settings = { + + name : 'Carousel', + namespace : 'carousel', + + verbose : true, + debug : true, + performance : true, + + // delegated event context + duration: 5000, + + errors : { + method : 'The method you called is not defined.' + }, + + selector : { + arrows : '.arrow', + leftArrow : '.left.arrow', + rightArrow : '.right.arrow', + content : '.content', + navigation : '.navigation', + navItem : '.navigation .icon' + }, + + className : { + active : 'active' + } + +}; + +})( jQuery, window , document ); \ No newline at end of file diff --git a/node/src/draft/less/carousel.less b/node/src/draft/less/carousel.less new file mode 100755 index 000000000..229280881 --- /dev/null +++ b/node/src/draft/less/carousel.less @@ -0,0 +1,71 @@ +/* + * # Semantic Carousel + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: June 03, 2013 + */ + + +/******************************* + Carousel +*******************************/ + +.ui.carousel { + position: relative; + overflow: hidden; +} +.ui.carousel .arrow { + position: absolute; + font-size: 1.5em; + top: 50%; + left: 0%; + margin-top: -0.5em; + z-index: 10; +} +.ui.carousel .right.arrow { + left: auto; + right: 0%; +} + +.ui.carousel .slides { + position: relative; + width: 200%; + width: 9999px; + overflow: hidden; + font-size: 0em; +} +.ui.carousel .slides .slide { + display: inline-block; + height: 100%; + font-size: 1rem; +} +.ui.carousel .slides .slide > img { + display: block; + width: 100%; +} + + +/*-------------------- + Loading State +---------------------*/ + +/* On Form */ +.ui.carousel.loading { + position: relative; +} +.ui.carousel.loading:after { + position: absolute; + top: 0%; + left: 0%; + content: ''; + + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; + visibility: visible; +} \ No newline at end of file diff --git a/node/src/draft/less/extra.transitions.less b/node/src/draft/less/extra.transitions.less new file mode 100755 index 000000000..efd732ad6 --- /dev/null +++ b/node/src/draft/less/extra.transitions.less @@ -0,0 +1,1197 @@ +/******************************* + Semantic Module: Transition + Author: Jack Lukic + Notes: First Commit March 25, 2013 + + CSS animation definitions for + transition module + +*******************************/ + +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css +*/ + + +.ui.transition { + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + + -webkit-animation-iteration-count: 1; + -moz-animation-iteration-count: 1; + -ms-animation-iteration-count: 1; + -o-animation-iteration-count: 1; + animation-iteration-count: 1; + + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -ms-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + + animation-timing-function: ease; + -webkit-animation-timing-function: ease; + + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); +} + +/******************************* + States +*******************************/ + +/* Loading */ +.ui.loading.transition { + position: absolute; + top: -999999px; + left: -99999px; +} + +/* Hidden */ +.ui.hidden.transition { + display: none; +} + +/* Visible */ +.ui.visible.transition { + display: block; + visibility: visible; +} + + +/* Direction */ +.ui.out.transition { + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; + -o-animation-direction: reverse; + animation-direction: reverse; +} + +/* Disabled */ +.ui.disabled.transition { + -webkit-animation-play-state: paused; + -moz-animation-play-state: paused; + -ms-animation-play-state: paused; + -o-animation-play-state: paused; + animation-play-state: paused; +} + +/******************************* + Variations +*******************************/ + +.ui.looping.transition { + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Moving +---------------*/ + +.ui.move.down.transition.in, +.ui.move.down.transition.out { + animation-name: moveDown; + -webkit-animation-name: moveDown; + + animation-duration: 1s; + -webkit-animation-duration: 1s; + + animation-timing-function: ease; + -webkit-animation-timing-function: ease; +} + +@keyframes moveDown { + 0% { + transform: translateY(-100%); + } + 50%{ + transform: translateY(8%); + } + 65%{ + transform: translateY(-4%); + } + 80%{ + transform: translateY(4%); + } + 95%{ + transform: translateY(-2%); + } + 100% { + transform: translateY(0%); + } +} + +@-webkit-keyframes moveDown { + 0% { + -webkit-transform: translateY(-100%); + } + 50%{ + -webkit-transform: translateY(8%); + } + 65%{ + -webkit-transform: translateY(-4%); + } + 80%{ + -webkit-transform: translateY(4%); + } + 95%{ + -webkit-transform: translateY(-2%); + } + 100% { + -webkit-transform: translateY(0%); + } +} + +.ui.move.up.transition.in, +.ui.move.up.transition.out { + animation-name: moveUp; + -webkit-animation-name: moveUp; + + animation-duration: 1s; + -webkit-animation-duration: 1s; + + animation-timing-function: ease; + -webkit-animation-timing-function: ease; +} + +@keyframes moveUp { + 0% { + transform: translateY(100%); + } + 50%{ + transform: translateY(-8%); + } + 65%{ + transform: translateY(4%); + } + 80%{ + transform: translateY(-4%); + } + 95%{ + transform: translateY(2%); + } + 100% { + transform: translateY(0%); + } +} + +@-webkit-keyframes moveUp { + 0% { + -webkit-transform: translateY(100%); + } + 50%{ + -webkit-transform: translateY(-8%); + } + 65%{ + -webkit-transform: translateY(4%); + } + 80%{ + -webkit-transform: translateY(-4%); + } + 95%{ + -webkit-transform: translateY(2%); + } + 100% { + -webkit-transform: translateY(0%); + } +} + + +.ui.move.left.transition.in, +.ui.move.left.transition.out { + animation-name: moveLeft; + -webkit-animation-name: moveLeft; + + animation-duration: 1s; + -webkit-animation-duration: 1s; + + animation-timing-function: ease-in-out; + -webkit-animation-timing-function: ease-in-out; + + visibility: visible !important; +} + +@keyframes moveLeft { + 0% { + transform: translateX(150%); + } + 50%{ + ransform: translateX(-8%); + } + 65%{ + transform: translateX(4%); + } + 80%{ + transform: translateX(-4%); + } + 95%{ + transform: translateX(2%); + } + 100% { + transform: translateX(0%); + } +} + +@-webkit-keyframes moveLeft { + 0% { + -webkit-transform: translateX(150%); + } + 50%{ + -webkit-transform: translateX(-8%); + } + 65%{ + -webkit-transform: translateX(4%); + } + 80%{ + -webkit-transform: translateX(-4%); + } + 95%{ + -webkit-transform: translateX(2%); + } + 100% { + -webkit-transform: translateX(0%); + } +} + + +.ui.move.right.transition.in, +.ui.move.right.transition.out { + animation-name: moveRight; + -webkit-animation-name: moveRight; + + animation-duration: 1s; + -webkit-animation-duration: 1s; + + animation-timing-function: ease-in-out; + -webkit-animation-timing-function: ease-in-out; + + visibility: visible !important; +} + +@keyframes moveRight { + 0% { + transform: translateX(-150%); + } + 50%{ + transform: translateX(8%); + } + 65%{ + transform: translateX(-4%); + } + 80%{ + transform: translateX(4%); + } + 95%{ + transform: translateX(-2%); + } + 100% { + transform: translateX(0%); + } +} + +@-webkit-keyframes moveRight { + 0% { + -webkit-transform: translateX(-150%); + } + 50%{ + -webkit-transform: translateX(8%); + } + 65%{ + -webkit-transform: translateX(-4%); + } + 80%{ + -webkit-transform: translateX(4%); + } + 95%{ + -webkit-transform: translateX(-2%); + } + 100% { + -webkit-transform: translateX(0%); + } +} + +/* +============================================== +slideExpandUp +============================================== +*/ + + +.slideExpandUp{ + animation-name: slideExpandUp; + -webkit-animation-name: slideExpandUp; + + animation-duration: 1.6s; + -webkit-animation-duration: 1.6s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease -out; + + visibility: visible !important; +} + +@keyframes slideExpandUp { + 0% { + transform: translateY(100%) scaleX(0.5); + } + 30%{ + transform: translateY(-8%) scaleX(0.5); + } + 40%{ + transform: translateY(2%) scaleX(0.5); + } + 50%{ + transform: translateY(0%) scaleX(1.1); + } + 60%{ + transform: translateY(0%) scaleX(0.9); + } + 70% { + transform: translateY(0%) scaleX(1.05); + } + 80%{ + transform: translateY(0%) scaleX(0.95); + } + 90% { + transform: translateY(0%) scaleX(1.02); + } + 100%{ + transform: translateY(0%) scaleX(1); + } +} + +@-webkit-keyframes slideExpandUp { + 0% { + -webkit-transform: translateY(100%) scaleX(0.5); + } + 30%{ + -webkit-transform: translateY(-8%) scaleX(0.5); + } + 40%{ + -webkit-transform: translateY(2%) scaleX(0.5); + } + 50%{ + -webkit-transform: translateY(0%) scaleX(1.1); + } + 60%{ + -webkit-transform: translateY(0%) scaleX(0.9); + } + 70% { + -webkit-transform: translateY(0%) scaleX(1.05); + } + 80%{ + -webkit-transform: translateY(0%) scaleX(0.95); + } + 90% { + -webkit-transform: translateY(0%) scaleX(1.02); + } + 100%{ + -webkit-transform: translateY(0%) scaleX(1); + } +} + +/* +============================================== +expandUp +============================================== +*/ + + +.expandUp{ + animation-name: expandUp; + -webkit-animation-name: expandUp; + + animation-duration: 0.7s; + -webkit-animation-duration: 0.7s; + + animation-timing-function: ease; + -webkit-animation-timing-function: ease; + + visibility: visible !important; +} + +@keyframes expandUp { + 0% { + transform: translateY(100%) scale(0.6) scaleY(0.5); + } + 60%{ + transform: translateY(-7%) scaleY(1.12); + } + 75%{ + transform: translateY(3%); + } + 100% { + transform: translateY(0%) scale(1) scaleY(1); + } +} + +@-webkit-keyframes expandUp { + 0% { + -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); + } + 60%{ + -webkit-transform: translateY(-7%) scaleY(1.12); + } + 75%{ + -webkit-transform: translateY(3%); + } + 100% { + -webkit-transform: translateY(0%) scale(1) scaleY(1); + } +} + +/* +============================================== +fadeIn +============================================== +*/ + +.fadeIn{ + animation-name: fadeIn; + -webkit-animation-name: fadeIn; + + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + + animation-timing-function: ease-in-out; + -webkit-animation-timing-function: ease-in-out; + + visibility: visible !important; +} + +@keyframes fadeIn { + 0% { + transform: scale(0); + opacity: 0.0; + } + 60% { + transform: scale(1.1); + } + 80% { + transform: scale(0.9); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +@-webkit-keyframes fadeIn { + 0% { + -webkit-transform: scale(0); + opacity: 0.0; + } + 60% { + -webkit-transform: scale(1.1); + } + 80% { + -webkit-transform: scale(0.9); + opacity: 1; + } + 100% { + -webkit-transform: scale(1); + opacity: 1; + } +} + +/* +============================================== +expandOpen +============================================== +*/ + + +.expandOpen{ + animation-name: expandOpen; + -webkit-animation-name: expandOpen; + + animation-duration: 1.2s; + -webkit-animation-duration: 1.2s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; + + visibility: visible !important; +} + +@keyframes expandOpen { + 0% { + transform: scale(1.8); + } + 50% { + transform: scale(0.95); + } + 80% { + transform: scale(1.05); + } + 90% { + transform: scale(0.98); + } + 100% { + transform: scale(1); + } +} + +@-webkit-keyframes expandOpen { + 0% { + -webkit-transform: scale(1.8); + } + 50% { + -webkit-transform: scale(0.95); + } + 80% { + -webkit-transform: scale(1.05); + } + 90% { + -webkit-transform: scale(0.98); + } + 100% { + -webkit-transform: scale(1); + } +} + +/* +============================================== +bigEntrance +============================================== +*/ + + +.bigEntrance{ + animation-name: bigEntrance; + -webkit-animation-name: bigEntrance; + + animation-duration: 1.6s; + -webkit-animation-duration: 1.6s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; + + visibility: visible !important; +} + +@keyframes bigEntrance { + 0% { + transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); + opacity: 0.2; + } + 30% { + transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); + opacity: 1; + } + 45% { + transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); + opacity: 1; + } + 60% { + transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); + opacity: 1; + } + 75% { + transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); + opacity: 1; + } + 90% { + transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); + opacity: 1; + } + 100% { + transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); + opacity: 1; + } +} + +@-webkit-keyframes bigEntrance { + 0% { + -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); + opacity: 0.2; + } + 30% { + -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); + opacity: 1; + } + 45% { + -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); + opacity: 1; + } + 60% { + -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); + opacity: 1; + } + 75% { + -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); + opacity: 1; + } + 90% { + -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); + opacity: 1; + } + 100% { + -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); + opacity: 1; + } +} + +/* +============================================== +hatch +============================================== +*/ + +.hatch{ + animation-name: hatch; + -webkit-animation-name: hatch; + + animation-duration: 2s; + -webkit-animation-duration: 2s; + + animation-timing-function: ease-in-out; + -webkit-animation-timing-function: ease-in-out; + + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; + + visibility: visible !important; +} + +@keyframes hatch { + 0% { + transform: rotate(0deg) scaleY(0.6); + } + 20% { + transform: rotate(-2deg) scaleY(1.05); + } + 35% { + transform: rotate(2deg) scaleY(1); + } + 50% { + transform: rotate(-2deg); + } + 65% { + transform: rotate(1deg); + } + 80% { + transform: rotate(-1deg); + } + 100% { + transform: rotate(0deg); + } +} + +@-webkit-keyframes hatch { + 0% { + -webkit-transform: rotate(0deg) scaleY(0.6); + } + 20% { + -webkit-transform: rotate(-2deg) scaleY(1.05); + } + 35% { + -webkit-transform: rotate(2deg) scaleY(1); + } + 50% { + -webkit-transform: rotate(-2deg); + } + 65% { + -webkit-transform: rotate(1deg); + } + 80% { + -webkit-transform: rotate(-1deg); + } + 100% { + -webkit-transform: rotate(0deg); + } +} + + +/* +============================================== +bounce +============================================== +*/ + + +.bounce{ + animation-name: bounce; + -webkit-animation-name: bounce; + + animation-duration: 1.6s; + -webkit-animation-duration: 1.6s; + + animation-timing-function: ease; + -webkit-animation-timing-function: ease; + + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; +} + +@keyframes bounce { + 0% { + transform: translateY(0%) scaleY(0.6); + } + 60%{ + transform: translateY(-100%) scaleY(1.1); + } + 70%{ + transform: translateY(0%) scaleY(0.95) scaleX(1.05); + } + 80%{ + transform: translateY(0%) scaleY(1.05) scaleX(1); + } + 90%{ + transform: translateY(0%) scaleY(0.95) scaleX(1); + } + 100%{ + transform: translateY(0%) scaleY(1) scaleX(1); + } +} + +@-webkit-keyframes bounce { + 0% { + -webkit-transform: translateY(0%) scaleY(0.6); + } + 60%{ + -webkit-transform: translateY(-100%) scaleY(1.1); + } + 70%{ + -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); + } + 80%{ + -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); + } + 90%{ + -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); + } + 100%{ + -webkit-transform: translateY(0%) scaleY(1) scaleX(1); + } +} + + +/* +============================================== +pulse +============================================== +*/ + +.pulse{ + animation-name: pulse; + -webkit-animation-name: pulse; + + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; +} + +@keyframes pulse { + 0% { + transform: scale(0.9); + opacity: 0.7; + } + 50% { + ransform: scale(1); + opacity: 1; + } + 100% { + transform: scale(0.9); + opacity: 0.7; + } +} + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(0.95); + opacity: 0.7; + } + 50% { + -webkit-transform: scale(1); + opacity: 1; + } + 100% { + -webkit-transform: scale(0.95); + opacity: 0.7; + } +} + +/* +============================================== +floating +============================================== +*/ + +.floating{ + animation-name: floating; + -webkit-animation-name: floating; + + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; +} + +@keyframes floating { + 0% { + transform: translateY(0%); + } + 50% { + transform: translateY(8%); + } + 100% { + transform: translateY(0%); + } +} + +@-webkit-keyframes floating { + 0% { + -webkit-transform: translateY(0%); + } + 50% { + -webkit-transform: translateY(8%); + } + 100% { + -webkit-transform: translateY(0%); + } +} + +/* +============================================== +tossing +============================================== +*/ + +.tossing{ + animation-name: tossing; + -webkit-animation-name: tossing; + + animation-duration: 2.5s; + -webkit-animation-duration: 2.5s; + + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; +} + +@keyframes tossing { + 0% { + transform: rotate(-4deg); + } + 50% { + transform: rotate(4deg); + } + 100% { + transform: rotate(-4deg); + } +} + +@-webkit-keyframes tossing { + 0% { + -webkit-transform: rotate(-4deg); + } + 50% { + -webkit-transform: rotate(4deg); + } + 100% { + -webkit-transform: rotate(-4deg); + } +} + +/* +============================================== +pullUp +============================================== +*/ + +.pullUp{ + animation-name: pullUp; + -webkit-animation-name: pullUp; + + animation-duration: 1.1s; + -webkit-animation-duration: 1.1s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; + + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; +} + +@keyframes pullUp { + 0% { + transform: scaleY(0.1); + } + 40% { + transform: scaleY(1.02); + } + 60% { + transform: scaleY(0.98); + } + 80% { + transform: scaleY(1.01); + } + 100% { + transform: scaleY(0.98); + } + 80% { + transform: scaleY(1.01); + } + 100% { + transform: scaleY(1); + } +} + +@-webkit-keyframes pullUp { + 0% { + -webkit-transform: scaleY(0.1); + } + 40% { + -webkit-transform: scaleY(1.02); + } + 60% { + -webkit-transform: scaleY(0.98); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(0.98); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(1); + } +} + +/* +============================================== +pullDown +============================================== +*/ + +.pullDown{ + animation-name: pullDown; + -webkit-animation-name: pullDown; + + animation-duration: 1.1s; + -webkit-animation-duration: 1.1s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; + + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} + +@keyframes pullDown { + 0% { + transform: scaleY(0.1); + } + 40% { + transform: scaleY(1.02); + } + 60% { + transform: scaleY(0.98); + } + 80% { + transform: scaleY(1.01); + } + 100% { + transform: scaleY(0.98); + } + 80% { + transform: scaleY(1.01); + } + 100% { + transform: scaleY(1); + } +} + +@-webkit-keyframes pullDown { + 0% { + -webkit-transform: scaleY(0.1); + } + 40% { + -webkit-transform: scaleY(1.02); + } + 60% { + -webkit-transform: scaleY(0.98); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(0.98); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(1); + } +} + +/* +============================================== +stretchLeft +============================================== +*/ + +.stretchLeft{ + animation-name: stretchLeft; + -webkit-animation-name: stretchLeft; + + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; + + transform-origin: 100% 0%; + -ms-transform-origin: 100% 0%; + -webkit-transform-origin: 100% 0%; +} + +@keyframes stretchLeft { + 0% { + transform: scaleX(0.3); + } + 40% { + transform: scaleX(1.02); + } + 60% { + transform: scaleX(0.98); + } + 80% { + transform: scaleX(1.01); + } + 100% { + transform: scaleX(0.98); + } + 80% { + transform: scaleX(1.01); + } + 100% { + transform: scaleX(1); + } +} + +@-webkit-keyframes stretchLeft { + 0% { + -webkit-transform: scaleX(0.3); + } + 40% { + -webkit-transform: scaleX(1.02); + } + 60% { + -webkit-transform: scaleX(0.98); + } + 80% { + -webkit-transform: scaleX(1.01); + } + 100% { + -webkit-transform: scaleX(0.98); + } + 80% { + -webkit-transform: scaleX(1.01); + } + 100% { + -webkit-transform: scaleX(1); + } +} + +/* +============================================== +stretchRight +============================================== +*/ + +.stretchRight{ + animation-name: stretchRight; + -webkit-animation-name: stretchRight; + + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; + + transform-origin: 0% 0%; + -ms-transform-origin: 0% 0%; + -webkit-transform-origin: 0% 0%; +} + +@keyframes stretchRight { + 0% { + transform: scaleX(0.3); + } + 40% { + transform: scaleX(1.02); + } + 60% { + transform: scaleX(0.98); + } + 80% { + transform: scaleX(1.01); + } + 100% { + transform: scaleX(0.98); + } + 80% { + transform: scaleX(1.01); + } + 100% { + transform: scaleX(1); + } +} + +@-webkit-keyframes stretchRight { + 0% { + -webkit-transform: scaleX(0.3); + } + 40% { + -webkit-transform: scaleX(1.02); + } + 60% { + -webkit-transform: scaleX(0.98); + } + 80% { + -webkit-transform: scaleX(1.01); + } + 100% { + -webkit-transform: scaleX(0.98); + } + 80% { + -webkit-transform: scaleX(1.01); + } + 100% { + -webkit-transform: scaleX(1); + } +} \ No newline at end of file diff --git a/node/src/draft/less/sitemap.less b/node/src/draft/less/sitemap.less new file mode 100755 index 000000000..2bee70e72 --- /dev/null +++ b/node/src/draft/less/sitemap.less @@ -0,0 +1,46 @@ +/* + * # Sitemap + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ + +/******************************* + Sitemap +*******************************/ + +.ui.sitemap { + margin: 0 -3rem; + font-size: 0rem; + text-align: left; +} + + +/*-------------- + Elements +---------------*/ + +.ui.sitemap > .section { + display: inline-block; + vertical-align: top; + + margin: 0em 3rem; + + font-size: 1rem; +} + +.ui.sitemap > .section > .header { + font-size: 1.125em; + color: rgba(0, 0, 0, 0.8); + padding-bottom: 0.5em; +} + +.ui.sitemap > .section > a { + display: block; + padding: 0.25em 0em; +} + diff --git a/node/src/files/release/less/elements/button.less b/node/src/files/release/less/elements/button.less index 6a946e3ed..34fe6083f 100644 --- a/node/src/files/release/less/elements/button.less +++ b/node/src/files/release/less/elements/button.less @@ -295,110 +295,6 @@ box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; } -/*-------------- - Error ----------------*/ - -.ui.error.button { - 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.error.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.error.button: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.error.button .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} - -/*-------------- - Success ----------------*/ - -.ui.success.button { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.success.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.success.button .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.success.button: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 ---------------*/ diff --git a/node/src/files/release/uncompressed/elements/button.css b/node/src/files/release/uncompressed/elements/button.css index 788fadd74..ceaf96704 100644 --- a/node/src/files/release/uncompressed/elements/button.css +++ b/node/src/files/release/uncompressed/elements/button.css @@ -198,99 +198,6 @@ -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; } -/*-------------- - Error ----------------*/ -.ui.error.button { - 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.error.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.error.button: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.error.button .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} -/*-------------- - Success ----------------*/ -.ui.success.button { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.success.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.success.button .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.success.button: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 ---------------*/ diff --git a/spec/button.json b/spec/button.json index 55d08c887..127ad8495 100755 --- a/spec/button.json +++ b/spec/button.json @@ -1,31 +1,57 @@ { - "Name" : "Button", - "Type" : "UI Element", + + // Package Name (SubType Type) + "Name" : "Semantic Button", + + // Version # + "Version" : "0.1", + + // Type of element + "Type" : "button", + + // Type of definition + "Definition" : "Element", + + // ID of UI components that must be included + "Dependencies" : [], + + // list of required components in "id name" format + "Coupling" : ["semantic icon", "semantic loader"], + + // List of mutually exclusive types with their koan generators "Types": { - "Singular": { - "Standard" : ".ui.button", - "Icon" : ".ui.icon.button > i.add.icon", - "Labeled Icon" : ".ui.labeled.icon.button > i.add.icon" - }, - "Group": { - "Standard" : ".ui.buttons > .button+.button+.button", - "Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", - "Conditional" : ".ui.buttons > .button+.or+.button", - "Vertical" : ".vertical.ui.buttons > .button+.button+.button" - } - }, - "Text": { - ".ui.button" : "Button" + "Singular": { + "Standard" : ".ui.button", + "Icon" : ".ui.icon.button > i.add.icon", + "Labeled Icon" : ".ui.icon.button > i.add.icon", + "Social" : [ + ".ui.facebook.button > i.facebook.icon", + ".ui.twitter.button > i.twitter.icon" + ] + }, + "Plural": { + "Standard" : ".ui.buttons > .button+.button+.button", + "Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", + "Conditional" : ".ui.buttons > .button+.or+.button", + "Vertical" : ".vertical.ui.buttons > .button+.button+.button" + } }, + + // Set of states that an element can occupy "States": { + "Hover" : "hover", + "Down" : "down", "Active" : "active", "Loading" : "loading", "Disabled" : "disabled" }, + + // Sets of variations of an element "Variations" : { "Circular" : "circular", + "Toggle" : "toggle", "Fluid" : "fluid", - "Size": [ + "Size" : [ "mini", "tiny", "small", @@ -34,7 +60,7 @@ "huge", "massive" ], - "Color": [ + "Color" : [ "black", "green", "red", @@ -43,9 +69,9 @@ "red", "teal" ], - "Ordinality": [ - "secondary", - "tertiary" + "Feedback": [ + "positive", + "negative" ], "Attached" : [ "attached top", @@ -53,5 +79,32 @@ "attached left", "attached right" ] + }, + + // Used with generators to create example content + "Text": { + ".button" : ["Button", "Follow", "Submit"] + }, + + // Your module may optionally include a text definition of its variations to help clarify their purpose. This may include the definition of types or variations + "Definition": { + "Standard" : "A simple button", + "Icon" : "A button icon is formatted to contain only an icon", + "Labeled Icon" : "A button can have an icon and a label", + "Social" : "A button can be formatted to link to a social website", + + "Hover" : "A button can change to show a user has hovered their mouse", + "Down" : "A button can change when pressed using touch or mouse events", + "Active" : "A button can show it is currently the active user selection", + "Loading" : "A button can show a loading indicator", + "Disabled" : "A button can show it is currently unable to be interacted with", + + "Attached" : "A button can attach to other content", + "Circular" : "A button can be circular", + "Color" : "A button can have different colors", + "Fluid" : "A button can be fluid", + "Ordinality" : "A button can blend into a page", + "Size" : "A button can vary in size", + "Toggle" : "A button can be formatted to toggle on and off" } } \ No newline at end of file diff --git a/src/elements/button.less b/src/elements/button.less index 6a946e3ed..34fe6083f 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -295,110 +295,6 @@ box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; } -/*-------------- - Error ----------------*/ - -.ui.error.button { - 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.error.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.error.button: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.error.button .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} - -/*-------------- - Success ----------------*/ - -.ui.success.button { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.success.button .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.success.button .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.success.button: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 ---------------*/