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

fixes to step display

pull/13/head
Jack Lukic 11 years ago
parent
f90a043b2b
commit
d6eab8723d
6 changed files with 82 additions and 5 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/elements/step.min.css
  2. 2
      build/packaged/semantic.min.css
  3. 18
      build/uncompressed/elements/step.css
  4. 18
      node/src/files/components/semantic/elements/step.css
  5. 3
      node/src/files/stylesheets/semantic.css
  6. 44
      src/elements/step.less

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

@ -1 +1 @@
.ui.step,.ui.steps .step{display:inline-block;position:relative;padding:1em 2em 1em 3em;background-color:#FFF;color:#888}.ui.step:after,.ui.steps .step:after{position:absolute;z-index:2;content:'';top:0;right:-1.5em;border-bottom:1.5em solid transparent;border-left:1.5em solid #FFF;border-top:1.5em solid transparent;width:0;height:0}.ui.steps{cursor:pointer;display:inline-block;font-size:0;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-moz-border-radius:.3125rem;-webkit-border-radius:.3125rem;border-radius:.3125rem}.ui.steps .step:first-child{padding-left:1.35em;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em}.ui.steps .step:last-child{-webkit-border-radius:0 .3125em .3125em 0;-moz-border-radius:0 .3125em .3125em 0;border-radius:0 .3125em .3125em 0}.ui.steps .step:only-child{-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.steps .step:last-child{margin-right:0}.ui.steps .step:last-child:after{display:none}.ui.step:hover,.ui.step.hover{background-color:#F7F7F7}.ui.step:hover,.ui.step.hover::after{border-left-color:#F7F7F7}.ui.step.down,.ui.step:active{background-color:#F0F0F0}.ui.steps.down::after,.ui.steps:active::after{border-left-color:#F0F0F0}.ui.active.step{cursor:auto;background-color:#555;color:#FFF;font-weight:700}.ui.active.step:after{border-left-color:#555}.ui.disabled.step{cursor:auto;background-color:#FFF;color:#CBCBCB}.ui.disabled.step:after{border-left-color:#FFF}.attached.ui.steps{margin:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.attached.ui.steps .step:first-child{-webkit-border-radius:.3125em 0 0;-moz-border-radius:.3125em 0 0;border-radius:.3125em 0 0}.attached.ui.steps .step:last-child{-webkit-border-radius:0 .3125em 0 0;-moz-border-radius:0 .3125em 0 0;border-radius:0 .3125em 0 0}.bottom.attached.ui.steps{margin-top:-1px;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.bottom.attached.ui.steps .step:first-child{-webkit-border-radius:0 0 0 .3125em;-moz-border-radius:0 0 0 .3125em;border-radius:0 0 0 .3125em}.bottom.attached.ui.steps .step:last-child{-webkit-border-radius:0 0 .3125em;-moz-border-radius:0 0 .3125em;border-radius:0 0 .3125em}.ui.steps.fluid,.ui.steps.fluid>.step{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.steps.two.fluid>.step{width:50%}.ui.steps.three.fluid>.step{width:33.333%}.ui.steps.four.fluid>.step{width:25%}.ui.steps.five.fluid>.step{width:20%}.ui.steps.six.fluid>.step{width:16.666%}.ui.steps.seven.fluid>.step{width:14.285%}.ui.steps.eight.fluid>.step{width:12.5%}.ui.small.step,.ui.small.steps .step{font-size:.8rem}.ui.step,.ui.steps .step{font-size:1rem}.ui.large.step,.ui.large.steps .step{font-size:1.25rem}
.ui.step,.ui.steps .step{display:inline-block;position:relative;padding:1em 2em 1em 3em;background-color:#FFF;-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;color:#888}.ui.step:after,.ui.steps .step:after{position:absolute;z-index:2;content:'';top:0;right:-1.48em;border-bottom:1.5em solid transparent;border-left:1.5em solid #FFF;border-top:1.5em solid transparent;width:0;height:0}.ui.steps{cursor:pointer;display:inline-block;font-size:0;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-moz-border-radius:.3125rem;-webkit-border-radius:.3125rem;border-radius:.3125rem}.ui.steps .step:first-child{padding-left:1.35em;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em}.ui.steps .step:last-child{-webkit-border-radius:0 .3125em .3125em 0;-moz-border-radius:0 .3125em .3125em 0;border-radius:0 .3125em .3125em 0}.ui.steps .step:only-child{-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.steps .step:last-child{margin-right:0}.ui.steps .step:last-child:after{display:none}.ui.step:hover,.ui.step.hover{background-color:#F7F7F7;color:rgba(0,0,0,.8)}.ui.steps .step.hover:after,.ui.steps .step:hover:after,.ui.step:hover,.ui.step.hover::after{border-left-color:#F7F7F7}.ui.steps .step.down,.ui.steps .step:active,.ui.step.down,.ui.step:active{background-color:#F0F0F0}.ui.steps .step.down:after,.ui.steps .step:active:after,.ui.steps.down::after,.ui.steps:active::after{border-left-color:#F0F0F0}.ui.steps .step.active,.ui.active.step{cursor:auto;background-color:#555;color:#FFF;font-weight:700}.ui.steps .step.active:after,.ui.active.step:after{border-left-color:#555}.ui.steps .disabled.step,.ui.disabled.step{cursor:auto;background-color:#FFF;color:#CBCBCB}.ui.steps .disabled.step:after,.ui.disabled.step:after{border-left-color:#FFF}.attached.ui.steps{margin:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.attached.ui.steps .step:first-child{-webkit-border-radius:.3125em 0 0;-moz-border-radius:.3125em 0 0;border-radius:.3125em 0 0}.attached.ui.steps .step:last-child{-webkit-border-radius:0 .3125em 0 0;-moz-border-radius:0 .3125em 0 0;border-radius:0 .3125em 0 0}.bottom.attached.ui.steps{margin-top:-1px;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.bottom.attached.ui.steps .step:first-child{-webkit-border-radius:0 0 0 .3125em;-moz-border-radius:0 0 0 .3125em;border-radius:0 0 0 .3125em}.bottom.attached.ui.steps .step:last-child{-webkit-border-radius:0 0 .3125em;-moz-border-radius:0 0 .3125em;border-radius:0 0 .3125em}.ui.steps.fluid,.ui.steps.fluid>.step{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.steps.two.fluid>.step{width:50%}.ui.steps.three.fluid>.step{width:33.333%}.ui.steps.four.fluid>.step{width:25%}.ui.steps.five.fluid>.step{width:20%}.ui.steps.six.fluid>.step{width:16.666%}.ui.steps.seven.fluid>.step{width:14.285%}.ui.steps.eight.fluid>.step{width:12.5%}.ui.small.step,.ui.small.steps .step{font-size:.8rem}.ui.step,.ui.steps .step{font-size:1rem}.ui.large.step,.ui.large.steps .step{font-size:1.25rem}

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

18
build/uncompressed/elements/step.css
View File

@ -18,6 +18,11 @@
position: relative;
padding: 1em 2em 1em 3em;
background-color: #FFFFFF;
-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;
color: #888888;
}
.ui.step:after,
@ -26,7 +31,7 @@
z-index: 2;
content: '';
top: 0em;
right: -1.5em;
right: -1.48em;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #FFFFFF;
border-top: 1.5em solid transparent;
@ -81,36 +86,47 @@
.ui.step:hover,
.ui.step.hover {
background-color: #F7F7F7;
color: rgba(0, 0, 0, 0.8);
}
.ui.steps .step.hover:after,
.ui.steps .step:hover:after,
.ui.step:hover,
.ui.step.hover::after {
border-left-color: #F7F7F7;
}
/* Hover */
.ui.steps .step.down,
.ui.steps .step:active,
.ui.step.down,
.ui.step:active {
background-color: #F0F0F0;
}
.ui.steps .step.down:after,
.ui.steps .step:active:after,
.ui.steps.down::after,
.ui.steps:active::after {
border-left-color: #F0F0F0;
}
/* Active */
.ui.steps .step.active,
.ui.active.step {
cursor: auto;
background-color: #555555;
color: #FFFFFF;
font-weight: bold;
}
.ui.steps .step.active:after,
.ui.active.step:after {
border-left-color: #555555;
}
/* Disabled */
.ui.steps .disabled.step,
.ui.disabled.step {
cursor: auto;
background-color: #FFFFFF;
color: #CBCBCB;
}
.ui.steps .disabled.step:after,
.ui.disabled.step:after {
border-left-color: #FFFFFF;
}

18
node/src/files/components/semantic/elements/step.css
View File

@ -18,6 +18,11 @@
position: relative;
padding: 1em 2em 1em 3em;
background-color: #FFFFFF;
-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;
color: #888888;
}
.ui.step:after,
@ -26,7 +31,7 @@
z-index: 2;
content: '';
top: 0em;
right: -1.5em;
right: -1.48em;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #FFFFFF;
border-top: 1.5em solid transparent;
@ -81,36 +86,47 @@
.ui.step:hover,
.ui.step.hover {
background-color: #F7F7F7;
color: rgba(0, 0, 0, 0.8);
}
.ui.steps .step.hover:after,
.ui.steps .step:hover:after,
.ui.step:hover,
.ui.step.hover::after {
border-left-color: #F7F7F7;
}
/* Hover */
.ui.steps .step.down,
.ui.steps .step:active,
.ui.step.down,
.ui.step:active {
background-color: #F0F0F0;
}
.ui.steps .step.down:after,
.ui.steps .step:active:after,
.ui.steps.down::after,
.ui.steps:active::after {
border-left-color: #F0F0F0;
}
/* Active */
.ui.steps .step.active,
.ui.active.step {
cursor: auto;
background-color: #555555;
color: #FFFFFF;
font-weight: bold;
}
.ui.steps .step.active:after,
.ui.active.step:after {
border-left-color: #555555;
}
/* Disabled */
.ui.steps .disabled.step,
.ui.disabled.step {
cursor: auto;
background-color: #FFFFFF;
color: #CBCBCB;
}
.ui.steps .disabled.step:after,
.ui.disabled.step:after {
border-left-color: #FFFFFF;
}

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

