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

changes to items 

Former-commit-id: da12934d1c19d9d79f4ab71f72e5b3f726f4c34c
Former-commit-id: b28b978366e6e0e94a40f47c42dcc4da57af43e4
beta
Jack Lukic 12 years ago
parent
d9dc4ca5e7
commit
b26e3256ee
15 changed files with 391 additions and 196 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/elements/button.min.css
  2. 2
      build/minified/elements/icons.min.css
  3. 2
      build/minified/views/items.min.css
  4. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  5. 2
      build/packaged/semantic.min.js.REMOVED.git-id
  6. 88
      build/uncompressed/elements/button.css
  7. 2
      build/uncompressed/elements/icons.css
  8. 56
      build/uncompressed/views/items.css
  9. 89
      node/src/documents/elements/button.html
  10. 88
      node/src/files/components/semantic/elements/button.css
  11. 2
      node/src/files/components/semantic/elements/icons.css
  12. 56
      node/src/files/components/semantic/views/items.css
  13. 126
      src/elements/button.less
  14. 2
      src/elements/icons.less
  15. 68
      src/views/items.less

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
build/minified/views/items.min.css
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 @@
6dd37e7508d8800219d3134a1fbb032fb03a222e
c52ea0ff31b2357360f7ace60f140e9cbe790d35

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

@ -1 +1 @@
bd92fcca9da362ee4941fc0f3dddfc2acbd1fdd8
9a0290c8470cce28a7172322b5d7fe7f9792d6b8

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

@ -40,11 +40,11 @@
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-moz-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-o-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-ms-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}
/*******************************
States
@ -54,6 +54,7 @@
---------------*/
.ui.button:hover,
.ui.button.hover {
opacity: 1 !important;
background-color: #EAEAEA;
color: #777777;
}
@ -63,6 +64,7 @@
/* Down */
.ui.button:active,
.ui.button.down {
opacity: 1 !important;
background-color: #E6E6E6;
color: #777777;
-webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
@ -74,6 +76,7 @@
---------------*/
.ui.buttons .button.active,
.ui.button.active {
opacity: 1 !important;
background-color: #E6E6E6;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
@ -137,42 +140,6 @@
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
}
/* Opposite color loader */
.ui.grey.button.loading,
.ui.button.active.loading {
border-color: #bbbbbb;
}
.ui.grey.button.loading:after,
.ui.button.active.loading:after {
background-color: #FAFAFA;
background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
}
/* resizes */
/* blue */
.ui.huge.button.loading:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
background-image: url(../images/throbber-medium.gif);
}
/* grey */
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
background-image: url(../images/throbber-medium.gif);
}
/*--------------
Error
---------------*/
@ -382,6 +349,21 @@
background-color: #CD2D4D;
color: #FFFFFF;
}
/*-------------------
Secondary
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.7;
}
.ui.buttons.tertiary .button,
.ui.tertiary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.5;
}
/*-------------------
Sizes
--------------------*/
@ -424,6 +406,30 @@
padding-left: 2.5em;
padding-right: 2.5em;
}
/* loading */
.ui.huge.button.loading:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
background-image: url(../images/throbber-medium.gif);
}
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
background-image: url(../images/throbber-medium.gif);
}
/*--------------
Containing Icon
---------------*/

2
build/uncompressed/elements/icons.css
View File

