diff --git a/node/src/documents/elements/header.html b/node/src/documents/elements/header.html new file mode 100755 index 000000000..1938dfcc6 --- /dev/null +++ b/node/src/documents/elements/header.html @@ -0,0 +1,75 @@ +--- +layout : 'default' +css : 'header' + +title : 'Header' +type : 'UI Element' +--- +
+
+

Header

+

Headers provide a short summary of content

+
+
+
+ +
+
+ Standard + States + Variations +
+
+

Standard

+ +

Page Headings

+

Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size

+
+
+

First header

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Second header

+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Third header

+

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+

Fourth header

+

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+
Fifth header
+

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

+
+
+ +

Content Headings

+

Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.

+
+
+
+
+
+
+

Huge Header

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Large Header

+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Medium Header

+

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+

Small Header

+

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+

Tiny Header

+

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

+
+
+ +

States

+ +
+

Disabled

+

A header bar can show activity

+
+ Disabled Header +
+
+ +

Variations

+ +
\ No newline at end of file diff --git a/node/src/documents/elements/progress.html b/node/src/documents/elements/progress.html new file mode 100755 index 000000000..b89fca471 --- /dev/null +++ b/node/src/documents/elements/progress.html @@ -0,0 +1,111 @@ +--- +layout : 'default' +css : 'progress' + +title : 'Progress' +type : 'UI Element' +--- +
+
+

Progress Bar

+

Progress bars show the percent of a task complete

+
+
+
+ +
+
+ Standard + States + Variations +
+
+

Standard

+ +
+

Progress:

+

A standard progress bar

+
+
+
+
+ +

States

+ +
+

Active

+

A progress bar can show activity

+
+
+
+
+ + +
+

Successful

+

A progress bar can be successful

+
+
+
+
+ +
+

Failed

+

A progress bar can be failed

+
+
+
+
+ +
+

Disabled

+

A progress bar can be disabled

+
+
+
+
+ +

Variations

+ +
+

Color

+

Can have different colors:

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Striped

+

A progress bar can be striped

+
+
+
+
+ +
\ No newline at end of file diff --git a/node/src/documents/sink.html b/node/src/documents/sink.html index 3eba710a9..3c1657476 100755 --- a/node/src/documents/sink.html +++ b/node/src/documents/sink.html @@ -2,163 +2,12 @@ layout : 'default' css : 'sink' -title : 'Kitchen Sink' +title : 'Roadmap' type : 'Other' --- - - - - - UI Text Block - Semantic - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- Semantic UI: Kitchen Sink -
- -
- 3 of 4 -
- 1. Button - 2. Form - 3. Table - 4. Menu - 5. Labels - 6. Text Block -
-
- -
- - - - - - -
- Theme -
-
Flat
-
Shaded
-
Classic
-
-
-
-
-
-
-
Menu
-
-

Kitchen Sink

-

The kitchen sink uses many of the UI elements described in the library to provide examples for how content pieces can be used together.

+

Project Roadmap

@@ -167,21 +16,20 @@ type : 'Other'
- Welcome to the kitchen sink! + Progress Report
-

This is a work in progress view, these elements may change.

+

Current status of work on Semantic UI

