richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Build 1.7.0

pull/1629/merge
jlukic 10 years ago
parent
00b9b9d4a3
commit
37179d2fc7
25 changed files with 543 additions and 157 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      RELEASE-NOTES.md
  2. 3
      dist/components/checkbox.js
  3. 2
      dist/components/checkbox.min.js
  4. 22
      dist/components/dropdown.css
  5. 32
      dist/components/dropdown.js
  6. 2
      dist/components/dropdown.min.css
  7. 2
      dist/components/dropdown.min.js
  8. 114
      dist/components/grid.css
  9. 2
      dist/components/grid.min.css
  10. 1
      dist/components/list.css
  11. 2
      dist/components/list.min.css
  12. 80
      dist/components/popup.js
  13. 2
      dist/components/popup.min.js
  14. 6
      dist/components/segment.css
  15. 2
      dist/components/segment.min.css
  16. 20
      dist/components/sidebar.css
  17. 2
      dist/components/sidebar.min.css
  18. 25
      dist/components/site.css
  19. 2
      dist/components/site.min.css
  20. 11
      dist/components/transition.js
  21. 11
      dist/components/transition.min.js
  22. 207
      dist/semantic.css
  23. 126
      dist/semantic.js
  24. 2
      dist/semantic.min.css
  25. 17
      dist/semantic.min.js

5
RELEASE-NOTES.md
View File

@ -9,8 +9,9 @@
**Enhancements / Changes**
- **Grid** - Added `equal width` variation using `flex-box`, `equal height` now also uses `flex-box` (this may have to be removed if causes unexpected browser issues)
- **Sidebar** - Having a sidebar visible on page load is now much simpler. You can include ``ui visible sidebar`` on page load to have a sidebar element appear on page load. To close call `$('.ui.sidebar').sidebar('hide')`
- **Sidebar** - Added documentation on using sidebar on a custom context. Sidebars using a custom context no longer add background colors like those initialized on `body`
- **Site** - Form input highlighting color added (helps differentiate form colors with autocompleted fields). Default text highlighting color moved from highlighter yellow to a mellow blue.
- **Dropdown** - Dropdown can now be disabled by adding ``disabled` class without requiring `destroy`. **Thanks Psyton**
- **Dropdown** - Javascript Dropdown can now be disabled by adding ``disabled` class. No need to call `destroy`. **Thanks Psyton**
- **Dropdown** - Search dropdown input can now have backgrounds. Fixes issues with autocompleted search dropdowns which have forced yellow "autocompleted" bg.
- **Dropdown** - Fix issue with search selection not correctly matching when values are not strings
- **Progress* - Progress bars can now display percent or amount left using `{value}` in text templates
@ -28,12 +29,14 @@
**Bugs**
- **Video** - Video component now uses `//` instead of defaulting to `http`
- **Dropdown** - `restore defaults` will now set placeholder styling and remove active elemenet. Added example in docs.
- **Dropdown** - Fixed bug where sub menus may sometimes have dropdown icon overlap text
- **Dropdown** - Fixes dropdown search input from filtering text values when input is inside menu, i.e "In-Menu Search"
- **Dropdown** - Fix issue with search selection not correctly creating RegExp when select values are not strings **Thanks @alufers**
- **Popup** - `wide` and `very wide` popup will now appear when screen size is below their `max-width`
- **Popup** - Popup no longer blurs element on popup hide
- **Segment** - ``ui tabular menu`` now correctly aligns with attached segment when using fluid variation *Thanks @MohammadYounes*
- **Segment** - `basic segment` no longer removes padding on first and last elements
- **Steps** - Steps now use ``table-cell`` to allow steps to be equal height by default, even with different content height.
- **Button** - Fix issue with labeled icon groups in material theme
- **Progress* - Fixes bug with progress that use ``total`` and ``value`` receiving the wrong values for text templates

3
dist/components/checkbox.js
View File

