lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds new quirky content group, adds pagination variation of menu, adds changes to messages, buttons, new success style, toggle styl 

Former-commit-id: a294e095e123e99422f4db323b897d54a744dc6d
Former-commit-id: 1aed9fb8a3bc7ff1e4dab82a88ba2afeabf481d8
beta
Jack Lukic 12 years ago
parent
241a0ae866
commit
65ff5f4eb0
33 changed files with 626 additions and 367 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/collections/menu.min.css
  2. 2
      build/minified/collections/message.min.css
  3. 2
      build/minified/elements/button.min.css
  4. 2
      build/minified/modules/behavior/state.min.js
  5. 2
      build/minified/modules/checkbox.min.css
  6. 2
      build/minified/modules/dropdown.min.js
  7. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  8. 2
      build/packaged/semantic.min.js.REMOVED.git-id
  9. 45
      build/uncompressed/collections/menu.css
  10. 56
      build/uncompressed/collections/message.css
  11. 79
      build/uncompressed/elements/button.css
  12. 8
      build/uncompressed/modules/checkbox.css
  13. 8
      node/src/documents/collections/form.html
  14. 46
      node/src/documents/collections/menu.html
  15. 21
      node/src/documents/collections/message.html
  16. 103
      node/src/documents/elements/button.html
  17. 2
      node/src/documents/quirky/card.html
  18. 56
      node/src/documents/quirky/pagination.html
  19. 43
      node/src/documents/specification/cssguide.html
  20. 57
      node/src/documents/specification/styleguide.html
  21. 45
      node/src/files/components/semantic/collections/menu.css
  22. 56
      node/src/files/components/semantic/collections/message.css
  23. 79
      node/src/files/components/semantic/elements/button.css
  24. 10
      node/src/files/components/semantic/modules/behavior/state.js
  25. 8
      node/src/files/components/semantic/modules/checkbox.css
  26. 16
      node/src/files/javascript/button.js
  27. 3
      node/src/files/stylesheets/semantic.css
  28. 9
      node/src/layouts/default.html.eco
  29. 50
      src/collections/menu.less
  30. 60
      src/collections/message.less
  31. 95
      src/elements/button.less
  32. 9
      src/modules/checkbox.less
  33. 5
      src/vector/blur.svg

2
build/minified/collections/menu.min.css
View File

File diff suppressed because one or more lines are too long

2
build/minified/collections/message.min.css
View File

@ -1 +1 @@
.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-moz-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-o-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-ms-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message .header+p{margin-top:0}.ui.message p{opacity:.85;margin:1em 0}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 .325em .325em;-moz-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.attached.message .icon{float:right}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#E4F5FB;background-color:#E9F9FF;color:#4D8796}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#DEFCD5;color:#52A954;border-color:#4D965B}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#96904D}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#A95252;border-color:#964D4D}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em}
.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:#EFEFEF;padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-moz-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-o-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-ms-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message .header+p{margin-top:0}.ui.message p{opacity:.85;margin:1em 0}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-left:-1px;margin-right:-1px;margin-bottom:-1px;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset}.ui.bottom.attached.message{margin-top:-1px;-webkit-border-radius:0 0 .325em .325em;-moz-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{background-color:#E6F4F9;color:#4D8796}.ui.green.message{background-color:#DEFCD5;color:#52A954}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;color:#96904D}.ui.red.message{background-color:#F1D7D7;color:#A95252}.ui.success.message,.ui.positive.message{background-color:#5BBD72;color:#FFF}.ui.error.message,.ui.negative.message{background-color:#D95C5C;color:#FFF}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em}

2
build/minified/elements/button.min.css
View File

File diff suppressed because one or more lines are too long

2
build/minified/modules/behavior/state.min.js
View File

File diff suppressed because one or more lines are too long

2
build/minified/modules/checkbox.min.css
View File

File diff suppressed because one or more lines are too long

2
build/minified/modules/dropdown.min.js
View File

File diff suppressed because one or more lines are too long

2
build/packaged/semantic.min.css.REMOVED.git-id
View File

@ -1 +1 @@
7ab46ac9558343ad364e7126f8a90f6aafa71f35
a3848560f020b966457015eea91b3ca65d99f15b

2
build/packaged/semantic.min.js.REMOVED.git-id
View File

@ -1 +1 @@
2fc9e39d4f5d7bcc72eee759fba42933198702c5
724641330c119dfd5062e8bf47850338c57bb0bc

45
build/uncompressed/collections/menu.css
View File

