diff --git a/build/minified/modules/star.js b/build/minified/modules/star.js index 837e775ed..6150b05a6 100644 --- a/build/minified/modules/star.js +++ b/build/minified/modules/star.js @@ -8,12 +8,12 @@ ;(function ($, window, document, undefined) { -$.fn.starReview = function(parameters) { +$.fn.rating = function(parameters) { var $allModules = $(this), moduleSelector = $allModules.selector || '', - settings = $.extend(true, {}, $.fn.starReview.settings, parameters), + settings = $.extend(true, {}, $.fn.rating.settings, parameters), namespace = settings.namespace, className = settings.className, @@ -35,7 +35,7 @@ $.fn.starReview = function(parameters) { .each(function() { var $module = $(this), - $star = $module.find(selector.star), + $icon = $module.find(selector.icon), element = this, instance = $module.data(moduleNamespace), @@ -46,23 +46,14 @@ $.fn.starReview = function(parameters) { initialize: function() { if(settings.rateable) { - // expandable with states - if($.fn.state !== undefined) { - $module - .state() - ; - $star - .state() - ; - } - $star + $icon .bind('mouseenter' + eventNamespace, module.event.mouseenter) .bind('mouseleave' + eventNamespace, module.event.mouseleave) .bind('click' + eventNamespace, module.event.click) ; } $module - .addClass(className.initialize) + .addClass(className.active) ; module.instantiate(); }, @@ -73,21 +64,30 @@ $.fn.starReview = function(parameters) { ; }, + destroy: function() { + $module + .removeData(moduleNamespace) + ; + $icon + .off(eventNamespace) + ; + }, + setRating: function(rating) { var - $activeStar = $star.eq(rating - 1) + $activeIcon = $icon.eq(rating - 1) ; $module .removeClass(className.hover) ; - $star + $icon .removeClass(className.hover) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.active) ; - $activeStar + $activeIcon .addClass(className.active) .prevAll() .addClass(className.active) @@ -98,31 +98,31 @@ $.fn.starReview = function(parameters) { event: { mouseenter: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.hover) ; $module .addClass(className.hover) ; - $activeStar + $activeIcon .addClass(className.hover) .prevAll() .addClass(className.hover) ; }, mouseleave: function() { - $star + $icon .removeClass(className.hover) ; }, click: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - module.setRating( $star.index($activeStar) + 1); + module.setRating( $icon.index($activeIcon) + 1); } }, setting: function(name, value) { @@ -307,28 +307,26 @@ $.fn.starReview = function(parameters) { ; }; -$.fn.starReview.settings = { +$.fn.rating.settings = { - name : 'Star', - namespace : 'star', + name : 'Star', + namespace : 'icon', - rateable : true, - onRate : function(){}, + rateable : true, + onRate : function(){}, error: { method : 'The method you called is not defined' }, className : { - initialize : 'initialize', - loading : 'loading', active : 'active', hover : 'hover', - down : 'down' + loading : 'loading' }, selector : { - star : 'i' + icon : '.icon' } }; diff --git a/build/packaged/modules/star.js b/build/packaged/modules/star.js index 837e775ed..6150b05a6 100644 --- a/build/packaged/modules/star.js +++ b/build/packaged/modules/star.js @@ -8,12 +8,12 @@ ;(function ($, window, document, undefined) { -$.fn.starReview = function(parameters) { +$.fn.rating = function(parameters) { var $allModules = $(this), moduleSelector = $allModules.selector || '', - settings = $.extend(true, {}, $.fn.starReview.settings, parameters), + settings = $.extend(true, {}, $.fn.rating.settings, parameters), namespace = settings.namespace, className = settings.className, @@ -35,7 +35,7 @@ $.fn.starReview = function(parameters) { .each(function() { var $module = $(this), - $star = $module.find(selector.star), + $icon = $module.find(selector.icon), element = this, instance = $module.data(moduleNamespace), @@ -46,23 +46,14 @@ $.fn.starReview = function(parameters) { initialize: function() { if(settings.rateable) { - // expandable with states - if($.fn.state !== undefined) { - $module - .state() - ; - $star - .state() - ; - } - $star + $icon .bind('mouseenter' + eventNamespace, module.event.mouseenter) .bind('mouseleave' + eventNamespace, module.event.mouseleave) .bind('click' + eventNamespace, module.event.click) ; } $module - .addClass(className.initialize) + .addClass(className.active) ; module.instantiate(); }, @@ -73,21 +64,30 @@ $.fn.starReview = function(parameters) { ; }, + destroy: function() { + $module + .removeData(moduleNamespace) + ; + $icon + .off(eventNamespace) + ; + }, + setRating: function(rating) { var - $activeStar = $star.eq(rating - 1) + $activeIcon = $icon.eq(rating - 1) ; $module .removeClass(className.hover) ; - $star + $icon .removeClass(className.hover) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.active) ; - $activeStar + $activeIcon .addClass(className.active) .prevAll() .addClass(className.active) @@ -98,31 +98,31 @@ $.fn.starReview = function(parameters) { event: { mouseenter: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.hover) ; $module .addClass(className.hover) ; - $activeStar + $activeIcon .addClass(className.hover) .prevAll() .addClass(className.hover) ; }, mouseleave: function() { - $star + $icon .removeClass(className.hover) ; }, click: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - module.setRating( $star.index($activeStar) + 1); + module.setRating( $icon.index($activeIcon) + 1); } }, setting: function(name, value) { @@ -307,28 +307,26 @@ $.fn.starReview = function(parameters) { ; }; -$.fn.starReview.settings = { +$.fn.rating.settings = { - name : 'Star', - namespace : 'star', + name : 'Star', + namespace : 'icon', - rateable : true, - onRate : function(){}, + rateable : true, + onRate : function(){}, error: { method : 'The method you called is not defined' }, className : { - initialize : 'initialize', - loading : 'loading', active : 'active', hover : 'hover', - down : 'down' + loading : 'loading' }, selector : { - star : 'i' + icon : '.icon' } }; diff --git a/build/uncompressed/collections/menu.css b/build/uncompressed/collections/menu.css index 8e2d65395..b2009711c 100644 --- a/build/uncompressed/collections/menu.css +++ b/build/uncompressed/collections/menu.css @@ -202,9 +202,9 @@ /*-------------- Dropdowns ---------------*/ -.ui.menu .dropdown.item .menu { +/*.ui.menu .dropdown.item .menu { margin: 1px 0px 0px 0px; -} +}*/ .ui.menu .simple.dropdown.item .menu { margin: 0px !important; } diff --git a/build/uncompressed/elements/button.css b/build/uncompressed/elements/button.css index 33da9d937..788fadd74 100644 --- a/build/uncompressed/elements/button.css +++ b/build/uncompressed/elements/button.css @@ -66,6 +66,48 @@ margin: -0.8em -1.5em; padding: 0.8em 1.5em; } +/*------------------- + Primary +--------------------*/ +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #D95C5C; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .active.button, +.ui.primary.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*------------------- + Secondary +--------------------*/ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #00B5AD; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover, +.ui.secondary.buttons .active.button, +.ui.secondary.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #00847E; + color: #FFFFFF; +} /*------------------- Social --------------------*/ @@ -111,10 +153,29 @@ /******************************* States *******************************/ +/*-------------- + Active +---------------*/ +.ui.buttons .active.button, +.ui.active.button { + opacity: 1 !important; + background-color: #B0B0B0; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; +} /*-------------- Hover ---------------*/ -.ui.button:hover { +.ui.button:hover, +.ui.active.button:hover { opacity: 1 !important; background-color: #A4A4A4; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); @@ -127,7 +188,8 @@ /*-------------- Down ---------------*/ -.ui.button:active { +.ui.button:active, +.ui.active.button:active { opacity: 1 !important; background-color: #8C8C8C; color: #FFFFFF; @@ -136,24 +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; } -/*-------------- - Active ----------------*/ -.ui.buttons .active.button, -.ui.active.button { - opacity: 1 !important; - background-color: #B0B0B0; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); - color: #FFFFFF; - -webkit-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; - -moz-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; - box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; -} /*-------------- Error ---------------*/ @@ -395,7 +439,7 @@ color: #999999 !important; font-weight: normal; text-transform: none; - text-shadow: none; + text-shadow: none !important; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -408,16 +452,6 @@ -moz-border-radius: 0.2em; border-radius: 0.2em; } -.ui.basic.buttons .button { - border: none !important; - border-left: 1px solid rgba(0, 0, 0, 0.1) !important; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.ui.basic.buttons .button:first-child { - border-left: none !important; -} .ui.basic.buttons .button:hover, .ui.basic.button:hover { color: #7F7F7F !important; @@ -437,14 +471,32 @@ .ui.basic.button.active { background-color: rgba(0, 0, 0, 0.05); color: #7F7F7F; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + box-shadow: 0px 0px 0px 1px #BDBDBD inset; } .ui.basic.buttons .button.active:hover, .ui.basic.button.active:hover { background-color: rgba(0, 0, 0, 0.1); } +/* Basic Group */ +.ui.basic.buttons .button { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button:hover, +.ui.basic.buttons .button:active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button.active { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} /*-------------- Labeled Icon ---------------*/ @@ -848,6 +900,25 @@ background-color: #D24B4C; color: #FFFFFF; } +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #E96633; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover, +.ui.orange.buttons .active.button, +.ui.orange.button.active { + background-color: #FF7038; + color: #FFFFFF; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #DA683B; + color: #FFFFFF; +} /*--- Blue ---*/ .ui.blue.buttons .button, .ui.blue.button { diff --git a/build/uncompressed/elements/header.css b/build/uncompressed/elements/header.css index ec066f2ef..b9844b4f7 100644 --- a/build/uncompressed/elements/header.css +++ b/build/uncompressed/elements/header.css @@ -21,7 +21,6 @@ font-weight: bold; line-height: 1.33; } -.ui.header .ui.sub.header, .ui.header .sub.header { font-size: 1rem; font-weight: normal; @@ -216,6 +215,9 @@ h5.ui.header { padding-bottom: 0.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +.ui.dividing.header .sub.header { + padding-bottom: 0.5em; +} .ui.dividing.header .icon { margin-bottom: 0.2em; } diff --git a/build/uncompressed/elements/image.css b/build/uncompressed/elements/image.css index b970a988b..24e7d725d 100644 --- a/build/uncompressed/elements/image.css +++ b/build/uncompressed/elements/image.css @@ -56,9 +56,9 @@ img.ui.image { .ui.circular.images img, .ui.circular.image img, .ui.circular.image { - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*-------------- Avatar @@ -71,9 +71,9 @@ img.ui.image { display: inline-block; width: 2em; height: 2em; - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*------------------- Floated diff --git a/build/uncompressed/elements/label.css b/build/uncompressed/elements/label.css index 5708a7c00..47fcbb055 100644 --- a/build/uncompressed/elements/label.css +++ b/build/uncompressed/elements/label.css @@ -559,10 +559,9 @@ a.ui.teal.label:hover:before { padding: 0.5em !important; line-height: 1em; text-align: center; - vertical-align: baseline; - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*------------------- Pointing diff --git a/build/uncompressed/modules/checkbox.css b/build/uncompressed/modules/checkbox.css index 03e25e50a..c3b5da44c 100644 --- a/build/uncompressed/modules/checkbox.css +++ b/build/uncompressed/modules/checkbox.css @@ -58,10 +58,10 @@ } .ui.checkbox .box:after, .ui.checkbox label:after { - width: 0.5em; - height: 0.2em; - top: 0.25em; + top: 0.3em; left: 0.2em; + width: 0.45em; + height: 0.15em; } /*--- Label ---*/ .ui.checkbox + label { @@ -132,6 +132,140 @@ -moz-border-radius: 500px; border-radius: 500px; } +/*-------------- + Slider +---------------*/ +.ui.slider.checkbox { + width: 3em; + height: 2em; +} +/* Line */ +.ui.slider.checkbox:after { + position: absolute; + top: 1em; + left: 0em; + content: ''; + width: 100%; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); +} +/* Button */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + cursor: pointer; + display: block; + position: absolute; + top: 0.25em; + left: 0; + z-index: 1; + width: 1.5em; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; +} +/* Button Activation Light */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + opacity: 1; + position: absolute; + content: ''; + top: 0.375em; + left: 0.375em; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active Slider Toggle */ +.ui.slider.checkbox input:checked + .box, +.ui.slider.checkbox input:checked + label { + left: 1.75em; +} +.ui.slider.checkbox input:checked + .box:after, +.ui.slider.checkbox input:checked + label:after { + background-color: #89B84C; +} +/*-------------- + Toggle +---------------*/ +.ui.toggle.checkbox { + width: 3em; + height: 2em; +} +/* Line */ +.ui.toggle.checkbox:after { + cursor: pointer; + display: block; + position: absolute; + content: ''; + top: 0.25em; + left: 0em; + z-index: 1; + background-color: #FFFFFF; + width: 100%; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; +} +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + position: absolute; + top: 0.65em; + left: 0.5em; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Button Activation Light */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + opacity: 1; + content: ''; + position: absolute; + top: 0px; + left: 0px; + z-index: 2; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active toggle Toggle */ +.ui.toggle.checkbox input:checked + .box, +.ui.toggle.checkbox input:checked + label { + left: 1.75em; +} +.ui.toggle.checkbox input:checked + .box:after, +.ui.toggle.checkbox input:checked + label:after { + background-color: #89B84C; +} /*-------------- Sizes ---------------*/ @@ -162,94 +296,3 @@ .ui.huge.checkbox label { font-size: 1.5em; } -/*-------------- - Colors ----------------*/ -.ui.round.blue.checkbox label:after { - background: -webkit-linear-gradient(top, #016286 0%, #00506e 100%); - background: -moz-linear-gradient(top, #016286 0%, #00506e 100%); - background: -o-linear-gradient(top, #016286 0%, #00506e 100%); - background: -ms-linear-gradient(top, #016286 0%, #00506e 100%); - background: linear-gradient(top, #016286 0%, #00506e 100%); -} -/*-------------- - Rounded ----------------*/ -/* Alternate Round Style */ -.ui.round.checkbox { - width: 20px; - height: 20px; - margin: 0px auto; - background: #FCFFF4; - background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCFFF4', endColorstr='#b3bead', GradientType=0); - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - -webkit-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - position: relative; -} -.ui.round.checkbox .box, -.ui.round.checkbox label { - cursor: pointer; - position: absolute; - width: 14px; - height: 14px; - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - left: 3px; - top: 3px; - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5) inset, 0px 1px 0px #ffffff; - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5) inset, 0px 1px 0px #ffffff; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5) inset, 0px 1px 0px #ffffff; - background: -webkit-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: -moz-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: -o-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: -ms-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: linear-gradient(top, #222222 0%, #4d4d4d 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#4D4D4D', GradientType=0); -} -.ui.round.checkbox .box:after, -.ui.round.checkbox label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; - content: ''; - position: absolute; - width: 10px; - height: 10px; - background: #B6B6B6; - background: -webkit-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: -moz-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: -o-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: -ms-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: linear-gradient(top, #b6b6b6 0%, #929292 100%); - border: none; - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - top: 2px; - left: 2px; - -webkit-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); -} -.ui.round.checkbox .box:hover:after, -.ui.round.checkbox label:hover:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - filter: alpha(opacity=30); - opacity: 0.3; -} -.ui.round.checkbox input:checked + .box:after, -.ui.round.checkbox input:checked + label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; -} diff --git a/build/uncompressed/modules/dimmer.css b/build/uncompressed/modules/dimmer.css index 69fecbe8e..a036de802 100644 --- a/build/uncompressed/modules/dimmer.css +++ b/build/uncompressed/modules/dimmer.css @@ -16,6 +16,7 @@ position: relative; } .ui.dimmer { + display: none; position: absolute; top: 0em !important; left: 0em !important; @@ -52,7 +53,7 @@ z-index: 1000; } /* -.ui.dimmable.dimmed > :not(.dimmer) { +.ui.dimmed.dimmable > :not(.dimmer) { -webkit-transition: filter 0.5s ease ; @@ -99,12 +100,13 @@ /******************************* States *******************************/ -.ui.dimmable.dimmed > :not(.dimmer) { +.ui.dimmed.dimmable > :not(.dimmer) { -webkit-filter: blur(5px) grayscale(0.7); -moz-filter: blur(5px) grayscale(0.7); } -.ui.dimmable.dimmed > .ui.dimmer, -.ui.dimmer.active { +.ui.dimmed.dimmable > .ui.dimmer, +.ui.active.dimmer { + display: block; width: 100%; height: 100%; opacity: 1; @@ -131,7 +133,7 @@ transform-origin: top center; } /* -body.ui.dimmable.dimmed > :not(.dimmer){ +body.ui.dimmed.dimmable > :not(.dimmer){ -webkit-filter: ~"blur(15px) grayscale(0.7)"; -moz-filter: ~"blur(15px) grayscale(0.7)"; } @@ -165,7 +167,7 @@ body.ui.dimmable.dimmed > :not(.dimmer){ z-index: -100; background-color: rgba(0, 0, 0, 0); } -.ui.dimmable.dimmed > .ui.simple.dimmer { +.ui.dimmed.dimmable > .ui.simple.dimmer { overflow: visible; opacity: 1; width: 100%; @@ -176,6 +178,6 @@ body.ui.dimmable.dimmed > :not(.dimmer){ .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0); } -.ui.dimmable.dimmed > .ui.simple.inverted.dimmer { +.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } diff --git a/build/uncompressed/modules/reveal.css b/build/uncompressed/modules/reveal.css index 8ba55a1bd..60cc0d6c8 100644 --- a/build/uncompressed/modules/reveal.css +++ b/build/uncompressed/modules/reveal.css @@ -13,8 +13,13 @@ Reveal *******************************/ .ui.reveal { + display: inline-block; position: relative !important; z-index: 2 !important; + font-size: 0em !important; +} +.ui.reveal > .content { + font-size: 1em !important; } .ui.reveal > .visible.content { -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; @@ -26,8 +31,6 @@ position: absolute !important; top: 0em !important; left: 0em !important; - width: 100% !important; - height: 100% !important; z-index: 4 !important; -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; diff --git a/build/uncompressed/modules/search.css b/build/uncompressed/modules/search.css index bb420a57e..c5d7d886a 100644 --- a/build/uncompressed/modules/search.css +++ b/build/uncompressed/modules/search.css @@ -19,9 +19,9 @@ font-weight: normal; } .ui.search input { - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*-------------- Button diff --git a/build/uncompressed/modules/star.css b/build/uncompressed/modules/star.css index 2e414733d..f501f41f4 100644 --- a/build/uncompressed/modules/star.css +++ b/build/uncompressed/modules/star.css @@ -1,15 +1,14 @@ /******************************* Star Rating *******************************/ -.star.module { +.ui.rating.module { min-width: 88px; height: 42px; unicode-bidi: bidi-override; direction: rtl; font-size: 26px; } -.star.module i, -.ui.star { +.ui.rating.module .icon { cursor: default; float: left; padding: 2px 1px; @@ -19,8 +18,7 @@ color: transparent; } /* Non Selected Star */ -.star.module i:after, -.ui.star:after { +.ui.rating.module .icon:after { content: "\2605"; color: #8C8C8C; -webkit-transition: all 0.25s; @@ -29,24 +27,23 @@ -ms-transition: all 0.25s; transition: all 0.25s; } -/*-------------- - States ----------------*/ -/* Initialized is now clickable */ -.star.module.initialize, -.star.module.initialize i { +/******************************* + States +*******************************/ +/* Icons are clickable */ +.ui.active.rating.module .icon { cursor: pointer; } /* Current Star Rating */ -.star.module i.active:after { +.ui.rating.module .active.icon:after { color: #FFCB08; } -.star.module.hover i.active:after { +/* Hover */ +.ui.rating.module.hover .active.icon:after { opacity: 0.5; } -/* Hover */ -.star.module i.hover:after, -.star.module i.hover.active:after { +.ui.rating.module .icon.hover:after, +.ui.rating.module .icon.hover.active:after { opacity: 1; color: #FFB70A; text-shadow: 0px 0px 7px #FFCB08; diff --git a/build/uncompressed/modules/star.js b/build/uncompressed/modules/star.js index 837e775ed..6150b05a6 100644 --- a/build/uncompressed/modules/star.js +++ b/build/uncompressed/modules/star.js @@ -8,12 +8,12 @@ ;(function ($, window, document, undefined) { -$.fn.starReview = function(parameters) { +$.fn.rating = function(parameters) { var $allModules = $(this), moduleSelector = $allModules.selector || '', - settings = $.extend(true, {}, $.fn.starReview.settings, parameters), + settings = $.extend(true, {}, $.fn.rating.settings, parameters), namespace = settings.namespace, className = settings.className, @@ -35,7 +35,7 @@ $.fn.starReview = function(parameters) { .each(function() { var $module = $(this), - $star = $module.find(selector.star), + $icon = $module.find(selector.icon), element = this, instance = $module.data(moduleNamespace), @@ -46,23 +46,14 @@ $.fn.starReview = function(parameters) { initialize: function() { if(settings.rateable) { - // expandable with states - if($.fn.state !== undefined) { - $module - .state() - ; - $star - .state() - ; - } - $star + $icon .bind('mouseenter' + eventNamespace, module.event.mouseenter) .bind('mouseleave' + eventNamespace, module.event.mouseleave) .bind('click' + eventNamespace, module.event.click) ; } $module - .addClass(className.initialize) + .addClass(className.active) ; module.instantiate(); }, @@ -73,21 +64,30 @@ $.fn.starReview = function(parameters) { ; }, + destroy: function() { + $module + .removeData(moduleNamespace) + ; + $icon + .off(eventNamespace) + ; + }, + setRating: function(rating) { var - $activeStar = $star.eq(rating - 1) + $activeIcon = $icon.eq(rating - 1) ; $module .removeClass(className.hover) ; - $star + $icon .removeClass(className.hover) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.active) ; - $activeStar + $activeIcon .addClass(className.active) .prevAll() .addClass(className.active) @@ -98,31 +98,31 @@ $.fn.starReview = function(parameters) { event: { mouseenter: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.hover) ; $module .addClass(className.hover) ; - $activeStar + $activeIcon .addClass(className.hover) .prevAll() .addClass(className.hover) ; }, mouseleave: function() { - $star + $icon .removeClass(className.hover) ; }, click: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - module.setRating( $star.index($activeStar) + 1); + module.setRating( $icon.index($activeIcon) + 1); } }, setting: function(name, value) { @@ -307,28 +307,26 @@ $.fn.starReview = function(parameters) { ; }; -$.fn.starReview.settings = { +$.fn.rating.settings = { - name : 'Star', - namespace : 'star', + name : 'Star', + namespace : 'icon', - rateable : true, - onRate : function(){}, + rateable : true, + onRate : function(){}, error: { method : 'The method you called is not defined' }, className : { - initialize : 'initialize', - loading : 'loading', active : 'active', hover : 'hover', - down : 'down' + loading : 'loading' }, selector : { - star : 'i' + icon : '.icon' } }; diff --git a/build/uncompressed/views/feed.css b/build/uncompressed/views/feed.css index 9a49a558e..995a36a0a 100644 --- a/build/uncompressed/views/feed.css +++ b/build/uncompressed/views/feed.css @@ -100,6 +100,9 @@ /******************************* Variations *******************************/ +.ui.small.feed { + font-size: 0.875em; +} .ui.small.feed .label img { width: 2.5em; } diff --git a/build/uncompressed/views/list.css b/build/uncompressed/views/list.css index e8f35f9ac..64a9f1485 100644 --- a/build/uncompressed/views/list.css +++ b/build/uncompressed/views/list.css @@ -23,7 +23,7 @@ ul.ui.list ul, ol.ui.list ol, .ui.list .list { margin: 0em; - padding: 0.5em 0em 0.5em 0.5em; + padding: 0.5em 0em 0.5em 1em; } ul.ui.list:first-child, ol.ui.list:first-child, @@ -173,7 +173,7 @@ ul.ui.list li:before, .ui.bulleted.list .item:before { position: absolute; left: -1em; - content: '·'; + content: '•'; line-height: 1.2rem; vertical-align: top; } @@ -229,10 +229,10 @@ ol.ui.list li:before, ol.ui.list ol, .ui.ordered.list .list { counter-reset: ordered; - padding-left: 2em; + padding-left: 3em; } -ol.ui.list ol ol li:before, -.ui.ordered.list .list .list .item:before { +ol.ui.list ol li:before, +.ui.ordered.list .list .item:before { left: -2.5em; } /* Horizontal Ordered */ diff --git a/node/package.json b/node/package.json index f31df1bd0..ac734fcc7 100755 --- a/node/package.json +++ b/node/package.json @@ -4,7 +4,7 @@ "version": 0.1 }, "dependencies": { - "docpad": "~6.51.6", + "docpad": "~6.52.1", "docpad-plugin-eco": "~2.0.2", "docpad-plugin-ghpages": "~2.3.0" }, diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html index 0f8a0e83a..601aaf04d 100755 --- a/node/src/documents/collections/form.html +++ b/node/src/documents/collections/form.html @@ -12,7 +12,7 @@ type : 'UI Collection'

Form

A form is a collection of user input elements

- Looking for form validation? + Looking for form validation? Form input can be validated using the form behavior definition
@@ -27,10 +27,10 @@ type : 'UI Collection'

Types

- +

Form:

-

+

Forms always include fields, and fields always contain form elements. Fields themselves may also include: ui inputs, standard form fields, ui labels, textareas, as well as: checkboxes, and message blocks. @@ -79,7 +79,7 @@ type : 'UI Collection'

- +

Text Area

A textarea uses the default form element

@@ -90,7 +90,7 @@ type : 'UI Collection'
- +

Checkbox

UI Checkboxes are styled forms of standard form checkboxes.

@@ -100,18 +100,25 @@ type : 'UI Collection'
- +
-
+
+ + +
+ +
+
+
- +
- +

Radio Box

Radio boxes are styled forms of standard form radio controls.

@@ -155,7 +162,7 @@ type : 'UI Collection'
- +

Text Block

Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.

@@ -173,11 +180,11 @@ type : 'UI Collection'

States

Form

- +

Loading

If a form is in loading state, it will automatically show a loading indicator:

- +
@@ -207,7 +214,7 @@ type : 'UI Collection'
Submit
- +

Error

If a form is in an error state, it will automatically show any error message blocks:

@@ -244,11 +251,11 @@ type : 'UI Collection'
Submit
- +

Warning

If a form is in warning state, it will automatically show any warning message block:

- +
Could you check something!
@@ -287,13 +294,13 @@ type : 'UI Collection'
Submit
- +

Form Fields

- +

Error

Individual fields may contain an error state

- +
@@ -307,11 +314,11 @@ type : 'UI Collection'
- +

Disabled

Individual fields may be disabled or read only

- +
@@ -327,7 +334,7 @@ type : 'UI Collection'

Variations

- +

Forms

@@ -347,7 +354,7 @@ type : 'UI Collection'
Submit
- +

Size

A form can also be small or large

@@ -379,11 +386,11 @@ type : 'UI Collection'
Submit
- +

Inverted

A form on a dark background may have to invert its color scheme

- +
@@ -407,10 +414,10 @@ type : 'UI Collection'
- - + +

Fields

- +

Inline

A field can have its label next to instead of above it.

@@ -421,7 +428,7 @@ type : 'UI Collection'
- +

Date

A field can let users know they are for dates

@@ -432,10 +439,10 @@ type : 'UI Collection'
- - + +

Groups

- +

Fields

Fields can exist together side by side

@@ -456,7 +463,7 @@ type : 'UI Collection'
- +

Grouped Fields

Fields can be grouped to show related choices

@@ -467,28 +474,28 @@ type : 'UI Collection'
- +
- +
- +
- +
@@ -512,5 +519,5 @@ type : 'UI Collection' - + \ No newline at end of file diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html index 47455fc07..ffb37f073 100755 --- a/node/src/documents/elements/button.html +++ b/node/src/documents/elements/button.html @@ -55,6 +55,22 @@ 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

@@ -189,7 +205,7 @@ type : 'UI Element' Add Friend
-
+
Change Language
@@ -204,6 +220,7 @@ type : 'UI Element' Blue Button Purple Button Teal Button + Orange Button
@@ -253,10 +270,6 @@ type : 'UI Element'

Group Variations

-

Singular variations can be applied to groups to infer all elements share the same quality

- - -

Vertical

Groups can be formatted to appear vertically

@@ -326,7 +339,7 @@ type : 'UI Element'

Basic

A button group can be formatted to remove extra formatting

-
+
One
Two
Three
diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html index 5326d8987..51de61f2e 100755 --- a/node/src/documents/elements/label.html +++ b/node/src/documents/elements/label.html @@ -52,7 +52,7 @@ type : 'UI Element' +

Multiple Highlight Colors

+

It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.

+
+ /* text selected turns highlighted yellow */ + ::-webkit-selection { + background-color: #FFFFCC; + color: #555555; + } + ::-moz-selection { + background-color: #FFFFCC; + color: #555555; + } + ::selection { + background-color: #FFFFCC; + color: #555555; + } + /* headers selected turn red */ + h1::-moz-selection, + h2::-moz-selection, + h3::-moz-selection { + background-color: #F1C1C2; + color: #222222; + } + h1::selection, + h2::selection, + h3::selection { + background-color: #F1C1C2; + color: #222222; + } +
+ +

Shading Borders

When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.

@@ -356,9 +388,9 @@ type : 'UI Guide' }
-

No wrappers, no excess markup

+

Avoid non-semantic tags, make wrappers groups

UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accomodate extra styling.

-

If there is no other option than wrapping content in a containing HTML element, consider using a name that describes the content instead of the word wrapper or container.

+

If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like wrapper

- +

Defining Definitions

Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.

CSS Definitions avoid conflicts with other elements by descending rules from a common ui namespace. UI namespaces should use a single word class name that represents its function descriptively on a web site. For example, a button will be namespaced in html using the class name "ui button".

-

Definition Types

+

Definition Types

Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.

- +
- + - + @@ -60,7 +60,7 @@ type : 'UI Introduction'

UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an "element" in chemistry.

UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.

- +
Cancel
@@ -68,12 +68,12 @@ type : 'UI Introduction'
- Examples of UI elements: +

Examples of UI elements:

Element a basic building block of a website, exists alone or in homogenous groups
Collection a heterogeneous group of several elements which are usually found togethera heterogeneous group of several elements which can usually be found together. often pairs with individual elements
View a way to present common website content a way to present common website content like comments, activity feeds
Module
@@ -85,32 +85,33 @@ type : 'UI Introduction'
Button -
Button
+
Button
Input -
+
+
Loader -
+
Segment -
Segment
+
Segment

UI Collections

- +

UI Collections are groups of heteregeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.

UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements definitions, collections are not typically useful to define in plural.

-

Examples of UI collections:

+

Examples of UI collections:

  • Forms
  • Tables
  • @@ -131,10 +132,10 @@ type : 'UI Introduction'

UI Views

- +

UI Views are common ways to structure types of content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view.

-

Examples of UI views:

+

Examples of UI views:

  • Comment Feed
  • Activity Feed
  • @@ -155,16 +156,13 @@ type : 'UI Introduction' -

    Mostly tag ambivalent

    - -

    Semantic is based on class names, instead of tags. This means, except for links, tables and form elements, you can use semantic with tags like <div> <article> <nav> without any difference.

    Context sensitive

    In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.

    For example, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.

    - +
    @@ -174,8 +172,8 @@ type : 'UI Introduction'
    -

    The same variation can also be useful in the context of a menu.

    - +

    The same variation can also be useful in the context of a menu although the implementation may be different.

    +
    - +
    -

    Validation w/ Message

    +

    Validation w/ Message

    Forms that contain a ui message error block will automatically be filled in with form validation information.

    The template for error messages can be modified by adjusting settings.template.error
    - +

    Let's go ahead and get you signed up.

    @@ -153,7 +153,7 @@ type : 'UI Behavior'
    -

    Custom Validation

    +

    Custom Validation

    Custom form validation requires passing in a validation object with the rules required to validate your form.

    A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation @@ -191,9 +191,9 @@ type : 'UI Behavior'
    - +
    -

    Inline Validation

    +

    Inline Validation

    Validation messages can also appear inline. UI Forms automatically format labels with the className prompt. These validation prompts are also set to appear on input change instead of form submission.

    Let's go ahead and get you signed up.

    @@ -227,7 +227,7 @@ type : 'UI Behavior'

    Settings

    - +

    Defaults

    @@ -256,7 +256,7 @@ type : 'UI Behavior'
    - + @@ -284,7 +284,7 @@ type : 'UI Behavior'
    Callbacks
    - + diff --git a/node/src/documents/modules/rating.html b/node/src/documents/modules/rating.html new file mode 100755 index 000000000..dd032b7d5 --- /dev/null +++ b/node/src/documents/modules/rating.html @@ -0,0 +1,317 @@ +--- +layout : 'default' +css : 'rating' + +title : 'Rating' +type : 'UI Module' +--- + + + +
    +
    +

    Rating

    +

    A rating allows a user to assess and view the desirability of content.

    +
    + Definition + +
    + +
    +
    +
    + +
    + +
    + +

    Usage

    + +

    Initializing a rating

    +

    To change the range of your rating, simply adjust the number of icons in the initialized html

    +
    + To use any variations besides the basic rating ui icons must be included to provide the additional icons required. +
    +
    + $('.ui.rating') + .rating() + ; +
    +
    +
    + + + + + +
    +
    + + +

    Types

    + + +
    +

    Rating

    +

    A basic rating

    +
    + + + + + +
    +
    + +
    +

    Star

    +

    A star rating uses a set of star glyphs to show a rating

    +
    + + + + + +
    +
    + +
    +

    Heart

    +

    A heart rating uses a set of heart glyphs to show a rating

    +
    + + + + + +
    +
    +

    Examples

    + +
    +

    Setting existing values

    +

    Starting ratings can be set either using metadata values or the setting initialRating.

    +
    If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.
    +
    +
    + +
    + + + + + +
    +
    +
    New York Dog Fair
    + A fun day at the fair +
    +
    +
    + +
    + + + + + +
    +
    +
    Dog Appreciation Day
    + I night to tell your dog he's great +
    +
    +
    +
    + + +

    Variations

    + +
    +

    Size

    +

    A rating can vary in size

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

    Behavior

    +
    +

    Set Rating

    +

    A rating can be set programatically

    +
    + $('.ui.rating') + .rating('set rating', 3) + ; +
    +
    + +

    Settings

    + +
    + +

    Rating Settings

    +

    Rating settings modify the rating's behavior

    +
    General Settings
    + + + + + + + + + + + + + + + + + +
    SettingDefaultDescription
    initialRating0A number representing the default rating to apply
    interactivetrueWhether to enable user's ability to rate
    + +
    +

    Callbacks

    +

    Callback settings specify a function to occur after a specific behavior.

    + + + + + + + + + + + + + + +
    SettingContextDescription
    onRate(value)RatingIs called after user selects a new rating
    + +
    + +
    + +

    DOM Settings

    +

    DOM settings specify how this module should interface with the DOM

    + + + + + + + + + + + + + + + + + + + + + +
    SettingDefaultDescription
    namespaceratingEvent namespace. Makes sure module teardown does not effect other events attached to an element.
    selector +
    + selector : { + icon : '.icon' + } +
    +
    className +
    + className : { + active : 'active', + hover : 'hover', + loading : 'loading' + }, +
    +
    + +
    + +
    + +

    Debug Settings

    +

    Debug settings controls debug output to the console

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SettingDefaultDescription
    nameRatingName used in debug logs
    debugTrueProvides standard debug output to console
    performanceTrueProvides standard debug output to console
    verboseTrueProvides ancillary debug output to console
    error +
    + error : { + action : 'You called a rating action that was not defined' + } +
    +
    + +
    + +
    + + + \ No newline at end of file diff --git a/node/src/documents/modules/reveal.html b/node/src/documents/modules/reveal.html index 33b9b6f00..1d4b67dbc 100755 --- a/node/src/documents/modules/reveal.html +++ b/node/src/documents/modules/reveal.html @@ -13,7 +13,7 @@ type : 'UI Module'
    - +
    - +

    Types

    Reveal

    -

    A standard reveal

    -
    +

    A standard reveal has no special formatting

    +
    A reveal will take no action unless a type of reveal is specified.
    -
    +
    -

    Fade

    An element can disappear to reveal content below

    -
    +
    - +
    - +

    Move

    An element can move in a direction to reveal content

    -
    +
    - +
    -
    +
    - +
    - +
    -
    +
    - +
    - +
    -
    +
    - +
    - +

    Rotate

    An element can rotate to reveal content below

    @@ -137,39 +88,39 @@ type : 'UI Module'
    - +

    Variations

    - +

    Masked

    An element can mask its content so that an element does not escape its parent

    -
    - - +
    + +
    - +

    Instant

    An element can show its content without delay

    -
    - - +
    + +
    - - + +

    States

    Disabled

    A disabled reveal will not animate when hovered

    -
    +
    - - - + + +
    diff --git a/node/src/documents/modules/shape.html b/node/src/documents/modules/shape.html index b6f2022a9..64aebb59a 100755 --- a/node/src/documents/modules/shape.html +++ b/node/src/documents/modules/shape.html @@ -17,7 +17,7 @@ type : 'UI Module'
    - +
    - - - + + +

    Types

    - +
    The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.

    Shape

    A shape has multiple sides of arbitrary content. Only one is visible

    - +
    This side is visible.
    @@ -44,10 +44,27 @@ type : 'UI Module'
    - +

    Examples

    - + +
    + +

    Interactive

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

    Automatic

    @@ -102,7 +119,7 @@ type : 'UI Module'
    - +
    @@ -156,7 +173,7 @@ type : 'UI Module'
    - +
    @@ -211,22 +228,6 @@ type : 'UI Module'
    -
    - -

    Interactive

    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    -

    Shape

    @@ -258,7 +259,7 @@ type : 'UI Module'

    To manually set the next side to appear use a selector or jQuery object

    $('.shape') - .shape('set nextSide', '.second') + .shape('set next side', '.second') .shape('flip up') ;
    @@ -268,7 +269,7 @@ type : 'UI Module' ;

    Defaults

    - +
    @@ -311,7 +312,7 @@ type : 'UI Module'
    Shape Settings
    Object containing class names used by module.
    - +
    @@ -326,7 +327,7 @@ type : 'UI Module'
    Callbacks
    Callback after side is changed. This context is new side.
    - +
    diff --git a/node/src/documents/modules/sidebar.html b/node/src/documents/modules/sidebar.html index d05792510..88edb0d7c 100755 --- a/node/src/documents/modules/sidebar.html +++ b/node/src/documents/modules/sidebar.html @@ -71,7 +71,7 @@ type : 'UI Module' Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
    • Specify your fixed content without using the css left property -
    • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class pushed when the view is moved.
    • +
    • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class (direction) pushed when the view is moved.
    diff --git a/node/src/documents/views/feed.html b/node/src/documents/views/feed.html index abde3b80b..2f6bf319a 100755 --- a/node/src/documents/views/feed.html +++ b/node/src/documents/views/feed.html @@ -26,9 +26,9 @@ type : 'UI View'

    Feed

    A standard feed with some optional elements

    -
    +

    - Recent Activity + Recent Activity

    @@ -177,7 +177,7 @@ type : 'UI View'
    -
    +

    My Activity

    @@ -228,7 +228,7 @@ type : 'UI View'
    -
    +

    Followers Activity

    diff --git a/node/src/files/components/semantic/collections/menu.css b/node/src/files/components/semantic/collections/menu.css index 8e2d65395..b2009711c 100755 --- a/node/src/files/components/semantic/collections/menu.css +++ b/node/src/files/components/semantic/collections/menu.css @@ -202,9 +202,9 @@ /*-------------- Dropdowns ---------------*/ -.ui.menu .dropdown.item .menu { +/*.ui.menu .dropdown.item .menu { margin: 1px 0px 0px 0px; -} +}*/ .ui.menu .simple.dropdown.item .menu { margin: 0px !important; } diff --git a/node/src/files/components/semantic/elements/button.css b/node/src/files/components/semantic/elements/button.css index 33da9d937..788fadd74 100755 --- a/node/src/files/components/semantic/elements/button.css +++ b/node/src/files/components/semantic/elements/button.css @@ -66,6 +66,48 @@ margin: -0.8em -1.5em; padding: 0.8em 1.5em; } +/*------------------- + Primary +--------------------*/ +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #D95C5C; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .active.button, +.ui.primary.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*------------------- + Secondary +--------------------*/ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #00B5AD; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover, +.ui.secondary.buttons .active.button, +.ui.secondary.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #00847E; + color: #FFFFFF; +} /*------------------- Social --------------------*/ @@ -111,10 +153,29 @@ /******************************* States *******************************/ +/*-------------- + Active +---------------*/ +.ui.buttons .active.button, +.ui.active.button { + opacity: 1 !important; + background-color: #B0B0B0; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; +} /*-------------- Hover ---------------*/ -.ui.button:hover { +.ui.button:hover, +.ui.active.button:hover { opacity: 1 !important; background-color: #A4A4A4; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); @@ -127,7 +188,8 @@ /*-------------- Down ---------------*/ -.ui.button:active { +.ui.button:active, +.ui.active.button:active { opacity: 1 !important; background-color: #8C8C8C; color: #FFFFFF; @@ -136,24 +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; } -/*-------------- - Active ----------------*/ -.ui.buttons .active.button, -.ui.active.button { - opacity: 1 !important; - background-color: #B0B0B0; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); - color: #FFFFFF; - -webkit-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; - -moz-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; - box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; -} /*-------------- Error ---------------*/ @@ -395,7 +439,7 @@ color: #999999 !important; font-weight: normal; text-transform: none; - text-shadow: none; + text-shadow: none !important; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -408,16 +452,6 @@ -moz-border-radius: 0.2em; border-radius: 0.2em; } -.ui.basic.buttons .button { - border: none !important; - border-left: 1px solid rgba(0, 0, 0, 0.1) !important; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.ui.basic.buttons .button:first-child { - border-left: none !important; -} .ui.basic.buttons .button:hover, .ui.basic.button:hover { color: #7F7F7F !important; @@ -437,14 +471,32 @@ .ui.basic.button.active { background-color: rgba(0, 0, 0, 0.05); color: #7F7F7F; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + box-shadow: 0px 0px 0px 1px #BDBDBD inset; } .ui.basic.buttons .button.active:hover, .ui.basic.button.active:hover { background-color: rgba(0, 0, 0, 0.1); } +/* Basic Group */ +.ui.basic.buttons .button { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button:hover, +.ui.basic.buttons .button:active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button.active { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} /*-------------- Labeled Icon ---------------*/ @@ -848,6 +900,25 @@ background-color: #D24B4C; color: #FFFFFF; } +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #E96633; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover, +.ui.orange.buttons .active.button, +.ui.orange.button.active { + background-color: #FF7038; + color: #FFFFFF; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #DA683B; + color: #FFFFFF; +} /*--- Blue ---*/ .ui.blue.buttons .button, .ui.blue.button { diff --git a/node/src/files/components/semantic/elements/header.css b/node/src/files/components/semantic/elements/header.css index ec066f2ef..b9844b4f7 100755 --- a/node/src/files/components/semantic/elements/header.css +++ b/node/src/files/components/semantic/elements/header.css @@ -21,7 +21,6 @@ font-weight: bold; line-height: 1.33; } -.ui.header .ui.sub.header, .ui.header .sub.header { font-size: 1rem; font-weight: normal; @@ -216,6 +215,9 @@ h5.ui.header { padding-bottom: 0.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +.ui.dividing.header .sub.header { + padding-bottom: 0.5em; +} .ui.dividing.header .icon { margin-bottom: 0.2em; } diff --git a/node/src/files/components/semantic/elements/image.css b/node/src/files/components/semantic/elements/image.css index b970a988b..24e7d725d 100755 --- a/node/src/files/components/semantic/elements/image.css +++ b/node/src/files/components/semantic/elements/image.css @@ -56,9 +56,9 @@ img.ui.image { .ui.circular.images img, .ui.circular.image img, .ui.circular.image { - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*-------------- Avatar @@ -71,9 +71,9 @@ img.ui.image { display: inline-block; width: 2em; height: 2em; - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*------------------- Floated diff --git a/node/src/files/components/semantic/elements/label.css b/node/src/files/components/semantic/elements/label.css index 5708a7c00..47fcbb055 100755 --- a/node/src/files/components/semantic/elements/label.css +++ b/node/src/files/components/semantic/elements/label.css @@ -559,10 +559,9 @@ a.ui.teal.label:hover:before { padding: 0.5em !important; line-height: 1em; text-align: center; - vertical-align: baseline; - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*------------------- Pointing diff --git a/node/src/files/components/semantic/modules/chatroom.css b/node/src/files/components/semantic/modules/chatroom.css new file mode 100644 index 000000000..54be7e1db --- /dev/null +++ b/node/src/files/components/semantic/modules/chatroom.css @@ -0,0 +1,257 @@ +/******************************* + Chat Room +*******************************/ +.ui.chatroom { + background-color: #F8F8F8; + width: 330px; + height: 370px; + padding: 0px; +} +.ui.chatroom .room { + position: relative; + overflow: hidden; + height: 286px; + border: 1px solid #999999; + border-top: none; + border-bottom: none; +} +.ui.chatroom .room .loader { + display: none; + margin: -25px 0px 0px -25px; +} +/* Chat Room Actions */ +.ui.chatroom .actions { + overflow: hidden; + background-color: #EEEEEE; + padding: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + -moz-border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.chatroom .actions .button { + float: right; + margin-left: 3px; +} +/* Online User Count */ +.ui.chatroom .actions .message { + float: left; + margin-left: 6px; + font-size: 11px; + color: #AAAAAA; + text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); + line-height: 28px; +} +.ui.chatroom .actions .message .loader { + display: inline-block; + margin-right: 8px; +} +/* Chat Room Text Log */ +.ui.chatroom .log { + float: left; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; +} +.ui.chatroom .log .message { + padding: 3px 0px; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .message:first-child { + border-top: none; +} +/* status event */ +.ui.chatroom .status { + padding: 5px 0px; + color: #AAAAAA; + font-size: 12px; + font-style: italic; + line-height: 1.33; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .status:first-child { + border-top: none; +} +.ui.chatroom .log .flag { + float: left; +} +.ui.chatroom .log p { + margin-left: 0px; +} +.ui.chatroom .log .author { + font-weight: bold; + -webkit-transition: color 0.3s ease-out; + -moz-transition: color 0.3s ease-out; + -o-transition: color 0.3s ease-out; + -ms-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; +} +.ui.chatroom .log a.author:hover { + opacity: 0.8; +} +.ui.chatroom .log .message.admin p { + font-weight: bold; + margin: 1px 0px 0px 23px; +} +.ui.chatroom .log .divider { + margin: -1px 0px; + font-size: 11px; + padding: 10px 0px; + border-top: 1px solid #F8F8F8; + border-bottom: 1px solid #F8F8F8; +} +.ui.chatroom .log .divider .rule { + top: 50%; + width: 15%; +} +.ui.chatroom .log .divider .label { + color: #777777; + margin: 0px; +} +/* Chat Room User List */ +.ui.chatroom .room .list { + position: relative; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; + float: left; + background-color: #EEEEEE; + border-left: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user { + display: table; + padding: 3px 7px; + border-bottom: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user:hover { + background-color: #F8F8F8; +} +.ui.chatroom .room .list .image { + display: table-cell; + vertical-align: middle; + width: 20px; +} +.ui.chatroom .room .list .image img { + width: 20px; + height: 20px; + vertical-align: middle; +} +.ui.chatroom .room .list p { + display: table-cell; + vertical-align: middle; + padding-left: 7px; + padding-right: 14px; + font-size: 11px; + line-height: 1.2; + font-weight: bold; +} +.ui.chatroom .room .list a:hover { + opacity: 0.8; +} +/* User List Loading */ +.ui.chatroom.loading .loader { + display: block; +} +/* Chat Room Talk Input */ +.ui.chatroom .talk { + border: 1px solid #999999; + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 0px 0px; + background-color: #CCCCCC; + background: #ffffff -webkit-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; + background: #ffffff -moz-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; + background: #ffffff -o-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; + background: #ffffff -ms-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; + background: #ffffff linear-gradient(top, #eeeeee 0%, #aaaaaa 100%) repeat; + -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; + -moz-box-shadow: 0px 1px 0px #FFFFFF inset; + box-shadow: 0px 1px 0px #FFFFFF inset; + -webkit-border-radius: 0px 0px 5px 5px; + -moz-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} +.ui.chatroom .talk .avatar, +.ui.chatroom .talk input, +.ui.chatroom .talk .button { + float: left; +} +.ui.chatroom .talk .avatar { + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-left: 1px solid rgba(0, 0, 0, 0.1); + width: 30px; + height: 30px; + margin: 0px 0px 0px 5px; + background-color: #DADADA; +} +.ui.chatroom .talk .avatar img { + display: block; + width: 30px; + height: 30px; + margin-right: 4px; +} +.ui.chatroom .talk input { + border: 1px solid #CCCCCC; + margin: 0px; + width: 196px; + height: 14px; + padding: 8px 5px; + font-size: 12px; + color: #555555; +} +.ui.chatroom .talk input.focus { + border: 1px solid #AAAAAA; +} +.ui.chatroom .send { + width: 80px; + height: 32px; + margin-left: -1px; + padding: 4px 12px; + font-size: 12px; + line-height: 23px; + -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 0 5px 5px 0; +} +.ui.chatroom .talk .log-in.button { + display: block; + float: none; + margin-top: -6px; + height: 22px; + border-radius: 0px 0px 4px 4px; +} +.ui.chatroom .talk .log-in.button i { + vertical-align: text-top; +} +/* Quirky Flags */ +.ui.chatroom .log .team.flag { + width: 18px; +} +/* Chat room Loaded */ +.ui.chatroom.loading .loader { + display: block; +} +/* Standard Size */ +.ui.chatroom { + width: 330px; + height: 370px; +} +.ui.chatroom .room .container { + width: 3000px; +} +.ui.chatroom .log { + width: 314px; + height: 278px; + padding: 4px 7px; +} +.ui.chatroom .room .list { + width: 124px; + height: 278px; + padding: 4px 0px; +} +.ui.chatroom .room .list .user { + width: 110px; +} +.ui.chatroom .talk { + height: 40px; +} diff --git a/src/modules/chat.js b/node/src/files/components/semantic/modules/chatroom.js old mode 100755 new mode 100644 similarity index 96% rename from src/modules/chat.js rename to node/src/files/components/semantic/modules/chatroom.js index 54ece4db9..57e5bd021 --- a/src/modules/chat.js +++ b/node/src/files/components/semantic/modules/chatroom.js @@ -8,9 +8,9 @@ ;(function ($, window, document, undefined) { - $.fn.chat = function(key, channelName, parameters) { + $.fn.chatroom = function(parameters) { var - settings = $.extend(true, {}, $.fn.chat.settings, parameters), + settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), className = settings.className, namespace = settings.namespace, @@ -68,7 +68,7 @@ if(Pusher === undefined) { module.error(error.pusher); } - if(key === undefined || channelName === undefined) { + if(settings.key === undefined || settings.channelName === undefined) { module.error(error.key); return false; } @@ -78,10 +78,10 @@ } // define pusher - pusher = new Pusher(key); + pusher = new Pusher(settings.key); Pusher.channel_auth_endpoint = settings.endpoint.authentication; - channel = pusher.subscribe(channelName); + channel = pusher.subscribe(settings.channelName); channel.bind('pusher:subscription_succeeded', module.user.list.create); channel.bind('pusher:subscription_error', module.error); @@ -291,7 +291,7 @@ url : settings.endpoint.message, method : 'POST', data : { - 'chat_message': { + 'message': { content : message, timestamp : new Date().getTime() } @@ -484,12 +484,14 @@ return this; }; - $.fn.chat.settings = { + $.fn.chatroom.settings = { - name : 'Chat', + name : 'Chat', debug : false, namespace : 'chat', + channel : 'present-chat', + onJoin : function(){}, onMessage : function(){}, onExpand : function(){}, @@ -499,7 +501,6 @@ partingMessages : false, userCount : true, - randomColor : true, speed : 300, @@ -529,11 +530,11 @@ }, selector : { - userCount : '.actions .message', - userListButton : '.actions .button.user-list', - expandButton : '.actions .button.expand', + userCount : '.actions .message', + userListButton : '.actions .list.button', + expandButton : '.actions .expand.button', room : '.room', - userList : '.room .user-list', + userList : '.room .list', log : '.room .log', message : '.room .log .message', author : '.room log .message .author', diff --git a/node/src/files/components/semantic/modules/checkbox.css b/node/src/files/components/semantic/modules/checkbox.css index 03e25e50a..c3b5da44c 100755 --- a/node/src/files/components/semantic/modules/checkbox.css +++ b/node/src/files/components/semantic/modules/checkbox.css @@ -58,10 +58,10 @@ } .ui.checkbox .box:after, .ui.checkbox label:after { - width: 0.5em; - height: 0.2em; - top: 0.25em; + top: 0.3em; left: 0.2em; + width: 0.45em; + height: 0.15em; } /*--- Label ---*/ .ui.checkbox + label { @@ -132,6 +132,140 @@ -moz-border-radius: 500px; border-radius: 500px; } +/*-------------- + Slider +---------------*/ +.ui.slider.checkbox { + width: 3em; + height: 2em; +} +/* Line */ +.ui.slider.checkbox:after { + position: absolute; + top: 1em; + left: 0em; + content: ''; + width: 100%; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); +} +/* Button */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + cursor: pointer; + display: block; + position: absolute; + top: 0.25em; + left: 0; + z-index: 1; + width: 1.5em; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; +} +/* Button Activation Light */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + opacity: 1; + position: absolute; + content: ''; + top: 0.375em; + left: 0.375em; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active Slider Toggle */ +.ui.slider.checkbox input:checked + .box, +.ui.slider.checkbox input:checked + label { + left: 1.75em; +} +.ui.slider.checkbox input:checked + .box:after, +.ui.slider.checkbox input:checked + label:after { + background-color: #89B84C; +} +/*-------------- + Toggle +---------------*/ +.ui.toggle.checkbox { + width: 3em; + height: 2em; +} +/* Line */ +.ui.toggle.checkbox:after { + cursor: pointer; + display: block; + position: absolute; + content: ''; + top: 0.25em; + left: 0em; + z-index: 1; + background-color: #FFFFFF; + width: 100%; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; +} +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + position: absolute; + top: 0.65em; + left: 0.5em; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Button Activation Light */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + opacity: 1; + content: ''; + position: absolute; + top: 0px; + left: 0px; + z-index: 2; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active toggle Toggle */ +.ui.toggle.checkbox input:checked + .box, +.ui.toggle.checkbox input:checked + label { + left: 1.75em; +} +.ui.toggle.checkbox input:checked + .box:after, +.ui.toggle.checkbox input:checked + label:after { + background-color: #89B84C; +} /*-------------- Sizes ---------------*/ @@ -162,94 +296,3 @@ .ui.huge.checkbox label { font-size: 1.5em; } -/*-------------- - Colors ----------------*/ -.ui.round.blue.checkbox label:after { - background: -webkit-linear-gradient(top, #016286 0%, #00506e 100%); - background: -moz-linear-gradient(top, #016286 0%, #00506e 100%); - background: -o-linear-gradient(top, #016286 0%, #00506e 100%); - background: -ms-linear-gradient(top, #016286 0%, #00506e 100%); - background: linear-gradient(top, #016286 0%, #00506e 100%); -} -/*-------------- - Rounded ----------------*/ -/* Alternate Round Style */ -.ui.round.checkbox { - width: 20px; - height: 20px; - margin: 0px auto; - background: #FCFFF4; - background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCFFF4', endColorstr='#b3bead', GradientType=0); - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - -webkit-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - position: relative; -} -.ui.round.checkbox .box, -.ui.round.checkbox label { - cursor: pointer; - position: absolute; - width: 14px; - height: 14px; - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - left: 3px; - top: 3px; - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5) inset, 0px 1px 0px #ffffff; - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5) inset, 0px 1px 0px #ffffff; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5) inset, 0px 1px 0px #ffffff; - background: -webkit-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: -moz-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: -o-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: -ms-linear-gradient(top, #222222 0%, #4d4d4d 100%); - background: linear-gradient(top, #222222 0%, #4d4d4d 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#4D4D4D', GradientType=0); -} -.ui.round.checkbox .box:after, -.ui.round.checkbox label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; - content: ''; - position: absolute; - width: 10px; - height: 10px; - background: #B6B6B6; - background: -webkit-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: -moz-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: -o-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: -ms-linear-gradient(top, #b6b6b6 0%, #929292 100%); - background: linear-gradient(top, #b6b6b6 0%, #929292 100%); - border: none; - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - top: 2px; - left: 2px; - -webkit-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0px 1px 1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.5); -} -.ui.round.checkbox .box:hover:after, -.ui.round.checkbox label:hover:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - filter: alpha(opacity=30); - opacity: 0.3; -} -.ui.round.checkbox input:checked + .box:after, -.ui.round.checkbox input:checked + label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; -} diff --git a/node/src/files/components/semantic/modules/dimmer.css b/node/src/files/components/semantic/modules/dimmer.css index 69fecbe8e..a036de802 100755 --- a/node/src/files/components/semantic/modules/dimmer.css +++ b/node/src/files/components/semantic/modules/dimmer.css @@ -16,6 +16,7 @@ position: relative; } .ui.dimmer { + display: none; position: absolute; top: 0em !important; left: 0em !important; @@ -52,7 +53,7 @@ z-index: 1000; } /* -.ui.dimmable.dimmed > :not(.dimmer) { +.ui.dimmed.dimmable > :not(.dimmer) { -webkit-transition: filter 0.5s ease ; @@ -99,12 +100,13 @@ /******************************* States *******************************/ -.ui.dimmable.dimmed > :not(.dimmer) { +.ui.dimmed.dimmable > :not(.dimmer) { -webkit-filter: blur(5px) grayscale(0.7); -moz-filter: blur(5px) grayscale(0.7); } -.ui.dimmable.dimmed > .ui.dimmer, -.ui.dimmer.active { +.ui.dimmed.dimmable > .ui.dimmer, +.ui.active.dimmer { + display: block; width: 100%; height: 100%; opacity: 1; @@ -131,7 +133,7 @@ transform-origin: top center; } /* -body.ui.dimmable.dimmed > :not(.dimmer){ +body.ui.dimmed.dimmable > :not(.dimmer){ -webkit-filter: ~"blur(15px) grayscale(0.7)"; -moz-filter: ~"blur(15px) grayscale(0.7)"; } @@ -165,7 +167,7 @@ body.ui.dimmable.dimmed > :not(.dimmer){ z-index: -100; background-color: rgba(0, 0, 0, 0); } -.ui.dimmable.dimmed > .ui.simple.dimmer { +.ui.dimmed.dimmable > .ui.simple.dimmer { overflow: visible; opacity: 1; width: 100%; @@ -176,6 +178,6 @@ body.ui.dimmable.dimmed > :not(.dimmer){ .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0); } -.ui.dimmable.dimmed > .ui.simple.inverted.dimmer { +.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } diff --git a/node/src/files/components/semantic/modules/rating.css b/node/src/files/components/semantic/modules/rating.css new file mode 100644 index 000000000..b23cb1ea4 --- /dev/null +++ b/node/src/files/components/semantic/modules/rating.css @@ -0,0 +1,120 @@ +/******************************* + Star Rating +*******************************/ +.ui.rating { + display: inline-block; + vertical-align: middle; + margin: 0em 0.5em; +} +.ui.rating:first-child { + margin-left: 0em; +} +.ui.rating:last-child { + margin-right: 0em; +} +.ui.rating:after { + display: block; + content: ''; + visibility: hidden; + clear: both; + height: 0; +} +/* Icon */ +.ui.rating .icon { + cursor: default; + float: left; + margin: 0em; + width: 1em; + height: auto; + padding: 0em; + font-weight: normal; + font-style: normal; +} +.ui.rating .icon:after { + content: "\2605"; + color: rgba(0, 0, 0, 0.15); + -webkit-transition: color 0.3s ease, + opacity 0.3s ease + ; + -moz-transition: color 0.3s ease, + opacity 0.3s ease + ; + -ms-transition: color 0.3s ease, + opacity 0.3s ease + ; + -o-transition: color 0.3s ease, + opacity 0.3s ease + ; + transition: color 0.3s ease, + opacity 0.3s ease + ; +} +/******************************* + Types +*******************************/ +/*------------------- + Star +--------------------*/ +.ui.star.rating .icon:after { + content: '\e800'; + font-family: 'Icons'; +} +.ui.star.rating .active.icon:after { + content: '\e801'; + font-family: 'Icons'; +} +/*------------------- + Heart +--------------------*/ +.ui.heart.rating .icon:after { + content: '\2661'; + font-family: 'Icons'; +} +.ui.heart.rating .active.icon:after { + content: '\2665'; + font-family: 'Icons'; + color: #EF404A; +} +.ui.heart.rating .hover.icon:after, +.ui.heart.rating .active.hover.icon:after { + color: #FF2733; +} +/******************************* + States +*******************************/ +/*------------------- + Active +--------------------*/ +/* active rating */ +.ui.active.rating .icon { + cursor: pointer; +} +/* active icons */ +.ui.rating .active.icon:after { + color: #FFCB08; +} +/*------------------- + Hover +--------------------*/ +/* rating */ +.ui.rating.hover .active.icon:after { + opacity: 0.5; +} +/* icon */ +.ui.rating .icon.hover:after, +.ui.rating .icon.hover.active:after { + opacity: 1; + color: #FFB70A; +} +/******************************* + Variations +*******************************/ +.ui.small.rating { + font-size: 1rem; +} +.ui.rating { + font-size: 1.5rem; +} +.ui.large.rating { + font-size: 2rem; +} diff --git a/src/modules/star.js b/node/src/files/components/semantic/modules/rating.js old mode 100755 new mode 100644 similarity index 82% rename from src/modules/star.js rename to node/src/files/components/semantic/modules/rating.js index 837e775ed..b717d5508 --- a/src/modules/star.js +++ b/node/src/files/components/semantic/modules/rating.js @@ -8,15 +8,16 @@ ;(function ($, window, document, undefined) { -$.fn.starReview = function(parameters) { +$.fn.rating = function(parameters) { var $allModules = $(this), moduleSelector = $allModules.selector || '', - settings = $.extend(true, {}, $.fn.starReview.settings, parameters), + settings = $.extend(true, {}, $.fn.rating.settings, parameters), namespace = settings.namespace, className = settings.className, + metadata = settings.metadata, selector = settings.selector, error = settings.error, @@ -35,7 +36,7 @@ $.fn.starReview = function(parameters) { .each(function() { var $module = $(this), - $star = $module.find(selector.star), + $icon = $module.find(selector.icon), element = this, instance = $module.data(moduleNamespace), @@ -45,84 +46,98 @@ $.fn.starReview = function(parameters) { module = { initialize: function() { - if(settings.rateable) { - // expandable with states - if($.fn.state !== undefined) { - $module - .state() - ; - $star - .state() - ; - } - $star + module.verbose('Initializing rating module'); + if(settings.interactive) { + $icon .bind('mouseenter' + eventNamespace, module.event.mouseenter) .bind('mouseleave' + eventNamespace, module.event.mouseleave) .bind('click' + eventNamespace, module.event.click) ; } + if(settings.initialRating) { + module.debug('Setting initial rating'); + module.setRating(settings.initialRating); + } + if( $module.data(metadata.rating) ) { + module.debug('Rating found in metadata'); + module.setRating( $module.data(metadata.rating) ); + } $module - .addClass(className.initialize) + .addClass(className.active) ; module.instantiate(); }, instantiate: function() { + module.verbose('Instantiating module', settings); $module .data(moduleNamespace, module) ; }, + destroy: function() { + $module + .removeData(moduleNamespace) + ; + $icon + .off(eventNamespace) + ; + }, + setRating: function(rating) { var - $activeStar = $star.eq(rating - 1) + $activeIcon = $icon.eq(rating - 1) ; + module.verbose('Setting current rating to', rating); $module .removeClass(className.hover) ; - $star + $icon .removeClass(className.hover) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.active) ; - $activeStar + $activeIcon .addClass(className.active) .prevAll() .addClass(className.active) ; - $.proxy(settings.onRate, $module)(); + $.proxy(settings.onRate, element)(); }, event: { mouseenter: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.hover) ; $module .addClass(className.hover) ; - $activeStar + $activeIcon .addClass(className.hover) .prevAll() .addClass(className.hover) ; }, mouseleave: function() { - $star + $module + .removeClass(className.hover) + ; + $icon .removeClass(className.hover) ; }, click: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - module.setRating( $star.index($activeStar) + 1); + module.setRating( $icon.index($activeIcon) + 1); } }, setting: function(name, value) { @@ -307,28 +322,35 @@ $.fn.starReview = function(parameters) { ; }; -$.fn.starReview.settings = { +$.fn.rating.settings = { + + name : 'Rating', + namespace : 'rating', - name : 'Star', - namespace : 'star', + verbose : true, + debug : true, + performance : true, - rateable : true, - onRate : function(){}, + initialRating : 0, + interactive : true, + onRate : function(){}, + + error : { + method : 'The method you called is not defined' + }, - error: { - method : 'The method you called is not defined' + metadata: { + rating: 'rating' }, className : { - initialize : 'initialize', - loading : 'loading', - active : 'active', - hover : 'hover', - down : 'down' + active : 'active', + hover : 'hover', + loading : 'loading' }, selector : { - star : 'i' + icon : '.icon' } }; diff --git a/node/src/files/components/semantic/modules/reveal.css b/node/src/files/components/semantic/modules/reveal.css index 8ba55a1bd..60cc0d6c8 100755 --- a/node/src/files/components/semantic/modules/reveal.css +++ b/node/src/files/components/semantic/modules/reveal.css @@ -13,8 +13,13 @@ Reveal *******************************/ .ui.reveal { + display: inline-block; position: relative !important; z-index: 2 !important; + font-size: 0em !important; +} +.ui.reveal > .content { + font-size: 1em !important; } .ui.reveal > .visible.content { -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; @@ -26,8 +31,6 @@ position: absolute !important; top: 0em !important; left: 0em !important; - width: 100% !important; - height: 100% !important; z-index: 4 !important; -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; diff --git a/node/src/files/components/semantic/modules/search.css b/node/src/files/components/semantic/modules/search.css index bb420a57e..c5d7d886a 100755 --- a/node/src/files/components/semantic/modules/search.css +++ b/node/src/files/components/semantic/modules/search.css @@ -19,9 +19,9 @@ font-weight: normal; } .ui.search input { - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*-------------- Button diff --git a/node/src/files/components/semantic/modules/star.css b/node/src/files/components/semantic/modules/star.css index 2e414733d..f501f41f4 100755 --- a/node/src/files/components/semantic/modules/star.css +++ b/node/src/files/components/semantic/modules/star.css @@ -1,15 +1,14 @@ /******************************* Star Rating *******************************/ -.star.module { +.ui.rating.module { min-width: 88px; height: 42px; unicode-bidi: bidi-override; direction: rtl; font-size: 26px; } -.star.module i, -.ui.star { +.ui.rating.module .icon { cursor: default; float: left; padding: 2px 1px; @@ -19,8 +18,7 @@ color: transparent; } /* Non Selected Star */ -.star.module i:after, -.ui.star:after { +.ui.rating.module .icon:after { content: "\2605"; color: #8C8C8C; -webkit-transition: all 0.25s; @@ -29,24 +27,23 @@ -ms-transition: all 0.25s; transition: all 0.25s; } -/*-------------- - States ----------------*/ -/* Initialized is now clickable */ -.star.module.initialize, -.star.module.initialize i { +/******************************* + States +*******************************/ +/* Icons are clickable */ +.ui.active.rating.module .icon { cursor: pointer; } /* Current Star Rating */ -.star.module i.active:after { +.ui.rating.module .active.icon:after { color: #FFCB08; } -.star.module.hover i.active:after { +/* Hover */ +.ui.rating.module.hover .active.icon:after { opacity: 0.5; } -/* Hover */ -.star.module i.hover:after, -.star.module i.hover.active:after { +.ui.rating.module .icon.hover:after, +.ui.rating.module .icon.hover.active:after { opacity: 1; color: #FFB70A; text-shadow: 0px 0px 7px #FFCB08; diff --git a/node/src/files/components/semantic/modules/star.js b/node/src/files/components/semantic/modules/star.js index 837e775ed..6150b05a6 100755 --- a/node/src/files/components/semantic/modules/star.js +++ b/node/src/files/components/semantic/modules/star.js @@ -8,12 +8,12 @@ ;(function ($, window, document, undefined) { -$.fn.starReview = function(parameters) { +$.fn.rating = function(parameters) { var $allModules = $(this), moduleSelector = $allModules.selector || '', - settings = $.extend(true, {}, $.fn.starReview.settings, parameters), + settings = $.extend(true, {}, $.fn.rating.settings, parameters), namespace = settings.namespace, className = settings.className, @@ -35,7 +35,7 @@ $.fn.starReview = function(parameters) { .each(function() { var $module = $(this), - $star = $module.find(selector.star), + $icon = $module.find(selector.icon), element = this, instance = $module.data(moduleNamespace), @@ -46,23 +46,14 @@ $.fn.starReview = function(parameters) { initialize: function() { if(settings.rateable) { - // expandable with states - if($.fn.state !== undefined) { - $module - .state() - ; - $star - .state() - ; - } - $star + $icon .bind('mouseenter' + eventNamespace, module.event.mouseenter) .bind('mouseleave' + eventNamespace, module.event.mouseleave) .bind('click' + eventNamespace, module.event.click) ; } $module - .addClass(className.initialize) + .addClass(className.active) ; module.instantiate(); }, @@ -73,21 +64,30 @@ $.fn.starReview = function(parameters) { ; }, + destroy: function() { + $module + .removeData(moduleNamespace) + ; + $icon + .off(eventNamespace) + ; + }, + setRating: function(rating) { var - $activeStar = $star.eq(rating - 1) + $activeIcon = $icon.eq(rating - 1) ; $module .removeClass(className.hover) ; - $star + $icon .removeClass(className.hover) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.active) ; - $activeStar + $activeIcon .addClass(className.active) .prevAll() .addClass(className.active) @@ -98,31 +98,31 @@ $.fn.starReview = function(parameters) { event: { mouseenter: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - $activeStar + $activeIcon .nextAll() .removeClass(className.hover) ; $module .addClass(className.hover) ; - $activeStar + $activeIcon .addClass(className.hover) .prevAll() .addClass(className.hover) ; }, mouseleave: function() { - $star + $icon .removeClass(className.hover) ; }, click: function() { var - $activeStar = $(this) + $activeIcon = $(this) ; - module.setRating( $star.index($activeStar) + 1); + module.setRating( $icon.index($activeIcon) + 1); } }, setting: function(name, value) { @@ -307,28 +307,26 @@ $.fn.starReview = function(parameters) { ; }; -$.fn.starReview.settings = { +$.fn.rating.settings = { - name : 'Star', - namespace : 'star', + name : 'Star', + namespace : 'icon', - rateable : true, - onRate : function(){}, + rateable : true, + onRate : function(){}, error: { method : 'The method you called is not defined' }, className : { - initialize : 'initialize', - loading : 'loading', active : 'active', hover : 'hover', - down : 'down' + loading : 'loading' }, selector : { - star : 'i' + icon : '.icon' } }; diff --git a/node/src/files/components/semantic/views/feed.css b/node/src/files/components/semantic/views/feed.css index 9a49a558e..995a36a0a 100755 --- a/node/src/files/components/semantic/views/feed.css +++ b/node/src/files/components/semantic/views/feed.css @@ -100,6 +100,9 @@ /******************************* Variations *******************************/ +.ui.small.feed { + font-size: 0.875em; +} .ui.small.feed .label img { width: 2.5em; } diff --git a/node/src/files/components/semantic/views/list.css b/node/src/files/components/semantic/views/list.css index e8f35f9ac..64a9f1485 100755 --- a/node/src/files/components/semantic/views/list.css +++ b/node/src/files/components/semantic/views/list.css @@ -23,7 +23,7 @@ ul.ui.list ul, ol.ui.list ol, .ui.list .list { margin: 0em; - padding: 0.5em 0em 0.5em 0.5em; + padding: 0.5em 0em 0.5em 1em; } ul.ui.list:first-child, ol.ui.list:first-child, @@ -173,7 +173,7 @@ ul.ui.list li:before, .ui.bulleted.list .item:before { position: absolute; left: -1em; - content: '·'; + content: '•'; line-height: 1.2rem; vertical-align: top; } @@ -229,10 +229,10 @@ ol.ui.list li:before, ol.ui.list ol, .ui.ordered.list .list { counter-reset: ordered; - padding-left: 2em; + padding-left: 3em; } -ol.ui.list ol ol li:before, -.ui.ordered.list .list .list .item:before { +ol.ui.list ol li:before, +.ui.ordered.list .list .item:before { left: -2.5em; } /* Horizontal Ordered */ diff --git a/node/src/files/images/blue-bg.png b/node/src/files/images/blue-bg.png new file mode 100755 index 000000000..e19a7a60e Binary files /dev/null and b/node/src/files/images/blue-bg.png differ diff --git a/node/src/files/images/demo/title.png b/node/src/files/images/demo/title.png new file mode 100755 index 000000000..64ad5309f Binary files /dev/null and b/node/src/files/images/demo/title.png differ diff --git a/node/src/files/images/teal-bg.png.REMOVED.git-id b/node/src/files/images/teal-bg.png.REMOVED.git-id new file mode 100644 index 000000000..f397852d2 --- /dev/null +++ b/node/src/files/images/teal-bg.png.REMOVED.git-id @@ -0,0 +1 @@ +9a6c31d42f6ed94672a29cb4c9e2068548232c4e \ No newline at end of file diff --git a/node/src/files/images/tile-bg.png.REMOVED.git-id b/node/src/files/images/tile-bg.png.REMOVED.git-id new file mode 100644 index 000000000..e433b4e63 --- /dev/null +++ b/node/src/files/images/tile-bg.png.REMOVED.git-id @@ -0,0 +1 @@ +b5e4b5dab16b2525052c7d8267c030afbfe73927 \ No newline at end of file diff --git a/node/src/files/javascript/rating.js b/node/src/files/javascript/rating.js new file mode 100755 index 000000000..d9ebf87d3 --- /dev/null +++ b/node/src/files/javascript/rating.js @@ -0,0 +1,16 @@ +semantic.dropdown = {}; + +// ready event +semantic.dropdown.ready = function() { + + $('.ui.rating') + .rating() + ; + +}; + + +// attach ready event +$(document) + .ready(semantic.dropdown.ready) +; \ No newline at end of file diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index 4c9326e84..8d4f785b4 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -405,7 +405,7 @@ semantic.ready = function() { $(this) .stop() .animate({ - width: '180px' + width: '155px' }, 300, function() { $(this).find('.text').show(); }) diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 2cab5d37d..1a7672bbe 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -1,5 +1,5 @@ /******************************* - Glue Code + Highlighted Colors *******************************/ ::-webkit-selection { @@ -34,27 +34,8 @@ h3::selection { background-color: #CCE2FF; } -/* Non Web Font (For Demo) +/* No license -@font-face { - font-family: 'Neutraface'; - src: - url("../fonts/neutraface-book.otf") format('opentype') - ; - font-weight: normal; - font-style: normal; - font-size-adjust: 0.448; -} -@font-face { - font-family: 'Neutraface'; - src: - url("../fonts/neutraface-bold.otf") format('opentype') - ; - font-weight: bold; - font-style: normal; - font-size-adjust: 0.448; -} -*/ @font-face { font-family: 'Neutraface'; @@ -94,6 +75,7 @@ h3::selection { font-stretch: normal; } +*/ @@ -107,7 +89,7 @@ body { } body#example { - font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; background: #FCFCFC url(../images/bg.jpg) repeat; margin: 0px; padding: 0px; @@ -119,6 +101,13 @@ body > .content { background: #FCFCFC url(../images/bg.jpg) repeat; } +h1, +h2, +h3, +h4, +h5 { + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; +} /* p, @@ -180,9 +169,8 @@ code { display: inline-block; font-family: Courier New; font-size: 14px; - margin: -0.25em 0.25em !important; - padding: 0.25em 0.5em; - vertical-align: top; + padding: 0.125em 0.25em; + vertical-align: middle; } pre code { border: none; @@ -292,7 +280,7 @@ a:hover { } #example .masthead { text-align: center; - background-color: #00B5AD; + background: #00B5AD url(/images/tile-bg.png) repeat-x fixed 50% 0%; padding: 75px 0px 50px; color: rgba(255, 255, 255, 0.9); margin-bottom: 0px; diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 3792b189d..2e3b7a944 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -31,7 +31,6 @@ - @@ -45,6 +44,7 @@ + @@ -54,6 +54,7 @@ + @@ -62,17 +63,16 @@ - - - + + - @@ -81,8 +81,9 @@ - + + diff --git a/src/collections/menu.less b/src/collections/menu.less index 606b54751..288a95e26 100755 --- a/src/collections/menu.less +++ b/src/collections/menu.less @@ -280,9 +280,9 @@ /*-------------- Dropdowns ---------------*/ -.ui.menu .dropdown.item .menu { +/*.ui.menu .dropdown.item .menu { margin: 1px 0px 0px 0px; -} +}*/ .ui.menu .simple.dropdown.item .menu { margin: 0px !important; } diff --git a/src/elements/button.less b/src/elements/button.less index 3783ee672..6a946e3ed 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -125,9 +125,54 @@ } /*------------------- - Social + Primary +--------------------*/ + +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #D95C5C; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .active.button, +.ui.primary.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} + +/*------------------- + Secondary --------------------*/ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #00B5AD; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover, +.ui.secondary.buttons .active.button, +.ui.secondary.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #00847E; + color: #FFFFFF; +} + +/*------------------- + Social +--------------------*/ /* Facebook */ .ui.facebook.button { @@ -186,11 +231,42 @@ *******************************/ +/*-------------- + Active +---------------*/ + +.ui.buttons .active.button, +.ui.active.button { + opacity: 1 !important; + background-color: #B0B0B0; + + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + color: #FFFFFF; + + -webkit-box-shadow: + 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset + ; + -moz-box-shadow: + 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset + ; + box-shadow: + 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset + ; +} + + /*-------------- Hover ---------------*/ -.ui.button:hover { +.ui.button:hover, +.ui.active.button:hover { opacity: 1 !important; background-color: #A4A4A4; @@ -206,7 +282,8 @@ Down ---------------*/ -.ui.button:active { +.ui.button:active, +.ui.active.button:active { opacity: 1 !important; background-color: #8C8C8C; @@ -218,35 +295,6 @@ box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; } -/*-------------- - Active ----------------*/ - -.ui.buttons .active.button, -.ui.active.button { - opacity: 1 !important; - background-color: #B0B0B0; - - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); - color: #FFFFFF; - - -webkit-box-shadow: - 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset - ; - -moz-box-shadow: - 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset - ; - box-shadow: - 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset - ; -} - /*-------------- Error ---------------*/ @@ -524,7 +572,7 @@ color: #999999 !important; font-weight: normal; text-transform: none; - text-shadow: none; + text-shadow: none !important; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -539,17 +587,6 @@ -moz-border-radius: 0.2em; border-radius: 0.2em; } -.ui.basic.buttons .button { - border: none !important; - border-left: 1px solid rgba(0, 0, 0, 0.1) !important; - - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.ui.basic.buttons .button:first-child { - border-left: none !important; -} .ui.basic.buttons .button:hover, .ui.basic.button:hover { @@ -572,15 +609,36 @@ background-color: rgba(0, 0, 0, 0.05); color: #7F7F7F; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + box-shadow: 0px 0px 0px 1px #BDBDBD inset; } .ui.basic.buttons .button.active:hover, .ui.basic.button.active:hover { background-color: rgba(0, 0, 0, 0.1); } +/* Basic Group */ +.ui.basic.buttons .button { + border: none; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button:hover, +.ui.basic.buttons .button:active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button.active { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} + + /*-------------- Labeled Icon @@ -1038,6 +1096,26 @@ color: #FFFFFF; } +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #E96633; + color: #FFFFFF; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover, +.ui.orange.buttons .active.button, +.ui.orange.button.active { + background-color: #FF7038; + color: #FFFFFF; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #DA683B; + color: #FFFFFF; +} + /*--- Blue ---*/ .ui.blue.buttons .button, .ui.blue.button { diff --git a/src/elements/header.less b/src/elements/header.less index ab9e14906..375e06a14 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -26,7 +26,6 @@ } -.ui.header .ui.sub.header, .ui.header .sub.header { font-size: 1rem; font-weight: normal; @@ -252,6 +251,9 @@ h5.ui.header { padding-bottom: 0.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +.ui.dividing.header .sub.header { + padding-bottom: 0.5em; +} .ui.dividing.header .icon { margin-bottom: 0.2em; } diff --git a/src/elements/image.less b/src/elements/image.less index 4492c6005..d16d60e5f 100755 --- a/src/elements/image.less +++ b/src/elements/image.less @@ -68,9 +68,9 @@ img.ui.image { .ui.circular.images img, .ui.circular.image img, .ui.circular.image { - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*-------------- @@ -88,9 +88,9 @@ img.ui.image { width: 2em; height: 2em; - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } diff --git a/src/elements/label.less b/src/elements/label.less index 5f6a8a337..870fa8276 100755 --- a/src/elements/label.less +++ b/src/elements/label.less @@ -674,11 +674,10 @@ a.ui.teal.label:hover:before { line-height: 1em; text-align: center; - vertical-align: baseline; - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*------------------- diff --git a/src/modules/chat.less b/src/modules/chat.less deleted file mode 100755 index 1e78b0009..000000000 --- a/src/modules/chat.less +++ /dev/null @@ -1,337 +0,0 @@ - -/******************************* - Chat Room -*******************************/ - -.ui.chat { - background-color: #F8F8F8; - width: 330px; - height: 370px; - padding: 0px; -} -.ui.chat .room { - position: relative; - overflow: hidden; - height: 286px; - border: 1px solid #999999; - border-top: none; - border-bottom: none; -} -.ui.chat .room .throbber { - display: none; - margin: -25px 0px 0px -25px; -} -/* Chat Room Actions */ -.ui.chat .actions { - overflow: hidden; - background-color: #EEEEEE; - padding: 4px; - border: 1px solid #BBBBBB; - - -moz-border-radius: 5px 5px 0px 0px; - -webkit-border-radius: 5px 5px 0px 0px; - border-radius: 5px 5px 0px 0px; -} -.ui.chat .actions .button { - float: right; - margin-left: 3px; -} - -/* Online User Count */ -.ui.chat .actions .message { - float: left; - margin-left: 6px; - font-size: 11px; - color: #AAAAAA; - text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); - line-height: 28px; -} -.ui.chat .actions .message .throbber { - display: inline-block; - margin-right: 8px; - vertical-align: middle; - vertical-align: text-bottom; -} - - -/* Chat Room Text Log */ -.ui.chat .log { - float: left; - - overflow: auto; - overflow-x: hidden; - overflow-y: auto; -} -.ui.chat .log .message { - padding: 3px 0px; - border-top: 1px dotted #DADADA; -} -.ui.chat .log .message:first-child { - border-top: none; -} -/* status event */ -.ui.chat .status { - padding: 5px 0px; - color: #AAAAAA; - - font-size: 12px; - font-style: italic; - line-height: 1.33; - border-top: 1px dotted #DADADA; -} -.ui.chat .log .status:first-child { - border-top: none; -} - - - -.ui.chat .log .flag { - float: left; -} -.ui.chat .log p { - margin-left: 0px; -} -.ui.chat .log .author { - font-weight: bold; - -webkit-transition: color 0.3s ease-out; - -moz-transition: color 0.3s ease-out; - -o-transition: color 0.3s ease-out; - -ms-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; -} -.ui.chat .log a.author:hover { - opacity: 0.8; -} - -.ui.chat .log .message.admin p { - font-weight: bold; - margin: 1px 0px 0px 23px; -} -.ui.chat .log .divider { - margin: -1px 0px; - font-size: 11px; - padding: 10px 0px; - border-top: 1px solid #F8F8F8; - border-bottom: 1px solid #F8F8F8; -} -.ui.chat .log .divider .rule { - top: 50%; - width: 15%; -} - -.ui.chat .log .divider .label { - color: #777777; - margin: 0px; -} - -/* Chat Room User List */ -.ui.chat .room .user-list { - position: relative; - overflow: auto; - overflow-x: hidden; - overflow-y: auto; - - float: left; - background-color: #EEEEEE; - border-left: 1px solid #DDDDDD; -} -.ui.chat .room .user-list .user { - display: table; - padding: 3px 7px; - border-bottom: 1px solid #DDDDDD; -} -.ui.chat .room .user-list .user:hover { - background-color: #F8F8F8; -} -.ui.chat .room .user-list .image { - display: table-cell; - vertical-align: middle; - width: 20px; -} -.ui.chat .room .user-list .image img { - width: 20px; - height: 20px; - vertical-align: middle; -} -.ui.chat .room .user-list p { - display: table-cell; - vertical-align: middle; - padding-left: 7px; - padding-right: 14px; - font-size: 11px; - line-height: 1.2; - font-weight: bold; -} -.ui.chat .room .user-list a:hover { - opacity: 0.8; -} - -/* User List Loading */ -.ui.chat.loading .throbber { - display: block; -} - - - -/* Chat Room Talk Input */ -.ui.chat .talk { - border: 1px solid #999999; - border-top: 1px solid #BBBBBB; - padding: 5px 0px 0px; - - background-color: #CCCCCC; - background: #FFFFFF -webkit-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; - background: #FFFFFF -moz-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; - background: #FFFFFF -o-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; - background: #FFFFFF -ms-linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; - background: #FFFFFF linear-gradient(top , #EEEEEE 0%, #AAAAAA 100%) repeat; - - -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; - -moz-box-shadow: 0px 1px 0px #FFFFFF inset; - box-shadow: 0px 1px 0px #FFFFFF inset; - - -webkit-border-radius: 0px 0px 5px 5px; - -moz-border-radius: 0px 0px 5px 5px; - border-radius: 0px 0px 5px 5px; -} -.ui.chat .talk .avatar, -.ui.chat .talk input, -.ui.chat .talk .button { - float: left; -} -.ui.chat .talk .avatar { - border-top: 1px solid #BBBBBB; - border-left: 1px solid #BBBBBB; - width: 30px; - height: 30px; - margin: 0px 0px 0px 5px; - background-color: #DADADA; -} - -.ui.chat .talk .avatar img { - display: block; - width: 30px; - height: 30px; - margin-right: 4px; -} -.ui.chat .talk input { - border: 1px solid #CCCCCC; - margin: 0px; - width: 196px; - height: 14px; - padding: 8px 5px; - font-size: 12px; - color: #555555; -} -.ui.chat .talk input.focus { - border: 1px solid #AAAAAA; -} -.ui.chat .send { - margin-left: -2px; - width: 54px; - height: 22px; - line-height: 23px; - - font-size: 12px; - padding: 4px 12px; - - -moz-box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.3); - box-shadow: -2px 0 2px -2px rgba(0, 0, 0, 0.3); - border-radius: 0px 5px 5px 0px; -} -.ui.chat .talk .log-in.button { - display: block; - float: none; - margin-top: -6px; - height: 22px; - border-radius: 0px 0px 4px 4px; -} -.ui.chat .talk .log-in.button i { - vertical-align: text-top; -} - -/* Quirky Flags */ -.ui.chat .log .team.flag { - width: 18px; -} - -/* Chat room Loaded */ -.ui.chat.loading .throbber { - display: block; -} - - -/* Standard Size */ -.ui.chat { - width: 330px; - height: 370px; -} -.ui.chat .room .container { - width: 3000px; -} -.ui.chat .log { - width: 314px; - height: 278px; - padding: 4px 7px; -} -.ui.chat .room .user-list { - width: 124px; - height: 278px; - padding: 4px 0px; -} -.ui.chat .room .user-list .user { - width: 110px; -} -.ui.chat .talk { - height: 40px; -} - -/* Full Width (Based off 960) */ - -/* -.ui.chat.expand { - width: 665px; - height: 368px; -} -.ui.chat.expand .room { - width: 663px; - height: 283px; -} -.ui.chat.expand .room .user-list, -.ui.chat.expand .room .log { - height: 275px; -} -.ui.chat.expand .room .log { - width: 650px; -} -.ui.chat.expand .talk input { - width: 530px; -} -.ui.chat.expand .send { - width: 50px; -} - -.ui.chat.massive { - width: 960px; - height: 415px; -} -.ui.chat.massive .room { - width: 958px; - height: 330px; -} -.ui.chat.massive .room .user-list, -.ui.chat.massive .room .log { - height: 321px; -} -.ui.chat.massive .room .log { - width: 944px; -} -.ui.chat.massive .talk input { - width: 830px; -} -.ui.chat.massive .send { - width: 50px; -} - -*/ \ No newline at end of file diff --git a/src/modules/checkbox.less b/src/modules/checkbox.less index 95298bc89..9cdcd13d8 100755 --- a/src/modules/checkbox.less +++ b/src/modules/checkbox.less @@ -84,10 +84,10 @@ } .ui.checkbox .box:after, .ui.checkbox label:after { - width: 0.5em; - height: 0.2em; - top: 0.25em; + top: 0.3em; left: 0.2em; + width: 0.45em; + height: 0.15em; } /*--- Label ---*/ @@ -178,151 +178,201 @@ } /*-------------- - Sizes + Slider ---------------*/ -.ui.checkbox { - width: 1em; - height: 1em; -} -.ui.checkbox, -.ui.checkbox .box, -.ui.checkbox label { - font-size: 1em; +.ui.slider.checkbox { + width: 3em; + height: 2em; } +/* Line */ +.ui.slider.checkbox:after { + position: absolute; + top: 1em; + left: 0em; + content: ''; -.ui.large.checkbox { - width: 1.25em; - height: 1.25em; -} -.ui.large.checkbox, -.ui.large.checkbox .box, -.ui.large.checkbox label { - font-size: 1.25em; + width: 100%; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); } -.ui.huge.checkbox { +/* Button */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + cursor: pointer; + display: block; + + position: absolute; + top: 0.25em; + left: 0; + z-index: 1; + width: 1.5em; height: 1.5em; -} -.ui.huge.checkbox, -.ui.huge.checkbox .box, -.ui.huge.checkbox label { - font-size: 1.5em; -} -/*-------------- - Colors ----------------*/ + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + + border-radius: 50rem; -.ui.round.blue.checkbox label:after { - background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%); - background: -moz-linear-gradient(top, #016286 0%, #00506E 100%); - background: -o-linear-gradient(top, #016286 0%, #00506E 100%); - background: -ms-linear-gradient(top, #016286 0%, #00506E 100%); - background: linear-gradient(top, #016286 0%, #00506E 100%); + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; } +/* Button Activation Light */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + opacity: 1; -/*-------------- - Rounded ----------------*/ + position: absolute; + content: ''; + top: 0.375em; + left: 0.375em; -/* Alternate Round Style */ -.ui.round.checkbox { - width: 20px; - height: 20px; - margin: 0px auto; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; - background: #FCFFF4; - background: -webkit-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); - background: -moz-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); - background: -o-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); - background: -ms-linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); - background: linear-gradient(top, #FCFFF4 0%, #dfe5d7 40%, #b3bead 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFFF4', endColorstr='#b3bead',GradientType=0 ); + border-radius: 50rem; - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} - -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); - -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); - box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); - position: relative; +/* Active Slider Toggle */ +.ui.slider.checkbox input:checked + .box, +.ui.slider.checkbox input:checked + label { + left: 1.75em; } +.ui.slider.checkbox input:checked + .box:after, +.ui.slider.checkbox input:checked + label:after { + background-color: #89B84C; +} + + + +/*-------------- + Toggle +---------------*/ -.ui.round.checkbox .box, -.ui.round.checkbox label { +.ui.toggle.checkbox { + width: 3em; + height: 2em; +} +/* Line */ +.ui.toggle.checkbox:after { cursor: pointer; + display: block; + position: absolute; - width: 14px; - height: 14px; + content: ''; + top: 0.25em; + left: 0em; + z-index: 1; - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - left: 3px; - top: 3px; + background-color: #FFFFFF; + width: 100%; + height: 1.5em; - -webkit-box-shadow: - 0px 1px 1px rgba(0, 0, 0, 0.5) inset, - 0px 1px 0px rgba(255,255,255,1) - ; - -moz-box-shadow: - 0px 1px 1px rgba(0, 0, 0, 0.5) inset, - 0px 1px 0px rgba(255,255,255,1) - ; - box-shadow: - 0px 1px 1px rgba(0, 0, 0, 0.5) inset, - 0px 1px 0px rgba(255,255,255,1) - ; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - background: -webkit-linear-gradient(top, #222222 0%, #4D4D4D 100%); - background: -moz-linear-gradient(top, #222222 0%, #4D4D4D 100%); - background: -o-linear-gradient(top, #222222 0%, #4D4D4D 100%); - background: -ms-linear-gradient(top, #222222 0%, #4D4D4D 100%); - background: linear-gradient(top, #222222 0%, #4D4D4D 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#4D4D4D',GradientType=0 ); + border-radius: 50rem; +} +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + position: absolute; + top: 0.65em; + left: 0.5em; + + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; + + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } +/* Button Activation Light */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + opacity: 1; -.ui.round.checkbox .box:after, -.ui.round.checkbox label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; content: ''; position: absolute; - width: 10px; - height: 10px; - background: #B6B6B6; - - background: -webkit-linear-gradient(top, #B6B6B6 0%, #929292 100%); - background: -moz-linear-gradient(top, #B6B6B6 0%, #929292 100%); - background: -o-linear-gradient(top, #B6B6B6 0%, #929292 100%); - background: -ms-linear-gradient(top, #B6B6B6 0%, #929292 100%); - background: linear-gradient(top, #B6B6B6 0%, #929292 100%); + top: 0px; + left: 0px; + z-index: 2; border: none; - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; - top: 2px; - left: 2px; + width: 0.75em; + height: 0.75em; - -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); - -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); - box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); + background-color: #D95C5C; + + border-radius: 50rem; + + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; } -.ui.round.checkbox .box:hover:after, -.ui.round.checkbox label:hover:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - filter: alpha(opacity=30); - opacity: 0.3; + +/* Active toggle Toggle */ +.ui.toggle.checkbox input:checked + .box, +.ui.toggle.checkbox input:checked + label { + left: 1.75em; } -.ui.round.checkbox input:checked + .box:after, -.ui.round.checkbox input:checked + label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; +.ui.toggle.checkbox input:checked + .box:after, +.ui.toggle.checkbox input:checked + label:after { + background-color: #89B84C; } + + + +/*-------------- + Sizes +---------------*/ + +.ui.checkbox { + width: 1em; + height: 1em; +} +.ui.checkbox, +.ui.checkbox .box, +.ui.checkbox label { + font-size: 1em; +} + +.ui.large.checkbox { + width: 1.25em; + height: 1.25em; +} +.ui.large.checkbox, +.ui.large.checkbox .box, +.ui.large.checkbox label { + font-size: 1.25em; +} +.ui.huge.checkbox { + width: 1.5em; + height: 1.5em; +} +.ui.huge.checkbox, +.ui.huge.checkbox .box, +.ui.huge.checkbox label { + font-size: 1.5em; +} \ No newline at end of file diff --git a/src/modules/dimmer.less b/src/modules/dimmer.less index 5ba1420e8..251997fc9 100755 --- a/src/modules/dimmer.less +++ b/src/modules/dimmer.less @@ -20,6 +20,7 @@ } .ui.dimmer { + display: none; position: absolute; top: 0em !important; left: 0em !important; @@ -76,7 +77,7 @@ } /* -.ui.dimmable.dimmed > :not(.dimmer) { +.ui.dimmed.dimmable > :not(.dimmer) { -webkit-transition: filter 0.5s ease ; @@ -131,13 +132,14 @@ States *******************************/ -.ui.dimmable.dimmed > :not(.dimmer) { +.ui.dimmed.dimmable > :not(.dimmer) { -webkit-filter: ~"blur(5px) grayscale(0.7)"; -moz-filter: ~"blur(5px) grayscale(0.7)"; } -.ui.dimmable.dimmed > .ui.dimmer, -.ui.dimmer.active { +.ui.dimmed.dimmable > .ui.dimmer, +.ui.active.dimmer { + display: block; width: 100%; height: 100%; opacity: 1; @@ -171,7 +173,7 @@ transform-origin: top center; } /* -body.ui.dimmable.dimmed > :not(.dimmer){ +body.ui.dimmed.dimmable > :not(.dimmer){ -webkit-filter: ~"blur(15px) grayscale(0.7)"; -moz-filter: ~"blur(15px) grayscale(0.7)"; } @@ -211,7 +213,7 @@ body.ui.dimmable.dimmed > :not(.dimmer){ z-index: -100; background-color: rgba(0, 0, 0, 0); } -.ui.dimmable.dimmed > .ui.simple.dimmer { +.ui.dimmed.dimmable > .ui.simple.dimmer { overflow: visible; opacity: 1; width: 100%; @@ -223,6 +225,6 @@ body.ui.dimmable.dimmed > :not(.dimmer){ .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0); } -.ui.dimmable.dimmed > .ui.simple.inverted.dimmer { +.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85) } \ No newline at end of file diff --git a/src/modules/reveal.less b/src/modules/reveal.less index c153643d5..3c47e95b0 100755 --- a/src/modules/reveal.less +++ b/src/modules/reveal.less @@ -16,8 +16,14 @@ *******************************/ .ui.reveal { + display: inline-block; position: relative !important; z-index: 2 !important; + font-size: 0em !important; +} + +.ui.reveal > .content { + font-size: 1em !important; } .ui.reveal > .visible.content { @@ -39,8 +45,6 @@ position: absolute !important; top: 0em !important; left: 0em !important; - width: 100% !important; - height: 100% !important; z-index: 4 !important; -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s diff --git a/src/modules/search.less b/src/modules/search.less index e334e492e..bcb29d990 100755 --- a/src/modules/search.less +++ b/src/modules/search.less @@ -24,9 +24,9 @@ } .ui.search input { - -webkit-border-radius: 500em; - -moz-border-radius: 500em; - border-radius: 500em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; } /*-------------- @@ -58,7 +58,7 @@ z-index: 999; top: 100%; left: 0px; - + overflow: hidden; background-color: #FFFFFF; @@ -192,7 +192,7 @@ height: 2em; line-height: 2em; color: rgba(0, 0, 0, 0.6); - + font-weight: bold; text-align: center; } diff --git a/src/modules/star.less b/src/modules/star.less deleted file mode 100755 index 767d0f31a..000000000 --- a/src/modules/star.less +++ /dev/null @@ -1,62 +0,0 @@ -/******************************* - Star Rating -*******************************/ - -.star.module { - min-width: 88px; - height: 42px; - - unicode-bidi: bidi-override; - direction: rtl; - font-size: 26px; -} -.star.module i, -.ui.star { - cursor: default; - float: left; - padding: 2px 1px; - font-style: normal; - font-weight: normal; - content: "\2605"; - color: transparent; -} - -/* Non Selected Star */ -.star.module i:after, -.ui.star:after { - content: "\2605"; - color: #8C8C8C; - - -webkit-transition: all 0.25s; - -moz-transition: all 0.25s; - -o-transition: all 0.25s; - -ms-transition: all 0.25s; - transition: all 0.25s; -} - -/*-------------- - States ----------------*/ - -/* Initialized is now clickable */ -.star.module.initialize, -.star.module.initialize i { - cursor: pointer; -} - -/* Current Star Rating */ - -.star.module i.active:after { - color: #FFCB08; -} -.star.module.hover i.active:after { - opacity: 0.5; -} -/* Hover */ -.star.module i.hover:after, -.star.module i.hover.active:after { - opacity: 1; - color: #FFB70A; - text-shadow: 0px 0px 7px #FFCB08; -} - diff --git a/src/views/feed.less b/src/views/feed.less index cf8966c4e..5691f05d4 100755 --- a/src/views/feed.less +++ b/src/views/feed.less @@ -125,6 +125,9 @@ Variations *******************************/ +.ui.small.feed { + font-size: 0.875em; +} .ui.small.feed .label img { width: 2.5em; } diff --git a/src/views/list.less b/src/views/list.less index 020a2fe70..9290b7da1 100755 --- a/src/views/list.less +++ b/src/views/list.less @@ -25,7 +25,7 @@ ul.ui.list ul, ol.ui.list ol, .ui.list .list { margin: 0em; - padding: 0.5em 0em 0.5em 0.5em; + padding: 0.5em 0em 0.5em 1em; } ul.ui.list:first-child, @@ -229,7 +229,7 @@ ul.ui.list li:before, .ui.bulleted.list .item:before { position: absolute; left: -1em; - content: '·'; + content: '•'; line-height: 1.2rem; vertical-align: top; @@ -293,11 +293,11 @@ ol.ui.list li:before, ol.ui.list ol, .ui.ordered.list .list { counter-reset: ordered; - padding-left: 2em; + padding-left: 3em; } -ol.ui.list ol ol li:before, -.ui.ordered.list .list .list .item:before { +ol.ui.list ol li:before, +.ui.ordered.list .list .item:before { left: -2.5em; }
    UI Module Settings