@ -627,7 +627,7 @@ i.circular.icon {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
padding: 0.35em;
padding: 0.43em 0.35em 0.27em;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 1.23em;
height: 1.23em;

56
build/uncompressed/views/items.css
View File

@ -37,6 +37,7 @@
display: block;
float: left;
position: relative;
top: 0px;
width: 316px;
min-height: 375px;
margin: 1em 0.5em 2.5em;
@ -51,8 +52,14 @@
-moz-border-radius: 0.33em;
-webkit-border-radius: 0.33em;
border-radius: 0.33em;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
padding: 0.5em;
}
.ui.items a.item,
.ui.items .item a {
cursor: pointer;
}
@ -210,6 +217,11 @@
left: 0em;
height: 1.5em;
color: rgba(0, 0, 0, 0.25);
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.ui.items .item .extra > img {
display: inline-block;
@ -224,6 +236,37 @@
.ui.items .item .extra .right {
float: right;
}
/*******************************
States
*******************************/
.ui.items .item:hover {
cursor: pointer;
z-index: 5;
top: -0.25em;
border-bottom-width: 0.3em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.items .item:hover .extra {
color: rgba(0, 0, 0, 0.5);
}
.ui.items .item:nth-of-type(n+1):hover {
border-bottom-color: #6ECFF5 !important;
}
.ui.items .item:nth-of-type(n+2):hover {
border-bottom-color: #5C6166 !important;
}
.ui.items .item:nth-of-type(n+3):hover {
border-bottom-color: #A1CF64 !important;
}
.ui.items .item:nth-of-type(n+4):hover {
border-bottom-color: #EF4D6D !important;
}
.ui.items .item:nth-of-type(n+5):hover {
border-bottom-color: #564F8A !important;
}
.ui.items .item:nth-of-type(n+6):hover {
border-bottom-color: #00B5AD !important;
}
/*******************************
Variations
*******************************/
@ -245,11 +288,15 @@
border-radius: 0px;
margin: 0em;
width: 33.33%;
border-bottom: none;
}
.ui.connected.items > .row {
display: table-row;
display: table;
margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
margin-top: 0em;
}
/* Borders */
.ui.connected.items > .item,
.ui.connected.items > .row:last-child > .item {
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
@ -262,6 +309,11 @@
.ui.connected.items > .item:last-child {
border-radius: 0em 0em 0.33em 0em;
}
/* Hover */
.ui.connected.items .item:hover {
border-bottom-width: 0.2em;
}
/* Item Count */
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
width: 50%;

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

@ -17,12 +17,12 @@ type : 'UI Element'
<div class="ui vertical pointing menu">
<a class="active item">Standard</a>
<a class="item">States</a>
<a class="item">Variations</a>
<a class="item">Variations</a>
<a class="item">Groups</a>
</div>
</div>
<h2 class="ui dividing header">Standard</h2>
<div class="example">
<h4 class="ui header">Button:</h4>
<p>A standard button</p>
@ -30,51 +30,51 @@ type : 'UI Element'
</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">Hovered Button</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">Pressed Button</div>
</div>
<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">Active Button</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">Disabled Button</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>
</div>
<div class="example">
<h4 class="ui header">Success</h4>
<p>Can alert to a succesful action:</p>
<div class="ui success button">Successful Button</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>
</div>
<div class="example">
<h4 class="ui header">All together:</h4>
<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>
@ -89,7 +89,24 @@ type : 'UI Element'
<h2 class="ui dividing header">Variations</h2>
<p>Button variations are used to explain relationships between user actions and other elements, or to show emphasis.</p>
<div class="example">
<h4 class="ui header">Ordinality</h4>
<p>A button can be formatted to appear more or less noticable</p>
<div class="ui secondary button">Secondary</div>
<div class="ui secondary teal button">Secondary</div>
<div class="ui secondary purple button">Secondary</div>
<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>
</div>
<div class="example">
<h4 class="ui header">Sizes</h4>
<p>Can have different sizes:</p>
@ -119,7 +136,7 @@ type : 'UI Element'
</div>
</div>
<div class="example">
<h4 class="ui header">Colors</h4>
<p>Can have different colors:</p>
@ -131,26 +148,26 @@ type : 'UI Element'
<a class="ui purple button">Purple Button</a>
<a class="ui teal button">Teal Button</a>
</div>
<h4 class="ui header">Feedback</h4>
<div class="example">
<p>Can be positive or negative:</p>
<div class="positive ui button">Positive Button</div>
<div class="negative ui button">Negative Button</div>
</div>
<div class="example">
<h4 class="ui header">Fluid</h4>
<p>Can fit parent container:</p>
<div class="fluid ui button">Fits container</div>
</div>
<div class="example">
<h4 class="ui header">Bubbly</h4>
<p>Can be bubbly:</p>
<div class="bubbly ui button">More bubbly</div>
</div>
<div class="example">
<h4 class="ui header">Icon</h4>
<p>Can be formatted as an icon toolbar:</p>
@ -158,14 +175,14 @@ type : 'UI Element'
<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>
@ -173,7 +190,7 @@ type : 'UI Element'
<div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background-color:#FFFFFF;height:200px;"></div>
<div class="ui bottom attached button">Bottom</div>
</div>
<div class="example">
<h4 class="ui header">Horizontally Attached</h4>
<p>Can be attached to the left or right of other content</p>
@ -182,17 +199,9 @@ type : 'UI Element'
<div class="ui right attached button">Right</div>
</div>
<div class="example">
<h4 class="ui header">Form Attached</h4>
<p>Can be attached to an input field</p>
<div class="ui form">
<input type="text" class="attached">
<div class="ui attached button">Search</div>
</div>
</div>
<h2 class="ui dividing header">Group</h2>
<div class="example">
<h4 class="ui header">Buttons</h4>
<p>Can exist together as groups</p>
@ -202,7 +211,7 @@ type : 'UI Element'
<div class="ui button">Three</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Conditionals</h4>
<p>Groups can be separated by conditionals</p>
@ -212,10 +221,10 @@ type : 'UI Element'
<div class="ui positive button">Save</div>
</div>
</div>
<h3 class="ui header">Plural Variations</h3>
<p>Singular variations can be applied to groups to infer all elements share the same quality</p>
<div class="example">
@ -227,7 +236,7 @@ type : 'UI Element'
<div class="ui button">Bottom</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Icon</h4>
<p>Groups can be formatted as icon toolbars</p>
@ -237,7 +246,7 @@ type : 'UI Element'
<div class="ui button"><i class="icon shuffle"></i></div>
</div>
</div>
<div class="example">
<h4 class="ui header">Labeled Icon</h4>
<p>Groups can be formatted as labeled icons</p>
@ -247,8 +256,8 @@ type : 'UI Element'
<div class="ui button"><i class="icon shuffle"></i> Shuffle</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Fluid</h4>
<p>Groups can be divided evenly to fit parent</p>
@ -260,7 +269,7 @@ type : 'UI Element'
<div class="ui button">Five</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Colors</h4>
<p>Groups can have a shared color</p>
@ -271,8 +280,8 @@ type : 'UI Element'
</div>
<div class="blue large icon ui buttons">
</div>
<div class="example"></div>
<h4 class="ui header">Sizes</h4>
<p>Groups can have a shared size</p>

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

@ -40,11 +40,11 @@
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-moz-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-o-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-ms-transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
transition: opacity 0.1s linear, color 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
-webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
-ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}
/*******************************
States
@ -54,6 +54,7 @@
---------------*/
.ui.button:hover,
.ui.button.hover {
opacity: 1 !important;
background-color: #EAEAEA;
color: #777777;
}
@ -63,6 +64,7 @@
/* Down */
.ui.button:active,
.ui.button.down {
opacity: 1 !important;
background-color: #E6E6E6;
color: #777777;
-webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
@ -74,6 +76,7 @@
---------------*/
.ui.buttons .button.active,
.ui.button.active {
opacity: 1 !important;
background-color: #E6E6E6;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
@ -137,42 +140,6 @@
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
}
/* Opposite color loader */
.ui.grey.button.loading,
.ui.button.active.loading {
border-color: #bbbbbb;
}
.ui.grey.button.loading:after,
.ui.button.active.loading:after {
background-color: #FAFAFA;
background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
}
/* resizes */
/* blue */
.ui.huge.button.loading:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
background-image: url(../images/throbber-medium.gif);
}
/* grey */
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
background-image: url(../images/throbber-medium.gif);
}
/*--------------
Error
---------------*/
@ -382,6 +349,21 @@
background-color: #CD2D4D;
color: #FFFFFF;
}
/*-------------------
Secondary
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.7;
}
.ui.buttons.tertiary .button,
.ui.tertiary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.5;
}
/*-------------------
Sizes
--------------------*/
@ -424,6 +406,30 @@
padding-left: 2.5em;
padding-right: 2.5em;
}
/* loading */
.ui.huge.button.loading:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
background-image: url(../images/throbber-medium.gif);
}
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
background-image: url(../images/throbber-medium.gif);
}
/*--------------
Containing Icon
---------------*/