@ -298,7 +298,7 @@
.ui.menu .item.disabled:hover,
.ui.menu .item.disabled.hover {
cursor: default;
opacity: 0.3;
color: rgba(0, 0, 0, 0.2);
background-color: transparent;
}
/*--------------------
@ -480,6 +480,26 @@
.ui.teal.menu .active.item {
border-color: #00B5AD;
}
/*--------------
Pagination
---------------*/
.ui.pagination.menu {
display: inline-block;
}
.ui.pagination.menu .item {
min-width: 2.7em;
min-height: 2.55em;
text-align: center;
}
.ui.pagination.menu.floated {
display: block;
}
/* active */
.ui.pagination.menu .active.item {
border-top: none;
padding-top: 0.75em;
background-color: rgba(0, 0, 0, 0.05);
}
/*--------------
Inverted
---------------*/
@ -513,6 +533,11 @@
.ui.inverted.menu .dropdown.item .menu .item a {
color: rgba(0, 0, 0, 0.75) !important;
}
.ui.inverted.menu .item.disabled,
.ui.inverted.menu .item.disabled:hover,
.ui.inverted.menu .item.disabled.hover {
color: rgba(255, 255, 255, 0.2);
}
/*--- Border ---*/
.ui.inverted.menu .item:before {
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
@ -808,13 +833,13 @@
Secondary Pointing
-----------------------*/
.ui.secondary.pointing.menu {
border-bottom: 0.2rem solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}
.ui.secondary.pointing.menu > .item {
margin: 0em 0em -0.2em;
margin: 0em 0em -3px;
padding: 0.6em 0.95em;
color: rgba(0, 0, 0, 0.5);
border-bottom: 0.2em solid rgba(0, 0, 0, 0);
border-bottom: 3px solid rgba(0, 0, 0, 0);
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
@ -853,11 +878,11 @@
/*------- Vertical------- */
.ui.secondary.vertical.pointing.menu {
border: none;
border-right: 0.2rem solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
}
.ui.secondary.vertical.menu > .item {
border: none;
margin: 0em 0em -0.2rem;
margin: 0em 0em 0.3em;
padding: 0.6em 0.8em;
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
@ -869,9 +894,9 @@
border-radius: 0em;
}
.ui.secondary.vertical.pointing.menu > .item {
margin: 0em -0.2rem 0em 0em;
margin: 0em -3px 0em 0em;
border-bottom: none;
border-right: 0.2rem solid transparent;
border-right: 3px solid transparent;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
@ -896,7 +921,7 @@
}
/*------- Inverted------- */
.ui.secondary.inverted.pointing.menu {
border-bottom: 0.2rem solid rgba(255, 255, 255, 0.1);
border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}
.ui.secondary.inverted.pointing.menu > .item {
color: rgba(255, 255, 255, 0.7);
@ -920,7 +945,7 @@
Inverted Sec
---------------*/
.ui.secondary.inverted.vertical.pointing.menu {
border-right: 0.2rem solid rgba(255, 255, 255, 0.1);
border-right: 3px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
}
/* Down */

56
build/uncompressed/collections/message.css
View File

@ -17,7 +17,7 @@
min-height: 18px;
margin: 1em 0em;
height: auto;
background-color: rgba(0, 0, 0, 0.04);
background-color: #EFEFEF;
padding: 1em;
line-height: 1.33;
color: rgba(0, 0, 0, 0.6);
@ -123,31 +123,21 @@
Attached
---------------*/
.ui.attached.message {
margin-bottom: 0em;
margin-left: -1px;
margin-right: -1px;
margin-bottom: -1px;
-webkit-border-radius: 0.325em 0.325em 0em 0em;
-moz-border-radius: 0.325em 0.325em 0em 0em;
border-radius: 0.325em 0.325em 0em 0em;
-webkit-box-shadow: 0em 0em 0em 1px #DDDDDD
;
-moz-box-shadow: 0em 0em 0em 1px #DDDDDD
;
box-shadow: 0em 0em 0em 1px #DDDDDD
;
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.bottom.attached.message {
margin-top: 0em;
margin-top: -1px;
-webkit-border-radius: 0em 0em 0.325em 0.325em;
-moz-border-radius: 0em 0em 0.325em 0.325em;
border-radius: 0em 0em 0.325em 0.325em;
-webkit-box-shadow: 0em 0em 0em 1px #DDDDDD
;
-moz-box-shadow: 0em 0em 0em 1px #DDDDDD
;
box-shadow: 0em 0em 0em 1px #DDDDDD
;
}
.ui.attached.message .icon {
float: right;
}
/*--------------
Icon
@ -182,32 +172,36 @@
---------------*/
.ui.blue.message,
.ui.info.message {
border-color: #E4F5FB;
background-color: #E9F9FF;
background-color: #E6F4F9;
color: #4D8796;
}
/* Success Text Block */
.ui.green.message,
.ui.success.message,
.ui.positive.message {
/* Green Text Block */
.ui.green.message {
background-color: #DEFCD5;
color: #52A954;
border-color: #4D965B;
}
/* Warning Text Block */
/* Yellow Text Block */
.ui.yellow.message,
.ui.warning.message {
background-color: #F6F3D5;
border-color: #CBB105;
color: #96904D;
}
/* Red Text Block */
.ui.red.message {
background-color: #F1D7D7;
color: #A95252;
}
/* Success Text Block */
.ui.success.message,
.ui.positive.message {
background-color: #5BBD72;
color: #FFFFFF;
}
/* Error Text Block */
.ui.red.message,
.ui.error.message,
.ui.negative.message {
background-color: #F1D7D7;
color: #A95252;
border-color: #964D4D;
background-color: #D95C5C;
color: #FFFFFF;
}
/*--------------
Sizes

79
build/uncompressed/elements/button.css
View File

@ -126,8 +126,8 @@
.ui.button.loading.hover {
position: relative;
cursor: default;
opacity: 0.75;
color: #888888 !important;
background-color: #F3F3F3;
color: transparent !important;
background-image: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
@ -145,15 +145,10 @@
width: 100%;
height: 100%;
content: '';
background: #eeeeee url(../images/loader-tiny.gif) no-repeat 50% 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
background: transparent url(../images/loader-tiny.gif) no-repeat 50% 50%;
}
/*--------------
Error
Error
---------------*/
.ui.buttons .button.error,
.ui.buttons .button.error.hover,
@ -175,9 +170,59 @@
.ui.button.success,
.ui.button.success.hover,
.ui.button.success.down {
background-color: #59B94B;
position: relative;
background-color: #5BBD72;
color: transparent;
}
.ui.button.success .icon {
opacity: 1;
color: #FFFFFF;
border-color: #588D0F;
}
.ui.button.success .icon:before {
font-family: 'Icons';
content: '\2611';
}
.ui.button.success:after {
position: absolute;
left: 50%;
content: "Success";
margin-left: -1.6em;
color: #FFFFFF;
-webkit-animation: button-success 0.5s;
-moz-animation: button-success 0.5s;
-ms-animation: button-success 0.5s;
-o-animation: button-success 0.5s;
animation: button-success 0.5s;
}
@-webkit-keyframes button-success {
0% {
-webkit-transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes button-success {
0% {
-moz-transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes button-success {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*-------------------
Disabled
@ -564,18 +609,8 @@
.ui.buttons.toggle .ui.button.active.hover,
.ui.buttons .ui.button.toggle.active.hover,
.ui.button.toggle.active.hover {
color: #21A627;
background-color: #BBF0A9;
-webkit-box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
}
.ui.button.toggle.active.hover.down {
color: #FFFFFF;
background-color: #BBF0A9;
color: #21A627;
-webkit-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
-moz-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
}
/*--------------
Bubbly

8
build/uncompressed/modules/checkbox.css
View File

@ -63,6 +63,14 @@
top: 0.25em;
left: 0.2em;
}
/*--- Label ---*/
.ui.checkbox + label {
cursor: pointer;
opacity: 0.85;
}
.ui.checkbox + label:hover {
opacity: 1;
}
/*******************************
States
*******************************/

8
node/src/documents/collections/form.html
View File

@ -93,17 +93,17 @@ type : 'UI Collection'
<div class="example">
<h4 class="ui header">Checkbox</h4>
<p>Checkboxes are styled forms of standard form checkboxes.</p>
<p><a href="modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p>
<div class="ui form">
<div class="field">
<label>Checkbox (Using attribute ID to trigger checked event)</label>
<label>Static Checkbox</label>
<div class="ui checkbox">
<input type="checkbox" id="uniqueid" />
<label for="uniqueid"></label>
</div>
</div>
<div class="field">
<label>Checkbox (<a href="#">Javascript</a>)</label>
<label>JS Checkbox</label>
<div class="ui checkbox">
<input type="checkbox"/>
<label></label>
@ -116,7 +116,7 @@ type : 'UI Collection'
<h4 class="ui header">Radio Box</h4>
<p>Radio boxes are styled forms of standard form radio controls.</p>
<div class="ui form">
<div class="inline fields">
<div class="grouped inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example" />

46
node/src/documents/collections/menu.html
View File

@ -86,6 +86,34 @@ type : 'UI Collection'
</div>
</div>
<div class="example">
<h4 class="ui header">Pagination</h4>
<p>A pagination menu is specially formatted to present links to pages of content</p>
<div class="ui pagination menu">
<a class="icon item">
<i class="icon left arrow"></i>
</a>
<a class="active item">
1
</a>
<div class="disabled item">
...
</div>
<a class="item">
10
</a>
<a class="item">
11
</a>
<a class="item">
12
</a>
<a class="icon item">
<i class="icon right arrow"></i>
</a>
</div>
</div>
<div class="example">
<h4 class="ui header">Tiered Menu</h4>
<p>A tiered menu can show the sub-sections available as part of an activated section.</p>
@ -170,19 +198,6 @@ type : 'UI Collection'
<a class="item">
<i class="community icon"></i> Browse
</a>
<div class="right menu">
<div class="fitted borderless item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
<div class="ui simple dropdown item">
More <i class="icon dropdown"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
</div>
</div>
</div>
<div class="another example">
@ -198,11 +213,8 @@ type : 'UI Collection'
<a class="item">
<i class="community icon"></i> Browse
</a>
<div class="item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
<div class="ui simple dropdown item">
More <i class="icon dropdown"></i>
More <i class="icon right triangle"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>

21
node/src/documents/collections/message.html
View File

@ -90,7 +90,7 @@ type : 'UI Collection'
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Icon Block</h4>
<h4 class="ui header">Icon</h4>
<p>A message can contain an icon.</p>
<div class="ui icon message">
<i class="icon cloud"></i>
@ -104,7 +104,7 @@ type : 'UI Collection'
</div>
<div class="example">
<h4 class="ui header">Compact Block</h4>
<h4 class="ui header">Compact</h4>
<p>A message that only takes up the width of its content.</p>
<div class="ui compact message">
<p>Get all the best inventions in your e-mail every day. Sign up now!</p>
@ -112,7 +112,7 @@ type : 'UI Collection'
</div>
<div class="example">
<h4 class="ui header">Attached Block</h4>
<h4 class="ui header">Attached</h4>
<p>A message can be formatted to attach itself to content</p>
<div class="ui attached message">
<div class="header">
@ -154,14 +154,17 @@ type : 'UI Collection'
</div>
</div>
<div class="example">
<h4 class="ui header">Colored Block</h4>
<h4 class="ui header">Colored</h4>
<p>A message can be formatted to be different colors</p>
<div class="ui red message">Red</div>
<div class="ui blue message">Blue</div>
<div class="ui green message">Green</div>
<div class="ui yellow message">Yellow</div>
</div>
<div class="example">
<h4 class="ui header">Warning Block</h4>
<h4 class="ui header">Warning</h4>
<p>A message may be formatted to display warning messages.</p>
<div class="ui warning message">
<i class="icon close"></i>
@ -173,7 +176,7 @@ type : 'UI Collection'
</div>
<div class="example">
<h4 class="ui header">Info Block</h4>
<h4 class="ui header">Info</h4>
<p>A message may be formatted to display information.</p>
<div class="ui info message">
<i class="icon close"></i>
@ -188,7 +191,7 @@ type : 'UI Collection'
</div>
<div class="example">
<h4 class="ui header">Success Block</h4>
<h4 class="ui header">Success</h4>
<p>A message may be formatted to display a success message.</p>
<div class="ui success message">
<i class="icon close"></i>
@ -199,7 +202,7 @@ type : 'UI Collection'
</div>
<div class="example">
<h4 class="ui header">Error Block</h4>
<h4 class="ui header">Error</h4>
<p>A message may be formatted to display errors.</p>
<div class="ui error message">
<i class="icon close"></i>

103
node/src/documents/elements/button.html
View File

@ -22,7 +22,7 @@ type : 'UI Element'
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Standard</a>
<a class="active item">Types</a>
<a class="item">States</a>
<a class="item">Variations</a>
<a class="item">Groups</a>
@ -31,67 +31,74 @@ type : 'UI Element'
<h2 class="ui dividing header">Standard</h2>
<div class="example">
<h4 class="ui header">Button:</h4>
<h4 class="ui header">Basic:</h4>
<p>A standard button</p>
<div class="ui button"><i class="icon add user"></i> Follow</div>
</div>
<h2 class="ui dividing header">States</h2>
<div class="example">
<h4 class="ui header">Hover</h4>
<p>Changes when a user moves their cursor over it</p>
<div class="ui hover button"><i class="icon add user"></i> Follow</div>
<h4 class="ui header">Icon</h4>
<p>Icon only button</p>
<div class="ui icon button">
<i class="icon cloud"></i>
</div>
</div>
<div class="example">
<h4 class="ui header">Down</h4>
<p>Changes when pressed using touch or mouse events</p>
<div class="ui down button"><i class="icon add user"></i> Follow</div>
<h4 class="ui header">Labeled Icon</h4>
<p>An icon and a label</p>
<div class="ui labeled icon button">
<i class="icon pause"></i> Pause
</div>
</div>
<h2 class="ui dividing header">States</h2>
<div class="example">
<h4 class="ui header">Active</h4>
<p>Changes to show it is currently the selected user action</p>
<div class="ui active button"><i class="icon add user"></i> Follow</div>
<h4 class="ui header">Hover</h4>
<p>Changes when a user moves their cursor over it</p>
<div class="ui hover button"><i class="icon add user"></i> Follow</div>
</div>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>Changes to show it is currently unable to be interacted with</p>
<div class="ui disabled button"><i class="icon add user"></i> Followed</div>
<h4 class="ui header">Down</h4>
<p>Changes when pressed using touch or mouse events</p>
<div class="ui down button"><i class="icon add user"></i> Follow</div>
</div>
<div class="example">
<h4 class="ui header">Loading</h4>
<p>Can show a loading indicator:</p>
<div class="ui loading button">Loading Button</div>
<h4 class="ui header">Active</h4>
<p>Changes to show it is currently the selected user action</p>
<div class="ui active button"><i class="icon add user"></i> Follow</div>
</div>
<div class="example">
<h4 class="ui header">Success</h4>
<p>Can alert to a succesful action:</p>
<div class="ui success button"><i class="icon add user"></i> Follow</div>
<h4 class="ui header">Disabled</h4>
<p>Changes to show it is currently unable to be interacted with</p>
<div class="ui disabled button"><i class="icon add user"></i> Followed</div>
</div>
<div class="example">
<h4 class="ui header">Error</h4>
<p>Can alert user of an error:</p>
<div class="ui error button">Error</div>
<h4 class="ui header">Loading</h4>
<p>Can show a loading indicator:</p>
<div class="ui loading button">Loading Button</div>
</div>
<div class="example">
<h4 class="ui header">All together:</h4>
<div class="ui button">Normal</div>
<div class="ui button hover">Hover</div>
<div class="ui button down">Down</div>
<div class="ui button loading">Loading</div>
<br><br>
<div class="ui button disabled">Disabled</div>
<div class="ui button active">Active</div>
<div class="ui button active toggle">Toggled</div>
<div class="ui button error">Error</div>
<div class="ui button success">Success</div>
<h4 class="ui header">Success</h4>
<p>Can alert to a succesful action:</p>
<div class="ui success button">
<i class="icon add user"></i> Follow User
</div>
</div>
<div class="example">
<h4 class="ui header">Error</h4>
<p>Can alert user of an error:</p>
<div class="ui error button">
<i class="icon add user"></i>
Follow User
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
@ -105,7 +112,6 @@ type : 'UI Element'
<div class="ui secondary red button">Secondary</div>
</div>
<div class="another example">
<div class="ui tertiary button">Tertiary</div>
<div class="ui tertiary teal button">Tertiary</div>
<div class="ui tertiary purple button">Tertiary</div>
<div class="ui tertiary red button">Tertiary</div>
@ -154,6 +160,14 @@ type : 'UI Element'
<a class="ui teal button">Teal Button</a>
</div>
<div class="example">
<h4 class="ui header">Toggle</h4>
<p>Can be formatted to toggle on and off</p>
<div class="ui toggle button">
Vote
</div>
</div>
<h4 class="ui header">Feedback</h4>
<div class="example">
<p>Can be positive or negative:</p>
@ -174,21 +188,6 @@ type : 'UI Element'
<div class="circular ui icon button"><i class="icon settings"></i></div>
</div>
<div class="example">
<h4 class="ui header">Icon</h4>
<p>Can be formatted as an icon toolbar:</p>
<div class="ui icon button">
<i class="icon cloud"></i>
</div>
</div>
<div class="example">
<h4 class="ui header">Labeled Icon</h4>
<p>can be formatted as labeled icons</p>
<div class="ui labeled icon button"><i class="icon pause"></i> Pause</div>
</div>
<div class="example">
<h4 class="ui header">Vertically Attached</h4>
<p>Can be attached to the top or bottom of other content</p>

2
node/src/documents/views/card.html → node/src/documents/quirky/card.html
View File

@ -3,7 +3,7 @@ layout : 'default'
css : 'card'
title : 'Card'
type : 'UI View'
type : 'Quirky Element'
---
<script src="/javascript/card.js"></script>

56
node/src/documents/quirky/pagination.html
View File

@ -0,0 +1,56 @@
---
layout : 'default'
css : 'pagination'
title : 'Pagination'
type : 'Quirky Element'
---
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/pagination.css">
<div class="segment">
<div class="container">
<h1 class="ui dividing header">Pagination</h1>
<p>An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Pagination</a>
</div>
</div>
<div class="example">
<h4 class="ui header">Pagination</h4>
<p>A pagination menu is specially formatted to present links to pages of content</p>
<div class="ui pagination menu">
<a class="icon item">
<i class="icon left sketchy arrow"></i>
</a>
<a class="active item">
1
</a>
<div class="disabled item">
...
</div>
<a class="item">
10
</a>
<a class="item">
11
</a>
<a class="item">
12
</a>
<a class="icon item">
<i class="icon right sketchy arrow"></i>
</a>
</div>
</div>
</div>

43
node/src/documents/specification/cssguide.html
View File

@ -21,49 +21,6 @@ type : 'UI Specification'
</div>
</div>
<h2 class="ui dividing header">General</h2>
<h4 class="ui header">Namespace</h4>
<p>All css code must live inside a namespace. By default all ui elements use the class "ui". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element</p>
<p>Tags inside of a ui element <b>do not</b> need to be prefixed with ui. They can simple descend from the element.</p>
<div class="code" data-type="css">
// incorrect
.menu {
}
// incorrect
.ui.menu .ui.item {
}
// correct
.ui.menu {
}
.ui.menu .item {
}
</div>
<h4 class="ui header">Use real words</h4>
<p>Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.</p>
<div class="code" data-type="css">
// nope
.ui.btn {
}
.ui.widget .cpttext {
}
// good
.ui.button {
}
.ui.widget .caption {
}
</div>
<h2 class="ui dividing header">Style Guide</h2>

57
node/src/documents/specification/styleguide.html
View File

@ -7,7 +7,7 @@ type : 'UI Specification'
---
<div class="segment">
<div class="container">
<h1 class="ui dividing header">Style Guide</h1>
<h1 class="ui header">Style Guide</h1>
</div>
</div>
<div class="main container">
@ -17,11 +17,34 @@ type : 'UI Specification'
<p>Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.</p>
<p>The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.</p>
<div class="example">
<div class="ui simple divider"></div>
<h4 class="ui header">Neutral Base Form</h4>
<p>In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.</p>
<h4 class="ui header">Namespacing</h4>
<p>All css code must live inside a namespace. By default all ui elements use the class "ui". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element</p>
<p>Tags inside of a ui element <b>do not</b> need to be prefixed with ui. They can simple descend from the element.</p>
<div class="code" data-type="css">
// incorrect
.menu {
}
// incorrect
.ui.menu .ui.item {
}
// correct
.ui.menu {
}
.ui.menu .item {
}
</div>
<h4 class="ui header">Commonality</h4>
<p>Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.<p>
@ -35,8 +58,7 @@ type : 'UI Specification'
font-size: 1.5em;
}
</div>
</div>
<div class="example">
<h4 class="ui header">Precision</h4>
<p>Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes</p>
<div class="code" data-type="css">
@ -54,9 +76,26 @@ type : 'UI Specification'
margin-top: -0.5em
}
</div>
</div>
<div class="example">
<h4 class="ui header">Use real words</h4>
<p>Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.</p>
<div class="code" data-type="css">
// nope
.ui.btn {
}
.ui.widget .cpttext {
}
// good
.ui.button {
}
.ui.widget .caption {
}
</div>
<h4 class="ui header">Non prescriptive</h4>
<p>Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.</p>
<p>Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.</p>
@ -83,8 +122,7 @@ type : 'UI Specification'
}
</div>
</div>
<div class="another example">
<div class="code" data-type="css">
// wow this guy is going to have to do a lot of typing...
@ -96,8 +134,6 @@ type : 'UI Specification'
}
</div>
</div>
<div class="example">
<h4 class="ui header">Inversion</h4>
<p>Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.</p>
<p>Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.</p>
@ -111,7 +147,6 @@ type : 'UI Specification'
color: rgba(255, 255, 255, 0.7);
}
</div>
</div>
</div>

45
node/src/files/components/semantic/collections/menu.css
View File

@ -298,7 +298,7 @@
.ui.menu .item.disabled:hover,
.ui.menu .item.disabled.hover {
cursor: default;
opacity: 0.3;
color: rgba(0, 0, 0, 0.2);
background-color: transparent;
}
/*--------------------
@ -480,6 +480,26 @@
.ui.teal.menu .active.item {
border-color: #00B5AD;
}
/*--------------
Pagination
---------------*/
.ui.pagination.menu {
display: inline-block;
}
.ui.pagination.menu .item {
min-width: 2.7em;
min-height: 2.55em;
text-align: center;
}
.ui.pagination.menu.floated {
display: block;
}
/* active */
.ui.pagination.menu .active.item {
border-top: none;
padding-top: 0.75em;
background-color: rgba(0, 0, 0, 0.05);
}
/*--------------
Inverted
---------------*/
@ -513,6 +533,11 @@
.ui.inverted.menu .dropdown.item .menu .item a {
color: rgba(0, 0, 0, 0.75) !important;
}
.ui.inverted.menu .item.disabled,
.ui.inverted.menu .item.disabled:hover,
.ui.inverted.menu .item.disabled.hover {
color: rgba(255, 255, 255, 0.2);
}
/*--- Border ---*/
.ui.inverted.menu .item:before {
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
@ -808,13 +833,13 @@
Secondary Pointing
-----------------------*/
.ui.secondary.pointing.menu {
border-bottom: 0.2rem solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}
.ui.secondary.pointing.menu > .item {
margin: 0em 0em -0.2em;
margin: 0em 0em -3px;
padding: 0.6em 0.95em;
color: rgba(0, 0, 0, 0.5);
border-bottom: 0.2em solid rgba(0, 0, 0, 0);
border-bottom: 3px solid rgba(0, 0, 0, 0);
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
@ -853,11 +878,11 @@
/*------- Vertical------- */
.ui.secondary.vertical.pointing.menu {
border: none;
border-right: 0.2rem solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
}
.ui.secondary.vertical.menu > .item {
border: none;
margin: 0em 0em -0.2rem;
margin: 0em 0em 0.3em;
padding: 0.6em 0.8em;
-webkit-border-radius: 0.325em;
-moz-border-radius: 0.325em;
@ -869,9 +894,9 @@
border-radius: 0em;
}
.ui.secondary.vertical.pointing.menu > .item {
margin: 0em -0.2rem 0em 0em;
margin: 0em -3px 0em 0em;
border-bottom: none;
border-right: 0.2rem solid transparent;
border-right: 3px solid transparent;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
@ -896,7 +921,7 @@
}
/*------- Inverted------- */
.ui.secondary.inverted.pointing.menu {
border-bottom: 0.2rem solid rgba(255, 255, 255, 0.1);
border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}
.ui.secondary.inverted.pointing.menu > .item {
color: rgba(255, 255, 255, 0.7);
@ -920,7 +945,7 @@
Inverted Sec
---------------*/
.ui.secondary.inverted.vertical.pointing.menu {
border-right: 0.2rem solid rgba(255, 255, 255, 0.1);
border-right: 3px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
}
/* Down */

56
node/src/files/components/semantic/collections/message.css
View File

@ -17,7 +17,7 @@
min-height: 18px;
margin: 1em 0em;
height: auto;
background-color: rgba(0, 0, 0, 0.04);
background-color: #EFEFEF;
padding: 1em;
line-height: 1.33;
color: rgba(0, 0, 0, 0.6);
@ -123,31 +123,21 @@
Attached
---------------*/
.ui.attached.message {
margin-bottom: 0em;
margin-left: -1px;
margin-right: -1px;
margin-bottom: -1px;
-webkit-border-radius: 0.325em 0.325em 0em 0em;
-moz-border-radius: 0.325em 0.325em 0em 0em;
border-radius: 0.325em 0.325em 0em 0em;
-webkit-box-shadow: 0em 0em 0em 1px #DDDDDD
;
-moz-box-shadow: 0em 0em 0em 1px #DDDDDD
;
box-shadow: 0em 0em 0em 1px #DDDDDD
;
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.bottom.attached.message {
margin-top: 0em;
margin-top: -1px;
-webkit-border-radius: 0em 0em 0.325em 0.325em;
-moz-border-radius: 0em 0em 0.325em 0.325em;
border-radius: 0em 0em 0.325em 0.325em;
-webkit-box-shadow: 0em 0em 0em 1px #DDDDDD
;
-moz-box-shadow: 0em 0em 0em 1px #DDDDDD
;
box-shadow: 0em 0em 0em 1px #DDDDDD
;
}
.ui.attached.message .icon {
float: right;
}
/*--------------
Icon
@ -182,32 +172,36 @@
---------------*/
.ui.blue.message,
.ui.info.message {
border-color: #E4F5FB;
background-color: #E9F9FF;
background-color: #E6F4F9;
color: #4D8796;
}
/* Success Text Block */
.ui.green.message,
.ui.success.message,
.ui.positive.message {
/* Green Text Block */
.ui.green.message {
background-color: #DEFCD5;
color: #52A954;
border-color: #4D965B;
}
/* Warning Text Block */
/* Yellow Text Block */
.ui.yellow.message,
.ui.warning.message {
background-color: #F6F3D5;
border-color: #CBB105;
color: #96904D;
}
/* Red Text Block */
.ui.red.message {
background-color: #F1D7D7;
color: #A95252;
}
/* Success Text Block */
.ui.success.message,
.ui.positive.message {
background-color: #5BBD72;
color: #FFFFFF;
}
/* Error Text Block */
.ui.red.message,
.ui.error.message,
.ui.negative.message {
background-color: #F1D7D7;
color: #A95252;
border-color: #964D4D;
background-color: #D95C5C;
color: #FFFFFF;
}
/*--------------
Sizes

79
node/src/files/components/semantic/elements/button.css
View File

@ -126,8 +126,8 @@
.ui.button.loading.hover {
position: relative;
cursor: default;
opacity: 0.75;
color: #888888 !important;
background-color: #F3F3F3;
color: transparent !important;
background-image: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
@ -145,15 +145,10 @@
width: 100%;
height: 100%;
content: '';
background: #eeeeee url(../images/loader-tiny.gif) no-repeat 50% 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
background: transparent url(../images/loader-tiny.gif) no-repeat 50% 50%;
}
/*--------------
Error
Error
---------------*/
.ui.buttons .button.error,
.ui.buttons .button.error.hover,
@ -175,9 +170,59 @@
.ui.button.success,
.ui.button.success.hover,
.ui.button.success.down {
background-color: #59B94B;
position: relative;
background-color: #5BBD72;
color: transparent;
}
.ui.button.success .icon {
opacity: 1;
color: #FFFFFF;
border-color: #588D0F;
}
.ui.button.success .icon:before {
font-family: 'Icons';
content: '\2611';
}
.ui.button.success:after {
position: absolute;
left: 50%;
content: "Success";
margin-left: -1.6em;
color: #FFFFFF;
-webkit-animation: button-success 0.5s;
-moz-animation: button-success 0.5s;
-ms-animation: button-success 0.5s;
-o-animation: button-success 0.5s;
animation: button-success 0.5s;
}
@-webkit-keyframes button-success {
0% {
-webkit-transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes button-success {
0% {
-moz-transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes button-success {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*-------------------
Disabled
@ -564,18 +609,8 @@
.ui.buttons.toggle .ui.button.active.hover,
.ui.buttons .ui.button.toggle.active.hover,
.ui.button.toggle.active.hover {
color: #21A627;
background-color: #BBF0A9;
-webkit-box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset;
}
.ui.button.toggle.active.hover.down {
color: #FFFFFF;
background-color: #BBF0A9;
color: #21A627;
-webkit-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
-moz-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
}
/*--------------
Bubbly

10
node/src/files/components/semantic/modules/behavior/state.js
View File

@ -305,7 +305,7 @@ $.fn.state = function(parameters) {
if(settings.sync) {
module.sync();
}
$.proxy(settings.onChange, $module)();
settings.onChange();
},
activate: function() {
@ -315,7 +315,6 @@ $.fn.state = function(parameters) {
.addClass(className.active)
;
module.text.update(text.active);
$.proxy(settings.onActivate, $module)();
}
},
@ -326,7 +325,6 @@ $.fn.state = function(parameters) {
.removeClass(className.active)
;
module.text.update(text.inactive);
$.proxy(settings.onDeactivate, $module)();
}
},
@ -563,9 +561,7 @@ $.fn.state.settings = {
performance: true,
// callback occurs on state change
onChange : function() {},
onActivate : function() {},
onDeactivate : function() {},
onChange: function() {},
// state test functions
activateTest : function() { return true; },
@ -630,7 +626,6 @@ $.fn.state.settings = {
},
states : {
flash : false,
hover : true,
focus : true,
pressed : true,
@ -643,7 +638,6 @@ $.fn.state.settings = {
hover : false,
active : false,
inactive : false,
loading : false,
enable : false,
disable : false
}

8
node/src/files/components/semantic/modules/checkbox.css
View File

@ -63,6 +63,14 @@
top: 0.25em;
left: 0.2em;
}
/*--- Label ---*/
.ui.checkbox + label {
cursor: pointer;
opacity: 0.85;
}
.ui.checkbox + label:hover {
opacity: 1;
}
/*******************************
States
*******************************/

16
node/src/files/javascript/button.js
View File

@ -6,7 +6,8 @@ semantic.button.ready = function() {
// selector cache
var
$buttons = $('.ui.buttons .button'),
$button = $('.ui.button').not($buttons),
$toggle = $('.ui.toggle.button'),
$button = $('.ui.button').not($buttons).not($toggle),
// alias
handler = {
@ -25,6 +26,19 @@ semantic.button.ready = function() {
.on('click', handler.activate)
;
$toggle
.state({
states: {
active: true
},
text: {
inactive : 'Vote',
active : 'Voted',
disable : 'Undo'
}
})
;
$button
.state({
states: {

3
node/src/files/stylesheets/semantic.css
View File

@ -473,6 +473,9 @@ a:hover {
#example .main.ui.grid {
position: relative;
}
#example .example .toggle.button {
min-width: 200px;
}
#example .example .language.label {
margin: 1em 0em 0.75em;
}

9
node/src/layouts/default.html.eco
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<% quirkyElements = @getCollection("documents").findAllLive({type: $in: ['Quirky Element']},[{title: 1}]).toJSON() %>
<% uiElements = @getCollection("documents").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
<% uiCollections = @getCollection("documents").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
<% uiViews = @getCollection("documents").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
@ -91,6 +92,14 @@
<% end %>
</div>
</div>
<div class="item">
<a href="/element.html"><b>Quirky</b></a>
<div class="menu">
<% for element in quirkyElements: %>
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
<% end %>
</div>
</div>
<div class="item">
<a href="/element.html"><b>Elements</b></a>
<div class="menu">

50
src/collections/menu.less
View File

@ -399,7 +399,7 @@
.ui.menu .item.disabled:hover,
.ui.menu .item.disabled.hover {
cursor: default;
opacity: 0.3;
color: rgba(0, 0, 0, 0.2);
background-color: transparent;
}
@ -626,6 +626,30 @@
border-color: #00B5AD;
}
/*--------------
Pagination
---------------*/
.ui.pagination.menu {
display: inline-block;
}
.ui.pagination.menu .item {
min-width: 2.7em;
min-height: 2.55em;
text-align: center;
}
.ui.pagination.menu.floated {
display: block;
}
/* active */
.ui.pagination.menu .active.item {
border-top: none;
padding-top: 0.75em;
background-color: rgba(0, 0, 0, 0.05);
}
/*--------------
Inverted
@ -663,6 +687,12 @@
.ui.inverted.menu .dropdown.item .menu .item a {
color: rgba(0, 0, 0, 0.75) !important;
}
.ui.inverted.menu .item.disabled,
.ui.inverted.menu .item.disabled:hover,
.ui.inverted.menu .item.disabled.hover {
color: rgba(255, 255, 255, 0.2);
}
/*--- Border ---*/
@ -1055,15 +1085,15 @@
-----------------------*/
.ui.secondary.pointing.menu {
border-bottom: 0.2rem solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}
.ui.secondary.pointing.menu > .item {
margin: 0em 0em -0.2em;
margin: 0em 0em -3px;
padding: 0.6em 0.95em;
color: rgba(0, 0, 0, 0.5);
border-bottom: 0.2em solid rgba(0, 0, 0, 0);
border-bottom: 3px solid rgba(0, 0, 0, 0);
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
@ -1117,11 +1147,11 @@
}
.ui.secondary.vertical.pointing.menu {
border: none;
border-right: 0.2rem solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
}
.ui.secondary.vertical.menu > .item {
border: none;
margin: 0em 0em -0.2rem;
margin: 0em 0em 0.3em;
padding: 0.6em 0.8em;
-webkit-border-radius: 0.325em;
@ -1134,9 +1164,9 @@
border-radius: 0em;
}
.ui.secondary.vertical.pointing.menu > .item {
margin: 0em -0.2rem 0em 0em;
margin: 0em -3px 0em 0em;
border-bottom: none;
border-right: 0.2rem solid transparent;
border-right: 3px solid transparent;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
@ -1164,7 +1194,7 @@
/*------- Inverted------- */
.ui.secondary.inverted.pointing.menu {
border-bottom: 0.2rem solid rgba(255, 255, 255, 0.1);
border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}
.ui.secondary.inverted.pointing.menu > .item {
color: rgba(255, 255, 255, 0.7);
@ -1192,7 +1222,7 @@
Inverted Sec
---------------*/
.ui.secondary.inverted.vertical.pointing.menu {
border-right: 0.2rem solid rgba(255, 255, 255, 0.1);
border-right: 3px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
}
/* Down */

60
src/collections/message.less
View File

@ -20,7 +20,7 @@
margin: 1em 0em;
height: auto;
background-color: rgba(0, 0, 0, 0.04);
background-color: #EFEFEF;
padding: 1em;
line-height: 1.33;
@ -177,41 +177,30 @@
---------------*/
.ui.attached.message {
margin-bottom: 0em;
margin-left: -1px;
margin-right: -1px;
margin-bottom: -1px;
-webkit-border-radius: 0.325em 0.325em 0em 0em;
-moz-border-radius: 0.325em 0.325em 0em 0em;
border-radius: 0.325em 0.325em 0em 0em;
-webkit-box-shadow:
0em 0em 0em 1px #DDDDDD
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset
;
-moz-box-shadow:
0em 0em 0em 1px #DDDDDD
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset
;
box-shadow:
0em 0em 0em 1px #DDDDDD
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset
;
}
.ui.bottom.attached.message {
margin-top: 0em;
margin-top: -1px;
-webkit-border-radius: 0em 0em 0.325em 0.325em;
-moz-border-radius: 0em 0em 0.325em 0.325em;
border-radius: 0em 0em 0.325em 0.325em;
-webkit-box-shadow:
0em 0em 0em 1px #DDDDDD
;
-moz-box-shadow:
0em 0em 0em 1px #DDDDDD
;
box-shadow:
0em 0em 0em 1px #DDDDDD
;
}
.ui.attached.message .icon {
float: right;
}
@ -258,35 +247,40 @@
---------------*/
.ui.blue.message,
.ui.info.message {
border-color: #E4F5FB;
background-color: #E9F9FF;
background-color: #E6F4F9;
color: #4D8796;
}
/* Success Text Block */
.ui.green.message,
.ui.success.message,
.ui.positive.message {
/* Green Text Block */
.ui.green.message {
background-color: #DEFCD5;
color: #52A954;
border-color: #4D965B;
}
/* Warning Text Block */
/* Yellow Text Block */
.ui.yellow.message,
.ui.warning.message {
background-color: #F6F3D5;
border-color: #CBB105;
color: #96904D;
}
/* Error Text Block */
.ui.red.message,
.ui.error.message,
.ui.negative.message {
/* Red Text Block */
.ui.red.message {
background-color: #F1D7D7;
color: #A95252;
border-color: #964D4D;
}
/* Success Text Block */
.ui.success.message,
.ui.positive.message {
background-color: #5BBD72;
color: #FFFFFF;
}
/* Error Text Block */
.ui.error.message,
.ui.negative.message {
background-color: #D95C5C;
color: #FFFFFF;
}

95
src/elements/button.less
View File

@ -200,11 +200,10 @@
.ui.button.loading.hover {
position: relative;
cursor: default;
opacity: 0.75;
color: #888888 !important;
background-color: #F3F3F3;
color: transparent !important;
background-image: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
@ -222,18 +221,12 @@
width: 100%;
height: 100%;
content: '';
background: #EEEEEE url(../images/loader-tiny.gif) no-repeat 50% 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
background: transparent url(../images/loader-tiny.gif) no-repeat 50% 50%;
}
/*--------------
Error
Error
---------------*/
.ui.buttons .button.error,
@ -258,9 +251,63 @@
.ui.button.success,
.ui.button.success.hover,
.ui.button.success.down {
background-color: #59B94B;
position: relative;
background-color: #5BBD72;
color: transparent;
}
.ui.button.success .icon {
opacity: 1;
color: #FFFFFF;
}
.ui.button.success .icon:before {
font-family: 'Icons';
content: '\2611';
}
.ui.button.success:after {
position: absolute;
left: 50%;
content: "Success";
margin-left: -1.6em;
color: #FFFFFF;
border-color: #588D0F;
-webkit-animation: button-success 0.5s;
-moz-animation: button-success 0.5s;
-ms-animation: button-success 0.5s;
-o-animation: button-success 0.5s;
animation: button-success 0.5s;
}
@-webkit-keyframes button-success {
0% {
-webkit-transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes button-success {
0% {
-moz-transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes button-success {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*-------------------
@ -686,30 +733,10 @@
.ui.buttons.toggle .ui.button.active.hover,
.ui.buttons .ui.button.toggle.active.hover,
.ui.button.toggle.active.hover {
color: #21A627;
background-color: #BBF0A9;
-webkit-box-shadow:
0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset
;
-moz-box-shadow:
0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset
;
box-shadow:
0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset
;
}
.ui.button.toggle.active.hover.down {
color: #FFFFFF;
background-color: #BBF0A9;
color: #21A627;
-webkit-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
-moz-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;
}
/*--------------
Bubbly
---------------*/

9
src/modules/checkbox.less
View File

@ -90,13 +90,20 @@
left: 0.2em;
}
/*--- Label ---*/
.ui.checkbox + label {
cursor: pointer;
opacity: 0.85;
}
.ui.checkbox + label:hover {
opacity: 1;
}
/*******************************
States
*******************************/
/*--- Hover ---*/
.ui.checkbox .box:hover,
.ui.checkbox label:hover {

5
src/vector/blur.svg
View File

@ -1,5 +0,0 @@
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<svg:feGaussianBlur stdDeviation="5"/>
</filter>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 144 B

Write Preview
Loading…
Cancel
Save