@ -137,6 +137,7 @@ $.fn.checkbox = function(parameters) {
key = event.which,
keyCode = {
enter : 13,
space : 32,
escape : 27
}
;
@ -146,7 +147,7 @@ $.fn.checkbox = function(parameters) {
.blur()
;
}
if(!event.ctrlKey && key == keyCode.enter) {
if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
module.verbose('Enter key pressed, toggling checkbox');
module.toggle.call(this);
event.preventDefault();

2
dist/components/checkbox.min.js
File diff suppressed because it is too large
View File

22
dist/components/dropdown.css
View File

@ -487,24 +487,40 @@ select.ui.dropdown {
box-shadow: none !important;
border-radius: 0em !important;
cursor: pointer;
position: absolute;
top: 0em;
left: 0em;
width: 100%;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
padding: inherit;
/*Amazing trick */
}
/* Text Layering */
.ui.search.dropdown > input.search {
position: absolute;
z-index: 2;
}
.ui.search.dropdown > .text {
cursor: text;
position: relative;
z-index: 3;
}
/* Search Selection */
.ui.search.selection.dropdown > input.search {
line-height: 1.2em;
line-height: 1.2142em;
padding: 0.6929em 1.1em;
}
/* Active/Visible Search */
.ui.search.dropdown.active > input.search,
.ui.search.dropdown.visible > input.search {
cursor: auto;
}
.ui.search.dropdown.active > .text,
.ui.search.dropdown.visible > .text {
pointer-events: none;
}
.ui.active.search.dropdown > input.search:focus + .text {
color: rgba(0, 0, 0, 0.4) !important;
}

32
dist/components/dropdown.js
View File

@ -299,6 +299,7 @@ $.fn.dropdown = function(parameters) {
.on('click' + eventNamespace, selector.search, module.show)
.on('focus' + eventNamespace, selector.search, module.event.searchFocus)
.on('blur' + eventNamespace, selector.search, module.event.searchBlur)
.on('click' + eventNamespace, selector.text, module.event.searchTextFocus)
;
}
else {
@ -363,8 +364,9 @@ $.fn.dropdown = function(parameters) {
filter: function(searchTerm) {
var
$results = $(),
exactRegExp = new RegExp('^' + searchTerm, 'igm'),
fullTextRegExp = new RegExp(searchTerm, 'ig'),
escapedTerm = module.escape.regExp(searchTerm),
exactRegExp = new RegExp('^' + escapedTerm, 'igm'),
fullTextRegExp = new RegExp(escapedTerm, 'ig'),
allItemsFiltered
;
module.verbose('Searching for matching values');
@ -372,8 +374,8 @@ $.fn.dropdown = function(parameters) {
.each(function(){
var
$choice = $(this),
text = module.get.choiceText($choice, false),
value = module.get.choiceValue($choice, text)
text = String(module.get.choiceText($choice, false)),
value = String(module.get.choiceValue($choice, text))
;
if( text.match(exactRegExp) || value.match(exactRegExp) ) {
$results = $results.add($choice);
@ -450,6 +452,10 @@ $.fn.dropdown = function(parameters) {
module.hide();
}
},
searchTextFocus: function(event) {
activated = true;
$search.focus();
},
input: function(event) {
if(module.is.searchSelection()) {
module.set.filtered();
@ -894,6 +900,7 @@ $.fn.dropdown = function(parameters) {
;
module.debug('Restoring default text', defaultText);
module.set.text(defaultText);
$text.addClass(settings.className.placeholder);
},
defaultValue: function() {
var
@ -901,8 +908,14 @@ $.fn.dropdown = function(parameters) {
;
if(defaultValue !== undefined) {
module.debug('Restoring default value', defaultValue);
module.set.selected(defaultValue);
module.set.value(defaultValue);
if(defaultValue.length) {
module.set.selected(defaultValue);
module.set.value(defaultValue);
}
else {
module.remove.activeItem();
module.remove.selectedItem();
}
}
}
},
@ -1336,6 +1349,13 @@ $.fn.dropdown = function(parameters) {
}
},
escape: {
regExp: function(text) {
text = String(text);
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}
},
setting: function(name, value) {
module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) {

2
dist/components/dropdown.min.css
File diff suppressed because it is too large
View File

2
dist/components/dropdown.min.js
File diff suppressed because it is too large
View File

114
dist/components/grid.css
View File

@ -1169,7 +1169,7 @@
.ui[class*="left aligned"].grid > .row > .column,
.ui[class*="left aligned"].grid > .column,
.ui.grid [class*="left aligned"].column,
.ui.grid > [class*="left aligned"].aligned.row > .column {
.ui.grid > [class*="left aligned"].row > .column {
text-align: left;
}
.ui.grid [class*="left aligned"].column {
@ -1180,7 +1180,7 @@
.ui[class*="center aligned"].grid,
.ui[class*="center aligned"].grid > .row > .column,
.ui[class*="center aligned"].grid > .column,
.ui.grid > [class*="center aligned"].aligned.row > .column {
.ui.grid > [class*="center aligned"].row > .column {
text-align: center;
}
.ui.grid [class*="center aligned"].column {
@ -1191,7 +1191,7 @@
.ui[class*="right aligned"].grid,
.ui[class*="right aligned"].grid > .row > .column,
.ui[class*="right aligned"].grid > .column,
.ui.grid > [class*="right aligned"].aligned.row > .column {
.ui.grid > [class*="right aligned"].row > .column {
text-align: right;
}
.ui.grid [class*="right aligned"].column {
@ -1228,7 +1228,7 @@
.ui[class*="top aligned"].grid > .row > .column,
.ui[class*="top aligned"].grid > .column,
.ui.grid [class*="top aligned"].column,
.ui.grid > [class*="top aligned"].aligned.row > .column {
.ui.grid > [class*="top aligned"].row > .column {
vertical-align: top;
}
.ui.grid [class*="top aligned"].column {
@ -1236,11 +1236,15 @@
}
/* Middle Aligned */
.ui[class*="center aligned"].grid,
.ui[class*="middle aligned"].grid,
.ui[class*="middle aligned"].grid > .row > .column,
.ui[class*="middle aligned"].grid > .column,
.ui.grid > [class*="middle aligned"].aligned.row > .column {
.ui.grid > [class*="middle aligned"].row > .column {
vertical-align: middle;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.ui.grid [class*="middle aligned"].column {
vertical-align: middle !important;
@ -1250,8 +1254,12 @@
.ui[class*="bottom aligned"].grid,
.ui[class*="bottom aligned"].grid > .row > .column,
.ui[class*="bottom aligned"].grid > .column,
.ui.grid > [class*="bottom aligned"].aligned.row > .column {
.ui.grid > [class*="bottom aligned"].row > .column {
vertical-align: bottom;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.ui.grid [class*="bottom aligned"].column {
vertical-align: bottom !important;
@ -1372,17 +1380,93 @@
padding-bottom: 1rem;
}
/*----------------------
Equal Width
-----------------------*/
.ui[class*="equal width"].grid {
display: table;
table-layout: fixed;
}
.ui[class*="equal width"].grid > .row,
.ui.grid > [class*="equal width"].row {
display: table;
table-layout: fixed;
width: 100% !important;
}
.ui[class*="equal width"].grid > .column,
.ui[class*="equal width"].grid > .row > .column,
.ui.grid > [class*="equal width"].row > .column {
display: table-cell;
}
/* Flexbox (Experimental / Overrides Where Supported) */
.ui[class*="equal width"].grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.ui[class*="equal width"].grid > .row,
.ui.grid > [class*="equal width"].row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.ui[class*="equal width"].grid > .column,
.ui[class*="equal width"].grid > .row > .column,
.ui.grid > [class*="equal width"].row > .column {
display: inline-block;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
/*----------------------
Equal Height Columns
-----------------------*/
.ui[class*="equal height"].grid {
display: table;
table-layout: fixed;
}
.ui[class*="equal height"].grid > .row,
.ui.grid > [class*="equal height"].row {
display: table;
table-layout: fixed;
width: 100% !important;
}
.ui[class*="equal height"].grid > .column,
.ui[class*="equal height"].grid > .row > .column,
.ui.grid > [class*="equal height"].row > .column {
display: table-cell;
}
/* Flexbox (Experimental / Overrides Where Supported) */
.ui[class*="equal height"].grid,
.ui[class*="equal height"].grid > .row,
.ui.grid > [class*="equal height"].row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1392,16 +1476,20 @@
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
width: 100% !important;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.ui[class*="equal height"].grid > .column,
.ui[class*="equal height"].grid > .row > .column,
.ui.grid > [class*="equal height"].row > .column {
display: table-cell;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
display: inline-block;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;

2
dist/components/grid.min.css
File diff suppressed because it is too large
View File

1
dist/components/list.css
View File

@ -227,6 +227,7 @@ ol.ui.list ol,
.ui.menu .ui.list .list > .item {
display: list-item;
table-layout: fixed;
background-color: transparent;
list-style-type: none;
list-style-position: outside;
padding: 0.3em 0em;

2
dist/components/list.min.css
File diff suppressed because it is too large
View File

80
dist/components/popup.js
View File

@ -70,7 +70,6 @@ $.fn.popup = function(parameters) {
// binds events
initialize: function() {
module.debug('Initializing module', $module);
module.refresh();
if(settings.on == 'click') {
$module
.on('click' + eventNamespace, module.toggle)
@ -88,12 +87,9 @@ $.fn.popup = function(parameters) {
$window
.on('resize' + eventNamespace, module.event.resize)
;
if( !module.exists() ) {
if( !module.exists() && settings.preserve) {
module.create();
}
else if(settings.hoverable) {
module.bind.popup();
}
module.instantiate();
},
@ -111,29 +107,31 @@ $.fn.popup = function(parameters) {
}
else {
if(settings.inline) {
$popup = $target.next(settings.selector.popup);
$popup = $target.next(selector.popup);
}
}
if(settings.popup) {
$popup.addClass(className.loading);
$offsetParent = $module.offsetParent();
if($popup.offsetParent()[0] !== $offsetParent[0]) {
$offsetParent = module.get.offsetParent();
$popup.removeClass(className.loading);
if(module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) {
module.debug('Moving popup to the same offset parent as activating element');
$popup
.detach()
.appendTo($offsetParent)
;
}
$popup.removeClass(className.loading);
}
else {
$offsetParent = (settings.inline)
? $target.offsetParent()
: $body
? module.get.offsetParent($target)
: module.has.popup()
? module.get.offsetParent($popup)
: $body
;
}
if( $offsetParent.is('html') ) {
module.debug('Page is popups offset parent');
module.debug('Setting page as offset parent');
$offsetParent = $body;
}
},
@ -228,14 +226,23 @@ $.fn.popup = function(parameters) {
.appendTo( $context )
;
}
module.refresh();
if(settings.hoverable) {
module.bind.popup();
}
settings.onCreate.call($popup, element);
}
else if($target.next(settings.selector.popup).length !== 0) {
module.verbose('Pre-existing popup found, reverting to inline');
else if($target.next(selector.popup).length !== 0) {
module.verbose('Pre-existing popup found');
settings.inline = true;
settings.popup = $target.next(selector.popup);
module.refresh();
if(settings.hoverable) {
module.bind.popup();
}
}
else if(settings.popup) {
module.verbose('Used popup specified in settings');
module.refresh();
if(settings.hoverable) {
module.bind.popup();
@ -264,12 +271,12 @@ $.fn.popup = function(parameters) {
show: function(callback) {
callback = $.isFunction(callback) ? callback : function(){};
module.debug('Showing pop-up', settings.transition);
if(!settings.preserve && !settings.popup) {
module.refresh();
}
if( !module.exists() ) {
module.create();
}
else if(!settings.preserve && !settings.popup) {
module.refresh();
}
if( $popup && module.set.position() ) {
module.save.conditions();
module.animate.show(callback);
@ -322,8 +329,9 @@ $.fn.popup = function(parameters) {
removePopup: function() {
module.debug('Removing popup', $popup);
if( module.has.popup() ) {
if( module.has.popup() && !settings.popup) {
$popup.remove();
$popup = undefined;
}
settings.onRemove.call($popup, element);
},
@ -433,9 +441,35 @@ $.fn.popup = function(parameters) {
}
return false;
},
offsetParent: function($target) {
var
element = ($target !== undefined)
? $target[0]
: $module[0],
parentNode = element.parentNode,
$node = $(parentNode)
;
if(parentNode) {
var
is2D = ($node.css('transform') === 'none'),
isStatic = ($node.css('position') === 'static'),
isHTML = $node.is('html')
;
while(parentNode && !isHTML && isStatic && is2D) {
parentNode = parentNode.parentNode;
$node = $(parentNode);
is2D = ($node.css('transform') === 'none');
isStatic = ($node.css('position') === 'static');
isHTML = $node.is('html');
}
}
return ($node && $node.length > 0)
? $node
: $()
;
},
offstagePosition: function(position) {
var
position = position || false,
boundary = {
top : $(window).scrollTop(),
bottom : $(window).scrollTop() + $(window).height(),
@ -450,6 +484,7 @@ $.fn.popup = function(parameters) {
offstage = {},
offstagePositions = []
;
position = position || false;
if(popup.offset && position) {
module.verbose('Checking if outside viewable area', popup.offset);
offstage = {
@ -610,7 +645,6 @@ $.fn.popup = function(parameters) {
});
module.debug('RTL: Popup positioning updated', computedPosition);
}
switch (computedPosition) {
case 'top left':
positioning = {
@ -801,7 +835,7 @@ $.fn.popup = function(parameters) {
has: {
popup: function() {
return ($popup.length > 0);
return ($popup && $popup.length > 0);
}
},
@ -828,7 +862,7 @@ $.fn.popup = function(parameters) {
reset: function() {
module.remove.visible();
if(settings.preserve || settings.popup) {
if(settings.preserve) {
if($.fn.transition !== undefined) {
$popup
.transition('remove transition')
@ -1057,7 +1091,7 @@ $.fn.popup.settings = {
target : false,
popup : false,
inline : false,
preserve : true,
preserve : false,
hoverable : false,
duration : 200,

2
dist/components/popup.min.js
File diff suppressed because it is too large
View File

6
dist/components/segment.css
View File

@ -336,12 +336,6 @@
box-shadow: none;
border-radius: 0px;
}
.ui.basic.segment:first-child {
padding-top: 0em;
}
.ui.basic.segment:last-child {
padding-bottom: 0em;
}
/*-------------------
Fittted

2
dist/components/segment.min.css
File diff suppressed because it is too large
View File

20
dist/components/sidebar.css
View File

@ -81,12 +81,23 @@
}
/*--------------
Body
Pushable
---------------*/
.pushable {
height: 100%;
overflow-x: hidden;
padding: 0em !important;
}
/* Inside Page */
.pushable:not(body) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Whole Page */
body.pushable {
background: #333333 !important;
}
@ -115,9 +126,14 @@
min-height: 100%;
-webkit-transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
background: #f7f7f7;
z-index: 2;
}
body.pushable > .pusher {
background: #f7f7f7;
}
.pushable > .pusher {
background: inherit;
}
/*--------------
Dimmer

2
dist/components/sidebar.min.css
File diff suppressed because it is too large
View File

25
dist/components/site.css
View File

@ -102,16 +102,35 @@ a:hover {
Highlighting
*******************************/
/* Site */
::-webkit-selection {
background-color: rgba(255, 255, 160, 0.4);
background-color: #cce2ff;
color: rgba(0, 0, 0, 0.8);
}
::-moz-selection {
background-color: rgba(255, 255, 160, 0.4);
background-color: #cce2ff;
color: rgba(0, 0, 0, 0.8);
}
::selection {
background-color: rgba(255, 255, 160, 0.4);
background-color: #cce2ff;
color: rgba(0, 0, 0, 0.8);
}
/* Form */
textarea::-webkit-selection,
input::-webkit-selection {
background-color: rgba(100, 100, 100, 0.4);
color: rgba(0, 0, 0, 0.8);
}
textarea::-moz-selection,
input::-moz-selection {
background-color: rgba(100, 100, 100, 0.4);
color: rgba(0, 0, 0, 0.8);
}
textarea::selection,
input::selection {
background-color: rgba(100, 100, 100, 0.4);
color: rgba(0, 0, 0, 0.8);
}

2
dist/components/site.min.css
View File

@ -8,4 +8,4 @@
* http://opensource.org/licenses/MIT
*
*/
@import 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin';body,html{height:100%}html{font-size:14px}body{margin:0;padding:0;min-width:278px;background:#f7f7f7;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.33;color:rgba(0,0,0,.8);font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.33em;margin:-webkit-calc(2rem - .165em) 0 1rem;margin:calc(2rem - .165em) 0 1rem;font-weight:700;padding:0}h1{min-height:1rem;font-size:2rem}h2{font-size:1.714rem}h3{font-size:1.28rem}h4{font-size:1.071rem}h5{font-size:1rem}p{margin:0 0 1em;line-height:1.33}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#009fda;text-decoration:none}a:hover{color:#00b2f3}::-webkit-selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}::-moz-selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}::selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}
@import 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin';body,html{height:100%}html{font-size:14px}body{margin:0;padding:0;min-width:278px;background:#f7f7f7;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.33;color:rgba(0,0,0,.8);font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.33em;margin:-webkit-calc(2rem - .165em) 0 1rem;margin:calc(2rem - .165em) 0 1rem;font-weight:700;padding:0}h1{min-height:1rem;font-size:2rem}h2{font-size:1.714rem}h3{font-size:1.28rem}h4{font-size:1.071rem}h5{font-size:1rem}p{margin:0 0 1em;line-height:1.33}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#009fda;text-decoration:none}a:hover{color:#00b2f3}::-webkit-selection{background-color:#cce2ff;color:rgba(0,0,0,.8)}::-moz-selection{background-color:#cce2ff;color:rgba(0,0,0,.8)}::selection{background-color:#cce2ff;color:rgba(0,0,0,.8)}input::-webkit-selection,textarea::-webkit-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.8)}input::-moz-selection,textarea::-moz-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.8)}input::selection,textarea::selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.8)}

11
dist/components/transition.js
View File

@ -240,6 +240,15 @@ $.fn.transition = function() {
if(settings.useFailSafe) {
module.add.failSafe();
}
// showing multiple
$('.inline.sidebar')
.sidebar{
context: $('.application.segment')
})
;
$('.inline.sidebar')
.sidebar('attach events', '.demo.menu .item')
;
module.set.duration(settings.duration);
settings.onStart.call(this);
module.debug('Starting tween', animation, $module.attr('class'));
@ -879,7 +888,7 @@ $.fn.transition.settings = {
onHide : function() {},
// whether timeout should be used to ensure callback fires in cases animationend does not
useFailSafe : false,
useFailSafe : true,
// whether EXACT animation can occur twice in a row
allowRepeats : false,

11
dist/components/transition.min.js
File diff suppressed because it is too large
View File

207
dist/semantic.css
View File

@ -599,18 +599,40 @@ a:hover {
Highlighting
*******************************/
/* Site */
::-webkit-selection {
background-color: rgba(255, 255, 160, 0.4);
background-color: #cce2ff;
color: rgba(0, 0, 0, 0.8);
}
::-moz-selection {
background-color: rgba(255, 255, 160, 0.4);
background-color: #cce2ff;
color: rgba(0, 0, 0, 0.8);
}
::selection {
background-color: rgba(255, 255, 160, 0.4);
background-color: #cce2ff;
color: rgba(0, 0, 0, 0.8);
}
/* Form */
textarea::-webkit-selection,
input::-webkit-selection {
background-color: rgba(100, 100, 100, 0.4);
color: rgba(0, 0, 0, 0.8);
}
textarea::-moz-selection,
input::-moz-selection {
background-color: rgba(100, 100, 100, 0.4);
color: rgba(0, 0, 0, 0.8);
}
textarea::selection,
input::selection {
background-color: rgba(100, 100, 100, 0.4);
color: rgba(0, 0, 0, 0.8);
}
@ -10205,6 +10227,7 @@ ol.ui.list ol,
.ui.menu .ui.list .list > .item {
display: list-item;
table-layout: fixed;
background-color: transparent;
list-style-type: none;
list-style-position: outside;
padding: 0.3em 0em;
@ -12048,14 +12071,6 @@ ol.ui.horizontal.list li:before,
border-radius: 0px;
}
.ui.basic.segment:first-child {
padding-top: 0em;
}
.ui.basic.segment:last-child {
padding-bottom: 0em;
}
/*-------------------
Fittted
--------------------*/
@ -15236,7 +15251,7 @@ ol.ui.horizontal.list li:before,
.ui[class*="left aligned"].grid > .row > .column,
.ui[class*="left aligned"].grid > .column,
.ui.grid [class*="left aligned"].column,
.ui.grid > [class*="left aligned"].aligned.row > .column {
.ui.grid > [class*="left aligned"].row > .column {
text-align: left;
}
@ -15249,7 +15264,7 @@ ol.ui.horizontal.list li:before,
.ui[class*="center aligned"].grid,
.ui[class*="center aligned"].grid > .row > .column,
.ui[class*="center aligned"].grid > .column,
.ui.grid > [class*="center aligned"].aligned.row > .column {
.ui.grid > [class*="center aligned"].row > .column {
text-align: center;
}
@ -15262,7 +15277,7 @@ ol.ui.horizontal.list li:before,
.ui[class*="right aligned"].grid,
.ui[class*="right aligned"].grid > .row > .column,
.ui[class*="right aligned"].grid > .column,
.ui.grid > [class*="right aligned"].aligned.row > .column {
.ui.grid > [class*="right aligned"].row > .column {
text-align: right;
}
@ -15302,7 +15317,7 @@ ol.ui.horizontal.list li:before,
.ui[class*="top aligned"].grid > .row > .column,
.ui[class*="top aligned"].grid > .column,
.ui.grid [class*="top aligned"].column,
.ui.grid > [class*="top aligned"].aligned.row > .column {
.ui.grid > [class*="top aligned"].row > .column {
vertical-align: top;
}
@ -15312,11 +15327,15 @@ ol.ui.horizontal.list li:before,
/* Middle Aligned */
.ui[class*="center aligned"].grid,
.ui[class*="middle aligned"].grid,
.ui[class*="middle aligned"].grid > .row > .column,
.ui[class*="middle aligned"].grid > .column,
.ui.grid > [class*="middle aligned"].aligned.row > .column {
.ui.grid > [class*="middle aligned"].row > .column {
vertical-align: middle;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.ui.grid [class*="middle aligned"].column {
@ -15328,8 +15347,12 @@ ol.ui.horizontal.list li:before,
.ui[class*="bottom aligned"].grid,
.ui[class*="bottom aligned"].grid > .row > .column,
.ui[class*="bottom aligned"].grid > .column,
.ui.grid > [class*="bottom aligned"].aligned.row > .column {
.ui.grid > [class*="bottom aligned"].row > .column {
vertical-align: bottom;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.ui.grid [class*="bottom aligned"].column {
@ -15470,18 +15493,101 @@ ol.ui.horizontal.list li:before,
padding-bottom: 1rem;
}
/*----------------------
Equal Width
-----------------------*/
.ui[class*="equal width"].grid {
display: table;
table-layout: fixed;
}
.ui[class*="equal width"].grid > .row,
.ui.grid > [class*="equal width"].row {
display: table;
table-layout: fixed;
width: 100% !important;
}
.ui[class*="equal width"].grid > .column,
.ui[class*="equal width"].grid > .row > .column,
.ui.grid > [class*="equal width"].row > .column {
display: table-cell;
}
/* Flexbox (Experimental / Overrides Where Supported) */
.ui[class*="equal width"].grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.ui[class*="equal width"].grid > .row,
.ui.grid > [class*="equal width"].row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.ui[class*="equal width"].grid > .column,
.ui[class*="equal width"].grid > .row > .column,
.ui.grid > [class*="equal width"].row > .column {
display: inline-block;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
/*----------------------
Equal Height Columns
-----------------------*/
.ui[class*="equal height"].grid {
display: table;
table-layout: fixed;
}
.ui[class*="equal height"].grid > .row,
.ui.grid > [class*="equal height"].row {
display: table;
table-layout: fixed;
width: 100% !important;
}
.ui[class*="equal height"].grid > .column,
.ui[class*="equal height"].grid > .row > .column,
.ui.grid > [class*="equal height"].row > .column {
display: table-cell;
}
/* Flexbox (Experimental / Overrides Where Supported) */
.ui[class*="equal height"].grid,
.ui[class*="equal height"].grid > .row,
.ui.grid > [class*="equal height"].row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -15491,17 +15597,21 @@ ol.ui.horizontal.list li:before,
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
width: 100% !important;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.ui[class*="equal height"].grid > .column,
.ui[class*="equal height"].grid > .row > .column,
.ui.grid > [class*="equal height"].row > .column {
display: table-cell;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
display: inline-block;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
@ -23355,27 +23465,46 @@ select.ui.dropdown {
box-shadow: none !important;
border-radius: 0em !important;
cursor: pointer;
position: absolute;
top: 0em;
left: 0em;
width: 100%;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
padding: inherit;
/*Amazing trick */
}
/* Text Layering */
.ui.search.dropdown > input.search {
position: absolute;
z-index: 2;
}
.ui.search.dropdown > .text {
cursor: text;
position: relative;
z-index: 3;
}
/* Search Selection */
.ui.search.selection.dropdown > input.search {
line-height: 1.2em;
line-height: 1.2142em;
padding: 0.6929em 1.1em;
}
/* Active/Visible Search */
.ui.search.dropdown.active > input.search,
.ui.search.dropdown.visible > input.search {
cursor: auto;
}
.ui.search.dropdown.active > .text,
.ui.search.dropdown.visible > .text {
pointer-events: none;
}
.ui.active.search.dropdown > input.search:focus + .text {
color: rgba(0, 0, 0, 0.4) !important;
}
@ -26283,12 +26412,25 @@ a.ui.nag {
}
/*--------------
Body
Pushable
---------------*/
.pushable {
height: 100%;
overflow-x: hidden;
padding: 0em !important;
}
/* Inside Page */
.pushable:not(body) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Whole Page */
body.pushable {
background: #333333 !important;
}
@ -26317,10 +26459,17 @@ a.ui.nag {
min-height: 100%;
-webkit-transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
background: #f7f7f7;
z-index: 2;
}
body.pushable > .pusher {
background: #f7f7f7;
}
.pushable > .pusher {
background: inherit;
}
/*--------------
Dimmer
---------------*/

126
dist/semantic.js
View File

@ -2017,6 +2017,7 @@ $.fn.checkbox = function(parameters) {
key = event.which,
keyCode = {
enter : 13,
space : 32,
escape : 27
}
;
@ -2026,7 +2027,7 @@ $.fn.checkbox = function(parameters) {
.blur()
;
}
if(!event.ctrlKey && key == keyCode.enter) {
if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
module.verbose('Enter key pressed, toggling checkbox');
module.toggle.call(this);
event.preventDefault();
@ -3313,6 +3314,7 @@ $.fn.dropdown = function(parameters) {
.on('click' + eventNamespace, selector.search, module.show)
.on('focus' + eventNamespace, selector.search, module.event.searchFocus)
.on('blur' + eventNamespace, selector.search, module.event.searchBlur)
.on('click' + eventNamespace, selector.text, module.event.searchTextFocus)
;
}
else {
@ -3377,8 +3379,9 @@ $.fn.dropdown = function(parameters) {
filter: function(searchTerm) {
var
$results = $(),
exactRegExp = new RegExp('^' + searchTerm, 'igm'),
fullTextRegExp = new RegExp(searchTerm, 'ig'),
escapedTerm = module.escape.regExp(searchTerm),
exactRegExp = new RegExp('^' + escapedTerm, 'igm'),
fullTextRegExp = new RegExp(escapedTerm, 'ig'),
allItemsFiltered
;
module.verbose('Searching for matching values');
@ -3386,8 +3389,8 @@ $.fn.dropdown = function(parameters) {
.each(function(){
var
$choice = $(this),
text = module.get.choiceText($choice, false),
value = module.get.choiceValue($choice, text)
text = String(module.get.choiceText($choice, false)),
value = String(module.get.choiceValue($choice, text))
;
if( text.match(exactRegExp) || value.match(exactRegExp) ) {
$results = $results.add($choice);
@ -3464,6 +3467,10 @@ $.fn.dropdown = function(parameters) {
module.hide();
}
},
searchTextFocus: function(event) {
activated = true;
$search.focus();
},
input: function(event) {
if(module.is.searchSelection()) {
module.set.filtered();
@ -3908,6 +3915,7 @@ $.fn.dropdown = function(parameters) {
;
module.debug('Restoring default text', defaultText);
module.set.text(defaultText);
$text.addClass(settings.className.placeholder);
},
defaultValue: function() {
var
@ -3915,8 +3923,14 @@ $.fn.dropdown = function(parameters) {
;
if(defaultValue !== undefined) {
module.debug('Restoring default value', defaultValue);
module.set.selected(defaultValue);
module.set.value(defaultValue);
if(defaultValue.length) {
module.set.selected(defaultValue);
module.set.value(defaultValue);
}
else {
module.remove.activeItem();
module.remove.selectedItem();
}
}
}
},
@ -4350,6 +4364,13 @@ $.fn.dropdown = function(parameters) {
}
},
escape: {
regExp: function(text) {
text = String(text);
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}
},
setting: function(name, value) {
module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) {
@ -6062,7 +6083,6 @@ $.fn.popup = function(parameters) {
// binds events
initialize: function() {
module.debug('Initializing module', $module);
module.refresh();
if(settings.on == 'click') {
$module
.on('click' + eventNamespace, module.toggle)
@ -6080,12 +6100,9 @@ $.fn.popup = function(parameters) {
$window
.on('resize' + eventNamespace, module.event.resize)
;
if( !module.exists() ) {
if( !module.exists() && settings.preserve) {
module.create();
}
else if(settings.hoverable) {
module.bind.popup();
}
module.instantiate();
},
@ -6103,29 +6120,31 @@ $.fn.popup = function(parameters) {
}
else {
if(settings.inline) {
$popup = $target.next(settings.selector.popup);
$popup = $target.next(selector.popup);
}
}
if(settings.popup) {
$popup.addClass(className.loading);
$offsetParent = $module.offsetParent();
if($popup.offsetParent()[0] !== $offsetParent[0]) {
$offsetParent = module.get.offsetParent();
$popup.removeClass(className.loading);
if(module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) {
module.debug('Moving popup to the same offset parent as activating element');
$popup
.detach()
.appendTo($offsetParent)
;
}
$popup.removeClass(className.loading);
}
else {
$offsetParent = (settings.inline)
? $target.offsetParent()
: $body
? module.get.offsetParent($target)
: module.has.popup()
? module.get.offsetParent($popup)
: $body
;
}
if( $offsetParent.is('html') ) {
module.debug('Page is popups offset parent');
module.debug('Setting page as offset parent');
$offsetParent = $body;
}
},
@ -6220,14 +6239,23 @@ $.fn.popup = function(parameters) {
.appendTo( $context )
;
}
module.refresh();
if(settings.hoverable) {
module.bind.popup();
}
settings.onCreate.call($popup, element);
}
else if($target.next(settings.selector.popup).length !== 0) {
module.verbose('Pre-existing popup found, reverting to inline');
else if($target.next(selector.popup).length !== 0) {
module.verbose('Pre-existing popup found');
settings.inline = true;
settings.popup = $target.next(selector.popup);
module.refresh();
if(settings.hoverable) {
module.bind.popup();
}
}
else if(settings.popup) {
module.verbose('Used popup specified in settings');
module.refresh();
if(settings.hoverable) {
module.bind.popup();
@ -6256,12 +6284,12 @@ $.fn.popup = function(parameters) {
show: function(callback) {
callback = $.isFunction(callback) ? callback : function(){};
module.debug('Showing pop-up', settings.transition);
if(!settings.preserve && !settings.popup) {
module.refresh();
}
if( !module.exists() ) {
module.create();
}
else if(!settings.preserve && !settings.popup) {
module.refresh();
}
if( $popup && module.set.position() ) {
module.save.conditions();
module.animate.show(callback);
@ -6314,8 +6342,9 @@ $.fn.popup = function(parameters) {
removePopup: function() {
module.debug('Removing popup', $popup);
if( module.has.popup() ) {
if( module.has.popup() && !settings.popup) {
$popup.remove();
$popup = undefined;
}
settings.onRemove.call($popup, element);
},
@ -6425,9 +6454,35 @@ $.fn.popup = function(parameters) {
}
return false;
},
offsetParent: function($target) {
var
element = ($target !== undefined)
? $target[0]
: $module[0],
parentNode = element.parentNode,
$node = $(parentNode)
;
if(parentNode) {
var
is2D = ($node.css('transform') === 'none'),
isStatic = ($node.css('position') === 'static'),
isHTML = $node.is('html')
;
while(parentNode && !isHTML && isStatic && is2D) {
parentNode = parentNode.parentNode;
$node = $(parentNode);
is2D = ($node.css('transform') === 'none');
isStatic = ($node.css('position') === 'static');
isHTML = $node.is('html');
}
}
return ($node && $node.length > 0)
? $node
: $()
;
},
offstagePosition: function(position) {
var
position = position || false,
boundary = {
top : $(window).scrollTop(),
bottom : $(window).scrollTop() + $(window).height(),
@ -6442,6 +6497,7 @@ $.fn.popup = function(parameters) {
offstage = {},
offstagePositions = []
;
position = position || false;
if(popup.offset && position) {
module.verbose('Checking if outside viewable area', popup.offset);
offstage = {
@ -6602,7 +6658,6 @@ $.fn.popup = function(parameters) {
});
module.debug('RTL: Popup positioning updated', computedPosition);
}
switch (computedPosition) {
case 'top left':
positioning = {
@ -6793,7 +6848,7 @@ $.fn.popup = function(parameters) {
has: {
popup: function() {
return ($popup.length > 0);
return ($popup && $popup.length > 0);
}
},
@ -6820,7 +6875,7 @@ $.fn.popup = function(parameters) {
reset: function() {
module.remove.visible();
if(settings.preserve || settings.popup) {
if(settings.preserve) {
if($.fn.transition !== undefined) {
$popup
.transition('remove transition')
@ -7049,7 +7104,7 @@ $.fn.popup.settings = {
target : false,
popup : false,
inline : false,
preserve : true,
preserve : false,
hoverable : false,
duration : 200,
@ -12983,6 +13038,15 @@ $.fn.transition = function() {
if(settings.useFailSafe) {
module.add.failSafe();
}
// showing multiple
$('.inline.sidebar')
.sidebar{
context: $('.application.segment')
})
;
$('.inline.sidebar')
.sidebar('attach events', '.demo.menu .item')
;
module.set.duration(settings.duration);
settings.onStart.call(this);
module.debug('Starting tween', animation, $module.attr('class'));
@ -13622,7 +13686,7 @@ $.fn.transition.settings = {
onHide : function() {},
// whether timeout should be used to ensure callback fires in cases animationend does not
useFailSafe : false,
useFailSafe : true,
// whether EXACT animation can occur twice in a row
allowRepeats : false,

2
dist/semantic.min.css
File diff suppressed because it is too large
View File

17
dist/semantic.min.js
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save