|
|
@ -1,31 +1,57 @@ |
|
|
|
{ |
|
|
|
"Name" : "Button", |
|
|
|
"Type" : "UI Element", |
|
|
|
|
|
|
|
// Package Name (SubType Type) |
|
|
|
"Name" : "Semantic Button", |
|
|
|
|
|
|
|
// Version # |
|
|
|
"Version" : "0.1", |
|
|
|
|
|
|
|
// Type of element |
|
|
|
"Type" : "button", |
|
|
|
|
|
|
|
// Type of definition |
|
|
|
"Definition" : "Element", |
|
|
|
|
|
|
|
// ID of UI components that must be included |
|
|
|
"Dependencies" : [], |
|
|
|
|
|
|
|
// list of required components in "id name" format |
|
|
|
"Coupling" : ["semantic icon", "semantic loader"], |
|
|
|
|
|
|
|
// List of mutually exclusive types with their koan generators <https://github.com/zodoz/jquery-ZenCoding> |
|
|
|
"Types": { |
|
|
|
"Singular": { |
|
|
|
"Standard" : ".ui.button", |
|
|
|
"Icon" : ".ui.icon.button > i.add.icon", |
|
|
|
"Labeled Icon" : ".ui.labeled.icon.button > i.add.icon" |
|
|
|
}, |
|
|
|
"Group": { |
|
|
|
"Standard" : ".ui.buttons > .button+.button+.button", |
|
|
|
"Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", |
|
|
|
"Conditional" : ".ui.buttons > .button+.or+.button", |
|
|
|
"Vertical" : ".vertical.ui.buttons > .button+.button+.button" |
|
|
|
} |
|
|
|
}, |
|
|
|
"Text": { |
|
|
|
".ui.button" : "Button" |
|
|
|
"Singular": { |
|
|
|
"Standard" : ".ui.button", |
|
|
|
"Icon" : ".ui.icon.button > i.add.icon", |
|
|
|
"Labeled Icon" : ".ui.icon.button > i.add.icon", |
|
|
|
"Social" : [ |
|
|
|
".ui.facebook.button > i.facebook.icon", |
|
|
|
".ui.twitter.button > i.twitter.icon" |
|
|
|
] |
|
|
|
}, |
|
|
|
"Plural": { |
|
|
|
"Standard" : ".ui.buttons > .button+.button+.button", |
|
|
|
"Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", |
|
|
|
"Conditional" : ".ui.buttons > .button+.or+.button", |
|
|
|
"Vertical" : ".vertical.ui.buttons > .button+.button+.button" |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// Set of states that an element can occupy |
|
|
|
"States": { |
|
|
|
"Hover" : "hover", |
|
|
|
"Down" : "down", |
|
|
|
"Active" : "active", |
|
|
|
"Loading" : "loading", |
|
|
|
"Disabled" : "disabled" |
|
|
|
}, |
|
|
|
|
|
|
|
// Sets of variations of an element |
|
|
|
"Variations" : { |
|
|
|
"Circular" : "circular", |
|
|
|
"Toggle" : "toggle", |
|
|
|
"Fluid" : "fluid", |
|
|
|
"Size": [ |
|
|
|
"Size" : [ |
|
|
|
"mini", |
|
|
|
"tiny", |
|
|
|
"small", |
|
|
@ -34,7 +60,7 @@ |
|
|
|
"huge", |
|
|
|
"massive" |
|
|
|
], |
|
|
|
"Color": [ |
|
|
|
"Color" : [ |
|
|
|
"black", |
|
|
|
"green", |
|
|
|
"red", |
|
|
@ -43,9 +69,9 @@ |
|
|
|
"red", |
|
|
|
"teal" |
|
|
|
], |
|
|
|
"Ordinality": [ |
|
|
|
"secondary", |
|
|
|
"tertiary" |
|
|
|
"Feedback": [ |
|
|
|
"positive", |
|
|
|
"negative" |
|
|
|
], |
|
|
|
"Attached" : [ |
|
|
|
"attached top", |
|
|
@ -53,5 +79,32 @@ |
|
|
|
"attached left", |
|
|
|
"attached right" |
|
|
|
] |
|
|
|
}, |
|
|
|
|
|
|
|
// Used with generators to create example content |
|
|
|
"Text": { |
|
|
|
".button" : ["Button", "Follow", "Submit"] |
|
|
|
}, |
|
|
|
|
|
|
|
// Your module may optionally include a text definition of its variations to help clarify their purpose. This may include the definition of types or variations |
|
|
|
"Definition": { |
|
|
|
"Standard" : "A simple button", |
|
|
|
"Icon" : "A button icon is formatted to contain only an icon", |
|
|
|
"Labeled Icon" : "A button can have an icon and a label", |
|
|
|
"Social" : "A button can be formatted to link to a social website", |
|
|
|
|
|
|
|
"Hover" : "A button can change to show a user has hovered their mouse", |
|
|
|
"Down" : "A button can change when pressed using touch or mouse events", |
|
|
|
"Active" : "A button can show it is currently the active user selection", |
|
|
|
"Loading" : "A button can show a loading indicator", |
|
|
|
"Disabled" : "A button can show it is currently unable to be interacted with", |
|
|
|
|
|
|
|
"Attached" : "A button can attach to other content", |
|
|
|
"Circular" : "A button can be circular", |
|
|
|
"Color" : "A button can have different colors", |
|
|
|
"Fluid" : "A button can be fluid", |
|
|
|
"Ordinality" : "A button can blend into a page", |
|
|
|
"Size" : "A button can vary in size", |
|
|
|
"Toggle" : "A button can be formatted to toggle on and off" |
|
|
|
} |
|
|
|
} |