2
node/src/files/components/semantic/elements/icons.css
View File

@ -627,7 +627,7 @@ i.circular.icon {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
padding: 0.35em;
padding: 0.43em 0.35em 0.27em;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 1.23em;
height: 1.23em;

56
node/src/files/components/semantic/views/items.css
View File

@ -37,6 +37,7 @@
display: block;
float: left;
position: relative;
top: 0px;
width: 316px;
min-height: 375px;
margin: 1em 0.5em 2.5em;
@ -51,8 +52,14 @@
-moz-border-radius: 0.33em;
-webkit-border-radius: 0.33em;
border-radius: 0.33em;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
padding: 0.5em;
}
.ui.items a.item,
.ui.items .item a {
cursor: pointer;
}
@ -210,6 +217,11 @@
left: 0em;
height: 1.5em;
color: rgba(0, 0, 0, 0.25);
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.ui.items .item .extra > img {
display: inline-block;
@ -224,6 +236,37 @@
.ui.items .item .extra .right {
float: right;
}
/*******************************
States
*******************************/
.ui.items .item:hover {
cursor: pointer;
z-index: 5;
top: -0.25em;
border-bottom-width: 0.3em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.items .item:hover .extra {
color: rgba(0, 0, 0, 0.5);
}
.ui.items .item:nth-of-type(n+1):hover {
border-bottom-color: #6ECFF5 !important;
}
.ui.items .item:nth-of-type(n+2):hover {
border-bottom-color: #5C6166 !important;
}
.ui.items .item:nth-of-type(n+3):hover {
border-bottom-color: #A1CF64 !important;
}
.ui.items .item:nth-of-type(n+4):hover {
border-bottom-color: #EF4D6D !important;
}
.ui.items .item:nth-of-type(n+5):hover {
border-bottom-color: #564F8A !important;
}
.ui.items .item:nth-of-type(n+6):hover {
border-bottom-color: #00B5AD !important;
}
/*******************************
Variations
*******************************/
@ -245,11 +288,15 @@
border-radius: 0px;
margin: 0em;
width: 33.33%;
border-bottom: none;
}
.ui.connected.items > .row {
display: table-row;
display: table;
margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
margin-top: 0em;
}
/* Borders */
.ui.connected.items > .item,
.ui.connected.items > .row:last-child > .item {
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
@ -262,6 +309,11 @@
.ui.connected.items > .item:last-child {
border-radius: 0em 0em 0.33em 0em;
}
/* Hover */
.ui.connected.items .item:hover {
border-bottom-width: 0.2em;
}
/* Item Count */
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
width: 50%;

126
src/elements/button.less
View File

@ -60,34 +60,34 @@
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition:
opacity 0.1s linear,
color 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
opacity 0.1s ease,
color 0.1s ease,
background 0.1s ease,
box-shadow 0.1s ease
;
-moz-transition:
opacity 0.1s linear,
color 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
opacity 0.1s ease,
color 0.1s ease,
background 0.1s ease,
box-shadow 0.1s ease
;
-o-transition:
opacity 0.1s linear,
color 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
opacity 0.1s ease,
color 0.1s ease,
background 0.1s ease,
box-shadow 0.1s ease
;
-ms-transition:
opacity 0.1s linear,
color 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
opacity 0.1s ease,
color 0.1s ease,
background 0.1s ease,
box-shadow 0.1s ease
;
transition:
opacity 0.1s linear,
color 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
opacity 0.1s ease,
color 0.1s ease,
background 0.1s ease,
box-shadow 0.1s ease
;
}
@ -102,6 +102,7 @@
.ui.button:hover,
.ui.button.hover {
opacity: 1 !important;
background-color: #EAEAEA;
color: #777777;
}
@ -113,6 +114,7 @@
/* Down */
.ui.button:active,
.ui.button.down {
opacity: 1 !important;
background-color: #E6E6E6;
color: #777777;
-webkit-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset;
@ -127,6 +129,7 @@
.ui.buttons .button.active,
.ui.button.active {
opacity: 1 !important;
background-color: #E6E6E6;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
@ -204,45 +207,6 @@
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
}
/* Opposite color loader */
.ui.grey.button.loading,
.ui.button.active.loading {
border-color: #BBBBBB
}
.ui.grey.button.loading:after,
.ui.button.active.loading:after {
background-color: #FAFAFA;
background: url(../images/throbber-tiny.gif) no-repeat 50% 50%;
}
/* resizes */
/* blue */
.ui.huge.button.loading:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
background-image: url(../images/throbber-medium.gif);
}
/* grey */
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
background-image: url(../images/throbber-medium.gif);
}
/*--------------
@ -475,6 +439,24 @@
color: #FFFFFF;
}
/*-------------------
Secondary
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.7;
}
.ui.buttons.tertiary .button,
.ui.tertiary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.5;
}
/*-------------------
Sizes
--------------------*/
@ -519,6 +501,32 @@
padding-right: 2.5em;
}
/* loading */
.ui.huge.button.loading:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
background-image: url(../images/throbber-medium.gif);
}
.ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after {
background-image: url(../images/throbber-small.gif);
}
.ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after,
.ui.massive.grey.button.loading:after,
.ui.gigantic.grey.button.loading:after,
.ui.massive.grey.buttons .button.loading.active:after,
.ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after {
background-image: url(../images/throbber-medium.gif);
}
/*--------------
Containing Icon
---------------*/