-
+
Redesign Timeline
-
-
6.5
- Days Left +
+
6.5
days left
@@ -368,7 +216,4 @@ type : 'Other'
-
- - - \ No newline at end of file +
\ No newline at end of file diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css index 519b97c06..3c2f1773d 100644 --- a/node/src/files/components/semantic/src/collections/grid.css +++ b/node/src/files/components/semantic/src/collections/grid.css @@ -28,11 +28,11 @@ } .ui.grid:after, .ui.row:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } /*------------------- diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css index 3be77f6b0..037e6d575 100644 --- a/node/src/files/components/semantic/src/collections/menu.css +++ b/node/src/files/components/semantic/src/collections/menu.css @@ -30,8 +30,17 @@ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; +} +.ui.menu:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } + + .ui.menu > .item:first-child { border-radius: 5px 0px 0px 5px; } diff --git a/node/src/files/components/semantic/src/elements/button.css b/node/src/files/components/semantic/src/elements/button.css index 103849859..09f8a14a6 100644 --- a/node/src/files/components/semantic/src/elements/button.css +++ b/node/src/files/components/semantic/src/elements/button.css @@ -28,7 +28,7 @@ padding: 0.8em 1.5em; - font-size: 1em; + font-size: 1rem; text-transform: uppercase; line-height: 1; font-weight: bold; @@ -464,40 +464,40 @@ .ui.buttons.mini .button, .ui.mini.button { - font-size: 0.5625em; + font-size: 0.5625rem; } .ui.tiny.buttons .button, .ui.tiny.button { - font-size: 0.625em; + font-size: 0.625rem; } .ui.small.buttons .button, .ui.small.button { - font-size: 0.75em; + font-size: 0.75rem; } .ui.buttons .button, .ui.button { - font-size: 1em; + font-size: 1rem; } .ui.large.buttons .button, .ui.large.button { - font-size: 1.125em; + font-size: 1.125rem; } .ui.big.buttons .button, .ui.big.button { - font-size: 1.25em; + font-size: 1.25rem; } .ui.huge.buttons .button, .ui.huge.button { - font-size: 1.375em; + font-size: 1.375rem; } .ui.massive.buttons .button, .ui.massive.button { - font-size: 1.5em; + font-size: 1.5rem; font-weight: bold; } .ui.gigantic.buttons .button, .ui.gigantic.button { - font-size: 2em; + font-size: 2rem; font-weight: bold; } diff --git a/node/src/files/components/semantic/src/elements/header.css b/node/src/files/components/semantic/src/elements/header.css index 4774bf430..378d86a9d 100644 --- a/node/src/files/components/semantic/src/elements/header.css +++ b/node/src/files/components/semantic/src/elements/header.css @@ -78,6 +78,11 @@ h5.ui.header { line-height: 1.33em; font-size: 1.5em; } +.medium.ui.header { + margin-bottom: 0.25em; + line-height: 1.33em; + font-size: 1.25em; +} .small.ui.header { margin-bottom: 0.25em; line-height: 1.33em; diff --git a/node/src/files/components/semantic/src/elements/progress.css b/node/src/files/components/semantic/src/elements/progress.css index dbfddbfb8..2e4c07621 100644 --- a/node/src/files/components/semantic/src/elements/progress.css +++ b/node/src/files/components/semantic/src/elements/progress.css @@ -1,16 +1,33 @@ +/* + * # Semantic Progress Bar + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: Nay 14, 2013 + */ + + +/******************************* + Progress Bar +*******************************/ + .ui.progress { - border: 1px solid #DDDDDD; + border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; - max-width: 100%; + max-width: 400px; height: 35px; background-color: #FAFAFA; padding: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -28,44 +45,37 @@ -webkit-border-radius: 3px; border-radius: 3px; - -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset; - -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset; - box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset; - -webkit-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; -moz-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; -ms-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; -o-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; } -/* Colors */ -.ui.blue.progress .bar { - background-color: #6ECFF5; -} +/******************************* + States +*******************************/ -/* Fluid Width */ -.ui.fluid.progress { - width: 100%; -} -/* State */ +/*-------------- + Successful +---------------*/ .ui.successful.progress .bar { background-color: #73E064 !important; @@ -76,6 +86,10 @@ -moz-animation: none !important; } +/*-------------- + Failed +---------------*/ + .ui.failed.progress .bar { background-color: #DF9BA4 !important; } @@ -84,6 +98,81 @@ -webkit-animation: none !important; -moz-animation: none !important; } + +/*-------------- + Active +---------------*/ + +.ui.active.progress .bar { + position: relative; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: #FFFFFF; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + -webkit-animation: animate-emphasis 2s ease-out infinite; + -moz-animation: animate-emphasis 2s ease-out infinite; + animation: animate-emphasis 2s ease-out infinite; +} + +@-webkit-keyframes animate-emphasis { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 95%; + } +} +@-moz-keyframes animate-emphasis { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +@keyframes animate-emphasis { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.progress { + opacity: 0.35; +} .ui.disabled.progress .bar, .ui.disabled.progress .bar::after { -webkit-animation: none !important; @@ -91,8 +180,45 @@ } -/* Variations */ +/******************************* + Variations +*******************************/ + +/*-------------- + Colors +---------------*/ + +.ui.blue.progress .bar { + background-color: #6ECFF5; +} +.ui.black.progress .bar { + background-color: #5C6166; +} +.ui.green.progress .bar { + background-color: #A1CF64; +} +.ui.red.progress .bar { + background-color: #EF4D6D; +} +.ui.blue.progress .bar { + background-color: #6ECFF5; +} +.ui.purple.progress .bar { + background-color: #564F8A; +} +.ui.teal.progress .bar { + background-color: #00B5AD; +} + +/*-------------- + Attached +---------------*/ + + +/*-------------- + Striped +---------------*/ .ui.progress.striped .bar { -webkit-background-size: 30px 30px; @@ -141,7 +267,9 @@ transparent 75%, transparent ) ; +} +.ui.progress.active.striped .bar { -webkit-animation: animate-striped 3s linear infinite; -moz-animation: animate-striped 3s linear infinite; } @@ -170,150 +298,3 @@ background-position: 60px 0; } } - -/* Shining animation */ -.ui.shiny.progress .bar { - position: relative; -} -.ui.shiny.progress .bar::after { - content: ''; - opacity: 0; - - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background: #FFFFFF; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - - -webkit-animation: animate-shiny 2s ease-out infinite; - -moz-animation: animate-shiny 2s ease-out infinite; -} - -@-webkit-keyframes animate-shiny { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 95%; - } -} -@-moz-keyframes animate-shiny { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 100%; - } -} -@keyframes animate-shiny { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 100%; - } -} - -/* Glowing animation */ -.ui.glowing.progress .bar { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - -webkit-animation: animate-glow 1s ease-out infinite; - -moz-animation: animate-glow 1s ease-out infinite; -} - -@-webkit-keyframes animate-glow { - 0% { - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } - 50% { - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - } - 100% { - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } -} - -@-moz-keyframes animate-glow { - 0% { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } - 50% { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - } - 100% { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } -} \ No newline at end of file diff --git a/node/src/files/components/semantic/src/modules/popup.js b/node/src/files/components/semantic/src/modules/popup.js index 095953bfa..9fa717cfd 100644 --- a/node/src/files/components/semantic/src/modules/popup.js +++ b/node/src/files/components/semantic/src/modules/popup.js @@ -83,7 +83,7 @@ var element = this; timer = setTimeout(function() { $.proxy(module.toggle, element)(); - if( $(element).hasClass(className.active) ) { + if( $(element).hasClass(className.visible) ) { event.stopPropagation(); } }, settings.delay); @@ -96,7 +96,7 @@ }, click: function(event) { $.proxy(module.toggle, this)(); - if( $(this).hasClass(className.active) ) { + if( $(this).hasClass(className.visible) ) { event.stopPropagation(); } }, @@ -224,7 +224,7 @@ if($popup.size() === 0) { module.create(); } - if( !$module.hasClass(className.active) ) { + if( !$module.hasClass(className.visible) ) { if( module.position() ) { module.show(); } @@ -367,10 +367,10 @@ .stop() .fadeOut(200) .prev($module) - .removeClass(className.active) + .removeClass(className.visible) ; $module - .addClass(className.active) + .addClass(className.visible) ; $popup .removeClass(className.loading) @@ -398,7 +398,7 @@ hide: function() { $module - .removeClass(className.active) + .removeClass(className.visible) ; if($popup.is(':visible') ) { module.debug('Hiding pop-up'); @@ -564,7 +564,7 @@ className : { popup : 'ui popup', - active : 'active', + visible : 'visible', loading : 'loading' }, diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index b3b7648d7..bffb53867 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -8,25 +8,29 @@ semantic.ready = function() { // selector cache var - $ui = $('.ui').not('.hover, .down'), - $checkbox = $('.ui.checkbox'), - $swap = $('.theme.menu .item'), - $menu = $('.sidebar'), - $sortTable = $('.sortable.table'), - $demo = $('.demo'), - $waypoints = $('h2'), + $ui = $('.ui').not('.hover, .down'), + $checkbox = $('.ui.checkbox'), + $swap = $('.theme.menu .item'), + $menu = $('.sidebar'), + $sortTable = $('.sortable.table'), + $demo = $('.demo'), + $waypoints = $('h2:not(.ui)'), - $menuPopup = $('.ui.main.menu .popup.item'), - - $example = $('.example'), - - $developer = $('.developer.item'), - $designer = $('.designer.item'), + $menuPopup = $('.ui.main.menu .popup.item'), + + $example = $('.example'), + $shownExample = $example.filter('.shown'), + + $developer = $('.developer.item'), + $designer = $('.designer.item'), + + $increaseFont = $('.font .increase'), + $decreaseFont = $('.font .decrease'), - $peek = $('.peek'), - $peekItem = $peek.children('.menu').children('a.item'), - $peekSubItem = $peek.find('.item .menu .item'), - $code = $('div.code'), + $peek = $('.peek'), + $peekItem = $peek.children('.menu').children('a.item'), + $peekSubItem = $peek.find('.item .menu .item'), + $code = $('div.code'), // alias handler @@ -46,10 +50,53 @@ semantic.ready = function() { ; }, - createCode: function() { + font: { + + increase: function() { + var + $container = $(this).closest('.ui.segment'), + fontSize = parseInt( $container.css('font-size'), 10) + ; + $container + .css('font-size', fontSize + 1) + ; + }, + decrease: function() { + var + $container = $(this).closest('.ui.segment'), + fontSize = parseInt( $container.css('font-size'), 10) + ; + $container + .css('font-size', fontSize - 1) + ; + } + }, + + developerMode: function() { + console.log('dev mode'); + $developer.addClass('active'); + $designer.removeClass('active'); + $example + .each(function() { + $.proxy(handler.createCode, $(this))('developer'); + }) + ; + }, + designerMode: function() { + console.log('design mode'); + $designer.addClass('active'); + $developer.removeClass('active'); + $example + .each(function() { + $.proxy(handler.createCode, $(this))('designer'); + }) + ; + }, + + createCode: function(type) { var $example = $(this).closest('.example'), - $demo = $example.children().not('p, h4, i.code, .annotated, .ignore'), + $demo = $example.children().not('p:not(.ui), h4:not(.ui), i.code, .annotated, .ignore'), $annotated = $example.find('.annotated'), $code = $annotated.find('.code'), whiteSpace = new RegExp('\\n\\s{4}', 'g'), @@ -83,7 +130,7 @@ semantic.ready = function() { ; $.proxy(handler.initializeCode, $code)(); } - if( $demo.first().is(':visible') ) { + if( $demo.first().is(':visible') || type == 'developer' ) { $demo.hide(); $annotated.fadeIn(500); } @@ -208,7 +255,6 @@ semantic.ready = function() { $subWaypoint = $waypoint.nextAll('h3').eq( $subHeaderGroup.index($subHeader) ), offset = $subWaypoint.offset().top - 80 ; - console.log($subHeader, $headerGroup, $header, $waypoint, $subWaypoint, $subHeaderGroup.index($subHeader)) $menu .addClass('animating') ; @@ -262,9 +308,6 @@ semantic.ready = function() { }; // attach events - $ui - .state() - ; if($.fn.tablesort !== undefined) { $sortTable .tablesort() @@ -304,6 +347,10 @@ semantic.ready = function() { .on('click', handler.createCode) ; + $shownExample + .each(handler.createCode) + ; + $checkbox .checkbox() ; @@ -312,6 +359,20 @@ semantic.ready = function() { .on('click', handler.swapStyle) ; + $increaseFont + .on('click', handler.font.increase) + ; + $decreaseFont + .on('click', handler.font.decrease) + ; + + $developer + .on('click', handler.developerMode) + ; + $designer + .on('click', handler.designerMode) + ; + $menuPopup .popup({ position: 'bottom center', diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 721361168..14cf9caa5 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -662,6 +662,48 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ cursor: pointer; } + +.ui.progress .bar { + -webkit-animation: finish 10s ease-in-out infinite; + -moz-animation: finish 10s ease-in-out infinite; +} + +@-webkit-keyframes finish { + 0% { + width: 0%; + } + 40% { + width: 100%; + } + 100% { + width: 100%; + } +} +@-moz-keyframes finish { + 0% { + width: 0%; + } + 40% { + width: 100%; + } + 100% { + width: 100%; + } +} +@keyframes finish { + 0% { + width: 0%; + } + 40% { + width: 100%; + } + 100% { + width: 100%; + } +} + + + @media only screen and (max-width : 1100px) { } diff --git a/src/collections/grid.css b/src/collections/grid.css index 519b97c06..3c2f1773d 100755 --- a/src/collections/grid.css +++ b/src/collections/grid.css @@ -28,11 +28,11 @@ } .ui.grid:after, .ui.row:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } /*------------------- diff --git a/src/collections/menu.css b/src/collections/menu.css index 3be77f6b0..037e6d575 100755 --- a/src/collections/menu.css +++ b/src/collections/menu.css @@ -30,8 +30,17 @@ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; +} +.ui.menu:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } + + .ui.menu > .item:first-child { border-radius: 5px 0px 0px 5px; } diff --git a/src/elements/button.css b/src/elements/button.css index 103849859..09f8a14a6 100755 --- a/src/elements/button.css +++ b/src/elements/button.css @@ -28,7 +28,7 @@ padding: 0.8em 1.5em; - font-size: 1em; + font-size: 1rem; text-transform: uppercase; line-height: 1; font-weight: bold; @@ -464,40 +464,40 @@ .ui.buttons.mini .button, .ui.mini.button { - font-size: 0.5625em; + font-size: 0.5625rem; } .ui.tiny.buttons .button, .ui.tiny.button { - font-size: 0.625em; + font-size: 0.625rem; } .ui.small.buttons .button, .ui.small.button { - font-size: 0.75em; + font-size: 0.75rem; } .ui.buttons .button, .ui.button { - font-size: 1em; + font-size: 1rem; } .ui.large.buttons .button, .ui.large.button { - font-size: 1.125em; + font-size: 1.125rem; } .ui.big.buttons .button, .ui.big.button { - font-size: 1.25em; + font-size: 1.25rem; } .ui.huge.buttons .button, .ui.huge.button { - font-size: 1.375em; + font-size: 1.375rem; } .ui.massive.buttons .button, .ui.massive.button { - font-size: 1.5em; + font-size: 1.5rem; font-weight: bold; } .ui.gigantic.buttons .button, .ui.gigantic.button { - font-size: 2em; + font-size: 2rem; font-weight: bold; } diff --git a/src/elements/header.css b/src/elements/header.css index 4774bf430..378d86a9d 100755 --- a/src/elements/header.css +++ b/src/elements/header.css @@ -78,6 +78,11 @@ h5.ui.header { line-height: 1.33em; font-size: 1.5em; } +.medium.ui.header { + margin-bottom: 0.25em; + line-height: 1.33em; + font-size: 1.25em; +} .small.ui.header { margin-bottom: 0.25em; line-height: 1.33em; diff --git a/src/elements/progress.css b/src/elements/progress.css index dbfddbfb8..2e4c07621 100755 --- a/src/elements/progress.css +++ b/src/elements/progress.css @@ -1,16 +1,33 @@ +/* + * # Semantic Progress Bar + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: Nay 14, 2013 + */ + + +/******************************* + Progress Bar +*******************************/ + .ui.progress { - border: 1px solid #DDDDDD; + border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; - max-width: 100%; + max-width: 400px; height: 35px; background-color: #FAFAFA; padding: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -28,44 +45,37 @@ -webkit-border-radius: 3px; border-radius: 3px; - -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset; - -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset; - box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset; - -webkit-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; -moz-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; -ms-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; -o-transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; transition: - width 1s ease-out, + width 1s ease-in-out, background-color 1s ease-out ; } -/* Colors */ -.ui.blue.progress .bar { - background-color: #6ECFF5; -} +/******************************* + States +*******************************/ -/* Fluid Width */ -.ui.fluid.progress { - width: 100%; -} -/* State */ +/*-------------- + Successful +---------------*/ .ui.successful.progress .bar { background-color: #73E064 !important; @@ -76,6 +86,10 @@ -moz-animation: none !important; } +/*-------------- + Failed +---------------*/ + .ui.failed.progress .bar { background-color: #DF9BA4 !important; } @@ -84,6 +98,81 @@ -webkit-animation: none !important; -moz-animation: none !important; } + +/*-------------- + Active +---------------*/ + +.ui.active.progress .bar { + position: relative; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: #FFFFFF; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + -webkit-animation: animate-emphasis 2s ease-out infinite; + -moz-animation: animate-emphasis 2s ease-out infinite; + animation: animate-emphasis 2s ease-out infinite; +} + +@-webkit-keyframes animate-emphasis { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 95%; + } +} +@-moz-keyframes animate-emphasis { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +@keyframes animate-emphasis { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.progress { + opacity: 0.35; +} .ui.disabled.progress .bar, .ui.disabled.progress .bar::after { -webkit-animation: none !important; @@ -91,8 +180,45 @@ } -/* Variations */ +/******************************* + Variations +*******************************/ + +/*-------------- + Colors +---------------*/ + +.ui.blue.progress .bar { + background-color: #6ECFF5; +} +.ui.black.progress .bar { + background-color: #5C6166; +} +.ui.green.progress .bar { + background-color: #A1CF64; +} +.ui.red.progress .bar { + background-color: #EF4D6D; +} +.ui.blue.progress .bar { + background-color: #6ECFF5; +} +.ui.purple.progress .bar { + background-color: #564F8A; +} +.ui.teal.progress .bar { + background-color: #00B5AD; +} + +/*-------------- + Attached +---------------*/ + + +/*-------------- + Striped +---------------*/ .ui.progress.striped .bar { -webkit-background-size: 30px 30px; @@ -141,7 +267,9 @@ transparent 75%, transparent ) ; +} +.ui.progress.active.striped .bar { -webkit-animation: animate-striped 3s linear infinite; -moz-animation: animate-striped 3s linear infinite; } @@ -170,150 +298,3 @@ background-position: 60px 0; } } - -/* Shining animation */ -.ui.shiny.progress .bar { - position: relative; -} -.ui.shiny.progress .bar::after { - content: ''; - opacity: 0; - - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background: #FFFFFF; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - - -webkit-animation: animate-shiny 2s ease-out infinite; - -moz-animation: animate-shiny 2s ease-out infinite; -} - -@-webkit-keyframes animate-shiny { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 95%; - } -} -@-moz-keyframes animate-shiny { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 100%; - } -} -@keyframes animate-shiny { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 100%; - } -} - -/* Glowing animation */ -.ui.glowing.progress .bar { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - -webkit-animation: animate-glow 1s ease-out infinite; - -moz-animation: animate-glow 1s ease-out infinite; -} - -@-webkit-keyframes animate-glow { - 0% { - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } - 50% { - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - } - 100% { - -webkit-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } -} - -@-moz-keyframes animate-glow { - 0% { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } - 50% { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.3) inset, - 0px -5px 5px rgba(255, 255, 255, 0.3) inset - ; - } - 100% { - -moz-box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - box-shadow: - 0px 5px 5px rgba(255, 255, 255, 0.7) inset, - 0px -5px 5px rgba(255, 255, 255, 0.7) inset - ; - } -} \ No newline at end of file diff --git a/src/modules/popup.js b/src/modules/popup.js index 095953bfa..9fa717cfd 100755 --- a/src/modules/popup.js +++ b/src/modules/popup.js @@ -83,7 +83,7 @@ var element = this; timer = setTimeout(function() { $.proxy(module.toggle, element)(); - if( $(element).hasClass(className.active) ) { + if( $(element).hasClass(className.visible) ) { event.stopPropagation(); } }, settings.delay); @@ -96,7 +96,7 @@ }, click: function(event) { $.proxy(module.toggle, this)(); - if( $(this).hasClass(className.active) ) { + if( $(this).hasClass(className.visible) ) { event.stopPropagation(); } }, @@ -224,7 +224,7 @@ if($popup.size() === 0) { module.create(); } - if( !$module.hasClass(className.active) ) { + if( !$module.hasClass(className.visible) ) { if( module.position() ) { module.show(); } @@ -367,10 +367,10 @@ .stop() .fadeOut(200) .prev($module) - .removeClass(className.active) + .removeClass(className.visible) ; $module - .addClass(className.active) + .addClass(className.visible) ; $popup .removeClass(className.loading) @@ -398,7 +398,7 @@ hide: function() { $module - .removeClass(className.active) + .removeClass(className.visible) ; if($popup.is(':visible') ) { module.debug('Hiding pop-up'); @@ -564,7 +564,7 @@ className : { popup : 'ui popup', - active : 'active', + visible : 'visible', loading : 'loading' },