diff --git a/.dockerignore b/.dockerignore index 139b990f..701cf2eb 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,6 +1,4 @@ -.git - # don't import anything from the UI except the /app folder where the # actual site and compiled assets live. -build/dependencies/contiv-ui -!build/dependencies/contiv-ui/app +ui +!ui/app diff --git a/.gitignore b/.gitignore index 4c0f5118..dcf06b9b 100644 --- a/.gitignore +++ b/.gitignore @@ -8,8 +8,5 @@ local_certs # state info stored for a local etcd instance state/default.etcd/ -# build dependencies (e.g., UI, etc.) -build/dependencies - # logs *.log diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..35b8c6cf --- /dev/null +++ b/Dockerfile @@ -0,0 +1,16 @@ +FROM golang:1.7.6 as builder + +COPY ./ /go/src/github.com/contiv/auth_proxy + +WORKDIR /go/src/github.com/contiv/auth_proxy + +RUN VERSION=$(git describe --tags --always) ./scripts/build_in_container.sh + +FROM scratch + +COPY ./ui/app /ui +COPY --from=builder /go/src/github.com/contiv/auth_proxy/build/output/auth_proxy /auth_proxy + +WORKDIR / + +ENTRYPOINT ["./auth_proxy"] diff --git a/Makefile b/Makefile index b7458c2b..b80a151a 100644 --- a/Makefile +++ b/Makefile @@ -38,6 +38,11 @@ godep: run: docker-compose up -d +# shfmt formats all shell scripts in a standardized way +shfmt: + go get github.com/contiv-experimental/sh/cmd/shfmt || : + find . -type f -name "*.sh" -and -not -path "./vendor/*" -print0 | xargs -0 shfmt -w + # systemtests runs the system tests suite. systemtests: generate-certificate @bash ./scripts/systemtests.sh diff --git a/build/Dockerfile.checks b/build/Dockerfile.checks index af97d4a4..c3a30340 100644 --- a/build/Dockerfile.checks +++ b/build/Dockerfile.checks @@ -5,7 +5,6 @@ RUN go get github.com/golang/lint/golint RUN go get github.com/fzipp/gocyclo RUN go get github.com/client9/misspell/... RUN go get github.com/remyoudompheng/go-misc/deadcode/... -RUN go get github.com/contiv-experimental/sh/cmd/shfmt COPY ./ /go/src/github.com/contiv/auth_proxy diff --git a/build/Dockerfile.release b/build/Dockerfile.release index 9ee4d7c5..20ce0a6e 100644 --- a/build/Dockerfile.release +++ b/build/Dockerfile.release @@ -1,6 +1,6 @@ FROM scratch -COPY ./build/dependencies/contiv-ui/app /ui +COPY ./ui/app /ui COPY ./build/output/auth_proxy /auth_proxy WORKDIR / diff --git a/scripts/build.sh b/scripts/build.sh index 58456699..22ac5f78 100755 --- a/scripts/build.sh +++ b/scripts/build.sh @@ -7,43 +7,6 @@ IMAGE_NAME="contiv/auth_proxy" BUILD_IMAGE_NAME="${IMAGE_NAME}_build" VERSION=${BUILD_VERSION-$DEV_IMAGE_NAME} -# -# bake in the UI assets -# -UI_DIR="$PWD/build/dependencies/contiv-ui" - -mkdir -p $UI_DIR - -# make sure we have a local checkout -echo "Checking to see if $UI_DIR/.git exists" - -if [ ! -d "$UI_DIR/.git" ]; then - echo "contiv-ui dependency directory does not exist, creating..." - echo "Performing clone of contiv-ui repo into $UI_DIR" - git clone --depth 1 https://github.com/contiv/contiv-ui.git $UI_DIR -fi - -pushd $UI_DIR - -# this is a fancy way to check if the var is set without tripping the unbound variable check -if [ ! -z "${BUILD_VERSION-}" ]; then - echo "BUILD_VERSION is set ($BUILD_VERSION), checking it out as a tag..." - - git checkout master # make sure we have the latest master + all tags - git pull --ff-only # no merge commits, please - git fetch --tags # shallow clones do not include tags, so doublecheck - git checkout $BUILD_VERSION # BUILD_VERSION is expected to be a valid tag -else - echo "No BUILD_VERSION set, skipping checkout/update of contiv-ui repo" - echo "Whatever version is currently checked out in $UI_DIR directory will be baked in" - echo "Current version: $(git rev-parse HEAD)" -fi - -# -# build the final image -# -popd - # create a local build image docker build -t $BUILD_IMAGE_NAME -f ./build/Dockerfile.build . diff --git a/scripts/checks_in_container.sh b/scripts/checks_in_container.sh index 504e0edb..6be1a219 100755 --- a/scripts/checks_in_container.sh +++ b/scripts/checks_in_container.sh @@ -4,9 +4,6 @@ set -e export PATH="/go/bin:$PATH" -echo "Formatting all shell scripts..." -find . -type f -name "*.sh" -and -not -path "./vendor/*" -and -not -path "./build/dependencies/*" -print0 | xargs -0 shfmt -w - dirs=$(go list ./... | sed -e 's!github.com/contiv/auth_proxy!.!g' | grep -v ./vendor) files=$(find . -type f -name '*.go' | grep -v ./vendor) diff --git a/ui/.babelrc b/ui/.babelrc new file mode 100644 index 00000000..c13c5f62 --- /dev/null +++ b/ui/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/ui/.bowerrc b/ui/.bowerrc new file mode 100644 index 00000000..8c58c8ef --- /dev/null +++ b/ui/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "app/bower_components" +} \ No newline at end of file diff --git a/ui/.dockerignore b/ui/.dockerignore new file mode 100644 index 00000000..6f5e3484 --- /dev/null +++ b/ui/.dockerignore @@ -0,0 +1,14 @@ +app/*.js +app/*.ts +app/*/*.js +app/*/*.ts +app/bower_components/** +app/*/*/*.js +app/*/*/*.ts +app/*/*/*/*.js +app/*/*/*/*.ts +!app/bower_components/semantic-ui/dist/** +!app/bower_components/jquery/dist/** +!app/main.bundle.js +!app/vendor.bundle.js +!app/polyfills.bundle.js diff --git a/ui/.gitignore b/ui/.gitignore new file mode 100644 index 00000000..e3b2482e --- /dev/null +++ b/ui/.gitignore @@ -0,0 +1,6 @@ +node_modules +app/bower_components/jquery +.idea +app/**/*.map +app/**/*.js +**/.DS_Store \ No newline at end of file diff --git a/ui/.jshintrc b/ui/.jshintrc new file mode 100644 index 00000000..6f00218e --- /dev/null +++ b/ui/.jshintrc @@ -0,0 +1,13 @@ +{ + "globalstrict": true, + "globals": { + "angular": false, + "describe": false, + "it": false, + "expect": false, + "beforeEach": false, + "afterEach": false, + "module": false, + "inject": false + } +} \ No newline at end of file diff --git a/ui/.travis.yml b/ui/.travis.yml new file mode 100644 index 00000000..cce5c682 --- /dev/null +++ b/ui/.travis.yml @@ -0,0 +1,14 @@ +language: node_js +node_js: + - "0.10" + +before_script: + - export DISPLAY=:99.0 + - sh -e /etc/init.d/xvfb start + - npm start > /dev/null & + - npm run update-webdriver + - sleep 1 # give server time to start + +script: + - node_modules/.bin/karma start karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=Firefox + - node_modules/.bin/protractor e2e-tests/protractor.conf.js --browser=firefox diff --git a/ui/CONTRIBUTING.md b/ui/CONTRIBUTING.md new file mode 100644 index 00000000..509f591b --- /dev/null +++ b/ui/CONTRIBUTING.md @@ -0,0 +1,242 @@ +#Contributing to Contiv-ui + + + +##Developers - Table of contents +================= + + * [Setup](#setting-up-contiv-ui-on-mac-and-windows) + * [Windows](#for-windows) + * [Mac](#for-mac) + * [Adding icon](#adding-custom-icons-into-semantic-ui) + * [Testing](#testing) + * [Directives] (#writing-directive-tests) + * [End to end testing] (#writing-end-to-end-tests) + + +###Setting up Contiv-ui on Mac and Windows +========================================== +###For Windows: +--------------- +####Fix long path issue and clone the repo: +* install git, then run +``` +$ git config --system core.longpaths true +$ git clone https://github.com/contiv/contiv-ui.git +``` + +####Install app dependencies +* install node.js +* In the directory of the contiv-ui repo, run: +``` +$ npm install -g bower +$ npm install -g gulp +$ npm install +``` +* Build app with: +``` +For Dev +$ npm run build:dev +``` +``` +For Production +$ npm run build +``` + +####Install nginx +* download nginx and unzip +* add nginx to System Path + * If you are having issues with nginx not being a recognized command, check that you added it to your path correctly +* From contiv-nginx.conf(in the contiv-ui repo), copy from line 13 to line 50 +* Paste into nginx.conf (in nginx_location/conf) after line 47 +* In the section you just pasted, replace localhost with your server +* Change the root to point to the absolute path of contiv-ui/app instead of html + +####Running nginx +* In the directory of nginx, to start nginx: +``` +$ start nginx +``` +Server is now running on localhost:8080 +If you make changes in your app folder, rerun the gulp command and hard refresh page + +* If you modify nginx.conf, restart server with: +``` +$ nginx -s reload +``` +* To stop nginx: +``` +$ nginx -s stop +``` + +###For Mac: +----------- +####Install git and clone repo +``` +$ git +$ git clone https://github.com/contiv/contiv-ui.git +``` +####Install app dependencies +* install node.js +* In the directory of the contiv-ui repo, run: +``` +$ sudo npm install npm -g +$ sudo npm install -g bower +$ sudo npm install -g gulp +$ npm install +``` +* Build app with: +``` +For Dev +$ npm run build:dev +``` +``` +For Production +$ npm run build +``` + +####Run AUTH Proxy +Contiv UI needs AUTH Proxy for user authentication and authorization. AUTH Proxy also acts as a web server for contiv UI. +To run contiv UI inside a docker container from contiv source. + +* Install Docker for Mac +* Checkout 'contiv/auth_proxy' + * Inside the 'auth_proxy' checkout: +``` + git pull <-- if you need to refresh the checkout + make + make generate-certificate <-- if this is a new checkout +``` +* Also, set an env var pointing to the local UI src code: +``` + export UI_DIR='/Users/john/Dev/gocode/src/github.com/contiv/contiv-ui/app' +``` + +* Load the cnn_proxy as a container. Note where in this CLI there is a reference to the data store and netmaster: +``` +docker run -it \ +-v $PWD/local_certs:/local_certs:ro \ +-v $UI_DIR:/ui:ro \ +-p 10000:10000 auth_proxy:devbuild --listen-address=0.0.0.0:10000 \ +--netmaster-address=:9999 \ +--data-store-address=etcd://:2379 \ +--tls-certificate=/local_certs/cert.pem --tls-key-file=/local_certs/local.key +``` +* From your browser: + https://localhost:10000/ + +####Install nginx (This is no longer needed if you use AUTH Proxy) +* install brew and nginx: +``` +$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" +$ brew install nginx +``` +* From contiv-nginx.conf(in the contiv-ui repo), copy from line 13 to line 50 +* Paste into nginx.conf (location: /usr/local/etc/nginx) after line 47 +* In the section you just pasted, replace localhost with your backend server + * This should point to the backend running contiv. It is fine to leave as localhost if you just want to view the UI. +* Change the root to point to the absolute path of contiv-ui/app instead of html + +####Running nginx +* In the directory of nginx, to start nginx: +``` +$ nginx +``` +Server is now running on localhost:8080 +If you make changes in your app folder, rerun the npm run build:dev command and hard refresh page to view changes in the browser + +* If you modify nginx.conf, restart server with: +``` +$ nginx -s reload +``` +* To stop nginx: +``` +$ nginx -s stop +``` + +### Adding custom icons into semantic-ui +---------------------------------------- + +* Uncompress the folder containing the files related to the icons. +* Copy and replace the following files contiv.eot, contiv.svg, contiv.tff, contiv.woff, contiv.woff2 from /font/ of the uncompressed folder into contiv-ui/app/bower_components/semantic-ui/src/themes/contiv/assets/fonts/. +* Add the new icon to icon.overrides file present in contiv-ui/app/bower_components/semantic-ui/src/themes/contiv/elements/ +* eg for adding a snapshot icon - + +``` +.icon.snapshot:before { + content: "\e959"; +} + +Here content refers to the id of the icon present inside demo.html file. + +``` +* Do a gulp build inside the semantic installed folder + +``` +$ gulp build +``` + +* The icon can be used in the project as below : + +``` + +``` + + +###Testing (Tests not migrated to angular 2. They will not work currently.) +========== +To run all tests: +``` +$ npm test +``` + +####Writing Directive Tests +--------------------------- +You must configure karma to pre-process the linked template html file. To do so: +* In the Karma.conf.js file: + * add the location under preprocessors in the following format + ``` + preprocessors: { + 'app/example/**/*.html':['ng-html2js'] + }, + ``` + * Include the module.js file, all other js files, and the html file. + ``` + files: [ + 'app/example/module.js', + 'app/example/**/*.js, + 'app/example/**/*.html + ] + ``` +* In the test file, add the following to load the html: + ``` + beforeEach(module('contiv.test.directives')); + ``` + +#### Writing End to end tests +---------------------------- +Your page interaction test must be organized into two files pageObject.js and pageSpec.js. +Inside pageObject you would create object references for every page element that the user can interact with. pageSpec.js would use the elements declared in pageObject.js to perform the actual test and verifications. + +######Running End to end tests - +Protractor along with Standalone selenium web driver is used to execute these test scripts. By default, Contiv UI is expected to run on http://localhost:8080/ for these tests to run. + +``` +$ npm run protractor +``` + +######Debugging End to end tests using webstorm- + +Follow the below instructions to configure your webstorm for running/debugging end to end tests. + +* Click on Run/Edit Configurations. +* Add a new node.js module. +* set the working directory path to contiv-ui/e2e-tests. +* set the javascript file path to contiv-ui/node_modules/protractor/lib/cli.js. +* set the Appliation parameters path to contiv-ui/e2e-tests/protractor.conf.js. + +You can now set breakpoints and debug your test scripts through webstorm. + + + + diff --git a/ui/DESIGN.md b/ui/DESIGN.md new file mode 100644 index 00000000..4d8467c7 --- /dev/null +++ b/ui/DESIGN.md @@ -0,0 +1,282 @@ +#Graph Design + +##Developers - Table of contents +================= + + * [Overview](#overview) + * [Data Source Objects](#data-source-objects) + * [Data Source](#data-source-datasourcejs) + * [Visualizer Data Source](#visualizer-data-source-visualizerdatasourcejs) + * [Node Objects](#node-objects) + * [Node](#node-nodejs) + * [Visualizer Node](#visualizer-node-visualizernodejs) + * [Link Objects](#link-objects) + * [Link](#link-linkjs) + * [Visualizer Link](#visualizer-link-visualizerlinkjs) + * [Graph Objects](#graph-objects) + * [Graph](#graph-graphjs) + * [Visualizer Graph](#visualizer-graph-visualizergraphjs) + * [Policy Objects](#policy-objects) + * [Policy](#policy-policyjs) + * [Path Change View Policy](#path-change-view-policy-pathchangeviewpolicyjs) + * [QTip Policy](#qtip-policy-qtippolicyjs) + * [Save State Policy](#save-state-policy-savestatepolicyjs) + * [Node Selection Policy](#node-selection-policy-nodeselectionpolicyjs) + * [Split Join Node Policy](#split-join-node-policy-splitjoinnodepolicyjs) + * [Split Join View Policy](#split-join-view-policy-splitjoinviewpolicyjs) + + +###Overview: +============= +The graph is composed of five components. Each of these components has a base class, and are meant to be extended to create tailored versions as needed. +* Data source Object + * Takes in node and link data from the server, and provides methods for converting and manipulating the data for the graph object. +* Node Object + * The object that holds data that is paired to the svg circles drawn. +* Link Object: + * The object that holds data for each connection, and is paired to the svg paths drawn. +* Graph Object: + * The graph object that controls the svg, nodes, links, and responds to user interactions. +* Policy Object: + * Determines how user interactions and events affect the graph. Used to isolate features from eachother. + * Multiple policies can be installed at the same time. + * Has a handler for all the standard mouse interactions, and these handlers will fire for the object it is installed on when the event occurs. + +To use the graph object, include the contiv.graph module as a dependency for your module. Then you can inject which ever objects you need. Node objects, Link objects, and Graph objects all support policy installation and uninstallation. Graph objects support installing a policy for interaction with the graph, as well as default policies for nodes and links. When an event occurs, if the Node or Link in the event has its own policies installed, it will call the event handler for all the node or link's installed policies. If it doesn't have any of its own policies, it will call the event handler for the graph's default node policies or default path policies. This allows for certain nodes or links to have specialized policies if needed while still having a convenient way to install a policy on all nodes or on all links. + +###Data Source Objects +======================= +Takes in node and link data from the server, and provides methods for converting and manipulating the data for the graph object. + +To write your own DataSource object, create a new factory that uses the DataSource you want to inherit as a dependency, and extend its DataSource class. Return the class object with DataSource as key. + +####Data Source (datasource.js) +This is the base class for the Data Source Object. The processNodeData and processLinkData methods convert the data into Node and Link Objects, which are expected by the Graph Object. + +It's constructor has the following expectations: +* Nodes: + * Sample JSON - {id: node_id, text: node_text_to_display} +* Links: + * Sample JSON - {source: sourceNodeId, target: targetNodeId} + +####Visualizer Data Source (visualizerdatasource.js) +This is the Data Source Object used to handle data from the Contiv-UI backend, and to manipulate it specifically for the App Connectivity Graph tab. + +It's constructor has the following expectations: +* Nodes: + * Sample JSON - {id: node_id, text: node_text_to_display} +* Links: + * Sample JSON - {source: sourceNodeId, target: targetNodeId, weight: linkWeight} +* children_struct: + * JSON object mapping node Id to an array of its children's Ids. + * In the context of Contiv, a key would be a service id, and its corresponding value would be an array of container Ids for the containers that are part of the service. + * Expected to have a topLevel attribute, that corresponds to an array of node Ids that have no parent. + * If a Node is meant to be able to have children, but currently doesn't have any, it is expected that the children_struct still has the node id as key, and that its corresponding value is an empty list. + * In the context of Contiv, this would be a service without any containers. +* ancestors_struct: + * JSON object mapping node Id to an array of its parent's Id, in increasing order of ancestry + * Ex. ancestor_struct[node1] = ['parent_id', 'grandparent_id'] +* labels: + * JSON mapping node Id to a JSON of its label pairings. + * In the context of Contiv, it would map a container Id to its labels. +* selectors: + * JSON mapping node Id to a JSON of its service selectors. + * In the context of Contiv, it would map a serviceId to its selectors. + +It also contains method to aggregate flow between groups of containers, which allows for showing traffic between services, instead of containers. + +###Node Objects +======================= +Basic object that is used by the Graph Object. Each node will correspond to one of the svg circles. If any policies are installed on the node, the graph will call their event handlers instead of the graph's default node policies. The initialization method of the node will be called when it is added to the graph. + +To write your own Node object, create a new factory that uses the node you want to inherit as a dependency, and extend its node class. Return the class object with Node as key. + +####Node (node.js) +This is the base class for the Node Object. + +It's constructor has the following expectations: +* x: + * x coordinate of the center of the circle. Must have a value by the time it is drawn by D3. +* y: + * y coordinate of the center of the circle. Must have a value by the time it is drawn by D3. +* id: + * Unique Identifier for the node. +* text: + * text to be displayed on the node. +* radius: + * radius of the circle. Must have a value by the time it is drawn by D3. + +####Visualizer Node (visualizernode.js) +This is the Node Object that is designed for the App Connectivity Graph tab. Supports policies. + +It's constructor has the following expectations: +* x: + * x coordinate of the center of the circle. Must have a value by the time it is drawn by D3. +* y: + * y coordinate of the center of the circle. Must have a value by the time it is drawn by D3. +* id: + * Unique Identifier for the node. +* text: + * text to be displayed on the node. +* radius: + * radius of the circle. Must have a value by the time it is drawn by D3. +* parent: + * Id of it's parent container, or null/undefined if there is none. +* ancestors: + * Array of its ancestors Ids, in order of ancestry. + * Ex node.ancestors = ['parent_id', 'grandparent_id'] +* xStart: + * Starting x position of the node. Will be animated to its x coordinate when it is drawn by the graph. +* yStart: + * Starting y position of the node. Will be animated to its y coordinate when it is drawn by the graph. + +###Link Objects +======================= +Basic object that is used by the Graph Object. Each link will correspond to one of the svg paths. If any policies are installed on the link, the graph will call their event handlers instead of the graph's default path policies. The initialization method of the link will be called when it is added to the graph. + +To write your own Link object, create a new factory that uses the link you want to inherit as a dependency, and extend its link class. Return the class object with Link as key. + +####Link (link.js) +This is the base class for the Link Object. + +It's constructor has the following expectations: +* sourceNode: + * Node that is the source of the link +* targetNode: + * Node that is the target of the link + +####Visualizer Link (visualizerlink.js) +This is the Link Object that is designed for the App Connectivity Graph tab. Supports policies. + +It's constructor has the following expectations: +* sourceNode: + * Node that is the source of the link. +* targetNode: + * Node that is the target of the link. +* weight: + * Weight of the link. + +###Graph Objects +======================= +The graph object controls drawing of the Nodes and Links, as well as user interaction with the graph. It is installed onto an svg element. Any nodes in its nodes attributes and any links in its links attribute will be drawn the next time the graph's updateGraph method is called. + +The graph can only have one Svg policy, one D3 Drag policy, and one D3 zoom policy installed at a time. The graph has a default node policies and a default path policies, both which support installing multiple policies. When an event happens, if the node or link has no policies installed on it, it will trigger the event handler to the default node policies or to the default path policies. + +The destroy function will remove any window bindings added by the graph, as well as call the destroy method of all policies installed. + +####Graph (graph.js) +The basic graph object. + +It's constructor has the following expectations: +* svg: + * The svg that will contain the graph. +* nodes: + * Array of Node objects to draw. +* links + * Array of Link objects to draw. + +####Visualizer Graph (visualizergraph.js) +The graph object used by the App Connectivity Graph tab. + +It's constructor has the following expectations: +* svg: + * The svg that will contain the graph. +* nodes: + * Array of Node objects to draw. +* links + * Array of Link objects to draw. +* dataSource + * Data Source object that is serving data to the graph. + +###Policy Objects +======================= +Policies are used to isolate features for a graph. Policies can be installed on nodes, links, or the graph. Each policy has interaction handlers that will be called by the graph if installed. Policies can also modify graph functions (see QTipPolicy for an example). Multiple policies can be installed for a node or link. The destroy method will trigger when the graph is destroyed, or if the policy is uninstalled. + +For using policies, you only need to inject PolicyService, which will contain all the policy objects. + +To write your own policy, create a new factory that uses the policy you want to inherit as a dependency, and extend its policy. Return the class object with Policy as key, and add the policy to the PolicyService factory. + +For saving state or consts for the policy, create a namespace in graph.state and graph.consts. +``` +graph.state.myPolicy = {}; +graph.consts.myPolicy = {}; +``` + +####Policy (policy.js) +Base class for the Policy object. Has all the mouse handlers. + +It's constructor has the following expectations: +* policyName: + * The name for the policy. Policy names should be unique. + +####Path Change View Policy (pathchangeviewpolicy.js) +This policy is used to change the angular state when paths are clicked. Generates the variables expected by visualizationEdgeCtrl, and then changes state. + +It's constructor has the following expectations: +* $state: + * The angular state parameter. Used for changing states. + + +####QTip Policy (qtippolicy.js) +This policy adds tooltip functionality to the nodes and paths. It utilizes the qTip library. + +In order to install qTip onto the svg elements, theis policy must modify the updateNewNodes and updateNewPaths methods of the graph. By saving the original method of the graph, and replacing it with a method that contains both the original, and the function you want to call. +``` +var graphUpdateNewNodes = graph.updateNewNodes; +graph.updateNewNodes = function(newNodes) { + graphUpdateNewNodes.call(graph, newNodes); + thisPolicy.updateNewNodes(newNodes); +} + +var graphUpdateNewPaths = graph.updateNewPaths; +graph.updateNewPaths = function(newPaths) { + graphUpdateNewPaths.call(graph, newPaths); + thisPolicy.updateNewPaths(newPaths); +} +``` + +####Save State Policy (savestatepolicy.js) +This policy allows for saving variables between angular states. Since angular services are only instantiated once, by passing in a variable of the service into this policy, any variables saved onto it will be saved even when the graph is destroyed. This policy modifies the graph's destroy function to pass the service variable as an argument for policies to save variables. When the graph is created again, if a load method is defined for a policy, it will call it with the service variable passed in. + +It's constructor has the following expectations: +* savedState: + * An angular service's variable. + +####Node Selection Policy (nodeselectionpolicy.js) +This policy creates a selection method for selecting nodes. It also allows for selecting and moving multiple nodes when using the ctrl key. + +####Split Join Node Policy (splitjoinnodepolicy.js) +This policy allows for nodes to split into its children nodes, and for nodes to be joined together back into their parent node. Has minimal logic for placing the new nodes. Supports splitting and joining multiple nodes at once. + +Inherits from Node Selection Policy. + +####Split Join View Policy (splitjoinviewpolicy.js) +This policy controls most of the view logic of the App Connectivity Graph tab. The logic is controlled by focus groups. When there is no focus groups, it will display the top level of children_struct. When a node is broken into its children, the Id of the node being split will be added to the focus group. Any nodes that have connections to the split node will remain in view on the bottom half of the screen, while the children will be placed on the top half. If any node is split on the top half, it will become the focus group. If a bottom half node is split, it will become a second focus group, and the bottom half view will be replaced with the newly split node's children. Joining a node will replace its respective focus group with the grandparent of the node being joined, or will remove it as a focus group if none exists. + +This policy modifies the d3 force simulation methods of the graph to control the node placements, as well as to animate view changes between focus groups. Once a layout is generated, it is saved and will be reloaded if that specific focus group setup is revisited. + +This policy also has a handle for installing an HTML element to function as a back button, as well as a handler for installing an HTML element for setting the title, which is determined by the focus groups. + +Inherits from Split Join Node Policy. + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/Dockerfile b/ui/Dockerfile new file mode 100644 index 00000000..9aced93f --- /dev/null +++ b/ui/Dockerfile @@ -0,0 +1,3 @@ +FROM nginx +COPY contiv-nginx.conf /etc/nginx/conf.d/default.conf +COPY app /usr/share/nginx/html diff --git a/ui/Dockerfile.build b/ui/Dockerfile.build new file mode 100644 index 00000000..d5ca741d --- /dev/null +++ b/ui/Dockerfile.build @@ -0,0 +1,8 @@ +FROM node + +RUN npm install -g bower +RUN npm install -g gulp + +WORKDIR /contiv-ui + +CMD gulp build diff --git a/ui/LICENSE b/ui/LICENSE new file mode 100644 index 00000000..add2869a --- /dev/null +++ b/ui/LICENSE @@ -0,0 +1,12 @@ +Copyright 2017 Cisco Systems Inc. All rights reserved. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/ui/Makefile b/ui/Makefile new file mode 100644 index 00000000..36ecfdf9 --- /dev/null +++ b/ui/Makefile @@ -0,0 +1,17 @@ +build: + @docker run -it -u $$(id -u):$$(id -g) --rm -v ${PWD}:/contiv-ui contiv-ui-builder || \ + echo "If you have not run the build task before, please run `make build-builder` first. " + +dev-build: + @docker run -it -u $$(id -u):$$(id -g) --rm -v ${PWD}:/contiv-ui contiv-ui-builder gulp dev-build || \ + echo "If you have not run the build task before, please run `make build-builder` first. " + +build-builder: + docker build -t contiv-ui-builder -f Dockerfile.build . + +build-nginx: + docker build -t contiv-ui-nginx . + +run: build build-nginx + @docker rm -f contiv-ui-nginx || : + docker run --name contiv-ui-nginx --net host -itd contiv-ui-nginx diff --git a/ui/README.md b/ui/README.md new file mode 100644 index 00000000..a62160e7 --- /dev/null +++ b/ui/README.md @@ -0,0 +1,48 @@ +# Setup contiv-ui with contiv netmaster + +#### Step 1: Clone the netplugin repository and bring up the VMs + +```sh +git clone https://github.com/contiv/netplugin.git +export GOPATH="" +cd netplugin +``` +Modify Vagrantfile to forward etcd port: +``` +node.vm.network "forwarded_port", guest: 2379, host:2379 +``` +```sh +make demo +``` + +#### Step 2: Clone contiv-ui +```sh +git clone https://github.com/contiv/contiv-ui.git +``` + +#### Step 3: Deploy Contiv UI as a Auth Proxy container. + +* Checkout 'contiv/auth_proxy' + * Inside the 'auth_proxy' checkout: +```sh +git pull # if you need to refresh the checkout +make +make generate-certificate # if this is a new checkout +``` +* Also, set an env var pointing to the local UI src code: +```sh +export UI_DIR='/Users/john/Dev/gocode/src/github.com/contiv/contiv-ui/app' +``` + +* Load the auth\_proxy as a container. Note where in this CLI there is a reference to the data store and netmaster: +```sh +docker run -it \ + -v $PWD/local_certs:/local_certs:ro \ + -v $UI_DIR:/ui:ro \ + -p 10000:10000 contiv/auth_proxy:devbuild --listen-address=0.0.0.0:10000 \ + --netmaster-address=localhost:9999 \ + --data-store-address=etcd://localhost:2379 \ + --tls-certificate=/local_certs/cert.pem --tls-key-file=/local_certs/local.key +``` + +#### Step 4: Access UI using https://localhost:10000/ diff --git a/ui/RELEASE.md b/ui/RELEASE.md new file mode 100644 index 00000000..49141267 --- /dev/null +++ b/ui/RELEASE.md @@ -0,0 +1,10 @@ +# Automated releases +NA + +# Manual releases +UI is released in lock-step with auth_proxy. In order to release a ```version```, just create a tag with that ```version``` and push it to master. + + ``` + git tag + git push origin + ``` diff --git a/ui/app/app.component.spec.ts b/ui/app/app.component.spec.ts new file mode 100644 index 00000000..36b73656 --- /dev/null +++ b/ui/app/app.component.spec.ts @@ -0,0 +1,23 @@ +/** + * Created by cshampur on 4/6/17. + */ + +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from "./app.component"; +import { RouterTestingModule } from "@angular/router/testing"; + +describe('App', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + imports: [ + RouterTestingModule + ] + }); + }); + + it('should work', () => { + let fixture = TestBed.createComponent(AppComponent); + expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); + }); +}); \ No newline at end of file diff --git a/ui/app/app.component.ts b/ui/app/app.component.ts new file mode 100644 index 00000000..48ba9c47 --- /dev/null +++ b/ui/app/app.component.ts @@ -0,0 +1,9 @@ +/** + * Created by vjain3 on 11/1/16. + */ +import { Component } from "@angular/core"; +@Component({ + selector: 'ccn-app', + template: `` +}) +export class AppComponent {} \ No newline at end of file diff --git a/ui/app/app.css b/ui/app/app.css new file mode 100644 index 00000000..2d813434 --- /dev/null +++ b/ui/app/app.css @@ -0,0 +1,304 @@ +/* app css stylesheet */ +td.ctv-header { + color: #5d5d5d; + white-space: nowrap; + text-transform: capitalize; + text-align: right; + padding-right: 20px; + line-height: 26px +} +td.ctv-value { + font-weight: 300; + color: #5d5d5d; + text-align: left; + line-height: 26px +} + +td.ctv-wordwrap { + word-break: break-all; +} + +table thead th[sortfield] span{ + cursor: pointer; +} + +.headingfontcolor { + color: #b6b6b8 +} + +html body { font-size: 12px; } +body.loginbackground { background: url(images/loginbackground.jpeg) no-repeat center center; background-size: cover; } +body.logoutbackground { background: url(images/logoutbackground.jpeg) no-repeat center center; background-size: cover; } + +menu { margin: 0; padding: 0; z-index: 2000; } + +.productname { font-weight: 300; font-size: 1.4rem; color: #aaa; } +.copyright { font-weight: 300; font-size: .7rem; color: #aaa; padding-top: 20px; } + +.ui.attached.mainMenu { height: 50px; box-shadow: 0 0 12px rgba(0,0,0,0.3) ; border: 0 !important; padding: 0 20px; position: fixed; + z-index: 3000; + top: -1px; + width: 110%; } +#sidebar { top: 48px; width: 180px; background-color: #efefef; z-index: 1000; box-shadow: none; border: 0; } +#sidebar { + box-shadow: 0px 50px 50px -40px #efefef inset, + 0px -50px 50px -40px #efefef inset, + -5px 0px 10px -5px rgba(0,0,0,0.3) inset, + 5px 0px 10px -5px rgba(0,0,0,0) inset; +} +#sidebar .item { + padding-left: 20px; + padding-top: 12px; + text-align: left; + font-size: 12px; + font-weight: bold; + color: #555; + height: 36px; + border-left: none; + display: inline-block; + width: 180px; + background-color: transparent; + } +#sidebar .item:hover { + background-color: #ddd; + color: #222; + } +#sidebar .item.active { + border-left: 10px solid #049fd9; + padding-left: 10px; + background-color: white; + color: #222; + box-shadow: 0 0 4px rgba(0,0,0,0.3) ; +} + +/* the top "item" needs a bit more padding to get out from under the header shadow */ +#sidebar .item:first-child { + padding-top: 16px; + height: 38px; +} + +.ui.vertical.menu .item:before { height: 0; } + +#pageContent { + margin-top: 50px; + padding: 20px; + margin-left: 180px; + overflow: visible; +} + +.ui.button.iconBtn { + font-size: 9px; + color: white; + text-align: center; + padding: 0 0; + height: 20px; + width: 20px; + border-radius: 10px; + background-color: #049fd9; + white-space: nowrap; +} +.ui.button.modalBtn { + line-height: 2em; +} +.ui.very.basic.table td .primaryIconBtn i.icon { color: white; } /* for injected content */ +.ui.very.basic.table td .secondaryIconBtn i.icon { color: #049fd9; } /* for injected content */ + +.ui.button.primaryIconBtn { background-color: #049fd9; } + +.ui.button.secondaryIconBtn { + border: 1px solid #049fd9; + background-color: white; + color: #036e97 !important; +} + +.ui.very.basic.table th i.icon, +.ui.very.basic.table td i.icon { font-size: 10px; color: #5d5d5d; } + +.ui.form { font-size: 12px !important; } + +.ui.input input, +.ui.form input, +.ui.form textarea, +.ui.form .field>label, +select.ui.dropdown, +.ui.form select { + font-size: 12px !important; + background-color: transparent; +} + +.ui.input input, +.ui.form input, +select.ui.dropdown, +.ui.form select { height: 32px; } + +ctv-search { display: inline-block; width: 100%; text-align: center; padding-top: 0px ;} +.ui.input input.ctvSearch { padding-top: 3px; padding-bottom: 3px; width: 150px; height: 24px;} + +.searchField { display: inline-block; } + +.ui.basic.ctvTable { margin-top: 0; padding: 0; } + +.pageTitle { + font-size: 24px; + height: 30px; + padding-top: 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + +} + +.ui.table { border-radius: 0 !important; } +.ui.very.basic.table th, +.ui.basic.table tfoot td { + border-top: 1px solid #5d5d5d; + border-bottom: 1px solid #5d5d5d; + border-radius: 0 !important; + padding: 5px 5px 2px 5px !important; + color: #5d5d5d; + font-family: CiscoSansRegular; + font-size: 12px; + user-select: none; +} + + +.ui.very.basic.table th:first-child, +.ui.basic.table tfoot td:first-child { + padding-left: 15px !important; +} + +.ui.very.basic.table td { + border: 0; + color: #5d5d5d; + padding: 5px 5px 2px 5px !important; + font-weight: 300; + font-size: 12px; + height: 34px; + border-bottom: 1px solid #eee; +} +.ui.very.basic.table td:first-child { + padding-left: 15px !important; +} +.ui.very.basic.table.noRowBorders td { border: 0; } +.ui.very.basic.table .pagination td { border: 0; } + +tr { height: 34px; } +thead tr { height: 30px; } + +.ui.very.basic.table tr:nth-child(even) { background-color: transparent; } /* #f5f5f5 */ +.ui.very.basic.table tr:hover { background-color: #e9e9e9 !important; } +.ui.very.basic.table tr.noDataFound:hover { background-color: transparent !important; } +.ui.very.basic.table tr.pagination:hover { background-color: transparent !important; } +.ui.very.basic.table tr.noHover:hover { background-color: transparent !important; } + +.ui.very.basic.table thead tr:hover { background-color: inherit !important; } +.ui.very.basic.table tfoot tr:hover { background-color: inherit !important; } +.ui.very.basic.table tr.active, +.ui.very.basic.table tr.selected { background-color: #b7d7e3 !important; } + +div.ui.label.tiny { + font-weight: 300; + font-size: 10px; + color: #333439; + height: 18px; + padding: 4px 10px; + margin-left: 3px; + background-color: #d8d8d8; + border-radius: 2px; } + + +/* Styling for range slider */ +input[type=range] { + -webkit-appearance: none; + margin: 10px 0; + width: 100%; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 13px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background: #E8E8E8; + border-radius: 25px; + border: 1px solid #8A8A8A; +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 1px 1px 1px #828282; + border: 1px solid #8A8A8A; + height: 19px; + width: 35px; + border-radius: 6px; + background: #049FD9; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; +} +input[type=range]:focus::-webkit-slider-runnable-track { + background: #E8E8E8; +} + +div.ui.tabular.menu { margin-top: 20px; } + +.ui.tabular.menu .item { + font-size: 12px; + font-weight: 400; + /*height: 2em !important;*/ + color: #036e97; + padding: 0px 20px; + border: .5px solid transparent; +} +.ui.tabular.menu .item.active { + color: #5d5d5d; + border: .5px solid #b6b6b6; + border-bottom-color: transparent; +} + +.ui.tabular.menu a.item{ + color: #036e97 +} + +.ui.tabular.menu a.item.active{ + color:black; +} + +.breadcrumbs { + font-size: 12px; + font-weight: 300; + color: #036E97; + cursor: pointer; +} +.breadcrumbs .crumb { user-select: none; } +.breadcrumbs .crumb:after { padding-left: .5em; padding-right: .5em; content: '/'; } + +.breadcrumbs .crumb:last-child { + color: #B6B6B6; + cursor: auto; +} +.breadcrumbs .crumb:last-child:after { content: ''; } +.breadcrumbs .crumb:first-child:after { padding-left: .5em; padding-right: .5em; content: '/'; } /* override for 1st breadcrumb */ + +.inlineError{ + margin-top: 5px; + display: block; + color: #f96452; +} + +/**************************************************************************/ +/** Hide form validation error messages ******/ +/**************************************************************************/ + +[hidden] { + visibility: hidden !important; +} + +/**************************************************************************/ +/** show modal button icon ********/ +/**************************************************************************/ +.addModal { + position: relative; + top: 48%; +} diff --git a/ui/app/app.module.ts b/ui/app/app.module.ts new file mode 100644 index 00000000..309b7ec1 --- /dev/null +++ b/ui/app/app.module.ts @@ -0,0 +1,93 @@ +/** + * Created by vjain3 on 10/6/16. + */ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpModule } from "@angular/http"; +import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common'; +import { DashboardModule } from "./dashboard/dashboard.module"; +import { NetworkPoliciesModule } from "./network_policies/networkpolicies.module"; +import { SettingsModule } from "./settings/settings.module"; +import { NetworkModule } from "./networks/network.module"; +import { ServicelbModule } from "./service_lbs/servicelb.module"; +import { AppProfilesModule } from "./appprofiles/appprofile.module"; +import { UsersModule } from "./settings/users/users.module"; +import { NetprofilesModel } from "./components/models/netprofilesmodel"; +import { ApplicationGroupsModel } from "./components/models/applicationgroupsmodel"; +import { NetworksModel } from "./components/models/networksmodel"; +import { OrganizationsModel } from "./components/models/organizationsmodel"; +import { PoliciesModel } from "./components/models/policiesmodel"; +import { RulesModel } from "./components/models/rulesmodel"; +import { ServicelbsModel } from "./components/models/servicelbsmodel"; +import { UsersModel } from "./components/models/usersmodel"; +import { AppProfilesModel } from "./components/models/appprofilesmodel"; +import { BgpsModel } from "./components/models/bgpsmodel"; +import { ContractGroupsModel } from "./components/models/contractgroupsmodel"; +import { CRUDHelperService } from "./components/utils/crudhelperservice"; +import { InspectService } from "./components/utils/inspectservice"; +import { NetworkService } from "./components/utils/networkservice"; +import { MenuModule } from "./menu/menu.module"; +import { AppComponent } from "./app.component"; +import { LoginModule } from "./login/login.module"; +import { AuthService } from "./components/utils/authservice"; +import { AuthGuard } from "./components/utils/authguard"; +import { ApiService } from "./components/utils/apiservice"; +import { FirstrunWizardModule } from "./firstrunwizard/firstrunwizard.module"; +import { ChartService } from "./components/utils/chartservice"; +import { AuthorizationModel } from "./components/models/authorizationmodel"; +import { ApplicationGroupsModule } from "./applicationgroups/applicationgroups.module"; +import appRoutes from "./app.routes"; +import { AuthorizationModule } from "./settings/authorization/authorization.module"; +import { OrganizationModule } from "./settings/tenants/organization.module"; +import { FirstRunService } from "./components/utils/firstrunservice"; + + +@NgModule({ + imports: [ + BrowserModule, + HttpModule, + appRoutes, + MenuModule, + DashboardModule, + NetworkPoliciesModule, + ApplicationGroupsModule, + SettingsModule, + NetworkModule, + ServicelbModule, + AppProfilesModule, + OrganizationModule, + LoginModule, + UsersModule, + AuthorizationModule, + FirstrunWizardModule + ], + declarations: [ + AppComponent + ], + providers: [ + ApplicationGroupsModel, + NetprofilesModel, + NetworksModel, + OrganizationsModel, + PoliciesModel, + RulesModel, + ServicelbsModel, + UsersModel, + AppProfilesModel, + BgpsModel, + ContractGroupsModel, + AuthorizationModel, + CRUDHelperService, + InspectService, + NetworkService, + AuthService, + AuthGuard, + ApiService, + ChartService, + FirstRunService, + { provide: APP_BASE_HREF, useValue: '' }, + { provide: LocationStrategy, useClass: HashLocationStrategy } + ], + bootstrap: [ AppComponent ] +}) +export class AppModule {} diff --git a/ui/app/app.routes.ts b/ui/app/app.routes.ts new file mode 100644 index 00000000..ffe883b5 --- /dev/null +++ b/ui/app/app.routes.ts @@ -0,0 +1,139 @@ +/** + * Created by vjain3 on 11/1/16. + */ +import { RouterModule } from '@angular/router'; +import { MenuComponent } from "./menu/menuCtrl"; +import { NetworkPoliciesTabsComponent } from "./network_policies/networkpoliciestabsctrl"; +import { IsolationPolicyCreateComponent } from "./network_policies/isolationpolicycreatectrl"; +import { IsolationPolicyDetailsComponent } from "./network_policies/isolationpolicydetailsctrl"; +import { BandwidthPolicyCreateComponent } from "./network_policies/bandwidthpolicycreatectrl"; +import { BandwidthPolicyDetailsComponent } from "./network_policies/bandwidthpolicydetailsctrl"; +import { DashboardComponent } from "./dashboard/dashboardctrl"; +import { AppGrouplistComponent } from "./applicationgroups/applicationgrouplistctrl"; +import { ApplicationGroupCreateComponent } from "./applicationgroups/applicationgroupcreatectrl"; +import { ApplicationGroupDetailsComponent } from "./applicationgroups/applicationgroupdetailsctrl"; +import { SettingsMenuComponent } from "./settings/settingsmenu.component"; +import { NetworkSettingsComponent } from "./settings/networksettingctrl"; +import { NetworkListComponent } from "./networks/networklistctrl"; +import { NetworkdetailsComponent } from "./networks/networkdetailsctrl"; +import { NetworkCreateComponent } from "./networks/networkcreatectrl"; +import { ServicelbListComponent } from "./service_lbs/servicelblistctrl"; +import { ServicelbCreateComponent } from "./service_lbs/servicelbcreatectrl"; +import { ServicelbDetailsComponent } from "./service_lbs/servicelbdetailsctrl"; +import { LoginComponent } from "./login/loginctrl"; +import { AuthGuard } from "./components/utils/authguard"; +import { UnauthorizedComponent } from "./login/unauthorized"; +import { LogoutComponent } from "./login/logoutctrl"; +import { UserListComponent } from "./settings/users/userlist.component"; +import { UserCreateComponent } from "./settings/users/usercreate.component"; +import { UserDetailsComponent } from "./settings/users/userdetails.component"; +import { AppProfileListComponent } from "./appprofiles/appprofilelist.component"; +import { AppProfileCreateComponent } from "./appprofiles/appprofilecreate.component"; +import { AppProfileDetailsComponent } from "./appprofiles/appprofiledetails.component"; +import { FirstrunWizardComponent } from "./firstrunwizard/firstrunwizardctrl"; +import { NodeListComponent } from "./settings/nodes/nodelist.component"; +import { NodeCreateComponent } from "./settings/nodes/nodecreate.component"; +import { NodeDetailsComponent } from "./settings/nodes/nodedetails.component"; +import { ContractGroupCreateComponent } from "./network_policies/contractgroupcreate.component"; +import { ContractGroupDetailsComponent } from "./network_policies/contractgroupdetails.component"; +import { AuthorizationListComponent } from "./settings/authorization/authorizationlist"; +import { AuthorizationDetailsComponent } from "./settings/authorization/authorizationdetails"; +import { AuthorizationCreateComponent } from "./settings/authorization/authorizationcreate"; +import { OrganizationListComponent } from "./settings/tenants/organizationlistctrl"; +import { OrganizationCreateComponent } from "./settings/tenants/organizationcreatectrl"; +import { OrganizationDetailsComponent } from "./settings/tenants/organizationdetailsctrl"; +import { LdapConfigComponent } from "./settings/ldapconfiguration"; + +const routes = [ + {path: 'login', component: LoginComponent}, + {path: 'logout', component: LogoutComponent}, + {path: 'unauthorized', component: UnauthorizedComponent}, + {path: '', redirectTo: 'login', pathMatch: 'full'}, + { + path: 'm', + component: MenuComponent, + canActivateChild: [AuthGuard], + children: [ + {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, + {path: 'dashboard', component: DashboardComponent}, + {path: 'firstrun', component: FirstrunWizardComponent}, + + //Network Policies + {path: 'networkpolicies', redirectTo: 'networkpolicies/list', pathMatch: 'full'}, + {path: 'networkpolicies/list', component: NetworkPoliciesTabsComponent}, + {path: 'networkpolicies/isolation/create', component: IsolationPolicyCreateComponent}, + {path: 'networkpolicies/isolation/details/:key', component: IsolationPolicyDetailsComponent}, + {path: 'networkpolicies/isolation/edit/:key', component: IsolationPolicyDetailsComponent}, + {path: 'networkpolicies/bandwidth/create', component: BandwidthPolicyCreateComponent}, + {path: 'networkpolicies/bandwidth/details/:key', component: BandwidthPolicyDetailsComponent}, + {path: 'networkpolicies/bandwidth/edit/:key', component: BandwidthPolicyDetailsComponent}, + {path: 'networkpolicies/contractgroup/create', component: ContractGroupCreateComponent}, + {path: 'networkpolicies/contractgroup/details/:key', component: ContractGroupDetailsComponent}, + + //Application Groups + {path: 'applicationgroups', redirectTo: 'applicationgroups/list', pathMatch: 'full'}, + {path: 'applicationgroups/list', component: AppGrouplistComponent}, + {path: 'applicationgroups/create', component: ApplicationGroupCreateComponent}, + {path: 'applicationgroups/details/:key', component: ApplicationGroupDetailsComponent}, + {path: 'applicationgroups/edit/:key', component: ApplicationGroupDetailsComponent}, + + //Settings + { + path: 'settings', + component: SettingsMenuComponent, + children: [ + {path: '', redirectTo: 'users/list', pathMatch: 'full'}, + {path: 'networks', component: NetworkSettingsComponent}, + {path: 'ldap', component: LdapConfigComponent}, + {path: 'nodes', redirectTo: 'nodes/list', pathMatch: 'full'}, + {path: 'nodes/list', component: NodeListComponent}, + {path: 'nodes/create', component: NodeCreateComponent}, + {path: 'nodes/details/:key', component: NodeDetailsComponent}, + {path: 'nodes/edit/:key', component: NodeDetailsComponent}, + //Users + {path: 'users', redirectTo: 'users/list', pathMatch: 'full'}, + {path: 'users/list', component: UserListComponent}, + {path: 'users/create', component: UserCreateComponent}, + {path: 'users/details/:key', component: UserDetailsComponent}, + {path: 'users/edit/:key', component: UserDetailsComponent}, + //Authorizations + {path: 'authorization', redirectTo: 'authorization/list', pathMatch: 'full'}, + {path: 'authorization/list', component: AuthorizationListComponent}, + {path: 'authorization/create', component: AuthorizationCreateComponent}, + {path: 'authorization/details/:key', component: AuthorizationDetailsComponent}, + {path: 'authorization/edit/:key', component: AuthorizationDetailsComponent}, + //Tenants + {path: 'organizations', redirectTo: 'organizations/list', pathMatch: 'full'}, + {path: 'organizations/list', component: OrganizationListComponent}, + {path: 'organizations/create', component: OrganizationCreateComponent}, + {path: 'organizations/details/:key', component: OrganizationDetailsComponent}, + ] + }, + + + + //Networks + {path: 'networks', redirectTo: 'networks/list', pathMatch: 'full'}, + {path: 'networks/list', component: NetworkListComponent}, + {path: 'networks/create', component: NetworkCreateComponent}, + {path: 'networks/details/:key', component: NetworkdetailsComponent}, + + //Servicelbs + {path: 'servicelbs', redirectTo: 'servicelbs/list', pathMatch: 'full'}, + {path: 'servicelbs/list', component: ServicelbListComponent}, + {path: 'servicelbs/create', component: ServicelbCreateComponent}, + {path: 'servicelbs/details/:key', component: ServicelbDetailsComponent}, + + //Application profiles + {path: 'appprofiles', redirectTo: 'appprofiles/list', pathMatch: 'full'}, + {path: 'appprofiles/list', component: AppProfileListComponent}, + {path: 'appprofiles/create', component: AppProfileCreateComponent}, + {path: 'appprofiles/details/:key', component: AppProfileDetailsComponent}, + {path: 'appprofiles/edit/:key', component: AppProfileDetailsComponent}, + + ] + }, + {path: '**', redirectTo: 'login', pathMatch: 'full'} +]; + +export default RouterModule.forRoot(routes); diff --git a/ui/app/applicationgroups/applicationgroupcreate.html b/ui/app/applicationgroups/applicationgroupcreate.html new file mode 100644 index 00000000..0296fa91 --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupcreate.html @@ -0,0 +1,151 @@ +
+ + + + +
+
+ +
+
+
+
+
+
+
+
+
+ + + + Please enter application group name + +
+
+
+
+
+
+ + + + Please select tenant + +
+
+
+
+
+
+ + + + Please select network + +
+
+
+
+
+
+ + +
+
+
+
+
+ + + +
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+ +
+
+ +
+ + +
+
+
+ +
+
+
+ +
+
+
diff --git a/ui/app/applicationgroups/applicationgroupcreatectrl.ts b/ui/app/applicationgroups/applicationgroupcreatectrl.ts new file mode 100644 index 00000000..db6b16a4 --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupcreatectrl.ts @@ -0,0 +1,134 @@ +/** + * Created by vjain3 on 3/11/16. + */ +import { Component, Inject, ViewChild, NgZone } from '@angular/core'; +import { ActivatedRoute, Router } from "@angular/router"; +import { NetworksModel } from "../components/models/networksmodel"; +import { ApplicationGroupsModel } from "../components/models/applicationgroupsmodel"; +import { CRUDHelperService } from "../components/utils/crudhelperservice"; +import { OrganizationsModel } from "../components/models/organizationsmodel"; +import { NetworkService } from "../components/utils/networkservice"; +import { ContractGroupSelectionComponent } from "./contractgroup.component"; +import { IsolationPolicySelectionComponent } from "./isolationpolicydirective"; +import { BandwidthPolicySelectionComponent } from "./bandwidthpolicydirective"; + +@Component({ + selector: 'applicationgroupcreate', + templateUrl: './applicationgroupcreate.html' +}) +export class ApplicationGroupCreateComponent { + networks:any[] = []; + tenants:any[] = []; + applicationGroup:any = {}; + + @ViewChild(BandwidthPolicySelectionComponent) bandwidthPolicyComponent: BandwidthPolicySelectionComponent; + @ViewChild(IsolationPolicySelectionComponent) isolationPolicyComponent: IsolationPolicySelectionComponent; + @ViewChild(ContractGroupSelectionComponent) contractGroupComponent: ContractGroupSelectionComponent; + + constructor(private activatedRoute:ActivatedRoute, + private router:Router, + private ngZone:NgZone, + private organizationsModel:OrganizationsModel, + private networksModel:NetworksModel, + private applicationGroupsModel:ApplicationGroupsModel, + private crudHelperService:CRUDHelperService, + private networkService:NetworkService) { + + var applicationGroupCreateCtrl = this; + + + function resetForm() { + crudHelperService.stopLoader(applicationGroupCreateCtrl); + applicationGroupCreateCtrl.applicationGroup = { + groupName: '', // For Group Name + networkName: '', // For Network Name + policies: [], // For Isolation policies + netProfile: '', // For Bandwidth policy Name + extContractsGrps: [], // For External contract groups + tenantName: '', + cfgdTag: '' + }; + } + + resetForm(); + } + + ngOnInit() { + var component = this; + component.crudHelperService.startLoader(component); + + function getTenants(reload:boolean) { + component.organizationsModel.get(reload) + .then((result) => { + component.tenants = result; + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + }, (error) => { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + }); + } + + getTenants(false); + } + + returnToApplicationGroup() { + this.router.navigate(['../list'], {relativeTo: this.activatedRoute}); + } + + cancelCreating() { + this.returnToApplicationGroup(); + } + + createApplicationGroup(validform:boolean) { + var applicationGroupCreateCtrl = this; + if (validform) { + applicationGroupCreateCtrl.crudHelperService.startLoader(applicationGroupCreateCtrl); + + applicationGroupCreateCtrl.applicationGroup.key = + applicationGroupCreateCtrl.applicationGroupsModel.generateKey(applicationGroupCreateCtrl.applicationGroup); + if (applicationGroupCreateCtrl.applicationGroup.cfgdTag === '') { + delete applicationGroupCreateCtrl.applicationGroup.cfgdTag; + } + /** + * applicationGroup consist of Group Name, Network Name, Isolation Policies, Bandwidth Policy, cfgdtag + */ + + applicationGroupCreateCtrl.applicationGroupsModel.create(applicationGroupCreateCtrl.applicationGroup, undefined).then( + function successCallback(result) { + applicationGroupCreateCtrl.crudHelperService.stopLoader(applicationGroupCreateCtrl); + applicationGroupCreateCtrl.crudHelperService.showNotification("Application group: Created", result.key.toString()); + applicationGroupCreateCtrl.returnToApplicationGroup(); + }, function errorCallback(result) { + applicationGroupCreateCtrl.crudHelperService.stopLoader(applicationGroupCreateCtrl); + applicationGroupCreateCtrl.crudHelperService.showServerError("Application group: Create failed", result); + }); + } + } + + /** + * Get networks for the given tenant. + */ + getNetworks(tenantName:string) { + var component = this; + component.networksModel.get(false).then(function (result) { + component.networks = _.filter(result, { + 'tenantName': tenantName + }); + },(err) => {}); + } + + updateTenant(tenantName:string) { + var component = this; + component.applicationGroup.tenantName = tenantName; + component.getNetworks(tenantName); + component.isolationPolicyComponent.getIsolationPolicies(); + component.bandwidthPolicyComponent.getNetprofiles(); + //contractGroupComponent might be undefined if ACI is not configured + if ((component.contractGroupComponent !== undefined) && (component.contractGroupComponent !== null)) { + component.contractGroupComponent.getContractGroups(); + } + } +} \ No newline at end of file diff --git a/ui/app/applicationgroups/applicationgroupdetails.html b/ui/app/applicationgroups/applicationgroupdetails.html new file mode 100644 index 00000000..bccdbc6f --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupdetails.html @@ -0,0 +1,70 @@ +
+
+ +
+ + + +
+ +
+ + + + + +
+
+ +
+ + +
+ + +
+
+ +
\ No newline at end of file diff --git a/ui/app/applicationgroups/applicationgroupdetailsctrl.ts b/ui/app/applicationgroups/applicationgroupdetailsctrl.ts new file mode 100644 index 00000000..92b4f002 --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupdetailsctrl.ts @@ -0,0 +1,97 @@ +/** + * Created by vjain3 on 3/15/16. + */ +import {Component, Inject, OnInit, NgZone} from '@angular/core'; +import { ActivatedRoute, Router } from "@angular/router"; +import { ApplicationGroupsModel } from "../components/models/applicationgroupsmodel"; +import { CRUDHelperService } from "../components/utils/crudhelperservice"; + +@Component({ + selector: 'applicationgroupdetails', + templateUrl: './applicationgroupdetails.html' +}) +export class ApplicationGroupDetailsComponent implements OnInit{ + applicationGroup:any = {}; + mode:string = 'details'; + public infoselected: boolean; + public statskey: string; + public showLoader: boolean; + public showServerError: boolean; + public serverErrorMessage: string; + + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + private ngZone: NgZone, + private applicationGroupsModel:ApplicationGroupsModel, + private crudHelperService:CRUDHelperService) { + var applicationGroupDetailsCtrl = this; + + /** + * To show edit or details screen based on the route + */ + function setMode() { + if (activatedRoute.routeConfig.path.includes('edit')) { + applicationGroupDetailsCtrl.mode = 'edit'; + } else { + applicationGroupDetailsCtrl.mode = 'details'; + } + } + + applicationGroupDetailsCtrl.crudHelperService.startLoader(applicationGroupDetailsCtrl); + + applicationGroupDetailsCtrl.applicationGroupsModel.getModelByKey(activatedRoute.snapshot.params['key'], false, 'key') + .then(function (group) { + applicationGroupDetailsCtrl.applicationGroup = group; + applicationGroupDetailsCtrl.ngZone.run(() => { + applicationGroupDetailsCtrl.crudHelperService.stopLoader(applicationGroupDetailsCtrl); + }); + + }, (error) => { + applicationGroupDetailsCtrl.ngZone.run(() => { + applicationGroupDetailsCtrl.crudHelperService.stopLoader(applicationGroupDetailsCtrl); + }); + }); + + setMode(); + this.applicationGroup = {groupName: '', networkName: ''}; + this.serverErrorMessage = ''; + this.statskey = ''; + this.infoselected = true; + } + + ngOnInit(){ + this.statskey = this.activatedRoute.snapshot.params['key']; + } + + returnToApplicationGroup() { + this.router.navigate(['../../list'], { relativeTo: this.activatedRoute }); + } + + returnToApplicationGroupDetails() { + this.router.navigate(['../../details', this.applicationGroup.key], { relativeTo: this.activatedRoute }); + } + + editApplicationGroup() { + this.router.navigate(['../../edit', this.applicationGroup.key], { relativeTo: this.activatedRoute }); + } + + cancelDetails() { + this.returnToApplicationGroup(); + } + + deleteApplicationGroup() { + var applicationGroupDetailsCtrl = this; + applicationGroupDetailsCtrl.crudHelperService.startLoader(applicationGroupDetailsCtrl); + applicationGroupDetailsCtrl.applicationGroupsModel.delete(applicationGroupDetailsCtrl.applicationGroup).then( + function successCallback(result) { + applicationGroupDetailsCtrl.crudHelperService.stopLoader(applicationGroupDetailsCtrl); + applicationGroupDetailsCtrl.crudHelperService.showNotification("Application group: Deleted", result.toString()); + applicationGroupDetailsCtrl.returnToApplicationGroup(); + }, function errorCallback(result) { + applicationGroupDetailsCtrl.crudHelperService.stopLoader(applicationGroupDetailsCtrl); + applicationGroupDetailsCtrl.crudHelperService.showServerError("Application group: Delete failed", result); + }); + } + + +} \ No newline at end of file diff --git a/ui/app/applicationgroups/applicationgroupinfo.html b/ui/app/applicationgroups/applicationgroupinfo.html new file mode 100644 index 00000000..fb71e743 --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupinfo.html @@ -0,0 +1,63 @@ +
+
+
+
+ + + + + + + + + + + + + + + +
Name{{applicationGroup.groupName}}
Tenant{{applicationGroup.tenantName}}
Network{{applicationGroup.networkName}}
+ + +
+
+ +
+
+ + + +
+
+ +
+
+ + + +
+
+ +
+
+ + + +
+
+
+ +
+ + +
+
+
+
\ No newline at end of file diff --git a/ui/app/applicationgroups/applicationgroupinfoctrl.ts b/ui/app/applicationgroups/applicationgroupinfoctrl.ts new file mode 100644 index 00000000..1488e22a --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupinfoctrl.ts @@ -0,0 +1,55 @@ +/** + * Created by cshampur on 11/18/16. + */ +import { Component, Input, OnInit, NgZone } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import { CRUDHelperService } from "../components/utils/crudhelperservice"; +import { ApplicationGroupsModel } from "../components/models/applicationgroupsmodel"; + +@Component({ + selector: 'applicationgroupinfo', + templateUrl: './applicationgroupinfo.html' +}) + +export class ApplicationGroupInfoComponent{ + + @Input('applicationGroup') applicationGroup: any; + @Input('mode') mode: string; + @Input('showLoader') showLoader: boolean; + + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + private ngZone: NgZone, + private applicationGroupsModel:ApplicationGroupsModel, + private crudHelperService:CRUDHelperService){ + this.applicationGroup= { + groupName: '', + networkName: '' + }; + this.mode = 'details'; + } + + returnToApplicationGroupDetails() { + this.router.navigate(['../../details', this.applicationGroup.key], { relativeTo: this.activatedRoute }); + } + + cancelEditing() { + this.returnToApplicationGroupDetails(); + } + + saveApplicationGroup() { + var component = this; + component.crudHelperService.startLoader(component); + + component.applicationGroupsModel.save(component.applicationGroup).then( + function successCallback(result) { + component.crudHelperService.stopLoader(component); + component.crudHelperService.showNotification("Application group: Updated", result.key.toString()); + component.returnToApplicationGroupDetails(); + }, function errorCallback(result) { + component.crudHelperService.stopLoader(component); + component.crudHelperService.showServerError("Application group: Update failed", result); + + }); + } +} \ No newline at end of file diff --git a/ui/app/applicationgroups/applicationgrouplist.html b/ui/app/applicationgroups/applicationgrouplist.html new file mode 100644 index 00000000..5a2b9509 --- /dev/null +++ b/ui/app/applicationgroups/applicationgrouplist.html @@ -0,0 +1,84 @@ +
+ + + + +
+
+ +
+
+ +
+
+
+
+
+ + + + Name + Tenant + Network + Policies + Group Tag + + + + + + {{group.groupName}} + {{group.tenantName}} + {{group.networkName}} + {{group.policies.join(", ")}} + {{group.cfgdTag}} + + + + + + No application groups found. Would you like to define one? + + + + + + No records matched your filter criteria. + + + + + + + + + + + + + +
+
+
diff --git a/ui/app/applicationgroups/applicationgrouplistctrl.ts b/ui/app/applicationgroups/applicationgrouplistctrl.ts new file mode 100644 index 00000000..ee0ab0ea --- /dev/null +++ b/ui/app/applicationgroups/applicationgrouplistctrl.ts @@ -0,0 +1,61 @@ +/** + * Created by vjain3 on 3/11/16. + */ +import {Component, OnInit, OnDestroy, Inject} from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import {ApplicationGroupsModel} from "../components/models/applicationgroupsmodel"; +import {CRUDHelperService} from "../components/utils/crudhelperservice"; +import {Observable, Subscription} from "rxjs"; + +@Component({ + selector:'app-group', + template: require("./applicationgrouplist.html") +}) + +export class AppGrouplistComponent implements OnInit, OnDestroy{ + public applicationGroupListCtrl: any; + private appGroupModel: ApplicationGroupsModel; + private crudHelperService: CRUDHelperService; + private refresh: Subscription; + + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + appGroupModel: ApplicationGroupsModel, + crudHelperService:CRUDHelperService){ + this.appGroupModel = appGroupModel; + this.crudHelperService = crudHelperService; + this.applicationGroupListCtrl = this; + this['showLoader'] = true; + + this.refresh = Observable.interval(5000).subscribe(() => { + this.getApplicationGroup(true); + }); + this.crudHelperService.startLoader(this); + } + + ngOnInit(){ + this.crudHelperService.startLoader(this); + this.getApplicationGroup(false); + } + + getApplicationGroup(reload: boolean){ + var applicationGroupListCtrl = this; + this.appGroupModel.get(reload) + .then((result) => { + applicationGroupListCtrl['groups']=result; + applicationGroupListCtrl.crudHelperService.stopLoader(applicationGroupListCtrl); + }, (error) => { + applicationGroupListCtrl.crudHelperService.stopLoader(applicationGroupListCtrl); + }); + } + + create(){ + this.router.navigate(['../create'], { relativeTo: this.activatedRoute }); + } + + ngOnDestroy(){ + this.refresh.unsubscribe(); + } + +} + diff --git a/ui/app/applicationgroups/applicationgroups.module.ts b/ui/app/applicationgroups/applicationgroups.module.ts new file mode 100644 index 00000000..329b2551 --- /dev/null +++ b/ui/app/applicationgroups/applicationgroups.module.ts @@ -0,0 +1,53 @@ +/** + * Created by vjain3 on 10/21/16. + */ +import { NgModule } from '@angular/core'; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { RouterModule } from "@angular/router"; +import { DirectivesModule } from "../components/directives/directives.module"; +import { PipesModule } from "../components/pipes/pipes.module"; +import { ApplicationGroupCreateComponent } from "./applicationgroupcreatectrl"; +import { ApplicationGroupDetailsComponent } from "./applicationgroupdetailsctrl"; +import { IsolationPolicySelectionComponent } from "./isolationpolicydirective"; +import { BandwidthPolicySelectionComponent } from "./bandwidthpolicydirective"; +import { ContractGroupSelectionComponent } from "./contractgroup.component"; +import { AppGrouplistComponent } from "./applicationgrouplistctrl"; +import { ApplicationGroupStatsComponent } from "./applicationgroupstats"; +import { ApplicationGroupInfoComponent } from "./applicationgroupinfoctrl"; + +@NgModule({ + imports: [ + FormsModule, + CommonModule, + RouterModule, + DirectivesModule, + PipesModule + ], + declarations: [ + ApplicationGroupCreateComponent, + ApplicationGroupDetailsComponent, + IsolationPolicySelectionComponent, + BandwidthPolicySelectionComponent, + ContractGroupSelectionComponent, + AppGrouplistComponent, + ApplicationGroupStatsComponent, + ApplicationGroupInfoComponent + ], + exports: [ + AppGrouplistComponent, + ApplicationGroupCreateComponent, + ApplicationGroupDetailsComponent, + IsolationPolicySelectionComponent, + BandwidthPolicySelectionComponent, + ContractGroupSelectionComponent, + ApplicationGroupStatsComponent, + ApplicationGroupInfoComponent, + FormsModule, + CommonModule, + RouterModule, + DirectivesModule, + PipesModule + ] +}) +export class ApplicationGroupsModule {} \ No newline at end of file diff --git a/ui/app/applicationgroups/applicationgroups_test.js b/ui/app/applicationgroups/applicationgroups_test.js new file mode 100644 index 00000000..aeaa0937 --- /dev/null +++ b/ui/app/applicationgroups/applicationgroups_test.js @@ -0,0 +1,492 @@ +'use strict'; + +describe('contiv.applicationgroups module', function () { + + beforeEach(module('ui.router')); + + beforeEach(module('contiv.applicationgroups')); + + beforeEach(module('contiv.test.directives')); + + var groupListData = [ + { + "key":"default:grp1", + "netProfile":"profile4", + "groupName":"grp1", + "networkName":"network1", + "policies":[ + "proxy-net-policy" + ], + "tenantName":"default", + "link-sets":{ + "Policies":{ + "default:proxy-net-policy":{ + "type":"policy", + "key":"default:proxy-net-policy" + } + } + }, + "links":{ + "Network":{ + + }, + "Tenant":{ + "type":"tenant", + "key":"default" + } + } + } + ]; + + var policyListData = [ + { + "key": "default:middleware_net_policy", + "policyName": "middleware_net_policy", + "tenantName": "default", + "link-sets": {}, + "links": { + "Tenant": { + "type": "tenant", + "key": "default" + } + } + }, + { + "key": "default:db_net_policy", + "policyName": "db_net_policy", + "tenantName": "default", + "link-sets": {}, + "links": { + "Tenant": { + "type": "tenant", + "key": "default" + } + } + } + ]; + + var ruleListData = [ + { + "key": "default:middleware-net-policy:1", + "action": "allow", + "direction": "out", + "policyName": "middleware-net-policy", + "priority": 1, + "protocol": "tcp", + "ruleId": "1", + "tenantName": "default", + "link-sets": { + "Policies": { + "default:middleware-net-policy": { + "type": "policy", + "key": "default:middleware-net-policy" + } + } + } + }, + { + "key": "default:proxy-net-policy:1", + "action": "allow", + "direction": "in", + "policyName": "proxy-net-policy", + "port": 443, + "priority": 1, + "protocol": "tcp", + "ruleId": "1", + "tenantName": "default", + "link-sets": { + "Policies": { + "default:proxy-net-policy": { + "type": "policy", + "key": "default:proxy-net-policy" + } + } + } + }, + { + "key": "default:proxy-net-policy:2", + "action": "allow", + "direction": "in", + "policyName": "proxy-net-policy", + "port": 80, + "priority": 1, + "protocol": "tcp", + "ruleId": "2", + "tenantName": "default", + "link-sets": { + "Policies": { + "default:proxy-net-policy": { + "type": "policy", + "key": "default:proxy-net-policy" + } + } + } + } + ]; + + var networkListData = [ + { + "key": "default:contiv-net1", + "encap": "vxlan", + "gateway": "20.1.2.254", + "networkName": "contiv-net1", + "subnet": "20.1.2.0/24", + "tenantName": "default", + "link-sets": {}, + "links": { + "Tenant": { + "type": "tenant", + "key": "default" + } + } + } + ]; + + var netprofileListData = [ + { + "DSCP": 3, + "bandwidth": "20 mbps", + "key": "default:p3", + "link-sets": { + "EndpointGroups": { + "default:g4": { + "key": "default:g4", + "type": "endpointGroup" + } + } + }, + "links": { + "Tenant": { + "key": "default", + "type": "tenant" + } + }, + "profileName": "p3", + "tenantName": "default" + } + ]; + + var appGroup = { + "key": "", + "groupName": "", + "netProfile": "", + "networkName": "", + "policies": [ + "proxy-net-policy" + ], + "tenantName": "default", + "link-sets": { + "Policies": { + "default:proxy-net-policy":{ + "type":"policy", + "key":"default:proxy-net-policy" + } + } + }, + "links": { + "AppProfile": {}, + "NetProfile": {}, + "Network": { + "type": "network", + "key": "default:net1" + }, + "Tenant": { + "type": "tenant", + "key": "default" + } + } + }; + + var appGroup_edit = { + "key": "default:grp1", + "groupName": "grp1", + "netProfile": "p3", + "networkName": "net1", + "policies": [ + "proxy-net-policy" + ], + "tenantName": "default", + "link-sets": { + "Policies": { + "default:proxy-net-policy":{ + "type":"policy", + "key":"default:proxy-net-policy" + } + } + }, + "links": { + "AppProfile": {}, + "NetProfile": {}, + "Network": { + "type": "network", + "key": "default:net1" + }, + "Tenant": { + "type": "tenant", + "key": "default" + } + } + }; + + describe('applicationgroupslistctrl', function () { + var $httpBackend; + + beforeEach(inject(function (_$httpBackend_) { + $httpBackend = _$httpBackend_; + $httpBackend.when('GET', ContivGlobals.APPLICATIONGROUPS_ENDPOINT).respond(groupListData); + })); + + afterEach(function () { + $httpBackend.verifyNoOutstandingExpectation(); + $httpBackend.verifyNoOutstandingRequest(); + }); + + var $controller, $interval, $rootScope; + var groupListCtrl; + beforeEach(inject(function (_$interval_, _$rootScope_, _$controller_) { + $interval = _$interval_; + $rootScope = _$rootScope_; + $controller = _$controller_; + groupListCtrl = $controller('ApplicationGroupListCtrl', { $interval: $interval, $scope: $rootScope }); + })); + it('should be defined', function () { + //spec body + expect(groupListCtrl).toBeDefined(); + $httpBackend.flush(); + }); + it('ApplicationGroupListCtrl should do a GET on /api/endpointGroups/ REST API', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + }); + it('ApplicationGroupListCtrl should have groups array assigned to groups property', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + expect(Array.isArray(groupListCtrl.groups)).toBeTruthy(); + expect(groupListCtrl.groups.length).toEqual(1); + }); + it('ApplicationGroupListCtrl should have showLoader property set to false after fetch', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + expect(groupListCtrl.showLoader).toBeFalsy(); + }); + }); + + describe('applicationgroupscreatectrl', function () { + + var $httpBackend; + + beforeEach(inject( + function (_$httpBackend_) { + $httpBackend = _$httpBackend_; + $httpBackend.when('GET', ContivGlobals.NETWORKS_ENDPOINT).respond(networkListData); + $httpBackend.when('GET', ContivGlobals.POLICIES_ENDPOINT).respond(policyListData); + $httpBackend.when('GET', ContivGlobals.RULES_ENDPOINT).respond(ruleListData); + $httpBackend.when('GET', ContivGlobals.NETPROFILES_ENDPOINT).respond(netprofileListData); + + $httpBackend.when('POST', ContivGlobals.APPLICATIONGROUPS_ENDPOINT + groupListData[0].key + '/').respond(groupListData); + })); + + afterEach(function () { + $httpBackend.verifyNoOutstandingExpectation(); + $httpBackend.verifyNoOutstandingRequest(); + }); + + var $controller,$state,applicationGroupCreateCtrl,$stateParams; + beforeEach(inject(function (_$state_,_$stateParams_,_$controller_) { + $controller = _$controller_; + $state = _$state_; + $stateParams = _$stateParams_; + + $state.go = function (stateName) {}; + applicationGroupCreateCtrl = $controller('ApplicationGroupCreateCtrl', + { $state: $state}); + })); + it('should be defined', function () { + //spec body + var groupCreateCtrl = $controller( + 'ApplicationGroupCreateCtrl'); + expect(groupCreateCtrl).toBeDefined(); + $httpBackend.flush(); + }); + it('ApplicationGroupCreateCtrl should do a GET on /api/networks/ REST API', function () { + $controller('ApplicationGroupCreateCtrl'); + $httpBackend.expectGET(ContivGlobals.NETWORKS_ENDPOINT); + $httpBackend.flush(); + }); + it('ApplicationGroupCreateCtrl.createApplicationGroup should do a POST on /api/v1/endpointGroups/ REST API', function () { + + applicationGroupCreateCtrl.form = {'$valid' : true}; + applicationGroupCreateCtrl.applicationGroup.networkName = 'network1'; + applicationGroupCreateCtrl.applicationGroup.groupName = 'grp1'; + applicationGroupCreateCtrl.applicationGroup.profileName = 'profile4'; + applicationGroupCreateCtrl.applicationGroup.tenantName = 'default'; + applicationGroupCreateCtrl.createApplicationGroup(); + $httpBackend.expectPOST(ContivGlobals.APPLICATIONGROUPS_ENDPOINT + groupListData[0].key + '/'); + $httpBackend.flush(); + expect(applicationGroupCreateCtrl.showLoader).toBeFalsy(); + }); + }); + + describe('applicationgroupsdetailsctrl', function () { + + var $httpBackend, $state, $stateParams, $controller; + var groupDetailsCtrl; + + beforeEach(inject(function (_$httpBackend_, _$state_, _$stateParams_, _$controller_) { + $httpBackend = _$httpBackend_; + $httpBackend.when('GET', ContivGlobals.APPLICATIONGROUPS_ENDPOINT).respond(groupListData); + $httpBackend.when('GET', ContivGlobals.POLICIES_ENDPOINT).respond(policyListData); + $httpBackend.when('GET', ContivGlobals.RULES_ENDPOINT).respond(ruleListData); + $httpBackend.when('GET', ContivGlobals.NETPROFILES_ENDPOINT).respond(netprofileListData); + $httpBackend.when('PUT', ContivGlobals.APPLICATIONGROUPS_ENDPOINT + groupListData[0].key + '/').respond(groupListData[0]); + $httpBackend.when('DELETE', ContivGlobals.APPLICATIONGROUPS_ENDPOINT + groupListData[0].key + '/').respond(groupListData[0]); + $state = _$state_; + $state.go = function (stateName) {}; + $stateParams = _$stateParams_; + $stateParams.key = groupListData[0].key; + $controller = _$controller_; + groupDetailsCtrl = $controller('ApplicationGroupDetailsCtrl'); + })); + + afterEach(function () { + $httpBackend.verifyNoOutstandingExpectation(); + $httpBackend.verifyNoOutstandingRequest(); + }); + + it('should be defined', function () { + //spec body + expect(groupDetailsCtrl).toBeDefined(); + $httpBackend.flush(); + }); + it('ApplicationGroupDetailsCtrl should do a GET on /api/endpointGroups/ REST API', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + }); + it('ApplicationGroupDetailsCtrl.saveApplicationGroup() should do a PUT on /api/endpointGroups/ REST API', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + groupDetailsCtrl.saveApplicationGroup(); + $httpBackend.expectPUT(ContivGlobals.APPLICATIONGROUPS_ENDPOINT+ groupListData[0].key + '/'); + $httpBackend.flush(); + expect(groupDetailsCtrl.showLoader).toBeFalsy(); + }); + it('ApplicationGroupDetailsCtrl.deleteApplicationGroup() should do a DELETE on /api/endpointGroups/ REST API', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + groupDetailsCtrl.deleteApplicationGroup(); + $httpBackend.expectDELETE(ContivGlobals.APPLICATIONGROUPS_ENDPOINT + groupListData[0].key + '/'); + $httpBackend.flush(); + expect(groupDetailsCtrl.showLoader).toBeFalsy(); + }); + it('ApplicationGroupDetailsCtrl should have group object assigned to applicationGroup property', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + expect(groupDetailsCtrl.applicationGroup).toEqual(groupListData[0]); + }); + it('ApplicationGroupDetailsCtrl should have showLoader property set to false after fetch', function () { + $httpBackend.expectGET(ContivGlobals.APPLICATIONGROUPS_ENDPOINT); + $httpBackend.flush(); + expect(groupDetailsCtrl.showLoader).toBeFalsy(); + }); + + }); + + describe('bandwidthpolicy directive', function () { + var $httpBackend,rootScope,element,isolateScope; + + beforeEach(inject( + function (_$httpBackend_,$rootScope,$compile) { + $httpBackend = _$httpBackend_; + $httpBackend.when('GET', ContivGlobals.NETPROFILES_ENDPOINT).respond(netprofileListData); + element = $compile("")($rootScope); + $rootScope.mode = 'edit'; + $rootScope.appGroup = appGroup; + })); + afterEach(function () { + $httpBackend.verifyNoOutstandingExpectation(); + $httpBackend.verifyNoOutstandingRequest(); + }); + it('Bandwidthpolicy directive should do a GET on /api/v1/netprofiles/ REST API', function () { + $httpBackend.expectGET(ContivGlobals.NETPROFILES_ENDPOINT); + $httpBackend.flush(); + }); + it('Bandwidthpolicy directive should have netProfiles array assigned to netprofiles property', function() { + $httpBackend.expectGET(ContivGlobals.NETPROFILES_ENDPOINT); + $httpBackend.flush(); + isolateScope = element.isolateScope(); + expect(isolateScope.netProfiles.length).toEqual(1); + }); + }); + + describe('isolationpolicy directive', function(){ + var $httpBackend, $rootScope, $compile; + var element,isolateScope; + + beforeEach(inject(function (_$httpBackend_, _$rootScope_, _$compile_) { + $httpBackend = _$httpBackend_; + $httpBackend.when('GET', ContivGlobals.POLICIES_ENDPOINT).respond(policyListData); + $httpBackend.when('GET', ContivGlobals.RULES_ENDPOINT).respond(ruleListData); + $httpBackend.when('GET', ContivGlobals.APPLICATIONGROUPS_ENDPOINT).respond(groupListData); + + $rootScope = _$rootScope_; + $compile = _$compile_; + })); + afterEach(function () { + $httpBackend.verifyNoOutstandingExpectation(); + $httpBackend.verifyNoOutstandingRequest(); + }); + + it('Isolationpolicydirective should do a GET on /api/v1/policys/ REST API', function () { + $rootScope.mode = 'details'; + $rootScope.appGroup = appGroup; + element = $compile("")($rootScope); + $httpBackend.expectGET(ContivGlobals.POLICIES_ENDPOINT); + $httpBackend.flush(); + }); + + it('addIsolationPolicy() should add policy to isolation directive scope object applicationgroup.policies', inject(function(){ + $rootScope.mode = 'edit'; + $rootScope.appGroup = appGroup_edit; + element = $compile("")($rootScope); + $httpBackend.flush(); + isolateScope = element.isolateScope(); + isolateScope.selectedPolicy.policy.policyName = policyListData[0].policyName; + isolateScope.addIsolationPolicy(); + expect(isolateScope.applicationgroup.policies.length).toEqual(2); + })); + + it('removeIsolationPolicy() should delete policy from isolation directive scope object applicationgroup.policies', inject(function(){ + $rootScope.mode = 'edit'; + $rootScope.appGroup = appGroup_edit; + element = $compile("")($rootScope); + $httpBackend.flush(); + isolateScope = element.isolateScope(); + isolateScope.selectedPolicy.policy.policyName = policyListData[0].policyName; + isolateScope.removeIsolationPolicy("middleware_net_policy"); + expect(isolateScope.applicationgroup.policies.length).toEqual(1); + })); + + it('Isolationpolicydirective should have isolation policies array assigned to isolationPolicies property', function () { + $rootScope.mode = 'details'; + $rootScope.appGroup = appGroup; + element = $compile("")($rootScope); + $httpBackend.expectGET(ContivGlobals.POLICIES_ENDPOINT); + $httpBackend.flush(); + isolateScope = element.isolateScope(); + expect(isolateScope.isolationPolicies.length).toEqual(2); + }); + + it('Isolationpolicydirective should have incoming and outgoing rules array assigned to incomingRules & outgoingRules property', function () { + $rootScope.mode = 'edit'; + $rootScope.appGroup = appGroup_edit; + element = $compile("")($rootScope); + $httpBackend.expectGET(ContivGlobals.RULES_ENDPOINT); + $httpBackend.flush(); + isolateScope = element.isolateScope(); + expect(Array.isArray(isolateScope.incomingRules)).toBeTruthy(); + expect(Array.isArray(isolateScope.outgoingRules)).toBeTruthy(); + expect(isolateScope.incomingRules.length).toEqual(2); + expect(isolateScope.outgoingRules.length).toEqual(0); + }); + }); +}); \ No newline at end of file diff --git a/ui/app/applicationgroups/applicationgroupstats.html b/ui/app/applicationgroups/applicationgroupstats.html new file mode 100644 index 00000000..27ebac7e --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupstats.html @@ -0,0 +1,89 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name{{config['groupName'] || 'not configured'}}
Network Name{{config['networkName'] || 'not configured'}}
External Packet Tag{{applicationInspectStats.externalPktTag || 'not configured'}}
Internal Packet Tag{{applicationInspectStats.pktTag || 'not configured'}}
Group Tag{{applicationInspectStats.groupTag || 'not configured'}}
Number of Endpoints{{applicationInspectStats.numEndpoints || 'not configured'}}
+ +
+ + + + + + + + + Container Name + IP Address + Host + + + + + + + +
+
{{endpoint.containerName.substr(1)}}
+
{{endpoint.ipAddress.join(' ')}}
+
{{endpoint.homingHost}}
+
+
+ + + + + + + + No endpoints found + + + + + + No records matched your filter criteria. + + + + + + + + + + + +
+
+
diff --git a/ui/app/applicationgroups/applicationgroupstats.ts b/ui/app/applicationgroups/applicationgroupstats.ts new file mode 100644 index 00000000..e61b7d15 --- /dev/null +++ b/ui/app/applicationgroups/applicationgroupstats.ts @@ -0,0 +1,83 @@ +/** + * Created by cshampur on 11/18/16. + */ + +import {Component, NgZone, Input, OnInit, OnDestroy} from "@angular/core"; +import {ApplicationGroupsModel} from "../components/models/applicationgroupsmodel"; +import {CRUDHelperService} from "../components/utils/crudhelperservice"; +import {InspectService} from "../components/utils/inspectservice"; +import {Subscription, Observable} from "rxjs"; +import {ContivGlobals} from "../components/models/contivglobals"; +import {isUndefined} from "util"; +@Component({ + selector: 'applicationgroupstats', + templateUrl: './applicationgroupstats.html' +}) + +export class ApplicationGroupStatsComponent implements OnInit, OnDestroy{ + @Input('statkey') statkey: string; + public applicationInspectStats: any; + private refresh: Subscription; + public showLoader: boolean; + config:any; endpoints:any; filteredendpoints: any; containerDetails: any; + constructor(private applicationGroupsModel: ApplicationGroupsModel, + private crudHelperService: CRUDHelperService, + private inspectService: InspectService, + private ngZone: NgZone){ + this.statkey = ''; + this.applicationInspectStats = { + externalPktTag: '', + numEndpoints: '', + pktTag: '' + }; + this.config = {networkName: '', groupName: ''} + this.endpoints = []; + this.filteredendpoints = []; + this.containerDetails= {}; + this.refresh = Observable.interval(5000).subscribe(() => { + if(this.statkey!='') + this.getApplicationgroupInspect(true); + }); + } + + ngOnInit(){ + this.crudHelperService.startLoader(this); + if(this.statkey!='') + this.getApplicationgroupInspect(false); + } + + getApplicationgroupInspect(reload: boolean){ + var applicationStatsCtrl = this; + this.applicationGroupsModel.getInspectByKey(this.statkey, ContivGlobals.APPLICATIONGROUPS_INSPECT_ENDPOINT, reload) + .then((result) => { + applicationStatsCtrl['applicationInspectStats'] = result['Oper']; + applicationStatsCtrl['config'] = result['Config']; + if(!isUndefined(result['Oper'].endpoints)){ + var containerDetails = applicationStatsCtrl.inspectService.buildEndPoints(result['Oper'].endpoints); + if(applicationStatsCtrl.inspectService.checkContainerChanged(applicationStatsCtrl['containerDetails'],containerDetails)){ + applicationStatsCtrl['endpoints'] = result['Oper'].endpoints; + applicationStatsCtrl['containerDetails'] = containerDetails; + } + } + else{ + applicationStatsCtrl['endpoints'] = []; + applicationStatsCtrl['containerDetails'] = {}; + } + applicationStatsCtrl.ngZone.run(() => { + applicationStatsCtrl.crudHelperService.stopLoader(applicationStatsCtrl); + }); + }, + (error) => { + applicationStatsCtrl.ngZone.run(() => { + applicationStatsCtrl.crudHelperService.stopLoader(applicationStatsCtrl); + }); + }); + + + } + + ngOnDestroy(){ + this.refresh.unsubscribe(); + } + +} \ No newline at end of file diff --git a/ui/app/applicationgroups/bandwidthpolicy.html b/ui/app/applicationgroups/bandwidthpolicy.html new file mode 100644 index 00000000..6ffb307e --- /dev/null +++ b/ui/app/applicationgroups/bandwidthpolicy.html @@ -0,0 +1,60 @@ +
+ + + + + + + +
+
+ + +
+
+ +
+
+
+
Applicable Bandwidth Policy
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Profile NameTenant NameBandwidthDSCP
{{selectedNetprofile.profileName}}{{selectedNetprofile.tenantName}}{{selectedNetprofile.bandwidth}}{{selectedNetprofile.DSCP}}
none selected
+
\ No newline at end of file diff --git a/ui/app/applicationgroups/bandwidthpolicydirective.ts b/ui/app/applicationgroups/bandwidthpolicydirective.ts new file mode 100644 index 00000000..8ce68898 --- /dev/null +++ b/ui/app/applicationgroups/bandwidthpolicydirective.ts @@ -0,0 +1,56 @@ +/** + * Created by hardik gandhi on 6/28/16. + */ +import { Component, Input, OnChanges } from '@angular/core'; +import * as _ from 'lodash'; +import { NetprofilesModel } from "../components/models/netprofilesmodel"; +import { isUndefined } from "util"; + +@Component({ + selector: 'ctv-bandwidthpolicy', + templateUrl: './bandwidthpolicy.html' +}) +export class BandwidthPolicySelectionComponent implements OnChanges { + @Input('mode') mode:string; + @Input('applicationgroup') applicationgroup:any; + + netProfiles:any[] = []; + selectedNetprofile:any = {}; + netProfileSearchText:string = ''; + + constructor(private netprofilesModel:NetprofilesModel) { + } + + ngOnChanges() { + var component = this; + component.getNetprofiles(); + } + + /** + * Get profiles for the given tenant. + */ + getNetprofiles() { + var component = this; + component.netprofilesModel.get(false).then(function (result) { + component.netProfiles = _.filter(result, { + 'tenantName': component.applicationgroup.tenantName + }); + if ((component.applicationgroup.netProfile !== '') && (!isUndefined(component.applicationgroup['netProfile']))) { + component.selectedNetprofile = _.find(component.netProfiles, function (policy) { + return policy.profileName === component.applicationgroup.netProfile; + }); + } + }); + } + + updateApplicationgroup(netprofile) { + this.selectedNetprofile = netprofile; + if (this.selectedNetprofile === null) { + this.applicationgroup.netProfile = ''; + } else { + this.applicationgroup.netProfile = this.selectedNetprofile.profileName; + } + }; +} + + diff --git a/ui/app/applicationgroups/contractgroup.component.ts b/ui/app/applicationgroups/contractgroup.component.ts new file mode 100644 index 00000000..f1198df9 --- /dev/null +++ b/ui/app/applicationgroups/contractgroup.component.ts @@ -0,0 +1,98 @@ +/** + * Created by vjain3 on 12/14/16. + */ +import { Component, Input, OnChanges } from '@angular/core'; +import * as _ from 'lodash'; +import { ContractGroupsModel } from "../components/models/contractgroupsmodel"; + +@Component({ + selector: 'ctv-contractgroup', + templateUrl: './contractgroup.html' +}) +export class ContractGroupSelectionComponent implements OnChanges { + @Input() mode:string; + @Input() applicationgroup:any; + + selectedContractGroups:any[] = []; // To Store contract groups selected by user to display + contractGroups:any[] = []; // To Get all contract groups of tenant + contractGroupSearchText:string = ''; + + constructor(private contractGroupsModel:ContractGroupsModel) { + + } + + ngOnChanges() { + let component = this; + + /** + * Get contract group objects for each contract group present in applicationgroup + */ + function getSelectedContractGroups() { + component.applicationgroup.extContractsGrps.forEach(function (contractGroup) { + //To display details of selected contract groups + let key = component.applicationgroup.tenantName + ':' + contractGroup; + component.contractGroupsModel.getModelByKey(key, false, undefined) + .then(function (group) { + component.selectedContractGroups.push(group); + }); + }); + } + + /** + * To check 'details' or 'edit' mode (not create mode) + */ + if (component.mode === 'details' || (component.mode === 'edit' && component.applicationgroup.groupName != "")) { + component.getContractGroups(); + //Application Groups might not have any contract groups associated with them so define an empty array + if (component.applicationgroup.extContractsGrps === undefined) { + component.applicationgroup.extContractsGrps = []; + } + getSelectedContractGroups(); + } + } + + /** + * Get contract groups for the given tenant. + */ + getContractGroups() { + let component = this; + component.contractGroupsModel.get(false).then(function (result) { + component.contractGroups = _.filter(result, { + 'tenantName': component.applicationgroup.tenantName + }); + }); + } + + /** + * Add contract group to application group + */ + addContractGroup(contractGroupName) { + let component = this; + + if (contractGroupName !== undefined && _.includes(component.selectedContractGroups, contractGroupName) == false) { + //To display selected contract groups + let key = component.applicationgroup.tenantName + ':' + contractGroupName; + component.contractGroupsModel.getModelByKey(key, false, undefined) + .then(function (group) { + component.selectedContractGroups.push(group); + }); + + //To be added to application group and saved to the server + component.applicationgroup.extContractsGrps + .push(contractGroupName); + } + }; + + /** + * Remove contract group from application group + */ + removeContractGroup(contractGroupName) { + _.remove(this.selectedContractGroups, function (group) { + return group.contractsGroupName === contractGroupName; + }); + _.remove(this.applicationgroup.extContractsGrps, function (group) { + return group === contractGroupName; + }); + + }; +} \ No newline at end of file diff --git a/ui/app/applicationgroups/contractgroup.html b/ui/app/applicationgroups/contractgroup.html new file mode 100644 index 00000000..2afc149b --- /dev/null +++ b/ui/app/applicationgroups/contractgroup.html @@ -0,0 +1,90 @@ +
+ + + + + + + + + + + + + + + + +
+
+ + +
+
+ + + +
Will apply: "{{contractGroupName}}" + +
select an external contract group or groups from the dropdown
+ + + + + + + + + + + + +
Applying: "{{contractGroupName}}"
No external contract groups were selected
+ +
All Applicable External Contract Groups
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameTenantTypeContracts
{{contractGroup.contractsGroupName}}{{contractGroup.tenantName}}{{contractGroup.contractsType}}{{contractGroup.contracts?.join(", ")}}
None applied
+
\ No newline at end of file diff --git a/ui/app/applicationgroups/isolationpolicy.html b/ui/app/applicationgroups/isolationpolicy.html new file mode 100644 index 00000000..22e61188 --- /dev/null +++ b/ui/app/applicationgroups/isolationpolicy.html @@ -0,0 +1,136 @@ +
+ + + + + + + + + + + + + + + + +
+
+ + +
+
+ + + +
Will apply: "{{policy}}" + +
select a policy or policies from the dropdown
+ + + + + + + + + + + + + +
Applying: "{{policy}}"
No policies were selected
+ +
All Applicable Incoming Rules
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Policy NamePriorityActionFrom groupFrom networkFrom IP addressProtocolPort
{{rule.policyName}}{{rule.priority}}{{rule.action}}{{rule.fromEndpointGroup}}{{rule.fromNetwork}}{{rule.fromIPAddress}}{{rule.protocol}}{{rule.port}}
None applied
+ +
All Applicable Outgoing Rules
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Policy NamePriorityActionTo groupTo networkTo IP addressProtocolPort
{{rule.policyName}}{{rule.priority}}{{rule.action}}{{rule.toEndpointGroup}}{{rule.toNetwork}}{{rule.toIPAddress}}{{rule.protocol}}{{rule.port}}
None applied
+
diff --git a/ui/app/applicationgroups/isolationpolicydirective.ts b/ui/app/applicationgroups/isolationpolicydirective.ts new file mode 100644 index 00000000..24c17946 --- /dev/null +++ b/ui/app/applicationgroups/isolationpolicydirective.ts @@ -0,0 +1,114 @@ +/** + * Created by hardik gandhi on 7/8/16. + */ +import { Component, Input, OnChanges } from '@angular/core'; +import * as _ from 'lodash'; +import { PoliciesModel } from "../components/models/policiesmodel"; +import { RulesModel } from "../components/models/rulesmodel"; + +@Component({ + selector: 'ctv-isolationpolicy', + templateUrl: './isolationpolicy.html' +}) +export class IsolationPolicySelectionComponent implements OnChanges { + @Input() mode:string; + @Input() applicationgroup:any; + + incomingRules:any[] = []; + outgoingRules:any[] = []; + isolationPolicies:any[] = []; // To Get all isolation policies of tenant + isolationPolicySearchText:string = ''; + + constructor(private policiesModel:PoliciesModel, + private rulesModel:RulesModel) { + + } + + ngOnChanges() { + var component = this; + + /** + * Get incoming and outgoing rules for each policy present in applicationgroup + */ + function getRules() { + component.applicationgroup.policies.forEach(function (policy) { + //To display rules of selected policies + component.rulesModel.getIncomingRules(policy, component.applicationgroup.tenantName) + .then(function (rules) { + Array.prototype.push.apply(component.incomingRules, rules); + }); + component.rulesModel.getOutgoingRules(policy, component.applicationgroup.tenantName) + .then(function (rules) { + Array.prototype.push.apply(component.outgoingRules, rules); + }); + }); + } + + /** + * To check 'details' or 'edit' mode (not create mode) + */ + if (component.mode === 'details' || (component.mode === 'edit' && component.applicationgroup.groupName != "")) { + component.getIsolationPolicies(); + //Application Groups might not have any policies associated with them so define an empty array + if (component.applicationgroup.policies === undefined) { + component.applicationgroup.policies = []; + } + getRules(); + } + } + + /** + * Get policies for the given tenant. + */ + getIsolationPolicies() { + var component = this; + component.policiesModel.get(false).then(function (result) { + component.isolationPolicies = _.filter(result, { + 'tenantName': component.applicationgroup.tenantName + }); + }); + } + + /** + * Add policy to application group + */ + addIsolationPolicy(policyName) { + var component = this; + var currentPolicyName = policyName; + + if (currentPolicyName !== undefined && _.includes(component.applicationgroup.policies, currentPolicyName) == false) { + //To display selected policies + //To be added to application group and saved to the server + component.applicationgroup.policies + .push(currentPolicyName); + + //To display rules of selected policies + component.rulesModel.getIncomingRules(currentPolicyName, component.applicationgroup.tenantName) + .then(function (rules) { + Array.prototype.push.apply(component.incomingRules, rules); + }); + component.rulesModel.getOutgoingRules(currentPolicyName, component.applicationgroup.tenantName) + .then(function (rules) { + Array.prototype.push.apply(component.outgoingRules, rules); + }); + + } + }; + + /** + * Remove policy from application group + */ + removeIsolationPolicy(policyName) { + _.remove(this.applicationgroup.policies, function (policy) { + return policy === policyName; + }); + _.remove(this.incomingRules, function (rule) { + return rule.policyName === policyName; + }); + _.remove(this.outgoingRules, function (rule) { + return rule.policyName === policyName; + }); + }; +} + + diff --git a/ui/app/appprofiles/appgroupselection.component.ts b/ui/app/appprofiles/appgroupselection.component.ts new file mode 100644 index 00000000..98e51127 --- /dev/null +++ b/ui/app/appprofiles/appgroupselection.component.ts @@ -0,0 +1,89 @@ +/** + * Created by vjain3 on 11/11/16. + */ +import { Component, Input, OnChanges } from '@angular/core'; +import * as _ from 'lodash'; +import { ApplicationGroupsModel } from "../components/models/applicationgroupsmodel"; + + +@Component({ + selector: 'ctv-appgroupselection', + templateUrl: './appgroupselection.html' +}) +export class ApplicationGroupSelectionComponent implements OnChanges { + @Input() mode:string; + @Input() appProfile:any; + + applicationGroups:any[] = []; // To Get all application groups of tenant + applicationGroupSearchText:string = ''; + + selectedApplicationGroups:any[] = []; + + constructor(private applicationGroupsModel:ApplicationGroupsModel) { + } + + ngOnChanges() { + var component = this; + + component.getApplicationGroups(); + + /** + * To check 'details' or 'edit' mode (not create mode) + */ + if (component.mode === 'details' || (component.mode === 'edit' && component.appProfile.appProfileName != "")) { + //Application Profiles might not have any groups associated with them so define an empty array + if (component.appProfile.endpointGroups === undefined) { + component.appProfile.endpointGroups = []; + } + } + } + + /** + * Get application groups. + */ + getApplicationGroups() { + var component = this; + //Refresh application groups as its links would be updated when a new application profile is created. + component.applicationGroupsModel.get(true).then(function (result) { + component.selectedApplicationGroups = _.filter(result, function (group) { + return _.includes(component.appProfile.endpointGroups, group['groupName']); + }); + //No two application profiles can share the same application groups + component.applicationGroups = _.filter(result, function (group) { + return (((_.isEmpty(group['links'].AppProfile)) || (group['links'].AppProfile.key === component.appProfile.key)) + && (group['tenantName'] === component.appProfile.tenantName)); + }); + }); + } + + /** + * Add group to app profile + */ + addApplicationGroup(groupName:string) { + var component = this; + var currentGroupName = groupName; + + if (currentGroupName !== undefined && !_.includes(component.appProfile.endpointGroups, currentGroupName)) { + let key = component.appProfile.tenantName + ':' + currentGroupName; + component.applicationGroupsModel.getModelByKey(key, false, undefined).then(function (group) { + component.selectedApplicationGroups.push(group); + component.selectedApplicationGroups = component.selectedApplicationGroups.slice(); + }); + //To be added to application group and saved to the server + component.appProfile.endpointGroups.push(currentGroupName); + } + }; + + /** + * Remove group from app profile + */ + removeApplicationGroup(groupName:string) { + _.remove(this.selectedApplicationGroups, function (group) { + return group['groupName'] === groupName; + }); + this.selectedApplicationGroups = this.selectedApplicationGroups.slice(); + _.remove(this.appProfile.endpointGroups, function (group) { + return group === groupName; + }); + }; +} \ No newline at end of file diff --git a/ui/app/appprofiles/appgroupselection.html b/ui/app/appprofiles/appgroupselection.html new file mode 100644 index 00000000..9f286558 --- /dev/null +++ b/ui/app/appprofiles/appgroupselection.html @@ -0,0 +1,100 @@ +
+ +
Application groups associated with this profile.
+
Add application groups to associate with this profile.
+ + + + + + + + + +
+
+ + +
+
+ + + +
+ + + + + + Application group name + + + + Policies + + +   + + + + + + + {{group.groupName}} + + {{group.policies.join(", ")}} + + + + + + + + + + No application groups have been added to this profile. + + + + + + + + + + + + + + +
diff --git a/ui/app/appprofiles/appprofile.module.ts b/ui/app/appprofiles/appprofile.module.ts new file mode 100644 index 00000000..8bdae1c4 --- /dev/null +++ b/ui/app/appprofiles/appprofile.module.ts @@ -0,0 +1,39 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { RouterModule } from "@angular/router"; +import { DirectivesModule } from "../components/directives/directives.module"; +import { AppProfileListComponent } from "./appprofilelist.component"; +import { AppProfileCreateComponent } from "./appprofilecreate.component"; +import { AppProfileDetailsComponent } from "./appprofiledetails.component"; +import { ApplicationGroupSelectionComponent } from "./appgroupselection.component"; +import { PipesModule } from "../components/pipes/pipes.module"; + +@NgModule({ + imports: [ + FormsModule, + CommonModule, + RouterModule, + DirectivesModule, + PipesModule + ], + declarations: [ + AppProfileListComponent, + AppProfileCreateComponent, + AppProfileDetailsComponent, + ApplicationGroupSelectionComponent + ], + exports: [ + AppProfileListComponent, + AppProfileCreateComponent, + AppProfileDetailsComponent, + ApplicationGroupSelectionComponent, + DirectivesModule, + PipesModule, + FormsModule, + CommonModule, + RouterModule + ] +}) + +export class AppProfilesModule {} diff --git a/ui/app/appprofiles/appprofilecreate.component.ts b/ui/app/appprofiles/appprofilecreate.component.ts new file mode 100644 index 00000000..be3e2f6b --- /dev/null +++ b/ui/app/appprofiles/appprofilecreate.component.ts @@ -0,0 +1,92 @@ +import { Component, Inject, OnInit, NgZone } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import * as _ from 'lodash'; +import { CRUDHelperService } from "../components/utils/crudhelperservice"; +import { AppProfilesModel } from "../components/models/appprofilesmodel"; +import { OrganizationsModel } from "../components/models/organizationsmodel"; + +@Component({ + selector: 'appprofilecreate', + templateUrl: './appprofilecreate.html' +}) + +export class AppProfileCreateComponent implements OnInit { + newAppProfile:any = {}; + tenants:any[] = []; + + constructor(private activatedRoute:ActivatedRoute, + private router:Router, + private ngZone:NgZone, + private organizationsModel:OrganizationsModel, + private crudHelperService:CRUDHelperService, + private appProfilesModel:AppProfilesModel) { + var component = this; + + function resetForm() { + crudHelperService.stopLoader(component); + component.newAppProfile = { + key: '', + appProfileName: '', + endpointGroups: [], + tenantName: '' + }; + } + + resetForm(); + } + + ngOnInit() { + var component = this; + component.crudHelperService.startLoader(component); + + function getTenants(reload:boolean) { + component.organizationsModel.get(reload) + .then((result) => { + component.tenants = result; + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + }, (error) => { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + }); + } + + getTenants(false); + } + + returnToAppProfiles() { + this.router.navigate(['../list'], {relativeTo: this.activatedRoute}); + } + + cancelCreating() { + this.returnToAppProfiles(); + } + + createAppProfile(formvalid:boolean) { + var component = this; + if (formvalid) { + this.crudHelperService.startLoader(this); + component.newAppProfile.key = this.appProfilesModel.generateKey(this.newAppProfile); + this.appProfilesModel.create(component.newAppProfile, undefined) + .then((result) => { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + component.crudHelperService.showNotification("Application profile: Created", result.key.toString()); + }); + component.returnToAppProfiles(); + }, (error) => { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + component.crudHelperService.showServerError("Application profile: Create failed", error); + }); + } + } + + updateTenant(tenantName:string, appGroupSelComponent: any) { + this.newAppProfile.tenantName = tenantName; + appGroupSelComponent.getApplicationGroups(); + } +} \ No newline at end of file diff --git a/ui/app/appprofiles/appprofilecreate.html b/ui/app/appprofiles/appprofilecreate.html new file mode 100644 index 00000000..c57a58b0 --- /dev/null +++ b/ui/app/appprofiles/appprofilecreate.html @@ -0,0 +1,87 @@ +
+ + + +
+
+
+ +
+
+
+ +
+
+
+
+
+ + + + Please enter application profile name + +
+
+
+
+
+
+ + + + Please select tenant + +
+
+
+
+ + + +
+
+ + + + +
+
+
+
+
+
+ +
diff --git a/ui/app/appprofiles/appprofiledetails.component.ts b/ui/app/appprofiles/appprofiledetails.component.ts new file mode 100644 index 00000000..ccf2052a --- /dev/null +++ b/ui/app/appprofiles/appprofiledetails.component.ts @@ -0,0 +1,96 @@ +import { Component, Inject, NgZone } from '@angular/core'; +import { ActivatedRoute, Router } from "@angular/router"; +import { AppProfilesModel } from "../components/models/appprofilesmodel"; +import { CRUDHelperService } from "../components/utils/crudhelperservice"; + +@Component({ + selector: 'appprofiledetails', + templateUrl: './appprofiledetails.html' +}) +export class AppProfileDetailsComponent { + appProfile:any = {}; + mode:string = 'details'; + + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + private ngZone: NgZone, + private appProfilesModel:AppProfilesModel, + private crudHelperService:CRUDHelperService) { + var component = this; + + /** + * To show edit or details screen based on the route + */ + function setMode() { + if (activatedRoute.routeConfig.path.includes('edit')) { + component.mode = 'edit'; + } else { + component.mode = 'details'; + } + } + + component.crudHelperService.stopLoader(component); + + component.appProfilesModel.getModelByKey(activatedRoute.snapshot.params['key'], false, 'key') + .then(function (appProfile) { + component.appProfile = appProfile; + }); + + setMode(); + } + + returnToAppProfile() { + this.router.navigate(['../../list'], { relativeTo: this.activatedRoute }); + } + + returnToAppProfileDetails() { + this.router.navigate(['../../details', this.appProfile.key], { relativeTo: this.activatedRoute }); + } + + editAppProfile() { + this.router.navigate(['../../edit', this.appProfile.key], { relativeTo: this.activatedRoute }); + } + + cancelEditing() { + this.returnToAppProfileDetails(); + } + + deleteAppProfile() { + var component = this; + component.crudHelperService.startLoader(component); + component.appProfilesModel.delete(component.appProfile).then( + function successCallback(result) { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + component.crudHelperService.showNotification("Application profile: Deleted", result); + }); + component.returnToAppProfile(); + }, function errorCallback(result) { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + component.crudHelperService.showServerError("Application profile: Delete failed", result); + }); + } + + saveAppProfile(formvalid: boolean) { + var component = this; + if (formvalid) { + component.crudHelperService.startLoader(component); + + component.appProfilesModel.save(component.appProfile).then( + function successCallback(result) { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + component.crudHelperService.showNotification("Application profile: Updated", result.key.toString()); + }); + component.returnToAppProfileDetails(); + }, function errorCallback(result) { + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + component.crudHelperService.showServerError("Application profile: Update failed", result); + }); + } + } +} \ No newline at end of file diff --git a/ui/app/appprofiles/appprofiledetails.html b/ui/app/appprofiles/appprofiledetails.html new file mode 100644 index 00000000..f10243ab --- /dev/null +++ b/ui/app/appprofiles/appprofiledetails.html @@ -0,0 +1,97 @@ +
+ + + + +
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + + + + + + + + + +
Application Profile Name{{appProfile.appProfileName}}
Tenant{{appProfile.tenantName}}
+ +

Application Groups

+ +
+
+ + + +
+
+ + +
+
+ +
+
+ +
+
+
+
diff --git a/ui/app/appprofiles/appprofilelist.component.ts b/ui/app/appprofiles/appprofilelist.component.ts new file mode 100644 index 00000000..c6c43f3f --- /dev/null +++ b/ui/app/appprofiles/appprofilelist.component.ts @@ -0,0 +1,55 @@ +import { Component, OnInit, OnDestroy, Inject, NgZone } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import { CRUDHelperService } from "../components/utils/crudhelperservice"; +import { Observable, Subscription } from "rxjs"; +import { AppProfilesModel } from "../components/models/appprofilesmodel"; + + +@Component({ + selector: 'appprofilelist', + templateUrl: './appprofilelist.html' +}) + +export class AppProfileListComponent implements OnInit, OnDestroy{ + + private refresh: Subscription; + + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + private appProfilesModel: AppProfilesModel, + private crudHelperService: CRUDHelperService, + private ngZone: NgZone) { + this.refresh = Observable.interval(5000).subscribe(() => { + this.getAppProfiles(true); + }) + } + + ngOnInit(){ + this.crudHelperService.startLoader(this); + this.getAppProfiles(false); + } + + getAppProfiles(reload: boolean){ + var component = this; + this.appProfilesModel.get(reload) + .then(function successCallback(result){ + component['appProfiles'] = result; + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + }, + function errorCallback(result){ + component.ngZone.run(() => { + component.crudHelperService.stopLoader(component); + }); + }); + } + + create(){ + this.router.navigate(['../create'], { relativeTo: this.activatedRoute }); + } + + ngOnDestroy(){ + this.refresh.unsubscribe(); + } +} \ No newline at end of file diff --git a/ui/app/appprofiles/appprofilelist.html b/ui/app/appprofiles/appprofilelist.html new file mode 100644 index 00000000..5bdf0ea9 --- /dev/null +++ b/ui/app/appprofiles/appprofilelist.html @@ -0,0 +1,79 @@ +
+ + + + +
+
+ +
+
+ +
+
+
+
+
+ + + + Name + Tenant + Application groups + + + + + + {{appProfile.appProfileName}} + {{appProfile.tenantName}} + {{appProfile.endpointGroups?.join(", ")}} + + + + + + No application profiles found. Would you like to create one? + + + + + + No records matched your filter criteria. + + + + + + + + + + + + +
+
+
diff --git a/ui/app/assets/login.jpg b/ui/app/assets/login.jpg new file mode 100644 index 00000000..fa8e89e2 Binary files /dev/null and b/ui/app/assets/login.jpg differ diff --git a/ui/app/assets/loginbackground.c98641bacd18c5b681536932dc001214.jpeg b/ui/app/assets/loginbackground.c98641bacd18c5b681536932dc001214.jpeg new file mode 100644 index 00000000..28d28708 Binary files /dev/null and b/ui/app/assets/loginbackground.c98641bacd18c5b681536932dc001214.jpeg differ diff --git a/ui/app/bower_components/jquery/dist/jquery.min.js b/ui/app/bower_components/jquery/dist/jquery.min.js new file mode 100644 index 00000000..4c5be4c0 --- /dev/null +++ b/ui/app/bower_components/jquery/dist/jquery.min.js @@ -0,0 +1,4 @@ +/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */ +!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.1.1",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c0&&b-1 in a)}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=function(a,b){for(var c=0,d=a.length;c+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(N),U=new RegExp("^"+L+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+N),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),aa=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:d<0?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ba=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ca=function(a,b){return b?"\0"===a?"\ufffd":a.slice(0,-1)+"\\"+a.charCodeAt(a.length-1).toString(16)+" ":"\\"+a},da=function(){m()},ea=ta(function(a){return a.disabled===!0&&("form"in a||"label"in a)},{dir:"parentNode",next:"legend"});try{G.apply(D=H.call(v.childNodes),v.childNodes),D[v.childNodes.length].nodeType}catch(fa){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s=b&&b.ownerDocument,w=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==w&&9!==w&&11!==w)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==w&&(l=Z.exec(a)))if(f=l[1]){if(9===w){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(s&&(j=s.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(l[2])return G.apply(d,b.getElementsByTagName(a)),d;if((f=l[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==w)s=b,r=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(ba,ca):b.setAttribute("id",k=u),o=g(a),h=o.length;while(h--)o[h]="#"+k+" "+sa(o[h]);r=o.join(","),s=$.test(a)&&qa(b.parentNode)||b}if(r)try{return G.apply(d,s.querySelectorAll(r)),d}catch(x){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(P,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("fieldset");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&a.sourceIndex-b.sourceIndex;if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return function(b){return"form"in b?b.parentNode&&b.disabled===!1?"label"in b?"label"in b.parentNode?b.parentNode.disabled===a:b.disabled===a:b.isDisabled===a||b.isDisabled!==!a&&ea(b)===a:b.disabled===a:"label"in b&&b.disabled===a}}function pa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function qa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return!!b&&"HTML"!==b.nodeName},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),v!==n&&(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(n.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){return a.getAttribute("id")===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}}):(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c,d,e,f=b.getElementById(a);if(f){if(c=f.getAttributeNode("id"),c&&c.value===a)return[f];e=b.getElementsByName(a),d=0;while(f=e[d++])if(c=f.getAttributeNode("id"),c&&c.value===a)return[f]}return[]}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){if("undefined"!=typeof b.getElementsByClassName&&p)return b.getElementsByClassName(a)},r=[],q=[],(c.qsa=Y.test(n.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){a.innerHTML="";var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+K+"*[*^$|!~]?="),2!==a.querySelectorAll(":enabled").length&&q.push(":enabled",":disabled"),o.appendChild(a).disabled=!0,2!==a.querySelectorAll(":disabled").length&&q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Y.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"*"),s.call(a,"[s!='']:x"),r.push("!=",N)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Y.test(o.compareDocumentPosition),t=b||Y.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?I(k,a)-I(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?I(k,a)-I(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?la(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(S,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.escape=function(a){return(a+"").replace(ba,ca)},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(_,aa),a[3]=(a[3]||a[4]||a[5]||"").replace(_,aa),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return V.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&T.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(_,aa).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:!b||(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(O," ")+" ").indexOf(c)>-1:"|="===b&&(e===c||e.slice(0,c.length+1)===c+"-"))}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(P,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(_,aa),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return U.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(_,aa).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:oa(!1),disabled:oa(!0),checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:pa(function(){return[0]}),last:pa(function(a,b){return[b-1]}),eq:pa(function(a,b,c){return[c<0?c+b:c]}),even:pa(function(a,b){for(var c=0;c=0;)a.push(d);return a}),gt:pa(function(a,b,c){for(var d=c<0?c+b:c;++d1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function va(a,b,c){for(var d=0,e=b.length;d-1&&(f[j]=!(g[j]=l))}}else r=wa(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ya(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ta(function(a){return a===b},h,!0),l=ta(function(a){return I(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];i1&&ua(m),i>1&&sa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(P,"$1"),c,i0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=E.call(i));u=wa(u)}G.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&ga.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=ya(b[c]),f[u]?d.push(f):e.push(f);f=A(a,za(e,d)),f.selector=a}return f},i=ga.select=function(a,b,c,e){var f,i,j,k,l,m="function"==typeof a&&a,n=!e&&g(a=m.selector||a);if(c=c||[],1===n.length){if(i=n[0]=n[0].slice(0),i.length>2&&"ID"===(j=i[0]).type&&9===b.nodeType&&p&&d.relative[i[1].type]){if(b=(d.find.ID(j.matches[0].replace(_,aa),b)||[])[0],!b)return c;m&&(b=b.parentNode),a=a.slice(i.shift().value.length)}f=V.needsContext.test(a)?0:i.length;while(f--){if(j=i[f],d.relative[k=j.type])break;if((l=d.find[k])&&(e=l(j.matches[0].replace(_,aa),$.test(i[0].type)&&qa(b.parentNode)||b))){if(i.splice(f,1),a=e.length&&sa(i),!a)return G.apply(c,e),c;break}}}return(m||h(a,n))(e,b,!p,c,!b||$.test(a)&&qa(b.parentNode)||b),c},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("fieldset"))}),ja(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){if(!c)return a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){if(!c&&"input"===a.nodeName.toLowerCase())return a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(J,function(a,b,c){var d;if(!c)return a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);r.find=x,r.expr=x.selectors,r.expr[":"]=r.expr.pseudos,r.uniqueSort=r.unique=x.uniqueSort,r.text=x.getText,r.isXMLDoc=x.isXML,r.contains=x.contains,r.escapeSelector=x.escape;var y=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&r(a).is(c))break;d.push(a)}return d},z=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},A=r.expr.match.needsContext,B=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,C=/^.[^:#\[\.,]*$/;function D(a,b,c){return r.isFunction(b)?r.grep(a,function(a,d){return!!b.call(a,d,a)!==c}):b.nodeType?r.grep(a,function(a){return a===b!==c}):"string"!=typeof b?r.grep(a,function(a){return i.call(b,a)>-1!==c}):C.test(b)?r.filter(b,a,c):(b=r.filter(b,a),r.grep(a,function(a){return i.call(b,a)>-1!==c&&1===a.nodeType}))}r.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?r.find.matchesSelector(d,a)?[d]:[]:r.find.matches(a,r.grep(b,function(a){return 1===a.nodeType}))},r.fn.extend({find:function(a){var b,c,d=this.length,e=this;if("string"!=typeof a)return this.pushStack(r(a).filter(function(){for(b=0;b1?r.uniqueSort(c):c},filter:function(a){return this.pushStack(D(this,a||[],!1))},not:function(a){return this.pushStack(D(this,a||[],!0))},is:function(a){return!!D(this,"string"==typeof a&&A.test(a)?r(a):a||[],!1).length}});var E,F=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,G=r.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||E,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:F.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof r?b[0]:b,r.merge(this,r.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),B.test(e[1])&&r.isPlainObject(b))for(e in b)r.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&(this[0]=f,this.length=1),this}return a.nodeType?(this[0]=a,this.length=1,this):r.isFunction(a)?void 0!==c.ready?c.ready(a):a(r):r.makeArray(a,this)};G.prototype=r.fn,E=r(d);var H=/^(?:parents|prev(?:Until|All))/,I={children:!0,contents:!0,next:!0,prev:!0};r.fn.extend({has:function(a){var b=r(a,this),c=b.length;return this.filter(function(){for(var a=0;a-1:1===c.nodeType&&r.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?r.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?i.call(r(a),this[0]):i.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(r.uniqueSort(r.merge(this.get(),r(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function J(a,b){while((a=a[b])&&1!==a.nodeType);return a}r.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return y(a,"parentNode")},parentsUntil:function(a,b,c){return y(a,"parentNode",c)},next:function(a){return J(a,"nextSibling")},prev:function(a){return J(a,"previousSibling")},nextAll:function(a){return y(a,"nextSibling")},prevAll:function(a){return y(a,"previousSibling")},nextUntil:function(a,b,c){return y(a,"nextSibling",c)},prevUntil:function(a,b,c){return y(a,"previousSibling",c)},siblings:function(a){return z((a.parentNode||{}).firstChild,a)},children:function(a){return z(a.firstChild)},contents:function(a){return a.contentDocument||r.merge([],a.childNodes)}},function(a,b){r.fn[a]=function(c,d){var e=r.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=r.filter(d,e)),this.length>1&&(I[a]||r.uniqueSort(e),H.test(a)&&e.reverse()),this.pushStack(e)}});var K=/[^\x20\t\r\n\f]+/g;function L(a){var b={};return r.each(a.match(K)||[],function(a,c){b[c]=!0}),b}r.Callbacks=function(a){a="string"==typeof a?L(a):r.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h-1)f.splice(c,1),c<=h&&h--}),this},has:function(a){return a?r.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||b||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j};function M(a){return a}function N(a){throw a}function O(a,b,c){var d;try{a&&r.isFunction(d=a.promise)?d.call(a).done(b).fail(c):a&&r.isFunction(d=a.then)?d.call(a,b,c):b.call(void 0,a)}catch(a){c.call(void 0,a)}}r.extend({Deferred:function(b){var c=[["notify","progress",r.Callbacks("memory"),r.Callbacks("memory"),2],["resolve","done",r.Callbacks("once memory"),r.Callbacks("once memory"),0,"resolved"],["reject","fail",r.Callbacks("once memory"),r.Callbacks("once memory"),1,"rejected"]],d="pending",e={state:function(){return d},always:function(){return f.done(arguments).fail(arguments),this},"catch":function(a){return e.then(null,a)},pipe:function(){var a=arguments;return r.Deferred(function(b){r.each(c,function(c,d){var e=r.isFunction(a[d[4]])&&a[d[4]];f[d[1]](function(){var a=e&&e.apply(this,arguments);a&&r.isFunction(a.promise)?a.promise().progress(b.notify).done(b.resolve).fail(b.reject):b[d[0]+"With"](this,e?[a]:arguments)})}),a=null}).promise()},then:function(b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(b=f&&(d!==N&&(h=void 0,i=[a]),c.rejectWith(h,i))}};b?k():(r.Deferred.getStackHook&&(k.stackTrace=r.Deferred.getStackHook()),a.setTimeout(k))}}return r.Deferred(function(a){c[0][3].add(g(0,a,r.isFunction(e)?e:M,a.notifyWith)),c[1][3].add(g(0,a,r.isFunction(b)?b:M)),c[2][3].add(g(0,a,r.isFunction(d)?d:N))}).promise()},promise:function(a){return null!=a?r.extend(a,e):e}},f={};return r.each(c,function(a,b){var g=b[2],h=b[5];e[b[1]]=g.add,h&&g.add(function(){d=h},c[3-a][2].disable,c[0][2].lock),g.add(b[3].fire),f[b[0]]=function(){return f[b[0]+"With"](this===f?void 0:this,arguments),this},f[b[0]+"With"]=g.fireWith}),e.promise(f),b&&b.call(f,f),f},when:function(a){var b=arguments.length,c=b,d=Array(c),e=f.call(arguments),g=r.Deferred(),h=function(a){return function(c){d[a]=this,e[a]=arguments.length>1?f.call(arguments):c,--b||g.resolveWith(d,e)}};if(b<=1&&(O(a,g.done(h(c)).resolve,g.reject),"pending"===g.state()||r.isFunction(e[c]&&e[c].then)))return g.then();while(c--)O(e[c],h(c),g.reject);return g.promise()}});var P=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;r.Deferred.exceptionHook=function(b,c){a.console&&a.console.warn&&b&&P.test(b.name)&&a.console.warn("jQuery.Deferred exception: "+b.message,b.stack,c)},r.readyException=function(b){a.setTimeout(function(){throw b})};var Q=r.Deferred();r.fn.ready=function(a){return Q.then(a)["catch"](function(a){r.readyException(a)}),this},r.extend({isReady:!1,readyWait:1,holdReady:function(a){a?r.readyWait++:r.ready(!0)},ready:function(a){(a===!0?--r.readyWait:r.isReady)||(r.isReady=!0,a!==!0&&--r.readyWait>0||Q.resolveWith(d,[r]))}}),r.ready.then=Q.then;function R(){d.removeEventListener("DOMContentLoaded",R), +a.removeEventListener("load",R),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",R),a.addEventListener("load",R));var S=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)S(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(r(a),c)})),b))for(;h1,null,!0)},removeData:function(a){return this.each(function(){W.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=V.get(a,b),c&&(!d||r.isArray(c)?d=V.access(a,b,r.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return V.get(a,c)||V.access(a,c,{empty:r.Callbacks("once memory").add(function(){V.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length\x20\t\r\n\f]+)/i,ka=/^$|\/(?:java|ecma)script/i,la={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};la.optgroup=la.option,la.tbody=la.tfoot=la.colgroup=la.caption=la.thead,la.th=la.td;function ma(a,b){var c;return c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[],void 0===b||b&&r.nodeName(a,b)?r.merge([a],c):c}function na(a,b){for(var c=0,d=a.length;c-1)e&&e.push(f);else if(j=r.contains(f.ownerDocument,f),g=ma(l.appendChild(f),"script"),j&&na(g),c){k=0;while(f=g[k++])ka.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),o.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="",o.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var qa=d.documentElement,ra=/^key/,sa=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,ta=/^([^.]*)(?:\.(.+)|)/;function ua(){return!0}function va(){return!1}function wa(){try{return d.activeElement}catch(a){}}function xa(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)xa(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=va;else if(!e)return a;return 1===f&&(g=e,e=function(a){return r().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=r.guid++)),a.each(function(){r.event.add(this,b,e,d,c)})}r.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=V.get(a);if(q){c.handler&&(f=c,c=f.handler,e=f.selector),e&&r.find.matchesSelector(qa,e),c.guid||(c.guid=r.guid++),(i=q.events)||(i=q.events={}),(g=q.handle)||(g=q.handle=function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(K)||[""],j=b.length;while(j--)h=ta.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n&&(l=r.event.special[n]||{},n=(e?l.delegateType:l.bindType)||n,l=r.event.special[n]||{},k=r.extend({type:n,origType:p,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&r.expr.match.needsContext.test(e),namespace:o.join(".")},f),(m=i[n])||(m=i[n]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,o,g)!==!1||a.addEventListener&&a.addEventListener(n,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),r.event.global[n]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=V.hasData(a)&&V.get(a);if(q&&(i=q.events)){b=(b||"").match(K)||[""],j=b.length;while(j--)if(h=ta.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n){l=r.event.special[n]||{},n=(d?l.delegateType:l.bindType)||n,m=i[n]||[],h=h[2]&&new RegExp("(^|\\.)"+o.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&p!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,o,q.handle)!==!1||r.removeEvent(a,n,q.handle),delete i[n])}else for(n in i)r.event.remove(a,n+b[j],c,d,!0);r.isEmptyObject(i)&&V.remove(a,"handle events")}},dispatch:function(a){var b=r.event.fix(a),c,d,e,f,g,h,i=new Array(arguments.length),j=(V.get(this,"events")||{})[b.type]||[],k=r.event.special[b.type]||{};for(i[0]=b,c=1;c=1))for(;j!==this;j=j.parentNode||this)if(1===j.nodeType&&("click"!==a.type||j.disabled!==!0)){for(f=[],g={},c=0;c-1:r.find(e,this,null,[j]).length),g[e]&&f.push(d);f.length&&h.push({elem:j,handlers:f})}return j=this,i\x20\t\r\n\f]*)[^>]*)\/>/gi,za=/\s*$/g;function Da(a,b){return r.nodeName(a,"table")&&r.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a:a}function Ea(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function Fa(a){var b=Ba.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Ga(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(V.hasData(a)&&(f=V.access(a),g=V.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;c1&&"string"==typeof q&&!o.checkClone&&Aa.test(q))return a.each(function(e){var f=a.eq(e);s&&(b[0]=q.call(this,e,f.html())),Ia(f,b,c,d)});if(m&&(e=pa(b,a[0].ownerDocument,!1,a,d),f=e.firstChild,1===e.childNodes.length&&(e=f),f||d)){for(h=r.map(ma(e,"script"),Ea),i=h.length;l")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=r.contains(a.ownerDocument,a);if(!(o.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||r.isXMLDoc(a)))for(g=ma(h),f=ma(a),d=0,e=f.length;d0&&na(g,!i&&ma(a,"script")),h},cleanData:function(a){for(var b,c,d,e=r.event.special,f=0;void 0!==(c=a[f]);f++)if(T(c)){if(b=c[V.expando]){if(b.events)for(d in b.events)e[d]?r.event.remove(c,d):r.removeEvent(c,d,b.handle);c[V.expando]=void 0}c[W.expando]&&(c[W.expando]=void 0)}}}),r.fn.extend({detach:function(a){return Ja(this,a,!0)},remove:function(a){return Ja(this,a)},text:function(a){return S(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return Ia(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Da(this,a);b.appendChild(a)}})},prepend:function(){return Ia(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Da(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ia(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ia(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(r.cleanData(ma(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null!=a&&a,b=null==b?a:b,this.map(function(){return r.clone(this,a,b)})},html:function(a){return S(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!za.test(a)&&!la[(ja.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;c1)}});function Ya(a,b,c,d,e){return new Ya.prototype.init(a,b,c,d,e)}r.Tween=Ya,Ya.prototype={constructor:Ya,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||r.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(r.cssNumber[c]?"":"px")},cur:function(){var a=Ya.propHooks[this.prop];return a&&a.get?a.get(this):Ya.propHooks._default.get(this)},run:function(a){var b,c=Ya.propHooks[this.prop];return this.options.duration?this.pos=b=r.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Ya.propHooks._default.set(this),this}},Ya.prototype.init.prototype=Ya.prototype,Ya.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=r.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){r.fx.step[a.prop]?r.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[r.cssProps[a.prop]]&&!r.cssHooks[a.prop]?a.elem[a.prop]=a.now:r.style(a.elem,a.prop,a.now+a.unit)}}},Ya.propHooks.scrollTop=Ya.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},r.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},r.fx=Ya.prototype.init,r.fx.step={};var Za,$a,_a=/^(?:toggle|show|hide)$/,ab=/queueHooks$/;function bb(){$a&&(a.requestAnimationFrame(bb),r.fx.tick())}function cb(){return a.setTimeout(function(){Za=void 0}),Za=r.now()}function db(a,b){var c,d=0,e={height:a};for(b=b?1:0;d<4;d+=2-b)c=ba[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function eb(a,b,c){for(var d,e=(hb.tweeners[b]||[]).concat(hb.tweeners["*"]),f=0,g=e.length;f1)},removeAttr:function(a){return this.each(function(){r.removeAttr(this,a)})}}),r.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?r.prop(a,b,c):(1===f&&r.isXMLDoc(a)||(e=r.attrHooks[b.toLowerCase()]||(r.expr.match.bool.test(b)?ib:void 0)), +void 0!==c?null===c?void r.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=r.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&r.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(K);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c)}}),ib={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=jb[b]||r.find.attr;jb[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=jb[g],jb[g]=e,e=null!=c(a,b,d)?g:null,jb[g]=f),e}});var kb=/^(?:input|select|textarea|button)$/i,lb=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return S(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):kb.test(a.nodeName)||lb.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});function mb(a){var b=a.match(K)||[];return b.join(" ")}function nb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,nb(this)))});if("string"==typeof a&&a){b=a.match(K)||[];while(c=this[i++])if(e=nb(c),d=1===c.nodeType&&" "+mb(e)+" "){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=mb(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,nb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(K)||[];while(c=this[i++])if(e=nb(c),d=1===c.nodeType&&" "+mb(e)+" "){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=mb(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,nb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(K)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=nb(this),b&&V.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":V.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+mb(nb(c))+" ").indexOf(b)>-1)return!0;return!1}});var ob=/\r/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":r.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(ob,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:mb(r.text(a))}},select:{get:function(a){var b,c,d,e=a.options,f=a.selectedIndex,g="select-one"===a.type,h=g?null:[],i=g?f+1:e.length;for(d=f<0?i:g?f:0;d-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),r.each(["radio","checkbox"],function(){r.valHooks[this]={set:function(a,b){if(r.isArray(b))return a.checked=r.inArray(r(a).val(),b)>-1}},o.checkOn||(r.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var pb=/^(?:focusinfocus|focusoutblur)$/;r.extend(r.event,{trigger:function(b,c,e,f){var g,h,i,j,k,m,n,o=[e||d],p=l.call(b,"type")?b.type:b,q=l.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!pb.test(p+r.event.triggered)&&(p.indexOf(".")>-1&&(q=p.split("."),p=q.shift(),q.sort()),k=p.indexOf(":")<0&&"on"+p,b=b[r.expando]?b:new r.Event(p,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=q.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:r.makeArray(c,[b]),n=r.event.special[p]||{},f||!n.trigger||n.trigger.apply(e,c)!==!1)){if(!f&&!n.noBubble&&!r.isWindow(e)){for(j=n.delegateType||p,pb.test(j+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),i=h;i===(e.ownerDocument||d)&&o.push(i.defaultView||i.parentWindow||a)}g=0;while((h=o[g++])&&!b.isPropagationStopped())b.type=g>1?j:n.bindType||p,m=(V.get(h,"events")||{})[b.type]&&V.get(h,"handle"),m&&m.apply(h,c),m=k&&h[k],m&&m.apply&&T(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=p,f||b.isDefaultPrevented()||n._default&&n._default.apply(o.pop(),c)!==!1||!T(e)||k&&r.isFunction(e[p])&&!r.isWindow(e)&&(i=e[k],i&&(e[k]=null),r.event.triggered=p,e[p](),r.event.triggered=void 0,i&&(e[k]=i)),b.result}},simulate:function(a,b,c){var d=r.extend(new r.Event,c,{type:a,isSimulated:!0});r.event.trigger(d,null,b)}}),r.fn.extend({trigger:function(a,b){return this.each(function(){r.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];if(c)return r.event.trigger(a,b,c,!0)}}),r.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(a,b){r.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),r.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),o.focusin="onfocusin"in a,o.focusin||r.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){r.event.simulate(b,a.target,r.event.fix(a))};r.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=V.access(d,b);e||d.addEventListener(a,c,!0),V.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=V.access(d,b)-1;e?V.access(d,b,e):(d.removeEventListener(a,c,!0),V.remove(d,b))}}});var qb=a.location,rb=r.now(),sb=/\?/;r.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return c&&!c.getElementsByTagName("parsererror").length||r.error("Invalid XML: "+b),c};var tb=/\[\]$/,ub=/\r?\n/g,vb=/^(?:submit|button|image|reset|file)$/i,wb=/^(?:input|select|textarea|keygen)/i;function xb(a,b,c,d){var e;if(r.isArray(b))r.each(b,function(b,e){c||tb.test(a)?d(a,e):xb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==r.type(b))d(a,b);else for(e in b)xb(a+"["+e+"]",b[e],c,d)}r.param=function(a,b){var c,d=[],e=function(a,b){var c=r.isFunction(b)?b():b;d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(null==c?"":c)};if(r.isArray(a)||a.jquery&&!r.isPlainObject(a))r.each(a,function(){e(this.name,this.value)});else for(c in a)xb(c,a[c],b,e);return d.join("&")},r.fn.extend({serialize:function(){return r.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=r.prop(this,"elements");return a?r.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!r(this).is(":disabled")&&wb.test(this.nodeName)&&!vb.test(a)&&(this.checked||!ia.test(a))}).map(function(a,b){var c=r(this).val();return null==c?null:r.isArray(c)?r.map(c,function(a){return{name:b.name,value:a.replace(ub,"\r\n")}}):{name:b.name,value:c.replace(ub,"\r\n")}}).get()}});var yb=/%20/g,zb=/#.*$/,Ab=/([?&])_=[^&]*/,Bb=/^(.*?):[ \t]*([^\r\n]*)$/gm,Cb=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Db=/^(?:GET|HEAD)$/,Eb=/^\/\//,Fb={},Gb={},Hb="*/".concat("*"),Ib=d.createElement("a");Ib.href=qb.href;function Jb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(K)||[];if(r.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function Kb(a,b,c,d){var e={},f=a===Gb;function g(h){var i;return e[h]=!0,r.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function Lb(a,b){var c,d,e=r.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&r.extend(!0,a,d),a}function Mb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}if(f)return f!==i[0]&&i.unshift(f),c[f]}function Nb(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}r.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:qb.href,type:"GET",isLocal:Cb.test(qb.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Hb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":r.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?Lb(Lb(a,r.ajaxSettings),b):Lb(r.ajaxSettings,a)},ajaxPrefilter:Jb(Fb),ajaxTransport:Jb(Gb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m,n,o=r.ajaxSetup({},c),p=o.context||o,q=o.context&&(p.nodeType||p.jquery)?r(p):r.event,s=r.Deferred(),t=r.Callbacks("once memory"),u=o.statusCode||{},v={},w={},x="canceled",y={readyState:0,getResponseHeader:function(a){var b;if(k){if(!h){h={};while(b=Bb.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return k?g:null},setRequestHeader:function(a,b){return null==k&&(a=w[a.toLowerCase()]=w[a.toLowerCase()]||a,v[a]=b),this},overrideMimeType:function(a){return null==k&&(o.mimeType=a),this},statusCode:function(a){var b;if(a)if(k)y.always(a[y.status]);else for(b in a)u[b]=[u[b],a[b]];return this},abort:function(a){var b=a||x;return e&&e.abort(b),A(0,b),this}};if(s.promise(y),o.url=((b||o.url||qb.href)+"").replace(Eb,qb.protocol+"//"),o.type=c.method||c.type||o.method||o.type,o.dataTypes=(o.dataType||"*").toLowerCase().match(K)||[""],null==o.crossDomain){j=d.createElement("a");try{j.href=o.url,j.href=j.href,o.crossDomain=Ib.protocol+"//"+Ib.host!=j.protocol+"//"+j.host}catch(z){o.crossDomain=!0}}if(o.data&&o.processData&&"string"!=typeof o.data&&(o.data=r.param(o.data,o.traditional)),Kb(Fb,o,c,y),k)return y;l=r.event&&o.global,l&&0===r.active++&&r.event.trigger("ajaxStart"),o.type=o.type.toUpperCase(),o.hasContent=!Db.test(o.type),f=o.url.replace(zb,""),o.hasContent?o.data&&o.processData&&0===(o.contentType||"").indexOf("application/x-www-form-urlencoded")&&(o.data=o.data.replace(yb,"+")):(n=o.url.slice(f.length),o.data&&(f+=(sb.test(f)?"&":"?")+o.data,delete o.data),o.cache===!1&&(f=f.replace(Ab,"$1"),n=(sb.test(f)?"&":"?")+"_="+rb++ +n),o.url=f+n),o.ifModified&&(r.lastModified[f]&&y.setRequestHeader("If-Modified-Since",r.lastModified[f]),r.etag[f]&&y.setRequestHeader("If-None-Match",r.etag[f])),(o.data&&o.hasContent&&o.contentType!==!1||c.contentType)&&y.setRequestHeader("Content-Type",o.contentType),y.setRequestHeader("Accept",o.dataTypes[0]&&o.accepts[o.dataTypes[0]]?o.accepts[o.dataTypes[0]]+("*"!==o.dataTypes[0]?", "+Hb+"; q=0.01":""):o.accepts["*"]);for(m in o.headers)y.setRequestHeader(m,o.headers[m]);if(o.beforeSend&&(o.beforeSend.call(p,y,o)===!1||k))return y.abort();if(x="abort",t.add(o.complete),y.done(o.success),y.fail(o.error),e=Kb(Gb,o,c,y)){if(y.readyState=1,l&&q.trigger("ajaxSend",[y,o]),k)return y;o.async&&o.timeout>0&&(i=a.setTimeout(function(){y.abort("timeout")},o.timeout));try{k=!1,e.send(v,A)}catch(z){if(k)throw z;A(-1,z)}}else A(-1,"No Transport");function A(b,c,d,h){var j,m,n,v,w,x=c;k||(k=!0,i&&a.clearTimeout(i),e=void 0,g=h||"",y.readyState=b>0?4:0,j=b>=200&&b<300||304===b,d&&(v=Mb(o,y,d)),v=Nb(o,v,y,j),j?(o.ifModified&&(w=y.getResponseHeader("Last-Modified"),w&&(r.lastModified[f]=w),w=y.getResponseHeader("etag"),w&&(r.etag[f]=w)),204===b||"HEAD"===o.type?x="nocontent":304===b?x="notmodified":(x=v.state,m=v.data,n=v.error,j=!n)):(n=x,!b&&x||(x="error",b<0&&(b=0))),y.status=b,y.statusText=(c||x)+"",j?s.resolveWith(p,[m,x,y]):s.rejectWith(p,[y,x,n]),y.statusCode(u),u=void 0,l&&q.trigger(j?"ajaxSuccess":"ajaxError",[y,o,j?m:n]),t.fireWith(p,[y,x]),l&&(q.trigger("ajaxComplete",[y,o]),--r.active||r.event.trigger("ajaxStop")))}return y},getJSON:function(a,b,c){return r.get(a,b,c,"json")},getScript:function(a,b){return r.get(a,void 0,b,"script")}}),r.each(["get","post"],function(a,b){r[b]=function(a,c,d,e){return r.isFunction(c)&&(e=e||d,d=c,c=void 0),r.ajax(r.extend({url:a,type:b,dataType:e,data:c,success:d},r.isPlainObject(a)&&a))}}),r._evalUrl=function(a){return r.ajax({url:a,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,"throws":!0})},r.fn.extend({wrapAll:function(a){var b;return this[0]&&(r.isFunction(a)&&(a=a.call(this[0])),b=r(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this},wrapInner:function(a){return r.isFunction(a)?this.each(function(b){r(this).wrapInner(a.call(this,b))}):this.each(function(){var b=r(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=r.isFunction(a);return this.each(function(c){r(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(a){return this.parent(a).not("body").each(function(){r(this).replaceWith(this.childNodes)}),this}}),r.expr.pseudos.hidden=function(a){return!r.expr.pseudos.visible(a)},r.expr.pseudos.visible=function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)},r.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Ob={0:200,1223:204},Pb=r.ajaxSettings.xhr();o.cors=!!Pb&&"withCredentials"in Pb,o.ajax=Pb=!!Pb,r.ajaxTransport(function(b){var c,d;if(o.cors||Pb&&!b.crossDomain)return{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Ob[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}}),r.ajaxPrefilter(function(a){a.crossDomain&&(a.contents.script=!1)}),r.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return r.globalEval(a),a}}}),r.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),r.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=r(" + + + + + + +
+
+
+

Bootstrap Migration

+
+
+
+
+
+

Hello, world!

+

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

+ Learn more » +
+
+
+ +
+
+

Thumbnails

+
+ +
+
+
+
+

Dropdown

+
+ + + + +
+
+
+
+

Badges

+
+ +
+
+ +
+
+

Tables

+
+
+ + + + + + + + + + + + + + + + + + + + + +
NamePremium Plan
JohnNo
JamieYes
JillYes
+
+
+ + + + + + + + + + + + + + + + + + + + + +
NamePremium Plan
JohnNo
JamieYes
JillYes
+
+
+ + + + + + + + + + + + + + + + + + + + + +
NamePremium Plan
JohnNo
JamieYes
JillYes
+
+
+ + + + + + + + + + + + + + + + + + + + + +
NamePremium Plan
JohnNo
JamieYes
JillYes
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeFilesLanguages
RubyJavaScriptPython
Alpha TeamProject 12 + +
Beta TeamProject 152 + +
Project 212 + +
Project 321 + +
+
+
+
+
+
+
+

Alerts

+
+
Well done! You successfully read this important alert message.
+
Heads up! This alert needs your attention, but it's not super important.
+
Warning! Best check yo self, you're not looking too good.
+
Oh snap! Change a few things up and try submitting again.
+
+
+ +
+
+

Panels

+
+
+
+
+
One
+
Two
+
Three
+
+
+
+
+
One
+
Two
+
Three
+
+
+
+
+
One
+
Two
+
Three
+
+
+
+
Error
+
Panel content
+
+
+
Info
+
Panel content
+
+
+
Success
+
Panel content
+
+
+

Header

+
Panel content
+
+
+

Header

+
Panel content
+
+
+

Header

+
Panel content
+
+
+
+
+
+
+

Wells

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+
+
+ + + + diff --git a/ui/app/bower_components/semantic-ui/examples/components/button.html b/ui/app/bower_components/semantic-ui/examples/components/button.html new file mode 100644 index 00000000..57e7e1cf --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/components/button.html @@ -0,0 +1,222 @@ + + + + + + + + Theming - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+ + + + +
+ +
+ + +
+ + + +
+ +
+
Horizontal
+ +
+
+
Vertical
+ +
+
+
Fade In
+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + +
+ +
+ +
+ +
+ +
+ +
+
One
+
Two
+
+
+ +
+
+
One
+
Two
+
+ +
+
+ + + + + + + +
+
+ + + + + + + + + +
+ + +
+ +
+ + + + +
+ +
+
+ + + \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/examples/components/card.html b/ui/app/bower_components/semantic-ui/examples/components/card.html new file mode 100644 index 00000000..f7ffa48f --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/components/card.html @@ -0,0 +1,313 @@ + + + + + + + + Theming - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
Add Friend
+
+
+
+ +
+
+
Title
+
+ Meta +
+
One or two sentence description that may go to several lines
+
+ +
+
+
+
+
+
+
Call to Action
+
+
+
+ +
+
+ Name +
+ Date +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+
+
+
+ +
+ +
+
+ +
+
+
+
+
+
+ + + + Favorite + +
+
+ +
+
+
+
+
+ + Abbreviated Header +
+
+ +
+
+
+
+ Action 1 +
+
+ Action 2 +
+
+
+ +
+
Cute Dog
+
+ Animals +
+
+ +
+
+
+
+ Username +
+
+
+
+
+
+ Action 1 +
+
+ Action 2 +
+
+
+ +
+
+
+ Action 3 +
+
+ Action 4 +
+
+
+
+ + +
+
+
+ Content 1 +
+
+ Content 2 +
+
+ Content 3 +
+
+ Extra Content +
+
+
+
+ Content 1 +
+
+ Content 2 +
+
+ Content 3 +
+
+ Extra Content +
+
+
+
+ Content 1 +
+
+ Content 2 +
+
+ Content 3 +
+
+ Extra Content +
+
+
+
+ Content 1 +
+
+ Content 2 +
+
+ Content 3 +
+
+ Extra Content +
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/examples/components/input.html b/ui/app/bower_components/semantic-ui/examples/components/input.html new file mode 100644 index 00000000..8e202837 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/components/input.html @@ -0,0 +1,159 @@ + + + + + + + + Theming - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + +
Search
+
+ +
+
+ +
+
+ +
+ + +
+
+ +
+ + +
+
+ + +
+
+
+ + +
+ +
+ + +
+ +
+
+ +
+ +
+ +
+
+
+ http:// +
+ + +
+
+ +
+ + Add +
+
+
+
+ +
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/examples/components/menu.html b/ui/app/bower_components/semantic-ui/examples/components/menu.html new file mode 100644 index 00000000..5c66e2ab --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/components/menu.html @@ -0,0 +1,183 @@ + + + + + + + + Theming - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/examples/components/site.html b/ui/app/bower_components/semantic-ui/examples/components/site.html new file mode 100644 index 00000000..88be119b --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/components/site.html @@ -0,0 +1,74 @@ + + + + + + + + + + Theming - Semantic + + + + + + + + + + +
+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

+
+
+

Example body text

+

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

+

This line of text is meant to be treated as fine print.

+

The following snippet of text is rendered as bold text.

+

The following snippet of text is rendered as italicized text.

+

An abbreviation of the word attribute is attr.

+
+
+
+
Red
+
Orange
+
Yellow
+
Olive
+
Green
+
Teal
+
Blue
+
Violet
+
Purple
+
Pink
+
Brown
+
Grey
+
Black
+
+
+
+ + + \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/examples/components/table.html b/ui/app/bower_components/semantic-ui/examples/components/table.html new file mode 100644 index 00000000..3564728e --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/components/table.html @@ -0,0 +1,471 @@ + + + + + + + + Theming - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Delmar3636g2g
Louise2424g29g
Terrell2211g9g
Marion735g3g
Clayton738g20g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Drema1526g8g
Nona1121g16g
Isidra3443g11g
Bart4140g30g
Nguyet4144g28g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Mirna128g29g
Fernando382g48g
Lisette189g23g
Ahmad4226g49g
Laquanda2727g49g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Drema1526g8g
Nona1121g16g
Isidra3443g11g
Bart4140g30g
Nguyet4144g28g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Tasia127g21g
Ronnie3837g38g
Gabriel3046g46g
Logan1221g39g
Clare3941g2g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Rosaline535g6g
Barrie2723g28g
Trinidad1450g7g
Jaqueline3130g50g
Tamala186g13g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Lianne2332g43g
Joette2113g31g
Le2839g23g
Sacha4643g13g
Bruna947g12g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaloriesFatProtein
Lianne2332g43g
Joette2113g31g
Le2839g23g
Sacha4643g13g
Bruna947g12g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Lianne2332g43g
Joette2113g31g
Le2839g23g
Sacha4643g13g
Bruna947g12g
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonCaloriesFatProtein
Lianne2332g43g
Joette2113g31g
Le2839g23g
Sacha4643g13g
Bruna947g12g
+
+ + + \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/examples/fixed.html b/ui/app/bower_components/semantic-ui/examples/fixed.html new file mode 100644 index 00000000..d285eaa1 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/fixed.html @@ -0,0 +1,137 @@ + + + + + + + + + + Fixed Menu Example - Semantic + + + + + + + + + + + + + + + + + + + + + + + +
+

Semantic UI Fixed Template

+

This is a basic fixed menu template using fixed size containers.

+

A text container is used for the main container, which is useful for single column layouts

+ + + + + + + +
+ + + + + diff --git a/ui/app/bower_components/semantic-ui/examples/grid.html b/ui/app/bower_components/semantic-ui/examples/grid.html new file mode 100644 index 00000000..fea3f9ee --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/grid.html @@ -0,0 +1,408 @@ + + + + + + + + + + Grid Example - Semantic + + + + + + + + + + + +
+

Using Grids

+ +

Container

+

A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid. +

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Text Container

+

Sometimes you just need to put a single column of centered text on a page. A text container is a special type of container optimized for a single flowing column of text, like this instructions on this page. +

+

Text containers do not need to use grids and help simplify basic page layouts.

+
+ +
+
+
+
+
+ + +
+ +

Grid Content

+ +

Column Flow

+

A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.

+ +
+
+
+
+
+
+
+
+
+
+ +

Clearing Rows

+

Adding row wrappers allow you to manually specify you want a new row to begin.

+ +
+
+
+
+
+
+
+
+ +

Specifying Row Width

+

Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.

+
+
column
+
column
+
column
+
column
+
column
+
column
+
+ +

Specifying Column Width

+

You can also specify column widths for each column individually

+
+
four wide column
+
eight wide column
+
four wide column
+
+ +

Special Variations

+

Some special variations that format grids like tables require you to specify rows. For example a divided grid or a celled grid requires row wrappers.

+ +
Celled Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
Internally Celled Grid
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
Divided Grid
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
Vertically Divided Grid
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

Adjusting Grids

+ + +

Centering Content

+

If a row does not take up all sixteen grid columns, you can use a ui centered grid, centered row, or centered column to center the column contents inside the grid. +

+
+
+
+
+
+
+
+ +

Floating Rows

+

Since Semantic UI's grid is based on flex box, a left floated item should come first, and a right floated item last in its row.

+ +
+
+
+ Left floated +
+
+
+
+ Right floated +
+
+
+ + +

Text Alignment

+

You can specify text alignment using alignment variations on a grid, row, or column level.

+ +
+
+ right aligned column +
+
+ left aligned column +
+
+
+ center aligned row +
+
+ center aligned row +
+
+
+ right aligned column +
+
+ +

Vertical Alignment

+

You can specify vertical alignment on a grid, row, or column level.

+
+
+
+ +
+
+ + +
+
+ +
+
+
+ +

Equal Width Columns

+

Specifying an equal width grid will automatically determine column sizes to fit evenly inside one row

+
+
+
column
+
column
+
column
+
column
+
+
+
column
+
column
+
column
+
+
+ + +

Responsive Patterns

+ +

Doubling

+

You can set columns to double in width at each device jump

+
+
column
+
column
+
column
+
column
+
column
+
+ +

Stackable

+

You can set columns to stack on mobile

+
+
column
+
column
+
column
+
+ +

Responsive Width Adjustments

+

You can specify columns to appear at different widths on different screens

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +

Specifying Device Visibility

+

You can specify columns to appear only a particular screen

+
+
+
ten wide column computer only
+
six wide column computer only
+
+
sixteen wide column mobile only
+
+
computer only row
+
computer only row
+
computer only row
+
+
+
mobile only column
+
mobile only column
+
+
+
column
+
column
+
+
+ +
+
+ + + + + + diff --git a/ui/app/bower_components/semantic-ui/examples/homepage.html b/ui/app/bower_components/semantic-ui/examples/homepage.html new file mode 100644 index 00000000..9f1b8a62 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/homepage.html @@ -0,0 +1,296 @@ + + + + + + + + + + Homepage - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +
+

+ Imagine-a-Company +

+

Do whatever you want when you want to.

+
Get Started
+
+ +
+ +
+
+
+
+

We Help Companies and Companions

+

We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.

+

We Make Bananas That Can Dance

+

Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.

+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+
+

"What a Company"

+

That is what they all say about us

+
+
+

"I shouldn't have gone with their competitor."

+

+ Nan Chief Fun Officer Acme Toys +

+
+
+
+
+ +
+
+

Breaking The Grid, Grabs Your Attention

+

Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.

+ Read More +

+ Case Studies +

+

Did We Tell You About Our Bananas?

+

Yes I know you probably disregarded the earlier boasts as non-sequitor filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.

+ I'm Still Quite Interested +
+
+ + + +
+ + + + diff --git a/ui/app/bower_components/semantic-ui/examples/login.html b/ui/app/bower_components/semantic-ui/examples/login.html new file mode 100644 index 00000000..4783340a --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/login.html @@ -0,0 +1,125 @@ + + + + + + + + + + Login Example - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ +
+ Log-in to your account +
+

+
+
+
+
+ + +
+
+
+
+ + +
+
+
Login
+
+ +
+ +
+ +
+ New to us? Sign Up +
+
+
+ + + + diff --git a/ui/app/bower_components/semantic-ui/examples/responsive.html b/ui/app/bower_components/semantic-ui/examples/responsive.html new file mode 100644 index 00000000..7e4a9eb0 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/responsive.html @@ -0,0 +1,689 @@ + + + + + + + + + + Responsive Elements - Semantic + + + + + + + + +

Responsive UI Examples

+ + +

Basic Responsive

+ + +

Container

+
+
+
Content
+
Content
+
Content
+
Content
+
+
+

Text Container

+
+
+
Content
+
Content
+
Content
+
Content
+
+
+ +

Stackable Grid

+
+
+
Content
+
+
+
Content
+
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
+
Content
+
+
+
Content
+
+
+ + +

Doubling Grid

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Doubling Stackable Grid

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Nested Stackable Grid

+
+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
+
+ + +

Stackable Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ + +

Doubling Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Doubling Stackable Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Device Adjustment

+ +

Device Column Width

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Device Visibility

+
+
+
Widescreen
+
+
+
Widescreen
+
+
+
Large Screen
+
+
+
Large Screen
+
+
+
Tablet and Mobile
+
+
+
Tablet and Mobile
+
+
+
Mobile
+
+
+
+
Computer and Up
+
+
+
Computer and Up
+
+
+
+
Tablet Only Content
+
+
+
Tablet Only Content
+
+
+
Tablet Only Content
+
+
+
Tablet Only Content
+
+
+ + +

Responsive Grid with Variations

+ +

Stackable Divided Grid

+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+ +

Stackable Vertically Divided Grid

+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+ +

Celled Stackable Grid

+
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
+

Consecutive Doubling Stackable Grid

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Grid Container

+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+
Content
+
+
+ +

Responsive Elements

+ + +

Responsive Vertical Divider

+ +
+
+
Content
+
+
+ Or +
+
+
Content
+
+
+ + +

Responsive Table

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
EmployeeCorrect Guesses
+

+ +
+ Lena +
Human Resources +
+
+

+ 22 +
+

+ +
+ Matthew +
Fabric Design +
+
+

+ 15 +
+

+ +
+ Lindsay +
Entertainment +
+
+

+ 12 +
+

+ +
+ Mark +
Executive +
+
+

+ 11 +
+
+ +

Responsive Menu

+ + + +

Responsive Item

+ +
+
+
+
+ +
+
+ Content Header +
+ Date + Category +
+
+ A description which may flow for several lines and give context to the content. +
+
+ Username +
+
+
+
+
+ +
+
+ Content Header +
+ Date + Category +
+
+ A description which may flow for several lines and give context to the content. +
+
+
+ Primary + +
+
Limited
+
+
+
+
+
+ +
+
+ Content Header +
+ Date + Category +
+
+ A description which may flow for several lines and give context to the content. +
+
+
+ Primary + +
+
+
+
+
+
+ +

Responsive Steps

+ +
+
+
+
+
Shipping
+
Choose your shipping options
+
+
+
+
+
Billing
+
Enter billing information
+
+
+
+
+
Confirm Order
+
Review your order details
+
+
+
+
+ + + + + + + + + diff --git a/ui/app/bower_components/semantic-ui/examples/sticky.html b/ui/app/bower_components/semantic-ui/examples/sticky.html new file mode 100644 index 00000000..ce4bf18f --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/sticky.html @@ -0,0 +1,230 @@ + + + + + + + + + + Sticky Example - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Sticky Example

+

This example shows how to use lazy loaded images, a sticky menu, and a simple text container

+
+ + + + +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+
+ +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. + + Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. + + Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+
+ + + + + diff --git a/ui/app/bower_components/semantic-ui/examples/theming.html b/ui/app/bower_components/semantic-ui/examples/theming.html new file mode 100644 index 00000000..e6c06899 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/examples/theming.html @@ -0,0 +1,88 @@ + + + + + + + + + + Theming - Semantic + + + + + + + + + +
+ +

Theming Examples

+ +

Site

+ + +

Menu

+ + +

Buttons

+ + +

Table

+ + +

Input

+ + + +

Card

+ + + + +
+ + + + + + diff --git a/ui/app/bower_components/semantic-ui/gulpfile.js b/ui/app/bower_components/semantic-ui/gulpfile.js new file mode 100644 index 00000000..e37e15f5 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/gulpfile.js @@ -0,0 +1,84 @@ +/******************************* + Set-up +*******************************/ + +var + gulp = require('gulp-help')(require('gulp')), + + // read user config to know what task to load + config = require('./tasks/config/user'), + + // watch for file changes and build + watch = require('./tasks/watch'), + + // build all files + build = require('./tasks/build'), + buildJS = require('./tasks/build/javascript'), + buildCSS = require('./tasks/build/css'), + buildAssets = require('./tasks/build/assets'), + + // utility tasks + clean = require('./tasks/clean'), + version = require('./tasks/version'), + + // install tasks + install = require('./tasks/install'), + checkInstall = require('./tasks/check-install'), + + // docs tasks + serveDocs = require('./tasks/docs/serve'), + buildDocs = require('./tasks/docs/build'), + + // rtl + buildRTL = require('./tasks/rtl/build'), + watchRTL = require('./tasks/rtl/watch') +; + + +/******************************* + Tasks +*******************************/ + +gulp.task('default', false, [ + 'check-install' +]); + +gulp.task('watch', 'Watch for site/theme changes', watch); + +gulp.task('build', 'Builds all files from source', build); +gulp.task('build-javascript', 'Builds all javascript from source', buildJS); +gulp.task('build-css', 'Builds all css from source', buildCSS); +gulp.task('build-assets', 'Copies all assets from source', buildAssets); + +gulp.task('clean', 'Clean dist folder', clean); +gulp.task('version', 'Displays current version of Semantic', version); + +gulp.task('install', 'Runs set-up', install); +gulp.task('check-install', 'Displays current version of Semantic', checkInstall); + +/*-------------- + Docs +---------------*/ + +/* + Lets you serve files to a local documentation instance + https://github.com/Semantic-Org/Semantic-UI-Docs/ +*/ + +gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs); +gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs); + + +/*-------------- + RTL +---------------*/ + +if(config.rtl) { + gulp.task('watch-rtl', 'Build all files as RTL', watchRTL); + gulp.task('build-rtl', 'Watch files as RTL ', buildRTL); +} + +/* Admin Tasks */ +if(config.admin) { + require('./tasks/collections/admin')(gulp); +} \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/karma.conf.js b/ui/app/bower_components/semantic-ui/karma.conf.js new file mode 100644 index 00000000..970b152c --- /dev/null +++ b/ui/app/bower_components/semantic-ui/karma.conf.js @@ -0,0 +1,85 @@ +// Karma configuration +module.exports = function(config) { + config.set({ + + // base path, that will be used to resolve files and exclude + basePath: '', + + // frameworks to use + frameworks: [ + 'jasmine' + ], + + // list of files / patterns to load in the browser + files: [ + // require jquery + 'server/files/javascript/library/jquery.js', + // read css from compiled css + 'docs/build/uncompressed/**/*.css', + // read js from src js + 'src/definitions/**/*.js', + // require helpers + 'test/helpers/*.js', + // require fixtures + { + pattern : 'test/fixtures/*.html', + included : false, + served : true + }, + // require spec + 'test/modules/module.spec.js', + // require tests + 'test/modules/*.js' + ], + + // list of files to exclude + exclude: [ + '**/*.swp', + 'karma.conf.js' + ], + + preprocessors: { + '**/*.html': [], + 'src/definitions/**/*.js': 'coverage' + }, + + // test results reporter to use + // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage' + reporters: ['spec', 'coverage'], + + coverageReporter: { + type: 'lcov' + }, + + // web server port + port: 9999, + + // enable / disable colors in the output (reporters and logs) + colors: true, + + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: true, + + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + browsers: ['PhantomJS'], + + + // If browser does not capture in given timeout [ms], kill it + captureTimeout: 60000, + + // Continuous Integration mode + // if true, it capture browsers, run tests and exit + singleRun: false + }); +}; diff --git a/ui/app/bower_components/semantic-ui/logo.png b/ui/app/bower_components/semantic-ui/logo.png new file mode 100644 index 00000000..9f1df7ba Binary files /dev/null and b/ui/app/bower_components/semantic-ui/logo.png differ diff --git a/ui/app/bower_components/semantic-ui/package.json b/ui/app/bower_components/semantic-ui/package.json new file mode 100644 index 00000000..0263cf39 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/package.json @@ -0,0 +1,97 @@ +{ + "name": "semantic-ui", + "version": "2.1.8", + "title": "Semantic UI", + "description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.", + "homepage": "http://www.semantic-ui.com", + "author": "Jack Lukic ", + "license": "MIT", + "repository": { + "type": "git", + "url": "git://github.com/Semantic-Org/Semantic-UI.git" + }, + "bugs": { + "url": "https://github.com/Semantic-Org/Semantic-UI/issues" + }, + "scripts": { + "install": "gulp install" + }, + "peerDependencies": { + "better-console": "*", + "del": "*", + "extend": "*", + "gulp": "*", + "gulp-autoprefixer": "*", + "gulp-chmod": "*", + "gulp-clone": "*", + "gulp-concat": "*", + "gulp-concat-css": "*", + "gulp-copy": "*", + "gulp-dedupe": "*", + "gulp-flatten": "*", + "gulp-header": "*", + "gulp-help": "*", + "gulp-if": "*", + "gulp-less": "*", + "gulp-minify-css": "*", + "gulp-notify": "*", + "gulp-plumber": "*", + "gulp-print": "*", + "gulp-rename": "*", + "gulp-replace": "*", + "gulp-rtlcss": "*", + "gulp-uglify": "*", + "gulp-util": "*", + "gulp-watch": "*", + "map-stream": "*", + "require-dot-file": "*", + "run-sequence": "*", + "yamljs": "*" + }, + "dependencies": { + "better-console": "*", + "del": "^2.0.2", + "extend": "^3.0.0", + "gulp": "^3.9.0", + "gulp-autoprefixer": "^3.1.0", + "gulp-chmod": "^1.2.0", + "gulp-clone": "^1.0.0", + "gulp-concat": "^2.6.0", + "gulp-concat-css": "^2.2.0", + "gulp-copy": "0.0.2", + "gulp-dedupe": "0.0.2", + "gulp-flatten": "^0.2.0", + "gulp-header": "^1.2.2", + "gulp-help": "^1.6.0", + "gulp-if": "^2.0.0", + "gulp-json-editor": "^2.2.1", + "gulp-less": "^3.0.3", + "gulp-minify-css": "^1.2.0", + "gulp-notify": "^2.2.0", + "gulp-plumber": "^1.0.1", + "gulp-print": "^2.0.1", + "gulp-prompt": "^0.1.2", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.5.3", + "gulp-rtlcss": "^0.1.4", + "gulp-uglify": "^1.2.0", + "gulp-util": "^3.0.6", + "gulp-watch": "^4.3.1", + "jquery": "^2.1.4", + "map-stream": "^0.1.0", + "merge-stream": "^1.0.0", + "mkdirp": "^0.5.1", + "require-dot-file": "^0.4.0", + "run-sequence": "^1.1.0", + "wrench": "https://github.com/derekslife/wrench-js/tarball/156eaceed68ed31ffe2a3ecfbcb2be6ed1417fb2", + "yamljs": "^0.2.3" + }, + "devDependencies": { + "github": "*", + "gulp-concat-filenames": "*", + "gulp-debug": "*", + "gulp-git": "*", + "gulp-tap": "*", + "merge-stream": "*" + } +} diff --git a/ui/app/bower_components/semantic-ui/semantic.json b/ui/app/bower_components/semantic-ui/semantic.json new file mode 100644 index 00000000..e494cde0 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/semantic.json @@ -0,0 +1,21 @@ +{ + "base": "", + "paths": { + "source": { + "config": "src/theme.config", + "definitions": "src/definitions/", + "site": "src/site/", + "themes": "src/themes/" + }, + "output": { + "packaged": "dist/", + "uncompressed": "dist/components/", + "compressed": "dist/components/", + "themes": "dist/themes/" + }, + "clean": "dist/" + }, + "permission": false, + "rtl": false, + "version": "2.1.8" +} \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/README.md b/ui/app/bower_components/semantic-ui/src/README.md new file mode 100644 index 00000000..b725d670 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/README.md @@ -0,0 +1,127 @@ +## Setup + +### Built-In Tools + +From the Semantic directory you can setup gulp to build Semantic by running. +```bash +npm install +``` + +Semantic will automatically configure itself using a `post-install` script built into the package. + +After set-up can use gulp to build your project's css: +```bash +/* Watch files */ +gulp watch + +/* Build all files */ +gulp build +``` + +Visit the [Getting Started Guide](http://learnsemantic.com/guide/expert.html) for more details on set-up + +### Custom Pipelines + +#### Importing Gulp Tasks + +Each gulp task can be imported into your own Gulpfile using `require` + +```javascript +var + watch = require('path/to/semantic/tasks/watch') +; +gulp.task('watch ui', 'Watch Semantic UI', watch)); +``` + +#### Importing LESS + +> LESS files do not contain vendor prefixes. If you are to use these files directly you must add them during your build step. + +Before using source files you will need to create a `theme.config` by renaming `theme.config.example`, and a site folder by renaming `_site/` to `site/` + +You can then import Semantic from your own LESS files: +```less +/* Import all components */ +@import 'src/semantic'; +``` + +To import individual components you will have to create a scope for each import using `& {}` +```less +/* Import a specific component */ +& { @import 'src/definitions/elements/button'; } +``` + +### Config Files + +These files are generated automatically using install scripts, but must be manually renamed if you are using installing manually. + +filename | usage | Initial Name +--- | --- | --- +**theme.config** | config file that stores each element's current theme for LESS | theme.config.example +**site/** | folder storing all your site's variables and css overrides for each UI component | _site/ +**semantic.json** | stores folder paths for build tools and current installed version for updates. Only necessary when using build tools | semantic.json.example + + +### Workflow + +You will only need to use Semantic's build tools while refining your UI. When designing pages, you can rely on the compiled css packages in `dist/`. + +When creating your UI you can try downloading different themes, adjusting your site-wide settings (font-family, colors, etc) and tweaking components in your site's component overrides. + +Files in the `examples/` folder of your project can be useful for testing out changes in your UI. For example, you might run `gulp watch` download a new theme to `src/site/themes/` then adjust your `theme.config` file with the name of the new theme and refresh `examples/kitchensink.html` to inspect changes in the theme. + +## Theming + +### Concepts + +#### Inheritance + +There are three levels of inheritance in Semantic +* Default theme - Semantic UI's neutral default theme +* Packaged theme - A specified packaged theme, like "amazon", or "material" +* Site theme - A theme specific to your site + +#### Folder Structure + +* `definitions/` contains the `css` and `javascript` definitions for each component +* `themes/` contains *pre-packaged themes* including Semantic's default theme +* `site/` contains your current site's theme + +View the [Theming Guide](http://learnsemantic.com/themes/overview.html) for a more in-depth look + +## Customizing + +#### Basic Customization + +The best way to start customizing is to specify overriding variables in your site's `site.variables` file. + +This is a blank stub file that lets you specify variables that overriding variables. + +Some important values to customize: +* Base font size +* Named color hex codes +* Header/Page Font-families +* Primary and secondary colors +* Grid column count + +To find out what variables are available to modify, you can inspect the variables in the default theme in `themes/default/` + +#### Advanced Configuration + +Each component has its own variable file, which can be used to modify any of the underlying variables for that component. + +For example `/site/elements/button.variables`. + +You may also specify your own custom LESS in `site/elements/button.overrides`. This file will have access to all underlying variables available for that component. + +#### Using Pre-Packaged Themes + +You can modify `theme.config` to use any prepackaged theme available in `src/themes/`. + +For example you can modify `theme.config` to use a `github` button theme by changing +```less +@button: 'github'; +``` + +View the [Customization Guide](http://learnsemantic.com/developing/customizing.html) to learn more + diff --git a/ui/app/bower_components/semantic-ui/src/definitions/behaviors/api.js b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/api.js new file mode 100644 index 00000000..3aa484b7 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/api.js @@ -0,0 +1,1142 @@ +/*! + * # Semantic UI - API + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.api = $.fn.api = function(parameters) { + + var + // use window context if none specified + $allModules = $.isFunction(this) + ? $(window) + : $(this), + moduleSelector = $allModules.selector || '', + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.api.settings, parameters) + : $.extend({}, $.fn.api.settings), + + // internal aliases + namespace = settings.namespace, + metadata = settings.metadata, + selector = settings.selector, + error = settings.error, + className = settings.className, + + // define namespaces for modules + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + // element that creates request + $module = $(this), + $form = $module.closest(selector.form), + + // context used for state + $context = (settings.stateContext) + ? $(settings.stateContext) + : $module, + + // request details + ajaxSettings, + requestSettings, + url, + data, + requestStartTime, + + // standard module + element = this, + context = $context[0], + instance = $module.data(moduleNamespace), + module + ; + + module = { + + initialize: function() { + if(!methodInvoked) { + module.bind.events(); + } + 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) + ; + }, + + bind: { + events: function() { + var + triggerEvent = module.get.event() + ; + if( triggerEvent ) { + module.verbose('Attaching API events to element', triggerEvent); + $module + .on(triggerEvent + eventNamespace, module.event.trigger) + ; + } + else if(settings.on == 'now') { + module.debug('Querying API endpoint immediately'); + module.query(); + } + } + }, + + decode: { + json: function(response) { + if(response !== undefined && typeof response == 'string') { + try { + response = JSON.parse(response); + } + catch(e) { + // isnt json string + } + } + return response; + } + }, + + read: { + cachedResponse: function(url) { + var + response + ; + if(window.Storage === undefined) { + module.error(error.noStorage); + return; + } + response = sessionStorage.getItem(url); + module.debug('Using cached response', url, response); + response = module.decode.json(response); + return false; + } + }, + write: { + cachedResponse: function(url, response) { + if(response && response === '') { + module.debug('Response empty, not caching', response); + return; + } + if(window.Storage === undefined) { + module.error(error.noStorage); + return; + } + if( $.isPlainObject(response) ) { + response = JSON.stringify(response); + } + sessionStorage.setItem(url, response); + module.verbose('Storing cached response for url', url, response); + } + }, + + query: function() { + + if(module.is.disabled()) { + module.debug('Element is disabled API request aborted'); + return; + } + + if(module.is.loading()) { + if(settings.interruptRequests) { + module.debug('Interrupting previous request'); + module.abort(); + } + else { + module.debug('Cancelling request, previous request is still pending'); + return; + } + } + + // pass element metadata to url (value, text) + if(settings.defaultData) { + $.extend(true, settings.urlData, module.get.defaultData()); + } + + // Add form content + if(settings.serializeForm) { + settings.data = module.add.formData(settings.data); + } + + // call beforesend and get any settings changes + requestSettings = module.get.settings(); + + // check if before send cancelled request + if(requestSettings === false) { + module.cancelled = true; + module.error(error.beforeSend); + return; + } + else { + module.cancelled = false; + } + + // get url + url = module.get.templatedURL(); + + if(!url && !module.is.mocked()) { + module.error(error.missingURL); + return; + } + + // replace variables + url = module.add.urlData( url ); + // missing url parameters + if( !url && !module.is.mocked()) { + return; + } + + requestSettings.url = settings.base + url; + + // look for jQuery ajax parameters in settings + ajaxSettings = $.extend(true, {}, settings, { + type : settings.method || settings.type, + data : data, + url : settings.base + url, + beforeSend : settings.beforeXHR, + success : function() {}, + failure : function() {}, + complete : function() {} + }); + + module.debug('Querying URL', ajaxSettings.url); + module.verbose('Using AJAX settings', ajaxSettings); + + if(settings.cache === 'local' && module.read.cachedResponse(url)) { + module.debug('Response returned from local cache'); + module.request = module.create.request(); + module.request.resolveWith(context, [ module.read.cachedResponse(url) ]); + return; + } + + if( !settings.throttle ) { + module.debug('Sending request', data, ajaxSettings.method); + module.send.request(); + } + else { + if(!settings.throttleFirstRequest && !module.timer) { + module.debug('Sending request', data, ajaxSettings.method); + module.send.request(); + module.timer = setTimeout(function(){}, settings.throttle); + } + else { + module.debug('Throttling request', settings.throttle); + clearTimeout(module.timer); + module.timer = setTimeout(function() { + if(module.timer) { + delete module.timer; + } + module.debug('Sending throttled request', data, ajaxSettings.method); + module.send.request(); + }, settings.throttle); + } + } + + }, + + should: { + removeError: function() { + return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) ); + } + }, + + is: { + disabled: function() { + return ($module.filter(selector.disabled).length > 0); + }, + form: function() { + return $module.is('form') || $context.is('form'); + }, + mocked: function() { + return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync); + }, + input: function() { + return $module.is('input'); + }, + loading: function() { + return (module.request && module.request.state() == 'pending'); + }, + abortedRequest: function(xhr) { + if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) { + module.verbose('XHR request determined to be aborted'); + return true; + } + else { + module.verbose('XHR request was not aborted'); + return false; + } + }, + validResponse: function(response) { + if( (settings.dataType !== 'json' && settings.dataType !== 'jsonp') || !$.isFunction(settings.successTest) ) { + module.verbose('Response is not JSON, skipping validation', settings.successTest, response); + return true; + } + module.debug('Checking JSON returned success', settings.successTest, response); + if( settings.successTest(response) ) { + module.debug('Response passed success test', response); + return true; + } + else { + module.debug('Response failed success test', response); + return false; + } + } + }, + + was: { + cancelled: function() { + return (module.cancelled || false); + }, + succesful: function() { + return (module.request && module.request.state() == 'resolved'); + }, + failure: function() { + return (module.request && module.request.state() == 'rejected'); + }, + complete: function() { + return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') ); + } + }, + + add: { + urlData: function(url, urlData) { + var + requiredVariables, + optionalVariables + ; + if(url) { + requiredVariables = url.match(settings.regExp.required); + optionalVariables = url.match(settings.regExp.optional); + urlData = urlData || settings.urlData; + if(requiredVariables) { + module.debug('Looking for required URL variables', requiredVariables); + $.each(requiredVariables, function(index, templatedString) { + var + // allow legacy {$var} style + variable = (templatedString.indexOf('$') !== -1) + ? templatedString.substr(2, templatedString.length - 3) + : templatedString.substr(1, templatedString.length - 2), + value = ($.isPlainObject(urlData) && urlData[variable] !== undefined) + ? urlData[variable] + : ($module.data(variable) !== undefined) + ? $module.data(variable) + : ($context.data(variable) !== undefined) + ? $context.data(variable) + : urlData[variable] + ; + // remove value + if(value === undefined) { + module.error(error.requiredParameter, variable, url); + url = false; + return false; + } + else { + module.verbose('Found required variable', variable, value); + value = (settings.encodeParameters) + ? module.get.urlEncodedValue(value) + : value + ; + url = url.replace(templatedString, value); + } + }); + } + if(optionalVariables) { + module.debug('Looking for optional URL variables', requiredVariables); + $.each(optionalVariables, function(index, templatedString) { + var + // allow legacy {/$var} style + variable = (templatedString.indexOf('$') !== -1) + ? templatedString.substr(3, templatedString.length - 4) + : templatedString.substr(2, templatedString.length - 3), + value = ($.isPlainObject(urlData) && urlData[variable] !== undefined) + ? urlData[variable] + : ($module.data(variable) !== undefined) + ? $module.data(variable) + : ($context.data(variable) !== undefined) + ? $context.data(variable) + : urlData[variable] + ; + // optional replacement + if(value !== undefined) { + module.verbose('Optional variable Found', variable, value); + url = url.replace(templatedString, value); + } + else { + module.verbose('Optional variable not found', variable); + // remove preceding slash if set + if(url.indexOf('/' + templatedString) !== -1) { + url = url.replace('/' + templatedString, ''); + } + else { + url = url.replace(templatedString, ''); + } + } + }); + } + } + return url; + }, + formData: function(data) { + var + canSerialize = ($.fn.serializeObject !== undefined), + formData = (canSerialize) + ? $form.serializeObject() + : $form.serialize(), + hasOtherData + ; + data = data || settings.data; + hasOtherData = $.isPlainObject(data); + + if(hasOtherData) { + if(canSerialize) { + module.debug('Extending existing data with form data', data, formData); + data = $.extend(true, {}, data, formData); + } + else { + module.error(error.missingSerialize); + module.debug('Cant extend data. Replacing data with form data', data, formData); + data = formData; + } + } + else { + module.debug('Adding form data', formData); + data = formData; + } + return data; + } + }, + + send: { + request: function() { + module.set.loading(); + module.request = module.create.request(); + if( module.is.mocked() ) { + module.mockedXHR = module.create.mockedXHR(); + } + else { + module.xhr = module.create.xhr(); + } + settings.onRequest.call(context, module.request, module.xhr); + } + }, + + event: { + trigger: function(event) { + module.query(); + if(event.type == 'submit' || event.type == 'click') { + event.preventDefault(); + } + }, + xhr: { + always: function() { + // nothing special + }, + done: function(response, textStatus, xhr) { + var + context = this, + elapsedTime = (new Date().getTime() - requestStartTime), + timeLeft = (settings.loadingDuration - elapsedTime), + translatedResponse = ( $.isFunction(settings.onResponse) ) + ? settings.onResponse.call(context, $.extend(true, {}, response)) + : false + ; + timeLeft = (timeLeft > 0) + ? timeLeft + : 0 + ; + if(translatedResponse) { + module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response); + response = translatedResponse; + } + if(timeLeft > 0) { + module.debug('Response completed early delaying state change by', timeLeft); + } + setTimeout(function() { + if( module.is.validResponse(response) ) { + module.request.resolveWith(context, [response, xhr]); + } + else { + module.request.rejectWith(context, [xhr, 'invalid']); + } + }, timeLeft); + }, + fail: function(xhr, status, httpMessage) { + var + context = this, + elapsedTime = (new Date().getTime() - requestStartTime), + timeLeft = (settings.loadingDuration - elapsedTime) + ; + timeLeft = (timeLeft > 0) + ? timeLeft + : 0 + ; + if(timeLeft > 0) { + module.debug('Response completed early delaying state change by', timeLeft); + } + setTimeout(function() { + if( module.is.abortedRequest(xhr) ) { + module.request.rejectWith(context, [xhr, 'aborted', httpMessage]); + } + else { + module.request.rejectWith(context, [xhr, 'error', status, httpMessage]); + } + }, timeLeft); + } + }, + request: { + done: function(response, xhr) { + module.debug('Successful API Response', response); + if(settings.cache === 'local' && url) { + module.write.cachedResponse(url, response); + module.debug('Saving server response locally', module.cache); + } + settings.onSuccess.call(context, response, $module, xhr); + }, + complete: function(firstParameter, secondParameter) { + var + xhr, + response + ; + // have to guess callback parameters based on request success + if( module.was.succesful() ) { + response = firstParameter; + xhr = secondParameter; + } + else { + xhr = firstParameter; + response = module.get.responseFromXHR(xhr); + } + module.remove.loading(); + settings.onComplete.call(context, response, $module, xhr); + }, + fail: function(xhr, status, httpMessage) { + var + // pull response from xhr if available + response = module.get.responseFromXHR(xhr), + errorMessage = module.get.errorFromRequest(response, status, httpMessage) + ; + if(status == 'aborted') { + module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage); + settings.onAbort.call(context, status, $module, xhr); + } + else if(status == 'invalid') { + module.debug('JSON did not pass success test. A server-side error has most likely occurred', response); + } + else if(status == 'error') { + if(xhr !== undefined) { + module.debug('XHR produced a server error', status, httpMessage); + // make sure we have an error to display to console + if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') { + module.error(error.statusMessage + httpMessage, ajaxSettings.url); + } + settings.onError.call(context, errorMessage, $module, xhr); + } + } + + if(settings.errorDuration && status !== 'aborted') { + module.debug('Adding error state'); + module.set.error(); + if( module.should.removeError() ) { + setTimeout(module.remove.error, settings.errorDuration); + } + } + module.debug('API Request failed', errorMessage, xhr); + settings.onFailure.call(context, response, $module, xhr); + } + } + }, + + create: { + + request: function() { + // api request promise + return $.Deferred() + .always(module.event.request.complete) + .done(module.event.request.done) + .fail(module.event.request.fail) + ; + }, + + mockedXHR: function () { + var + // xhr does not simulate these properties of xhr but must return them + textStatus = false, + status = false, + httpMessage = false, + responder = settings.mockResponse || settings.response, + asyncResponder = settings.mockResponseAsync || settings.responseAsync, + asyncCallback, + response, + mockedXHR + ; + + mockedXHR = $.Deferred() + .always(module.event.xhr.complete) + .done(module.event.xhr.done) + .fail(module.event.xhr.fail) + ; + + if(responder) { + if( $.isFunction(responder) ) { + module.debug('Using specified synchronous callback', responder); + response = responder.call(context, requestSettings); + } + else { + module.debug('Using settings specified response', responder); + response = responder; + } + // simulating response + mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]); + } + else if( $.isFunction(asyncResponder) ) { + asyncCallback = function(response) { + module.debug('Async callback returned response', response); + + if(response) { + mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]); + } + else { + mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]); + } + }; + module.debug('Using specified async response callback', asyncResponder); + asyncResponder.call(context, requestSettings, asyncCallback); + } + return mockedXHR; + }, + + xhr: function() { + var + xhr + ; + // ajax request promise + xhr = $.ajax(ajaxSettings) + .always(module.event.xhr.always) + .done(module.event.xhr.done) + .fail(module.event.xhr.fail) + ; + module.verbose('Created server request', xhr); + return xhr; + } + }, + + set: { + error: function() { + module.verbose('Adding error state to element', $context); + $context.addClass(className.error); + }, + loading: function() { + module.verbose('Adding loading state to element', $context); + $context.addClass(className.loading); + requestStartTime = new Date().getTime(); + } + }, + + remove: { + error: function() { + module.verbose('Removing error state from element', $context); + $context.removeClass(className.error); + }, + loading: function() { + module.verbose('Removing loading state from element', $context); + $context.removeClass(className.loading); + } + }, + + get: { + responseFromXHR: function(xhr) { + return $.isPlainObject(xhr) + ? (settings.dataType == 'json' || settings.dataType == 'jsonp') + ? module.decode.json(xhr.responseText) + : xhr.responseText + : false + ; + }, + errorFromRequest: function(response, status, httpMessage) { + return ($.isPlainObject(response) && response.error !== undefined) + ? response.error // use json error message + : (settings.error[status] !== undefined) // use server error message + ? settings.error[status] + : httpMessage + ; + }, + request: function() { + return module.request || false; + }, + xhr: function() { + return module.xhr || false; + }, + settings: function() { + var + runSettings + ; + runSettings = settings.beforeSend.call(context, settings); + if(runSettings) { + if(runSettings.success !== undefined) { + module.debug('Legacy success callback detected', runSettings); + module.error(error.legacyParameters, runSettings.success); + runSettings.onSuccess = runSettings.success; + } + if(runSettings.failure !== undefined) { + module.debug('Legacy failure callback detected', runSettings); + module.error(error.legacyParameters, runSettings.failure); + runSettings.onFailure = runSettings.failure; + } + if(runSettings.complete !== undefined) { + module.debug('Legacy complete callback detected', runSettings); + module.error(error.legacyParameters, runSettings.complete); + runSettings.onComplete = runSettings.complete; + } + } + if(runSettings === undefined) { + module.error(error.noReturnedValue); + } + return (runSettings !== undefined) + ? $.extend(true, {}, runSettings) + : $.extend(true, {}, settings) + ; + }, + urlEncodedValue: function(value) { + var + decodedValue = window.decodeURIComponent(value), + encodedValue = window.encodeURIComponent(value), + alreadyEncoded = (decodedValue !== value) + ; + if(alreadyEncoded) { + module.debug('URL value is already encoded, avoiding double encoding', value); + return value; + } + module.verbose('Encoding value using encodeURIComponent', value, encodedValue); + return encodedValue; + }, + defaultData: function() { + var + data = {} + ; + if( !$.isWindow(element) ) { + if( module.is.input() ) { + data.value = $module.val(); + } + else if( !module.is.form() ) { + + } + else { + data.text = $module.text(); + } + } + return data; + }, + event: function() { + if( $.isWindow(element) || settings.on == 'now' ) { + module.debug('API called without element, no events attached'); + return false; + } + else if(settings.on == 'auto') { + if( $module.is('input') ) { + return (element.oninput !== undefined) + ? 'input' + : (element.onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + } + else if( $module.is('form') ) { + return 'submit'; + } + else { + return 'click'; + } + } + else { + return settings.on; + } + }, + templatedURL: function(action) { + action = action || $module.data(metadata.action) || settings.action || false; + url = $module.data(metadata.url) || settings.url || false; + if(url) { + module.debug('Using specified url', url); + return url; + } + if(action) { + module.debug('Looking up url for action', action, settings.api); + if(settings.api[action] === undefined && !module.is.mocked()) { + module.error(error.missingAction, settings.action, settings.api); + return; + } + url = settings.api[action]; + } + else if( module.is.form() ) { + url = $module.attr('action') || $context.attr('action') || false; + module.debug('No url or action specified, defaulting to form action', url); + } + return url; + } + }, + + abort: function() { + var + xhr = module.get.xhr() + ; + if( xhr && xhr.state() !== 'resolved') { + module.debug('Cancelling API request'); + xhr.abort(); + } + }, + + // reset state + reset: function() { + module.remove.error(); + module.remove.loading(); + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + //'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.api.settings = { + + name : 'API', + namespace : 'api', + + debug : false, + verbose : false, + performance : true, + + // object containing all templates endpoints + api : {}, + + // whether to cache responses + cache : true, + + // whether new requests should abort previous requests + interruptRequests : true, + + // event binding + on : 'auto', + + // context for applying state classes + stateContext : false, + + // duration for loading state + loadingDuration : 0, + + // whether to hide errors after a period of time + hideError : 'auto', + + // duration for error state + errorDuration : 2000, + + // whether parameters should be encoded with encodeURIComponent + encodeParameters : true, + + // API action to use + action : false, + + // templated URL to use + url : false, + + // base URL to apply to all endpoints + base : '', + + // data that will + urlData : {}, + + // whether to add default data to url data + defaultData : true, + + // whether to serialize closest form + serializeForm : false, + + // how long to wait before request should occur + throttle : 0, + + // whether to throttle first request or only repeated + throttleFirstRequest : true, + + // standard ajax settings + method : 'get', + data : {}, + dataType : 'json', + + // mock response + mockResponse : false, + mockResponseAsync : false, + + // aliases for mock + response : false, + responseAsync : false, + + // callbacks before request + beforeSend : function(settings) { return settings; }, + beforeXHR : function(xhr) {}, + onRequest : function(promise, xhr) {}, + + // after request + onResponse : false, // function(response) { }, + + // response was successful, if JSON passed validation + onSuccess : function(response, $module) {}, + + // request finished without aborting + onComplete : function(response, $module) {}, + + // failed JSON success test + onFailure : function(response, $module) {}, + + // server error + onError : function(errorMessage, $module) {}, + + // request aborted + onAbort : function(errorMessage, $module) {}, + + successTest : false, + + // errors + error : { + beforeSend : 'The before send function has aborted the request', + error : 'There was an error with your request', + exitConditions : 'API Request Aborted. Exit conditions met', + JSONParse : 'JSON could not be parsed during error handling', + legacyParameters : 'You are using legacy API success callback names', + method : 'The method you called is not defined', + missingAction : 'API action used but no url was defined', + missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object', + missingURL : 'No URL specified for api event', + noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.', + noStorage : 'Caching responses locally requires session storage', + parseError : 'There was an error parsing your request', + requiredParameter : 'Missing a required URL parameter: ', + statusMessage : 'Server gave an error: ', + timeout : 'Your request timed out' + }, + + regExp : { + required : /\{\$*[A-z0-9]+\}/g, + optional : /\{\/\$*[A-z0-9]+\}/g, + }, + + className: { + loading : 'loading', + error : 'error' + }, + + selector: { + disabled : '.disabled', + form : 'form' + }, + + metadata: { + action : 'action', + url : 'url' + } +}; + + + +})( jQuery, window, document ); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/behaviors/colorize.js b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/colorize.js new file mode 100644 index 00000000..b32d98dc --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/colorize.js @@ -0,0 +1,274 @@ +/*! + * # Semantic UI - Colorize + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + + "use strict"; + + $.fn.colorize = function(parameters) { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.colorize.settings, parameters) + : $.extend({}, $.fn.colorize.settings), + // hoist arguments + moduleArguments = arguments || false + ; + $(this) + .each(function(instanceIndex) { + + var + $module = $(this), + + mainCanvas = $('')[0], + imageCanvas = $('')[0], + overlayCanvas = $('')[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.name + ': ' + message, variableName); + } + else { + console.info(settings.name + ': ' + message); + } + } + }, + error: function(errorMessage) { + console.warn(settings.name + ': ' + 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 ); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/behaviors/form.js b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/form.js new file mode 100644 index 00000000..7d1dca78 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/form.js @@ -0,0 +1,1517 @@ +/*! + * # Semantic UI - Form Validation + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.form = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + legacyParameters = arguments[1], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + $module = $(this), + element = this, + + formErrors = [], + keyHeldDown = false, + + // set at run-time + $field, + $group, + $message, + $prompt, + $submit, + $clear, + $reset, + + settings, + validation, + + metadata, + selector, + className, + error, + + namespace, + moduleNamespace, + eventNamespace, + + instance, + module + ; + + module = { + + initialize: function() { + + // settings grabbed at run time + module.get.settings(); + if(methodInvoked) { + if(instance === undefined) { + module.instantiate(); + } + module.invoke(query); + } + else { + module.verbose('Initializing form validation', $module, settings); + module.bindEvents(); + module.set.defaults(); + 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.removeEvents(); + $module + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache'); + $field = $module.find(selector.field); + $group = $module.find(selector.group); + $message = $module.find(selector.message); + $prompt = $module.find(selector.prompt); + + $submit = $module.find(selector.submit); + $clear = $module.find(selector.clear); + $reset = $module.find(selector.reset); + }, + + submit: function() { + module.verbose('Submitting form', $module); + $module + .submit() + ; + }, + + attachEvents: function(selector, action) { + action = action || 'submit'; + $(selector) + .on('click' + eventNamespace, function(event) { + module[action](); + event.preventDefault(); + }) + ; + }, + + bindEvents: function() { + module.verbose('Attaching form events'); + $module + .on('submit' + eventNamespace, module.validate.form) + .on('blur' + eventNamespace, selector.field, module.event.field.blur) + .on('click' + eventNamespace, selector.submit, module.submit) + .on('click' + eventNamespace, selector.reset, module.reset) + .on('click' + eventNamespace, selector.clear, module.clear) + ; + if(settings.keyboardShortcuts) { + $module + .on('keydown' + eventNamespace, selector.field, module.event.field.keydown) + ; + } + $field + .each(function() { + var + $input = $(this), + type = $input.prop('type'), + inputEvent = module.get.changeEvent(type, $input) + ; + $(this) + .on(inputEvent + eventNamespace, module.event.field.change) + ; + }) + ; + }, + + clear: function() { + $field + .each(function () { + var + $field = $(this), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + defaultValue = $field.data(metadata.defaultValue) || '', + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isErrored = $fieldGroup.hasClass(className.error) + ; + if(isErrored) { + module.verbose('Resetting error on field', $fieldGroup); + $fieldGroup.removeClass(className.error); + $prompt.remove(); + } + if(isDropdown) { + module.verbose('Resetting dropdown value', $element, defaultValue); + $element.dropdown('clear'); + } + else if(isCheckbox) { + $field.prop('checked', false); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(''); + } + }) + ; + }, + + reset: function() { + $field + .each(function () { + var + $field = $(this), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + defaultValue = $field.data(metadata.defaultValue), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isErrored = $fieldGroup.hasClass(className.error) + ; + if(defaultValue === undefined) { + return; + } + if(isErrored) { + module.verbose('Resetting error on field', $fieldGroup); + $fieldGroup.removeClass(className.error); + $prompt.remove(); + } + if(isDropdown) { + module.verbose('Resetting dropdown value', $element, defaultValue); + $element.dropdown('restore defaults'); + } + else if(isCheckbox) { + module.verbose('Resetting checkbox value', $element, defaultValue); + $field.prop('checked', defaultValue); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(defaultValue); + } + }) + ; + }, + + is: { + bracketedRule: function(rule) { + return (rule.type && rule.type.match(settings.regExp.bracket)); + }, + valid: function() { + var + allValid = true + ; + module.verbose('Checking if form is valid'); + $.each(validation, function(fieldName, field) { + if( !( module.validate.field(field, fieldName) ) ) { + allValid = false; + } + }); + return allValid; + } + }, + + removeEvents: function() { + $module + .off(eventNamespace) + ; + $field + .off(eventNamespace) + ; + $submit + .off(eventNamespace) + ; + $field + .off(eventNamespace) + ; + }, + + 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) && $field.not(selector.checkbox).length > 0 ) { + if(!keyHeldDown) { + $field + .one('keyup' + eventNamespace, module.event.field.keyup) + ; + module.submit(); + module.debug('Enter pressed on input submitting form'); + } + keyHeldDown = true; + } + }, + keyup: function() { + keyHeldDown = false; + }, + blur: function(event) { + var + $field = $(this), + $fieldGroup = $field.closest($group), + validationRules = module.get.validation($field) + ; + if( $fieldGroup.hasClass(className.error) ) { + module.debug('Revalidating field', $field, validationRules); + module.validate.form.call(module, event, true); + } + else if(settings.on == 'blur' || settings.on == 'change') { + if(validationRules) { + module.validate.field( validationRules ); + } + } + }, + change: function(event) { + var + $field = $(this), + $fieldGroup = $field.closest($group) + ; + if(settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) ) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + module.debug('Revalidating field', $field, module.get.validation($field)); + module.validate.form.call(module, event, true); + }, settings.delay); + } + } + } + + }, + + get: { + ancillaryValue: function(rule) { + if(!rule.type || !module.is.bracketedRule(rule)) { + return false; + } + return rule.type.match(settings.regExp.bracket)[1] + ''; + }, + ruleName: function(rule) { + if( module.is.bracketedRule(rule) ) { + return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], ''); + } + return rule.type; + }, + changeEvent: function(type, $input) { + if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) { + return 'change'; + } + else { + return module.get.inputEvent(); + } + }, + inputEvent: function() { + return (document.createElement('input').oninput !== undefined) + ? 'input' + : (document.createElement('input').onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + }, + prompt: function(rule, field) { + var + ruleName = module.get.ruleName(rule), + ancillary = module.get.ancillaryValue(rule), + prompt = rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule, + requiresValue = (prompt.search('{value}') !== -1), + requiresName = (prompt.search('{name}') !== -1), + $label, + $field, + name + ; + if(requiresName || requiresValue) { + $field = module.get.field(field.identifier); + } + if(requiresValue) { + prompt = prompt.replace('{value}', $field.val()); + } + if(requiresName) { + $label = $field.closest(selector.group).find('label').eq(0); + name = ($label.size() == 1) + ? $label.text() + : $field.prop('placeholder') || settings.text.unspecifiedField + ; + prompt = prompt.replace('{name}', name); + } + prompt = prompt.replace('{identifier}', field.identifier); + prompt = prompt.replace('{ruleValue}', ancillary); + if(!rule.prompt) { + module.verbose('Using default validation prompt for type', prompt, ruleName); + } + return prompt; + }, + settings: function() { + if($.isPlainObject(parameters)) { + var + keys = Object.keys(parameters), + isLegacySettings = (keys.length > 0) + ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined) + : false, + ruleKeys + ; + if(isLegacySettings) { + // 1.x (ducktyped) + settings = $.extend(true, {}, $.fn.form.settings, legacyParameters); + validation = $.extend({}, $.fn.form.settings.defaults, parameters); + module.error(settings.error.oldSyntax, element); + module.verbose('Extending settings from legacy parameters', validation, settings); + } + else { + // 2.x + if(parameters.fields) { + ruleKeys = Object.keys(parameters.fields); + if( typeof parameters.fields[ruleKeys[0]] == 'string' || $.isArray(parameters.fields[ruleKeys[0]]) ) { + $.each(parameters.fields, function(name, rules) { + if(typeof rules == 'string') { + rules = [rules]; + } + parameters.fields[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + parameters.fields[name].rules.push({ type: rule }); + }); + }); + } + } + + settings = $.extend(true, {}, $.fn.form.settings, parameters); + validation = $.extend({}, $.fn.form.settings.defaults, settings.fields); + module.verbose('Extending settings', validation, settings); + } + } + else { + settings = $.fn.form.settings; + validation = $.fn.form.settings.defaults; + module.verbose('Using default form validation', validation, settings); + } + + // shorthand + namespace = settings.namespace; + metadata = settings.metadata; + selector = settings.selector; + className = settings.className; + error = settings.error; + moduleNamespace = 'module-' + namespace; + eventNamespace = '.' + namespace; + + // grab instance + instance = $module.data(moduleNamespace); + + // refresh selector cache + module.refresh(); + }, + field: function(identifier) { + module.verbose('Finding field with identifier', identifier); + if( $field.filter('#' + identifier).length > 0 ) { + return $field.filter('#' + identifier); + } + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { + return $field.filter('[name="' + identifier +'"]'); + } + else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) { + return $field.filter('[name="' + identifier +'[]"]'); + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { + return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); + } + return $(''); + }, + fields: function(fields) { + var + $fields = $() + ; + $.each(fields, function(index, name) { + $fields = $fields.add( module.get.field(name) ); + }); + return $fields; + }, + validation: function($field) { + var + fieldValidation, + identifier + ; + if(!validation) { + return false; + } + $.each(validation, function(fieldName, field) { + identifier = field.identifier || fieldName; + if( module.get.field(identifier)[0] == $field[0] ) { + field.identifier = identifier; + fieldValidation = field; + } + }); + return fieldValidation || false; + }, + value: function (field) { + var + fields = [], + results + ; + fields.push(field); + results = module.get.values.call(element, fields); + return results[field]; + }, + values: function (fields) { + var + $fields = $.isArray(fields) + ? module.get.fields(fields) + : $field, + values = {} + ; + $fields.each(function(index, field) { + var + $field = $(field), + type = $field.prop('type'), + name = $field.prop('name'), + value = $field.val(), + isCheckbox = $field.is(selector.checkbox), + isRadio = $field.is(selector.radio), + isMultiple = (name.indexOf('[]') !== -1), + isChecked = (isCheckbox) + ? $field.is(':checked') + : false + ; + if(name) { + if(isMultiple) { + name = name.replace('[]', ''); + if(!values[name]) { + values[name] = []; + } + if(isCheckbox) { + if(isChecked) { + values[name].push(value || true); + } + else { + values[name].push(false); + } + } + else { + values[name].push(value); + } + } + else { + if(isRadio) { + if(isChecked) { + values[name] = value; + } + } + else if(isCheckbox) { + if(isChecked) { + values[name] = value || true; + } + else { + values[name] = false; + } + } + else { + values[name] = value; + } + } + } + }); + return values; + } + }, + + has: { + + field: function(identifier) { + module.verbose('Checking for existence of a field with identifier', identifier); + if(typeof identifier !== 'string') { + module.error(error.identifier, identifier); + } + if( $field.filter('#' + identifier).length > 0 ) { + return true; + } + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { + return true; + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { + return true; + } + return false; + } + + }, + + add: { + prompt: function(identifier, errors) { + var + $field = module.get.field(identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.children(selector.prompt), + promptExists = ($prompt.length !== 0) + ; + errors = (typeof errors == 'string') + ? [errors] + : errors + ; + module.verbose('Adding field error state', identifier); + $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.transition('is supported')) { + 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) + ; + } + } + else { + module.verbose('Inline errors are disabled, no inline error added', identifier); + } + } + }, + errors: function(errors) { + module.debug('Adding form error messages', errors); + module.set.error(); + $message + .html( settings.templates.error(errors) ) + ; + } + }, + + remove: { + prompt: function(identifier) { + var + $field = module.get.field(identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.children(selector.prompt) + ; + $fieldGroup + .removeClass(className.error) + ; + if(settings.inline && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', identifier); + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } + } + } + }, + + set: { + success: function() { + $module + .removeClass(className.error) + .addClass(className.success) + ; + }, + defaults: function () { + $field + .each(function () { + var + $field = $(this), + isCheckbox = ($field.filter(selector.checkbox).length > 0), + value = (isCheckbox) + ? $field.is(':checked') + : $field.val() + ; + $field.data(metadata.defaultValue, value); + }) + ; + }, + error: function() { + $module + .removeClass(className.success) + .addClass(className.error) + ; + }, + value: function (field, value) { + var + fields = {} + ; + fields[field] = value; + return module.set.values.call(element, fields); + }, + values: function (fields) { + if($.isEmptyObject(fields)) { + return; + } + $.each(fields, function(key, value) { + var + $field = module.get.field(key), + $element = $field.parent(), + isMultiple = $.isArray(value), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isRadio = ($field.is(selector.radio) && isCheckbox), + fieldExists = ($field.length > 0), + $multipleField + ; + if(fieldExists) { + if(isMultiple && isCheckbox) { + module.verbose('Selecting multiple', value, $field); + $element.checkbox('uncheck'); + $.each(value, function(index, value) { + $multipleField = $field.filter('[value="' + value + '"]'); + $element = $multipleField.parent(); + if($multipleField.length > 0) { + $element.checkbox('check'); + } + }); + } + else if(isRadio) { + module.verbose('Selecting radio value', value, $field); + $field.filter('[value="' + value + '"]') + .parent(selector.uiCheckbox) + .checkbox('check') + ; + } + else if(isCheckbox) { + module.verbose('Setting checkbox value', value, $element); + if(value === true) { + $element.checkbox('check'); + } + else { + $element.checkbox('uncheck'); + } + } + else if(isDropdown) { + module.verbose('Setting dropdown value', value, $element); + $element.dropdown('set selected', value); + } + else { + module.verbose('Setting field value', value, $field); + $field.val(value); + } + } + }); + } + }, + + validate: { + + form: function(event, ignoreCallbacks) { + var + values = module.get.values(), + apiRequest + ; + + // input keydown event will fire submit repeatedly by browser default + if(keyHeldDown) { + return false; + } + + // reset errors + formErrors = []; + if( module.is.valid() ) { + module.debug('Form has no validation errors, submitting'); + module.set.success(); + if(ignoreCallbacks !== true) { + return settings.onSuccess.call(element, event, values); + } + } + else { + module.debug('Form has errors'); + module.set.error(); + if(!settings.inline) { + module.add.errors(formErrors); + } + // prevent ajax submit + if($module.data('moduleApi') !== undefined) { + event.stopImmediatePropagation(); + } + if(ignoreCallbacks !== true) { + return settings.onFailure.call(element, formErrors, values); + } + } + }, + + // takes a validation object and returns whether field passes validation + field: function(field, fieldName) { + var + identifier = field.identifier || fieldName, + $field = module.get.field(identifier), + fieldValid = true, + fieldErrors = [] + ; + if(!field.identifier) { + module.debug('Using field name as identifier', identifier); + field.identifier = identifier; + } + if($field.prop('disabled')) { + module.debug('Field is disabled. Skipping', identifier); + fieldValid = true; + } + else if(field.optional && $.trim($field.val()) === ''){ + module.debug('Field is optional and empty. Skipping', identifier); + fieldValid = true; + } + else if(field.rules !== undefined) { + $.each(field.rules, function(index, rule) { + if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) { + module.debug('Field is invalid', identifier, rule.type); + fieldErrors.push(module.get.prompt(rule, field)); + fieldValid = false; + } + }); + } + if(fieldValid) { + module.remove.prompt(identifier, fieldErrors); + settings.onValid.call($field); + } + else { + formErrors = formErrors.concat(fieldErrors); + module.add.prompt(identifier, fieldErrors); + settings.onInvalid.call($field, fieldErrors); + return false; + } + return true; + }, + + // takes validation rule and returns whether field passes rule + rule: function(field, rule) { + var + $field = module.get.field(field.identifier), + type = rule.type, + value = $field.val(), + isValid = true, + ancillary = module.get.ancillaryValue(rule), + ruleName = module.get.ruleName(rule), + ruleFunction = settings.rules[ruleName] + ; + if( !$.isFunction(ruleFunction) ) { + module.error(error.noRule, ruleName); + return; + } + // cast to string avoiding encoding special values + value = (value === undefined || value === '' || value === null) + ? '' + : $.trim(value + '') + ; + return ruleFunction.call($field, value, ancillary); + } + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + module.initialize(); + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.form.settings = { + + name : 'Form', + namespace : 'form', + + debug : false, + verbose : false, + performance : true, + + fields : false, + + keyboardShortcuts : true, + on : 'submit', + inline : false, + + delay : 200, + revalidate : true, + + transition : 'scale', + duration : 200, + + onValid : function() {}, + onInvalid : function() {}, + onSuccess : function() { return true; }, + onFailure : function() { return false; }, + + metadata : { + defaultValue : 'default', + validate : 'validate' + }, + + regExp: { + bracket : /\[(.*)\]/i, + decimal : /^\d*(\.)\d+/, + email : "[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", + escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, + flags : /^\/(.*)\/(.*)?/, + integer : /^\-?\d+$/, + number : /^\-?\d*(\.\d+)?$/, + url : /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/i + }, + + text: { + unspecifiedRule : 'Please enter a valid value', + unspecifiedField : 'This field' + }, + + prompt: { + empty : '{name} must have a value', + checked : '{name} must be checked', + email : '{name} must be a valid e-mail', + url : '{name} must be a valid url', + regExp : '{name} is not formatted correctly', + integer : '{name} must be an integer', + decimal : '{name} must be a decimal number', + number : '{name} must be set to a number', + is : '{name} must be "{ruleValue}"', + isExactly : '{name} must be exactly "{ruleValue}"', + not : '{name} cannot be set to "{ruleValue}"', + notExactly : '{name} cannot be set to exactly "{ruleValue}"', + contain : '{name} cannot contain "{ruleValue}"', + containExactly : '{name} cannot contain exactly "{ruleValue}"', + doesntContain : '{name} must contain "{ruleValue}"', + doesntContainExactly : '{name} must contain exactly "{ruleValue}"', + minLength : '{name} must be at least {ruleValue} characters', + length : '{name} must be at least {ruleValue} characters', + exactLength : '{name} must be exactly {ruleValue} characters', + maxLength : '{name} cannot be longer than {ruleValue} characters', + match : '{name} must match {ruleValue} field', + different : '{name} must have a different value than {ruleValue} field', + creditCard : '{name} must be a valid credit card number', + minCount : '{name} must have at least {ruleValue} choices', + exactCount : '{name} must have exactly {ruleValue} choices', + maxCount : '{name} must have {ruleValue} or less choices' + }, + + selector : { + checkbox : 'input[type="checkbox"], input[type="radio"]', + clear : '.clear', + field : 'input, textarea, select', + group : '.field', + input : 'input', + message : '.error.message', + prompt : '.prompt.label', + radio : 'input[type="radio"]', + reset : '.reset:not([type="reset"])', + submit : '.submit:not([type="submit"])', + uiCheckbox : '.ui.checkbox', + uiDropdown : '.ui.dropdown' + }, + + className : { + error : 'error', + label : 'ui prompt label', + pressed : 'down', + success : 'success' + }, + + error: { + identifier : 'You must specify a string identifier for each field', + method : 'The method you called is not defined.', + noRule : 'There is no rule matching the one you specified', + oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.' + }, + + templates: { + + // template that produces error message + error: function(errors) { + var + html = '
    ' + ; + $.each(errors, function(index, value) { + html += '
  • ' + value + '
  • '; + }); + html += '
'; + return $(html); + }, + + // template that produces label + prompt: function(errors) { + return $('
') + .addClass('ui basic red pointing prompt label') + .html(errors[0]) + ; + } + }, + + rules: { + + // is not empty or blank string + empty: function(value) { + return !(value === undefined || '' === value || $.isArray(value) && value.length === 0); + }, + + // checkbox checked + checked: function() { + return ($(this).filter(':checked').length > 0); + }, + + // is most likely an email + email: function(value){ + var + emailRegExp = new RegExp($.fn.form.settings.regExp.email, 'i') + ; + return emailRegExp.test(value); + }, + + // value is most likely url + url: function(value) { + return $.fn.form.settings.regExp.url.test(value); + }, + + // matches specified regExp + regExp: function(value, regExp) { + var + regExpParts = regExp.match($.fn.form.settings.regExp.flags), + flags + ; + // regular expression specified as /baz/gi (flags) + if(regExpParts) { + regExp = (regExpParts.length >= 2) + ? regExpParts[1] + : regExp + ; + flags = (regExpParts.length >= 3) + ? regExpParts[2] + : '' + ; + } + return value.match( new RegExp(regExp, flags) ); + }, + + // is valid integer or matches range + integer: function(value, range) { + var + intRegExp = $.fn.form.settings.regExp.integer, + min, + max, + parts + ; + if( !range || ['', '..'].indexOf(range) !== -1) { + // do nothing + } + else if(range.indexOf('..') == -1) { + if(intRegExp.test(range)) { + min = max = range - 0; + } + } + else { + parts = range.split('..', 2); + if(intRegExp.test(parts[0])) { + min = parts[0] - 0; + } + if(intRegExp.test(parts[1])) { + max = parts[1] - 0; + } + } + return ( + intRegExp.test(value) && + (min === undefined || value >= min) && + (max === undefined || value <= max) + ); + }, + + // is valid number (with decimal) + decimal: function(value) { + return $.fn.form.settings.regExp.decimal.test(value); + }, + + // is valid number + number: function(value) { + return $.fn.form.settings.regExp.number.test(value); + }, + + // is value (case insensitive) + is: function(value, text) { + text = (typeof text == 'string') + ? text.toLowerCase() + : text + ; + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + return (value == text); + }, + + // is value + isExactly: function(value, text) { + return (value == text); + }, + + // value is not another value (case insensitive) + not: function(value, notValue) { + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + notValue = (typeof notValue == 'string') + ? notValue.toLowerCase() + : notValue + ; + return (value != notValue); + }, + + // value is not another value (case sensitive) + notExactly: function(value, notValue) { + return (value != notValue); + }, + + // value contains text (insensitive) + contains: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) !== -1); + }, + + // value contains text (case sensitive) + containsExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) !== -1); + }, + + // value contains text (insensitive) + doesntContain: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) === -1); + }, + + // value contains text (case sensitive) + doesntContainExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) === -1); + }, + + // is at least string length + minLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // see rls notes for 2.0.6 (this is a duplicate of minLength) + length: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // is exactly length + exactLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length == requiredLength) + : false + ; + }, + + // is less than length + maxLength: function(value, maxLength) { + return (value !== undefined) + ? (value.length <= maxLength) + : false + ; + }, + + // matches another field + match: function(value, identifier) { + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() == matchingValue.toString() ) + : false + ; + }, + + // different than another field + different: function(value, identifier) { + // use either id or name of field + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() !== matchingValue.toString() ) + : false + ; + }, + + creditCard: function(cardNumber, cardTypes) { + var + cards = { + visa: { + pattern : /^4/, + length : [16] + }, + amex: { + pattern : /^3[47]/, + length : [15] + }, + mastercard: { + pattern : /^5[1-5]/, + length : [16] + }, + discover: { + pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/, + length : [16] + }, + unionPay: { + pattern : /^(62|88)/, + length : [16, 17, 18, 19] + }, + jcb: { + pattern : /^35(2[89]|[3-8][0-9])/, + length : [16] + }, + maestro: { + pattern : /^(5018|5020|5038|6304|6759|676[1-3])/, + length : [12, 13, 14, 15, 16, 17, 18, 19] + }, + dinersClub: { + pattern : /^(30[0-5]|^36)/, + length : [14] + }, + laser: { + pattern : /^(6304|670[69]|6771)/, + length : [16, 17, 18, 19] + }, + visaElectron: { + pattern : /^(4026|417500|4508|4844|491(3|7))/, + length : [16] + } + }, + valid = {}, + validCard = false, + requiredTypes = (typeof cardTypes == 'string') + ? cardTypes.split(',') + : false, + unionPay, + validation + ; + + if(typeof cardNumber !== 'string' || cardNumber.length === 0) { + return; + } + + // verify card types + if(requiredTypes) { + $.each(requiredTypes, function(index, type){ + // verify each card type + validation = cards[type]; + if(validation) { + valid = { + length : ($.inArray(cardNumber.length, validation.length) !== -1), + pattern : (cardNumber.search(validation.pattern) !== -1) + }; + if(valid.length && valid.pattern) { + validCard = true; + } + } + }); + + if(!validCard) { + return false; + } + } + + // skip luhn for UnionPay + unionPay = { + number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1), + pattern : (cardNumber.search(cards.unionPay.pattern) !== -1) + }; + if(unionPay.number && unionPay.pattern) { + return true; + } + + // verify luhn, adapted from + var + length = cardNumber.length, + multiple = 0, + producedValue = [ + [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + [0, 2, 4, 6, 8, 1, 3, 5, 7, 9] + ], + sum = 0 + ; + while (length--) { + sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)]; + multiple ^= 1; + } + return (sum % 10 === 0 && sum > 0); + }, + + minCount: function(value, minCount) { + if(minCount == 0) { + return true; + } + if(minCount == 1) { + return (value !== ''); + } + return (value.split(',').length >= minCount); + }, + + exactCount: function(value, exactCount) { + if(exactCount == 0) { + return (value === ''); + } + if(exactCount == 1) { + return (value !== '' && value.search(',') === -1); + } + return (value.split(',').length == exactCount); + }, + + maxCount: function(value, maxCount) { + if(maxCount == 0) { + return false; + } + if(maxCount == 1) { + return (value.search(',') === -1); + } + return (value.split(',').length <= maxCount); + } + } + +}; + +})( jQuery, window, document ); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/behaviors/state.js b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/state.js new file mode 100644 index 00000000..56c02d70 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/state.js @@ -0,0 +1,695 @@ +/*! + * # Semantic UI - State + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.state = function(parameters) { + var + $allModules = $(this), + + moduleSelector = $allModules.selector || '', + + hasTouch = ('ontouchstart' in document.documentElement), + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.state.settings, parameters) + : $.extend({}, $.fn.state.settings), + + error = settings.error, + metadata = settings.metadata, + className = settings.className, + namespace = settings.namespace, + states = settings.states, + text = settings.text, + + eventNamespace = '.' + namespace, + moduleNamespace = namespace + '-module', + + $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 !== '') { + $(settings.context) + .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text) + .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text) + .on(moduleSelector, 'click' + eventNamespace, module.toggle.state) + ; + } + else { + $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) ); + }, + state: function(state) { + if(className[state] === undefined) { + return false; + } + return $module.hasClass( className[state] ); + }, + + 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'); + }, + progress: function() { + return $module.is('.ui.progress'); + } + }, + + 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: function() { + $module.removeClass(className.disabled); + }, + + disable: function() { + $module.addClass(className.disabled); + }, + + setState: function(state) { + if(module.allows(state)) { + $module.addClass( className[state] ); + } + }, + + removeState: function(state) { + if(module.allows(state)) { + $module.removeClass( className[state] ); + } + }, + + toggle: { + state: function() { + var + apiRequest, + requestCancelled + ; + if( module.allows('active') && module.is.enabled() ) { + module.refresh(); + if($.fn.api !== undefined) { + apiRequest = $module.api('get request'); + requestCancelled = $module.api('was cancelled'); + if( requestCancelled ) { + module.debug('API Request cancelled by beforesend'); + settings.activateTest = function(){ return false; }; + settings.deactivateTest = function(){ return false; }; + } + else if(apiRequest) { + module.listenTo(apiRequest); + return; + } + } + 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(); + }) + ; + } + }, + + // 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(); + } + settings.onChange.call(element); + }, + + text: function() { + if( module.is.textEnabled() ) { + if(module.is.disabled() ) { + module.verbose('Changing text to disabled text', text.hover); + module.update.text(text.disabled); + } + else if( module.is.active() ) { + if(text.hover) { + module.verbose('Changing text to hover text', text.hover); + module.update.text(text.hover); + } + else if(text.deactivate) { + module.verbose('Changing text to deactivating text', text.deactivate); + module.update.text(text.deactivate); + } + } + else { + if(text.hover) { + module.verbose('Changing text to hover text', text.hover); + module.update.text(text.hover); + } + else if(text.activate){ + module.verbose('Changing text to activating text', text.activate); + module.update.text(text.activate); + } + } + } + } + + }, + + activate: function() { + if( settings.activateTest.call(element) ) { + module.debug('Setting state to active'); + $module + .addClass(className.active) + ; + module.update.text(text.active); + settings.onActivate.call(element); + } + }, + + deactivate: function() { + if( settings.deactivateTest.call(element) ) { + module.debug('Setting state to inactive'); + $module + .removeClass(className.active) + ; + module.update.text(text.inactive); + settings.onDeactivate.call(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, callback) { + var + previousText = module.get.text() + ; + module.debug('Flashing text message', text, duration); + text = text || settings.text.flash; + duration = duration || settings.flashDuration; + callback = callback || function() {}; + module.update.text(text); + setTimeout(function(){ + module.update.text(previousText); + callback.call(element); + }, 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 set, ignoring update', text); + } + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.state.settings = { + + // module info + name : 'State', + + // debug output + debug : false, + + // verbose debug output + verbose : false, + + // 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 : 1000, + + // selector filter + filter : { + text : '.loading, .disabled', + active : '.disabled' + }, + + context : false, + + // error + error: { + beforeSend : 'The before send function has cancelled state change', + method : 'The method you called is not defined.' + }, + + // metadata + metadata: { + promise : 'promise', + storedText : 'stored-text' + }, + + // change class on state + className: { + active : 'active', + disabled : 'disabled', + error : 'error', + loading : 'loading', + success : 'success', + warning : 'warning' + }, + + selector: { + // selector for text node + text: false + }, + + defaults : { + input: { + disabled : true, + loading : true, + active : true + }, + button: { + disabled : true, + loading : true, + active : true, + }, + progress: { + active : true, + success : true, + warning : true, + error : true + } + }, + + states : { + active : true, + disabled : true, + error : true, + loading : true, + success : true, + warning : true + }, + + text : { + disabled : false, + flash : false, + hover : false, + active : false, + inactive : false, + activate : false, + deactivate : false + } + +}; + + + +})( jQuery, window, document ); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/behaviors/visibility.js b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/visibility.js new file mode 100644 index 00000000..2ea61de8 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/visibility.js @@ -0,0 +1,1216 @@ +/*! + * # Semantic UI - Visibility + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.visibility = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.visibility.settings, parameters) + : $.extend({}, $.fn.visibility.settings), + + className = settings.className, + namespace = settings.namespace, + error = settings.error, + metadata = settings.metadata, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $window = $(window), + + $module = $(this), + $context = $(settings.context), + + $placeholder, + + selector = $module.selector || '', + instance = $module.data(moduleNamespace), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + element = this, + disabled = false, + + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', settings); + + module.setup.cache(); + + if( module.should.trackChanges() ) { + + if(settings.type == 'image') { + module.setup.image(); + } + if(settings.type == 'fixed') { + module.setup.fixed(); + } + + if(settings.observeChanges) { + module.observeChanges(); + } + module.bind.events(); + } + + module.save.position(); + if( !module.is.visible() ) { + module.error(error.visible, $module); + } + + if(settings.initialCheck) { + module.checkVisibility(); + } + module.instantiate(); + }, + + instantiate: function() { + module.debug('Storing instance', module); + $module + .data(moduleNamespace, module) + ; + instance = module; + }, + + destroy: function() { + module.verbose('Destroying previous module'); + if(observer) { + observer.disconnect(); + } + $window + .off('load' + eventNamespace, module.event.load) + .off('resize' + eventNamespace, module.event.resize) + ; + $context + .off('scrollchange' + eventNamespace, module.event.scrollchange) + ; + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.verbose('DOM tree modified, updating visibility calculations'); + module.timer = setTimeout(function() { + module.verbose('DOM tree modified, updating sticky menu'); + module.refresh(); + }, 100); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.verbose('Binding visibility events to scroll and resize'); + if(settings.refreshOnLoad) { + $window + .on('load' + eventNamespace, module.event.load) + ; + } + $window + .on('resize' + eventNamespace, module.event.resize) + ; + // pub/sub pattern + $context + .off('scroll' + eventNamespace) + .on('scroll' + eventNamespace, module.event.scroll) + .on('scrollchange' + eventNamespace, module.event.scrollchange) + ; + } + }, + + event: { + resize: function() { + module.debug('Window resized'); + if(settings.refreshOnResize) { + requestAnimationFrame(module.refresh); + } + }, + load: function() { + module.debug('Page finished loading'); + requestAnimationFrame(module.refresh); + }, + // publishes scrollchange event on one scroll + scroll: function() { + if(settings.throttle) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]); + }, settings.throttle); + } + else { + requestAnimationFrame(function() { + $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]); + }); + } + }, + // subscribes to scrollchange + scrollchange: function(event, scrollPosition) { + module.checkVisibility(scrollPosition); + }, + }, + + precache: function(images, callback) { + if (!(images instanceof Array)) { + images = [images]; + } + var + imagesLength = images.length, + loadedCounter = 0, + cache = [], + cacheImage = document.createElement('img'), + handleLoad = function() { + loadedCounter++; + if (loadedCounter >= images.length) { + if ($.isFunction(callback)) { + callback(); + } + } + } + ; + while (imagesLength--) { + cacheImage = document.createElement('img'); + cacheImage.onload = handleLoad; + cacheImage.onerror = handleLoad; + cacheImage.src = images[imagesLength]; + cache.push(cacheImage); + } + }, + + enableCallbacks: function() { + module.debug('Allowing callbacks to occur'); + disabled = false; + }, + + disableCallbacks: function() { + module.debug('Disabling all callbacks temporarily'); + disabled = true; + }, + + should: { + trackChanges: function() { + if(methodInvoked) { + module.debug('One time query, no need to bind events'); + return false; + } + module.debug('Callbacks being attached'); + return true; + } + }, + + setup: { + cache: function() { + module.cache = { + occurred : {}, + screen : {}, + element : {}, + }; + }, + image: function() { + var + src = $module.data(metadata.src) + ; + if(src) { + module.verbose('Lazy loading image', src); + settings.once = true; + settings.observeChanges = false; + + // show when top visible + settings.onOnScreen = function() { + module.debug('Image on screen', element); + module.precache(src, function() { + module.set.image(src); + }); + }; + } + }, + fixed: function() { + module.debug('Setting up fixed'); + settings.once = false; + settings.observeChanges = false; + settings.initialCheck = true; + settings.refreshOnLoad = true; + if(!parameters.transition) { + settings.transition = false; + } + module.create.placeholder(); + module.debug('Added placeholder', $placeholder); + settings.onTopPassed = function() { + module.debug('Element passed, adding fixed position', $module); + module.show.placeholder(); + module.set.fixed(); + if(settings.transition) { + if($.fn.transition !== undefined) { + $module.transition(settings.transition, settings.duration); + } + } + }; + settings.onTopPassedReverse = function() { + module.debug('Element returned to position, removing fixed', $module); + module.hide.placeholder(); + module.remove.fixed(); + }; + } + }, + + create: { + placeholder: function() { + module.verbose('Creating fixed position placeholder'); + $placeholder = $module + .clone(false) + .css('display', 'none') + .addClass(className.placeholder) + .insertAfter($module) + ; + } + }, + + show: { + placeholder: function() { + module.verbose('Showing placeholder'); + $placeholder + .css('display', 'block') + .css('visibility', 'hidden') + ; + } + }, + hide: { + placeholder: function() { + module.verbose('Hiding placeholder'); + $placeholder + .css('display', 'none') + .css('visibility', '') + ; + } + }, + + set: { + fixed: function() { + module.verbose('Setting element to fixed position'); + $module + .addClass(className.fixed) + .css({ + position : 'fixed', + top : settings.offset + 'px', + left : 'auto', + zIndex : '1' + }) + ; + }, + image: function(src) { + $module + .attr('src', src) + ; + if(settings.transition) { + if( $.fn.transition !== undefined ) { + $module.transition(settings.transition, settings.duration); + } + else { + $module.fadeIn(settings.duration); + } + } + else { + $module.show(); + } + } + }, + + is: { + onScreen: function() { + var + calculations = module.get.elementCalculations() + ; + return calculations.onScreen; + }, + offScreen: function() { + var + calculations = module.get.elementCalculations() + ; + return calculations.offScreen; + }, + visible: function() { + if(module.cache && module.cache.element) { + return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0); + } + return false; + } + }, + + refresh: function() { + module.debug('Refreshing constants (width/height)'); + if(settings.type == 'fixed') { + module.remove.fixed(); + module.remove.occurred(); + } + module.reset(); + module.save.position(); + if(settings.checkOnRefresh) { + module.checkVisibility(); + } + settings.onRefresh.call(element); + }, + + reset: function() { + module.verbose('Reseting all cached values'); + if( $.isPlainObject(module.cache) ) { + module.cache.screen = {}; + module.cache.element = {}; + } + }, + + checkVisibility: function(scroll) { + module.verbose('Checking visibility of element', module.cache.element); + + if( !disabled && module.is.visible() ) { + + // save scroll position + module.save.scroll(scroll); + + // update calculations derived from scroll + module.save.calculations(); + + // percentage + module.passed(); + + // reverse (must be first) + module.passingReverse(); + module.topVisibleReverse(); + module.bottomVisibleReverse(); + module.topPassedReverse(); + module.bottomPassedReverse(); + + // one time + module.onScreen(); + module.offScreen(); + module.passing(); + module.topVisible(); + module.bottomVisible(); + module.topPassed(); + module.bottomPassed(); + + // on update callback + if(settings.onUpdate) { + settings.onUpdate.call(element, module.get.elementCalculations()); + } + } + }, + + passed: function(amount, newCallback) { + var + calculations = module.get.elementCalculations(), + amountInPixels + ; + // assign callback + if(amount && newCallback) { + settings.onPassed[amount] = newCallback; + } + else if(amount !== undefined) { + return (module.get.pixelsPassed(amount) > calculations.pixelsPassed); + } + else if(calculations.passing) { + $.each(settings.onPassed, function(amount, callback) { + if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) { + module.execute(callback, amount); + } + else if(!settings.once) { + module.remove.occurred(callback); + } + }); + } + }, + + onScreen: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onOnScreen, + callbackName = 'onScreen' + ; + if(newCallback) { + module.debug('Adding callback for onScreen', newCallback); + settings.onOnScreen = newCallback; + } + if(calculations.onScreen) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.onOnScreen; + } + }, + + offScreen: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onOffScreen, + callbackName = 'offScreen' + ; + if(newCallback) { + module.debug('Adding callback for offScreen', newCallback); + settings.onOffScreen = newCallback; + } + if(calculations.offScreen) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.onOffScreen; + } + }, + + passing: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onPassing, + callbackName = 'passing' + ; + if(newCallback) { + module.debug('Adding callback for passing', newCallback); + settings.onPassing = newCallback; + } + if(calculations.passing) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.passing; + } + }, + + + topVisible: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopVisible, + callbackName = 'topVisible' + ; + if(newCallback) { + module.debug('Adding callback for top visible', newCallback); + settings.onTopVisible = newCallback; + } + if(calculations.topVisible) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.topVisible; + } + }, + + bottomVisible: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomVisible, + callbackName = 'bottomVisible' + ; + if(newCallback) { + module.debug('Adding callback for bottom visible', newCallback); + settings.onBottomVisible = newCallback; + } + if(calculations.bottomVisible) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.bottomVisible; + } + }, + + topPassed: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopPassed, + callbackName = 'topPassed' + ; + if(newCallback) { + module.debug('Adding callback for top passed', newCallback); + settings.onTopPassed = newCallback; + } + if(calculations.topPassed) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.topPassed; + } + }, + + bottomPassed: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomPassed, + callbackName = 'bottomPassed' + ; + if(newCallback) { + module.debug('Adding callback for bottom passed', newCallback); + settings.onBottomPassed = newCallback; + } + if(calculations.bottomPassed) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.bottomPassed; + } + }, + + passingReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onPassingReverse, + callbackName = 'passingReverse' + ; + if(newCallback) { + module.debug('Adding callback for passing reverse', newCallback); + settings.onPassingReverse = newCallback; + } + if(!calculations.passing) { + if(module.get.occurred('passing')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return !calculations.passing; + } + }, + + + topVisibleReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopVisibleReverse, + callbackName = 'topVisibleReverse' + ; + if(newCallback) { + module.debug('Adding callback for top visible reverse', newCallback); + settings.onTopVisibleReverse = newCallback; + } + if(!calculations.topVisible) { + if(module.get.occurred('topVisible')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.topVisible; + } + }, + + bottomVisibleReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomVisibleReverse, + callbackName = 'bottomVisibleReverse' + ; + if(newCallback) { + module.debug('Adding callback for bottom visible reverse', newCallback); + settings.onBottomVisibleReverse = newCallback; + } + if(!calculations.bottomVisible) { + if(module.get.occurred('bottomVisible')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.bottomVisible; + } + }, + + topPassedReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopPassedReverse, + callbackName = 'topPassedReverse' + ; + if(newCallback) { + module.debug('Adding callback for top passed reverse', newCallback); + settings.onTopPassedReverse = newCallback; + } + if(!calculations.topPassed) { + if(module.get.occurred('topPassed')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.onTopPassed; + } + }, + + bottomPassedReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomPassedReverse, + callbackName = 'bottomPassedReverse' + ; + if(newCallback) { + module.debug('Adding callback for bottom passed reverse', newCallback); + settings.onBottomPassedReverse = newCallback; + } + if(!calculations.bottomPassed) { + if(module.get.occurred('bottomPassed')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.bottomPassed; + } + }, + + execute: function(callback, callbackName) { + var + calculations = module.get.elementCalculations(), + screen = module.get.screenCalculations() + ; + callback = callback || false; + if(callback) { + if(settings.continuous) { + module.debug('Callback being called continuously', callbackName, calculations); + callback.call(element, calculations, screen); + } + else if(!module.get.occurred(callbackName)) { + module.debug('Conditions met', callbackName, calculations); + callback.call(element, calculations, screen); + } + } + module.save.occurred(callbackName); + }, + + remove: { + fixed: function() { + module.debug('Removing fixed position'); + $module + .removeClass(className.fixed) + .css({ + position : '', + top : '', + left : '', + zIndex : '' + }) + ; + }, + occurred: function(callback) { + if(callback) { + var + occurred = module.cache.occurred + ; + if(occurred[callback] !== undefined && occurred[callback] === true) { + module.debug('Callback can now be called again', callback); + module.cache.occurred[callback] = false; + } + } + else { + module.cache.occurred = {}; + } + } + }, + + save: { + calculations: function() { + module.verbose('Saving all calculations necessary to determine positioning'); + module.save.direction(); + module.save.screenCalculations(); + module.save.elementCalculations(); + }, + occurred: function(callback) { + if(callback) { + if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) { + module.verbose('Saving callback occurred', callback); + module.cache.occurred[callback] = true; + } + } + }, + scroll: function(scrollPosition) { + scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset; + module.cache.scroll = scrollPosition; + }, + direction: function() { + var + scroll = module.get.scroll(), + lastScroll = module.get.lastScroll(), + direction + ; + if(scroll > lastScroll && lastScroll) { + direction = 'down'; + } + else if(scroll < lastScroll && lastScroll) { + direction = 'up'; + } + else { + direction = 'static'; + } + module.cache.direction = direction; + return module.cache.direction; + }, + elementPosition: function() { + var + element = module.cache.element, + screen = module.get.screenSize() + ; + module.verbose('Saving element position'); + // (quicker than $.extend) + element.fits = (element.height < screen.height); + element.offset = $module.offset(); + element.width = $module.outerWidth(); + element.height = $module.outerHeight(); + // store + module.cache.element = element; + return element; + }, + elementCalculations: function() { + var + screen = module.get.screenCalculations(), + element = module.get.elementPosition() + ; + // offset + if(settings.includeMargin) { + element.margin = {}; + element.margin.top = parseInt($module.css('margin-top'), 10); + element.margin.bottom = parseInt($module.css('margin-bottom'), 10); + element.top = element.offset.top - element.margin.top; + element.bottom = element.offset.top + element.height + element.margin.bottom; + } + else { + element.top = element.offset.top; + element.bottom = element.offset.top + element.height; + } + + // visibility + element.topVisible = (screen.bottom >= element.top); + element.topPassed = (screen.top >= element.top); + element.bottomVisible = (screen.bottom >= element.bottom); + element.bottomPassed = (screen.top >= element.bottom); + element.pixelsPassed = 0; + element.percentagePassed = 0; + + // meta calculations + element.onScreen = (element.topVisible && !element.bottomPassed); + element.passing = (element.topPassed && !element.bottomPassed); + element.offScreen = (!element.onScreen); + + // passing calculations + if(element.passing) { + element.pixelsPassed = (screen.top - element.top); + element.percentagePassed = (screen.top - element.top) / element.height; + } + module.cache.element = element; + module.verbose('Updated element calculations', element); + return element; + }, + screenCalculations: function() { + var + scroll = module.get.scroll() + ; + module.save.direction(); + module.cache.screen.top = scroll; + module.cache.screen.bottom = scroll + module.cache.screen.height; + return module.cache.screen; + }, + screenSize: function() { + module.verbose('Saving window position'); + module.cache.screen = { + height: $context.height() + }; + }, + position: function() { + module.save.screenSize(); + module.save.elementPosition(); + } + }, + + get: { + pixelsPassed: function(amount) { + var + element = module.get.elementCalculations() + ; + if(amount.search('%') > -1) { + return ( element.height * (parseInt(amount, 10) / 100) ); + } + return parseInt(amount, 10); + }, + occurred: function(callback) { + return (module.cache.occurred !== undefined) + ? module.cache.occurred[callback] || false + : false + ; + }, + direction: function() { + if(module.cache.direction === undefined) { + module.save.direction(); + } + return module.cache.direction; + }, + elementPosition: function() { + if(module.cache.element === undefined) { + module.save.elementPosition(); + } + return module.cache.element; + }, + elementCalculations: function() { + if(module.cache.element === undefined) { + module.save.elementCalculations(); + } + return module.cache.element; + }, + screenCalculations: function() { + if(module.cache.screen === undefined) { + module.save.screenCalculations(); + } + return module.cache.screen; + }, + screenSize: function() { + if(module.cache.screen === undefined) { + module.save.screenSize(); + } + return module.cache.screen; + }, + scroll: function() { + if(module.cache.scroll === undefined) { + module.save.scroll(); + } + return module.cache.scroll; + }, + lastScroll: function() { + if(module.cache.screen === undefined) { + module.debug('First scroll event, no last scroll could be found'); + return false; + } + return module.cache.screen.top; + } + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + instance.save.scroll(); + instance.save.calculations(); + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.visibility.settings = { + + name : 'Visibility', + namespace : 'visibility', + + debug : false, + verbose : false, + performance : true, + + // whether to use mutation observers to follow changes + observeChanges : true, + + // check position immediately on init + initialCheck : true, + + // whether to refresh calculations after all page images load + refreshOnLoad : true, + + // whether to refresh calculations after page resize event + refreshOnResize : true, + + // should call callbacks on refresh event (resize, etc) + checkOnRefresh : true, + + // callback should only occur one time + once : true, + + // callback should fire continuously whe evaluates to true + continuous : false, + + // offset to use with scroll top + offset : 0, + + // whether to include margin in elements position + includeMargin : false, + + // scroll context for visibility checks + context : window, + + // visibility check delay in ms (defaults to animationFrame) + throttle : false, + + // special visibility type (image, fixed) + type : false, + + // image only animation settings + transition : 'fade in', + duration : 1000, + + // array of callbacks for percentage + onPassed : {}, + + // standard callbacks + onOnScreen : false, + onOffScreen : false, + onPassing : false, + onTopVisible : false, + onBottomVisible : false, + onTopPassed : false, + onBottomPassed : false, + + // reverse callbacks + onPassingReverse : false, + onTopVisibleReverse : false, + onBottomVisibleReverse : false, + onTopPassedReverse : false, + onBottomPassedReverse : false, + + // utility callbacks + onUpdate : false, // disabled by default for performance + onRefresh : function(){}, + + metadata : { + src: 'src' + }, + + className: { + fixed : 'fixed', + placeholder : 'placeholder' + }, + + error : { + method : 'The method you called is not defined.', + visible : 'Element is hidden, you must call refresh after element becomes visible' + } + +}; + +})( jQuery, window, document ); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/behaviors/visit.js b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/visit.js new file mode 100644 index 00000000..2d1428f0 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/behaviors/visit.js @@ -0,0 +1,517 @@ +/*! + * # Semantic UI - Visit + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.visit = $.fn.visit = function(parameters) { + var + $allModules = $.isFunction(this) + ? $(window) + : $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.visit.settings, parameters) + : $.extend({}, $.fn.visit.settings), + + error = settings.error, + namespace = settings.namespace, + + eventNamespace = '.' + namespace, + moduleNamespace = namespace + '-module', + + $module = $(this), + $displays = $(), + + element = this, + instance = $module.data(moduleNamespace), + module + ; + module = { + + initialize: function() { + if(settings.count) { + module.store(settings.key.count, settings.count); + } + else if(settings.id) { + module.add.id(settings.id); + } + else if(settings.increment && methodInvoked !== 'increment') { + module.increment(); + } + module.add.display($module); + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of visit module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying instance'); + $module + .removeData(moduleNamespace) + ; + }, + + increment: function(id) { + var + currentValue = module.get.count(), + newValue = +(currentValue) + 1 + ; + if(id) { + module.add.id(id); + } + else { + if(newValue > settings.limit && !settings.surpass) { + newValue = settings.limit; + } + module.debug('Incrementing visits', newValue); + module.store(settings.key.count, newValue); + } + }, + + decrement: function(id) { + var + currentValue = module.get.count(), + newValue = +(currentValue) - 1 + ; + if(id) { + module.remove.id(id); + } + else { + module.debug('Removing visit'); + module.store(settings.key.count, newValue); + } + }, + + get: { + count: function() { + return +(module.retrieve(settings.key.count)) || 0; + }, + idCount: function(ids) { + ids = ids || module.get.ids(); + return ids.length; + }, + ids: function(delimitedIDs) { + var + idArray = [] + ; + delimitedIDs = delimitedIDs || module.retrieve(settings.key.ids); + if(typeof delimitedIDs === 'string') { + idArray = delimitedIDs.split(settings.delimiter); + } + module.verbose('Found visited ID list', idArray); + return idArray; + }, + storageOptions: function(data) { + var + options = {} + ; + if(settings.expires) { + options.expires = settings.expires; + } + if(settings.domain) { + options.domain = settings.domain; + } + if(settings.path) { + options.path = settings.path; + } + return options; + } + }, + + has: { + visited: function(id, ids) { + var + visited = false + ; + ids = ids || module.get.ids(); + if(id !== undefined && ids) { + $.each(ids, function(index, value){ + if(value == id) { + visited = true; + } + }); + } + return visited; + } + }, + + set: { + count: function(value) { + module.store(settings.key.count, value); + }, + ids: function(value) { + module.store(settings.key.ids, value); + } + }, + + reset: function() { + module.store(settings.key.count, 0); + module.store(settings.key.ids, null); + }, + + add: { + id: function(id) { + var + currentIDs = module.retrieve(settings.key.ids), + newIDs = (currentIDs === undefined || currentIDs === '') + ? id + : currentIDs + settings.delimiter + id + ; + if( module.has.visited(id) ) { + module.debug('Unique content already visited, not adding visit', id, currentIDs); + } + else if(id === undefined) { + module.debug('ID is not defined'); + } + else { + module.debug('Adding visit to unique content', id); + module.store(settings.key.ids, newIDs); + } + module.set.count( module.get.idCount() ); + }, + display: function(selector) { + var + $element = $(selector) + ; + if($element.length > 0 && !$.isWindow($element[0])) { + module.debug('Updating visit count for element', $element); + $displays = ($displays.length > 0) + ? $displays.add($element) + : $element + ; + } + } + }, + + remove: { + id: function(id) { + var + currentIDs = module.get.ids(), + newIDs = [] + ; + if(id !== undefined && currentIDs !== undefined) { + module.debug('Removing visit to unique content', id, currentIDs); + $.each(currentIDs, function(index, value){ + if(value !== id) { + newIDs.push(value); + } + }); + newIDs = newIDs.join(settings.delimiter); + module.store(settings.key.ids, newIDs ); + } + module.set.count( module.get.idCount() ); + } + }, + + check: { + limit: function(value) { + value = value || module.get.count(); + if(settings.limit) { + if(value >= settings.limit) { + module.debug('Pages viewed exceeded limit, firing callback', value, settings.limit); + settings.onLimit.call(element, value); + } + module.debug('Limit not reached', value, settings.limit); + settings.onChange.call(element, value); + } + module.update.display(value); + } + }, + + update: { + display: function(value) { + value = value || module.get.count(); + if($displays.length > 0) { + module.debug('Updating displayed view count', $displays); + $displays.html(value); + } + } + }, + + store: function(key, value) { + var + options = module.get.storageOptions(value) + ; + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { + window.localStorage.setItem(key, value); + module.debug('Value stored using local storage', key, value); + } + else if($.cookie !== undefined) { + $.cookie(key, value, options); + module.debug('Value stored using cookie', key, value, options); + } + else { + module.error(error.noCookieStorage); + return; + } + if(key == settings.key.count) { + module.check.limit(value); + } + }, + retrieve: function(key, value) { + var + storedValue + ; + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { + storedValue = window.localStorage.getItem(key); + } + // get by cookie + else if($.cookie !== undefined) { + storedValue = $.cookie(key); + } + else { + module.error(error.noCookieStorage); + } + if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) { + storedValue = undefined; + } + return storedValue; + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + 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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.visit.settings = { + + name : 'Visit', + + debug : false, + verbose : false, + performance : true, + + namespace : 'visit', + + increment : false, + surpass : false, + count : false, + limit : false, + + delimiter : '&', + storageMethod : 'localstorage', + + key : { + count : 'visit-count', + ids : 'visit-ids' + }, + + expires : 30, + domain : false, + path : '/', + + onLimit : function() {}, + onChange : function() {}, + + error : { + method : 'The method you called is not defined', + missingPersist : 'Using the persist setting requires the inclusion of PersistJS', + noCookieStorage : 'The default storage cookie requires $.cookie to be included.' + } + +}; + +})( jQuery, window, document ); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/collections/breadcrumb.less b/ui/app/bower_components/semantic-ui/src/definitions/collections/breadcrumb.less new file mode 100755 index 00000000..73a6f636 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/collections/breadcrumb.less @@ -0,0 +1,123 @@ +/*! + * # Semantic UI - Breadcrumb + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'breadcrumb'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Breadcrumb +*******************************/ + +.ui.breadcrumb { + line-height: 1; + display: @display; + margin: @verticalMargin 0em; + vertical-align: @verticalAlign; +} +.ui.breadcrumb:first-child { + margin-top: 0em; +} +.ui.breadcrumb:last-child { + margin-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* Divider */ +.ui.breadcrumb .divider { + display: inline-block; + opacity: @dividerOpacity; + margin: 0em @dividerSpacing 0em; + + font-size: @dividerSize; + color: @dividerColor; + vertical-align: @dividerVerticalAlign; +} + +/* Link */ +.ui.breadcrumb a { + color: @linkColor; +} +.ui.breadcrumb a:hover { + color: @linkHoverColor; +} + + +/* Icon Divider */ +.ui.breadcrumb .icon.divider { + font-size: @iconDividerSize; + vertical-align: @iconDividerVerticalAlign; +} + +/* Section */ +.ui.breadcrumb a.section { + cursor: pointer; +} +.ui.breadcrumb .section { + display: inline-block; + margin: @sectionMargin; + padding: @sectionPadding; +} + +/* Loose Coupling */ +.ui.breadcrumb.segment { + display: inline-block; + padding: @segmentPadding; +} + +/******************************* + States +*******************************/ + +.ui.breadcrumb .active.section { + font-weight: @activeFontWeight; +} + + +/******************************* + Variations +*******************************/ + +.ui.mini.breadcrumb { + font-size: @mini; +} +.ui.tiny.breadcrumb { + font-size: @tiny; +} +.ui.small.breadcrumb { + font-size: @small; +} +.ui.breadcrumb { + font-size: @medium; +} +.ui.large.breadcrumb { + font-size: @large; +} +.ui.big.breadcrumb { + font-size: @big; +} +.ui.huge.breadcrumb { + font-size: @huge; +} +.ui.massive.breadcrumb { + font-size: @massive; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/collections/form.less b/ui/app/bower_components/semantic-ui/src/definitions/collections/form.less new file mode 100755 index 00000000..c8d96031 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/collections/form.less @@ -0,0 +1,1039 @@ +/*! + * # Semantic UI - Form + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'form'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Elements +*******************************/ + +/*-------------------- + Form +---------------------*/ + +.ui.form { + position: relative; + max-width: 100%; +} + +/*-------------------- + Content +---------------------*/ + +.ui.form > p { + margin: @paragraphMargin; +} + +/*-------------------- + Field +---------------------*/ + +.ui.form .field { + clear: both; + margin: @fieldMargin; +} + +.ui.form .field:last-child, +.ui.form .fields:last-child .field { + margin-bottom: 0em; +} + +.ui.form .fields .field { + clear: both; + margin: @fieldMargin; +} + + +/*-------------------- + Labels +---------------------*/ + +.ui.form .field > label { + display: block; + margin: @labelMargin; + color: @labelColor; + font-size: @labelFontSize; + font-weight: @labelFontWeight; + text-transform: @labelTextTransform; +} + +/*-------------------- + Standard Inputs +---------------------*/ + + +.ui.form textarea, +.ui.form input:not([type]), +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="url"] { + width: @inputWidth; + vertical-align: top; +} + +/* Set max height on unusual input */ +.ui.form ::-webkit-datetime-edit, +.ui.form ::-webkit-inner-spin-button { + height: @inputLineHeight; +} + +.ui.form input:not([type]), +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="url"] { + font-family: @inputFont; + margin: 0em; + outline: none; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + + line-height: @inputLineHeight; + padding: @inputPadding; + font-size: @inputFontSize; + + background: @inputBackground; + border: @inputBorder; + color: @inputColor; + border-radius: @inputBorderRadius; + box-shadow: @inputBoxShadow; + transition: @inputTransition; +} + +/* Text Area */ +.ui.form textarea { + margin: 0em; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + + padding: @textAreaPadding; + font-size: @textAreaFontSize; + background: @textAreaBackground; + border: @textAreaBorder; + outline: none; + color: @inputColor; + border-radius: @inputBorderRadius; + box-shadow: @inputBoxShadow; + transition: @textAreaTransition; + font-size: @textAreaFontSize; + line-height: @textAreaLineHeight; + resize: @textAreaResize; +} +.ui.form textarea:not([rows]) { + height: @textAreaHeight; + min-height: @textAreaMinHeight; + max-height: @textAreaMaxHeight; +} + +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: @checkboxVerticalAlign; +} + +/*-------------------------- + Input w/ attached Button +---------------------------*/ + +.ui.form input.attached { + width: auto; +} + + +/*-------------------- + Basic Select +---------------------*/ + +.ui.form select { + display: block; + height: auto; + width: 100%; + background: @selectBackground; + border: @selectBorder; + border-radius: @selectBorderRadius; + box-shadow: @selectBoxShadow; + padding: @selectPadding; + color: @selectColor; + transition: @selectTransition; +} + +/*-------------------- + Dropdown +---------------------*/ + +/* Block */ +.ui.form .field > .selection.dropdown { + width: 100%; +} +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +/* Inline */ +.ui.form .inline.fields .field > .selection.dropdown, +.ui.form .inline.field > .selection.dropdown { + width: auto; +} +.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, +.ui.form .inline.field > .selection.dropdown > .dropdown.icon { + float: none; +} + +/*-------------------- + UI Input +---------------------*/ + +/* Block */ +.ui.form .field .ui.input, +.ui.form .fields .field .ui.input, +.ui.form .wide.field .ui.input { + width: 100%; +} + +/* Inline */ +.ui.form .inline.fields .field:not(.wide) .ui.input, +.ui.form .inline.field:not(.wide) .ui.input { + width: auto; + vertical-align: middle; +} + +/* Auto Input */ +.ui.form .fields .field .ui.input input, +.ui.form .field .ui.input input { + width: auto; +} + +/* Full Width Input */ +.ui.form .ten.fields .ui.input input, +.ui.form .nine.fields .ui.input input, +.ui.form .eight.fields .ui.input input, +.ui.form .seven.fields .ui.input input, +.ui.form .six.fields .ui.input input, +.ui.form .five.fields .ui.input input, +.ui.form .four.fields .ui.input input, +.ui.form .three.fields .ui.input input, +.ui.form .two.fields .ui.input input, +.ui.form .wide.field .ui.input input { + flex: 1 0 auto; + width: 0px; +} + + +/*-------------------- + Types of Messages +---------------------*/ + +.ui.form .success.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: normal; + background: @promptBackground !important; + border: @promptBorder !important; + color: @promptTextColor !important; +} +.ui.form .inline.fields .field .prompt, +.ui.form .inline.field .prompt { + vertical-align: top; + margin: @inlinePromptMargin; +} +.ui.form .inline.fields .field .prompt:before, +.ui.form .inline.field .prompt:before { + border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Autofilled +---------------------*/ + +.ui.form .field.field input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important; + border-color: @inputAutoFillBorder !important; +} + +/* Focus */ +.ui.form .field.field input:-webkit-autofill:focus { + box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important; + border-color: @inputAutoFillFocusBorder !important; +} + +/* Error */ +.ui.form .error.error input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important; + border-color: @inputAutoFillErrorBorder !important; +} + + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: @inputPlaceholderColor; +} +.ui.form ::-ms-input-placeholder { + color: @inputPlaceholderColor; +} +.ui.form ::-moz-placeholder { + color: @inputPlaceholderColor; +} + +.ui.form :focus::-webkit-input-placeholder { + color: @inputPlaceholderFocusColor; +} +.ui.form :focus::-ms-input-placeholder { + color: @inputPlaceholderFocusColor; +} +.ui.form :focus::-moz-placeholder { + color: @inputPlaceholderFocusColor; +} + +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: @inputErrorPlaceholderColor; +} +.ui.form .error ::-ms-input-placeholder { + color: @inputErrorPlaceholderColor; +} +.ui.form .error ::-moz-placeholder { + color: @inputErrorPlaceholderColor; +} + +.ui.form .error :focus::-webkit-input-placeholder { + color: @inputErrorPlaceholderFocusColor; +} +.ui.form .error :focus::-ms-input-placeholder { + color: @inputErrorPlaceholderFocusColor; +} +.ui.form .error :focus::-moz-placeholder { + color: @inputErrorPlaceholderFocusColor; +} + + +/*-------------------- + Focus +---------------------*/ + +.ui.form input:not([type]):focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="datetime-local"]:focus, +.ui.form input[type="email"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="url"]:focus { + color: @inputFocusColor; + border-color: @inputFocusBorderColor; + border-radius: @inputFocusBorderRadius; + background: @inputFocusBackground; + box-shadow: @inputFocusBoxShadow; +} +.ui.form textarea:focus { + color: @textAreaFocusColor; + border-color: @textAreaFocusBorderColor; + border-radius: @textAreaFocusBorderRadius; + background: @textAreaFocusBackground; + box-shadow: @textAreaFocusBoxShadow; + -webkit-appearance: none; +} + + +/*-------------------- + Success +---------------------*/ + +/* On Form */ +.ui.form.success .success.message:not(:empty) { + display: block; +} +.ui.form.success .icon.success.message:not(:empty) { + display: flex; +} + +/*-------------------- + Warning +---------------------*/ + +/* On Form */ +.ui.form.warning .warning.message:not(:empty) { + display: block; +} +.ui.form.warning .icon.warning.message:not(:empty) { + display: flex; +} + +/*-------------------- + Error +---------------------*/ + +/* On Form */ +.ui.form.error .error.message:not(:empty) { + display: block; +} +.ui.form.error .icon.error.message:not(:empty) { + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.error .field label, +.ui.form .field.error label, +.ui.form .fields.error .field .input, +.ui.form .field.error .input { + color: @formErrorColor; +} + +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: @formErrorColor; + color: @white; +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="datetime-local"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="search"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="url"], +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="datetime-local"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="search"], +.ui.form .field.error input[type="tel"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="url"] { + background: @formErrorBackground; + border-color: @formErrorBorder; + color: @formErrorColor; + border-radius: @inputErrorBorderRadius; + box-shadow: @inputErrorBoxShadow; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="datetime-local"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="search"]:focus, +.ui.form .field.error input[type="tel"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="url"]:focus { + background: @inputErrorFocusBackground; + border-color: @inputErrorFocusBorder; + color: @inputErrorFocusColor; + + -webkit-appearance: none; + box-shadow: @inputErrorFocusBoxShadow; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.error select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Dropdown Error +--------------------*/ + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item { + background: @formErrorBackground; + color: @formErrorColor; +} +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown { + border-color: @formErrorBorder !important; +} +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: @formErrorBorder !important; +} +.ui.form .fields.error .field .ui.dropdown:hover .menu, +.ui.form .field.error .ui.dropdown:hover .menu { + border-color: @formErrorBorder; +} +.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.error .ui.multiple.selection.dropdown > .label { + background-color: @dropdownErrorLabelBackground; + color: @dropdownErrorLabelColor; +} + +/* Hover */ +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: @dropdownErrorHoverBackground; +} + +/* Selected */ +.ui.form .fields.error .field .ui.dropdown .menu .selected.item, +.ui.form .field.error .ui.dropdown .menu .selected.item { + background-color: @dropdownErrorSelectedBackground; +} + + +/* Active */ +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: @dropdownErrorActiveBackground !important; +} + +/*-------------------- + Checkbox Error +---------------------*/ + +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { + color: @formErrorColor; +} +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { + background: @formErrorBackground; + border-color: @formErrorBorder; +} +.ui.form .fields.error .field .checkbox label:after, +.ui.form .field.error .checkbox label:after, +.ui.form .fields.error .field .checkbox .box:after, +.ui.form .field.error .checkbox .box:after { + color: @formErrorColor; +} + +/*-------------------- + Disabled +---------------------*/ + +.ui.form .disabled.fields .field, +.ui.form .disabled.field, +.ui.form .field :disabled { + pointer-events: none; + opacity: @disabledOpacity; +} +.ui.form .field.disabled label { + opacity: @disabledLabelOpacity; +} +.ui.form .field.disabled :disabled { + opacity: 1; +} + + +/*-------------- + Loading +---------------*/ + +.ui.loading.form { + position: relative; + cursor: default; + point-events: none; +} +.ui.loading.form:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + z-index: @loaderDimmerZIndex; +} +.ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: form-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; +} + +@keyframes form-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/******************************* + Element Types +*******************************/ + +/*-------------------- + Required Field +---------------------*/ + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after, +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + margin: @requiredMargin; + content: @requiredContent; + color: @requiredColor; +} + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after { + display: inline-block; + vertical-align: top; +} + +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + position: absolute; + top: 0%; + left: 100%; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Inverted Colors +---------------------*/ + +.ui.inverted.form label, +.ui.form .inverted.segment label, +.ui.form .inverted.segment .ui.checkbox label, +.ui.form .inverted.segment .ui.checkbox .box, +.ui.inverted.form .ui.checkbox label, +.ui.inverted.form .ui.checkbox .box { + color: @invertedLabelColor; +} + +/* Inverted Field */ +.ui.inverted.form input:not([type]), +.ui.inverted.form input[type="date"], +.ui.inverted.form input[type="datetime-local"], +.ui.inverted.form input[type="email"], +.ui.inverted.form input[type="number"], +.ui.inverted.form input[type="password"], +.ui.inverted.form input[type="search"], +.ui.inverted.form input[type="tel"], +.ui.inverted.form input[type="time"], +.ui.inverted.form input[type="text"], +.ui.inverted.form input[type="url"] { + background: @invertedInputBackground; + border-color: @invertedInputBorderColor; + color: @invertedInputColor; + box-shadow: @invertedInputBoxShadow; +} + + +/*-------------------- + Field Groups +---------------------*/ + +/* Grouped Vertically */ +.ui.form .grouped.fields { + display: block; + margin: @groupedMargin; +} +.ui.form .grouped.fields:last-child { + margin-bottom: 0em; +} + +.ui.form .grouped.fields > label { + margin: @groupedLabelMargin; + color: @groupedLabelColor; + font-size: @groupedLabelFontSize; + font-weight: @groupedLabelFontWeight; + text-transform: @groupedLabelTextTransform; +} + +.ui.form .grouped.fields .field, +.ui.form .grouped.inline.fields .field { + display: block; + margin: @groupedFieldMargin; + padding: 0em; +} + +/*-------------------- + Fields +---------------------*/ + +/* Split fields */ +.ui.form .fields { + display: flex; + flex-direction: row; +} +.ui.form .fields > .field { + flex: 0 1 auto; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} +.ui.form .fields > .field:first-child { + border-left: none; + box-shadow: none; +} + +/* Other Combinations */ +.ui.form .two.fields > .fields, +.ui.form .two.fields > .field { + width: @twoColumn; +} +.ui.form .three.fields > .fields, +.ui.form .three.fields > .field { + width: @threeColumn; +} +.ui.form .four.fields > .fields, +.ui.form .four.fields > .field { + width: @fourColumn; +} +.ui.form .five.fields > .fields, +.ui.form .five.fields > .field { + width: @fiveColumn; +} +.ui.form .six.fields > .fields, +.ui.form .six.fields > .field { + width: @sixColumn; +} +.ui.form .seven.fields > .fields, +.ui.form .seven.fields > .field { + width: @sevenColumn; +} +.ui.form .eight.fields > .fields, +.ui.form .eight.fields > .field { + width: @eightColumn; +} +.ui.form .nine.fields > .fields, +.ui.form .nine.fields > .field { + width: @nineColumn; +} +.ui.form .ten.fields > .fields, +.ui.form .ten.fields > .field { + width: @tenColumn; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.form .fields { + flex-wrap: wrap; + } + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .six.fields > .fields, + .ui.form .six.fields > .field, + .ui.form .seven.fields > .fields, + .ui.form .seven.fields > .field, + .ui.form .eight.fields > .fields, + .ui.form .eight.fields > .field, + .ui.form .nine.fields > .fields, + .ui.form .nine.fields > .field, + .ui.form .ten.fields > .fields, + .ui.form .ten.fields > .field { + width: @oneColumn !important; + margin: @fieldMargin; + padding-left: 0%; + padding-right: 0%; + } +} + +.ui.form .fields .field:first-child { + padding-left: 0%; +} +.ui.form .fields .field:last-child { + padding-right: 0%; +} + + +/* Sizing Combinations */ +.ui.form .fields .wide.field { + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} +.ui.form .fields .wide.field:first-child { + padding-left: 0%; +} +.ui.form .fields .wide.field:last-child { + padding-right: 0%; +} + +.ui.form .one.wide.field { + width: @oneWide !important; +} +.ui.form .two.wide.field { + width: @twoWide !important; +} +.ui.form .three.wide.field { + width: @threeWide !important; +} +.ui.form .four.wide.field { + width: @fourWide !important; +} +.ui.form .five.wide.field { + width: @fiveWide !important; +} +.ui.form .six.wide.field { + width: @sixWide !important; +} +.ui.form .seven.wide.field { + width: @sevenWide !important; +} +.ui.form .eight.wide.field { + width: @eightWide !important; +} +.ui.form .nine.wide.field { + width: @nineWide !important; +} +.ui.form .ten.wide.field { + width: @tenWide !important; +} +.ui.form .eleven.wide.field { + width: @elevenWide !important; +} +.ui.form .twelve.wide.field { + width: @twelveWide !important; +} +.ui.form .thirteen.wide.field { + width: @thirteenWide !important; +} +.ui.form .fourteen.wide.field { + width: @fourteenWide !important; +} +.ui.form .fifteen.wide.field { + width: @fifteenWide !important; +} +.ui.form .sixteen.wide.field { + width: @sixteenWide !important; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .fields > .two.wide.field, + .ui.form .fields > .three.wide.field, + .ui.form .fields > .four.wide.field, + .ui.form .fields > .five.wide.field, + .ui.form .fields > .six.wide.field, + .ui.form .fields > .seven.wide.field, + .ui.form .fields > .eight.wide.field, + .ui.form .fields > .nine.wide.field, + .ui.form .fields > .ten.wide.field, + .ui.form .fields > .eleven.wide.field, + .ui.form .fields > .twelve.wide.field, + .ui.form .fields > .thirteen.wide.field, + .ui.form .fields > .fourteen.wide.field, + .ui.form .fields > .fifteen.wide.field, + .ui.form .fields > .sixteen.wide.field { + width: @oneColumn !important; + margin: @fieldMargin; + padding-left: 0%; + padding-right: 0%; + } +} + +/*-------------------- + Equal Width +---------------------*/ + +.ui[class*="equal width"].form .fields > .field, +.ui.form [class*="equal width"].fields > .field { + width: 100%; + flex: 1 1 auto; +} + +/*-------------------- + Inline Fields +---------------------*/ + +.ui.form .inline.fields { + margin: @fieldMargin; + align-items: center; +} +.ui.form .inline.fields .field { + margin: 0em; + padding: @inlineFieldsMargin; +} + +/* Inline Label */ +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: baseline; + font-size: @inlineLabelFontSize; + font-weight: @inlineLabelFontWeight; + color: @inlineLabelColor; + text-transform: @inlineLabelTextTransform; +} + +/* Grouped Inline Label */ +.ui.form .inline.fields > label { + margin: @groupedInlineLabelMargin; +} + +/* Inline Input */ +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.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: @inlineInputSize; +} + +/* Label */ +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em @inlineLabelDistance 0em 0em; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} + +/* Wide */ +.ui.form .inline.fields .wide.field { + display: flex; + align-items: center; +} +.ui.form .inline.fields .wide.field > input, +.ui.form .inline.fields .wide.field > select { + width: 100%; +} + + +/*-------------------- + Sizes +---------------------*/ + +/* Standard */ +.ui.small.form { + font-size: @small; +} + +/* Medium */ +.ui.form { + font-size: @medium; +} + +/* Large */ +.ui.large.form { + font-size: @large; +} + +/* Huge */ +.ui.huge.form { + font-size: @huge; +} + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/collections/grid.less b/ui/app/bower_components/semantic-ui/src/definitions/collections/grid.less new file mode 100755 index 00000000..d206a3e6 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/collections/grid.less @@ -0,0 +1,1913 @@ +/*! + * # Semantic UI - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'grid'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +.ui.grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + padding: 0em; +} + +/*---------------------- + Remove Gutters +-----------------------*/ + +.ui.grid { + margin-top: -(@rowSpacing / 2); + margin-bottom: -(@rowSpacing / 2); + margin-left: -(@gutterWidth / 2); + margin-right: -(@gutterWidth / 2); +} +.ui.relaxed.grid { + margin-left: -(@relaxedGutterWidth / 2); + margin-right: -(@relaxedGutterWidth / 2); +} +.ui[class*="very relaxed"].grid { + margin-left: -(@veryRelaxedGutterWidth / 2); + margin-right: -(@veryRelaxedGutterWidth / 2); +} + + +/* Preserve Rows Spacing on Consecutive Grids */ +.ui.grid + .grid { + margin-top: @consecutiveGridDistance; +} + +/*------------------- + Columns +--------------------*/ + +/* Standard 16 column */ +.ui.grid > .column:not(.row), +.ui.grid > .row > .column { + position: relative; + display: inline-block; + + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); + vertical-align: top; +} + +.ui.grid > * { + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} + +/*------------------- + Rows +--------------------*/ + +.ui.grid > .row { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: inherit; + align-items: stretch; + width: 100% !important; + padding: 0rem; + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} + +/*------------------- + Columns +--------------------*/ + +/* Vertical padding when no rows */ +.ui.grid > .column:not(.row) { + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} +.ui.grid > .row > .column { + margin-top: 0em; + margin-bottom: 0em; +} + +/*------------------- + Content +--------------------*/ + +.ui.grid > .row > img, +.ui.grid > .row > .column > img { + max-width: @columnMaxImageWidth; +} + +/*------------------- + Loose Coupling +--------------------*/ + +/* Collapse Margin on Consecutive Grid */ +.ui.grid > .ui.grid:first-child { + margin-top: 0em; +} +.ui.grid > .ui.grid:last-child { + margin-bottom: 0em; +} + +/* Segment inside Aligned Grid */ +.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), +.ui.aligned.grid .column > .segment:not(.compact):not(.attached) { + width: 100%; +} + +/* Align Dividers with Gutter */ +.ui.grid .row + .ui.divider { + flex-grow: 1; + margin: (@rowSpacing / 2) (@gutterWidth / 2); +} +.ui.grid .column + .ui.vertical.divider { + height: ~"calc(50% - "(@rowSpacing/2)~")"; +} + +/* Remove Border on Last Horizontal Segment */ +.ui.grid > .row > .column:last-child > .horizontal.segment, +.ui.grid > .column:last-child > .horizontal.segment { + box-shadow: none; +} + +/******************************* + Variations +*******************************/ + + +/*----------------------- + Page Grid +-------------------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.page.grid { + width: @mobileWidth; + padding-left: @mobileGutter; + padding-right: @mobileGutter; + margin-left: 0em; + margin-right: 0em; + } +} +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.page.grid { + width: @tabletWidth; + margin-left: @tabletMargin; + margin-right: @tabletMargin; + padding-left: @tabletGutter; + padding-right: @tabletGutter; + } +} +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.page.grid { + width: @computerWidth; + margin-left: @computerMargin; + margin-right: @computerMargin; + padding-left: @computerGutter; + padding-right: @computerGutter; + } +} +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { + .ui.page.grid { + width: @largeMonitorWidth; + margin-left: @largeMonitorMargin; + margin-right: @largeMonitorMargin; + padding-left: @largeMonitorGutter; + padding-right: @largeMonitorGutter; + } +} +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.page.grid { + width: @widescreenMonitorWidth; + margin-left: @widescreenMargin; + margin-right: @widescreenMargin; + padding-left: @widescreenMonitorGutter; + padding-right: @widescreenMonitorGutter; + } +} + + +/*------------------- + Column Count +--------------------*/ + +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: @oneColumn; +} + +/* Grid Based */ +.ui[class*="one column"].grid > .row > .column, +.ui[class*="one column"].grid > .column:not(.row) { + width: @oneColumn; +} +.ui[class*="two column"].grid > .row > .column, +.ui[class*="two column"].grid > .column:not(.row) { + width: @twoColumn; +} +.ui[class*="three column"].grid > .row > .column, +.ui[class*="three column"].grid > .column:not(.row) { + width: @threeColumn; +} +.ui[class*="four column"].grid > .row > .column, +.ui[class*="four column"].grid > .column:not(.row) { + width: @fourColumn; +} +.ui[class*="five column"].grid > .row > .column, +.ui[class*="five column"].grid > .column:not(.row) { + width: @fiveColumn; +} +.ui[class*="six column"].grid > .row > .column, +.ui[class*="six column"].grid > .column:not(.row) { + width: @sixColumn; +} +.ui[class*="seven column"].grid > .row > .column, +.ui[class*="seven column"].grid > .column:not(.row) { + width: @sevenColumn; +} +.ui[class*="eight column"].grid > .row > .column, +.ui[class*="eight column"].grid > .column:not(.row) { + width: @eightColumn; +} +.ui[class*="nine column"].grid > .row > .column, +.ui[class*="nine column"].grid > .column:not(.row) { + width: @nineColumn; +} +.ui[class*="ten column"].grid > .row > .column, +.ui[class*="ten column"].grid > .column:not(.row) { + width: @tenColumn; +} +.ui[class*="eleven column"].grid > .row > .column, +.ui[class*="eleven column"].grid > .column:not(.row) { + width: @elevenColumn; +} +.ui[class*="twelve column"].grid > .row > .column, +.ui[class*="twelve column"].grid > .column:not(.row) { + width: @twelveColumn; +} +.ui[class*="thirteen column"].grid > .row > .column, +.ui[class*="thirteen column"].grid > .column:not(.row) { + width: @thirteenColumn; +} +.ui[class*="fourteen column"].grid > .row > .column, +.ui[class*="fourteen column"].grid > .column:not(.row) { + width: @fourteenColumn; +} +.ui[class*="fifteen column"].grid > .row > .column, +.ui[class*="fifteen column"].grid > .column:not(.row) { + width: @fifteenColumn; +} +.ui[class*="sixteen column"].grid > .row > .column, +.ui[class*="sixteen column"].grid > .column:not(.row) { + width: @sixteenColumn; +} + +/* Row Based Overrides */ +.ui.grid > [class*="one column"].row > .column { + width: @oneColumn !important; +} +.ui.grid > [class*="two column"].row > .column { + width: @twoColumn !important; +} +.ui.grid > [class*="three column"].row > .column { + width: @threeColumn !important; +} +.ui.grid > [class*="four column"].row > .column { + width: @fourColumn !important; +} +.ui.grid > [class*="five column"].row > .column { + width: @fiveColumn !important; +} +.ui.grid > [class*="six column"].row > .column { + width: @sixColumn !important; +} +.ui.grid > [class*="seven column"].row > .column { + width: @sevenColumn !important; +} +.ui.grid > [class*="eight column"].row > .column { + width: @eightColumn !important; +} +.ui.grid > [class*="nine column"].row > .column { + width: @nineColumn !important; +} +.ui.grid > [class*="ten column"].row > .column { + width: @tenColumn !important; +} +.ui.grid > [class*="eleven column"].row > .column { + width: @elevenColumn !important; +} +.ui.grid > [class*="twelve column"].row > .column { + width: @twelveColumn !important; +} +.ui.grid > [class*="thirteen column"].row > .column { + width: @thirteenColumn !important; +} +.ui.grid > [class*="fourteen column"].row > .column { + width: @fourteenColumn !important; +} +.ui.grid > [class*="fifteen column"].row > .column { + width: @fifteenColumn !important; +} +.ui.grid > [class*="sixteen column"].row > .column { + width: @sixteenColumn !important; +} + +/* Celled Page */ +.ui.celled.page.grid { + box-shadow: none; +} + +/*------------------- + Column Width +--------------------*/ + +/* Sizing Combinations */ +.ui.grid > .row > [class*="one wide"].column, +.ui.grid > .column.row > [class*="one wide"].column, +.ui.grid > [class*="one wide"].column, +.ui.column.grid > [class*="one wide"].column { + width: @oneWide !important; +} +.ui.grid > .row > [class*="two wide"].column, +.ui.grid > .column.row > [class*="two wide"].column, +.ui.grid > [class*="two wide"].column, +.ui.column.grid > [class*="two wide"].column { + width: @twoWide !important; +} +.ui.grid > .row > [class*="three wide"].column, +.ui.grid > .column.row > [class*="three wide"].column, +.ui.grid > [class*="three wide"].column, +.ui.column.grid > [class*="three wide"].column { + width: @threeWide !important; +} +.ui.grid > .row > [class*="four wide"].column, +.ui.grid > .column.row > [class*="four wide"].column, +.ui.grid > [class*="four wide"].column, +.ui.column.grid > [class*="four wide"].column { + width: @fourWide !important; +} +.ui.grid > .row > [class*="five wide"].column, +.ui.grid > .column.row > [class*="five wide"].column, +.ui.grid > [class*="five wide"].column, +.ui.column.grid > [class*="five wide"].column { + width: @fiveWide !important; +} +.ui.grid > .row > [class*="six wide"].column, +.ui.grid > .column.row > [class*="six wide"].column, +.ui.grid > [class*="six wide"].column, +.ui.column.grid > [class*="six wide"].column { + width: @sixWide !important; +} +.ui.grid > .row > [class*="seven wide"].column, +.ui.grid > .column.row > [class*="seven wide"].column, +.ui.grid > [class*="seven wide"].column, +.ui.column.grid > [class*="seven wide"].column { + width: @sevenWide !important; +} +.ui.grid > .row > [class*="eight wide"].column, +.ui.grid > .column.row > [class*="eight wide"].column, +.ui.grid > [class*="eight wide"].column, +.ui.column.grid > [class*="eight wide"].column { + width: @eightWide !important; +} +.ui.grid > .row > [class*="nine wide"].column, +.ui.grid > .column.row > [class*="nine wide"].column, +.ui.grid > [class*="nine wide"].column, +.ui.column.grid > [class*="nine wide"].column { + width: @nineWide !important; +} +.ui.grid > .row > [class*="ten wide"].column, +.ui.grid > .column.row > [class*="ten wide"].column, +.ui.grid > [class*="ten wide"].column, +.ui.column.grid > [class*="ten wide"].column { + width: @tenWide !important; +} +.ui.grid > .row > [class*="eleven wide"].column, +.ui.grid > .column.row > [class*="eleven wide"].column, +.ui.grid > [class*="eleven wide"].column, +.ui.column.grid > [class*="eleven wide"].column { + width: @elevenWide !important; +} +.ui.grid > .row > [class*="twelve wide"].column, +.ui.grid > .column.row > [class*="twelve wide"].column, +.ui.grid > [class*="twelve wide"].column, +.ui.column.grid > [class*="twelve wide"].column { + width: @twelveWide !important; +} +.ui.grid > .row > [class*="thirteen wide"].column, +.ui.grid > .column.row > [class*="thirteen wide"].column, +.ui.grid > [class*="thirteen wide"].column, +.ui.column.grid > [class*="thirteen wide"].column { + width: @thirteenWide !important; +} +.ui.grid > .row > [class*="fourteen wide"].column, +.ui.grid > .column.row > [class*="fourteen wide"].column, +.ui.grid > [class*="fourteen wide"].column, +.ui.column.grid > [class*="fourteen wide"].column { + width: @fourteenWide !important; +} +.ui.grid > .row > [class*="fifteen wide"].column, +.ui.grid > .column.row > [class*="fifteen wide"].column, +.ui.grid > [class*="fifteen wide"].column, +.ui.column.grid > [class*="fifteen wide"].column { + width: @fifteenWide !important; +} +.ui.grid > .row > [class*="sixteen wide"].column, +.ui.grid > .column.row > [class*="sixteen wide"].column, +.ui.grid > [class*="sixteen wide"].column, +.ui.column.grid > [class*="sixteen wide"].column { + width: @sixteenWide !important; +} + +/*---------------------- + Width per Device +-----------------------*/ + +/* Mobile Sizing Combinations */ +@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) { + .ui.grid > .row > [class*="one wide mobile"].column, + .ui.grid > .column.row > [class*="one wide mobile"].column, + .ui.grid > [class*="one wide mobile"].column, + .ui.column.grid > [class*="one wide mobile"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide mobile"].column, + .ui.grid > .column.row > [class*="two wide mobile"].column, + .ui.grid > [class*="two wide mobile"].column, + .ui.column.grid > [class*="two wide mobile"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide mobile"].column, + .ui.grid > .column.row > [class*="three wide mobile"].column, + .ui.grid > [class*="three wide mobile"].column, + .ui.column.grid > [class*="three wide mobile"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide mobile"].column, + .ui.grid > .column.row > [class*="four wide mobile"].column, + .ui.grid > [class*="four wide mobile"].column, + .ui.column.grid > [class*="four wide mobile"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide mobile"].column, + .ui.grid > .column.row > [class*="five wide mobile"].column, + .ui.grid > [class*="five wide mobile"].column, + .ui.column.grid > [class*="five wide mobile"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide mobile"].column, + .ui.grid > .column.row > [class*="six wide mobile"].column, + .ui.grid > [class*="six wide mobile"].column, + .ui.column.grid > [class*="six wide mobile"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide mobile"].column, + .ui.grid > .column.row > [class*="seven wide mobile"].column, + .ui.grid > [class*="seven wide mobile"].column, + .ui.column.grid > [class*="seven wide mobile"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide mobile"].column, + .ui.grid > .column.row > [class*="eight wide mobile"].column, + .ui.grid > [class*="eight wide mobile"].column, + .ui.column.grid > [class*="eight wide mobile"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide mobile"].column, + .ui.grid > .column.row > [class*="nine wide mobile"].column, + .ui.grid > [class*="nine wide mobile"].column, + .ui.column.grid > [class*="nine wide mobile"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide mobile"].column, + .ui.grid > .column.row > [class*="ten wide mobile"].column, + .ui.grid > [class*="ten wide mobile"].column, + .ui.column.grid > [class*="ten wide mobile"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide mobile"].column, + .ui.grid > .column.row > [class*="eleven wide mobile"].column, + .ui.grid > [class*="eleven wide mobile"].column, + .ui.column.grid > [class*="eleven wide mobile"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide mobile"].column, + .ui.grid > .column.row > [class*="twelve wide mobile"].column, + .ui.grid > [class*="twelve wide mobile"].column, + .ui.column.grid > [class*="twelve wide mobile"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide mobile"].column, + .ui.grid > .column.row > [class*="thirteen wide mobile"].column, + .ui.grid > [class*="thirteen wide mobile"].column, + .ui.column.grid > [class*="thirteen wide mobile"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide mobile"].column, + .ui.grid > .column.row > [class*="fourteen wide mobile"].column, + .ui.grid > [class*="fourteen wide mobile"].column, + .ui.column.grid > [class*="fourteen wide mobile"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide mobile"].column, + .ui.grid > .column.row > [class*="fifteen wide mobile"].column, + .ui.grid > [class*="fifteen wide mobile"].column, + .ui.column.grid > [class*="fifteen wide mobile"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide mobile"].column, + .ui.grid > .column.row > [class*="sixteen wide mobile"].column, + .ui.grid > [class*="sixteen wide mobile"].column, + .ui.column.grid > [class*="sixteen wide mobile"].column { + width: @sixteenWide !important; + } +} + +/* Tablet Sizing Combinations */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.grid > .row > [class*="one wide tablet"].column, + .ui.grid > .column.row > [class*="one wide tablet"].column, + .ui.grid > [class*="one wide tablet"].column, + .ui.column.grid > [class*="one wide tablet"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide tablet"].column, + .ui.grid > .column.row > [class*="two wide tablet"].column, + .ui.grid > [class*="two wide tablet"].column, + .ui.column.grid > [class*="two wide tablet"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide tablet"].column, + .ui.grid > .column.row > [class*="three wide tablet"].column, + .ui.grid > [class*="three wide tablet"].column, + .ui.column.grid > [class*="three wide tablet"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide tablet"].column, + .ui.grid > .column.row > [class*="four wide tablet"].column, + .ui.grid > [class*="four wide tablet"].column, + .ui.column.grid > [class*="four wide tablet"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide tablet"].column, + .ui.grid > .column.row > [class*="five wide tablet"].column, + .ui.grid > [class*="five wide tablet"].column, + .ui.column.grid > [class*="five wide tablet"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide tablet"].column, + .ui.grid > .column.row > [class*="six wide tablet"].column, + .ui.grid > [class*="six wide tablet"].column, + .ui.column.grid > [class*="six wide tablet"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide tablet"].column, + .ui.grid > .column.row > [class*="seven wide tablet"].column, + .ui.grid > [class*="seven wide tablet"].column, + .ui.column.grid > [class*="seven wide tablet"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide tablet"].column, + .ui.grid > .column.row > [class*="eight wide tablet"].column, + .ui.grid > [class*="eight wide tablet"].column, + .ui.column.grid > [class*="eight wide tablet"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide tablet"].column, + .ui.grid > .column.row > [class*="nine wide tablet"].column, + .ui.grid > [class*="nine wide tablet"].column, + .ui.column.grid > [class*="nine wide tablet"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide tablet"].column, + .ui.grid > .column.row > [class*="ten wide tablet"].column, + .ui.grid > [class*="ten wide tablet"].column, + .ui.column.grid > [class*="ten wide tablet"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide tablet"].column, + .ui.grid > .column.row > [class*="eleven wide tablet"].column, + .ui.grid > [class*="eleven wide tablet"].column, + .ui.column.grid > [class*="eleven wide tablet"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide tablet"].column, + .ui.grid > .column.row > [class*="twelve wide tablet"].column, + .ui.grid > [class*="twelve wide tablet"].column, + .ui.column.grid > [class*="twelve wide tablet"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide tablet"].column, + .ui.grid > .column.row > [class*="thirteen wide tablet"].column, + .ui.grid > [class*="thirteen wide tablet"].column, + .ui.column.grid > [class*="thirteen wide tablet"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide tablet"].column, + .ui.grid > .column.row > [class*="fourteen wide tablet"].column, + .ui.grid > [class*="fourteen wide tablet"].column, + .ui.column.grid > [class*="fourteen wide tablet"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide tablet"].column, + .ui.grid > .column.row > [class*="fifteen wide tablet"].column, + .ui.grid > [class*="fifteen wide tablet"].column, + .ui.column.grid > [class*="fifteen wide tablet"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide tablet"].column, + .ui.grid > .column.row > [class*="sixteen wide tablet"].column, + .ui.grid > [class*="sixteen wide tablet"].column, + .ui.column.grid > [class*="sixteen wide tablet"].column { + width: @sixteenWide !important; + } +} + +/* Computer/Desktop Sizing Combinations */ +@media only screen and (min-width: @computerBreakpoint) { + .ui.grid > .row > [class*="one wide computer"].column, + .ui.grid > .column.row > [class*="one wide computer"].column, + .ui.grid > [class*="one wide computer"].column, + .ui.column.grid > [class*="one wide computer"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide computer"].column, + .ui.grid > .column.row > [class*="two wide computer"].column, + .ui.grid > [class*="two wide computer"].column, + .ui.column.grid > [class*="two wide computer"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide computer"].column, + .ui.grid > .column.row > [class*="three wide computer"].column, + .ui.grid > [class*="three wide computer"].column, + .ui.column.grid > [class*="three wide computer"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide computer"].column, + .ui.grid > .column.row > [class*="four wide computer"].column, + .ui.grid > [class*="four wide computer"].column, + .ui.column.grid > [class*="four wide computer"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide computer"].column, + .ui.grid > .column.row > [class*="five wide computer"].column, + .ui.grid > [class*="five wide computer"].column, + .ui.column.grid > [class*="five wide computer"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide computer"].column, + .ui.grid > .column.row > [class*="six wide computer"].column, + .ui.grid > [class*="six wide computer"].column, + .ui.column.grid > [class*="six wide computer"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide computer"].column, + .ui.grid > .column.row > [class*="seven wide computer"].column, + .ui.grid > [class*="seven wide computer"].column, + .ui.column.grid > [class*="seven wide computer"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide computer"].column, + .ui.grid > .column.row > [class*="eight wide computer"].column, + .ui.grid > [class*="eight wide computer"].column, + .ui.column.grid > [class*="eight wide computer"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide computer"].column, + .ui.grid > .column.row > [class*="nine wide computer"].column, + .ui.grid > [class*="nine wide computer"].column, + .ui.column.grid > [class*="nine wide computer"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide computer"].column, + .ui.grid > .column.row > [class*="ten wide computer"].column, + .ui.grid > [class*="ten wide computer"].column, + .ui.column.grid > [class*="ten wide computer"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide computer"].column, + .ui.grid > .column.row > [class*="eleven wide computer"].column, + .ui.grid > [class*="eleven wide computer"].column, + .ui.column.grid > [class*="eleven wide computer"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide computer"].column, + .ui.grid > .column.row > [class*="twelve wide computer"].column, + .ui.grid > [class*="twelve wide computer"].column, + .ui.column.grid > [class*="twelve wide computer"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide computer"].column, + .ui.grid > .column.row > [class*="thirteen wide computer"].column, + .ui.grid > [class*="thirteen wide computer"].column, + .ui.column.grid > [class*="thirteen wide computer"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide computer"].column, + .ui.grid > .column.row > [class*="fourteen wide computer"].column, + .ui.grid > [class*="fourteen wide computer"].column, + .ui.column.grid > [class*="fourteen wide computer"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide computer"].column, + .ui.grid > .column.row > [class*="fifteen wide computer"].column, + .ui.grid > [class*="fifteen wide computer"].column, + .ui.column.grid > [class*="fifteen wide computer"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide computer"].column, + .ui.grid > .column.row > [class*="sixteen wide computer"].column, + .ui.grid > [class*="sixteen wide computer"].column, + .ui.column.grid > [class*="sixteen wide computer"].column { + width: @sixteenWide !important; + } +} + +/* Large Monitor Sizing Combinations */ +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){ + .ui.grid > .row > [class*="one wide large screen"].column, + .ui.grid > .column.row > [class*="one wide large screen"].column, + .ui.grid > [class*="one wide large screen"].column, + .ui.column.grid > [class*="one wide large screen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide large screen"].column, + .ui.grid > .column.row > [class*="two wide large screen"].column, + .ui.grid > [class*="two wide large screen"].column, + .ui.column.grid > [class*="two wide large screen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide large screen"].column, + .ui.grid > .column.row > [class*="three wide large screen"].column, + .ui.grid > [class*="three wide large screen"].column, + .ui.column.grid > [class*="three wide large screen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide large screen"].column, + .ui.grid > .column.row > [class*="four wide large screen"].column, + .ui.grid > [class*="four wide large screen"].column, + .ui.column.grid > [class*="four wide large screen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide large screen"].column, + .ui.grid > .column.row > [class*="five wide large screen"].column, + .ui.grid > [class*="five wide large screen"].column, + .ui.column.grid > [class*="five wide large screen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide large screen"].column, + .ui.grid > .column.row > [class*="six wide large screen"].column, + .ui.grid > [class*="six wide large screen"].column, + .ui.column.grid > [class*="six wide large screen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide large screen"].column, + .ui.grid > .column.row > [class*="seven wide large screen"].column, + .ui.grid > [class*="seven wide large screen"].column, + .ui.column.grid > [class*="seven wide large screen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide large screen"].column, + .ui.grid > .column.row > [class*="eight wide large screen"].column, + .ui.grid > [class*="eight wide large screen"].column, + .ui.column.grid > [class*="eight wide large screen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide large screen"].column, + .ui.grid > .column.row > [class*="nine wide large screen"].column, + .ui.grid > [class*="nine wide large screen"].column, + .ui.column.grid > [class*="nine wide large screen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide large screen"].column, + .ui.grid > .column.row > [class*="ten wide large screen"].column, + .ui.grid > [class*="ten wide large screen"].column, + .ui.column.grid > [class*="ten wide large screen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide large screen"].column, + .ui.grid > .column.row > [class*="eleven wide large screen"].column, + .ui.grid > [class*="eleven wide large screen"].column, + .ui.column.grid > [class*="eleven wide large screen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide large screen"].column, + .ui.grid > .column.row > [class*="twelve wide large screen"].column, + .ui.grid > [class*="twelve wide large screen"].column, + .ui.column.grid > [class*="twelve wide large screen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide large screen"].column, + .ui.grid > .column.row > [class*="thirteen wide large screen"].column, + .ui.grid > [class*="thirteen wide large screen"].column, + .ui.column.grid > [class*="thirteen wide large screen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide large screen"].column, + .ui.grid > .column.row > [class*="fourteen wide large screen"].column, + .ui.grid > [class*="fourteen wide large screen"].column, + .ui.column.grid > [class*="fourteen wide large screen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide large screen"].column, + .ui.grid > .column.row > [class*="fifteen wide large screen"].column, + .ui.grid > [class*="fifteen wide large screen"].column, + .ui.column.grid > [class*="fifteen wide large screen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide large screen"].column, + .ui.grid > .column.row > [class*="sixteen wide large screen"].column, + .ui.grid > [class*="sixteen wide large screen"].column, + .ui.column.grid > [class*="sixteen wide large screen"].column { + width: @sixteenWide !important; + } +} + +/* Widescreen Sizing Combinations */ +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.grid > .row > [class*="one wide widescreen"].column, + .ui.grid > .column.row > [class*="one wide widescreen"].column, + .ui.grid > [class*="one wide widescreen"].column, + .ui.column.grid > [class*="one wide widescreen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide widescreen"].column, + .ui.grid > .column.row > [class*="two wide widescreen"].column, + .ui.grid > [class*="two wide widescreen"].column, + .ui.column.grid > [class*="two wide widescreen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide widescreen"].column, + .ui.grid > .column.row > [class*="three wide widescreen"].column, + .ui.grid > [class*="three wide widescreen"].column, + .ui.column.grid > [class*="three wide widescreen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide widescreen"].column, + .ui.grid > .column.row > [class*="four wide widescreen"].column, + .ui.grid > [class*="four wide widescreen"].column, + .ui.column.grid > [class*="four wide widescreen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide widescreen"].column, + .ui.grid > .column.row > [class*="five wide widescreen"].column, + .ui.grid > [class*="five wide widescreen"].column, + .ui.column.grid > [class*="five wide widescreen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide widescreen"].column, + .ui.grid > .column.row > [class*="six wide widescreen"].column, + .ui.grid > [class*="six wide widescreen"].column, + .ui.column.grid > [class*="six wide widescreen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide widescreen"].column, + .ui.grid > .column.row > [class*="seven wide widescreen"].column, + .ui.grid > [class*="seven wide widescreen"].column, + .ui.column.grid > [class*="seven wide widescreen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide widescreen"].column, + .ui.grid > .column.row > [class*="eight wide widescreen"].column, + .ui.grid > [class*="eight wide widescreen"].column, + .ui.column.grid > [class*="eight wide widescreen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide widescreen"].column, + .ui.grid > .column.row > [class*="nine wide widescreen"].column, + .ui.grid > [class*="nine wide widescreen"].column, + .ui.column.grid > [class*="nine wide widescreen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide widescreen"].column, + .ui.grid > .column.row > [class*="ten wide widescreen"].column, + .ui.grid > [class*="ten wide widescreen"].column, + .ui.column.grid > [class*="ten wide widescreen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide widescreen"].column, + .ui.grid > .column.row > [class*="eleven wide widescreen"].column, + .ui.grid > [class*="eleven wide widescreen"].column, + .ui.column.grid > [class*="eleven wide widescreen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide widescreen"].column, + .ui.grid > .column.row > [class*="twelve wide widescreen"].column, + .ui.grid > [class*="twelve wide widescreen"].column, + .ui.column.grid > [class*="twelve wide widescreen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide widescreen"].column, + .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, + .ui.grid > [class*="thirteen wide widescreen"].column, + .ui.column.grid > [class*="thirteen wide widescreen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, + .ui.grid > [class*="fourteen wide widescreen"].column, + .ui.column.grid > [class*="fourteen wide widescreen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, + .ui.grid > [class*="fifteen wide widescreen"].column, + .ui.column.grid > [class*="fifteen wide widescreen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide widescreen"].column, + .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, + .ui.grid > [class*="sixteen wide widescreen"].column, + .ui.column.grid > [class*="sixteen wide widescreen"].column { + width: @sixteenWide !important; + } +} + +/*---------------------- + Centered +-----------------------*/ + +.ui.centered.grid, +.ui.centered.grid > .row, +.ui.grid > .centered.row { + text-align: center; + justify-content: center; +} +.ui.centered.grid > .column:not(.aligned):not(.row), +.ui.centered.grid > .row > .column:not(.aligned), +.ui.grid .centered.row > .column:not(.aligned) { + text-align: left; +} + +.ui.grid > .centered.column, +.ui.grid > .row > .centered.column { + display: block; + margin-left: auto; + margin-right: auto; +} + +/*---------------------- + Relaxed +-----------------------*/ + +.ui.relaxed.grid > .column:not(.row), +.ui.relaxed.grid > .row > .column, +.ui.grid > .relaxed.row > .column { + padding-left: (@relaxedGutterWidth / 2); + padding-right: (@relaxedGutterWidth / 2); +} + +.ui[class*="very relaxed"].grid > .column:not(.row), +.ui[class*="very relaxed"].grid > .row > .column, +.ui.grid > [class*="very relaxed"].row > .column { + padding-left: (@veryRelaxedGutterWidth / 2); + padding-right: (@veryRelaxedGutterWidth / 2); +} + +/* Coupling with UI Divider */ +.ui.relaxed.grid .row + .ui.divider, +.ui.grid .relaxed.row + .ui.divider { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); +} +.ui[class*="very relaxed"].grid .row + .ui.divider, +.ui.grid [class*="very relaxed"].row + .ui.divider { + margin-left: (@veryRelaxedGutterWidth / 2); + margin-right: (@veryRelaxedGutterWidth / 2); +} + + +/*---------------------- + Padded +-----------------------*/ + +.ui.padded.grid:not(.vertically):not(.horizontally) { + margin: 0em !important; +} +[class*="horizontally padded"].ui.grid { + margin-left: 0em !important; + margin-right: 0em !important; +} +[class*="vertically padded"].ui.grid { + margin-top: 0em !important; + margin-bottom: 0em !important; +} + +/*---------------------- + "Floated" +-----------------------*/ + +.ui.grid [class*="left floated"].column { + margin-right: auto; +} +.ui.grid [class*="right floated"].column { + margin-left: auto; +} + + +/*---------------------- + Divided +-----------------------*/ + +.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column { + box-shadow: @dividedBorder; +} + +/* Swap from padding to margin on columns to have dividers align */ +.ui[class*="vertically divided"].grid > .column:not(.row), +.ui[class*="vertically divided"].grid > .row > .column { + margin-top: (@rowSpacing / 2); + margin-bottom: (@rowSpacing / 2); + padding-top: 0rem; + padding-bottom: 0rem; +} +.ui[class*="vertically divided"].grid > .row { + margin-top: 0em; + margin-bottom: 0em; +} + +/* No divider on first column on row */ +.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: none; +} + +/* Divided Row */ +.ui.grid > .divided.row > .column { + box-shadow: @dividedBorder; +} +.ui.grid > .divided.row > .column:first-child { + box-shadow: none; +} + +/* Vertically Divided */ +.ui[class*="vertically divided"].grid > .row { + position: relative; +} +.ui[class*="vertically divided"].grid > .row:before { + position: absolute; + content: ""; + top: 0em; + left: 0px; + + width: ~"calc(100% - "@gutterWidth~")"; + height: 1px; + + margin: 0% (@gutterWidth / 2); + box-shadow: @verticallyDividedBorder; +} + +/* Padded Horizontally Divided */ +[class*="horizontally padded"].ui.divided.grid, +.ui.padded.divided.grid:not(.vertically):not(.horizontally) { + width: 100%; +} + +/* First Row Vertically Divided */ +.ui[class*="vertically divided"].grid > .row:first-child:before { + box-shadow: none; +} + +/* Inverted Divided */ +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { + box-shadow: @dividedInvertedBorder; +} +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: none; +} +.ui.inverted[class*="vertically divided"].grid > .row:before { + box-shadow: @verticallyDividedInvertedBorder; +} + +/* Relaxed */ +.ui.relaxed[class*="vertically divided"].grid > .row:before { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); + width: ~"calc(100% - "@relaxedGutterWidth~")"; +} +.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { + margin-left: @veryRelaxedGutterWidth; + margin-right: @veryRelaxedGutterWidth; + width: ~"calc(100% - "@veryRelaxedGutterWidth~")"; +} + +/*---------------------- + Celled +-----------------------*/ + +.ui.celled.grid { + width: 100%; + margin: @celledMargin; + box-shadow: @celledGridDivider; +} + +.ui.celled.grid > .row { + width: 100% !important; + margin: 0em; + padding: 0em; + box-shadow: @celledRowDivider; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + box-shadow: @celledColumnDivider; +} + +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + box-shadow: none; +} + +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + padding: @celledPadding; +} +.ui.relaxed.celled.grid > .column:not(.row), +.ui.relaxed.celled.grid > .row > .column { + padding: @celledRelaxedPadding; +} +.ui[class*="very relaxed"].celled.grid > .column:not(.row), +.ui[class*="very relaxed"].celled.grid > .row > .column { + padding: @celledVeryRelaxedPadding; +} + +/* Internally Celled */ +.ui[class*="internally celled"].grid { + box-shadow: none; + margin: 0em; +} +.ui[class*="internally celled"].grid > .row:first-child { + box-shadow: none; +} +.ui[class*="internally celled"].grid > .row > .column:first-child { + box-shadow: none; +} + +/*---------------------- + Vertically Aligned +-----------------------*/ + +/* Top Aligned */ +.ui[class*="top aligned"].grid > .column:not(.row), +.ui[class*="top aligned"].grid > .row > .column, +.ui.grid > [class*="top aligned"].row > .column, +.ui.grid > [class*="top aligned"].column:not(.row), +.ui.grid > .row > [class*="top aligned"].column { + flex-direction: column; + vertical-align: top; + align-self: flex-start !important; +} + +/* Middle Aligned */ +.ui[class*="middle aligned"].grid > .column:not(.row), +.ui[class*="middle aligned"].grid > .row > .column, +.ui.grid > [class*="middle aligned"].row > .column, +.ui.grid > [class*="middle aligned"].column:not(.row), +.ui.grid > .row > [class*="middle aligned"].column { + flex-direction: column; + vertical-align: middle; + align-self: center !important; +} + +/* Bottom Aligned */ +.ui[class*="bottom aligned"].grid > .column:not(.row), +.ui[class*="bottom aligned"].grid > .row > .column, +.ui.grid > [class*="bottom aligned"].row > .column, +.ui.grid > [class*="bottom aligned"].column:not(.row), +.ui.grid > .row > [class*="bottom aligned"].column { + flex-direction: column; + vertical-align: bottom; + align-self: flex-end !important; +} + +/* Stretched */ +.ui.stretched.grid > .row > .column, +.ui.stretched.grid > .column, +.ui.grid > .stretched.row > .column, +.ui.grid > .stretched.column:not(.row), +.ui.grid > .row > .stretched.column { + display: inline-flex !important; + align-self: stretch; + flex-direction: column; +} + +.ui.stretched.grid > .row > .column > *, +.ui.stretched.grid > .column > *, +.ui.grid > .stretched.row > .column > *, +.ui.grid > .stretched.column:not(.row) > *, +.ui.grid > .row > .stretched.column > * { + flex-grow: 1; +} + +/*---------------------- + Horizontally Centered +-----------------------*/ + +/* Left Aligned */ +.ui[class*="left aligned"].grid > .column, +.ui[class*="left aligned"].grid > .row > .column, +.ui.grid > [class*="left aligned"].row > .column, +.ui.grid > [class*="left aligned"].column.column, +.ui.grid > .row > [class*="left aligned"].column { + text-align: left; + align-self: inherit; +} + +/* Center Aligned */ +.ui[class*="center aligned"].grid > .column, +.ui[class*="center aligned"].grid > .row > .column, +.ui.grid > [class*="center aligned"].row > .column, +.ui.grid > [class*="center aligned"].column.column, +.ui.grid > .row > [class*="center aligned"].column { + text-align: center; + align-self: inherit; +} +.ui[class*="center aligned"].grid { + justify-content: center; +} + +/* Right Aligned */ +.ui[class*="right aligned"].grid > .column, +.ui[class*="right aligned"].grid > .row > .column, +.ui.grid > [class*="right aligned"].row > .column, +.ui.grid > [class*="right aligned"].column.column, +.ui.grid > .row > [class*="right aligned"].column { + text-align: right; + align-self: inherit; +} + +/* Justified */ +.ui.justified.grid > .column, +.ui.justified.grid > .row > .column, +.ui.grid > .justified.row > .column, +.ui.grid > .justified.column.column, +.ui.grid > .row > .justified.column { + text-align: justify; + hyphens: auto; +} + +/*---------------------- + Colored +-----------------------*/ + +.ui.grid > .row > .red.column, +.ui.grid > .row > .orange.column, +.ui.grid > .row > .yellow.column, +.ui.grid > .row > .olive.column, +.ui.grid > .row > .green.column, +.ui.grid > .row > .teal.column, +.ui.grid > .row > .blue.column, +.ui.grid > .row > .violet.column, +.ui.grid > .row > .purple.column, +.ui.grid > .row > .pink.column, +.ui.grid > .row > .brown.column, +.ui.grid > .row > .grey.column, +.ui.grid > .row > .black.column { + margin-top: -(@rowSpacing / 2); + margin-bottom: -(@rowSpacing / 2); + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} + +/* Red */ +.ui.grid > .red.row, +.ui.grid > .red.column, +.ui.grid > .row > .red.column { + background-color: @red !important; + color: @white; +} +/* Orange */ +.ui.grid > .orange.row, +.ui.grid > .orange.column, +.ui.grid > .row > .orange.column { + background-color: @orange !important; + color: @white; +} +/* Yellow */ +.ui.grid > .yellow.row, +.ui.grid > .yellow.column, +.ui.grid > .row > .yellow.column { + background-color: @yellow !important; + color: @white; +} +/* Olive */ +.ui.grid > .olive.row, +.ui.grid > .olive.column, +.ui.grid > .row > .olive.column { + background-color: @olive !important; + color: @white; +} +/* Green */ +.ui.grid > .green.row, +.ui.grid > .green.column, +.ui.grid > .row > .green.column { + background-color: @green !important; + color: @white; +} +/* Teal */ +.ui.grid > .teal.row, +.ui.grid > .teal.column, +.ui.grid > .row > .teal.column { + background-color: @teal !important; + color: @white; +} +/* Blue */ +.ui.grid > .blue.row, +.ui.grid > .blue.column, +.ui.grid > .row > .blue.column { + background-color: @blue !important; + color: @white; +} +/* Violet */ +.ui.grid > .violet.row, +.ui.grid > .violet.column, +.ui.grid > .row > .violet.column { + background-color: @violet !important; + color: @white; +} +/* Purple */ +.ui.grid > .purple.row, +.ui.grid > .purple.column, +.ui.grid > .row > .purple.column { + background-color: @purple !important; + color: @white; +} +/* Pink */ +.ui.grid > .pink.row, +.ui.grid > .pink.column, +.ui.grid > .row > .pink.column { + background-color: @pink !important; + color: @white; +} +/* Brown */ +.ui.grid > .brown.row, +.ui.grid > .brown.column, +.ui.grid > .row > .brown.column { + background-color: @brown !important; + color: @white; +} +/* Grey */ +.ui.grid > .grey.row, +.ui.grid > .grey.column, +.ui.grid > .row > .grey.column { + background-color: @grey !important; + color: @white; +} +/* Black */ +.ui.grid > .black.row, +.ui.grid > .black.column, +.ui.grid > .row > .black.column { + background-color: @black !important; + color: @white; +} + + +/*---------------------- + Equal Width +-----------------------*/ + +.ui[class*="equal width"].grid > .column:not(.row), +.ui[class*="equal width"].grid > .row > .column, +.ui.grid > [class*="equal width"].row > .column { + display: inline-block; + flex-grow: 1; +} +.ui[class*="equal width"].grid > .wide.column, +.ui[class*="equal width"].grid > .row > .wide.column, +.ui.grid > [class*="equal width"].row > .wide.column { + flex-grow: 0; +} + + +/*---------------------- + Reverse +-----------------------*/ + + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui[class*="mobile reversed"].grid, + .ui[class*="mobile reversed"].grid > .row, + .ui.grid > [class*="mobile reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="mobile vertically reversed"].grid, + .ui.stackable[class*="mobile reversed"] { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui[class*="tablet reversed"].grid, + .ui[class*="tablet reversed"].grid > .row, + .ui.grid > [class*="tablet reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="tablet vertically reversed"].grid { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + +/* Computer */ +@media only screen and (min-width: @computerBreakpoint) { + .ui[class*="computer reversed"].grid, + .ui[class*="computer reversed"].grid > .row, + .ui.grid > [class*="computer reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="computer vertically reversed"].grid { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + + +/*------------------- + Doubling +--------------------*/ + +/* Tablet Only */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.doubling.grid { + width: auto; + } + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + display: inline-block !important; + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + box-shadow: none !important; + margin: 0em; + } + .ui[class*="two column"].doubling.grid > .row > .column, + .ui[class*="two column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling.row.row > .column { + width: @oneColumn !important; + } + .ui[class*="three column"].doubling.grid > .row > .column, + .ui[class*="three column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling.row.row > .column { + width: @twoColumn !important; + } + .ui[class*="four column"].doubling.grid > .row > .column, + .ui[class*="four column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling.row.row > .column { + width: @twoColumn !important; + } + .ui[class*="five column"].doubling.grid > .row > .column, + .ui[class*="five column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="six column"].doubling.grid > .row > .column, + .ui[class*="six column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="seven column"].doubling.grid > .row > .column, + .ui[class*="seven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="eight column"].doubling.grid > .row > .column, + .ui[class*="eight column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling.row.row > .column { + width: @fourColumn !important; + } + .ui[class*="nine column"].doubling.grid > .row > .column, + .ui[class*="nine column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling.row.row > .column { + width: @fourColumn !important; + } + .ui[class*="ten column"].doubling.grid > .row > .column, + .ui[class*="ten column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling.row.row > .column { + width: @fiveColumn !important; + } + .ui[class*="eleven column"].doubling.grid > .row > .column, + .ui[class*="eleven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling.row.row > .column { + width: @fiveColumn !important; + } + .ui[class*="twelve column"].doubling.grid > .row > .column, + .ui[class*="twelve column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling.row.row > .column { + width: @sixColumn !important; + } + .ui[class*="thirteen column"].doubling.grid > .row > .column, + .ui[class*="thirteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling.row.row > .column { + width: @sixColumn !important; + } + .ui[class*="fourteen column"].doubling.grid > .row > .column, + .ui[class*="fourteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling.row.row > .column { + width: @sevenColumn !important; + } + .ui[class*="fifteen column"].doubling.grid > .row > .column, + .ui[class*="fifteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling.row.row > .column { + width: @sevenColumn !important; + } + .ui[class*="sixteen column"].doubling.grid > .row > .column, + .ui[class*="sixteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling.row.row > .column { + width: @eightColumn !important; + } +} + +/* Mobily Only */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + margin: 0em !important; + box-shadow: none !important; + } + .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { + width: @oneColumn !important; + } + .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } +} + +/*------------------- + Stackable +--------------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.grid { + width: auto; + margin-left: 0em !important; + margin-right: 0em !important; + } + .ui.stackable.grid > .row > .wide.column, + .ui.stackable.grid > .wide.column, + .ui.stackable.grid > .column.grid > .column, + .ui.stackable.grid > .column.row > .column, + .ui.stackable.grid > .row > .column, + .ui.stackable.grid > .column:not(.row), + .ui.grid > .stackable.stackable.row > .column { + width: 100% !important; + margin: 0em 0em !important; + box-shadow: none !important; + padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important; + } + .ui.stackable.grid:not(.vertically) > .row { + margin: 0em; + padding: 0em; + } + + /* Coupling */ + .ui.container > .ui.stackable.grid > .column, + .ui.container > .ui.stackable.grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } + + /* Don't pad inside segment or nested grid */ + .ui.grid .ui.stackable.grid, + .ui.segment:not(.vertical) .ui.stackable.page.grid { + margin-left: -(@stackableGutter / 2) !important; + margin-right: -(@stackableGutter / 2) !important; + } + + /* Divided Stackable */ + .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:not(.row):first-child, + .ui.stackable.celled.grid > .column:not(.row):first-child { + border-top: none !important; + } + .ui.inverted.stackable.celled.grid > .column:not(.row), + .ui.inverted.stackable.divided.grid > .column:not(.row), + .ui.inverted.stackable.celled.grid > .row > .column, + .ui.inverted.stackable.divided.grid > .row > .column { + border-top: @stackableInvertedMobileBorder; + } + + .ui.stackable.celled.grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.celled.grid > .row > .column, + .ui.stackable.divided:not(.vertically).grid > .row > .column { + border-top: @stackableMobileBorder; + box-shadow: none !important; + padding-top: @stackableRowSpacing !important; + padding-bottom: @stackableRowSpacing !important; + } + + .ui.stackable.celled.grid > .row { + box-shadow: none !important; + } + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } + +} + +/*---------------------- + Only (Device) +-----------------------*/ + + +/* These include arbitrary class repetitions for forced specificity */ + +/* Mobile Only Hide */ +@media only screen and (max-width: @largestMobileScreen) { + .ui[class*="tablet only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} +/* Tablet Only Hide */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui[class*="mobile only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Computer Only Hide */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Large Screen Only Hide */ +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Widescreen Only Hide */ +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } +} + + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/collections/menu.less b/ui/app/bower_components/semantic-ui/src/definitions/collections/menu.less new file mode 100755 index 00000000..a9538b12 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/collections/menu.less @@ -0,0 +1,1928 @@ +/* + * # Semantic - Menu + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributor + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'menu'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +/*-------------- + Menu +---------------*/ + +.ui.menu { + display: flex; + margin: @margin; + font-family: @fontFamily; + background: @background; + font-weight: @fontWeight; + border: @border; + box-shadow: @boxShadow; + border-radius: @borderRadius; + min-height: @minHeight; +} + +.ui.menu:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} + +.ui.menu:first-child { + margin-top: 0rem; +} +.ui.menu:last-child { + margin-bottom: 0rem; +} + + +/*-------------- + Sub-Menu +---------------*/ + +.ui.menu .menu { + margin: 0em; +} + +.ui.menu:not(.vertical) > .menu { + display: flex; +} + +/*-------------- + Item +---------------*/ + +.ui.menu:not(.vertical) .item { + display: flex; + align-items: center; +} + +.ui.menu .item { + position: relative; + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-tap-highlight-color: transparent; + flex: 0 0 auto; + user-select: none; + + background: @itemBackground; + padding: @itemVerticalPadding @itemHorizontalPadding; + text-transform: @itemTextTransform; + color: @itemTextColor; + font-weight: @itemFontWeight; + transition: @itemTransition; +} + +.ui.menu > .item:first-child { + border-radius: @borderRadius 0px 0px @borderRadius; +} + +/* Border */ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0%; + right: 0px; + height: 100%; + + width: @dividerSize; + background: @dividerBackground; +} + +/*-------------- + Text Content +---------------*/ + +.ui.menu .text.item > *, +.ui.menu .item > a:not(.ui), +.ui.menu .item > p:only-child { + user-select: text; + line-height: @textLineHeight; +} +.ui.menu .item > p:first-child { + margin-top: 0; +} +.ui.menu .item > p:last-child { + margin-bottom: 0; +} + +/*-------------- + Icons +---------------*/ + +.ui.menu .item > i.icon { + opacity: @iconOpacity; + float: @iconFloat; + margin: @iconMargin; +} + +/*-------------- + Button +---------------*/ + +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: @buttonOffset; + margin: @buttonMargin; + padding-bottom: @buttonVerticalPadding; + padding-top: @buttonVerticalPadding; + font-size: @buttonSize; +} + +/*---------------- + Grid / Container +-----------------*/ + +.ui.menu > .grid, +.ui.menu > .container { + display: flex; + align-items: inherit; + flex-direction: inherit; +} + +/*-------------- + Inputs +---------------*/ + +.ui.menu .item > .input { + width: 100%; +} +.ui.menu:not(.vertical) .item > .input { + position: relative; + top: @inputOffset; + margin: @inputVerticalMargin 0em; +} +.ui.menu .item > .input input { + font-size: @inputSize; + padding-top: @inputVerticalPadding; + padding-bottom: @inputVerticalPadding; +} + + +/*-------------- + Header +---------------*/ + +.ui.menu .header.item, +.ui.vertical.menu .header.item { + margin: 0em; + background: @headerBackground; + text-transform: @headerTextTransform; + font-weight: @headerWeight; +} + +.ui.vertical.menu .item > .header:not(.ui) { + margin: @verticalHeaderMargin; + font-size: @verticalHeaderFontSize; + font-weight: @verticalHeaderFontWeight; +} + +/*-------------- + Popup +---------------*/ + +.ui.menu .ui.popup { + display: none; +} +.ui.menu .ui.visible.popup { + display: block; +} + + +/*-------------- + Dropdowns +---------------*/ + + +/* Dropdown Icon */ +.ui.menu .item > i.dropdown.icon { + padding: 0em; + float: @dropdownIconFloat; + margin: 0em 0em 0em @dropdownIconDistance; +} + +/* Menu */ +.ui.menu .dropdown.item .menu { + left: 0px; + min-width: ~"calc(100% - 1px)"; + border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius; + background: @dropdownBackground; + margin: @dropdownMenuDistance 0px 0px; + box-shadow: @dropdownMenuBoxShadow; + flex-direction: column !important; +} + + +/* Menu Items */ +.ui.menu .ui.dropdown .menu > .item { + margin: 0; + text-align: left; + font-size: @dropdownItemFontSize !important; + padding: @dropdownItemPadding !important; + background: @dropdownItemBackground !important; + color: @dropdownItemColor !important; + text-transform: @dropdownItemTextTransform !important; + font-weight: @dropdownItemFontWeight !important; + box-shadow: @dropdownItemBoxShadow !important; + transition: @dropdownItemTransition !important; +} +.ui.menu .ui.dropdown .menu > .item:hover { + background: @dropdownHoveredItemBackground !important; + color: @dropdownHoveredItemColor !important; +} +.ui.menu .ui.dropdown .menu > .selected.item { + background: @dropdownSelectedItemBackground !important; + color: @dropdownSelectedItemColor !important; +} +.ui.menu .ui.dropdown .menu > .active.item { + background: @dropdownActiveItemBackground !important; + font-weight: @dropdownActiveItemFontWeight !important; + color: @dropdownActiveItemColor !important; +} + +.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { + display: block; +} +.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { + display: inline-block; + font-size: @dropdownItemIconFontSize !important; + float: @dropdownItemIconFloat; + margin: @dropdownItemIconMargin; +} + + +/* Secondary */ +.ui.secondary.menu .dropdown.item > .menu, +.ui.text.menu .dropdown.item > .menu { + border-radius: @dropdownMenuBorderRadius; + margin-top: @secondaryDropdownMenuDistance; +} + +/* Pointing */ +.ui.menu .pointing.dropdown.item .menu { + margin-top: @pointingDropdownMenuDistance; +} + +/* Inverted */ +.ui.inverted.menu .search.dropdown.item > .search, +.ui.inverted.menu .search.dropdown.item > .text { + color: @invertedSelectionDropdownColor; +} + +/* Vertical */ +.ui.vertical.menu .dropdown.item > .icon { + float: right; + content: "\f0da"; + margin-left: 1em; +} +.ui.vertical.menu .dropdown.item .menu { + top: 0% !important; + left: 100%; + min-width: 0; + margin: 0em 0em 0em @dropdownMenuDistance; + box-shadow: @dropdownVerticalMenuBoxShadow; + border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius; +} +.ui.vertical.menu .active.dropdown.item { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.active.item { + box-shadow: none; +} + +/* Evenly Divided */ +.ui.item.menu .dropdown .menu .item { + width: 100%; +} + +/*-------------- + Labels +---------------*/ + +.ui.menu .item > .label { + background: @labelBackground; + color: @labelTextColor; + margin-left: @labelTextMargin; + padding: @labelVerticalPadding @labelHorizontalPadding; +} +.ui.vertical.menu .item > .label { + background: @labelBackground; + color: @labelTextColor; + margin-top: @labelOffset; + margin-bottom: @labelOffset; + padding: @labelVerticalPadding @labelHorizontalPadding; +} +.ui.menu .item > .floating.label { + padding: @labelVerticalPadding @labelHorizontalPadding; +} + +/*-------------- + Images +---------------*/ + +.ui.menu .item > img:not(.ui) { + display: inline-block; + vertical-align: middle; + margin: @imageMargin; + width: @imageWidth; +} +.ui.vertical.menu .item > img:not(.ui):only-child { + display: block; + max-width: 100%; + width: @verticalImageWidth; +} + +/******************************* + Coupling +*******************************/ + +/*-------------- + Sidebar +---------------*/ + +/* Show vertical dividers below last */ + +.ui.vertical.sidebar.menu > .item:first-child:before { + display: block !important; +} +.ui.vertical.sidebar.menu > .item::before { + top: auto; + bottom: 0px; +} + +/*-------------- + Container +---------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.menu > .ui.container { + width: 100% !important; + margin-left: 0em !important; + margin-right: 0em !important; + } +} +@media only screen and (min-width: @tabletBreakpoint) { + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { + border-left: @dividerSize solid @dividerBackground; + } +} + + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + + +.ui.link.menu .item:hover, +.ui.menu .dropdown.item:hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover { + cursor: pointer; + background: @hoverItemBackground; + color: @hoverItemTextColor; +} + + +/*-------------- + Pressed +---------------*/ + +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active { + background: @pressedItemBackground; + color: @pressedItemTextColor; +} + + +/*-------------- + Active +---------------*/ + +.ui.menu .active.item { + background: @activeItemBackground; + color: @activeItemTextColor; + font-weight: @activeItemFontWeight; + box-shadow: @activeItemBoxShadow; +} +.ui.menu .active.item > i.icon { + opacity: @activeIconOpacity; +} + +/*-------------- + Active Hover +---------------*/ + +.ui.menu .active.item:hover, +.ui.vertical.menu .active.item:hover { + background-color: @activeHoverItemBackground; + color: @activeHoverItemColor; +} + + +/*-------------- + Disabled +---------------*/ + +.ui.menu .item.disabled, +.ui.menu .item.disabled:hover { + cursor: default; + background-color: transparent !important; + color: @disabledTextColor; +} + + +/******************************* + Types +*******************************/ + +/*------------------ +Floated Menu / Item +-------------------*/ + +/* Left Floated */ +.ui.menu:not(.vertical) .left.item, +.ui.menu:not(.vertical) .left.menu { + display: flex; + margin-right: auto !important; +} +/* Right Floated */ +.ui.menu:not(.vertical) .right.item, +.ui.menu:not(.vertical) .right.menu { + display: flex; + margin-left: auto !important; +} + +/* Swapped Borders */ +.ui.menu .right.item::before, +.ui.menu .right.menu > .item::before { + right: auto; + left: 0; +} + + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.menu { + display: block; + flex-direction: column; + background: @verticalBackground; + box-shadow: @verticalBoxShadow; +} + +/*--- Item ---*/ +.ui.vertical.menu .item { + display: block; + background: @verticalItemBackground; + border-top: none; + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: @borderRadius @borderRadius 0px 0px; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px @borderRadius @borderRadius; +} + +/*--- Label ---*/ +.ui.vertical.menu .item > .label { + float: right; + text-align: center; +} + +/*--- Icon ---*/ +.ui.vertical.menu .item > i.icon { + width: @iconWidth; + float: @verticalIconFloat; + margin: @verticalIconMargin; +} +.ui.vertical.menu .item > .label + i.icon { + float: @labelAndIconFloat; + margin: @labelAndIconMargin; +} + + +/*--- Border ---*/ +.ui.vertical.menu .item:before { + position: absolute; + content: ''; + top: 0%; + left: 0px; + width: 100%; + height: @dividerSize; + background: @verticalDividerBackground; + height: 1px; +} + +.ui.vertical.menu .item:first-child:before { + display: none !important; +} + + +/*--- Sub Menu ---*/ +.ui.vertical.menu .item > .menu { + margin: @subMenuMargin; +} +.ui.vertical.menu .menu .item { + background: none; + padding: @subMenuVerticalPadding @subMenuHorizontalPadding; + font-size: @subMenuFontSize; + color: @subMenuTextColor; +} +.ui.vertical.menu .item .menu a.item:hover, +.ui.vertical.menu .item .menu .link.item:hover { + color: @darkTextColor; +} +.ui.vertical.menu .menu .item:before { + display: none; +} + +/* Vertical Active */ +.ui.vertical.menu .active.item { + background: @activeItemBackground; + border-radius: 0em; + box-shadow: @verticalActiveBoxShadow; +} +.ui.vertical.menu > .active.item:first-child { + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui.vertical.menu > .active.item:only-child { + border-radius: @borderRadius; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; +} +.ui.vertical.menu .item .menu .active.item { + background-color: @subMenuActiveBackground; + font-weight: @subMenuActiveFontWeight; + color: @subMenuActiveTextColor; +} + + +/*-------------- + Tabular +---------------*/ + +.ui.tabular.menu { + border-radius: 0em; + box-shadow: none !important; + border: none; + background: @tabularBackground; + border-bottom: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.tabular.fluid.menu { + width: @tabularFluidWidth !important; +} +.ui.tabular.menu .item { + background: transparent; + border-bottom: none; + + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-top: @tabularOppositeBorderWidth solid transparent; + padding: @tabularVerticalPadding @tabularHorizontalPadding; + color: @tabularTextColor; +} +.ui.tabular.menu .item:before { + display: none; +} + +/* Hover */ +.ui.tabular.menu .item:hover { + background-color: transparent; + color: @tabularHoveredTextColor; +} + +/* Active */ +.ui.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-top-width: @tabularBorderWidth; + border-color: @tabularBorderColor; + font-weight: @tabularActiveWeight; + margin-bottom: -@tabularBorderWidth; + box-shadow: @tabularActiveBoxShadow; + border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important; +} + +/* Coupling with segment for attachment */ +.ui.tabular.menu + .attached:not(.top).segment, +.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { + border-top: none; + margin: 0px; + width: 100%; +} +.top.attached.segment + .ui.bottom.tabular.menu { + position: relative; + width: @tabularFluidWidth; + left: -@tabularFluidOffset; +} + +/* Bottom Vertical Tabular */ +.ui.bottom.tabular.menu { + background: @tabularBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-top: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.bottom.tabular.menu .item { + background: none; + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: none; +} +.ui.bottom.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: -@tabularBorderWidth 0px 0px 0px; + border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important; +} + +/* Vertical Tabular (Left) */ +.ui.vertical.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.vertical.tabular.menu .item { + background: none; + border-left: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: @tabularBorderWidth solid transparent; + border-right: none; +} +.ui.vertical.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: 0px -@tabularBorderWidth 0px 0px; + border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important; +} + +/* Vertical Right Tabular */ +.ui.vertical.right.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: none; + border-left: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.vertical.right.tabular.menu .item { + background: none; + border-right: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: @tabularBorderWidth solid transparent; + border-left: none; +} +.ui.vertical.right.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: 0px 0px 0px -@tabularBorderWidth; + border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important; +} + +/* Dropdown */ +.ui.tabular.menu .active.dropdown.item { + margin-bottom: 0px; + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-top: @tabularOppositeBorderWidth solid transparent; + border-bottom: none; +} + + + +/*-------------- + Pagination +---------------*/ + +.ui.pagination.menu { + margin: 0em; + display: inline-flex; + vertical-align: middle; +} +.ui.pagination.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.compact.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.pagination.menu .item:last-child:before { + display: none; +} + +.ui.pagination.menu .item { + min-width: @paginationMinWidth; + text-align: center; +} +.ui.pagination.menu .icon.item i.icon { + vertical-align: top; +} + +/* Active */ +.ui.pagination.menu .active.item { + border-top: none; + padding-top: @itemVerticalPadding; + background-color: @paginationActiveBackground; + color: @paginationActiveTextColor; + box-shadow: none; +} + +/*-------------- + Secondary +---------------*/ + +.ui.secondary.menu { + background: @secondaryBackground; + margin-left: -@secondaryItemSpacing; + margin-right: -@secondaryItemSpacing; + border-radius: 0em; + border: none; + box-shadow: none; +} + +/* Item */ +.ui.secondary.menu .item { + align-self: center; + box-shadow: none; + border: none; + padding: @secondaryItemPadding; + margin: @secondaryItemMargin; + background: @secondaryItemBackground; + transition: @secondaryItemTransition; + border-radius: @secondaryItemBorderRadius; +} + +/* No Divider */ +.ui.secondary.menu .item:before { + display: none !important; +} + +/* Header */ +.ui.secondary.menu .header.item { + border-radius: 0em; + border-right: @secondaryHeaderBorder; + background: @secondaryHeaderBackground; +} + +/* Image */ +.ui.secondary.menu .item > img:not(.ui) { + margin: 0em; +} + +/* Hover */ +.ui.secondary.menu .dropdown.item:hover, +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + background: @secondaryHoverItemBackground; + color: @secondaryHoverItemColor; +} + +/* Active */ +.ui.secondary.menu .active.item { + box-shadow: none; + background: @secondaryActiveItemBackground; + color: @secondaryActiveItemColor; + border-radius: @secondaryItemBorderRadius; +} + +/* Active Hover */ +.ui.secondary.menu .active.item:hover { + box-shadow: none; + background: @secondaryActiveHoverItemBackground; + color: @secondaryActiveHoverItemColor; +} + + +/* Inverted */ +.ui.secondary.inverted.menu .link.item, +.ui.secondary.inverted.menu a.item { + color: @secondaryInvertedColor !important; +} +.ui.secondary.inverted.menu .dropdown.item:hover, +.ui.secondary.inverted.menu .link.item:hover, +.ui.secondary.inverted.menu a.item:hover { + background: @secondaryInvertedHoverBackground; + color: @secondaryInvertedHoverColor !important; +} +.ui.secondary.inverted.menu .active.item { + background: @secondaryInvertedActiveBackground; + color: @secondaryInvertedActiveColor !important; +} + +/* Fix item margins */ +.ui.secondary.item.menu { + margin-left: 0em; + margin-right: 0em; +} +.ui.secondary.item.menu .item:last-child { + margin-right: 0em; +} +.ui.secondary.attached.menu { + box-shadow: none; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu { + margin: @secondaryMenuSubMenuMargin; +} +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { + margin: @secondaryMenuSubMenuItemMargin; + padding: @secondaryMenuSubMenuItemPadding; +} + + +/*--------------------- + Secondary Vertical +-----------------------*/ + +.ui.secondary.vertical.menu > .item { + border: none; + margin: @secondaryVerticalItemMargin; + border-radius: @secondaryVerticalItemBorderRadius !important; +} +.ui.secondary.vertical.menu > .header.item { + border-radius: 0em; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item > .menu .item { + background-color: transparent; +} + +/* Inverted */ +.ui.secondary.inverted.menu { + background-color: transparent; +} + +/*--------------------- + Secondary Pointing +-----------------------*/ + +.ui.secondary.pointing.menu { + margin-left: 0em; + margin-right: 0em; + border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor; +} + +.ui.secondary.pointing.menu .item { + border-bottom-color: transparent; + border-bottom-style: solid; + border-radius: 0em; + align-self: flex-end; + + margin: 0em 0em -@secondaryPointingBorderWidth; + padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; + border-bottom-width: @secondaryPointingBorderWidth; + transition: @secondaryItemTransition; +} + +/* Item Types */ +.ui.secondary.pointing.menu .header.item { + color: @secondaryPointingHeaderColor !important; +} +.ui.secondary.pointing.menu .text.item { + box-shadow: none !important; +} +.ui.secondary.pointing.menu .item:after { + display: none; +} + +/* Hover */ +.ui.secondary.pointing.menu .dropdown.item:hover, +.ui.secondary.pointing.menu .link.item:hover, +.ui.secondary.pointing.menu a.item:hover { + background-color: transparent; + color: @secondaryPointingHoverTextColor; +} + +/* Pressed */ +.ui.secondary.pointing.menu .dropdown.item:active, +.ui.secondary.pointing.menu .link.item:active, +.ui.secondary.pointing.menu a.item:active { + background-color: transparent; + border-color: @secondaryPointingBorderColor; +} + +/* Active */ +.ui.secondary.pointing.menu .active.item { + background-color: transparent; + box-shadow: none; + border-color: @secondaryPointingActiveBorderColor; + font-weight: @secondaryPointingActiveFontWeight; + color: @secondaryPointingActiveTextColor; +} + +/* Active Hover */ +.ui.secondary.pointing.menu .active.item:hover { + border-color: @secondaryPointingActiveHoverBorderColor; + color: @secondaryPointingActiveHoverTextColor; +} + +/* Active Dropdown */ +.ui.secondary.pointing.menu .active.dropdown.item { + border-color: @secondaryPointingActiveDropdownBorderColor; +} + +/* Vertical Pointing */ +.ui.secondary.vertical.pointing.menu { + border-bottom-width: 0px; + border-right-width: @secondaryPointingBorderWidth; + border-right-style: solid; + border-right-color: @secondaryPointingBorderColor; +} +.ui.secondary.vertical.pointing.menu .item { + border-bottom: none; + border-right-style: solid; + border-right-color: transparent; + border-radius: 0em !important; + margin: @secondaryVerticalPointingItemMargin; + border-right-width: @secondaryPointingBorderWidth; +} + +/* Vertical Active */ +.ui.secondary.vertical.pointing.menu .active.item { + border-color: @secondaryPointingActiveBorderColor; +} + +/* Inverted */ +.ui.secondary.inverted.pointing.menu { + border-color: @secondaryPointingInvertedBorderColor; +} + +.ui.secondary.inverted.pointing.menu { + border-width: @secondaryPointingBorderWidth; + border-color: @secondaryPointingBorderColor; +} +.ui.secondary.inverted.pointing.menu .item { + color: @secondaryPointingInvertedItemTextColor; +} +.ui.secondary.inverted.pointing.menu .header.item { + color: @secondaryPointingInvertedItemHeaderColor !important; +} + +/* Hover */ +.ui.secondary.inverted.pointing.menu .item:hover { + color: @secondaryPointingInvertedItemHoverTextColor; +} + +/* Active */ +.ui.secondary.inverted.pointing.menu .active.item { + border-color: @secondaryPointingInvertedActiveBorderColor; + color: @secondaryPointingInvertedActiveColor; +} + +/*-------------- + Text Menu +---------------*/ + +.ui.text.menu { + background: none transparent; + border-radius: 0px; + box-shadow: none; + border: none; + + margin: @textMenuMargin; +} +.ui.text.menu .item { + border-radius: 0px; + box-shadow: none; + align-self: center; + margin: @textMenuItemMargin; + padding: @textMenuItemPadding; + font-weight: @textMenuItemFontWeight; + color: @textMenuItemColor; + transition: @textMenuItemTransition; +} + +/* Border */ +.ui.text.menu .item:before, +.ui.text.menu .menu .item:before { + display: none !important; +} + +/* Header */ +.ui.text.menu .header.item { + background-color: transparent; + opacity: 1; + color: @textMenuHeaderColor; + font-size: @textMenuHeaderSize; + text-transform: @textMenuHeaderTextTransform; + font-weight: @textMenuHeaderFontWeight; +} + +/* Image */ +.ui.text.menu .item > img:not(.ui) { + margin: 0em; +} + +/*--- fluid text ---*/ +.ui.text.item.menu .item { + margin: 0em; +} + +/*--- vertical text ---*/ +.ui.vertical.text.menu { + margin: @textVerticalMenuMargin; +} +.ui.vertical.text.menu:first-child { + margin-top: 0rem; +} +.ui.vertical.text.menu:last-child { + margin-bottom: 0rem; +} +.ui.vertical.text.menu .item { + margin: @textVerticalMenuItemMargin; +} +.ui.vertical.text.menu .item > i.icon { + float: @textVerticalMenuIconFloat; + margin: @iconMargin; +} +.ui.vertical.text.menu .header.item { + margin: @textVerticalMenuHeaderMargin; +} + +/* Vertical Sub Menu */ +.ui.vertical.text.menu .item:not(.dropdown) > .menu { + margin: @textMenuSubMenuMargin; +} +.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { + margin: @textMenuSubMenuItemMargin; + padding: @textMenuSubMenuItemPadding; +} + +/*--- hover ---*/ +.ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; +} + +/*--- active ---*/ +.ui.text.menu .active.item { + background-color: transparent; + border: none; + box-shadow: none; + font-weight: @textMenuActiveItemFontWeight; + color: @textMenuActiveItemColor; +} + +/*--- active hover ---*/ +.ui.text.menu .active.item:hover { + background-color: transparent; +} + +/* Disable Bariations */ +.ui.text.pointing.menu .active.item:after { + box-shadow: none; +} +.ui.text.attached.menu { + box-shadow: none; +} + +/* Inverted */ +.ui.inverted.text.menu, +.ui.inverted.text.menu .item, +.ui.inverted.text.menu .item:hover, +.ui.inverted.text.menu .active.item { + background-color: transparent !important; +} + +/* Fluid */ +.ui.fluid.text.menu { + margin-left: 0em; + margin-right: 0em; +} + +/*-------------- + Icon Only +---------------*/ + +/* Vertical Menu */ +.ui.vertical.icon.menu { + display: inline-block; + width: auto; +} + +/* Item */ +.ui.icon.menu .item { + height: auto; + text-align: @iconMenuTextAlign; + color: @iconMenuItemColor; +} + +/* Icon */ +.ui.icon.menu .item > .icon:not(.dropdown) { + margin: 0; + opacity: 1; +} + +/* Icon Gylph */ +.ui.icon.menu .icon:before { + opacity: 1; +} + +/* (x) Item Icon */ +.ui.menu .icon.item > .icon { + width: auto; + margin: 0em auto; +} + +/* Vertical Icon */ +.ui.vertical.icon.menu .item > .icon:not(.dropdown) { + display: block; + opacity: 1; + margin: 0em auto; + float: none; +} + +/* Inverted */ +.ui.inverted.icon.menu .item { + color: @iconMenuInvertedItemColor; +} + +/*-------------- + Labeled Icon +---------------*/ + +/* Menu */ +.ui.labeled.icon.menu { + text-align: center; +} + +/* Item */ +.ui.labeled.icon.menu .item { + min-width: @labeledIconMinWidth; + flex-direction: column; +} + +/* Icon */ +.ui.labeled.icon.menu .item > .icon:not(.dropdown) { + height: 1em; + display: block; + font-size: @labeledIconSize !important; + margin: 0em auto @labeledIconTextMargin !important; +} + +/* Fluid */ +.ui.fluid.labeled.icon.menu > .item { + min-width: 0em; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.menu { + flex-direction: column; + } + .ui.stackable.menu .item { + width: 100% !important; + } + .ui.stackable.menu .item:before { + position: absolute; + content: ''; + top: auto; + bottom: 0px; + left: 0px; + width: 100%; + height: @dividerSize; + background: @verticalDividerBackground; + height: 1px; + } +} + +/*-------------- + Colors +---------------*/ + +/*--- Standard Colors ---*/ +.ui.menu .red.active.item, +.ui.red.menu .active.item { + border-color: @red !important; + color: @red !important; +} +.ui.menu .orange.active.item, +.ui.orange.menu .active.item { + border-color: @orange !important; + color: @orange !important; +} +.ui.menu .yellow.active.item, +.ui.yellow.menu .active.item { + border-color: @yellow !important; + color: @yellow !important; +} +.ui.menu .olive.active.item, +.ui.olive.menu .active.item { + border-color: @olive !important; + color: @olive !important; +} +.ui.menu .green.active.item, +.ui.green.menu .active.item { + border-color: @green !important; + color: @green !important; +} +.ui.menu .teal.active.item, +.ui.teal.menu .active.item { + border-color: @teal !important; + color: @teal !important; +} +.ui.menu .blue.active.item, +.ui.blue.menu .active.item { + border-color: @blue !important; + color: @blue !important; +} +.ui.menu .violet.active.item, +.ui.violet.menu .active.item { + border-color: @violet !important; + color: @violet !important; +} +.ui.menu .purple.active.item, +.ui.purple.menu .active.item { + border-color: @purple !important; + color: @purple !important; +} +.ui.menu .pink.active.item, +.ui.pink.menu .active.item { + border-color: @pink !important; + color: @pink !important; +} +.ui.menu .brown.active.item, +.ui.brown.menu .active.item { + border-color: @brown !important; + color: @brown !important; +} +.ui.menu .grey.active.item, +.ui.grey.menu .active.item { + border-color: @grey !important; + color: @grey !important; +} + + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.menu { + border: @invertedBorder; + background: @invertedBackground; + box-shadow: @invertedBoxShadow; +} + +/* Menu Item */ +.ui.inverted.menu .item, +.ui.inverted.menu .item > a:not(.ui) { + background: @invertedItemBackground; + color: @invertedItemTextColor; +} +.ui.inverted.menu .item.menu { + background: @invertedSubMenuBackground; +} + +/*--- Border ---*/ +.ui.inverted.menu .item:before { + background: @invertedDividerBackground; +} +.ui.vertical.inverted.menu .item:before { + background: @invertedVerticalDividerBackground; +} + +/* Sub Menu */ +.ui.vertical.inverted.menu .menu .item, +.ui.vertical.inverted.menu .menu .item a:not(.ui) { + color: @invertedSubMenuColor; +} + +/* Header */ +.ui.inverted.menu .header.item { + margin: 0em; + background: @invertedHeaderBackground; + box-shadow: none; +} + +/* Disabled */ +.ui.inverted.menu .item.disabled, +.ui.inverted.menu .item.disabled:hover { + color: @invertedDisabledTextColor; +} + +/*--- Hover ---*/ +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .dropdown.item:hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover { + background: @invertedHoverBackground; + color: @invertedHoverColor; +} +.ui.vertical.inverted.menu .item .menu a.item:hover, +.ui.vertical.inverted.menu .item .menu .link.item:hover { + background: @invertedSubMenuBackground; + color: @invertedSubMenuHoverColor; +} + +/*--- Pressed ---*/ +.ui.inverted.menu a.item:active, +.ui.inverted.menu .link.item:active, +.ui.inverted.menu a.item:active { + background: @invertedMenuPressedBackground; + color: @invertedMenuPressedColor; +} + +/*--- Active ---*/ +.ui.inverted.menu .active.item { + background: @invertedActiveBackground; + color: @invertedActiveColor !important; +} +.ui.inverted.vertical.menu .item .menu .active.item { + background: @invertedSubMenuActiveBackground; + color: @invertedSubMenuActiveColor; +} +.ui.inverted.pointing.menu .active.item:after { + background: @invertedArrowActiveColor !important; + margin: 0em !important; + box-shadow: none !important; + border: none !important; +} + +/*--- Active Hover ---*/ +.ui.inverted.menu .active.item:hover { + background: @invertedActiveHoverBackground; + color: @invertedActiveHoverColor !important; +} +.ui.inverted.pointing.menu .active.item:hover:after { + background: @invertedArrowActiveHoverColor !important; +} + + +/*-------------- + Floated +---------------*/ + +.ui.floated.menu { + float: left; + margin: 0rem @floatedDistance 0rem 0rem; +} +.ui.floated.menu .item:last-child:before { + display: none; +} + +.ui.right.floated.menu { + float: right; + margin: 0rem 0rem 0rem @floatedDistance; +} + + +/*-------------- + Inverted +---------------*/ + +/* Red */ +.ui.inverted.menu .red.active.item, +.ui.inverted.red.menu { + background-color: @red; +} +.ui.inverted.red.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.red.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Orange */ +.ui.inverted.menu .orange.active.item, +.ui.inverted.orange.menu { + background-color: @orange; +} +.ui.inverted.orange.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.orange.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Yellow */ +.ui.inverted.menu .yellow.active.item, +.ui.inverted.yellow.menu { + background-color: @yellow; +} +.ui.inverted.yellow.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.yellow.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Olive */ +.ui.inverted.menu .olive.active.item, +.ui.inverted.olive.menu { + background-color: @olive; +} +.ui.inverted.olive.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.olive.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Green */ +.ui.inverted.menu .green.active.item, +.ui.inverted.green.menu { + background-color: @green; +} +.ui.inverted.green.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.green.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Teal */ +.ui.inverted.menu .teal.active.item, +.ui.inverted.teal.menu { + background-color: @teal; +} +.ui.inverted.teal.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.teal.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Blue */ +.ui.inverted.menu .blue.active.item, +.ui.inverted.blue.menu { + background-color: @blue; +} +.ui.inverted.blue.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.blue.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Violet */ +.ui.inverted.menu .violet.active.item, +.ui.inverted.violet.menu { + background-color: @violet; +} +.ui.inverted.violet.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.violet.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Purple */ +.ui.inverted.menu .purple.active.item, +.ui.inverted.purple.menu { + background-color: @purple; +} +.ui.inverted.purple.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.purple.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Pink */ +.ui.inverted.menu .pink.active.item, +.ui.inverted.pink.menu { + background-color: @pink; +} +.ui.inverted.pink.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.pink.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Brown */ +.ui.inverted.menu .brown.active.item, +.ui.inverted.brown.menu { + background-color: @brown; +} +.ui.inverted.brown.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.brown.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Grey */ +.ui.inverted.menu .grey.active.item, +.ui.inverted.grey.menu { + background-color: @grey; +} +.ui.inverted.grey.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.grey.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.menu .item, +.ui.fitted.menu .item .menu .item, +.ui.menu .fitted.item { + padding: 0em; +} +.ui.horizontally.fitted.menu .item, +.ui.horizontally.fitted.menu .item .menu .item, +.ui.menu .horizontally.fitted.item { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: @itemHorizontalPadding; + padding-right: @itemHorizontalPadding; +} + +/*-------------- + Borderless +---------------*/ + +.ui.borderless.menu .item:before, +.ui.borderless.menu .item .menu .item:before, +.ui.menu .borderless.item:before { + background: none !important; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.menu { + display: inline-flex; + margin: 0em; + vertical-align: middle; +} +.ui.compact.vertical.menu { + display: inline-block; +} +.ui.compact.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.compact.menu .item:last-child:before { + display: none; +} +.ui.compact.vertical.menu { + width: auto !important; +} +.ui.compact.vertical.menu .item:last-child::before { + display: block; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.menu.fluid, +.ui.vertical.menu.fluid { + width: 100% !important; +} + + +/*------------------- + Evenly Sized +--------------------*/ + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0em !important; + padding-right: 0em !important; + margin-left: 0em !important; + margin-right: 0em !important; + text-align: center; + justify-content: center; +} + +.ui.item.menu .item:last-child:before { + display: none; +} + +.ui.menu.two.item .item { + width: 50%; +} +.ui.menu.three.item .item { + width: 33.333%; +} +.ui.menu.four.item .item { + width: 25%; +} +.ui.menu.five.item .item { + width: 20%; +} +.ui.menu.six.item .item { + width: 16.666%; +} +.ui.menu.seven.item .item { + width: 14.285%; +} +.ui.menu.eight.item .item { + width: 12.500%; +} +.ui.menu.nine.item .item { + width: 11.11%; +} +.ui.menu.ten.item .item { + width: 10.0%; +} +.ui.menu.eleven.item .item { + width: 9.09%; +} +.ui.menu.twelve.item .item { + width: 8.333%; +} + +/*-------------- + Fixed +---------------*/ + +.ui.menu.fixed { + position: fixed; + z-index: 101; + margin: 0em; + width: 100%; +} +.ui.menu.fixed, +.ui.menu.fixed .item:first-child, +.ui.menu.fixed .item:last-child { + border-radius: 0px !important; +} + +.ui.fixed.menu, +.ui[class*="top fixed"].menu { + top: 0px; + left: 0px; + right: auto; + bottom: auto; +} +.ui[class*="top fixed"].menu { + border-top: none; + border-left: none; + border-right: none; +} +.ui[class*="right fixed"].menu { + border-top: none; + border-bottom: none; + border-right: none; + top: 0px; + right: 0px; + left: auto; + bottom: auto; + width: auto; + height: 100%; +} +.ui[class*="bottom fixed"].menu { + border-bottom: none; + border-left: none; + border-right: none; + bottom: 0px; + left: 0px; + top: auto; + right: auto; +} +.ui[class*="left fixed"].menu { + border-top: none; + border-bottom: none; + border-left: none; + top: 0px; + left: 0px; + right: auto; + bottom: auto; + width: auto; + height: 100%; +} + +/* Coupling with Grid */ +.ui.fixed.menu + .ui.grid { + padding-top: @fixedPrecedingGridMargin; +} + + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.menu .item:after { + visibility: hidden; + position: absolute; + content: ''; + top: 100%; + left: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + background: none; + + margin: (@arrowBorderWidth / 2) 0em 0em; + width: @arrowSize; + height: @arrowSize; + + border: none; + border-bottom: @arrowBorder; + border-right: @arrowBorder; + + z-index: @arrowZIndex; + transition: @arrowTransition; +} +.ui.vertical.pointing.menu .item:after { + position: absolute; + top: 50%; + right: 0%; + bottom: auto; + left: auto; + + transform: translateX(50%) translateY(-50%) rotate(45deg); + margin: 0em -(@arrowBorderWidth / 2) 0em 0em; + + border: none; + border-top: @arrowBorder; + border-right: @arrowBorder; +} + +/* Active */ +.ui.pointing.menu .active.item:after { + visibility: visible; +} +.ui.pointing.menu .active.dropdown.item:after { + visibility: hidden; +} + +/* Don't double up pointers */ +.ui.pointing.menu .dropdown.active.item:after, +.ui.pointing.menu .active.item .menu .active.item:after { + display: none; +} + +/* Colors */ +.ui.pointing.menu .active.item:hover:after { + background-color: @arrowHoverColor; +} +.ui.pointing.menu .active.item:after { + background-color: @arrowActiveColor; +} +.ui.pointing.menu .active.item:hover:after { + background-color: @arrowActiveHoverColor; +} + +.ui.vertical.pointing.menu .active.item:hover:after { + background-color: @arrowVerticalHoverColor; +} +.ui.vertical.pointing.menu .active.item:after { + background-color: @arrowVerticalActiveColor; +} +.ui.vertical.pointing.menu .menu .active.item:after { + background-color: @arrowVerticalSubMenuColor; +} + + + +/*-------------- + Attached +---------------*/ + +/* Middle */ +.ui.attached.menu { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; +} +.ui.attached + .ui.attached.menu:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].menu { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.menu[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].menu { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].menu:last-child { + margin-bottom: 0em; +} + +/* Attached Menu Item */ +.ui.top.attached.menu > .item:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui.bottom.attached.menu > .item:first-child { + border-radius: 0em 0em 0em @borderRadius; +} + +/* Tabular Attached */ +.ui.attached.menu:not(.tabular) { + border: @attachedBorder; +} +.ui.attached.inverted.menu { + border: none; +} +.ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; +} + +/*-------------- + Sizes +---------------*/ + +/* Small */ +.ui.small.menu { + font-size: @small; +} +.ui.small.vertical.menu { + width: @smallWidth; +} + +/* Medium */ +.ui.menu { + font-size: @medium; +} +.ui.vertical.menu { + width: @mediumWidth; +} + +/* Large */ +.ui.large.menu { + font-size: @large; +} +.ui.large.vertical.menu { + width: @largeWidth; +} + +/* Huge */ +.ui.huge.menu { + font-size: @huge; +} +.ui.huge.vertical.menu { + width: @hugeWidth; +} + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/collections/message.less b/ui/app/bower_components/semantic-ui/src/definitions/collections/message.less new file mode 100755 index 00000000..83d4232e --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/collections/message.less @@ -0,0 +1,459 @@ +/*! + * # Semantic UI - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'message'; + +@import (multiple) '../../theme.config'; + +/******************************* + Message +*******************************/ + +.ui.message { + position: relative; + min-height: 1em; + margin: @verticalMargin 0em; + background: @background; + padding: @verticalPadding @horizontalPadding; + line-height: @lineHeight; + color: @textColor; + transition: @transition; + border-radius: @borderRadius; + box-shadow: @boxShadow; +} + +.ui.message:first-child { + margin-top: 0em; +} +.ui.message:last-child { + margin-bottom: 0em; +} + + +/*-------------- + Content +---------------*/ + +/* Header */ +.ui.message .header { + display: @headerDisplay; + font-family: @headerFont; + font-weight: @headerFontWeight; + margin: @headerMargin; +} + +/* Default font size */ +.ui.message .header:not(.ui) { + font-size: @headerFontSize; +} + +/* Paragraph */ +.ui.message p { + opacity: @messageTextOpacity; + margin: @messageParagraphMargin 0em; +} +.ui.message p:first-child { + margin-top: 0em; +} +.ui.message p:last-child { + margin-bottom: 0em; +} +.ui.message .header + p { + margin-top: @headerParagraphDistance; +} + +/* List */ +.ui.message .list:not(.ui) { + text-align: left; + padding: 0em; + opacity: @listOpacity; + list-style-position: @listStylePosition; + margin: @listMargin 0em 0em; +} +.ui.message .list:not(.ui):first-child { + margin-top: 0em; +} +.ui.message .list:not(.ui):last-child { + margin-bottom: 0em; +} +.ui.message .list:not(.ui) li { + position: relative; + list-style-type: none; + margin: 0em 0em @listItemMargin @listItemIndent; + padding: 0em; +} +.ui.message .list:not(.ui) li:before { + position: absolute; + content: '•'; + left: -1em; + height: 100%; + vertical-align: baseline; +} +.ui.message .list:not(.ui) li:last-child { + margin-bottom: 0em; +} + + +/* Icon */ +.ui.message > .icon { + margin-right: @iconDistance; +} + +/* Close Icon */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + margin: 0em; + top: @closeTopDistance; + right: @closeRightDistance; + opacity: @closeOpacity; + transition: @closeTransition; +} +.ui.message > .close.icon:hover { + opacity: 1; +} + +/* First / Last Element */ +.ui.message > :first-child { + margin-top: 0em; +} +.ui.message > :last-child { + margin-bottom: 0em; +} + +/******************************* + Coupling +*******************************/ + +.ui.dropdown .menu > .message { + margin: 0px -@borderWidth; +} + +/******************************* + States +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.visible.visible.visible.message { + display: block; +} + +.ui.icon.visible.visible.visible.visible.message { + display: flex; +} + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.hidden.hidden.hidden.message { + display: none; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Compact +---------------*/ + +.ui.compact.message { + display: inline-block; +} + + +/*-------------- + Attached +---------------*/ + +.ui.attached.message { + margin-bottom: @attachedYOffset; + border-radius: @borderRadius @borderRadius 0em 0em; + box-shadow: @attachedBoxShadow; + margin-left: @attachedXOffset; + margin-right: @attachedXOffset; +} +.ui.attached + .ui.attached.message:not(.top):not(.bottom) { + margin-top: @attachedYOffset; + border-radius: 0em; +} +.ui.bottom.attached.message { + margin-top: @attachedYOffset; + border-radius: 0em 0em @borderRadius @borderRadius; + box-shadow: @attachedBottomBoxShadow; +} +.ui.bottom.attached.message:not(:last-child) { + margin-bottom: @verticalMargin; +} +.ui.attached.icon.message { + width: auto; +} + + +/*-------------- + Icon +---------------*/ + +.ui.icon.message { + display: flex; + width: 100%; + align-items: center; +} +.ui.icon.message > .icon:not(.close) { + display: block; + flex: 0 0 auto; + width: auto; + line-height: 1; + vertical-align: @iconVerticalAlign; + font-size: @iconSize; + opacity: @iconOpacity; +} +.ui.icon.message > .content { + display: block; + flex: 1 1 auto; + vertical-align: @iconVerticalAlign; +} + + +.ui.icon.message .icon:not(.close) + .content { + padding-left: @iconContentDistance; +} +.ui.icon.message .circular.icon { + width: 1em; +} + +/*-------------- + Floating +---------------*/ + +.ui.floating.message { + box-shadow: @floatingBoxShadow; +} + + +/*-------------- + Colors +---------------*/ + +.ui.black.message { + background-color: @black; + color: @invertedTextColor; +} + +/*-------------- + Types +---------------*/ + +/* Positive */ +.ui.positive.message { + background-color: @positiveBackgroundColor; + color: @positiveTextColor; +} +.ui.positive.message, +.ui.attached.positive.message { + box-shadow: @positiveBoxShadow; +} +.ui.positive.message .header { + color: @positiveHeaderColor; +} + +/* Negative */ +.ui.negative.message { + background-color: @negativeBackgroundColor; + color: @negativeTextColor; +} +.ui.negative.message, +.ui.attached.negative.message { + box-shadow: @negativeBoxShadow; +} +.ui.negative.message .header { + color: @negativeHeaderColor; +} + +/* Info */ +.ui.info.message { + background-color: @infoBackgroundColor; + color: @infoTextColor; +} +.ui.info.message, +.ui.attached.info.message { + box-shadow: @infoBoxShadow; +} +.ui.info.message .header { + color: @infoHeaderColor; +} + +/* Warning */ +.ui.warning.message { + background-color: @warningBackgroundColor; + color: @warningTextColor; +} +.ui.warning.message, +.ui.attached.warning.message { + box-shadow: @warningBoxShadow; +} +.ui.warning.message .header { + color: @warningHeaderColor; +} + +/* Error */ +.ui.error.message { + background-color: @errorBackgroundColor; + color: @errorTextColor; +} +.ui.error.message, +.ui.attached.error.message { + box-shadow: @errorBoxShadow; +} +.ui.error.message .header { + color: @errorHeaderColor; +} + +/* Success */ +.ui.success.message { + background-color: @successBackgroundColor; + color: @successTextColor; +} +.ui.success.message, +.ui.attached.success.message { + box-shadow: @successBoxShadow; +} +.ui.success.message .header { + color: @successHeaderColor; +} + + +/* Colors */ +.ui.inverted.message, +.ui.black.message { + background-color: @black; + color: @invertedTextColor; +} + +.ui.red.message { + background-color: @redBackground; + color: @redTextColor; +} +.ui.red.message .header { + color: @redHeaderColor; +} + +.ui.orange.message { + background-color: @orangeBackground; + color: @orangeTextColor; +} +.ui.orange.message .header { + color: @orangeHeaderColor; +} + +.ui.yellow.message { + background-color: @yellowBackground; + color: @yellowTextColor; +} +.ui.yellow.message .header { + color: @yellowHeaderColor; +} + +.ui.olive.message { + background-color: @oliveBackground; + color: @oliveTextColor; +} +.ui.olive.message .header { + color: @oliveHeaderColor; +} + +.ui.green.message { + background-color: @greenBackground; + color: @greenTextColor; +} +.ui.green.message .header { + color: @greenHeaderColor; +} + +.ui.teal.message { + background-color: @tealBackground; + color: @tealTextColor; +} +.ui.teal.message .header { + color: @tealHeaderColor; +} + +.ui.blue.message { + background-color: @blueBackground; + color: @blueTextColor; +} +.ui.blue.message .header { + color: @blueHeaderColor; +} + +.ui.violet.message { + background-color: @violetBackground; + color: @violetTextColor; +} +.ui.violet.message .header { + color: @violetHeaderColor; +} + +.ui.purple.message { + background-color: @purpleBackground; + color: @purpleTextColor; +} +.ui.purple.message .header { + color: @purpleHeaderColor; +} + +.ui.pink.message { + background-color: @pinkBackground; + color: @pinkTextColor; +} +.ui.pink.message .header { + color: @pinkHeaderColor; +} + +.ui.brown.message { + background-color: @brownBackground; + color: @brownTextColor; +} +.ui.brown.message .header { + color: @brownHeaderColor; +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.message { + font-size: @relativeSmall; +} +.ui.message { + font-size: @relativeMedium; +} +.ui.large.message { + font-size: @relativeLarge; +} +.ui.huge.message { + font-size: @relativeHuge; +} +.ui.massive.message { + font-size: @relativeMassive; +} + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/collections/table.less b/ui/app/bower_components/semantic-ui/src/definitions/collections/table.less new file mode 100755 index 00000000..b9d83971 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/collections/table.less @@ -0,0 +1,1101 @@ +/*! + * # Semantic UI - Table + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'table'; + +@import (multiple) '../../theme.config'; + +/******************************* + Table +*******************************/ + +/* Prototype */ +.ui.table { + width: 100%; + background: @background; + margin: @margin; + border: @border; + box-shadow: @boxShadow; + border-radius: @borderRadius; + text-align: @textAlign; + color: @color; + border-collapse: @borderCollapse; + border-spacing: @borderSpacing; +} + +.ui.table:first-child { + margin-top: 0em; +} +.ui.table:last-child { + margin-bottom: 0em; +} + +/******************************* + Parts +*******************************/ + +/* Table Content */ +.ui.table th, +.ui.table td { + transition: @transition; +} + +/* Headers */ +.ui.table thead { + box-shadow: @headerBoxShadow; +} +.ui.table thead th { + cursor: auto; + background: @headerBackground; + text-align: @headerAlign; + color: @headerColor; + padding: @headerVerticalPadding @headerHorizontalPadding; + vertical-align: @headerVerticalAlign; + font-style: @headerFontStyle; + font-weight: @headerFontWeight; + text-transform: @headerTextTransform; + border-bottom: @headerBorder; + border-left: @headerDivider; +} + +.ui.table thead tr > th:first-child { + border-left: none; +} + +.ui.table thead tr:first-child > th:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui.table thead tr:first-child > th:last-child { + border-radius: 0em @borderRadius 0em 0em; +} +.ui.table thead tr:first-child > th:only-child { + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Footer */ +.ui.table tfoot { + box-shadow: @footerBoxShadow; +} +.ui.table tfoot th { + cursor: auto; + border-top: @footerBorder; + background: @footerBackground; + text-align: @footerAlign; + color: @footerColor; + padding: @footerVerticalPadding @footerHorizontalPadding; + vertical-align: @footerVerticalAlign; + font-style: @footerFontStyle; + font-weight: @footerFontWeight; + text-transform: @footerTextTransform; +} +.ui.table tfoot tr > th:first-child { + border-left: none; +} +.ui.table tfoot tr:first-child > th:first-child { + border-radius: 0em 0em 0em @borderRadius; +} +.ui.table tfoot tr:first-child > th:last-child { + border-radius: 0em 0em @borderRadius 0em; +} +.ui.table tfoot tr:first-child > th:only-child { + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Table Row */ +.ui.table tr td { + border-top: @rowBorder; +} +.ui.table tr:first-child td { + border-top: none; +} + +/* Table Cells */ +.ui.table td { + padding: @cellVerticalPadding @cellHorizontalPadding; + text-align: @cellTextAlign; +} + +/* Icons */ +.ui.table > .icon { + vertical-align: @iconVerticalAlign; +} +.ui.table > .icon:only-child { + margin: 0em; +} + +/* Table Segment */ +.ui.table.segment { + padding: 0em; +} +.ui.table.segment:after { + display: none; +} +.ui.table.segment.stacked:after { + display: block; +} + + +/* Responsive */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.table:not(.unstackable) { + width: 100%; + } + .ui.table:not(.unstackable) tbody, + .ui.table:not(.unstackable) tr, + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + display: block !important; + width: auto !important; + display: block !important; + } + + .ui.table:not(.unstackable) { + padding: 0em; + } + .ui.table:not(.unstackable) thead { + display: @responsiveHeaderDisplay; + } + .ui.table:not(.unstackable) tfoot { + display: @responsiveFooterDisplay; + } + .ui.table:not(.unstackable) tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + background: none; + border: none !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important; + box-shadow: @responsiveCellBoxShadow; + } + .ui.table:not(.unstackable) th:first-child, + .ui.table:not(.unstackable) td:first-child { + font-weight: bold; + } + + /* Definition Table */ + .ui.definition.table:not(.unstackable) thead th:first-child { + box-shadow: none !important; + } +} + + +/******************************* + Coupling +*******************************/ + +/* UI Image */ +.ui.table th .image, +.ui.table th .image img, +.ui.table td .image, +.ui.table td .image img { + max-width: none; +} + + +/******************************* + Types +*******************************/ + +/*-------------- + Complex +---------------*/ + +.ui.structured.table { + border-collapse: collapse; +} +.ui.structured.table thead th { + border-left: @headerDivider; + border-right: @headerDivider; +} +.ui.structured.sortable.table thead th { + border-left: @sortableBorder; + border-right: @sortableBorder; +} +.ui.structured.basic.table th { + border-left: @basicTableHeaderDivider; + border-right: @basicTableHeaderDivider; +} +.ui.structured.celled.table tr th, +.ui.structured.celled.table tr td { + border-left: @cellBorder; + border-right: @cellBorder; +} + +/*-------------- + Definition +---------------*/ + +.ui.definition.table thead:not(.full-width) th:first-child { + pointer-events: none; + background: @definitionHeaderBackground; + font-weight: @definitionHeaderFontWeight; + color: @definitionHeaderColor; + box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground; +} + +.ui.definition.table tfoot:not(.full-width) th:first-child { + pointer-events: none; + background: @definitionFooterBackground; + font-weight: @definitionFooterColor; + color: @definitionFooterFontWeight; + box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground; +} + +/* Remove Border */ +.ui.celled.definition.table thead:not(.full-width) th:first-child { + box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground; +} +.ui.celled.definition.table tfoot:not(.full-width) th:first-child { + box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground; +} + +/* Highlight Defining Column */ +.ui.definition.table tr td:first-child { + background: @definitionColumnBackground; + font-weight: @definitionColumnFontWeight; + color: @definitionColumnColor; +} + +/* Fix 2nd Column */ +.ui.definition.table thead:not(.full-width) th:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} +.ui.definition.table tfoot:not(.full-width) th:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} +.ui.definition.table td:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Positive +---------------*/ + +.ui.table tr.positive, +.ui.table td.positive { + box-shadow: @positiveBoxShadow; +} +.ui.table tr.positive, +.ui.table td.positive { + background: @positiveBackgroundColor !important; + color: @positiveColor !important; +} + +/*-------------- + Negative +---------------*/ + +.ui.table tr.negative, +.ui.table td.negative { + box-shadow: @negativeBoxShadow; +} +.ui.table tr.negative, +.ui.table td.negative { + background: @negativeBackgroundColor !important; + color: @negativeColor !important; +} + +/*-------------- + Error +---------------*/ + +.ui.table tr.error, +.ui.table td.error { + box-shadow: @errorBoxShadow; +} +.ui.table tr.error, +.ui.table td.error { + background: @errorBackgroundColor !important; + color: @errorColor !important; +} +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning, +.ui.table td.warning { + box-shadow: @warningBoxShadow; +} +.ui.table tr.warning, +.ui.table td.warning { + background: @warningBackgroundColor !important; + color: @warningColor !important; +} + +/*-------------- + Active +---------------*/ + +.ui.table tr.active, +.ui.table td.active { + box-shadow: @activeBoxShadow; +} +.ui.table tr.active, +.ui.table td.active { + background: @activeBackgroundColor !important; + color: @activeColor !important; +} + + + +/*-------------- + Disabled +---------------*/ + +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover, +.ui.table tr:hover td.disabled { + pointer-events: none; + color: @disabledTextColor; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width : @largestTabletScreen) { + + .ui[class*="tablet stackable"].table, + .ui[class*="tablet stackable"].table tbody, + .ui[class*="tablet stackable"].table tr, + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + display: block !important; + width: 100% !important; + display: block !important; + } + + .ui[class*="tablet stackable"].table { + padding: 0em; + } + .ui[class*="tablet stackable"].table thead { + display: @responsiveHeaderDisplay; + } + .ui[class*="tablet stackable"].table tfoot { + display: @responsiveFooterDisplay; + } + .ui[class*="tablet stackable"].table tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + background: none; + border: none !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; + box-shadow: @responsiveCellBoxShadow; + } + + /* Definition Table */ + .ui.definition[class*="tablet stackable"].table thead th:first-child { + box-shadow: none !important; + } +} + +/*-------------- + Text Alignment +---------------*/ + +.ui.table[class*="left aligned"], +.ui.table [class*="left aligned"] { + text-align: left; +} +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + text-align: center; +} +.ui.table[class*="right aligned"], +.ui.table [class*="right aligned"] { + text-align: right; +} + +/*------------------ + Vertical Alignment +------------------*/ + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} +.ui.table[class*="middle aligned"], +.ui.table [class*="middle aligned"] { + vertical-align: middle; +} +.ui.table[class*="bottom aligned"], +.ui.table [class*="bottom aligned"] { + vertical-align: bottom; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.table th.collapsing, +.ui.table td.collapsing { + width: 1px; + white-space: nowrap; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.table { + table-layout: fixed; +} + +.ui.fixed.table th, +.ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; +} + + +/*-------------- + Selectable +---------------*/ + +.ui.selectable.table tbody tr:hover, +.ui.table tbody tr td.selectable:hover { + background: @selectableBackground !important; + color: @selectableTextColor !important; +} +.ui.selectable.inverted.table tbody tr:hover, +.ui.inverted.table tbody tr td.selectable:hover { + background: @selectableInvertedBackground !important; + color: @selectableInvertedTextColor !important; +} + +/* Selectable Cell Link */ +.ui.table tbody tr td.selectable { + padding: 0em; +} +.ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + padding: @cellVerticalPadding @cellHorizontalPadding; +} + +/* Other States */ +.ui.selectable.table tr.error:hover, +.ui.table tr td.selectable.error:hover, +.ui.selectable.table tr:hover td.error { + background: @errorBackgroundHover !important; + color: @errorColorHover !important; +} +.ui.selectable.table tr.warning:hover, +.ui.table tr td.selectable.warning:hover, +.ui.selectable.table tr:hover td.warning { + background: @warningBackgroundHover !important; + color: @warningColorHover !important; +} +.ui.selectable.table tr.active:hover, +.ui.table tr td.selectable.active:hover, +.ui.selectable.table tr:hover td.active { + background: @activeBackgroundColor !important; + color: @activeColor !important; +} +.ui.selectable.table tr.positive:hover, +.ui.table tr td.selectable.positive:hover, +.ui.selectable.table tr:hover td.positive { + background: @positiveBackgroundHover !important; + color: @positiveColorHover !important; +} +.ui.selectable.table tr.negative:hover, +.ui.table tr td.selectable.negative:hover, +.ui.selectable.table tr:hover td.negative { + background: @negativeBackgroundHover !important; + color: @negativeColorHover !important; +} + + + +/*------------------- + Attached +--------------------*/ + +/* Middle */ +.ui.attached.table { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached + .ui.attached.table:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].table { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.table[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].table { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].table:last-child { + margin-bottom: 0em; +} + +/*-------------- + Striped +---------------*/ + +/* Table Striping */ +.ui.striped.table > tr:nth-child(2n), +.ui.striped.table tbody tr:nth-child(2n) { + background-color: @stripedBackground; +} + +/* Stripes */ +.ui.inverted.striped.table > tr:nth-child(2n), +.ui.inverted.striped.table tbody tr:nth-child(2n) { + background-color: @invertedStripedBackground; +} + +/*-------------- + Single Line +---------------*/ + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.table { + border-top: @coloredBorderSize solid @red; +} +.ui.inverted.red.table { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +.ui.orange.table { + border-top: @coloredBorderSize solid @orange; +} +.ui.inverted.orange.table { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +.ui.yellow.table { + border-top: @coloredBorderSize solid @yellow; +} +.ui.inverted.yellow.table { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +.ui.olive.table { + border-top: @coloredBorderSize solid @olive; +} +.ui.inverted.olive.table { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +.ui.green.table { + border-top: @coloredBorderSize solid @green; +} +.ui.inverted.green.table { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +.ui.teal.table { + border-top: @coloredBorderSize solid @teal; +} +.ui.inverted.teal.table { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +.ui.blue.table { + border-top: @coloredBorderSize solid @blue; +} +.ui.inverted.blue.table { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +.ui.violet.table { + border-top: @coloredBorderSize solid @violet; +} +.ui.inverted.violet.table { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +.ui.purple.table { + border-top: @coloredBorderSize solid @purple; +} +.ui.inverted.purple.table { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +.ui.pink.table { + border-top: @coloredBorderSize solid @pink; +} +.ui.inverted.pink.table { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +.ui.brown.table { + border-top: @coloredBorderSize solid @brown; +} +.ui.inverted.brown.table { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +.ui.grey.table { + border-top: @coloredBorderSize solid @grey; +} +.ui.inverted.grey.table { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +.ui.black.table { + border-top: @coloredBorderSize solid @black; +} +.ui.inverted.black.table { + background-color: @black !important; + color: @white !important; +} + + +/*-------------- + Column Count +---------------*/ + +/* Grid Based */ +.ui.one.column.table td { + width: @oneColumn; +} +.ui.two.column.table td { + width: @twoColumn; +} +.ui.three.column.table td { + width: @threeColumn; +} +.ui.four.column.table td { + width: @fourColumn; +} +.ui.five.column.table td { + width: @fiveColumn; +} +.ui.six.column.table td { + width: @sixColumn; +} +.ui.seven.column.table td { + width: @sevenColumn; +} +.ui.eight.column.table td { + width: @eightColumn; +} +.ui.nine.column.table td { + width: @nineColumn; +} +.ui.ten.column.table td { + width: @tenColumn; +} +.ui.eleven.column.table td { + width: @elevenColumn; +} +.ui.twelve.column.table td { + width: @twelveColumn; +} +.ui.thirteen.column.table td { + width: @thirteenColumn; +} +.ui.fourteen.column.table td { + width: @fourteenColumn; +} +.ui.fifteen.column.table td { + width: @fifteenColumn; +} +.ui.sixteen.column.table td { + width: @sixteenColumn; +} + +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: @oneWide; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: @twoWide; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: @threeWide; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: @fourWide; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: @fiveWide; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: @sixWide; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: @sevenWide; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: @eightWide; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: @nineWide; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: @tenWide; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: @elevenWide; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: @twelveWide; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: @thirteenWide; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: @fourteenWide; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: @fifteenWide; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: @sixteenWide; +} + +/*-------------- + Sortable +---------------*/ + +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; + border-left: @sortableBorder; + color: @sortableColor; +} +.ui.sortable.table thead th:first-child { + border-left: none; +} +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + user-select: none; +} + +.ui.sortable.table thead th:after { + display: none; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + content: ''; + height: 1em; + width: @sortableIconWidth; + opacity: @sortableIconOpacity; + margin: 0em 0em 0em @sortableIconDistance; + font-family: @sortableIconFont; +} +.ui.sortable.table thead th.ascending:after { + content: @sortableIconAscending; +} +.ui.sortable.table thead th.descending:after { + content: @sortableIconDescending; +} + +/* Hover */ +.ui.sortable.table th.disabled:hover { + cursor: auto; + color: @sortableDisabledColor; +} +.ui.sortable.table thead th:hover { + background: @sortableHoverBackground; + color: @sortableHoverColor; +} + +/* Sorted */ +.ui.sortable.table thead th.sorted { + background: @sortableActiveBackground; + color: @sortableActiveColor; +} +.ui.sortable.table thead th.sorted:after { + display: inline-block; +} + +/* Sorted Hover */ +.ui.sortable.table thead th.sorted:hover { + background: @sortableActiveHoverBackground; + color: @sortableActiveHoverColor; +} + +/* Inverted */ +.ui.inverted.sortable.table thead th.sorted { + background: @sortableInvertedActiveBackground; + color: @sortableInvertedActiveColor; +} +.ui.inverted.sortable.table thead th:hover { + background: @sortableInvertedHoverBackground; + color: @sortableInvertedHoverColor; +} +.ui.inverted.sortable.table thead th { + border-left-color: @sortableInvertedBorderColor; + border-right-color: @sortableInvertedBorderColor; +} + + +/*-------------- + Inverted +---------------*/ + +/* Text Color */ +.ui.inverted.table { + background: @invertedBackground; + color: @invertedCellColor; + border: @invertedBorder; +} +.ui.inverted.table th { + background-color: @invertedHeaderBackground; + border-color: @invertedHeaderBorderColor !important; + color: @invertedHeaderColor; +} +.ui.inverted.table tr td { + border-color: @invertedCellBorderColor !important; +} + +.ui.inverted.table tr.disabled td, +.ui.inverted.table tr td.disabled, +.ui.inverted.table tr.disabled:hover td, +.ui.inverted.table tr:hover td.disabled { + pointer-events: none; + color: @invertedDisabledTextColor; +} + +/* Definition */ +.ui.inverted.definition.table tfoot:not(.full-width) th:first-child, +.ui.inverted.definition.table thead:not(.full-width) th:first-child { + background: @definitionPageBackground; +} +.ui.inverted.definition.table tr td:first-child { + background: @invertedDefinitionColumnBackground; + color: @invertedDefinitionColumnColor; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.collapsing.table { + width: auto; +} + +/*-------------- + Basic +---------------*/ + +.ui.basic.table { + background: @basicTableBackground; + border: @basicTableBorder; + box-shadow: @basicBoxShadow; +} +.ui.basic.table thead, +.ui.basic.table tfoot { + box-shadow: none; +} +.ui.basic.table th { + background: @basicTableHeaderBackground; + border-left: @basicTableHeaderDivider; +} +.ui.basic.table tbody tr { + border-bottom: @basicTableCellBorder; +} +.ui.basic.table td { + background: @basicTableCellBackground; +} +.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: @basicTableStripedBackground !important; +} + +/* Very Basic */ +.ui[class*="very basic"].table { + border: none; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td { + padding: @basicTableCellPadding; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { + padding-left: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { + padding-right: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { + padding-top: 0em; +} + +/*-------------- + Celled +---------------*/ + +.ui.celled.table tr th, +.ui.celled.table tr td { + border-left: @cellBorder; +} +.ui.celled.table tr th:first-child, +.ui.celled.table tr td:first-child { + border-left: none; +} + +/*-------------- + Padded +---------------*/ + +.ui.padded.table th { + padding-left: @paddedHorizontalPadding; + padding-right: @paddedHorizontalPadding; +} +.ui.padded.table th, +.ui.padded.table td { + padding: @paddedVerticalPadding @paddedHorizontalPadding; +} + +/* Very */ +.ui[class*="very padded"].table th { + padding-left: @veryPaddedHorizontalPadding; + padding-right: @veryPaddedHorizontalPadding; +} +.ui[class*="very padded"].table td { + padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding; +} + +/*-------------- + Compact +---------------*/ + +.ui.compact.table th { + padding-left: @compactHorizontalPadding; + padding-right: @compactHorizontalPadding; +} +.ui.compact.table td { + padding: @compactVerticalPadding @compactHorizontalPadding; +} + +/* Very */ +.ui[class*="very compact"].table th { + padding-left: @veryCompactHorizontalPadding; + padding-right: @veryCompactHorizontalPadding; +} +.ui[class*="very compact"].table td { + padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding; +} + +/*-------------- + Sizes +---------------*/ + +/* Small */ +.ui.small.table { + font-size: @small; +} + +/* Standard */ +.ui.table { + font-size: @medium; +} + +/* Large */ +.ui.large.table { + font-size: @large; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/button.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/button.less new file mode 100755 index 00000000..55358238 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/button.less @@ -0,0 +1,3288 @@ +/*! + * # Semantic UI - Button + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'button'; + +@import (multiple) '../../theme.config'; + +/******************************* + Button +*******************************/ + +.ui.button { + cursor: pointer; + display: inline-block; + + min-height: 1em; + + outline: none; + border: none; + vertical-align: @verticalAlign; + background: @background; + color: @textColor; + + font-family: @fontFamily; + + margin: 0em @horizontalMargin @verticalMargin 0em; + padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); + + text-transform: @textTransform; + text-shadow: @textShadow; + font-weight: @fontWeight; + line-height: @lineHeight; + font-style: normal; + text-align: center; + text-decoration: none; + + border-radius: @borderRadius; + box-shadow: @boxShadow; + + user-select: none; + transition: @transition; + will-change: @willChange; + + -webkit-tap-highlight-color: @tapColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +.ui.button:hover { + background-color: @hoverBackgroundColor; + background-image: @hoverBackgroundImage; + box-shadow: @hoverBoxShadow; + color: @hoverColor; +} + +.ui.button:hover .icon { + opacity: @iconHoverOpacity; +} + +/*-------------- + Focus +---------------*/ + +.ui.button:focus { + background-color: @focusBackgroundColor; + color: @focusColor; + background-image: @focusBackgroundImage !important; + box-shadow: @focusBoxShadow !important; +} + +.ui.button:focus .icon { + opacity: @iconFocusOpacity; +} + +/*-------------- + Down +---------------*/ + +.ui.button:active, +.ui.active.button:active { + background-color: @downBackgroundColor; + background-image: @downBackgroundImage; + color: @downColor; + box-shadow: @downBoxShadow; +} + +/*-------------- + Active +---------------*/ + +.ui.active.button { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; + box-shadow: @activeBoxShadow; + color: @activeColor; +} +.ui.active.button:hover { + background-color: @activeHoverBackgroundColor; + background-image: @activeHoverBackgroundImage; + color: @activeHoverColor; +} +.ui.active.button:active { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; +} + + +/*-------------- + Loading +---------------*/ + +/* Specificity hack */ +.ui.loading.loading.loading.loading.loading.loading.button { + position: relative; + cursor: default; + text-shadow: none !important; + color: transparent !important; + opacity: @loadingOpacity; + pointer-events: @loadingPointerEvents; + transition: @loadingTransition; +} +.ui.loading.button:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @invertedLoaderFillColor; +} +.ui.loading.button:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @invertedLoaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + box-shadow: none; +} + +@keyframes button-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.ui.basic.loading.button:not(.inverted):before { + border-color: @loaderFillColor; +} +.ui.basic.loading.button:not(.inverted):after { + border-top-color: @loaderLineColor; +} + +/*------------------- + Disabled +--------------------*/ + +.ui.buttons .disabled.button, +.ui.disabled.button, +.ui.button:disabled, +.ui.disabled.button:hover, +.ui.disabled.active.button { + cursor: default; + opacity: @disabledOpacity !important; + background-image: none !important; + box-shadow: none !important; + pointer-events: none; +} + +/* Basic Group With Disabled */ +.ui.basic.buttons .ui.disabled.button { + border-color: @disabledBorderColor; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Animated +--------------------*/ + +.ui.animated.button { + position: relative; + overflow: hidden; + padding-right: 0em !important; + vertical-align: @animatedVerticalAlign; + z-index: @animatedZIndex; +} + +.ui.animated.button .content { + will-change: transform, opacity; +} +.ui.animated.button .visible.content { + position: relative; + margin-right: @horizontalPadding; +} +.ui.animated.button .hidden.content { + position: absolute; + width: 100%; +} + +/* Horizontal */ +.ui.animated.button .visible.content, +.ui.animated.button .hidden.content { + transition: right @animationDuration @animationEasing 0s; +} +.ui.animated.button .visible.content { + left: auto; + right: 0%; +} +.ui.animated.button .hidden.content { + top: 50%; + left: auto; + right: -100%; + margin-top: -(@lineHeight / 2); +} +.ui.animated.button:focus .visible.content, +.ui.animated.button:hover .visible.content { + left: auto; + right: 200%; +} +.ui.animated.button:focus .hidden.content, +.ui.animated.button:hover .hidden.content { + left: auto; + right: 0%; +} + +/* Vertical */ +.ui.vertical.animated.button .visible.content, +.ui.vertical.animated.button .hidden.content { + transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing; +} +.ui.vertical.animated.button .visible.content { + transform: translateY(0%); + right: auto; +} +.ui.vertical.animated.button .hidden.content { + top: -50%; + left: 0%; + right: auto; +} +.ui.vertical.animated.button:focus .visible.content, +.ui.vertical.animated.button:hover .visible.content { + transform: translateY(200%); + right: auto; +} +.ui.vertical.animated.button:focus .hidden.content, +.ui.vertical.animated.button:hover .hidden.content { + top: 50%; + right: auto; +} + +/* Fade */ +.ui.fade.animated.button .visible.content, +.ui.fade.animated.button .hidden.content { + transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing; +} +.ui.fade.animated.button .visible.content { + left: auto; + right: auto; + opacity: 1; + transform: scale(1); +} +.ui.fade.animated.button .hidden.content { + opacity: 0; + left: 0%; + right: auto; + transform: scale(@fadeScaleHigh); +} +.ui.fade.animated.button:focus .visible.content, +.ui.fade.animated.button:hover .visible.content { + left: auto; + right: auto; + opacity: 0; + transform: scale(@fadeScaleLow); +} +.ui.fade.animated.button:focus .hidden.content, +.ui.fade.animated.button:hover .hidden.content { + left: 0%; + right: auto; + opacity: 1; + transform: scale(1); +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.button { + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + background: transparent none; + color: @white; + text-shadow: none !important; +} + +/* Group */ +.ui.inverted.buttons .button { + margin: @invertedGroupButtonOffset; +} +.ui.inverted.buttons .button:first-child { + margin-left: 0em; +} +.ui.inverted.vertical.buttons .button { + margin: @invertedVerticalGroupButtonOffset; +} +.ui.inverted.vertical.buttons .button:first-child { + margin-top: 0em; +} + +/* States */ + +/* Hover */ +.ui.inverted.button:hover { + background: @white; + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + color: @hoverColor; +} + +/* Active / Focus */ +.ui.inverted.button:focus, +.ui.inverted.button.active { + background: @white; + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + color: @focusColor; +} + +/* Active Focus */ +.ui.inverted.button.active:focus { + background: @midWhite; + box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important; + color: @focusColor; +} + + +/*------------------- + Labeled Button +--------------------*/ + +.ui.labeled.button:not(.icon) { + display: inline-flex; + flex-direction: row; + background: none !important; + padding: 0px !important; + border: none !important; + box-shadow: none !important; +} + +.ui.labeled.button > .button { + margin: 0px; +} +.ui.labeled.button > .label { + display: flex; + align-items: @labeledLabelAlign; + margin: 0px 0px 0px @labeledLabelBorderOffset !important; + font-size: @labeledLabelFontSize; + padding: @labeledLabelPadding; + font-size: @labeledLabelFontSize; + border-color: @labeledLabelBorderColor; +} + +/* Tag */ +.ui.labeled.button > .tag.label:before { + width: @labeledTagLabelSize; + height: @labeledTagLabelSize; +} + +/* Right */ +.ui.labeled.button:not([class*="left labeled"]) > .button { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.button:not([class*="left labeled"]) > .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +/* Left Side */ +.ui[class*="left labeled"].button > .button { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.ui[class*="left labeled"].button > .label { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} + +/*------------------- + Social +--------------------*/ + +/* Facebook */ +.ui.facebook.button { + background-color: @facebookColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.facebook.button:hover { + background-color: @facebookHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.facebook.button:active { + background-color: @facebookDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Twitter */ +.ui.twitter.button { + background-color: @twitterColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.twitter.button:hover { + background-color: @twitterHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.twitter.button:active { + background-color: @twitterDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Google Plus */ +.ui.google.plus.button { + background-color: @googlePlusColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.google.plus.button:hover { + background-color: @googlePlusHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.google.plus.button:active { + background-color: @googlePlusDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Linked In */ +.ui.linkedin.button { + background-color: @linkedInColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.linkedin.button:hover { + background-color: @linkedInHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.linkedin.button:active { + background-color: @linkedInDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* YouTube */ +.ui.youtube.button { + background-color: @youtubeColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.youtube.button:hover { + background-color: @youtubeHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.youtube.button:active { + background-color: @youtubeDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Instagram */ +.ui.instagram.button { + background-color: @instagramColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.instagram.button:hover { + background-color: @instagramHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.instagram.button:active { + background-color: @instagramDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Pinterest */ +.ui.pinterest.button { + background-color: @pinterestColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.pinterest.button:hover { + background-color: @pinterestHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.pinterest.button:active { + background-color: @pinterestDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* VK */ +.ui.vk.button { + background-color: #4D7198; + color: @white; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.vk.button:hover { + background-color: @vkHoverColor; + color: @white; +} +.ui.vk.button:active { + background-color: @vkDownColor; + color: @white; +} + +/*-------------- + Icon +---------------*/ + +.ui.button > .icon:not(.button) { + height: @iconHeight; + opacity: @iconOpacity; + margin: @iconMargin; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + color: @iconColor; +} +.ui.button > .right.icon:not(.button) { + margin: @rightIconMargin; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Floated +--------------------*/ + +.ui[class*="left floated"].buttons, +.ui[class*="left floated"].button { + float: left; + margin-left: 0em; + margin-right: @floatedMargin; +} +.ui[class*="right floated"].buttons, +.ui[class*="right floated"].button { + float: right; + margin-right: 0em; + margin-left: @floatedMargin; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.buttons .button, +.ui.compact.button { + padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset ); +} +.ui.compact.icon.buttons .button, +.ui.compact.icon.button { + padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset ); +} +.ui.compact.labeled.icon.buttons .button, +.ui.compact.labeled.icon.button { + padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset ); +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.buttons .button, +.ui.mini.buttons .or, +.ui.mini.button { + font-size: @mini; +} +.ui.tiny.buttons .button, +.ui.tiny.buttons .or, +.ui.tiny.button { + font-size: @tiny; +} +.ui.small.buttons .button, +.ui.small.buttons .or, +.ui.small.button { + font-size: @small; +} +.ui.buttons .button, +.ui.buttons .or, +.ui.button { + font-size: @medium; +} +.ui.large.buttons .button, +.ui.large.buttons .or, +.ui.large.button { + font-size: @large; +} +.ui.big.buttons .button, +.ui.big.buttons .or, +.ui.big.button { + font-size: @big; +} +.ui.huge.buttons .button, +.ui.huge.buttons .or, +.ui.huge.button { + font-size: @huge; +} +.ui.massive.buttons .button, +.ui.massive.buttons .or, +.ui.massive.button { + font-size: @massive; +} + +/*-------------- + Icon Only +---------------*/ + +.ui.icon.buttons .button, +.ui.icon.button { + padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: @iconButtonOpacity; + margin: 0em; + vertical-align: top; +} + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.buttons .button, +.ui.basic.button { + background: @basicBackground !important; + color: @basicTextColor !important; + font-weight: @basicFontWeight; + border-radius: @basicBorderRadius; + text-transform: @basicTextTransform; + text-shadow: none !important; + box-shadow: @basicBoxShadow; +} +.ui.basic.buttons { + box-shadow: @basicGroupBoxShadow; + border: @basicGroupBorder; + border-radius: @borderRadius; +} +.ui.basic.buttons .button { + border-radius: 0em; +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + background: @basicHoverBackground !important; + color: @basicHoverTextColor !important; + box-shadow: @basicHoverBoxShadow; +} +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { + background: @basicFocusBackground !important; + color: @basicFocusTextColor !important; + box-shadow: @basicFocusBoxShadow; +} +.ui.basic.buttons .button:active, +.ui.basic.button:active { + background: @basicDownBackground !important; + color: @basicDownTextColor !important; + box-shadow: @basicDownBoxShadow; +} +.ui.basic.buttons .active.button, +.ui.basic.active.button { + background: @basicActiveBackground !important; + box-shadow: @basicActiveBoxShadow !important; + color: @basicActiveTextColor; + box-shadow: @selectedBorderColor; +} +.ui.basic.buttons .active.button:hover, +.ui.basic.active.button:hover { + background-color: @transparentBlack; +} + +/* Vertical */ +.ui.basic.buttons .button:hover { + box-shadow: @basicHoverBoxShadow inset; +} +.ui.basic.buttons .button:active { + box-shadow: @basicDownBoxShadow inset; +} +.ui.basic.buttons .active.button { + box-shadow: @selectedBorderColor inset; +} + +/* Standard Basic Inverted */ +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + background-color: transparent !important; + color: @offWhite !important; + box-shadow: @basicInvertedBoxShadow !important; +} +.ui.basic.inverted.buttons .button:hover, +.ui.basic.inverted.button:hover { + color: @white !important; + box-shadow: @basicInvertedHoverBoxShadow !important; +} +.ui.basic.inverted.buttons .button:focus, +.ui.basic.inverted.button:focus { + color: @white !important; + box-shadow: @basicInvertedFocusBoxShadow !important; +} +.ui.basic.inverted.buttons .button:active, +.ui.basic.inverted.button:active { + background-color: @transparentWhite !important; + color: @white !important; + box-shadow: @basicInvertedDownBoxShadow !important; +} +.ui.basic.inverted.buttons .active.button, +.ui.basic.inverted.active.button { + background-color: @transparentWhite; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + box-shadow: @basicInvertedActiveBoxShadow; +} +.ui.basic.inverted.buttons .active.button:hover, +.ui.basic.inverted.active.button:hover { + background-color: @strongTransparentWhite; + box-shadow: @basicInvertedHoverBoxShadow !important; +} + + +/* Basic Group */ +.ui.basic.buttons .button { + border-left: @basicGroupBorder; + box-shadow: none; +} +.ui.basic.vertical.buttons .button { + border-left: none; +} +.ui.basic.vertical.buttons .button { + border-left-width: 0px; + border-top: @basicGroupBorder; +} +.ui.basic.vertical.buttons .button:first-child { + border-top-width: 0px; +} + + + +/*-------------- + Labeled Icon +---------------*/ + +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: @labeledIconPadding !important; + padding-right: @horizontalPadding !important; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + position: absolute; + height: 100%; + line-height: 1; + border-radius: 0px; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + text-align: center; + + margin: @labeledIconMargin; + width: @labeledIconWidth; + background-color: @labeledIconBackgroundColor; + color: @labeledIconColor; + box-shadow: @labeledIconLeftShadow; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + top: 0em; + left: 0em; +} + +/* Right Labeled */ +.ui[class*="right labeled"].icon.button { + padding-right: @labeledIconPadding !important; + padding-left: @horizontalPadding !important; +} +.ui[class*="right labeled"].icon.button > .icon { + left: auto; + right: 0em; + border-radius: 0px; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; + box-shadow: @labeledIconRightShadow; +} + + +.ui.labeled.icon.buttons > .button > .icon:before, +.ui.labeled.icon.button > .icon:before, +.ui.labeled.icon.buttons > .button > .icon:after, +.ui.labeled.icon.button > .icon:after { + display: block; + position: absolute; + width: 100%; + top: 50%; + text-align: center; + transform: translateY(-50%); +} + +.ui.labeled.icon.buttons .button > .icon { + border-radius: 0em; +} +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: @borderRadius; + border-bottom-left-radius: @borderRadius; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0em; + border-top-left-radius: @borderRadius; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0em; + border-bottom-left-radius: @borderRadius; +} + +/* Fluid Labeled */ +.ui.fluid[class*="left labeled"].icon.button, +.ui.fluid[class*="right labeled"].icon.button { + padding-left: @horizontalPadding !important; + padding-right: @horizontalPadding !important; +} + + + + +/*-------------- + Toggle +---------------*/ + +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .active.button, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + background-color: @positiveColor !important; + box-shadow: none !important; + text-shadow: @invertedTextShadow; + color: @invertedTextColor !important; +} +.ui.button.toggle.active:hover { + background-color: @positiveColorHover !important; + text-shadow: @invertedTextShadow; + color: @invertedTextColor !important; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.button { + border-radius: 10em; +} +.ui.circular.button > .icon { + width: 1em; + vertical-align: baseline; +} + + +/*------------------- + Or Buttons +--------------------*/ + +.ui.buttons .or { + position: relative; + width: @orGap; + height: @orHeight; + z-index: @orZIndex; +} +.ui.buttons .or:before { + position: absolute; + text-align: center; + border-radius: @circularRadius; + + content: @orText; + top: 50%; + left: 50%; + background-color: @orBackgroundColor; + text-shadow: @orTextShadow; + + margin-top: @orVerticalOffset; + margin-left: @orHorizontalOffset; + + width: @orCircleSize; + height: @orCircleSize; + + line-height: @orLineHeight; + color: @orTextColor; + + font-style: @orTextStyle; + font-weight: @orTextWeight; + + box-shadow: @orBoxShadow; +} +.ui.buttons .or[data-text]:before { + content: attr(data-text); +} + +/* Fluid Or */ +.ui.fluid.buttons .or { + width: 0em !important; +} +.ui.fluid.buttons .or:after { + display: none; +} + + +/*------------------- + Attached +--------------------*/ + + +/* Singular */ +.ui.attached.button { + position: relative; + display: block; + margin: 0em; + border-radius: 0em; + box-shadow: @attachedBoxShadow !important; +} + +/* Top / Bottom */ +.ui.attached.top.button { + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.attached.bottom.button { + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Left / Right */ +.ui.left.attached.button { + display: inline-block; + border-left: none; + text-align: right; + + padding-right: @attachedHorizontalPadding; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui.right.attached.button { + display: inline-block; + text-align: left; + padding-left: @attachedHorizontalPadding; + border-radius: 0em @borderRadius @borderRadius 0em; +} + +/* Plural */ +.ui.attached.buttons { + position: relative; + display: flex; + border-radius: 0em; + width: auto !important; + z-index: @attachedZIndex; + margin-left: @attachedOffset; + margin-right: @attachedOffset; +} +.ui.attached.buttons .button { + margin: 0em; +} +.ui.attached.buttons .button:first-child { + border-radius: 0em; +} +.ui.attached.buttons .button:last-child { + border-radius: 0em; +} + +/* Top / Bottom */ +.ui[class*="top attached"].buttons { + margin-bottom: @attachedOffset; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui[class*="top attached"].buttons .button:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui[class*="top attached"].buttons .button:last-child { + border-radius: 0em @borderRadius 0em 0em; +} + +.ui[class*="bottom attached"].buttons { + margin-top: @attachedOffset; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].buttons .button:first-child { + border-radius: 0em 0em 0em @borderRadius; +} +.ui[class*="bottom attached"].buttons .button:last-child { + border-radius: 0em 0em @borderRadius 0em; +} + +/* Left / Right */ +.ui[class*="left attached"].buttons { + display: inline-flex; + margin-right: 0em; + margin-left: @attachedOffset; + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui[class*="left attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: 0em @borderRadius 0em 0em; +} +.ui[class*="left attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0em 0em @borderRadius 0em; +} + +.ui[class*="right attached"].buttons { + display: inline-flex; + margin-left: 0em; + margin-right: @attachedOffset; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="right attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: @borderRadius 0em 0em 0em; +} +.ui[class*="right attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0em 0em 0em @borderRadius; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.buttons, +.ui.fluid.button { + width: 100%; +} +.ui.fluid.button { + display: block; +} + +.ui.two.buttons { + width: 100%; +} +.ui.two.buttons > .button { + width: 50%; +} + +.ui.three.buttons { + width: 100%; +} +.ui.three.buttons > .button { + width: 33.333%; +} + +.ui.four.buttons { + width: 100%; +} +.ui.four.buttons > .button { + width: 25%; +} + +.ui.five.buttons { + width: 100%; +} +.ui.five.buttons > .button { + width: 20%; +} + +.ui.six.buttons { + width: 100%; +} +.ui.six.buttons > .button { + width: 16.666%; +} + +.ui.seven.buttons { + width: 100%; +} +.ui.seven.buttons > .button { + width: 14.285%; +} + +.ui.eight.buttons { + width: 100%; +} +.ui.eight.buttons > .button { + width: 12.500%; +} + +.ui.nine.buttons { + width: 100%; +} +.ui.nine.buttons > .button { + width: 11.11%; +} + +.ui.ten.buttons { + width: 100%; +} +.ui.ten.buttons > .button { + width: 10%; +} + +.ui.eleven.buttons { + width: 100%; +} +.ui.eleven.buttons > .button { + width: 9.09%; +} + +.ui.twelve.buttons { + width: 100%; +} +.ui.twelve.buttons > .button { + width: 8.3333%; +} + +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + display: flex; + width: auto; +} + +.ui.two.vertical.buttons > .button { + height: 50%; +} +.ui.three.vertical.buttons > .button { + height: 33.333%; +} +.ui.four.vertical.buttons > .button { + height: 25%; +} +.ui.five.vertical.buttons > .button { + height: 20%; +} +.ui.six.vertical.buttons > .button { + height: 16.666%; +} +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} +.ui.eight.vertical.buttons > .button { + height: 12.500%; +} +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} +.ui.ten.vertical.buttons > .button { + height: 10%; +} +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} +.ui.twelve.vertical.buttons > .button { + height: 8.3333%; +} + + +/*------------------- + Colors +--------------------*/ + +/*--- Black ---*/ +.ui.black.buttons .button, +.ui.black.button { + background-color: @black; + color: @blackTextColor; + text-shadow: @blackTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.black.button { + box-shadow: @coloredBoxShadow; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: @blackHover; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .button:focus, +.ui.black.button:focus { + background-color: @blackFocus; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: @blackDown; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .active.button, +.ui.black.buttons .active.button:active, +.ui.black.active.button, +.ui.black.button .active.button:active { + background-color: @blackActive; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} + +/* Basic */ +.ui.basic.black.buttons .button, +.ui.basic.black.button { + box-shadow: 0px 0px 0px @basicBorderSize @black inset !important; + color: @black !important; +} +.ui.basic.black.buttons .button:hover, +.ui.basic.black.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important; + color: @blackHover !important; +} +.ui.basic.black.buttons .button:focus, +.ui.basic.black.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important; + color: @blackHover !important; +} +.ui.basic.black.buttons .active.button, +.ui.basic.black.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important; + color: @blackDown !important; +} +.ui.basic.black.buttons .button:active, +.ui.basic.black.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important; + color: @blackDown !important; +} +.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.black.buttons .button, +.ui.inverted.black.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important; + color: @invertedTextColor; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover, +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus, +.ui.inverted.black.buttons .button.active, +.ui.inverted.black.button.active, +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + box-shadow: none !important; + color: @lightBlackTextColor; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover { + background-color: @lightBlackHover; +} +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus { + background-color: @lightBlackFocus; +} +.ui.inverted.black.buttons .active.button, +.ui.inverted.black.active.button { + background-color: @lightBlackActive; +} +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + background-color: @lightBlackDown; +} + +/* Inverted Basic */ +.ui.inverted.black.basic.buttons .button, +.ui.inverted.black.buttons .basic.button, +.ui.inverted.black.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:hover, +.ui.inverted.black.buttons .basic.button:hover, +.ui.inverted.black.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important; + color: @lightBlack !important; +} +.ui.inverted.black.basic.buttons .active.button, +.ui.inverted.black.buttons .basic.active.button, +.ui.inverted.black.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:active, +.ui.inverted.black.buttons .basic.button:active, +.ui.inverted.black.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important; + color: @white !important; +} + +/*--- Grey ---*/ +.ui.grey.buttons .button, +.ui.grey.button { + background-color: @grey; + color: @greyTextColor; + text-shadow: @greyTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.grey.button { + box-shadow: @coloredBoxShadow; +} +.ui.grey.buttons .button:hover, +.ui.grey.button:hover { + background-color: @greyHover; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .button:focus, +.ui.grey.button:focus { + background-color: @greyFocus; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .button:active, +.ui.grey.button:active { + background-color: @greyDown; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .active.button, +.ui.grey.buttons .active.button:active, +.ui.grey.active.button, +.ui.grey.button .active.button:active { + background-color: @greyActive; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} + +/* Basic */ +.ui.basic.grey.buttons .button, +.ui.basic.grey.button { + box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important; + color: @grey !important; +} +.ui.basic.grey.buttons .button:hover, +.ui.basic.grey.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important; + color: @greyHover !important; +} +.ui.basic.grey.buttons .button:focus, +.ui.basic.grey.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important; + color: @greyHover !important; +} +.ui.basic.grey.buttons .active.button, +.ui.basic.grey.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important; + color: @greyDown !important; +} +.ui.basic.grey.buttons .button:active, +.ui.basic.grey.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important; + color: @greyDown !important; +} +.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.grey.buttons .button, +.ui.inverted.grey.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important; + color: @invertedTextColor; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover, +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus, +.ui.inverted.grey.buttons .button.active, +.ui.inverted.grey.button.active, +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + box-shadow: none !important; + color: @lightGreyTextColor; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover { + background-color: @lightGreyHover; +} +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus { + background-color: @lightGreyFocus; +} +.ui.inverted.grey.buttons .active.button, +.ui.inverted.grey.active.button { + background-color: @lightGreyActive; +} +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + background-color: @lightGreyDown; +} + +/* Inverted Basic */ +.ui.inverted.grey.basic.buttons .button, +.ui.inverted.grey.buttons .basic.button, +.ui.inverted.grey.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:hover, +.ui.inverted.grey.buttons .basic.button:hover, +.ui.inverted.grey.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important; + color: @lightGrey !important; +} +.ui.inverted.grey.basic.buttons .active.button, +.ui.inverted.grey.buttons .basic.active.button, +.ui.inverted.grey.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:active, +.ui.inverted.grey.buttons .basic.button:active, +.ui.inverted.grey.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important; + color: @white !important; +} + + +/*--- Brown ---*/ +.ui.brown.buttons .button, +.ui.brown.button { + background-color: @brown; + color: @brownTextColor; + text-shadow: @brownTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.brown.button { + box-shadow: @coloredBoxShadow; +} +.ui.brown.buttons .button:hover, +.ui.brown.button:hover { + background-color: @brownHover; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .button:focus, +.ui.brown.button:focus { + background-color: @brownFocus; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .button:active, +.ui.brown.button:active { + background-color: @brownDown; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .active.button, +.ui.brown.buttons .active.button:active, +.ui.brown.active.button, +.ui.brown.button .active.button:active { + background-color: @brownActive; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} + +/* Basic */ +.ui.basic.brown.buttons .button, +.ui.basic.brown.button { + box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important; + color: @brown !important; +} +.ui.basic.brown.buttons .button:hover, +.ui.basic.brown.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important; + color: @brownHover !important; +} +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important; + color: @brownHover !important; +} +.ui.basic.brown.buttons .active.button, +.ui.basic.brown.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important; + color: @brownDown !important; +} +.ui.basic.brown.buttons .button:active, +.ui.basic.brown.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important; + color: @brownDown !important; +} +.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.brown.buttons .button, +.ui.inverted.brown.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important; + color: @lightBrown; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover, +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus, +.ui.inverted.brown.buttons .button.active, +.ui.inverted.brown.button.active, +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + box-shadow: none !important; + color: @lightBrownTextColor; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover { + background-color: @lightBrownHover; +} +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus { + background-color: @lightBrownFocus; +} +.ui.inverted.brown.buttons .active.button, +.ui.inverted.brown.active.button { + background-color: @lightBrownActive; +} +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + background-color: @lightBrownDown; +} + +/* Inverted Basic */ +.ui.inverted.brown.basic.buttons .button, +.ui.inverted.brown.buttons .basic.button, +.ui.inverted.brown.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.brown.basic.buttons .button:hover, +.ui.inverted.brown.buttons .basic.button:hover, +.ui.inverted.brown.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .active.button, +.ui.inverted.brown.buttons .basic.active.button, +.ui.inverted.brown.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .button:active, +.ui.inverted.brown.buttons .basic.button:active, +.ui.inverted.brown.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important; + color: @lightBrown !important; +} + +/*--- Blue ---*/ +.ui.blue.buttons .button, +.ui.blue.button { + background-color: @blue; + color: @blueTextColor; + text-shadow: @blueTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.blue.button { + box-shadow: @coloredBoxShadow; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover { + background-color: @blueHover; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .button:focus, +.ui.blue.button:focus { + background-color: @blueFocus; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: @blueDown; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .active.button, +.ui.blue.buttons .active.button:active, +.ui.blue.active.button, +.ui.blue.button .active.button:active { + background-color: @blueActive; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} + +/* Basic */ +.ui.basic.blue.buttons .button, +.ui.basic.blue.button { + box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important; + color: @blue !important; +} +.ui.basic.blue.buttons .button:hover, +.ui.basic.blue.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important; + color: @blueHover !important; +} +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important; + color: @blueHover !important; +} +.ui.basic.blue.buttons .active.button, +.ui.basic.blue.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important; + color: @blueDown !important; +} +.ui.basic.blue.buttons .button:active, +.ui.basic.blue.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important; + color: @blueDown !important; +} +.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.blue.buttons .button, +.ui.inverted.blue.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; + color: @lightBlue; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover, +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus, +.ui.inverted.blue.buttons .button.active, +.ui.inverted.blue.button.active, +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + box-shadow: none !important; + color: @lightBlueTextColor; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover { + background-color: @lightBlueHover; +} +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus { + background-color: @lightBlueFocus; +} +.ui.inverted.blue.buttons .active.button, +.ui.inverted.blue.active.button { + background-color: @lightBlueActive; +} +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + background-color: @lightBlueDown; +} + +/* Inverted Basic */ +.ui.inverted.blue.basic.buttons .button, +.ui.inverted.blue.buttons .basic.button, +.ui.inverted.blue.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.blue.basic.buttons .button:hover, +.ui.inverted.blue.buttons .basic.button:hover, +.ui.inverted.blue.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .active.button, +.ui.inverted.blue.buttons .basic.active.button, +.ui.inverted.blue.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .button:active, +.ui.inverted.blue.buttons .basic.button:active, +.ui.inverted.blue.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important; + color: @lightBlue !important; +} + +/*--- Green ---*/ +.ui.green.buttons .button, +.ui.green.button { + background-color: @green; + color: @greenTextColor; + text-shadow: @greenTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.green.button { + box-shadow: @coloredBoxShadow; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background-color: @greenHover; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .button:focus, +.ui.green.button:focus { + background-color: @greenFocus; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: @greenDown; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .active.button, +.ui.green.buttons .active.button:active, +.ui.green.active.button, +.ui.green.button .active.button:active { + background-color: @greenActive; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} + + +/* Basic */ +.ui.basic.green.buttons .button, +.ui.basic.green.button { + box-shadow: 0px 0px 0px @basicBorderSize @green inset !important; + color: @green !important; +} +.ui.basic.green.buttons .button:hover, +.ui.basic.green.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important; + color: @greenHover !important; +} +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important; + color: @greenHover !important; +} +.ui.basic.green.buttons .active.button, +.ui.basic.green.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important; + color: @greenDown !important; +} +.ui.basic.green.buttons .button:active, +.ui.basic.green.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important; + color: @greenDown !important; +} +.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.green.buttons .button, +.ui.inverted.green.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; + color: @lightGreen; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover, +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus, +.ui.inverted.green.buttons .button.active, +.ui.inverted.green.button.active, +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + box-shadlightOw: none !important; + color: @greenTextColor; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover { + background-color: @lightGreenHover; +} +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus { + background-color: @lightGreenFocus; +} +.ui.inverted.green.buttons .active.button, +.ui.inverted.green.active.button { + background-color: @lightGreenActive; +} +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + background-color: @lightGreenDown; +} + +/* Inverted Basic */ +.ui.inverted.green.basic.buttons .button, +.ui.inverted.green.buttons .basic.button, +.ui.inverted.green.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.green.basic.buttons .button:hover, +.ui.inverted.green.buttons .basic.button:hover, +.ui.inverted.green.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .active.button, +.ui.inverted.green.buttons .basic.active.button, +.ui.inverted.green.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .button:active, +.ui.inverted.green.buttons .basic.button:active, +.ui.inverted.green.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important; + color: @lightGreen !important; +} + +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: @orange; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.orange.button { + box-shadow: @coloredBoxShadow; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover { + background-color: @orangeHover; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .button:focus, +.ui.orange.button:focus { + background-color: @orangeFocus; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: @orangeDown; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .active.button, +.ui.orange.buttons .active.button:active, +.ui.orange.active.button, +.ui.orange.button .active.button:active { + background-color: @orangeActive; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} + +/* Basic */ +.ui.basic.orange.buttons .button, +.ui.basic.orange.button { + box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important; + color: @orange !important; +} +.ui.basic.orange.buttons .button:hover, +.ui.basic.orange.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important; + color: @orangeHover !important; +} +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important; + color: @orangeHover !important; +} +.ui.basic.orange.buttons .active.button, +.ui.basic.orange.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important; + color: @orangeDown !important; +} +.ui.basic.orange.buttons .button:active, +.ui.basic.orange.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important; + color: @orangeDown !important; +} +.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.orange.buttons .button, +.ui.inverted.orange.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; + color: @lightOrange; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover, +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus, +.ui.inverted.orange.buttons .button.active, +.ui.inverted.orange.button.active, +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + box-shadow: none !important; + color: @lightOrangeTextColor; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover { + background-color: @lightOrangeHover; +} +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus { + background-color: @lightOrangeFocus; +} +.ui.inverted.orange.buttons .active.button, +.ui.inverted.orange.active.button { + background-color: @lightOrangeActive; +} +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + background-color: @lightOrangeDown; +} + +/* Inverted Basic */ +.ui.inverted.orange.basic.buttons .button, +.ui.inverted.orange.buttons .basic.button, +.ui.inverted.orange.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.orange.basic.buttons .button:hover, +.ui.inverted.orange.buttons .basic.button:hover, +.ui.inverted.orange.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .active.button, +.ui.inverted.orange.buttons .basic.active.button, +.ui.inverted.orange.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .button:active, +.ui.inverted.orange.buttons .basic.button:active, +.ui.inverted.orange.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important; + color: @lightOrange !important; +} + +/*--- Pink ---*/ +.ui.pink.buttons .button, +.ui.pink.button { + background-color: @pink; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.pink.button { + box-shadow: @coloredBoxShadow; +} +.ui.pink.buttons .button:hover, +.ui.pink.button:hover { + background-color: @pinkHover; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .button:focus, +.ui.pink.button:focus { + background-color: @pinkFocus; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .button:active, +.ui.pink.button:active { + background-color: @pinkDown; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .active.button, +.ui.pink.buttons .active.button:active, +.ui.pink.active.button, +.ui.pink.button .active.button:active { + background-color: @pinkActive; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} + +/* Basic */ +.ui.basic.pink.buttons .button, +.ui.basic.pink.button { + box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important; + color: @pink !important; +} +.ui.basic.pink.buttons .button:hover, +.ui.basic.pink.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important; + color: @pinkHover !important; +} +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important; + color: @pinkHover !important; +} +.ui.basic.pink.buttons .active.button, +.ui.basic.pink.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important; + color: @pinkDown !important; +} +.ui.basic.pink.buttons .button:active, +.ui.basic.pink.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important; + color: @pinkDown !important; +} +.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.pink.buttons .button, +.ui.inverted.pink.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; + color: @lightPink; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover, +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus, +.ui.inverted.pink.buttons .button.active, +.ui.inverted.pink.button.active, +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + box-shadow: none !important; + color: @lightPinkTextColor; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover { + background-color: @lightPinkHover; +} +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus { + background-color: @lightPinkFocus; +} +.ui.inverted.pink.buttons .active.button, +.ui.inverted.pink.active.button { + background-color: @lightPinkActive; +} +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + background-color: @lightPinkDown; +} + +/* Inverted Basic */ +.ui.inverted.pink.basic.buttons .button, +.ui.inverted.pink.buttons .basic.button, +.ui.inverted.pink.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.pink.basic.buttons .button:hover, +.ui.inverted.pink.buttons .basic.button:hover, +.ui.inverted.pink.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .active.button, +.ui.inverted.pink.buttons .basic.active.button, +.ui.inverted.pink.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .button:active, +.ui.inverted.pink.buttons .basic.button:active, +.ui.inverted.pink.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important; + color: @lightPink !important; +} + + +/*--- Violet ---*/ +.ui.violet.buttons .button, +.ui.violet.button { + background-color: @violet; + color: @violetTextColor; + text-shadow: @violetTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.violet.button { + box-shadow: @coloredBoxShadow; +} +.ui.violet.buttons .button:hover, +.ui.violet.button:hover { + background-color: @violetHover; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .button:focus, +.ui.violet.button:focus { + background-color: @violetFocus; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .button:active, +.ui.violet.button:active { + background-color: @violetDown; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .active.button, +.ui.violet.buttons .active.button:active, +.ui.violet.active.button, +.ui.violet.button .active.button:active { + background-color: @violetActive; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} + +/* Basic */ +.ui.basic.violet.buttons .button, +.ui.basic.violet.button { + box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important; + color: @violet !important; +} +.ui.basic.violet.buttons .button:hover, +.ui.basic.violet.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important; + color: @violetHover !important; +} +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important; + color: @violetHover !important; +} +.ui.basic.violet.buttons .active.button, +.ui.basic.violet.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important; + color: @violetDown !important; +} +.ui.basic.violet.buttons .button:active, +.ui.basic.violet.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important; + color: @violetDown !important; +} +.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.violet.buttons .button, +.ui.inverted.violet.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important; + color: @lightViolet; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover, +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus, +.ui.inverted.violet.buttons .button.active, +.ui.inverted.violet.button.active, +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + box-shadow: none !important; + color: @lightVioletTextColor; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover { + background-color: @lightVioletHover; +} +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus { + background-color: @lightVioletFocus; +} +.ui.inverted.violet.buttons .active.button, +.ui.inverted.violet.active.button { + background-color: @lightVioletActive; +} +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + background-color: @lightVioletDown; +} + +/* Inverted Basic */ +.ui.inverted.violet.basic.buttons .button, +.ui.inverted.violet.buttons .basic.button, +.ui.inverted.violet.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.violet.basic.buttons .button:hover, +.ui.inverted.violet.buttons .basic.button:hover, +.ui.inverted.violet.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .active.button, +.ui.inverted.violet.buttons .basic.active.button, +.ui.inverted.violet.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .button:active, +.ui.inverted.violet.buttons .basic.button:active, +.ui.inverted.violet.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important; + color: @lightViolet !important; +} + +/*--- Purple ---*/ +.ui.purple.buttons .button, +.ui.purple.button { + background-color: @purple; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.purple.button { + box-shadow: @coloredBoxShadow; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover { + background-color: @purpleHover; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .button:focus, +.ui.purple.button:focus { + background-color: @purpleFocus; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: @purpleDown; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .active.button, +.ui.purple.buttons .active.button:active, +.ui.purple.active.button, +.ui.purple.button .active.button:active { + background-color: @purpleActive; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} + +/* Basic */ +.ui.basic.purple.buttons .button, +.ui.basic.purple.button { + box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important; + color: @purple !important; +} +.ui.basic.purple.buttons .button:hover, +.ui.basic.purple.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important; + color: @purpleHover !important; +} +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important; + color: @purpleHover !important; +} +.ui.basic.purple.buttons .active.button, +.ui.basic.purple.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important; + color: @purpleDown !important; +} +.ui.basic.purple.buttons .button:active, +.ui.basic.purple.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important; + color: @purpleDown !important; +} +.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.purple.buttons .button, +.ui.inverted.purple.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; + color: @lightPurple; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover, +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus, +.ui.inverted.purple.buttons .button.active, +.ui.inverted.purple.button.active, +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + box-shadow: none !important; + color: @lightPurpleTextColor; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover { + background-color: @lightPurpleHover; +} +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus { + background-color: @lightPurpleFocus; +} +.ui.inverted.purple.buttons .active.button, +.ui.inverted.purple.active.button { + background-color: @lightPurpleActive; +} +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + background-color: @lightPurpleDown; +} + +/* Inverted Basic */ +.ui.inverted.purple.basic.buttons .button, +.ui.inverted.purple.buttons .basic.button, +.ui.inverted.purple.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.purple.basic.buttons .button:hover, +.ui.inverted.purple.buttons .basic.button:hover, +.ui.inverted.purple.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .active.button, +.ui.inverted.purple.buttons .basic.active.button, +.ui.inverted.purple.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .button:active, +.ui.inverted.purple.buttons .basic.button:active, +.ui.inverted.purple.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important; + color: @lightPurple !important; +} + +/*--- Red ---*/ +.ui.red.buttons .button, +.ui.red.button { + background-color: @red; + color: @redTextColor; + text-shadow: @redTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.red.button { + box-shadow: @coloredBoxShadow; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover { + background-color: @redHover; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .button:focus, +.ui.red.button:focus { + background-color: @redFocus; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: @redDown; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .active.button, +.ui.red.buttons .active.button:active, +.ui.red.active.button, +.ui.red.button .active.button:active { + background-color: @redActive; + color: @redTextColor; + text-shadow: @redTextShadow; +} + +/* Basic */ +.ui.basic.red.buttons .button, +.ui.basic.red.button { + box-shadow: 0px 0px 0px @basicBorderSize @red inset !important; + color: @red !important; +} +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important; + color: @redHover !important; +} +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important; + color: @redHover !important; +} +.ui.basic.red.buttons .active.button, +.ui.basic.red.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important; + color: @redDown !important; +} +.ui.basic.red.buttons .button:active, +.ui.basic.red.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important; + color: @redDown !important; +} +.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.red.buttons .button, +.ui.inverted.red.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; + color: @lightRed; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover, +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus, +.ui.inverted.red.buttons .button.active, +.ui.inverted.red.button.active, +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + box-shadow: none !important; + color: @lightRedTextColor; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover { + background-color: @lightRedHover; +} +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus { + background-color: @lightRedFocus; +} +.ui.inverted.red.buttons .active.button, +.ui.inverted.red.active.button { + background-color: @lightRedActive; +} +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + background-color: @lightRedDown; +} + +/* Inverted Basic */ +.ui.inverted.red.basic.buttons .button, +.ui.inverted.red.buttons .basic.button, +.ui.inverted.red.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.red.basic.buttons .button:hover, +.ui.inverted.red.buttons .basic.button:hover, +.ui.inverted.red.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .active.button, +.ui.inverted.red.buttons .basic.active.button, +.ui.inverted.red.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .button:active, +.ui.inverted.red.buttons .basic.button:active, +.ui.inverted.red.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important; + color: @lightRed !important; +} + + +/*--- Teal ---*/ +.ui.teal.buttons .button, +.ui.teal.button { + background-color: @teal; + color: @tealTextColor; + text-shadow: @tealTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.teal.button { + box-shadow: @coloredBoxShadow; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover { + background-color: @tealHover; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .button:focus, +.ui.teal.button:focus { + background-color: @tealFocus; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: @tealDown; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .active.button, +.ui.teal.buttons .active.button:active, +.ui.teal.active.button, +.ui.teal.button .active.button:active { + background-color: @tealActive; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} + +/* Basic */ +.ui.basic.teal.buttons .button, +.ui.basic.teal.button { + box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important; + color: @teal !important; +} +.ui.basic.teal.buttons .button:hover, +.ui.basic.teal.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important; + color: @tealHover !important; +} +.ui.basic.teal.buttons .button:focus, +.ui.basic.teal.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important; + color: @tealHover !important; +} +.ui.basic.teal.buttons .active.button, +.ui.basic.teal.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important; + color: @tealDown !important; +} +.ui.basic.teal.buttons .button:active, +.ui.basic.teal.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important; + color: @tealDown !important; +} +.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.teal.buttons .button, +.ui.inverted.teal.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; + color: @lightTeal; +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover, +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus, +.ui.inverted.teal.buttons .button.active, +.ui.inverted.teal.button.active, +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + box-shadow: none !important; + color: @lightTealTextColor; +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover { + background-color: @lightTealHover; +} +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus { + background-color: @lightTealFocus; +} +.ui.inverted.teal.buttons .active.button, +.ui.inverted.teal.active.button { + background-color: @lightTealActive; +} +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + background-color: @lightTealDown; +} + +/* Inverted Basic */ +.ui.inverted.teal.basic.buttons .button, +.ui.inverted.teal.buttons .basic.button, +.ui.inverted.teal.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.teal.basic.buttons .button:hover, +.ui.inverted.teal.buttons .basic.button:hover, +.ui.inverted.teal.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .active.button, +.ui.inverted.teal.buttons .basic.active.button, +.ui.inverted.teal.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .button:active, +.ui.inverted.teal.buttons .basic.button:active, +.ui.inverted.teal.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important; + color: @lightTeal !important; +} + + +/*--- Olive ---*/ +.ui.olive.buttons .button, +.ui.olive.button { + background-color: @olive; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.olive.button { + box-shadow: @coloredBoxShadow; +} +.ui.olive.buttons .button:hover, +.ui.olive.button:hover { + background-color: @oliveHover; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .button:focus, +.ui.olive.button:focus { + background-color: @oliveFocus; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .button:active, +.ui.olive.button:active { + background-color: @oliveDown; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .active.button, +.ui.olive.buttons .active.button:active, +.ui.olive.active.button, +.ui.olive.button .active.button:active { + background-color: @oliveActive; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} + +/* Basic */ +.ui.basic.olive.buttons .button, +.ui.basic.olive.button { + box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important; + color: @olive !important; +} +.ui.basic.olive.buttons .button:hover, +.ui.basic.olive.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important; + color: @oliveHover !important; +} +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important; + color: @oliveHover !important; +} +.ui.basic.olive.buttons .active.button, +.ui.basic.olive.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important; + color: @oliveDown !important; +} +.ui.basic.olive.buttons .button:active, +.ui.basic.olive.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important; + color: @oliveDown !important; +} +.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.olive.buttons .button, +.ui.inverted.olive.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important; + color: @lightOlive; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover, +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus, +.ui.inverted.olive.buttons .button.active, +.ui.inverted.olive.button.active, +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + box-shadow: none !important; + color: @lightOliveTextColor; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover { + background-color: @lightOliveHover; +} +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus { + background-color: @lightOliveFocus; +} +.ui.inverted.olive.buttons .active.button, +.ui.inverted.olive.active.button { + background-color: @lightOliveActive; +} +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + background-color: @lightOliveDown; +} + +/* Inverted Basic */ +.ui.inverted.olive.basic.buttons .button, +.ui.inverted.olive.buttons .basic.button, +.ui.inverted.olive.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.olive.basic.buttons .button:hover, +.ui.inverted.olive.buttons .basic.button:hover, +.ui.inverted.olive.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .active.button, +.ui.inverted.olive.buttons .basic.active.button, +.ui.inverted.olive.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .button:active, +.ui.inverted.olive.buttons .basic.button:active, +.ui.inverted.olive.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important; + color: @lightOlive !important; +} + +/*--- Yellow ---*/ +.ui.yellow.buttons .button, +.ui.yellow.button { + background-color: @yellow; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.yellow.button { + box-shadow: @coloredBoxShadow; +} +.ui.yellow.buttons .button:hover, +.ui.yellow.button:hover { + background-color: @yellowHover; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .button:focus, +.ui.yellow.button:focus { + background-color: @yellowFocus; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .button:active, +.ui.yellow.button:active { + background-color: @yellowDown; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .active.button, +.ui.yellow.buttons .active.button:active, +.ui.yellow.active.button, +.ui.yellow.button .active.button:active { + background-color: @yellowActive; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} + +/* Basic */ +.ui.basic.yellow.buttons .button, +.ui.basic.yellow.button { + box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important; + color: @yellow !important; +} +.ui.basic.yellow.buttons .button:hover, +.ui.basic.yellow.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important; + color: @yellowHover !important; +} +.ui.basic.yellow.buttons .button:focus, +.ui.basic.yellow.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important; + color: @yellowHover !important; +} +.ui.basic.yellow.buttons .active.button, +.ui.basic.yellow.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important; + color: @yellowDown !important; +} +.ui.basic.yellow.buttons .button:active, +.ui.basic.yellow.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important; + color: @yellowDown !important; +} +.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.yellow.buttons .button, +.ui.inverted.yellow.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; + color: @lightYellow; +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover, +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus, +.ui.inverted.yellow.buttons .button.active, +.ui.inverted.yellow.button.active, +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + box-shadow: none !important; + color: @lightYellowTextColor; +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover { + background-color: @lightYellowHover; +} +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus { + background-color: @lightYellowFocus; +} +.ui.inverted.yellow.buttons .active.button, +.ui.inverted.yellow.active.button { + background-color: @lightYellowActive; +} +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + background-color: @lightYellowDown; +} + +/* Inverted Basic */ +.ui.inverted.yellow.basic.buttons .button, +.ui.inverted.yellow.buttons .basic.button, +.ui.inverted.yellow.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.yellow.basic.buttons .button:hover, +.ui.inverted.yellow.buttons .basic.button:hover, +.ui.inverted.yellow.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .active.button, +.ui.inverted.yellow.buttons .basic.active.button, +.ui.inverted.yellow.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .button:active, +.ui.inverted.yellow.buttons .basic.button:active, +.ui.inverted.yellow.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important; + color: @lightYellow !important; +} + + +/*------------------- + Primary +--------------------*/ + +.ui.primary.buttons .button, +.ui.primary.button { + background-color: @primaryColor; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; + background-image: @primaryBackgroundImage; +} +.ui.primary.button { + box-shadow: @primaryBoxShadow; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover { + background-color: @primaryColorHover; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .button:focus, +.ui.primary.button:focus { + background-color: @primaryColorFocus; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: @primaryColorDown; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .active.button, +.ui.primary.active.button { + background-color: @primaryColorActive; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} + +/*------------------- + Secondary +--------------------*/ + +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: @secondaryColor; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; + background-image: @secondaryBackgroundImage; +} +.ui.secondary.button { + box-shadow: @secondaryBoxShadow; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover { + background-color: @secondaryColorHover; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .button:focus, +.ui.secondary.button:focus { + background-color: @secondaryColorFocus; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: @secondaryColorDown; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .active.button, +.ui.secondary.active.button { + background-color: @secondaryColorActive; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} + +/*--------------- + Positive +----------------*/ + +.ui.positive.buttons .button, +.ui.positive.button { + background-color: @positiveColor !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.positive.button { + box-shadow: @coloredBoxShadow; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background-color: @positiveColorHover !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { + background-color: @positiveColorFocus !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: @positiveColorDown !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.positive.buttons .active.button, +.ui.positive.active.button, +.ui.positive.buttons .active.button:active { + background-color: @positiveColorActive; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + + +/*--------------- + Negative +----------------*/ + +.ui.negative.buttons .button, +.ui.negative.button { + background-color: @negativeColor !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.negative.button { + box-shadow: @coloredBoxShadow; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover { + background-color: @negativeColorHover !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { + background-color: @negativeColorFocus !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: @negativeColorDown !important; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.negative.buttons .active.button, +.ui.negative.active.button, +.ui.negative.buttons .active.button:active { + background-color: @negativeColorActive; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/******************************* + Groups +*******************************/ + +.ui.buttons { + display: inline-flex; + flex-direction: row; + font-size: 0em; + vertical-align: baseline; + margin: @verticalMargin @horizontalMargin 0em 0em; +} +.ui.buttons:not(.basic):not(.inverted) { + box-shadow: @groupBoxShadow; +} + +/* Clearfix */ +.ui.buttons:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* Standard Group */ +.ui.buttons .button { + flex: 1 0 auto; + margin: 0em; + border-radius: 0em; + margin: @groupButtonOffset; +} +.ui.buttons > .ui.button:not(.basic):not(.inverted), +.ui.buttons:not(.basic):not(.inverted) > .button { + box-shadow: @groupButtonBoxShadow; +} + +.ui.buttons .button:first-child { + border-left: none; + margin-left: 0em; + border-top-left-radius: @borderRadius; + border-bottom-left-radius: @borderRadius; +} +.ui.buttons .button:last-child { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} + +/* Vertical Style */ +.ui.vertical.buttons { + display: inline-flex; + flex-direction: column; +} +.ui.vertical.buttons .button { + display: block; + float: none; + width: 100%; + margin: @verticalGroupOffset; + box-shadow: @verticalBoxShadow; +} +.ui.vertical.buttons .button:first-child, +.ui.vertical.buttons .mini.button:first-child, +.ui.vertical.buttons .tiny.button:first-child, +.ui.vertical.buttons .small.button:first-child, +.ui.vertical.buttons .massive.button:first-child, +.ui.vertical.buttons .huge.button:first-child { + border-radius: @borderRadius @borderRadius 0px 0px; +} +.ui.vertical.buttons .button:last-child, +.ui.vertical.buttons .mini.button:last-child, +.ui.vertical.buttons .tiny.button:last-child, +.ui.vertical.buttons .small.button:last-child, +.ui.vertical.buttons .massive.button:last-child, +.ui.vertical.buttons .huge.button:last-child, +.ui.vertical.buttons .gigantic.button:last-child { + margin-bottom: 0px; + border-radius: 0px 0px @borderRadius @borderRadius; +} + +.loadUIOverrides(); + diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/container.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/container.less new file mode 100644 index 00000000..0ae6f0b7 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/container.less @@ -0,0 +1,144 @@ +/*! + * # Semantic UI - Container + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'container'; + +@import (multiple) '../../theme.config'; + +/******************************* + Container +*******************************/ + +/* All Sizes */ +.ui.container { + display: block; + max-width: @maxWidth !important; +} + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.container { + width: @mobileWidth !important; + margin-left: @mobileGutter !important; + margin-right: @mobileGutter !important; + } + .ui.grid.container { + width: @mobileGridWidth !important; + } + .ui.relaxed.grid.container { + width: @mobileRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @mobileVeryRelaxedGridWidth !important; + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.container { + width: @tabletWidth; + margin-left: @tabletGutter !important; + margin-right: @tabletGutter !important; + } + .ui.grid.container { + width: @tabletGridWidth !important; + } + .ui.relaxed.grid.container { + width: @tabletRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @tabletVeryRelaxedGridWidth !important; + } +} + +/* Small Monitor */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.container { + width: @computerWidth; + margin-left: @computerGutter !important; + margin-right: @computerGutter !important; + } + .ui.grid.container { + width: @computerGridWidth !important; + } + .ui.relaxed.grid.container { + width: @computerRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @computerVeryRelaxedGridWidth !important; + } +} + +/* Large Monitor */ +@media only screen and (min-width: @largeMonitorBreakpoint) { + .ui.container { + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter !important; + margin-right: @largeMonitorGutter !important; + } + .ui.grid.container { + width: @largeMonitorGridWidth !important; + } + .ui.relaxed.grid.container { + width: @largeMonitorRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @largeMonitorVeryRelaxedGridWidth !important; + } +} + +/******************************* + Types +*******************************/ + + +/* Text Container */ +.ui.text.container { + font-family: @textFontFamily; + max-width: @textWidth !important; + line-height: @textLineHeight; +} + +.ui.text.container { + font-size: @textSize; +} + +/* Fluid */ +.ui.fluid.container { + width: 100%; +} + + +/******************************* + Variations +*******************************/ + +.ui[class*="left aligned"].container { + text-align: left; +} +.ui[class*="center aligned"].container { + text-align: center; +} +.ui[class*="right aligned"].container { + text-align: right; +} +.ui.justified.container { + text-align: justify; + hyphens: auto; +} + + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/divider.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/divider.less new file mode 100755 index 00000000..0fafdda4 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/divider.less @@ -0,0 +1,257 @@ +/*! + * # Semantic UI - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'divider'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Divider +*******************************/ + +.ui.divider { + margin: @margin; + + line-height: 1; + height: 0em; + + font-weight: @fontWeight; + text-transform: @textTransform; + letter-spacing: @letterSpacing; + color: @color; + + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/*-------------- + Basic +---------------*/ + +.ui.divider:not(.vertical):not(.horizontal) { + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; +} + +/*-------------- + Coupling +---------------*/ + +/* Allow divider between each column row */ +.ui.grid > .column + .divider, +.ui.grid > .row > .column + .divider { + left: auto; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.divider { + display: table; + white-space: nowrap; + + height: auto; + margin: @horizontalMargin; + overflow: hidden; + line-height: 1; + text-align: center; +} + +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; +} + +.ui.horizontal.divider:before { + background-position: right @horizontalDividerMargin top 50%; +} +.ui.horizontal.divider:after { + background-position: left @horizontalDividerMargin top 50%; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + + margin: 0rem; + padding: 0em; + width: auto; + height: 50%; + + line-height: 0em; + text-align: center; + transform: translateX(-50%); +} + +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: ''; + z-index: 3; + + border-left: @shadowWidth solid @shadowColor; + border-right: @highlightWidth solid @highlightColor; + + width: 0%; + height: @verticalDividerHeight; +} + +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} + +/* Inside grid */ +@media only screen and (max-width : @largestMobileScreen) { + + .ui.stackable.grid .ui.vertical.divider, + .ui.grid .stackable.row .ui.vertical.divider { + display: table; + white-space: nowrap; + height: auto; + margin: @horizontalMargin; + overflow: hidden; + line-height: 1; + text-align: center; + position: static; + top: 0; + left: 0; + transform: none; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + position: static; + left: 0; + border-left: none; + border-right: none; + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before { + background-position: right @horizontalDividerMargin top 50%; + } + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-position: left @horizontalDividerMargin top 50%; + } +} + +/*-------------- + Icon +---------------*/ + +.ui.divider > .icon { + margin: @dividerIconMargin; + font-size: @dividerIconSize; + height: 1em; + vertical-align: middle; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.divider { + border-color: transparent !important; +} +.ui.hidden.divider:before, +.ui.hidden.divider:after { + display: none; +} + +/*-------------- + Inverted +---------------*/ + +.ui.divider.inverted, +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: @invertedTextColor; +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: @invertedShadowColor !important; + border-left-color: @invertedShadowColor !important; + border-bottom-color: @invertedHighlightColor !important; + border-right-color: @invertedHighlightColor !important; +} + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.divider { + margin: 0em; +} + +/*-------------- + Clearing +---------------*/ + +.ui.clearing.divider { + clear: both; +} + +/*-------------- + Section +---------------*/ + +.ui.section.divider { + margin-top: @sectionMargin; + margin-bottom: @sectionMargin; +} + +/*-------------- + Sizes +---------------*/ + +.ui.divider { + font-size: @medium; +} + + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/flag.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/flag.less new file mode 100755 index 00000000..13142cf3 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/flag.less @@ -0,0 +1,53 @@ +/*! + * # Semantic UI - Flag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'flag'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Flag +*******************************/ + +i.flag:not(.icon) { + display: inline-block; + + width: @width; + height: @height; + + line-height: @height; + vertical-align: @verticalAlign; + margin: 0em @margin 0em 0em; + + text-decoration: inherit; + + speak: none; + font-smoothing: antialiased; + backface-visibility: hidden; +} + +/* Sprite */ +i.flag:not(.icon):before { + display: inline-block; + content: ''; + background: url(@spritePath) no-repeat -108px -1976px; + width: @width; + height: @height; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/header.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/header.less new file mode 100755 index 00000000..2259a7fe --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/header.less @@ -0,0 +1,708 @@ +/*! + * # Semantic UI - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'header'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Header +*******************************/ + +/* Standard */ +.ui.header { + border: none; + margin: @margin; + padding: @verticalPadding @horizontalPadding; + font-family: @fontFamily; + font-weight: @fontWeight; + line-height: @lineHeight; + text-transform: @textTransform; + color: @textColor; +} + +.ui.header:first-child { + margin-top: @firstMargin; +} +.ui.header:last-child { + margin-bottom: @lastMargin; +} + +/*-------------- + Sub Header +---------------*/ + +.ui.header .sub.header { + display: block; + font-weight: normal; + padding: 0em; + margin: @subHeaderMargin; + font-size: @subHeaderFontSize; + line-height: @subHeaderLineHeight; + color: @subHeaderColor; +} + +/*-------------- + Icon +---------------*/ + +.ui.header > .icon { + display: table-cell; + opacity: @iconOpacity; + font-size: @iconSize; + padding-top: @iconOffset; + vertical-align: @iconAlignment; +} + +/* With Text Node */ +.ui.header .icon:only-child { + display: inline-block; + padding: 0em; + margin-right: @iconMargin; +} + +/*------------------- + Image +--------------------*/ + +.ui.header > .image, +.ui.header > img { + display: inline-block; + margin-top: @imageOffset; + width: @imageWidth; + height: @imageHeight; + vertical-align: @imageAlignment; +} +.ui.header > .image:only-child, +.ui.header > img:only-child { + margin-right: @imageMargin; +} + +/*-------------- + Content +---------------*/ + +.ui.header .content { + display: inline-block; + vertical-align: @contentAlignment; +} + +/* After Image */ +.ui.header > img + .content, +.ui.header > .image + .content { + padding-left: @imageMargin; + vertical-align: @contentImageAlignment; +} + +/* After Icon */ +.ui.header > .icon + .content { + padding-left: @iconMargin; + display: table-cell; + vertical-align: @contentIconAlignment; +} + + +/*-------------- + Loose Coupling +---------------*/ + +.ui.header .ui.label { + font-size: @labelSize; + margin-left: @labelDistance; + vertical-align: @labelVerticalAlign; +} + +/* Positioning */ +.ui.header + p { + margin-top: @nextParagraphDistance; +} + + + +/******************************* + Types +*******************************/ + + +/*-------------- + Page +---------------*/ + +h1.ui.header { + font-size: @h1; +} +h2.ui.header { + font-size: @h2; +} +h3.ui.header { + font-size: @h3; +} +h4.ui.header { + font-size: @h4; +} +h5.ui.header { + font-size: @h5; +} + + +/* Sub Header */ +h1.ui.header .sub.header { + font-size: @h1SubHeaderFontSize; +} +h2.ui.header .sub.header { + font-size: @h2SubHeaderFontSize; +} +h3.ui.header .sub.header { + font-size: @h3SubHeaderFontSize; +} +h4.ui.header .sub.header { + font-size: @h4SubHeaderFontSize; +} +h5.ui.header .sub.header { + font-size: @h5SubHeaderFontSize; +} + + +/*-------------- + Content Heading +---------------*/ + +.ui.huge.header { + min-height: 1em; + font-size: @hugeFontSize; +} +.ui.large.header { + font-size: @largeFontSize; +} +.ui.medium.header { + font-size: @mediumFontSize; +} +.ui.small.header { + font-size: @smallFontSize; +} +.ui.tiny.header { + font-size: @tinyFontSize; +} + +/* Sub Header */ +.ui.huge.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.large.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.header .sub.header { + font-size: @subHeaderFontSize; +} +.ui.small.header .sub.header { + font-size: @smallSubHeaderFontSize; +} +.ui.tiny.header .sub.header { + font-size: @tinySubHeaderFontSize; +} + +/*-------------- + Sub Heading +---------------*/ + +.ui.sub.header { + padding: 0em; + margin-bottom: @subHeadingDistance; + font-weight: @subHeadingFontWeight; + font-size: @subHeadingFontSize; + text-transform: @subHeadingTextTransform; + color: @subHeadingColor; +} + +.ui.small.sub.header { + font-size: @smallSubHeadingSize; +} +.ui.sub.header { + font-size: @subHeadingFontSize; +} +.ui.large.sub.header { + font-size: @largeSubHeadingSize; +} +.ui.huge.sub.header { + font-size: @hugeSubHeadingSize; +} + + + +/*------------------- + Icon +--------------------*/ + +.ui.icon.header { + display: inline-block; + text-align: center; + margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin; +} +.ui.icon.header:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} + +.ui.icon.header:first-child { + margin-top: @iconHeaderFirstMargin; +} +.ui.icon.header .icon { + float: none; + display: block; + width: auto; + height: auto; + line-height: 1; + padding: 0em; + font-size: @iconHeaderSize; + margin: 0em auto @iconHeaderMargin; + opacity: @iconHeaderOpacity; +} +.ui.icon.header .content { + display: block; +} +.ui.icon.header .circular.icon { + font-size: @circularHeaderIconSize; +} +.ui.icon.header .square.icon { + font-size: @squareHeaderIconSize; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} + +/******************************* + States +*******************************/ + +.ui.disabled.header { + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.header { + color: @invertedColor; +} +.ui.inverted.header .sub.header { + color: @invertedSubHeaderColor; +} +.ui.inverted.attached.header { + background: @invertedAttachedBackground; + box-shadow: none; + border-color: transparent; +} +.ui.inverted.block.header { + background: @invertedBlockBackground; + box-shadow: none; +} +.ui.inverted.block.header { + border-bottom: none; +} + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.header { + color: @red !important; +} +a.ui.red.header:hover { + color: @redHover !important; +} +.ui.red.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @red; +} + +/* Inverted */ +.ui.inverted.red.header { + color: @lightRed !important; +} +a.ui.inverted.red.header:hover { + color: @lightRedHover !important; +} + +/*--- Orange ---*/ +.ui.orange.header { + color: @orange !important; +} +a.ui.orange.header:hover { + color: @orangeHover !important; +} +.ui.orange.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @orange; +} +/* Inverted */ +.ui.inverted.orange.header { + color: @lightOrange !important; +} +a.ui.inverted.orange.header:hover { + color: @lightOrangeHover !important; +} + +/*--- Olive ---*/ +.ui.olive.header { + color: @olive !important; +} +a.ui.olive.header:hover { + color: @oliveHover !important; +} +.ui.olive.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @olive; +} +/* Inverted */ +.ui.inverted.olive.header { + color: @lightOlive !important; +} +a.ui.inverted.olive.header:hover { + color: @lightOliveHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.header { + color: @yellow !important; +} +a.ui.yellow.header:hover { + color: @yellowHover !important; +} +.ui.yellow.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @yellow; +} +/* Inverted */ +.ui.inverted.yellow.header { + color: @lightYellow !important; +} +a.ui.inverted.yellow.header:hover { + color: @lightYellowHover !important; +} + +/*--- Green ---*/ +.ui.green.header { + color: @green !important; +} +a.ui.green.header:hover { + color: @greenHover !important; +} +.ui.green.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @green; +} +/* Inverted */ +.ui.inverted.green.header { + color: @lightGreen !important; +} +a.ui.inverted.green.header:hover { + color: @lightGreenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.header { + color: @teal !important; +} +a.ui.teal.header:hover { + color: @tealHover !important; +} +.ui.teal.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @teal; +} +/* Inverted */ +.ui.inverted.teal.header { + color: @lightTeal !important; +} +a.ui.inverted.teal.header:hover { + color: @lightTealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.header { + color: @blue !important; +} +a.ui.blue.header:hover { + color: @blueHover !important; +} +.ui.blue.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @blue; +} +/* Inverted */ +.ui.inverted.blue.header { + color: @lightBlue !important; +} +a.ui.inverted.blue.header:hover { + color: @lightBlueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.header { + color: @violet !important; +} +a.ui.violet.header:hover { + color: @violetHover !important; +} +.ui.violet.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @violet; +} +/* Inverted */ +.ui.inverted.violet.header { + color: @lightViolet !important; +} +a.ui.inverted.violet.header:hover { + color: @lightVioletHover !important; +} + +/*--- Purple ---*/ +.ui.purple.header { + color: @purple !important; +} +a.ui.purple.header:hover { + color: @purpleHover !important; +} +.ui.purple.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @purple; +} +/* Inverted */ +.ui.inverted.purple.header { + color: @lightPurple !important; +} +a.ui.inverted.purple.header:hover { + color: @lightPurpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.header { + color: @pink !important; +} +a.ui.pink.header:hover { + color: @pinkHover !important; +} +.ui.pink.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @pink; +} +/* Inverted */ +.ui.inverted.pink.header { + color: @lightPink !important; +} +a.ui.inverted.pink.header:hover { + color: @lightPinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.header { + color: @brown !important; +} +a.ui.brown.header:hover { + color: @brownHover !important; +} +.ui.brown.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @brown; +} +/* Inverted */ +.ui.inverted.brown.header { + color: @lightBrown !important; +} +a.ui.inverted.brown.header:hover { + color: @lightBrownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.header { + color: @grey !important; +} +a.ui.grey.header:hover { + color: @greyHover !important; +} +.ui.grey.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @grey; +} +/* Inverted */ +.ui.inverted.grey.header { + color: @lightGrey !important; +} +a.ui.inverted.grey.header:hover { + color: @lightGreyHover !important; +} + + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.centered.header, +.ui.center.aligned.header { + text-align: center; +} +.ui.justified.header { + text-align: justify; +} +.ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui[class*="left floated"].header { + float: left; + margin-top: 0em; + margin-right: @floatedMargin; +} +.ui[class*="right floated"].header { + float: right; + margin-top: 0em; + margin-left: @floatedMargin; +} + +/*------------------- + Fittted +--------------------*/ + +.ui.fitted.header { + padding: 0em; +} + + +/*------------------- + Dividing +--------------------*/ + +.ui.dividing.header { + padding-bottom: @dividedBorderPadding; + border-bottom: @dividedBorder; +} +.ui.dividing.header .sub.header { + padding-bottom: @dividedSubHeaderPadding; +} +.ui.dividing.header .icon { + margin-bottom: @dividedIconPadding; +} + +.ui.inverted.dividing.header { + border-bottom-color: @invertedDividedBorderColor; +} + + +/*------------------- + Block +--------------------*/ + +.ui.block.header { + background: @blockBackground; + padding: @blockVerticalPadding @blockHorizontalPadding; + box-shadow: @blockBoxShadow; + border: @blockBorder; + border-radius: @blockBorderRadius; +} + +.ui.tiny.block.header { + font-size: @tinyBlock; +} +.ui.small.block.header { + font-size: @smallBlock; +} +.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumBlock; +} +.ui.large.block.header { + font-size: @largeBlock; +} +.ui.huge.block.header { + font-size: @hugeBlock; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + background: @attachedBackground; + padding: @attachedVerticalPadding @attachedHorizontalPadding; + margin-left: @attachedOffset; + margin-right: @attachedOffset; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached.block.header { + background: @blockBackground; +} + +.ui.attached:not(.top):not(.bottom).header { + margin-top: 0em; + margin-bottom: 0em; + border-top: none; + border-radius: 0em; +} +.ui.top.attached.header { + margin-bottom: 0em; + border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + border-top: none; + border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; +} + +/* Attached Sizes */ +.ui.tiny.attached.header { + font-size: @tinyAttachedSize; +} +.ui.small.attached.header { + font-size: @smallAttachedSize; +} +.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumAttachedSize; +} +.ui.large.attached.header { + font-size: @largeAttachedSize; +} +.ui.huge.attached.header { + font-size: @hugeAttachedSize; +} + +/*------------------- + Sizing +--------------------*/ + +.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumFontSize; +} + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/icon.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/icon.less new file mode 100755 index 00000000..e88a3014 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/icon.less @@ -0,0 +1,478 @@ +/*! + * # Semantic UI - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'icon'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Icon +*******************************/ + +@font-face { + font-family: 'Icons'; + src: @fallbackSRC; + src: @src; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} + +i.icon { + display: inline-block; + opacity: @opacity; + + margin: 0em @distanceFromText 0em 0em; + + width: @width; + height: @height; + + font-family: 'Icons'; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + text-align: center; + + speak: none; + font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + backface-visibility: hidden; +} + +i.icon:before { + background: none !important; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Loading +---------------*/ + +i.icon.loading { + height: 1em; + line-height: 1; + animation: icon-loading @loadingDuration linear infinite; +} +@keyframes icon-loading { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/******************************* + States +*******************************/ + +i.icon.hover { + opacity: 1 !important; +} + +i.icon.active { + opacity: 1 !important; +} + +i.emphasized.icon { + opacity: 1 !important; +} + +i.disabled.icon { + opacity: @disabledOpacity !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Fitted +--------------------*/ + +i.fitted.icon { + width: auto; + margin: 0em; +} + +/*------------------- + Link +--------------------*/ + +i.link.icon { + cursor: pointer; + opacity: @linkOpacity; + transition: opacity @defaultDuration @defaultEasing; +} +i.link.icon:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + + padding: @circularPadding !important; + box-shadow: @circularShadow; + + width: @circularSize !important; + height: @circularSize !important; +} +i.circular.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + transform: scale(-1, 1); +} +i.vertically.flipped.icon { + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + transform: rotate(90deg); +} + +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + transform: rotate(-90deg); +} + +/*------------------- + Bordered +--------------------*/ + +i.bordered.icon { + line-height: 1; + vertical-align: baseline; + + width: @borderedSize; + height: @borderedSize; + padding: @borderedVerticalPadding @borderedHorizontalPadding !important; + box-shadow: @borderedShadow; +} +i.bordered.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Inverted +--------------------*/ + +/* Inverted Shapes */ +i.inverted.bordered.icon, +i.inverted.circular.icon { + background-color: @black !important; + color: @white !important; +} + +i.inverted.icon { + color: @white; +} + + +/*------------------- + Colors +--------------------*/ + +/* Red */ +i.red.icon { + color: @red !important; +} +i.inverted.red.icon { + color: @lightRed !important; +} +i.inverted.bordered.red.icon, +i.inverted.circular.red.icon { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +i.orange.icon { + color: @orange !important; +} +i.inverted.orange.icon { + color: @lightOrange !important; +} +i.inverted.bordered.orange.icon, +i.inverted.circular.orange.icon { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +i.yellow.icon { + color: @yellow !important; +} +i.inverted.yellow.icon { + color: @lightYellow !important; +} +i.inverted.bordered.yellow.icon, +i.inverted.circular.yellow.icon { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +i.olive.icon { + color: @olive !important; +} +i.inverted.olive.icon { + color: @lightOlive !important; +} +i.inverted.bordered.olive.icon, +i.inverted.circular.olive.icon { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +i.green.icon { + color: @green !important; +} +i.inverted.green.icon { + color: @lightGreen !important; +} +i.inverted.bordered.green.icon, +i.inverted.circular.green.icon { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +i.teal.icon { + color: @teal !important; +} +i.inverted.teal.icon { + color: @lightTeal !important; +} +i.inverted.bordered.teal.icon, +i.inverted.circular.teal.icon { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +i.blue.icon { + color: @blue !important; +} +i.inverted.blue.icon { + color: @lightBlue !important; +} +i.inverted.bordered.blue.icon, +i.inverted.circular.blue.icon { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +i.violet.icon { + color: @violet !important; +} +i.inverted.violet.icon { + color: @lightViolet !important; +} +i.inverted.bordered.violet.icon, +i.inverted.circular.violet.icon { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +i.purple.icon { + color: @purple !important; +} +i.inverted.purple.icon { + color: @lightPurple !important; +} +i.inverted.bordered.purple.icon, +i.inverted.circular.purple.icon { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +i.pink.icon { + color: @pink !important; +} +i.inverted.pink.icon { + color: @lightPink !important; +} +i.inverted.bordered.pink.icon, +i.inverted.circular.pink.icon { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +i.brown.icon { + color: @brown !important; +} +i.inverted.brown.icon { + color: @lightBrown !important; +} +i.inverted.bordered.brown.icon, +i.inverted.circular.brown.icon { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +i.grey.icon { + color: @grey !important; +} +i.inverted.grey.icon { + color: @lightGrey !important; +} +i.inverted.bordered.grey.icon, +i.inverted.circular.grey.icon { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +i.black.icon { + color: @black !important; +} +i.inverted.black.icon { + color: @lightBlack !important; +} +i.inverted.bordeblack.black.icon, +i.inverted.circular.black.icon { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Sizes +--------------------*/ + +i.mini.icon, +i.mini.icons { + line-height: 1; + font-size: @mini; +} +i.tiny.icon, +i.tiny.icons { + line-height: 1; + font-size: @tiny; +} +i.small.icon, +i.small.icons { + line-height: 1; + font-size: @small; +} +i.icon, +i.icons { + font-size: @medium; +} +i.large.icon, +i.large.icons { + line-height: 1; + vertical-align: middle; + font-size: @large; +} +i.big.icon, +i.big.icons { + line-height: 1; + vertical-align: middle; + font-size: @big; +} +i.huge.icon, +i.huge.icons { + line-height: 1; + vertical-align: middle; + font-size: @huge; +} +i.massive.icon, +i.massive.icons { + line-height: 1; + vertical-align: middle; + font-size: @massive; +} + +/******************************* + Groups +*******************************/ + +i.icons { + display: inline-block; + position: relative; + line-height: 1; +} + +i.icons .icon { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + margin: 0em; + margin: 0; +} + +i.icons .icon:first-child { + position: static; + width: auto; + height: auto; + vertical-align: top; + transform: none; + margin-right: @distanceFromText; +} + +/* Corner Icon */ +i.icons .corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; + transform: none; + font-size: @cornerIconSize; + text-shadow: @cornerIconShadow; +} + +i.icons .inverted.corner.icon { + text-shadow: @cornerIconInvertedShadow; +} + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/image.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/image.less new file mode 100755 index 00000000..d8d52607 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/image.less @@ -0,0 +1,319 @@ +/*! + * # Semantic UI - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'image'; + +@import (multiple) '../../theme.config'; + +/******************************* + Image +*******************************/ + +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: @placeholderColor; +} + +img.ui.image { + display: block; +} + +.ui.image svg, +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} + + +/******************************* + States +*******************************/ + +.ui.hidden.images, +.ui.hidden.image { + display: none; +} + + +.ui.disabled.images, +.ui.disabled.image { + cursor: default; + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inline +---------------*/ + +.ui.inline.image, +.ui.inline.image svg, +.ui.inline.image img { + display: inline-block; +} + +/*------------------ + Vertical Aligned +-------------------*/ + +.ui.top.aligned.images .image, +.ui.top.aligned.image, +.ui.top.aligned.image svg, +.ui.top.aligned.image img { + display: inline-block; + vertical-align: top; +} +.ui.middle.aligned.images .image, +.ui.middle.aligned.image, +.ui.middle.aligned.image svg, +.ui.middle.aligned.image img { + display: inline-block; + vertical-align: middle; +} +.ui.bottom.aligned.images .image, +.ui.bottom.aligned.image, +.ui.bottom.aligned.image svg, +.ui.bottom.aligned.image img { + display: inline-block; + vertical-align: bottom; +} + +/*-------------- + Rounded +---------------*/ + +.ui.rounded.images .image, +.ui.rounded.image, +.ui.rounded.images .image > *, +.ui.rounded.image > * { + border-radius: @roundedBorderRadius; +} + +/*-------------- + Bordered +---------------*/ + +.ui.bordered.images .image, +.ui.bordered.images img, +.ui.bordered.images svg, +.ui.bordered.image img, +.ui.bordered.image svg, +img.ui.bordered.image { + border: @imageBorder; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.images, +.ui.circular.image { + overflow: hidden; +} + +.ui.circular.images .image, +.ui.circular.image, +.ui.circular.images .image > *, +.ui.circular.image > * { + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.images, +.ui.fluid.image, +.ui.fluid.images img, +.ui.fluid.images svg, +.ui.fluid.image svg, +.ui.fluid.image img { + display: block; + width: 100%; + height: auto; +} + + +/*-------------- + Avatar +---------------*/ + +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.images svg, +.ui.avatar.image img, +.ui.avatar.image svg, +.ui.avatar.image { + margin-right: @avatarMargin; + + display: inline-block; + width: @avatarSize; + height: @avatarSize; + + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*------------------- + Spaced +--------------------*/ + +.ui.spaced.image { + display: inline-block !important; + margin-left: @spacedDistance; + margin-right: @spacedDistance; +} + +.ui[class*="left spaced"].image { + margin-left: @spacedDistance; + margin-right: 0em; +} + +.ui[class*="right spaced"].image { + margin-left: 0em; + margin-right: @spacedDistance; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: @floatedHorizontalMargin; + margin-bottom: @floatedVerticalMargin; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-right: 0em; + margin-bottom: @floatedVerticalMargin; + margin-left: @floatedHorizontalMargin; +} + +.ui.floated.images:last-child, +.ui.floated.image:last-child { + margin-bottom: 0em; +} + + +.ui.centered.images, +.ui.centered.image { + margin-left: auto; + margin-right: auto; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.images svg, +.ui.mini.image { + width: @miniWidth; + height: auto; + font-size: @mini; +} +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.images svg, +.ui.tiny.image { + width: @tinyWidth; + height: auto; + font-size: @tiny; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.images svg, +.ui.small.image { + width: @smallWidth; + height: auto; + font-size: @small; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.images svg, +.ui.medium.image { + width: @mediumWidth; + height: auto; + font-size: @medium; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.images svg, +.ui.large.image { + width: @largeWidth; + height: auto; + font-size: @large; +} +.ui.big.images .image, +.ui.big.images img, +.ui.big.images svg, +.ui.big.image { + width: @bigWidth; + height: auto; + font-size: @big; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.images svg, +.ui.huge.image { + width: @hugeWidth; + height: auto; + font-size: @huge; +} +.ui.massive.images .image, +.ui.massive.images img, +.ui.massive.images svg, +.ui.massive.image { + width: @massiveWidth; + height: auto; + font-size: @massive; +} + + +/******************************* + Groups +*******************************/ + +.ui.images { + font-size: 0em; + margin: 0em -@imageHorizontalMargin 0rem; +} + +.ui.images .image, +.ui.images img, +.ui.images svg { + display: inline-block; + margin: 0em @imageHorizontalMargin @imageVerticalMargin; +} + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/input.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/input.less new file mode 100755 index 00000000..b3ab4df2 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/input.less @@ -0,0 +1,507 @@ +/*! + * # Semantic UI - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'input'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Standard +*******************************/ + + +/*-------------------- + Inputs +---------------------*/ + +.ui.input { + position: relative; + font-weight: normal; + font-style: normal; + display: inline-flex; + color: @inputColor; +} +.ui.input input { + margin: 0em; + max-width: 100%; + flex: 1 0 auto; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-align: @textAlign; + line-height: @lineHeight; + + font-family: @inputFont; + padding: @padding; + + background: @background; + border: @border; + color: @inputColor; + border-radius: @borderRadius; + transition: @transition; + + box-shadow: @boxShadow; +} + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ + +.ui.input input::-webkit-input-placeholder { + color: @placeholderColor; +} +.ui.input input::-moz-placeholder { + color: @placeholderColor; +} +.ui.input input::-ms-input-placeholder { + color: @placeholderColor; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input input[disabled] { + opacity: @disabledOpacity; +} + +.ui.disabled.input input { + pointer-events: none; +} + +/*-------------------- + Active +---------------------*/ + +.ui.input input:active, +.ui.input.down input { + border-color: @downBorderColor; + background: @downBackground; + color: @downColor; + box-shadow: @downBoxShadow; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.loading.input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} +.ui.loading.loading.input > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + + +/*-------------------- + Focus +---------------------*/ + +.ui.input.focus input, +.ui.input input:focus { + border-color: @focusBorderColor; + background: @focusBackground; + color: @focusColor; + box-shadow: @focusBoxShadow; +} +.ui.input.focus input::-webkit-input-placeholder, +.ui.input input:focus::-webkit-input-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus input::-moz-placeholder, +.ui.input input:focus::-moz-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus input::-ms-input-placeholder, +.ui.input input:focus::-ms-input-placeholder { + color: @placeholderFocusColor; +} + + + +/*-------------------- + Error +---------------------*/ + +.ui.input.error input { + background-color: @errorBackground; + border-color: @errorBorder; + color: @errorColor; + box-shadow: @errorBoxShadow; +} + +/* Error Placeholder */ +.ui.input.error input::-webkit-input-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error input::-moz-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error input::-ms-input-placeholder { + color: @placeholderErrorColor; +} + +/* Focused Error Placeholder */ +.ui.input.error input:focus::-webkit-input-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error input:focus::-moz-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error input:focus::-ms-input-placeholder { + color: @placeholderErrorFocusColor; +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Transparent +---------------------*/ + + +.ui.transparent.input input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + box-shadow: none !important; +} + +/* Transparent Icon */ +.ui.transparent.icon.input > i.icon { + width: @transparentIconWidth; +} +.ui.transparent.icon.input > input { + padding-left: 0em !important; + padding-right: @transparentIconMargin !important; +} +.ui.transparent[class*="left icon"].input > input { + padding-left: @transparentIconMargin !important; + padding-right: 0em !important; +} + +/* Transparent Inverted */ +.ui.transparent.inverted.input { + color: @transparentInvertedColor; +} +.ui.transparent.inverted.input input { + color: inherit; +} + +.ui.transparent.inverted.input input::-webkit-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input::-moz-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input::-ms-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} + + +/*-------------------- + Icon +---------------------*/ + +.ui.icon.input > i.icon { + cursor: default; + position: absolute; + line-height: 1; + text-align: center; + top: 0px; + right: 0px; + margin: 0em; + height: 100%; + + width: @iconWidth; + opacity: @iconOpacity; + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @iconTransition; +} +.ui.icon.input > i.icon:not(.link) { + pointer-events: none; +} +.ui.icon.input input { + padding-right: @iconMargin !important; +} + +.ui.icon.input > i.icon:before, +.ui.icon.input > i.icon:after { + left: 0; + position: absolute; + text-align: center; + top: 50%; + width: 100%; + margin-top: @iconOffset; +} +.ui.icon.input > i.link.icon { + cursor: pointer; +} +.ui.icon.input > i.circular.icon { + top: @circularIconVerticalOffset; + right: @circularIconHorizontalOffset; +} + +/* Left Icon Input */ +.ui[class*="left icon"].input > i.icon { + right: auto; + left: @borderWidth; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: @circularIconHorizontalOffset; +} +.ui[class*="left icon"].input > input { + padding-left: @iconMargin !important; + padding-right: @horizontalPadding !important; +} + +/* Focus */ +.ui.icon.input > input:focus ~ i.icon { + opacity: 1; +} + +/*-------------------- + Labeled +---------------------*/ + +/* Adjacent Label */ +.ui.labeled.input > .label { + flex: 0 0 auto; + margin: 0; + font-size: @relativeMedium; +} +.ui.labeled.input > .label:not(.corner) { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; +} + +/* Regular Label on Left */ +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left-color: transparent; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { + border-left-color: @focusBorderColor; +} + +/* Regular Label on Right */ +.ui[class*="right labeled"].input input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui[class*="right labeled"].input input + .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.ui[class*="right labeled"].input input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Corner Label */ +.ui.labeled.input .corner.label { + top: @labelCornerTop; + right: @labelCornerRight; + font-size: @labelCornerSize; + border-radius: 0em @borderRadius 0em 0em; +} + +/* Spacing with corner label */ +.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input { + padding-right: @labeledMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { + padding-right: @labeledIconInputMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { + margin-right: @labeledIconMargin; +} + +/* Left Labeled */ +.ui[class*="left corner labeled"].labeled.input input { + padding-left: @labeledMargin !important; +} +.ui[class*="left corner labeled"].icon.input > input { + padding-left: @labeledIconInputMargin !important; +} +.ui[class*="left corner labeled"].icon.input > .icon { + margin-left: @labeledIconMargin; +} + +/* Corner Label Position */ +.ui.input > .ui.corner.label { + top: @borderWidth; + right: @borderWidth; +} +.ui.input > .ui.left.corner.label { + right: auto; + left: @borderWidth; +} + + +/*-------------------- + Action +---------------------*/ + +.ui.action.input > .button, +.ui.action.input > .buttons { + display: flex; + align-items: center; + flex: 0 0 auto; +} +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; + margin: 0; +} + +/* Button on Right */ +.ui.action.input:not([class*="left action"]) > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui.action.input:not([class*="left action"]) > .dropdown, +.ui.action.input:not([class*="left action"]) > .button, +.ui.action.input:not([class*="left action"]) > .buttons > .button { + border-radius: 0px; +} +.ui.action.input:not([class*="left action"]) > .dropdown:last-child, +.ui.action.input:not([class*="left action"]) > .button:last-child, +.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { + border-radius: 0px @borderRadius @borderRadius 0px; +} + +/* Input Focus */ +.ui.action.input:not([class*="left action"]) input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Button on Left */ +.ui[class*="left action"].input > input { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + border-left-color: transparent !important; +} +.ui[class*="left action"].input > .dropdown, +.ui[class*="left action"].input > .button, +.ui[class*="left action"].input > .buttons > .button { + border-radius: 0px; +} +.ui[class*="left action"].input > .dropdown:first-child, +.ui[class*="left action"].input > .button:first-child, +.ui[class*="left action"].input > .buttons:first-child > .button { + border-radius: @borderRadius 0px 0px @borderRadius; +} +/* Input Focus */ +.ui[class*="left action"].input > input:focus { + border-left-color: @focusBorderColor !important; +} + +/*-------------------- + Inverted +---------------------*/ + +/* Standard */ +.ui.inverted.input input { + border: none; +} + +/*-------------------- + Fluid +---------------------*/ + +.ui.fluid.input { + display: flex; +} +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: @relativeMini; +} +.ui.small.input { + font-size: @relativeSmall; +} +.ui.input { + font-size: @relativeMedium; +} +.ui.large.input { + font-size: @relativeLarge; +} +.ui.big.input { + font-size: @relativeBig; +} +.ui.huge.input { + font-size: @relativeHuge; +} +.ui.massive.input { + font-size: @relativeMassive; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/label.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/label.less new file mode 100755 index 00000000..cfb0679e --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/label.less @@ -0,0 +1,1257 @@ +/*! + * # Semantic UI - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'label'; + +@import (multiple) '../../theme.config'; + +/******************************* + Label +*******************************/ + +.ui.label { + display: inline-block; + line-height: 1; + vertical-align: @verticalAlign; + + margin: @verticalMargin @horizontalMargin; + + background-color: @backgroundColor; + background-image: @backgroundImage; + padding: @verticalPadding @horizontalPadding; + color: @color; + + text-transform: @textTransform; + font-weight: @fontWeight; + + border: @border; + border-radius: @borderRadius; + transition: @transition; +} + +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} + +/* Link */ +a.ui.label { + cursor: pointer; +} + +/* Inside Link */ +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: @linkOpacity; + transition: @linkTransition; +} +.ui.label > a:hover { + opacity: 1; +} + +/* Image */ +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: @imageHeight !important; +} + +/* Icon */ +.ui.label > .icon { + width: auto; + margin: 0em @iconDistance 0em 0em; +} + +/* Detail */ +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: @detailFontWeight; + margin-left: @detailMargin; + opacity: @detailOpacity; +} +.ui.label > .detail .icon { + margin: 0em @detailIconDistance 0em 0em; +} + + +/* Removable label */ +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + margin-right: 0em; + margin-left: @deleteMargin; + font-size: @deleteSize; + opacity: @deleteOpacity; + transition: @deleteTransition; +} +.ui.label > .delete.icon:hover { + opacity: 1; +} + +/*------------------- + Group +--------------------*/ + +.ui.labels > .label { + margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; +} + + +/*------------------- + Coupling +--------------------*/ + +.ui.header > .ui.label { + margin-top: @lineHeightOffset; +} + +/* Remove border radius on attached segment */ +.ui.attached.segment > .ui.top.left.attached.label, +.ui.bottom.attached.segment > .ui.top.left.attached.label { + border-top-left-radius: 0; +} +.ui.attached.segment > .ui.top.right.attached.label, +.ui.bottom.attached.segment > .ui.top.right.attached.label { + border-top-right-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.left.attached.label { + border-bottom-left-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.right.attached.label { + border-bottom-right-radius: 0; +} + +/* Padding on next content after a label */ +.ui.top.attached.label:first-child + :not(.attached) { + margin-top: @attachedSegmentPadding !important; +} +.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { + margin-top: 0em; + margin-bottom: @attachedSegmentPadding !important; +} + + +/******************************* + Types +*******************************/ + +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + max-width: 9999px; + vertical-align: baseline; + text-transform: none; + + background: @imageLabelBackground; + padding: @imageLabelPadding; + border-radius: @imageLabelBorderRadius; + box-shadow: @imageLabelBoxShadow; +} + +.ui.image.label img { + display: inline-block; + vertical-align: top; + + height: @imageLabelImageHeight; + margin: @imageLabelImageMargin; + border-radius: @imageLabelImageBorderRadius; +} + +.ui.image.label .detail { + background: @imageLabelDetailBackground; + margin: @imageLabelDetailMargin; + padding: @imageLabelDetailPadding; + border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em; +} + +/*------------------- + Tag +--------------------*/ + +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding-left: @tagHorizontalPadding; + padding-right: @tagHorizontalPadding; + + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @tagTransition; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + transform: translateY(-50%) translateX(50%) rotate(-45deg); + + top: @tagTriangleTopOffset; + right: @tagTriangleRightOffset; + content: ''; + + background-color: inherit; + background-image: @tagTriangleBackgroundImage; + + width: @tagTriangleSize; + height: @tagTriangleSize; + transition: @tagTransition; +} + + +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -(@tagCircleSize / 2); + + margin-top: -(@tagCircleSize / 2); + background-color: @tagCircleColor !important; + width: @tagCircleSize; + height: @tagCircleSize; + + box-shadow: @tagCircleBoxShadow; + border-radius: @circularRadius; +} + + +/*------------------- + Corner Label +--------------------*/ + +.ui.corner.label { + position: absolute; + top: 0em; + right: 0em; + margin: 0em; + padding: 0em; + text-align: center; + + border-color: @backgroundColor; + + width: @cornerTriangleSize; + height: @cornerTriangleSize; + z-index: @cornerTriangleZIndex; + transition: @cornerTriangleTransition; +} + +/* Icon Label */ +.ui.corner.label{ + background-color: transparent !important; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + + width: 0em; + height: 0em; + background-color: transparent !important; + + border-top: 0em solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: @cornerTriangleSize solid transparent; + border-left: 0em solid transparent; + + border-right-color: inherit; + transition: @cornerTriangleTransition; +} + +.ui.corner.label .icon { + cursor: default; + position: relative; + top: @cornerIconTopOffset; + left: @cornerIconLeftOffset; + font-size: @cornerIconSize; + margin: 0em; +} + +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: @cornerTriangleSize solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + + border-top-color: inherit; +} +.ui.left.corner.label .icon { + left: -@cornerIconLeftOffset; +} + +/* Segment */ +.ui.segment > .ui.corner.label { + top: -1px; + right: -1px; +} +.ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; +} + +/*------------------- + Ribbon +--------------------*/ + +.ui.ribbon.label { + position: relative; + margin: 0em; + min-width: max-content; + border-radius: 0em @borderRadius @borderRadius 0em; + border-color: @ribbonShadowColor; +} + +.ui.ribbon.label:after { + position: absolute; + content: ''; + + top: 100%; + left: 0%; + background-color: transparent !important; + + border-style: solid; + border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em; + border-color: transparent; + border-right-color: inherit; + + width: 0em; + height: 0em; +} +/* Positioning */ +.ui.ribbon.label { + left: @ribbonOffset; + margin-right: -@ribbonTriangleSize; + padding-left: @ribbonDistance; + padding-right: @ribbonTriangleSize; +} +.ui[class*="right ribbon"].label { + left: @rightRibbonOffset; + padding-left: @ribbonTriangleSize; + padding-right: @ribbonDistance; +} + +/* Right Ribbon */ +.ui[class*="right ribbon"].label { + text-align: left; + transform: translateX(-100%); + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="right ribbon"].label:after { + left: auto; + right: 0%; + + border-style: solid; + border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em; + border-color: transparent; + border-top-color: inherit; +} + +/* Inside Table */ +.ui.image > .ribbon.label, +.ui.card .image > .ribbon.label { + position: absolute; + top: @ribbonImageTopDistance; +} +.ui.card .image > .ui.ribbon.label, +.ui.image > .ui.ribbon.label { + left: @ribbonImageOffset; +} +.ui.card .image > .ui[class*="right ribbon"].label, +.ui.image > .ui[class*="right ribbon"].label { + left: @rightRibbonImageOffset; + padding-left: @horizontalPadding; +} + +/* Inside Table */ +.ui.table td > .ui.ribbon.label { + left: @ribbonTableOffset; +} +.ui.table td > .ui[class*="right ribbon"].label { + left: @rightRibbonTableOffset; + padding-left: @horizontalPadding; +} + + +/*------------------- + Attached +--------------------*/ + +.ui[class*="top attached"].label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + + padding: @attachedVerticalPadding @attachedHorizontalPadding; + + border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em; +} +.ui[class*="bottom attached"].label { + top: auto; + bottom: 0em; + border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius; +} + +.ui[class*="top left attached"].label { + width: auto; + margin-top: 0em !important; + border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em; +} + +.ui[class*="top right attached"].label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius; +} +.ui[class*="bottom left attached"].label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius; +} +.ui[class*="bottom right attached"].label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.label.disabled { + opacity: 0.5; +} + +/*------------------- + Hover +--------------------*/ + +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: @labelHoverBackgroundColor; + border-color: @labelHoverBackgroundColor; + + background-image: @labelHoverBackgroundImage; + color: @labelHoverTextColor; +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + color: @labelHoverTextColor; +} + +/*------------------- + Active +--------------------*/ + +.ui.active.label { + background-color: @labelActiveBackgroundColor; + border-color: @labelActiveBackgroundColor; + + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} +.ui.active.label:before { + background-color: @labelActiveBackgroundColor; + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} + +/*------------------- + Active Hover +--------------------*/ + +a.ui.labels .active.label:hover, +a.ui.active.label:hover { + background-color: @labelActiveHoverBackgroundColor; + border-color: @labelActiveHoverBackgroundColor; + + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} +.ui.labels a.active.label:ActiveHover:before, +a.ui.active.label:ActiveHover:before { + background-color: @labelActiveHoverBackgroundColor; + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} + + +/*------------------- + Visible +--------------------*/ + +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} + +/*------------------- + Hidden +--------------------*/ + +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: @red !important; + border-color: @red !important; + color: @redTextColor !important; +} +/* Link */ +.ui.red.labels .label:hover, +a.ui.red.label:hover{ + background-color: @redHover !important; + border-color: @redHover !important; + color: @redHoverTextColor !important; +} +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.red.ribbon.label { + border-color: @redRibbonShadow !important; +} +/* Basic */ +.ui.basic.red.label { + background-color: @white !important; + color: @red !important; + border-color: @red !important; +} +.ui.basic.red.labels a.label:hover, +a.ui.basic.red.label:hover { + background-color: @white !important; + color: @redHover !important; + border-color: @redHover !important; +} + +/*--- Orange ---*/ +.ui.orange.labels .label, +.ui.orange.label { + background-color: @orange !important; + border-color: @orange !important; + color: @orangeTextColor !important; +} +/* Link */ +.ui.orange.labels .label:hover, +a.ui.orange.label:hover{ + background-color: @orangeHover !important; + border-color: @orangeHover !important; + color: @orangeHoverTextColor !important; +} +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.orange.ribbon.label { + border-color: @orangeRibbonShadow !important; +} +/* Basic */ +.ui.basic.orange.label { + background-color: @white !important; + color: @orange !important; + border-color: @orange !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.orange.label:hover { + background-color: @white !important; + color: @orangeHover !important; + border-color: @orangeHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.labels .label, +.ui.yellow.label { + background-color: @yellow !important; + border-color: @yellow !important; + color: @yellowTextColor !important; +} +/* Link */ +.ui.yellow.labels .label:hover, +a.ui.yellow.label:hover{ + background-color: @yellowHover !important; + border-color: @yellowHover !important; + color: @yellowHoverTextColor !important; +} +/* Corner */ +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.yellow.ribbon.label { + border-color: @yellowRibbonShadow !important; +} +/* Basic */ +.ui.basic.yellow.label { + background-color: @white !important; + color: @yellow !important; + border-color: @yellow !important; +} +.ui.basic.yellow.labels a.label:hover, +a.ui.basic.yellow.label:hover { + background-color: @white !important; + color: @yellowHover !important; + border-color: @yellowHover !important; +} + +/*--- Olive ---*/ +.ui.olive.labels .label, +.ui.olive.label { + background-color: @olive !important; + border-color: @olive !important; + color: @oliveTextColor !important; +} +/* Link */ +.ui.olive.labels .label:hover, +a.ui.olive.label:hover{ + background-color: @oliveHover !important; + border-color: @oliveHover !important; + color: @oliveHoverTextColor !important; +} +/* Corner */ +.ui.olive.corner.label, +.ui.olive.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.olive.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.olive.label { + background-color: @white !important; + color: @olive !important; + border-color: @olive !important; +} +.ui.basic.olive.labels a.label:hover, +a.ui.basic.olive.label:hover { + background-color: @white !important; + color: @oliveHover !important; + border-color: @oliveHover !important; +} + +/*--- Green ---*/ +.ui.green.labels .label, +.ui.green.label { + background-color: @green !important; + border-color: @green !important; + color: @greenTextColor !important; +} +/* Link */ +.ui.green.labels .label:hover, +a.ui.green.label:hover{ + background-color: @greenHover !important; + border-color: @greenHover !important; + color: @greenHoverTextColor !important; +} +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.green.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.green.label { + background-color: @white !important; + color: @green !important; + border-color: @green !important; +} +.ui.basic.green.labels a.label:hover, +a.ui.basic.green.label:hover { + background-color: @white !important; + color: @greenHover !important; + border-color: @greenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: @teal !important; + border-color: @teal !important; + color: @tealTextColor !important; +} +/* Link */ +.ui.teal.labels .label:hover, +a.ui.teal.label:hover{ + background-color: @tealHover !important; + border-color: @tealHover !important; + color: @tealHoverTextColor !important; +} +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.teal.ribbon.label { + border-color: @tealRibbonShadow !important; +} +/* Basic */ +.ui.basic.teal.label { + background-color: @white !important; + color: @teal !important; + border-color: @teal !important; +} +.ui.basic.teal.labels a.label:hover, +a.ui.basic.teal.label:hover { + background-color: @white !important; + color: @tealHover !important; + border-color: @tealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: @blue !important; + border-color: @blue !important; + color: @blueTextColor !important; +} +/* Link */ +.ui.blue.labels .label:hover, +a.ui.blue.label:hover{ + background-color: @blueHover !important; + border-color: @blueHover !important; + color: @blueHoverTextColor !important; +} +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.blue.ribbon.label { + border-color: @blueRibbonShadow !important; +} +/* Basic */ +.ui.basic.blue.label { + background-color: @white !important; + color: @blue !important; + border-color: @blue !important; +} +.ui.basic.blue.labels a.label:hover, +a.ui.basic.blue.label:hover { + background-color: @white !important; + color: @blueHover !important; + border-color: @blueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.labels .label, +.ui.violet.label { + background-color: @violet !important; + border-color: @violet !important; + color: @violetTextColor !important; +} +/* Link */ +.ui.violet.labels .label:hover, +a.ui.violet.label:hover{ + background-color: @violetHover !important; + border-color: @violetHover !important; + color: @violetHoverTextColor !important; +} +/* Corner */ +.ui.violet.corner.label, +.ui.violet.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.violet.ribbon.label { + border-color: @violetRibbonShadow !important; +} +/* Basic */ +.ui.basic.violet.label { + background-color: @white !important; + color: @violet !important; + border-color: @violet !important; +} +.ui.basic.violet.labels a.label:hover, +a.ui.basic.violet.label:hover { + background-color: @white !important; + color: @violetHover !important; + border-color: @violetHover !important; +} + +/*--- Purple ---*/ +.ui.purple.labels .label, +.ui.purple.label { + background-color: @purple !important; + border-color: @purple !important; + color: @purpleTextColor !important; +} +/* Link */ +.ui.purple.labels .label:hover, +a.ui.purple.label:hover{ + background-color: @purpleHover !important; + border-color: @purpleHover !important; + color: @purpleHoverTextColor !important; +} +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.purple.ribbon.label { + border-color: @purpleRibbonShadow !important; +} +/* Basic */ +.ui.basic.purple.label { + background-color: @white !important; + color: @purple !important; + border-color: @purple !important; +} +.ui.basic.purple.labels a.label:hover, +a.ui.basic.purple.label:hover { + background-color: @white !important; + color: @purpleHover !important; + border-color: @purpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.labels .label, +.ui.pink.label { + background-color: @pink !important; + border-color: @pink !important; + color: @pinkTextColor !important; +} +/* Link */ +.ui.pink.labels .label:hover, +a.ui.pink.label:hover{ + background-color: @pinkHover !important; + border-color: @pinkHover !important; + color: @pinkHoverTextColor !important; +} +/* Corner */ +.ui.pink.corner.label, +.ui.pink.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.pink.ribbon.label { + border-color: @pinkRibbonShadow !important; +} +/* Basic */ +.ui.basic.pink.label { + background-color: @white !important; + color: @pink !important; + border-color: @pink !important; +} +.ui.basic.pink.labels a.label:hover, +a.ui.basic.pink.label:hover { + background-color: @white !important; + color: @pinkHover !important; + border-color: @pinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.labels .label, +.ui.brown.label { + background-color: @brown !important; + border-color: @brown !important; + color: @brownTextColor !important; +} +/* Link */ +.ui.brown.labels .label:hover, +a.ui.brown.label:hover{ + background-color: @brownHover !important; + border-color: @brownHover !important; + color: @brownHoverTextColor !important; +} +/* Corner */ +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.brown.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.brown.label { + background-color: @white !important; + color: @brown !important; + border-color: @brown !important; +} +.ui.basic.brown.labels a.label:hover, +a.ui.basic.brown.label:hover { + background-color: @white !important; + color: @brownHover !important; + border-color: @brownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.labels .label, +.ui.grey.label { + background-color: @grey !important; + border-color: @grey !important; + color: @greyTextColor !important; +} +/* Link */ +.ui.grey.labels .label:hover, +a.ui.grey.label:hover{ + background-color: @greyHover !important; + border-color: @greyHover !important; + color: @greyHoverTextColor !important; +} +/* Corner */ +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.grey.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.grey.label { + background-color: @white !important; + color: @grey !important; + border-color: @grey !important; +} +.ui.basic.grey.labels a.label:hover, +a.ui.basic.grey.label:hover { + background-color: @white !important; + color: @greyHover !important; + border-color: @greyHover !important; +} + +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: @black !important; + border-color: @black !important; + color: @blackTextColor !important; +} +/* Link */ +.ui.black.labels .label:hover, +a.ui.black.label:hover{ + background-color: @blackHover !important; + border-color: @blackHover !important; + color: @blackHoverTextColor !important; +} +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.black.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.black.label { + background-color: @white !important; + color: @black !important; + border-color: @black !important; +} +.ui.basic.black.labels a.label:hover, +a.ui.basic.black.label:hover { + background-color: @white !important; + color: @blackHover !important; + border-color: @blackHover !important; +} + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.label { + background: @basicBackground; + border: @basicBorder; + color: @basicColor; + box-shadow: @basicBoxShadow; +} + +/* Link */ +a.ui.basic.label:hover { + text-decoration: none; + background: @basicHoverBackground; + color: @basicHoverColor; + box-shadow: @basicHoverBorder; + box-shadow: @basicHoverBoxShadow; +} + +/* Pointing */ +.ui.basic.pointing.label:before { + border-color: inherit; +} + + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + box-sizing: border-box; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.labels .label, +.ui.inverted.label { + color: @invertedTextColor !important; +} + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: 0em @horizontalLabelMargin 0em 0em; + + padding: @horizontalLabelVerticalPadding @horizontalPadding; + min-width: @horizontalLabelMinWidth; + text-align: center; +} + + +/*------------------- + Circular +--------------------*/ + +.ui.circular.labels .label, +.ui.circular.label { + min-width: @circularMinSize; + min-height: @circularMinSize; + + padding: @circularPadding !important; + + line-height: 1em; + text-align: center; + border-radius: @circularRadius; +} +.ui.empty.circular.labels .label, +.ui.empty.circular.label { + min-width: 0em; + min-height: 0em; + overflow: hidden; + width: @emptyCircleSize; + height: @emptyCircleSize; + vertical-align: baseline; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.label { + position: relative; +} + +.ui.attached.pointing.label { + position: absolute; +} + +.ui.pointing.label:before { + background-color: inherit; + background-image: inherit; + border-width: none; + border-style: solid; + border-color: @pointingBorderColor; +} +/* Arrow */ +.ui.pointing.label:before { + position: absolute; + content: ''; + transform: rotate(45deg); + background-image: none; + + z-index: @pointingTriangleZIndex; + width: @pointingTriangleSize; + height: @pointingTriangleSize; + transition: @pointingTriangleTransition; +} + +/*--- Above ---*/ +.ui.pointing.label, +.ui[class*="pointing above"].label { + margin-top: @pointingVerticalDistance; +} +.ui.pointing.label:before, +.ui[class*="pointing above"].label:before { + border-width: @borderWidth 0px 0px @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 0%; + left: 50%; +} +/*--- Below ---*/ +.ui[class*="bottom pointing"].label, +.ui[class*="pointing below"].label { + margin-top: 0em; + margin-bottom: @pointingVerticalDistance; +} +.ui[class*="bottom pointing"].label:before, +.ui[class*="pointing below"].label:before { + border-width: 0px @borderWidth @borderWidth 0px; + top: auto; + right: auto; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; + left: 50%; +} +/*--- Left ---*/ +.ui[class*="left pointing"].label { + margin-top: 0em; + margin-left: @pointingHorizontalDistance; +} +.ui[class*="left pointing"].label:before { + border-width: 0px 0px @borderWidth @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/*--- Right ---*/ +.ui[class*="right pointing"].label { + margin-top: 0em; + margin-right: @pointingHorizontalDistance; +} +.ui[class*="right pointing"].label:before { + border-width: @borderWidth @borderWidth 0px 0px; + transform: translateX(50%) translateY(-50%) rotate(45deg); + top: 50%; + right: 0%; + bottom: auto; + left: auto; +} + +/* Basic Pointing */ + +/*--- Above ---*/ +.ui.basic.pointing.label:before, +.ui.basic[class*="pointing above"].label:before { + margin-top: @basicPointingTriangleOffset; +} +/*--- Below ---*/ +.ui.basic[class*="bottom pointing"].label:before, +.ui.basic[class*="pointing below"].label:before { + bottom: auto; + top: 100%; + margin-top: -@basicPointingTriangleOffset; +} +/*--- Left ---*/ +.ui.basic[class*="left pointing"].label:before { + top: 50%; + left: @basicPointingTriangleOffset; +} +/*--- Right ---*/ +.ui.basic[class*="right pointing"].label:before { + top: 50%; + right: @basicPointingTriangleOffset; +} + + +/*------------------ + Floating Label +-------------------*/ + +.ui.floating.label { + position: absolute; + z-index: @floatingZIndex; + top: @floatingTopOffset; + left: 100%; + margin: 0em 0em 0em @floatingLeftOffset !important; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.labels .label, +.ui.mini.label { + font-size: @mini; +} +.ui.tiny.labels .label, +.ui.tiny.label { + font-size: @tiny; +} +.ui.small.labels .label, +.ui.small.label { + font-size: @small; +} +.ui.labels .label, +.ui.label { + font-size: @medium; +} +.ui.large.labels .label, +.ui.large.label { + font-size: @large; +} +.ui.big.labels .label, +.ui.big.label { + font-size: @big; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: @huge; +} +.ui.massive.labels .label, +.ui.massive.label { + font-size: @massive; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/list.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/list.less new file mode 100755 index 00000000..4c27db2d --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/list.less @@ -0,0 +1,938 @@ +/*! + * # Semantic UI - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'list'; + +@import (multiple) '../../theme.config'; + +/******************************* + List +*******************************/ + +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: @listStyleType; + margin: @margin; + padding: @verticalPadding @horizontalPadding; +} + +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; + padding-top: 0em; +} + +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; + padding-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list > .item, +.ui.list .list > .item { + display: list-item; + table-layout: fixed; + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemPadding; + line-height: @itemLineHeight; +} + +ul.ui.list > li:first-child:after, +ol.ui.list > li:first-child:after, +.ui.list > .list > .item, +.ui.list > .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +ul.ui.list li:first-child, +ol.ui.list li:first-child, +.ui.list .list > .item:first-child, +.ui.list > .item:first-child { + padding-top: 0em; +} +ul.ui.list li:last-child, +ol.ui.list li:last-child, +.ui.list .list > .item:last-child, +.ui.list > .item:last-child { + padding-bottom: 0em; +} + +/* Child List */ +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + clear: both; + margin: 0em; + padding: @childListPadding; +} + +/* Child Item */ +ul.ui.list ul li, +ol.ui.list ol li, +.ui.list .list > .item { + padding: @childItemPadding; + line-height: @childItemLineHeight; +} + + +/* Icon */ +.ui.list .list > .item > i.icon, +.ui.list > .item > i.icon { + display: table-cell; + margin: 0em; + padding-top: @iconOffset; + padding-right: @iconDistance; + vertical-align: @iconContentVerticalAlign; + transition: @iconTransition; +} +.ui.list .list > .item > i.icon:only-child, +.ui.list > .item > i.icon:only-child { + display: inline-block; + vertical-align: @iconVerticalAlign; +} + + +/* Image */ +.ui.list .list > .item > .image, +.ui.list > .item > .image { + display: table-cell; + background-color: transparent; + margin: 0em; + vertical-align: @imageAlign; +} +.ui.list .list > .item > .image:not(:only-child):not(img), +.ui.list > .item > .image:not(:only-child):not(img) { + padding-right: @imageDistance; +} +.ui.list .list > .item > .image img, +.ui.list > .item > .image img { + vertical-align: @imageAlign; +} + +.ui.list .list > .item > img.image, +.ui.list .list > .item > .image:only-child, +.ui.list > .item > img.image, +.ui.list > .item > .image:only-child { + display: inline-block; +} + +/* Content */ +.ui.list .list > .item > .content, +.ui.list > .item > .content { + line-height: @contentLineHeight; +} +.ui.list .list > .item > .image + .content, +.ui.list .list > .item > .icon + .content, +.ui.list > .item > .image + .content, +.ui.list > .item > .icon + .content { + display: table-cell; + padding: 0em 0em 0em @contentDistance; + vertical-align: @contentVerticalAlign; +} +.ui.list .list > .item > img.image + .content, +.ui.list > .item > img.image + .content { + display: inline-block; +} +.ui.list .list > .item > .content > .list, +.ui.list > .item > .content > .list { + margin-left: 0em; + padding-left: 0em; +} + +/* Header */ +.ui.list .list > .item .header, +.ui.list > .item .header { + display: block; + margin: 0em; + font-family: @itemHeaderFontFamily; + font-weight: @itemHeaderFontWeight; + color: @itemHeaderColor; +} + +/* Description */ +.ui.list .list > .item .description, +.ui.list > .item .description { + display: block; + color: @itemDescriptionColor; +} + +/* Child Link */ +.ui.list > .item a, +.ui.list .list > .item a { + cursor: pointer; +} + +/* Linking Item */ +.ui.list .list > a.item, +.ui.list > a.item { + cursor: pointer; + color: @itemLinkColor; +} +.ui.list .list > a.item:hover, +.ui.list > a.item:hover { + color: @itemLinkHoverColor; +} + +/* Linked Item Icons */ +.ui.list .list > a.item i.icon, +.ui.list > a.item i.icon { + color: @itemLinkIconColor; +} + +/* Header Link */ +.ui.list .list > .item a.header, +.ui.list > .item a.header { + cursor: pointer; + color: @itemHeaderLinkColor !important; +} +.ui.list .list > .item a.header:hover, +.ui.list > .item a.header:hover { + color: @itemHeaderLinkHoverColor !important; +} + +/* Floated Content */ +.ui[class*="left floated"].list { + float: left; +} +.ui[class*="right floated"].list { + float: right; +} + +.ui.list .list > .item [class*="left floated"], +.ui.list > .item [class*="left floated"] { + float: left; + margin: @leftFloatMargin; +} +.ui.list .list > .item [class*="right floated"], +.ui.list > .item [class*="right floated"] { + float: right; + margin: @rightFloatMargin; +} + +/******************************* + Coupling +*******************************/ + +.ui.menu .ui.list > .item, +.ui.menu .ui.list .list > .item { + display: list-item; + table-layout: fixed; + background-color: transparent; + + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemVerticalPadding @itemHorizontalPadding; + line-height: @itemLineHeight; +} +.ui.menu .ui.list .list > .item:before, +.ui.menu .ui.list > .item:before { + border: none; + background: none; +} +.ui.menu .ui.list .list > .item:first-child, +.ui.menu .ui.list > .item:first-child { + padding-top: 0em; +} +.ui.menu .ui.list .list > .item:last-child, +.ui.menu .ui.list > .item:last-child { + padding-bottom: 0em; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list > .item { + display: inline-block; + margin-left: @horizontalSpacing; + font-size: 1rem; +} +.ui.horizontal.list:not(.celled) > .item:first-child { + margin-left: 0em !important; + padding-left: 0em !important; +} +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} + +.ui.horizontal.list > .item > .image, +.ui.horizontal.list .list > .item > .image, +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list .list > .item > .icon, +.ui.horizontal.list > .item > .content, +.ui.horizontal.list .list > .item > .content { + vertical-align: @horizontalVerticalAlign; +} + +/* Padding on all elements */ +.ui.horizontal.list > .item:first-child, +.ui.horizontal.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Horizontal List */ +.ui.horizontal.list > .item > i.icon { + margin: 0em; + padding: 0em @horizontalIconDistance 0em 0em; +} +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list > .item > .icon + .content { + float: none; + display: inline-block; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.list .list > .disabled.item, +.ui.list > .disabled.item { + pointer-events: none; + color: @disabledColor !important; +} +.ui.inverted.list .list > .disabled.item, +.ui.inverted.list > .disabled.item { + color: @invertedDisabledColor !important; +} + +/*------------------- + Hover +--------------------*/ + +.ui.list .list > a.item:hover .icon, +.ui.list > a.item:hover .icon { + color: @itemLinkIconHoverColor; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.list .list > a.item > .icon, +.ui.inverted.list > a.item > .icon { + color: @invertedIconLinkColor; +} +.ui.inverted.list .list > .item .header, +.ui.inverted.list > .item .header { + color: @invertedHeaderColor; +} +.ui.inverted.list .list > .item .description, +.ui.inverted.list > .item .description { + color: @invertedDescriptionColor; +} + +/* Item Link */ +.ui.inverted.list .list > a.item, +.ui.inverted.list > a.item { + cursor: pointer; + color: @invertedItemLinkColor; +} +.ui.inverted.list .list > a.item:hover, +.ui.inverted.list > a.item:hover { + color: @invertedItemLinkHoverColor; +} + + +/* Linking Content */ +.ui.inverted.list .item a:not(.ui) { + color: @invertedItemLinkColor !important; +} +.ui.inverted.list .item a:not(.ui):hover { + color: @invertedItemLinkHoverColor !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.list[class*="top aligned"] .image, +.ui.list[class*="top aligned"] .content, +.ui.list [class*="top aligned"] { + vertical-align: top !important; +} +.ui.list[class*="middle aligned"] .image, +.ui.list[class*="middle aligned"] .content, +.ui.list [class*="middle aligned"] { + vertical-align: middle !important; +} +.ui.list[class*="bottom aligned"] .image, +.ui.list[class*="bottom aligned"] .content, +.ui.list [class*="bottom aligned"] { + vertical-align: bottom !important; +} + +/*------------------- + Link +--------------------*/ + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a:not(.ui) { + color: @linkListItemColor; + transition: @linkListTransition; +} +.ui.link.list a.item:hover, +.ui.link.list .item a:not(.ui):hover { + color: @linkListItemHoverColor; +} +.ui.link.list a.item:active, +.ui.link.list .item a:not(.ui):active { + color: @linkListItemDownColor; +} +.ui.link.list .active.item, +.ui.link.list .active.item a:not(.ui) { + color: @linkListItemActiveColor; +} + +/* Inverted */ +.ui.inverted.link.list .item, +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a:not(.ui) { + color: @invertedLinkListItemColor; +} +.ui.inverted.link.list a.item:hover, +.ui.inverted.link.list .item a:not(.ui):hover { + color: @invertedLinkListItemHoverColor; +} +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:not(.ui):active { + color: @invertedLinkListItemDownColor; +} +.ui.inverted.link.list a.active.item, +.ui.inverted.link.list .active.item a:not(.ui) { + color: @invertedLinkListItemActiveColor; +} + +/*------------------- + Selection +--------------------*/ + +.ui.selection.list .list > .item, +.ui.selection.list > .item { + cursor: pointer; + background: @selectionListBackground; + padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding; + margin: @selectionListItemMargin; + color: @selectionListColor; + border-radius: @selectionListItemBorderRadius; + transition: @selectionListTransition; +} +.ui.selection.list .list > .item:last-child, +.ui.selection.list > .item:last-child { + margin-bottom: 0em; +} +.ui.selection.list.list > .item:hover, +.ui.selection.list > .item:hover { + background: @selectionListHoverBackground; + color: @selectionListHoverColor; +} +.ui.selection.list .list > .item:active, +.ui.selection.list > .item:active { + background: @selectionListDownBackground; + color: @selectionListDownColor; +} +.ui.selection.list .list > .item.active, +.ui.selection.list > .item.active { + background: @selectionListActiveBackground; + color: @selectionListActiveColor; +} + +/* Inverted */ +.ui.inverted.selection.list > .item, +.ui.inverted.selection.list > .item { + background: @invertedSelectionListBackground; + color: @invertedSelectionListColor; +} +.ui.inverted.selection.list > .item:hover, +.ui.inverted.selection.list > .item:hover { + background: @invertedSelectionListHoverBackground; + color: @invertedSelectionListHoverColor; +} +.ui.inverted.selection.list > .item:active, +.ui.inverted.selection.list > .item:active { + background: @invertedSelectionListDownBackground; + color: @invertedSelectionListDownColor; +} +.ui.inverted.selection.list > .item.active, +.ui.inverted.selection.list > .item.active { + background: @invertedSelectionListActiveBackground; + color: @invertedSelectionListActiveColor; +} + +/* Celled / Divided Selection List */ +.ui.celled.selection.list .list > .item, +.ui.divided.selection.list .list > .item, +.ui.celled.selection.list > .item, +.ui.divided.selection.list > .item { + border-radius: 0em; +} + +/*------------------- + Animated +--------------------*/ + +.ui.animated.list > .item { + transition: @animatedListTransition; +} +.ui.animated.list:not(.horizontal) > .item:hover { + padding-left: @animatedListIndent; +} + +/*------------------- + Fitted +--------------------*/ +.ui.fitted.list:not(.selection) .list > .item, +.ui.fitted.list:not(.selection) > .item { + padding-left: 0em; + padding-right: 0em; +} +.ui.fitted.selection.list .list > .item, +.ui.fitted.selection.list > .item { + margin-left: -@selectionListItemHorizontalPadding; + margin-right: -@selectionListItemHorizontalPadding; +} + +/*------------------- + Bulleted +--------------------*/ + +ul.ui.list, +.ui.bulleted.list { + margin-left: @bulletDistance; +} +ul.ui.list li, +.ui.bulleted.list .list > .item, +.ui.bulleted.list > .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .list > .item:before, +.ui.bulleted.list > .item:before { + user-select: none; + pointer-events: none; + position: absolute; + top: auto; + left: auto; + margin-left: @bulletOffset; + content: @bulletCharacter; + opacity: @bulletOpacity; + color: @bulletColor; + vertical-align: @bulletVerticalAlign; +} + +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: @bulletChildDistance; +} + +/* 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: @horizontalBulletSpacing; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list > .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li::before, +.ui.horizontal.bulleted.list > .item::before { + color: @horizontalBulletColor; +} +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, +.ui.ordered.list .list, +ol.ui.list ol { + counter-reset: ordered; + margin-left: @orderedCountDistance; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .list > .item, +.ui.ordered.list > .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .list > .item:before, +.ui.ordered.list > .item:before { + position: absolute; + top: auto; + left: auto; + user-select: none; + pointer-events: none; + margin-left: -(@orderedCountDistance); + counter-increment: @orderedCountName; + content: @orderedCountContent; + text-align: @orderedCountTextAlign; + color: @orderedCountColor; + vertical-align: @orderedCountVerticalAlign; + opacity: @orderedCountOpacity; +} + +ol.ui.inverted.list li:before, +.ui.ordered.inverted.list .list > .item:before, +.ui.ordered.inverted.list > .item:before { + color: @orderedInvertedCountColor; +} + +/* Value */ +.ui.ordered.list > .list > .item[data-value], +.ui.ordered.list > .item[data-value] { + content: attr(data-value); +} +ol.ui.list li[value]:before { + content: attr(value); +} + +/* Child Lists */ +ol.ui.list ol, +.ui.ordered.list .list { + margin-left: @orderedChildCountDistance; +} +ol.ui.list ol li:before, +.ui.ordered.list .list > .item:before { + margin-left: @orderedChildCountOffset; +} + +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .list > .item:before, +.ui.ordered.horizontal.list > .item:before { + position: static; + margin: 0em @horizontalOrderedCountDistance 0em 0em; +} + +/*------------------- + Divided +--------------------*/ + +.ui.divided.list > .item { + border-top: @dividedBorder; +} +.ui.divided.list .list > .item { + border-top: @dividedChildListBorder; +} +.ui.divided.list .item .list > .item { + border-top: @dividedChildItemBorder; +} +.ui.divided.list .list > .item:first-child, +.ui.divided.list > .item:first-child { + border-top: none; +} + +/* Sub Menu */ +.ui.divided.list:not(.horizontal) .list > .item:first-child { + border-top-width: @dividedBorderWidth; +} + +/* Divided bulleted */ +.ui.divided.bulleted.list:not(.horizontal), +.ui.divided.bulleted.list .list { + margin-left: 0em; + padding-left: 0em; +} +.ui.divided.bulleted.list > .item:not(.horizontal) { + padding-left: @bulletDistance; +} + +/* Divided Ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list .list > .item, +.ui.divided.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.divided.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.divided.ordered.list .item .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Divided Selection */ +.ui.divided.selection.list .list > .item, +.ui.divided.selection.list > .item { + margin: 0em; + border-radius: 0em; +} + +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list > .item { + border-top: none; + border-left: @dividedBorder; + margin: 0em; + padding-left: @horizontalDividedSpacing; + padding-right: @horizontalDividedSpacing; + line-height: @horizontalDividedLineHeight; +} +.ui.horizontal.divided.list > .item:first-child { + border-left: none; +} +/* Inverted */ +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list, +.ui.divided.inverted.horizontal.list > .item { + border-color: @dividedInvertedBorderColor; +} + + +/*------------------- + Celled +--------------------*/ + +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: @celledBorder; + padding-left: @celledHorizontalPadding; + padding-right: @celledHorizontalPadding; +} +.ui.celled.list > .item:last-child { + border-bottom: @celledBorder; +} + +/* Padding on all elements */ +.ui.celled.list > .item:first-child, +.ui.celled.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Sub Menu */ +.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 .list > .item, +.ui.celled.bulleted.list > .item { + padding-left: (@bulletDistance); +} +.ui.celled.bulleted.list .item .list { + margin-left: -(@bulletDistance); + margin-right: -(@bulletDistance); + padding-bottom: @itemVerticalPadding; +} + +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .list > .item, +.ui.celled.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.celled.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.celled.ordered.list .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .list > .item, +.ui.horizontal.celled.list > .item { + border-top: none; + border-left: @celledBorder; + margin: 0em; + padding-left: @horizontalCelledSpacing; + padding-right: @horizontalCelledSpacing; + + line-height: @horizontalCelledLineHeight; +} +.ui.horizontal.celled.list .list > .item:last-child, +.ui.horizontal.celled.list > .item:last-child { + border-bottom: none; + border-right: @celledBorder; +} + +/* Inverted */ +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: @celledInvertedBorder; +} +.ui.celled.inverted.horizontal.list .list > .item, +.ui.celled.inverted.horizontal.list > .item { + border-color: @celledInvertedBorder; +} + +/*------------------- + Relaxed +--------------------*/ + +.ui.relaxed.list:not(.horizontal) > .item { + padding-top: @relaxedItemVerticalPadding; + padding-bottom: @relaxedItemVerticalPadding; +} +.ui.relaxed.list:not(.horizontal) .list > .item { + padding-top: @relaxedChildItemVerticalPadding; + padding-bottom: @relaxedChildItemVerticalPadding; +} +.ui.horizontal.relaxed.list > .item { + padding-left: @relaxedHorizontalPadding; + padding-right: @relaxedHorizontalPadding; +} + +/* Very Relaxed */ +.ui[class*="very relaxed"].list:not(.horizontal) > .item { + padding-top: @veryRelaxedItemVerticalPadding; + padding-bottom: @veryRelaxedItemVerticalPadding; +} +.ui[class*="very relaxed"].list:not(.horizontal) .list > .item { + padding-top: @veryRelaxedChildItemVerticalPadding; + padding-bottom: @veryRelaxedChildItemVerticalPadding; +} +.ui.horizontal[class*="very relaxed"].list .list > .item, +.ui.horizontal[class*="very relaxed"].list > .item { + padding-left: @veryRelaxedHorizontalPadding; + padding-right: @veryRelaxedHorizontalPadding; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list { + font-size: @relativeMini; +} +.ui.tiny.list { + font-size: @relativeTiny; +} +.ui.small.list { + font-size: @relativeSmall; +} +.ui.list { + font-size: @relativeMedium; +} +.ui.large.list { + font-size: @relativeLarge; +} +.ui.big.list { + font-size: @relativeBig; +} +.ui.huge.list { + font-size: @relativeHuge; +} +.ui.massive.list { + font-size: @relativeMassive; +} + +.ui.mini.horizontal.list .list > .item, +.ui.mini.horizontal.list > .item { + font-size: @mini; +} +.ui.tiny.horizontal.list .list > .item, +.ui.tiny.horizontal.list > .item { + font-size: @tiny; +} +.ui.small.horizontal.list .list > .item, +.ui.small.horizontal.list > .item { + font-size: @small; +} +.ui.horizontal.list .list > .item, +.ui.horizontal.list > .item { + font-size: @medium; +} +.ui.large.horizontal.list .list > .item, +.ui.large.horizontal.list > .item { + font-size: @large; +} +.ui.big.horizontal.list .list > .item, +.ui.big.horizontal.list > .item { + font-size: @big; +} +.ui.huge.horizontal.list .list > .item, +.ui.huge.horizontal.list > .item { + font-size: @huge; +} +.ui.massive.horizontal.list .list > .item, +.ui.massive.horizontal.list > .item { + font-size: @massive; +} + +.loadUIOverrides(); + diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/loader.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/loader.less new file mode 100755 index 00000000..f8f41101 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/loader.less @@ -0,0 +1,269 @@ +/*! + * # Semantic UI - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'loader'; + +@import (multiple) '../../theme.config'; + +/******************************* + Loader +*******************************/ + + +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: @loaderTopOffset; + left: @loaderLeftOffset; + margin: 0px; + text-align: center; + z-index: 1000; + transform: translateX(-50%) translateY(-50%); +} + +/* Static Shape */ +.ui.loader:before { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} + +/* Active Shape */ +.ui.loader:after { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + animation: loader @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @shapeBorderColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + +/* Active Animation */ +@keyframes loader { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Sizes */ +.ui.loader:before, +.ui.loader:after { + width: @medium; + height: @medium; + margin: @mediumOffset; +} +.ui.mini.loader:before, +.ui.mini.loader:after { + width: @mini; + height: @mini; + margin: @miniOffset; +} +.ui.small.loader:before, +.ui.small.loader:after { + width: @small; + height: @small; + margin: @smallOffset; +} +.ui.large.loader:before, +.ui.large.loader:after { + width: @large; + height: @large; + margin: @largeOffset; +} + +/*------------------- + Coupling +--------------------*/ + +/* Show inside active dimmer */ +.ui.dimmer .loader { + display: block; +} + +/* Black Dimmer */ +.ui.dimmer .ui.loader { + color: @invertedLoaderTextColor; +} +.ui.dimmer .ui.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.dimmer .ui.loader:after { + border-color: @invertedShapeBorderColor; +} + +/* White Dimmer (Inverted) */ +.ui.inverted.dimmer .ui.loader { + color: @loaderTextColor; +} +.ui.inverted.dimmer .ui.loader:before { + border-color: @loaderFillColor; +} +.ui.inverted.dimmer .ui.loader:after { + border-color: @shapeBorderColor; +} + +/******************************* + Types +*******************************/ + + +/*------------------- + Text +--------------------*/ + +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} + + +/******************************* + States +*******************************/ + +.ui.indeterminate.loader:after { + animation-direction: @indeterminateDirection; + animation-duration: @indeterminateSpeed; +} + +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + + +/* Loader */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: @mini; + height: @mini; + font-size: @miniFontSize; +} +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: @small; + height: @small; + font-size: @smallFontSize; +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: @medium; + height: @medium; + font-size: @mediumFontSize; +} +.ui.inverted.dimmer .ui.loader.large, +.ui.loader.large { + width: @large; + height: @large; + font-size: @largeFontSize; +} + +/* Text Loader */ +.ui.mini.text.loader { + min-width: @mini; + padding-top: (@mini + @textDistance); +} +.ui.small.text.loader { + min-width: @small; + padding-top: (@small + @textDistance); +} +.ui.text.loader { + min-width: @medium; + padding-top: (@medium + @textDistance); +} +.ui.large.text.loader { + min-width: @large; + padding-top: (@large + @textDistance); +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.loader { + color: @invertedLoaderTextColor +} +.ui.inverted.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.inverted.loader:after { + border-top-color: @invertedLoaderLineColor; +} + +/*------------------- + Inline +--------------------*/ + +.ui.inline.loader { + position: relative; + vertical-align: @inlineVerticalAlign; + margin: @inlineMargin; + left: 0em; + top: 0em; + transform: none; +} + +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} + +/* Centered Inline */ +.ui.centered.inline.loader.active, +.ui.centered.inline.loader.visible { + display: block; + margin-left: auto; + margin-right: auto; +} + + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/rail.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/rail.less new file mode 100755 index 00000000..0d090313 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/rail.less @@ -0,0 +1,135 @@ +/*! + * # Semantic UI - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'rail'; + +@import (multiple) '../../theme.config'; + +/******************************* + Rails +*******************************/ + +.ui.rail { + position: absolute; + top: 0%; + width: @width; + height: @height; +} + +.ui.left.rail { + left: auto; + right: 100%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + +.ui.right.rail { + left: 100%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Internal +---------------*/ + +.ui.left.internal.rail { + left: 0%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +.ui.right.internal.rail { + left: auto; + right: 0%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + + +/*-------------- + Dividing +---------------*/ + +.ui.dividing.rail { + width: @dividingWidth; +} +.ui.left.dividing.rail { + padding: 0em @splitDividingDistance 0em 0em; + margin: 0em @splitDividingDistance 0em 0em; + border-right: @dividingBorder; +} +.ui.right.dividing.rail { + border-left: @dividingBorder; + padding: 0em 0em 0em @splitDividingDistance; + margin: 0em 0em 0em @splitDividingDistance; +} + +/*-------------- + Distance +---------------*/ + +.ui.close.rail { + width: @closeWidth; +} +.ui.close.left.rail { + padding: 0em @splitCloseDistance 0em 0em; + margin: 0em @splitCloseDistance 0em 0em; +} +.ui.close.right.rail { + padding: 0em 0em 0em @splitCloseDistance; + margin: 0em 0em 0em @splitCloseDistance; +} + +.ui.very.close.rail { + width: @veryCloseWidth; +} +.ui.very.close.left.rail { + padding: 0em @splitVeryCloseDistance 0em 0em; + margin: 0em @splitVeryCloseDistance 0em 0em; +} +.ui.very.close.right.rail { + padding: 0em 0em 0em @splitVeryCloseDistance; + margin: 0em 0em 0em @splitVeryCloseDistance; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.left.rail, +.ui.attached.right.rail { + padding: 0em; + margin: 0em; +} + +/*-------------- + Sizing +---------------*/ + +.ui.rail { + font-size: @medium; +} + + + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/reveal.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/reveal.less new file mode 100755 index 00000000..f1ef0af3 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/reveal.less @@ -0,0 +1,266 @@ +/*! + * # Semantic UI - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'reveal'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reveal +*******************************/ + +.ui.reveal { + display: inherit; + position: relative !important; + font-size: 0em !important; +} + +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: @topZIndex !important; + transition: @transition; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: @bottomZIndex !important; +} + +/* Make sure hovered element is on top of other reveal */ +.ui.active.reveal .visible.content, +.ui.reveal:hover .visible.content { + z-index: @activeZIndex !important; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Slide +---------------*/ + +.ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.slide.reveal > .content { + display: block; + width: 100%; + float: left; + + margin: 0em; + transition: @slideTransition; +} + +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; + transform: translateX(100%) !important; +} +.ui.slide.active.reveal > .visible.content, +.ui.slide.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.slide.active.reveal > .hidden.content, +.ui.slide.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.right.reveal > .visible.content { + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .hidden.content { + transform: translateX(-100%) !important; +} +.ui.slide.right.active.reveal > .visible.content, +.ui.slide.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.slide.right.active.reveal > .hidden.content, +.ui.slide.right.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.up.reveal > .hidden.content { + transform: translateY(100%) !important; +} +.ui.slide.up.active.reveal > .visible.content, +.ui.slide.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.slide.up.active.reveal > .hidden.content, +.ui.slide.up.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + +.ui.slide.down.reveal > .hidden.content { + transform: translateY(-100%) !important; +} +.ui.slide.down.active.reveal > .visible.content, +.ui.slide.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} +.ui.slide.down.active.reveal > .hidden.content, +.ui.slide.down.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + + +/*-------------- + Fade +---------------*/ + +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.active.reveal > .visible.content, +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} + + +/*-------------- + Move +---------------*/ + +.ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.move.reveal > .content { + display: block; + float: left; + + margin: 0em; + transition: @moveTransition; +} + +.ui.move.reveal > .visible.content { + position: relative !important; +} +.ui.move.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; +} +.ui.move.active.reveal > .visible.content, +.ui.move.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.move.right.active.reveal > .visible.content, +.ui.move.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.move.up.active.reveal > .visible.content, +.ui.move.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.move.down.active.reveal > .visible.content, +.ui.move.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} + + + +/*-------------- + Rotate +---------------*/ + +.ui.rotate.reveal > .visible.content { + transition-duration: @transitionDuration; + transform: rotate(0deg); +} + +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + transform-origin: bottom right; +} +.ui.rotate.active.reveal > .visible.conten, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + transform: rotate(@rotateDegrees); +} + +.ui.rotate.left.reveal > .visible.content { + transform-origin: bottom left; +} +.ui.rotate.left.active.reveal > .visible.content, +.ui.rotate.left.reveal:hover > .visible.content { + transform: rotate(-@rotateDegrees); +} + +/******************************* + States +*******************************/ + +.ui.disabled.reveal:hover > .visible.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.hidden.content { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.reveal { + overflow: visible; +} + +/*-------------- + Instant +---------------*/ + +.ui.instant.reveal > .content { + transition-delay: 0s !important; +} + + +/*-------------- + Sizing +---------------*/ + +.ui.reveal > .content { + font-size: @medium !important; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/segment.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/segment.less new file mode 100755 index 00000000..a52dcbf2 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/segment.less @@ -0,0 +1,727 @@ +/*! + * # Semantic UI - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'segment'; + +@import (multiple) '../../theme.config'; + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: @background; + box-shadow: @boxShadow; + margin: @margin; + padding: @padding; + border-radius: @borderRadius; + border: @border; +} + +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} + + +/* Vertical */ +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + + background: none transparent; + border-radius: 0px; + box-shadow: none; + border: none; + border-bottom: @borderWidth solid @borderColor; +} +.ui.vertical.segment:last-child { + border-bottom: none; +} + + +/*------------------- + Loose Coupling +--------------------*/ + +/* Header */ +.ui.inverted.segment > .ui.header { + color: @white; +} + +/* Label */ +.ui[class*="bottom attached"].segment > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui[class*="top attached"].segment > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} + +/* Grid */ +.ui.page.grid.segment, +.ui.grid > .row > .ui.segment.column, +.ui.grid > .ui.segment.column { + padding-top: @pageGridMargin; + padding-bottom: @pageGridMargin; +} +.ui.grid.segment { + margin: @margin; + border-radius: @borderRadius; +} + +/* Table */ +.ui.basic.table.segment { + background: @background; + border: @border; + box-shadow: @boxShadow; +} +.ui[class*="very basic"].table.segment { + padding: @padding; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segments, +.ui.piled.segment { + margin: @piledMargin 0em; + box-shadow: @piledBoxShadow; + z-index: @piledZIndex; +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segments:after, +.ui.piled.segments:before, +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: @white; + visibility: visible; + content: ''; + display: block; + height: 100%; + left: 0px; + position: absolute; + width: 100%; + border: @piledBorder; + box-shadow: @piledBoxShadow; +} +.ui.piled.segments:before, +.ui.piled.segment:before { + transform: rotate(-@piledDegrees); + top: 0; + z-index: -2; +} +.ui.piled.segments:after, +.ui.piled.segment:after { + transform: rotate(@piledDegrees); + top: 0; + z-index: -1; +} + +/* Piled Attached */ +.ui[class*="top attached"].piled.segment { + margin-top: @piledMargin; + margin-bottom: 0em; +} +.ui.piled.segment[class*="top attached"]:first-child { + margin-top: 0em; +} +.ui.piled.segment[class*="bottom attached"] { + margin-top: 0em; + margin-bottom: @piledMargin; +} +.ui.piled.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Stacked +--------------------*/ + +.ui.stacked.segment { + padding-bottom: @stackedPadding; +} +.ui.stacked.segments:before, +.ui.stacked.segments:after, +.ui.stacked.segment:before, +.ui.stacked.segment:after { + content: ''; + position: absolute; + bottom: -(@stackedHeight / 2); + left: 0%; + + border-top: 1px solid @borderColor; + background: @stackedPageBackground; + + width: 100%; + height: @stackedHeight; + visibility: visible; +} +.ui.stacked.segments:before, +.ui.stacked.segment:before { + display: none; +} + +/* Add additional page */ +.ui.tall.stacked.segments:before, +.ui.tall.stacked.segment:before { + display: block; + bottom: 0px; +} + +/* Inverted */ +.ui.stacked.inverted.segments:before, +.ui.stacked.inverted.segments:after, +.ui.stacked.inverted.segment:before, +.ui.stacked.inverted.segment:after { + background-color: @subtleTransparentBlack; + border-top: 1px solid @selectedBorderColor; +} + +/*------------------- + Padded +--------------------*/ + +.ui.padded.segment { + padding: @paddedSegmentPadding; +} + +.ui[class*="very padded"].segment { + padding: @veryPaddedSegmentPadding; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.segment { + display: table; +} + +/* Compact Group */ +.ui.compact.segments { + display: inline-flex; +} +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + flex: 0 1 auto; +} + +/*------------------- + Circular +--------------------*/ + +.ui.circular.segment { + display: table-cell; + padding: @circularPadding; + text-align: center; + vertical-align: middle; + border-radius: 500em; +} + +/*------------------- + Raised +--------------------*/ + +.ui.raised.segments, +.ui.raised.segment { + box-shadow: @raisedBoxShadow; +} + + +/******************************* + Groups +*******************************/ + +/* Group */ +.ui.segments { + flex-direction: column; + position: relative; + margin: @groupedMargin; + border: @groupedBorder; + box-shadow: @groupedBoxShadow; + border-radius: @groupedBorderRadius; +} +.ui.segments:first-child { + margin-top: 0em; +} +.ui.segments:last-child { + margin-bottom: 0em; +} + + +/* Nested Segment */ +.ui.segments > .segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: @groupedSegmentMargin; + width: @groupedSegmentWidth; + box-shadow: @groupedSegmentBoxShadow; + border: @groupedSegmentBorder; + border-top: @groupedSegmentDivider; +} + +.ui.segments:not(.horizontal) > .segment:first-child { + top: @attachedTopOffset; + bottom: 0px; + border-top: none; + margin-top: 0em; + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Bottom */ +.ui.segments:not(.horizontal) > .segment:last-child { + top: @attachedBottomOffset; + bottom: 0px; + margin-top: 0em; + margin-bottom: 0em; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} + + +/* Nested Group */ +.ui.segments > .ui.segments { + border-top: @groupedSegmentDivider; + margin: @nestedGroupMargin; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0em; +} + +/* Horizontal Group */ +.ui.horizontal.segments { + display: flex; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: @background; + box-shadow: @boxShadow; + margin: @margin; + border-radius: @borderRadius; + border: @border; +} + +/* Nested Horizontal Group */ +.ui.segments > .horizontal.segments { + margin: 0em; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-top: @groupedSegmentDivider; +} + +/* Horizontal Segment */ +.ui.horizontal.segments > .segment { + flex: 1 1 auto; + -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */ + margin: 0em; + min-width: 0px; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-left: @borderWidth solid @borderColor; +} + +/* Border Fixes */ +.ui.segments > .horizontal.segments:first-child { + border-top: none; +} +.ui.horizontal.segments > .segment:first-child { + border-left: none; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.segment { + opacity: @disabledOpacity; + color: @disabledTextColor; +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.segment { + position: relative; + cursor: default; + point-events: none; + text-shadow: none !important; + color: transparent !important; + transition: all 0s linear; +} +.ui.loading.segment:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + border-radius: @borderRadius; + z-index: @loaderDimmerZIndex; +} +.ui.loading.segment:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: segment-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; +} + +@keyframes segment-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.segment { + background: @basicBackground; + box-shadow: @basicBoxShadow; + border: @basicBorder; + border-radius: @basicBorderRadius; +} + +/*------------------- + Clearing +--------------------*/ + +.ui.clearing.segment:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.segment:not(.inverted) { + border-top: @coloredBorderSize solid @red; +} +.ui.inverted.red.segment { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +.ui.orange.segment:not(.inverted) { + border-top: @coloredBorderSize solid @orange; +} +.ui.inverted.orange.segment { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +.ui.yellow.segment:not(.inverted) { + border-top: @coloredBorderSize solid @yellow; +} +.ui.inverted.yellow.segment { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +.ui.olive.segment:not(.inverted) { + border-top: @coloredBorderSize solid @olive; +} +.ui.inverted.olive.segment { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: @coloredBorderSize solid @green; +} +.ui.inverted.green.segment { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: @coloredBorderSize solid @teal; +} +.ui.inverted.teal.segment { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: @coloredBorderSize solid @blue; +} +.ui.inverted.blue.segment { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: @coloredBorderSize solid @violet; +} +.ui.inverted.violet.segment { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: @coloredBorderSize solid @purple; +} +.ui.inverted.purple.segment { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: @coloredBorderSize solid @pink; +} +.ui.inverted.pink.segment { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: @coloredBorderSize solid @brown; +} +.ui.inverted.brown.segment { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: @coloredBorderSize solid @grey; +} +.ui.inverted.grey.segment { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: @coloredBorderSize solid @black; +} +.ui.inverted.black.segment { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="right aligned"].segment { + text-align: right; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.segment, +.ui[class*="left floated"].segment { + float: left; + margin-right: @floatedDistance; +} +.ui[class*="right floated"].segment { + float: right; + margin-left: @floatedDistance; +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.segment { + border: none; + box-shadow: none; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background: @invertedBackground; + color: @invertedTextColor; +} + +/* Nested */ +.ui.inverted.segment .segment { + color: @textColor; +} +.ui.inverted.segment .inverted.segment { + color: @invertedTextColor; +} + +/* Attached */ +.ui.inverted.attached.segment { + border-color: @solidWhiteBorderColor; +} + +/*------------------- + Emphasis +--------------------*/ + +/* Secondary */ +.ui.secondary.segment { + background: @secondaryBackground; + color: @secondaryColor; +} +.ui.secondary.inverted.segment { + background: @secondaryInvertedBackground; + color: @secondaryInvertedColor; +} + +/* Tertiary */ +.ui.tertiary.segment { + background: @tertiaryBackground; + color: @tertiaryColor; +} +.ui.tertiary.inverted.segment { + background: @tertiaryInvertedBackground; + color: @tertiaryInvertedColor; +} + + +/*------------------- + Attached +--------------------*/ + +/* Middle */ +.ui.attached.segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached + .ui.attached.segment:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].segment { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.segment[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui.segment[class*="bottom attached"] { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/elements/step.less b/ui/app/bower_components/semantic-ui/src/definitions/elements/step.less new file mode 100755 index 00000000..f3edd443 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/elements/step.less @@ -0,0 +1,542 @@ +/*! + * # Semantic UI - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Step +*******************************/ + +/*-------------- + Load Theme +---------------*/ + +@type : 'element'; +@element : 'step'; + +@import (multiple) '../../theme.config'; + +/******************************* + Plural +*******************************/ + +.ui.steps { + display: inline-flex; + flex-direction: row; + align-items: stretch; + margin: @stepMargin; + background: @stepsBackground; + box-shadow: @stepsBoxShadow; + line-height: @lineHeight; + border-radius: @stepsBorderRadius; + border: @stepsBorder; +} + +/* First Steps */ +.ui.steps:first-child { + margin-top: 0em; +} + +/* Last Steps */ +.ui.steps:last-child { + margin-bottom: 0em; +} + + +/******************************* + Singular +*******************************/ + +.ui.steps .step { + position: relative; + display: flex; + flex: 1 0 auto; + flex-wrap: wrap; + flex-direction: row; + vertical-align: middle; + align-items: center; + justify-content: @justifyContent; + + margin: @verticalMargin @horizontalMargin; + padding: @verticalPadding @horizontalPadding; + background: @background; + color: @textColor; + box-shadow: @boxShadow; + border-radius: @borderRadius; + border: @border; + border-right: @divider; + transition: @transition; +} + +/* Arrow */ +.ui.steps .step:after { + display: none; + position: absolute; + z-index: 2; + content: ''; + top: @arrowTopOffset; + right: @arrowRightOffset; + border: medium none; + background-color: @arrowBackgroundColor; + width: @arrowSize; + height: @arrowSize; + + border-style: solid; + border-color: @borderColor; + border-width: @arrowBorderWidth; + + transition: @transition; + transform: translateY(-50%) translateX(50%) rotate(-45deg); +} + +/* First Step */ +.ui.steps .step:first-child { + padding-left: @horizontalPadding; + border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius; +} + +/* Last Step */ +.ui.steps .step:last-child { + border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em; +} +.ui.steps .step:last-child { + border-right: none; + margin-right: 0em; +} + +/* Only Step */ +.ui.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/******************************* + Content +*******************************/ + +/* Title */ +.ui.steps .step .title { + font-family: @titleFontFamily; + font-size: @titleFontSize; + font-weight: @titleFontWeight; +} +.ui.steps .step > .title { + width: 100%; +} + +/* Description */ +.ui.steps .step .description { + font-weight: @descriptionFontWeight; + font-size: @descriptionFontSize; + color: @descriptionColor; +} +.ui.steps .step > .description { + width: 100%; +} +.ui.steps .step .title ~ .description { + margin-top: @descriptionDistance; +} + +/* Icon */ +.ui.steps .step > .icon { + line-height: 1; + font-size: @iconSize; + margin: 0em @iconDistance 0em 0em; +} +.ui.steps .step > .icon, +.ui.steps .step > .icon ~ .content { + display: block; + flex: 0 1 auto; + align-self: @iconAlign; +} +.ui.steps .step > .icon ~ .content { + flex-grow: 1 0 auto; +} + +/* Horizontal Icon */ +.ui.steps:not(.vertical) .step > .icon { + width: auto; +} + +/* Link */ +.ui.steps .link.step, +.ui.steps a.step { + cursor: pointer; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Ordered +---------------*/ + +.ui.ordered.steps { + counter-reset: ordered; +} +.ui.ordered.steps .step:before { + display: block; + position: static; + text-align: center; + content: counters(ordered, "."); + align-self: @iconAlign; + margin-right: @iconDistance; + font-size: @iconSize; + counter-increment: ordered; + font-family: @orderedFontFamily; + font-weight: @orderedFontWeight; +} + +.ui.ordered.steps .step > * { + display: block; + align-self: @iconAlign; +} + + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.steps { + display: inline-flex; + flex-direction: column; + overflow: visible; +} +.ui.vertical.steps .step { + justify-content: flex-start; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; + border-right: none; + border-bottom: @verticalDivider; +} +.ui.vertical.steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.vertical.steps .step:last-child { + border-bottom: none; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.vertical.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/* Arrow */ +.ui.vertical.steps .step:after { + display: none; +} +.ui.vertical.steps .step:after { + top: @verticalArrowTopOffset; + right: @verticalArrowRightOffset; + border-width: @verticalArrowBorderWidth; +} + +.ui.vertical.steps .step:after { + display: @verticalArrowDisplay; +} +.ui.vertical.steps .active.step:after { + display: @verticalActiveArrowDisplay; +} +.ui.vertical.steps .step:last-child:after { + display: @verticalLastArrowDisplay; +} +.ui.vertical.steps .active.step:last-child:after { + display: @verticalActiveLastArrowDisplay; +} + + +/*--------------- + Responsive +----------------*/ + +/* Mobile (Default) */ +@media only screen and (max-width: (@largestMobileScreen)) { + +.ui.steps { + display: inline-flex; + overflow: visible; + flex-direction: column; +} +.ui.steps .step { + width: 100% !important; + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; +} +.ui.steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} + +/* Arrow */ +.ui.steps .step:after { + display: none !important; +} + +/* Content */ +.ui.steps .step .content { + text-align: center; +} + +/* Icon */ +.ui.steps .step > .icon, +.ui.ordered.steps .step:before { + margin: 0em 0em @mobileIconDistance 0em; +} + +} + +/******************************* + States +*******************************/ + +/* Link Hover */ +.ui.steps .link.step:hover::after, +.ui.steps .link.step:hover, +.ui.steps a.step:hover::after, +.ui.steps a.step:hover { + background: @hoverBackground; + color: @hoverColor; +} + +/* Link Down */ +.ui.steps .link.step:active::after, +.ui.steps .link.step:active, +.ui.steps a.step:active::after, +.ui.steps a.step:active { + background: @downBackground; + color: @downColor; +} + +/* Active */ +.ui.steps .step.active { + cursor: auto; + background: @activeBackground; +} +.ui.steps .step.active:after { + background: @activeBackground; +} +.ui.steps .step.active .title { + color: @activeColor; +} +.ui.ordered.steps .step.active:before, +.ui.steps .active.step .icon { + color: @activeIconColor; +} + +/* Active Arrow */ +.ui.steps .step:after { + display: @arrowDisplay; +} +.ui.steps .active.step:after { + display: @activeArrowDisplay; +} +.ui.steps .step:last-child:after { + display: @lastArrowDisplay; +} +.ui.steps .active.step:last-child:after { + display: @activeLastArrowDisplay; +} + +/* Active Hover */ +.ui.steps .link.active.step:hover::after, +.ui.steps .link.active.step:hover, +.ui.steps a.active.step:hover::after, +.ui.steps a.active.step:hover { + cursor: pointer; + background: @activeHoverBackground; + color: @activeHoverColor; +} + +/* Completed */ +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + color: @completedColor; +} + +/* Disabled */ +.ui.steps .disabled.step { + cursor: auto; + background: @disabledBackground; + pointer-events: none; +} +.ui.steps .disabled.step, +.ui.steps .disabled.step .title, +.ui.steps .disabled.step .description { + color: @disabledColor; +} +.ui.steps .disabled.step:after { + background: @disabledBackground; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + +/* Tablet Or Below */ +@media only screen and (max-width: @largestTabletScreen) { + +.ui[class*="tablet stackable"].steps { + display: inline-flex; + overflow: visible; + flex-direction: column; +} + +/* Steps */ +.ui[class*="tablet stackable"].steps .step { + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; +} +.ui[class*="tablet stackable"].steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui[class*="tablet stackable"].steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} + +/* Arrow */ +.ui[class*="tablet stackable"].steps .step:after { + display: none !important; +} + +/* Content */ +.ui[class*="tablet stackable"].steps .step .content { + text-align: center; +} + +/* Icon */ +.ui[class*="tablet stackable"].steps .step > .icon, +.ui[class*="tablet stackable"].ordered.steps .step:before { + margin: 0em 0em @mobileIconDistance 0em; +} + +} + +/*-------------- + Fluid +---------------*/ + +/* Fluid */ +.ui.fluid.steps { + display: flex; + width: 100%; +} + +/*-------------- + Attached +---------------*/ + +/* Top */ +.ui.attached.steps { + width: @attachedWidth !important; + margin: 0em @attachedHorizontalOffset @attachedVerticalOffset; + max-width: @attachedWidth; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.attached.steps .step:first-child { + border-radius: @stepsBorderRadius 0em 0em 0em; +} +.ui.attached.steps .step:last-child { + border-radius: 0em @stepsBorderRadius 0em 0em; +} + +/* Bottom */ +.ui.bottom.attached.steps { + margin: @attachedVerticalOffset @attachedHorizontalOffset 0em; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:first-child { + border-radius: 0em 0em 0em @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius 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 { + width: 100%; +} +.ui.one.steps > .step, +.ui.two.steps > .step, +.ui.three.steps > .step, +.ui.four.steps > .step, +.ui.five.steps > .step, +.ui.six.steps > .step, +.ui.seven.steps > .step, +.ui.eight.steps > .step { + flex-wrap: nowrap; +} +.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: @small; +} +.ui.step, +.ui.steps .step { + font-size: @medium; +} +.ui.large.step, +.ui.large.steps .step { + font-size: @large; +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/globals/reset.less b/ui/app/bower_components/semantic-ui/src/definitions/globals/reset.less new file mode 100755 index 00000000..7aa61f1c --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/globals/reset.less @@ -0,0 +1,41 @@ +/*! + * # Semantic UI - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'reset'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reset +*******************************/ + +/* Border-Box */ +*, +*:before, +*:after { + box-sizing: inherit; +} +html { + box-sizing: border-box; +} + +/* iPad Input Shadows */ +input[type="text"], input[type="email"], input[type="search"], input[type="password"] { + -webkit-appearance: none; + -moz-appearance: none; /* mobile firefox too! */ +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/ui/app/bower_components/semantic-ui/src/definitions/globals/site.js b/ui/app/bower_components/semantic-ui/src/definitions/globals/site.js new file mode 100644 index 00000000..bf861c7c --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/globals/site.js @@ -0,0 +1,487 @@ +/*! + * # Semantic UI - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +;(function ( $, window, document, undefined ) { + +$.site = $.fn.site = function(parameters) { + var + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.site.settings, parameters) + : $.extend({}, $.site.settings), + + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $document = $(document), + $module = $document, + element = this, + instance = $module.data(moduleNamespace), + + module, + returnedValue + ; + module = { + + initialize: function() { + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of site', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + normalize: function() { + module.fix.console(); + module.fix.requestAnimationFrame(); + }, + + fix: { + console: function() { + module.debug('Normalizing window.console'); + if (console === undefined || console.log === undefined) { + module.verbose('Console not available, normalizing events'); + module.disable.console(); + } + if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') { + module.verbose('Console group not available, normalizing events'); + window.console.group = function() {}; + window.console.groupEnd = function() {}; + window.console.groupCollapsed = function() {}; + } + if (typeof console.markTimeline == 'undefined') { + module.verbose('Mark timeline not available, normalizing events'); + window.console.markTimeline = function() {}; + } + }, + consoleClear: function() { + module.debug('Disabling programmatic console clearing'); + window.console.clear = function() {}; + }, + requestAnimationFrame: function() { + module.debug('Normalizing requestAnimationFrame'); + if(window.requestAnimationFrame === undefined) { + module.debug('RequestAnimationFrame not available, normalizing event'); + window.requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); } + ; + } + } + }, + + moduleExists: function(name) { + return ($.fn[name] !== undefined && $.fn[name].settings !== undefined); + }, + + enabled: { + modules: function(modules) { + var + enabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(module.moduleExists(name)) { + enabledModules.push(name); + } + }); + return enabledModules; + } + }, + + disabled: { + modules: function(modules) { + var + disabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(!module.moduleExists(name)) { + disabledModules.push(name); + } + }); + return disabledModules; + } + }, + + change: { + setting: function(setting, value, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? (modules === 'all') + ? settings.modules + : [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + namespace = (module.moduleExists(name)) + ? $.fn[name].settings.namespace || false + : true, + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', setting, value, name); + $.fn[name].settings[setting] = value; + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', setting, value); + } + } + } + }); + }, + settings: function(newSettings, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', newSettings, name); + $.extend(true, $.fn[name].settings, newSettings); + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', newSettings); + } + } + } + }); + } + }, + + enable: { + console: function() { + module.console(true); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling debug for modules', modules); + module.change.setting('debug', true, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling verbose debug for modules', modules); + module.change.setting('verbose', true, modules, modifyExisting); + } + }, + disable: { + console: function() { + module.console(false); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling debug for modules', modules); + module.change.setting('debug', false, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling verbose debug for modules', modules); + module.change.setting('verbose', false, modules, modifyExisting); + } + }, + + console: function(enable) { + if(enable) { + if(instance.cache.console === undefined) { + module.error(error.console); + return; + } + module.debug('Restoring console function'); + window.console = instance.cache.console; + } + else { + module.debug('Disabling console function'); + instance.cache.console = window.console; + window.console = { + clear : function(){}, + error : function(){}, + group : function(){}, + groupCollapsed : function(){}, + groupEnd : function(){}, + info : function(){}, + log : function(){}, + markTimeline : function(){}, + warn : function(){} + }; + } + }, + + destroy: function() { + module.verbose('Destroying previous site for', $module); + $module + .removeData(moduleNamespace) + ; + }, + + cache: {}, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.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, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.site.settings = { + + name : 'Site', + namespace : 'site', + + error : { + console : 'Console cannot be restored, most likely it was overwritten outside of module', + method : 'The method you called is not defined.' + }, + + debug : false, + verbose : false, + performance : true, + + modules: [ + 'accordion', + 'api', + 'checkbox', + 'dimmer', + 'dropdown', + 'embed', + 'form', + 'modal', + 'nag', + 'popup', + 'rating', + 'shape', + 'sidebar', + 'state', + 'sticky', + 'tab', + 'transition', + 'visit', + 'visibility' + ], + + siteNamespace : 'site', + namespaceStub : { + cache : {}, + config : {}, + sections : {}, + section : {}, + utilities : {} + } + +}; + +// allows for selection of elements with data attributes +$.extend($.expr[ ":" ], { + data: ($.expr.createPseudo) + ? $.expr.createPseudo(function(dataName) { + return function(elem) { + return !!$.data(elem, dataName); + }; + }) + : function(elem, i, match) { + // support: jQuery < 1.8 + return !!$.data(elem, match[ 3 ]); + } +}); + + +})( jQuery, window, document ); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/globals/site.less b/ui/app/bower_components/semantic-ui/src/definitions/globals/site.less new file mode 100755 index 00000000..c4a1aa6c --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/globals/site.less @@ -0,0 +1,167 @@ +/*! + * # Semantic UI - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'site'; + +@import (multiple) '../../theme.config'; + +/******************************* + Page +*******************************/ + +.loadFonts(); + +html, +body { + height: 100%; +} + +html { + font-size: @emSize; +} + +body { + margin: 0px; + padding: 0px; + overflow-x: @pageOverflowX; + min-width: @pageMinWidth; + background: @pageBackground; + font-family: @pageFont; + font-size: @fontSize; + line-height: @lineHeight; + color: @textColor; + font-smoothing: @fontSmoothing; +} + + + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: @headerFont; + line-height: @headerLineHeight; + margin: @headerMargin; + font-weight: @headerFontWeight; + padding: 0em; +} + +h1 { + min-height: 1rem; + font-size: @h1; +} +h2 { + font-size: @h2; +} +h3 { + font-size: @h3; +} +h4 { + font-size: @h4; +} +h5 { + font-size: @h5; +} + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child { + margin-top: 0em; +} + +h1:last-child, +h2:last-child, +h3:last-child, +h4:last-child, +h5:last-child { + margin-bottom: 0em; +} + + +/******************************* + Text +*******************************/ + +p { + margin: @paragraphMargin; + line-height: @paragraphLineHeight; +} +p:first-child { + margin-top: 0em; +} +p:last-child { + margin-bottom: 0em; +} + +/*------------------- + Links +--------------------*/ + +a { + color: @linkColor; + text-decoration: @linkUnderline; +} +a:hover { + color: @linkHoverColor; + text-decoration: @linkHoverUnderline; +} + + +/******************************* + Highlighting +*******************************/ + +/* Site */ +::-webkit-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::-moz-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::selection { + background-color: @highlightBackground; + color: @highlightColor; +} + +/* Form */ +textarea::-webkit-selection, +input::-webkit-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::-moz-selection, +input::-moz-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::selection, +input::selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} + + +.loadUIOverrides(); diff --git a/ui/app/bower_components/semantic-ui/src/definitions/modules/accordion.js b/ui/app/bower_components/semantic-ui/src/definitions/modules/accordion.js new file mode 100644 index 00000000..79545a3b --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/modules/accordion.js @@ -0,0 +1,596 @@ +/*! + * # Semantic UI - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.fn.accordion = function(parameters) { + var + $allModules = $(this), + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.accordion.settings, parameters) + : $.extend({}, $.fn.accordion.settings), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + $module = $(this), + $title = $module.find(selector.title), + $content = $module.find(selector.content), + + element = this, + instance = $module.data(moduleNamespace), + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', $module); + module.bind.events(); + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying previous instance', $module); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + $title = $module.find(selector.title); + $content = $module.find(selector.content); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.debug('Binding delegated events'); + $module + .on(settings.on + eventNamespace, selector.trigger, module.event.click) + ; + } + }, + + event: { + click: function() { + module.toggle.call(this); + } + }, + + toggle: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive && !isAnimating), + isOpening = (!isActive && isAnimating) + ; + module.debug('Toggling visibility of content', $activeTitle); + if(isOpen || isOpening) { + if(settings.collapsible) { + module.close.call($activeTitle); + } + else { + module.debug('Cannot close accordion content collapsing is disabled'); + } + } + else { + module.open.call($activeTitle); + } + }, + + open: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive || isAnimating) + ; + if(isOpen) { + module.debug('Accordion already open, skipping', $activeContent); + return; + } + module.debug('Opening accordion content', $activeTitle); + settings.onOpening.call($activeContent); + if(settings.exclusive) { + module.closeOthers.call($activeTitle); + } + $activeTitle + .addClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade in', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 1 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideDown(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .addClass(className.active) + ; + module.reset.display.call(this); + settings.onOpen.call(this); + settings.onChange.call(this); + }) + ; + }, + + close: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpening = (!isActive && isAnimating), + isClosing = (isActive && isAnimating) + ; + if((isActive || isOpening) && !isClosing) { + module.debug('Closing accordion content', $activeContent); + settings.onClosing.call($activeContent); + $activeTitle + .removeClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade out', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideUp(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .removeClass(className.active) + ; + module.reset.display.call(this); + settings.onClose.call(this); + settings.onChange.call(this); + }) + ; + } + }, + + closeOthers: function(index) { + var + $activeTitle = (index !== undefined) + ? $title.eq(index) + : $(this).closest(selector.title), + $parentTitles = $activeTitle.parents(selector.content).prev(selector.title), + $activeAccordion = $activeTitle.closest(selector.accordion), + activeSelector = selector.title + '.' + className.active + ':visible', + activeContent = selector.content + '.' + className.active + ':visible', + $openTitles, + $nestedTitles, + $openContents + ; + if(settings.closeNested) { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $openContents = $openTitles.next($content); + } + else { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles); + $openTitles = $openTitles.not($nestedTitles); + $openContents = $openTitles.next($content); + } + if( ($openTitles.length > 0) ) { + module.debug('Exclusive enabled, closing other content', $openTitles); + $openTitles + .removeClass(className.active) + ; + $openContents + .removeClass(className.animating) + .stop(true, true) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $openContents + .children() + .transition({ + animation : 'fade out', + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $openContents + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $openContents + .slideUp(settings.duration , settings.easing, function() { + $(this).removeClass(className.active); + module.reset.display.call(this); + }) + ; + } + }, + + reset: { + + display: function() { + module.verbose('Removing inline display from element', this); + $(this).css('display', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + opacity: function() { + module.verbose('Removing inline opacity from element', this); + $(this).css('opacity', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + 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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.accordion.settings = { + + name : 'Accordion', + namespace : 'accordion', + + debug : false, + verbose : false, + performance : true, + + on : 'click', // event on title that opens accordion + + observeChanges : true, // whether accordion should automatically refresh on DOM insertion + + exclusive : true, // whether a single accordion content panel should be open at once + collapsible : true, // whether accordion content can be closed + closeNested : false, // whether nested content should be closed when a panel is closed + animateChildren : true, // whether children opacity should be animated + + duration : 350, // duration of animation + easing : 'easeOutQuad', // easing equation for animation + + + onOpening : function(){}, // callback before open animation + onOpen : function(){}, // callback after open animation + onClosing : function(){}, // callback before closing animation + onClose : function(){}, // callback after closing animation + onChange : function(){}, // callback after closing or opening animation + + error: { + method : 'The method you called is not defined' + }, + + className : { + active : 'active', + animating : 'animating' + }, + + selector : { + accordion : '.accordion', + title : '.title', + trigger : '.title', + content : '.content' + } + +}; + +// Adds easing +$.extend( $.easing, { + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } +}); + +})( jQuery, window, document ); + diff --git a/ui/app/bower_components/semantic-ui/src/definitions/modules/accordion.less b/ui/app/bower_components/semantic-ui/src/definitions/modules/accordion.less new file mode 100755 index 00000000..6c306ea6 --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/modules/accordion.less @@ -0,0 +1,220 @@ +/*! + * # Semantic UI - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'accordion'; + +@import (multiple) '../../theme.config'; + +/******************************* + Accordion +*******************************/ + +.ui.accordion, +.ui.accordion .accordion { + max-width: 100%; +} +.ui.accordion .accordion { + margin: @childAccordionMargin; + padding: @childAccordionPadding; +} + +/* Title */ +.ui.accordion .title, +.ui.accordion .accordion .title { + cursor: pointer; +} + +/* Default Styling */ +.ui.accordion .title:not(.ui) { + padding: @titlePadding; + font-family: @titleFont; + font-size: @titleFontSize; + color: @titleColor; +} + +/* Content */ +.ui.accordion .title ~ .content, +.ui.accordion .accordion .title ~ .content { + display: none; +} + +/* Default Styling */ +.ui.accordion:not(.styled) .title ~ .content:not(.ui), +.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { + margin: @contentMargin; + padding: @contentPadding; +} +.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { + padding-bottom: 0em; +} + +/* Arrow */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + display: @iconDisplay; + float: @iconFloat; + opacity: @iconOpacity; + width: @iconWidth; + height: @iconHeight; + margin: @iconMargin; + padding: @iconPadding; + font-size: @iconFontSize; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + transform: @iconTransform; +} + +/*-------------- + Coupling +---------------*/ + +/* Menu */ +.ui.accordion.menu .item .title { + display: block; + padding: @menuTitlePadding; +} +.ui.accordion.menu .item .title > .dropdown.icon { + float: @menuIconFloat; + margin: @menuIconMargin; + transform: @menuIconTransform; +} + +/* Header */ +.ui.accordion .ui.header .dropdown.icon { + font-size: @iconFontSize; + margin: @iconMargin; +} + +/******************************* + States +*******************************/ + +.ui.accordion .active.title .dropdown.icon, +.ui.accordion .accordion .active.title .dropdown.icon { + transform: @activeIconTransform; +} + +.ui.accordion.menu .item .active.title > .dropdown.icon { + transform: @activeIconTransform; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Styled +---------------*/ + +.ui.styled.accordion { + width: @styledWidth; +} + +.ui.styled.accordion, +.ui.styled.accordion .accordion { + border-radius: @styledBorderRadius; + background: @styledBackground; + box-shadow: @styledBoxShadow; +} +.ui.styled.accordion .title, +.ui.styled.accordion .accordion .title { + margin: @styledTitleMargin; + padding: @styledTitlePadding; + color: @styledTitleColor; + font-weight: @styledTitleFontWeight; + border-top: @styledTitleBorder; + transition: @styledTitleTransition; +} +.ui.styled.accordion > .title:first-child, +.ui.styled.accordion .accordion .title:first-child { + border-top: none; +} + + +/* Content */ +.ui.styled.accordion .content, +.ui.styled.accordion .accordion .content { + margin: @styledContentMargin; + padding: @styledContentPadding; +} +.ui.styled.accordion .accordion .content { + padding: @styledChildContentMargin; + padding: @styledChildContentPadding; +} + + +/* Hover */ +.ui.styled.accordion .title:hover, +.ui.styled.accordion .active.title, +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledTitleHoverBackground; + color: @styledTitleHoverColor; +} +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledHoverChildTitleBackground; + color: @styledHoverChildTitleColor; +} + + +/* Active */ +.ui.styled.accordion .active.title { + background: @styledActiveTitleBackground; + color: @styledActiveTitleColor; +} +.ui.styled.accordion .accordion .active.title { + background: @styledActiveChildTitleBackground; + color: @styledActiveChildTitleColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Active +---------------*/ + +.ui.accordion .active.content, +.ui.accordion .accordion .active.content { + display: block; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.accordion, +.ui.fluid.accordion .accordion { + width: 100%; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.accordion .title:not(.ui) { + color: @invertedTitleColor; +} + +.loadUIOverrides(); + diff --git a/ui/app/bower_components/semantic-ui/src/definitions/modules/checkbox.js b/ui/app/bower_components/semantic-ui/src/definitions/modules/checkbox.js new file mode 100644 index 00000000..257aac6d --- /dev/null +++ b/ui/app/bower_components/semantic-ui/src/definitions/modules/checkbox.js @@ -0,0 +1,809 @@ +/*! + * # Semantic UI - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.checkbox = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = $.extend(true, {}, $.fn.checkbox.settings, parameters), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $label = $(this).children(selector.label), + $input = $(this).children(selector.input), + input = $input[0], + + initialLoad = false, + shortcutPressed = false, + instance = $module.data(moduleNamespace), + + observer, + element = this, + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing checkbox', settings); + + module.create.label(); + module.bind.events(); + + module.set.tabbable(); + module.hide.input(); + + module.observeChanges(); + module.instantiate(); + module.setup(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying module'); + module.unbind.events(); + module.show.input(); + $module.removeData(moduleNamespace); + }, + + fix: { + reference: function() { + if( $module.is(selector.input) ) { + module.debug('Behavior called on adjusting invoked element'); + $module = $module.closest(selector.checkbox); + module.refresh(); + } + } + }, + + setup: function() { + module.set.initialLoad(); + if( module.is.indeterminate() ) { + module.debug('Initial value is indeterminate'); + module.indeterminate(); + } + else if( module.is.checked() ) { + module.debug('Initial value is checked'); + module.check(); + } + else { + module.debug('Initial value is unchecked'); + module.uncheck(); + } + module.remove.initialLoad(); + }, + + refresh: function() { + $label = $module.children(selector.label); + $input = $module.children(selector.input); + input = $input[0]; + }, + + hide: { + input: function() { + module.verbose('Modfying z-index to be unselectable'); + $input.addClass(className.hidden); + } + }, + show: { + input: function() { + module.verbose('Modfying z-index to be selectable'); + $input.removeClass(className.hidden); + } + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + attachEvents: function(selector, event) { + var + $element = $(selector) + ; + event = $.isFunction(module[event]) + ? module[event] + : module.toggle + ; + if($element.length > 0) { + module.debug('Attaching checkbox events to element', selector, event); + $element + .on('click' + eventNamespace, event) + ; + } + else { + module.error(error.notFound); + } + }, + + event: { + click: function(event) { + var + $target = $(event.target) + ; + if( $target.is(selector.input) ) { + module.verbose('Using default check action on initialized checkbox'); + return; + } + if( $target.is(selector.link) ) { + module.debug('Clicking link inside checkbox, skipping toggle'); + return; + } + module.toggle(); + $input.focus(); + event.preventDefault(); + }, + keydown: function(event) { + var + key = event.which, + keyCode = { + enter : 13, + space : 32, + escape : 27 + } + ; + if(key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $input.blur(); + shortcutPressed = true; + } + else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) { + module.verbose('Enter/space key pressed, toggling checkbox'); + module.toggle(); + shortcutPressed = true; + } + else { + shortcutPressed = false; + } + }, + keyup: function(event) { + if(shortcutPressed) { + event.preventDefault(); + } + } + }, + + check: function() { + if( !module.should.allowCheck() ) { + return; + } + module.debug('Checking checkbox', $input); + module.set.checked(); + if( !module.should.ignoreCallbacks() ) { + settings.onChecked.call(input); + settings.onChange.call(input); + } + }, + + uncheck: function() { + if( !module.should.allowUncheck() ) { + return; + } + module.debug('Unchecking checkbox'); + module.set.unchecked(); + if( !module.should.ignoreCallbacks() ) { + settings.onUnchecked.call(input); + settings.onChange.call(input); + } + }, + + indeterminate: function() { + if( module.should.allowIndeterminate() ) { + module.debug('Checkbox is already indeterminate'); + return; + } + module.debug('Making checkbox indeterminate'); + module.set.indeterminate(); + if( !module.should.ignoreCallbacks() ) { + settings.onIndeterminate.call(input); + settings.onChange.call(input); + } + }, + + determinate: function() { + if( module.should.allowDeterminate() ) { + module.debug('Checkbox is already determinate'); + return; + } + module.debug('Making checkbox determinate'); + module.set.determinate(); + if( !module.should.ignoreCallbacks() ) { + settings.onDeterminate.call(input); + settings.onChange.call(input); + } + }, + + enable: function() { + if( module.is.enabled() ) { + module.debug('Checkbox is already enabled'); + return; + } + module.debug('Enabling checkbox'); + module.set.enabled(); + settings.onEnabled.call(input); + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + settings.onDisabled.call(input); + }, + + get: { + radios: function() { + var + name = module.get.name() + ; + return $('input[name="' + name + '"]').closest(selector.checkbox); + }, + otherRadios: function() { + return module.get.radios().not($module); + }, + name: function() { + return $input.attr('name'); + } + }, + + is: { + initialLoad: function() { + return initialLoad; + }, + radio: function() { + return ($input.hasClass(className.radio) || $input.attr('type') == 'radio'); + }, + indeterminate: function() { + return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate'); + }, + checked: function() { + return $input.prop('checked') !== undefined && $input.prop('checked'); + }, + disabled: function() { + return $input.prop('disabled') !== undefined && $input.prop('disabled'); + }, + enabled: function() { + return !module.is.disabled(); + }, + determinate: function() { + return !module.is.indeterminate(); + }, + unchecked: function() { + return !module.is.checked(); + } + }, + + should: { + allowCheck: function() { + if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow check, checkbox is already checked'); + return false; + } + if(settings.beforeChecked.apply(input) === false) { + module.debug('Should not allow check, beforeChecked cancelled'); + return false; + } + return true; + }, + allowUncheck: function() { + if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow uncheck, checkbox is already unchecked'); + return false; + } + if(settings.beforeUnchecked.apply(input) === false) { + module.debug('Should not allow uncheck, beforeUnchecked cancelled'); + return false; + } + return true; + }, + allowIndeterminate: function() { + if(module.is.indeterminate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow indeterminate, checkbox is already indeterminate'); + return false; + } + if(settings.beforeIndeterminate.apply(input) === false) { + module.debug('Should not allow indeterminate, beforeIndeterminate cancelled'); + return false; + } + return true; + }, + allowDeterminate: function() { + if(module.is.determinate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow determinate, checkbox is already determinate'); + return false; + } + if(settings.beforeDeterminate.apply(input) === false) { + module.debug('Should not allow determinate, beforeDeterminate cancelled'); + return false; + } + return true; + }, + forceCallbacks: function() { + return (module.is.initialLoad() && settings.fireOnInit); + }, + ignoreCallbacks: function() { + return (initialLoad && !settings.fireOnInit); + } + }, + + can: { + change: function() { + return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); + }, + uncheck: function() { + return (typeof settings.uncheckable === 'boolean') + ? settings.uncheckable + : !module.is.radio() + ; + } + }, + + set: { + initialLoad: function() { + initialLoad = true; + }, + checked: function() { + module.verbose('Setting class to checked'); + $module + .removeClass(className.indeterminate) + .addClass(className.checked) + ; + if( module.is.radio() ) { + module.uncheckOthers(); + } + if(!module.is.indeterminate() && module.is.checked()) { + module.debug('Input is already checked, skipping input property change'); + return; + } + module.verbose('Setting state to checked', input); + $input + .prop('indeterminate', false) + .prop('checked', true) + ; + module.trigger.change(); + }, + unchecked: function() { + module.verbose('Removing checked class'); + $module + .removeClass(className.indeterminate) + .removeClass(className.checked) + ; + if(!module.is.indeterminate() && module.is.unchecked() ) { + module.debug('Input is already unchecked'); + return; + } + module.debug('Setting state to unchecked'); + $input + .prop('indeterminate', false) + .prop('checked', false) + ; + module.trigger.change(); + }, + indeterminate: function() { + module.verbose('Setting class to indeterminate'); + $module + .addClass(className.indeterminate) + ; + if( module.is.indeterminate() ) { + module.debug('Input is already indeterminate, skipping input property change'); + return; + } + module.debug('Setting state to indeterminate'); + $input + .prop('indeterminate', true) + ; + module.trigger.change(); + }, + determinate: function() { + module.verbose('Removing indeterminate class'); + $module + .removeClass(className.indeterminate) + ; + if( module.is.determinate() ) { + module.debug('Input is already determinate, skipping input property change'); + return; + } + module.debug('Setting state to determinate'); + $input + .prop('indeterminate', false) + ; + }, + disabled: function() { + module.verbose('Setting class to disabled'); + $module + .addClass(className.disabled) + ; + if( module.is.disabled() ) { + module.debug('Input is already disabled, skipping input property change'); + return; + } + module.debug('Setting state to disabled'); + $input + .prop('disabled', 'disabled') + ; + module.trigger.change(); + }, + enabled: function() { + module.verbose('Removing disabled class'); + $module.removeClass(className.disabled); + if( module.is.enabled() ) { + module.debug('Input is already enabled, skipping input property change'); + return; + } + module.debug('Setting state to enabled'); + $input + .prop('disabled', false) + ; + module.trigger.change(); + }, + tabbable: function() { + module.verbose('Adding tabindex to checkbox'); + if( $input.attr('tabindex') === undefined) { + $input.attr('tabindex', 0); + } + } + }, + + remove: { + initialLoad: function() { + initialLoad = false; + } + }, + + trigger: { + change: function() { + var + events = document.createEvent('HTMLEvents'), + inputElement = $input[0] + ; + if(inputElement) { + module.verbose('Triggering native change event'); + events.initEvent('change', true, false); + inputElement.dispatchEvent(events); + } + } + }, + + + create: { + label: function() { + if($input.prevAll(selector.label).length > 0) { + $input.prev(selector.label).detach().insertAfter($input); + module.debug('Moving existing label', $label); + } + else if( !module.has.label() ) { + $label = $('