http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6b90be61/semantic/dist/components/card.css ---------------------------------------------------------------------- diff --git a/semantic/dist/components/card.css b/semantic/dist/components/card.css new file mode 100755 index 0000000..ead6742 --- /dev/null +++ b/semantic/dist/components/card.css @@ -0,0 +1,964 @@ +/*! + * # Semantic UI 2.2.6 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------- + Card +---------------*/ + +.ui.cards > .card, +.ui.card { + max-width: 100%; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 290px; + min-height: 0px; + background: #EBEBEB; + padding: 0em; + border: none; + border-radius: 0.28571429rem; + box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; + -webkit-transition: box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: box-shadow 0.1s ease, transform 0.1s ease; + transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-transform 0.1s ease; + z-index: ''; +} +.ui.card { + margin: 1em 0em; +} +.ui.cards > .card a, +.ui.card a { + cursor: pointer; +} +.ui.card:first-child { + margin-top: 0em; +} +.ui.card:last-child { + margin-bottom: 0em; +} + +/*-------------- + Cards +---------------*/ + +.ui.cards { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: -0.875em -0.5em; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.ui.cards > .card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0.875em 0.5em; + float: none; +} + +/* Clearing */ +.ui.cards:after, +.ui.card:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + +/* Consecutive Card Groups Preserve Row Spacing */ +.ui.cards ~ .ui.cards { + margin-top: 0.875em; +} + +/*-------------- + Rounded Edges +---------------*/ + +.ui.cards > .card > :first-child, +.ui.card > :first-child { + border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; + border-top: none !important; +} +.ui.cards > .card > :last-child, +.ui.card > :last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; +} +.ui.cards > .card > :only-child, +.ui.card > :only-child { + border-radius: 0.28571429rem !important; +} + +/*-------------- + Images +---------------*/ + +.ui.cards > .card > .image, +.ui.card > .image { + position: relative; + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0em; + background: rgba(0, 0, 0, 0.05); +} +.ui.cards > .card > .image > img, +.ui.card > .image > img { + display: block; + width: 100%; + height: auto; + border-radius: inherit; +} +.ui.cards > .card > .image:not(.ui) > img, +.ui.card > .image:not(.ui) > img { + border: none; +} + +/*-------------- + Content +---------------*/ + +.ui.cards > .card > .content, +.ui.card > .content { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border: none; + border-top: 1px solid rgba(34, 36, 38, 0.1); + background: none; + margin: 0em; + padding: 1em 1em; + box-shadow: none; + font-size: 1em; + border-radius: 0em; +} +.ui.cards > .card > .content:after, +.ui.card > .content:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +.ui.cards > .card > .content > .header, +.ui.card > .content > .header { + display: block; + margin: ''; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + color: rgba(0, 0, 0, 0.85); +} + +/* Default Header Size */ +.ui.cards > .card > .content > .header:not(.ui), +.ui.card > .content > .header:not(.ui) { + font-weight: bold; + font-size: 1.28571429em; + margin-top: -0.21425em; + line-height: 1.2857em; +} +.ui.cards > .card > .content > .meta + .description, +.ui.cards > .card > .content > .header + .description, +.ui.card > .content > .meta + .description, +.ui.card > .content > .header + .description { + margin-top: 0.5em; +} + +/*---------------- + Floated Content +-----------------*/ + +.ui.cards > .card [class*="left floated"], +.ui.card [class*="left floated"] { + float: left; +} +.ui.cards > .card [class*="right floated"], +.ui.card [class*="right floated"] { + float: right; +} + +/*-------------- + Aligned +---------------*/ + +.ui.cards > .card [class*="left aligned"], +.ui.card [class*="left aligned"] { + text-align: left; +} +.ui.cards > .card [class*="center aligned"], +.ui.card [class*="center aligned"] { + text-align: center; +} +.ui.cards > .card [class*="right aligned"], +.ui.card [class*="right aligned"] { + text-align: right; +} + +/*-------------- + Content Image +---------------*/ + +.ui.cards > .card .content img, +.ui.card .content img { + display: inline-block; + vertical-align: middle; + width: ''; +} +.ui.cards > .card img.avatar, +.ui.cards > .card .avatar img, +.ui.card img.avatar, +.ui.card .avatar img { + width: 2em; + height: 2em; + border-radius: 500rem; +} + +/*-------------- + Description +---------------*/ + +.ui.cards > .card > .content > .description, +.ui.card > .content > .description { + clear: both; + color: rgba(0, 0, 0, 0.68); +} + +/*-------------- + Paragraph +---------------*/ + +.ui.cards > .card > .content p, +.ui.card > .content p { + margin: 0em 0em 0.5em; +} +.ui.cards > .card > .content p:last-child, +.ui.card > .content p:last-child { + margin-bottom: 0em; +} + +/*-------------- + Meta +---------------*/ + +.ui.cards > .card .meta, +.ui.card .meta { + font-size: 1em; + color: rgba(0, 0, 0, 0.4); +} +.ui.cards > .card .meta *, +.ui.card .meta * { + margin-right: 0.3em; +} +.ui.cards > .card .meta :last-child, +.ui.card .meta :last-child { + margin-right: 0em; +} +.ui.cards > .card .meta [class*="right floated"], +.ui.card .meta [class*="right floated"] { + margin-right: 0em; + margin-left: 0.3em; +} + +/*-------------- + Links +---------------*/ + + +/* Generic */ +.ui.cards > .card > .content a:not(.ui), +.ui.card > .content a:not(.ui) { + color: ''; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .content a:not(.ui):hover, +.ui.card > .content a:not(.ui):hover { + color: ''; +} + +/* Header */ +.ui.cards > .card > .content > a.header, +.ui.card > .content > a.header { + color: rgba(0, 0, 0, 0.85); +} +.ui.cards > .card > .content > a.header:hover, +.ui.card > .content > a.header:hover { + color: #1e70bf; +} + +/* Meta */ +.ui.cards > .card .meta > a:not(.ui), +.ui.card .meta > a:not(.ui) { + color: rgba(0, 0, 0, 0.4); +} +.ui.cards > .card .meta > a:not(.ui):hover, +.ui.card .meta > a:not(.ui):hover { + color: #262626; +} + +/*-------------- + Buttons +---------------*/ + +.ui.cards > .card > .buttons, +.ui.card > .buttons, +.ui.cards > .card > .button, +.ui.card > .button { + margin: 0px -1px; + width: calc(100% + 2px ); +} + +/*-------------- + Dimmer +---------------*/ + +.ui.cards > .card .dimmer, +.ui.card .dimmer { + background-color: ''; + z-index: 10; +} + +/*-------------- + Labels +---------------*/ + + +/*-----Star----- */ + + +/* Icon */ +.ui.cards > .card > .content .star.icon, +.ui.card > .content .star.icon { + cursor: pointer; + opacity: 0.75; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .content .star.icon:hover, +.ui.card > .content .star.icon:hover { + opacity: 1; + color: #FFB70A; +} +.ui.cards > .card > .content .active.star.icon, +.ui.card > .content .active.star.icon { + color: #FFE623; +} + +/*-----Like----- */ + + +/* Icon */ +.ui.cards > .card > .content .like.icon, +.ui.card > .content .like.icon { + cursor: pointer; + opacity: 0.75; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .content .like.icon:hover, +.ui.card > .content .like.icon:hover { + opacity: 1; + color: #FF2733; +} +.ui.cards > .card > .content .active.like.icon, +.ui.card > .content .active.like.icon { + color: #FF2733; +} + +/*---------------- + Extra Content +-----------------*/ + +.ui.cards > .card > .extra, +.ui.card > .extra { + max-width: 100%; + min-height: 0em !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + border-top: 1px solid rgba(0, 0, 0, 0.05) !important; + position: static; + background: none; + width: auto; + margin: 0em 0em; + padding: 0.75em 1em; + top: 0em; + left: 0em; + color: rgba(0, 0, 0, 0.4); + box-shadow: none; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .extra a:not(.ui), +.ui.card > .extra a:not(.ui) { + color: rgba(0, 0, 0, 0.4); +} +.ui.cards > .card > .extra a:not(.ui):hover, +.ui.card > .extra a:not(.ui):hover { + color: #1e70bf; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Raised +--------------------*/ + +.ui.raised.cards > .card, +.ui.raised.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); +} +.ui.raised.cards a.card:hover, +.ui.link.cards .raised.card:hover, +a.ui.raised.card:hover, +.ui.link.raised.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); +} +.ui.raised.cards > .card, +.ui.raised.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); +} + +/*------------------- + Centered +--------------------*/ + +.ui.centered.cards { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.ui.centered.card { + margin-left: auto; + margin-right: auto; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.card { + width: 100%; + max-width: 9999px; +} + +/*------------------- + Link +--------------------*/ + +.ui.cards a.card, +.ui.link.cards .card, +a.ui.card, +.ui.link.card { + -webkit-transform: none; + transform: none; +} +.ui.cards a.card:hover, +.ui.link.cards .card:hover, +a.ui.card:hover, +.ui.link.card:hover { + cursor: pointer; + z-index: 5; + background: #EBEBEB; + border: none; + box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; + -webkit-transform: translateY(-3px); + transform: translateY(-3px); +} + +/*------------------- + Colors +--------------------*/ + + +/* Red */ +.ui.red.cards > .card, +.ui.cards > .red.card, +.ui.red.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E24614, 0px 1px 3px 0px #D4D4D5; +} +.ui.red.cards > .card:hover, +.ui.cards > .red.card:hover, +.ui.red.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d43a09, 0px 1px 3px 0px #BCBDBD; +} + +/* Orange */ +.ui.orange.cards > .card, +.ui.cards > .orange.card, +.ui.orange.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5; +} +.ui.orange.cards > .card:hover, +.ui.cards > .orange.card:hover, +.ui.orange.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD; +} + +/* Yellow */ +.ui.yellow.cards > .card, +.ui.cards > .yellow.card, +.ui.yellow.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DBA915, 0px 1px 3px 0px #D4D4D5; +} +.ui.yellow.cards > .card:hover, +.ui.cards > .yellow.card:hover, +.ui.yellow.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #cd9b0a, 0px 1px 3px 0px #BCBDBD; +} + +/* Olive */ +.ui.olive.cards > .card, +.ui.cards > .olive.card, +.ui.olive.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; +} +.ui.olive.cards > .card:hover, +.ui.cards > .olive.card:hover, +.ui.olive.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; +} + +/* Green */ +.ui.green.cards > .card, +.ui.cards > .green.card, +.ui.green.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #BFD02C, 0px 1px 3px 0px #D4D4D5; +} +.ui.green.cards > .card:hover, +.ui.cards > .green.card:hover, +.ui.green.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #b2c220, 0px 1px 3px 0px #BCBDBD; +} + +/* Teal */ +.ui.teal.cards > .card, +.ui.cards > .teal.card, +.ui.teal.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #283F4E, 0px 1px 3px 0px #D4D4D5; +} +.ui.teal.cards > .card:hover, +.ui.cards > .teal.card:hover, +.ui.teal.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1e323f, 0px 1px 3px 0px #BCBDBD; +} + +/* Blue */ +.ui.blue.cards > .card, +.ui.cards > .blue.card, +.ui.blue.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #38A6D8, 0px 1px 3px 0px #D4D4D5; +} +.ui.blue.cards > .card:hover, +.ui.cards > .blue.card:hover, +.ui.blue.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #209dd6, 0px 1px 3px 0px #BCBDBD; +} + +/* Violet */ +.ui.violet.cards > .card, +.ui.cards > .violet.card, +.ui.violet.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5; +} +.ui.violet.cards > .card:hover, +.ui.cards > .violet.card:hover, +.ui.violet.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD; +} + +/* Purple */ +.ui.purple.cards > .card, +.ui.cards > .purple.card, +.ui.purple.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #852EB7, 0px 1px 3px 0px #D4D4D5; +} +.ui.purple.cards > .card:hover, +.ui.cards > .purple.card:hover, +.ui.purple.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #7823a9, 0px 1px 3px 0px #BCBDBD; +} + +/* Pink */ +.ui.pink.cards > .card, +.ui.cards > .pink.card, +.ui.pink.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5; +} +.ui.pink.cards > .card:hover, +.ui.cards > .pink.card:hover, +.ui.pink.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD; +} + +/* Brown */ +.ui.brown.cards > .card, +.ui.cards > .brown.card, +.ui.brown.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5; +} +.ui.brown.cards > .card:hover, +.ui.cards > .brown.card:hover, +.ui.brown.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD; +} + +/* Grey */ +.ui.grey.cards > .card, +.ui.cards > .grey.card, +.ui.grey.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #54595B, 0px 1px 3px 0px #D4D4D5; +} +.ui.grey.cards > .card:hover, +.ui.cards > .grey.card:hover, +.ui.grey.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #606668, 0px 1px 3px 0px #BCBDBD; +} + +/* Black */ +.ui.black.cards > .card, +.ui.cards > .black.card, +.ui.black.card { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #262626, 0px 1px 3px 0px #D4D4D5; +} +.ui.black.cards > .card:hover, +.ui.cards > .black.card:hover, +.ui.black.card:hover { + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #333333, 0px 1px 3px 0px #BCBDBD; +} + +/*-------------- + Card Count +---------------*/ + +.ui.one.cards { + margin-left: 0em; + margin-right: 0em; +} +.ui.one.cards > .card { + width: 100%; +} +.ui.two.cards { + margin-left: -1em; + margin-right: -1em; +} +.ui.two.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; +} +.ui.three.cards { + margin-left: -1em; + margin-right: -1em; +} +.ui.three.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; +} +.ui.four.cards { + margin-left: -0.75em; + margin-right: -0.75em; +} +.ui.four.cards > .card { + width: calc( 25% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; +} +.ui.five.cards { + margin-left: -0.75em; + margin-right: -0.75em; +} +.ui.five.cards > .card { + width: calc( 20% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; +} +.ui.six.cards { + margin-left: -0.75em; + margin-right: -0.75em; +} +.ui.six.cards > .card { + width: calc( 16.66666667% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; +} +.ui.seven.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.seven.cards > .card { + width: calc( 14.28571429% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; +} +.ui.eight.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.eight.cards > .card { + width: calc( 12.5% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; + font-size: 11px; +} +.ui.nine.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.nine.cards > .card { + width: calc( 11.11111111% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; + font-size: 10px; +} +.ui.ten.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.ten.cards > .card { + width: calc( 10% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; +} + +/*------------------- + Doubling +--------------------*/ + + +/* Mobile Only */ +@media only screen and (max-width: 767px) { + .ui.two.doubling.cards { + margin-left: 0em; + margin-right: 0em; + } + .ui.two.doubling.cards .card { + width: 100%; + margin-left: 0em; + margin-right: 0em; + } + .ui.three.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.three.doubling.cards .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.four.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.four.doubling.cards .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.five.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.five.doubling.cards .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.six.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.six.doubling.cards .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.seven.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.seven.doubling.cards .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.eight.doubling.cards .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.nine.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.nine.doubling.cards .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.ten.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.ten.doubling.cards .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } +} + +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.two.doubling.cards { + margin-left: 0em; + margin-right: 0em; + } + .ui.two.doubling.cards .card { + width: 100%; + margin-left: 0em; + margin-right: 0em; + } + .ui.three.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.three.doubling.cards .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.four.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.four.doubling.cards .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.five.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.five.doubling.cards .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.six.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.six.doubling.cards .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.eight.doubling.cards .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.eight.doubling.cards .card { + width: calc( 25% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; + } + .ui.nine.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.nine.doubling.cards .card { + width: calc( 25% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; + } + .ui.ten.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.ten.doubling.cards .card { + width: calc( 20% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; + } +} + +/*------------------- + Stackable +--------------------*/ + +@media only screen and (max-width: 767px) { + .ui.stackable.cards { + display: block !important; + } + .ui.stackable.cards .card:first-child { + margin-top: 0em !important; + } + .ui.stackable.cards > .card { + display: block !important; + height: auto !important; + margin: 1em 1em; + padding: 0 !important; + width: calc( 100% - 2em ) !important; + } +} + +/*-------------- + Size +---------------*/ + +.ui.cards > .card { + font-size: 1em; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ +
http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6b90be61/semantic/dist/components/card.min.css ---------------------------------------------------------------------- diff --git a/semantic/dist/components/card.min.css b/semantic/dist/components/card.min.css new file mode 100755 index 0000000..b0ddcc5 --- /dev/null +++ b/semantic/dist/components/card.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.2.6 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.card,.ui.cards>.card{max-width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:290px;min-height:0;background:#EBEBEB;padding:0;border:none;border-radius:.28571429rem;box-shadow:0 1px 3px 0 #D4D4D5,0 0 0 1px #D4D4D5;-webkit-transition:box-shadow .1s ease,-webkit-transform .1s ease;transition:box-shadow .1s ease,-webkit-transform .1s ease;transition:box-shadow .1s ease,transform .1s ease;transition:box-shadow .1s ease,transform .1s ease,-webkit-transform .1s ease;z-index:''}.ui.card{margin:1em 0}.ui.card a,.ui.cards>.card a{cursor:pointer}.ui.card:first-child{margin-top:0}.ui.card:last-child{margin-bottom:0}.ui.cards{display:-webkit-box;display:-ms-flexbox;display:flex;margin:-.875em -.5em;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.cards>.card{display:-webkit-box;display:-ms-flexbox;display:flex;margin:.875em .5em;float:none}.ui.card:after,.ui.ca rds:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.cards~.ui.cards{margin-top:.875em}.ui.card>:first-child,.ui.cards>.card>:first-child{border-radius:.28571429rem .28571429rem 0 0!important;border-top:none!important}.ui.card>:last-child,.ui.cards>.card>:last-child{border-radius:0 0 .28571429rem .28571429rem!important}.ui.card>:only-child,.ui.cards>.card>:only-child{border-radius:.28571429rem!important}.ui.card>.image,.ui.cards>.card>.image{position:relative;display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:0;background:rgba(0,0,0,.05)}.ui.card>.image>img,.ui.cards>.card>.image>img{display:block;width:100%;height:auto;border-radius:inherit}.ui.card>.image:not(.ui)>img,.ui.cards>.card>.image:not(.ui)>img{border:none}.ui.card>.content,.ui.cards>.card>.content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border:none;border-top:1px solid rgba(34,36,38,.1);background:0 0;margin:0;padding:1em;box-shadow:none;font-size: 1em;border-radius:0}.ui.card>.content:after,.ui.cards>.card>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.card>.content>.header,.ui.cards>.card>.content>.header{display:block;margin:'';font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;color:rgba(0,0,0,.85)}.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui){font-weight:700;font-size:1.28571429em;margin-top:-.21425em;line-height:1.2857em}.ui.card>.content>.header+.description,.ui.card>.content>.meta+.description,.ui.cards>.card>.content>.header+.description,.ui.cards>.card>.content>.meta+.description{margin-top:.5em}.ui.card [class*="left floated"],.ui.cards>.card [class*="left floated"]{float:left}.ui.card [class*="right floated"],.ui.cards>.card [class*="right floated"]{float:right}.ui.card [class*="left aligned"],.ui.cards>.card [class*="left aligned"]{text-align:left}.ui.card [class*="center aligned"],.ui.cards>.card [class*="center aligned"] {text-align:center}.ui.card [class*="right aligned"],.ui.cards>.card [class*="right aligned"]{text-align:right}.ui.card .content img,.ui.cards>.card .content img{display:inline-block;vertical-align:middle;width:''}.ui.card .avatar img,.ui.card img.avatar,.ui.cards>.card .avatar img,.ui.cards>.card img.avatar{width:2em;height:2em;border-radius:500rem}.ui.card>.content>.description,.ui.cards>.card>.content>.description{clear:both;color:rgba(0,0,0,.68)}.ui.card>.content p,.ui.cards>.card>.content p{margin:0 0 .5em}.ui.card>.content p:last-child,.ui.cards>.card>.content p:last-child{margin-bottom:0}.ui.card .meta,.ui.cards>.card .meta{font-size:1em;color:rgba(0,0,0,.4)}.ui.card .meta *,.ui.cards>.card .meta *{margin-right:.3em}.ui.card .meta :last-child,.ui.cards>.card .meta :last-child{margin-right:0}.ui.card .meta [class*="right floated"],.ui.cards>.card .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.card>.content a:not(.ui),.ui.cards>.card>.content a:not(.ui){colo r:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content a:not(.ui):hover,.ui.cards>.card>.content a:not(.ui):hover{color:''}.ui.card>.content>a.header,.ui.cards>.card>.content>a.header{color:rgba(0,0,0,.85)}.ui.card>.content>a.header:hover,.ui.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.card .meta>a:not(.ui),.ui.cards>.card .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.card .meta>a:not(.ui):hover,.ui.cards>.card .meta>a:not(.ui):hover{color:#262626}.ui.card>.button,.ui.card>.buttons,.ui.cards>.card>.button,.ui.cards>.card>.buttons{margin:0 -1px;width:calc(100% + 2px)}.ui.card .dimmer,.ui.cards>.card .dimmer{background-color:'';z-index:10}.ui.card>.content .star.icon,.ui.cards>.card>.content .star.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .star.icon:hover,.ui.cards>.card>.content .star.icon:hover{opacity:1;color:#FFB70A}.ui.card>.content .active.star.icon,.ui.cards>.card>.content .act ive.star.icon{color:#FFE623}.ui.card>.content .like.icon,.ui.cards>.card>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .like.icon:hover,.ui.cards>.card>.content .like.icon:hover{opacity:1;color:#FF2733}.ui.card>.content .active.like.icon,.ui.cards>.card>.content .active.like.icon{color:#FF2733}.ui.card>.extra,.ui.cards>.card>.extra{max-width:100%;min-height:0!important;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid rgba(0,0,0,.05)!important;position:static;background:0 0;width:auto;margin:0;padding:.75em 1em;top:0;left:0;color:rgba(0,0,0,.4);box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.extra a:not(.ui),.ui.cards>.card>.extra a:not(.ui){color:rgba(0,0,0,.4)}.ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.link.cards .raised.card:hover,.ui.link.raised.card:hover,.ui.raised.cards a.card:hover,a.ui.rais ed.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25)}.ui.raised.card,.ui.raised.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.centered.cards{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.card{margin-left:auto;margin-right:auto}.ui.fluid.card{width:100%;max-width:9999px}.ui.cards a.card,.ui.link.card,.ui.link.cards .card,a.ui.card{-webkit-transform:none;transform:none}.ui.cards a.card:hover,.ui.link.card:hover,.ui.link.cards .card:hover,a.ui.card:hover{cursor:pointer;z-index:5;background:#EBEBEB;border:none;box-shadow:0 1px 3px 0 #BCBDBD,0 0 0 1px #D4D4D5;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.ui.cards>.red.card,.ui.red.card,.ui.red.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #E24614,0 1px 3px 0 #D4D4D5}.ui.cards>.red.card:hover,.ui.red.card:hover,.ui.red.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2p x 0 0 #d43a09,0 1px 3px 0 #BCBDBD}.ui.cards>.orange.card,.ui.orange.card,.ui.orange.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #F2711C,0 1px 3px 0 #D4D4D5}.ui.cards>.orange.card:hover,.ui.orange.card:hover,.ui.orange.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #f26202,0 1px 3px 0 #BCBDBD}.ui.cards>.yellow.card,.ui.yellow.card,.ui.yellow.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #DBA915,0 1px 3px 0 #D4D4D5}.ui.cards>.yellow.card:hover,.ui.yellow.card:hover,.ui.yellow.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #cd9b0a,0 1px 3px 0 #BCBDBD}.ui.cards>.olive.card,.ui.olive.card,.ui.olive.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #B5CC18,0 1px 3px 0 #D4D4D5}.ui.cards>.olive.card:hover,.ui.olive.card:hover,.ui.olive.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #BCBDBD}.ui.cards>.green.card,.ui.green.card,.ui.green.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #BFD02C,0 1px 3px 0 #D4D4D5}.ui.cards>.gree n.card:hover,.ui.green.card:hover,.ui.green.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #b2c220,0 1px 3px 0 #BCBDBD}.ui.cards>.teal.card,.ui.teal.card,.ui.teal.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #283F4E,0 1px 3px 0 #D4D4D5}.ui.cards>.teal.card:hover,.ui.teal.card:hover,.ui.teal.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #1e323f,0 1px 3px 0 #BCBDBD}.ui.blue.card,.ui.blue.cards>.card,.ui.cards>.blue.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #38A6D8,0 1px 3px 0 #D4D4D5}.ui.blue.card:hover,.ui.blue.cards>.card:hover,.ui.cards>.blue.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #209dd6,0 1px 3px 0 #BCBDBD}.ui.cards>.violet.card,.ui.violet.card,.ui.violet.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #6435C9,0 1px 3px 0 #D4D4D5}.ui.cards>.violet.card:hover,.ui.violet.card:hover,.ui.violet.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #5829bb,0 1px 3px 0 #BCBDBD}.ui.cards>.purple.card,.ui.purple.card,.ui.purple.cards>.card{bo x-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #852EB7,0 1px 3px 0 #D4D4D5}.ui.cards>.purple.card:hover,.ui.purple.card:hover,.ui.purple.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #7823a9,0 1px 3px 0 #BCBDBD}.ui.cards>.pink.card,.ui.pink.card,.ui.pink.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #E03997,0 1px 3px 0 #D4D4D5}.ui.cards>.pink.card:hover,.ui.pink.card:hover,.ui.pink.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #e61a8d,0 1px 3px 0 #BCBDBD}.ui.brown.card,.ui.brown.cards>.card,.ui.cards>.brown.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #A5673F,0 1px 3px 0 #D4D4D5}.ui.brown.card:hover,.ui.brown.cards>.card:hover,.ui.cards>.brown.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #975b33,0 1px 3px 0 #BCBDBD}.ui.cards>.grey.card,.ui.grey.card,.ui.grey.cards>.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #54595B,0 1px 3px 0 #D4D4D5}.ui.cards>.grey.card:hover,.ui.grey.card:hover,.ui.grey.cards>.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #606668,0 1px 3 px 0 #BCBDBD}.ui.black.card,.ui.black.cards>.card,.ui.cards>.black.card{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #262626,0 1px 3px 0 #D4D4D5}.ui.black.card:hover,.ui.black.cards>.card:hover,.ui.cards>.black.card:hover{box-shadow:0 0 0 1px #D4D4D5,0 2px 0 0 #333,0 1px 3px 0 #BCBDBD}.ui.one.cards{margin-left:0;margin-right:0}.ui.one.cards>.card{width:100%}.ui.two.cards{margin-left:-1em;margin-right:-1em}.ui.two.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.three.cards{margin-left:-1em;margin-right:-1em}.ui.three.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.four.cards{margin-left:-.75em;margin-right:-.75em}.ui.four.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.five.cards{margin-left:-.75em;margin-right:-.75em}.ui.five.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.six.cards{margin-left:-.75em;margin-right:-.75em}.ui.six.cards>.card{width:calc(16.66666667% - 1.5em);marg in-left:.75em;margin-right:.75em}.ui.seven.cards{margin-left:-.5em;margin-right:-.5em}.ui.seven.cards>.card{width:calc(14.28571429% - 1em);margin-left:.5em;margin-right:.5em}.ui.eight.cards{margin-left:-.5em;margin-right:-.5em}.ui.eight.cards>.card{width:calc(12.5% - 1em);margin-left:.5em;margin-right:.5em;font-size:11px}.ui.nine.cards{margin-left:-.5em;margin-right:-.5em}.ui.nine.cards>.card{width:calc(11.11111111% - 1em);margin-left:.5em;margin-right:.5em;font-size:10px}.ui.ten.cards{margin-left:-.5em;margin-right:-.5em}.ui.ten.cards>.card{width:calc(10% - 1em);margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards .card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards .card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards . card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards .card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards .card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.seven.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.seven.doubling.cards .card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards .card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.nine.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.nine.doubling.cards .card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.ten.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.ten.doubling.cards .card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}}@media only screen and (min-width:76 8px) and (max-width:991px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards .card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards .card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards .card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards .card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards .card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.eight.doubling.cards .card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.nine.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.nine.doubling.cards .card{width: calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.ten.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.ten.doubling.cards .card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}}@media only screen and (max-width:767px){.ui.stackable.cards{display:block!important}.ui.stackable.cards .card:first-child{margin-top:0!important}.ui.stackable.cards>.card{display:block!important;height:auto!important;margin:1em;padding:0!important;width:calc(100% - 2em)!important}}.ui.cards>.card{font-size:1em} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6b90be61/semantic/dist/components/checkbox.css ---------------------------------------------------------------------- diff --git a/semantic/dist/components/checkbox.css b/semantic/dist/components/checkbox.css new file mode 100755 index 0000000..eefedd1 --- /dev/null +++ b/semantic/dist/components/checkbox.css @@ -0,0 +1,625 @@ +/*! + * # Semantic UI 2.2.6 - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Checkbox +*******************************/ + + +/*-------------- + Content +---------------*/ + +.ui.checkbox { + position: relative; + display: inline-block; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + outline: none; + vertical-align: baseline; + font-style: normal; + min-height: 17px; + font-size: 1rem; + line-height: 17px; + min-width: 17px; +} + +/* HTML Checkbox */ +.ui.checkbox input[type="checkbox"], +.ui.checkbox input[type="radio"] { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + opacity: 0 !important; + outline: none; + z-index: 3; + width: 17px; + height: 17px; +} + +/*-------------- + Box +---------------*/ + +.ui.checkbox .box, +.ui.checkbox label { + cursor: auto; + position: relative; + display: block; + padding-left: 1.85714em; + outline: none; + font-size: 1em; +} +.ui.checkbox .box:before, +.ui.checkbox label:before { + position: absolute; + top: 0px; + left: 0px; + width: 17px; + height: 17px; + content: ''; + background: #EBEBEB; + border-radius: 0.21428571rem; + -webkit-transition: border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease; + border: 1px solid #D4D4D5; +} + +/*-------------- + Checkmark +---------------*/ + +.ui.checkbox .box:after, +.ui.checkbox label:after { + position: absolute; + font-size: 14px; + top: 0px; + left: 0px; + width: 17px; + height: 17px; + text-align: center; + opacity: 0; + color: #262626; + -webkit-transition: border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease; +} + +/*-------------- + Label +---------------*/ + + +/* Inside */ +.ui.checkbox label, +.ui.checkbox + label { + color: #262626; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} + +/* Outside */ +.ui.checkbox + label { + vertical-align: middle; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Hover +---------------*/ + +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + background: #EBEBEB; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox label:hover, +.ui.checkbox + label:hover { + color: rgba(0, 0, 0, 0.8); +} + +/*-------------- + Down +---------------*/ + +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { + background: #F9FAFB; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox .box:active::after, +.ui.checkbox label:active::after { + color: rgba(0, 0, 0, 0.95); +} +.ui.checkbox input:active ~ label { + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Focus +---------------*/ + +.ui.checkbox input:focus ~ .box:before, +.ui.checkbox input:focus ~ label:before { + background: #EBEBEB; + border-color: #96C8DA; +} +.ui.checkbox input:focus ~ .box:after, +.ui.checkbox input:focus ~ label:after { + color: rgba(0, 0, 0, 0.95); +} +.ui.checkbox input:focus ~ label { + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Active +---------------*/ + +.ui.checkbox input:checked ~ .box:before, +.ui.checkbox input:checked ~ label:before { + background: #EBEBEB; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + opacity: 1; + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Indeterminate +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:before { + background: #EBEBEB; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:after { + opacity: 1; + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Active Focus +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, +.ui.checkbox input:checked:focus ~ .box:before, +.ui.checkbox input:checked:focus ~ label:before { + background: #EBEBEB; + border-color: #96C8DA; +} +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, +.ui.checkbox input:checked:focus ~ .box:after, +.ui.checkbox input:checked:focus ~ label:after { + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Read-Only +---------------*/ + +.ui.read-only.checkbox, +.ui.read-only.checkbox label { + cursor: default; +} + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.checkbox .box:after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] ~ .box:after, +.ui.checkbox input[disabled] ~ label { + cursor: default !important; + opacity: 0.5; + color: #000000; +} + +/*-------------- + Hidden +---------------*/ + + +/* Initialized checkbox moves input below element + to prevent manually triggering */ +.ui.checkbox input.hidden { + z-index: -1; +} + +/* Selectable Label */ +.ui.checkbox input.hidden + label { + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Radio +---------------*/ + +.ui.radio.checkbox { + min-height: 15px; +} +.ui.radio.checkbox .box, +.ui.radio.checkbox label { + padding-left: 1.85714em; +} + +/* Box */ +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + content: ''; + -webkit-transform: none; + transform: none; + width: 15px; + height: 15px; + border-radius: 500rem; + top: 1px; + left: 0px; +} + +/* Bullet */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + border: none; + content: '' !important; + width: 15px; + height: 15px; + line-height: 15px; +} + +/* Radio Checkbox */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + top: 1px; + left: 0px; + width: 15px; + height: 15px; + border-radius: 500rem; + -webkit-transform: scale(0.46666667); + transform: scale(0.46666667); + background-color: #262626; +} + +/* Focus */ +.ui.radio.checkbox input:focus ~ .box:before, +.ui.radio.checkbox input:focus ~ label:before { + background-color: #EBEBEB; +} +.ui.radio.checkbox input:focus ~ .box:after, +.ui.radio.checkbox input:focus ~ label:after { + background-color: rgba(0, 0, 0, 0.95); +} + +/* Indeterminate */ +.ui.radio.checkbox input:indeterminate ~ .box:after, +.ui.radio.checkbox input:indeterminate ~ label:after { + opacity: 0; +} + +/* Active */ +.ui.radio.checkbox input:checked ~ .box:before, +.ui.radio.checkbox input:checked ~ label:before { + background-color: #EBEBEB; +} +.ui.radio.checkbox input:checked ~ .box:after, +.ui.radio.checkbox input:checked ~ label:after { + background-color: rgba(0, 0, 0, 0.95); +} + +/* Active Focus */ +.ui.radio.checkbox input:focus:checked ~ .box:before, +.ui.radio.checkbox input:focus:checked ~ label:before { + background-color: #EBEBEB; +} +.ui.radio.checkbox input:focus:checked ~ .box:after, +.ui.radio.checkbox input:focus:checked ~ label:after { + background-color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Slider +---------------*/ + +.ui.slider.checkbox { + min-height: 1.25rem; +} + +/* Input */ +.ui.slider.checkbox input { + width: 3.5rem; + height: 1.25rem; +} + +/* Label */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + padding-left: 4.5rem; + line-height: 1rem; + color: rgba(0, 0, 0, 0.4); +} + +/* Line */ +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { + display: block; + position: absolute; + content: ''; + border: none !important; + left: 0em; + z-index: 1; + top: 0.4rem; + background-color: rgba(0, 0, 0, 0.05); + width: 3.5rem; + height: 0.21428571rem; + -webkit-transform: none; + transform: none; + border-radius: 500rem; + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; +} + +/* Handle */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background: #EBEBEB -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #EBEBEB linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + border: none; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + width: 1.5rem; + height: 1.5rem; + top: -0.25rem; + left: 0em; + -webkit-transform: none; + transform: none; + border-radius: 500rem; + -webkit-transition: left 0.3s ease; + transition: left 0.3s ease; +} + +/* Focus */ +.ui.slider.checkbox input:focus ~ .box:before, +.ui.slider.checkbox input:focus ~ label:before { + background-color: rgba(0, 0, 0, 0.15); + border: none; +} + +/* Hover */ +.ui.slider.checkbox .box:hover, +.ui.slider.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.slider.checkbox .box:hover::before, +.ui.slider.checkbox label:hover::before { + background: rgba(0, 0, 0, 0.15); +} + +/* Active */ +.ui.slider.checkbox input:checked ~ .box, +.ui.slider.checkbox input:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.slider.checkbox input:checked ~ .box:before, +.ui.slider.checkbox input:checked ~ label:before { + background-color: #545454 !important; +} +.ui.slider.checkbox input:checked ~ .box:after, +.ui.slider.checkbox input:checked ~ label:after { + left: 2rem; +} + +/* Active Focus */ +.ui.slider.checkbox input:focus:checked ~ .box, +.ui.slider.checkbox input:focus:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.slider.checkbox input:focus:checked ~ .box:before, +.ui.slider.checkbox input:focus:checked ~ label:before { + background-color: #000000 !important; +} + +/*-------------- + Toggle +---------------*/ + +.ui.toggle.checkbox { + min-height: 1.5rem; +} + +/* Input */ +.ui.toggle.checkbox input { + width: 3.5rem; + height: 1.5rem; +} + +/* Label */ +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + min-height: 1.5rem; + padding-left: 4.5rem; + color: #262626; +} +.ui.toggle.checkbox label { + padding-top: 0.15em; +} + +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { + display: block; + position: absolute; + content: ''; + z-index: 1; + -webkit-transform: none; + transform: none; + border: none; + top: 0rem; + background: rgba(0, 0, 0, 0.05); + box-shadow: none; + width: 3.5rem; + height: 1.5rem; + border-radius: 500rem; +} + +/* Handle */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + background: #EBEBEB -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #EBEBEB linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + border: none; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + width: 1.5rem; + height: 1.5rem; + top: 0rem; + left: 0em; + border-radius: 500rem; + -webkit-transition: background 0.3s ease, left 0.3s ease; + transition: background 0.3s ease, left 0.3s ease; +} +.ui.toggle.checkbox input ~ .box:after, +.ui.toggle.checkbox input ~ label:after { + left: -0.05rem; + box-shadow: none; +} + +/* Focus */ +.ui.toggle.checkbox input:focus ~ .box:before, +.ui.toggle.checkbox input:focus ~ label:before { + background-color: rgba(0, 0, 0, 0.15); + border: none; +} + +/* Hover */ +.ui.toggle.checkbox .box:hover::before, +.ui.toggle.checkbox label:hover::before { + background-color: rgba(0, 0, 0, 0.15); + border: none; +} + +/* Active */ +.ui.toggle.checkbox input:checked ~ .box, +.ui.toggle.checkbox input:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.toggle.checkbox input:checked ~ .box:before, +.ui.toggle.checkbox input:checked ~ label:before { + background-color: #283F4E !important; +} +.ui.toggle.checkbox input:checked ~ .box:after, +.ui.toggle.checkbox input:checked ~ label:after { + left: 2.15rem; + box-shadow: none; +} + +/* Active Focus */ +.ui.toggle.checkbox input:focus:checked ~ .box, +.ui.toggle.checkbox input:focus:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.toggle.checkbox input:focus:checked ~ .box:before, +.ui.toggle.checkbox input:focus:checked ~ label:before { + background-color: #182a36 !important; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.checkbox .box, +.ui.fitted.checkbox label { + padding-left: 0em !important; +} +.ui.fitted.toggle.checkbox, +.ui.fitted.toggle.checkbox { + width: 3.5rem; +} +.ui.fitted.slider.checkbox, +.ui.fitted.slider.checkbox { + width: 3.5rem; +} + + +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Checkbox'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuF xAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); +} + +/* Checkmark */ +.ui.checkbox label:after, +.ui.checkbox .box:after { + font-family: 'Checkbox'; +} + +/* Checked */ +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + content: '\e800'; +} + +/* Indeterminate */ +.ui.checkbox input:indeterminate ~ .box:after, +.ui.checkbox input:indeterminate ~ label:after { + font-size: 12px; + content: '\e801'; +} +/* UTF Reference +.check:before { content: '\e800'; } +.dash:before { content: '\e801'; } +.plus:before { content: '\e802'; } +*/ + + +/******************************* + Site Overrides +*******************************/ + http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6b90be61/semantic/dist/components/checkbox.js ---------------------------------------------------------------------- diff --git a/semantic/dist/components/checkbox.js b/semantic/dist/components/checkbox.js new file mode 100644 index 0000000..c78c61f --- /dev/null +++ b/semantic/dist/components/checkbox.js @@ -0,0 +1,831 @@ +/*! + * # Semantic UI 2.2.6 - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.checkbox = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = $.extend(true, {}, $.fn.checkbox.settings, parameters), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $label = $(this).children(selector.label), + $input = $(this).children(selector.input), + input = $input[0], + + initialLoad = false, + shortcutPressed = false, + instance = $module.data(moduleNamespace), + + observer, + element = this, + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing checkbox', settings); + + module.create.label(); + module.bind.events(); + + module.set.tabbable(); + module.hide.input(); + + module.observeChanges(); + module.instantiate(); + module.setup(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying module'); + module.unbind.events(); + module.show.input(); + $module.removeData(moduleNamespace); + }, + + fix: { + reference: function() { + if( $module.is(selector.input) ) { + module.debug('Behavior called on <input> adjusting invoked element'); + $module = $module.closest(selector.checkbox); + module.refresh(); + } + } + }, + + setup: function() { + module.set.initialLoad(); + if( module.is.indeterminate() ) { + module.debug('Initial value is indeterminate'); + module.indeterminate(); + } + else if( module.is.checked() ) { + module.debug('Initial value is checked'); + module.check(); + } + else { + module.debug('Initial value is unchecked'); + module.uncheck(); + } + module.remove.initialLoad(); + }, + + refresh: function() { + $label = $module.children(selector.label); + $input = $module.children(selector.input); + input = $input[0]; + }, + + hide: { + input: function() { + module.verbose('Modifying <input> z-index to be unselectable'); + $input.addClass(className.hidden); + } + }, + show: { + input: function() { + module.verbose('Modifying <input> z-index to be selectable'); + $input.removeClass(className.hidden); + } + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + attachEvents: function(selector, event) { + var + $element = $(selector) + ; + event = $.isFunction(module[event]) + ? module[event] + : module.toggle + ; + if($element.length > 0) { + module.debug('Attaching checkbox events to element', selector, event); + $element + .on('click' + eventNamespace, event) + ; + } + else { + module.error(error.notFound); + } + }, + + event: { + click: function(event) { + var + $target = $(event.target) + ; + if( $target.is(selector.input) ) { + module.verbose('Using default check action on initialized checkbox'); + return; + } + if( $target.is(selector.link) ) { + module.debug('Clicking link inside checkbox, skipping toggle'); + return; + } + module.toggle(); + $input.focus(); + event.preventDefault(); + }, + keydown: function(event) { + var + key = event.which, + keyCode = { + enter : 13, + space : 32, + escape : 27 + } + ; + if(key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $input.blur(); + shortcutPressed = true; + } + else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) { + module.verbose('Enter/space key pressed, toggling checkbox'); + module.toggle(); + shortcutPressed = true; + } + else { + shortcutPressed = false; + } + }, + keyup: function(event) { + if(shortcutPressed) { + event.preventDefault(); + } + } + }, + + check: function() { + if( !module.should.allowCheck() ) { + return; + } + module.debug('Checking checkbox', $input); + module.set.checked(); + if( !module.should.ignoreCallbacks() ) { + settings.onChecked.call(input); + settings.onChange.call(input); + } + }, + + uncheck: function() { + if( !module.should.allowUncheck() ) { + return; + } + module.debug('Unchecking checkbox'); + module.set.unchecked(); + if( !module.should.ignoreCallbacks() ) { + settings.onUnchecked.call(input); + settings.onChange.call(input); + } + }, + + indeterminate: function() { + if( module.should.allowIndeterminate() ) { + module.debug('Checkbox is already indeterminate'); + return; + } + module.debug('Making checkbox indeterminate'); + module.set.indeterminate(); + if( !module.should.ignoreCallbacks() ) { + settings.onIndeterminate.call(input); + settings.onChange.call(input); + } + }, + + determinate: function() { + if( module.should.allowDeterminate() ) { + module.debug('Checkbox is already determinate'); + return; + } + module.debug('Making checkbox determinate'); + module.set.determinate(); + if( !module.should.ignoreCallbacks() ) { + settings.onDeterminate.call(input); + settings.onChange.call(input); + } + }, + + enable: function() { + if( module.is.enabled() ) { + module.debug('Checkbox is already enabled'); + return; + } + module.debug('Enabling checkbox'); + module.set.enabled(); + settings.onEnable.call(input); + // preserve legacy callbacks + settings.onEnabled.call(input); + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + settings.onDisable.call(input); + // preserve legacy callbacks + settings.onDisabled.call(input); + }, + + get: { + radios: function() { + var + name = module.get.name() + ; + return $('input[name="' + name + '"]').closest(selector.checkbox); + }, + otherRadios: function() { + return module.get.radios().not($module); + }, + name: function() { + return $input.attr('name'); + } + }, + + is: { + initialLoad: function() { + return initialLoad; + }, + radio: function() { + return ($input.hasClass(className.radio) || $input.attr('type') == 'radio'); + }, + indeterminate: function() { + return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate'); + }, + checked: function() { + return $input.prop('checked') !== undefined && $input.prop('checked'); + }, + disabled: function() { + return $input.prop('disabled') !== undefined && $input.prop('disabled'); + }, + enabled: function() { + return !module.is.disabled(); + }, + determinate: function() { + return !module.is.indeterminate(); + }, + unchecked: function() { + return !module.is.checked(); + } + }, + + should: { + allowCheck: function() { + if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow check, checkbox is already checked'); + return false; + } + if(settings.beforeChecked.apply(input) === false) { + module.debug('Should not allow check, beforeChecked cancelled'); + return false; + } + return true; + }, + allowUncheck: function() { + if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow uncheck, checkbox is already unchecked'); + return false; + } + if(settings.beforeUnchecked.apply(input) === false) { + module.debug('Should not allow uncheck, beforeUnchecked cancelled'); + return false; + } + return true; + }, + allowIndeterminate: function() { + if(module.is.indeterminate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow indeterminate, checkbox is already indeterminate'); + return false; + } + if(settings.beforeIndeterminate.apply(input) === false) { + module.debug('Should not allow indeterminate, beforeIndeterminate cancelled'); + return false; + } + return true; + }, + allowDeterminate: function() { + if(module.is.determinate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow determinate, checkbox is already determinate'); + return false; + } + if(settings.beforeDeterminate.apply(input) === false) { + module.debug('Should not allow determinate, beforeDeterminate cancelled'); + return false; + } + return true; + }, + forceCallbacks: function() { + return (module.is.initialLoad() && settings.fireOnInit); + }, + ignoreCallbacks: function() { + return (initialLoad && !settings.fireOnInit); + } + }, + + can: { + change: function() { + return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); + }, + uncheck: function() { + return (typeof settings.uncheckable === 'boolean') + ? settings.uncheckable + : !module.is.radio() + ; + } + }, + + set: { + initialLoad: function() { + initialLoad = true; + }, + checked: function() { + module.verbose('Setting class to checked'); + $module + .removeClass(className.indeterminate) + .addClass(className.checked) + ; + if( module.is.radio() ) { + module.uncheckOthers(); + } + if(!module.is.indeterminate() && module.is.checked()) { + module.debug('Input is already checked, skipping input property change'); + return; + } + module.verbose('Setting state to checked', input); + $input + .prop('indeterminate', false) + .prop('checked', true) + ; + module.trigger.change(); + }, + unchecked: function() { + module.verbose('Removing checked class'); + $module + .removeClass(className.indeterminate) + .removeClass(className.checked) + ; + if(!module.is.indeterminate() && module.is.unchecked() ) { + module.debug('Input is already unchecked'); + return; + } + module.debug('Setting state to unchecked'); + $input + .prop('indeterminate', false) + .prop('checked', false) + ; + module.trigger.change(); + }, + indeterminate: function() { + module.verbose('Setting class to indeterminate'); + $module + .addClass(className.indeterminate) + ; + if( module.is.indeterminate() ) { + module.debug('Input is already indeterminate, skipping input property change'); + return; + } + module.debug('Setting state to indeterminate'); + $input + .prop('indeterminate', true) + ; + module.trigger.change(); + }, + determinate: function() { + module.verbose('Removing indeterminate class'); + $module + .removeClass(className.indeterminate) + ; + if( module.is.determinate() ) { + module.debug('Input is already determinate, skipping input property change'); + return; + } + module.debug('Setting state to determinate'); + $input + .prop('indeterminate', false) + ; + }, + disabled: function() { + module.verbose('Setting class to disabled'); + $module + .addClass(className.disabled) + ; + if( module.is.disabled() ) { + module.debug('Input is already disabled, skipping input property change'); + return; + } + module.debug('Setting state to disabled'); + $input + .prop('disabled', 'disabled') + ; + module.trigger.change(); + }, + enabled: function() { + module.verbose('Removing disabled class'); + $module.removeClass(className.disabled); + if( module.is.enabled() ) { + module.debug('Input is already enabled, skipping input property change'); + return; + } + module.debug('Setting state to enabled'); + $input + .prop('disabled', false) + ; + module.trigger.change(); + }, + tabbable: function() { + module.verbose('Adding tabindex to checkbox'); + if( $input.attr('tabindex') === undefined) { + $input.attr('tabindex', 0); + } + } + }, + + remove: { + initialLoad: function() { + initialLoad = false; + } + }, + + trigger: { + change: function() { + var + events = document.createEvent('HTMLEvents'), + inputElement = $input[0] + ; + if(inputElement) { + module.verbose('Triggering native change event'); + events.initEvent('change', true, false); + inputElement.dispatchEvent(events); + } + } + }, + + + create: { + label: function() { + if($input.prevAll(selector.label).length > 0) { + $input.prev(selector.label).detach().insertAfter($input); + module.debug('Moving existing label', $label); + } + else if( !module.has.label() ) { + $label = $('<label>').insertAfter($input); + module.debug('Creating label', $label); + } + } + }, + + has: { + label: function() { + return ($label.length > 0); + } + }, + + bind: { + events: function() { + module.verbose('Attaching checkbox events'); + $module + .on('click' + eventNamespace, module.event.click) + .on('keydown' + eventNamespace, selector.input, module.event.keydown) + .on('keyup' + eventNamespace, selector.input, module.event.keyup) + ; + } + }, + + unbind: { + events: function() { + module.debug('Removing events'); + $module + .off(eventNamespace) + ; + } + }, + + uncheckOthers: function() { + var + $radios = module.get.otherRadios() + ; + module.debug('Unchecking other radios', $radios); + $radios.removeClass(className.checked); + }, + + toggle: function() { + if( !module.can.change() ) { + if(!module.is.radio()) { + module.debug('Checkbox is read-only or disabled, ignoring toggle'); + } + return; + } + if( module.is.indeterminate() || module.is.unchecked() ) { + module.debug('Currently unchecked'); + module.check(); + } + else if( module.is.checked() && module.can.uncheck() ) { + module.debug('Currently checked'); + module.uncheck(); + } + }, + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.checkbox.settings = { + + name : 'Checkbox', + namespace : 'checkbox', + + silent : false, + debug : false, + verbose : true, + performance : true, + + // delegated event context + uncheckable : 'auto', + fireOnInit : false, + + onChange : function(){}, + + beforeChecked : function(){}, + beforeUnchecked : function(){}, + beforeDeterminate : function(){}, + beforeIndeterminate : function(){}, + + onChecked : function(){}, + onUnchecked : function(){}, + + onDeterminate : function() {}, + onIndeterminate : function() {}, + + onEnable : function(){}, + onDisable : function(){}, + + // preserve misspelled callbacks (will be removed in 3.0) + onEnabled : function(){}, + onDisabled : function(){}, + + className : { + checked : 'checked', + indeterminate : 'indeterminate', + disabled : 'disabled', + hidden : 'hidden', + radio : 'radio', + readOnly : 'read-only' + }, + + error : { + method : 'The method you called is not defined' + }, + + selector : { + checkbox : '.ui.checkbox', + label : 'label, .box', + input : 'input[type="checkbox"], input[type="radio"]', + link : 'a[href]' + } + +}; + +})( jQuery, window, document );