@ -376,6 +376,9 @@ a:hover {
#example .solid .column {
color: #555555;
}
#example .solid .column p b {
color: rgba(0, 0, 0, 0.9);
}
#example .solid .column p {
color: rgba(0, 0, 0, 0.5);
}

44
src/elements/step.less
View File

@ -22,6 +22,37 @@
background-color: #FFFFFF;
-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
;
color: #888888;
}
.ui.step:after,
@ -30,7 +61,7 @@
z-index: 2;
content: '';
top: 0em;
right: -1.5em;
right: -1.48em;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #FFFFFF;
@ -98,23 +129,31 @@
.ui.step:hover,
.ui.step.hover {
background-color: #F7F7F7;
color: rgba(0, 0, 0, 0.8);
}
.ui.steps .step.hover:after,
.ui.steps .step:hover:after,
.ui.step:hover,
.ui.step.hover::after {
border-left-color: #F7F7F7;
}
/* Hover */
.ui.steps .step.down,
.ui.steps .step:active,
.ui.step.down,
.ui.step:active {
background-color: #F0F0F0;
}
.ui.steps .step.down:after,
.ui.steps .step:active:after,
.ui.steps.down::after,
.ui.steps:active::after {
border-left-color: #F0F0F0;
}
/* Active */
.ui.steps .step.active,
.ui.active.step {
cursor: auto;
background-color: #555555;
@ -122,16 +161,19 @@
color: #FFFFFF;
font-weight: bold;
}
.ui.steps .step.active:after,
.ui.active.step:after {
border-left-color: #555555;
}
/* Disabled */
.ui.steps .disabled.step,
.ui.disabled.step {
cursor: auto;
background-color: #FFFFFF;
color: #CBCBCB;
}
.ui.steps .disabled.step:after,
.ui.disabled.step:after {
border-left-color: #FFFFFF;
}

Write Preview
Loading…
Cancel
Save