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

The great button escapade of friday 

Former-commit-id: 9e25c82844
Former-commit-id: 48e1d65ad3
pull/258/head
Jack Lukic 11 years ago
parent
0879886a5e
commit
7c1b82f1e2
6 changed files with 97 additions and 141 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/elements/button.min.css
  2. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  3. 67
      build/uncompressed/elements/button.css
  4. 21
      node/src/documents/elements/button.html
  5. 67
      node/src/files/components/semantic/elements/button.css
  6. 79
      src/elements/button.less

2
build/minified/elements/button.min.css
File diff suppressed because it is too large
View File

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

@ -1 +1 @@
8e069ebbe45ffccb865194aa26e1da1f78c4e083
f38ae02aede631ee4550bce5bb74b32b9175b0c9

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

@ -374,20 +374,6 @@
background-color: #CD2D4D;
color: #FFFFFF;
}
/*-------------------
Secondary
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
opacity: 0.9;
}
.ui.buttons.tertiary .button,
.ui.tertiary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.7;
}
/*-------------------
Sizes
--------------------*/
@ -467,6 +453,27 @@
height: 0.9em;
margin: 0em;
}
/*-------------------
Ordinality
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
text-transform: none;
opacity: 1;
}
/*--- Tertiary ---*/
.ui.buttons.tertiary .button,
.ui.tertiary.button {
background-color: transparent;
color: #999999;
font-weight: normal;
text-transform: none;
box-shadow: none;
}
.ui.buttons.tertiary .button:first-child {
border-left: none;
}
/*--------------
Labeled Icon
---------------*/
@ -570,17 +577,16 @@
---------------*/
.ui.button.attached {
display: block;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.ui.button.attached.top {
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: none;
-webkit-border-radius: 0.3125em 0.3125em 0em 0em;
-moz-border-radius: 0.3125em 0.3125em 0em 0em;
border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.button.attached.bottom {
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
-webkit-border-radius: 0em 0em 0.3125em 0.3125em;
-moz-border-radius: 0em 0em 0.3125em 0.3125em;
border-radius: 0em 0em 0.3125em 0.3125em;
@ -590,7 +596,6 @@
border-left: none;
padding-right: 0.75em;
text-align: right;
border-right: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
@ -599,34 +604,10 @@
display: inline-block;
padding-left: 0.75em;
text-align: left;
border-left: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
}
/* Button attached to a form element */
input + .ui.attached.button {
display: inline-block;
margin: 0 0 0 -1em;
padding: 0.68em 1em;
vertical-align: top;
font-size: 0.825em;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
}
input:focus + .ui.attached.button {
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
}
.ui.attached.button.loading,
.ui.attached.button.loading.hover {
opacity: 1;
}
/*-------------------
Or Buttons
--------------------*/

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

@ -193,7 +193,7 @@ type : 'UI Element'
<h4 class="ui header">Vertically Attached</h4>
<p>Can be attached to the top or bottom of other content</p>
<div class="ui top attached button">Top</div>
<div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background-color:#FFFFFF;height:200px;"></div>
<div class="ui attached segment"></div>
<div class="bottom attached ui button">Bottom</div>
</div>
@ -201,7 +201,6 @@ type : 'UI Element'
<h4 class="ui header">Horizontally Attached</h4>
<p>Can be attached to the left or right of other content</p>
<div class="ui left attached button">Left</div>
<div style="width: 200px; display: inline-block; background-color: rgb(255, 255, 255); vertical-align: middle; height: 38px; margin: 0px -4px; border-bottom: 2px solid rgb(221, 221, 221); border-top: 2px solid rgb(221, 221, 221);"></div>
<div class="right attached ui button">Right</div>
</div>
@ -286,6 +285,24 @@ type : 'UI Element'
</div>
</div>
<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 buttons">
<div class="ui red button">One</div>
<div class="ui blue button">Two</div>
<div class="ui green button">Three</div>
</div>
</div>
<div class="another example">
<div class="ui red tertiary buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
</div>
<div class="example"></div>
<h4 class="ui header">Sizes</h4>

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

@ -374,20 +374,6 @@
background-color: #CD2D4D;
color: #FFFFFF;
}
/*-------------------
Secondary
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
opacity: 0.9;
}
.ui.buttons.tertiary .button,
.ui.tertiary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.7;
}
/*-------------------
Sizes
--------------------*/
@ -467,6 +453,27 @@
height: 0.9em;
margin: 0em;
}
/*-------------------
Ordinality
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
text-transform: none;
opacity: 1;
}
/*--- Tertiary ---*/
.ui.buttons.tertiary .button,
.ui.tertiary.button {
background-color: transparent;
color: #999999;
font-weight: normal;
text-transform: none;
box-shadow: none;
}
.ui.buttons.tertiary .button:first-child {
border-left: none;
}
/*--------------
Labeled Icon
---------------*/
@ -570,17 +577,16 @@
---------------*/
.ui.button.attached {
display: block;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.ui.button.attached.top {
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: none;
-webkit-border-radius: 0.3125em 0.3125em 0em 0em;
-moz-border-radius: 0.3125em 0.3125em 0em 0em;
border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.button.attached.bottom {
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
-webkit-border-radius: 0em 0em 0.3125em 0.3125em;
-moz-border-radius: 0em 0em 0.3125em 0.3125em;
border-radius: 0em 0em 0.3125em 0.3125em;
@ -590,7 +596,6 @@
border-left: none;
padding-right: 0.75em;
text-align: right;
border-right: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
@ -599,34 +604,10 @@
display: inline-block;
padding-left: 0.75em;
text-align: left;
border-left: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
}
/* Button attached to a form element */
input + .ui.attached.button {
display: inline-block;
margin: 0 0 0 -1em;
padding: 0.68em 1em;
vertical-align: top;
font-size: 0.825em;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
}
input:focus + .ui.attached.button {
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
}
.ui.attached.button.loading,
.ui.attached.button.loading.hover {
opacity: 1;
}
/*-------------------
Or Buttons
--------------------*/

79
src/elements/button.less
View File

@ -475,22 +475,6 @@
color: #FFFFFF;
}
/*-------------------
Secondary
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
opacity: 0.9;
}
.ui.buttons.tertiary .button,
.ui.tertiary.button {
font-weight: normal;
box-shadow: none;
opacity: 0.7;
}
/*-------------------
Sizes
@ -577,9 +561,34 @@
}
/*-------------------
Ordinality
--------------------*/
.ui.buttons.secondary .button,
.ui.secondary.button {
font-weight: normal;
text-transform: none;
opacity: 1;
}
/*--- Tertiary ---*/
.ui.buttons.tertiary .button,
.ui.tertiary.button {
background-color: transparent;
color: #999999;
font-weight: normal;
text-transform: none;
box-shadow: none;
}
.ui.buttons.tertiary .button:first-child {
border-left: none;
}
/*--------------
Labeled Icon
---------------*/
.ui.labeled.icon.buttons .button,
.ui.labeled.icon.button {
position: relative;
@ -705,19 +714,17 @@
.ui.button.attached {
display: block;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.ui.button.attached.top {
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: none;
-webkit-border-radius: 0.3125em 0.3125em 0em 0em;
-moz-border-radius: 0.3125em 0.3125em 0em 0em;
border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.button.attached.bottom {
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
-webkit-border-radius: 0em 0em 0.3125em 0.3125em;
-moz-border-radius: 0em 0em 0.3125em 0.3125em;
border-radius: 0em 0em 0.3125em 0.3125em;
@ -728,7 +735,6 @@
padding-right: 0.75em;
text-align: right;
border-right: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
@ -739,41 +745,12 @@
padding-left: 0.75em;
text-align: left;
border-left: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
}
/* Button attached to a form element */
input + .ui.attached.button {
display: inline-block;
margin: 0 0 0 -1em;
padding: 0.68em 1em;
vertical-align: top;
font-size: 0.825em;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
}
input:focus + .ui.attached.button {
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
}
.ui.attached.button.loading,
.ui.attached.button.loading.hover {
opacity: 1;
}
/*-------------------

Write Preview
Loading…
Cancel
Save