2
src/elements/icons.less
View File

@ -283,7 +283,7 @@ i.circular.icon {
-moz-border-radius: 500px;
border-radius: 500px;
padding: 0.35em;
padding: 0.43em 0.35em 0.27em;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 1.23em;

68
src/views/items.less
View File

@ -46,6 +46,7 @@
display: block;
float: left;
position: relative;
top: 0px;
width: 316px;
min-height: 375px;
@ -66,8 +67,16 @@
-webkit-border-radius: 0.33em;
border-radius: 0.33em;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
padding: 0.5em;
}
.ui.items a.item,
.ui.items .item a {
cursor: pointer;
}
@ -253,6 +262,12 @@
left: 0em;
height: 1.5em;
color: rgba(0, 0, 0, 0.25);
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.ui.items .item .extra > img {
display: inline-block;
@ -269,6 +284,42 @@
}
/*******************************
States
*******************************/
.ui.items .item:hover {
cursor: pointer;
z-index: 5;
top: -0.25em;
border-bottom-width: 0.3em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.items .item:hover .extra {
color: rgba(0, 0, 0, 0.5);
}
.ui.items .item:nth-of-type(n+1):hover {
border-bottom-color: #6ECFF5 !important;
}
.ui.items .item:nth-of-type(n+2):hover {
border-bottom-color: #5C6166 !important;
}
.ui.items .item:nth-of-type(n+3):hover {
border-bottom-color: #A1CF64 !important;
}
.ui.items .item:nth-of-type(n+4):hover {
border-bottom-color: #EF4D6D !important;
}
.ui.items .item:nth-of-type(n+5):hover {
border-bottom-color: #564F8A !important;
}
.ui.items .item:nth-of-type(n+6):hover {
border-bottom-color: #00B5AD !important;
}
/*******************************
Variations
*******************************/
@ -293,12 +344,16 @@
border-radius: 0px;
margin: 0em;
width: 33.33%;
border-bottom: none;
}
.ui.connected.items > .row {
display: table-row;
display: table;
margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
margin-top: 0em;
}
/* Borders */
.ui.connected.items > .item,
.ui.connected.items > .row:last-child > .item {
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
@ -312,6 +367,14 @@
border-radius: 0em 0em 0.33em 0em;
}
/* Hover */
.ui.connected.items .item:hover {
border-bottom-width: 0.2em;
}
/* Item Count */
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
width: 50%;
@ -380,7 +443,6 @@
}
/*--------------
Horizontal
---------------*/

Write Preview
Loading…
Cancel
Save