Browse Source
from root Former-commit-id: e74525b4931dfda276711d87b3eb6a808273167c Former-commit-id: f4a703cf6e7e0eb5e015a2e9e28f566e36e4da86beta
jlukic
11 years ago
308 changed files with 76142 additions and 38 deletions
@ -0,0 +1,79 @@ |
|||||
|
/* |
||||
|
* # Semantic Breadcrumb |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Breadcrumb |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.breadcrumb { |
||||
|
margin: 1em 0em; |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.ui.breadcrumb:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.breadcrumb:last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Content |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.breadcrumb .divider { |
||||
|
display: inline-block; |
||||
|
opacity: 0.5; |
||||
|
margin: 0em 0.15em 0em; |
||||
|
|
||||
|
font-size: 1em; |
||||
|
color: rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
.ui.breadcrumb a.section { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.ui.breadcrumb .section { |
||||
|
display: inline-block; |
||||
|
margin: 0em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
|
||||
|
/* Loose Coupling */ |
||||
|
.ui.breadcrumb.segment { |
||||
|
display: inline-block; |
||||
|
padding: 0.5em 1em; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.breadcrumb .active.section { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.small.breadcrumb { |
||||
|
font-size: 0.75em; |
||||
|
} |
||||
|
.ui.large.breadcrumb { |
||||
|
font-size: 1.1em; |
||||
|
} |
||||
|
.ui.huge.breadcrumb { |
||||
|
font-size: 1.3em; |
||||
|
} |
||||
@ -0,0 +1,536 @@ |
|||||
|
/* |
||||
|
* # Semantic Form |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 22 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Standard |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------------- |
||||
|
Form |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form { |
||||
|
position: relative; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
.ui.form :first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.form :last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Content |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form > p { |
||||
|
margin: 1em 0; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Field |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .field { |
||||
|
clear: both; |
||||
|
margin: 0em 0em 1em; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Labels |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .field > label { |
||||
|
margin: 0em 0em 0.3em; |
||||
|
display: block; |
||||
|
|
||||
|
color: #555555; |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Standard Inputs |
||||
|
---------------------*/ |
||||
|
|
||||
|
|
||||
|
.ui.form textarea, |
||||
|
.ui.form input[type="text"], |
||||
|
.ui.form input[type="date"], |
||||
|
.ui.form input[type="password"], |
||||
|
.ui.form .ui.input { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.ui.form textarea, |
||||
|
.ui.form input[type="text"], |
||||
|
.ui.form input[type="date"], |
||||
|
.ui.form input[type="password"] { |
||||
|
|
||||
|
margin: 0em; |
||||
|
padding: 0.85em 1.2em; |
||||
|
font-size: 0.875em; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.15); |
||||
|
outline: none; |
||||
|
|
||||
|
|
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
|
||||
|
-webkit-border-radius: 0.3125em; |
||||
|
-moz-border-radius: 0.3125em; |
||||
|
border-radius: 0.3125em; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
|
||||
|
-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
||||
|
-moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
||||
|
box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; |
||||
|
|
||||
|
-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.textarea, |
||||
|
.ui.form textarea { |
||||
|
line-height: 1.33; |
||||
|
min-height: 8em; |
||||
|
height: 12em; |
||||
|
max-height: 24em; |
||||
|
resize: vertical; |
||||
|
} |
||||
|
.ui.form select { |
||||
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
||||
|
} |
||||
|
.ui.form textarea, |
||||
|
.ui.form input[type="checkbox"] { |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Dividers |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .divider { |
||||
|
clear: both; |
||||
|
margin: 1em 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Types of Messages |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .info.message, |
||||
|
.ui.form .warning.message, |
||||
|
.ui.form .error.message { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* Assumptions */ |
||||
|
.ui.form .message:first-child { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Validation Prompt |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .field .prompt.label { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.ui.form .inline.field .prompt { |
||||
|
margin-top: 0em; |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
.ui.form .inline.field .prompt:before { |
||||
|
margin-top: -0.3em; |
||||
|
bottom: auto; |
||||
|
right: auto; |
||||
|
top: 50%; |
||||
|
left: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Focus |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form input[type="text"]:focus, |
||||
|
.ui.form input[type="password"]:focus, |
||||
|
.ui.form textarea:focus { |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
border-color: rgba(0, 0, 0, 0.2); |
||||
|
border-bottom-left-radius: 0; |
||||
|
border-top-left-radius: 0; |
||||
|
|
||||
|
-webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
||||
|
-moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
||||
|
box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Error |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* On Form */ |
||||
|
.ui.form.warning .warning.message { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Warning |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* On Form */ |
||||
|
.ui.form.error .error.message { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/* On Field(s) */ |
||||
|
.ui.form .fields.error .field label, |
||||
|
.ui.form .field.error label { |
||||
|
color: #D95C5C; |
||||
|
} |
||||
|
.ui.form .fields.error .field textarea, |
||||
|
.ui.form .fields.error .field input[type="text"], |
||||
|
.ui.form .fields.error .field input[type="date"], |
||||
|
.ui.form .fields.error .field input[type="password"], |
||||
|
.ui.form .field.error textarea, |
||||
|
.ui.form .field.error input[type="text"], |
||||
|
.ui.form .field.error input[type="date"], |
||||
|
.ui.form .field.error input[type="password"] { |
||||
|
background-color: #FFFAFA; |
||||
|
border-color: #E7BEBE; |
||||
|
border-left: none; |
||||
|
|
||||
|
color: #D95C5C; |
||||
|
padding-left: 1.2em; |
||||
|
|
||||
|
border-bottom-left-radius: 0; |
||||
|
border-top-left-radius: 0; |
||||
|
|
||||
|
-webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
||||
|
-moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
||||
|
box-shadow: 0.3em 0em 0em 0em #D95C5C inset; |
||||
|
|
||||
|
} |
||||
|
.ui.form .field.error textarea:focus, |
||||
|
.ui.form .field.error input[type="text"]:focus, |
||||
|
.ui.form .field.error input[type="password"]:focus { |
||||
|
border-color: rgba(255, 80, 80, 1); |
||||
|
color: rgba(255, 80, 80, 1); |
||||
|
|
||||
|
-webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
||||
|
-moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
||||
|
box-shadow: 0.3em 0em 0em 0em #FF5050 inset; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Empty (Placeholder) |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* browsers require these rules separate */ |
||||
|
.ui.form ::-webkit-input-placeholder { |
||||
|
color: #E0E0E0; |
||||
|
} |
||||
|
.ui.form ::-moz-placeholder { |
||||
|
color: #E0E0E0; |
||||
|
} |
||||
|
.ui.form :focus::-webkit-input-placeholder { |
||||
|
color: #AAAAAA; |
||||
|
} |
||||
|
.ui.form :focus::-moz-placeholder { |
||||
|
color: #AAAAAA; |
||||
|
} |
||||
|
|
||||
|
/* Error Placeholder */ |
||||
|
.ui.form .error ::-webkit-input-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.4); |
||||
|
} |
||||
|
.ui.form .error ::-moz-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.4); |
||||
|
} |
||||
|
.ui.form .error :focus::-webkit-input-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.7); |
||||
|
} |
||||
|
.ui.form .error :focus::-moz-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.7); |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Disabled |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .field :disabled, |
||||
|
.ui.form .field.disabled { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.ui.form .field.disabled label { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.ui.form .field.disabled :disabled { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Loading State |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* On Form */ |
||||
|
.ui.form.loading { |
||||
|
position: relative; |
||||
|
} |
||||
|
.ui.form.loading:after { |
||||
|
position: absolute; |
||||
|
top: 0%; |
||||
|
left: 0%; |
||||
|
content: ''; |
||||
|
|
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Fluid Width |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form.fluid { |
||||
|
width: 100%; |
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------------- |
||||
|
Input w/ attached Button |
||||
|
---------------------------*/ |
||||
|
|
||||
|
.ui.form input.attached { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Date Input |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .date.field > label { |
||||
|
position: relative; |
||||
|
} |
||||
|
.ui.form .date.field > label:after { |
||||
|
position: absolute; |
||||
|
top: 1.4em; |
||||
|
right: 0.5em; |
||||
|
|
||||
|
font-family: 'Icons'; |
||||
|
content: '📅'; /* '\1f4c5' */ |
||||
|
font-size: 1.5em; |
||||
|
font-weight: normal; |
||||
|
color: #CCCCCC; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Inverted Colors |
||||
|
---------------------*/ |
||||
|
.ui.inverted.form label { |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.ui.inverted.form .field.error textarea, |
||||
|
.ui.inverted.form .field.error input[type="text"] { |
||||
|
background-color: #FFCCCC; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Field Groups |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* Grouped Vertically */ |
||||
|
.ui.form .grouped.fields { |
||||
|
margin: 0em 0em 1em; |
||||
|
} |
||||
|
.ui.form .grouped.fields .field { |
||||
|
display: block; |
||||
|
float: none; |
||||
|
margin: 0.5em 0em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Fields |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* Split fields */ |
||||
|
.ui.form .fields { |
||||
|
clear: both; |
||||
|
} |
||||
|
.ui.form .fields:after { |
||||
|
content: ' '; |
||||
|
display: block; |
||||
|
clear: both; |
||||
|
visibility: hidden; |
||||
|
line-height: 0; |
||||
|
height: 0; |
||||
|
} |
||||
|
.ui.form .fields .field { |
||||
|
clear: none; |
||||
|
float: left; |
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.ui.form .fields .field:first-child { |
||||
|
border-left: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/* Other Combinations */ |
||||
|
.ui.form .two.fields .field { |
||||
|
width: 50%; |
||||
|
padding-left: 1%; |
||||
|
padding-right: 1%; |
||||
|
} |
||||
|
|
||||
|
.ui.form .three.fields .field { |
||||
|
width: 33.333%; |
||||
|
padding-left: 1%; |
||||
|
padding-right: 1%; |
||||
|
} |
||||
|
.ui.form .four.fields .field { |
||||
|
width: 25%; |
||||
|
padding-left: 1%; |
||||
|
padding-right: 1%; |
||||
|
} |
||||
|
.ui.form .five.fields .field { |
||||
|
width: 20%; |
||||
|
padding-left: 1%; |
||||
|
padding-right: 1%; |
||||
|
} |
||||
|
|
||||
|
/* override sides, ie8 no last-child */ |
||||
|
.ui.form .fields .field:first-child { |
||||
|
padding-left: 0%; |
||||
|
} |
||||
|
.ui.form .fields .field:last-child { |
||||
|
padding-right: 0%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Inline Fields |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.form .inline.fields .field { |
||||
|
min-height: 1.3em; |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
.ui.form .inline.fields .field > label, |
||||
|
.ui.form .inline.fields .field > p, |
||||
|
.ui.form .inline.fields .field > input, |
||||
|
.ui.form .inline.fields .field > select, |
||||
|
.ui.form .inline.field > label, |
||||
|
.ui.form .inline.field > p, |
||||
|
.ui.form .inline.field > input, |
||||
|
.ui.form .inline.field > select { |
||||
|
|
||||
|
display: inline-block; |
||||
|
width: auto; |
||||
|
|
||||
|
margin-top: 0em; |
||||
|
margin-bottom: 0em; |
||||
|
|
||||
|
vertical-align: middle; |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
.ui.form .inline.fields .field > input, |
||||
|
.ui.form .inline.field > input { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
|
||||
|
.ui.form .inline.fields .field > :first-child, |
||||
|
.ui.form .inline.field > :first-child { |
||||
|
margin: 0em 0.5em 0em 0em; |
||||
|
} |
||||
|
.ui.form .inline.fields .field > :only-child, |
||||
|
.ui.form .inline.field > :only-child { |
||||
|
margin: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Sizes |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* Standard */ |
||||
|
.ui.small.form { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
.ui.small.form textarea, |
||||
|
.ui.small.form input[type="text"], |
||||
|
.ui.small.form input[type="password"], |
||||
|
.ui.small.form label { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
|
||||
|
/* Large */ |
||||
|
.ui.large.form { |
||||
|
font-size: 1.125em; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,655 @@ |
|||||
|
/* |
||||
|
* # Semantic Grid |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: May 6 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Grid |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.grid { |
||||
|
display: block; |
||||
|
text-align: left; |
||||
|
|
||||
|
font-size: 0em; |
||||
|
margin: 0% -1.5%; |
||||
|
padding: 0%; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.ui.grid:after, |
||||
|
.ui.row:after { |
||||
|
content: "."; |
||||
|
display: block; |
||||
|
height: 0; |
||||
|
clear: both; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Columns |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.grid > .column, |
||||
|
.ui.grid > .row > .column { |
||||
|
|
||||
|
display: inline-block; |
||||
|
text-align: left; |
||||
|
font-size: 1rem; |
||||
|
|
||||
|
padding-left: 1.5%; |
||||
|
padding-right: 1.5%; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Rows |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.grid > .row { |
||||
|
display: block; |
||||
|
width: 100% !important; |
||||
|
margin-top: 1.5%; |
||||
|
padding: 1.5% 0% 0%; |
||||
|
font-size: 0rem; |
||||
|
} |
||||
|
.ui.grid > .row:first-child { |
||||
|
padding-top: 0rem; |
||||
|
margin-top: 0rem; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Content |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.grid > .row > img, |
||||
|
.ui.grid > .row > .column > img { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.ui.grid .column > .ui.segment:only-child { |
||||
|
margin: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Page |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.page.grid { |
||||
|
margin: 0%; |
||||
|
padding: 0% 2%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Responsive |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.responsive.grid { |
||||
|
margin-left: 0% !important; |
||||
|
margin-right: 0% !important; |
||||
|
min-width: 320px; |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width : 1000px) { |
||||
|
.ui.responsive.grid { |
||||
|
padding: 0% 5.55%; |
||||
|
} |
||||
|
.ui.responsive.grid > .column, |
||||
|
.ui.responsive.grid > .row > .column { |
||||
|
} |
||||
|
} |
||||
|
@media only screen and (min-width : 1000px) { |
||||
|
.ui.responsive.grid { |
||||
|
padding: 0% 8%; |
||||
|
} |
||||
|
.ui.responsive.grid > .column, |
||||
|
.ui.responsive.grid > .row > .column { |
||||
|
} |
||||
|
} |
||||
|
@media only screen and (min-width : 1500px) { |
||||
|
.ui.responsive.grid { |
||||
|
padding: 0% 13%; |
||||
|
} |
||||
|
.ui.responsive.grid > .column, |
||||
|
.ui.responsive.grid > .row > .column { |
||||
|
} |
||||
|
} |
||||
|
@media only screen and (min-width : 1750px) { |
||||
|
.ui.responsive.grid { |
||||
|
padding: 0% 18%; |
||||
|
} |
||||
|
.ui.responsive.grid > .column, |
||||
|
.ui.responsive.grid > .row > .column { |
||||
|
} |
||||
|
} |
||||
|
@media only screen and (min-width : 2000px) { |
||||
|
.ui.responsive.grid { |
||||
|
padding: 0% 23%; |
||||
|
} |
||||
|
.ui.responsive.grid > .column, |
||||
|
.ui.responsive.grid > .row > .column { |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Column Width |
||||
|
--------------------*/ |
||||
|
|
||||
|
/* Sizing Combinations */ |
||||
|
.ui.grid .one.wide.column { |
||||
|
width: 6.25%; |
||||
|
} |
||||
|
.ui.grid .two.wide.column { |
||||
|
width: 12.5%; |
||||
|
} |
||||
|
.ui.grid .three.wide.column { |
||||
|
width: 18.75%; |
||||
|
} |
||||
|
.ui.grid .four.wide.column { |
||||
|
width: 25%; |
||||
|
} |
||||
|
.ui.grid .five.wide.column { |
||||
|
width: 31.25%; |
||||
|
} |
||||
|
.ui.grid .six.wide.column { |
||||
|
width: 37.5%; |
||||
|
} |
||||
|
.ui.grid .seven.wide.column { |
||||
|
width: 43.75%; |
||||
|
} |
||||
|
.ui.grid .eight.wide.column { |
||||
|
width: 50%; |
||||
|
} |
||||
|
.ui.grid .nine.wide.column { |
||||
|
width: 56.25%; |
||||
|
} |
||||
|
.ui.grid .ten.wide.column { |
||||
|
width: 62.5%; |
||||
|
} |
||||
|
.ui.grid .eleven.wide.column { |
||||
|
width: 68.75%; |
||||
|
} |
||||
|
.ui.grid .twelve.wide.column { |
||||
|
width: 75%; |
||||
|
} |
||||
|
.ui.grid .thirteen.wide.column { |
||||
|
width: 81.25%; |
||||
|
} |
||||
|
.ui.grid .fourteen.wide.column { |
||||
|
width: 87.5%; |
||||
|
} |
||||
|
.ui.grid .fifteen.wide.column { |
||||
|
width: 93.75%; |
||||
|
} |
||||
|
.ui.grid .sixteen.wide.column { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Column Count |
||||
|
--------------------*/ |
||||
|
|
||||
|
/* Standard */ |
||||
|
.ui.grid > .column, |
||||
|
.ui.grid > .row > .column { |
||||
|
width: 6.25%; |
||||
|
} |
||||
|
|
||||
|
/* Assume full width with one column */ |
||||
|
.ui.one.column.grid > .row > .column, |
||||
|
.ui.one.column.grid > .column, |
||||
|
.ui.grid > .one.column.row > .column { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.ui.two.column.grid > .row > .column, |
||||
|
.ui.two.column.grid > .column, |
||||
|
.ui.grid > .two.column.row > .column { |
||||
|
width: 50%; |
||||
|
} |
||||
|
.ui.three.column.grid > .row > .column, |
||||
|
.ui.three.column.grid > .column, |
||||
|
.ui.grid > .three.column.row > .column { |
||||
|
width: 33.3333%; |
||||
|
} |
||||
|
.ui.four.column.grid > .row > .column, |
||||
|
.ui.four.column.grid > .column, |
||||
|
.ui.grid > .four.column.row > .column { |
||||
|
width: 25%; |
||||
|
} |
||||
|
.ui.five.column.grid > .row > .column, |
||||
|
.ui.five.column.grid > .column, |
||||
|
.ui.grid > .five.column.row > .column { |
||||
|
width: 20%; |
||||
|
} |
||||
|
.ui.six.column.grid > .row > .column, |
||||
|
.ui.six.column.grid > .column, |
||||
|
.ui.grid > .six.column.row > .column { |
||||
|
width: 16.66667%; |
||||
|
} |
||||
|
.ui.seven.column.grid > .row > .column, |
||||
|
.ui.seven.column.grid > .column, |
||||
|
.ui.grid > .seven.column.row > .column { |
||||
|
width: 14.2857%; |
||||
|
} |
||||
|
.ui.eight.column.grid > .row > .column, |
||||
|
.ui.eight.column.grid > .column, |
||||
|
.ui.grid > .eight.column.row > .column { |
||||
|
width: 12.5%; |
||||
|
} |
||||
|
.ui.nine.column.grid > .row > .column, |
||||
|
.ui.nine.column.grid > .column, |
||||
|
.ui.grid > .nine.column.row > .column { |
||||
|
width: 11.1111%; |
||||
|
} |
||||
|
.ui.ten.column.grid > .row > .column, |
||||
|
.ui.ten.column.grid > .column, |
||||
|
.ui.grid > .ten.column.row > .column { |
||||
|
width: 10%; |
||||
|
} |
||||
|
.ui.eleven.column.grid > .row > .column, |
||||
|
.ui.eleven.column.grid > .column, |
||||
|
.ui.grid > .eleven.column.row > .column { |
||||
|
width: 9.0909%; |
||||
|
} |
||||
|
.ui.twelve.column.grid > .row > .column, |
||||
|
.ui.twelve.column.grid > .column, |
||||
|
.ui.grid > .twelve.column.row > .column { |
||||
|
width: 8.3333%; |
||||
|
} |
||||
|
.ui.thirteen.column.grid > .row > .column, |
||||
|
.ui.thirteen.column.grid > .column, |
||||
|
.ui.grid > .thirteen.column.row > .column { |
||||
|
width: 7.6923%; |
||||
|
} |
||||
|
.ui.fourteen.column.grid > .row > .column, |
||||
|
.ui.fourteen.column.grid > .column, |
||||
|
.ui.grid > .fourteen.column.row > .column { |
||||
|
width: 7.1428%; |
||||
|
} |
||||
|
.ui.fifteen.column.grid > .row > .column, |
||||
|
.ui.fifteen.column.grid > .column, |
||||
|
.ui.grid > .fifteen.column.row > .column { |
||||
|
width: 6.6666%; |
||||
|
} |
||||
|
.ui.sixteen.column.grid > .row > .column, |
||||
|
.ui.sixteen.column.grid > .column, |
||||
|
.ui.grid > .sixteen.column.row > .column { |
||||
|
width: 6.25%; |
||||
|
} |
||||
|
|
||||
|
/* Assume full width with one column */ |
||||
|
.ui.grid > .column:only-child, |
||||
|
.ui.grid > .row > .column:only-child { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*---------------------- |
||||
|
"Floated" |
||||
|
-----------------------*/ |
||||
|
|
||||
|
.ui.grid .left.floated.column { |
||||
|
float: left; |
||||
|
} |
||||
|
.ui.grid .right.floated.column { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*---------------------- |
||||
|
Divided |
||||
|
-----------------------*/ |
||||
|
|
||||
|
.ui.divided.grid, |
||||
|
.ui.divided.grid > .row { |
||||
|
display: table; |
||||
|
width: 100%; |
||||
|
margin-left: 0% !important; |
||||
|
margin-right: 0% !important; |
||||
|
} |
||||
|
.ui.divided.grid > .column:not(.row), |
||||
|
.ui.divided.grid > .row > .column { |
||||
|
display: table-cell; |
||||
|
-webkit-box-shadow: |
||||
|
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
||||
|
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
||||
|
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
||||
|
; |
||||
|
box-shadow: |
||||
|
-1px 0px 0px 0px rgba(0, 0, 0, 0.1), |
||||
|
-2px 0px 0px 0px rgba(255, 255, 255, 0.8) |
||||
|
; |
||||
|
} |
||||
|
.ui.divided.grid > .column.row { |
||||
|
display: table; |
||||
|
} |
||||
|
.ui.divided.grid > .column:first-child, |
||||
|
.ui.divided.grid > .row > .column:first-child { |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/* Vertically Divided */ |
||||
|
.ui.vertically.divided.grid > .row { |
||||
|
-webkit-box-shadow: |
||||
|
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px -1px 0px 0px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important |
||||
|
; |
||||
|
} |
||||
|
.ui.vertically.divided.grid > .row > .column, |
||||
|
.ui.vertically.divided.grid > .column:not(.row), |
||||
|
.ui.vertically.divided.grid > .row:first-child { |
||||
|
-webkit-box-shadow: none !important; |
||||
|
-moz-box-shadow: none !important; |
||||
|
box-shadow: none !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*---------------------- |
||||
|
Celled |
||||
|
-----------------------*/ |
||||
|
|
||||
|
.ui.celled.grid { |
||||
|
display: table; |
||||
|
width: 100%; |
||||
|
margin-left: 0% !important; |
||||
|
margin-right: 0% !important; |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; |
||||
|
-moz-box-shadow: 0px 0px 0px 1px #DFDFDF; |
||||
|
box-shadow: 0px 0px 0px 1px #DFDFDF; |
||||
|
} |
||||
|
.ui.celled.grid > .row, |
||||
|
.ui.celled.grid > .column.row, |
||||
|
.ui.celled.grid > .column.row:first-child { |
||||
|
display: table; |
||||
|
width: 100%; |
||||
|
margin-top: 0em; |
||||
|
padding-top: 0em; |
||||
|
-webkit-box-shadow: 0px -1px 0px 0px #DFDFDF; |
||||
|
-moz-box-shadow: 0px -1px 0px 0px #DFDFDF; |
||||
|
box-shadow: 0px -1px 0px 0px #DFDFDF; |
||||
|
} |
||||
|
.ui.celled.grid > .column:not(.row), |
||||
|
.ui.celled.grid > .row > .column { |
||||
|
display: table-cell; |
||||
|
padding: 0.75em; |
||||
|
-webkit-box-shadow: -1px 0px 0px 0px #DFDFDF; |
||||
|
-moz-box-shadow: -1px 0px 0px 0px #DFDFDF; |
||||
|
box-shadow: -1px 0px 0px 0px #DFDFDF; |
||||
|
} |
||||
|
.ui.celled.grid > .column:first-child, |
||||
|
.ui.celled.grid > .row > .column:first-child { |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.ui.celled.responsive.grid { |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/*---------------------- |
||||
|
Horizontally Centered |
||||
|
-----------------------*/ |
||||
|
|
||||
|
/* Vertical Centered */ |
||||
|
.ui.left.aligned.grid, |
||||
|
.ui.left.aligned.grid > .row > .column, |
||||
|
.ui.left.aligned.grid > .column, |
||||
|
.ui.grid .left.aligned.column, |
||||
|
.ui.grid > .left.aligned.row > .column { |
||||
|
text-align: left; |
||||
|
} |
||||
|
.ui.center.aligned.grid, |
||||
|
.ui.center.aligned.grid > .row > .column, |
||||
|
.ui.center.aligned.grid > .column, |
||||
|
.ui.grid .center.aligned.column, |
||||
|
.ui.grid > .center.aligned.row > .column { |
||||
|
text-align: center; |
||||
|
} |
||||
|
.ui.right.aligned.grid, |
||||
|
.ui.right.aligned.grid > .row > .column, |
||||
|
.ui.right.aligned.grid > .column, |
||||
|
.ui.grid .right.aligned.column, |
||||
|
.ui.grid > .right.aligned.row > .column { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*---------------------- |
||||
|
Vertically Centered |
||||
|
-----------------------*/ |
||||
|
|
||||
|
/* Vertical Centered */ |
||||
|
.ui.top.aligned.grid, |
||||
|
.ui.top.aligned.grid > .row > .column, |
||||
|
.ui.top.aligned.grid > .column, |
||||
|
.ui.grid .top.aligned.column, |
||||
|
.ui.grid > .top.aligned.row > .column { |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.ui.middle.aligned.grid, |
||||
|
.ui.middle.aligned.grid > .row > .column, |
||||
|
.ui.middle.aligned.grid > .column, |
||||
|
.ui.grid .middle.aligned.column, |
||||
|
.ui.grid > .middle.aligned.row > .column { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.ui.bottom.aligned.grid, |
||||
|
.ui.bottom.aligned.grid > .row > .column, |
||||
|
.ui.bottom.aligned.grid > .column, |
||||
|
.ui.grid .bottom.aligned.column, |
||||
|
.ui.grid > .bottom.aligned.row > .column { |
||||
|
vertical-align: bottom; |
||||
|
} |
||||
|
|
||||
|
/*---------------------- |
||||
|
Equal Height Columns |
||||
|
-----------------------*/ |
||||
|
|
||||
|
.ui.grid > .equal.height.row { |
||||
|
display: table; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.ui.grid > .equal.height.row > .column { |
||||
|
display: table-cell; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*---------------------- |
||||
|
Only (Device) |
||||
|
-----------------------*/ |
||||
|
|
||||
|
/* Mobile Only */ |
||||
|
@media only screen and (max-width : 768px) { |
||||
|
.ui.mobile.only.grid, |
||||
|
.ui.grid > .mobile.only.row { |
||||
|
display: block !important; |
||||
|
} |
||||
|
.ui.grid > .row > .mobile.only.column { |
||||
|
display: inline-block !important; |
||||
|
} |
||||
|
.ui.divided.mobile.only.grid, |
||||
|
.ui.celled.mobile.only.grid, |
||||
|
.ui.divided.mobile.only.grid .row, |
||||
|
.ui.celled.mobile.only.grid .row, |
||||
|
.ui.divided.grid .mobile.only.row, |
||||
|
.ui.celled.grid .mobile.only.row, |
||||
|
.ui.grid .mobile.only.equal.height.row, |
||||
|
.ui.mobile.only.grid .equal.height.row { |
||||
|
display: table !important; |
||||
|
} |
||||
|
.ui.divided.grid > .row > .mobile.only.column, |
||||
|
.ui.celled.grid > .row > .mobile.only.column, |
||||
|
.ui.divided.mobile.only.grid > .row > .column, |
||||
|
.ui.celled.mobile.only.grid > .row > .column, |
||||
|
.ui.divided.mobile.only.grid > .column, |
||||
|
.ui.celled.mobile.only.grid > .column { |
||||
|
display: table-cell !important; |
||||
|
} |
||||
|
} |
||||
|
@media only screen and (min-width : 768px) { |
||||
|
.ui.mobile.only.grid, |
||||
|
.ui.grid > .mobile.only.row, |
||||
|
.ui.grid > .row > .mobile.only.column { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
/* Tablet Only */ |
||||
|
@media only screen and (min-width : 768px) and (max-width : 998px) { |
||||
|
.ui.tablet.only.grid, |
||||
|
.ui.grid > .tablet.only.row { |
||||
|
display: block !important; |
||||
|
} |
||||
|
.ui.grid > .row > .tablet.only.column { |
||||
|
display: inline-block !important; |
||||
|
} |
||||
|
.ui.divided.tablet.only.grid, |
||||
|
.ui.celled.tablet.only.grid, |
||||
|
.ui.divided.tablet.only.grid .row, |
||||
|
.ui.celled.tablet.only.grid .row, |
||||
|
.ui.divided.grid .tablet.only.row, |
||||
|
.ui.celled.grid .tablet.only.row, |
||||
|
.ui.grid .tablet.only.equal.height.row, |
||||
|
.ui.tablet.only.grid .equal.height.row { |
||||
|
display: table !important; |
||||
|
} |
||||
|
.ui.divided.grid > .row > .tablet.only.column, |
||||
|
.ui.celled.grid > .row > .tablet.only.column, |
||||
|
.ui.divided.tablet.only.grid > .row > .column, |
||||
|
.ui.celled.tablet.only.grid > .row > .column, |
||||
|
.ui.divided.tablet.only.grid > .column, |
||||
|
.ui.celled.tablet.only.grid > .column { |
||||
|
display: table-cell !important; |
||||
|
} |
||||
|
} |
||||
|
@media only screen and (max-width : 768px), (min-width: 998px) { |
||||
|
.ui.tablet.only.grid, |
||||
|
.ui.grid > .tablet.only.row, |
||||
|
.ui.grid > .row > .tablet.only.column { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
/* Computer Only */ |
||||
|
@media only screen and (min-width : 998px) { |
||||
|
.ui.computer.only.grid, |
||||
|
.ui.grid > .computer.only.row { |
||||
|
display: block !important; |
||||
|
} |
||||
|
.ui.grid > .row > .computer.only.column { |
||||
|
display: inline-block !important; |
||||
|
} |
||||
|
.ui.divided.computer.only.grid, |
||||
|
.ui.celled.computer.only.grid, |
||||
|
.ui.divided.computer.only.grid .row, |
||||
|
.ui.celled.computer.only.grid .row, |
||||
|
.ui.divided.grid .computer.only.row, |
||||
|
.ui.celled.grid .computer.only.row, |
||||
|
.ui.grid .computer.only.equal.height.row, |
||||
|
.ui.computer.only.grid .equal.height.row { |
||||
|
display: table !important; |
||||
|
} |
||||
|
.ui.divided.grid > .row > .computer.only.column, |
||||
|
.ui.celled.grid > .row > .computer.only.column, |
||||
|
.ui.divided.computer.only.grid > .row > .column, |
||||
|
.ui.celled.computer.only.grid > .row > .column, |
||||
|
.ui.divided.computer.only.grid > .column, |
||||
|
.ui.celled.computer.only.grid > .column { |
||||
|
display: table-cell !important; |
||||
|
} |
||||
|
} |
||||
|
@media only screen and (max-width : 998px) { |
||||
|
.ui.computer.only.grid, |
||||
|
.ui.grid > .computer.only.row, |
||||
|
.ui.grid > .row > .computer.only.column { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Padded |
||||
|
--------------------*/ |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Stackable |
||||
|
--------------------*/ |
||||
|
|
||||
|
@media only screen and (max-width : 768px) { |
||||
|
.ui.stackable.grid { |
||||
|
display: block !important; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
.ui.stackable.grid .row > .column, |
||||
|
.ui.stackable.grid > .column { |
||||
|
display: block !important; |
||||
|
width: auto !important; |
||||
|
|
||||
|
margin: 1.5em 5% 0em !important; |
||||
|
padding: 1.5em 0em 0em !important; |
||||
|
|
||||
|
-webkit-box-shadow: none !important; |
||||
|
-moz-box-shadow: none !important; |
||||
|
box-shadow: none !important; |
||||
|
} |
||||
|
.ui.stackable.divided.grid .column, |
||||
|
.ui.stackable.celled.grid .column { |
||||
|
border-top: 1px dotted rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.ui.stackable.grid > .row:first-child > .column:first-child, |
||||
|
.ui.stackable.grid > .column:first-child { |
||||
|
margin-top: 0em !important; |
||||
|
padding-top: 0em !important; |
||||
|
} |
||||
|
.ui.stackable.divided.grid > .row:first-child > .column:first-child, |
||||
|
.ui.stackable.celled.grid > .row:first-child > .column:first-child, |
||||
|
.ui.stackable.divided.grid > .column:first-child, |
||||
|
.ui.stackable.celled.grid > .column:first-child { |
||||
|
border-top: none !important; |
||||
|
} |
||||
|
|
||||
|
/* Remove pointers from vertical menus */ |
||||
|
.ui.stackable.grid .vertical.pointing.menu .item:after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
b831015a80e29d566157879d38817f9bc4cc3bd6 |
||||
@ -0,0 +1,337 @@ |
|||||
|
/* |
||||
|
* # Semantic Message |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 29 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Message |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.message { |
||||
|
position: relative; |
||||
|
min-height: 18px; |
||||
|
margin: 1em 0em; |
||||
|
|
||||
|
height: auto; |
||||
|
background-color: #EFEFEF; |
||||
|
padding: 1em; |
||||
|
|
||||
|
line-height: 1.33; |
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
-webkit-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
background 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
background 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
background 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
background 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
background 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-border-radius: 0.325em 0.325em 0.325em 0.325em; |
||||
|
-moz-border-radius: 0.325em 0.325em 0.325em 0.325em; |
||||
|
border-radius: 0.325em 0.325em 0.325em 0.325em; |
||||
|
} |
||||
|
|
||||
|
.ui.message:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.message:last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
|
||||
|
/* block with headers */ |
||||
|
.ui.message .header { |
||||
|
margin: 0em; |
||||
|
font-size: 1.33em; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* block with paragraphs */ |
||||
|
.ui.message p { |
||||
|
opacity: 0.85; |
||||
|
margin: 0.3em 0em; |
||||
|
} |
||||
|
.ui.message > :first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.message > :last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
/* block with child list */ |
||||
|
.ui.message ul.list { |
||||
|
opacity: 0.85; |
||||
|
list-style-position: inside; |
||||
|
margin: 0.2em 0em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
.ui.message ul.list li { |
||||
|
position: relative; |
||||
|
list-style-type: none; |
||||
|
margin: 0em 0em 0em 1em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
.ui.message ul.list li:before { |
||||
|
position: absolute; |
||||
|
content: '\2022'; |
||||
|
top: -0.05em; |
||||
|
left: -0.8em; |
||||
|
|
||||
|
height: 100%; |
||||
|
vertical-align: baseline; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.ui.message ul.list li:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
|
||||
|
/* dismissable block */ |
||||
|
.ui.message > .icon.close { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: 1em; |
||||
|
right: 0.5em; |
||||
|
opacity: 0.7; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
} |
||||
|
.ui.message > .icon.close:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.message.visible, |
||||
|
.ui.header.visible { |
||||
|
display: block !important; |
||||
|
} |
||||
|
.ui.message.hidden, |
||||
|
.ui.header.hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Compact |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.compact.message { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Attached |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.attached.message { |
||||
|
margin-left: -1px; |
||||
|
margin-right: -1px; |
||||
|
margin-bottom: -1px; |
||||
|
|
||||
|
-webkit-border-radius: 0.325em 0.325em 0em 0em; |
||||
|
-moz-border-radius: 0.325em 0.325em 0em 0em; |
||||
|
border-radius: 0.325em 0.325em 0em 0em; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
box-shadow: |
||||
|
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
} |
||||
|
.ui.bottom.attached.message { |
||||
|
margin-top: -1px; |
||||
|
|
||||
|
-webkit-border-radius: 0em 0em 0.325em 0.325em; |
||||
|
-moz-border-radius: 0em 0em 0.325em 0.325em; |
||||
|
border-radius: 0em 0em 0.325em 0.325em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Icon |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.icon.message { |
||||
|
display: table; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.ui.icon.message > .icon { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
font-size: 3.8em; |
||||
|
padding-right: 0.4em; |
||||
|
opacity: 0.2; |
||||
|
} |
||||
|
.ui.icon.message > .content { |
||||
|
display: table-cell; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Inverted |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.inverted.message { |
||||
|
background-color: rgba(255, 255, 255, 0.05); |
||||
|
color: rgba(255, 255, 255, 0.95); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Floating |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.floating.message { |
||||
|
-webkit-box-shadow: |
||||
|
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
||||
|
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
||||
|
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
||||
|
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Colors |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.black.message { |
||||
|
background-color: #333333; |
||||
|
color: rgba(255, 255, 255, 0.95); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Types |
||||
|
---------------*/ |
||||
|
.ui.blue.message, |
||||
|
.ui.info.message { |
||||
|
background-color: #E6F4F9; |
||||
|
color: #4D8796; |
||||
|
} |
||||
|
|
||||
|
/* Green Text Block */ |
||||
|
.ui.green.message { |
||||
|
background-color: #DEFCD5; |
||||
|
color: #52A954; |
||||
|
} |
||||
|
|
||||
|
/* Yellow Text Block */ |
||||
|
.ui.yellow.message, |
||||
|
.ui.warning.message { |
||||
|
background-color: #F6F3D5; |
||||
|
color: #96904D; |
||||
|
} |
||||
|
/* Red Text Block */ |
||||
|
.ui.red.message { |
||||
|
background-color: #F1D7D7; |
||||
|
|
||||
|
color: #A95252; |
||||
|
} |
||||
|
|
||||
|
/* Success Text Block */ |
||||
|
.ui.success.message, |
||||
|
.ui.positive.message { |
||||
|
background-color: #5BBD72; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
/* Error Text Block */ |
||||
|
.ui.error.message, |
||||
|
.ui.negative.message { |
||||
|
background-color: #D95C5C; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Sizes |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.small.message { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
.ui.message { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
.ui.large.message { |
||||
|
font-size: 1.125em; |
||||
|
} |
||||
|
.ui.huge.message { |
||||
|
font-size: 1.5em; |
||||
|
} |
||||
|
.ui.massive.message { |
||||
|
font-size: 2em; |
||||
|
} |
||||
@ -0,0 +1,532 @@ |
|||||
|
/* |
||||
|
* # Semantic Table |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 24 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Table |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Prototype */ |
||||
|
.ui.table { |
||||
|
width: 100%; |
||||
|
border-collapse: collapse; |
||||
|
} |
||||
|
|
||||
|
/* Table Content */ |
||||
|
.ui.table th, |
||||
|
.ui.table tr, |
||||
|
.ui.table td { |
||||
|
border-collapse: collapse; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-transition: all 0.1s ease-out; |
||||
|
-moz-transition: all 0.1s ease-out; |
||||
|
-o-transition: all 0.1s ease-out; |
||||
|
-ms-transition: all 0.1s ease-out; |
||||
|
transition: all 0.1s ease-out; |
||||
|
} |
||||
|
|
||||
|
/* Headers */ |
||||
|
.ui.table thead { |
||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
||||
|
} |
||||
|
.ui.table th { |
||||
|
cursor: auto; |
||||
|
|
||||
|
background-color: rgba(0, 0, 0, 0.03); |
||||
|
|
||||
|
text-align: left; |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
padding: 0.5em 0.7em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.ui.table thead th:first-child { |
||||
|
border-radius: 5px 0px 0px 0px; |
||||
|
} |
||||
|
.ui.table thead th:last-child { |
||||
|
border-radius: 0px 5px 0px 0px; |
||||
|
} |
||||
|
.ui.table tfoot th:first-child { |
||||
|
border-radius: 0px 0px 0px 5px; |
||||
|
} |
||||
|
.ui.table tfoot th:last-child { |
||||
|
border-radius: 0px 0px 5px 0px; |
||||
|
} |
||||
|
|
||||
|
/* Table Cells */ |
||||
|
.ui.table td { |
||||
|
padding: 0.40em 0.7em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
/* Footer */ |
||||
|
.ui.table tfoot { |
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.03); |
||||
|
} |
||||
|
.ui.table tfoot th { |
||||
|
font-weight: normal; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
/* Table Striping */ |
||||
|
.ui.table tbody tr:nth-child(2n) { |
||||
|
background-color: rgba(0, 0, 50, 0.02); |
||||
|
} |
||||
|
|
||||
|
/* Icons */ |
||||
|
.ui.table > .icon { |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
.ui.table > .icon:only-child { |
||||
|
margin: 0em; |
||||
|
} |
||||
|
|
||||
|
/* Table Segment */ |
||||
|
.ui.table.segment:after { |
||||
|
display: none; |
||||
|
} |
||||
|
.ui.table.segment.stacked:after { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Hover |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Sortable */ |
||||
|
.ui.sortable.table thead th:hover { |
||||
|
background-image: none; |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
.ui.sortable.table th.disabled:hover { |
||||
|
cursor: auto; |
||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
text-align: left; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Positive |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.table tr.positive, |
||||
|
.ui.table td.positive { |
||||
|
-webkit-box-shadow: 2px 0px 0px #119000 inset; |
||||
|
-moz-box-shadow: 2px 0px 0px #119000 inset; |
||||
|
box-shadow: 2px 0px 0px #119000 inset; |
||||
|
} |
||||
|
.ui.table tr.positive td, |
||||
|
.ui.table td.positive { |
||||
|
background-color: #F2F8F0 !important; |
||||
|
color: #119000 !important; |
||||
|
} |
||||
|
.ui.celled.table tr.positive:hover td, |
||||
|
.ui.celled.table tr:hover td.positive, |
||||
|
.ui.table tr.positive:hover td, |
||||
|
.ui.table td:hover.positive, |
||||
|
.ui.table th:hover.positive { |
||||
|
background-color: #ECF5E9 !important; |
||||
|
color: #119000 !important; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Negative |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.table tr.negative, |
||||
|
.ui.table td.negative { |
||||
|
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
||||
|
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
||||
|
box-shadow: 2px 0px 0px #CD2929 inset; |
||||
|
} |
||||
|
.ui.table tr.negative td, |
||||
|
.ui.table td.negative { |
||||
|
background-color: #F9F4F4; |
||||
|
color: #CD2929 !important; |
||||
|
} |
||||
|
.ui.celled.table tr.negative:hover td, |
||||
|
.ui.celled.table tr:hover td.negative, |
||||
|
.ui.table tr.negative:hover td, |
||||
|
.ui.table td:hover.negative, |
||||
|
.ui.table th:hover.negative { |
||||
|
background-color: #F2E8E8 !important; |
||||
|
color: #CD2929 !important; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Error |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.table tr.error, |
||||
|
.ui.table td.error { |
||||
|
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
||||
|
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
||||
|
box-shadow: 2px 0px 0px #CD2929 inset; |
||||
|
} |
||||
|
.ui.table tr.error td, |
||||
|
.ui.table td.error, |
||||
|
.ui.table th.error { |
||||
|
background-color: #F9F4F4 !important; |
||||
|
color: #CD2929 !important; |
||||
|
} |
||||
|
.ui.celled.table tr.error:hover td, |
||||
|
.ui.celled.table tr:hover td.error, |
||||
|
.ui.table tr.error:hover td, |
||||
|
.ui.table td:hover.error, |
||||
|
.ui.table th:hover.error { |
||||
|
background-color: #F2E8E8 !important; |
||||
|
color: #CD2929 !important; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Warning |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.table tr.warning, |
||||
|
.ui.table td.warning { |
||||
|
-webkit-box-shadow: 2px 0px 0px #7D6C00 inset; |
||||
|
-moz-box-shadow: 2px 0px 0px #7D6C00 inset; |
||||
|
box-shadow: 2px 0px 0px #7D6C00 inset; |
||||
|
} |
||||
|
.ui.table tr.warning td, |
||||
|
.ui.table td.warning, |
||||
|
.ui.table th.warning { |
||||
|
background-color: #FBF6E9; |
||||
|
color: #7D6C00 !important; |
||||
|
} |
||||
|
.ui.celled.table tr.warning:hover td, |
||||
|
.ui.celled.table tr:hover td.warning, |
||||
|
.ui.table tr.warning:hover td, |
||||
|
.ui.table td:hover.warning, |
||||
|
.ui.table th:hover.warning { |
||||
|
background-color: #F3EDDC !important; |
||||
|
color: #7D6C00 !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Active |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.table tr.active, |
||||
|
.ui.table td.active { |
||||
|
-webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
||||
|
-moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
||||
|
box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
||||
|
} |
||||
|
|
||||
|
.ui.table tr.active td, |
||||
|
.ui.table tr td.active { |
||||
|
background-color: #E0E0E0 !important; |
||||
|
color: rgba(50, 50, 50, 0.9); |
||||
|
/* border-color: rgba(0, 0, 0, 0.15) !important; */ |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Disabled |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.table tr.disabled td, |
||||
|
.ui.table tr td.disabled, |
||||
|
.ui.table tr.disabled:hover td, |
||||
|
.ui.table tr:hover td.disabled { |
||||
|
color: rgba(150, 150, 150, 0.3); |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Column Count |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.two.column.table td { |
||||
|
width: 50%; |
||||
|
} |
||||
|
.ui.three.column.table td { |
||||
|
width: 33.3333%; |
||||
|
} |
||||
|
.ui.four.column.table td { |
||||
|
width: 25%; |
||||
|
} |
||||
|
.ui.five.column.table td { |
||||
|
width: 20%; |
||||
|
} |
||||
|
.ui.six.column.table td { |
||||
|
width: 16.66667%; |
||||
|
} |
||||
|
.ui.seven.column.table td { |
||||
|
width: 14.2857%; |
||||
|
} |
||||
|
.ui.eight.column.table td { |
||||
|
width: 12.5%; |
||||
|
} |
||||
|
.ui.nine.column.table td { |
||||
|
width: 11.1111%; |
||||
|
} |
||||
|
.ui.ten.column.table td { |
||||
|
width: 10%; |
||||
|
} |
||||
|
.ui.eleven.column.table td { |
||||
|
width: 9.0909%; |
||||
|
} |
||||
|
.ui.twelve.column.table td { |
||||
|
width: 8.3333%; |
||||
|
} |
||||
|
.ui.thirteen.column.table td { |
||||
|
width: 7.6923%; |
||||
|
} |
||||
|
.ui.fourteen.column.table td { |
||||
|
width: 7.1428%; |
||||
|
} |
||||
|
.ui.fifteen.column.table td { |
||||
|
width: 6.6666%; |
||||
|
} |
||||
|
.ui.sixteen.column.table td { |
||||
|
width: 6.25%; |
||||
|
} |
||||
|
|
||||
|
/* Column Width */ |
||||
|
.ui.table th.one.wide, |
||||
|
.ui.table td.one.wide { |
||||
|
width: 6.25%; |
||||
|
} |
||||
|
.ui.table th.two.wide, |
||||
|
.ui.table td.two.wide { |
||||
|
width: 12.5%; |
||||
|
} |
||||
|
.ui.table th.three.wide, |
||||
|
.ui.table td.three.wide { |
||||
|
width: 18.75%; |
||||
|
} |
||||
|
.ui.table th.four.wide, |
||||
|
.ui.table td.four.wide { |
||||
|
width: 25%; |
||||
|
} |
||||
|
.ui.table th.five.wide, |
||||
|
.ui.table td.five.wide { |
||||
|
width: 31.25%; |
||||
|
} |
||||
|
.ui.table th.six.wide, |
||||
|
.ui.table td.six.wide { |
||||
|
width: 37.5%; |
||||
|
} |
||||
|
.ui.table th.seven.wide, |
||||
|
.ui.table td.seven.wide { |
||||
|
width: 43.75%; |
||||
|
} |
||||
|
.ui.table th.eight.wide, |
||||
|
.ui.table td.eight.wide { |
||||
|
width: 50%; |
||||
|
} |
||||
|
.ui.table th.nine.wide, |
||||
|
.ui.table td.nine.wide { |
||||
|
width: 56.25%; |
||||
|
} |
||||
|
.ui.table th.ten.wide, |
||||
|
.ui.table td.ten.wide { |
||||
|
width: 62.5%; |
||||
|
} |
||||
|
.ui.table th.eleven.wide, |
||||
|
.ui.table td.eleven.wide { |
||||
|
width: 68.75%; |
||||
|
} |
||||
|
.ui.table th.twelve.wide, |
||||
|
.ui.table td.twelve.wide { |
||||
|
width: 75%; |
||||
|
} |
||||
|
.ui.table th.thirteen.wide, |
||||
|
.ui.table td.thirteen.wide { |
||||
|
width: 81.25%; |
||||
|
} |
||||
|
.ui.table th.fourteen.wide, |
||||
|
.ui.table td.fourteen.wide { |
||||
|
width: 87.5%; |
||||
|
} |
||||
|
.ui.table th.fifteen.wide, |
||||
|
.ui.table td.fifteen.wide { |
||||
|
width: 93.75%; |
||||
|
} |
||||
|
.ui.table th.sixteen.wide, |
||||
|
.ui.table td.sixteen.wide { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Celled |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.celled.table { |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
.ui.celled.table tbody tr, |
||||
|
.ui.celled.table tfoot tr { |
||||
|
border: none; |
||||
|
} |
||||
|
.ui.celled.table th, |
||||
|
.ui.celled.table tbody td { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* Coupling with segment */ |
||||
|
.ui.celled.table.segment th { |
||||
|
border: none; |
||||
|
} |
||||
|
.ui.celled.table.segment tbody td:first-child { |
||||
|
border-left: none; |
||||
|
} |
||||
|
.ui.celled.table.segment tbody td:last-child { |
||||
|
border-right: none; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Sortable |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.sortable.table thead th { |
||||
|
cursor: pointer; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.ui.sortable.table thead th.sorted, |
||||
|
.ui.sortable.table thead th.sorted:hover { |
||||
|
-webkit-user-select: none; |
||||
|
-moz-user-select: none; |
||||
|
-ms-user-select: none; |
||||
|
user-select: none; |
||||
|
} |
||||
|
|
||||
|
.ui.sortable.table thead th:after { |
||||
|
display: inline-block; |
||||
|
content: ''; |
||||
|
width: 1em; |
||||
|
opacity: 0.8; |
||||
|
|
||||
|
margin: 0em 0em 0em 0.5em; |
||||
|
|
||||
|
font-family: 'Icons'; |
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
text-decoration: inherit; |
||||
|
} |
||||
|
.ui.sortable.table thead th.ascending:after { |
||||
|
content: '\25b4'; |
||||
|
} |
||||
|
.ui.sortable.table thead th.descending:after { |
||||
|
content: '\25be'; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Inverted |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Text Color */ |
||||
|
.ui.inverted.table td { |
||||
|
color: rgba(255, 255, 255, 0.9); |
||||
|
} |
||||
|
.ui.inverted.table th { |
||||
|
background-color: rgba(0, 0, 0, 0.15); |
||||
|
color: rgba(255, 255, 255, 0.9); |
||||
|
} |
||||
|
|
||||
|
/* Stripes */ |
||||
|
.ui.inverted.table tbody tr:nth-child(2n) { |
||||
|
background-color: rgba(255, 255, 255, 0.06); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Definition |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.definition.table { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.ui.definition.table tr { |
||||
|
border-top: 1px solid rgba(0, 0, 0 ,0.1); |
||||
|
} |
||||
|
.ui.definition.table td:first-child { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Collapsing |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.collapsing.table { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Basic |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.basic.table th { |
||||
|
background-color: transparent; |
||||
|
padding: 0.5em; |
||||
|
} |
||||
|
.ui.basic.table tbody tr { |
||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
||||
|
} |
||||
|
.ui.basic.table td { |
||||
|
padding: 0.8em 0.5em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Padded |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.padded.table th, |
||||
|
.ui.padded.table td { |
||||
|
padding: 0.8em 1em; |
||||
|
} |
||||
|
|
||||
|
.ui.compact.table th { |
||||
|
padding: 0.3em 0.5em; |
||||
|
} |
||||
|
.ui.compact.table td { |
||||
|
padding: 0.2em 0.5em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Sizes |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Small */ |
||||
|
.ui.small.table { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
|
||||
|
/* Standard */ |
||||
|
.ui.table { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
|
||||
|
/* Large */ |
||||
|
.ui.large.table { |
||||
|
font-size: 1.1em; |
||||
|
} |
||||
@ -0,0 +1,721 @@ |
|||||
|
/* |
||||
|
* # Semantic - Font Awesome |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: May 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
/*! |
||||
|
* Font Awesome 3.2.1 |
||||
|
* the iconic font designed for Bootstrap |
||||
|
* ------------------------------------------------------------------------------ |
||||
|
* The full suite of pictographic icons, examples, and documentation can be |
||||
|
* found at http://fontawesome.io. Stay up to date on Twitter at |
||||
|
* http://twitter.com/fontawesome. |
||||
|
* |
||||
|
* License |
||||
|
* ------------------------------------------------------------------------------ |
||||
|
* - The Font Awesome font is licensed under SIL OFL 1.1 - |
||||
|
* http://scripts.sil.org/OFL |
||||
|
|
||||
|
/******************************* |
||||
|
Icon |
||||
|
*******************************/ |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Awesome Icons'; |
||||
|
src: url(../fonts/awesome.awesome.icons.eot); |
||||
|
src: |
||||
|
url(../fonts/awesome.icons.eot?#iefix) format('embedded-opentype'), |
||||
|
url(../fonts/awesome.icons.woff) format('woff'), |
||||
|
url(../fonts/awesome.icons.ttf) format('truetype'), |
||||
|
url(../fonts/awesome.icons.svg#icons) format('svg') |
||||
|
; |
||||
|
|
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
font-variant: normal; |
||||
|
text-decoration: inherit; |
||||
|
text-transform: none; |
||||
|
} |
||||
|
|
||||
|
i.awesome.icon { |
||||
|
display: inline-block; |
||||
|
opacity: 0.75; |
||||
|
|
||||
|
margin: 0em 0.25em 0em 0em; |
||||
|
|
||||
|
width: 1.23em; |
||||
|
height: 1em; |
||||
|
|
||||
|
font-family: 'Awesome Icons'; |
||||
|
font-style: normal; |
||||
|
line-height: 1; |
||||
|
font-weight: normal; |
||||
|
text-decoration: inherit; |
||||
|
text-align: center; |
||||
|
|
||||
|
speak: none; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-font-smoothing: antialiased; |
||||
|
font-smoothing: antialiased; |
||||
|
} |
||||
|
|
||||
|
i.awesome.icon.adjust:before { content: "\f042"; } |
||||
|
i.awesome.icon.adn:before { content: "\f170"; } |
||||
|
i.awesome.icon.align.center:before { content: "\f037"; } |
||||
|
i.awesome.icon.align.justify:before { content: "\f039"; } |
||||
|
i.awesome.icon.align.left:before { content: "\f036"; } |
||||
|
i.awesome.icon.align.right:before { content: "\f038"; } |
||||
|
i.awesome.icon.ambulance:before { content: "\f0f9"; } |
||||
|
i.awesome.icon.anchor:before { content: "\f13d"; } |
||||
|
i.awesome.icon.android:before { content: "\f17b"; } |
||||
|
i.awesome.icon.angle.down:before { content: "\f107"; } |
||||
|
i.awesome.icon.angle.left:before { content: "\f104"; } |
||||
|
i.awesome.icon.angle.right:before { content: "\f105"; } |
||||
|
i.awesome.icon.angle.up:before { content: "\f106"; } |
||||
|
i.awesome.icon.apple:before { content: "\f179"; } |
||||
|
i.awesome.icon.archive:before { content: "\f187"; } |
||||
|
i.awesome.icon.arrow.down:before { content: "\f063"; } |
||||
|
i.awesome.icon.arrow.left:before { content: "\f060"; } |
||||
|
i.awesome.icon.arrow.right:before { content: "\f061"; } |
||||
|
i.awesome.icon.arrow.up:before { content: "\f062"; } |
||||
|
i.awesome.icon.asterisk:before { content: "\f069"; } |
||||
|
i.awesome.icon.backward:before { content: "\f04a"; } |
||||
|
i.awesome.icon.ban.circle:before { content: "\f05e"; } |
||||
|
i.awesome.icon.bar.chart:before { content: "\f080"; } |
||||
|
i.awesome.icon.barcode:before { content: "\f02a"; } |
||||
|
i.awesome.icon.beaker:before { content: "\f0c3"; } |
||||
|
i.awesome.icon.beer:before { content: "\f0fc"; } |
||||
|
i.awesome.icon.bell.alternate:before { content: "\f0f3"; } |
||||
|
i.awesome.icon.bell:before { content: "\f0a2"; } |
||||
|
i.awesome.icon.bitbucket.sign:before { content: "\f172"; } |
||||
|
i.awesome.icon.bitbucket:before { content: "\f171"; } |
||||
|
i.awesome.icon.bitcoin:before { content: "\f15a"; } |
||||
|
i.awesome.icon.bold:before { content: "\f032"; } |
||||
|
i.awesome.icon.bolt:before { content: "\f0e7"; } |
||||
|
i.awesome.icon.book:before { content: "\f02d"; } |
||||
|
i.awesome.icon.bookmark.empty:before { content: "\f097"; } |
||||
|
i.awesome.icon.bookmark:before { content: "\f02e"; } |
||||
|
i.awesome.icon.briefcase:before { content: "\f0b1"; } |
||||
|
i.awesome.icon.bug:before { content: "\f188"; } |
||||
|
i.awesome.icon.building:before { content: "\f0f7"; } |
||||
|
i.awesome.icon.bullhorn:before { content: "\f0a1"; } |
||||
|
i.awesome.icon.bullseye:before { content: "\f140"; } |
||||
|
i.awesome.icon.calendar.empty:before { content: "\f133"; } |
||||
|
i.awesome.icon.calendar:before { content: "\f073"; } |
||||
|
i.awesome.icon.camera.retro:before { content: "\f083"; } |
||||
|
i.awesome.icon.camera:before { content: "\f030"; } |
||||
|
i.awesome.icon.caret.down:before { content: "\f0d7"; } |
||||
|
i.awesome.icon.caret.left:before { content: "\f0d9"; } |
||||
|
i.awesome.icon.caret.right:before { content: "\f0da"; } |
||||
|
i.awesome.icon.caret.up:before { content: "\f0d8"; } |
||||
|
i.awesome.icon.certificate:before { content: "\f0a3"; } |
||||
|
i.awesome.icon.check.minus:before { content: "\f147"; } |
||||
|
i.awesome.icon.check.sign:before { content: "\f14a"; } |
||||
|
i.awesome.icon.check:before { content: "\f046"; } |
||||
|
i.awesome.icon.chevron.down:before { content: "\f078"; } |
||||
|
i.awesome.icon.chevron.left:before { content: "\f053"; } |
||||
|
i.awesome.icon.chevron.right:before { content: "\f054"; } |
||||
|
i.awesome.icon.chevron.sign.down:before { content: "\f13a"; } |
||||
|
i.awesome.icon.chevron.sign.left:before { content: "\f137"; } |
||||
|
i.awesome.icon.chevron.sign.right:before { content: "\f138"; } |
||||
|
i.awesome.icon.chevron.sign.up:before { content: "\f139"; } |
||||
|
i.awesome.icon.chevron.up:before { content: "\f077"; } |
||||
|
i.awesome.icon.circle.down.arrow:before { content: "\f0ab"; } |
||||
|
i.awesome.icon.circle.arrow.left:before { content: "\f0a8"; } |
||||
|
i.awesome.icon.circle.arrow.right:before { content: "\f0a9"; } |
||||
|
i.awesome.icon.circle.arrow.up:before { content: "\f0aa"; } |
||||
|
i.awesome.icon.circle.blank:before { content: "\f10c"; } |
||||
|
i.awesome.icon.circle:before { content: "\f111"; } |
||||
|
i.awesome.icon.cloud.download:before { content: "\f0ed"; } |
||||
|
i.awesome.icon.cloud.upload:before { content: "\f0ee"; } |
||||
|
i.awesome.icon.cloud:before { content: "\f0c2"; } |
||||
|
i.awesome.icon.code.fork:before { content: "\f126"; } |
||||
|
i.awesome.icon.code:before { content: "\f121"; } |
||||
|
i.awesome.icon.coffee:before { content: "\f0f4"; } |
||||
|
i.awesome.icon.collapse.alternate:before { content: "\f117"; } |
||||
|
i.awesome.icon.collapse.top:before { content: "\f151"; } |
||||
|
i.awesome.icon.collapse:before { content: "\f150"; } |
||||
|
i.awesome.icon.columns:before { content: "\f0db"; } |
||||
|
i.awesome.icon.comment.alternate:before { content: "\f0e5"; } |
||||
|
i.awesome.icon.comment:before { content: "\f075"; } |
||||
|
i.awesome.icon.comments.alternate:before { content: "\f0e6"; } |
||||
|
i.awesome.icon.comments:before { content: "\f086"; } |
||||
|
i.awesome.icon.compass:before { content: "\f14e"; } |
||||
|
i.awesome.icon.copy:before { content: "\f0c5"; } |
||||
|
i.awesome.icon.credit.card:before { content: "\f09d"; } |
||||
|
i.awesome.icon.crop:before { content: "\f125"; } |
||||
|
i.awesome.icon.css3:before { content: "\f13c"; } |
||||
|
i.awesome.icon.cut:before { content: "\f0c4"; } |
||||
|
i.awesome.icon.dashboard:before { content: "\f0e4"; } |
||||
|
i.awesome.icon.desktop:before { content: "\f108"; } |
||||
|
i.awesome.icon.dollar:before { content: "\f155"; } |
||||
|
i.awesome.icon.double.angle.down:before { content: "\f103"; } |
||||
|
i.awesome.icon.double.angle.left:before { content: "\f100"; } |
||||
|
i.awesome.icon.double.angle.right:before { content: "\f101"; } |
||||
|
i.awesome.icon.double.angle.up:before { content: "\f102"; } |
||||
|
i.awesome.icon.download.alternate:before { content: "\f019"; } |
||||
|
i.awesome.icon.download:before { content: "\f01a"; } |
||||
|
i.awesome.icon.dribbble:before { content: "\f17d"; } |
||||
|
i.awesome.icon.dropbox:before { content: "\f16b"; } |
||||
|
i.awesome.icon.edit.sign:before { content: "\f14b"; } |
||||
|
i.awesome.icon.edit:before { content: "\f044"; } |
||||
|
i.awesome.icon.eject:before { content: "\f052"; } |
||||
|
i.awesome.icon.ellipsis.horizontal:before { content: "\f141"; } |
||||
|
i.awesome.icon.ellipsis.vertical:before { content: "\f142"; } |
||||
|
i.awesome.icon.envelope.alternate:before { content: "\f003"; } |
||||
|
i.awesome.icon.envelope:before { content: "\f0e0"; } |
||||
|
i.awesome.icon.eraser:before { content: "\f12d"; } |
||||
|
i.awesome.icon.euro:before { content: "\f153"; } |
||||
|
i.awesome.icon.exchange:before { content: "\f0ec"; } |
||||
|
i.awesome.icon.exclamation.sign:before { content: "\f06a"; } |
||||
|
i.awesome.icon.exclamation:before { content: "\f12a"; } |
||||
|
i.awesome.icon.expand.alternate:before { content: "\f116"; } |
||||
|
i.awesome.icon.expand:before { content: "\f152"; } |
||||
|
i.awesome.icon.external.link.sign:before { content: "\f14c"; } |
||||
|
i.awesome.icon.external.link:before { content: "\f08e"; } |
||||
|
i.awesome.icon.eye.close:before { content: "\f070"; } |
||||
|
i.awesome.icon.eye.open:before { content: "\f06e"; } |
||||
|
i.awesome.icon.facebook.sign:before { content: "\f082"; } |
||||
|
i.awesome.icon.facebook:before { content: "\f09a"; } |
||||
|
i.awesome.icon.facetime.video:before { content: "\f03d"; } |
||||
|
i.awesome.icon.fast.backward:before { content: "\f049"; } |
||||
|
i.awesome.icon.fast.forward:before { content: "\f050"; } |
||||
|
i.awesome.icon.female:before { content: "\f182"; } |
||||
|
i.awesome.icon.fighter.jet:before { content: "\f0fb"; } |
||||
|
i.awesome.icon.file.alternate:before { content: "\f016"; } |
||||
|
i.awesome.icon.file.text.alternate:before { content: "\f0f6"; } |
||||
|
i.awesome.icon.file.text:before { content: "\f15c"; } |
||||
|
i.awesome.icon.file:before { content: "\f15b"; } |
||||
|
i.awesome.icon.film:before { content: "\f008"; } |
||||
|
i.awesome.icon.filter:before { content: "\f0b0"; } |
||||
|
i.awesome.icon.fire.extinguisher:before { content: "\f134"; } |
||||
|
i.awesome.icon.fire:before { content: "\f06d"; } |
||||
|
i.awesome.icon.flag.alternate:before { content: "\f11d"; } |
||||
|
i.awesome.icon.flag.checkered:before { content: "\f11e"; } |
||||
|
i.awesome.icon.flag:before { content: "\f024"; } |
||||
|
i.awesome.icon.flickr:before { content: "\f16e"; } |
||||
|
i.awesome.icon.folder.close.alternate:before { content: "\f114"; } |
||||
|
i.awesome.icon.folder.close:before { content: "\f07b"; } |
||||
|
i.awesome.icon.folder.open.alternate:before { content: "\f115"; } |
||||
|
i.awesome.icon.folder.open:before { content: "\f07c"; } |
||||
|
i.awesome.icon.font:before { content: "\f031"; } |
||||
|
i.awesome.icon.food:before { content: "\f0f5"; } |
||||
|
i.awesome.icon.forward:before { content: "\f04e"; } |
||||
|
i.awesome.icon.foursquare:before { content: "\f180"; } |
||||
|
i.awesome.icon.frown:before { content: "\f119"; } |
||||
|
i.awesome.icon.fullscreen:before { content: "\f0b2"; } |
||||
|
i.awesome.icon.gamepad:before { content: "\f11b"; } |
||||
|
i.awesome.icon.gbp:before { content: "\f154"; } |
||||
|
i.awesome.icon.gear:before { content: "\f013"; } |
||||
|
i.awesome.icon.gears:before { content: "\f085"; } |
||||
|
i.awesome.icon.gift:before { content: "\f06b"; } |
||||
|
i.awesome.icon.github.alternate:before { content: "\f113"; } |
||||
|
i.awesome.icon.github.sign:before { content: "\f092"; } |
||||
|
i.awesome.icon.github:before { content: "\f09b"; } |
||||
|
i.awesome.icon.gittip:before { content: "\f184"; } |
||||
|
i.awesome.icon.glass:before { content: "\f000"; } |
||||
|
i.awesome.icon.globe:before { content: "\f0ac"; } |
||||
|
i.awesome.icon.google.plus.sign:before { content: "\f0d4"; } |
||||
|
i.awesome.icon.google.plus:before { content: "\f0d5"; } |
||||
|
i.awesome.icon.group:before { content: "\f0c0"; } |
||||
|
i.awesome.icon.h.sign:before { content: "\f0fd"; } |
||||
|
i.awesome.icon.hand.down:before { content: "\f0a7"; } |
||||
|
i.awesome.icon.hand.left:before { content: "\f0a5"; } |
||||
|
i.awesome.icon.hand.right:before { content: "\f0a4"; } |
||||
|
i.awesome.icon.hand.up:before { content: "\f0a6"; } |
||||
|
i.awesome.icon.hdd:before { content: "\f0a0"; } |
||||
|
i.awesome.icon.headphones:before { content: "\f025"; } |
||||
|
i.awesome.icon.heart.empty:before { content: "\f08a"; } |
||||
|
i.awesome.icon.heart:before { content: "\f004"; } |
||||
|
i.awesome.icon.home:before { content: "\f015"; } |
||||
|
i.awesome.icon.hospital:before { content: "\f0f8"; } |
||||
|
i.awesome.icon.html5:before { content: "\f13b"; } |
||||
|
i.awesome.icon.inbox:before { content: "\f01c"; } |
||||
|
i.awesome.icon.indent.left:before { content: "\f03b"; } |
||||
|
i.awesome.icon.indent.right:before { content: "\f03c"; } |
||||
|
i.awesome.icon.info.sign:before { content: "\f05a"; } |
||||
|
i.awesome.icon.info:before { content: "\f129"; } |
||||
|
i.awesome.icon.instagram:before { content: "\f16d"; } |
||||
|
i.awesome.icon.italic:before { content: "\f033"; } |
||||
|
i.awesome.icon.key:before { content: "\f084"; } |
||||
|
i.awesome.icon.keyboard:before { content: "\f11c"; } |
||||
|
i.awesome.icon.laptop:before { content: "\f109"; } |
||||
|
i.awesome.icon.leaf:before { content: "\f06c"; } |
||||
|
i.awesome.icon.legal:before { content: "\f0e3"; } |
||||
|
i.awesome.icon.lemon:before { content: "\f094"; } |
||||
|
i.awesome.icon.level.down:before { content: "\f149"; } |
||||
|
i.awesome.icon.level.up:before { content: "\f148"; } |
||||
|
i.awesome.icon.lightbulb:before { content: "\f0eb"; } |
||||
|
i.awesome.icon.link:before { content: "\f0c1"; } |
||||
|
i.awesome.icon.linkedin.sign:before { content: "\f08c"; } |
||||
|
i.awesome.icon.linkedin:before { content: "\f0e1"; } |
||||
|
i.awesome.icon.linux:before { content: "\f17c"; } |
||||
|
i.awesome.icon.list.alternate:before { content: "\f022"; } |
||||
|
i.awesome.icon.list.ol:before { content: "\f0cb"; } |
||||
|
i.awesome.icon.list.ul:before { content: "\f0ca"; } |
||||
|
i.awesome.icon.list:before { content: "\f03a"; } |
||||
|
i.awesome.icon.location.arrow:before { content: "\f124"; } |
||||
|
i.awesome.icon.lock:before { content: "\f023"; } |
||||
|
i.awesome.icon.long.arrow.down:before { content: "\f175"; } |
||||
|
i.awesome.icon.long.arrow.left:before { content: "\f177"; } |
||||
|
i.awesome.icon.long.arrow.right:before { content: "\f178"; } |
||||
|
i.awesome.icon.long.arrow.up:before { content: "\f176"; } |
||||
|
i.awesome.icon.magic:before { content: "\f0d0"; } |
||||
|
i.awesome.icon.magnet:before { content: "\f076"; } |
||||
|
i.awesome.icon.mail.forward:before, i.awesome.icon.share.alternate:before { content: "\f064"; } |
||||
|
i.awesome.icon.mail.reply.all:before { content: "\f122"; } |
||||
|
i.awesome.icon.mail.reply:before, i.awesome.icon.reply:before { content: "\f112"; } |
||||
|
i.awesome.icon.male:before { content: "\f183"; } |
||||
|
i.awesome.icon.map.marker:before { content: "\f041"; } |
||||
|
i.awesome.icon.maxcdn:before { content: "\f136"; } |
||||
|
i.awesome.icon.medkit:before { content: "\f0fa"; } |
||||
|
i.awesome.icon.meh:before { content: "\f11a"; } |
||||
|
i.awesome.icon.microphone.off:before { content: "\f131"; } |
||||
|
i.awesome.icon.microphone:before { content: "\f130"; } |
||||
|
i.awesome.icon.minus.sign.alternate:before { content: "\f146"; } |
||||
|
i.awesome.icon.minus.sign:before { content: "\f056"; } |
||||
|
i.awesome.icon.minus:before { content: "\f068"; } |
||||
|
i.awesome.icon.mobile.phone:before { content: "\f10b"; } |
||||
|
i.awesome.icon.money:before { content: "\f0d6"; } |
||||
|
i.awesome.icon.moon:before { content: "\f186"; } |
||||
|
i.awesome.icon.move:before { content: "\f047"; } |
||||
|
i.awesome.icon.music:before { content: "\f001"; } |
||||
|
i.awesome.icon.ok.circle:before { content: "\f05d"; } |
||||
|
i.awesome.icon.ok.sign:before { content: "\f058"; } |
||||
|
i.awesome.icon.ok:before { content: "\f00c"; } |
||||
|
i.awesome.icon.paperclip:before, i.awesome.icon.paper.clip:before { content: "\f0c6"; } |
||||
|
i.awesome.icon.paste:before { content: "\f0ea"; } |
||||
|
i.awesome.icon.pause:before { content: "\f04c"; } |
||||
|
i.awesome.icon.pencil:before { content: "\f040"; } |
||||
|
i.awesome.icon.phone.sign:before { content: "\f098"; } |
||||
|
i.awesome.icon.phone:before { content: "\f095"; } |
||||
|
i.awesome.icon.picture:before { content: "\f03e"; } |
||||
|
i.awesome.icon.pinterest.sign:before { content: "\f0d3"; } |
||||
|
i.awesome.icon.pinterest:before { content: "\f0d2"; } |
||||
|
i.awesome.icon.plane:before { content: "\f072"; } |
||||
|
i.awesome.icon.play.circle:before { content: "\f01d"; } |
||||
|
i.awesome.icon.play.sign:before { content: "\f144"; } |
||||
|
i.awesome.icon.play:before { content: "\f04b"; } |
||||
|
i.awesome.icon.plus.sign.alternate:before { content: "\f0fe"; } |
||||
|
i.awesome.icon.plus.sign:before { content: "\f055"; } |
||||
|
i.awesome.icon.plus:before { content: "\f067"; } |
||||
|
i.awesome.icon.power.off:before, i.awesome.icon.off:before { content: "\f011"; } |
||||
|
i.awesome.icon.print:before { content: "\f02f"; } |
||||
|
i.awesome.icon.pushpin:before { content: "\f08d"; } |
||||
|
i.awesome.icon.puzzle.piece:before { content: "\f12e"; } |
||||
|
i.awesome.icon.qrcode:before { content: "\f029"; } |
||||
|
i.awesome.icon.question.sign:before { content: "\f059"; } |
||||
|
i.awesome.icon.question:before { content: "\f128"; } |
||||
|
i.awesome.icon.quote.left:before { content: "\f10d"; } |
||||
|
i.awesome.icon.quote.right:before { content: "\f10e"; } |
||||
|
i.awesome.icon.random:before { content: "\f074"; } |
||||
|
i.awesome.icon.refresh:before { content: "\f021"; } |
||||
|
i.awesome.icon.remove.circle:before { content: "\f05c"; } |
||||
|
i.awesome.icon.remove.sign:before { content: "\f057"; } |
||||
|
i.awesome.icon.remove:before { content: "\f00d"; } |
||||
|
i.awesome.icon.renminbi:before, i.awesome.icon.cny:before { content: "\f158"; } |
||||
|
i.awesome.icon.renren:before { content: "\f18b"; } |
||||
|
i.awesome.icon.reorder:before { content: "\f0c9"; } |
||||
|
i.awesome.icon.reply.all:before { content: "\f122"; } |
||||
|
i.awesome.icon.resize.full:before { content: "\f065"; } |
||||
|
i.awesome.icon.resize.horizontal:before { content: "\f07e"; } |
||||
|
i.awesome.icon.resize.small:before { content: "\f066"; } |
||||
|
i.awesome.icon.resize.vertical:before { content: "\f07d"; } |
||||
|
i.awesome.icon.retweet:before { content: "\f079"; } |
||||
|
i.awesome.icon.road:before { content: "\f018"; } |
||||
|
i.awesome.icon.rocket:before { content: "\f135"; } |
||||
|
i.awesome.icon.rotate.left:before, i.awesome.icon.undo:before { content: "\f0e2"; } |
||||
|
i.awesome.icon.rotate.right:before, i.awesome.icon.repeat:before { content: "\f01e"; } |
||||
|
i.awesome.icon.rss.sign:before { content: "\f143"; } |
||||
|
i.awesome.icon.rss:before { content: "\f09e"; } |
||||
|
i.awesome.icon.rupee:before, i.awesome.icon.inr:before { content: "\f156"; } |
||||
|
i.awesome.icon.save:before { content: "\f0c7"; } |
||||
|
i.awesome.icon.screenshot:before { content: "\f05b"; } |
||||
|
i.awesome.icon.search:before { content: "\f002"; } |
||||
|
i.awesome.icon.share.sign:before { content: "\f14d"; } |
||||
|
i.awesome.icon.share:before { content: "\f045"; } |
||||
|
i.awesome.icon.shield:before { content: "\f132"; } |
||||
|
i.awesome.icon.shopping.cart:before { content: "\f07a"; } |
||||
|
i.awesome.icon.sign.blank:before { content: "\f0c8"; } |
||||
|
i.awesome.icon.signal:before { content: "\f012"; } |
||||
|
i.awesome.icon.signin:before { content: "\f090"; } |
||||
|
i.awesome.icon.signout:before { content: "\f08b"; } |
||||
|
i.awesome.icon.sitemap:before { content: "\f0e8"; } |
||||
|
i.awesome.icon.skype:before { content: "\f17e"; } |
||||
|
i.awesome.icon.smile:before { content: "\f118"; } |
||||
|
i.awesome.icon.sort.alphabet.alternate:before { content: "\f15e"; } |
||||
|
i.awesome.icon.sort.alphabet:before { content: "\f15d"; } |
||||
|
i.awesome.icon.sort.attributes.alternate:before { content: "\f161"; } |
||||
|
i.awesome.icon.sort.attributes:before { content: "\f160"; } |
||||
|
i.awesome.icon.sort.order.alternate:before { content: "\f163"; } |
||||
|
i.awesome.icon.sort.order:before { content: "\f162"; } |
||||
|
i.awesome.icon.sort.descending:before { content: "\f0dd"; } |
||||
|
i.awesome.icon.sort.ascending:before { content: "\f0de"; } |
||||
|
i.awesome.icon.sort:before { content: "\f0dc"; } |
||||
|
i.awesome.icon.spinner:before { content: "\f110"; } |
||||
|
i.awesome.icon.stackexchange:before { content: "\f16c"; } |
||||
|
i.awesome.icon.star.empty:before { content: "\f006"; } |
||||
|
i.awesome.icon.star.half.full:before, |
||||
|
i.awesome.icon.star.half.empty:before { content: "\f123"; } |
||||
|
i.awesome.icon.star.half:before { content: "\f089"; } |
||||
|
i.awesome.icon.star:before { content: "\f005"; } |
||||
|
i.awesome.icon.step.backward:before { content: "\f048"; } |
||||
|
i.awesome.icon.step.forward:before { content: "\f051"; } |
||||
|
i.awesome.icon.stethoscope:before { content: "\f0f1"; } |
||||
|
i.awesome.icon.stop:before { content: "\f04d"; } |
||||
|
i.awesome.icon.strikethrough:before { content: "\f0cc"; } |
||||
|
i.awesome.icon.subscript:before { content: "\f12c"; } |
||||
|
i.awesome.icon.suitcase:before { content: "\f0f2"; } |
||||
|
i.awesome.icon.sun:before { content: "\f185"; } |
||||
|
i.awesome.icon.superscript:before { content: "\f12b"; } |
||||
|
i.awesome.icon.table:before { content: "\f0ce"; } |
||||
|
i.awesome.icon.tablet:before { content: "\f10a"; } |
||||
|
i.awesome.icon.tag:before { content: "\f02b"; } |
||||
|
i.awesome.icon.tags:before { content: "\f02c"; } |
||||
|
i.awesome.icon.tasks:before { content: "\f0ae"; } |
||||
|
i.awesome.icon.terminal:before { content: "\f120"; } |
||||
|
i.awesome.icon.text.height:before { content: "\f034"; } |
||||
|
i.awesome.icon.text.width:before { content: "\f035"; } |
||||
|
i.awesome.icon.th.large:before { content: "\f009"; } |
||||
|
i.awesome.icon.th.list:before { content: "\f00b"; } |
||||
|
i.awesome.icon.th:before { content: "\f00a"; } |
||||
|
i.awesome.icon.thumbs.down.alternate:before { content: "\f088"; } |
||||
|
i.awesome.icon.thumbs.down:before { content: "\f165"; } |
||||
|
i.awesome.icon.thumbs.up.alternate:before { content: "\f087"; } |
||||
|
i.awesome.icon.thumbs.up:before { content: "\f164"; } |
||||
|
i.awesome.icon.ticket:before { content: "\f145"; } |
||||
|
i.awesome.icon.time:before { content: "\f017"; } |
||||
|
i.awesome.icon.tint:before { content: "\f043"; } |
||||
|
i.awesome.icon.trash:before { content: "\f014"; } |
||||
|
i.awesome.icon.trello:before { content: "\f181"; } |
||||
|
i.awesome.icon.trophy:before { content: "\f091"; } |
||||
|
i.awesome.icon.truck:before { content: "\f0d1"; } |
||||
|
i.awesome.icon.tumblr.sign:before { content: "\f174"; } |
||||
|
i.awesome.icon.tumblr:before { content: "\f173"; } |
||||
|
i.awesome.icon.twitter.sign:before { content: "\f081"; } |
||||
|
i.awesome.icon.twitter:before { content: "\f099"; } |
||||
|
i.awesome.icon.umbrella:before { content: "\f0e9"; } |
||||
|
i.awesome.icon.unchecked:before, i.awesome.icon.check.empty:before { content: "\f096"; } |
||||
|
i.awesome.icon.underline:before { content: "\f0cd"; } |
||||
|
i.awesome.icon.unlink:before { content: "\f127"; } |
||||
|
i.awesome.icon.unlock.alternate:before { content: "\f13e"; } |
||||
|
i.awesome.icon.unlock:before { content: "\f09c"; } |
||||
|
i.awesome.icon.upload.alternate:before { content: "\f093"; } |
||||
|
i.awesome.icon.upload:before { content: "\f01b"; } |
||||
|
i.awesome.icon.user.md:before { content: "\f0f0"; } |
||||
|
i.awesome.icon.user:before { content: "\f007"; } |
||||
|
i.awesome.icon.vk:before { content: "\f189"; } |
||||
|
i.awesome.icon.volume.down:before { content: "\f027"; } |
||||
|
i.awesome.icon.volume.off:before { content: "\f026"; } |
||||
|
i.awesome.icon.volume.up:before { content: "\f028"; } |
||||
|
i.awesome.icon.warning.sign:before { content: "\f071"; } |
||||
|
i.awesome.icon.weibo:before { content: "\f18a"; } |
||||
|
i.awesome.icon.windows:before { content: "\f17a"; } |
||||
|
i.awesome.icon.won:before, i.awesome.icon.krw:before { content: "\f159"; } |
||||
|
i.awesome.icon.wrench:before { content: "\f0ad"; } |
||||
|
i.awesome.icon.xing.sign:before { content: "\f169"; } |
||||
|
i.awesome.icon.xing:before { content: "\f168"; } |
||||
|
i.awesome.icon.yen:before, i.awesome.icon.jpy:before { content: "\f157"; } |
||||
|
i.awesome.icon.youtube.play:before { content: "\f16a"; } |
||||
|
i.awesome.icon.youtube.sign:before { content: "\f166"; } |
||||
|
i.awesome.icon.youtube:before { content: "\f167"; } |
||||
|
i.awesome.icon.zoom.in:before { content: "\f00e"; } |
||||
|
i.awesome.icon.zoom.out:before { content: "\f010"; } |
||||
|
|
||||
|
/*-------------- |
||||
|
Spacing Fix |
||||
|
---------------*/ |
||||
|
|
||||
|
/* dropdown arrows are to the right */ |
||||
|
i.dropdown.awesome.icon { |
||||
|
margin: 0em 0em 0em 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* stars are usually consecutive */ |
||||
|
i.awesome.icon.star { |
||||
|
width: auto; |
||||
|
margin: 0em; |
||||
|
} |
||||
|
|
||||
|
/* left side icons */ |
||||
|
i.awesome.icon.left, |
||||
|
i.awesome.icon.left, |
||||
|
i.awesome.icon.left { |
||||
|
width: auto; |
||||
|
margin: 0em 0.5em 0em 0em; |
||||
|
} |
||||
|
|
||||
|
/* right side icons */ |
||||
|
i.awesome.icon.search, |
||||
|
i.awesome.icon.up, |
||||
|
i.awesome.icon.down, |
||||
|
i.awesome.icon.right { |
||||
|
width: auto; |
||||
|
margin: 0em 0em 0em 0.5em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Aliases |
||||
|
---------------*/ |
||||
|
|
||||
|
/* aliases for convenience */ |
||||
|
i.awesome.icon.delete:before { content: '\e80d'; } /* '' */ |
||||
|
i.awesome.icon.dropdown:before { content: '\25be'; } /* '▾' */ |
||||
|
|
||||
|
i.awesome.icon.help:before { content: '\e704'; } /* '' */ |
||||
|
i.awesome.icon.info:before { content: '\e705'; } /* '' */ |
||||
|
i.awesome.icon.error:before { content: '\e80d'; } /* '' */ |
||||
|
|
||||
|
i.awesome.icon.dislike:before { content: '\2661'; } /* '♡' */ |
||||
|
i.awesome.icon.like:before { content: '\2665'; } /* '♥' */ |
||||
|
|
||||
|
i.awesome.icon.eye:before { content: '\e80f'; } /* '' */ |
||||
|
i.awesome.icon.eye.hidden:before { content: '\e70b'; } /* '' */ |
||||
|
i.awesome.icon.date:before { content: '📅'; } /* '\1f4c5' */ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
i.awesome.icon.hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
i.awesome.icon.active { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
i.emphasized.awesome.icon { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
i.awesome.icon.disabled { |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Link |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.link.awesome.icon { |
||||
|
cursor: pointer; |
||||
|
opacity: 0.7; |
||||
|
-webkit-transition: opacity 0.3s ease-out; |
||||
|
-moz-transition: opacity 0.3s ease-out; |
||||
|
-o-transition: opacity 0.3s ease-out; |
||||
|
-ms-transition: opacity 0.3s ease-out; |
||||
|
transition: opacity 0.3s ease-out; |
||||
|
} |
||||
|
.link.awesome.icon:hover { |
||||
|
opacity: 1 !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Circular |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.circular.awesome.icon { |
||||
|
-webkit-border-radius: 500px; |
||||
|
-moz-border-radius: 500px; |
||||
|
border-radius: 500px; |
||||
|
|
||||
|
padding: 0.5em 0.35em !important; |
||||
|
|
||||
|
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
|
||||
|
line-height: 1 !important; |
||||
|
width: 2em !important; |
||||
|
height: 2em !important; |
||||
|
} |
||||
|
i.circular.awesome.icon:before { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
i.circular.inverted.awesome.icon { |
||||
|
border: none; |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Flipped |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.vertically.flipped.awesome.icon { |
||||
|
-webkit-transform: scale(1, -1); |
||||
|
-moz-transform: scale(1, -1); |
||||
|
-o-transform: scale(1, -1); |
||||
|
-ms-transform: scale(1, -1); |
||||
|
transform: scale(1, -1); |
||||
|
} |
||||
|
i.horizontally.flipped.awesome.icon { |
||||
|
-webkit-transform: scale(-1, 1); |
||||
|
-moz-transform: scale(-1, 1); |
||||
|
-o-transform: scale(-1, 1); |
||||
|
-ms-transform: scale(-1, 1); |
||||
|
transform: scale(-1, 1); |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Rotated |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.left.rotated.awesome.icon { |
||||
|
-webkit-transform: rotate(-90deg); |
||||
|
-moz-transform: rotate(-90deg); |
||||
|
-o-transform: rotate(-90deg); |
||||
|
-ms-transform: rotate(-90deg); |
||||
|
transform: rotate(-90deg); |
||||
|
} |
||||
|
i.right.rotated.awesome.icon { |
||||
|
-webkit-transform: rotate(90deg); |
||||
|
-moz-transform: rotate(90deg); |
||||
|
-o-transform: rotate(90deg); |
||||
|
-ms-transform: rotate(90deg); |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Square |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.square.awesome.icon { |
||||
|
width: 2em; |
||||
|
height: 2em; |
||||
|
padding: 0.5em 0.35em !important; |
||||
|
|
||||
|
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
|
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
i.square.awesome.icon:before { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
i.square.inverted.awesome.icon { |
||||
|
border: none; |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.inverted.awesome.icon { |
||||
|
background-color: #222222; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.blue.awesome.icon { |
||||
|
color: #6ECFF5 !important; |
||||
|
} |
||||
|
i.black.awesome.icon { |
||||
|
color: #5C6166 !important; |
||||
|
} |
||||
|
i.green.awesome.icon { |
||||
|
color: #A1CF64 !important; |
||||
|
} |
||||
|
i.red.awesome.icon { |
||||
|
color: #D95C5C !important; |
||||
|
} |
||||
|
i.purple.awesome.icon { |
||||
|
color: #564F8A !important; |
||||
|
} |
||||
|
i.teal.awesome.icon { |
||||
|
color: #00B5AD !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.inverted.black.awesome.icon { |
||||
|
background-color: #5C6166 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.blue.awesome.icon { |
||||
|
background-color: #6ECFF5 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.green.awesome.icon { |
||||
|
background-color: #A1CF64 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.red.awesome.icon { |
||||
|
background-color: #D95C5C !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.purple.awesome.icon { |
||||
|
background-color: #564F8A !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.teal.awesome.icon { |
||||
|
background-color: #00B5AD !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Sizes |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.small.awesome.icon { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
i.awesome.icon { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
i.large.awesome.icon { |
||||
|
font-size: 2em; |
||||
|
margin-right: 0.5em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
i.huge.awesome.icon { |
||||
|
font-size: 4em; |
||||
|
margin-right: 0.75em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
i.massive.awesome.icon { |
||||
|
font-size: 8em; |
||||
|
margin-right: 1em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Sketchy Sizing |
||||
|
---------------*/ |
||||
|
|
||||
|
i.sketchy.circular.awesome.icon, |
||||
|
i.sketchy.square.awesome.icon { |
||||
|
padding: 0.35em !important; |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,200 @@ |
|||||
|
/* |
||||
|
* # Dividers |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Divider |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.divider { |
||||
|
margin: 1rem 0rem; |
||||
|
|
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.8); |
||||
|
|
||||
|
line-height: 1; |
||||
|
height: 0em; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-user-select: none; |
||||
|
-moz-user-select: none; |
||||
|
-ms-user-select: none; |
||||
|
user-select: none; |
||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||
|
} |
||||
|
|
||||
|
.ui.vertical.divider, |
||||
|
.ui.horizontal.divider { |
||||
|
position: absolute; |
||||
|
|
||||
|
border: none; |
||||
|
height: 0em; |
||||
|
margin: 0em; |
||||
|
background-color: transparent; |
||||
|
|
||||
|
font-size: 0.875rem; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
text-transform: uppercase; |
||||
|
|
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Vertical |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.vertical.divider { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
|
||||
|
margin: 0% 0% 0% -3%; |
||||
|
|
||||
|
width: 6%; |
||||
|
height: 50%; |
||||
|
|
||||
|
line-height: 0; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.vertical.divider:before, |
||||
|
.ui.vertical.divider:after { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
content: " "; |
||||
|
z-index: 3; |
||||
|
|
||||
|
border-left: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
border-right: 1px solid rgba(255, 255, 255, 0.8); |
||||
|
|
||||
|
width: 0%; |
||||
|
height: 80%; |
||||
|
} |
||||
|
|
||||
|
.ui.vertical.divider:before { |
||||
|
top: -100%; |
||||
|
} |
||||
|
|
||||
|
.ui.vertical.divider:after { |
||||
|
top: auto; |
||||
|
bottom: 0px; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Horizontal |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.horizontal.divider { |
||||
|
position: relative; |
||||
|
top: 0%; |
||||
|
left: 0%; |
||||
|
|
||||
|
margin: 1rem 1.5rem; |
||||
|
height: auto; |
||||
|
padding: 0em; |
||||
|
|
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.ui.horizontal.divider:before, |
||||
|
.ui.horizontal.divider:after { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
content: " "; |
||||
|
z-index: 3; |
||||
|
|
||||
|
width: 50%; |
||||
|
top: 50%; |
||||
|
height: 0%; |
||||
|
|
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.8); |
||||
|
} |
||||
|
|
||||
|
.ui.horizontal.divider:before { |
||||
|
left: 0%; |
||||
|
margin-left: -1.5rem; |
||||
|
} |
||||
|
.ui.horizontal.divider:after { |
||||
|
left: auto; |
||||
|
right: 0%; |
||||
|
margin-right: -1.5rem; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Icon |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.divider > .icon { |
||||
|
margin: 0em; |
||||
|
font-size: 1rem; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Inverted |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.divider.inverted { |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
.ui.vertical.inverted.divider, |
||||
|
.ui.horizontal.inverted.divider { |
||||
|
color: rgba(255, 255, 255, 0.9); |
||||
|
} |
||||
|
.ui.divider.inverted, |
||||
|
.ui.divider.inverted:after, |
||||
|
.ui.divider.inverted:before { |
||||
|
border-top-color: rgba(0, 0, 0, 0.15); |
||||
|
border-bottom-color: rgba(255, 255, 255, 0.15); |
||||
|
|
||||
|
border-left-color: rgba(0, 0, 0, 0.15); |
||||
|
border-right-color: rgba(255, 255, 255, 0.15); |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Fitted |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.fitted.divider { |
||||
|
margin: 0em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Clearing |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.clearing.divider { |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Section |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.section.divider { |
||||
|
margin-top: 2rem; |
||||
|
margin-bottom: 2rem; |
||||
|
} |
||||
@ -0,0 +1,325 @@ |
|||||
|
/* |
||||
|
* # Semantic Headers |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 29 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Header |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Standard */ |
||||
|
.ui.header { |
||||
|
border: none; |
||||
|
margin: 1em 0em 1rem; |
||||
|
padding: 0em; |
||||
|
|
||||
|
font-size: 1.33em; |
||||
|
font-weight: bold; |
||||
|
line-height: 1.33; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ui.header .sub.header { |
||||
|
font-size: 1rem; |
||||
|
font-weight: normal; |
||||
|
margin: 0em; |
||||
|
padding: 0em; |
||||
|
|
||||
|
line-height: 1.2; |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.ui.header .content { |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.ui.header .icon { |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* Positioning */ |
||||
|
.ui.header:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.header:last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
.ui.header + p { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Page Heading |
||||
|
---------------*/ |
||||
|
|
||||
|
h1.ui.header { |
||||
|
min-height: 1rem; |
||||
|
line-height: 1.33; |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
h2.ui.header { |
||||
|
line-height: 1.33; |
||||
|
font-size: 1.75rem; |
||||
|
} |
||||
|
h3.ui.header { |
||||
|
line-height: 1.33; |
||||
|
font-size: 1.33rem; |
||||
|
} |
||||
|
h4.ui.header { |
||||
|
line-height: 1.33; |
||||
|
font-size: 1.1rem; |
||||
|
} |
||||
|
h5.ui.header { |
||||
|
line-height: 1.2; |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Content Heading |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.huge.header { |
||||
|
min-height: 1em; |
||||
|
font-size: 2em; |
||||
|
} |
||||
|
.ui.large.header { |
||||
|
font-size: 1.75em; |
||||
|
} |
||||
|
.ui.medium.header { |
||||
|
font-size: 1.33em; |
||||
|
} |
||||
|
.ui.small.header { |
||||
|
font-size: 1.1em; |
||||
|
} |
||||
|
.ui.tiny.header { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.disabled.header { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.blue.header { |
||||
|
color: #6ECFF5 !important; |
||||
|
} |
||||
|
.ui.black.header { |
||||
|
color: #5C6166 !important; |
||||
|
} |
||||
|
.ui.green.header { |
||||
|
color: #A1CF64 !important; |
||||
|
} |
||||
|
.ui.red.header { |
||||
|
color: #D95C5C !important; |
||||
|
} |
||||
|
.ui.purple.header { |
||||
|
color: #564F8A !important; |
||||
|
} |
||||
|
.ui.teal.header { |
||||
|
color: #00B5AD !important; |
||||
|
} |
||||
|
|
||||
|
.ui.blue.dividing.header { |
||||
|
border-bottom: 3px solid #6ECFF5; |
||||
|
} |
||||
|
.ui.black.dividing.header { |
||||
|
border-bottom: 3px solid #5C6166; |
||||
|
} |
||||
|
.ui.green.dividing.header { |
||||
|
border-bottom: 3px solid #A1CF64; |
||||
|
} |
||||
|
.ui.red.dividing.header { |
||||
|
border-bottom: 3px solid #D95C5C; |
||||
|
} |
||||
|
.ui.purple.dividing.header { |
||||
|
border-bottom: 3px solid #564F8A; |
||||
|
} |
||||
|
.ui.teal.dividing.header { |
||||
|
border-bottom: 3px solid #00B5AD; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.inverted.header { |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.ui.inverted.header .sub.header { |
||||
|
color: rgba(255, 255, 255, 0.85); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.inverted.black.header { |
||||
|
background-color: #5C6166 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.blue.header { |
||||
|
background-color: #6ECFF5 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.green.header { |
||||
|
background-color: #A1CF64 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.red.header { |
||||
|
background-color: #D95C5C !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.purple.header { |
||||
|
background-color: #564F8A !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.teal.header { |
||||
|
background-color: #00B5AD !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
|
||||
|
.ui.inverted.block.header { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Aligned |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.left.aligned.header { |
||||
|
text-align: left; |
||||
|
} |
||||
|
.ui.right.aligned.header { |
||||
|
text-align: right; |
||||
|
} |
||||
|
.ui.center.aligned.header { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Floated |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.floated.header, |
||||
|
.ui.left.floated.header { |
||||
|
float: left; |
||||
|
margin-top: 0em; |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
.ui.right.floated.header { |
||||
|
float: right; |
||||
|
margin-top: 0em; |
||||
|
margin-left: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Fittted |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.fitted.header { |
||||
|
padding: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Dividing |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.dividing.header { |
||||
|
padding-bottom: 0.2rem; |
||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.ui.dividing.header .sub.header { |
||||
|
padding-bottom: 0.5em; |
||||
|
} |
||||
|
.ui.dividing.header .icon { |
||||
|
margin-bottom: 0.2em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Block |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.block.header { |
||||
|
background-color: #F5F5F5; |
||||
|
padding: 0.5em 1em; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Attached |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.attached.header { |
||||
|
background-color: #E0E0E0; |
||||
|
padding: 0.5em 1rem; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.ui.top.attached.header { |
||||
|
margin-bottom: 0em; |
||||
|
|
||||
|
-webkit-border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
-moz-border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
} |
||||
|
.ui.bottom.attached.header { |
||||
|
margin-top: 0em; |
||||
|
|
||||
|
-webkit-border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
-moz-border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Icon |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.icon.header { |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.ui.icon.header .icon { |
||||
|
float: none; |
||||
|
display: block; |
||||
|
font-size: 3em; |
||||
|
margin: 0em auto 0.2em; |
||||
|
} |
||||
|
.ui.icon.header .circular.icon, |
||||
|
.ui.icon.header .square.icon { |
||||
|
font-size: 2em; |
||||
|
} |
||||
|
.ui.block.icon.header .icon { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.icon.header.aligned { |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
display: block; |
||||
|
} |
||||
@ -0,0 +1,484 @@ |
|||||
|
/* |
||||
|
* # Semantic Icons |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: May 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Icon |
||||
|
*******************************/ |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Icons'; |
||||
|
src: url(../fonts/icons.eot); |
||||
|
src: |
||||
|
url(../fonts/icons.eot?#iefix) format('embedded-opentype'), |
||||
|
url(../fonts/icons.woff) format('woff'), |
||||
|
url(../fonts/icons.ttf) format('truetype'), |
||||
|
url(../fonts/icons.svg#icons) format('svg') |
||||
|
; |
||||
|
|
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
font-variant: normal; |
||||
|
text-decoration: inherit; |
||||
|
text-transform: none; |
||||
|
} |
||||
|
|
||||
|
i.icon { |
||||
|
display: inline-block; |
||||
|
opacity: 0.75; |
||||
|
|
||||
|
margin: 0em 0.25em 0em 0em; |
||||
|
|
||||
|
width: 1.23em; |
||||
|
height: 1em; |
||||
|
|
||||
|
font-family: 'Icons'; |
||||
|
font-style: normal; |
||||
|
line-height: 1; |
||||
|
font-weight: normal; |
||||
|
text-decoration: inherit; |
||||
|
text-align: center; |
||||
|
|
||||
|
speak: none; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-font-smoothing: antialiased; |
||||
|
font-smoothing: antialiased; |
||||
|
} |
||||
|
|
||||
|
/* icons available */ |
||||
|
i.icon.circle.attention:before { content: '\2757'; } /* '❗' */ |
||||
|
i.icon.circle.help:before { content: '\e704'; } /* '' */ |
||||
|
i.icon.circle.info:before { content: '\e705'; } /* '' */ |
||||
|
i.icon.add:before { content: '\2795'; } /* '➕' */ |
||||
|
|
||||
|
i.icon.chart:before { content: '📈'; } /* '\1f4c8' */ |
||||
|
i.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */ |
||||
|
i.icon.chart.pie:before { content: '\e7a2'; } /* '' */ |
||||
|
|
||||
|
i.icon.resize.full:before { content: '\e744'; } /* '' */ |
||||
|
i.icon.resize.horizontal:before { content: '\2b0d'; } /* '⬍' */ |
||||
|
i.icon.resize.small:before { content: '\e746'; } /* '' */ |
||||
|
i.icon.resize.vertical:before { content: '\2b0c'; } /* '⬌' */ |
||||
|
|
||||
|
i.icon.down:before { content: '\2193'; } /* '↓' */ |
||||
|
i.icon.down.triangle:before { content: '\25be'; } /* '▾' */ |
||||
|
i.icon.down.arrow:before { content: '\e75c'; } /* '' */ |
||||
|
|
||||
|
i.icon.left:before { content: '\2190'; } /* '←' */ |
||||
|
i.icon.left.triangle:before { content: '\25c2'; } /* '◂' */ |
||||
|
i.icon.left.arrow:before { content: '\e75d'; } /* '' */ |
||||
|
|
||||
|
i.icon.right:before { content: '\2192'; } /* '→' */ |
||||
|
i.icon.right.triangle:before { content: '\25b8'; } /* '▸' */ |
||||
|
i.icon.right.arrow:before { content: '\e75e'; } /* '' */ |
||||
|
|
||||
|
i.icon.up:before { content: '\2191'; } /* '↑' */ |
||||
|
i.icon.up.triangle:before { content: '\25b4'; } /* '▴' */ |
||||
|
i.icon.up.arrow:before { content: '\e75f'; } /* '' */ |
||||
|
|
||||
|
i.icon.folder:before { content: '\e810'; } /* '' */ |
||||
|
i.icon.open.folder:before { content: '📂'; } /* '\1f4c2' */ |
||||
|
|
||||
|
i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */ |
||||
|
i.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */ |
||||
|
|
||||
|
i.icon.star:before { content: '\e801'; } /* '' */ |
||||
|
i.icon.star.empty:before { content: '\e800'; } /* '' */ |
||||
|
i.icon.star.half:before { content: '\e701'; } /* '' */ |
||||
|
|
||||
|
i.icon.lock:before { content: '🔒'; } /* '\1f512' */ |
||||
|
i.icon.unlock:before { content: '🔓'; } /* '\1f513' */ |
||||
|
|
||||
|
i.icon.layout.grid:before { content: '\e80c'; } /* '' */ |
||||
|
i.icon.layout.block:before { content: '\e708'; } /* '' */ |
||||
|
i.icon.layout.list:before { content: '\e80b'; } /* '' */ |
||||
|
|
||||
|
i.icon.heart.empty:before { content: '\2661'; } /* '♡' */ |
||||
|
i.icon.heart:before { content: '\2665'; } /* '♥' */ |
||||
|
|
||||
|
|
||||
|
i.icon.asterisk:before { content: '\2731'; } /* '✱' */ |
||||
|
i.icon.attachment:before { content: '📎'; } /* '\1f4ce' */ |
||||
|
i.icon.attention:before { content: '\26a0'; } /* '⚠' */ |
||||
|
i.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */ |
||||
|
i.icon.barcode:before { content: '\e792'; } /* '' */ |
||||
|
i.icon.cart:before { content: '\e813'; } /* '' */ |
||||
|
i.icon.block:before { content: '🚫'; } /* '\1f6ab' */ |
||||
|
i.icon.book:before { content: '📖'; } |
||||
|
i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */ |
||||
|
i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */ |
||||
|
i.icon.cancel:before { content: '\2716'; } /* '✖' */ |
||||
|
i.icon.close:before { content: '\e80d'; } /* '' */ |
||||
|
i.icon.color:before { content: '\e794'; } /* '' */ |
||||
|
i.icon.chat:before { content: '\e720'; } /* '' */ |
||||
|
i.icon.check:before { content: '\2611'; } /* '☑' */ |
||||
|
i.icon.time:before { content: '🕔'; } /* '\1f554' */ |
||||
|
i.icon.cloud:before { content: '\2601'; } /* '☁' */ |
||||
|
i.icon.code:before { content: '\e714'; } /* '' */ |
||||
|
i.icon.email:before { content: '\40'; } /* '@' */ |
||||
|
i.icon.settings:before { content: '\26ef'; } /* '⛯' */ |
||||
|
i.icon.setting:before { content: '\2699'; } /* '⚙' */ |
||||
|
i.icon.comment:before { content: '\e802'; } /* '' */ |
||||
|
i.icon.clockwise.counter:before { content: '\27f2'; } /* '⟲' */ |
||||
|
i.icon.clockwise:before { content: '\27f3'; } /* '⟳' */ |
||||
|
i.icon.cube:before { content: '\e807'; } /* '' */ |
||||
|
i.icon.direction:before { content: '\27a2'; } /* '➢' */ |
||||
|
i.icon.doc:before { content: '📄'; } /* '\1f4c4' */ |
||||
|
i.icon.docs:before { content: '\e736'; } /* '' */ |
||||
|
i.icon.dollar:before { content: '💵'; } /* '\1f4b5' */ |
||||
|
i.icon.paint:before { content: '\e7b5'; } /* '' */ |
||||
|
i.icon.edit:before { content: '\270d'; } /* '✍' */ |
||||
|
i.icon.eject:before { content: '\2ecf'; } /* '⻏' */ |
||||
|
i.icon.export:before { content: '\e715'; } /* '' */ |
||||
|
i.icon.hide:before { content: '\e80f'; } /* '' */ |
||||
|
i.icon.unhide:before { content: '\e70b'; } /* '' */ |
||||
|
i.icon.facebook:before { content: '\f301'; } /* '' */ |
||||
|
i.icon.fast-forward:before { content: '\e804'; } /* '' */ |
||||
|
i.icon.fire:before { content: '🔥'; } /* '\1f525' */ |
||||
|
i.icon.flag:before { content: '\2691'; } /* '⚑' */ |
||||
|
i.icon.lightning:before { content: '\26a1'; } /* '⚡' */ |
||||
|
i.icon.lab:before { content: '\68'; } /* 'h' */ |
||||
|
i.icon.flight:before { content: '\2708'; } /* '✈' */ |
||||
|
i.icon.forward:before { content: '\27a6'; } /* '➦' */ |
||||
|
i.icon.gift:before { content: '🎁'; } /* '\1f381' */ |
||||
|
i.icon.github:before { content: '\f308'; } /* '' */ |
||||
|
i.icon.globe:before { content: '\e817'; } /* '' */ |
||||
|
i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */ |
||||
|
i.icon.question:before { content: '\2753'; } /* '❓' */ |
||||
|
i.icon.home:before { content: '\2302'; } /* '⌂' */ |
||||
|
i.icon.i:before { content: '\2139'; } /* 'ℹ' */ |
||||
|
i.icon.idea:before { content: '💡'; } /* '\1f4a1' */ |
||||
|
i.icon.open:before { content: '🔗'; } /* '\1f517' */ |
||||
|
i.icon.content:before { content: '\e782'; } /* '' */ |
||||
|
i.icon.location:before { content: '\e724'; } /* '' */ |
||||
|
i.icon.mail:before { content: '\2709'; } /* '✉' */ |
||||
|
i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */ |
||||
|
i.icon.minus:before { content: '\2d'; } /* '-' */ |
||||
|
i.icon.money:before { content: '💰'; } /* '\1f4b0' */ |
||||
|
i.icon.off:before { content: '\e78e'; } /* '' */ |
||||
|
i.icon.pause:before { content: '\e808'; } /* '' */ |
||||
|
i.icon.photos:before { content: '\e812'; } /* '' */ |
||||
|
i.icon.photo:before { content: '🌄'; } /* '\1f304' */ |
||||
|
i.icon.pin:before { content: '📌'; } /* '\1f4cc' */ |
||||
|
i.icon.play:before { content: '\e809'; } /* '' */ |
||||
|
i.icon.plus:before { content: '\2b'; } /* '+' */ |
||||
|
i.icon.print:before { content: '\e716'; } /* '' */ |
||||
|
i.icon.rss:before { content: '\e73a'; } /* '' */ |
||||
|
i.icon.search:before { content: '🔍'; } /* '\1f50d' */ |
||||
|
i.icon.shuffle:before { content: '\e803'; } /* '' */ |
||||
|
i.icon.tag:before { content: '\e80a'; } /* '' */ |
||||
|
i.icon.tags:before { content: '\e70d'; } /* '' */ |
||||
|
i.icon.terminal:before { content: '\e7ac'; } /* '' */ |
||||
|
i.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */ |
||||
|
i.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */ |
||||
|
i.icon.to-end:before { content: '\e806'; } /* '' */ |
||||
|
i.icon.to-start:before { content: '\e805'; } /* '' */ |
||||
|
i.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */ |
||||
|
i.icon.trash:before { content: '\e729'; } /* '' */ |
||||
|
i.icon.twitter:before { content: '\f303'; } /* '' */ |
||||
|
i.icon.upload:before { content: '\e711'; } /* '' */ |
||||
|
i.icon.user.add:before { content: '\e700'; } /* '' */ |
||||
|
i.icon.user:before { content: '👤'; } /* '\1f464' */ |
||||
|
i.icon.community:before { content: '\e814'; } /* '' */ |
||||
|
i.icon.users:before { content: '👥'; } /* '\1f465' */ |
||||
|
i.icon.id:before { content: '\e722'; } /* '' */ |
||||
|
i.icon.url:before { content: '🔗'; } /* '\1f517' */ |
||||
|
i.icon.zoom.in:before { content: '\e750'; } /* '' */ |
||||
|
i.icon.zoom.out:before { content: '\e751'; } /* '' */ |
||||
|
|
||||
|
/*-------------- |
||||
|
Spacing Fix |
||||
|
---------------*/ |
||||
|
|
||||
|
/* dropdown arrows are to the right */ |
||||
|
i.dropdown.icon { |
||||
|
margin: 0em 0em 0em 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* stars are usually consecutive */ |
||||
|
i.icon.star { |
||||
|
width: auto; |
||||
|
margin: 0em; |
||||
|
} |
||||
|
|
||||
|
/* left side icons */ |
||||
|
i.icon.left, |
||||
|
i.icon.left, |
||||
|
i.icon.left { |
||||
|
width: auto; |
||||
|
margin: 0em 0.5em 0em 0em; |
||||
|
} |
||||
|
|
||||
|
/* right side icons */ |
||||
|
i.icon.search, |
||||
|
i.icon.up, |
||||
|
i.icon.down, |
||||
|
i.icon.right { |
||||
|
width: auto; |
||||
|
margin: 0em 0em 0em 0.5em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Aliases |
||||
|
---------------*/ |
||||
|
|
||||
|
/* aliases for convenience */ |
||||
|
i.icon.delete:before { content: '\e80d'; } /* '' */ |
||||
|
i.icon.dropdown:before { content: '\25be'; } /* '▾' */ |
||||
|
|
||||
|
i.icon.help:before { content: '\e704'; } /* '' */ |
||||
|
i.icon.info:before { content: '\e705'; } /* '' */ |
||||
|
i.icon.error:before { content: '\e80d'; } /* '' */ |
||||
|
|
||||
|
i.icon.dislike:before { content: '\2661'; } /* '♡' */ |
||||
|
i.icon.like:before { content: '\2665'; } /* '♥' */ |
||||
|
|
||||
|
i.icon.eye:before { content: '\e80f'; } /* '' */ |
||||
|
i.icon.eye.hidden:before { content: '\e70b'; } /* '' */ |
||||
|
i.icon.date:before { content: '📅'; } /* '\1f4c5' */ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
i.icon.hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
i.icon.active { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
i.emphasized.icon { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
i.icon.disabled { |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Link |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.link.icon { |
||||
|
cursor: pointer; |
||||
|
opacity: 0.7; |
||||
|
-webkit-transition: opacity 0.3s ease-out; |
||||
|
-moz-transition: opacity 0.3s ease-out; |
||||
|
-o-transition: opacity 0.3s ease-out; |
||||
|
-ms-transition: opacity 0.3s ease-out; |
||||
|
transition: opacity 0.3s ease-out; |
||||
|
} |
||||
|
.link.icon:hover { |
||||
|
opacity: 1 !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Circular |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.circular.icon { |
||||
|
-webkit-border-radius: 500px !important; |
||||
|
-moz-border-radius: 500px !important; |
||||
|
border-radius: 500px !important; |
||||
|
|
||||
|
padding: 0.5em 0em !important; |
||||
|
|
||||
|
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
|
||||
|
line-height: 1 !important; |
||||
|
width: 2em !important; |
||||
|
height: 2em !important; |
||||
|
} |
||||
|
i.circular.inverted.icon { |
||||
|
border: none; |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Flipped |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.vertically.flipped.icon { |
||||
|
-webkit-transform: scale(1, -1); |
||||
|
-moz-transform: scale(1, -1); |
||||
|
-o-transform: scale(1, -1); |
||||
|
-ms-transform: scale(1, -1); |
||||
|
transform: scale(1, -1); |
||||
|
} |
||||
|
i.horizontally.flipped.icon { |
||||
|
-webkit-transform: scale(-1, 1); |
||||
|
-moz-transform: scale(-1, 1); |
||||
|
-o-transform: scale(-1, 1); |
||||
|
-ms-transform: scale(-1, 1); |
||||
|
transform: scale(-1, 1); |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Rotated |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.left.rotated.icon { |
||||
|
-webkit-transform: rotate(-90deg); |
||||
|
-moz-transform: rotate(-90deg); |
||||
|
-o-transform: rotate(-90deg); |
||||
|
-ms-transform: rotate(-90deg); |
||||
|
transform: rotate(-90deg); |
||||
|
} |
||||
|
i.right.rotated.icon { |
||||
|
-webkit-transform: rotate(90deg); |
||||
|
-moz-transform: rotate(90deg); |
||||
|
-o-transform: rotate(90deg); |
||||
|
-ms-transform: rotate(90deg); |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Square |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.square.icon { |
||||
|
width: 2em; |
||||
|
height: 2em; |
||||
|
padding: 0.5em 0.35em !important; |
||||
|
|
||||
|
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; |
||||
|
|
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
i.square.icon:before { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
i.square.inverted.icon { |
||||
|
border: none; |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.inverted.icon { |
||||
|
background-color: #222222; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.blue.icon { |
||||
|
color: #6ECFF5 !important; |
||||
|
} |
||||
|
i.black.icon { |
||||
|
color: #5C6166 !important; |
||||
|
} |
||||
|
i.green.icon { |
||||
|
color: #A1CF64 !important; |
||||
|
} |
||||
|
i.red.icon { |
||||
|
color: #D95C5C !important; |
||||
|
} |
||||
|
i.purple.icon { |
||||
|
color: #564F8A !important; |
||||
|
} |
||||
|
i.teal.icon { |
||||
|
color: #00B5AD !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.inverted.black.icon { |
||||
|
background-color: #5C6166 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.blue.icon { |
||||
|
background-color: #6ECFF5 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.green.icon { |
||||
|
background-color: #A1CF64 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.red.icon { |
||||
|
background-color: #D95C5C !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.purple.icon { |
||||
|
background-color: #564F8A !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
i.inverted.teal.icon { |
||||
|
background-color: #00B5AD !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Sizes |
||||
|
--------------------*/ |
||||
|
|
||||
|
i.small.icon { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
i.icon { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
i.large.icon { |
||||
|
font-size: 2em; |
||||
|
margin-right: 0.5em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
i.huge.icon { |
||||
|
font-size: 4em; |
||||
|
margin-right: 0.75em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
i.massive.icon { |
||||
|
font-size: 8em; |
||||
|
margin-right: 1em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Sketchy Sizing |
||||
|
---------------*/ |
||||
|
|
||||
|
i.sketchy.circular.icon, |
||||
|
i.sketchy.square.icon { |
||||
|
padding: 0.35em !important; |
||||
|
} |
||||
@ -0,0 +1,170 @@ |
|||||
|
/* |
||||
|
* # Semantic Image |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Image |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.image { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
max-width: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
img.ui.image { |
||||
|
display: block; |
||||
|
background: none; |
||||
|
} |
||||
|
.ui.image img { |
||||
|
display: block; |
||||
|
max-width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
.ui.disabled.image { |
||||
|
cursor: default; |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Rounded |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.rounded.images .image, |
||||
|
.ui.rounded.images img, |
||||
|
.ui.rounded.image img, |
||||
|
.ui.rounded.image { |
||||
|
-webkit-border-radius: 0.3125em; |
||||
|
-moz-border-radius: 0.3125em; |
||||
|
border-radius: 0.3125em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Circular |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.circular.images .image, |
||||
|
.ui.circular.images img, |
||||
|
.ui.circular.image img, |
||||
|
.ui.circular.image { |
||||
|
-webkit-border-radius: 500rem; |
||||
|
-moz-border-radius: 500rem; |
||||
|
border-radius: 500rem; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Avatar |
||||
|
---------------*/ |
||||
|
|
||||
|
|
||||
|
.ui.avatar.images .image, |
||||
|
.ui.avatar.images img, |
||||
|
.ui.avatar.image img, |
||||
|
.ui.avatar.image { |
||||
|
margin-right: 0.5em; |
||||
|
|
||||
|
display: inline-block; |
||||
|
width: 2em; |
||||
|
height: 2em; |
||||
|
|
||||
|
-webkit-border-radius: 500rem; |
||||
|
-moz-border-radius: 500rem; |
||||
|
border-radius: 500rem; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Floated |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.floated.image, |
||||
|
.ui.floated.images { |
||||
|
float: left; |
||||
|
margin-right: 1em; |
||||
|
margin-bottom: 1em; |
||||
|
} |
||||
|
.ui.right.floated.images, |
||||
|
.ui.right.floated.image { |
||||
|
float: right; |
||||
|
margin-bottom: 1em; |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Sizes |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.tiny.images .image, |
||||
|
.ui.tiny.images img, |
||||
|
.ui.tiny.image { |
||||
|
width: 20px; |
||||
|
font-size: 0.7rem; |
||||
|
} |
||||
|
.ui.mini.images .image, |
||||
|
.ui.mini.images img, |
||||
|
.ui.mini.image { |
||||
|
width: 35px; |
||||
|
font-size: 0.8rem; |
||||
|
} |
||||
|
.ui.small.images .image, |
||||
|
.ui.small.images img, |
||||
|
.ui.small.image { |
||||
|
width: 80px; |
||||
|
font-size: 0.9rem; |
||||
|
} |
||||
|
.ui.medium.images .image, |
||||
|
.ui.medium.images img, |
||||
|
.ui.medium.image { |
||||
|
width: 300px; |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
.ui.large.images .image, |
||||
|
.ui.large.images img, |
||||
|
.ui.large.image { |
||||
|
width: 450px; |
||||
|
font-size: 1.1rem; |
||||
|
} |
||||
|
.ui.huge.images .image, |
||||
|
.ui.huge.images img, |
||||
|
.ui.huge.image { |
||||
|
width: 600px; |
||||
|
font-size: 1.2rem; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Groups |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.images { |
||||
|
font-size: 0em; |
||||
|
margin: 0em -0.25rem 0rem; |
||||
|
} |
||||
|
|
||||
|
.ui.images .image, |
||||
|
.ui.images img { |
||||
|
display: inline-block; |
||||
|
margin: 0em 0.25em 0.5em; |
||||
|
} |
||||
@ -0,0 +1,330 @@ |
|||||
|
/* |
||||
|
* # Semantic Input |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: May 29 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Standard |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Inputs |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.input { |
||||
|
display: inline-block; |
||||
|
position: relative; |
||||
|
} |
||||
|
.ui.input input { |
||||
|
width: 100%; |
||||
|
font-family: "Helvetica Neue", "Helvetica", Arial; |
||||
|
|
||||
|
margin: 0em; |
||||
|
padding: 0.85em 1.2em; |
||||
|
font-size: 0.875em; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.15); |
||||
|
outline: none; |
||||
|
|
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
|
||||
|
-webkit-border-radius: 0.3125em; |
||||
|
-moz-border-radius: 0.3125em; |
||||
|
border-radius: 0.3125em; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.2s ease |
||||
|
; |
||||
|
transition: |
||||
|
background-color 0.3s ease-out, |
||||
|
box-shadow 0.2s ease, |
||||
|
border-color 0.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; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Placeholder |
||||
|
---------------------*/ |
||||
|
|
||||
|
/* browsers require these rules separate */ |
||||
|
.ui.input::-web inputkit-input-placeholder { |
||||
|
color: #E0E0E0; |
||||
|
} |
||||
|
.ui.input::-moz input-placeholder { |
||||
|
color: #E0E0E0; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------------- |
||||
|
Active |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.input input:active, |
||||
|
.ui.input.down input { |
||||
|
border-color: rgba(0, 0, 0, 0.3); |
||||
|
background-color: #FAFAFA; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Loading |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.loading.input > .icon { |
||||
|
background: url(../images/loader-mini.gif) no-repeat 50% 50%; |
||||
|
} |
||||
|
.ui.loading.input > .icon:before, |
||||
|
.ui.loading.input > .icon:after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Focus |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.input.focus input, |
||||
|
.ui.input input:focus { |
||||
|
border-color: rgba(0, 0, 0, 0.2); |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
} |
||||
|
.ui.input.focus input input::-webkit-input-placeholder, |
||||
|
.ui.input input:focus input::-webkit-input-placeholder { |
||||
|
color: #AAAAAA; |
||||
|
} |
||||
|
.ui.input.focus input input::-moz-placeholder, |
||||
|
.ui.input input:focus input::-moz-placeholder { |
||||
|
color: #AAAAAA; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Error |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.input.error input { |
||||
|
background-color: #FFFAFA; |
||||
|
border-color: #E7BEBE; |
||||
|
color: #D95C5C; |
||||
|
} |
||||
|
|
||||
|
/* Error Placeholder */ |
||||
|
.ui.input.error input ::-webkit-input-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.4); |
||||
|
} |
||||
|
.ui.input.error input ::-moz-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.4); |
||||
|
} |
||||
|
.ui.input.error input :focus::-webkit-input-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.7); |
||||
|
} |
||||
|
.ui.input.error input :focus::-moz-placeholder { |
||||
|
color: rgba(255, 80, 80, 0.7); |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Transparent |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.transparent.input input { |
||||
|
border: none; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Icon |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.icon.input > .icon { |
||||
|
position: absolute; |
||||
|
opacity: 0.5; |
||||
|
top: 0px; |
||||
|
right: 0px; |
||||
|
|
||||
|
margin: 0em; |
||||
|
|
||||
|
width: 2.6em; |
||||
|
height: 100%; |
||||
|
padding-top: 0.85em; |
||||
|
|
||||
|
text-align: center; |
||||
|
|
||||
|
-webkit-border-radius: 0em 0.3125em 0.3125em 0em; |
||||
|
-moz-border-radius: 0em 0.3125em 0.3125em 0em; |
||||
|
border-radius: 0em 0.3125em 0.3125em 0em; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-transition: opacity 0.3s ease-out; |
||||
|
-moz-transition: opacity 0.3s ease-out; |
||||
|
-o-transition: opacity 0.3s ease-out; |
||||
|
-ms-transition: opacity 0.3s ease-out; |
||||
|
transition: opacity 0.3s ease-out; |
||||
|
} |
||||
|
.ui.icon.input input { |
||||
|
padding-right: 3em !important; |
||||
|
} |
||||
|
.ui.icon.input > .circular.icon { |
||||
|
top: 0.35em; |
||||
|
right: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* Left Side */ |
||||
|
.ui.left.icon.input > .icon { |
||||
|
right: auto; |
||||
|
left: 1px; |
||||
|
|
||||
|
-webkit-border-radius: 0.3125em 0em 0em 0.3125em; |
||||
|
-moz-border-radius: 0.3125em 0em 0em 0.3125em; |
||||
|
border-radius: 0.3125em 0em 0em 0.3125em; |
||||
|
} |
||||
|
.ui.left.icon.input > .circular.icon { |
||||
|
right: auto; |
||||
|
left: 0.5em; |
||||
|
} |
||||
|
.ui.left.icon.input > input { |
||||
|
padding-left: 3em !important; |
||||
|
padding-right: 1.2em !important; |
||||
|
} |
||||
|
|
||||
|
/* Focus */ |
||||
|
.ui.icon.input > input:focus ~ .icon { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Labeled |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.labeled.input .corner.label { |
||||
|
top: 1px; |
||||
|
right: 1px; |
||||
|
|
||||
|
font-size: 0.7em; |
||||
|
|
||||
|
-webkit-border-top-right-radius: 0.3125em; |
||||
|
-moz-border-top-right-radius: 0.3125em; |
||||
|
border-top-right-radius: 0.3125em; |
||||
|
} |
||||
|
.ui.labeled.input input { |
||||
|
padding-right: 2.5em !important; |
||||
|
} |
||||
|
|
||||
|
/* Spacing with corner label */ |
||||
|
.ui.labeled.icon.input:not(.left) > input { |
||||
|
padding-right: 3.25em !important; |
||||
|
} |
||||
|
.ui.labeled.icon.input:not(.left) > .icon { |
||||
|
margin-right: 0.75em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Action |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.action.input { |
||||
|
display: table; |
||||
|
} |
||||
|
|
||||
|
.ui.action.input > input { |
||||
|
display: table-cell; |
||||
|
border-top-right-radius: 0px !important; |
||||
|
border-bottom-right-radius: 0px !important; |
||||
|
border-right: none; |
||||
|
} |
||||
|
.ui.action.input > .button { |
||||
|
display: table-cell; |
||||
|
opacity: 0.9; |
||||
|
|
||||
|
border-top-left-radius: 0px; |
||||
|
border-bottom-left-radius: 0px; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.ui.action.input > input:focus ~ .button { |
||||
|
opacity: 1; |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Size |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.mini.input { |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
.ui.tiny.input { |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
.ui.small.input { |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
.ui.input { |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
.ui.large.input { |
||||
|
font-size: 1.125rem; |
||||
|
} |
||||
|
.ui.big.input { |
||||
|
font-size: 1.25rem; |
||||
|
} |
||||
|
.ui.huge.input { |
||||
|
font-size: 1.375rem; |
||||
|
} |
||||
|
.ui.massive.input { |
||||
|
font-size: 1.5rem; |
||||
|
} |
||||
@ -0,0 +1,824 @@ |
|||||
|
/* |
||||
|
* # Semantic Label - Flat |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 26 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Label |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.label { |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
|
||||
|
margin: -0.25em 0.25em 0em; |
||||
|
|
||||
|
background-color: #E8E8E8; |
||||
|
border-color: #E8E8E8; |
||||
|
|
||||
|
padding: 0.5em 0.8em; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
|
||||
|
text-transform: uppercase; |
||||
|
font-weight: normal; |
||||
|
|
||||
|
-webkit-border-radius: 0.325em; |
||||
|
-moz-border-radius: 0.325em; |
||||
|
border-radius: 0.325em; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
.ui.label:first-child { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.label:last-child { |
||||
|
margin-right: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Link */ |
||||
|
a.ui.label { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* Detail */ |
||||
|
.ui.label .detail { |
||||
|
display: inline-block; |
||||
|
margin-left: 0.5em; |
||||
|
font-weight: bold; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
/* Icon */ |
||||
|
.ui.label .icon { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
/* Removable label */ |
||||
|
.ui.label .delete.icon { |
||||
|
cursor: pointer; |
||||
|
margin: 0em 0em 0em 0.5em; |
||||
|
opacity: 0.7; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
} |
||||
|
.ui.label .delete.icon:hover { |
||||
|
opacity: 0.99; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.image.label { |
||||
|
width: auto !important; |
||||
|
margin-top: 0em; |
||||
|
margin-bottom: 0em; |
||||
|
|
||||
|
padding-top: 0.4em; |
||||
|
padding-bottom: 0.4em; |
||||
|
|
||||
|
line-height: 1.5em; |
||||
|
vertical-align: baseline; |
||||
|
text-transform: none; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
} |
||||
|
.ui.image.label img { |
||||
|
display: inline-block; |
||||
|
height: 2.25em; |
||||
|
margin: -0.4em 0.8em -0.4em -0.8em; |
||||
|
vertical-align: top; |
||||
|
|
||||
|
-moz-border-radius: 0.325em 0em 0em 0.325em; |
||||
|
-webkit-border-radius: 0.325em 0em 0em 0.325em; |
||||
|
border-radius: 0.325em 0em 0em 0.325em; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Disabled |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.label.disabled { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Hover |
||||
|
--------------------*/ |
||||
|
|
||||
|
a.ui.labels .label:hover, |
||||
|
a.ui.label:hover { |
||||
|
background-color: #E0E0E0; |
||||
|
border-color: #E0E0E0; |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
.ui.labels a.label:hover:before, |
||||
|
a.ui.label:hover:before { |
||||
|
background-color: #E0E0E0; |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Visible |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.labels.visible .label, |
||||
|
.ui.label.visible { |
||||
|
display: inline-block !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Hidden |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.labels.hidden .label, |
||||
|
.ui.label.hidden { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Tag |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.tag.labels .label, |
||||
|
.ui.tag.label { |
||||
|
margin-left: 1em; |
||||
|
position: relative; |
||||
|
padding: 0.33em 1.3em 0.33em 1.4em; |
||||
|
|
||||
|
-webkit-border-radius: 0px 3px 3px 0px; |
||||
|
-moz-border-radius: 0px 3px 3px 0px; |
||||
|
border-radius: 0px 3px 3px 0px; |
||||
|
} |
||||
|
.ui.tag.labels .label:before, |
||||
|
.ui.tag.label:before { |
||||
|
position: absolute; |
||||
|
top: 0.3em; |
||||
|
left: 0.3em; |
||||
|
content: ''; |
||||
|
|
||||
|
margin-left: -1em; |
||||
|
background-image: none; |
||||
|
|
||||
|
width: 1.5em; |
||||
|
height: 1.5em; |
||||
|
|
||||
|
-webkit-transform: rotate(45deg); |
||||
|
-moz-transform: rotate(45deg); |
||||
|
transform: rotate(45deg); |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ui.tag.labels .label:after, |
||||
|
.ui.tag.label:after { |
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
top: 50%; |
||||
|
left: -0.25em; |
||||
|
|
||||
|
margin-top: -0.3em; |
||||
|
background-color: #FFFFFF; |
||||
|
width: 0.55em; |
||||
|
height: 0.55em; |
||||
|
|
||||
|
-webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
||||
|
-moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
||||
|
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); |
||||
|
|
||||
|
-moz-border-radius: 100px 100px 100px 100px; |
||||
|
-webkit-border-radius: 100px 100px 100px 100px; |
||||
|
border-radius: 100px 100px 100px 100px; |
||||
|
} |
||||
|
/*------------------- |
||||
|
Ribbon |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.ribbon.label { |
||||
|
position: relative; |
||||
|
left: -2rem; |
||||
|
padding-left: 2rem; |
||||
|
-webkit-border-radius: 0px 4px 4px 0px; |
||||
|
-moz-border-radius: 0px 4px 4px 0px; |
||||
|
border-radius: 0px 4px 4px 0px; |
||||
|
} |
||||
|
|
||||
|
.ui.ribbon.label:after { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
|
||||
|
top: 100%; |
||||
|
left: 0%; |
||||
|
|
||||
|
border-top: 0em solid transparent; |
||||
|
border-right-width: 1em; |
||||
|
border-right-color: inherit; |
||||
|
border-right-style: solid; |
||||
|
border-bottom: 1em solid transparent; |
||||
|
border-left: 0em solid transparent; |
||||
|
|
||||
|
width: 0em; |
||||
|
height: 0em; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Attached |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.top.attached.label, |
||||
|
.ui.attached.label { |
||||
|
width: 100%; |
||||
|
position: absolute; |
||||
|
margin: 0em; |
||||
|
top: 0em; |
||||
|
left: 0em; |
||||
|
-webkit-border-radius: 4px 4px 0em 0em; |
||||
|
-moz-border-radius: 4px 4px 0em 0em; |
||||
|
border-radius: 4px 4px 0em 0em; |
||||
|
} |
||||
|
.ui.bottom.attached.label { |
||||
|
top: auto; |
||||
|
bottom: 0em; |
||||
|
|
||||
|
-webkit-border-radius: 0em 0em 4px 4px; |
||||
|
-moz-border-radius: 0em 0em 4px 4px; |
||||
|
border-radius: 0em 0em 4px 4px; |
||||
|
} |
||||
|
|
||||
|
.ui.top.left.attached.label { |
||||
|
width: auto; |
||||
|
margin-top: 0em !important; |
||||
|
|
||||
|
-webkit-border-radius: 4px 0em 4px 0em; |
||||
|
-moz-border-radius: 4px 0em 4px 0em; |
||||
|
border-radius: 4px 0em 4px 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.top.right.attached.label { |
||||
|
width: auto; |
||||
|
left: auto; |
||||
|
right: 0em; |
||||
|
|
||||
|
-webkit-border-radius: 0em 4px 0em 4px; |
||||
|
-moz-border-radius: 0em 4px 0em 4px; |
||||
|
border-radius: 0em 4px 0em 4px; |
||||
|
} |
||||
|
.ui.bottom.left.attached.label { |
||||
|
width: auto; |
||||
|
top: auto; |
||||
|
bottom: 0em; |
||||
|
|
||||
|
-webkit-border-radius: 4px 0em 0em 4px; |
||||
|
-moz-border-radius: 4px 0em 0em 4px; |
||||
|
border-radius: 4px 0em 0em 4px; |
||||
|
} |
||||
|
.ui.bottom.right.attached.label { |
||||
|
top: auto; |
||||
|
bottom: 0em; |
||||
|
left: auto; |
||||
|
right: 0em; |
||||
|
width: auto; |
||||
|
-webkit-border-radius: 4px 0em 4px 0em; |
||||
|
-moz-border-radius: 4px 0em 4px 0em; |
||||
|
border-radius: 4px 0em 4px 0em; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Corner Label |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.corner.label { |
||||
|
background-color: transparent; |
||||
|
position: absolute; |
||||
|
top: 0em; |
||||
|
right: 0em; |
||||
|
z-index: 10; |
||||
|
margin: 0em; |
||||
|
|
||||
|
font-size: 0.9em; |
||||
|
width: 1.75em; |
||||
|
height: 1.75em; |
||||
|
padding: 0em; |
||||
|
|
||||
|
text-align: center; |
||||
|
|
||||
|
-webkit-transition: color 0.2s ease; |
||||
|
-moz-transition: color 0.2s ease; |
||||
|
-o-transition: color 0.2s ease; |
||||
|
-ms-transition: color 0.2s ease; |
||||
|
transition: color 0.2s ease; |
||||
|
} |
||||
|
.ui.corner.label:after { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
right: 0em; |
||||
|
top: 0em; |
||||
|
z-index: -1; |
||||
|
|
||||
|
width: 0em; |
||||
|
height: 0em; |
||||
|
|
||||
|
border-top: 0em solid transparent; |
||||
|
border-right: 2.75em solid transparent; |
||||
|
border-bottom: 2.75em solid transparent; |
||||
|
border-left: 0em solid transparent; |
||||
|
|
||||
|
border-right-color: inherit; |
||||
|
|
||||
|
-webkit-transition: border-color 0.2s ease; |
||||
|
-moz-transition: border-color 0.2s ease; |
||||
|
-o-transition: border-color 0.2s ease; |
||||
|
-ms-transition: border-color 0.2s ease; |
||||
|
transition: border-color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.ui.corner.label .icon { |
||||
|
margin: 0.35em 0em; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.ui.corner.label .text { |
||||
|
display: inline-block; |
||||
|
margin: 0.7em 0em 0em 0em; |
||||
|
width: 2.5em; |
||||
|
|
||||
|
font-size: 0.7em; |
||||
|
text-align: center; |
||||
|
|
||||
|
-webkit-transform: rotate(45deg); |
||||
|
-moz-transform: rotate(45deg); |
||||
|
-o-transform: rotate(45deg); |
||||
|
-ms-transform: rotate(45deg); |
||||
|
transform: rotate(45deg); |
||||
|
} |
||||
|
|
||||
|
/* Left Corner */ |
||||
|
.ui.left.corner.label, |
||||
|
.ui.left.corner.label:after { |
||||
|
right: auto; |
||||
|
left: 0em; |
||||
|
} |
||||
|
.ui.left.corner.label:after { |
||||
|
border-top: 2.75em solid transparent; |
||||
|
border-right: 2.75em solid transparent; |
||||
|
border-bottom: 0em solid transparent; |
||||
|
border-left: 0em solid transparent; |
||||
|
|
||||
|
border-top-color: inherit; |
||||
|
} |
||||
|
.ui.left.corner.label .text { |
||||
|
-webkit-transform: rotate(-45deg); |
||||
|
-moz-transform: rotate(-45deg); |
||||
|
-o-transform: rotate(-45deg); |
||||
|
-ms-transform: rotate(-45deg); |
||||
|
transform: rotate(-45deg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Hover */ |
||||
|
.ui.corner.label:hover { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Fluid |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.label.fluid, |
||||
|
.ui.fluid.labels > .label { |
||||
|
width: 100%; |
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.inverted.labels .label, |
||||
|
.ui.inverted.label { |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
/*--- Black ---*/ |
||||
|
.ui.black.labels .label, |
||||
|
.ui.black.label { |
||||
|
background-color: #5C6166 !important; |
||||
|
border-color: #5C6166 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels .black.label:before, |
||||
|
.ui.black.labels .label:before, |
||||
|
.ui.black.label:before { |
||||
|
background-color: #5C6166 !important; |
||||
|
} |
||||
|
/* Hover */ |
||||
|
a.ui.black.labels .label:hover, |
||||
|
a.ui.black.label:hover { |
||||
|
background-color: #888888 !important; |
||||
|
border-color: #888888 !important; |
||||
|
} |
||||
|
.ui.labels a.black.label:hover:before, |
||||
|
.ui.black.labels a.label:hover:before, |
||||
|
a.ui.black.label:hover:before { |
||||
|
background-color: #888888 !important; |
||||
|
} |
||||
|
|
||||
|
/* Corner */ |
||||
|
.ui.black.corner.label, |
||||
|
.ui.black.corner.label:hover { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Green ---*/ |
||||
|
.ui.green.labels .label, |
||||
|
.ui.green.label { |
||||
|
background-color: #A1CF64 !important; |
||||
|
border-color: #A1CF64 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels .green.label:before, |
||||
|
.ui.green.labels .label:before, |
||||
|
.ui.green.label:before { |
||||
|
background-color: #A1CF64 !important; |
||||
|
} |
||||
|
|
||||
|
/* Hover */ |
||||
|
a.ui.green.labels .label:hover, |
||||
|
a.ui.green.label:hover { |
||||
|
background-color: #89B84C !important; |
||||
|
border-color: #89B84C !important; |
||||
|
} |
||||
|
.ui.labels a.green.label:hover:before, |
||||
|
.ui.green.labels a.label:hover:before, |
||||
|
a.ui.green.label:hover:before { |
||||
|
background-color: #89B84C !important; |
||||
|
} |
||||
|
|
||||
|
/* Corner */ |
||||
|
.ui.green.corner.label, |
||||
|
.ui.green.corner.label:hover { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Red ---*/ |
||||
|
.ui.red.labels .label, |
||||
|
.ui.red.label { |
||||
|
background-color: #D95C5C !important; |
||||
|
border-color: #D95C5C !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels .red.label:before, |
||||
|
.ui.red.labels .label:before, |
||||
|
.ui.red.label:before { |
||||
|
background-color: #D95C5C !important; |
||||
|
} |
||||
|
/* Corner */ |
||||
|
.ui.red.corner.label, |
||||
|
.ui.red.corner.label:hover { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
/* Hover */ |
||||
|
a.ui.red.labels .label:hover, |
||||
|
a.ui.red.label:hover{ |
||||
|
background-color: #DE3859 !important; |
||||
|
border-color: #DE3859 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels a.red.label:hover:before, |
||||
|
.ui.red.labels a.label:hover:before, |
||||
|
a.ui.red.label:hover:before { |
||||
|
background-color: #DE3859 !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Blue ---*/ |
||||
|
.ui.blue.labels .label, |
||||
|
.ui.blue.label { |
||||
|
background-color: #6ECFF5 !important; |
||||
|
border-color: #6ECFF5 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels .blue.label:before, |
||||
|
.ui.blue.labels .label:before, |
||||
|
.ui.blue.label:before { |
||||
|
background-color: #6ECFF5 !important; |
||||
|
} |
||||
|
/* Hover */ |
||||
|
a.ui.blue.labels .label:hover, |
||||
|
.ui.blue.labels a.label:hover, |
||||
|
a.ui.blue.label:hover { |
||||
|
background-color: #1AB8F3 !important; |
||||
|
border-color: #1AB8F3 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels a.blue.label:hover:before, |
||||
|
.ui.blue.labels a.label:hover:before, |
||||
|
a.ui.blue.label:hover:before { |
||||
|
background-color: #1AB8F3 !important; |
||||
|
} |
||||
|
/* Corner */ |
||||
|
.ui.blue.corner.label, |
||||
|
.ui.blue.corner.label:hover { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
/*--- Purple ---*/ |
||||
|
.ui.purple.labels .label, |
||||
|
.ui.purple.label { |
||||
|
background-color: #564F8A !important; |
||||
|
border-color: #564F8A !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels .purple.label:before, |
||||
|
.ui.purple.labels .label:before, |
||||
|
.ui.purple.label:before { |
||||
|
background-color: #564F8A !important; |
||||
|
} |
||||
|
/* Hover */ |
||||
|
a.ui.purple.labels .label:hover, |
||||
|
.ui.purple.labels a.label:hover, |
||||
|
a.ui.purple.label:hover { |
||||
|
background-color: #3E3773 !important; |
||||
|
border-color: #3E3773 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels a.purple.label:hover:before, |
||||
|
.ui.purple.labels a.label:hover:before, |
||||
|
a.ui.purple.label:hover:before { |
||||
|
background-color: #3E3773 !important; |
||||
|
} |
||||
|
/* Corner */ |
||||
|
.ui.purple.corner.label, |
||||
|
.ui.purple.corner.label:hover { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Pink ---*/ |
||||
|
.ui.teal.labels .label, |
||||
|
.ui.teal.label { |
||||
|
background-color: #00B5AD !important; |
||||
|
border-color: #00B5AD !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels .teal.label:before, |
||||
|
.ui.teal.labels .label:before, |
||||
|
.ui.teal.label:before { |
||||
|
background-color: #00B5AD !important; |
||||
|
} |
||||
|
/* Hover */ |
||||
|
a.ui.teal.labels .label:hover, |
||||
|
.ui.teal.labels a.label:hover, |
||||
|
a.ui.teal.label:hover { |
||||
|
background-color: #009A93 !important; |
||||
|
border-color: #009A93 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.labels a.teal.label:hover:before, |
||||
|
.ui.teal.labels a.label:hover:before, |
||||
|
a.ui.teal.label:hover:before { |
||||
|
background-color: #009A93 !important; |
||||
|
} |
||||
|
/* Corner */ |
||||
|
.ui.teal.corner.label, |
||||
|
.ui.teal.corner.label:hover { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Horizontal |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.horizontal.labels .label, |
||||
|
.ui.horizontal.label { |
||||
|
margin: -0.125em 0.5em -0.125em 0em; |
||||
|
|
||||
|
padding: 0.35em 1em; |
||||
|
min-width: 6em; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Circular |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.circular.labels .label, |
||||
|
.ui.circular.label { |
||||
|
min-height: 1em; |
||||
|
max-height: 2em; |
||||
|
|
||||
|
padding: 0.5em !important; |
||||
|
|
||||
|
line-height: 1em; |
||||
|
text-align: center; |
||||
|
|
||||
|
-webkit-border-radius: 500rem; |
||||
|
-moz-border-radius: 500rem; |
||||
|
border-radius: 500rem; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Pointing |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.pointing.label { |
||||
|
position: relative; |
||||
|
} |
||||
|
.ui.attached.pointing.label { |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.ui.pointing.label:before { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
|
||||
|
width: 0.6em; |
||||
|
height: 0.6em; |
||||
|
|
||||
|
background-image: none; |
||||
|
|
||||
|
-webkit-transform: rotate(45deg); |
||||
|
-moz-transform: rotate(45deg); |
||||
|
transform: rotate(45deg); |
||||
|
z-index: 2; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
transition: |
||||
|
background 0.1s linear |
||||
|
; |
||||
|
} |
||||
|
/*--- Above ---*/ |
||||
|
.ui.pointing.label:before { |
||||
|
background-color: #E8E8E8; |
||||
|
} |
||||
|
.ui.pointing.label, |
||||
|
.ui.pointing.above.label { |
||||
|
margin-top: 1em; |
||||
|
} |
||||
|
.ui.pointing.label:before, |
||||
|
.ui.pointing.above.label:before { |
||||
|
margin-left: -0.3em; |
||||
|
top: -0.3em; |
||||
|
left: 50%; |
||||
|
} |
||||
|
/*--- Below ---*/ |
||||
|
.ui.pointing.below.label { |
||||
|
margin-top: 0em; |
||||
|
margin-bottom: 1em; |
||||
|
} |
||||
|
.ui.pointing.below.label:before { |
||||
|
margin-left: -0.3em; |
||||
|
top: auto; |
||||
|
right: auto; |
||||
|
bottom: -0.3em; |
||||
|
left: 50%; |
||||
|
} |
||||
|
/*--- Left ---*/ |
||||
|
.ui.pointing.left.label { |
||||
|
margin-top: 0em; |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
.ui.pointing.left.label:before { |
||||
|
margin-top: -0.3em; |
||||
|
bottom: auto; |
||||
|
right: auto; |
||||
|
top: 50%; |
||||
|
left: 0em; |
||||
|
} |
||||
|
/*--- Right ---*/ |
||||
|
.ui.pointing.right.label { |
||||
|
margin-top: 0em; |
||||
|
margin-right: 1em; |
||||
|
} |
||||
|
.ui.pointing.right.label:before { |
||||
|
margin-top: -0.3em; |
||||
|
right: -0.3em; |
||||
|
top: 50%; |
||||
|
bottom: auto; |
||||
|
left: auto; |
||||
|
} |
||||
|
|
||||
|
/*------------------ |
||||
|
Floating Label |
||||
|
-------------------*/ |
||||
|
|
||||
|
.ui.floating.label { |
||||
|
position: absolute; |
||||
|
z-index: 100; |
||||
|
top: -1em; |
||||
|
left: 100%; |
||||
|
margin: 0em 0em 0em -1.5em !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Sizes |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.small.labels .label, |
||||
|
.ui.small.label { |
||||
|
font-size: 0.75rem; |
||||
|
} |
||||
|
.ui.label { |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
.ui.large.labels .label, |
||||
|
.ui.large.label { |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
.ui.huge.labels .label, |
||||
|
.ui.huge.label { |
||||
|
font-size: 1rem; |
||||
|
} |
||||
@ -0,0 +1,178 @@ |
|||||
|
/* |
||||
|
* # Semantic Loader |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Loader |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/* Standard Size */ |
||||
|
.ui.loader { |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
margin: -16px 0px 0px -16px; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.ui.dimmer .loader { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Text |
||||
|
--------------------*/ |
||||
|
|
||||
|
/* Text Styles */ |
||||
|
.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: 0.875em; |
||||
|
} |
||||
|
.ui.loader.text.mini { |
||||
|
margin-top: -16px; |
||||
|
min-width: 16px; |
||||
|
padding-top: 20px; |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
.ui.loader.text.small { |
||||
|
margin-top: -23px; |
||||
|
min-width: 24px; |
||||
|
padding-top: 32px; |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
.ui.loader.text.large { |
||||
|
margin-top: -46px; |
||||
|
min-width: 64px; |
||||
|
padding-top: 80px; |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
.ui.loader.active, |
||||
|
.ui.loader.visible { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.ui.loader.disabled, |
||||
|
.ui.loader.hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.dimmer .ui.text.loader, |
||||
|
.ui.inverted.text.loader { |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
} |
||||
|
.ui.inverted.dimmer .ui.text.loader { |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
/* Tiny Size */ |
||||
|
.ui.dimmer .mini.ui.loader, |
||||
|
.ui.inverted .mini.ui.loader { |
||||
|
background-image: url(../images/loader-mini-inverted.gif); |
||||
|
} |
||||
|
|
||||
|
/* Small Size */ |
||||
|
.ui.dimmer .small.ui.loader, |
||||
|
.ui.inverted .small.ui.loader { |
||||
|
background-image: url(../images/loader-small-inverted.gif); |
||||
|
} |
||||
|
|
||||
|
/* Standard Size */ |
||||
|
.ui.dimmer .ui.loader, |
||||
|
.ui.inverted.loader { |
||||
|
background-image: url(../images/loader-medium-inverted.gif); |
||||
|
} |
||||
|
|
||||
|
/* Large Size */ |
||||
|
.ui.dimmer .large.ui.loader, |
||||
|
.ui.inverted .large.ui.loader { |
||||
|
background-image: url(../images/loader-large-inverted.gif); |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Sizes |
||||
|
--------------------*/ |
||||
|
|
||||
|
/* Tiny Size */ |
||||
|
.ui.inverted.dimmer .ui.loader.mini, |
||||
|
.ui.loader.mini { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
background-image: url(../images/loader-mini.gif); |
||||
|
margin: -8px 0px 0px -8px; |
||||
|
} |
||||
|
|
||||
|
/* Small Size */ |
||||
|
.ui.inverted.dimmer .ui.loader.small, |
||||
|
.ui.loader.small { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
background-image: url(../images/loader-small.gif); |
||||
|
margin: -12px 0px 0px -12px; |
||||
|
} |
||||
|
|
||||
|
.ui.inverted.dimmer .ui.loader, |
||||
|
.ui.loader { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
background: url(../images/loader-medium.gif) no-repeat; |
||||
|
background-position: 48% 0px; |
||||
|
} |
||||
|
|
||||
|
/* Large Size */ |
||||
|
.ui.inverted.dimmer .ui.loader.large, |
||||
|
.ui.loader.large { |
||||
|
width: 64px; |
||||
|
height: 64px; |
||||
|
background-image: url(../images/loader-large.gif); |
||||
|
margin: -32px 0px 0px -32px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Inline |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.inline.loader { |
||||
|
position: static; |
||||
|
vertical-align: middle; |
||||
|
margin: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.inline.loader.active, |
||||
|
.ui.inline.loader.visible { |
||||
|
display: inline-block; |
||||
|
} |
||||
@ -0,0 +1,353 @@ |
|||||
|
/* |
||||
|
* # Semantic Progress Bar |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: Nay 14, 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Progress Bar |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.progress { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
width: 100%; |
||||
|
height: 35px; |
||||
|
|
||||
|
background-color: #FAFAFA; |
||||
|
padding: 5px; |
||||
|
|
||||
|
-webkit-border-radius: 0.3125em; |
||||
|
-moz-border-radius: 0.3125em; |
||||
|
border-radius: 0.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: #CCCCCC; |
||||
|
|
||||
|
-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 |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Successful |
||||
|
---------------*/ |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Failed |
||||
|
---------------*/ |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Active |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.active.progress .bar { |
||||
|
position: relative; |
||||
|
} |
||||
|
.ui.active.progress .bar::after { |
||||
|
content: ''; |
||||
|
opacity: 0; |
||||
|
|
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
right: 0px; |
||||
|
bottom: 0px; |
||||
|
background: #FFFFFF; |
||||
|
|
||||
|
-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: 0.3; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 0; |
||||
|
width: 95%; |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes progress-active { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
width: 0; |
||||
|
} |
||||
|
50% { |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
@keyframes progress-active { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
width: 0; |
||||
|
} |
||||
|
50% { |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Disabled |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.disabled.progress { |
||||
|
opacity: 0.35; |
||||
|
} |
||||
|
.ui.disabled.progress .bar, |
||||
|
.ui.disabled.progress .bar::after { |
||||
|
-webkit-animation: none !important; |
||||
|
-moz-animation: none !important; |
||||
|
animation: none !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Attached |
||||
|
---------------*/ |
||||
|
|
||||
|
/* bottom attached */ |
||||
|
.ui.progress.attached { |
||||
|
position: relative; |
||||
|
border: none; |
||||
|
} |
||||
|
.ui.progress.attached, |
||||
|
.ui.progress.attached .bar { |
||||
|
display: block; |
||||
|
height: 3px; |
||||
|
padding: 0px; |
||||
|
overflow: hidden; |
||||
|
-webkit-border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
-moz-border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
} |
||||
|
.ui.progress.attached .bar { |
||||
|
-webkit-border-radius: 0em; |
||||
|
-moz-border-radius: 0em; |
||||
|
border-radius: 0em; |
||||
|
} |
||||
|
|
||||
|
/* top attached */ |
||||
|
.ui.progress.top.attached, |
||||
|
.ui.progress.top.attached .bar { |
||||
|
top: -2px; |
||||
|
-webkit-border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
-moz-border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
} |
||||
|
.ui.progress.top.attached .bar { |
||||
|
-webkit-border-radius: 0em; |
||||
|
-moz-border-radius: 0em; |
||||
|
border-radius: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Colors |
||||
|
---------------*/ |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Striped |
||||
|
---------------*/ |
||||
|
|
||||
|
.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(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
||||
|
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
||||
|
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.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: 0px 0; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 60px 0; |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes progress-striped { |
||||
|
0% { |
||||
|
background-position: 0px 0; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 60px 0; |
||||
|
} |
||||
|
} |
||||
|
@keyframes progress-striped { |
||||
|
0% { |
||||
|
background-position: 0px 0; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 60px 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Sizes |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.small.progress .bar { |
||||
|
height: 14px; |
||||
|
} |
||||
@ -0,0 +1,465 @@ |
|||||
|
/* |
||||
|
* # Semantic Segment - Flat |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: May 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Segment |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.segment { |
||||
|
position: relative; |
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
margin: 1em 0em; |
||||
|
padding: 1em; |
||||
|
|
||||
|
-webkit-border-radius: 5px 5px 5px 5px; |
||||
|
-moz-border-radius: 5px 5px 5px 5px; |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.ui.segment:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.segment:last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.segment:after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
height: 0; |
||||
|
clear: both; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.ui.vertical.segment { |
||||
|
margin: 0em; |
||||
|
padding-left: 0em; |
||||
|
padding-right: 0em; |
||||
|
|
||||
|
background-color: transparent; |
||||
|
|
||||
|
-webkit-border-radius: 0px; |
||||
|
-moz-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 1px 0px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 1px 0px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 1px 0px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
} |
||||
|
.ui.vertical.segment:first-child { |
||||
|
padding-top: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.horizontal.segment { |
||||
|
margin: 0em; |
||||
|
padding-top: 0em; |
||||
|
padding-bottom: 0em; |
||||
|
|
||||
|
background-color: transparent; |
||||
|
|
||||
|
-webkit-border-radius: 0px; |
||||
|
-moz-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
1px 0px 0px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
1px 0px 0px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
box-shadow: |
||||
|
1px 0px 0px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
} |
||||
|
.ui.horizontal.segment:first-child { |
||||
|
padding-left: 0em; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Loose Coupling |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.pointing.menu + .ui.attached.segment { |
||||
|
top: 1px; |
||||
|
} |
||||
|
|
||||
|
/* No padding on edge content */ |
||||
|
.ui.segment > :first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.segment > :last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
/* Padding on next content after a label */ |
||||
|
.ui.segment > .attached.label:first-child + * { |
||||
|
margin-top: 2em; |
||||
|
} |
||||
|
.ui.segment > .bottom.attached.label:first-child ~ :last-child { |
||||
|
margin-top: 0em; |
||||
|
margin-bottom: 2em; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Piled |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.piled.segment { |
||||
|
margin: 2em 0em; |
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
||||
|
; |
||||
|
-ms-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
||||
|
; |
||||
|
-o-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.15) |
||||
|
; |
||||
|
} |
||||
|
.ui.piled.segment:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.piled.segment:last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
.ui.piled.segment:after, |
||||
|
.ui.piled.segment:before { |
||||
|
background-color: #FFFFFF; |
||||
|
visibility: visible; |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
height: 100%; |
||||
|
left: -1px; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.1) |
||||
|
; |
||||
|
} |
||||
|
.ui.piled.segment:after { |
||||
|
-webkit-transform: rotate(1.2deg); |
||||
|
-moz-transform: rotate(1.2deg); |
||||
|
-ms-transform: rotate(1.2deg); |
||||
|
-o-transform: rotate(1.2deg); |
||||
|
transform: rotate(1.2deg); |
||||
|
top: 0; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
.ui.piled.segment:before { |
||||
|
-webkit-transform: rotate(-1.2deg); |
||||
|
-moz-transform: rotate(-1.2deg); |
||||
|
-ms-transform: rotate(-1.2deg); |
||||
|
-o-transform: rotate(-1.2deg); |
||||
|
transform: rotate(-1.2deg); |
||||
|
top: 0; |
||||
|
z-index: -2; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Stacked |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.stacked.segment { |
||||
|
padding-bottom: 1.7em; |
||||
|
} |
||||
|
.ui.stacked.segment:after, |
||||
|
.ui.stacked.segment:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: -3px; |
||||
|
left: 0%; |
||||
|
|
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
background-color: rgba(0, 0, 0, 0.02); |
||||
|
|
||||
|
width: 100%; |
||||
|
height: 5px; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
.ui.stacked.segment:before { |
||||
|
bottom: 0px; |
||||
|
} |
||||
|
|
||||
|
/* Inverted */ |
||||
|
.ui.stacked.inverted.segment:after, |
||||
|
.ui.stacked.inverted.segment:before { |
||||
|
background-color: rgba(255, 255, 255, 0.1); |
||||
|
border-top: 1px solid rgba(255, 255, 255, 0.35); |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Raised |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.raised.segment { |
||||
|
-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.disabled.segment { |
||||
|
opacity: 0.8; |
||||
|
color: #DDDDDD; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Basic |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.basic.segment { |
||||
|
position: relative; |
||||
|
background-color: transparent; |
||||
|
|
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
|
||||
|
-webkit-border-radius: 0px; |
||||
|
-moz-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
} |
||||
|
.ui.basic.segment:first-child { |
||||
|
padding-top: 0em; |
||||
|
} |
||||
|
.ui.basic.segment:last-child { |
||||
|
padding-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Fittted |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.fitted.segment { |
||||
|
padding: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.blue.segment { |
||||
|
border-top: 0.2em solid #6ECFF5; |
||||
|
} |
||||
|
.ui.green.segment { |
||||
|
border-top: 0.2em solid #A1CF64; |
||||
|
} |
||||
|
.ui.red.segment { |
||||
|
border-top: 0.2em solid #D95C5C; |
||||
|
} |
||||
|
.ui.purple.segment { |
||||
|
border-top: 0.2em solid #564F8A; |
||||
|
} |
||||
|
.ui.teal.segment { |
||||
|
border-top: 0.2em solid #00B5AD; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted Colors |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.inverted.black.segment { |
||||
|
background-color: #5C6166 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.blue.segment { |
||||
|
background-color: #6ECFF5 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.green.segment { |
||||
|
background-color: #A1CF64 !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.red.segment { |
||||
|
background-color: #D95C5C !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.purple.segment { |
||||
|
background-color: #564F8A !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
.ui.inverted.teal.segment { |
||||
|
background-color: #00B5AD !important; |
||||
|
color: #FFFFFF !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Aligned |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.left.aligned.segment { |
||||
|
text-align: left; |
||||
|
} |
||||
|
.ui.right.aligned.segment { |
||||
|
text-align: right; |
||||
|
} |
||||
|
.ui.center.aligned.segment { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Floated |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.floated.segment, |
||||
|
.ui.left.floated.segment { |
||||
|
float: left; |
||||
|
} |
||||
|
.ui.right.floated.segment { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Inverted |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.inverted.segment { |
||||
|
border: none; |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
.ui.inverted.segment, |
||||
|
.ui.primary.inverted.segment { |
||||
|
background-color: #222222; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Ordinality |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.primary.segment { |
||||
|
background-color: #FFFFFF; |
||||
|
color: #555555; |
||||
|
} |
||||
|
|
||||
|
.ui.secondary.segment { |
||||
|
background-color: #FAF9FA; |
||||
|
color: #777777; |
||||
|
} |
||||
|
|
||||
|
.ui.tertiary.segment { |
||||
|
background-color: #EBEBEB; |
||||
|
color: #B0B0B0; |
||||
|
} |
||||
|
|
||||
|
.ui.secondary.inverted.segment { |
||||
|
background-color: #555555; |
||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); |
||||
|
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
||||
|
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
||||
|
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
||||
|
background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); |
||||
|
color: #FAFAFA; |
||||
|
} |
||||
|
.ui.tertiary.inverted.segment { |
||||
|
background-color: #555555; |
||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); |
||||
|
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
||||
|
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
||||
|
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
||||
|
background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); |
||||
|
color: #EEEEEE; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Attached |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.segment.attached { |
||||
|
top: -1px; |
||||
|
bottom: -1px; |
||||
|
|
||||
|
-moz-border-radius: 0px; |
||||
|
-webkit-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
|
||||
|
margin: 0em; |
||||
|
|
||||
|
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD; |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; |
||||
|
box-shadow: 0px 0px 0px 1px #DDDDDD; |
||||
|
} |
||||
|
.ui.top.attached.segment { |
||||
|
top: 0px; |
||||
|
bottom: -1px; |
||||
|
|
||||
|
margin-top: 1em; |
||||
|
margin-bottom: 0em; |
||||
|
|
||||
|
-moz-border-radius: 5px 5px 0px 0px; |
||||
|
-webkit-border-radius: 5px 5px 0px 0px; |
||||
|
border-radius: 5px 5px 0px 0px; |
||||
|
} |
||||
|
.ui.segment.bottom.attached { |
||||
|
top: -1px; |
||||
|
bottom: 0px; |
||||
|
|
||||
|
margin-top: 0em; |
||||
|
margin-bottom: 1em; |
||||
|
|
||||
|
-moz-border-radius: 0px 0px 5px 5px; |
||||
|
-webkit-border-radius: 0px 0px 5px 5px; |
||||
|
border-radius: 0px 0px 5px 5px; |
||||
|
} |
||||
@ -0,0 +1,294 @@ |
|||||
|
/* |
||||
|
* # Semantic Steps |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Step |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.step, |
||||
|
.ui.steps .step { |
||||
|
display: inline-block; |
||||
|
position: relative; |
||||
|
padding: 1em 2em 1em 3em; |
||||
|
|
||||
|
vertical-align: top; |
||||
|
background-color: #FFFFFF; |
||||
|
color: #888888; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.ui.step:after, |
||||
|
.ui.steps .step:after { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
content: ''; |
||||
|
top: 0em; |
||||
|
right: -1.45em; |
||||
|
|
||||
|
border-bottom: 1.5em solid transparent; |
||||
|
border-left: 1.5em solid #FFFFFF; |
||||
|
border-top: 1.5em solid transparent; |
||||
|
|
||||
|
width: 0em; |
||||
|
height: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.step, |
||||
|
.ui.steps .step, |
||||
|
.ui.steps .step:after { |
||||
|
-webkit-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
transition: |
||||
|
opacity 0.1s ease, |
||||
|
color 0.1s ease, |
||||
|
box-shadow 0.1s ease |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Group |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.steps { |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
font-size: 0em; |
||||
|
|
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
line-height: 1; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-moz-border-radius: 0.3125rem; |
||||
|
-webkit-border-radius: 0.3125rem; |
||||
|
border-radius: 0.3125rem; |
||||
|
} |
||||
|
|
||||
|
.ui.steps .step:first-child { |
||||
|
padding-left: 1.35em; |
||||
|
-webkit-border-radius: 0.3125em 0em 0em 0.3125em; |
||||
|
-moz-border-radius: 0.3125em 0em 0em 0.3125em; |
||||
|
border-radius: 0.3125em 0em 0em 0.3125em; |
||||
|
} |
||||
|
.ui.steps .step:last-child { |
||||
|
-webkit-border-radius: 0em 0.3125em 0.3125em 0em; |
||||
|
-moz-border-radius: 0em 0.3125em 0.3125em 0em; |
||||
|
border-radius: 0em 0.3125em 0.3125em 0em; |
||||
|
} |
||||
|
.ui.steps .step:only-child { |
||||
|
-webkit-border-radius: 0.3125em; |
||||
|
-moz-border-radius: 0.3125em; |
||||
|
border-radius: 0.3125em; |
||||
|
} |
||||
|
|
||||
|
.ui.steps .step:last-child { |
||||
|
margin-right: 0em; |
||||
|
} |
||||
|
.ui.steps .step:last-child:after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Hover */ |
||||
|
.ui.step:hover, |
||||
|
.ui.step.hover { |
||||
|
background-color: #F7F7F7; |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
.ui.steps .step.hover:after, |
||||
|
.ui.steps .step:hover:after, |
||||
|
.ui.step:hover, |
||||
|
.ui.step.hover::after { |
||||
|
border-left-color: #F7F7F7; |
||||
|
} |
||||
|
|
||||
|
/* Hover */ |
||||
|
.ui.steps .step.down, |
||||
|
.ui.steps .step:active, |
||||
|
.ui.step.down, |
||||
|
.ui.step:active { |
||||
|
background-color: #F0F0F0; |
||||
|
} |
||||
|
.ui.steps .step.down:after, |
||||
|
.ui.steps .step:active:after, |
||||
|
.ui.steps.down::after, |
||||
|
.ui.steps:active::after { |
||||
|
border-left-color: #F0F0F0; |
||||
|
} |
||||
|
|
||||
|
/* Active */ |
||||
|
.ui.steps .step.active, |
||||
|
.ui.active.step { |
||||
|
cursor: auto; |
||||
|
background-color: #555555; |
||||
|
|
||||
|
color: #FFFFFF; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.ui.steps .step.active:after, |
||||
|
.ui.active.steps:after { |
||||
|
border-left-color: #555555; |
||||
|
} |
||||
|
|
||||
|
/* Disabled */ |
||||
|
.ui.steps .disabled.step, |
||||
|
.ui.disabled.step { |
||||
|
cursor: auto; |
||||
|
background-color: #FFFFFF; |
||||
|
color: #CBCBCB; |
||||
|
} |
||||
|
.ui.disabled.step:after { |
||||
|
border: none; |
||||
|
background-color: #FFFFFF; |
||||
|
top: 0.42em; |
||||
|
right: -1em; |
||||
|
|
||||
|
width: 2.15em; |
||||
|
height: 2.15em; |
||||
|
|
||||
|
-webkit-transform: rotate(-45deg); |
||||
|
-moz-transform: rotate(-45deg); |
||||
|
-o-transform: rotate(-45deg); |
||||
|
-ms-transform: rotate(-45deg); |
||||
|
transform: rotate(-45deg); |
||||
|
|
||||
|
-webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Attached */ |
||||
|
.attached.ui.steps { |
||||
|
margin: 0em; |
||||
|
-webkit-border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
-moz-border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
border-radius: 0.3125em 0.3125em 0em 0em; |
||||
|
} |
||||
|
.attached.ui.steps .step:first-child { |
||||
|
-webkit-border-radius: 0.3125em 0em 0em 0em; |
||||
|
-moz-border-radius: 0.3125em 0em 0em 0em; |
||||
|
border-radius: 0.3125em 0em 0em 0em; |
||||
|
} |
||||
|
.attached.ui.steps .step:last-child { |
||||
|
-webkit-border-radius: 0em 0.3125em 0em 0em; |
||||
|
-moz-border-radius: 0em 0.3125em 0em 0em; |
||||
|
border-radius: 0em 0.3125em 0em 0em; |
||||
|
} |
||||
|
|
||||
|
/* Bottom Side */ |
||||
|
.bottom.attached.ui.steps { |
||||
|
margin-top: -1px; |
||||
|
-webkit-border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
-moz-border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
border-radius: 0em 0em 0.3125em 0.3125em; |
||||
|
} |
||||
|
.bottom.attached.ui.steps .step:first-child { |
||||
|
-webkit-border-radius: 0em 0em 0em 0.3125em; |
||||
|
-moz-border-radius: 0em 0em 0em 0.3125em; |
||||
|
border-radius: 0em 0em 0em 0.3125em; |
||||
|
} |
||||
|
.bottom.attached.ui.steps .step:last-child { |
||||
|
-webkit-border-radius: 0em 0em 0.3125em 0em; |
||||
|
-moz-border-radius: 0em 0em 0.3125em 0em; |
||||
|
border-radius: 0em 0em 0.3125em 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Evenly divided */ |
||||
|
.ui.one.steps, |
||||
|
.ui.two.steps, |
||||
|
.ui.three.steps, |
||||
|
.ui.four.steps, |
||||
|
.ui.five.steps, |
||||
|
.ui.six.steps, |
||||
|
.ui.seven.steps, |
||||
|
.ui.eight.steps { |
||||
|
display: block; |
||||
|
} |
||||
|
.ui.one.steps > .step { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.ui.two.steps > .step { |
||||
|
width: 50%; |
||||
|
} |
||||
|
.ui.three.steps > .step { |
||||
|
width: 33.333%; |
||||
|
} |
||||
|
.ui.four.steps > .step { |
||||
|
width: 25%; |
||||
|
} |
||||
|
.ui.five.steps > .step { |
||||
|
width: 20%; |
||||
|
} |
||||
|
.ui.six.steps > .step { |
||||
|
width: 16.666%; |
||||
|
} |
||||
|
.ui.seven.steps > .step { |
||||
|
width: 14.285%; |
||||
|
} |
||||
|
.ui.eight.steps > .step { |
||||
|
width: 12.500%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Sizes |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.small.step, |
||||
|
.ui.small.steps .step { |
||||
|
font-size: 0.8rem; |
||||
|
} |
||||
|
.ui.step, |
||||
|
.ui.steps .step { |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
.ui.large.step, |
||||
|
.ui.large.steps .step { |
||||
|
font-size: 1.25rem; |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
0662cb96bfb78cb2603df4bc9995314bd6806312 |
||||
@ -0,0 +1 @@ |
|||||
|
70125459f7d593b79cabc75bd60b91943aa65e93 |
||||
@ -0,0 +1 @@ |
|||||
|
2edb4ec34cbc0b6559b808a3a1f31e0e587742ff |
||||
@ -0,0 +1 @@ |
|||||
|
d3659246915cacb0c9204271f1f9fc5f77049eac |
||||
@ -0,0 +1 @@ |
|||||
|
b9bd17e158d87fb1477f7ac3ddbb5a676f3c26d2 |
||||
@ -0,0 +1 @@ |
|||||
|
25066de069a62374b39f220581d1314fa60a5f45 |
||||
@ -0,0 +1 @@ |
|||||
|
b9c54d022b2628b920f09afd4cb10d4dc0ce0d17 |
||||
@ -0,0 +1 @@ |
|||||
|
318a2643d3af55fe51b472e7769b99caf74ff7b0 |
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
@ -0,0 +1,411 @@ |
|||||
|
/* ****************************** |
||||
|
Accordion |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit July 19, 2012 |
||||
|
|
||||
|
Simple accordion design |
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.accordion = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = ( $.isPlainObject(parameters) ) |
||||
|
? $.extend(true, {}, $.fn.accordion.settings, parameters) |
||||
|
: $.fn.accordion.settings, |
||||
|
|
||||
|
className = settings.className, |
||||
|
namespace = settings.namespace, |
||||
|
selector = settings.selector, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
$title = $module.find(selector.title), |
||||
|
$icon = $module.find(selector.icon), |
||||
|
$content = $module.find(selector.content), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.debug('Initializing accordion with bound events', $module); |
||||
|
// initializing
|
||||
|
$title |
||||
|
.on('click' + eventNamespace, module.event.click) |
||||
|
; |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.debug('Destroying previous accordion for', $module); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
$title |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
click: function() { |
||||
|
module.verbose('Title clicked', this); |
||||
|
var |
||||
|
$activeTitle = $(this), |
||||
|
index = $title.index($activeTitle) |
||||
|
; |
||||
|
module.toggle(index); |
||||
|
}, |
||||
|
resetStyle: function() { |
||||
|
module.verbose('Resetting styles on element', this); |
||||
|
$(this) |
||||
|
.removeAttr('style') |
||||
|
.children() |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
toggle: function(index) { |
||||
|
module.debug('Toggling content content at index', index); |
||||
|
var |
||||
|
$activeTitle = $title.eq(index), |
||||
|
$activeContent = $activeTitle.next($content), |
||||
|
contentIsOpen = $activeContent.is(':visible') |
||||
|
; |
||||
|
if(contentIsOpen) { |
||||
|
if(settings.collapsible) { |
||||
|
module.close(index); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Cannot close accordion content collapsing is disabled'); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
module.open(index); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
open: function(index) { |
||||
|
var |
||||
|
$activeTitle = $title.eq(index), |
||||
|
$activeContent = $activeTitle.next($content), |
||||
|
$previousTitle = $title.filter('.' + className.active), |
||||
|
$previousContent = $previousTitle.next($title), |
||||
|
contentIsOpen = ($previousTitle.size() > 0) |
||||
|
; |
||||
|
if( !$activeContent.is(':animated') ) { |
||||
|
module.debug('Opening accordion content', $activeTitle); |
||||
|
if(settings.exclusive && contentIsOpen) { |
||||
|
$previousTitle |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$previousContent |
||||
|
.stop() |
||||
|
.children() |
||||
|
.animate({ |
||||
|
opacity: 0 |
||||
|
}, settings.speed, module.event.resetStyle) |
||||
|
.end() |
||||
|
.slideUp(settings.speed , settings.easing, function() { |
||||
|
$previousContent |
||||
|
.removeClass(className.active) |
||||
|
.removeAttr('style') |
||||
|
.children() |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
$activeTitle |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
$activeContent |
||||
|
.stop() |
||||
|
.children() |
||||
|
.removeAttr('style') |
||||
|
.end() |
||||
|
.slideDown(settings.speed, settings.easing, function() { |
||||
|
$activeContent |
||||
|
.addClass(className.active) |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
$.proxy(settings.onOpen, $activeContent)(); |
||||
|
$.proxy(settings.onChange, $activeContent)(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
close: function(index) { |
||||
|
var |
||||
|
$activeTitle = $title.eq(index), |
||||
|
$activeContent = $activeTitle.next($content) |
||||
|
; |
||||
|
module.debug('Closing accordion content', $activeTitle); |
||||
|
$activeTitle |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$activeContent |
||||
|
.removeClass(className.active) |
||||
|
.show() |
||||
|
.stop() |
||||
|
.children() |
||||
|
.animate({ |
||||
|
opacity: 0 |
||||
|
}, settings.speed, module.event.resetStyle) |
||||
|
.end() |
||||
|
.slideUp(settings.speed, settings.easing, function(){ |
||||
|
$activeContent |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
$.proxy(settings.onClose, $activeContent)(); |
||||
|
$.proxy(settings.onChange, $activeContent)(); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
module.debug('Changing setting', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
module.debug('Changing internal', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.accordion.settings = { |
||||
|
name : 'Accordion', |
||||
|
namespace : 'accordion', |
||||
|
|
||||
|
debug : true, |
||||
|
verbose : true, |
||||
|
performance : true, |
||||
|
|
||||
|
exclusive : true, |
||||
|
collapsible : true, |
||||
|
|
||||
|
onOpen : function(){}, |
||||
|
onClose : function(){}, |
||||
|
onChange : function(){}, |
||||
|
|
||||
|
error: { |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
active : 'active', |
||||
|
hover : 'hover' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
title : '.title', |
||||
|
icon : '.icon', |
||||
|
content : '.content' |
||||
|
}, |
||||
|
|
||||
|
speed : 500, |
||||
|
easing : 'easeInOutQuint' |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,135 @@ |
|||||
|
/* |
||||
|
* # Semantic Accordion |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Button |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.accordion { |
||||
|
width: 600px; |
||||
|
max-width: 100%; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
font-size: 1rem; |
||||
|
border-radius: 0.3125em; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.ui.accordion .title { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
margin: 0em; |
||||
|
padding: 0.75em 1em; |
||||
|
|
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background-color 0.2s ease-out |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background-color 0.2s ease-out |
||||
|
; |
||||
|
-o-transition: |
||||
|
background-color 0.2s ease-out |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background-color 0.2s ease-out |
||||
|
; |
||||
|
transition: |
||||
|
background-color 0.2s ease-out |
||||
|
; |
||||
|
} |
||||
|
.ui.accordion .title:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Content */ |
||||
|
.ui.accordion .content { |
||||
|
display: none; |
||||
|
margin: 0em; |
||||
|
padding: 1.3em 1em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Loose Coupling |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.basic.accordion.menu { |
||||
|
background-color: #FFFFFF; |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.ui.basic.accordion.menu .title, |
||||
|
.ui.basic.accordion.menu .content { |
||||
|
padding: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Hover |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.accordion .title:hover, |
||||
|
.ui.accordion .title.active { |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Active |
||||
|
---------------*/ |
||||
|
.ui.accordion .title.active { |
||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
.ui.accordion .content.active { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.basic.accordion { |
||||
|
background-color: transparent; |
||||
|
|
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
.ui.basic.accordion .title { |
||||
|
background-color: transparent; |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
.ui.basic.accordion .title, |
||||
|
.ui.basic.accordion .content { |
||||
|
padding-left: 0em; |
||||
|
padding-right: 0em; |
||||
|
} |
||||
@ -0,0 +1,666 @@ |
|||||
|
/* ****************************** |
||||
|
API |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit May 08, 2012 |
||||
|
|
||||
|
These are modules which bind API functionality to the DOM |
||||
|
|
||||
|
Requires: nada |
||||
|
|
||||
|
Initialization: |
||||
|
$('.button') |
||||
|
.apiButton({ |
||||
|
success: function() {} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
in our example api is automapped to an object literal |
||||
|
@ quirky.config.endpoint.api |
||||
|
|
||||
|
HTML: |
||||
|
<div class="button" action="follow" data-id="5"> |
||||
|
|
||||
|
URL : quirky.config.endpoint.api.follow |
||||
|
Given Value: /follow/{$id}/ |
||||
|
Sent Value : /follow/5/ |
||||
|
|
||||
|
(4 ways to map api endpoint, each will be looked for in succession) |
||||
|
url mapping order: |
||||
|
first : defined in plugin init as url (arbitrary url) |
||||
|
second : defined in plugin init as action (action in obj literal grouping 'api') |
||||
|
third : defined in data-url |
||||
|
fourth : defined in data-action |
||||
|
|
||||
|
beforeSend: |
||||
|
this callback can be used to modify request settings before XHR |
||||
|
it also can be used to look for for pre-conditions to prevent API |
||||
|
call by returning "false" |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.api = $.fn.api = function(parameters) { |
||||
|
|
||||
|
var |
||||
|
settings = $.extend(true, {}, $.api.settings, parameters), |
||||
|
|
||||
|
// if this keyword isn't a jQuery object, create one
|
||||
|
context = (typeof this != 'function') |
||||
|
? this |
||||
|
: $('<div/>'), |
||||
|
// context defines the element used for loading/error state
|
||||
|
$context = (settings.stateContext) |
||||
|
? $(settings.stateContext) |
||||
|
: $(context), |
||||
|
// module is the thing that initiates the api action, can be independent of context
|
||||
|
$module = typeof this == 'object' |
||||
|
? $(context) |
||||
|
: $context, |
||||
|
|
||||
|
element = this, |
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
moduleSelector = $module.selector || '', |
||||
|
moduleNamespace = settings.namespace + '-module', |
||||
|
|
||||
|
className = settings.className, |
||||
|
metadata = settings.metadata, |
||||
|
error = settings.error, |
||||
|
|
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (instance !== undefined && typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
|
||||
|
module, |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
initialize: function() { |
||||
|
var |
||||
|
runSettings, |
||||
|
|
||||
|
loadingTimer = new Date().getTime(), |
||||
|
loadingDelay, |
||||
|
|
||||
|
promise, |
||||
|
url, |
||||
|
|
||||
|
formData = {}, |
||||
|
data, |
||||
|
|
||||
|
ajaxSettings = {}, |
||||
|
xhr |
||||
|
; |
||||
|
|
||||
|
// serialize parent form if requested!
|
||||
|
if(settings.serializeForm && $(this).toJSON() !== undefined) { |
||||
|
formData = module.get.formData(); |
||||
|
module.debug('Adding form data to API Request', formData); |
||||
|
$.extend(true, settings.data, formData); |
||||
|
} |
||||
|
|
||||
|
// let beforeSend change settings object
|
||||
|
runSettings = $.proxy(settings.beforeSend, $module)(settings); |
||||
|
|
||||
|
// check for exit conditions
|
||||
|
if(runSettings !== undefined && !runSettings) { |
||||
|
module.error(error.beforeSend); |
||||
|
module.reset(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// get real url from template
|
||||
|
url = module.get.url( module.get.templateURL() ); |
||||
|
|
||||
|
// exit conditions reached from missing url parameters
|
||||
|
if( !url ) { |
||||
|
module.error(error.missingURL); |
||||
|
module.reset(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// promise handles notification on api request, so loading min. delay can occur for all notifications
|
||||
|
promise = |
||||
|
$.Deferred() |
||||
|
.always(function() { |
||||
|
if(settings.stateContext) { |
||||
|
$context |
||||
|
.removeClass(className.loading) |
||||
|
; |
||||
|
} |
||||
|
$.proxy(settings.complete, $module)(); |
||||
|
}) |
||||
|
.done(function(response) { |
||||
|
module.debug('API request successful'); |
||||
|
// take a stab at finding success state if json
|
||||
|
if(settings.dataType == 'json') { |
||||
|
if (response.error !== undefined) { |
||||
|
$.proxy(settings.failure, $context)(response.error, settings, $module); |
||||
|
} |
||||
|
else if ($.isArray(response.errors)) { |
||||
|
$.proxy(settings.failure, $context)(response.errors[0], settings, $module); |
||||
|
} |
||||
|
else { |
||||
|
$.proxy(settings.success, $context)(response, settings, $module); |
||||
|
} |
||||
|
} |
||||
|
// otherwise
|
||||
|
else { |
||||
|
$.proxy(settings.success, $context)(response, settings, $module); |
||||
|
} |
||||
|
}) |
||||
|
.fail(function(xhr, status, httpMessage) { |
||||
|
var |
||||
|
errorMessage = (settings.error[status] !== undefined) |
||||
|
? settings.error[status] |
||||
|
: httpMessage, |
||||
|
response |
||||
|
; |
||||
|
// let em know unless request aborted
|
||||
|
if(xhr !== undefined) { |
||||
|
// readyState 4 = done, anything less is not really sent
|
||||
|
if(xhr.readyState !== undefined && xhr.readyState == 4) { |
||||
|
|
||||
|
// if http status code returned and json returned error, look for it
|
||||
|
if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') { |
||||
|
module.error(error.statusMessage + httpMessage); |
||||
|
} |
||||
|
else { |
||||
|
if(status == 'error' && settings.dataType == 'json') { |
||||
|
try { |
||||
|
response = $.parseJSON(xhr.responseText); |
||||
|
if(response && response.error !== undefined) { |
||||
|
errorMessage = response.error; |
||||
|
} |
||||
|
} |
||||
|
catch(error) { |
||||
|
module.error(error.JSONParse); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
$context |
||||
|
.removeClass(className.loading) |
||||
|
.addClass(className.error) |
||||
|
; |
||||
|
// show error state only for duration specified in settings
|
||||
|
if(settings.errorLength > 0) { |
||||
|
setTimeout(function(){ |
||||
|
$context |
||||
|
.removeClass(className.error) |
||||
|
; |
||||
|
}, settings.errorLength); |
||||
|
} |
||||
|
module.debug('API Request error:', errorMessage); |
||||
|
$.proxy(settings.failure, $context)(errorMessage, settings, this); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Request Aborted (Most likely caused by page change)'); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
// look for params in data
|
||||
|
$.extend(true, ajaxSettings, settings, { |
||||
|
success : function(){}, |
||||
|
failure : function(){}, |
||||
|
complete : function(){}, |
||||
|
type : settings.method || settings.type, |
||||
|
data : data, |
||||
|
url : url, |
||||
|
beforeSend : settings.beforeXHR |
||||
|
}); |
||||
|
|
||||
|
if(settings.stateContext) { |
||||
|
$context |
||||
|
.addClass(className.loading) |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
if(settings.progress) { |
||||
|
module.verbose('Adding progress events'); |
||||
|
$.extend(true, ajaxSettings, { |
||||
|
xhr: function() { |
||||
|
var |
||||
|
xhr = new window.XMLHttpRequest() |
||||
|
; |
||||
|
xhr.upload.addEventListener('progress', function(event) { |
||||
|
var |
||||
|
percentComplete |
||||
|
; |
||||
|
if (event.lengthComputable) { |
||||
|
percentComplete = Math.round(event.loaded / event.total * 10000) / 100 + '%'; |
||||
|
$.proxy(settings.progress, $context)(percentComplete, event); |
||||
|
} |
||||
|
}, false); |
||||
|
xhr.addEventListener('progress', function(event) { |
||||
|
var |
||||
|
percentComplete |
||||
|
; |
||||
|
if (event.lengthComputable) { |
||||
|
percentComplete = Math.round(event.loaded / event.total * 10000) / 100 + '%'; |
||||
|
$.proxy(settings.progress, $context)(percentComplete, event); |
||||
|
} |
||||
|
}, false); |
||||
|
return xhr; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
module.verbose('Creating AJAX request with settings: ', ajaxSettings); |
||||
|
xhr = |
||||
|
$.ajax(ajaxSettings) |
||||
|
.always(function() { |
||||
|
// calculate if loading time was below minimum threshold
|
||||
|
loadingDelay = ( settings.loadingLength - (new Date().getTime() - loadingTimer) ); |
||||
|
settings.loadingDelay = loadingDelay < 0 |
||||
|
? 0 |
||||
|
: loadingDelay |
||||
|
; |
||||
|
}) |
||||
|
.done(function(response) { |
||||
|
var |
||||
|
context = this |
||||
|
; |
||||
|
setTimeout(function(){ |
||||
|
promise.resolveWith(context, [response]); |
||||
|
}, settings.loadingDelay); |
||||
|
}) |
||||
|
.fail(function(xhr, status, httpMessage) { |
||||
|
var |
||||
|
context = this |
||||
|
; |
||||
|
// page triggers abort on navigation, dont show error
|
||||
|
if(status != 'abort') { |
||||
|
setTimeout(function(){ |
||||
|
promise.rejectWith(context, [xhr, status, httpMessage]); |
||||
|
}, settings.loadingDelay); |
||||
|
} |
||||
|
else { |
||||
|
$context |
||||
|
.removeClass(className.error) |
||||
|
.removeClass(className.loading) |
||||
|
; |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
if(settings.stateContext) { |
||||
|
$module |
||||
|
.data(metadata.promise, promise) |
||||
|
.data(metadata.xhr, xhr) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
formData: function() { |
||||
|
return $module |
||||
|
.closest('form') |
||||
|
.toJSON() |
||||
|
; |
||||
|
}, |
||||
|
templateURL: function() { |
||||
|
var |
||||
|
action = $module.data(settings.metadata.action) || settings.action || false, |
||||
|
url |
||||
|
; |
||||
|
if(action) { |
||||
|
module.debug('Creating url for: ', action); |
||||
|
if(settings.api[action] !== undefined) { |
||||
|
url = settings.api[action]; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.missingAction); |
||||
|
} |
||||
|
} |
||||
|
// override with url if specified
|
||||
|
if(settings.url) { |
||||
|
url = settings.url; |
||||
|
module.debug('Getting url', url); |
||||
|
} |
||||
|
return url; |
||||
|
}, |
||||
|
url: function(url, urlData) { |
||||
|
var |
||||
|
urlVariables |
||||
|
; |
||||
|
if(url) { |
||||
|
urlVariables = url.match(settings.regExpTemplate); |
||||
|
urlData = urlData || settings.urlData; |
||||
|
|
||||
|
if(urlVariables) { |
||||
|
module.debug('Looking for URL variables', urlVariables); |
||||
|
$.each(urlVariables, function(index, templateValue){ |
||||
|
var |
||||
|
term = templateValue.substr( 2, templateValue.length - 3), |
||||
|
termValue = ($.isPlainObject(urlData) && urlData[term] !== undefined) |
||||
|
? urlData[term] |
||||
|
: ($module.data(term) !== undefined) |
||||
|
? $module.data(term) |
||||
|
: urlData[term] |
||||
|
; |
||||
|
module.verbose('Looking for variable', term, $module, $module.data(term), urlData[term]); |
||||
|
// remove optional value
|
||||
|
if(termValue === false) { |
||||
|
module.debug('Removing variable from URL', urlVariables); |
||||
|
url = url.replace('/' + templateValue, ''); |
||||
|
} |
||||
|
// undefined condition
|
||||
|
else if(termValue === undefined || !termValue) { |
||||
|
module.error(error.missingParameter + term); |
||||
|
url = false; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
url = url.replace(templateValue, termValue); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
return url; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// reset api request
|
||||
|
reset: function() { |
||||
|
$module |
||||
|
.data(metadata.promise, false) |
||||
|
.data(metadata.xhr, false) |
||||
|
; |
||||
|
$context |
||||
|
.removeClass(className.error) |
||||
|
.removeClass(className.loading) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.moduleName + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
clearTimeout(module.performance.timer); |
||||
|
time = false; |
||||
|
$.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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
// handle DOM attachment to API functionality
|
||||
|
$.fn.apiButton = function(parameters) { |
||||
|
$(this) |
||||
|
.each(function(){ |
||||
|
var |
||||
|
// if only function passed it is success callback
|
||||
|
$module = $(this), |
||||
|
selector = $(this).selector || '', |
||||
|
|
||||
|
settings = ( $.isFunction(parameters) ) |
||||
|
? $.extend(true, {}, $.api.settings, $.fn.apiButton.settings, { stateContext: this, success: parameters }) |
||||
|
: $.extend(true, {}, $.api.settings, $.fn.apiButton.settings, { stateContext: this}, parameters), |
||||
|
module |
||||
|
; |
||||
|
module = { |
||||
|
initialize: function() { |
||||
|
if(settings.context && selector !== '') { |
||||
|
$(settings.context) |
||||
|
.on(selector, 'click.' + settings.namespace, module.click) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$module |
||||
|
.on('click.' + settings.namespace, module.click) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
click: function() { |
||||
|
if(!settings.filter || $(this).filter(settings.filter).size() === 0) { |
||||
|
$.proxy( $.api, this )(settings); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
module.initialize(); |
||||
|
}) |
||||
|
; |
||||
|
return this; |
||||
|
}; |
||||
|
|
||||
|
$.api.settings = { |
||||
|
name : 'API', |
||||
|
namespace : 'api', |
||||
|
|
||||
|
debug : true, |
||||
|
verbose : true, |
||||
|
performance : true, |
||||
|
|
||||
|
api : {}, |
||||
|
|
||||
|
beforeSend : function(settings) { |
||||
|
return settings; |
||||
|
}, |
||||
|
beforeXHR : function(xhr) {}, |
||||
|
success : function(response) {}, |
||||
|
complete : function(response) {}, |
||||
|
failure : function(errorCode) {}, |
||||
|
progress : false, |
||||
|
|
||||
|
error : { |
||||
|
missingAction : 'API action used but no url was defined', |
||||
|
missingURL : 'URL not specified for the API action', |
||||
|
missingParameter : 'Missing an essential URL parameter: ', |
||||
|
|
||||
|
timeout : 'Your request timed out', |
||||
|
error : 'There was an error with your request', |
||||
|
parseError : 'There was an error parsing your request', |
||||
|
JSONParse : 'JSON could not be parsed during error handling', |
||||
|
statusMessage : 'Server gave an error: ', |
||||
|
beforeSend : 'The before send function has aborted the request', |
||||
|
exitConditions : 'API Request Aborted. Exit conditions met' |
||||
|
}, |
||||
|
|
||||
|
className: { |
||||
|
loading : 'loading', |
||||
|
error : 'error' |
||||
|
}, |
||||
|
|
||||
|
metadata: { |
||||
|
action : 'action', |
||||
|
promise : 'promise', |
||||
|
xhr : 'xhr' |
||||
|
}, |
||||
|
|
||||
|
regExpTemplate: /\{\$([A-z]+)\}/g, |
||||
|
|
||||
|
action : false, |
||||
|
url : false, |
||||
|
urlData : false, |
||||
|
serializeForm : false, |
||||
|
|
||||
|
stateContext : false, |
||||
|
|
||||
|
method : 'get', |
||||
|
data : {}, |
||||
|
dataType : 'json', |
||||
|
cache : true, |
||||
|
|
||||
|
loadingLength : 200, |
||||
|
errorLength : 2000 |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
$.fn.apiButton.settings = { |
||||
|
filter : '.disabled, .loading', |
||||
|
context : false, |
||||
|
stateContext : false |
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,271 @@ |
|||||
|
/* ****************************** |
||||
|
Colorizer |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit June 06, 2012 |
||||
|
|
||||
|
Tooltip Wrapper for loading |
||||
|
colorizes of ideations, concepts and users |
||||
|
|
||||
|
Will eventually rewrite to use own tooltip lib |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.colorize = function(parameters) { |
||||
|
var |
||||
|
settings = $.extend(true, {}, $.fn.colorize.settings, parameters), |
||||
|
// hoist arguments
|
||||
|
moduleArguments = arguments || false |
||||
|
; |
||||
|
$(this) |
||||
|
.each(function(instanceIndex) { |
||||
|
|
||||
|
var |
||||
|
$module = $(this), |
||||
|
|
||||
|
mainCanvas = $('<canvas />')[0], |
||||
|
imageCanvas = $('<canvas />')[0], |
||||
|
overlayCanvas = $('<canvas />')[0], |
||||
|
|
||||
|
backgroundImage = new Image(), |
||||
|
|
||||
|
// defs
|
||||
|
mainContext, |
||||
|
imageContext, |
||||
|
overlayContext, |
||||
|
|
||||
|
image, |
||||
|
imageName, |
||||
|
|
||||
|
width, |
||||
|
height, |
||||
|
|
||||
|
// shortucts
|
||||
|
colors = settings.colors, |
||||
|
paths = settings.paths, |
||||
|
namespace = settings.namespace, |
||||
|
error = settings.error, |
||||
|
|
||||
|
// boilerplate
|
||||
|
instance = $module.data('module-' + namespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
checkPreconditions: function() { |
||||
|
module.debug('Checking pre-conditions'); |
||||
|
|
||||
|
if( !$.isPlainObject(colors) || $.isEmptyObject(colors) ) { |
||||
|
module.error(error.undefinedColors); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}, |
||||
|
|
||||
|
async: function(callback) { |
||||
|
if(settings.async) { |
||||
|
setTimeout(callback, 0); |
||||
|
} |
||||
|
else { |
||||
|
callback(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
getMetadata: function() { |
||||
|
module.debug('Grabbing metadata'); |
||||
|
image = $module.data('image') || settings.image || undefined; |
||||
|
imageName = $module.data('name') || settings.name || instanceIndex; |
||||
|
width = settings.width || $module.width(); |
||||
|
height = settings.height || $module.height(); |
||||
|
if(width === 0 || height === 0) { |
||||
|
module.error(error.undefinedSize); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.debug('Initializing with colors', colors); |
||||
|
if( module.checkPreconditions() ) { |
||||
|
|
||||
|
module.async(function() { |
||||
|
module.getMetadata(); |
||||
|
module.canvas.create(); |
||||
|
|
||||
|
module.draw.image(function() { |
||||
|
module.draw.colors(); |
||||
|
module.canvas.merge(); |
||||
|
}); |
||||
|
$module |
||||
|
.data('module-' + namespace, module) |
||||
|
; |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
redraw: function() { |
||||
|
module.debug('Redrawing image'); |
||||
|
module.async(function() { |
||||
|
module.canvas.clear(); |
||||
|
module.draw.colors(); |
||||
|
module.canvas.merge(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
change: { |
||||
|
color: function(colorName, color) { |
||||
|
module.debug('Changing color', colorName); |
||||
|
if(colors[colorName] === undefined) { |
||||
|
module.error(error.missingColor); |
||||
|
return false; |
||||
|
} |
||||
|
colors[colorName] = color; |
||||
|
module.redraw(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
canvas: { |
||||
|
create: function() { |
||||
|
module.debug('Creating canvases'); |
||||
|
|
||||
|
mainCanvas.width = width; |
||||
|
mainCanvas.height = height; |
||||
|
imageCanvas.width = width; |
||||
|
imageCanvas.height = height; |
||||
|
overlayCanvas.width = width; |
||||
|
overlayCanvas.height = height; |
||||
|
|
||||
|
mainContext = mainCanvas.getContext('2d'); |
||||
|
imageContext = imageCanvas.getContext('2d'); |
||||
|
overlayContext = overlayCanvas.getContext('2d'); |
||||
|
|
||||
|
$module |
||||
|
.append( mainCanvas ) |
||||
|
; |
||||
|
mainContext = $module.children('canvas')[0].getContext('2d'); |
||||
|
}, |
||||
|
clear: function(context) { |
||||
|
module.debug('Clearing canvas'); |
||||
|
overlayContext.fillStyle = '#FFFFFF'; |
||||
|
overlayContext.fillRect(0, 0, width, height); |
||||
|
}, |
||||
|
merge: function() { |
||||
|
if( !$.isFunction(mainContext.blendOnto) ) { |
||||
|
module.error(error.missingPlugin); |
||||
|
return; |
||||
|
} |
||||
|
mainContext.putImageData( imageContext.getImageData(0, 0, width, height), 0, 0); |
||||
|
overlayContext.blendOnto(mainContext, 'multiply'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
draw: { |
||||
|
|
||||
|
image: function(callback) { |
||||
|
module.debug('Drawing image'); |
||||
|
callback = callback || function(){}; |
||||
|
if(image) { |
||||
|
backgroundImage.src = image; |
||||
|
backgroundImage.onload = function() { |
||||
|
imageContext.drawImage(backgroundImage, 0, 0); |
||||
|
callback(); |
||||
|
}; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.noImage); |
||||
|
callback(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
colors: function() { |
||||
|
module.debug('Drawing color overlays', colors); |
||||
|
$.each(colors, function(colorName, color) { |
||||
|
settings.onDraw(overlayContext, imageName, colorName, color); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
debug: function(message, variableName) { |
||||
|
if(settings.debug) { |
||||
|
if(variableName !== undefined) { |
||||
|
console.info(settings.moduleName + ': ' + message, variableName); |
||||
|
} |
||||
|
else { |
||||
|
console.info(settings.moduleName + ': ' + message); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function(errorMessage) { |
||||
|
console.warn(settings.moduleName + ': ' + errorMessage); |
||||
|
}, |
||||
|
invoke: function(methodName, context, methodArguments) { |
||||
|
var |
||||
|
method |
||||
|
; |
||||
|
methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 ); |
||||
|
|
||||
|
if(typeof methodName == 'string' && instance !== undefined) { |
||||
|
methodName = methodName.split('.'); |
||||
|
$.each(methodName, function(index, name) { |
||||
|
if( $.isPlainObject( instance[name] ) ) { |
||||
|
instance = instance[name]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( $.isFunction( instance[name] ) ) { |
||||
|
method = instance[name]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(settings.error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
return ( $.isFunction( method ) ) |
||||
|
? method.apply(context, methodArguments) |
||||
|
: false |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
if(instance !== undefined && moduleArguments) { |
||||
|
// simpler than invoke realizing to invoke itself (and losing scope due prototype.call()
|
||||
|
if(moduleArguments[0] == 'invoke') { |
||||
|
moduleArguments = Array.prototype.slice.call( moduleArguments, 1 ); |
||||
|
} |
||||
|
return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) ); |
||||
|
} |
||||
|
// initializing
|
||||
|
module.initialize(); |
||||
|
}) |
||||
|
; |
||||
|
return this; |
||||
|
}; |
||||
|
|
||||
|
$.fn.colorize.settings = { |
||||
|
name : 'Image Colorizer', |
||||
|
debug : true, |
||||
|
namespace : 'colorize', |
||||
|
|
||||
|
onDraw: function(overlayContext, imageName, colorName, color) {}, |
||||
|
|
||||
|
// whether to block execution while updating canvas
|
||||
|
async: true, |
||||
|
// object containing names and default values of color regions
|
||||
|
colors: {}, |
||||
|
|
||||
|
metadata: { |
||||
|
image : 'image', |
||||
|
name : 'name' |
||||
|
}, |
||||
|
|
||||
|
error: { |
||||
|
noImage : 'No tracing image specified', |
||||
|
undefinedColors : 'No default colors specified.', |
||||
|
missingColor : 'Attempted to change color that does not exist', |
||||
|
missingPlugin : 'Blend onto plug-in must be included', |
||||
|
undefinedHeight : 'The width or height of image canvas could not be automatically determined. Please specify a height.' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,703 @@ |
|||||
|
/* ****************************** |
||||
|
Form Validation Components |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit April 08, 2012 |
||||
|
|
||||
|
Refactored May 28, 2013 |
||||
|
|
||||
|
Allows you to validate forms based on a form validation object |
||||
|
Form validation objects are bound by either data-validate="" metadata, or form id or name tags |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.form = function(fields, parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.form.settings, parameters), |
||||
|
validation = $.extend({}, $.fn.form.settings.defaults, fields), |
||||
|
|
||||
|
namespace = settings.namespace, |
||||
|
metadata = settings.metadata, |
||||
|
selector = settings.selector, |
||||
|
className = settings.className, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
|
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
$field = $(this).find(selector.field), |
||||
|
$group = $(this).find(selector.group), |
||||
|
$message = $(this).find(selector.message), |
||||
|
$prompt = $(this).find(selector.prompt), |
||||
|
$submit = $(this).find(selector.submit), |
||||
|
|
||||
|
formErrors = [], |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing form validation', $module, validation, settings); |
||||
|
if(settings.keyboardShortcuts) { |
||||
|
$field |
||||
|
.on('keydown' + eventNamespace, module.event.field.keydown) |
||||
|
; |
||||
|
} |
||||
|
$module |
||||
|
.on('submit' + eventNamespace, module.validate.form) |
||||
|
; |
||||
|
$field |
||||
|
.on('blur' + eventNamespace, module.event.field.blur) |
||||
|
; |
||||
|
$submit |
||||
|
.on('click' + eventNamespace, module.submit) |
||||
|
; |
||||
|
$field |
||||
|
.on(module.get.changeEvent() + eventNamespace, module.event.field.change) |
||||
|
; |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module', instance); |
||||
|
$module |
||||
|
.off(eventNamespace) |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
module.verbose('Refreshing selector cache'); |
||||
|
$field = $module.find(selector.field); |
||||
|
}, |
||||
|
|
||||
|
submit: function() { |
||||
|
module.verbose('Submitting form', $module); |
||||
|
$module |
||||
|
.submit() |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
field: { |
||||
|
keydown: function(event) { |
||||
|
var |
||||
|
$field = $(this), |
||||
|
key = event.which, |
||||
|
keyCode = { |
||||
|
enter : 13, |
||||
|
escape : 27 |
||||
|
} |
||||
|
; |
||||
|
if( key == keyCode.escape) { |
||||
|
module.verbose('Escape key pressed blurring field'); |
||||
|
$field |
||||
|
.blur() |
||||
|
; |
||||
|
} |
||||
|
if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) ) { |
||||
|
module.debug('Enter key pressed, submitting form'); |
||||
|
$submit |
||||
|
.addClass(className.down) |
||||
|
; |
||||
|
$field |
||||
|
.one('keyup' + eventNamespace, module.event.field.keyup) |
||||
|
; |
||||
|
event.preventDefault(); |
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
keyup: function() { |
||||
|
module.verbose('Doing keyboard shortcut form submit'); |
||||
|
$submit.removeClass(className.down); |
||||
|
module.submit(); |
||||
|
}, |
||||
|
blur: function() { |
||||
|
var |
||||
|
$field = $(this), |
||||
|
$fieldGroup = $field.closest($group) |
||||
|
; |
||||
|
if( $fieldGroup.hasClass(className.error) ) { |
||||
|
module.debug('Revalidating field', $field, module.get.validation($field)); |
||||
|
module.validate.field( module.get.validation($field) ); |
||||
|
} |
||||
|
else if(settings.on == 'blur' || settings.on == 'change') { |
||||
|
module.validate.field( module.get.validation($field) ); |
||||
|
} |
||||
|
}, |
||||
|
change: function() { |
||||
|
var |
||||
|
$field = $(this), |
||||
|
$fieldGroup = $field.closest($group) |
||||
|
; |
||||
|
if( $fieldGroup.hasClass(className.error) ) { |
||||
|
module.debug('Revalidating field', $field, module.get.validation($field)); |
||||
|
module.validate.field( module.get.validation($field) ); |
||||
|
} |
||||
|
else if(settings.on == 'change') { |
||||
|
module.validate.field( module.get.validation($field) ); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
changeEvent: function() { |
||||
|
return (document.createElement('input').oninput !== undefined) |
||||
|
? 'input' |
||||
|
: (document.createElement('input').onpropertychange !== undefined) |
||||
|
? 'propertychange' |
||||
|
: 'keyup' |
||||
|
; |
||||
|
}, |
||||
|
field: function(identifier) { |
||||
|
module.verbose('Finding field with identifier', identifier); |
||||
|
if( $field.filter('#' + identifier).size() > 0 ) { |
||||
|
return $field.filter('#' + identifier); |
||||
|
} |
||||
|
else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { |
||||
|
return $field.filter('[name="' + identifier +'"]'); |
||||
|
} |
||||
|
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { |
||||
|
return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); |
||||
|
} |
||||
|
return $('<input/>'); |
||||
|
}, |
||||
|
validation: function($field) { |
||||
|
var |
||||
|
rules |
||||
|
; |
||||
|
$.each(validation, function(fieldName, field) { |
||||
|
if( module.get.field(field.identifier).get(0) == $field.get(0) ) { |
||||
|
rules = field; |
||||
|
} |
||||
|
}); |
||||
|
return rules || false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
has: { |
||||
|
|
||||
|
field: function(identifier) { |
||||
|
module.verbose('Checking for existence of a field with identifier', identifier); |
||||
|
if( $field.filter('#' + identifier).size() > 0 ) { |
||||
|
return true; |
||||
|
} |
||||
|
else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { |
||||
|
return true; |
||||
|
} |
||||
|
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
add: { |
||||
|
prompt: function(field, errors) { |
||||
|
var |
||||
|
$field = module.get.field(field.identifier), |
||||
|
$fieldGroup = $field.closest($group), |
||||
|
$prompt = $fieldGroup.find(selector.prompt), |
||||
|
promptExists = ($prompt.size() !== 0) |
||||
|
; |
||||
|
module.verbose('Adding inline error', field); |
||||
|
$fieldGroup |
||||
|
.addClass(className.error) |
||||
|
; |
||||
|
if(settings.inline) { |
||||
|
if(!promptExists) { |
||||
|
$prompt = settings.templates.prompt(errors); |
||||
|
$prompt |
||||
|
.appendTo($fieldGroup) |
||||
|
; |
||||
|
} |
||||
|
$prompt |
||||
|
.html(errors[0]) |
||||
|
; |
||||
|
if(!promptExists) { |
||||
|
if(settings.transition && $.fn.transition !== undefined) { |
||||
|
module.verbose('Displaying error with css transition', settings.transition); |
||||
|
$prompt.transition(settings.transition + ' in', settings.duration); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose('Displaying error with fallback javascript animation'); |
||||
|
$prompt |
||||
|
.fadeIn(settings.duration) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
errors: function(errors) { |
||||
|
module.debug('Adding form error messages', errors); |
||||
|
$message |
||||
|
.html( settings.templates.error(errors) ) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
remove: { |
||||
|
prompt: function(field) { |
||||
|
var |
||||
|
$field = module.get.field(field.identifier), |
||||
|
$fieldGroup = $field.closest($group), |
||||
|
$prompt = $fieldGroup.find(selector.prompt) |
||||
|
; |
||||
|
$fieldGroup |
||||
|
.removeClass(className.error) |
||||
|
; |
||||
|
if(settings.inline && $prompt.is(':visible')) { |
||||
|
module.verbose('Removing prompt for field', field); |
||||
|
if(settings.transition && $.fn.transition !== undefined) { |
||||
|
$prompt.transition(settings.transition + ' out', settings.duration, function() { |
||||
|
$prompt.remove(); |
||||
|
}); |
||||
|
} |
||||
|
else { |
||||
|
$prompt |
||||
|
.fadeOut(settings.duration, function(){ |
||||
|
$prompt.remove(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
validate: { |
||||
|
|
||||
|
form: function(event) { |
||||
|
var |
||||
|
allValid = true |
||||
|
; |
||||
|
// reset errors
|
||||
|
formErrors = []; |
||||
|
$.each(validation, function(fieldName, field) { |
||||
|
if( !( module.validate.field(field) ) ) { |
||||
|
allValid = false; |
||||
|
} |
||||
|
}); |
||||
|
if(allValid) { |
||||
|
module.debug('Form has no validation errors, submitting'); |
||||
|
$module |
||||
|
.removeClass(className.error) |
||||
|
.addClass(className.success) |
||||
|
; |
||||
|
$.proxy(settings.onSuccess, this)(event); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Form has errors'); |
||||
|
$module.addClass(className.error); |
||||
|
if(!settings.inline) { |
||||
|
module.add.errors(formErrors); |
||||
|
} |
||||
|
return $.proxy(settings.onFailure, this)(formErrors); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// takes a validation object and returns whether field passes validation
|
||||
|
field: function(field) { |
||||
|
var |
||||
|
$field = module.get.field(field.identifier), |
||||
|
fieldValid = true, |
||||
|
fieldErrors = [] |
||||
|
; |
||||
|
if(field.rules !== undefined) { |
||||
|
$.each(field.rules, function(index, rule) { |
||||
|
if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) { |
||||
|
module.debug('Field is invalid', field.identifier, rule.type); |
||||
|
fieldErrors.push(rule.prompt); |
||||
|
fieldValid = false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if(fieldValid) { |
||||
|
module.remove.prompt(field, fieldErrors); |
||||
|
$.proxy(settings.onValid, $field)(); |
||||
|
} |
||||
|
else { |
||||
|
formErrors = formErrors.concat(fieldErrors); |
||||
|
module.add.prompt(field, fieldErrors); |
||||
|
$.proxy(settings.onInvalid, $field)(fieldErrors); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}, |
||||
|
|
||||
|
// takes validation rule and returns whether field passes rule
|
||||
|
rule: function(field, validation) { |
||||
|
var |
||||
|
$field = module.get.field(field.identifier), |
||||
|
type = validation.type, |
||||
|
value = $field.val(), |
||||
|
|
||||
|
bracketRegExp = /\[(.*?)\]/i, |
||||
|
bracket = bracketRegExp.exec(type), |
||||
|
isValid = true, |
||||
|
ancillary, |
||||
|
functionType |
||||
|
; |
||||
|
// if bracket notation is used, pass in extra parameters
|
||||
|
if(bracket !== undefined && bracket !== null) { |
||||
|
ancillary = bracket[1]; |
||||
|
functionType = type.replace(bracket[0], ''); |
||||
|
isValid = $.proxy(settings.rules[functionType], $module)(value, ancillary); |
||||
|
} |
||||
|
// normal notation
|
||||
|
else { |
||||
|
isValid = (type == 'checked') |
||||
|
? $field.filter(':checked').size() > 0 |
||||
|
: settings.rules[type](value) |
||||
|
; |
||||
|
} |
||||
|
return isValid; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
module.debug('Changing setting', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
module.debug('Changing internal', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.form.settings = { |
||||
|
|
||||
|
name : 'Form', |
||||
|
namespace : 'form', |
||||
|
|
||||
|
debug : true, |
||||
|
verbose : true, |
||||
|
performance : true, |
||||
|
|
||||
|
|
||||
|
keyboardShortcuts : true, |
||||
|
on : 'submit', |
||||
|
inline : false, |
||||
|
|
||||
|
transition : 'scale', |
||||
|
duration : 150, |
||||
|
|
||||
|
|
||||
|
onValid : function() {}, |
||||
|
onInvalid : function() {}, |
||||
|
onSuccess : function() { return true; }, |
||||
|
onFailure : function() { return false; }, |
||||
|
|
||||
|
metadata : { |
||||
|
validate: 'validate' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
message : '.error.message', |
||||
|
field : 'input, textarea, select', |
||||
|
group : '.field', |
||||
|
input : 'input', |
||||
|
prompt : '.prompt', |
||||
|
submit : '.submit' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
error : 'error', |
||||
|
success : 'success', |
||||
|
down : 'down', |
||||
|
label : 'ui label prompt' |
||||
|
}, |
||||
|
|
||||
|
// errors
|
||||
|
error: { |
||||
|
method : 'The method you called is not defined.' |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
templates: { |
||||
|
error: function(errors) { |
||||
|
var |
||||
|
html = '<ul class="list">' |
||||
|
; |
||||
|
$.each(errors, function(index, value) { |
||||
|
html += '<li>' + value + '</li>'; |
||||
|
}); |
||||
|
html += '</ul>'; |
||||
|
return $(html); |
||||
|
}, |
||||
|
prompt: function(errors) { |
||||
|
return $('<div/>') |
||||
|
.addClass('ui red pointing prompt label') |
||||
|
.html(errors[0]) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
rules: { |
||||
|
empty: function(value) { |
||||
|
return !(value === undefined || '' === value); |
||||
|
}, |
||||
|
email: function(value){ |
||||
|
var |
||||
|
emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?") |
||||
|
; |
||||
|
return emailRegExp.test(value); |
||||
|
}, |
||||
|
length: function(value, requiredLength) { |
||||
|
return (value !== undefined) |
||||
|
? (value.length >= requiredLength) |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
not: function(value, notValue) { |
||||
|
return (value != notValue); |
||||
|
}, |
||||
|
contains: function(value, text) { |
||||
|
return (value.search(text) !== -1); |
||||
|
}, |
||||
|
is: function(value, text) { |
||||
|
return (value == text); |
||||
|
}, |
||||
|
maxLength: function(value, maxLength) { |
||||
|
return (value !== undefined) |
||||
|
? (value.length <= maxLength) |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
match: function(value, fieldIdentifier) { |
||||
|
// use either id or name of field
|
||||
|
var |
||||
|
$form = $(this), |
||||
|
matchingValue |
||||
|
; |
||||
|
if($form.find('#' + fieldIdentifier).size() > 0) { |
||||
|
matchingValue = $form.find('#' + fieldIdentifier).val(); |
||||
|
} |
||||
|
else if($form.find('[name=' + fieldIdentifier +']').size() > 0) { |
||||
|
matchingValue = $form.find('[name=' + fieldIdentifier + ']').val(); |
||||
|
} |
||||
|
else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { |
||||
|
matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); |
||||
|
} |
||||
|
return (matchingValue !== undefined) |
||||
|
? ( value.toString() == matchingValue.toString() ) |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
url: function(value) { |
||||
|
var |
||||
|
urlRegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/ |
||||
|
; |
||||
|
return urlRegExp.test(value); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,752 @@ |
|||||
|
/* ****************************** |
||||
|
Module |
||||
|
State |
||||
|
Change text based on state context |
||||
|
Hover/down/Active/Inactive |
||||
|
Author: Jack Lukic |
||||
|
Last revision: May 2012 |
||||
|
|
||||
|
State text module is used to apply text to a given node |
||||
|
depending on the elements "state" |
||||
|
|
||||
|
State is either defined as "active" or "inactive" depending |
||||
|
on the returned value of a test function |
||||
|
|
||||
|
Usage: |
||||
|
|
||||
|
$button |
||||
|
.state({ |
||||
|
states: { |
||||
|
active: true |
||||
|
}, |
||||
|
text: { |
||||
|
inactive: 'Follow', |
||||
|
active : 'Following', |
||||
|
enable : 'Add', |
||||
|
disable : 'Remove' |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
"Follow", turns to "Add" on hover, then "Following" on active |
||||
|
and finally "Remove" on active hover |
||||
|
|
||||
|
This plugin works in correlation to API module and will, by default, |
||||
|
use deffered object accept/reject to determine state. |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.state = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
settings = $.extend(true, {}, $.fn.state.settings, parameters), |
||||
|
|
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
|
||||
|
// shortcuts
|
||||
|
error = settings.error, |
||||
|
metadata = settings.metadata, |
||||
|
className = settings.className, |
||||
|
namespace = settings.namespace, |
||||
|
states = settings.states, |
||||
|
text = settings.text, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = namespace + '-module', |
||||
|
|
||||
|
|
||||
|
invokedResponse |
||||
|
; |
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing module'); |
||||
|
|
||||
|
// allow module to guess desired state based on element
|
||||
|
if(settings.automatic) { |
||||
|
module.add.defaults(); |
||||
|
} |
||||
|
|
||||
|
// bind events with delegated events
|
||||
|
if(settings.context && moduleSelector !== '') { |
||||
|
if( module.allows('hover') ) { |
||||
|
$(element, settings.context) |
||||
|
.on(moduleSelector, 'mouseenter' + eventNamespace, module.enable.hover) |
||||
|
.on(moduleSelector, 'mouseleave' + eventNamespace, module.disable.hover) |
||||
|
; |
||||
|
} |
||||
|
if( module.allows('down') ) { |
||||
|
$(element, settings.context) |
||||
|
.on(moduleSelector, 'mousedown' + eventNamespace, module.enable.down) |
||||
|
.on(moduleSelector, 'mouseup' + eventNamespace, module.disable.down) |
||||
|
; |
||||
|
} |
||||
|
if( module.allows('focus') ) { |
||||
|
$(element, settings.context) |
||||
|
.on(moduleSelector, 'focus' + eventNamespace, module.enable.focus) |
||||
|
.on(moduleSelector, 'blur' + eventNamespace, module.disable.focus) |
||||
|
; |
||||
|
} |
||||
|
$(settings.context) |
||||
|
.on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text) |
||||
|
.on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text) |
||||
|
.on(moduleSelector, 'click' + eventNamespace, module.toggle.state) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
if( module.allows('hover') ) { |
||||
|
$module |
||||
|
.on('mouseenter' + eventNamespace, module.enable.hover) |
||||
|
.on('mouseleave' + eventNamespace, module.disable.hover) |
||||
|
; |
||||
|
} |
||||
|
if( module.allows('down') ) { |
||||
|
$module |
||||
|
.on('mousedown' + eventNamespace, module.enable.down) |
||||
|
.on('mouseup' + eventNamespace, module.disable.down) |
||||
|
; |
||||
|
} |
||||
|
if( module.allows('focus') ) { |
||||
|
$module |
||||
|
.on('focus' + eventNamespace, module.enable.focus) |
||||
|
.on('blur' + eventNamespace, module.disable.focus) |
||||
|
; |
||||
|
} |
||||
|
$module |
||||
|
.on('mouseenter' + eventNamespace, module.change.text) |
||||
|
.on('mouseleave' + eventNamespace, module.reset.text) |
||||
|
.on('click' + eventNamespace, module.toggle.state) |
||||
|
; |
||||
|
} |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module', instance); |
||||
|
$module |
||||
|
.off(eventNamespace) |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
module.verbose('Refreshing selector cache'); |
||||
|
$module = $(element); |
||||
|
}, |
||||
|
|
||||
|
add: { |
||||
|
defaults: function() { |
||||
|
var |
||||
|
userStates = parameters && $.isPlainObject(parameters.states) |
||||
|
? parameters.states |
||||
|
: {} |
||||
|
; |
||||
|
$.each(settings.defaults, function(type, typeStates) { |
||||
|
if( module.is[type] !== undefined && module.is[type]() ) { |
||||
|
module.verbose('Adding default states', type, element); |
||||
|
$.extend(settings.states, typeStates, userStates); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
|
||||
|
active: function() { |
||||
|
return $module.hasClass(className.active); |
||||
|
}, |
||||
|
loading: function() { |
||||
|
return $module.hasClass(className.loading); |
||||
|
}, |
||||
|
inactive: function() { |
||||
|
return !( $module.hasClass(className.active) ); |
||||
|
}, |
||||
|
|
||||
|
enabled: function() { |
||||
|
return !( $module.is(settings.filter.active) ); |
||||
|
}, |
||||
|
disabled: function() { |
||||
|
return ( $module.is(settings.filter.active) ); |
||||
|
}, |
||||
|
textEnabled: function() { |
||||
|
return !( $module.is(settings.filter.text) ); |
||||
|
}, |
||||
|
|
||||
|
// definitions for automatic type detection
|
||||
|
button: function() { |
||||
|
return $module.is('.button:not(a, .submit)'); |
||||
|
}, |
||||
|
input: function() { |
||||
|
return $module.is('input'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
allow: function(state) { |
||||
|
module.debug('Now allowing state', state); |
||||
|
states[state] = true; |
||||
|
}, |
||||
|
disallow: function(state) { |
||||
|
module.debug('No longer allowing', state); |
||||
|
states[state] = false; |
||||
|
}, |
||||
|
|
||||
|
allows: function(state) { |
||||
|
return states[state] || false; |
||||
|
}, |
||||
|
|
||||
|
enable: { |
||||
|
state: function(state) { |
||||
|
if(module.allows(state)) { |
||||
|
$module.addClass( className[state] ); |
||||
|
} |
||||
|
}, |
||||
|
// convenience
|
||||
|
focus: function() { |
||||
|
$module.addClass(className.focus); |
||||
|
}, |
||||
|
hover: function() { |
||||
|
$module.addClass(className.hover); |
||||
|
}, |
||||
|
down: function() { |
||||
|
$module.addClass(className.down); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
disable: { |
||||
|
state: function(state) { |
||||
|
if(module.allows(state)) { |
||||
|
$module.removeClass( className[state] ); |
||||
|
} |
||||
|
}, |
||||
|
// convenience
|
||||
|
focus: function() { |
||||
|
$module.removeClass(className.focus); |
||||
|
}, |
||||
|
hover: function() { |
||||
|
$module.removeClass(className.hover); |
||||
|
}, |
||||
|
down: function() { |
||||
|
$module.removeClass(className.down); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
toggle: { |
||||
|
state: function() { |
||||
|
var |
||||
|
apiRequest = $module.data(metadata.promise) |
||||
|
; |
||||
|
if( module.allows('active') && module.is.enabled() ) { |
||||
|
module.refresh(); |
||||
|
if(apiRequest !== undefined) { |
||||
|
module.listenTo(apiRequest); |
||||
|
} |
||||
|
else { |
||||
|
module.change.state(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
listenTo: function(apiRequest) { |
||||
|
module.debug('API request detected, waiting for state signal', apiRequest); |
||||
|
if(apiRequest) { |
||||
|
if(text.loading) { |
||||
|
module.update.text(text.loading); |
||||
|
} |
||||
|
$.when(apiRequest) |
||||
|
.then(function() { |
||||
|
if(apiRequest.state() == 'resolved') { |
||||
|
module.debug('API request succeeded'); |
||||
|
settings.activateTest = function(){ return true; }; |
||||
|
settings.deactivateTest = function(){ return true; }; |
||||
|
} |
||||
|
else { |
||||
|
module.debug('API request failed'); |
||||
|
settings.activateTest = function(){ return false; }; |
||||
|
settings.deactivateTest = function(){ return false; }; |
||||
|
} |
||||
|
module.change.state(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
// xhr exists but set to false, beforeSend killed the xhr
|
||||
|
else { |
||||
|
settings.activateTest = function(){ return false; }; |
||||
|
settings.deactivateTest = function(){ return false; }; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// checks whether active/inactive state can be given
|
||||
|
change: { |
||||
|
|
||||
|
state: function() { |
||||
|
module.debug('Determining state change direction'); |
||||
|
// inactive to active change
|
||||
|
if( module.is.inactive() ) { |
||||
|
module.activate(); |
||||
|
} |
||||
|
else { |
||||
|
module.deactivate(); |
||||
|
} |
||||
|
if(settings.sync) { |
||||
|
module.sync(); |
||||
|
} |
||||
|
$.proxy(settings.onChange, element)(); |
||||
|
}, |
||||
|
|
||||
|
text: function() { |
||||
|
if( module.is.textEnabled() ) { |
||||
|
if( module.is.active() ) { |
||||
|
if(text.hover) { |
||||
|
module.verbose('Changing text to hover text', text.hover); |
||||
|
module.update.text(text.hover); |
||||
|
} |
||||
|
else if(text.disable) { |
||||
|
module.verbose('Changing text to disable text', text.disable); |
||||
|
module.update.text(text.disable); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
if(text.hover) { |
||||
|
module.verbose('Changing text to hover text', text.disable); |
||||
|
module.update.text(text.hover); |
||||
|
} |
||||
|
else if(text.enable){ |
||||
|
module.verbose('Changing text to enable text', text.enable); |
||||
|
module.update.text(text.enable); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
activate: function() { |
||||
|
if( $.proxy(settings.activateTest, element)() ) { |
||||
|
module.debug('Setting state to active'); |
||||
|
$module |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
module.update.text(text.active); |
||||
|
} |
||||
|
$.proxy(settings.onActivate, element)(); |
||||
|
}, |
||||
|
|
||||
|
deactivate: function() { |
||||
|
if($.proxy(settings.deactivateTest, element)() ) { |
||||
|
module.debug('Setting state to inactive'); |
||||
|
$module |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
module.update.text(text.inactive); |
||||
|
} |
||||
|
$.proxy(settings.onDeactivate, element)(); |
||||
|
}, |
||||
|
|
||||
|
sync: function() { |
||||
|
module.verbose('Syncing other buttons to current state'); |
||||
|
if( module.is.active() ) { |
||||
|
$allModules |
||||
|
.not($module) |
||||
|
.state('activate'); |
||||
|
} |
||||
|
else { |
||||
|
$allModules |
||||
|
.not($module) |
||||
|
.state('deactivate') |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
text: function() { |
||||
|
return (settings.selector.text) |
||||
|
? $module.find(settings.selector.text).text() |
||||
|
: $module.html() |
||||
|
; |
||||
|
}, |
||||
|
textFor: function(state) { |
||||
|
return text[state] || false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
flash: { |
||||
|
text: function(text, duration) { |
||||
|
var |
||||
|
previousText = module.get.text() |
||||
|
; |
||||
|
module.debug('Flashing text message', text, duration); |
||||
|
text = text || settings.text.flash; |
||||
|
duration = duration || settings.flashDuration; |
||||
|
module.update.text(text); |
||||
|
setTimeout(function(){ |
||||
|
module.update.text(previousText); |
||||
|
}, duration); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
reset: { |
||||
|
// on mouseout sets text to previous value
|
||||
|
text: function() { |
||||
|
var |
||||
|
activeText = text.active || $module.data(metadata.storedText), |
||||
|
inactiveText = text.inactive || $module.data(metadata.storedText) |
||||
|
; |
||||
|
if( module.is.textEnabled() ) { |
||||
|
if( module.is.active() && activeText) { |
||||
|
module.verbose('Resetting active text', activeText); |
||||
|
module.update.text(activeText); |
||||
|
} |
||||
|
else if(inactiveText) { |
||||
|
module.verbose('Resetting inactive text', activeText); |
||||
|
module.update.text(inactiveText); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
update: { |
||||
|
text: function(text) { |
||||
|
var |
||||
|
currentText = module.get.text() |
||||
|
; |
||||
|
if(text && text !== currentText) { |
||||
|
module.debug('Updating text', text); |
||||
|
if(settings.selector.text) { |
||||
|
$module |
||||
|
.data(metadata.storedText, text) |
||||
|
.find(settings.selector.text) |
||||
|
.text(text) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$module |
||||
|
.data(metadata.storedText, text) |
||||
|
.html(text) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Text is already sane, ignoring update', text); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
module.debug('Changing setting', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
module.debug('Changing internal', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(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.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() { |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.state.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
name : 'State', |
||||
|
|
||||
|
// debug output
|
||||
|
debug : true, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : true, |
||||
|
|
||||
|
// namespace for events
|
||||
|
namespace : 'state', |
||||
|
|
||||
|
// debug data includes performance
|
||||
|
performance: true, |
||||
|
|
||||
|
// callback occurs on state change
|
||||
|
onActivate : function() {}, |
||||
|
onDeactivate : function() {}, |
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// state test functions
|
||||
|
activateTest : function() { return true; }, |
||||
|
deactivateTest : function() { return true; }, |
||||
|
|
||||
|
// whether to automatically map default states
|
||||
|
automatic : true, |
||||
|
|
||||
|
// activate / deactivate changes all elements instantiated at same time
|
||||
|
sync : false, |
||||
|
|
||||
|
// default flash text duration, used for temporarily changing text of an element
|
||||
|
flashDuration : 3000, |
||||
|
|
||||
|
// selector filter
|
||||
|
filter : { |
||||
|
text : '.loading, .disabled', |
||||
|
active : '.disabled' |
||||
|
}, |
||||
|
|
||||
|
context : false, |
||||
|
|
||||
|
// error
|
||||
|
error: { |
||||
|
method : 'The method you called is not defined.' |
||||
|
}, |
||||
|
|
||||
|
// metadata
|
||||
|
metadata: { |
||||
|
promise : 'promise', |
||||
|
storedText : 'stored-text' |
||||
|
}, |
||||
|
|
||||
|
// change class on state
|
||||
|
className: { |
||||
|
focus : 'focus', |
||||
|
hover : 'hover', |
||||
|
down : 'down', |
||||
|
active : 'active', |
||||
|
loading : 'loading' |
||||
|
}, |
||||
|
|
||||
|
selector: { |
||||
|
// selector for text node
|
||||
|
text: false |
||||
|
}, |
||||
|
|
||||
|
defaults : { |
||||
|
input: { |
||||
|
hover : true, |
||||
|
focus : true, |
||||
|
down : true, |
||||
|
loading : false, |
||||
|
active : false |
||||
|
}, |
||||
|
button: { |
||||
|
hover : true, |
||||
|
focus : false, |
||||
|
down : true, |
||||
|
active : true, |
||||
|
loading : true |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
states : { |
||||
|
hover : true, |
||||
|
focus : true, |
||||
|
down : true, |
||||
|
loading : false, |
||||
|
active : false |
||||
|
}, |
||||
|
|
||||
|
text : { |
||||
|
flash : false, |
||||
|
hover : false, |
||||
|
active : false, |
||||
|
inactive : false, |
||||
|
enable : false, |
||||
|
disable : false |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,766 @@ |
|||||
|
/* ****************************** |
||||
|
Module - Chat Room |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit Aug 8, 2012 |
||||
|
|
||||
|
Designed as a simple modular chat component |
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.chatroom = function(parameters) { |
||||
|
var |
||||
|
settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), |
||||
|
|
||||
|
className = settings.className, |
||||
|
namespace = settings.namespace, |
||||
|
selector = settings.selector, |
||||
|
error = settings.error, |
||||
|
|
||||
|
// hoist arguments
|
||||
|
moduleArguments = arguments || false |
||||
|
; |
||||
|
$(this) |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
|
||||
|
$expandButton = $module.find(selector.expandButton), |
||||
|
$userListButton = $module.find(selector.userListButton), |
||||
|
|
||||
|
$userList = $module.find(selector.userList), |
||||
|
$room = $module.find(selector.room), |
||||
|
$userCount = $module.find(selector.userCount), |
||||
|
|
||||
|
$log = $module.find(selector.log), |
||||
|
$message = $module.find(selector.message), |
||||
|
|
||||
|
$messageInput = $module.find(selector.messageInput), |
||||
|
$messageButton = $module.find(selector.messageButton), |
||||
|
|
||||
|
instance = $module.data('module'), |
||||
|
|
||||
|
html = '', |
||||
|
users = {}, |
||||
|
|
||||
|
channel, |
||||
|
loggedInUser, |
||||
|
|
||||
|
message, |
||||
|
count, |
||||
|
|
||||
|
height, |
||||
|
|
||||
|
pusher, |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
width: { |
||||
|
log : $log.width(), |
||||
|
userList : $userList.outerWidth() |
||||
|
}, |
||||
|
|
||||
|
initialize: function() { |
||||
|
|
||||
|
// check error conditions
|
||||
|
if(Pusher === undefined) { |
||||
|
module.error(error.pusher); |
||||
|
} |
||||
|
if(settings.key === undefined || settings.channelName === undefined) { |
||||
|
module.error(error.key); |
||||
|
return false; |
||||
|
} |
||||
|
else if( !(settings.endpoint.message || settings.endpoint.authentication) ) { |
||||
|
module.error(error.endpoint); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// define pusher
|
||||
|
pusher = new Pusher(settings.key); |
||||
|
Pusher.channel_auth_endpoint = settings.endpoint.authentication; |
||||
|
|
||||
|
channel = pusher.subscribe(settings.channelName); |
||||
|
|
||||
|
channel.bind('pusher:subscription_succeeded', module.user.list.create); |
||||
|
channel.bind('pusher:subscription_error', module.error); |
||||
|
channel.bind('pusher:member_added', module.user.joined); |
||||
|
channel.bind('pusher:member_removed', module.user.left); |
||||
|
channel.bind('update_messages', module.message.receive); |
||||
|
|
||||
|
$.each(settings.customEvents, function(label, value) { |
||||
|
channel.bind(label, value); |
||||
|
}); |
||||
|
|
||||
|
// bind module events
|
||||
|
$userListButton |
||||
|
.on('click.' + namespace, module.event.toggleUserList) |
||||
|
; |
||||
|
$expandButton |
||||
|
.on('click.' + namespace, module.event.toggleExpand) |
||||
|
; |
||||
|
$messageInput |
||||
|
.on('keydown.' + namespace, module.event.input.keydown) |
||||
|
.on('keyup.' + namespace, module.event.input.keyup) |
||||
|
; |
||||
|
$messageButton |
||||
|
.on('mouseenter.' + namespace, module.event.hover) |
||||
|
.on('mouseleave.' + namespace, module.event.hover) |
||||
|
.on('click.' + namespace, module.event.submit) |
||||
|
; |
||||
|
// scroll to bottom of chat log
|
||||
|
$log |
||||
|
.animate({ |
||||
|
scrollTop: $log.prop('scrollHeight') |
||||
|
}, 400) |
||||
|
; |
||||
|
$module |
||||
|
.data('module', module) |
||||
|
.addClass(className.loading) |
||||
|
; |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// refresh module
|
||||
|
refresh: function() { |
||||
|
// reset width calculations
|
||||
|
$userListButton |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
module.width = { |
||||
|
log : $log.width(), |
||||
|
userList : $userList.outerWidth() |
||||
|
}; |
||||
|
if( $userListButton.hasClass(className.active) ) { |
||||
|
module.user.list.hide(); |
||||
|
} |
||||
|
$module.data('module', module); |
||||
|
}, |
||||
|
|
||||
|
user: { |
||||
|
|
||||
|
updateCount: function() { |
||||
|
if(settings.userCount) { |
||||
|
users = $module.data('users'); |
||||
|
count = 0; |
||||
|
$.each(users, function() { |
||||
|
count++; |
||||
|
}); |
||||
|
$userCount |
||||
|
.html( settings.templates.userCount(count) ) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// add user to user list
|
||||
|
joined: function(member) { |
||||
|
users = $module.data('users'); |
||||
|
if(member.id != 'anonymous' && users[ member.id ] === undefined ) { |
||||
|
users[ member.id ] = member.info; |
||||
|
if(settings.randomColor && member.info.color === undefined) { |
||||
|
member.info.color = settings.templates.color(member.id); |
||||
|
} |
||||
|
html = settings.templates.userList(member.info); |
||||
|
if(member.info.isAdmin) { |
||||
|
$(html) |
||||
|
.prependTo($userList) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$(html) |
||||
|
.appendTo($userList) |
||||
|
; |
||||
|
} |
||||
|
if(settings.partingMessages) { |
||||
|
$log |
||||
|
.append( settings.templates.joined(member.info) ) |
||||
|
; |
||||
|
module.message.scroll.test(); |
||||
|
} |
||||
|
module.user.updateCount(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// remove user from user list
|
||||
|
left: function(member) { |
||||
|
users = $module.data('users'); |
||||
|
if(member !== undefined && member.id !== 'anonymous') { |
||||
|
delete users[ member.id ]; |
||||
|
$module |
||||
|
.data('users', users) |
||||
|
; |
||||
|
$userList |
||||
|
.find('[data-id='+ member.id + ']') |
||||
|
.remove() |
||||
|
; |
||||
|
if(settings.partingMessages) { |
||||
|
$log |
||||
|
.append( settings.templates.left(member.info) ) |
||||
|
; |
||||
|
module.message.scroll.test(); |
||||
|
} |
||||
|
module.user.updateCount(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
list: { |
||||
|
|
||||
|
// receives list of members and generates user list
|
||||
|
create: function(members) { |
||||
|
users = {}; |
||||
|
members.each(function(member) { |
||||
|
if(member.id !== 'anonymous' && member.id !== 'undefined') { |
||||
|
if(settings.randomColor && member.info.color === undefined) { |
||||
|
member.info.color = settings.templates.color(member.id); |
||||
|
} |
||||
|
// sort list with admin first
|
||||
|
html = (member.info.isAdmin) |
||||
|
? settings.templates.userList(member.info) + html |
||||
|
: html + settings.templates.userList(member.info) |
||||
|
; |
||||
|
users[ member.id ] = member.info; |
||||
|
} |
||||
|
}); |
||||
|
$module |
||||
|
.data('users', users) |
||||
|
.data('user', users[members.me.id] ) |
||||
|
.removeClass(className.loading) |
||||
|
; |
||||
|
$userList |
||||
|
.html(html) |
||||
|
; |
||||
|
module.user.updateCount(); |
||||
|
$.proxy(settings.onJoin, $userList.children())(); |
||||
|
}, |
||||
|
|
||||
|
// shows user list
|
||||
|
show: function() { |
||||
|
$log |
||||
|
.animate({ |
||||
|
width: (module.width.log - module.width.userList) |
||||
|
}, { |
||||
|
duration : settings.speed, |
||||
|
easing : settings.easing, |
||||
|
complete : module.message.scroll.move |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
// hides user list
|
||||
|
hide: function() { |
||||
|
$log |
||||
|
.stop() |
||||
|
.animate({ |
||||
|
width: (module.width.log) |
||||
|
}, { |
||||
|
duration : settings.speed, |
||||
|
easing : settings.easing, |
||||
|
complete : module.message.scroll.move |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
message: { |
||||
|
|
||||
|
// handles scrolling of chat log
|
||||
|
scroll: { |
||||
|
test: function() { |
||||
|
height = $log.prop('scrollHeight') - $log.height(); |
||||
|
if( Math.abs($log.scrollTop() - height) < settings.scrollArea) { |
||||
|
module.message.scroll.move(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
move: function() { |
||||
|
height = $log.prop('scrollHeight') - $log.height(); |
||||
|
$log |
||||
|
.scrollTop(height) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// sends chat message
|
||||
|
send: function(message) { |
||||
|
if( !module.utils.emptyString(message) ) { |
||||
|
$.api({ |
||||
|
url : settings.endpoint.message, |
||||
|
method : 'POST', |
||||
|
data : { |
||||
|
'message': { |
||||
|
content : message, |
||||
|
timestamp : new Date().getTime() |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// receives chat response and processes
|
||||
|
receive: function(response) { |
||||
|
message = response.data; |
||||
|
users = $module.data('users'); |
||||
|
loggedInUser = $module.data('user'); |
||||
|
if(users[ message.userID] !== undefined) { |
||||
|
// logged in user's messages already pushed instantly
|
||||
|
if(loggedInUser === undefined || loggedInUser.id != message.userID) { |
||||
|
message.user = users[ message.userID ]; |
||||
|
module.message.display(message); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// displays message in chat log
|
||||
|
display: function(message) { |
||||
|
$log |
||||
|
.append( settings.templates.message(message) ) |
||||
|
; |
||||
|
module.message.scroll.test(); |
||||
|
$.proxy(settings.onMessage, $log.children().last() )(); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
expand: function() { |
||||
|
$module |
||||
|
.addClass(className.expand) |
||||
|
; |
||||
|
$.proxy(settings.onExpand, $module )(); |
||||
|
module.refresh(); |
||||
|
}, |
||||
|
|
||||
|
contract: function() { |
||||
|
$module |
||||
|
.removeClass(className.expand) |
||||
|
; |
||||
|
$.proxy(settings.onContract, $module )(); |
||||
|
module.refresh(); |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
|
||||
|
input: { |
||||
|
|
||||
|
keydown: function(event) { |
||||
|
if(event.which == 13) { |
||||
|
$messageButton |
||||
|
.addClass(className.down) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
keyup: function(event) { |
||||
|
if(event.which == 13) { |
||||
|
$messageButton |
||||
|
.removeClass(className.down) |
||||
|
; |
||||
|
module.event.submit(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// handles message form submit
|
||||
|
submit: function() { |
||||
|
var |
||||
|
message = $messageInput.val(), |
||||
|
loggedInUser = $module.data('user') |
||||
|
; |
||||
|
if(loggedInUser !== undefined && !module.utils.emptyString(message)) { |
||||
|
module.message.send(message); |
||||
|
// display immediately
|
||||
|
module.message.display({ |
||||
|
user: loggedInUser, |
||||
|
text: message |
||||
|
}); |
||||
|
module.message.scroll.move(); |
||||
|
$messageInput |
||||
|
.val('') |
||||
|
; |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// handles button click on expand button
|
||||
|
toggleExpand: function() { |
||||
|
if( !$module.hasClass(className.expand) ) { |
||||
|
$expandButton |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
module.expand(); |
||||
|
} |
||||
|
else { |
||||
|
$expandButton |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
module.contract(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// handles button click on user list button
|
||||
|
toggleUserList: function() { |
||||
|
if( !$log.is(':animated') ) { |
||||
|
if( !$userListButton.hasClass(className.active) ) { |
||||
|
$userListButton |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
module.user.list.show(); |
||||
|
} |
||||
|
else { |
||||
|
$userListButton |
||||
|
.removeClass('active') |
||||
|
; |
||||
|
module.user.list.hide(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
utils: { |
||||
|
|
||||
|
emptyString: function(string) { |
||||
|
if(typeof string == 'string') { |
||||
|
return (string.search(/\S/) == -1); |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(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.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() { |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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 + '\''; |
||||
|
} |
||||
|
title += ' ' + '(' + $allDropdowns.size() + ')'; |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== undefined) { |
||||
|
query = query.split(/[\. ]/); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.chatroom.settings = { |
||||
|
|
||||
|
name : 'Chat', |
||||
|
debug : false, |
||||
|
namespace : 'chat', |
||||
|
|
||||
|
channel : 'present-chat', |
||||
|
|
||||
|
onJoin : function(){}, |
||||
|
onMessage : function(){}, |
||||
|
onExpand : function(){}, |
||||
|
onContract : function(){}, |
||||
|
|
||||
|
customEvents : {}, |
||||
|
|
||||
|
partingMessages : false, |
||||
|
userCount : true, |
||||
|
randomColor : true, |
||||
|
|
||||
|
speed : 300, |
||||
|
easing : 'easeOutQuint', |
||||
|
|
||||
|
// pixels from bottom of chat log that should trigger auto scroll to bottom
|
||||
|
scrollArea : 9999, |
||||
|
|
||||
|
endpoint : { |
||||
|
message : false, |
||||
|
authentication : false |
||||
|
}, |
||||
|
|
||||
|
error: { |
||||
|
method : 'The method you called is not defined', |
||||
|
endpoint : 'Please define a message and authentication endpoint.', |
||||
|
key : 'You must specify a pusher key and channel.', |
||||
|
pusher : 'You must include the Pusher library.' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
expand : 'expand', |
||||
|
active : 'active', |
||||
|
hover : 'hover', |
||||
|
down : 'down', |
||||
|
loading : 'loading' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
userCount : '.actions .message', |
||||
|
userListButton : '.actions .list.button', |
||||
|
expandButton : '.actions .expand.button', |
||||
|
room : '.room', |
||||
|
userList : '.room .list', |
||||
|
log : '.room .log', |
||||
|
message : '.room .log .message', |
||||
|
author : '.room log .message .author', |
||||
|
messageInput : '.talk input', |
||||
|
messageButton : '.talk .send.button' |
||||
|
}, |
||||
|
|
||||
|
templates: { |
||||
|
|
||||
|
userCount: function(number) { |
||||
|
return number + ' users in chat'; |
||||
|
}, |
||||
|
|
||||
|
color: function(userID) { |
||||
|
var |
||||
|
colors = [ |
||||
|
'#000000', |
||||
|
'#333333', |
||||
|
'#666666', |
||||
|
'#999999', |
||||
|
'#CC9999', |
||||
|
'#CC6666', |
||||
|
'#CC3333', |
||||
|
'#993333', |
||||
|
'#663333', |
||||
|
'#CC6633', |
||||
|
'#CC9966', |
||||
|
'#CC9933', |
||||
|
'#999966', |
||||
|
'#CCCC66', |
||||
|
'#99CC66', |
||||
|
'#669933', |
||||
|
'#669966', |
||||
|
'#33A3CC', |
||||
|
'#336633', |
||||
|
'#33CCCC', |
||||
|
'#339999', |
||||
|
'#336666', |
||||
|
'#336699', |
||||
|
'#6666CC', |
||||
|
'#9966CC', |
||||
|
'#333399', |
||||
|
'#663366', |
||||
|
'#996699', |
||||
|
'#993366', |
||||
|
'#CC6699' |
||||
|
] |
||||
|
; |
||||
|
return colors[ Math.floor( Math.random() * colors.length) ]; |
||||
|
}, |
||||
|
|
||||
|
message: function(message) { |
||||
|
var |
||||
|
html = '' |
||||
|
; |
||||
|
if(message.user.isAdmin) { |
||||
|
message.user.color = '#55356A'; |
||||
|
html += '<div class="admin message">'; |
||||
|
html += '<span class="quirky ui flag team"></span>'; |
||||
|
} |
||||
|
/* |
||||
|
else if(message.user.isPro) { |
||||
|
html += '<div class="indent message">'; |
||||
|
html += '<span class="quirky ui flag pro"></span>'; |
||||
|
} |
||||
|
*/ |
||||
|
else { |
||||
|
html += '<div class="message">'; |
||||
|
} |
||||
|
html += '<p>'; |
||||
|
if(message.user.color !== undefined) { |
||||
|
html += '<span class="author" style="color: ' + message.user.color + ';">' + message.user.name + '</span>: '; |
||||
|
} |
||||
|
else { |
||||
|
html += '<span class="author">' + message.user.name + '</span>: '; |
||||
|
} |
||||
|
html += '' |
||||
|
+ message.text |
||||
|
+ ' </p>' |
||||
|
+ '</div>' |
||||
|
; |
||||
|
return html; |
||||
|
}, |
||||
|
|
||||
|
joined: function(member) { |
||||
|
return (typeof member.name !== undefined) |
||||
|
? '<div class="status">' + member.name + ' has joined the chat.</div>' |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
left: function(member) { |
||||
|
return (typeof member.name !== undefined) |
||||
|
? '<div class="status">' + member.name + ' has left the chat.</div>' |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
userList: function(member) { |
||||
|
var |
||||
|
html = '' |
||||
|
; |
||||
|
if(member.isAdmin) { |
||||
|
member.color = '#55356A'; |
||||
|
} |
||||
|
html += '' |
||||
|
+ '<div class="user" data-id="' + member.id + '">' |
||||
|
+ ' <div class="image">' |
||||
|
+ ' <img src="' + member.avatarURL + '">' |
||||
|
+ ' </div>' |
||||
|
; |
||||
|
if(member.color !== undefined) { |
||||
|
html += ' <p><a href="/users/' + member.id + '" target="_blank" style="color: ' + member.color + ';">' + member.name + '</a></p>'; |
||||
|
} |
||||
|
else { |
||||
|
html += ' <p><a href="/users/' + member.id + '" target="_blank">' + member.name + '</a></p>'; |
||||
|
} |
||||
|
html += '</div>'; |
||||
|
return html; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,271 @@ |
|||||
|
|
||||
|
/******************************* |
||||
|
Chat Room |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.chatroom { |
||||
|
background-color: #F8F8F8; |
||||
|
width: 330px; |
||||
|
height: 370px; |
||||
|
padding: 0px; |
||||
|
} |
||||
|
.ui.chatroom .room { |
||||
|
position: relative; |
||||
|
background-color: #FFFFFF; |
||||
|
overflow: hidden; |
||||
|
height: 286px; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
border-top: none; |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
.ui.chatroom .room .loader { |
||||
|
display: none; |
||||
|
margin: -25px 0px 0px -25px; |
||||
|
} |
||||
|
/* Chat Room Actions */ |
||||
|
.ui.chatroom .actions { |
||||
|
overflow: hidden; |
||||
|
background-color: #EEEEEE; |
||||
|
padding: 4px; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
-moz-border-radius: 5px 5px 0px 0px; |
||||
|
-webkit-border-radius: 5px 5px 0px 0px; |
||||
|
border-radius: 5px 5px 0px 0px; |
||||
|
} |
||||
|
.ui.chatroom .actions .button { |
||||
|
float: right; |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
|
||||
|
/* Online User Count */ |
||||
|
.ui.chatroom .actions .message { |
||||
|
float: left; |
||||
|
margin-left: 6px; |
||||
|
font-size: 11px; |
||||
|
color: #AAAAAA; |
||||
|
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
||||
|
line-height: 28px; |
||||
|
} |
||||
|
.ui.chatroom .actions .message .loader { |
||||
|
display: inline-block; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Chat Room Text Log */ |
||||
|
.ui.chatroom .log { |
||||
|
float: left; |
||||
|
|
||||
|
overflow: auto; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.ui.chatroom .log .message { |
||||
|
padding: 3px 0px; |
||||
|
border-top: 1px dotted #DADADA; |
||||
|
} |
||||
|
.ui.chatroom .log .message:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
/* status event */ |
||||
|
.ui.chatroom .status { |
||||
|
padding: 5px 0px; |
||||
|
color: #AAAAAA; |
||||
|
|
||||
|
font-size: 12px; |
||||
|
font-style: italic; |
||||
|
line-height: 1.33; |
||||
|
border-top: 1px dotted #DADADA; |
||||
|
} |
||||
|
.ui.chatroom .log .status:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.ui.chatroom .log .flag { |
||||
|
float: left; |
||||
|
} |
||||
|
.ui.chatroom .log p { |
||||
|
margin-left: 0px; |
||||
|
} |
||||
|
.ui.chatroom .log .author { |
||||
|
font-weight: bold; |
||||
|
-webkit-transition: color 0.3s ease-out; |
||||
|
-moz-transition: color 0.3s ease-out; |
||||
|
-o-transition: color 0.3s ease-out; |
||||
|
-ms-transition: color 0.3s ease-out; |
||||
|
transition: color 0.3s ease-out; |
||||
|
} |
||||
|
.ui.chatroom .log a.author:hover { |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
.ui.chatroom .log .message.admin p { |
||||
|
font-weight: bold; |
||||
|
margin: 1px 0px 0px 23px; |
||||
|
} |
||||
|
.ui.chatroom .log .divider { |
||||
|
margin: -1px 0px; |
||||
|
font-size: 11px; |
||||
|
padding: 10px 0px; |
||||
|
border-top: 1px solid #F8F8F8; |
||||
|
border-bottom: 1px solid #F8F8F8; |
||||
|
} |
||||
|
.ui.chatroom .log .divider .rule { |
||||
|
top: 50%; |
||||
|
width: 15%; |
||||
|
} |
||||
|
|
||||
|
.ui.chatroom .log .divider .label { |
||||
|
color: #777777; |
||||
|
margin: 0px; |
||||
|
} |
||||
|
|
||||
|
/* Chat Room User List */ |
||||
|
.ui.chatroom .room .list { |
||||
|
position: relative; |
||||
|
overflow: auto; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
float: left; |
||||
|
background-color: #EEEEEE; |
||||
|
border-left: 1px solid #DDDDDD; |
||||
|
} |
||||
|
.ui.chatroom .room .list .user { |
||||
|
display: table; |
||||
|
padding: 3px 7px; |
||||
|
border-bottom: 1px solid #DDDDDD; |
||||
|
} |
||||
|
.ui.chatroom .room .list .user:hover { |
||||
|
background-color: #F8F8F8; |
||||
|
} |
||||
|
.ui.chatroom .room .list .image { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
width: 20px; |
||||
|
} |
||||
|
.ui.chatroom .room .list .image img { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.ui.chatroom .room .list p { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
padding-left: 7px; |
||||
|
padding-right: 14px; |
||||
|
font-size: 11px; |
||||
|
line-height: 1.2; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.ui.chatroom .room .list a:hover { |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
/* User List Loading */ |
||||
|
.ui.chatroom.loading .loader { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* Chat Room Talk Input */ |
||||
|
.ui.chatroom .talk { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
padding: 5px 0px 0px; |
||||
|
|
||||
|
background-color: #EEEEEE; |
||||
|
|
||||
|
-webkit-border-radius: 0px 0px 5px 5px; |
||||
|
-moz-border-radius: 0px 0px 5px 5px; |
||||
|
border-radius: 0px 0px 5px 5px; |
||||
|
} |
||||
|
.ui.chatroom .talk .avatar, |
||||
|
.ui.chatroom .talk input, |
||||
|
.ui.chatroom .talk .button { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.ui.chatroom .talk .avatar img { |
||||
|
display: block; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
margin-right: 4px; |
||||
|
border-radius: 500rem; |
||||
|
} |
||||
|
.ui.chatroom .talk input { |
||||
|
border: 1px solid #CCCCCC; |
||||
|
margin: 0px; |
||||
|
width: 196px; |
||||
|
height: 14px; |
||||
|
padding: 8px 5px; |
||||
|
font-size: 12px; |
||||
|
color: #555555; |
||||
|
} |
||||
|
.ui.chatroom .talk input.focus { |
||||
|
border: 1px solid #AAAAAA; |
||||
|
} |
||||
|
.ui.chatroom .send { |
||||
|
width: 80px; |
||||
|
height: 32px; |
||||
|
|
||||
|
margin-left: -1px; |
||||
|
padding: 4px 12px; |
||||
|
font-size: 12px; |
||||
|
line-height: 23px; |
||||
|
|
||||
|
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
|
||||
|
border-radius: 0 5px 5px 0; |
||||
|
} |
||||
|
.ui.chatroom .talk .log-in.button { |
||||
|
display: block; |
||||
|
float: none; |
||||
|
margin-top: -6px; |
||||
|
height: 22px; |
||||
|
border-radius: 0px 0px 4px 4px; |
||||
|
} |
||||
|
.ui.chatroom .talk .log-in.button i { |
||||
|
vertical-align: text-top; |
||||
|
} |
||||
|
|
||||
|
/* Quirky Flags */ |
||||
|
.ui.chatroom .log .team.flag { |
||||
|
width: 18px; |
||||
|
} |
||||
|
|
||||
|
/* Chat room Loaded */ |
||||
|
.ui.chatroom.loading .loader { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Standard Size */ |
||||
|
.ui.chatroom { |
||||
|
width: 330px; |
||||
|
height: 370px; |
||||
|
} |
||||
|
.ui.chatroom .room .container { |
||||
|
width: 3000px; |
||||
|
} |
||||
|
.ui.chatroom .log { |
||||
|
width: 314px; |
||||
|
height: 278px; |
||||
|
padding: 4px 7px; |
||||
|
} |
||||
|
.ui.chatroom .room .list { |
||||
|
width: 124px; |
||||
|
height: 278px; |
||||
|
padding: 4px 0px; |
||||
|
} |
||||
|
.ui.chatroom .room .list .user { |
||||
|
width: 110px; |
||||
|
} |
||||
|
.ui.chatroom .talk { |
||||
|
height: 40px; |
||||
|
} |
||||
@ -0,0 +1,348 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Checkbox |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
Simple plug-in which maintains the state for ui checkbox |
||||
|
This can be done without javascript, only in instances |
||||
|
where each checkbox is assigned a unique ID. This provides a separate |
||||
|
programmatic option when that is not possible. |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.checkbox = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.checkbox.settings, parameters), |
||||
|
|
||||
|
className = settings.className, |
||||
|
namespace = settings.namespace, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
|
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
$label = $(this).next(settings.selector.label).first(), |
||||
|
$input = $(this).find(settings.selector.input), |
||||
|
|
||||
|
selector = $module.selector || '', |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
element = this, |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing checkbox', settings); |
||||
|
if(settings.context && selector !== '') { |
||||
|
module.verbose('Adding delegated events'); |
||||
|
$(element, settings.context) |
||||
|
.on(selector, 'click' + eventNamespace, module.toggle) |
||||
|
.on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$module |
||||
|
.on('click' + eventNamespace, module.toggle) |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
$label |
||||
|
.on('click' + eventNamespace, module.toggle) |
||||
|
; |
||||
|
} |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module'); |
||||
|
$module |
||||
|
.off(eventNamespace) |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
radio: function() { |
||||
|
return $module.hasClass(className.radio); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
disable: function() { |
||||
|
return (typeof settings.required === 'boolean') |
||||
|
? settings.required |
||||
|
: !module.is.radio() |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
enable: function() { |
||||
|
module.debug('Enabling checkbox'); |
||||
|
$input |
||||
|
.prop('checked', true) |
||||
|
; |
||||
|
$.proxy(settings.onChange, $input.get())(); |
||||
|
$.proxy(settings.onEnable, $input.get())(); |
||||
|
}, |
||||
|
|
||||
|
disable: function() { |
||||
|
module.debug('Disabling checkbox'); |
||||
|
$input |
||||
|
.prop('checked', false) |
||||
|
; |
||||
|
$.proxy(settings.onChange, $input.get())(); |
||||
|
$.proxy(settings.onDisable, $input.get())(); |
||||
|
}, |
||||
|
|
||||
|
toggle: function(event) { |
||||
|
module.verbose('Determining new checkbox state'); |
||||
|
if($input.prop('checked') === undefined || !$input.prop('checked')) { |
||||
|
module.enable(); |
||||
|
} |
||||
|
else if( module.can.disable() ) { |
||||
|
module.disable(); |
||||
|
} |
||||
|
}, |
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.checkbox.settings = { |
||||
|
|
||||
|
name : 'Checkbox', |
||||
|
namespace : 'checkbox', |
||||
|
|
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
|
||||
|
// delegated event context
|
||||
|
context : false, |
||||
|
required : 'auto', |
||||
|
|
||||
|
onChange : function(){}, |
||||
|
onEnable : function(){}, |
||||
|
onDisable : function(){}, |
||||
|
|
||||
|
error : { |
||||
|
method : 'The method you called is not defined.' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
input : 'input', |
||||
|
label : 'label' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
radio : 'radio' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,380 @@ |
|||||
|
/******************************* |
||||
|
UI Checkbox |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Standard |
||||
|
---------------*/ |
||||
|
|
||||
|
|
||||
|
/*--- Content ---*/ |
||||
|
.ui.checkbox { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
outline: none; |
||||
|
|
||||
|
margin-right: 0.5em; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.ui.checkbox input { |
||||
|
visibility: hidden; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Box ---*/ |
||||
|
.ui.checkbox .box, |
||||
|
.ui.checkbox label { |
||||
|
outline: none; |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
|
||||
|
line-height: 1; |
||||
|
width: 1em; |
||||
|
height: 1em; |
||||
|
bottom: 0em; |
||||
|
left: 0em; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
||||
|
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
||||
|
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
||||
|
|
||||
|
background: #FFFFFF; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background-color 0.1s ease-out, |
||||
|
box-shadow 0.1s ease-out |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background-color 0.1s ease-out, |
||||
|
box-shadow 0.1s ease-out |
||||
|
; |
||||
|
-o-transition: |
||||
|
background-color 0.1s ease-out, |
||||
|
box-shadow 0.1s ease-out |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background-color 0.1s ease-out, |
||||
|
box-shadow 0.1s ease-out |
||||
|
; |
||||
|
transition: |
||||
|
background-color 0.1s ease-out, |
||||
|
box-shadow 0.1s ease-out |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
/*--- Checkbox ---*/ |
||||
|
.ui.checkbox .box:after, |
||||
|
.ui.checkbox label:after { |
||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
||||
|
filter: alpha(opacity=0); |
||||
|
opacity: 0; |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
background: transparent; |
||||
|
border: 0.2em solid #333333; |
||||
|
border-top: none; |
||||
|
border-right: none; |
||||
|
-webkit-transform: rotate(-45deg); |
||||
|
-moz-transform: rotate(-45deg); |
||||
|
-o-transform: rotate(-45deg); |
||||
|
-ms-transform: rotate(-45deg); |
||||
|
transform: rotate(-45deg); |
||||
|
} |
||||
|
.ui.checkbox .box:after, |
||||
|
.ui.checkbox label:after { |
||||
|
top: 0.3em; |
||||
|
left: 0.2em; |
||||
|
width: 0.45em; |
||||
|
height: 0.15em; |
||||
|
} |
||||
|
|
||||
|
/*--- Label ---*/ |
||||
|
.ui.checkbox + label { |
||||
|
cursor: pointer; |
||||
|
opacity: 0.85; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.ui.checkbox + label:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*--- Hover ---*/ |
||||
|
.ui.checkbox .box:hover, |
||||
|
.ui.checkbox label:hover { |
||||
|
background-color: #FAFAFA; |
||||
|
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
||||
|
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
||||
|
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Down ---*/ |
||||
|
.ui.checkbox .box:active, |
||||
|
.ui.checkbox label:active { |
||||
|
background-color: #F5F5F5; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Active ---*/ |
||||
|
.ui.checkbox input:checked + .box:after, |
||||
|
.ui.checkbox input:checked + label:after { |
||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
||||
|
filter: alpha(opacity=100); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*--- Disabled ---*/ |
||||
|
.ui.disabled.checkbox + .box:after, |
||||
|
.ui.checkbox input[disabled] + .box:after, |
||||
|
.ui.disabled.checkbox label, |
||||
|
.ui.checkbox input[disabled] + label { |
||||
|
opacity: 0.4; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Radio |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.radio.checkbox { |
||||
|
width: 14px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
.ui.radio.checkbox .box, |
||||
|
.ui.radio.checkbox label { |
||||
|
width: 14px; |
||||
|
height: 14px; |
||||
|
-webkit-border-radius: 500px; |
||||
|
-moz-border-radius: 500px; |
||||
|
border-radius: 500px; |
||||
|
} |
||||
|
.ui.radio.checkbox .box:after, |
||||
|
.ui.radio.checkbox label:after { |
||||
|
top: 3px; |
||||
|
left: 3px; |
||||
|
|
||||
|
border: none; |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
|
||||
|
background-color: #555555; |
||||
|
|
||||
|
-webkit-border-radius: 500px; |
||||
|
-moz-border-radius: 500px; |
||||
|
border-radius: 500px; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Slider |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.slider.checkbox { |
||||
|
cursor: pointer; |
||||
|
width: 3em; |
||||
|
height: 2em; |
||||
|
} |
||||
|
/* Line */ |
||||
|
.ui.slider.checkbox:after { |
||||
|
position: absolute; |
||||
|
top: 1em; |
||||
|
left: 0em; |
||||
|
content: ''; |
||||
|
|
||||
|
width: 100%; |
||||
|
height: 2px; |
||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
/* Button */ |
||||
|
.ui.slider.checkbox .box, |
||||
|
.ui.slider.checkbox label { |
||||
|
cursor: pointer; |
||||
|
display: block; |
||||
|
|
||||
|
position: absolute; |
||||
|
top: 0.25em; |
||||
|
left: 0; |
||||
|
z-index: 1; |
||||
|
|
||||
|
width: 1.5em; |
||||
|
height: 1.5em; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
|
||||
|
border-radius: 50rem; |
||||
|
|
||||
|
-webkit-transition: left 0.3s ease 0s; |
||||
|
-moz-transition: left 0.3s ease 0s; |
||||
|
-o-transition: left 0.3s ease 0s; |
||||
|
-ms-transition: left 0.3s ease 0s; |
||||
|
transition: left 0.3s ease 0s; |
||||
|
} |
||||
|
|
||||
|
/* Button Activation Light */ |
||||
|
.ui.slider.checkbox .box:after, |
||||
|
.ui.slider.checkbox label:after { |
||||
|
opacity: 1; |
||||
|
|
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
top: 0.375em; |
||||
|
left: 0.375em; |
||||
|
|
||||
|
border: none; |
||||
|
width: 0.75em; |
||||
|
height: 0.75em; |
||||
|
|
||||
|
background-color: #D95C5C; |
||||
|
|
||||
|
border-radius: 50rem; |
||||
|
|
||||
|
-webkit-transition: background 0.3s ease 0s; |
||||
|
-moz-transition: background 0.3s ease 0s; |
||||
|
-o-transition: background 0.3s ease 0s; |
||||
|
-ms-transition: background 0.3s ease 0s; |
||||
|
transition: background 0.3s ease 0s; |
||||
|
} |
||||
|
|
||||
|
/* Active Slider Toggle */ |
||||
|
.ui.slider.checkbox input:checked + .box, |
||||
|
.ui.slider.checkbox input:checked + label { |
||||
|
left: 1.75em; |
||||
|
} |
||||
|
.ui.slider.checkbox input:checked + .box:after, |
||||
|
.ui.slider.checkbox input:checked + label:after { |
||||
|
background-color: #89B84C; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Toggle |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.toggle.checkbox { |
||||
|
cursor: pointer; |
||||
|
width: 3em; |
||||
|
height: 2em; |
||||
|
} |
||||
|
/* Line */ |
||||
|
.ui.toggle.checkbox:after { |
||||
|
cursor: pointer; |
||||
|
display: block; |
||||
|
|
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
top: 0.25em; |
||||
|
left: 0em; |
||||
|
z-index: 1; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
width: 100%; |
||||
|
height: 1.5em; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
||||
|
|
||||
|
border-radius: 50rem; |
||||
|
} |
||||
|
.ui.toggle.checkbox .box, |
||||
|
.ui.toggle.checkbox label { |
||||
|
position: absolute; |
||||
|
top: 0.65em; |
||||
|
left: 0.5em; |
||||
|
|
||||
|
-webkit-transition: left 0.3s ease 0s; |
||||
|
-moz-transition: left 0.3s ease 0s; |
||||
|
-o-transition: left 0.3s ease 0s; |
||||
|
-ms-transition: left 0.3s ease 0s; |
||||
|
transition: left 0.3s ease 0s; |
||||
|
|
||||
|
background-color: transparent; |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
/* Button Activation Light */ |
||||
|
.ui.toggle.checkbox .box:after, |
||||
|
.ui.toggle.checkbox label:after { |
||||
|
opacity: 1; |
||||
|
|
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
z-index: 2; |
||||
|
|
||||
|
border: none; |
||||
|
width: 0.75em; |
||||
|
height: 0.75em; |
||||
|
|
||||
|
background-color: #D95C5C; |
||||
|
|
||||
|
border-radius: 50rem; |
||||
|
|
||||
|
-webkit-transition: background 0.3s ease 0s; |
||||
|
-moz-transition: background 0.3s ease 0s; |
||||
|
-o-transition: background 0.3s ease 0s; |
||||
|
-ms-transition: background 0.3s ease 0s; |
||||
|
transition: background 0.3s ease 0s; |
||||
|
} |
||||
|
|
||||
|
/* Active toggle Toggle */ |
||||
|
.ui.toggle.checkbox input:checked + .box, |
||||
|
.ui.toggle.checkbox input:checked + label { |
||||
|
left: 1.75em; |
||||
|
} |
||||
|
.ui.toggle.checkbox input:checked + .box:after, |
||||
|
.ui.toggle.checkbox input:checked + label:after { |
||||
|
background-color: #89B84C; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Sizes |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.checkbox { |
||||
|
width: 1em; |
||||
|
height: 1em; |
||||
|
} |
||||
|
.ui.checkbox, |
||||
|
.ui.checkbox .box, |
||||
|
.ui.checkbox label { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
|
||||
|
.ui.large.checkbox { |
||||
|
width: 1.25em; |
||||
|
height: 1.25em; |
||||
|
} |
||||
|
.ui.large.checkbox, |
||||
|
.ui.large.checkbox .box, |
||||
|
.ui.large.checkbox label { |
||||
|
font-size: 1.25em; |
||||
|
} |
||||
|
.ui.huge.checkbox { |
||||
|
width: 1.5em; |
||||
|
height: 1.5em; |
||||
|
} |
||||
|
.ui.huge.checkbox, |
||||
|
.ui.huge.checkbox .box, |
||||
|
.ui.huge.checkbox label { |
||||
|
font-size: 1.5em; |
||||
|
} |
||||
@ -0,0 +1,524 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Dimmer |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit May 30, 2013 |
||||
|
|
||||
|
Simple plug-in which maintains the state for ui dimmer |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.dimmer = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = ( $.isPlainObject(parameters) ) |
||||
|
? $.extend(true, {}, $.fn.dimmer.settings, parameters) |
||||
|
: $.fn.dimmer.settings, |
||||
|
|
||||
|
selector = settings.selector, |
||||
|
namespace = settings.namespace, |
||||
|
className = settings.className, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
clickEvent = ('ontouchstart' in document.documentElement) |
||||
|
? 'touchstart' |
||||
|
: 'click', |
||||
|
|
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
$dimmer = $module.children(selector.dimmer).first(), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $dimmer.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
if( module.is.dimmer() ) { |
||||
|
$dimmer = $module; |
||||
|
$module = $dimmer.parent(); |
||||
|
module.debug('Module initialized as dimmer', settings); |
||||
|
} |
||||
|
else { |
||||
|
if( module.has.dimmer() ) { |
||||
|
$dimmer = $module.children(selector.dimmer).first(); |
||||
|
module.debug('Module initialized with found dimmer', settings); |
||||
|
} |
||||
|
else { |
||||
|
module.create(); |
||||
|
module.debug('Module initialized with created dimmer', settings); |
||||
|
} |
||||
|
if(settings.on == 'hover') { |
||||
|
$module |
||||
|
.on('mouseenter' + eventNamespace, module.show) |
||||
|
.on('mouseleave' + eventNamespace, module.hide) |
||||
|
; |
||||
|
} |
||||
|
else if(settings.on == 'click') { |
||||
|
$module |
||||
|
.on(clickEvent + eventNamespace, module.toggle) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
if(settings.closable) { |
||||
|
$dimmer |
||||
|
.on(clickEvent, module.event.click) |
||||
|
; |
||||
|
} |
||||
|
module.set.dimmable(); |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module'); |
||||
|
instance = module; |
||||
|
$dimmer |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module'); |
||||
|
$module |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
|
||||
|
click: function(event) { |
||||
|
module.verbose('Determining if event occured on dimmer', event); |
||||
|
if( $dimmer.find(event.target).size() === 0 || $(event.target).is(selector.content) ) { |
||||
|
module.hide(); |
||||
|
event.stopImmediatePropagation(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
create: function() { |
||||
|
$dimmer = settings.template.dimmer(); |
||||
|
$dimmer |
||||
|
.appendTo($module) |
||||
|
; |
||||
|
if(module.is.page()) { |
||||
|
module.set.pageDimmer(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
animate: { |
||||
|
show: function(callback) { |
||||
|
callback = callback || function(){}; |
||||
|
module.set.dimmed(); |
||||
|
if($.fn.transition !== undefined) { |
||||
|
$dimmer |
||||
|
.transition(settings.transition + ' in', settings.duration, function() { |
||||
|
module.set.active(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
module.verbose('Showing dimmer animation with javascript'); |
||||
|
$dimmer |
||||
|
.stop() |
||||
|
.css({ |
||||
|
opacity : 0, |
||||
|
width : '100%', |
||||
|
height : '100%' |
||||
|
}) |
||||
|
.fadeTo(settings.duration, 1, function() { |
||||
|
$dimmer.removeAttr('style'); |
||||
|
module.set.active(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
hide: function(callback) { |
||||
|
callback = callback || function(){}; |
||||
|
module.remove.dimmed(); |
||||
|
if($.fn.transition !== undefined) { |
||||
|
module.verbose('Hiding dimmer with css'); |
||||
|
$dimmer |
||||
|
.transition(settings.transition + ' out', settings.duration, function() { |
||||
|
module.remove.active(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
module.verbose('Hiding dimmer with javascript'); |
||||
|
$dimmer |
||||
|
.stop() |
||||
|
.fadeOut(settings.duration, function() { |
||||
|
$dimmer.removeAttr('style'); |
||||
|
module.remove.active(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
has: { |
||||
|
dimmer: function() { |
||||
|
return ( $module.children(selector.dimmer).size() > 0 ); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
active: function() { |
||||
|
return $dimmer.hasClass(className.active); |
||||
|
}, |
||||
|
animating: function() { |
||||
|
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.transition) ); |
||||
|
}, |
||||
|
dimmer: function() { |
||||
|
return $module.is(selector.dimmer); |
||||
|
}, |
||||
|
page: function () { |
||||
|
return $module.is('body'); |
||||
|
}, |
||||
|
dimmable: function() { |
||||
|
return $module.is(selector.dimmable); |
||||
|
}, |
||||
|
enabled: function() { |
||||
|
return !$module.hasClass(className.disabled); |
||||
|
}, |
||||
|
disabled: function() { |
||||
|
return $module.hasClass(className.disabled); |
||||
|
}, |
||||
|
pageDimmer: function() { |
||||
|
return $dimmer.hasClass(className.pageDimmer); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
show: function() { |
||||
|
return !$dimmer.hasClass(className.disabled); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
active: function() { |
||||
|
$dimmer |
||||
|
.removeClass(className.transition) |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
}, |
||||
|
dimmable: function() { |
||||
|
$module |
||||
|
.addClass(className.dimmable) |
||||
|
; |
||||
|
}, |
||||
|
dimmed: function() { |
||||
|
$module.addClass(className.dimmed); |
||||
|
}, |
||||
|
pageDimmer: function() { |
||||
|
$dimmer.addClass(className.pageDimmer); |
||||
|
}, |
||||
|
disabled: function() { |
||||
|
$dimmer.addClass(className.disabled); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
remove: { |
||||
|
active: function() { |
||||
|
$dimmer |
||||
|
.removeClass(className.transition) |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
}, |
||||
|
dimmed: function() { |
||||
|
$module.removeClass(className.dimmed); |
||||
|
}, |
||||
|
disabled: function() { |
||||
|
$dimmer.removeClass(className.disabled); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
show: function(callback) { |
||||
|
module.debug('Showing dimmer', $dimmer); |
||||
|
if( !(module.is.active() || module.is.animating() ) && module.is.enabled() ) { |
||||
|
module.animate.show(callback); |
||||
|
$.proxy(settings.onShow, element)(); |
||||
|
$.proxy(settings.onChange, element)(); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Dimmer is already shown or disabled'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
hide: function(callback) { |
||||
|
if( module.is.active() && !module.is.animating() ) { |
||||
|
module.debug('Hiding dimmer', $dimmer); |
||||
|
module.animate.hide(callback); |
||||
|
$.proxy(settings.onHide, element)(); |
||||
|
$.proxy(settings.onChange, element)(); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Dimmer is not visible'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
toggle: function() { |
||||
|
module.verbose('Toggling dimmer visibility', $dimmer); |
||||
|
if( !module.is.active() ) { |
||||
|
module.show(); |
||||
|
} |
||||
|
else { |
||||
|
module.hide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.dimmer.settings = { |
||||
|
|
||||
|
name : 'Dimmer', |
||||
|
namespace : 'dimmer', |
||||
|
|
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
|
||||
|
transition : 'fade', |
||||
|
|
||||
|
on : false, |
||||
|
closable : true, |
||||
|
duration : 500, |
||||
|
|
||||
|
onChange : function(){}, |
||||
|
onShow : function(){}, |
||||
|
onHide : function(){}, |
||||
|
|
||||
|
error : { |
||||
|
method : 'The method you called is not defined.' |
||||
|
}, |
||||
|
|
||||
|
selector: { |
||||
|
dimmable : '.ui.dimmable', |
||||
|
dimmer : '.ui.dimmer', |
||||
|
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' |
||||
|
}, |
||||
|
|
||||
|
template: { |
||||
|
dimmer: function() { |
||||
|
return $('<div />').attr('class', 'ui dimmer'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
active : 'active', |
||||
|
dimmable : 'ui dimmable', |
||||
|
dimmed : 'dimmed', |
||||
|
disabled : 'disabled', |
||||
|
pageDimmer : 'page', |
||||
|
hide : 'hide', |
||||
|
show : 'show', |
||||
|
transition : 'transition' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,230 @@ |
|||||
|
/* |
||||
|
* # Semantic Dimmer |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Dimmer |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.dimmable { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.ui.dimmer { |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
top: 0em !important; |
||||
|
left: 0em !important; |
||||
|
|
||||
|
width: 0%; |
||||
|
height: 0%; |
||||
|
|
||||
|
text-align: center; |
||||
|
vertical-align: middle; |
||||
|
|
||||
|
background-color: rgba(0, 0, 0, 0.85); |
||||
|
opacity: 0; |
||||
|
line-height: 1; |
||||
|
|
||||
|
-webkit-animation-fill-mode: both; |
||||
|
-moz-animation-fill-mode: both; |
||||
|
-o-animation-fill-mode: both; |
||||
|
-ms-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
|
||||
|
-webkit-animation-duration: 0.5s; |
||||
|
-moz-animation-duration: 0.5s; |
||||
|
-o-animation-duration: 0.5s; |
||||
|
-ms-animation-duration: 0.5s; |
||||
|
animation-duration: 0.5s; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
background-color 0.5s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
background-color 0.5s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
background-color 0.5s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
background-color 0.5s linear |
||||
|
; |
||||
|
transition: |
||||
|
background-color 0.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.dimmed.dimmable > :not(.dimmer) { |
||||
|
-webkit-transition: |
||||
|
filter 0.5s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
filter 0.5s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
filter 0.5s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
filter 0.5s ease |
||||
|
; |
||||
|
transition: |
||||
|
filter 0.5s ease |
||||
|
; |
||||
|
} |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/* Dimmer Content */; |
||||
|
.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 > div { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Loose Coupling */ |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
/* |
||||
|
.ui.dimmed.dimmable > :not(.dimmer) { |
||||
|
-webkit-filter: ~"blur(5px) grayscale(0.7)"; |
||||
|
-moz-filter: ~"blur(5px) grayscale(0.7)"; |
||||
|
} |
||||
|
*/ |
||||
|
.ui.dimmed.dimmable > .ui.dimmer, |
||||
|
.ui.active.dimmer { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.ui.disabled.dimmer { |
||||
|
width: 0em !important; |
||||
|
height: 0em !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Page |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.page.dimmer { |
||||
|
position: fixed; |
||||
|
|
||||
|
-webkit-perspective: 2000px; |
||||
|
-moz-perspective: 2000px; |
||||
|
perspective: 2000px; |
||||
|
|
||||
|
-webkit-transform-origin: top center; |
||||
|
-moz-transform-origin: top center; |
||||
|
-o-transform-origin: top center; |
||||
|
-ms-transform-origin: top center; |
||||
|
transform-origin: top center; |
||||
|
} |
||||
|
/* |
||||
|
body.ui.dimmed.dimmable > :not(.dimmer){ |
||||
|
-webkit-filter: ~"blur(15px) grayscale(0.7)"; |
||||
|
-moz-filter: ~"blur(15px) grayscale(0.7)"; |
||||
|
} |
||||
|
*/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Aligned |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.dimmer > .top.aligned.content > * { |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.ui.dimmer > .bottom.aligned.content > * { |
||||
|
vertical-align: bottom; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Inverted |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.inverted.dimmer { |
||||
|
background-color: rgba(255, 255, 255, 0.85); |
||||
|
} |
||||
|
.ui.inverted.dimmer > .content > * { |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Simple |
||||
|
---------------*/ |
||||
|
/* Displays without javascript */ |
||||
|
|
||||
|
.ui.simple.dimmer { |
||||
|
display: block; |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
z-index: -100; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
} |
||||
|
.ui.dimmed.dimmable > .ui.simple.dimmer { |
||||
|
overflow: visible; |
||||
|
opacity: 1; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0.85); |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.ui.simple.inverted.dimmer { |
||||
|
background-color: rgba(255, 255, 255, 0); |
||||
|
} |
||||
|
.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { |
||||
|
background-color: rgba(255, 255, 255, 0.85) |
||||
|
} |
||||
@ -0,0 +1,707 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic dropdown: Dropdown |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit May 25, 2013 |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.dropdown = function(parameters) { |
||||
|
var |
||||
|
$allDropdowns = $(this), |
||||
|
$document = $(document), |
||||
|
|
||||
|
settings = ( $.isPlainObject(parameters) ) |
||||
|
? $.extend(true, {}, $.fn.dropdown.settings, parameters) |
||||
|
: $.fn.dropdown.settings, |
||||
|
|
||||
|
className = settings.className, |
||||
|
metadata = settings.metadata, |
||||
|
namespace = settings.namespace, |
||||
|
selector = settings.selector, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
dropdownNamespace = 'module-' + namespace, |
||||
|
dropdownSelector = $allDropdowns.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allDropdowns |
||||
|
.each(function() { |
||||
|
var |
||||
|
$dropdown = $(this), |
||||
|
$item = $dropdown.find(selector.item), |
||||
|
$text = $dropdown.find(selector.text), |
||||
|
$input = $dropdown.find(selector.input), |
||||
|
|
||||
|
$menu = $dropdown.children(selector.menu), |
||||
|
|
||||
|
isTouchDevice = ('ontouchstart' in document.documentElement), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $dropdown.data(dropdownNamespace), |
||||
|
dropdown |
||||
|
; |
||||
|
|
||||
|
dropdown = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
dropdown.debug('Initializing dropdown', settings); |
||||
|
if(isTouchDevice) { |
||||
|
$dropdown |
||||
|
.on('touchstart' + eventNamespace, dropdown.event.test.toggle) |
||||
|
; |
||||
|
} |
||||
|
else if(settings.on == 'click') { |
||||
|
$dropdown |
||||
|
.on('click' + eventNamespace, dropdown.event.test.toggle) |
||||
|
; |
||||
|
} |
||||
|
else if(settings.on == 'hover') { |
||||
|
$dropdown |
||||
|
.on('mouseenter' + eventNamespace, dropdown.delay.show) |
||||
|
.on('mouseleave' + eventNamespace, dropdown.delay.hide) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$dropdown |
||||
|
.on(settings.on + eventNamespace, dropdown.toggle) |
||||
|
; |
||||
|
} |
||||
|
if(settings.action == 'form') { |
||||
|
dropdown.set.selected(); |
||||
|
} |
||||
|
$item |
||||
|
.on('mouseenter' + eventNamespace, dropdown.event.item.mouseenter) |
||||
|
.on('mouseleave' + eventNamespace, dropdown.event.item.mouseleave) |
||||
|
.on(dropdown.get.selectEvent() + eventNamespace, dropdown.event.item.click) |
||||
|
; |
||||
|
dropdown.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
dropdown.verbose('Storing instance of dropdown', dropdown); |
||||
|
$dropdown |
||||
|
.data(dropdownNamespace, dropdown) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
dropdown.verbose('Destroying previous dropdown for', $dropdown); |
||||
|
$item |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
$dropdown |
||||
|
.off(eventNamespace) |
||||
|
.removeData(dropdownNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
|
||||
|
stopPropagation: function(event) { |
||||
|
event.stopPropagation(); |
||||
|
}, |
||||
|
|
||||
|
test: { |
||||
|
toggle: function(event) { |
||||
|
dropdown.determine.intent(event, dropdown.toggle); |
||||
|
event.stopImmediatePropagation(); |
||||
|
}, |
||||
|
hide: function(event) { |
||||
|
dropdown.determine.intent(event, dropdown.hide); |
||||
|
event.stopPropagation(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
item: { |
||||
|
|
||||
|
mouseenter: function(event) { |
||||
|
var |
||||
|
$currentMenu = $(this).find(selector.menu), |
||||
|
$otherMenus = $(this).siblings(selector.item).children(selector.menu) |
||||
|
; |
||||
|
if( $currentMenu.size() > 0 ) { |
||||
|
clearTimeout(dropdown.itemTimer); |
||||
|
dropdown.itemTimer = setTimeout(function() { |
||||
|
dropdown.animate.hide(false, $otherMenus); |
||||
|
dropdown.verbose('Showing sub-menu', $currentMenu); |
||||
|
dropdown.animate.show(false, $currentMenu); |
||||
|
}, settings.delay.show * 2); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mouseleave: function(event) { |
||||
|
var |
||||
|
$currentMenu = $(this).find(selector.menu) |
||||
|
; |
||||
|
if($currentMenu.size() > 0) { |
||||
|
clearTimeout(dropdown.itemTimer); |
||||
|
dropdown.itemTimer = setTimeout(function() { |
||||
|
dropdown.verbose('Hiding sub-menu', $currentMenu); |
||||
|
dropdown.animate.hide(false, $currentMenu); |
||||
|
}, settings.delay.hide); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
click: function (event) { |
||||
|
var |
||||
|
$choice = $(this), |
||||
|
text = $choice.data(metadata.text) || $choice.text(), |
||||
|
value = $choice.data(metadata.value) || text |
||||
|
; |
||||
|
if( $choice.find(selector.menu).size() === 0 ) { |
||||
|
dropdown.verbose('Adding active state to selected item'); |
||||
|
$item |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$choice |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
dropdown.determine.selectAction(text, value); |
||||
|
$.proxy(settings.onChange, element)(value, text); |
||||
|
event.stopPropagation(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
resetStyle: function() { |
||||
|
$(this).removeAttr('style'); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
determine: { |
||||
|
selectAction: function(text, value) { |
||||
|
dropdown.verbose('Determining action', settings.action); |
||||
|
if( $.isFunction( dropdown[settings.action] ) ) { |
||||
|
dropdown.verbose('Triggering preset action', settings.action); |
||||
|
dropdown[ settings.action ](text, value); |
||||
|
} |
||||
|
else if( $.isFunction(settings.action) ) { |
||||
|
dropdown.verbose('Triggering user action', settings.action); |
||||
|
settings.action(text, value); |
||||
|
} |
||||
|
else { |
||||
|
dropdown.error(error.action); |
||||
|
} |
||||
|
}, |
||||
|
intent: function(event, callback) { |
||||
|
dropdown.debug('Determining whether event occurred in dropdown', event.target); |
||||
|
callback = callback || function(){}; |
||||
|
if( $(event.target).closest($menu).size() === 0 ) { |
||||
|
dropdown.verbose('Triggering event', callback); |
||||
|
callback(); |
||||
|
} |
||||
|
else { |
||||
|
dropdown.verbose('Event occurred in dropdown, canceling callback'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
bind: { |
||||
|
intent: function() { |
||||
|
dropdown.verbose('Binding hide intent event to document'); |
||||
|
$document |
||||
|
.on(dropdown.get.selectEvent(), dropdown.event.test.hide) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
unbind: { |
||||
|
intent: function() { |
||||
|
dropdown.verbose('Removing hide intent event from document'); |
||||
|
$document |
||||
|
.off(dropdown.get.selectEvent()) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
nothing: function() {}, |
||||
|
|
||||
|
changeText: function(text, value) { |
||||
|
dropdown.set.text(text); |
||||
|
dropdown.hide(); |
||||
|
}, |
||||
|
|
||||
|
updateForm: function(text, value) { |
||||
|
dropdown.set.text(text); |
||||
|
dropdown.set.value(value); |
||||
|
dropdown.hide(); |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
selectEvent: function() { |
||||
|
return (isTouchDevice) |
||||
|
? 'touchstart' |
||||
|
: 'click' |
||||
|
; |
||||
|
}, |
||||
|
text: function() { |
||||
|
return $text.text(); |
||||
|
}, |
||||
|
value: function() { |
||||
|
return $input.val(); |
||||
|
}, |
||||
|
item: function(value) { |
||||
|
var |
||||
|
$selectedItem |
||||
|
; |
||||
|
value = value || $input.val(); |
||||
|
$item |
||||
|
.each(function() { |
||||
|
if( $(this).data(metadata.value) == value ) { |
||||
|
$selectedItem = $(this); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return $selectedItem || false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
text: function(text) { |
||||
|
dropdown.debug('Changing text', text, $text); |
||||
|
$text.removeClass(className.placeholder); |
||||
|
$text.text(text); |
||||
|
}, |
||||
|
value: function(value) { |
||||
|
dropdown.debug('Adding selected value to hidden input', value, $input); |
||||
|
$input.val(value); |
||||
|
}, |
||||
|
active: function() { |
||||
|
$dropdown.addClass(className.active); |
||||
|
}, |
||||
|
visible: function() { |
||||
|
$dropdown.addClass(className.visible); |
||||
|
}, |
||||
|
selected: function(value) { |
||||
|
var |
||||
|
$selectedItem = dropdown.get.item(value), |
||||
|
selectedText |
||||
|
; |
||||
|
if($selectedItem) { |
||||
|
dropdown.debug('Setting selected menu item to', $selectedItem); |
||||
|
selectedText = $selectedItem.data(metadata.text) || $selectedItem.text(); |
||||
|
$item |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$selectedItem |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
dropdown.set.text(selectedText); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
remove: { |
||||
|
active: function() { |
||||
|
$dropdown.removeClass(className.active); |
||||
|
}, |
||||
|
visible: function() { |
||||
|
$dropdown.removeClass(className.visible); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
visible: function($subMenu) { |
||||
|
return ($subMenu) |
||||
|
? $subMenu.is(':animated, :visible') |
||||
|
: $menu.is(':animated, :visible') |
||||
|
; |
||||
|
}, |
||||
|
hidden: function($subMenu) { |
||||
|
return ($subMenu) |
||||
|
? $subMenu.is(':not(:animated, :visible)') |
||||
|
: $menu.is(':not(:animated, :visible)') |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
click: function() { |
||||
|
return (isTouchDevice || settings.on == 'click'); |
||||
|
}, |
||||
|
show: function() { |
||||
|
return !$dropdown.hasClass(className.disabled); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
animate: { |
||||
|
show: function(callback, $subMenu) { |
||||
|
var |
||||
|
$currentMenu = $subMenu || $menu |
||||
|
; |
||||
|
callback = callback || function(){}; |
||||
|
if( dropdown.is.hidden($currentMenu) ) { |
||||
|
dropdown.verbose('Doing menu show animation', $currentMenu); |
||||
|
if(settings.transition == 'none') { |
||||
|
callback(); |
||||
|
} |
||||
|
else if($.fn.transition !== undefined) { |
||||
|
$currentMenu.transition({ |
||||
|
animation : settings.transition + ' in', |
||||
|
duration : settings.duration, |
||||
|
complete : callback, |
||||
|
queue : false |
||||
|
}) |
||||
|
} |
||||
|
else if(settings.transition == 'slide down') { |
||||
|
$currentMenu |
||||
|
.hide() |
||||
|
.clearQueue() |
||||
|
.children() |
||||
|
.clearQueue() |
||||
|
.css('opacity', 0) |
||||
|
.delay(50) |
||||
|
.animate({ |
||||
|
opacity : 1 |
||||
|
}, settings.duration, 'easeOutQuad', dropdown.event.resetStyle) |
||||
|
.end() |
||||
|
.slideDown(100, 'easeOutQuad', function() { |
||||
|
$.proxy(dropdown.event.resetStyle, this)(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else if(settings.transition == 'fade') { |
||||
|
$currentMenu |
||||
|
.hide() |
||||
|
.clearQueue() |
||||
|
.fadeIn(settings.duration, function() { |
||||
|
$.proxy(dropdown.event.resetStyle, this)(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
dropdown.error(error.transition); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
hide: function(callback, $subMenu) { |
||||
|
var |
||||
|
$currentMenu = $subMenu || $menu |
||||
|
; |
||||
|
callback = callback || function(){}; |
||||
|
if(dropdown.is.visible($currentMenu) ) { |
||||
|
dropdown.verbose('Doing menu hide animation', $currentMenu); |
||||
|
if($.fn.transition !== undefined) { |
||||
|
$currentMenu.transition({ |
||||
|
animation : settings.transition + ' out', |
||||
|
duration : settings.duration, |
||||
|
complete : callback, |
||||
|
queue : false |
||||
|
}) |
||||
|
} |
||||
|
else if(settings.transition == 'none') { |
||||
|
callback(); |
||||
|
} |
||||
|
else if(settings.transition == 'slide down') { |
||||
|
$currentMenu |
||||
|
.show() |
||||
|
.clearQueue() |
||||
|
.children() |
||||
|
.clearQueue() |
||||
|
.css('opacity', 1) |
||||
|
.animate({ |
||||
|
opacity : 0 |
||||
|
}, 100, 'easeOutQuad', dropdown.event.resetStyle) |
||||
|
.end() |
||||
|
.delay(50) |
||||
|
.slideUp(100, 'easeOutQuad', function() { |
||||
|
$.proxy(dropdown.event.resetStyle, this)(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else if(settings.transition == 'fade') { |
||||
|
$currentMenu |
||||
|
.show() |
||||
|
.clearQueue() |
||||
|
.fadeOut(150, function() { |
||||
|
$.proxy(dropdown.event.resetStyle, this)(); |
||||
|
callback(); |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
dropdown.error(error.transition); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
show: function() { |
||||
|
dropdown.debug('Checking if dropdown can show'); |
||||
|
if( dropdown.is.hidden() ) { |
||||
|
dropdown.hideOthers(); |
||||
|
dropdown.set.active(); |
||||
|
dropdown.animate.show(dropdown.set.visible); |
||||
|
if( dropdown.can.click() ) { |
||||
|
dropdown.bind.intent(); |
||||
|
} |
||||
|
$.proxy(settings.onShow, element)(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
hide: function() { |
||||
|
if( dropdown.is.visible() ) { |
||||
|
dropdown.debug('Hiding dropdown'); |
||||
|
if( dropdown.can.click() ) { |
||||
|
dropdown.unbind.intent(); |
||||
|
} |
||||
|
dropdown.remove.active(); |
||||
|
dropdown.animate.hide(dropdown.remove.visible); |
||||
|
$.proxy(settings.onHide, element)(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
delay: { |
||||
|
show: function() { |
||||
|
dropdown.verbose('Delaying show event to ensure user intent'); |
||||
|
clearTimeout(dropdown.timer); |
||||
|
dropdown.timer = setTimeout(dropdown.show, settings.delay.show); |
||||
|
}, |
||||
|
hide: function() { |
||||
|
dropdown.verbose('Delaying hide event to ensure user intent'); |
||||
|
clearTimeout(dropdown.timer); |
||||
|
dropdown.timer = setTimeout(dropdown.hide, settings.delay.hide); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
hideOthers: function() { |
||||
|
dropdown.verbose('Finding other dropdowns to hide'); |
||||
|
$allDropdowns |
||||
|
.not($dropdown) |
||||
|
.has(selector.menu + ':visible') |
||||
|
.dropdown('hide') |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
toggle: function() { |
||||
|
dropdown.verbose('Toggling menu visibility'); |
||||
|
if( dropdown.is.hidden() ) { |
||||
|
dropdown.show(); |
||||
|
} |
||||
|
else { |
||||
|
dropdown.hide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, dropdown, name); |
||||
|
} |
||||
|
else { |
||||
|
dropdown[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return dropdown[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
dropdown.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
dropdown.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
||||
|
dropdown.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
dropdown.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
dropdown.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
||||
|
dropdown.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
dropdown.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
||||
|
dropdown.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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(dropdown.performance.timer); |
||||
|
dropdown.performance.timer = setTimeout(dropdown.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.name + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
time = false; |
||||
|
clearTimeout(dropdown.performance.timer); |
||||
|
$.each(performance, function(index, data) { |
||||
|
totalTime += data['Execution Time']; |
||||
|
}); |
||||
|
title += ' ' + totalTime + 'ms'; |
||||
|
if(dropdownSelector) { |
||||
|
title += ' \'' + dropdownSelector + '\''; |
||||
|
} |
||||
|
title += ' ' + '(' + $allDropdowns.size() + ')'; |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== undefined) { |
||||
|
query = query.split(/[\. ]/); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
} |
||||
|
else { |
||||
|
dropdown.error(error.method); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
dropdown.initialize(); |
||||
|
} |
||||
|
invokedResponse = dropdown.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
dropdown.destroy(); |
||||
|
} |
||||
|
dropdown.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.dropdown.settings = { |
||||
|
|
||||
|
name : 'Dropdown', |
||||
|
namespace : 'dropdown', |
||||
|
|
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
|
||||
|
on : 'click', |
||||
|
action : 'hide', |
||||
|
|
||||
|
delay: { |
||||
|
show: 200, |
||||
|
hide: 300 |
||||
|
}, |
||||
|
|
||||
|
transition : 'slide down', |
||||
|
duration : 250, |
||||
|
|
||||
|
onChange : function(){}, |
||||
|
onShow : function(){}, |
||||
|
onHide : function(){}, |
||||
|
|
||||
|
error : { |
||||
|
action : 'You called a dropdown action that was not defined', |
||||
|
method : 'The method you called is not defined.', |
||||
|
transition : 'The requested transition was not found' |
||||
|
}, |
||||
|
|
||||
|
metadata: { |
||||
|
text : 'text', |
||||
|
value : 'value' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
menu : '.menu', |
||||
|
item : '.menu > .item', |
||||
|
text : '> .text', |
||||
|
input : '> input[type="hidden"]' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
active : 'active', |
||||
|
placeholder : 'default', |
||||
|
disabled : 'disabled', |
||||
|
visible : 'visible' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,510 @@ |
|||||
|
/* |
||||
|
* # Semantic Dropdown |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Dropdown |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.dropdown { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
|
||||
|
line-height: 1; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
border-radius 0.1s ease, |
||||
|
width 0.2s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
border-radius 0.1s ease, |
||||
|
width 0.2s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
border-radius 0.1s ease, |
||||
|
width 0.2s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
border-radius 0.1s ease, |
||||
|
width 0.2s ease |
||||
|
; |
||||
|
transition: |
||||
|
border-radius 0.1s ease, |
||||
|
width 0.2s ease |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
.ui.dropdown .menu { |
||||
|
position: absolute; |
||||
|
display: none; |
||||
|
top: 100%; |
||||
|
|
||||
|
margin: 0em; |
||||
|
background-color: #FFFFFF; |
||||
|
min-width: 100%; |
||||
|
|
||||
|
white-space: nowrap; |
||||
|
font-size: 0.875em; |
||||
|
text-shadow: none; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
-moz-border-radius: 0px 0px 0.325em 0.325em; |
||||
|
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
||||
|
border-radius: 0px 0px 0.325em 0.325em; |
||||
|
|
||||
|
-webkit-transition: opacity 0.2s ease; |
||||
|
-moz-transition: opacity 0.2s ease; |
||||
|
-o-transition: opacity 0.2s ease; |
||||
|
-ms-transition: opacity 0.2s ease; |
||||
|
transition: opacity 0.2s ease; |
||||
|
z-index: 11; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown Icon */ |
||||
|
.ui.dropdown > .dropdown.icon { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown Text */ |
||||
|
.ui.dropdown > .text { |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
|
||||
|
-webkit-transition: color 0.2s ease; |
||||
|
-moz-transition: color 0.2s ease; |
||||
|
-o-transition: color 0.2s ease; |
||||
|
-ms-transition: color 0.2s ease; |
||||
|
transition: color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
/* Flyout Direction */ |
||||
|
.ui.dropdown .menu { |
||||
|
left: 0px; |
||||
|
} |
||||
|
.ui.menu .dropdown:last-child .menu, |
||||
|
.ui > .ui.dropdown:last-child .menu { |
||||
|
left: auto; |
||||
|
right: 0px; |
||||
|
} |
||||
|
|
||||
|
/* Sub Menu Position */ |
||||
|
.ui.dropdown .menu .menu { |
||||
|
top: 0% !important; |
||||
|
left: 100% !important; |
||||
|
margin: 0em !important; |
||||
|
border-radius: 0 0.325em 0.325em 0em !important; |
||||
|
} |
||||
|
.ui.dropdown .menu .menu:after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.ui.dropdown .menu .item { |
||||
|
cursor: pointer; |
||||
|
border: none; |
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
height: auto; |
||||
|
|
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
|
||||
|
font-size: 0.875em; |
||||
|
display: block; |
||||
|
color: rgba(0, 0, 0, 0.75); |
||||
|
|
||||
|
padding: 0.85em 1em !important; |
||||
|
font-size: 0.875rem; |
||||
|
text-transform: none; |
||||
|
font-weight: normal; |
||||
|
text-align: left; |
||||
|
|
||||
|
-webkit-touch-callout: none; |
||||
|
} |
||||
|
.ui.dropdown .menu .item:before { |
||||
|
display: none; |
||||
|
} |
||||
|
.ui.dropdown .menu .item .icon { |
||||
|
margin-right: 0.75em; |
||||
|
} |
||||
|
|
||||
|
.ui.dropdown .menu .item:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Dropdown Visible */ |
||||
|
.ui.visible.dropdown { |
||||
|
border-bottom-left-radius: 0em !important; |
||||
|
border-bottom-right-radius: 0em !important; |
||||
|
} |
||||
|
.ui.visible.dropdown > .menu { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/* Menu Item Hover */ |
||||
|
.ui.dropdown .menu .item:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.02); |
||||
|
z-index: 12; |
||||
|
} |
||||
|
|
||||
|
/* Menu Item Active */ |
||||
|
.ui.dropdown .menu .active.item { |
||||
|
box-shadow: none; |
||||
|
background-color: rgba(0, 0, 0, 0.04); |
||||
|
border-left: none; |
||||
|
|
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-shadow: none; |
||||
|
box-shadow: none; |
||||
|
z-index: 12; |
||||
|
} |
||||
|
|
||||
|
/* Default Text */ |
||||
|
.ui.dropdown > .default.text, |
||||
|
.ui.default.dropdown > .text { |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
.ui.dropdown:hover > .default.text, |
||||
|
.ui.default.dropdown:hover > .text { |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Simple |
||||
|
---------------*/ |
||||
|
/* Displays without javascript */ |
||||
|
|
||||
|
.ui.simple.dropdown .menu:before, |
||||
|
.ui.simple.dropdown .menu:after { |
||||
|
display: none; |
||||
|
} |
||||
|
.ui.simple.dropdown .menu { |
||||
|
display: block; |
||||
|
overflow: hidden; |
||||
|
top: -9999px !important; |
||||
|
position: absolute; |
||||
|
opacity: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
-webkit-transition: opacity 0.2s ease-out; |
||||
|
-moz-transition: opacity 0.2s ease-out; |
||||
|
-o-transition: opacity 0.2s ease-out; |
||||
|
-ms-transition: opacity 0.2s ease-out; |
||||
|
transition: opacity 0.2s ease-out; |
||||
|
} |
||||
|
|
||||
|
.ui.simple.active.dropdown, |
||||
|
.ui.simple.dropdown:hover { |
||||
|
border-bottom-left-radius: 0em !important; |
||||
|
border-bottom-right-radius: 0em !important; |
||||
|
} |
||||
|
|
||||
|
.ui.simple.active.dropdown > .menu, |
||||
|
.ui.simple.dropdown:hover > .menu { |
||||
|
overflow: visible; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
top: 100% !important; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.ui.simple.dropdown > .menu .item:active > .menu, |
||||
|
.ui.simple.dropdown:hover > .menu .item:hover > .menu { |
||||
|
overflow: visible; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
top: 0% !important; |
||||
|
left: 100% !important; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.ui.simple.disabled.dropdown:hover .menu { |
||||
|
display: none; |
||||
|
height: 0px; |
||||
|
width: 0px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Selection |
||||
|
---------------*/ |
||||
|
/* Displays like a select box */ |
||||
|
|
||||
|
.ui.selection.dropdown { |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
padding: 0.5em 1em; |
||||
|
|
||||
|
line-height: 1.33; |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
-webkit-border-radius: 0.3125em !important; |
||||
|
-moz-border-radius: 0.3125em !important; |
||||
|
border-radius: 0.3125em !important; |
||||
|
} |
||||
|
.ui.selection.dropdown > .dropdown.icon { |
||||
|
float: right; |
||||
|
|
||||
|
opacity: 0.7; |
||||
|
margin: 0.2em 0em 0.2em 1.25em; |
||||
|
|
||||
|
-webkit-transition: opacity 0.2s ease-out; |
||||
|
-moz-transition: opacity 0.2s ease-out; |
||||
|
-o-transition: opacity 0.2s ease-out; |
||||
|
-ms-transition: opacity 0.2s ease-out; |
||||
|
transition: opacity 0.2s ease-out; |
||||
|
} |
||||
|
|
||||
|
.ui.selection.dropdown, |
||||
|
.ui.selection.dropdown .menu { |
||||
|
top: 100%; |
||||
|
-webkit-transition: box-shadow 0.2s ease-out; |
||||
|
-moz-transition: box-shadow 0.2s ease-out; |
||||
|
-o-transition: box-shadow 0.2s ease-out; |
||||
|
-ms-transition: box-shadow 0.2s ease-out; |
||||
|
transition: box-shadow 0.2s ease-out; |
||||
|
} |
||||
|
|
||||
|
.ui.selection.dropdown .menu { |
||||
|
max-height: 312px; |
||||
|
|
||||
|
overflow-x: hidden; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 1px 0px 1px #EEEEEE; |
||||
|
-moz-box-shadow: 0px 1px 0px 1px #EEEEEE; |
||||
|
box-shadow: 0px 1px 0px 1px #EEEEEE; |
||||
|
|
||||
|
-moz-border-radius: 0px 0px 0.325em 0.325em; |
||||
|
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
||||
|
border-radius: 0px 0px 0.325em 0.325em; |
||||
|
} |
||||
|
.ui.selection.dropdown .menu:after, |
||||
|
.ui.selection.dropdown .menu:before { |
||||
|
display: none; |
||||
|
} |
||||
|
.ui.selection.dropdown .menu img { |
||||
|
height: 2.5em; |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* Hover */ |
||||
|
.ui.selection.dropdown:hover, |
||||
|
.ui.selection.dropdown.hover { |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
.ui.selection.dropdown:hover > .dropdown.icon { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/* Visible */ |
||||
|
.ui.selection.active.dropdown { |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; |
||||
|
|
||||
|
-webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; |
||||
|
-moz-border-radius: 0.3125em 0.3125em 0em 0em !important; |
||||
|
border-radius: 0.3125em 0.3125em 0em 0em !important; |
||||
|
} |
||||
|
.ui.selection.active.dropdown > .dropdown.icon { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.ui.selection.active.dropdown .menu { |
||||
|
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; |
||||
|
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3; |
||||
|
box-shadow: 0px 1px 0px 1px #D3D3D3; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Fluid |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.fluid.dropdown { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Inline |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.inline.dropdown { |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
color: inherit; |
||||
|
} |
||||
|
.ui.inline.dropdown .dropdown.icon { |
||||
|
margin: 0em 0.5em 0em 0.25em; |
||||
|
} |
||||
|
.ui.inline.dropdown .text { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.ui.inline.dropdown .menu { |
||||
|
cursor: auto; |
||||
|
margin-top: 0.25em; |
||||
|
|
||||
|
-webkit-border-radius: 0.325em; |
||||
|
-moz-border-radius: 0.325em; |
||||
|
border-radius: 0.325em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Floating |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.floating.dropdown .menu { |
||||
|
left: 0; |
||||
|
right: auto; |
||||
|
|
||||
|
margin-top: 0.5em; |
||||
|
|
||||
|
-webkit-border-radius: 0.325em; |
||||
|
-moz-border-radius: 0.325em; |
||||
|
border-radius: 0.325em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Pointing |
||||
|
---------------*/ |
||||
|
|
||||
|
|
||||
|
.ui.pointing.dropdown .menu { |
||||
|
top: 100%; |
||||
|
margin-top: 0.75em; |
||||
|
-moz-border-radius: 0.325em; |
||||
|
-webkit-border-radius: 0.325em; |
||||
|
border-radius: 0.325em; |
||||
|
} |
||||
|
|
||||
|
.ui.pointing.dropdown .menu:after { |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
pointer-events: none; |
||||
|
content: " "; |
||||
|
visibility: visible; |
||||
|
|
||||
|
width: 0.5em; |
||||
|
height: 0.5em; |
||||
|
|
||||
|
-moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
||||
|
-webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
||||
|
box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
||||
|
|
||||
|
background-image: none; |
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
-webkit-transform: rotate(45deg); |
||||
|
-moz-transform: rotate(45deg); |
||||
|
transform: rotate(45deg); |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.ui.pointing.dropdown .menu .item.active:first-child { |
||||
|
background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
||||
|
background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
||||
|
background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
||||
|
background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
||||
|
background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
||||
|
} |
||||
|
|
||||
|
/* Directions */ |
||||
|
|
||||
|
.ui.pointing.dropdown .menu:after { |
||||
|
top: -0.25em; |
||||
|
left: 50%; |
||||
|
margin: 0em 0em 0em -0.25em; |
||||
|
} |
||||
|
.ui.top.left.pointing.dropdown .menu { |
||||
|
top: 100%; |
||||
|
bottom: auto; |
||||
|
left: 0%; |
||||
|
right: auto; |
||||
|
margin: 0.75em 0em 0em; |
||||
|
} |
||||
|
.ui.top.left.pointing.dropdown .menu:after { |
||||
|
top: -0.25em; |
||||
|
left: 1.25em; |
||||
|
right: auto; |
||||
|
margin: 0em; |
||||
|
-webkit-transform: rotate(45deg); |
||||
|
-moz-transform: rotate(45deg); |
||||
|
transform: rotate(45deg); |
||||
|
} |
||||
|
.ui.top.right.pointing.dropdown .menu { |
||||
|
top: 100%; |
||||
|
bottom: auto; |
||||
|
right: 0%; |
||||
|
left: auto; |
||||
|
margin: 0.75em 0em 0em; |
||||
|
} |
||||
|
.ui.top.right.pointing.dropdown .menu:after { |
||||
|
top: -0.25em; |
||||
|
left: auto; |
||||
|
right: 1.25em; |
||||
|
margin: 0em; |
||||
|
-webkit-transform: rotate(45deg); |
||||
|
-moz-transform: rotate(45deg); |
||||
|
transform: rotate(45deg); |
||||
|
} |
||||
|
|
||||
|
.ui.left.pointing.dropdown .menu { |
||||
|
top: 0%; |
||||
|
left: 100%; |
||||
|
right: auto; |
||||
|
margin: 0em 0em 0em 0.75em; |
||||
|
} |
||||
|
.ui.left.pointing.dropdown .menu:after { |
||||
|
top: 1em; |
||||
|
left: -0.25em; |
||||
|
margin: 0em 0em 0em 0em; |
||||
|
|
||||
|
-webkit-transform: rotate(-45deg); |
||||
|
-moz-transform: rotate(-45deg); |
||||
|
transform: rotate(-45deg); |
||||
|
} |
||||
|
|
||||
|
.ui.right.pointing.dropdown .menu { |
||||
|
top: 0%; |
||||
|
left: auto; |
||||
|
right: 100%; |
||||
|
margin: 0em 0.75em 0em 0em; |
||||
|
} |
||||
|
.ui.right.pointing.dropdown .menu:after { |
||||
|
top: 1em; |
||||
|
left: auto; |
||||
|
right: -0.25em; |
||||
|
margin: 0em 0em 0em 0em; |
||||
|
|
||||
|
-webkit-transform: rotate(135deg); |
||||
|
-moz-transform: rotate(135deg); |
||||
|
transform: rotate(135deg); |
||||
|
} |
||||
@ -0,0 +1,478 @@ |
|||||
|
/* ****************************** |
||||
|
Modal |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit May 14, 2012 |
||||
|
|
||||
|
Manages modal state and |
||||
|
stage dimming |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.modal = function(parameters) { |
||||
|
var |
||||
|
$allModals = $(this), |
||||
|
$document = $(document), |
||||
|
|
||||
|
settings = ( $.isPlainObject(parameters) ) |
||||
|
? $.extend(true, {}, $.fn.modal.settings, parameters) |
||||
|
: $.fn.modal.settings, |
||||
|
|
||||
|
selector = settings.selector, |
||||
|
className = settings.className, |
||||
|
namespace = settings.namespace, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
moduleSelector = $allModals.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
|
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModals |
||||
|
.each(function() { |
||||
|
var |
||||
|
$modal = $(this), |
||||
|
$context = $(settings.context), |
||||
|
$otherModals = $allModals.not($modal), |
||||
|
$closeButton = $modal.find(selector.closeButton), |
||||
|
|
||||
|
$dimmer, |
||||
|
|
||||
|
element = this, |
||||
|
instance = $modal.data(moduleNamespace), |
||||
|
modal |
||||
|
; |
||||
|
|
||||
|
modal = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
modal.verbose('Attaching events'); |
||||
|
$closeButton |
||||
|
.on('click', modal.event.close) |
||||
|
; |
||||
|
modal.cache.sizes(); |
||||
|
|
||||
|
modal.verbose('Creating dimmer'); |
||||
|
$context |
||||
|
.dimmer({ |
||||
|
closable: settings.closable, |
||||
|
duration: settings.duration, |
||||
|
onShow: function() { |
||||
|
modal.add.keyboardShortcuts(); |
||||
|
$.proxy(settings.onShow, this)(); |
||||
|
}, |
||||
|
onHide: function() { |
||||
|
if($modal.is(':visible')) { |
||||
|
$context.off('.dimmer'); |
||||
|
modal.hide(); |
||||
|
$.proxy(settings.onHide, this)(); |
||||
|
} |
||||
|
modal.remove.keyboardShortcuts(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
$dimmer = $context.children(selector.dimmer); |
||||
|
if( $modal.parent()[0] !== $dimmer[0] ) { |
||||
|
modal.debug('Moving element inside dimmer', $context); |
||||
|
$modal = $modal |
||||
|
.detach() |
||||
|
.appendTo($dimmer) |
||||
|
; |
||||
|
} |
||||
|
modal.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
modal.verbose('Storing instance of modal'); |
||||
|
instance = modal; |
||||
|
$modal |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
modal.verbose('Destroying previous modal'); |
||||
|
$modal |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
close: function() { |
||||
|
modal.verbose('Close button pressed'); |
||||
|
$context.dimmer('hide'); |
||||
|
}, |
||||
|
keyboard: function(event) { |
||||
|
var |
||||
|
keyCode = event.which, |
||||
|
escapeKey = 27 |
||||
|
; |
||||
|
if(keyCode == escapeKey) { |
||||
|
modal.debug('Escape key pressed hiding modal'); |
||||
|
$context.dimmer('hide'); |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
}, |
||||
|
resize: function() { |
||||
|
modal.cache.sizes(); |
||||
|
if( $modal.is(':visible') ) { |
||||
|
modal.set.type(); |
||||
|
modal.set.position(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
toggle: function() { |
||||
|
if( modal.is.active() ) { |
||||
|
modal.hide(); |
||||
|
} |
||||
|
else { |
||||
|
modal.show(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
show: function() { |
||||
|
modal.debug('Showing modal'); |
||||
|
modal.set.type(); |
||||
|
modal.set.position(); |
||||
|
modal.hideAll(); |
||||
|
if(settings.transition && $.fn.transition !== undefined) { |
||||
|
$modal |
||||
|
.transition(settings.transition + ' in', settings.duration, modal.set.active) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$modal |
||||
|
.fadeIn(settings.duration, settings.easing, modal.set.active) |
||||
|
; |
||||
|
} |
||||
|
modal.debug('Triggering dimmer'); |
||||
|
$context.dimmer('show'); |
||||
|
}, |
||||
|
|
||||
|
hide: function() { |
||||
|
modal.debug('Hiding modal'); |
||||
|
// remove keyboard detection
|
||||
|
$document |
||||
|
.off('keyup.' + namespace) |
||||
|
; |
||||
|
if(settings.transition && $.fn.transition !== undefined) { |
||||
|
$modal |
||||
|
.transition(settings.transition + ' out', settings.duration, modal.remove.active) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$modal |
||||
|
.fadeOut(settings.duration, settings.easing, modal.remove.active) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
hideAll: function() { |
||||
|
$otherModals |
||||
|
.filter(':visible') |
||||
|
.modal('hide') |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
add: { |
||||
|
keyboardShortcuts: function() { |
||||
|
modal.verbose('Adding keyboard shortcuts'); |
||||
|
$document |
||||
|
.on('keyup' + eventNamespace, modal.event.keyboard) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
remove: { |
||||
|
active: function() { |
||||
|
$modal.removeClass(className.active); |
||||
|
}, |
||||
|
keyboardShortcuts: function() { |
||||
|
modal.verbose('Removing keyboard shortcuts'); |
||||
|
$document |
||||
|
.off('keyup' + eventNamespace) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
cache: { |
||||
|
sizes: function() { |
||||
|
modal.cache = { |
||||
|
height : $modal.outerHeight() + settings.offset, |
||||
|
contextHeight : (settings.context == 'body') |
||||
|
? $(window).height() |
||||
|
: $context.height() |
||||
|
}; |
||||
|
console.log($modal); |
||||
|
modal.debug('Caching modal and container sizes', modal.cache); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
fit: function() { |
||||
|
return (modal.cache.height < modal.cache.contextHeight); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
active: function() { |
||||
|
return $modal.hasClass(className.active); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
active: function() { |
||||
|
$modal.addClass('active'); |
||||
|
}, |
||||
|
type: function() { |
||||
|
if(modal.can.fit()) { |
||||
|
modal.verbose('Modal fits on screen'); |
||||
|
$modal.removeClass(className.scrolling); |
||||
|
} |
||||
|
else { |
||||
|
modal.verbose('Modal cannot fit on screen setting to scrolling'); |
||||
|
$modal.addClass(className.scrolling); |
||||
|
} |
||||
|
}, |
||||
|
position: function() { |
||||
|
modal.verbose('Centering modal on page', modal.cache.height / 2); |
||||
|
if(modal.can.fit()) { |
||||
|
$modal |
||||
|
.css({ |
||||
|
marginTop: -(modal.cache.height / 2) |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$modal |
||||
|
.css({ |
||||
|
top: $context.prop('scrollTop') |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, modal, name); |
||||
|
} |
||||
|
else { |
||||
|
modal[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return modal[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
modal.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
modal.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
||||
|
modal.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
modal.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
modal.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
||||
|
modal.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
modal.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
||||
|
modal.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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(modal.performance.timer); |
||||
|
modal.performance.timer = setTimeout(modal.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.name + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
time = false; |
||||
|
clearTimeout(modal.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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
modal.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
modal.initialize(); |
||||
|
} |
||||
|
invokedResponse = modal.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
modal.destroy(); |
||||
|
} |
||||
|
modal.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.modal.settings = { |
||||
|
|
||||
|
name : 'Modal', |
||||
|
namespace : 'modal', |
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
|
||||
|
offset : 0, |
||||
|
transition : 'scale', |
||||
|
duration : 500, |
||||
|
easing : 'easeOutExpo', |
||||
|
|
||||
|
closable : true, |
||||
|
context : 'body', |
||||
|
|
||||
|
onShow : function(){}, |
||||
|
onHide : function(){}, |
||||
|
|
||||
|
selector : { |
||||
|
closeButton : '.close, .actions .button', |
||||
|
dimmer: '.ui.dimmer' |
||||
|
}, |
||||
|
error : { |
||||
|
method : 'The method you called is not defined.' |
||||
|
}, |
||||
|
className : { |
||||
|
scrolling : 'scrolling' |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,160 @@ |
|||||
|
/* |
||||
|
* # Semantic Modal |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: Aug 05, 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Modal |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.modal { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
z-index: 1001; |
||||
|
|
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
text-align: left; |
||||
|
|
||||
|
width: 800px; |
||||
|
margin-left: -400px; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
border: 1px solid #DDDDDD; |
||||
|
|
||||
|
-webkit-border-radius: 5px; |
||||
|
-moz-border-radius: 5px; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Content |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Close |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.modal > .close { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
|
||||
|
opacity: 0.8; |
||||
|
|
||||
|
font-size: 1.25em; |
||||
|
top: -1.75em; |
||||
|
right: -1.75em; |
||||
|
|
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.ui.modal > .close:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Header |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.modal > .header { |
||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
margin: 0em; |
||||
|
padding: 1.5rem 2rem; |
||||
|
|
||||
|
font-size: 1.6em; |
||||
|
font-weight: bold; |
||||
|
|
||||
|
-webkit-border-radius: 0.325em 0.325em 0px 0px; |
||||
|
-moz-border-radius: 0.325em 0.325em 0px 0px; |
||||
|
border-radius: 0.325em 0.325em 0px 0px; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.modal > .content { |
||||
|
display: table; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
padding: 2em; |
||||
|
background-color: #F4F4F4; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.ui.modal > .content > .left { |
||||
|
display: table-cell; |
||||
|
padding-right: 5%; |
||||
|
} |
||||
|
.ui.modal > .content > .right { |
||||
|
display: table-cell; |
||||
|
padding-left: 5%; |
||||
|
vertical-align: middle; |
||||
|
|
||||
|
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.ui.modal > .content p { |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Actions |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.modal .actions { |
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
padding: 1rem 2rem; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.ui.modal .actions > .button { |
||||
|
margin-left: 0.75em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.basic.modal { |
||||
|
background-color: transparent; |
||||
|
border: none; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.ui.basic.modal .content { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/* A modal that cannot fit on the page */ |
||||
|
.ui.modal.scrolling { |
||||
|
position: absolute; |
||||
|
margin-top: 100px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.active.modal { |
||||
|
display: block; |
||||
|
} |
||||
@ -0,0 +1,542 @@ |
|||||
|
/* ****************************** |
||||
|
Nag |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit July 19, 2012 |
||||
|
|
||||
|
Simple fixed position nag |
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.nag = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
settings = $.extend(true, {}, $.fn.nag.settings, parameters), |
||||
|
|
||||
|
className = settings.className, |
||||
|
selector = settings.selector, |
||||
|
error = settings.error, |
||||
|
namespace = settings.namespace, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = namespace + '-module', |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
$(this) |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
|
||||
|
$close = $module.find(selector.close), |
||||
|
$context = $(settings.context), |
||||
|
|
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
moduleOffset, |
||||
|
moduleHeight, |
||||
|
|
||||
|
contextWidth, |
||||
|
contextHeight, |
||||
|
contextOffset, |
||||
|
|
||||
|
yOffset, |
||||
|
yPosition, |
||||
|
|
||||
|
timer, |
||||
|
module, |
||||
|
|
||||
|
requestAnimationFrame = window.requestAnimationFrame |
||||
|
|| window.mozRequestAnimationFrame |
||||
|
|| window.webkitRequestAnimationFrame |
||||
|
|| window.msRequestAnimationFrame |
||||
|
|| function(callback) { setTimeout(callback, 0); } |
||||
|
; |
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing element'); |
||||
|
// calculate module offset once
|
||||
|
moduleOffset = $module.offset(); |
||||
|
moduleHeight = $module.outerHeight(); |
||||
|
contextWidth = $context.outerWidth(); |
||||
|
contextHeight = $context.outerHeight(); |
||||
|
contextOffset = $context.offset(); |
||||
|
|
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
$close |
||||
|
.on('click' + eventNamespace, module.dismiss) |
||||
|
; |
||||
|
// lets avoid javascript if we dont need to reposition
|
||||
|
if(settings.context == window && settings.position == 'fixed') { |
||||
|
$module |
||||
|
.addClass(className.fixed) |
||||
|
; |
||||
|
} |
||||
|
if(settings.sticky) { |
||||
|
module.verbose('Adding scroll events'); |
||||
|
// retrigger on scroll for absolute
|
||||
|
if(settings.position == 'absolute') { |
||||
|
$context |
||||
|
.on('scroll' + eventNamespace, module.event.scroll) |
||||
|
.on('resize' + eventNamespace, module.event.scroll) |
||||
|
; |
||||
|
} |
||||
|
// fixed is always relative to window
|
||||
|
else { |
||||
|
$(window) |
||||
|
.on('scroll' + eventNamespace, module.event.scroll) |
||||
|
.on('resize' + eventNamespace, module.event.scroll) |
||||
|
; |
||||
|
} |
||||
|
// fire once to position on init
|
||||
|
$.proxy(module.event.scroll, this)(); |
||||
|
} |
||||
|
|
||||
|
if(settings.displayTime > 0) { |
||||
|
setTimeout(module.hide, settings.displayTime); |
||||
|
} |
||||
|
if(module.should.show()) { |
||||
|
if( !$module.is(':visible') ) { |
||||
|
module.show(); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
module.hide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying instance'); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
if(settings.sticky) { |
||||
|
$context |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
module.debug('Refreshing cached calculations'); |
||||
|
moduleOffset = $module.offset(); |
||||
|
moduleHeight = $module.outerHeight(); |
||||
|
contextWidth = $context.outerWidth(); |
||||
|
contextHeight = $context.outerHeight(); |
||||
|
contextOffset = $context.offset(); |
||||
|
}, |
||||
|
|
||||
|
show: function() { |
||||
|
module.debug('Showing nag', settings.animation.show); |
||||
|
if(settings.animation.show == 'fade') { |
||||
|
$module |
||||
|
.fadeIn(settings.duration, settings.easing) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$module |
||||
|
.slideDown(settings.duration, settings.easing) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
hide: function() { |
||||
|
module.debug('Showing nag', settings.animation.hide); |
||||
|
if(settings.animation.show == 'fade') { |
||||
|
$module |
||||
|
.fadeIn(settings.duration, settings.easing) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$module |
||||
|
.slideUp(settings.duration, settings.easing) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onHide: function() { |
||||
|
module.debug('Removing nag', settings.animation.hide); |
||||
|
$module.remove(); |
||||
|
if (settings.onHide) { |
||||
|
settings.onHide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
stick: function() { |
||||
|
module.refresh(); |
||||
|
|
||||
|
if(settings.position == 'fixed') { |
||||
|
var |
||||
|
windowScroll = $(window).prop('pageYOffset') || $(window).scrollTop(), |
||||
|
fixedOffset = ( $module.hasClass(className.bottom) ) |
||||
|
? contextOffset.top + (contextHeight - moduleHeight) - windowScroll |
||||
|
: contextOffset.top - windowScroll |
||||
|
; |
||||
|
$module |
||||
|
.css({ |
||||
|
position : 'fixed', |
||||
|
top : fixedOffset, |
||||
|
left : contextOffset.left, |
||||
|
width : contextWidth - settings.scrollBarWidth |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$module |
||||
|
.css({ |
||||
|
top : yPosition |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
unStick: function() { |
||||
|
$module |
||||
|
.css({ |
||||
|
top : '' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
dismiss: function(event) { |
||||
|
if(settings.storageMethod) { |
||||
|
module.storage.set(settings.storedKey, settings.storedValue); |
||||
|
} |
||||
|
module.hide(); |
||||
|
event.stopImmediatePropagation(); |
||||
|
event.preventDefault(); |
||||
|
}, |
||||
|
|
||||
|
should: { |
||||
|
show: function() { |
||||
|
if(settings.persist) { |
||||
|
module.debug('Persistent nag is set, can show nag'); |
||||
|
return true; |
||||
|
} |
||||
|
if(module.storage.get(settings.storedKey) != settings.storedValue) { |
||||
|
module.debug('Stored value is not set, can show nag', module.storage.get(settings.storedKey)); |
||||
|
return true; |
||||
|
} |
||||
|
module.debug('Stored value is set, cannot show nag', module.storage.get(settings.storedKey)); |
||||
|
return false; |
||||
|
}, |
||||
|
stick: function() { |
||||
|
yOffset = $context.prop('pageYOffset') || $context.scrollTop(); |
||||
|
yPosition = ( $module.hasClass(className.bottom) ) |
||||
|
? (contextHeight - $module.outerHeight() ) + yOffset |
||||
|
: yOffset |
||||
|
; |
||||
|
// absolute position calculated when y offset met
|
||||
|
if(yPosition > moduleOffset.top) { |
||||
|
return true; |
||||
|
} |
||||
|
else if(settings.position == 'fixed') { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
storage: { |
||||
|
|
||||
|
set: function(key, value) { |
||||
|
module.debug('Setting stored value', key, value, settings.storageMethod); |
||||
|
if(settings.storageMethod == 'local' && window.store !== undefined) { |
||||
|
window.store.set(key, value); |
||||
|
} |
||||
|
// store by cookie
|
||||
|
else if($.cookie !== undefined) { |
||||
|
$.cookie(key, value); |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.noStorage); |
||||
|
} |
||||
|
}, |
||||
|
get: function(key) { |
||||
|
module.debug('Getting stored value', key, settings.storageMethod); |
||||
|
if(settings.storageMethod == 'local' && window.store !== undefined) { |
||||
|
return window.store.get(key); |
||||
|
} |
||||
|
// get by cookie
|
||||
|
else if($.cookie !== undefined) { |
||||
|
return $.cookie(key); |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.noStorage); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
scroll: function() { |
||||
|
if(timer !== undefined) { |
||||
|
clearTimeout(timer); |
||||
|
} |
||||
|
timer = setTimeout(function() { |
||||
|
if(module.should.stick() ) { |
||||
|
requestAnimationFrame(module.stick); |
||||
|
} |
||||
|
else { |
||||
|
module.unStick(); |
||||
|
} |
||||
|
}, settings.lag); |
||||
|
} |
||||
|
}, |
||||
|
setting: function(name, value) { |
||||
|
module.debug('Changing setting', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
module.debug('Changing internal', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.nag.settings = { |
||||
|
|
||||
|
name : 'Nag', |
||||
|
|
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
|
||||
|
namespace : 'Nag', |
||||
|
|
||||
|
// allows cookie to be overriden
|
||||
|
persist : false, |
||||
|
|
||||
|
// set to zero to manually dismiss, otherwise hides on its own
|
||||
|
displayTime : 0, |
||||
|
|
||||
|
animation : { |
||||
|
show: 'slide', |
||||
|
hide: 'slide' |
||||
|
}, |
||||
|
|
||||
|
// method of stickyness
|
||||
|
position : 'fixed', |
||||
|
scrollBarWidth : 18, |
||||
|
|
||||
|
// type of storage to use
|
||||
|
storageMethod : 'cookie', |
||||
|
|
||||
|
// value to store in dismissed localstorage/cookie
|
||||
|
storedKey : 'nag', |
||||
|
storedValue : 'dismiss', |
||||
|
|
||||
|
// need to calculate stickyness on scroll
|
||||
|
sticky : false, |
||||
|
|
||||
|
// how often to check scroll event
|
||||
|
lag : 0, |
||||
|
|
||||
|
// context for scroll event
|
||||
|
context : window, |
||||
|
|
||||
|
error: { |
||||
|
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state', |
||||
|
method : 'The method you called is not defined.' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
bottom : 'bottom', |
||||
|
fixed : 'fixed' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
close: '.icon.close' |
||||
|
}, |
||||
|
|
||||
|
speed : 500, |
||||
|
easing : 'easeOutQuad', |
||||
|
|
||||
|
onHide: function() {} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,175 @@ |
|||||
|
/* |
||||
|
* # Semantic Nag |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Nag |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.nag { |
||||
|
display: none; |
||||
|
opacity: 0.95; |
||||
|
|
||||
|
position: relative; |
||||
|
top: 0px; |
||||
|
left: 0%; |
||||
|
z-index: 101; |
||||
|
|
||||
|
min-height: 0; |
||||
|
width: 100%; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
margin: 0em; |
||||
|
line-height: 3em; |
||||
|
padding: 0em 1em; |
||||
|
|
||||
|
background-color: #555555; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
||||
|
; |
||||
|
|
||||
|
font-size: 1em; |
||||
|
text-align: center; |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
|
||||
|
-webkit-border-radius: 0px 0px 5px 5px; |
||||
|
-moz-border-radius: 0px 0px 5px 5px; |
||||
|
border-radius: 0px 0px 5px 5px; |
||||
|
|
||||
|
-webkit-transition: 0.2s background; |
||||
|
-moz-transition: 0.2s background; |
||||
|
-o-transition: 0.2s background; |
||||
|
-ms-transition: 0.2s background; |
||||
|
transition: 0.2s background; |
||||
|
} |
||||
|
|
||||
|
a.ui.nag { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.ui.nag > .title { |
||||
|
display: inline-block; |
||||
|
margin: 0em 0.5em; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ui.nag > .close.icon { |
||||
|
cursor: pointer; |
||||
|
opacity: 0.4; |
||||
|
|
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: 1em; |
||||
|
|
||||
|
margin-top: -0.5em; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
-webkit-transition: 0.1s opacity; |
||||
|
-moz-transition: 0.1s opacity; |
||||
|
-o-transition: 0.1s opacity; |
||||
|
-ms-transition: 0.1s opacity; |
||||
|
transition: 0.1s opacity; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Hover */ |
||||
|
.ui.nag:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.ui.nag .close:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Static |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.overlay.nag { |
||||
|
position: absolute; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Fixed |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.fixed.nag { |
||||
|
position: fixed; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Bottom |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.botton.nag { |
||||
|
-webkit-border-radius: 5px 5px 0px 0px; |
||||
|
-moz-border-radius: 5px 5px 0px 0px; |
||||
|
border-radius: 5px 5px 0px 0px; |
||||
|
} |
||||
|
.ui.fixed.bottom.nags, |
||||
|
.ui.fixed.bottom.nag { |
||||
|
top: auto; |
||||
|
bottom: 0px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
White |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.white.nags .nag, |
||||
|
.ui.white.nag { |
||||
|
background-color: #F1F1F1; |
||||
|
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
||||
|
color: #ACACAC; |
||||
|
} |
||||
|
.ui.white.nags .nag .close, |
||||
|
.ui.white.nags .nag .title, |
||||
|
.ui.white.nag .close, |
||||
|
.ui.white.nag .title { |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Groups |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.nags .nag { |
||||
|
-webkit-border-radius: 0px; |
||||
|
-moz-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
} |
||||
@ -0,0 +1,721 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Popup |
||||
|
Author: Jack Lukic |
||||
|
Notes: May 30, 2013 |
||||
|
|
||||
|
Simple plug-in to display popups |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.popup = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = ( $.isPlainObject(parameters) ) |
||||
|
? $.extend(true, {}, $.fn.popup.settings, parameters) |
||||
|
: $.fn.popup.settings, |
||||
|
|
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
|
||||
|
invokedResponse |
||||
|
; |
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
|
||||
|
$window = $(window), |
||||
|
$offsetParent = $module.offsetParent(), |
||||
|
$popup = (settings.inline) |
||||
|
? $module.next(settings.selector.popup) |
||||
|
: $window.children(settings.selector.popup).last(), |
||||
|
|
||||
|
searchDepth = 0, |
||||
|
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = settings.namespace + '-module', |
||||
|
|
||||
|
selector = settings.selector, |
||||
|
className = settings.className, |
||||
|
error = settings.error, |
||||
|
metadata = settings.metadata, |
||||
|
namespace = settings.namespace, |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
// binds events
|
||||
|
initialize: function() { |
||||
|
module.debug('Initializing module', $module); |
||||
|
if(settings.on == 'hover') { |
||||
|
$module |
||||
|
.on('mouseenter' + eventNamespace, module.event.mouseenter) |
||||
|
.on('mouseleave' + eventNamespace, module.event.mouseleave) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$module |
||||
|
.on(settings.on + '' + eventNamespace, module.event[settings.on]) |
||||
|
; |
||||
|
} |
||||
|
$window |
||||
|
.on('resize' + eventNamespace, module.event.resize) |
||||
|
; |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
$popup = (settings.inline) |
||||
|
? $module.next(selector.popup) |
||||
|
: $window.children(selector.popup).last() |
||||
|
; |
||||
|
$offsetParent = $module.offsetParent(); |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.debug('Destroying previous module'); |
||||
|
$module |
||||
|
.off(eventNamespace) |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
mouseenter: function(event) { |
||||
|
var element = this; |
||||
|
module.timer = setTimeout(function() { |
||||
|
$.proxy(module.toggle, element)(); |
||||
|
if( $(element).hasClass(className.visible) ) { |
||||
|
event.stopPropagation(); |
||||
|
} |
||||
|
}, settings.delay); |
||||
|
}, |
||||
|
mouseleave: function() { |
||||
|
clearTimeout(module.timer); |
||||
|
if( $module.is(':visible') ) { |
||||
|
module.hide(); |
||||
|
} |
||||
|
}, |
||||
|
click: function(event) { |
||||
|
$.proxy(module.toggle, this)(); |
||||
|
if( $(this).hasClass(className.visible) ) { |
||||
|
event.stopPropagation(); |
||||
|
} |
||||
|
}, |
||||
|
resize: function() { |
||||
|
if( $popup.is(':visible') ) { |
||||
|
module.position(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// generates popup html from metadata
|
||||
|
create: function() { |
||||
|
module.debug('Creating pop-up html'); |
||||
|
var |
||||
|
html = $module.data(metadata.html) || settings.html, |
||||
|
variation = $module.data(metadata.variation) || settings.variation, |
||||
|
title = $module.data(metadata.title) || settings.title, |
||||
|
content = $module.data(metadata.content) || $module.attr('title') || settings.content |
||||
|
; |
||||
|
if(html || content || title) { |
||||
|
if(!html) { |
||||
|
html = settings.template({ |
||||
|
title : title, |
||||
|
content : content |
||||
|
}); |
||||
|
} |
||||
|
$popup = $('<div/>') |
||||
|
.addClass(className.popup) |
||||
|
.addClass(variation) |
||||
|
.html(html) |
||||
|
; |
||||
|
if(settings.inline) { |
||||
|
module.verbose('Inserting popup element inline'); |
||||
|
$popup |
||||
|
.insertAfter($module) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
module.verbose('Appending popup element to body'); |
||||
|
$popup |
||||
|
.appendTo( $('body') ) |
||||
|
; |
||||
|
} |
||||
|
$.proxy(settings.onInit, $popup)(); |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.content); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
remove: function() { |
||||
|
module.debug('Removing popup'); |
||||
|
$popup |
||||
|
.remove() |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
offstagePosition: function() { |
||||
|
var |
||||
|
boundary = { |
||||
|
top : $(window).scrollTop(), |
||||
|
bottom : $(window).scrollTop() + $(window).height(), |
||||
|
left : 0, |
||||
|
right : $(window).width() |
||||
|
}, |
||||
|
popup = { |
||||
|
width : $popup.width(), |
||||
|
height : $popup.outerHeight(), |
||||
|
position : $popup.offset() |
||||
|
}, |
||||
|
offstage = {}, |
||||
|
offstagePositions = [] |
||||
|
; |
||||
|
if(popup.position) { |
||||
|
offstage = { |
||||
|
top : (popup.position.top < boundary.top), |
||||
|
bottom : (popup.position.top + popup.height > boundary.bottom), |
||||
|
right : (popup.position.left + popup.width > boundary.right), |
||||
|
left : (popup.position.left < boundary.left) |
||||
|
}; |
||||
|
} |
||||
|
// return only boundaries that have been surpassed
|
||||
|
$.each(offstage, function(direction, isOffstage) { |
||||
|
if(isOffstage) { |
||||
|
offstagePositions.push(direction); |
||||
|
} |
||||
|
}); |
||||
|
return (offstagePositions.length > 0) |
||||
|
? offstagePositions.join(' ') |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
nextPosition: function(position) { |
||||
|
switch(position) { |
||||
|
case 'top left': |
||||
|
position = 'bottom left'; |
||||
|
break; |
||||
|
case 'bottom left': |
||||
|
position = 'top right'; |
||||
|
break; |
||||
|
case 'top right': |
||||
|
position = 'bottom right'; |
||||
|
break; |
||||
|
case 'bottom right': |
||||
|
position = 'top center'; |
||||
|
break; |
||||
|
case 'top center': |
||||
|
position = 'bottom center'; |
||||
|
break; |
||||
|
case 'bottom center': |
||||
|
position = 'right center'; |
||||
|
break; |
||||
|
case 'right center': |
||||
|
position = 'left center'; |
||||
|
break; |
||||
|
case 'left center': |
||||
|
position = 'top center'; |
||||
|
break; |
||||
|
} |
||||
|
return position; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// determines popup state
|
||||
|
toggle: function() { |
||||
|
$module = $(this); |
||||
|
module.debug('Toggling pop-up'); |
||||
|
// refresh state of module
|
||||
|
module.refresh(); |
||||
|
if( !$module.hasClass(className.visible) ) { |
||||
|
module.hideAll(); |
||||
|
module.show(); |
||||
|
} |
||||
|
else { |
||||
|
module.hide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
position: function(position, arrowOffset) { |
||||
|
var |
||||
|
windowWidth = $(window).width(), |
||||
|
windowHeight = $(window).height(), |
||||
|
width = $module.outerWidth(), |
||||
|
height = $module.outerHeight(), |
||||
|
popupWidth = $popup.width(), |
||||
|
popupHeight = $popup.outerHeight(), |
||||
|
|
||||
|
offset = (settings.inline) |
||||
|
? $module.position() |
||||
|
: $module.offset(), |
||||
|
parentWidth = (settings.inline) |
||||
|
? $offsetParent.outerWidth() |
||||
|
: $window.outerWidth(), |
||||
|
parentHeight = (settings.inline) |
||||
|
? $offsetParent.outerHeight() |
||||
|
: $window.outerHeight(), |
||||
|
|
||||
|
positioning, |
||||
|
offstagePosition |
||||
|
; |
||||
|
position = position || $module.data(metadata.position) || settings.position; |
||||
|
arrowOffset = arrowOffset || $module.data(metadata.arrowOffset) || settings.arrowOffset; |
||||
|
module.debug('Calculating offset for position', position); |
||||
|
switch(position) { |
||||
|
case 'top left': |
||||
|
positioning = { |
||||
|
top : 'auto', |
||||
|
bottom : parentHeight - offset.top + settings.distanceAway, |
||||
|
left : offset.left + arrowOffset |
||||
|
}; |
||||
|
break; |
||||
|
case 'top center': |
||||
|
positioning = { |
||||
|
bottom : parentHeight - offset.top + settings.distanceAway, |
||||
|
left : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset, |
||||
|
top : 'auto', |
||||
|
right : 'auto' |
||||
|
}; |
||||
|
break; |
||||
|
case 'top right': |
||||
|
positioning = { |
||||
|
bottom : parentHeight - offset.top + settings.distanceAway, |
||||
|
right : parentWidth - offset.left - width - arrowOffset, |
||||
|
top : 'auto', |
||||
|
left : 'auto' |
||||
|
}; |
||||
|
break; |
||||
|
case 'left center': |
||||
|
positioning = { |
||||
|
top : offset.top + (height / 2) - (popupHeight / 2), |
||||
|
right : parentWidth - offset.left + settings.distanceAway - arrowOffset, |
||||
|
left : 'auto', |
||||
|
bottom : 'auto' |
||||
|
}; |
||||
|
break; |
||||
|
case 'right center': |
||||
|
positioning = { |
||||
|
top : offset.top + (height / 2) - (popupHeight / 2), |
||||
|
left : offset.left + width + settings.distanceAway + arrowOffset, |
||||
|
bottom : 'auto', |
||||
|
right : 'auto' |
||||
|
}; |
||||
|
break; |
||||
|
case 'bottom left': |
||||
|
positioning = { |
||||
|
top : offset.top + height + settings.distanceAway, |
||||
|
left : offset.left + arrowOffset, |
||||
|
bottom : 'auto', |
||||
|
right : 'auto' |
||||
|
}; |
||||
|
break; |
||||
|
case 'bottom center': |
||||
|
positioning = { |
||||
|
top : offset.top + height + settings.distanceAway, |
||||
|
left : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset, |
||||
|
bottom : 'auto', |
||||
|
right : 'auto' |
||||
|
}; |
||||
|
break; |
||||
|
case 'bottom right': |
||||
|
positioning = { |
||||
|
top : offset.top + height + settings.distanceAway, |
||||
|
right : parentWidth - offset.left - width - arrowOffset, |
||||
|
left : 'auto', |
||||
|
bottom : 'auto' |
||||
|
}; |
||||
|
break; |
||||
|
} |
||||
|
// true width on popup, avoid rounding error
|
||||
|
$.extend(positioning, { |
||||
|
width: $popup.width() + 1 |
||||
|
}); |
||||
|
// tentatively place on stage
|
||||
|
$popup |
||||
|
.removeAttr('style') |
||||
|
.removeClass('top right bottom left center') |
||||
|
.css(positioning) |
||||
|
.addClass(position) |
||||
|
.addClass(className.loading) |
||||
|
; |
||||
|
// check if is offstage
|
||||
|
offstagePosition = module.get.offstagePosition(); |
||||
|
// recursively find new positioning
|
||||
|
if(offstagePosition) { |
||||
|
module.debug('Element is outside boundaries ', offstagePosition); |
||||
|
if(searchDepth < settings.maxSearchDepth) { |
||||
|
position = module.get.nextPosition(position); |
||||
|
searchDepth++; |
||||
|
module.debug('Trying new position: ', position); |
||||
|
return module.position(position); |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.recursion); |
||||
|
searchDepth = 0; |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Position is on stage', position); |
||||
|
searchDepth = 0; |
||||
|
return true; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
show: function() { |
||||
|
module.debug('Showing pop-up', settings.transition); |
||||
|
if($popup.size() === 0) { |
||||
|
module.create(); |
||||
|
} |
||||
|
module.position(); |
||||
|
$module |
||||
|
.addClass(className.visible) |
||||
|
; |
||||
|
$popup |
||||
|
.removeClass(className.loading) |
||||
|
; |
||||
|
if(settings.transition && $.fn.transition !== undefined) { |
||||
|
$popup |
||||
|
.transition(settings.transition + ' in', settings.duration) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$popup |
||||
|
.stop() |
||||
|
.fadeIn(settings.duration, settings.easing) |
||||
|
; |
||||
|
} |
||||
|
if(settings.on == 'click' && settings.clicktoClose) { |
||||
|
module.debug('Binding popup close event'); |
||||
|
$(document) |
||||
|
.on('click.' + namespace, module.gracefully.hide) |
||||
|
; |
||||
|
} |
||||
|
$.proxy(settings.onShow, $popup)(); |
||||
|
}, |
||||
|
|
||||
|
hideAll: function() { |
||||
|
$(selector.popup) |
||||
|
.filter(':visible') |
||||
|
.popup('hide') |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
hide: function() { |
||||
|
$module |
||||
|
.removeClass(className.visible) |
||||
|
; |
||||
|
if($popup.is(':visible') ) { |
||||
|
module.debug('Hiding pop-up'); |
||||
|
if(settings.transition && $.fn.transition !== undefined) { |
||||
|
$popup |
||||
|
.transition(settings.transition + ' out', settings.duration) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
$popup |
||||
|
.stop() |
||||
|
.fadeOut(settings.duration, settings.easing) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
if(settings.on == 'click' && settings.clicktoClose) { |
||||
|
$(document) |
||||
|
.off('click.' + namespace) |
||||
|
; |
||||
|
} |
||||
|
$.proxy(settings.onHide, $popup)(); |
||||
|
if(!settings.inline) { |
||||
|
module.remove(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
gracefully: { |
||||
|
hide: function(event) { |
||||
|
// don't close on clicks inside popup
|
||||
|
if( $(event.target).closest(selector.popup).size() === 0) { |
||||
|
module.hide(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
if($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.popup.settings = { |
||||
|
|
||||
|
name : 'Popup', |
||||
|
debug : true, |
||||
|
verbose : true, |
||||
|
performance : true, |
||||
|
namespace : 'popup', |
||||
|
|
||||
|
onInit : function(){}, |
||||
|
onShow : function(){}, |
||||
|
onHide : function(){}, |
||||
|
|
||||
|
variation : '', |
||||
|
content : false, |
||||
|
html : false, |
||||
|
title : false, |
||||
|
|
||||
|
on : 'hover', |
||||
|
clicktoClose : true, |
||||
|
|
||||
|
position : 'top center', |
||||
|
delay : 150, |
||||
|
inline : true, |
||||
|
|
||||
|
duration : 150, |
||||
|
easing : 'easeOutQuint', |
||||
|
transition : 'scale', |
||||
|
|
||||
|
distanceAway : 0, |
||||
|
arrowOffset : 0, |
||||
|
maxSearchDepth : 10, |
||||
|
|
||||
|
error: { |
||||
|
content : 'Your popup has no content specified', |
||||
|
method : 'The method you called is not defined.', |
||||
|
recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.' |
||||
|
}, |
||||
|
|
||||
|
metadata: { |
||||
|
arrowOffset : 'arrowOffset', |
||||
|
content : 'content', |
||||
|
html : 'html', |
||||
|
position : 'position', |
||||
|
title : 'title', |
||||
|
variation : 'variation' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
popup : 'ui popup', |
||||
|
visible : 'visible', |
||||
|
loading : 'loading' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
popup : '.ui.popup' |
||||
|
}, |
||||
|
|
||||
|
template: function(text) { |
||||
|
var html = ''; |
||||
|
if(typeof text !== undefined) { |
||||
|
if(typeof text.title !== undefined && text.title) { |
||||
|
html += '<div class="header">' + text.title + '</div class="header">'; |
||||
|
} |
||||
|
if(typeof text.content !== undefined && text.content) { |
||||
|
html += '<div class="content">' + text.content + '</div>'; |
||||
|
} |
||||
|
} |
||||
|
return html; |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,238 @@ |
|||||
|
/* |
||||
|
* # Semantic Popup |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Popup |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.popup { |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
right: 0px; |
||||
|
z-index: 900; |
||||
|
|
||||
|
border: 1px solid #DCDDDE; |
||||
|
max-width: 250px; |
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
padding: 0.8em 1.2em; |
||||
|
font-size: 0.875rem; |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
|
||||
|
-webkit-border-radius: 0.2em; |
||||
|
-moz-border-radius: 0.2em; |
||||
|
border-radius: 0.2em; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 1px 1px #DCDDDE; |
||||
|
-moz-box-shadow: 0px 1px 1px #DCDDDE; |
||||
|
box-shadow: 0px 1px 1px #DCDDDE; |
||||
|
} |
||||
|
.ui.popup .header { |
||||
|
padding: 0em 0em 0.5em; |
||||
|
|
||||
|
font-size: 1.125em; |
||||
|
line-height: 1.2; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.ui.popup:before { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
width: 0.75em; |
||||
|
height: 0.75rem; |
||||
|
|
||||
|
background-image: none; |
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
-webkit-transform: rotate(45deg); |
||||
|
-moz-transform: rotate(45deg); |
||||
|
transform: rotate(45deg); |
||||
|
|
||||
|
z-index: 2; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
-webkit-box-shadow: 1px 1px 1px #DCDDDE; |
||||
|
-moz-box-shadow: 1px 1px 1px #DCDDDE; |
||||
|
box-shadow: 1px 1px 1px #DCDDDE; |
||||
|
} |
||||
|
|
||||
|
.ui.popup .ui.button { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Spacing |
||||
|
---------------*/ |
||||
|
.ui.popup { |
||||
|
margin: 0em; |
||||
|
} |
||||
|
.ui.popup.bottom { |
||||
|
margin: 0.75em 0em 0em; |
||||
|
} |
||||
|
.ui.popup.top { |
||||
|
margin: 0em 0em 0.75em; |
||||
|
} |
||||
|
.ui.popup.left.center { |
||||
|
margin: 0em 0.75em 0em 0em; |
||||
|
} |
||||
|
.ui.popup.right.center { |
||||
|
margin: 0em 0em 0em 0.75em; |
||||
|
} |
||||
|
.ui.popup.center { |
||||
|
margin-left: -1.25em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Pointer |
||||
|
---------------*/ |
||||
|
|
||||
|
/*--- Below ---*/ |
||||
|
.ui.bottom.center.popup:before { |
||||
|
margin-left: -0.4em; |
||||
|
top: -0.4em; |
||||
|
left: 50%; |
||||
|
right: auto; |
||||
|
bottom: auto; |
||||
|
-webkit-box-shadow: -1px -1px 1px #dcddde; |
||||
|
-moz-box-shadow: -1px -1px 1px #dcddde; |
||||
|
box-shadow: -1px -1px 1px #dcddde; |
||||
|
} |
||||
|
.ui.bottom.left.popup:before { |
||||
|
top: -0.4em; |
||||
|
left: 1em; |
||||
|
right: auto; |
||||
|
bottom: auto; |
||||
|
margin-left: 0em; |
||||
|
-webkit-box-shadow: -1px -1px 1px #dcddde; |
||||
|
-moz-box-shadow: -1px -1px 1px #dcddde; |
||||
|
box-shadow: -1px -1px 1px #dcddde; |
||||
|
} |
||||
|
.ui.bottom.right.popup:before { |
||||
|
top: -0.4em; |
||||
|
right: 1em; |
||||
|
bottom: auto; |
||||
|
left: auto; |
||||
|
margin-left: 0em; |
||||
|
-webkit-box-shadow: -1px -1px 1px #dcddde; |
||||
|
-moz-box-shadow: -1px -1px 1px #dcddde; |
||||
|
box-shadow: -1px -1px 1px #dcddde; |
||||
|
} |
||||
|
/*--- Above ---*/ |
||||
|
.ui.top.center.popup:before { |
||||
|
top: auto; |
||||
|
right: auto; |
||||
|
bottom: -0.4em; |
||||
|
left: 50%; |
||||
|
margin-left: -0.4em; |
||||
|
} |
||||
|
.ui.top.left.popup:before { |
||||
|
bottom: -0.4em; |
||||
|
left: 1em; |
||||
|
top: auto; |
||||
|
right: auto; |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.top.right.popup:before { |
||||
|
bottom: -0.4em; |
||||
|
right: 1em; |
||||
|
top: auto; |
||||
|
left: auto; |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
/*--- Left ---*/ |
||||
|
.ui.left.center.popup:before { |
||||
|
top: 50%; |
||||
|
right: -0.35em; |
||||
|
bottom: auto; |
||||
|
left: auto; |
||||
|
margin-top: -0.4em; |
||||
|
-moz-box-shadow: 1px -1px 1px #dcddde; |
||||
|
-webkit-box-shadow: 1px -1px 1px #dcddde; |
||||
|
box-shadow: 1px -1px 1px #dcddde; |
||||
|
} |
||||
|
/*--- Right ---*/ |
||||
|
.ui.right.center.popup:before { |
||||
|
top: 50%; |
||||
|
left: -0.35em; |
||||
|
bottom: auto; |
||||
|
right: auto; |
||||
|
margin-top: -0.4em; |
||||
|
-moz-box-shadow: -1px 1px 1px #dcddde; |
||||
|
-webkit-box-shadow: -1px 1px 1px #dcddde; |
||||
|
box-shadow: -1px 1px 1px #dcddde; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.loading.popup { |
||||
|
display: block; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
.ui.active.popup { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Size |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.small.popup { |
||||
|
font-size: 0.75rem; |
||||
|
} |
||||
|
.ui.large.popup { |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Colors |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Inverted colors */ |
||||
|
.ui.inverted.popup { |
||||
|
background-color: #333333; |
||||
|
border: none; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
.ui.inverted.popup .header { |
||||
|
background-color: rgba(0, 0, 0, 0.2); |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.ui.inverted.popup:before { |
||||
|
background-color: #333333; |
||||
|
|
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
@ -0,0 +1,358 @@ |
|||||
|
/* ****************************** |
||||
|
Star Review |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit Sep 04, 2012 |
||||
|
|
||||
|
Simple rating module |
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.rating = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.rating.settings, parameters), |
||||
|
|
||||
|
namespace = settings.namespace, |
||||
|
className = settings.className, |
||||
|
metadata = settings.metadata, |
||||
|
selector = settings.selector, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
$icon = $module.find(selector.icon), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing rating module'); |
||||
|
if(settings.interactive) { |
||||
|
$icon |
||||
|
.bind('mouseenter' + eventNamespace, module.event.mouseenter) |
||||
|
.bind('mouseleave' + eventNamespace, module.event.mouseleave) |
||||
|
.bind('click' + eventNamespace, module.event.click) |
||||
|
; |
||||
|
} |
||||
|
if(settings.initialRating) { |
||||
|
module.debug('Setting initial rating'); |
||||
|
module.setRating(settings.initialRating); |
||||
|
} |
||||
|
if( $module.data(metadata.rating) ) { |
||||
|
module.debug('Rating found in metadata'); |
||||
|
module.setRating( $module.data(metadata.rating) ); |
||||
|
} |
||||
|
$module |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Instantiating module', settings); |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
$icon |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setRating: function(rating) { |
||||
|
var |
||||
|
$activeIcon = $icon.eq(rating - 1) |
||||
|
; |
||||
|
module.verbose('Setting current rating to', rating); |
||||
|
$module |
||||
|
.removeClass(className.hover) |
||||
|
; |
||||
|
$icon |
||||
|
.removeClass(className.hover) |
||||
|
; |
||||
|
$activeIcon |
||||
|
.nextAll() |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$activeIcon |
||||
|
.addClass(className.active) |
||||
|
.prevAll() |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
$.proxy(settings.onRate, element)(); |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
mouseenter: function() { |
||||
|
var |
||||
|
$activeIcon = $(this) |
||||
|
; |
||||
|
$activeIcon |
||||
|
.nextAll() |
||||
|
.removeClass(className.hover) |
||||
|
; |
||||
|
$module |
||||
|
.addClass(className.hover) |
||||
|
; |
||||
|
$activeIcon |
||||
|
.addClass(className.hover) |
||||
|
.prevAll() |
||||
|
.addClass(className.hover) |
||||
|
; |
||||
|
}, |
||||
|
mouseleave: function() { |
||||
|
$module |
||||
|
.removeClass(className.hover) |
||||
|
; |
||||
|
$icon |
||||
|
.removeClass(className.hover) |
||||
|
; |
||||
|
}, |
||||
|
click: function() { |
||||
|
var |
||||
|
$activeIcon = $(this) |
||||
|
; |
||||
|
module.setRating( $icon.index($activeIcon) + 1); |
||||
|
} |
||||
|
}, |
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.rating.settings = { |
||||
|
|
||||
|
name : 'Rating', |
||||
|
namespace : 'rating', |
||||
|
|
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
|
||||
|
initialRating : 0, |
||||
|
interactive : true, |
||||
|
onRate : function(){}, |
||||
|
|
||||
|
error : { |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
metadata: { |
||||
|
rating: 'rating' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
active : 'active', |
||||
|
hover : 'hover', |
||||
|
loading : 'loading' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
icon : '.icon' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,151 @@ |
|||||
|
/******************************* |
||||
|
Star Rating |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.rating { |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
margin: 0em 0.5em; |
||||
|
} |
||||
|
.ui.rating:first-child { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.rating:last-child { |
||||
|
margin-right: 0em; |
||||
|
} |
||||
|
|
||||
|
.ui.rating:after { |
||||
|
display: block; |
||||
|
content: ''; |
||||
|
visibility: hidden; |
||||
|
clear: both; |
||||
|
height: 0; |
||||
|
} |
||||
|
|
||||
|
/* Icon */ |
||||
|
.ui.rating .icon { |
||||
|
cursor: default; |
||||
|
float: left; |
||||
|
|
||||
|
margin: 0em; |
||||
|
|
||||
|
width: 1em; |
||||
|
height: auto; |
||||
|
padding: 0em; |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
.ui.rating .icon:after { |
||||
|
content: "\2605"; |
||||
|
color: rgba(0, 0, 0, 0.15); |
||||
|
|
||||
|
-webkit-transition: |
||||
|
color 0.3s ease, |
||||
|
opacity 0.3s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
color 0.3s ease, |
||||
|
opacity 0.3s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
color 0.3s ease, |
||||
|
opacity 0.3s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
color 0.3s ease, |
||||
|
opacity 0.3s ease |
||||
|
; |
||||
|
transition: |
||||
|
color 0.3s ease, |
||||
|
opacity 0.3s ease |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Star |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.star.rating .icon:after { |
||||
|
content: '\e800'; |
||||
|
font-family: 'Icons'; |
||||
|
} |
||||
|
|
||||
|
.ui.star.rating .active.icon:after { |
||||
|
content: '\e801'; |
||||
|
font-family: 'Icons'; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Heart |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.heart.rating .icon:after { |
||||
|
content: '\2661'; |
||||
|
font-family: 'Icons'; |
||||
|
} |
||||
|
|
||||
|
.ui.heart.rating .active.icon:after { |
||||
|
content: '\2665'; |
||||
|
font-family: 'Icons'; |
||||
|
color: #EF404A; |
||||
|
} |
||||
|
.ui.heart.rating .hover.icon:after, |
||||
|
.ui.heart.rating .active.hover.icon:after { |
||||
|
color: #FF2733; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Active |
||||
|
--------------------*/ |
||||
|
|
||||
|
/* active rating */ |
||||
|
.ui.active.rating .icon { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* active icons */ |
||||
|
.ui.rating .active.icon:after { |
||||
|
color: #FFCB08; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Hover |
||||
|
--------------------*/ |
||||
|
|
||||
|
/* rating */ |
||||
|
.ui.rating.hover .active.icon:after { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
/* icon */ |
||||
|
.ui.rating .icon.hover:after, |
||||
|
.ui.rating .icon.hover.active:after { |
||||
|
opacity: 1; |
||||
|
color: #FFB70A; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.small.rating { |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
.ui.rating { |
||||
|
font-size: 1.5rem; |
||||
|
} |
||||
|
.ui.large.rating { |
||||
|
font-size: 2rem; |
||||
|
} |
||||
@ -0,0 +1,367 @@ |
|||||
|
/* |
||||
|
* # Semantic Reveal |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: June 28, 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Reveal |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.reveal { |
||||
|
display: inline-block; |
||||
|
position: relative !important; |
||||
|
z-index: 2 !important; |
||||
|
font-size: 0em !important; |
||||
|
} |
||||
|
|
||||
|
.ui.reveal > .content { |
||||
|
font-size: 1em !important; |
||||
|
} |
||||
|
|
||||
|
.ui.reveal > .visible.content { |
||||
|
-webkit-transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
-moz-transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
-ms-transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
.ui.reveal > .visible.content { |
||||
|
position: absolute !important; |
||||
|
top: 0em !important; |
||||
|
left: 0em !important; |
||||
|
z-index: 4 !important; |
||||
|
-webkit-transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
-moz-transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
-ms-transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
transition: |
||||
|
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
} |
||||
|
.ui.reveal > .hidden.content { |
||||
|
position: relative !important; |
||||
|
z-index: 3 !important; |
||||
|
} |
||||
|
|
||||
|
/*------------------ |
||||
|
Loose Coupling |
||||
|
-------------------*/ |
||||
|
|
||||
|
.ui.reveal.button { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Slide |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.slide.reveal { |
||||
|
position: relative !important; |
||||
|
display: block; |
||||
|
overflow: hidden !important; |
||||
|
|
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.ui.slide.reveal > .content { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
margin: 0em; |
||||
|
-webkit-transition: |
||||
|
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
-moz-transition: |
||||
|
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
-ms-transition: |
||||
|
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
transition: |
||||
|
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
||||
|
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
||||
|
; |
||||
|
} |
||||
|
.ui.slide.reveal > .visible.content { |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.ui.slide.reveal > .hidden.content { |
||||
|
position: absolute !important; |
||||
|
left: 100% !important; |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
.ui.slide.reveal:hover > .visible.content { |
||||
|
left: -100% !important; |
||||
|
} |
||||
|
.ui.slide.reveal:hover > .hidden.content { |
||||
|
left: 0% !important; |
||||
|
} |
||||
|
|
||||
|
.ui.right.slide.reveal > .visible.content { |
||||
|
left: 0%; |
||||
|
} |
||||
|
.ui.right.slide.reveal > .hidden.content { |
||||
|
left: auto !important; |
||||
|
right: 100% !important; |
||||
|
} |
||||
|
.ui.right.slide.reveal:hover > .visible.content { |
||||
|
left: 100% !important; |
||||
|
right: auto !important; |
||||
|
} |
||||
|
.ui.right.slide.reveal:hover > .hidden.content { |
||||
|
left: auto !important; |
||||
|
right: 0% !important; |
||||
|
} |
||||
|
|
||||
|
.ui.up.slide.reveal > .visible.content { |
||||
|
top: 0% !important; |
||||
|
left: 0% !important; |
||||
|
right: auto !important; |
||||
|
bottom: auto !important; |
||||
|
} |
||||
|
.ui.up.slide.reveal > .hidden.content { |
||||
|
top: 100% !important; |
||||
|
left: 0% !important; |
||||
|
right: auto !important; |
||||
|
bottom: auto !important; |
||||
|
} |
||||
|
.ui.slide.up.reveal:hover > .visible.content { |
||||
|
top: -100% !important; |
||||
|
left: 0% !important; |
||||
|
} |
||||
|
.ui.slide.up.reveal:hover > .hidden.content { |
||||
|
top: 0% !important; |
||||
|
left: 0% !important; |
||||
|
} |
||||
|
|
||||
|
.ui.down.slide.reveal > .visible.content { |
||||
|
top: auto !important; |
||||
|
right: auto !important; |
||||
|
bottom: auto !important; |
||||
|
bottom: 0% !important; |
||||
|
} |
||||
|
.ui.down.slide.reveal > .hidden.content { |
||||
|
top: auto !important; |
||||
|
right: auto !important; |
||||
|
bottom: 100% !important; |
||||
|
left: 0% !important; |
||||
|
} |
||||
|
.ui.slide.down.reveal:hover > .visible.content { |
||||
|
left: 0% !important; |
||||
|
bottom: -100% !important; |
||||
|
} |
||||
|
.ui.slide.down.reveal:hover > .hidden.content { |
||||
|
left: 0% !important; |
||||
|
bottom: 0% !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Fade |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.fade.reveal > .visible.content { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.ui.fade.reveal:hover > .visible.content { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Move |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.move.reveal > .visible.content, |
||||
|
.ui.move.left.reveal > .visible.content { |
||||
|
left: auto !important; |
||||
|
top: auto !important; |
||||
|
bottom: auto !important; |
||||
|
right: 0% !important; |
||||
|
} |
||||
|
.ui.move.reveal:hover > .visible.content, |
||||
|
.ui.move.left.reveal:hover > .visible.content { |
||||
|
right: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.ui.move.right.reveal > .visible.content { |
||||
|
right: auto !important; |
||||
|
top: auto !important; |
||||
|
bottom: auto !important; |
||||
|
left: 0% !important; |
||||
|
} |
||||
|
.ui.move.right.reveal:hover > .visible.content { |
||||
|
left: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.ui.move.up.reveal > .visible.content { |
||||
|
right: auto !important; |
||||
|
left: auto !important; |
||||
|
top: auto !important; |
||||
|
|
||||
|
bottom: 0% !important; |
||||
|
} |
||||
|
.ui.move.up.reveal:hover > .visible.content { |
||||
|
bottom: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.ui.move.down.reveal > .visible.content { |
||||
|
right: auto !important; |
||||
|
left: auto !important; |
||||
|
bottom: auto !important; |
||||
|
|
||||
|
top: 0% !important; |
||||
|
bottom: auto !important; |
||||
|
} |
||||
|
.ui.move.down.reveal:hover > .visible.content { |
||||
|
top: 100% !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Rotate |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.rotate.reveal > .visible.content { |
||||
|
-webkit-transition-duration: 0.8s; |
||||
|
-moz-transition-duration: 0.8s; |
||||
|
-o-transition-duration: 0.8s; |
||||
|
-ms-transition-duration: 0.8s; |
||||
|
transition-duration: 0.8s; |
||||
|
|
||||
|
-webkit-transform: rotate(0deg); |
||||
|
-moz-transform: rotate(0deg); |
||||
|
-o-transform: rotate(0deg); |
||||
|
-ms-transform: rotate(0deg); |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
.ui.rotate.reveal > .visible.content, |
||||
|
.ui.rotate.right.reveal > .visible.content { |
||||
|
-webkit-transform-origin: bottom right; |
||||
|
-moz-transform-origin: bottom right; |
||||
|
-o-transform-origin: bottom right; |
||||
|
-ms-transform-origin: bottom right; |
||||
|
transform-origin: bottom right; |
||||
|
} |
||||
|
.ui.rotate.reveal:hover > .visible.content, |
||||
|
.ui.rotate.right.reveal:hover > .visible.content { |
||||
|
-webkit-transform: rotate(110deg); |
||||
|
-moz-transform: rotate(110deg); |
||||
|
-o-transform: rotate(110deg); |
||||
|
-ms-transform: rotate(110deg); |
||||
|
transform: rotate(110deg); |
||||
|
} |
||||
|
|
||||
|
.ui.rotate.left.reveal > .visible.content { |
||||
|
-webkit-transform-origin: bottom left; |
||||
|
-moz-transform-origin: bottom left; |
||||
|
-o-transform-origin: bottom left; |
||||
|
-ms-transform-origin: bottom left; |
||||
|
transform-origin: bottom left; |
||||
|
} |
||||
|
.ui.rotate.left.reveal:hover > .visible.content { |
||||
|
-webkit-transform: rotate(-110deg); |
||||
|
-moz-transform: rotate(-110deg); |
||||
|
-o-transform: rotate(-110deg); |
||||
|
-ms-transform: rotate(-110deg); |
||||
|
transform: rotate(-110deg); |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.disabled.reveal { |
||||
|
opacity: 1 !important; |
||||
|
} |
||||
|
.ui.disabled.reveal > .content { |
||||
|
-webkit-transition: none !important; |
||||
|
-moz-transition: none !important; |
||||
|
-o-transition: none !important; |
||||
|
-ms-transition: none !important; |
||||
|
transition: none !important; |
||||
|
} |
||||
|
.ui.disabled.reveal:hover > .visible.content { |
||||
|
position: static !important; |
||||
|
display: block !important; |
||||
|
opacity: 1 !important; |
||||
|
top: 0 !important; |
||||
|
left: 0 !important; |
||||
|
right: auto !important; |
||||
|
bottom: auto !important; |
||||
|
transform: none !important; |
||||
|
} |
||||
|
.ui.disabled.reveal:hover > .hidden.content { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Masked |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.masked.reveal { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Instant |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.instant.reveal > .content { |
||||
|
-webkit-transition-delay: 0s !important; |
||||
|
-moz-transition-delay: 0s !important; |
||||
|
-o-transition-delay: 0s !important; |
||||
|
-ms-transition-delay: 0s !important; |
||||
|
transition-delay: 0s !important; |
||||
|
} |
||||
@ -0,0 +1,769 @@ |
|||||
|
/* ****************************** |
||||
|
Search Prompt |
||||
|
Author: Jack Lukic |
||||
|
|
||||
|
Designed to be used as an autocomplete |
||||
|
or to deliver quick inline search results |
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.search = function(source, parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
settings = $.extend(true, {}, $.fn.search.settings, parameters), |
||||
|
|
||||
|
|
||||
|
className = settings.className, |
||||
|
selector = settings.selector, |
||||
|
error = settings.error, |
||||
|
namespace = settings.namespace, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = namespace + '-module', |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
$(this) |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
$prompt = $module.find(selector.prompt), |
||||
|
$searchButton = $module.find(selector.searchButton), |
||||
|
$results = $module.find(selector.results), |
||||
|
$result = $module.find(selector.result), |
||||
|
$category = $module.find(selector.category), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing module'); |
||||
|
var |
||||
|
prompt = $prompt[0], |
||||
|
inputEvent = (prompt.oninput !== undefined) |
||||
|
? 'input' |
||||
|
: (prompt.onpropertychange !== undefined) |
||||
|
? 'propertychange' |
||||
|
: 'keyup' |
||||
|
; |
||||
|
// attach events
|
||||
|
$prompt |
||||
|
.on('focus' + eventNamespace, module.event.focus) |
||||
|
.on('blur' + eventNamespace, module.event.blur) |
||||
|
.on('keydown' + eventNamespace, module.handleKeyboard) |
||||
|
; |
||||
|
if(settings.automatic) { |
||||
|
$prompt |
||||
|
.on(inputEvent + eventNamespace, module.search.throttle) |
||||
|
; |
||||
|
} |
||||
|
$searchButton |
||||
|
.on('click' + eventNamespace, module.search.query) |
||||
|
; |
||||
|
$results |
||||
|
.on('click' + eventNamespace, selector.result, module.results.select) |
||||
|
; |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying instance'); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
}, |
||||
|
event: { |
||||
|
focus: function() { |
||||
|
$module |
||||
|
.addClass(className.focus) |
||||
|
; |
||||
|
module.results.show(); |
||||
|
}, |
||||
|
blur: function() { |
||||
|
module.search.cancel(); |
||||
|
$module |
||||
|
.removeClass(className.focus) |
||||
|
; |
||||
|
module.results.hide(); |
||||
|
} |
||||
|
}, |
||||
|
handleKeyboard: function(event) { |
||||
|
var |
||||
|
// force latest jq dom
|
||||
|
$result = $module.find(selector.result), |
||||
|
$category = $module.find(selector.category), |
||||
|
keyCode = event.which, |
||||
|
keys = { |
||||
|
backspace : 8, |
||||
|
enter : 13, |
||||
|
escape : 27, |
||||
|
upArrow : 38, |
||||
|
downArrow : 40 |
||||
|
}, |
||||
|
activeClass = className.active, |
||||
|
currentIndex = $result.index( $result.filter('.' + activeClass) ), |
||||
|
resultSize = $result.size(), |
||||
|
newIndex |
||||
|
; |
||||
|
// search shortcuts
|
||||
|
if(keyCode == keys.escape) { |
||||
|
module.verbose('Escape key pressed, blurring search field'); |
||||
|
$prompt |
||||
|
.trigger('blur') |
||||
|
; |
||||
|
} |
||||
|
// result shortcuts
|
||||
|
if($results.filter(':visible').size() > 0) { |
||||
|
if(keyCode == keys.enter) { |
||||
|
module.verbose('Enter key pressed, selecting active result'); |
||||
|
if( $result.filter('.' + activeClass).exists() ) { |
||||
|
$.proxy(module.results.select, $result.filter('.' + activeClass) )(); |
||||
|
event.preventDefault(); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
else if(keyCode == keys.upArrow) { |
||||
|
module.verbose('Up key pressed, changing active result'); |
||||
|
newIndex = (currentIndex - 1 < 0) |
||||
|
? currentIndex |
||||
|
: currentIndex - 1 |
||||
|
; |
||||
|
$category |
||||
|
.removeClass(activeClass) |
||||
|
; |
||||
|
$result |
||||
|
.removeClass(activeClass) |
||||
|
.eq(newIndex) |
||||
|
.addClass(activeClass) |
||||
|
.closest($category) |
||||
|
.addClass(activeClass) |
||||
|
; |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
else if(keyCode == keys.downArrow) { |
||||
|
module.verbose('Down key pressed, changing active result'); |
||||
|
newIndex = (currentIndex + 1 >= resultSize) |
||||
|
? currentIndex |
||||
|
: currentIndex + 1 |
||||
|
; |
||||
|
$category |
||||
|
.removeClass(activeClass) |
||||
|
; |
||||
|
$result |
||||
|
.removeClass(activeClass) |
||||
|
.eq(newIndex) |
||||
|
.addClass(activeClass) |
||||
|
.closest($category) |
||||
|
.addClass(activeClass) |
||||
|
; |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
// query shortcuts
|
||||
|
if(keyCode == keys.enter) { |
||||
|
module.verbose('Enter key pressed, executing query'); |
||||
|
module.search.query(); |
||||
|
$searchButton |
||||
|
.addClass(className.down) |
||||
|
; |
||||
|
$prompt |
||||
|
.one('keyup', function(){ |
||||
|
$searchButton |
||||
|
.removeClass(className.down) |
||||
|
; |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
search: { |
||||
|
cancel: function() { |
||||
|
var |
||||
|
xhr = $module.data('xhr') || false |
||||
|
; |
||||
|
if( xhr && xhr.state() != 'resolved') { |
||||
|
module.debug('Cancelling last search'); |
||||
|
xhr.abort(); |
||||
|
} |
||||
|
}, |
||||
|
throttle: function() { |
||||
|
var |
||||
|
searchTerm = $prompt.val(), |
||||
|
numCharacters = searchTerm.length |
||||
|
; |
||||
|
clearTimeout(module.timer); |
||||
|
if(numCharacters >= settings.minCharacters) { |
||||
|
module.timer = setTimeout(module.search.query, settings.searchThrottle); |
||||
|
} |
||||
|
else { |
||||
|
module.results.hide(); |
||||
|
} |
||||
|
}, |
||||
|
query: function() { |
||||
|
var |
||||
|
searchTerm = $prompt.val(), |
||||
|
cachedHTML = module.search.cache.read(searchTerm) |
||||
|
; |
||||
|
if(cachedHTML) { |
||||
|
module.debug("Reading result for '" + searchTerm + "' from cache"); |
||||
|
module.results.add(cachedHTML); |
||||
|
} |
||||
|
else { |
||||
|
module.debug("Querying for '" + searchTerm + "'"); |
||||
|
if(typeof source == 'object') { |
||||
|
module.search.local(searchTerm); |
||||
|
} |
||||
|
else { |
||||
|
module.search.remote(searchTerm); |
||||
|
} |
||||
|
$.proxy(settings.onSearchQuery, $module)(searchTerm); |
||||
|
} |
||||
|
}, |
||||
|
local: function(searchTerm) { |
||||
|
var |
||||
|
results = [], |
||||
|
fullTextResults = [], |
||||
|
searchFields = $.isArray(settings.searchFields) |
||||
|
? settings.searchFields |
||||
|
: [settings.searchFields], |
||||
|
|
||||
|
searchRegExp = new RegExp('(?:\s|^)' + searchTerm, 'i'), |
||||
|
fullTextRegExp = new RegExp(searchTerm, 'i'), |
||||
|
searchHTML |
||||
|
; |
||||
|
$module |
||||
|
.addClass(className.loading) |
||||
|
; |
||||
|
// iterate through search fields in array order
|
||||
|
$.each(searchFields, function(index, field) { |
||||
|
$.each(source, function(label, thing) { |
||||
|
if(typeof thing[field] == 'string' && ($.inArray(thing, results) == -1) && ($.inArray(thing, fullTextResults) == -1) ) { |
||||
|
if( searchRegExp.test( thing[field] ) ) { |
||||
|
results.push(thing); |
||||
|
} |
||||
|
else if( fullTextRegExp.test( thing[field] ) ) { |
||||
|
fullTextResults.push(thing); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
searchHTML = module.results.generate({ |
||||
|
results: $.merge(results, fullTextResults) |
||||
|
}); |
||||
|
$module |
||||
|
.removeClass(className.loading) |
||||
|
; |
||||
|
module.search.cache.write(searchTerm, searchHTML); |
||||
|
module.results.add(searchHTML); |
||||
|
}, |
||||
|
remote: function(searchTerm) { |
||||
|
var |
||||
|
apiSettings = { |
||||
|
stateContext : $module, |
||||
|
url : source, |
||||
|
urlData: { query: searchTerm }, |
||||
|
success : function(response) { |
||||
|
searchHTML = module.results.generate(response); |
||||
|
module.search.cache.write(searchTerm, searchHTML); |
||||
|
module.results.add(searchHTML); |
||||
|
}, |
||||
|
failure : module.error |
||||
|
}, |
||||
|
searchHTML |
||||
|
; |
||||
|
module.search.cancel(); |
||||
|
module.debug('Executing search'); |
||||
|
$.extend(true, apiSettings, settings.apiSettings); |
||||
|
$.api(apiSettings); |
||||
|
}, |
||||
|
|
||||
|
cache: { |
||||
|
read: function(name) { |
||||
|
var |
||||
|
cache = $module.data('cache') |
||||
|
; |
||||
|
return (settings.cache && (typeof cache == 'object') && (cache[name] !== undefined) ) |
||||
|
? cache[name] |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
write: function(name, value) { |
||||
|
var |
||||
|
cache = ($module.data('cache') !== undefined) |
||||
|
? $module.data('cache') |
||||
|
: {} |
||||
|
; |
||||
|
cache[name] = value; |
||||
|
$module |
||||
|
.data('cache', cache) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
results: { |
||||
|
generate: function(response) { |
||||
|
module.debug('Generating html from response', response); |
||||
|
var |
||||
|
template = settings.templates[settings.type], |
||||
|
html = '' |
||||
|
; |
||||
|
if(($.isPlainObject(response.results) && !$.isEmptyObject(response.results)) || ($.isArray(response.results) && response.results.length > 0) ) { |
||||
|
if(settings.maxResults > 0) { |
||||
|
response.results = $.makeArray(response.results).slice(0, settings.maxResults); |
||||
|
} |
||||
|
if(response.results.length > 0) { |
||||
|
if($.isFunction(template)) { |
||||
|
html = template(response); |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.noTemplate, false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
html = module.message(error.noResults, 'empty'); |
||||
|
} |
||||
|
$.proxy(settings.onResults, $module)(response); |
||||
|
return html; |
||||
|
}, |
||||
|
add: function(html) { |
||||
|
if(settings.onResultsAdd == 'default' || $.proxy(settings.onResultsAdd, $results)(html) == 'default') { |
||||
|
$results |
||||
|
.html(html) |
||||
|
; |
||||
|
} |
||||
|
module.results.show(); |
||||
|
}, |
||||
|
show: function() { |
||||
|
if( ($results.filter(':visible').size() === 0) && ($prompt.filter(':focus').size() > 0) && $results.html() !== '') { |
||||
|
$results |
||||
|
.stop() |
||||
|
.fadeIn(200) |
||||
|
; |
||||
|
$.proxy(settings.onResultsOpen, $results)(); |
||||
|
} |
||||
|
}, |
||||
|
hide: function() { |
||||
|
if($results.filter(':visible').size() > 0) { |
||||
|
$results |
||||
|
.stop() |
||||
|
.fadeOut(200) |
||||
|
; |
||||
|
$.proxy(settings.onResultsClose, $results)(); |
||||
|
} |
||||
|
}, |
||||
|
select: function(event) { |
||||
|
module.debug('Search result selected'); |
||||
|
var |
||||
|
$result = $(this), |
||||
|
$title = $result.find('.title'), |
||||
|
title = $title.html() |
||||
|
; |
||||
|
if(settings.onSelect == 'default' || $.proxy(settings.onSelect, this)(event) == 'default') { |
||||
|
var |
||||
|
$link = $result.find('a[href]').eq(0), |
||||
|
href = $link.attr('href') || false, |
||||
|
target = $link.attr('target') || false |
||||
|
; |
||||
|
module.results.hide(); |
||||
|
$prompt |
||||
|
.val(title) |
||||
|
; |
||||
|
if(href) { |
||||
|
if(target == '_blank' || event.ctrlKey) { |
||||
|
window.open(href); |
||||
|
} |
||||
|
else { |
||||
|
window.location.href = (href); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
module.debug('Changing setting', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
module.debug('Changing internal', name, value); |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.search.settings = { |
||||
|
|
||||
|
name : 'Search Module', |
||||
|
namespace : 'search', |
||||
|
|
||||
|
debug : true, |
||||
|
verbose : true, |
||||
|
performance : true, |
||||
|
|
||||
|
// onSelect default action is defined in module
|
||||
|
onSelect : 'default', |
||||
|
onResultsAdd : 'default', |
||||
|
|
||||
|
onSearchQuery : function(){}, |
||||
|
onResults : function(response){}, |
||||
|
|
||||
|
onResultsOpen : function(){}, |
||||
|
onResultsClose : function(){}, |
||||
|
|
||||
|
automatic : 'true', |
||||
|
type : 'simple', |
||||
|
minCharacters : 3, |
||||
|
searchThrottle : 300, |
||||
|
maxResults : 7, |
||||
|
cache : true, |
||||
|
|
||||
|
searchFields : [ |
||||
|
'title', |
||||
|
'description' |
||||
|
], |
||||
|
|
||||
|
// api config
|
||||
|
apiSettings: { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
className: { |
||||
|
active : 'active', |
||||
|
down : 'down', |
||||
|
focus : 'focus', |
||||
|
empty : 'empty', |
||||
|
loading : 'loading' |
||||
|
}, |
||||
|
|
||||
|
error : { |
||||
|
noResults : 'Your search returned no results', |
||||
|
logging : 'Error in debug logging, exiting.', |
||||
|
noTemplate : 'A valid template name was not specified.', |
||||
|
serverError : 'There was an issue with querying the server.', |
||||
|
method : 'The method you called is not defined.' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
prompt : '.prompt', |
||||
|
searchButton : '.search.button', |
||||
|
results : '.results', |
||||
|
category : '.category', |
||||
|
result : '.result' |
||||
|
}, |
||||
|
|
||||
|
templates: { |
||||
|
message: function(message, type) { |
||||
|
var |
||||
|
html = '' |
||||
|
; |
||||
|
if(message !== undefined && type !== undefined) { |
||||
|
html += '' |
||||
|
+ '<div class="message ' + type +'">' |
||||
|
; |
||||
|
// message type
|
||||
|
if(type == 'empty') { |
||||
|
html += '' |
||||
|
+ '<div class="header">No Results</div class="header">' |
||||
|
+ '<div class="description">' + message + '</div class="description">' |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
html += ' <div class="description">' + message + '</div>'; |
||||
|
} |
||||
|
html += '</div>'; |
||||
|
} |
||||
|
return html; |
||||
|
}, |
||||
|
categories: function(response) { |
||||
|
var |
||||
|
html = '' |
||||
|
; |
||||
|
if(response.results !== undefined) { |
||||
|
// each category
|
||||
|
$.each(response.results, function(index, category) { |
||||
|
if(category.results !== undefined && category.results.length > 0) { |
||||
|
html += '' |
||||
|
+ '<div class="category">' |
||||
|
+ '<div class="name">' + category.name + '</div>' |
||||
|
; |
||||
|
// each item inside category
|
||||
|
$.each(category.results, function(index, result) { |
||||
|
html += '<div class="result">'; |
||||
|
html += '<a href="' + result.url + '"></a>'; |
||||
|
if(result.image !== undefined) { |
||||
|
html+= '' |
||||
|
+ '<div class="image">' |
||||
|
+ ' <img src="' + result.image + '">' |
||||
|
+ '</div>' |
||||
|
; |
||||
|
} |
||||
|
html += '<div class="info">'; |
||||
|
if(result.price !== undefined) { |
||||
|
html+= '<div class="price">' + result.price + '</div>'; |
||||
|
} |
||||
|
if(result.title !== undefined) { |
||||
|
html+= '<div class="title">' + result.title + '</div>'; |
||||
|
} |
||||
|
if(result.description !== undefined) { |
||||
|
html+= '<div class="description">' + result.description + '</div>'; |
||||
|
} |
||||
|
html += '' |
||||
|
+ '</div>' |
||||
|
+ '</div>' |
||||
|
; |
||||
|
}); |
||||
|
html += '' |
||||
|
+ '</div>' |
||||
|
; |
||||
|
} |
||||
|
}); |
||||
|
if(response.resultPage) { |
||||
|
html += '' |
||||
|
+ '<a href="' + response.resultPage.url + '" class="all">' |
||||
|
+ response.resultPage.text |
||||
|
+ '</a>'; |
||||
|
} |
||||
|
return html; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
simple: function(response) { |
||||
|
var |
||||
|
html = '' |
||||
|
; |
||||
|
if(response.results !== undefined) { |
||||
|
|
||||
|
// each result
|
||||
|
$.each(response.results, function(index, result) { |
||||
|
html += '<a class="result" href="' + result.url + '">'; |
||||
|
if(result.image !== undefined) { |
||||
|
html+= '' |
||||
|
+ '<div class="image">' |
||||
|
+ ' <img src="' + result.image + '">' |
||||
|
+ '</div>' |
||||
|
; |
||||
|
} |
||||
|
html += '<div class="info">'; |
||||
|
if(result.price !== undefined) { |
||||
|
html+= '<div class="price">' + result.price + '</div>'; |
||||
|
} |
||||
|
if(result.title !== undefined) { |
||||
|
html+= '<div class="title">' + result.title + '</div>'; |
||||
|
} |
||||
|
if(result.description !== undefined) { |
||||
|
html+= '<div class="description">' + result.description + '</div>'; |
||||
|
} |
||||
|
html += '' |
||||
|
+ '</div>' |
||||
|
+ '</a>' |
||||
|
; |
||||
|
}); |
||||
|
|
||||
|
if(response.resultPage) { |
||||
|
html += '' |
||||
|
+ '<a href="' + response.resultPage.url + '" class="all">' |
||||
|
+ response.resultPage.text |
||||
|
+ '</a>'; |
||||
|
} |
||||
|
return html; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,275 @@ |
|||||
|
/* |
||||
|
* # Semantic Search |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Search |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.search { |
||||
|
position: relative; |
||||
|
|
||||
|
text-shadow: none; |
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
.ui.search input { |
||||
|
-webkit-border-radius: 500rem; |
||||
|
-moz-border-radius: 500rem; |
||||
|
border-radius: 500rem; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Button |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.search > .button { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
float: right; |
||||
|
margin: 0px 0px 0px -15px; |
||||
|
padding: 6px 15px 7px; |
||||
|
-webkit-border-radius: 0px 15px 15px 0px; |
||||
|
-moz-border-radius: 0px 15px 15px 0px; |
||||
|
border-radius: 0px 15px 15px 0px; |
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Results |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.search .results { |
||||
|
display: none; |
||||
|
|
||||
|
position: absolute; |
||||
|
z-index: 999; |
||||
|
top: 100%; |
||||
|
left: 0px; |
||||
|
|
||||
|
overflow: hidden; |
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
margin-top: 0.5em; |
||||
|
width: 380px; |
||||
|
font-size: 0.875em; |
||||
|
line-height: 1.2; |
||||
|
color: #555555; |
||||
|
|
||||
|
-webkit-border-radius: 3px; |
||||
|
-moz-border-radius: 3px; |
||||
|
border-radius: 3px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
} |
||||
|
.ui.search .result { |
||||
|
cursor: pointer; |
||||
|
overflow: hidden; |
||||
|
padding: 0.5em 1em; |
||||
|
} |
||||
|
.ui.search .result:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
.ui.search .result .image { |
||||
|
background: #F0F0F0; |
||||
|
margin-right: 10px; |
||||
|
float: left; |
||||
|
overflow: hidden; |
||||
|
-webkit-border-radius: 3px; |
||||
|
-moz-border-radius: 3px; |
||||
|
border-radius: 3px; |
||||
|
width: 38px; |
||||
|
height: 38px; |
||||
|
} |
||||
|
.ui.search .result .image img { |
||||
|
display: block; |
||||
|
width: 38px; |
||||
|
height: 38px; |
||||
|
} |
||||
|
.ui.search .result .image ~ .info { |
||||
|
float: none; |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
|
||||
|
.ui.search .result .info { |
||||
|
float: left; |
||||
|
} |
||||
|
.ui.search .result .title { |
||||
|
font-weight: bold; |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
.ui.search .result .description { |
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
} |
||||
|
.ui.search .result .price { |
||||
|
float: right; |
||||
|
color: #5BBD72; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Message |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.search .message { |
||||
|
padding: 1em; |
||||
|
} |
||||
|
.ui.search .message .text .title { |
||||
|
margin: 0em 0em 0.5rem; |
||||
|
|
||||
|
font-size: 1.25rem; |
||||
|
font-weight: bold; |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
.ui.search .message .text .description { |
||||
|
margin: 0em; |
||||
|
font-size: 1rem; |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Categories |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.search .results .category { |
||||
|
background-color: #FAFAFA; |
||||
|
|
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
-webkit-transition: background 0.2s ease-in; |
||||
|
-moz-transition: background 0.2s ease-in; |
||||
|
-o-transition: background 0.2s ease-in; |
||||
|
-ms-transition: background 0.2s ease-in; |
||||
|
transition: background 0.2s ease-in; |
||||
|
} |
||||
|
.ui.search .results .category:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
.ui.search .results .category > .name { |
||||
|
float: left; |
||||
|
padding: 12px 0px 0px 8px; |
||||
|
font-weight: bold; |
||||
|
color: #777777; |
||||
|
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
||||
|
} |
||||
|
.ui.search .results .category .result { |
||||
|
background-color: #FFFFFF; |
||||
|
margin-left: 80px; |
||||
|
border-left: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* View All Results */ |
||||
|
.ui.search .all { |
||||
|
display: block; |
||||
|
|
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
background-color: #FAFAFA; |
||||
|
height: 2em; |
||||
|
line-height: 2em; |
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Hover |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.search .result:hover, |
||||
|
.ui.search .category .result:hover { |
||||
|
background-color: #F8F8F8; |
||||
|
} |
||||
|
.ui.search .all:hover { |
||||
|
background-color: #F0F0F0; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Loading |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.search.loading .input .icon { |
||||
|
background: url(../images/loader-mini.gif) no-repeat 50% 50%; |
||||
|
} |
||||
|
.ui.search.loading .input .icon:before, |
||||
|
.ui.search.loading .input .icon:after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Active |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.search .results .category.active { |
||||
|
background-color: #F1F1F1; |
||||
|
} |
||||
|
.ui.search .results .category.active > .name { |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.ui.search .result.active, |
||||
|
.ui.search .category .result.active { |
||||
|
background-color: #FBFBFB; |
||||
|
} |
||||
|
.ui.search .result.active .title { |
||||
|
color: #000000; |
||||
|
} |
||||
|
.ui.search .result.active .description { |
||||
|
color: #555555; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* Large */ |
||||
|
.ui.search .large.result .image, |
||||
|
.ui.search .large.result .image img { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
} |
||||
|
.ui.search .large.results .indented.info { |
||||
|
margin-left: 65px; |
||||
|
} |
||||
|
.ui.search .large.results .info .title { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.ui.search .large.results .info .description { |
||||
|
font-size: 11px; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,776 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Shape |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
An experimental plugin for manipulating 3D shapes on a 2D plane |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.shape = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
settings = $.extend(true, {}, $.fn.shape.settings, parameters), |
||||
|
|
||||
|
// internal aliases
|
||||
|
namespace = settings.namespace, |
||||
|
selector = settings.selector, |
||||
|
error = settings.error, |
||||
|
className = settings.className, |
||||
|
|
||||
|
// define namespaces for modules
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// selector cache
|
||||
|
$module = $(this), |
||||
|
$sides = $module.find(selector.sides), |
||||
|
$side = $module.find(selector.side), |
||||
|
|
||||
|
// private variables
|
||||
|
$activeSide, |
||||
|
$nextSide, |
||||
|
|
||||
|
// standard module
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing module for', element); |
||||
|
module.set.defaultSide(); |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
module.verbose('Refreshing selector cache for', element); |
||||
|
$module = $(element); |
||||
|
$sides = $(this).find(selector.shape); |
||||
|
$side = $(this).find(selector.side); |
||||
|
}, |
||||
|
|
||||
|
repaint: function() { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
var |
||||
|
shape = $sides.get(0) || document.createElement('div'), |
||||
|
fakeAssignment = shape.offsetWidth |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
animate: function(propertyObject, callback) { |
||||
|
module.verbose('Animating box with properties', propertyObject); |
||||
|
callback = callback || function(event) { |
||||
|
module.verbose('Executing animation callback'); |
||||
|
if(event !== undefined) { |
||||
|
event.stopPropagation(); |
||||
|
} |
||||
|
module.reset(); |
||||
|
module.set.active(); |
||||
|
}; |
||||
|
if(settings.useCSS) { |
||||
|
if(module.get.transitionEvent()) { |
||||
|
module.verbose('Starting CSS animation'); |
||||
|
$module |
||||
|
.addClass(className.animating) |
||||
|
; |
||||
|
module.set.stageSize(); |
||||
|
module.repaint(); |
||||
|
$module |
||||
|
.addClass(className.css) |
||||
|
; |
||||
|
$activeSide |
||||
|
.addClass(className.hidden) |
||||
|
; |
||||
|
$sides |
||||
|
.css(propertyObject) |
||||
|
.one(module.get.transitionEvent(), callback) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
callback(); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
// not yet supported until .animate() is extended to allow RotateX/Y
|
||||
|
module.verbose('Starting javascript animation'); |
||||
|
$module |
||||
|
.addClass(className.animating) |
||||
|
.removeClass(className.css) |
||||
|
; |
||||
|
module.set.stageSize(); |
||||
|
module.repaint(); |
||||
|
$activeSide |
||||
|
.animate({ |
||||
|
opacity: 0 |
||||
|
}, settings.duration, settings.easing) |
||||
|
; |
||||
|
$sides |
||||
|
.animate(propertyObject, settings.duration, settings.easing, callback) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
queue: function(method) { |
||||
|
module.debug('Queueing animation of', method); |
||||
|
$sides |
||||
|
.one(module.get.transitionEvent(), function() { |
||||
|
module.debug('Executing queued animation'); |
||||
|
setTimeout(function(){ |
||||
|
$module.shape(method); |
||||
|
}, 0); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
reset: function() { |
||||
|
module.verbose('Animating states reset'); |
||||
|
$module |
||||
|
.removeClass(className.css) |
||||
|
.removeClass(className.animating) |
||||
|
.attr('style', '') |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
// removeAttr style does not consistently work in safari
|
||||
|
$sides |
||||
|
.attr('style', '') |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
$side |
||||
|
.attr('style', '') |
||||
|
.removeAttr('style') |
||||
|
.removeClass(className.hidden) |
||||
|
; |
||||
|
$nextSide |
||||
|
.removeClass(className.animating) |
||||
|
.attr('style', '') |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
animating: function() { |
||||
|
return $module.hasClass(className.animating); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
transform: { |
||||
|
up: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
z: -($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
down: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
z: -($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
left: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), |
||||
|
z : -($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
right: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), |
||||
|
z : -($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
over: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
back: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)' |
||||
|
}; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
transitionEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('element'), |
||||
|
transitions = { |
||||
|
'transition' :'transitionend', |
||||
|
'OTransition' :'oTransitionEnd', |
||||
|
'MozTransition' :'transitionend', |
||||
|
'WebkitTransition' :'webkitTransitionEnd' |
||||
|
}, |
||||
|
transition |
||||
|
; |
||||
|
for(transition in transitions){ |
||||
|
if( element.style[transition] !== undefined ){ |
||||
|
return transitions[transition]; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
nextSide: function() { |
||||
|
return ( $activeSide.next(selector.side).size() > 0 ) |
||||
|
? $activeSide.next(selector.side) |
||||
|
: $module.find(selector.side).first() |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
|
||||
|
defaultSide: function() { |
||||
|
$activeSide = $module.find('.' + settings.className.active); |
||||
|
$nextSide = ( $activeSide.next(selector.side).size() > 0 ) |
||||
|
? $activeSide.next(selector.side) |
||||
|
: $module.find(selector.side).first() |
||||
|
; |
||||
|
module.verbose('Active side set to', $activeSide); |
||||
|
module.verbose('Next side set to', $nextSide); |
||||
|
}, |
||||
|
|
||||
|
stageSize: function() { |
||||
|
var |
||||
|
stage = { |
||||
|
width : $nextSide.outerWidth(), |
||||
|
height : $nextSide.outerHeight() |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Resizing stage to fit new content', stage); |
||||
|
$module |
||||
|
.css({ |
||||
|
width : stage.width, |
||||
|
height : stage.height |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
nextSide: function(selector) { |
||||
|
$nextSide = $module.find(selector); |
||||
|
if($nextSide.size() === 0) { |
||||
|
module.error(error.side); |
||||
|
} |
||||
|
module.verbose('Next side manually set to', $nextSide); |
||||
|
}, |
||||
|
|
||||
|
active: function() { |
||||
|
module.verbose('Setting new side to active', $nextSide); |
||||
|
$side |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
$.proxy(settings.onChange, $nextSide)(); |
||||
|
module.set.defaultSide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
flip: { |
||||
|
|
||||
|
up: function() { |
||||
|
module.debug('Flipping up', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.above(); |
||||
|
module.animate( module.get.transform.up() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip up'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
down: function() { |
||||
|
module.debug('Flipping down', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.below(); |
||||
|
module.animate( module.get.transform.down() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip down'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
left: function() { |
||||
|
module.debug('Flipping left', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.left(); |
||||
|
module.animate(module.get.transform.left() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip left'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
right: function() { |
||||
|
module.debug('Flipping right', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.right(); |
||||
|
module.animate(module.get.transform.right() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip right'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
over: function() { |
||||
|
module.debug('Flipping over', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.behind(); |
||||
|
module.animate(module.get.transform.over() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip over'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
back: function() { |
||||
|
module.debug('Flipping back', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.behind(); |
||||
|
module.animate(module.get.transform.back() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip back'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
stage: { |
||||
|
|
||||
|
above: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerHeight() / 2), |
||||
|
next : ($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as above', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'top' : box.origin + 'px', |
||||
|
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
below: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerHeight() / 2), |
||||
|
next : ($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as below', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'top' : box.origin + 'px', |
||||
|
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
left: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerWidth() / 2), |
||||
|
next : ($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as left', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'left' : box.origin + 'px', |
||||
|
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
right: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerWidth() / 2), |
||||
|
next : ($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as left', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'left' : box.origin + 'px', |
||||
|
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
behind: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerWidth() / 2), |
||||
|
next : ($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as behind', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'left' : box.origin + 'px', |
||||
|
'transform' : 'rotateY(-180deg)' |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.shape.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
moduleName : 'Shape Module', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : true, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : true, |
||||
|
|
||||
|
// performance data output
|
||||
|
performance: true, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'shape', |
||||
|
|
||||
|
// callback occurs on side change
|
||||
|
beforeChange : function() {}, |
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// use css animation (currently only true is supported)
|
||||
|
useCSS : true, |
||||
|
|
||||
|
// animation duration (useful only with future js animations)
|
||||
|
duration : 1000, |
||||
|
easing : 'easeInOutQuad', |
||||
|
|
||||
|
// possible errors
|
||||
|
error: { |
||||
|
side : 'You tried to switch to a side that does not exist.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// classnames used
|
||||
|
className : { |
||||
|
css : 'css', |
||||
|
animating : 'animating', |
||||
|
hidden : 'hidden', |
||||
|
active : 'active' |
||||
|
}, |
||||
|
|
||||
|
// selectors used
|
||||
|
selector : { |
||||
|
sides : '.sides', |
||||
|
side : '.side' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,115 @@ |
|||||
|
/* |
||||
|
* # Semantic Button |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Shape |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.shape { |
||||
|
position: relative; |
||||
|
|
||||
|
-webkit-perspective: 2000px; |
||||
|
-moz-perspective: 2000px; |
||||
|
-ms-perspective: 2000px; |
||||
|
perspective: 2000px; |
||||
|
} |
||||
|
|
||||
|
.ui.shape .sides { |
||||
|
-webkit-transform-style: preserve-3d; |
||||
|
-moz-transform-style: preserve-3d; |
||||
|
-ms-transform-style: preserve-3d; |
||||
|
transform-style: preserve-3d; |
||||
|
} |
||||
|
|
||||
|
.ui.shape .side { |
||||
|
opacity: 1; |
||||
|
width: 100%; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
-moz-backface-visibility: hidden; |
||||
|
-ms-backface-visibility: hidden; |
||||
|
backface-visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.ui.shape .side { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Animating |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.shape.animating .sides { |
||||
|
position: absolute; |
||||
|
} |
||||
|
.ui.shape .animating.side { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
.ui.shape .hidden.side { |
||||
|
opacity: 0.4; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
CSS |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.shape.css { |
||||
|
-webkit-transition: |
||||
|
all 0.6s ease-in-out; |
||||
|
; |
||||
|
-moz-transition: |
||||
|
all 0.6s ease-in-out; |
||||
|
; |
||||
|
-o-transition: |
||||
|
all 0.6s ease-in-out; |
||||
|
; |
||||
|
-ms-transition: |
||||
|
all 0.6s ease-in-out; |
||||
|
; |
||||
|
transition: |
||||
|
all 0.6s ease-in-out; |
||||
|
; |
||||
|
} |
||||
|
.ui.shape.css .sides { |
||||
|
-webkit-transition: all 0.6s ease-in-out; |
||||
|
-moz-transition: all 0.6s ease-in-out; |
||||
|
-o-transition: all 0.6s ease-in-out; |
||||
|
-ms-transition: all 0.6s ease-in-out; |
||||
|
transition: all 0.6s ease-in-out; |
||||
|
} |
||||
|
.ui.shape.css .side { |
||||
|
-webkit-transition: opacity 0.6s ease-in-out; |
||||
|
-moz-transition: opacity 0.6s ease-in-out; |
||||
|
-o-transition: opacity 0.6s ease-in-out; |
||||
|
-ms-transition: opacity 0.6s ease-in-out; |
||||
|
transition: opacity 0.6s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Active |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.shape .active.side { |
||||
|
display: block; |
||||
|
} |
||||
@ -0,0 +1,489 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Dropdown |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit May 25, 2013 |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.sidebar = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = ( $.isPlainObject(parameters) ) |
||||
|
? $.extend(true, {}, $.fn.sidebar.settings, parameters) |
||||
|
: $.fn.sidebar.settings, |
||||
|
|
||||
|
selector = settings.selector, |
||||
|
className = settings.className, |
||||
|
namespace = settings.namespace, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = 'module-' + namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
|
||||
|
$body = $('body'), |
||||
|
$head = $('head'), |
||||
|
$style = $('style[title=' + namespace + ']'), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.debug('Initializing sidebar', $module); |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', $module); |
||||
|
$module |
||||
|
.off(eventNamespace) |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
module.verbose('Refreshing selector cache'); |
||||
|
$style = $('style[title=' + namespace + ']'); |
||||
|
}, |
||||
|
|
||||
|
attach: { |
||||
|
|
||||
|
events: function(selector, event) { |
||||
|
var |
||||
|
$toggle = $(selector) |
||||
|
; |
||||
|
event = $.isFunction(module[event]) |
||||
|
? module[event] |
||||
|
: module.toggle |
||||
|
; |
||||
|
if($toggle.size() > 0) { |
||||
|
module.debug('Attaching sidebar events to element', selector, event); |
||||
|
$toggle |
||||
|
.off(eventNamespace) |
||||
|
.on('click' + eventNamespace, event) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.notFound); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
show: function() { |
||||
|
module.debug('Showing sidebar'); |
||||
|
if(module.is.closed()) { |
||||
|
if(!settings.overlay) { |
||||
|
module.pushPage(); |
||||
|
} |
||||
|
module.set.active(); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Sidebar is already visible'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
hide: function() { |
||||
|
if(module.is.open()) { |
||||
|
if(!settings.overlay) { |
||||
|
module.pullPage(); |
||||
|
module.remove.pushed(); |
||||
|
} |
||||
|
module.remove.active(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
toggle: function() { |
||||
|
if(module.is.closed()) { |
||||
|
module.show(); |
||||
|
} |
||||
|
else { |
||||
|
module.hide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
pushPage: function() { |
||||
|
var |
||||
|
direction = module.get.direction(), |
||||
|
distance = (module.is.vertical()) |
||||
|
? $module.outerHeight() |
||||
|
: $module.outerWidth() |
||||
|
; |
||||
|
if(settings.useCSS) { |
||||
|
module.debug('Using CSS to animate body'); |
||||
|
module.add.bodyCSS(direction, distance); |
||||
|
module.set.pushed(); |
||||
|
} |
||||
|
else { |
||||
|
module.animatePage(direction, distance, module.set.pushed); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
pullPage: function() { |
||||
|
var |
||||
|
direction = module.get.direction() |
||||
|
; |
||||
|
if(settings.useCSS) { |
||||
|
module.debug('Resetting body position css'); |
||||
|
module.remove.bodyCSS(); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Resetting body position using javascript'); |
||||
|
module.animatePage(direction, 0); |
||||
|
} |
||||
|
module.remove.pushed(); |
||||
|
}, |
||||
|
|
||||
|
animatePage: function(direction, distance) { |
||||
|
var |
||||
|
animateSettings = {} |
||||
|
; |
||||
|
animateSettings['padding-' + direction] = distance; |
||||
|
module.debug('Using javascript to animate body', animateSettings); |
||||
|
$body |
||||
|
.animate(animateSettings, settings.duration, module.set.pushed) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
add: { |
||||
|
bodyCSS: function(direction, distance) { |
||||
|
var |
||||
|
style |
||||
|
; |
||||
|
if(direction !== className.bottom) { |
||||
|
style = '' |
||||
|
+ '<style title="' + namespace + '">' |
||||
|
+ 'body.pushed {' |
||||
|
+ ' margin-' + direction + ': ' + distance + 'px !important;' |
||||
|
+ '}' |
||||
|
+ '</style>' |
||||
|
; |
||||
|
} |
||||
|
$head.append(style); |
||||
|
module.debug('Adding body css to head', $style); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
remove: { |
||||
|
bodyCSS: function() { |
||||
|
module.debug('Removing body css styles', $style); |
||||
|
module.refresh(); |
||||
|
$style.remove(); |
||||
|
}, |
||||
|
active: function() { |
||||
|
$module.removeClass(className.active); |
||||
|
}, |
||||
|
pushed: function() { |
||||
|
module.verbose('Removing body push state', module.get.direction()); |
||||
|
$body |
||||
|
.removeClass(className[ module.get.direction() ]) |
||||
|
.removeClass(className.pushed) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
active: function() { |
||||
|
$module.addClass(className.active); |
||||
|
}, |
||||
|
pushed: function() { |
||||
|
module.verbose('Adding body push state', module.get.direction()); |
||||
|
$body |
||||
|
.addClass(className[ module.get.direction() ]) |
||||
|
.addClass(className.pushed) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
direction: function() { |
||||
|
if($module.hasClass(className.top)) { |
||||
|
return className.top; |
||||
|
} |
||||
|
else if($module.hasClass(className.right)) { |
||||
|
return className.right; |
||||
|
} |
||||
|
else if($module.hasClass(className.bottom)) { |
||||
|
return className.bottom; |
||||
|
} |
||||
|
else { |
||||
|
return className.left; |
||||
|
} |
||||
|
}, |
||||
|
transitionEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('element'), |
||||
|
transitions = { |
||||
|
'transition' :'transitionend', |
||||
|
'OTransition' :'oTransitionEnd', |
||||
|
'MozTransition' :'transitionend', |
||||
|
'WebkitTransition' :'webkitTransitionEnd' |
||||
|
}, |
||||
|
transition |
||||
|
; |
||||
|
for(transition in transitions){ |
||||
|
if( element.style[transition] !== undefined ){ |
||||
|
return transitions[transition]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
open: function() { |
||||
|
return $module.is(':animated') || $module.hasClass(className.active); |
||||
|
}, |
||||
|
closed: function() { |
||||
|
return !module.is.open(); |
||||
|
}, |
||||
|
vertical: function() { |
||||
|
return $module.hasClass(className.top); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.sidebar.settings = { |
||||
|
|
||||
|
name : 'Sidebar', |
||||
|
namespace : 'sidebar', |
||||
|
|
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
|
||||
|
useCSS : true, |
||||
|
overlay : false, |
||||
|
duration : 300, |
||||
|
|
||||
|
side : 'left', |
||||
|
|
||||
|
onChange : function(){}, |
||||
|
onShow : function(){}, |
||||
|
onHide : function(){}, |
||||
|
|
||||
|
className: { |
||||
|
active : 'active', |
||||
|
pushed : 'pushed', |
||||
|
top : 'top', |
||||
|
left : 'left', |
||||
|
right : 'right', |
||||
|
bottom : 'bottom' |
||||
|
}, |
||||
|
|
||||
|
error : { |
||||
|
method : 'The method you called is not defined.', |
||||
|
notFound : 'There were no elements that matched the specified selector' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,147 @@ |
|||||
|
/******************************* |
||||
|
Semantic Module: Sidebar |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
Sidebar Menu System |
||||
|
*******************************/ |
||||
|
|
||||
|
/******************************* |
||||
|
Sidebar |
||||
|
*******************************/ |
||||
|
|
||||
|
body { |
||||
|
-webkit-transition: |
||||
|
margin 0.3s ease, |
||||
|
-webkit-transform 0.3s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
margin 0.3s ease, |
||||
|
-moz-transform 0.3s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
margin 0.3s ease, |
||||
|
transform 0.3s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
margin 0.3s ease, |
||||
|
transform 0.3s ease |
||||
|
; |
||||
|
transition: |
||||
|
margin 0.3s ease, |
||||
|
transform 0.3s ease |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
.ui.sidebar { |
||||
|
position: fixed; |
||||
|
|
||||
|
margin: 0 !important; |
||||
|
|
||||
|
width: 275px !important; |
||||
|
height: 100% !important; |
||||
|
|
||||
|
-webkit-border-radius: 0px !important; |
||||
|
-moz-border-radius: 0px !important; |
||||
|
border-radius: 0px !important; |
||||
|
|
||||
|
-ms-overflow-y: auto; |
||||
|
overflow-y: auto; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
z-index: 999; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
margin-left 0.3s ease, |
||||
|
margin-top 0.3s ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
margin-left 0.3s ease, |
||||
|
margin-top 0.3s ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
margin-left 0.3s ease, |
||||
|
margin-top 0.3s ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
margin-left 0.3s ease, |
||||
|
margin-top 0.3s ease |
||||
|
; |
||||
|
transition: |
||||
|
margin-left 0.3s ease, |
||||
|
margin-top 0.3s ease |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.sidebar { |
||||
|
margin-left: -275px !important; |
||||
|
} |
||||
|
|
||||
|
.ui.right.sidebar { |
||||
|
left: 100%; |
||||
|
margin: 0px !important; |
||||
|
} |
||||
|
|
||||
|
.ui.top.sidebar { |
||||
|
margin: -40px 0px 0px 0px !important; |
||||
|
width: 100% !important; |
||||
|
height: 40px !important; |
||||
|
} |
||||
|
|
||||
|
.ui.bottom.sidebar { |
||||
|
width: 100% !important; |
||||
|
height: 40px !important; |
||||
|
top: 100%; |
||||
|
margin: 0px !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.active.sidebar { |
||||
|
margin-left: 0px !important; |
||||
|
} |
||||
|
.ui.active.right.sidebar { |
||||
|
margin-left: -275px !important; |
||||
|
} |
||||
|
|
||||
|
.ui.active.top.sidebar { |
||||
|
margin-top: 0px !important; |
||||
|
} |
||||
|
.ui.active.bottom.sidebar { |
||||
|
margin-top: -40px !important; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.floating.sidebar { |
||||
|
-webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
||||
|
-moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
||||
|
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
.ui.right.floating.sidebar { |
||||
|
-webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
||||
|
-moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
||||
|
box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
.ui.top.floating.sidebar { |
||||
|
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
||||
|
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
||||
|
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
.ui.bottom.floating.sidebar { |
||||
|
-webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
||||
|
-moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
||||
|
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
@ -0,0 +1,674 @@ |
|||||
|
/* ****************************** |
||||
|
Module - Tabs |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit Aug 15, 2012 |
||||
|
|
||||
|
History based tab navigation |
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.tab = function(parameters) { |
||||
|
|
||||
|
var |
||||
|
settings = $.extend(true, {}, $.fn.tab.settings, parameters), |
||||
|
|
||||
|
$module = $(this), |
||||
|
$tabs = $(settings.context).find(settings.selector.tabs), |
||||
|
|
||||
|
moduleSelector = $module.selector || '', |
||||
|
|
||||
|
cache = {}, |
||||
|
firstLoad = true, |
||||
|
recursionDepth = 0, |
||||
|
|
||||
|
activeTabPath, |
||||
|
parameterArray, |
||||
|
historyEvent, |
||||
|
|
||||
|
element = this, |
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
className = settings.className, |
||||
|
metadata = settings.metadata, |
||||
|
error = settings.error, |
||||
|
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = settings.namespace + '-module', |
||||
|
|
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (instance !== undefined && typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
|
||||
|
module, |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.debug('Initializing Tabs', $module); |
||||
|
// attach history events
|
||||
|
if(settings.history) { |
||||
|
if( $.address === undefined ) { |
||||
|
module.error(error.state); |
||||
|
return false; |
||||
|
} |
||||
|
else if(settings.path === false) { |
||||
|
module.error(error.path); |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
if(settings.auto) { |
||||
|
settings.apiSettings = { |
||||
|
url: settings.path + '/{$tab}' |
||||
|
}; |
||||
|
} |
||||
|
module.verbose('Address library found adding state change event'); |
||||
|
$.address |
||||
|
.state(settings.path) |
||||
|
.unbind('change') |
||||
|
.bind('change', module.event.history.change) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
// attach events if navigation wasn't set to window
|
||||
|
if( !$.isWindow( element ) ) { |
||||
|
$module |
||||
|
.on('click' + eventNamespace, module.event.click) |
||||
|
; |
||||
|
} |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function () { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.debug('Destroying tabs', $module); |
||||
|
$module |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
event: { |
||||
|
click: function() { |
||||
|
module.debug('Navigation clicked'); |
||||
|
var |
||||
|
tabPath = $(this).data(metadata.tab) |
||||
|
; |
||||
|
if(tabPath !== undefined) { |
||||
|
if(settings.history) { |
||||
|
$.address.value(tabPath); |
||||
|
} |
||||
|
else { |
||||
|
module.changeTab(tabPath); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
module.debug('No tab specified'); |
||||
|
} |
||||
|
}, |
||||
|
history: { |
||||
|
change: function(event) { |
||||
|
var |
||||
|
tabPath = event.pathNames.join('/') || module.get.initialPath(), |
||||
|
pageTitle = settings.templates.determineTitle(tabPath) || false |
||||
|
; |
||||
|
module.debug('History change event', tabPath, event); |
||||
|
historyEvent = event; |
||||
|
if(tabPath !== undefined) { |
||||
|
module.changeTab(tabPath); |
||||
|
} |
||||
|
if(pageTitle) { |
||||
|
$.address.title(pageTitle); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
if(activeTabPath) { |
||||
|
module.debug('Refreshing tab', activeTabPath); |
||||
|
module.changeTab(activeTabPath); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
cache: { |
||||
|
|
||||
|
read: function(cacheKey) { |
||||
|
return (cacheKey !== undefined) |
||||
|
? cache[cacheKey] |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
add: function(cacheKey, content) { |
||||
|
cacheKey = cacheKey || activeTabPath; |
||||
|
module.debug('Adding cached content for', cacheKey); |
||||
|
cache[cacheKey] = content; |
||||
|
}, |
||||
|
remove: function(cacheKey) { |
||||
|
cacheKey = cacheKey || activeTabPath; |
||||
|
module.debug('Removing cached content for', cacheKey); |
||||
|
delete cache[cacheKey]; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
changeTab: function(tabPath) { |
||||
|
var |
||||
|
pushStateAvailable = (window.history && window.history.pushState), |
||||
|
shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), |
||||
|
remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ), |
||||
|
// only get default path if not remote content
|
||||
|
pathArray = (remoteContent && !shouldIgnoreLoad) |
||||
|
? module.utilities.pathToArray(tabPath) |
||||
|
: module.get.defaultPathArray(tabPath), |
||||
|
tabPath = module.utilities.arrayToPath(pathArray) |
||||
|
; |
||||
|
module.deactivate.all(); |
||||
|
$.each(pathArray, function(index, tab) { |
||||
|
var |
||||
|
currentPathArray = pathArray.slice(0, index + 1), |
||||
|
currentPath = module.utilities.arrayToPath(currentPathArray), |
||||
|
|
||||
|
isTab = module.is.tab(currentPath), |
||||
|
isLastIndex = (index + 1 == pathArray.length), |
||||
|
|
||||
|
$tab = module.get.tabElement(currentPath), |
||||
|
nextPathArray, |
||||
|
nextPath, |
||||
|
isLastTab |
||||
|
; |
||||
|
module.verbose('Looking for tab', tab); |
||||
|
if(isTab) { |
||||
|
module.verbose('Tab was found', tab); |
||||
|
|
||||
|
// scope up
|
||||
|
activeTabPath = currentPath; |
||||
|
parameterArray = module.utilities.filterArray(pathArray, currentPathArray); |
||||
|
|
||||
|
if(isLastIndex) { |
||||
|
isLastTab = true; |
||||
|
} |
||||
|
else { |
||||
|
nextPathArray = pathArray.slice(0, index + 2); |
||||
|
nextPath = module.utilities.arrayToPath(nextPathArray); |
||||
|
isLastTab = ( !module.is.tab(nextPath) ); |
||||
|
if(isLastTab) { |
||||
|
module.verbose('Tab parameters found', nextPathArray); |
||||
|
} |
||||
|
} |
||||
|
if(isLastTab && remoteContent) { |
||||
|
if(!shouldIgnoreLoad) { |
||||
|
module.activate.navigation(currentPath); |
||||
|
module.content.fetch(currentPath, tabPath); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Ignoring remote content on first tab load', currentPath); |
||||
|
firstLoad = false; |
||||
|
module.cache.add(tabPath, $tab.html()); |
||||
|
module.activate.all(currentPath); |
||||
|
$.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); |
||||
|
$.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Opened local tab', currentPath); |
||||
|
module.activate.all(currentPath); |
||||
|
$.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.missingTab, tab); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
content: { |
||||
|
|
||||
|
fetch: function(tabPath, fullTabPath) { |
||||
|
var |
||||
|
$tab = module.get.tabElement(tabPath), |
||||
|
fullTabPath = fullTabPath || tabPath, |
||||
|
cachedContent = module.cache.read(fullTabPath), |
||||
|
apiSettings = { |
||||
|
dataType : 'html', |
||||
|
stateContext : $tab, |
||||
|
success : function(response) { |
||||
|
module.cache.add(fullTabPath, response); |
||||
|
module.content.update(tabPath, response); |
||||
|
if(tabPath == activeTabPath) { |
||||
|
module.debug('Content loaded', tabPath); |
||||
|
module.activate.tab(tabPath); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Content loaded in background', tabPath); |
||||
|
} |
||||
|
$.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); |
||||
|
$.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); |
||||
|
}, |
||||
|
urlData: { tab: fullTabPath } |
||||
|
}, |
||||
|
request = $tab.data(metadata.promise) || false, |
||||
|
existingRequest = ( request && request.state() === 'pending' ) |
||||
|
; |
||||
|
if(settings.cache && cachedContent) { |
||||
|
module.debug('Showing existing content', fullTabPath); |
||||
|
module.content.update(tabPath, cachedContent); |
||||
|
module.activate.tab(tabPath); |
||||
|
$.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); |
||||
|
} |
||||
|
else if(existingRequest) { |
||||
|
module.debug('Content is already loading', fullTabPath); |
||||
|
$tab |
||||
|
.addClass(className.loading) |
||||
|
; |
||||
|
} |
||||
|
else if($.api !== undefined) { |
||||
|
module.debug('Retrieving remote content', fullTabPath); |
||||
|
$.api( $.extend(true, { headers: { 'X-Remote': true } }, settings.apiSettings, apiSettings) ); |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.api); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
update: function(tabPath, html) { |
||||
|
module.debug('Updating html for', tabPath); |
||||
|
var |
||||
|
$tab = module.get.tabElement(tabPath) |
||||
|
; |
||||
|
$tab |
||||
|
.html(html) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
activate: { |
||||
|
all: function(tabPath) { |
||||
|
module.activate.tab(tabPath); |
||||
|
module.activate.navigation(tabPath); |
||||
|
}, |
||||
|
tab: function(tabPath) { |
||||
|
var |
||||
|
$tab = module.get.tabElement(tabPath) |
||||
|
; |
||||
|
module.verbose('Showing tab content for', $tab); |
||||
|
$tab.addClass(className.active); |
||||
|
}, |
||||
|
navigation: function(tabPath) { |
||||
|
var |
||||
|
$navigation = module.get.navElement(tabPath) |
||||
|
; |
||||
|
module.verbose('Activating tab navigation for', $navigation, tabPath); |
||||
|
$navigation.addClass(className.active); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
deactivate: { |
||||
|
all: function() { |
||||
|
module.deactivate.navigation(); |
||||
|
module.deactivate.tabs(); |
||||
|
}, |
||||
|
navigation: function() { |
||||
|
$module |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
}, |
||||
|
tabs: function() { |
||||
|
$tabs |
||||
|
.removeClass(className.active + ' ' + className.loading) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
tab: function(tabName) { |
||||
|
return (tabName !== undefined) |
||||
|
? ( module.get.tabElement(tabName).size() > 0 ) |
||||
|
: false |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
initialPath: function() { |
||||
|
return $module.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab); |
||||
|
}, |
||||
|
path: function() { |
||||
|
return $.address.value(); |
||||
|
}, |
||||
|
// adds default tabs to tab path
|
||||
|
defaultPathArray: function(tabPath) { |
||||
|
return module.utilities.pathToArray( module.get.defaultPath(tabPath) ); |
||||
|
}, |
||||
|
defaultPath: function(tabPath) { |
||||
|
var |
||||
|
$defaultNav = $module.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0), |
||||
|
defaultTab = $defaultNav.data(metadata.tab) || false |
||||
|
; |
||||
|
if( defaultTab ) { |
||||
|
module.debug('Found default tab', defaultTab); |
||||
|
if(recursionDepth < settings.maxDepth) { |
||||
|
recursionDepth++; |
||||
|
return module.get.defaultPath(defaultTab); |
||||
|
} |
||||
|
module.error(error.recursion); |
||||
|
} |
||||
|
else { |
||||
|
module.debug('No default tabs found for', tabPath); |
||||
|
} |
||||
|
recursionDepth = 0; |
||||
|
return tabPath; |
||||
|
}, |
||||
|
navElement: function(tabPath) { |
||||
|
tabPath = tabPath || activeTabPath; |
||||
|
return $module.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); |
||||
|
}, |
||||
|
tabElement: function(tabPath) { |
||||
|
var |
||||
|
$fullPathTab, |
||||
|
$simplePathTab, |
||||
|
tabPathArray, |
||||
|
lastTab |
||||
|
; |
||||
|
tabPath = tabPath || activeTabPath; |
||||
|
tabPathArray = module.utilities.pathToArray(tabPath); |
||||
|
lastTab = module.utilities.last(tabPathArray); |
||||
|
$fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]'); |
||||
|
$simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); |
||||
|
return ($fullPathTab.size() > 0) |
||||
|
? $fullPathTab |
||||
|
: $simplePathTab |
||||
|
; |
||||
|
}, |
||||
|
tab: function() { |
||||
|
return activeTabPath; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
utilities: { |
||||
|
filterArray: function(keepArray, removeArray) { |
||||
|
return $.grep(keepArray, function(keepValue) { |
||||
|
return ( $.inArray(keepValue, removeArray) == -1); |
||||
|
}); |
||||
|
}, |
||||
|
last: function(array) { |
||||
|
return $.isArray(array) |
||||
|
? array[ array.length - 1] |
||||
|
: false |
||||
|
; |
||||
|
}, |
||||
|
pathToArray: function(pathName) { |
||||
|
if(pathName === undefined) { |
||||
|
pathName = activeTabPath; |
||||
|
} |
||||
|
return typeof pathName == 'string' |
||||
|
? pathName.split('/') |
||||
|
: [pathName] |
||||
|
; |
||||
|
}, |
||||
|
arrayToPath: function(pathArray) { |
||||
|
return $.isArray(pathArray) |
||||
|
? pathArray.join('/') |
||||
|
: false |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(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.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() { |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
// shortcut for tabbed content with no defined navigation
|
||||
|
$.tab = function(settings) { |
||||
|
$(window).tab(settings); |
||||
|
}; |
||||
|
|
||||
|
$.fn.tab.settings = { |
||||
|
|
||||
|
name : 'Tab', |
||||
|
verbose : true, |
||||
|
debug : true, |
||||
|
performance : true, |
||||
|
namespace : 'tab', |
||||
|
|
||||
|
// only called first time a tab's content is loaded (when remote source)
|
||||
|
onTabInit : function(tabPath, parameterArray, historyEvent) {}, |
||||
|
// called on every load
|
||||
|
onTabLoad : function(tabPath, parameterArray, historyEvent) {}, |
||||
|
|
||||
|
templates : { |
||||
|
determineTitle: function(tabArray) {} |
||||
|
}, |
||||
|
|
||||
|
// uses pjax style endpoints fetching content from same url with remote-content headers
|
||||
|
auto : false, |
||||
|
|
||||
|
history : false, |
||||
|
path : false, |
||||
|
|
||||
|
context : 'body', |
||||
|
|
||||
|
// max depth a tab can be nested
|
||||
|
maxDepth : 25, |
||||
|
// dont load content on first load
|
||||
|
ignoreFirstLoad : true, |
||||
|
// load tab content new every tab click
|
||||
|
alwaysRefresh : false, |
||||
|
// cache the content requests to pull locally
|
||||
|
cache : true, |
||||
|
// settings for api call
|
||||
|
apiSettings : false, |
||||
|
|
||||
|
error: { |
||||
|
api : 'You attempted to load content without API module', |
||||
|
noContent : 'The tab you specified is missing a content url.', |
||||
|
method : 'The method you called is not defined', |
||||
|
state : 'The state library has not been initialized', |
||||
|
missingTab : 'Tab cannot be found', |
||||
|
path : 'History enabled, but no path was specified', |
||||
|
recursion : 'Max recursive depth reached' |
||||
|
}, |
||||
|
|
||||
|
metadata : { |
||||
|
tab : 'tab', |
||||
|
loaded : 'loaded', |
||||
|
promise: 'promise' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
loading : 'loading', |
||||
|
active : 'active' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
tabs : '.tab' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,59 @@ |
|||||
|
/* |
||||
|
* # Semantic Button |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
UI Tabs |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.tab { |
||||
|
display: none; |
||||
|
} |
||||
|
.ui.tab.active, |
||||
|
.ui.tab.open { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Loading |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.tab.loading { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
display: block; |
||||
|
min-height: 250px; |
||||
|
text-indent: -10000px; |
||||
|
} |
||||
|
.ui.tab.loading * { |
||||
|
position: relative !important; |
||||
|
left: -10000px !important; |
||||
|
} |
||||
|
.ui.tab.loading:after { |
||||
|
position: absolute; |
||||
|
top: 50px; |
||||
|
left: 50%; |
||||
|
content: 'Loading...'; |
||||
|
margin-left: -32px; |
||||
|
text-indent: 5px; |
||||
|
color: rgba(0, 0, 0, 0.4); |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding-top: 75px; |
||||
|
background: url(../images/loader-large.gif) no-repeat 0px 0px; |
||||
|
visibility: visible; |
||||
|
} |
||||
@ -0,0 +1,650 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Transition |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
A module for controlling css animations |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.transition = function() { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
moduleArguments = arguments, |
||||
|
query = moduleArguments[0], |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
methodInvoked = (typeof query === 'string'), |
||||
|
|
||||
|
requestAnimationFrame = window.requestAnimationFrame |
||||
|
|| window.mozRequestAnimationFrame |
||||
|
|| window.webkitRequestAnimationFrame |
||||
|
|| window.msRequestAnimationFrame |
||||
|
|| function(callback) { setTimeout(callback, 0); }, |
||||
|
|
||||
|
invokedResponse |
||||
|
; |
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
element = this, |
||||
|
|
||||
|
// set at run time
|
||||
|
settings, |
||||
|
instance, |
||||
|
|
||||
|
error, |
||||
|
className, |
||||
|
metadata, |
||||
|
animationEnd, |
||||
|
animationName, |
||||
|
|
||||
|
namespace, |
||||
|
moduleNamespace, |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
// get settings
|
||||
|
settings = module.get.settings.apply(element, moduleArguments); |
||||
|
module.verbose('Converted arguments into settings object', settings); |
||||
|
|
||||
|
// set shortcuts
|
||||
|
error = settings.error; |
||||
|
className = settings.className; |
||||
|
namespace = settings.namespace; |
||||
|
metadata = settings.metadata; |
||||
|
moduleNamespace = 'module-' + namespace; |
||||
|
|
||||
|
animationEnd = module.get.animationEvent(); |
||||
|
animationName = module.get.animationName(); |
||||
|
|
||||
|
instance = $module.data(moduleNamespace); |
||||
|
|
||||
|
if(instance === undefined) { |
||||
|
module.instantiate(); |
||||
|
} |
||||
|
if(methodInvoked) { |
||||
|
methodInvoked = module.invoke(query); |
||||
|
} |
||||
|
// no internal method was found matching query or query not made
|
||||
|
if(methodInvoked === false) { |
||||
|
module.animate(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
animate: function(overrideSettings) { |
||||
|
settings = overrideSettings || settings; |
||||
|
module.debug('Preparing animation', settings.animation); |
||||
|
if(module.is.animating()) { |
||||
|
if(settings.queue) { |
||||
|
module.queue(settings.animation); |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
module.save.conditions(); |
||||
|
module.set.duration(settings.duration); |
||||
|
module.set.animating(); |
||||
|
module.repaint(); |
||||
|
$module |
||||
|
.addClass(className.transition) |
||||
|
.addClass(settings.animation) |
||||
|
.one(animationEnd, module.complete) |
||||
|
; |
||||
|
if(!module.has.direction() && module.can.transition()) { |
||||
|
module.set.direction(); |
||||
|
} |
||||
|
if(!module.can.animate()) { |
||||
|
module.restore.conditions(); |
||||
|
module.error(error.noAnimation); |
||||
|
return false; |
||||
|
} |
||||
|
module.show(); |
||||
|
module.debug('Starting tween', settings.animation, $module.attr('class')); |
||||
|
}, |
||||
|
|
||||
|
queue: function(animation) { |
||||
|
module.debug('Queueing animation of', animation); |
||||
|
instance.queuing = true; |
||||
|
$module |
||||
|
.one(animationEnd, function() { |
||||
|
instance.queuing = false; |
||||
|
module.animate.apply(this, settings); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
complete: function () { |
||||
|
module.verbose('CSS animation complete', settings.animation); |
||||
|
if(!module.is.looping()) { |
||||
|
if($module.hasClass(className.outward)) { |
||||
|
module.restore.conditions(); |
||||
|
module.hide(); |
||||
|
} |
||||
|
else if($module.hasClass(className.inward)) { |
||||
|
module.restore.conditions(); |
||||
|
module.show(); |
||||
|
} |
||||
|
else { |
||||
|
module.restore.conditions(); |
||||
|
} |
||||
|
module.remove.animating(); |
||||
|
} |
||||
|
$.proxy(settings.complete, this)(); |
||||
|
}, |
||||
|
|
||||
|
repaint: function(fakeAssignment) { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
fakeAssignment = element.offsetWidth; |
||||
|
}, |
||||
|
|
||||
|
has: { |
||||
|
direction: function(animation) { |
||||
|
animation = animation || settings.animation; |
||||
|
if( $module.hasClass(className.inward) || $module.hasClass(className.outward) ) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
|
||||
|
animating: function() { |
||||
|
$module.addClass(className.animating); |
||||
|
}, |
||||
|
|
||||
|
direction: function() { |
||||
|
if($module.is(':visible')) { |
||||
|
module.debug('Automatically determining the direction of animation', 'Outward'); |
||||
|
$module |
||||
|
.addClass(className.outward) |
||||
|
.removeClass(className.inward) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Automatically determining the direction of animation', 'Inward'); |
||||
|
$module |
||||
|
.addClass(className.inward) |
||||
|
.removeClass(className.outward) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
looping: function() { |
||||
|
module.debug('Transition set to loop'); |
||||
|
$module |
||||
|
.addClass(className.looping) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
duration: function(duration) { |
||||
|
duration = duration || settings.duration; |
||||
|
duration = (typeof duration == 'number') |
||||
|
? duration + 'ms' |
||||
|
: duration |
||||
|
; |
||||
|
module.verbose('Setting animation duration', duration); |
||||
|
$module |
||||
|
.css({ |
||||
|
'-webkit-animation-duration': duration, |
||||
|
'-moz-animation-duration': duration, |
||||
|
'-ms-animation-duration': duration, |
||||
|
'-o-animation-duration': duration, |
||||
|
'animation-duration': duration |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
save: { |
||||
|
conditions: function() { |
||||
|
module.cache = { |
||||
|
className : $module.attr('class'), |
||||
|
style : $module.attr('style') |
||||
|
}; |
||||
|
module.verbose('Saving original attributes', module.cache); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
restore: { |
||||
|
conditions: function() { |
||||
|
if(typeof module.cache === undefined) { |
||||
|
module.error(error.cache); |
||||
|
return false; |
||||
|
} |
||||
|
if(module.cache.className) { |
||||
|
$module.attr('class', module.cache.className); |
||||
|
} |
||||
|
else { |
||||
|
$module.removeAttr('class'); |
||||
|
} |
||||
|
if(module.cache.style) { |
||||
|
$module.attr('style', module.cache.style); |
||||
|
} |
||||
|
else { |
||||
|
$module.removeAttr('style'); |
||||
|
} |
||||
|
if(module.is.looping()) { |
||||
|
module.remove.looping(); |
||||
|
} |
||||
|
module.verbose('Restoring original attributes', module.cache); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
remove: { |
||||
|
|
||||
|
animating: function() { |
||||
|
$module.removeClass(className.animating); |
||||
|
}, |
||||
|
|
||||
|
looping: function() { |
||||
|
module.debug('Transitions are no longer looping'); |
||||
|
$module |
||||
|
.removeClass(className.looping) |
||||
|
; |
||||
|
module.repaint(); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
settings: function(animation, duration, complete) { |
||||
|
// single settings object
|
||||
|
if($.isPlainObject(animation)) { |
||||
|
return $.extend(true, {}, $.fn.transition.settings, animation); |
||||
|
} |
||||
|
// all arguments provided
|
||||
|
else if(typeof complete == 'function') { |
||||
|
return $.extend(true, {}, $.fn.transition.settings, { |
||||
|
animation : animation, |
||||
|
complete : complete, |
||||
|
duration : duration |
||||
|
}); |
||||
|
} |
||||
|
// only duration provided
|
||||
|
else if(typeof duration == 'string' || typeof duration == 'number') { |
||||
|
return $.extend(true, {}, $.fn.transition.settings, { |
||||
|
animation : animation, |
||||
|
duration : duration |
||||
|
}); |
||||
|
} |
||||
|
// duration is actually settings object
|
||||
|
else if(typeof duration == 'object') { |
||||
|
return $.extend(true, {}, $.fn.transition.settings, duration, { |
||||
|
animation : animation |
||||
|
}); |
||||
|
} |
||||
|
// duration is actually callback
|
||||
|
else if(typeof duration == 'function') { |
||||
|
return $.extend(true, {}, $.fn.transition.settings, { |
||||
|
animation : animation, |
||||
|
complete : duration |
||||
|
}); |
||||
|
} |
||||
|
// only animation provided
|
||||
|
else { |
||||
|
return $.extend(true, {}, $.fn.transition.settings, { |
||||
|
animation : animation |
||||
|
}); |
||||
|
} |
||||
|
return $.fn.transition.settings; |
||||
|
}, |
||||
|
|
||||
|
animationName: function() { |
||||
|
var |
||||
|
element = document.createElement('div'), |
||||
|
animations = { |
||||
|
'animation' :'animationName', |
||||
|
'OAnimation' :'oAnimationName', |
||||
|
'MozAnimation' :'mozAnimationName', |
||||
|
'WebkitAnimation' :'webkitAnimationName' |
||||
|
}, |
||||
|
animation |
||||
|
; |
||||
|
for(animation in animations){ |
||||
|
if( element.style[animation] !== undefined ){ |
||||
|
module.verbose('Determining animation vendor name property', animations[animation]); |
||||
|
return animations[animation]; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
|
||||
|
animationEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('div'), |
||||
|
animations = { |
||||
|
'animation' :'animationend', |
||||
|
'OAnimation' :'oAnimationEnd', |
||||
|
'MozAnimation' :'mozAnimationEnd', |
||||
|
'WebkitAnimation' :'webkitAnimationEnd' |
||||
|
}, |
||||
|
animation |
||||
|
; |
||||
|
for(animation in animations){ |
||||
|
if( element.style[animation] !== undefined ){ |
||||
|
module.verbose('Determining animation vendor end event', animations[animation]); |
||||
|
return animations[animation]; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
animate: function() { |
||||
|
if($module.css(animationName) !== 'none') { |
||||
|
module.debug('CSS definition found'); |
||||
|
return true; |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Unable to find css definition'); |
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
transition: function() { |
||||
|
var |
||||
|
$clone = $('<div>').addClass( $module.attr('class') ).appendTo($('body')), |
||||
|
currentAnimation = $clone.css(animationName), |
||||
|
inAnimation = $clone.addClass(className.inward).css(animationName) |
||||
|
; |
||||
|
if(currentAnimation != inAnimation) { |
||||
|
module.debug('In/out transitions exist'); |
||||
|
$clone.remove(); |
||||
|
return true; |
||||
|
} |
||||
|
else { |
||||
|
module.debug('Static animation found'); |
||||
|
$clone.remove(); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
animating: function() { |
||||
|
return $module.hasClass(className.animating); |
||||
|
}, |
||||
|
looping: function() { |
||||
|
return $module.hasClass(className.looping); |
||||
|
}, |
||||
|
visible: function() { |
||||
|
return $module.is(':visible'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
hide: function() { |
||||
|
module.verbose('Hiding element'); |
||||
|
$module |
||||
|
.removeClass(className.visible) |
||||
|
.addClass(className.transition) |
||||
|
.addClass(className.hidden) |
||||
|
; |
||||
|
}, |
||||
|
show: function() { |
||||
|
module.verbose('Showing element'); |
||||
|
$module |
||||
|
.removeClass(className.hidden) |
||||
|
.addClass(className.transition) |
||||
|
.addClass(className.visible) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
start: function() { |
||||
|
module.verbose('Starting animation'); |
||||
|
$module.removeClass(className.disabled); |
||||
|
}, |
||||
|
|
||||
|
stop: function() { |
||||
|
module.debug('Stopping animation'); |
||||
|
$module.addClass(className.disabled); |
||||
|
}, |
||||
|
|
||||
|
toggle: function() { |
||||
|
module.debug('Toggling play status'); |
||||
|
$module.toggleClass(className.disabled); |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(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.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() { |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
module.initialize(); |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.transition.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
name : 'Transition', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : true, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : true, |
||||
|
|
||||
|
// performance data output
|
||||
|
performance : true, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'transition', |
||||
|
|
||||
|
// animation complete event
|
||||
|
complete : function() {}, |
||||
|
|
||||
|
// animation duration (useful only with future js animations)
|
||||
|
animation : 'fade', |
||||
|
duration : '700ms', |
||||
|
|
||||
|
// queue up animations
|
||||
|
queue : true, |
||||
|
|
||||
|
className : { |
||||
|
transition : 'ui transition', |
||||
|
animating : 'animating', |
||||
|
looping : 'looping', |
||||
|
loading : 'loading', |
||||
|
disabled : 'disabled', |
||||
|
hidden : 'hidden', |
||||
|
visible : 'visible', |
||||
|
inward : 'in', |
||||
|
outward : 'out' |
||||
|
}, |
||||
|
|
||||
|
// possible errors
|
||||
|
error: { |
||||
|
noAnimation : 'There is no css animation matching the one you specified.', |
||||
|
method : 'The method you called is not defined' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,839 @@ |
|||||
|
/******************************* |
||||
|
Semantic Module: Transition |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
CSS animation definitions for |
||||
|
transition module |
||||
|
|
||||
|
*******************************/ |
||||
|
|
||||
|
/* |
||||
|
Some transitions adapted from Animate CSS |
||||
|
https://github.com/daneden/animate.css |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
.ui.transition { |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
-moz-backface-visibility: hidden; |
||||
|
-ms-backface-visibility: hidden; |
||||
|
-o-backface-visibility: hidden; |
||||
|
backface-visibility: hidden; |
||||
|
|
||||
|
-webkit-animation-iteration-count: 1; |
||||
|
-moz-animation-iteration-count: 1; |
||||
|
-ms-animation-iteration-count: 1; |
||||
|
-o-animation-iteration-count: 1; |
||||
|
animation-iteration-count: 1; |
||||
|
|
||||
|
-webkit-animation-duration: 1s; |
||||
|
-moz-animation-duration: 1s; |
||||
|
-ms-animation-duration: 1s; |
||||
|
-o-animation-duration: 1s; |
||||
|
animation-duration: 1s; |
||||
|
|
||||
|
animation-timing-function: ease; |
||||
|
-webkit-animation-timing-function: ease; |
||||
|
|
||||
|
-webkit-animation-fill-mode: both; |
||||
|
-moz-animation-fill-mode: both; |
||||
|
-ms-animation-fill-mode: both; |
||||
|
-o-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
|
||||
|
-webkit-transform: translateZ(0); |
||||
|
-moz-transform: translateZ(0); |
||||
|
-ms-transform: translateZ(0); |
||||
|
-o-transform: translateZ(0); |
||||
|
transform: translateZ(0); |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Loading */ |
||||
|
.ui.loading.transition { |
||||
|
position: absolute; |
||||
|
top: -999999px; |
||||
|
left: -99999px; |
||||
|
} |
||||
|
|
||||
|
/* Hidden */ |
||||
|
.ui.hidden.transition { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* Visible */ |
||||
|
.ui.visible.transition { |
||||
|
display: block; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Direction */ |
||||
|
.ui.out.transition { |
||||
|
-webkit-animation-direction: reverse; |
||||
|
-moz-animation-direction: reverse; |
||||
|
-o-animation-direction: reverse; |
||||
|
animation-direction: reverse; |
||||
|
} |
||||
|
|
||||
|
/* Disabled */ |
||||
|
.ui.disabled.transition { |
||||
|
-webkit-animation-play-state: paused; |
||||
|
-moz-animation-play-state: paused; |
||||
|
-ms-animation-play-state: paused; |
||||
|
-o-animation-play-state: paused; |
||||
|
animation-play-state: paused; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.looping.transition { |
||||
|
-webkit-animation-iteration-count: infinite; |
||||
|
-moz-animation-iteration-count: infinite; |
||||
|
-ms-animation-iteration-count: infinite; |
||||
|
-o-animation-iteration-count: infinite; |
||||
|
animation-iteration-count: infinite; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Emphasis |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.flash.transition { |
||||
|
-webkit-animation-name: flash; |
||||
|
-moz-animation-name: flash; |
||||
|
-o-animation-name: flash; |
||||
|
animation-name: flash; |
||||
|
} |
||||
|
.ui.shake.transition { |
||||
|
-webkit-animation-name: shake; |
||||
|
-moz-animation-name: shake; |
||||
|
-o-animation-name: shake; |
||||
|
animation-name: shake; |
||||
|
} |
||||
|
.ui.bounce.transition { |
||||
|
-webkit-animation-name: bounce; |
||||
|
-moz-animation-name: bounce; |
||||
|
-o-animation-name: bounce; |
||||
|
animation-name: bounce; |
||||
|
} |
||||
|
.ui.tada.transition { |
||||
|
-webkit-animation-name: tada; |
||||
|
-moz-animation-name: tada; |
||||
|
-o-animation-name: tada; |
||||
|
animation-name: tada; |
||||
|
} |
||||
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
||||
|
.ui.pulse.transition { |
||||
|
-webkit-animation-name: pulse; |
||||
|
-moz-animation-name: pulse; |
||||
|
-o-animation-name: pulse; |
||||
|
animation-name: pulse; |
||||
|
} |
||||
|
/*-------------- |
||||
|
Flips |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.flip.transition.in, |
||||
|
.ui.flip.transition.out { |
||||
|
-webkit-perspective: 2000px; |
||||
|
perspective: 2000px; |
||||
|
} |
||||
|
.ui.horizontal.flip.transition.in, |
||||
|
.ui.horizontal.flip.transition.out { |
||||
|
-webkit-animation-name: horizontalFlip; |
||||
|
-moz-animation-name: horizontalFlip; |
||||
|
-o-animation-name: horizontalFlip; |
||||
|
animation-name: horizontalFlip; |
||||
|
} |
||||
|
.ui.vertical.flip.transition.in, |
||||
|
.ui.vertical.flip.transition.out { |
||||
|
-webkit-animation-name: verticalFlip; |
||||
|
-moz-animation-name: verticalFlip; |
||||
|
-o-animation-name: verticalFlip; |
||||
|
animation-name: verticalFlip; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Fades |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.fade.transition.in, |
||||
|
.ui.fade.transition.out { |
||||
|
-webkit-animation-name: fade; |
||||
|
-moz-animation-name: fade; |
||||
|
-o-animation-name: fade; |
||||
|
animation-name: fade; |
||||
|
} |
||||
|
|
||||
|
.ui.fade.up.transition.in { |
||||
|
-webkit-animation-name: fadeUp; |
||||
|
-moz-animation-name: fadeUp; |
||||
|
-o-animation-name: fadeUp; |
||||
|
animation-name: fadeUp; |
||||
|
} |
||||
|
.ui.fade.up.transition.out { |
||||
|
-webkit-animation-name: fade; |
||||
|
-moz-animation-name: fade; |
||||
|
-o-animation-name: fade; |
||||
|
animation-name: fade; |
||||
|
} |
||||
|
|
||||
|
.ui.fade.down.transition.in { |
||||
|
-webkit-animation-name: fadeDown; |
||||
|
-moz-animation-name: fadeDown; |
||||
|
-o-animation-name: fadeDown; |
||||
|
animation-name: fadeDown; |
||||
|
} |
||||
|
.ui.fade.down.transition.out { |
||||
|
-webkit-animation-name: fade; |
||||
|
-moz-animation-name: fade; |
||||
|
-o-animation-name: fade; |
||||
|
animation-name: fade; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Scale |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.scale.transition.in, |
||||
|
.ui.scale.transition.out { |
||||
|
-webkit-animation-name: scale; |
||||
|
-moz-animation-name: scale; |
||||
|
-o-animation-name: scale; |
||||
|
animation-name: scale; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Slide |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.slide.down.transition.in, |
||||
|
.ui.slide.down.transition.out { |
||||
|
-webkit-animation-name: slide; |
||||
|
-moz-animation-name: slide; |
||||
|
-o-animation-name: slide; |
||||
|
animation-name: slide; |
||||
|
transform-origin: 50% 0%; |
||||
|
-ms-transform-origin: 50% 0%; |
||||
|
-webkit-transform-origin: 50% 0%; |
||||
|
} |
||||
|
.ui.slide.up.transition.in, |
||||
|
.ui.slide.up.transition.out { |
||||
|
-webkit-animation-name: slide; |
||||
|
-moz-animation-name: slide; |
||||
|
-o-animation-name: slide; |
||||
|
animation-name: slide; |
||||
|
transform-origin: 50% 100%; |
||||
|
-ms-transform-origin: 50% 100%; |
||||
|
-webkit-transform-origin: 50% 100%; |
||||
|
} |
||||
|
|
||||
|
@-moz-keyframes slide { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-moz-transform: scaleY(0); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-moz-transform: scaleY(1); |
||||
|
} |
||||
|
} |
||||
|
@-webkit-keyframes slide { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: scaleY(0); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: scaleY(1); |
||||
|
} |
||||
|
} |
||||
|
@keyframes slide { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
transform: scaleY(0); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
transform: scaleY(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Animations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Emphasis |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Flash */ |
||||
|
@-webkit-keyframes flash { |
||||
|
0%, 50%, 100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
25%, 75% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes flash { |
||||
|
0%, 50%, 100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
25%, 75% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes flash { |
||||
|
0%, 50%, 100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
25%, 75% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
@keyframes flash { |
||||
|
0%, 50%, 100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
25%, 75% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Shake */ |
||||
|
@-webkit-keyframes shake { |
||||
|
0%, 100% { |
||||
|
-webkit-transform: translateX(0); |
||||
|
} |
||||
|
10%, 30%, 50%, 70%, 90% { |
||||
|
-webkit-transform: translateX(-10px); |
||||
|
} |
||||
|
20%, 40%, 60%, 80% { |
||||
|
-webkit-transform: translateX(10px); |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes shake { |
||||
|
0%, 100% { |
||||
|
-moz-transform: translateX(0); |
||||
|
} |
||||
|
10%, 30%, 50%, 70%, 90% { |
||||
|
-moz-transform: translateX(-10px); |
||||
|
} |
||||
|
20%, 40%, 60%, 80% { |
||||
|
-moz-transform: translateX(10px); |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes shake { |
||||
|
0%, 100% { |
||||
|
-o-transform: translateX(0); |
||||
|
} |
||||
|
10%, 30%, 50%, 70%, 90% { |
||||
|
-o-transform: translateX(-10px); |
||||
|
} |
||||
|
20%, 40%, 60%, 80% { |
||||
|
-o-transform: translateX(10px); |
||||
|
} |
||||
|
} |
||||
|
@keyframes shake { |
||||
|
0%, 100% { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
10%, 30%, 50%, 70%, 90% { |
||||
|
transform: translateX(-10px); |
||||
|
} |
||||
|
20%, 40%, 60%, 80% { |
||||
|
transform: translateX(10px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Bounce */ |
||||
|
@-webkit-keyframes bounce { |
||||
|
0%, 20%, 50%, 80%, 100% { |
||||
|
-webkit-transform: translateY(0); |
||||
|
} |
||||
|
40% { |
||||
|
-webkit-transform: translateY(-30px); |
||||
|
} |
||||
|
60% { |
||||
|
-webkit-transform: translateY(-15px); |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes bounce { |
||||
|
0%, 20%, 50%, 80%, 100% { |
||||
|
-moz-transform: translateY(0); |
||||
|
} |
||||
|
40% { |
||||
|
-moz-transform: translateY(-30px); |
||||
|
} |
||||
|
60% { |
||||
|
-moz-transform: translateY(-15px); |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes bounce { |
||||
|
0%, 20%, 50%, 80%, 100% { |
||||
|
-o-transform: translateY(0); |
||||
|
} |
||||
|
40% { |
||||
|
-o-transform: translateY(-30px); |
||||
|
} |
||||
|
60% { |
||||
|
-o-transform: translateY(-15px); |
||||
|
} |
||||
|
} |
||||
|
@keyframes bounce { |
||||
|
0%, 20%, 50%, 80%, 100% { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
40% { |
||||
|
transform: translateY(-30px); |
||||
|
} |
||||
|
60% { |
||||
|
transform: translateY(-15px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Tada */ |
||||
|
@-webkit-keyframes tada { |
||||
|
0% { |
||||
|
-webkit-transform: scale(1); |
||||
|
} |
||||
|
10%, 20% { |
||||
|
-webkit-transform: scale(0.9) rotate(-3deg); |
||||
|
} |
||||
|
30%, 50%, 70%, 90% { |
||||
|
-webkit-transform: scale(1.1) rotate(3deg); |
||||
|
} |
||||
|
40%, 60%, 80% { |
||||
|
-webkit-transform: scale(1.1) rotate(-3deg); |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: scale(1) rotate(0); |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes tada { |
||||
|
0% { |
||||
|
-moz-transform: scale(1); |
||||
|
} |
||||
|
10%, 20% { |
||||
|
-moz-transform: scale(0.9) rotate(-3deg); |
||||
|
} |
||||
|
30%, 50%, 70%, 90% { |
||||
|
-moz-transform: scale(1.1) rotate(3deg); |
||||
|
} |
||||
|
40%, 60%, 80% { |
||||
|
-moz-transform: scale(1.1) rotate(-3deg); |
||||
|
} |
||||
|
100% { |
||||
|
-moz-transform: scale(1) rotate(0); |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes tada { |
||||
|
0% { |
||||
|
-o-transform: scale(1); |
||||
|
} |
||||
|
10%, 20% { |
||||
|
-o-transform: scale(0.9) rotate(-3deg); |
||||
|
} |
||||
|
30%, 50%, 70%, 90% { |
||||
|
-o-transform: scale(1.1) rotate(3deg); |
||||
|
} |
||||
|
40%, 60%, 80% { |
||||
|
-o-transform: scale(1.1) rotate(-3deg); |
||||
|
} |
||||
|
100% { |
||||
|
-o-transform: scale(1) rotate(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes tada { |
||||
|
0% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
10%, 20% { |
||||
|
transform: scale(0.9) rotate(-3deg); |
||||
|
} |
||||
|
30%, 50%, 70%, 90% { |
||||
|
transform: scale(1.1) rotate(3deg); |
||||
|
} |
||||
|
40%, 60%, 80% { |
||||
|
transform: scale(1.1) rotate(-3deg); |
||||
|
} |
||||
|
100% { |
||||
|
transform: scale(1) rotate(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes pulse { |
||||
|
0% { |
||||
|
-webkit-transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
50% { |
||||
|
-webkit-transform: scale(0.9); |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-o-keyframes pulse { |
||||
|
0% { |
||||
|
-o-transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
50% { |
||||
|
-o-transform: scale(0.9); |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
100% { |
||||
|
-o-transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-moz-keyframes pulse { |
||||
|
0% { |
||||
|
-moz-transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
50% { |
||||
|
-moz-transform: scale(0.9); |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
100% { |
||||
|
-moz-transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes pulse { |
||||
|
0% { |
||||
|
transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
50% { |
||||
|
transform: scale(0.9); |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
100% { |
||||
|
transform: scale(1); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Flips |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Horizontal */ |
||||
|
@-webkit-keyframes horizontalFlip { |
||||
|
0% { |
||||
|
-webkit-transform: rotateY(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: rotateY(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes horizontalFlip { |
||||
|
0% { |
||||
|
-moz-transform: rotateY(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-moz-transform: rotateY(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes horizontalFlip { |
||||
|
0% { |
||||
|
-o-transform: rotateY(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-o-transform: rotateY(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@keyframes horizontalFlip { |
||||
|
0% { |
||||
|
transform: rotateY(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
transform: rotateY(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
/* Horizontal */ |
||||
|
@-webkit-keyframes horizontalFlipOut { |
||||
|
0% { |
||||
|
-webkit-transform: rotateY(0deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: rotateY(90deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes horizontalFlipOut { |
||||
|
0% { |
||||
|
-moz-transform: rotateY(0deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-moz-transform: rotateY(90deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes horizontalFlipOut { |
||||
|
0% { |
||||
|
-o-transform: rotateY(0deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-o-transform: rotateY(90deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@keyframes horizontalFlipOut { |
||||
|
0% { |
||||
|
transform: rotateY(0deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
transform: rotateY(90deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Vertical */ |
||||
|
@-webkit-keyframes verticalFlip { |
||||
|
0% { |
||||
|
-webkit-transform: rotateX(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: rotateX(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes verticalFlip { |
||||
|
0% { |
||||
|
-moz-transform: rotateX(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-moz-transform: rotateX(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes verticalFlip { |
||||
|
0% { |
||||
|
-o-transform: rotateX(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
-o-transform: rotateX(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@keyframes verticalFlip { |
||||
|
0% { |
||||
|
transform: rotateX(-90deg); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
transform: rotateX(0deg); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Fades |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Fade */ |
||||
|
@-webkit-keyframes fade { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes fade { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes fade { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@keyframes fade { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Fade Up */ |
||||
|
@-webkit-keyframes fadeUp { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: translateY(20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes fadeUp { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-moz-transform: translateY(20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-moz-transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes fadeUp { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-o-transform: translateY(20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-o-transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@keyframes fadeUp { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
transform: translateY(20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Fade Down */ |
||||
|
@-webkit-keyframes fadeDown { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: translateY(-20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes fadeDown { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-moz-transform: translateY(-20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-moz-transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes fadeDown { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-o-transform: translateY(-20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-o-transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@keyframes fadeDown { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
transform: translateY(-20px); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Scale |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Scale */ |
||||
|
@-webkit-keyframes scale { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: scale(0.7); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
@-moz-keyframes scale { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-moz-transform: scale(0.7); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-moz-transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
@-o-keyframes scale { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
-o-transform: scale(0.7); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
-o-transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
@keyframes scale { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
transform: scale(0.7); |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,459 @@ |
|||||
|
/* ****************************** |
||||
|
Module - Video Component |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit June 30, 2012 |
||||
|
|
||||
|
This is a video playlist and video embed plugin which helps |
||||
|
provide helpers for adding embed code for vimeo and youtube and |
||||
|
abstracting event handlers for each library |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ($, window, document, undefined) { |
||||
|
|
||||
|
$.fn.video = function(parameters) { |
||||
|
|
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = ( $.isPlainObject(parameters) ) |
||||
|
? $.extend(true, {}, $.fn.video.settings, parameters) |
||||
|
: $.fn.video.settings, |
||||
|
|
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
|
||||
|
selector = settings.selector, |
||||
|
className = settings.className, |
||||
|
error = settings.error, |
||||
|
metadata = settings.metadata, |
||||
|
namespace = settings.namespace, |
||||
|
|
||||
|
eventNamespace = '.' + namespace, |
||||
|
moduleNamespace = namespace + '-module', |
||||
|
|
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
$module = $(this), |
||||
|
$placeholder = $module.find(selector.placeholder), |
||||
|
$playButton = $module.find(selector.playButton), |
||||
|
$embed = $module.find(selector.embed), |
||||
|
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.debug('Initializing video'); |
||||
|
$placeholder |
||||
|
.on('click' + eventNamespace, module.play) |
||||
|
; |
||||
|
$playButton |
||||
|
.on('click' + eventNamespace, module.play) |
||||
|
; |
||||
|
module.instantiate(); |
||||
|
}, |
||||
|
|
||||
|
instantiate: function() { |
||||
|
module.verbose('Storing instance of module', module); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, module) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous instance of video'); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
// sets new video
|
||||
|
change: function(source, id, url) { |
||||
|
module.debug('Changing video to ', source, id, url); |
||||
|
$module |
||||
|
.data(metadata.source, source) |
||||
|
.data(metadata.id, id) |
||||
|
.data(metadata.url, url) |
||||
|
; |
||||
|
settings.onChange(); |
||||
|
}, |
||||
|
|
||||
|
// clears video embed
|
||||
|
reset: function() { |
||||
|
module.debug('Clearing video embed and showing placeholder'); |
||||
|
$module |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$embed |
||||
|
.html(' ') |
||||
|
; |
||||
|
$placeholder |
||||
|
.show() |
||||
|
; |
||||
|
settings.onReset(); |
||||
|
}, |
||||
|
|
||||
|
// plays current video
|
||||
|
play: function() { |
||||
|
module.debug('Playing video'); |
||||
|
var |
||||
|
source = $module.data(metadata.source) || false, |
||||
|
url = $module.data(metadata.url) || false, |
||||
|
id = $module.data(metadata.id) || false |
||||
|
; |
||||
|
$embed |
||||
|
.html( module.generate.html(source, id, url) ) |
||||
|
; |
||||
|
$module |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
settings.onPlay(); |
||||
|
}, |
||||
|
|
||||
|
generate: { |
||||
|
// generates iframe html
|
||||
|
html: function(source, id, url) { |
||||
|
module.debug('Generating embed html'); |
||||
|
var |
||||
|
width = (settings.width == 'auto') |
||||
|
? $module.width() |
||||
|
: settings.width, |
||||
|
height = (settings.height == 'auto') |
||||
|
? $module.height() |
||||
|
: settings.height, |
||||
|
html |
||||
|
; |
||||
|
if(source && id) { |
||||
|
if(source == 'vimeo') { |
||||
|
html = '' |
||||
|
+ '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"' |
||||
|
+ ' width="' + width + '" height="' + height + '"' |
||||
|
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' |
||||
|
; |
||||
|
} |
||||
|
else if(source == 'youtube') { |
||||
|
html = '' |
||||
|
+ '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"' |
||||
|
+ ' width="' + width + '" height="' + height + '"' |
||||
|
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
else if(url) { |
||||
|
html = '' |
||||
|
+ '<iframe src="' + url + '"' |
||||
|
+ ' width="' + width + '" height="' + height + '"' |
||||
|
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.noVideo); |
||||
|
} |
||||
|
return html; |
||||
|
}, |
||||
|
|
||||
|
// generate url parameters
|
||||
|
url: function(source) { |
||||
|
var |
||||
|
api = (settings.api) |
||||
|
? 1 |
||||
|
: 0, |
||||
|
autoplay = (settings.autoplay) |
||||
|
? 1 |
||||
|
: 0, |
||||
|
hd = (settings.hd) |
||||
|
? 1 |
||||
|
: 0, |
||||
|
showUI = (settings.showUI) |
||||
|
? 1 |
||||
|
: 0, |
||||
|
// opposite used for some params
|
||||
|
hideUI = !(settings.showUI) |
||||
|
? 1 |
||||
|
: 0, |
||||
|
url = '' |
||||
|
; |
||||
|
if(source == 'vimeo') { |
||||
|
url = '' |
||||
|
+ 'api=' + api |
||||
|
+ '&title=' + showUI |
||||
|
+ '&byline=' + showUI |
||||
|
+ '&portrait=' + showUI |
||||
|
+ '&autoplay=' + autoplay |
||||
|
; |
||||
|
if(settings.color) { |
||||
|
url += '&color=' + settings.color; |
||||
|
} |
||||
|
} |
||||
|
if(source == 'ustream') { |
||||
|
url = '' |
||||
|
+ 'autoplay=' + autoplay |
||||
|
; |
||||
|
if(settings.color) { |
||||
|
url += '&color=' + settings.color; |
||||
|
} |
||||
|
} |
||||
|
else if(source == 'youtube') { |
||||
|
url = '' |
||||
|
+ 'enablejsapi=' + api |
||||
|
+ '&autoplay=' + autoplay |
||||
|
+ '&autohide=' + hideUI |
||||
|
+ '&hq=' + hd |
||||
|
+ '&modestbranding=1' |
||||
|
; |
||||
|
if(settings.color) { |
||||
|
url += '&color=' + settings.color; |
||||
|
} |
||||
|
} |
||||
|
return url; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.debug.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
module.verbose.apply(console, arguments); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
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({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
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($allModules.size() > 1) { |
||||
|
title += ' ' + '(' + $allModules.size() + ')'; |
||||
|
} |
||||
|
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 |
||||
|
maxDepth, |
||||
|
found, |
||||
|
response |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
} |
||||
|
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[camelCaseValue]; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return false; |
||||
|
} |
||||
|
else if( instance[camelCaseValue] !== undefined ) { |
||||
|
found = instance[camelCaseValue]; |
||||
|
return false; |
||||
|
} |
||||
|
else { |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
response = found.apply(context, passedArguments); |
||||
|
} |
||||
|
else if(found !== undefined) { |
||||
|
response = found; |
||||
|
} |
||||
|
if($.isArray(invokedResponse)) { |
||||
|
invokedResponse.push(response); |
||||
|
} |
||||
|
else if(typeof invokedResponse == 'string') { |
||||
|
invokedResponse = [invokedResponse, response]; |
||||
|
} |
||||
|
else if(response !== undefined) { |
||||
|
invokedResponse = response; |
||||
|
} |
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.video.settings = { |
||||
|
|
||||
|
name : 'Video', |
||||
|
namespace : 'video', |
||||
|
|
||||
|
debug : true, |
||||
|
verbose : true, |
||||
|
performance : true, |
||||
|
|
||||
|
|
||||
|
metadata : { |
||||
|
source : 'source', |
||||
|
id : 'id', |
||||
|
url : 'url' |
||||
|
}, |
||||
|
|
||||
|
onPlay : function(){}, |
||||
|
onReset : function(){}, |
||||
|
onChange : function(){}, |
||||
|
|
||||
|
// callbacks not coded yet (needs to use jsapi)
|
||||
|
onPause : function() {}, |
||||
|
onStop : function() {}, |
||||
|
|
||||
|
width : 'auto', |
||||
|
height : 'auto', |
||||
|
|
||||
|
autoplay : false, |
||||
|
color : '#442359', |
||||
|
hd : true, |
||||
|
showUI : false, |
||||
|
api : true, |
||||
|
|
||||
|
error : { |
||||
|
noVideo : 'No video specified', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
className : { |
||||
|
active : 'active' |
||||
|
}, |
||||
|
|
||||
|
selector : { |
||||
|
embed : '.embed', |
||||
|
placeholder : '.placeholder', |
||||
|
playButton : '.play' |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,99 @@ |
|||||
|
/* |
||||
|
* # Semantic Video |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: July 30, 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Video |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.video { |
||||
|
position: relative; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
|
||||
|
/* Placeholder Image */ |
||||
|
.ui.video .placeholder { |
||||
|
background-color: #333333; |
||||
|
} |
||||
|
|
||||
|
/* Play Icon Overlay */ |
||||
|
.ui.video .play { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
z-index: 10; |
||||
|
|
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; |
||||
|
filter: alpha(opacity=60); |
||||
|
opacity: 0.6; |
||||
|
|
||||
|
-webkit-transition: opacity 0.3s; |
||||
|
-moz-transition: opacity 0.3s; |
||||
|
-o-transition: opacity 0.3s; |
||||
|
-ms-transition: opacity 0.3s; |
||||
|
transition: opacity 0.3s; |
||||
|
} |
||||
|
.ui.video .play.icon:before { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
z-index: 11; |
||||
|
|
||||
|
font-size: 6rem; |
||||
|
margin: -3rem 0em 0em -3rem; |
||||
|
color: #FFFFFF; |
||||
|
text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); |
||||
|
} |
||||
|
|
||||
|
.ui.video .placeholder { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
/* IFrame Embed */ |
||||
|
.ui.video .embed { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Hover |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.video .play:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Active |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.video.active .play, |
||||
|
.ui.video.active .placeholder { |
||||
|
display: none; |
||||
|
} |
||||
|
.ui.video.active .embed { |
||||
|
display: block; |
||||
|
} |
||||
@ -0,0 +1,221 @@ |
|||||
|
/* |
||||
|
* # Semantic Comment View |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Standard |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Comments |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.comments { |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.ui.comments a { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Comment |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.comments .comment { |
||||
|
position: relative; |
||||
|
margin-top: 0.5em; |
||||
|
padding-top: 0.5em; |
||||
|
} |
||||
|
.ui.comments .comment:first-child { |
||||
|
margin-top: 0em; |
||||
|
padding-top: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Avatar (Optional) |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.comments .comment .avatar { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
width: 4em; |
||||
|
} |
||||
|
.ui.comments .comment .avatar img { |
||||
|
display: block; |
||||
|
margin: 0em auto; |
||||
|
|
||||
|
width: 3em; |
||||
|
height: 3em; |
||||
|
border-radius: 500px; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.comments .comment > .content, |
||||
|
.ui.comments .comment > .avatar { |
||||
|
display: block; |
||||
|
} |
||||
|
.ui.comments .comment .avatar ~ .content { |
||||
|
padding: 0em 1em; |
||||
|
} |
||||
|
|
||||
|
/* If there is an avatar move content over */ |
||||
|
.ui.comments .comment > .avatar ~ .content { |
||||
|
padding-top: 0.25em; |
||||
|
margin-left: 3.5em; |
||||
|
} |
||||
|
|
||||
|
.ui.comments .comment .metadata { |
||||
|
display: inline-block; |
||||
|
margin-left: 0.3em; |
||||
|
color: rgba(0, 0, 0, 0.4); |
||||
|
} |
||||
|
.ui.comments .comment .metadata > * { |
||||
|
display: inline-block; |
||||
|
margin: 0em 0.3em 0em 0em; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Comment Text |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.comments .comment .text { |
||||
|
margin: 0.25em 0em 0.5em; |
||||
|
word-wrap: break-word; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
User Actions |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.comments .comment .actions { |
||||
|
font-size: 0.9em; |
||||
|
} |
||||
|
.ui.comments .comment .actions a { |
||||
|
display: inline-block; |
||||
|
margin: 0em 0.3em 0em 0em; |
||||
|
color: rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
.ui.comments .comment .actions a.active, |
||||
|
.ui.comments .comment .actions a:hover { |
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Reply Form |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.comments .reply.form { |
||||
|
margin-top: 0.75em; |
||||
|
width: 100%; |
||||
|
max-width: 30em; |
||||
|
} |
||||
|
.ui.comments .comment .reply.form { |
||||
|
margin-left: 2em; |
||||
|
} |
||||
|
.ui.comments > .reply.form { |
||||
|
margin-top: 1.5em; |
||||
|
max-width: 40em; |
||||
|
} |
||||
|
.ui.comments .reply.form textarea { |
||||
|
height: 12em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------------- |
||||
|
Nested Comments |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.comments .comment .comments { |
||||
|
margin-top: 0.5em; |
||||
|
padding-top: 0.5em; |
||||
|
padding-bottom: 1em; |
||||
|
} |
||||
|
.ui.comments .comment .comments:before{ |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
} |
||||
|
/* One Deep */ |
||||
|
.ui.comments > .comment .comments { |
||||
|
margin-left: 2em; |
||||
|
|
||||
|
} |
||||
|
/* Two Deep */ |
||||
|
.ui.comments > .comment > .comments > .comment > .comments { |
||||
|
margin-left: 1.75em; |
||||
|
} |
||||
|
/* Three Deep */ |
||||
|
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { |
||||
|
margin-left: 1.5em; |
||||
|
} |
||||
|
/* Four Deep or more */ |
||||
|
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { |
||||
|
margin-left: 0.5em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------------- |
||||
|
Threaded |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.threaded.comments .comment .comments { |
||||
|
margin-left: 2em !important; |
||||
|
padding-left: 2em !important; |
||||
|
|
||||
|
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
||||
|
-moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
||||
|
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Minimal |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.minimal.comments .comment .actions { |
||||
|
opacity: 0; |
||||
|
|
||||
|
-webkit-transition: opacity 0.1s ease-out; |
||||
|
-moz-transition: opacity 0.1s ease-out; |
||||
|
-o-transition: opacity 0.1s ease-out; |
||||
|
-ms-transition: opacity 0.1s ease-out; |
||||
|
transition: opacity 0.1s ease-out; |
||||
|
|
||||
|
-webkit-transition-delay: 0.1s; |
||||
|
-moz-transition-delay: 0.1s; |
||||
|
-o-transition-delay: 0.1s; |
||||
|
-ms-transition-delay: 0.1s; |
||||
|
transition-delay: 0.1s; |
||||
|
} |
||||
|
.ui.minimal.comments .comment > .content:hover > .actions { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Sizes |
||||
|
---------------------*/ |
||||
|
|
||||
|
.ui.small.comments { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
@ -0,0 +1,151 @@ |
|||||
|
/* |
||||
|
* # Activity Feed View |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: May 22, 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Activity Feed |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.feed { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.ui.feed a { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.ui.feed, |
||||
|
.ui.feed .event, |
||||
|
.ui.feed .label, |
||||
|
.ui.feed .content, |
||||
|
.ui.feed .extra { |
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Content |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Event */ |
||||
|
.ui.feed .event { |
||||
|
width: 100%; |
||||
|
display: table; |
||||
|
padding: 1em; |
||||
|
} |
||||
|
.ui.feed .event:first-child { |
||||
|
border-top: 0px; |
||||
|
} |
||||
|
.ui.feed .event:last-child { |
||||
|
margin-bottom: 1em; |
||||
|
} |
||||
|
|
||||
|
/* Event Label */ |
||||
|
.ui.feed .label { |
||||
|
width: 3em; |
||||
|
display: table-cell; |
||||
|
vertical-align: top; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.ui.feed .label .icon { |
||||
|
font-size: 1.5em; |
||||
|
margin: 0em; |
||||
|
} |
||||
|
.ui.feed .label img { |
||||
|
width: 3em; |
||||
|
margin: 0em; |
||||
|
border-radius: 50em; |
||||
|
} |
||||
|
.ui.feed .label + .content { |
||||
|
padding: 0.75em 1em 0em; |
||||
|
} |
||||
|
|
||||
|
/* Content */ |
||||
|
.ui.feed .content { |
||||
|
display: table-cell; |
||||
|
vertical-align: top; |
||||
|
text-align: left; |
||||
|
word-wrap: break-word; |
||||
|
} |
||||
|
|
||||
|
/* Date */ |
||||
|
.ui.feed .content .date { |
||||
|
float: right; |
||||
|
padding-left: 1em; |
||||
|
color: rgba(0, 0, 0, 0.4); |
||||
|
} |
||||
|
|
||||
|
/* Summary */ |
||||
|
.ui.feed .content .summary { |
||||
|
color: rgba(0, 0, 0, 0.75); |
||||
|
} |
||||
|
.ui.feed .content .summary img { |
||||
|
display: inline-block; |
||||
|
margin-right: 0.25em; |
||||
|
width: 4em; |
||||
|
border-radius: 500px; |
||||
|
} |
||||
|
|
||||
|
/* Additional Information */ |
||||
|
.ui.feed .content .extra { |
||||
|
margin: 1em 0em 0em; |
||||
|
padding: 0.5em 0em 0em; |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.ui.feed .content .extra.images { |
||||
|
|
||||
|
} |
||||
|
.ui.feed .content .extra.images img { |
||||
|
display: inline-block; |
||||
|
margin-right: 0.25em; |
||||
|
width: 6em; |
||||
|
} |
||||
|
|
||||
|
.ui.feed .content .extra.text { |
||||
|
padding: 0.5em 1em; |
||||
|
border-left: 0.2em solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.small.feed { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
.ui.small.feed .label img { |
||||
|
width: 2.5em; |
||||
|
} |
||||
|
.ui.small.feed .label .icon { |
||||
|
font-size: 1.25em; |
||||
|
} |
||||
|
.ui.feed .event { |
||||
|
padding: 0.75em 0em; |
||||
|
} |
||||
|
.ui.small.feed .label + .content { |
||||
|
padding: 0.5em 0.5em 0; |
||||
|
} |
||||
|
.ui.small.feed .content .extra.images img { |
||||
|
width: 5em; |
||||
|
} |
||||
|
.ui.small.feed .content .extra { |
||||
|
margin: 0.5em 0em 0em; |
||||
|
} |
||||
|
.ui.small.feed .content .extra.text { |
||||
|
padding: 0.25em 0.5em; |
||||
|
} |
||||
@ -0,0 +1,641 @@ |
|||||
|
/* |
||||
|
* # Semantic Item View |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 17 2013 |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Standard |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Items |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.items { |
||||
|
margin: 1em 0em 0em; |
||||
|
} |
||||
|
.ui.items:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
.ui.items:last-child { |
||||
|
margin-bottom: -1em; |
||||
|
} |
||||
|
|
||||
|
/* Force Clearing */ |
||||
|
.ui.items:after { |
||||
|
display: block; |
||||
|
content: ' '; |
||||
|
height: 0px; |
||||
|
clear: both; |
||||
|
overflow: hidden; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Item |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.items > .row > .item, |
||||
|
.ui.items > .item { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
position: relative; |
||||
|
top: 0px; |
||||
|
|
||||
|
width: 316px; |
||||
|
min-height: 375px; |
||||
|
margin: 0em 0.5em 2.5em; |
||||
|
padding: 0em; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
line-height: 1.2; |
||||
|
font-size: 1em; |
||||
|
|
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
||||
|
|
||||
|
-moz-border-radius: 0.33em; |
||||
|
-webkit-border-radius: 0.33em; |
||||
|
border-radius: 0.33em; |
||||
|
|
||||
|
-webkit-transition: all 0.2s ease; |
||||
|
-moz-transition: all 0.2s ease; |
||||
|
-o-transition: all 0.2s ease; |
||||
|
-ms-transition: all 0.2s ease; |
||||
|
transition: all 0.2s ease; |
||||
|
|
||||
|
padding: 0.5em; |
||||
|
} |
||||
|
|
||||
|
.ui.items a.item, |
||||
|
.ui.items .item a { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.ui.items .item, |
||||
|
.ui.items .item > .image, |
||||
|
.ui.items .item > .image .overlay, |
||||
|
.ui.items .item > .content, |
||||
|
.ui.items .item > .content > .meta, |
||||
|
.ui.items .item > .content > .extra { |
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Images |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.items .item > .image { |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
background-color: rgba(0, 0, 0, 0.05); |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.ui.items .item > .image > img { |
||||
|
position: relative; |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
-webkit-border-radius: 0.22em; |
||||
|
-moz-border-radius: 0.22em; |
||||
|
border-radius: 0.22em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
.ui.items .item > .content { |
||||
|
padding: 0.75em 0.5em; |
||||
|
} |
||||
|
.ui.items .item > .content > .name { |
||||
|
display: block; |
||||
|
|
||||
|
font-size: 1.25em; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 0.2em; |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
.ui.items .item > .content > .description { |
||||
|
clear: both; |
||||
|
margin: 0em 0em; |
||||
|
color: rgba(0, 0, 0, 0.45); |
||||
|
} |
||||
|
.ui.items .item > .content > .description p { |
||||
|
margin: 0em 0em 0.2em; |
||||
|
} |
||||
|
.ui.items .item > .content > .description p:last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Meta |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.items .item .meta { |
||||
|
float: right; |
||||
|
color: rgba(0, 0, 0, 0.35); |
||||
|
} |
||||
|
.ui.items .item > .content > .meta + .name { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Labels |
||||
|
---------------*/ |
||||
|
|
||||
|
/*-----star----- */ |
||||
|
|
||||
|
/* hover */ |
||||
|
.ui.items .item .star.label:hover::after { |
||||
|
border-right-color: #F6EFC3; |
||||
|
} |
||||
|
.ui.items .item .star.label:hover::after { |
||||
|
border-top-color: #F6EFC3; |
||||
|
} |
||||
|
.ui.items .item .star.label:hover .icon { |
||||
|
color: #AC9400 |
||||
|
} |
||||
|
|
||||
|
/* active */ |
||||
|
.ui.items .item .star.label.active::after { |
||||
|
border-right-color: #F6EFC3; |
||||
|
} |
||||
|
.ui.items .item .star.label.active::after { |
||||
|
border-top-color: #F6EFC3; |
||||
|
} |
||||
|
.ui.items .item .star.label.active .icon { |
||||
|
color: #AC9400 |
||||
|
} |
||||
|
|
||||
|
/*-----like----- */ |
||||
|
|
||||
|
/* hover */ |
||||
|
.ui.items .item .like.label:hover::after { |
||||
|
border-right-color: #F5E1E2; |
||||
|
} |
||||
|
.ui.items .item .like.label.active::after { |
||||
|
border-top-color: #F5E1E2; |
||||
|
} |
||||
|
.ui.items .item .like.label:hover .icon { |
||||
|
color: #EF404A |
||||
|
} |
||||
|
/* active */ |
||||
|
.ui.items .item .like.label.active::after { |
||||
|
border-right-color: #F5E1E2; |
||||
|
} |
||||
|
.ui.items .item .like.label.active::after { |
||||
|
border-top-color: #F5E1E2; |
||||
|
} |
||||
|
.ui.items .item .like.label.active .icon { |
||||
|
color: #EF404A |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Extra |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.items .item .extra { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
padding: 0em 0.5em; |
||||
|
bottom: -2em; |
||||
|
left: 0em; |
||||
|
height: 1.5em; |
||||
|
color: rgba(0, 0, 0, 0.25); |
||||
|
|
||||
|
-webkit-transition: color 0.2s ease; |
||||
|
-moz-transition: color 0.2s ease; |
||||
|
-o-transition: color 0.2s ease; |
||||
|
-ms-transition: color 0.2s ease; |
||||
|
transition: color 0.2s ease; |
||||
|
} |
||||
|
.ui.items .item .extra > img { |
||||
|
display: inline-block; |
||||
|
border-radius: 500px 500px 500px 500px; |
||||
|
margin-right: 0.25em; |
||||
|
vertical-align: middle; |
||||
|
width: 2em; |
||||
|
} |
||||
|
.ui.items .item .extra .left { |
||||
|
float: left; |
||||
|
} |
||||
|
.ui.items .item .extra .right { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.items .item:hover { |
||||
|
cursor: pointer; |
||||
|
z-index: 5; |
||||
|
|
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
.ui.items .item:hover .extra { |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.ui.items .item:nth-of-type(n+1):hover { |
||||
|
border-bottom-color: #6ECFF5 !important; |
||||
|
} |
||||
|
.ui.items .item:nth-of-type(n+2):hover { |
||||
|
border-bottom-color: #5C6166 !important; |
||||
|
} |
||||
|
.ui.items .item:nth-of-type(n+3):hover { |
||||
|
border-bottom-color: #A1CF64 !important; |
||||
|
} |
||||
|
.ui.items .item:nth-of-type(n+4):hover { |
||||
|
border-bottom-color: #D95C5C !important; |
||||
|
} |
||||
|
.ui.items .item:nth-of-type(n+5):hover { |
||||
|
border-bottom-color: #564F8A !important; |
||||
|
} |
||||
|
.ui.items .item:nth-of-type(n+6):hover { |
||||
|
border-bottom-color: #00B5AD !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Connected |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.connected.items { |
||||
|
display: table; |
||||
|
width: 100%; |
||||
|
margin-left: 0em !important; |
||||
|
margin-right: 0em !important; |
||||
|
} |
||||
|
.ui.connected.items > .row > .item, |
||||
|
.ui.connected.items > .item { |
||||
|
float: none; |
||||
|
display: table-cell; |
||||
|
vertical-align: top; |
||||
|
height: auto; |
||||
|
border-radius: 0px; |
||||
|
margin: 0em; |
||||
|
width: 33.33%; |
||||
|
} |
||||
|
.ui.connected.items > .row { |
||||
|
display: table; |
||||
|
margin: 0.5em 0em; |
||||
|
} |
||||
|
.ui.connected.items > .row:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
|
||||
|
/* Borders */ |
||||
|
.ui.connected.items > .item, |
||||
|
.ui.connected.items > .row:last-child > .item { |
||||
|
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
.ui.connected.items > .row:last-child > .item:first-child, |
||||
|
.ui.connected.items > .item:first-child { |
||||
|
border-radius: 0em 0em 0em 0.33em; |
||||
|
} |
||||
|
.ui.connected.items > .row:last-child > .item:last-child, |
||||
|
.ui.connected.items > .item:last-child { |
||||
|
border-radius: 0em 0em 0.33em 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Hover */ |
||||
|
.ui.connected.items .item:hover { |
||||
|
border-bottom-width: 0.2em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Item Count */ |
||||
|
.ui.one.connected.items > .row > .item, |
||||
|
.ui.one.connected.items > .item { |
||||
|
width: 50%; |
||||
|
padding-left: 2%; |
||||
|
padding-right: 2%; |
||||
|
} |
||||
|
.ui.two.connected.items > .row > .item, |
||||
|
.ui.two.connected.items > .item { |
||||
|
width: 50%; |
||||
|
padding-left: 1%; |
||||
|
padding-right: 1%; |
||||
|
} |
||||
|
.ui.three.connected.items > .row > .item, |
||||
|
.ui.three.connected.items > .item { |
||||
|
width: 33.333%; |
||||
|
padding-left: 1%; |
||||
|
padding-right: 1%; |
||||
|
} |
||||
|
.ui.four.connected.items > .row > .item, |
||||
|
.ui.four.connected.items > .item { |
||||
|
width: 25%; |
||||
|
padding-left: 0.5%; |
||||
|
padding-right: 0.5%; |
||||
|
} |
||||
|
.ui.five.connected.items > .row > .item, |
||||
|
.ui.five.connected.items > .item { |
||||
|
width: 20%; |
||||
|
padding-left: 0.5%; |
||||
|
padding-right: 0.5%; |
||||
|
} |
||||
|
.ui.six.connected.items > .row > .item, |
||||
|
.ui.six.connected.items > .item { |
||||
|
width: 16.66%; |
||||
|
padding-left: 0.5%; |
||||
|
padding-right: 0.5%; |
||||
|
} |
||||
|
.ui.seven.connected.items > .row > .item, |
||||
|
.ui.seven.connected.items > .item { |
||||
|
width: 14.28%; |
||||
|
padding-left: 0.5%; |
||||
|
padding-right: 0.5%; |
||||
|
} |
||||
|
.ui.eight.connected.items > .row > .item, |
||||
|
.ui.eight.connected.items > .item { |
||||
|
width: 12.5%; |
||||
|
padding-left: 0.25%; |
||||
|
padding-right: 0.25%; |
||||
|
} |
||||
|
.ui.nine.connected.items > .row > .item, |
||||
|
.ui.nine.connected.items > .item { |
||||
|
width: 11.11%; |
||||
|
padding-left: 0.25%; |
||||
|
padding-right: 0.25%; |
||||
|
} |
||||
|
.ui.ten.connected.items > .row > .item, |
||||
|
.ui.ten.connected.items > .item { |
||||
|
width: 10%; |
||||
|
padding-left: 0.2%; |
||||
|
padding-right: 0.2%; |
||||
|
} |
||||
|
.ui.eleven.connected.items > .row > .item, |
||||
|
.ui.eleven.connected.items > .item { |
||||
|
width: 9.09%; |
||||
|
padding-left: 0.2%; |
||||
|
padding-right: 0.2%; |
||||
|
} |
||||
|
.ui.twelve.connected.items > .row > .item, |
||||
|
.ui.twelve.connected.items > .item { |
||||
|
width: 8.3333%; |
||||
|
padding-left: 0.1%; |
||||
|
padding-right: 0.1%; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Responsive |
||||
|
--------------------*/ |
||||
|
|
||||
|
@media only screen and (max-width : 600px) { |
||||
|
.ui.stackable.items { |
||||
|
display: block !important; |
||||
|
} |
||||
|
.ui.stackable.items .item { |
||||
|
margin: 0em 2em 1em !important; |
||||
|
display: block !important; |
||||
|
width: auto !important; |
||||
|
padding: 0% !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*-------------------- |
||||
|
Horizontal |
||||
|
---------------------*/ |
||||
|
.ui.horizontal.items > .item, |
||||
|
.ui.items > .horizontal.item { |
||||
|
display: table; |
||||
|
} |
||||
|
|
||||
|
.ui.horizontal.items > .item > .image |
||||
|
.ui.items > .horizontal.item > .image { |
||||
|
display: table-cell; |
||||
|
width: 50%; |
||||
|
} |
||||
|
.ui.horizontal.items > .item > .image + .content, |
||||
|
.ui.items > .horizontal.item > .image + .content { |
||||
|
width: 50%; |
||||
|
display: table-cell; |
||||
|
} |
||||
|
.ui.horizontal.items > .item > .content, |
||||
|
.ui.items > .horizontal.item > .content { |
||||
|
padding: 1% 1.7% 11% 3%; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
.ui.horizontal.items > .item > .meta, |
||||
|
.ui.items > .horizontal.item > .meta { |
||||
|
position: absolute; |
||||
|
padding: 0%; |
||||
|
bottom: 7%; |
||||
|
left: 3%; |
||||
|
width: 94%; |
||||
|
} |
||||
|
.ui.horizontal.items > .item > .image + .content + .meta, |
||||
|
.ui.items > .horizontal.item > .image + .content + .meta { |
||||
|
bottom: 7%; |
||||
|
left: 53%; |
||||
|
width: 44%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ui.horizontal.items > .item .avatar, |
||||
|
.ui.items > .horizontal.item .avatar { |
||||
|
width: 11.5%; |
||||
|
} |
||||
|
|
||||
|
.ui.items > .item .avatar { |
||||
|
max-width: 25px; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Item Count |
||||
|
---------------*/ |
||||
|
|
||||
|
|
||||
|
.ui.one.items { |
||||
|
margin-left: -2%; |
||||
|
margin-right: -2%; |
||||
|
} |
||||
|
.ui.one.items > .item { |
||||
|
width: 100%; |
||||
|
margin-left: 2%; |
||||
|
margin-right: 2%; |
||||
|
} |
||||
|
|
||||
|
.ui.two.items { |
||||
|
margin-left: -1%; |
||||
|
margin-right: -1%; |
||||
|
} |
||||
|
.ui.two.items > .item { |
||||
|
width: 48%; |
||||
|
margin-left: 1%; |
||||
|
margin-right: 1%; |
||||
|
} |
||||
|
.ui.two.items > .item:nth-child(2n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.three.items { |
||||
|
margin-left: -1%; |
||||
|
margin-right: -1%; |
||||
|
} |
||||
|
.ui.three.items > .item { |
||||
|
width: 31.333%; |
||||
|
margin-left: 1%; |
||||
|
margin-right: 1%; |
||||
|
} |
||||
|
.ui.three.items > .item:nth-child(3n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.four.items { |
||||
|
margin-left: -0.5%; |
||||
|
margin-right: -0.5%; |
||||
|
} |
||||
|
.ui.four.items > .item { |
||||
|
width: 24%; |
||||
|
margin-left: 0.5%; |
||||
|
margin-right: 0.5%; |
||||
|
} |
||||
|
.ui.four.items > .item:nth-child(4n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.five.items { |
||||
|
margin-left: -0.5%; |
||||
|
margin-right: -0.5%; |
||||
|
} |
||||
|
.ui.five.items > .item { |
||||
|
width: 19%; |
||||
|
margin-left: 0.5%; |
||||
|
margin-right: 0.5%; |
||||
|
} |
||||
|
.ui.five.items > .item:nth-child(5n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.six.items { |
||||
|
margin-left: -0.5%; |
||||
|
margin-right: -0.5%; |
||||
|
} |
||||
|
.ui.six.items > .item { |
||||
|
width: 15.66%; |
||||
|
margin-left: 0.5%; |
||||
|
margin-right: 0.5%; |
||||
|
} |
||||
|
.ui.six.items > .item:nth-child(6n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.seven.items { |
||||
|
margin-left: -0.5%; |
||||
|
margin-right: -0.5%; |
||||
|
} |
||||
|
.ui.seven.items > .item { |
||||
|
width: 13.28%; |
||||
|
margin-left: 0.5%; |
||||
|
margin-right: 0.5%; |
||||
|
font-size: 11px; |
||||
|
} |
||||
|
.ui.seven.items > .item:nth-child(7n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.eight.items { |
||||
|
margin-left: -0.25%; |
||||
|
margin-right: -0.25%; |
||||
|
} |
||||
|
.ui.eight.items > .item { |
||||
|
width: 12.0%; |
||||
|
margin-left: 0.25%; |
||||
|
margin-right: 0.25%; |
||||
|
font-size: 11px; |
||||
|
} |
||||
|
.ui.eight.items > .item:nth-child(8n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.nine.items { |
||||
|
margin-left: -0.25%; |
||||
|
margin-right: -0.25%; |
||||
|
} |
||||
|
.ui.nine.items > .item { |
||||
|
width: 10.61%; |
||||
|
margin-left: 0.25%; |
||||
|
margin-right: 0.25%; |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
.ui.nine.items > .item:nth-child(9n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.ten.items { |
||||
|
margin-left: -0.2%; |
||||
|
margin-right: -0.2%; |
||||
|
} |
||||
|
.ui.ten.items > .item { |
||||
|
width: 9.6%; |
||||
|
margin-left: 0.2%; |
||||
|
margin-right: 0.2%; |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
.ui.ten.items > .item:nth-child(10n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.eleven.items { |
||||
|
margin-left: -0.2%; |
||||
|
margin-right: -0.2%; |
||||
|
} |
||||
|
.ui.eleven.items > .item { |
||||
|
width: 8.69%; |
||||
|
margin-left: 0.2%; |
||||
|
margin-right: 0.2%; |
||||
|
font-size: 9px; |
||||
|
} |
||||
|
.ui.eleven.items > .item:nth-child(11n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
|
.ui.twelve.items { |
||||
|
margin-left: -0.1%; |
||||
|
margin-right: -0.1%; |
||||
|
} |
||||
|
.ui.twelve.items > .item { |
||||
|
width: 8.1333%; |
||||
|
margin-left: 0.1%; |
||||
|
margin-right: 0.1%; |
||||
|
font-size: 9px; |
||||
|
} |
||||
|
.ui.twelve.items > .item:nth-child(12n+1) { |
||||
|
clear: left; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,508 @@ |
|||||
|
/* |
||||
|
* # Semantic List - Flat |
||||
|
* http://github.com/jlukic/semantic-ui/ |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 26 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
List |
||||
|
*******************************/ |
||||
|
|
||||
|
ul.ui.list, |
||||
|
ol.ui.list, |
||||
|
.ui.list { |
||||
|
list-style-type: none; |
||||
|
margin: 1em 0em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
ul.ui.list ul, |
||||
|
ol.ui.list ol, |
||||
|
.ui.list .list { |
||||
|
margin: 0em; |
||||
|
padding: 0.5em 0em 0.5em 1em; |
||||
|
} |
||||
|
|
||||
|
ul.ui.list:first-child, |
||||
|
ol.ui.list:first-child, |
||||
|
.ui.list:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
|
||||
|
ul.ui.list:last-child, |
||||
|
ol.ui.list:last-child, |
||||
|
.ui.list:last-child { |
||||
|
margin-bottom: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Content |
||||
|
*******************************/ |
||||
|
|
||||
|
/* List Item */ |
||||
|
ul.ui.list li, |
||||
|
ol.ui.list li, |
||||
|
.ui.list .item { |
||||
|
display: list-item; |
||||
|
list-style-type: none; |
||||
|
list-style-position: inside; |
||||
|
|
||||
|
padding: 0.3em 0em; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
/* Icon */ |
||||
|
.ui.list .item > .icon { |
||||
|
margin: 0em 0.5em 0em 0em; |
||||
|
} |
||||
|
.ui.list .item > .icon + .content { |
||||
|
margin-left: 0.75em; |
||||
|
} |
||||
|
|
||||
|
/* Image */ |
||||
|
.ui.list .item > img { |
||||
|
display: inline-block; |
||||
|
width: 2em; |
||||
|
margin-right: 0.5em; |
||||
|
|
||||
|
vertical-align: middle; |
||||
|
-webkit-border-radius: 0.2em; |
||||
|
-moz-border-radius: 0.2em; |
||||
|
border-radius: 0.2em; |
||||
|
} |
||||
|
|
||||
|
/* Content */ |
||||
|
.ui.list .item > .content { |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
/* Link */ |
||||
|
.ui.list a { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.ui.list a .icon { |
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
-webkit-transition: color 0.2s ease; |
||||
|
-moz-transition: color 0.2s ease; |
||||
|
-o-transition: color 0.2s ease; |
||||
|
-ms-transition: color 0.2s ease; |
||||
|
transition: color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
/* Header */ |
||||
|
.ui.list .header { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.ui.list .description { |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
/* Floated Content */ |
||||
|
.ui.list .item > .left.floated { |
||||
|
float: left; |
||||
|
} |
||||
|
.ui.list .item > .right.floated { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Types |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Horizontal |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.horizontal.list { |
||||
|
display: inline-block; |
||||
|
font-size: 0em; |
||||
|
} |
||||
|
.ui.horizontal.list .item { |
||||
|
display: inline-block; |
||||
|
margin-left: 1em; |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
|
||||
|
.ui.horizontal.list .item:first-child { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Hover |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.list a:hover .icon { |
||||
|
color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*------------------- |
||||
|
Link |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.link.list a { |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
.ui.link.list a:hover { |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
.ui.link.list a:active { |
||||
|
color: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
.ui.link.list .active { |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Selection |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.selection.list .item { |
||||
|
cursor: pointer; |
||||
|
color: rgba(0, 0, 0, 0.4); |
||||
|
padding: 0.5em; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
0.2s color ease, |
||||
|
0.2s padding-left ease, |
||||
|
0.2s background-color ease |
||||
|
; |
||||
|
-moz-transition: |
||||
|
0.2s color ease, |
||||
|
0.2s padding-left ease, |
||||
|
0.2s background-color ease |
||||
|
; |
||||
|
-o-transition: |
||||
|
0.2s color ease, |
||||
|
0.2s padding-left ease, |
||||
|
0.2s background-color ease |
||||
|
; |
||||
|
-ms-transition: |
||||
|
0.2s color ease, |
||||
|
0.2s padding-left ease, |
||||
|
0.2s background-color ease |
||||
|
; |
||||
|
transition: |
||||
|
0.2s color ease, |
||||
|
0.2s padding-left ease, |
||||
|
0.2s background-color ease |
||||
|
; |
||||
|
} |
||||
|
.ui.selection.list .item:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.02); |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
.ui.selection.list:not(.horizontal, .ordered) .item:hover { |
||||
|
padding-left: 1em; |
||||
|
} |
||||
|
.ui.selection.list:not(.horizontal, .ordered) .item:hover .item:hover { |
||||
|
padding-left: 0.5em; |
||||
|
} |
||||
|
|
||||
|
.ui.selection.list .item:active { |
||||
|
background-color: rgba(0, 0, 0, 0.05); |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
.ui.selection.list .item.active { |
||||
|
background-color: rgba(0, 0, 0, 0.04); |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Bulleted |
||||
|
--------------------*/ |
||||
|
|
||||
|
ul.ui.list, |
||||
|
.ui.bulleted.list { |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
ul.ui.list li, |
||||
|
.ui.bulleted.list .item { |
||||
|
position: relative; |
||||
|
} |
||||
|
ul.ui.list li:before, |
||||
|
.ui.bulleted.list .item:before { |
||||
|
position: absolute; |
||||
|
left: -1em; |
||||
|
content: '•'; |
||||
|
|
||||
|
line-height: 1.2rem; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
ul.ui.list ul, |
||||
|
.ui.bulleted.list .list { |
||||
|
padding-left: 1.2em; |
||||
|
} |
||||
|
|
||||
|
/* Horizontal Bulleted */ |
||||
|
ul.ui.horizontal.bulleted.list, |
||||
|
.ui.horizontal.bulleted.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
ul.ui.horizontal.bulleted.list li, |
||||
|
.ui.horizontal.bulleted.list .item { |
||||
|
margin-left: 1.5em; |
||||
|
} |
||||
|
ul.ui.horizontal.bulleted.list li:before, |
||||
|
.ui.horizontal.bulleted.list .item:before { |
||||
|
left: -0.9em; |
||||
|
} |
||||
|
ul.ui.horizontal.bulleted.list li:first-child, |
||||
|
.ui.horizontal.bulleted.list .item:first-child { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
ul.ui.horizontal.bulleted.list li:first-child::before, |
||||
|
.ui.horizontal.bulleted.list .item:first-child::before { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/*------------------- |
||||
|
Ordered |
||||
|
--------------------*/ |
||||
|
|
||||
|
ol.ui.list, |
||||
|
.ui.ordered.list { |
||||
|
counter-reset: ordered; |
||||
|
margin-left: 2em; |
||||
|
list-style-type: none; |
||||
|
} |
||||
|
ol.ui.list li, |
||||
|
.ui.ordered.list .item { |
||||
|
list-style-type: none; |
||||
|
position: relative; |
||||
|
} |
||||
|
ol.ui.list li:before, |
||||
|
.ui.ordered.list .item:before { |
||||
|
position: absolute; |
||||
|
left: -2em; |
||||
|
|
||||
|
counter-increment: ordered; |
||||
|
content: counters(ordered, "."); |
||||
|
|
||||
|
text-align: right; |
||||
|
vertical-align: top; |
||||
|
opacity: 0.75; |
||||
|
} |
||||
|
|
||||
|
ol.ui.list ol, |
||||
|
.ui.ordered.list .list { |
||||
|
counter-reset: ordered; |
||||
|
padding-left: 3em; |
||||
|
} |
||||
|
|
||||
|
ol.ui.list ol li:before, |
||||
|
.ui.ordered.list .list .item:before { |
||||
|
left: -2.5em; |
||||
|
} |
||||
|
|
||||
|
/* Horizontal Ordered */ |
||||
|
ol.ui.horizontal.list, |
||||
|
.ui.ordered.horizontal.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
ol.ui.horizontal.list li:before, |
||||
|
.ui.ordered.horizontal.list .item:before { |
||||
|
position: static; |
||||
|
margin: 0em 0.5em 0em 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Divided |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.divided.list > .item, |
||||
|
.ui.divided.list > .list { |
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
padding-left: 0.5em; |
||||
|
padding-right: 0.5em; |
||||
|
} |
||||
|
.ui.divided.list .item .menu .item { |
||||
|
border-width: 0px; |
||||
|
} |
||||
|
.ui.divided.list .item:first-child { |
||||
|
border-top-width: 0px; |
||||
|
} |
||||
|
|
||||
|
/* Sub Menu */ |
||||
|
.ui.divided.list .list { |
||||
|
margin-left: -0.5em; |
||||
|
margin-right: -0.5em; |
||||
|
} |
||||
|
.ui.divided.list .list .item { |
||||
|
padding-left: 1em; |
||||
|
padding-right: 1em; |
||||
|
} |
||||
|
.ui.divided.list .list .item:first-child { |
||||
|
border-top-width: 1px; |
||||
|
} |
||||
|
|
||||
|
/* Divided bulleted */ |
||||
|
.ui.divided.bulleted.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.divided.bulleted.list .item { |
||||
|
padding-left: 1.5em; |
||||
|
} |
||||
|
.ui.divided.bulleted.list .item:before { |
||||
|
left: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* Divided ordered */ |
||||
|
.ui.divided.ordered.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.divided.ordered.list > .item { |
||||
|
padding-left: 2em; |
||||
|
padding-right: 2em; |
||||
|
} |
||||
|
.ui.divided.ordered.list > .item:before { |
||||
|
left: 0.5em; |
||||
|
} |
||||
|
.ui.divided.ordered.list .item .list { |
||||
|
margin-left: -2em; |
||||
|
margin-right: -2em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Divided horizontal */ |
||||
|
.ui.divided.horizontal.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.divided.horizontal.list .item { |
||||
|
border-top: none; |
||||
|
border-left: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
margin: 0em; |
||||
|
padding-left: 0.75em; |
||||
|
padding-right: 0.75em; |
||||
|
|
||||
|
line-height: 0.6; |
||||
|
} |
||||
|
.ui.horizontal.divided.list .item:first-child { |
||||
|
border-left: none; |
||||
|
padding-left: 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Celled |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.celled.list > .item, |
||||
|
.ui.celled.list > .list { |
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
padding-left: 0.5em; |
||||
|
padding-right: 0.5em; |
||||
|
} |
||||
|
.ui.celled.list > .item:last-child { |
||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* Sub Menu */ |
||||
|
.ui.celled.list .item .list { |
||||
|
margin-left: -0.5em; |
||||
|
margin-right: -0.5em; |
||||
|
} |
||||
|
.ui.celled.list .item .list .item { |
||||
|
border-width: 0px; |
||||
|
} |
||||
|
.ui.celled.list .list .item:first-child { |
||||
|
border-top-width: 0px; |
||||
|
} |
||||
|
|
||||
|
/* Celled Bulleted */ |
||||
|
.ui.celled.bulleted.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.celled.bulleted.list > .item { |
||||
|
padding-left: 1.5em; |
||||
|
} |
||||
|
.ui.celled.bulleted.list > .item:before { |
||||
|
left: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* Celled Ordered */ |
||||
|
.ui.celled.ordered.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.celled.ordered.list .item { |
||||
|
padding-left: 2em; |
||||
|
padding-right: 2em; |
||||
|
} |
||||
|
.ui.celled.ordered.list .item:before { |
||||
|
left: 0.5em; |
||||
|
} |
||||
|
.ui.celled.ordered.list .item .list { |
||||
|
margin-left: -2em; |
||||
|
margin-right: -2em; |
||||
|
} |
||||
|
|
||||
|
/* Celled Horizontal */ |
||||
|
.ui.horizontal.celled.list { |
||||
|
margin-left: 0em; |
||||
|
} |
||||
|
.ui.horizontal.celled.list .item { |
||||
|
border-top: none; |
||||
|
border-left: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
margin: 0em; |
||||
|
padding-left: 0.75em; |
||||
|
padding-right: 0.75em; |
||||
|
|
||||
|
line-height: 0.6; |
||||
|
} |
||||
|
.ui.horizontal.celled.list .item:last-child { |
||||
|
border-bottom: none; |
||||
|
border-right: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*------------------- |
||||
|
Sizes |
||||
|
--------------------*/ |
||||
|
|
||||
|
.ui.mini.list .item { |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
.ui.tiny.list .item { |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
.ui.small.list .item { |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
.ui.large.list .item { |
||||
|
font-size: 1.125rem; |
||||
|
} |
||||
|
.ui.big.list .item { |
||||
|
font-size: 1.25rem; |
||||
|
} |
||||
|
.ui.huge.list .item { |
||||
|
font-size: 1.375rem; |
||||
|
} |
||||
|
.ui.massive.list .item { |
||||
|
font-size: 1.5rem; |
||||
|
} |
||||
@ -0,0 +1,27 @@ |
|||||
|
/* |
||||
|
* # Statistic |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: Aug 20, 2013 |
||||
|
*/ |
||||
|
/******************************* |
||||
|
Statistic |
||||
|
*******************************/ |
||||
|
.ui.statistic { |
||||
|
text-align: center; |
||||
|
} |
||||
|
/******************************* |
||||
|
Content |
||||
|
*******************************/ |
||||
|
.ui.statistic > .number { |
||||
|
font-size: 4em; |
||||
|
font-weight: bold; |
||||
|
color: rgba(0, 0, 0, 0.7); |
||||
|
} |
||||
|
.ui.statistic > .description { |
||||
|
opacity: 0.8; |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.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;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.small.breadcrumb{font-size:.75em}.ui.large.breadcrumb{font-size:1.1em}.ui.huge.breadcrumb{font-size:1.3em} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||
|
.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:#EFEFEF;padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-moz-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-o-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-ms-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em}.ui.segment:first-child{margin-top:0}.ui.segment:last-child{margin-bottom:0}.ui.message .header{margin:0;font-size:1.33em;font-weight:700}.ui.message p{opacity:.85;margin:.3em 0}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-left:-1px;margin-right:-1px;margin-bottom:-1px;-webkit-border-radius:.325em .325em 0 0;-moz-border-radius:.325em .325em 0 0;border-radius:.325em .325em 0 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}.ui.bottom.attached.message{margin-top:-1px;-webkit-border-radius:0 0 .325em .325em;-moz-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em}.ui.icon.message{display:table;width:100%}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:top}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.floating.message{-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05) inset;-moz-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05) inset;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05) inset}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{background-color:#E6F4F9;color:#4D8796}.ui.green.message{background-color:#DEFCD5;color:#52A954}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;color:#96904D}.ui.red.message{background-color:#F1D7D7;color:#A95252}.ui.success.message,.ui.positive.message{background-color:#5BBD72;color:#FFF}.ui.error.message,.ui.negative.message{background-color:#D95C5C;color:#FFF}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||
|
.ui.divider{margin:1rem 0rem;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8);line-height:1;height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui.vertical.divider,.ui.horizontal.divider{position:absolute;border:0;height:0;margin:0;background-color:transparent;font-size:.875rem;font-weight:700;text-align:center;text-transform:uppercase;color:rgba(0,0,0,.8)}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0 0 0 -3%;width:6%;height:50%;line-height:0;padding:0}.ui.vertical.divider:before,.ui.vertical.divider:after{position:absolute;left:50%;content:" ";z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.8);width:0;height:80%}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}.ui.horizontal.divider{position:relative;top:0;left:0;margin:1rem 1.5rem;height:auto;padding:0;line-height:1}.ui.horizontal.divider:before,.ui.horizontal.divider:after{position:absolute;content:" ";z-index:3;width:50%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8)}.ui.horizontal.divider:before{left:0;margin-left:-1.5rem}.ui.horizontal.divider:after{left:auto;right:0;margin-right:-1.5rem}.ui.divider>.icon{margin:0;font-size:1rem;vertical-align:middle}.ui.divider.inverted{color:#fff}.ui.vertical.inverted.divider,.ui.horizontal.inverted.divider{color:rgba(255,255,255,.9)}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15);border-left-color:rgba(0,0,0,.15);border-right-color:rgba(255,255,255,.15)}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem} |
||||
@ -0,0 +1 @@ |
|||||
|
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header .content{display:inline-block;vertical-align:top}.ui.header .icon{margin-right:.5em}.ui.header:first-child{margin-top:0}.ui.header:last-child{margin-bottom:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#D95C5C!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.dividing.header{border-bottom:3px solid #6ECFF5}.ui.black.dividing.header{border-bottom:3px solid #5C6166}.ui.green.dividing.header{border-bottom:3px solid #A1CF64}.ui.red.dividing.header{border-bottom:3px solid #D95C5C}.ui.purple.dividing.header{border-bottom:3px solid #564F8A}.ui.teal.dividing.header{border-bottom:3px solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#D95C5C!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left;margin-top:0;margin-right:.5em}.ui.right.floated.header{float:right;margin-top:0;margin-left:.5em}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.dividing.header .sub.header{padding-bottom:.5em}.ui.dividing.header .icon{margin-bottom:.2em}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.attached.header{background-color:#E0E0E0;padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:inline-block;text-align:center}.ui.icon.header .icon{float:none;display:block;font-size:3em;margin:0 auto .2em}.ui.icon.header .circular.icon,.ui.icon.header .square.icon{font-size:2em}.ui.block.icon.header .icon{margin-bottom:0}.ui.icon.header.aligned{margin-left:auto;margin-right:auto;display:block} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||
|
.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:rgba(0,0,0,.05)}img.ui.image{display:block;background:0}.ui.image img{display:block;max-width:100%;height:auto}.ui.disabled.image{cursor:default;opacity:.3}.ui.rounded.images .image,.ui.rounded.images img,.ui.rounded.image img,.ui.rounded.image{-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.circular.images .image,.ui.circular.images img,.ui.circular.image img,.ui.circular.image{-webkit-border-radius:500rem;-moz-border-radius:500rem;border-radius:500rem}.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.image img,.ui.avatar.image{margin-right:.5em;display:inline-block;width:2em;height:2em;-webkit-border-radius:500rem;-moz-border-radius:500rem;border-radius:500rem}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.images,.ui.right.floated.image{float:right;margin-bottom:1em;margin-left:1em}.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.image{width:20px;font-size:.7rem}.ui.mini.images .image,.ui.mini.images img,.ui.mini.image{width:35px;font-size:.8rem}.ui.small.images .image,.ui.small.images img,.ui.small.image{width:80px;font-size:.9rem}.ui.medium.images .image,.ui.medium.images img,.ui.medium.image{width:300px;font-size:1rem}.ui.large.images .image,.ui.large.images img,.ui.large.image{width:450px;font-size:1.1rem}.ui.huge.images .image,.ui.huge.images img,.ui.huge.image{width:600px;font-size:1.2rem}.ui.images{font-size:0;margin:0 -.25rem 0rem}.ui.images .image,.ui.images img{display:inline-block;margin:0 .25em .5em} |
||||
@ -0,0 +1 @@ |
|||||
|
.ui.input{display:inline-block;position:relative}.ui.input input{width:100%;font-family:"Helvetica Neue",Helvetica,Arial;margin:0;padding:.85em 1.2em;font-size:.875em;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.loading.input>.icon{background:url(../images/loader-mini.gif) no-repeat 50% 50%}.ui.loading.input>.icon:before,.ui.loading.input>.icon:after{display:none}.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:#D95C5C}.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:0;right:0;margin:0;width:2.6em;height:100%;padding-top:.85em;text-align:center;-webkit-border-radius:0 .3125em .3125em 0;-moz-border-radius:0 .3125em .3125em 0;border-radius:0 .3125em .3125em 0;-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.icon.input>.circular.icon{top:.35em;right:.5em}.ui.left.icon.input>.icon{right:auto;left:1px;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em}.ui.left.icon.input>.circular.icon{right:auto;left:.5em}.ui.left.icon.input>input{padding-left:3em!important;padding-right:1.2em!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.labeled.icon.input:not(.left)>input{padding-right:3.25em!important}.ui.labeled.icon.input:not(.left)>.icon{margin-right:.75em}.ui.action.input{display:table}.ui.action.input>input{display:table-cell;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:0}.ui.action.input>.button{display:table-cell;opacity:.9;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;white-space:nowrap}.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.mini.input{font-size:.8125rem}.ui.tiny.input{font-size:.875rem}.ui.small.input{font-size:.875rem}.ui.input{font-size:1rem}.ui.large.input{font-size:1.125rem}.ui.big.input{font-size:1.25rem}.ui.huge.input{font-size:1.375rem}.ui.massive.input{font-size:1.5rem} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +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:.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} |
||||
@ -0,0 +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;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
@ -0,0 +1 @@ |
|||||
|
.ui.step,.ui.steps .step{display:inline-block;position:relative;padding:1em 2em 1em 3em;vertical-align:top;background-color:#FFF;color:#888;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.step:after,.ui.steps .step:after{position:absolute;z-index:2;content:'';top:0;right:-1.45em;border-bottom:1.5em solid transparent;border-left:1.5em solid #FFF;border-top:1.5em solid transparent;width:0;height:0}.ui.step,.ui.steps .step,.ui.steps .step:after{-webkit-transition:opacity .1s ease,color .1s ease,box-shadow .1s ease;-moz-transition:opacity .1s ease,color .1s ease,box-shadow .1s ease;-o-transition:opacity .1s ease,color .1s ease,box-shadow .1s ease;-ms-transition:opacity .1s ease,color .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,box-shadow .1s ease}.ui.steps{cursor:pointer;display:inline-block;font-size:0;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-moz-border-radius:.3125rem;-webkit-border-radius:.3125rem;border-radius:.3125rem}.ui.steps .step:first-child{padding-left:1.35em;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em}.ui.steps .step:last-child{-webkit-border-radius:0 .3125em .3125em 0;-moz-border-radius:0 .3125em .3125em 0;border-radius:0 .3125em .3125em 0}.ui.steps .step:only-child{-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.steps .step:last-child{margin-right:0}.ui.steps .step:last-child:after{display:none}.ui.step:hover,.ui.step.hover{background-color:#F7F7F7;color:rgba(0,0,0,.8)}.ui.steps .step.hover:after,.ui.steps .step:hover:after,.ui.step:hover,.ui.step.hover::after{border-left-color:#F7F7F7}.ui.steps .step.down,.ui.steps .step:active,.ui.step.down,.ui.step:active{background-color:#F0F0F0}.ui.steps .step.down:after,.ui.steps .step:active:after,.ui.steps.down::after,.ui.steps:active::after{border-left-color:#F0F0F0}.ui.steps .step.active,.ui.active.step{cursor:auto;background-color:#555;color:#FFF;font-weight:700}.ui.steps .step.active:after,.ui.active.steps:after{border-left-color:#555}.ui.steps .disabled.step,.ui.disabled.step{cursor:auto;background-color:#FFF;color:#CBCBCB}.ui.disabled.step:after{border:0;background-color:#FFF;top:.42em;right:-1em;width:2.15em;height:2.15em;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset;box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset}.attached.ui.steps{margin:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.attached.ui.steps .step:first-child{-webkit-border-radius:.3125em 0 0;-moz-border-radius:.3125em 0 0;border-radius:.3125em 0 0}.attached.ui.steps .step:last-child{-webkit-border-radius:0 .3125em 0 0;-moz-border-radius:0 .3125em 0 0;border-radius:0 .3125em 0 0}.bottom.attached.ui.steps{margin-top:-1px;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.bottom.attached.ui.steps .step:first-child{-webkit-border-radius:0 0 0 .3125em;-moz-border-radius:0 0 0 .3125em;border-radius:0 0 0 .3125em}.bottom.attached.ui.steps .step:last-child{-webkit-border-radius:0 0 .3125em;-moz-border-radius:0 0 .3125em;border-radius:0 0 .3125em}.ui.one.steps,.ui.two.steps,.ui.three.steps,.ui.four.steps,.ui.five.steps,.ui.six.steps,.ui.seven.steps,.ui.eight.steps{display:block}.ui.one.steps>.step{width:100%}.ui.two.steps>.step{width:50%}.ui.three.steps>.step{width:33.333%}.ui.four.steps>.step{width:25%}.ui.five.steps>.step{width:20%}.ui.six.steps>.step{width:16.666%}.ui.seven.steps>.step{width:14.285%}.ui.eight.steps>.step{width:12.5%}.ui.small.step,.ui.small.steps .step{font-size:.8rem}.ui.step,.ui.steps .step{font-size:1rem}.ui.large.step,.ui.large.steps .step{font-size:1.25rem} |
||||
@ -0,0 +1 @@ |
|||||
|
0662cb96bfb78cb2603df4bc9995314bd6806312 |
||||
@ -0,0 +1 @@ |
|||||
|
70125459f7d593b79cabc75bd60b91943aa65e93 |
||||
@ -0,0 +1 @@ |
|||||
|
2edb4ec34cbc0b6559b808a3a1f31e0e587742ff |
||||
@ -0,0 +1 @@ |
|||||
|
d3659246915cacb0c9204271f1f9fc5f77049eac |
||||
@ -0,0 +1 @@ |
|||||
|
b9bd17e158d87fb1477f7ac3ddbb5a676f3c26d2 |
||||
@ -0,0 +1 @@ |
|||||
|
25066de069a62374b39f220581d1314fa60a5f45 |
||||
@ -0,0 +1 @@ |
|||||
|
b9c54d022b2628b920f09afd4cb10d4dc0ce0d17 |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue