Browse Source
Former-commit-id: 286a834148b1327bc1cd70f0426d1089a03ab151 Former-commit-id: 574130e428c3bb12ac4f2b67c397f5cacf23f658beta
Jack Lukic
11 years ago
81 changed files with 719 additions and 852 deletions
@ -1 +1 @@ |
|||
.ui.breadcrumb{display:inline-block;vertical-align:middle}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .15em;font-size:1em;color:rgba(0,0,0,.3)}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;background-color:#EBEBEB;padding:.5em 1em} |
|||
.ui.breadcrumb{display:inline-block;vertical-align:middle}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .15em;font-size:1em;color:rgba(0,0,0,.3)}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;background-color:#FFF;padding:.5em 1em} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
.ui.input{display:inline-block;position:relative}.ui.input input{width:100%;font-family:"Helvetica Neue",Helvetica,Arial;margin:0;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:rgba(0,0,0,.7);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input::-web inputkit-input-placeholder{color:#E0E0E0}.ui.input::-moz input-placeholder{color:#E0E0E0}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background-color:#FAFAFA}.ui.input.focus input,.ui.input input:focus{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.85)}.ui.input.focus input input::-webkit-input-placeholder,.ui.input input:focus input::-webkit-input-placeholder{color:#AAA}.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder{color:#AAA}.ui.input.error input{background-color:#FFFAFA;border-color:#E7BEBE;color:#EF4D6D}.ui.input.error input ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.input.error input :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.transparent.input input{border:0;background-color:transparent}.ui.icon.input>.icon{position:absolute;opacity:.5;top:1px;right:1px;margin:0;width:2.5em;height:2.5em;padding-top:.75em;text-align:center;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.ui.icon.input input{padding-right:3em!important}.ui.left.icon.input .icon{right:auto;left:1px}.ui.left.icon.input input{padding-left:3em!important}.ui.icon.input input:focus~.icon{opacity:1}.ui.labeled.input .corner.label{top:1px;right:1px;font-size:.7em;-webkit-border-top-right-radius:.3125em;-moz-border-top-right-radius:.3125em;border-top-right-radius:.3125em}.ui.labeled.input input{padding-right:2.5em!important}.ui.action.input .button{position:absolute;top:0;left:100%;opacity:.9;margin:0 0 0 -1px;line-height:1.26;padding:.9em 1.3em!important;border-top-left-radius:0;border-bottom-left-radius: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;font-size:.85em;white-space:nowrap}.ui.action.input input{border-top-right-radius:0;border-bottom-right-radius:0}.ui.action.input input:focus~.button{opacity:1;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset} |
|||
.ui.input{display:inline-block;position:relative}.ui.input input{width:100%;font-family:"Helvetica Neue",Helvetica,Arial;margin:0;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:rgba(0,0,0,.7);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input::-web inputkit-input-placeholder{color:#E0E0E0}.ui.input::-moz input-placeholder{color:#E0E0E0}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background-color:#FAFAFA}.ui.input.focus input,.ui.input input:focus{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.85)}.ui.input.focus input input::-webkit-input-placeholder,.ui.input input:focus input::-webkit-input-placeholder{color:#AAA}.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder{color:#AAA}.ui.input.error input{background-color:#FFFAFA;border-color:#E7BEBE;color:#EF4D6D}.ui.input.error input ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.input.error input :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.transparent.input input{border:0;background-color:transparent}.ui.icon.input>.icon{position:absolute;opacity:.5;top:1px;right:1px;margin:0;width:2.5em;height:2.5em;padding-top:.75em;text-align:center;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.ui.icon.input input{padding-right:3em!important}.ui.left.icon.input .icon{right:auto;left:1px}.ui.left.icon.input input{padding-left:3em!important}.ui.icon.input input:focus~.icon{opacity:1}.ui.labeled.input .corner.label{top:1px;right:1px;font-size:.7em;-webkit-border-top-right-radius:.3125em;-moz-border-top-right-radius:.3125em;border-top-right-radius:.3125em}.ui.labeled.input input{padding-right:2.5em!important}.ui.action.input{display:table}.ui.action.input input{display:table-cell;border-top-right-radius:0;border-bottom-right-radius:0}.ui.action.input .button{display:table-cell;opacity:.9;margin:0 0 0 -1px;line-height:1.26;padding-top:.9em!important;padding-bottom:.9em!important;border-top-left-radius:0;border-bottom-left-radius: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;font-size:.85em;white-space:nowrap}.ui.action.input .labeled.icon.button .icon{padding-top:.9em!important}.ui.action.input input:focus~.button{opacity:1;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset} |
|||
@ -1 +1 @@ |
|||
.ui.loader{display:none;position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px;z-index:1000}.ui.dimmer .loader{display:block}.ui.loader.text{width:auto!important;height:auto!important;text-align:center;font-style:normal;margin-top:-28px;min-width:32px;padding-top:40px;font-size:14px}.ui.loader.text.mini{margin-top:-16px;min-width:16px;padding-top:20px;font-size:11px}.ui.loader.text.small{margin-top:-23px;min-width:24px;padding-top:32px;font-size:13px}.ui.loader.text.large{margin-top:-46px;min-width:64px;padding-top:80px;font-size:16px}.ui.loader.active,.ui.loader.visible{display:block}.ui.loader.disabled,.ui.loader.hidden{display:none}.ui.dimmer .ui.text.loader,.ui.inverted.text.loader{color:rgba(0,0,0,.8)}.ui.dimmer .mini.ui.loader,.ui.inverted .mini.ui.loader{background-image:url(../images/loader-mini-inverted.gif)}.ui.dimmer .small.ui.loader,.ui.inverted .small.ui.loader{background-image:url(../images/loader-small-inverted.gif)}.ui.dimmer .ui.loader,.ui.inverted.loader{background-image:url(../images/loader-medium-inverted.gif)}.ui.dimmer .large.ui.loader,.ui.inverted .large.ui.loader{background-image:url(../images/loader-large-inverted.gif)}.ui.inverted.dimmer .ui.loader.mini,.ui.loader.mini{width:16px;height:16px;background-image:url(../images/loader-mini.gif);margin:-8px 0 0 -8px}.ui.inverted.dimmer .ui.loader.small,.ui.loader.small{width:24px;height:24px;background-image:url(../images/loader-small.gif);margin:-12px 0 0 -12px}.ui.inverted.dimmer .ui.loader,.ui.loader{width:32px;height:32px;background:url(../images/loader-medium.gif) no-repeat;background-position:48% 0}.ui.inverted.dimmer .ui.loader.large,.ui.loader.large{width:64px;height:64px;background-image:url(../images/loader-large.gif);margin:-32px 0 0 -32px}.ui.inline.loader{position:static;vertical-align:middle;margin:0}.ui.inline.loader.active,.ui.inline.loader.visible{display:inline-block} |
|||
.ui.loader{display:none;position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px;z-index:1000}.ui.dimmer .loader{display:block}.ui.loader.text{width:auto!important;height:auto!important;text-align:center;font-style:normal;margin-top:-28px;min-width:32px;padding-top:40px;font-size:.875em}.ui.loader.text.mini{margin-top:-16px;min-width:16px;padding-top:20px;font-size:.875em}.ui.loader.text.small{margin-top:-23px;min-width:24px;padding-top:32px;font-size:.875em}.ui.loader.text.large{margin-top:-46px;min-width:64px;padding-top:80px;font-size:1em}.ui.loader.active,.ui.loader.visible{display:block}.ui.loader.disabled,.ui.loader.hidden{display:none}.ui.dimmer .ui.text.loader,.ui.inverted.text.loader{color:rgba(255,255,255,.8)}.ui.inverted.dimmer .ui.text.loader{color:rgba(0,0,0,.8)}.ui.dimmer .mini.ui.loader,.ui.inverted .mini.ui.loader{background-image:url(../images/loader-mini-inverted.gif)}.ui.dimmer .small.ui.loader,.ui.inverted .small.ui.loader{background-image:url(../images/loader-small-inverted.gif)}.ui.dimmer .ui.loader,.ui.inverted.loader{background-image:url(../images/loader-medium-inverted.gif)}.ui.dimmer .large.ui.loader,.ui.inverted .large.ui.loader{background-image:url(../images/loader-large-inverted.gif)}.ui.inverted.dimmer .ui.loader.mini,.ui.loader.mini{width:16px;height:16px;background-image:url(../images/loader-mini.gif);margin:-8px 0 0 -8px}.ui.inverted.dimmer .ui.loader.small,.ui.loader.small{width:24px;height:24px;background-image:url(../images/loader-small.gif);margin:-12px 0 0 -12px}.ui.inverted.dimmer .ui.loader,.ui.loader{width:32px;height:32px;background:url(../images/loader-medium.gif) no-repeat;background-position:48% 0}.ui.inverted.dimmer .ui.loader.large,.ui.loader.large{width:64px;height:64px;background-image:url(../images/loader-large.gif);margin:-32px 0 0 -32px}.ui.inline.loader{position:static;vertical-align:middle;margin:0}.ui.inline.loader.active,.ui.inline.loader.visible{display:inline-block} |
|||
@ -1 +1 @@ |
|||
.ui.progress{border:1px solid rgba(0,0,0,.1);width:100%;height:35px;background-color:#FAFAFA;padding:5px;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.progress .bar{display:inline-block;height:100%;background-color:#CCC;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-transition:width 1s ease-in-out,background-color 1s ease-out;-moz-transition:width 1s ease-in-out,background-color 1s ease-out;-ms-transition:width 1s ease-in-out,background-color 1s ease-out;-o-transition:width 1s ease-in-out,background-color 1s ease-out;transition:width 1s ease-in-out,background-color 1s ease-out}.ui.successful.progress .bar{background-color:#73E064!important}.ui.successful.progress .bar,.ui.successful.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.failed.progress .bar{background-color:#DF9BA4!important}.ui.failed.progress .bar,.ui.failed.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.active.progress .bar{position:relative}.ui.active.progress .bar::after{content:'';opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#FFF;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-animation:progress-active 2s ease-out infinite;-moz-animation:progress-active 2s ease-out infinite;animation:progress-active 2s ease-out infinite}@-webkit-keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:95%}}@-moz-keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}@keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}.ui.disabled.progress{opacity:.35}.ui.disabled.progress .bar,.ui.disabled.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.progress.attached{position:relative;top:-2px;border:0}.ui.progress.attached,.ui.progress.attached .bar{display:block;height:4px;padding:0;overflow:hidden;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.progress.attached .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.progress.top.attached,.ui.progress.top.attached .bar{-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.progress.top.attached .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.blue.progress .bar{background-color:#6ECFF5}.ui.black.progress .bar{background-color:#5C6166}.ui.green.progress .bar{background-color:#A1CF64}.ui.red.progress .bar{background-color:#EF4D6D}.ui.purple.progress .bar{background-color:#564F8A}.ui.teal.progress .bar{background-color:#00B5AD}.ui.progress.striped .bar{-webkit-background-size:30px 30px;-moz-background-size:30px 30px;background-size:30px 30px;background-image:-webkit-gradient(linear,left top,right bottom,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.ui.progress.active.striped .bar:after{-webkit-animation:none;-moz-animation:none;-ms-animation:none;-o-animation:none;animation:none}.ui.progress.active.striped .bar{-webkit-animation:progress-striped 3s linear infinite;-moz-animation:progress-striped 3s linear infinite;animation:progress-striped 3s linear infinite}@-webkit-keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}@-moz-keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}@keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}.ui.small.progress .bar{height:14px} |
|||
.ui.progress{border:1px solid rgba(0,0,0,.1);width:100%;height:35px;background-color:#FAFAFA;padding:5px;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.progress .bar{display:inline-block;height:100%;background-color:#CCC;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-transition:width 1s ease-in-out,background-color 1s ease-out;-moz-transition:width 1s ease-in-out,background-color 1s ease-out;-ms-transition:width 1s ease-in-out,background-color 1s ease-out;-o-transition:width 1s ease-in-out,background-color 1s ease-out;transition:width 1s ease-in-out,background-color 1s ease-out}.ui.successful.progress .bar{background-color:#73E064!important}.ui.successful.progress .bar,.ui.successful.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.failed.progress .bar{background-color:#DF9BA4!important}.ui.failed.progress .bar,.ui.failed.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.active.progress .bar{position:relative}.ui.active.progress .bar::after{content:'';opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#FFF;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-animation:progress-active 2s ease-out infinite;-moz-animation:progress-active 2s ease-out infinite;animation:progress-active 2s ease-out infinite}@-webkit-keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:95%}}@-moz-keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}@keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}.ui.disabled.progress{opacity:.35}.ui.disabled.progress .bar,.ui.disabled.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.progress.attached{position:relative;border:0}.ui.progress.attached,.ui.progress.attached .bar{display:block;height:3px;padding:0;overflow:hidden;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.progress.attached .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.progress.top.attached,.ui.progress.top.attached .bar{top:-2px;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.progress.top.attached .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.blue.progress .bar{background-color:#6ECFF5}.ui.black.progress .bar{background-color:#5C6166}.ui.green.progress .bar{background-color:#A1CF64}.ui.red.progress .bar{background-color:#EF4D6D}.ui.purple.progress .bar{background-color:#564F8A}.ui.teal.progress .bar{background-color:#00B5AD}.ui.progress.striped .bar{-webkit-background-size:30px 30px;-moz-background-size:30px 30px;background-size:30px 30px;background-image:-webkit-gradient(linear,left top,right bottom,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.ui.progress.active.striped .bar:after{-webkit-animation:none;-moz-animation:none;-ms-animation:none;-o-animation:none;animation:none}.ui.progress.active.striped .bar{-webkit-animation:progress-striped 3s linear infinite;-moz-animation:progress-striped 3s linear infinite;animation:progress-striped 3s linear infinite}@-webkit-keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}@-moz-keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}@keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}.ui.small.progress .bar{height:14px} |
|||
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
.ui.dimmable{position:relative}.ui.dimmer{position:absolute;top:0!important;left:0!important;text-align:center;vertical-align:middle;background-color:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-transition:background-color .5s linear;-moz-transition:background-color .5s linear;-o-transition:background-color .5s linear;-ms-transition:background-color .5s linear;transition:background-color .5s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:1000}.ui.dimmable.dimmed>:not(.dimmer){}.ui.dimmer .content{width:100%;height:100%;display:table;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.dimmer .content>*{display:table-cell;vertical-align:middle}.ui.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.horizontal.segment>.ui.dimmer,.ui.vertical.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(5px) grayscale(0.7);-moz-filter:blur(5px) grayscale(0.7)}body.dimmable.dimmed{overflow:hidden}.ui.dimmable.dimmed>.ui.dimmer,.ui.dimmer.active{width:100%;height:100%;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.ui.page.dimmer{position:fixed}body.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(15px) grayscale(0.7);-moz-filter:blur(15px) grayscale(0.7)}.ui.dimmer .top.aligned.content>*{vertical-align:top}.ui.dimmer .bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;z-index:-100;background-color:rgba(0,0,0,0)}.ui.dimmable.dimmed>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85)}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.ui.dimmable.dimmed>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.dimmer.show{width:100%;height:100%;-webkit-animation:dimmer-show .5s;-moz-animation:dimmer-show .5s;animation:dimmer-show .5s}@-webkit-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@-moz-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}.ui.dimmer.hide{-webkit-animation:dimmer-hide .5s;-moz-animation:dimmer-hide .5s;animation:dimmer-hide .5s}@-webkit-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@-moz-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}} |
|||
.ui.dimmable{position:relative}.ui.dimmer{position:absolute;top:0!important;left:0!important;text-align:center;vertical-align:middle;background-color:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-transition:background-color .5s linear;-moz-transition:background-color .5s linear;-o-transition:background-color .5s linear;-ms-transition:background-color .5s linear;transition:background-color .5s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:1000}.ui.dimmable.dimmed>:not(.dimmer){}.ui.dimmer .content{width:100%;height:100%;display:table;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.dimmer .content>*{display:table-cell;vertical-align:middle}.ui.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.horizontal.segment>.ui.dimmer,.ui.vertical.segment>.ui.dimmer{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(5px) grayscale(0.7);-moz-filter:blur(5px) grayscale(0.7)}body.dimmable.dimmed{overflow:hidden}.ui.dimmable.dimmed>.ui.dimmer,.ui.dimmer.active{width:100%;height:100%;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.ui.page.dimmer{position:fixed}body.ui.dimmable.dimmed>:not(.dimmer){-webkit-filter:blur(15px) grayscale(0.7);-moz-filter:blur(15px) grayscale(0.7)}.ui.dimmer .top.aligned.content>*{vertical-align:top}.ui.dimmer .bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;z-index:-100;background-color:rgba(0,0,0,0)}.ui.dimmable.dimmed>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.ui.dimmable.dimmed>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.dimmer.show{width:100%;height:100%;-webkit-animation:dimmer-show .5s;-moz-animation:dimmer-show .5s;animation:dimmer-show .5s}@-webkit-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@-moz-keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}@keyframes dimmer-show{0%{opacity:0}100%{opacity:1}}.ui.dimmer.hide{-webkit-animation:dimmer-hide .5s;-moz-animation:dimmer-hide .5s;animation:dimmer-hide .5s}@-webkit-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@-moz-keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}}@keyframes dimmer-hide{0%{opacity:1}99%{width:100%;height:100%;opacity:0}100%{opacity:0;height:0;width:0}} |
|||
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
12d53d00cb17fc7be2f79444f9345f78b668e56d |
|||
7ed8602481cf41364ed6f3413e86d8c51e4afd3c |
|||
@ -1 +1 @@ |
|||
1cdc4a54a600f3b04f0ef33b4bb27e58ce3f43d5 |
|||
0beda859d6b42086e2fb83e621b3f22181a8a7a5 |
|||
@ -1,52 +0,0 @@ |
|||
{ |
|||
"predef": [ |
|||
"console", |
|||
"Ember", |
|||
"DS", |
|||
"Handlebars", |
|||
"Metamorph", |
|||
"ember_assert", |
|||
"ember_warn", |
|||
"ember_deprecate", |
|||
"ember_deprecateFunc", |
|||
"require", |
|||
"suite", |
|||
"equal", |
|||
"equals", |
|||
"test", |
|||
"testBoth", |
|||
"raises", |
|||
"deepEqual", |
|||
"start", |
|||
"stop", |
|||
"ok", |
|||
"strictEqual", |
|||
"module" |
|||
], |
|||
|
|||
"node" : true, |
|||
"es5" : true, |
|||
"browser" : true, |
|||
|
|||
"boss" : true, |
|||
"curly": false, |
|||
"debug": false, |
|||
"devel": false, |
|||
"eqeqeq": true, |
|||
"evil": true, |
|||
"forin": false, |
|||
"immed": false, |
|||
"laxbreak": false, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"noempty": false, |
|||
"nonew": false, |
|||
"nomen": false, |
|||
"onevar": false, |
|||
"plusplus": false, |
|||
"regexp": false, |
|||
"undef": true, |
|||
"sub": true, |
|||
"strict": false, |
|||
"white": false |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,62 +0,0 @@ |
|||
{ |
|||
"predef": [ |
|||
"console", |
|||
"describe", |
|||
"it", |
|||
"after", |
|||
"afterEach", |
|||
"before", |
|||
"beforeEach" |
|||
], |
|||
|
|||
"indent": 2, |
|||
"node": true, |
|||
"devel": true, |
|||
|
|||
"bitwise": false, |
|||
"curly": false, |
|||
"eqeqeq": true, |
|||
"forin": false, |
|||
"immed": true, |
|||
"latedef": false, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"noempty": false, |
|||
"nonew": true, |
|||
"plusplus": true, |
|||
"regexp": false, |
|||
"undef": true, |
|||
"unused": true, |
|||
"quotmark": "single", |
|||
"strict": false, |
|||
"trailing": true, |
|||
|
|||
"asi": false, |
|||
"boss": false, |
|||
"debug": false, |
|||
"eqnull": true, |
|||
"es5": false, |
|||
"esnext": false, |
|||
"evil": false, |
|||
"expr": false, |
|||
"funcscope": false, |
|||
"globalstrict": false, |
|||
"iterator": false, |
|||
"lastsemic": false, |
|||
"laxbreak": true, |
|||
"laxcomma": false, |
|||
"loopfunc": true, |
|||
"multistr": false, |
|||
"onecase": true, |
|||
"regexdash": false, |
|||
"scripturl": false, |
|||
"smarttabs": false, |
|||
"shadow": false, |
|||
"sub": false, |
|||
"supernew": true, |
|||
"validthis": false, |
|||
|
|||
"nomen": false, |
|||
"onevar": false, |
|||
"white": true |
|||
} |
|||
@ -1,63 +0,0 @@ |
|||
{ |
|||
"predef": [ |
|||
"console", |
|||
"require", |
|||
"define", |
|||
"describe", |
|||
"it", |
|||
"before", |
|||
"beforEach", |
|||
"after", |
|||
"afterEach" |
|||
], |
|||
|
|||
"node": true, |
|||
"devel": true, |
|||
|
|||
"bitwise": true, |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"forin": false, |
|||
"immed": true, |
|||
"latedef": false, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"noempty": false, |
|||
"nonew": true, |
|||
"plusplus": false, |
|||
"regexp": true, |
|||
"undef": true, |
|||
"unused": true, |
|||
"quotmark": "single", |
|||
"strict": true, |
|||
"trailing": true, |
|||
|
|||
"asi": false, |
|||
"boss": false, |
|||
"debug": false, |
|||
"eqnull": true, |
|||
"es5": false, |
|||
"esnext": false, |
|||
"evil": false, |
|||
"expr": false, |
|||
"funcscope": false, |
|||
"globalstrict": false, |
|||
"iterator": false, |
|||
"lastsemic": false, |
|||
"laxbreak": false, |
|||
"laxcomma": false, |
|||
"loopfunc": true, |
|||
"multistr": false, |
|||
"onecase": true, |
|||
"regexdash": false, |
|||
"scripturl": false, |
|||
"smarttabs": false, |
|||
"shadow": false, |
|||
"sub": false, |
|||
"supernew": false, |
|||
"validthis": false, |
|||
|
|||
"nomen": false, |
|||
"onevar": false, |
|||
"white": true |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
{ |
|||
"asi": false |
|||
} |
|||
@ -1,58 +0,0 @@ |
|||
{ |
|||
"predef": [ |
|||
"console", |
|||
"module", |
|||
"define", |
|||
"self" |
|||
], |
|||
|
|||
"browser": true, |
|||
"devel": true, |
|||
|
|||
"bitwise": false, |
|||
"curly": false, |
|||
"eqeqeq": false, |
|||
"forin": false, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"noempty": false, |
|||
"nonew": true, |
|||
"plusplus": false, |
|||
"regexp": false, |
|||
"undef": true, |
|||
"strict": false, |
|||
"trailing": true, |
|||
|
|||
"asi": false, |
|||
"boss": false, |
|||
"debug": false, |
|||
"eqnull": true, |
|||
"es5": false, |
|||
"esnext": false, |
|||
"evil": false, |
|||
"expr": false, |
|||
"funcscope": false, |
|||
"globalstrict": false, |
|||
"iterator": false, |
|||
"lastsemic": false, |
|||
"laxbreak": false, |
|||
"laxcomma": false, |
|||
"loopfunc": false, |
|||
"multistr": false, |
|||
"onecase": true, |
|||
"regexdash": false, |
|||
"scripturl": false, |
|||
"smarttabs": false, |
|||
"shadow": false, |
|||
"sub": false, |
|||
"supernew": false, |
|||
"validthis": false, |
|||
|
|||
"nomen": false, |
|||
"onevar": false, |
|||
"white": true, |
|||
|
|||
"mootools": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -1,17 +0,0 @@ |
|||
{ |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"trailing": true, |
|||
"globals": { |
|||
"exports": true |
|||
} |
|||
} |
|||
@ -1,16 +0,0 @@ |
|||
{ |
|||
"node" : true, |
|||
"es5" : true, |
|||
"browser" : false, |
|||
|
|||
"camelcase": true, |
|||
"curly": false, |
|||
"eqeqeq": false, |
|||
"latedef": true, |
|||
"noarg": true, |
|||
"plusplus": false, |
|||
"regexp": false, |
|||
"strict": false, |
|||
"trailing": true, |
|||
"unused": true |
|||
} |
|||
@ -1,16 +0,0 @@ |
|||
{ |
|||
"loopfunc": true, |
|||
"curly": true, |
|||
"eqeqeq": true, |
|||
"immed": true, |
|||
"latedef": true, |
|||
"newcap": true, |
|||
"noarg": true, |
|||
"sub": true, |
|||
"undef": true, |
|||
"unused": true, |
|||
"boss": true, |
|||
"eqnull": true, |
|||
"node": true, |
|||
"es5": true |
|||
} |
|||
@ -0,0 +1,191 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'Language' |
|||
type : 'UI Guide' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">UI Language</h1> |
|||
<div class="ui large red message"> |
|||
This is a starting draft, check back later. |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Language</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Language</h2> |
|||
|
|||
<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="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> |
|||
<div class="code" data-type="css"> |
|||
/* hmm */ |
|||
.ginormous.ui.thingy { |
|||
font-size: 1.5em; |
|||
} |
|||
/* better */ |
|||
.large.ui.thingy { |
|||
font-size: 1.5em; |
|||
} |
|||
</div> |
|||
|
|||
<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"> |
|||
.attached.ui.thingy { |
|||
position: relative; |
|||
} |
|||
.left.attached.ui.thingy { |
|||
left: 0px; |
|||
top: 50%; |
|||
margin-top: -0.5em; |
|||
} |
|||
.right.attached.ui.thingy { |
|||
right: 0px; |
|||
top: 50%; |
|||
margin-top: -0.5em |
|||
} |
|||
</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> |
|||
|
|||
<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> |
|||
<p>Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags</p> |
|||
<div class="code" data-type="css"> |
|||
|
|||
/* hey how do you know this is the third heading? */ |
|||
/* and what about all the other possible sizes? */ |
|||
.ui.thingy h3 { |
|||
|
|||
} |
|||
|
|||
/* yay the developer can choose what type of heading tag to use */ |
|||
.ui.thingy .header { |
|||
|
|||
} |
|||
|
|||
/* wow this guy is going to have to do a lot of typing... */ |
|||
.ui.table .cell { |
|||
|
|||
} |
|||
/* this seems like a reasonable assumption, html is a bit strict about these things */ |
|||
.ui.table td { |
|||
|
|||
} |
|||
</div> |
|||
|
|||
<div class="code" data-type="css"> |
|||
|
|||
/* wow this guy is going to have to do a lot of typing... */ |
|||
.ui.table .cell { |
|||
|
|||
} |
|||
/* this seems like a reasonable assumption, html is a bit strict about these things */ |
|||
.ui.table td { |
|||
|
|||
} |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Writing Variations</h2> |
|||
|
|||
<h4 class="ui header">Same but not the same</h4> |
|||
<p>Multiple elements may contain similar variations that function slightly different.</p> |
|||
<p>For example it may be useful for various elements to float left or right. At first it may seem most useful to write a helper class that floats all UI element types when given a certain class name, but the way which an element may be floated might vary depending on the type of element.</p> |
|||
<div class="code" data-type="css"> |
|||
/* |
|||
this element will default to floating left if any float is specified |
|||
it will receive margins on its float relative to its size |
|||
*/ |
|||
.ui.floated.widget, |
|||
.ui.left.floated.widget { |
|||
float: left; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.right.floated.widget { |
|||
float: right; |
|||
margin-left: 1em; |
|||
} |
|||
/* this will not receive margins when floated and will default to floating right */ |
|||
.ui.floated.thingy, |
|||
.ui.right.floated.thingy { |
|||
float: right; |
|||
} |
|||
.ui.right.floated.thingy { |
|||
float: left; |
|||
} |
|||
</div> |
|||
|
|||
<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> |
|||
<div class="code" data-type="css"> |
|||
.ui.thingy { |
|||
background-color: #FFFFFF; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.inverted.thingy { |
|||
background-color: #222222; |
|||
color: rgba(255, 255, 255, 0.7); |
|||
} |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -1,165 +0,0 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'Language' |
|||
type : 'UI Specification' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">Style Guide</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<h2>UI Language</h2> |
|||
|
|||
<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="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">Margins</h4> |
|||
<p>Adding default margins to your content allow for it to have vertical rhythm in a page, but be careful about forcing margin in all circumstances. Here's a useful way to make sure content inside container elements doesn't receieve unnecessary padding.</p> |
|||
<div class="code" data-type="css"> |
|||
.ui.thingy { |
|||
margin: 1em 0em; |
|||
} |
|||
.ui.thingy:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.thingy:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
</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> |
|||
<div class="code" data-type="css"> |
|||
// hmm |
|||
.ginormous.ui.thingy { |
|||
font-size: 1.5em; |
|||
} |
|||
// better |
|||
.large.ui.thingy { |
|||
font-size: 1.5em; |
|||
} |
|||
</div> |
|||
|
|||
<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"> |
|||
.attached.ui.thingy { |
|||
position: relative; |
|||
} |
|||
.left.attached.ui.thingy { |
|||
left: 0px; |
|||
top: 50%; |
|||
margin-top: -0.5em; |
|||
} |
|||
.right.attached.ui.thingy { |
|||
right: 0px; |
|||
top: 50%; |
|||
margin-top: -0.5em |
|||
} |
|||
</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> |
|||
|
|||
<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> |
|||
<p>Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags</p> |
|||
<div class="code" data-type="css"> |
|||
|
|||
// hey how do you know this is the third heading? |
|||
// and what about all the other possible sizes? |
|||
.ui.thingy h3 { |
|||
|
|||
} |
|||
|
|||
// yay the developer can choose what type of heading tag to use |
|||
.ui.thingy .header { |
|||
|
|||
} |
|||
|
|||
// wow this guy is going to have to do a lot of typing... |
|||
.ui.table .cell { |
|||
|
|||
} |
|||
// this seems like a reasonable assumption, html is a bit strict about these things |
|||
.ui.table td { |
|||
|
|||
} |
|||
</div> |
|||
|
|||
<div class="code" data-type="css"> |
|||
|
|||
// wow this guy is going to have to do a lot of typing... |
|||
.ui.table .cell { |
|||
|
|||
} |
|||
// this seems like a reasonable assumption, html is a bit strict about these things |
|||
.ui.table td { |
|||
|
|||
} |
|||
</div> |
|||
<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> |
|||
<div class="code" data-type="css"> |
|||
.ui.thingy { |
|||
background-color: #FFFFFF; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.inverted.thingy { |
|||
background-color: #222222; |
|||
color: rgba(255, 255, 255, 0.7); |
|||
} |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
Loading…
Reference in new issue