[ { "path": ".gitignore", "content": "## Ignore Visual Studio temporary files, build results, and\n## files generated by popular Visual Studio add-ons.\n##\n## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore\n\n# User-specific files\n*.suo\n*.user\n*.userosscache\n*.sln.docstates\n\n# User-specific files (MonoDevelop/Xamarin Studio)\n*.userprefs\n\n# Build results\n[Dd]ebug/\n[Dd]ebugPublic/\n[Rr]elease/\n[Rr]eleases/\nx64/\nx86/\nbld/\n[Bb]in/\n[Oo]bj/\n[Ll]og/\n\n# Visual Studio 2015/2017 cache/options directory\n.vs/\n# Uncomment if you have tasks that create the project's static files in wwwroot\n#wwwroot/\n\n# Visual Studio 2017 auto generated files\nGenerated\\ Files/\n\n# MSTest test Results\n[Tt]est[Rr]esult*/\n[Bb]uild[Ll]og.*\n\n# NUNIT\n*.VisualState.xml\nTestResult.xml\n\n# Build Results of an ATL Project\n[Dd]ebugPS/\n[Rr]eleasePS/\ndlldata.c\n\n# Benchmark Results\nBenchmarkDotNet.Artifacts/\n\n# .NET Core\nproject.lock.json\nproject.fragment.lock.json\nartifacts/\n**/Properties/launchSettings.json\n\n# StyleCop\nStyleCopReport.xml\n\n# Files built by Visual Studio\n*_i.c\n*_p.c\n*_i.h\n*.ilk\n*.meta\n*.obj\n*.iobj\n*.pch\n*.pdb\n*.ipdb\n*.pgc\n*.pgd\n*.rsp\n*.sbr\n*.tlb\n*.tli\n*.tlh\n*.tmp\n*.tmp_proj\n*.log\n*.vspscc\n*.vssscc\n.builds\n*.pidb\n*.svclog\n*.scc\n\n# Chutzpah Test files\n_Chutzpah*\n\n# Visual C++ cache files\nipch/\n*.aps\n*.ncb\n*.opendb\n*.opensdf\n*.sdf\n*.cachefile\n*.VC.db\n*.VC.VC.opendb\n\n# Visual Studio profiler\n*.psess\n*.vsp\n*.vspx\n*.sap\n\n# Visual Studio Trace Files\n*.e2e\n\n# TFS 2012 Local Workspace\n$tf/\n\n# Guidance Automation Toolkit\n*.gpState\n\n# ReSharper is a .NET coding add-in\n_ReSharper*/\n*.[Rr]e[Ss]harper\n*.DotSettings.user\n\n# JustCode is a .NET coding add-in\n.JustCode\n\n# TeamCity is a build add-in\n_TeamCity*\n\n# DotCover is a Code Coverage Tool\n*.dotCover\n\n# AxoCover is a Code Coverage Tool\n.axoCover/*\n!.axoCover/settings.json\n\n# Visual Studio code coverage results\n*.coverage\n*.coveragexml\n\n# NCrunch\n_NCrunch_*\n.*crunch*.local.xml\nnCrunchTemp_*\n\n# MightyMoose\n*.mm.*\nAutoTest.Net/\n\n# Web workbench (sass)\n.sass-cache/\n\n# Installshield output folder\n[Ee]xpress/\n\n# DocProject is a documentation generator add-in\nDocProject/buildhelp/\nDocProject/Help/*.HxT\nDocProject/Help/*.HxC\nDocProject/Help/*.hhc\nDocProject/Help/*.hhk\nDocProject/Help/*.hhp\nDocProject/Help/Html2\nDocProject/Help/html\n\n# Click-Once directory\npublish/\n\n# Publish Web Output\n*.[Pp]ublish.xml\n*.azurePubxml\n# Note: Comment the next line if you want to checkin your web deploy settings,\n# but database connection strings (with potential passwords) will be unencrypted\n*.pubxml\n*.publishproj\n\n# Microsoft Azure Web App publish settings. Comment the next line if you want to\n# checkin your Azure Web App publish settings, but sensitive information contained\n# in these scripts will be unencrypted\nPublishScripts/\n\n# NuGet Packages\n*.nupkg\n# The packages folder can be ignored because of Package Restore\n**/[Pp]ackages/*\n# except build/, which is used as an MSBuild target.\n!**/[Pp]ackages/build/\n# Uncomment if necessary however generally it will be regenerated when needed\n#!**/[Pp]ackages/repositories.config\n# NuGet v3's project.json files produces more ignorable files\n*.nuget.props\n*.nuget.targets\n\n# Microsoft Azure Build Output\ncsx/\n*.build.csdef\n\n# Microsoft Azure Emulator\necf/\nrcf/\n\n# Windows Store app package directories and files\nAppPackages/\nBundleArtifacts/\nPackage.StoreAssociation.xml\n_pkginfo.txt\n*.appx\n\n# Visual Studio cache files\n# files ending in .cache can be ignored\n*.[Cc]ache\n# but keep track of directories ending in .cache\n!*.[Cc]ache/\n\n# Others\nClientBin/\n~$*\n*~\n*.dbmdl\n*.dbproj.schemaview\n*.jfm\n*.pfx\n*.publishsettings\norleans.codegen.cs\n\n# Including strong name files can present a security risk \n# (https://github.com/github/gitignore/pull/2483#issue-259490424)\n#*.snk\n\n# Since there are multiple workflows, uncomment next line to ignore bower_components\n# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)\n#bower_components/\n\n# RIA/Silverlight projects\nGenerated_Code/\n\n# Backup & report files from converting an old project file\n# to a newer Visual Studio version. Backup files are not needed,\n# because we have git ;-)\n_UpgradeReport_Files/\nBackup*/\nUpgradeLog*.XML\nUpgradeLog*.htm\nServiceFabricBackup/\n*.rptproj.bak\n\n# SQL Server files\n*.mdf\n*.ldf\n*.ndf\n\n# Business Intelligence projects\n*.rdl.data\n*.bim.layout\n*.bim_*.settings\n*.rptproj.rsuser\n\n# Microsoft Fakes\nFakesAssemblies/\n\n# GhostDoc plugin setting file\n*.GhostDoc.xml\n\n# Node.js Tools for Visual Studio\n.ntvs_analysis.dat\nnode_modules/\n\n# Visual Studio 6 build log\n*.plg\n\n# Visual Studio 6 workspace options file\n*.opt\n\n# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)\n*.vbw\n\n# Visual Studio LightSwitch build output\n**/*.HTMLClient/GeneratedArtifacts\n**/*.DesktopClient/GeneratedArtifacts\n**/*.DesktopClient/ModelManifest.xml\n**/*.Server/GeneratedArtifacts\n**/*.Server/ModelManifest.xml\n_Pvt_Extensions\n\n# Paket dependency manager\n.paket/paket.exe\npaket-files/\n\n# FAKE - F# Make\n.fake/\n\n# JetBrains Rider\n.idea/\n*.sln.iml\n\n# CodeRush\n.cr/\n\n# Python Tools for Visual Studio (PTVS)\n__pycache__/\n*.pyc\n\n# Cake - Uncomment if you are using it\n# tools/**\n# !tools/packages.config\n\n# Tabs Studio\n*.tss\n\n# Telerik's JustMock configuration file\n*.jmconfig\n\n# BizTalk build output\n*.btp.cs\n*.btm.cs\n*.odx.cs\n*.xsd.cs\n\n# OpenCover UI analysis results\nOpenCover/\n\n# Azure Stream Analytics local run output \nASALocalRun/\n\n# MSBuild Binary and Structured Log\n*.binlog\n\n# NVidia Nsight GPU debugger configuration file\n*.nvuser\n\n# MFractors (Xamarin productivity tool) working folder \n.mfractor/\n" }, { "path": "LICENSE", "content": " MIT License\n\n Copyright (c) Microsoft Corporation. All rights reserved.\n\n Permission is hereby granted, free of charge, to any person obtaining a copy\n of this software and associated documentation files (the \"Software\"), to deal\n in the Software without restriction, including without limitation the rights\n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the Software is\n furnished to do so, subject to the following conditions:\n\n The above copyright notice and this permission notice shall be included in all\n copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n SOFTWARE\n" }, { "path": "README.md", "content": "# Phippy and Friends\n\nThe [Children's Guide to Kubernetes](https://azure.microsoft.com/en-us/resources/videos/the-illustrated-children-s-guide-to-kubernetes/) is a simple, gentle answer a father gives his daughter, when she inquisitively asked about Kubernetes. It was written by [Matt](https://twitter.com/technosophos) [Butcher](http://technosophos.com/) on the [DEIS blog](https://deis.com/blog/2016/kubernetes-illustrated-guide/).\n\nWe loved the story and the imagery in it and thought the characters from the Illustrated Guide would make for an interesting demo. The demo has a few services, each of which represent an individual character in the story, as well as some we added. Each service is written in a different language, showing how the [Azure Kubernetes Service (AKS)](https://azure.microsoft.com/en-us/services/kubernetes-service/) cluster can run anything you can bring it. \n\n## Table of Contents\n1. [Prerequisites](#prerequisites)\n1. [Getting Started](#get-started)\n 1. [Clone and open the code](#clone-and-open-the-code)\n 1. [Get your public URL](#get-your-aks-ingress-url)\n 1. [Connect to your Azure Container Registry](#connect-to-your-registry)\n 1. [Deploy with Helm and Draft](#deploy-parrot-and-captain-kube-with-draft-and-helm)\n1. [Validate Deployment](#validate-the-deployment)\n 1. [Where is Phippy?](#but-where-is-phippy) \n 1. [Watch in real time](#watch-in-real-time)\n 1. [Try scaling your apps](#try-scaling-your-apps)\n1. [Leverage Azure DevOps](#leverage-azure-devops)\n1. [Issues and Contributions](#issues)\n\n--- \n\n## Prerequisites\n\nHere's a short list of all the things you'll need to do. Don't worry - you'll be up and running in about thirty minutes.\n\n1. An [Azure](https://azure.microsoft.com/en-us/free/) subscription. You can [Sign up for Free](https://azure.microsoft.com/en-us/free/) and see for yourself how Azure Kubernetes Service (AKS) is the best place for developers using Kubernetes. \n1. An Azure Kubernetes Service (AKS) Cluster, [enabled with Http Application Routing](https://docs.microsoft.com/en-us/azure/aks/http-application-routing) (this is **on** by default when you create a cluster via the Azure portal). \n - *Important note: if your AKS cluster has RBAC enabled, you will need to run the following command to have `captainkube` able to read the information in the cluster: `kubectl create clusterrolebinding default-view --clusterrole=view --serviceaccount=phippyandfriends:default`.*\n1. An Azure Container Registry instance (or a Docker Hub account if you prefer to use Docker Hub). If you opt to use Azure Container Registry, make sure you [configure RBAC access so that AKS has the proper role assignment to access your ACR](https://docs.microsoft.com/en-us/azure/container-registry/container-registry-auth-aks#grant-aks-access-to-acr).\n1. You'll need to install a few tools handy for developing with containers and Kubernetes, and the Azure CLI:\n 1. [The Azure CLI](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest)\n 1. [Helm](http://helm.sh) and [Draft](https://draft.sh/) are also required, as they enable deploying and debugging code in Kubernetes.\n 1. [Visual Studio Code](http://code.visualstudio.com) and the [Kubernetes extension](https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools) for it would also be great to have. \n\n## Get Started! \n\nTo get started, follow these simple steps. \n\n### Clone and Open the Code\n\nThe Phippy and Friends repository is public. Just clone it to your local machine and open the folder up in Visual Studio Code to get started. \n\n```bash\ngit clone https://github.com/Azure/phippyandfriends.git\ncd phippy-demo\ncode .\n```\n\n### Get your AKS Ingress URL\n\nA few of the services will provide HTML UIs. To enable external access, Ingress needs to be set up on each of these services using the external DNS of the cluster. Don't worry, though, this is easy. You can use VS Code's integrated terminal or the Cloud Shell tools in VS Code to run this `az` command line call, which will get your AKS cluster's external DNS.\n\n```bash\naz aks show -n -g --query addonProfiles.httpApplicationRouting.config.HTTPApplicationRoutingZoneName\n```\n\n![Get DNS via AZ](media/get-url-via-az.png)\n\nYou can also get the DNS from the Azure portal if you prefer. \n\n![Get DNS via Portal](media/get-url-in-portal.png)\n\nWe'll be deploying the **parrot** service first (more on that in a moment), so let's take a look at the `values.yaml` file for parrot. The `values.yaml` file is where you can customize your service, release, deployment, and in our case, ingress settings. Find the `basedomain` property. \n\n![Parrot's ingress](media/find-parrot-ingress-to-edit.png)\n\nChange the value of the `basedomain` property to match the DNS for your AKS cluster. \n\n![Parrot's ingress](media/edit-parrot-ingress.png)\n\n### Connect to your Registry\n\nIf you want to select which registry to push to, use the command below:\n\n```bash\ndraft config set registry \n```\n\nIf you're using ACR, you can also log into your registry using the Azure CLI. \n\n```bash\naz acr login -n -g \n```\n\n### Deploy Parrot and Captain Kube with Draft and Helm\n\nNow you'll create the first two services, **parrot** and **captainkube**. \n\n1. The captainkube service, a simple Go app, is represented by Captain Kube from the Children's Illustrated Guide to Kubernetes. This service constantly watches the pods running in the Kubernetes cluster. Whenever a pod is activated, updated, or deleted from the cluster, captainkube tells the parrot service what just happened. \n1. The parrot service is essentially an ASP.NET Core app with a Web API back-end. The Web API bubbles events up to the HTML client via a SignalR Hub. Parrot essentially \"parrots\" what captainkube is telling him in the form of [Semantic UI](http://semantic-ui.com) cards on the UI side. When services pop into the cluster, they're represented by characters shown in the cards. \n\nThese two baseline services need to be running first, so you can Draft them up into the cluster using the commands below. \n\n```bash\ncd parrot\ndraft up\ncd ..\ncd captainkube\ndraft up\ncd ..\n```\n\nYou'll be provided feedback as the deployment takes place. \n\n![Drafting parrot and captainkube](media/drafting-parrot-and-captain.png)\n\n## Validate the Deployment\n\nOnce the deployment has completed, enter this Kubernetes CLI command to see everything you've deployed into the cluster. \n\n```bash\nkubectl get svc,pod,ing --namespace phippyandfriends\n```\n\nYou should see something like this in your terminal window. \n\n```bash\nNAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE\nparrot-parrot ClusterIP 10.0.224.230 80/TCP 3m\n\nNAME READY STATUS RESTARTS AGE\ncaptainkube-captainkube-f5b4487c5-shw4p 1/1 Running 0 3m\nparrot-parrot-677cc74b47-zdw6z 1/1 Running 0 3m\n\nNAME HOSTS ADDRESS PORTS \nparrot-parrot parrot.0d7b3d707c094da087a7.westus.aksapp.io 80 \n```\n\nIt may take a few minutes for the ingress DNS to be matched up to the public IP address for the cluster. If you don't see an IP address listed for the `parrot` service, just type this command and watch the terminal window update automatically until you have a public IP address for the ingress. \n\n```bash\nkubectl get ing --namespace phippyandfriends -w\n```\n\nEventually, your ingress will reflect the public IP address, which is your sign that parrot's DNS will work. So copy it from the terminal window. \n\n![Copy the Ingress URI](media/copy-ingress-url.png)\n\nDrop parrot's ingress URI into a web browser and you'll see the dashboard, which confirms you've got two services - parrot and captainkube - running in your cluster. \n\n![Parrot Dashboard](media/parrot-dashboard.png)\n\n### But where is Phippy? \n\nThe Phippy service is a super-simple PHP app. \n\nNext, CD into the phippy directory, as we definitely want to make sure we deploy our star of the show, Phippy, into our AKS cluster. Use the same `draft up` command as you did for parrot and captainkube, and you'll see the phippy service's deployment status as it occurs. \n\nThe moment the deployment finishes, the dashboard will light up with Phippy!\n\n![Phippy is Here](media/phippy-is-here.png)\n\n### Watch in Real-time\n\nThe final service is a basic Node.js application represented by the Node.js-decorated [Azure Brady, the Open Cloud Ninja Sloth](https://github.com/Microsoft/OpenCloudNinjaSloth). \n\nYou can cd into this service's folder and deploy it using `draft up` as you did with the others. But for fun, do this in a window that's side-by-side with the parrot dashboard. This way you can see services appear as you `draft up` and vanish as you `draft delete`. \n\n### Try Scaling your Apps\n\nScale your nodebrady by running this:\n\n```bash\nkubectl scale deployment/nodebrady-nodebrady --replicas 3 --namespace phippyandfriends\n```\n\nWatch as more brady ninjas come to life!\n\n## Leverage Azure DevOps\n\nYou could also leverage [Azure DevOps](https://docs.microsoft.com/azure/devops) to implement a [CI/CD pipeline](https://docs.microsoft.com/azure/devops/pipelines) for each app. For that you could [create Azure build pipelines](https://docs.microsoft.com/azure/devops/pipelines/get-started-yaml#get-your-first-build) per app for both Build/CI and Release/CD by using the associated YAML definitions: \n- [captainkube/ci-pipeline.yml](captainkube/ci-pipeline.yml) and [captainkube/cd-pipeline.yml](captainkube/cd-pipeline.yml)\n- [nodebrady/ci-pipeline.yml](nodebrady/ci-pipeline.yml) and [nodebrady/cd-pipeline.yml](nodebrady/cd-pipeline.yml)\n- [parrot/ci-pipeline.yml](parrot/ci-pipeline.yml) and [parrot/cd-pipeline.yml](parrot/cd-pipeline.yml)\n- [phippy/ci-pipeline.yml](phippy/ci-pipeline.yml) and [phippy/cd-pipeline.yml](phippy/cd-pipeline.yml)\n\n![Azure DevOps workflow](media/azure-devops-workflow.png)\n\nFor more information, you could follow this tutorial: [Using Azure DevOps to setup a CI/CD pipeline and deploy to Kubernetes](https://open.microsoft.com/2018/11/27/tutorial-azure-devops-setup-cicd-pipeline-kubernetes-docker-helm).\n\n## Issues?\n\nPhippy and Friends is open-source, and we'd love your contributions. Submit issues, then work those issues and send us a pull request. Customize the parrot dashboard with a theme, put the characters on a boat, launch them into space. We'd love to see what other characters you'll add to the dashboard!\n\n### Troubleshooting\n\nSometimes a previous deployment would fail and you would receive a message like so:\n\n```sh\nerror while releasing: could not upgrade release: rpc error: code = Unknown desc = \"parrot\" has no deployed releases\n```\n\nif that happens, you need to delete that failed deployment by running the following command, replacing `parrot` with the failed deployment name:\n\n```sh\nhelm uninstall parrot -n phippyandfriends\n```\n\n## Credits\n\nSome awesome people worked on the Phippy and Friends demo. [Stella Lin]() brought the idea to [Brady Gaster](), who then got a **ton** of help from [Ralph Squillace]() and [Ahmed Sabbour](http://twitter.com/sabbour) to bring it to life and [Mathieu Benoit](http://github.com/mathieu-benoit) for his Azure DevOps pipelines. As mentioned earlier, Phippy and Friends was originally inspired by a blog post written by [Matt](https://twitter.com/technosophos) [Butcher](http://technosophos.com/). Phippy and friends were conceived by Matt Butcher, Karen Chu, and Bailey Beougher and are licensed by the CNCF under the CC-BY license. More info at [phippy.io](http://phippy.io). Goldie the Gopher is based on the Go Gopher by Renee French.\n\n\nYou can help too, by submitting a pull request and adding your own contributions. When you do, make sure to add your contributions' summary to this section, too!\n" }, { "path": "captainkube/.dockerignore", "content": "Dockerfile\ndraft.toml\nchart/\nNOTICE\nGodeps/\nvendor/" }, { "path": "captainkube/.draft-tasks.toml", "content": "" }, { "path": "captainkube/.draftignore", "content": "*.swp\n*.tmp\n*.temp\n.git*\n" }, { "path": "captainkube/Dockerfile", "content": "# Build\nFROM golang:1.14.4 as builder\n\nWORKDIR /build\nCOPY main.go .\n# temporary workaroud for https://github.com/Azure/phippyandfriends/issues/44\nRUN GO111MODULE=on; go mod init captainkube && go get k8s.io/client-go@v0.17.2 && go get -d -v\nRUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o app .\n\n# Run\nFROM alpine:latest \n\nRUN apk --no-cache add ca-certificates\nWORKDIR /root/\nCOPY --from=builder /build/app .\nCMD [\"./app\"]\n" }, { "path": "captainkube/cd-pipeline.yml", "content": "trigger: none\npr: none\n\nvariables:\n- template: ../common/cd-vars-template.yml\n parameters:\n projectName: captainkube\n # define 3 more variables: registryName, registryLogin and registryPassword in the Azure pipeline UI definition\n\nresources: \n pipelines:\n - pipeline: ci-pipeline\n source: captainkube-ci\n trigger:\n enabled: true\n branches:\n include:\n - master\n\nstages:\n- stage: development\n displayName: development\n jobs:\n - deployment: development\n variables:\n k8sNamespace: 'phippyandfriends'\n # define 5 more variables: aks, rg, aksSpId, aksSpSecret and aksSpTenantId in the Azure pipeline UI definition\n displayName: deploy helm chart into AKS\n pool:\n vmImage: ubuntu-latest\n environment: development-$(projectName)\n strategy:\n runOnce:\n deploy:\n steps:\n - template: ../common/cd-steps-template.yml\n" }, { "path": "captainkube/charts/captainkube/.helmignore", "content": "# Patterns to ignore when building packages.\n# This supports shell glob matching, relative path matching, and\n# negation (prefixed with !). Only one pattern per line.\n.DS_Store\n# Common VCS dirs\n.git/\n.gitignore\n.bzr/\n.bzrignore\n.hg/\n.hgignore\n.svn/\n# Common backup files\n*.swp\n*.bak\n*.tmp\n*~\n# Various IDEs\n.project\n.idea/\n*.tmproj\n" }, { "path": "captainkube/charts/captainkube/Chart.yaml", "content": "apiVersion: v1\ndescription: This app represents Captain Kube, who is taking care of all the containers in the cluster.\nname: captainkube\nversion: v0.3.0\n" }, { "path": "captainkube/charts/captainkube/templates/NOTES.txt", "content": "Tail the logs of the lighthouse pod\n\n- kubectl logs -f --namespace {{ .Release.Namespace }} \\\n $(kubectl get pods --namespace {{ .Release.Namespace }} \\\n -l app={{ template \"fullname\" . }} \\\n -o jsonpath='{ .items[0].metadata.name }')\n" }, { "path": "captainkube/charts/captainkube/templates/_helpers.tpl", "content": "{{/* vim: set filetype=mustache: */}}\n{{/*\nExpand the name of the chart.\n*/}}\n{{- define \"name\" -}}\n{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix \"-\" -}}\n{{- end -}}\n\n{{/*\nCreate a default fully qualified app name.\nWe truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).\n*/}}\n{{- define \"fullname\" -}}\n{{- $name := default .Chart.Name .Values.nameOverride -}}\n{{- printf \"%s-%s\" .Release.Name $name | trunc 63 | trimSuffix \"-\" -}}\n{{- end -}}\n\n{{/*\nGenerate the imagePullSecret for a private Container Registry.\n*/}}\n{{- define \"imagePullSecret\" }}\n{{- printf \"{\\\"auths\\\": {\\\"%s\\\": {\\\"auth\\\": \\\"%s\\\"}}}\" .Values.image.repository (printf \"%s:%s\" .Values.image.username .Values.image.password | b64enc) | b64enc }}\n{{- end }}" }, { "path": "captainkube/charts/captainkube/templates/deployment.yaml", "content": "apiVersion: apps/v1\nkind: Deployment\nmetadata:\n name: {{ template \"fullname\" . }}\n labels:\n app: {{ template \"fullname\" . }}\n chart: \"{{ .Chart.Name }}-{{ .Chart.Version | replace \"+\" \"_\" }}\"\n release: \"{{ .Release.Name }}\"\n heritage: \"{{ .Release.Service }}\"\nspec:\n replicas: {{ .Values.replicaCount }}\n selector:\n matchLabels:\n app: {{ template \"fullname\" . }}\n template:\n metadata:\n labels:\n app: {{ template \"fullname\" . }}\n spec:\n{{ if .Values.image.useImagePullSecrets }}\n imagePullSecrets:\n - name: {{ .Chart.Name }}-acr-secret\n{{ end }}\n containers:\n - name: {{ .Chart.Name }}\n image: \"{{ .Values.image.repository }}:{{ .Chart.AppVersion }}\"\n imagePullPolicy: {{ .Values.image.pullPolicy }}\n ports:\n - containerPort: 3000\n livenessProbe:\n httpGet:\n path: /healthz\n port: 3000\n initialDelaySeconds: 3\n periodSeconds: 3\n resources:\n{{ toYaml .Values.resources | indent 12 }}\n" }, { "path": "captainkube/charts/captainkube/templates/secret.yaml", "content": "{{ if .Values.image.private }}\napiVersion: v1\nkind: Secret\nmetadata:\n name: {{ .Chart.Name }}-acr-secret\ntype: kubernetes.io/dockerconfigjson\ndata:\n .dockerconfigjson: {{ template \"imagePullSecret\" . }}\n{{ end }}" }, { "path": "captainkube/charts/captainkube/values.yaml", "content": "replicaCount: 1\nimage:\n useImagePullSecrets: false\n pullPolicy: Always\n" }, { "path": "captainkube/ci-pipeline.yml", "content": "trigger:\n batch: true\n branches:\n include: \n - '*'\n paths:\n include: \n - captainkube/\n - common/ci-steps-template.yml\n \npr: none\n\npool:\n vmImage: ubuntu-latest\n\nvariables:\n- template: ../common/ci-vars-template.yml\n parameters:\n projectName: captainkube\n # define 3 more variables: registryName, registryLogin and registryPassword in the Azure pipeline UI definition\n\nsteps:\n- template: ../common/ci-steps-template.yml\n" }, { "path": "captainkube/draft.toml", "content": "[environments]\n [environments.development]\n name = \"captainkube\"\n namespace = \"phippyandfriends\"\n wait = true\n watch = false\n watch-delay = 2\n auto-connect = false\n dockerfile = \"\"\n chart = \"\"\n" }, { "path": "captainkube/main.go", "content": "package main\n\nimport (\n\t\"time\"\n\t\"bytes\"\n\t\"encoding/json\"\n\t\"net/http\"\n\t\"log\"\n\t\"reflect\"\n\n\t\"k8s.io/api/core/v1\"\n\t\"k8s.io/apimachinery/pkg/fields\"\n\t\"k8s.io/client-go/kubernetes\"\n\t\"k8s.io/client-go/rest\"\n\t\"k8s.io/client-go/tools/cache\"\n)\n\ntype Pod struct {\n\tContainer string\n\tContainerImage string\n\tName string\n\tNamespace string\n\tStatus string\n\tAction string\n}\n\nfunc main() {\n\tlog.Println(\"Starting up Captain Kube\")\n\tinformerChannel := make(chan struct{})\n\tgo runinformer(informerChannel)\n\n\trunhealthz()\n\t<-informerChannel\n\tlog.Println(\"Captain Kube shutting down\")\n}\n\nfunc runhealthz() {\n\t// Start listening for health checks\n\tmux := http.NewServeMux()\n\tmux.HandleFunc(\"/healthz\", func(w http.ResponseWriter, req *http.Request) {\n\t\tcheckReq, err := http.NewRequest(http.MethodGet, \"http://parrot-parrot/\", bytes.NewBuffer([]byte(``)))\n\t\thttpclient := &http.Client{}\n\t\t_, err = httpclient.Do(checkReq)\n\t\tif err != nil {\n\t\t\tlog.Println(\"Parrot is unreachable\")\n\t\t\tw.WriteHeader(http.StatusServiceUnavailable)\n\t\t} else {\n\t\t\tw.WriteHeader(http.StatusOK)\n\t\t}\n\t})\n\n\tlog.Println(\"Listening for health checks...\")\n\thttp.ListenAndServe(\":3000\", mux)\n}\n\nfunc runinformer(done chan struct{}) {\n\t// creates the in-cluster config\n\tconfig, err := rest.InClusterConfig()\n\tif err != nil {\n\t\tpanic(err.Error())\n\t}\n\n\t// creates the client\n\tclient, err := kubernetes.NewForConfig(config)\n\tif err != nil {\n\t\tpanic(err.Error())\n\t}\n\n\t// Clear the cluster status, start with a blank slate\n\treq, err := http.NewRequest(http.MethodDelete, \"http://parrot-parrot/api/ClusterStatus\", bytes.NewBuffer([]byte(``)))\n\thttpclient := &http.Client{}\n _, err = httpclient.Do(req)\n\tif err != nil {\n\t\tlog.Printf(\"The HTTP request failed with error %s\", err)\n\t} else {\n\t\tlog.Printf(\"\\n\\n**** Cleared parrot****\\n\\n\")\n\t}\n\n\twatchList := cache.NewListWatchFromClient(client.CoreV1().RESTClient(), \"pods\", v1.NamespaceAll, fields.Everything())\n\n\t// Setup the informer that will start watching for pod triggers\n\tinformer := cache.NewSharedIndexInformer(\n\t\twatchList,\n\t\t&v1.Pod{},\n\t\t10*time.Second,\n\t\tcache.Indexers{},\n\t) // We only want `Pod`, force resync every 10 seconds\n\t\n\t // Setup the trigger handlers that will receive triggers\n\t informer.AddEventHandler(cache.ResourceEventHandlerFuncs{\n\t\t// This method is executed when a new pod is created\n\t\tAddFunc: func(obj interface{}) {\n\t\t\tpod, ok := obj.(*v1.Pod) // cast the object as a pod\n\t\t\tif !ok {\n\t\t\t\t//log.Printf(\"Couldn't cast object as pod: %s\", obj)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tpingparrot(pod,\"Added\") // Ping the parrot\n\t\t},\n\t\t// This method is executed when an existing pod is updated\n\t\tUpdateFunc: func(oldObj, newObj interface{}) {\n\t\t\tnewPod, ok := newObj.(*v1.Pod) // cast the object as a pod\n\t\t\tif !ok {\n\t\t\t\t//log.Printf(\"Couldn't cast object as pod: %s\", newObj)\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Deep compare objects and only notify if they are truly different\n\t\t\tif !reflect.DeepEqual(oldObj, newObj) {\n\t\t\t\tpingparrot(newPod,\"Updated\") // Ping the parrot\n\t\t\t}\n\t\t},\n\t\t// This method is executed when an existing pod is deleted\n\t\tDeleteFunc: func(obj interface{}) {\n\t\t\tpod, ok := obj.(*v1.Pod) // cast the object as a pod\n\t\t\tif !ok {\n\t\t\t\t//log.Printf(\"Couldn't cast object as pod: %s\", obj)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tpingparrot(pod,\"Deleted\") // Ping the parrot\n\t\t},\n\t })\n\t\n\t // Start the informer, until `done` is closed\n\t informer.Run(done)\n}\n\nfunc pingparrot(pod *v1.Pod, state string) {\n\tif pod.ObjectMeta.Namespace != \"kube-system\" {\n\t\tlog.Printf(\"Pod %s: %s\", state, pod.ObjectMeta.Name)\n\t\tlog.Printf(\"namespace: %s\", pod.ObjectMeta.Namespace)\n\t\tlog.Printf(\"status: %s\", pod.Status.Phase)\n\t\tlog.Printf(\"startTime: %s\", pod.Status.StartTime)\n\t\tlog.Printf(\"conditions:\")\n\n\t\tfor _, condition := range pod.Status.Conditions {\n\t\t\tlog.Printf(\"\\ttype: %s\", condition.Type)\n\t\t\tlog.Printf(\"\\tlastTransitionTime: %s\", condition.LastTransitionTime)\n\t\t}\n\n\t\t// shrink the object we send over\n\t\tp := Pod{Action: state, Container: pod.Spec.Containers[0].Name, ContainerImage: pod.Spec.Containers[0].Image, Name: pod.ObjectMeta.Name, Namespace: pod.ObjectMeta.Namespace, Status: string(pod.Status.Phase)}\n\n\t\tjsonValue, _ := json.Marshal(p)\n\t\t//log.Printf(\"\\n%s\\n\",jsonValue)\n\n\t\t_, err := http.Post(\"http://parrot-parrot/api/ClusterStatus\", \"application/json\", bytes.NewBuffer(jsonValue))\n\t\tif err != nil {\n\t\t\tlog.Printf(\"The HTTP request failed with error %s\", err)\n\t\t} else {\n\t\t\tlog.Printf(\"Notified parrot: %s\", state)\n\t\t}\n\t\tlog.Printf(\"\\n\\n\")\n\t}\n}\n" }, { "path": "common/cd-steps-template.yml", "content": "steps:\n- checkout: none\n- task: HelmInstaller@1\n displayName: 'install helm'\n inputs:\n helmVersionToInstall: $(helmVersion)\n- download: ci-pipeline\n artifact: build-artifact\n- bash: |\n az login \\\n --service-principal \\\n -u $(aksSpId) \\\n -p '$(aksSpSecret)' \\\n --tenant $(aksSpTenantId)\n az aks get-credentials \\\n -n $(aks) \\\n -g $(rg)\n helm repo add \\\n $(registryName) \\\n https://$(registryServerName)/helm/v1/repo \\\n --username $(registryLogin) \\\n --password '$(registryPassword)'\n helmChartVersion=$(jq .helmChartVersion $(pipeline.workspace)/ci-pipeline/build-artifact/variables.json -r)\n helm upgrade \\\n --namespace $(k8sNamespace) \\\n --create-namespace \\\n --install \\\n --wait \\\n --version $helmChartVersion \\\n --set image.repository=$(registryServerName)/$(projectName) \\\n --set ingress.enabled=false \\\n $(projectName) \\\n $(registryName)/$(projectName)\n failOnStderr: true\n displayName: 'deploy helm chart'\n" }, { "path": "common/cd-vars-template.yml", "content": "parameters:\n projectName: ''\n\nvariables:\n helmVersion: 3.2.3\n registryServerName: '$(registryName).azurecr.io'\n projectName: ${{ parameters.projectName }}\n" }, { "path": "common/ci-steps-template.yml", "content": "steps:\n- bash: |\n cd $(projectName)\n docker build \\\n -t $(registryServerName)/$(imageName):$(imageTag) \\\n .\n failOnStderr: true\n displayName: 'docker build'\n- bash: |\n echo '$(registryPassword)' | docker login \\\n $(registryServerName) \\\n -u $(registryLogin) \\\n --password-stdin\n condition: and(succeeded(), eq(variables['build.sourceBranch'], 'refs/heads/master'))\n displayName: 'docker login'\n- bash: |\n docker push $(registryServerName)/$(imageName):$(imageTag)\n failOnStderr: true\n condition: and(succeeded(), eq(variables['build.sourceBranch'], 'refs/heads/master'))\n displayName: 'docker push'\n- task: HelmInstaller@1\n displayName: 'install helm'\n inputs:\n helmVersionToInstall: $(helmVersion)\n- bash: |\n cd $(projectName)\n helm package \\\n --version $(helmChartVersion) \\\n --app-version $(imageTag) \\\n charts/$(projectName)\n failOnStderr: true\n displayName: 'helm package'\n- bash: |\n cd $(projectName)\n chartPackage=$(ls $(projectName)-$(helmChartVersion).tgz)\n az acr helm push \\\n -n $(registryName) \\\n -u $(registryLogin) \\\n -p '$(registryPassword)' \\\n $chartPackage\n echo $(jq -n --arg version \"$(helmChartVersion)\" '{helmChartVersion: $version}') > $(build.artifactStagingDirectory)/variables.json\n failOnStderr: true\n name: helmPush\n condition: and(succeeded(), eq(variables['build.sourceBranch'], 'refs/heads/master'))\n displayName: 'az acr helm push'\n- publish: $(build.artifactStagingDirectory)\n artifact: build-artifact\n condition: and(succeeded(), eq(variables['build.sourceBranch'], 'refs/heads/master'))\n" }, { "path": "common/ci-vars-template.yml", "content": "parameters:\n projectName: ''\n\nvariables:\n helmVersion: 3.2.3\n registryServerName: '$(registryName).azurecr.io'\n projectName: ${{ parameters.projectName }}\n imageName: ${{ parameters.projectName }}\n imageTag: $(build.buildId)\n helmChartVersion: $(build.buildId)\n" }, { "path": "nodebrady/.dockerignore", "content": "Dockerfile\ndraft.toml\nchart/\nNOTICE\nnode_modules\nnpm-debug.log\n" }, { "path": "nodebrady/.draft-tasks.toml", "content": "" }, { "path": "nodebrady/.draftignore", "content": "*.swp\n*.tmp\n*.temp\n.git*\n" }, { "path": "nodebrady/.editorconfig", "content": "# http://editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n" }, { "path": "nodebrady/.jshintrc", "content": "{\n \"node\": true,\n \"esnext\": true,\n \"bitwise\": true,\n \"camelcase\": true,\n \"curly\": true,\n \"eqeqeq\": true,\n \"immed\": true,\n \"indent\": 2,\n \"latedef\": true,\n \"newcap\": true,\n \"noarg\": true,\n \"quotmark\": \"single\",\n \"regexp\": true,\n \"undef\": true,\n \"unused\": true,\n \"strict\": true,\n \"trailing\": true,\n \"smarttabs\": true,\n \"white\": true\n}\n" }, { "path": "nodebrady/Dockerfile", "content": "# Build\nFROM node:carbon AS base\n\nWORKDIR /app\n\n# Dependencies\nFROM base AS dependencies \n\n# A wildcard is used to ensure both package.json AND package-lock.json are copied\nCOPY package*.json ./\n\n# Install app dependencies including 'devDependencies'\nRUN npm install\n\n# Copy Files/Build ----\nFROM dependencies AS build \nWORKDIR /app\nCOPY . /app\n\n# Release with Alpine\nFROM node:14.4.0-alpine AS release \n\n# Create app directory\nWORKDIR /app\n\nCOPY --from=dependencies /app/package.json ./\n\n# Install app dependencies\nRUN npm install --only=production\nCOPY --from=build /app ./\n\nCMD [\"npm\", \"start\"]\n" }, { "path": "nodebrady/app.js", "content": "'use strict';\nconst messages = require('./controllers/messages');\nconst compress = require('koa-compress');\nconst logger = require('koa-logger');\nconst serve = require('koa-static');\nconst route = require('koa-route');\nconst koa = require('koa');\nconst path = require('path');\nconst app = module.exports = koa();\n\n// Logger\napp.use(logger());\n\napp.use(route.get('/', messages.home));\napp.use(route.get('/messages', messages.list));\napp.use(route.get('/messages/:id', messages.fetch));\napp.use(route.post('/messages', messages.create));\napp.use(route.get('/async', messages.delay));\napp.use(route.get('/promise', messages.promise));\n\n// Serve static files\napp.use(serve(path.join(__dirname, 'public')));\n\n// Compress\napp.use(compress());\n\nif (!module.parent) {\n app.listen(3000);\n console.log('listening on port 3000');\n}\n" }, { "path": "nodebrady/cd-pipeline.yml", "content": "trigger: none\npr: none\n\nvariables:\n- template: ../common/cd-vars-template.yml\n parameters:\n projectName: nodebrady\n # define 3 more variables: registryName, registryLogin and registryPassword in the Azure pipeline UI definition\n\nresources: \n pipelines:\n - pipeline: ci-pipeline\n source: nodebrady-ci\n trigger:\n enabled: true\n branches:\n include:\n - master\n\nstages:\n- stage: development\n displayName: development\n jobs:\n - deployment: development\n variables:\n k8sNamespace: 'phippyandfriends'\n # define 5 more variables: aks, rg, aksSpId, aksSpSecret and aksSpTenantId in the Azure pipeline UI definition\n displayName: deploy helm chart into AKS\n pool:\n vmImage: ubuntu-latest\n environment: development-$(projectName)\n strategy:\n runOnce:\n deploy:\n steps:\n - template: ../common/cd-steps-template.yml\n" }, { "path": "nodebrady/charts/nodebrady/.helmignore", "content": "# Patterns to ignore when building packages.\n# This supports shell glob matching, relative path matching, and\n# negation (prefixed with !). Only one pattern per line.\n.DS_Store\n# Common VCS dirs\n.git/\n.gitignore\n.bzr/\n.bzrignore\n.hg/\n.hgignore\n.svn/\n# Common backup files\n*.swp\n*.bak\n*.tmp\n*~\n# Various IDEs\n.project\n.idea/\n*.tmproj\n" }, { "path": "nodebrady/charts/nodebrady/Chart.yaml", "content": "apiVersion: v1\ndescription: Azure Brady in his Node.js attire.\nname: nodebrady\nversion: v0.3.0\n" }, { "path": "nodebrady/charts/nodebrady/templates/NOTES.txt", "content": "Tail the logs of the lighthouse pod\n\n- kubectl logs -f --namespace {{ .Release.Namespace }} \\\n $(kubectl get pods --namespace {{ .Release.Namespace }} \\\n -l app={{ template \"fullname\" . }} \\\n -o jsonpath='{ .items[0].metadata.name }')\n" }, { "path": "nodebrady/charts/nodebrady/templates/_helpers.tpl", "content": "{{/* vim: set filetype=mustache: */}}\n{{/*\nExpand the name of the chart.\n*/}}\n{{- define \"name\" -}}\n{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix \"-\" -}}\n{{- end -}}\n\n{{/*\nCreate a default fully qualified app name.\nWe truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).\n*/}}\n{{- define \"fullname\" -}}\n{{- $name := default .Chart.Name .Values.nameOverride -}}\n{{- printf \"%s-%s\" .Release.Name $name | trunc 63 | trimSuffix \"-\" -}}\n{{- end -}}\n\n{{/*\nGenerate the imagePullSecret for a private Container Registry.\n*/}}\n{{- define \"imagePullSecret\" }}\n{{- printf \"{\\\"auths\\\": {\\\"%s\\\": {\\\"auth\\\": \\\"%s\\\"}}}\" .Values.image.repository (printf \"%s:%s\" .Values.image.username .Values.image.password | b64enc) | b64enc }}\n{{- end }}" }, { "path": "nodebrady/charts/nodebrady/templates/deployment.yaml", "content": "apiVersion: apps/v1\nkind: Deployment\nmetadata:\n name: {{ template \"fullname\" . }}\n labels:\n app: {{ template \"fullname\" . }}\n chart: \"{{ .Chart.Name }}-{{ .Chart.Version | replace \"+\" \"_\" }}\"\n release: \"{{ .Release.Name }}\"\n heritage: \"{{ .Release.Service }}\"\nspec:\n replicas: {{ .Values.replicaCount }}\n selector:\n matchLabels:\n app: {{ template \"fullname\" . }}\n template:\n metadata:\n labels:\n app: {{ template \"fullname\" . }}\n spec:\n{{ if .Values.image.useImagePullSecrets }}\n imagePullSecrets:\n - name: {{ .Chart.Name }}-acr-secret\n{{ end }}\n containers:\n - name: {{ .Chart.Name }}\n image: \"{{ .Values.image.repository }}:{{ .Chart.AppVersion }}\"\n imagePullPolicy: {{ .Values.image.pullPolicy }}\n ports:\n - containerPort: {{ .Values.service.internalPort }}\n resources:\n{{ toYaml .Values.resources | indent 12 }}\n" }, { "path": "nodebrady/charts/nodebrady/templates/ingress.yaml", "content": "{{ if .Values.ingress.enabled }}\napiVersion: extensions/v1beta1\nkind: Ingress\nmetadata:\n name: {{ template \"fullname\" . }}\n labels:\n app: {{ template \"fullname\" . }}\n chart: \"{{ .Chart.Name }}-{{ .Chart.Version | replace \"+\" \"_\" }}\"\n release: \"{{ .Release.Name }}\"\n heritage: \"{{ .Release.Service }}\"\n annotations:\n kubernetes.io/ingress.class: addon-http-application-routing\nspec:\n rules:\n - host: {{ .Release.Name }}.{{ .Values.ingress.basedomain }}\n http:\n paths:\n - path: /\n backend:\n serviceName: {{ template \"fullname\" . }}\n servicePort: {{ .Values.service.externalPort }}\n{{ end }}\n" }, { "path": "nodebrady/charts/nodebrady/templates/secret.yaml", "content": "{{ if .Values.image.private }}\napiVersion: v1\nkind: Secret\nmetadata:\n name: {{ .Chart.Name }}-acr-secret\ntype: kubernetes.io/dockerconfigjson\ndata:\n .dockerconfigjson: {{ template \"imagePullSecret\" . }}\n{{ end }}" }, { "path": "nodebrady/charts/nodebrady/templates/service.yaml", "content": "apiVersion: v1\nkind: Service\nmetadata:\n name: {{ template \"fullname\" . }}\n labels:\n app: {{ template \"fullname\" . }}\n chart: \"{{ .Chart.Name }}-{{ .Chart.Version }}\"\n release: \"{{ .Release.Name }}\"\n heritage: \"{{ .Release.Service }}\"\nspec:\n ports:\n - port: {{ .Values.service.externalPort }}\n protocol: TCP\n targetPort: {{ .Values.service.internalPort }}\n selector:\n app: {{ template \"fullname\" . }}\n type: ClusterIP" }, { "path": "nodebrady/charts/nodebrady/values.yaml", "content": "replicaCount: 1\nimage:\n useImagePullSecrets: false\n pullPolicy: Always\nservice:\n internalPort: 3000\n externalPort: 80\ningress:\n enabled: false\n #basedomain: CHANGE_TO_YOUR_DNS.REGION.aksapp.io # replace with your own from the portal\n" }, { "path": "nodebrady/ci-pipeline.yml", "content": "trigger:\n batch: true\n branches:\n include: \n - '*'\n paths:\n include: \n - nodebrady/\n - common/ci-steps-template.yml\n \npr: none\n\npool:\n vmImage: ubuntu-latest\n\nvariables:\n- template: ../common/ci-vars-template.yml\n parameters:\n projectName: nodebrady\n # define 3 more variables: registryName, registryLogin and registryPassword in the Azure pipeline UI definition\n\nsteps:\n- template: ../common/ci-steps-template.yml\n" }, { "path": "nodebrady/controllers/messages.js", "content": "'use strict';\nconst views = require('co-views');\nconst parse = require('co-body');\nconst messages = [\n { id: 0,\n message: 'Koa next generation web framework for node.js'\n },\n { id: 1,\n message: 'Koa is a new web framework designed by the team behind Express'\n }\n];\n\nconst render = views(__dirname + '/../views', {\n map: { html: 'swig' }\n});\n\nmodule.exports.home = function *home(ctx) {\n this.body = yield render('list', { 'messages': messages });\n};\n\nmodule.exports.list = function *list() {\n this.body = yield messages;\n};\n\nmodule.exports.fetch = function *fetch(id) {\n const message = messages[id];\n if (!message) {\n this.throw(404, 'message with id = ' + id + ' was not found');\n }\n this.body = yield message;\n};\n\nmodule.exports.create = function *create() {\n const message = yield parse(this);\n const id = messages.push(message) - 1;\n message.id = id;\n this.redirect('/');\n};\n\nconst asyncOperation = () => callback =>\n setTimeout(\n () => callback(null, 'this was loaded asynchronously and it took 2 seconds to complete'),\n 2000);\n\nconst returnsPromise = () =>\n new Promise((resolve, reject) =>\n setTimeout(() => resolve('promise resolved after 2 seconds'), 2000));\n\nmodule.exports.delay = function *delay() {\n this.body = yield asyncOperation();\n};\n\nmodule.exports.promise = function *promise() {\n this.body = yield returnsPromise();\n};\n" }, { "path": "nodebrady/draft.toml", "content": "[environments]\n [environments.development]\n name = \"nodebrady\"\n namespace = \"phippyandfriends\"\n wait = true\n watch = false\n watch-delay = 2\n auto-connect = false\n dockerfile = \"\"\n chart = \"\"\n" }, { "path": "nodebrady/package.json", "content": "{\n \"name\": \"nodebrady\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"node app.js\",\n \"test\": \"mocha\"\n },\n \"dependencies\": {\n \"koa\": \"^1.2.0\",\n \"koa-logger\": \"^1.2.0\",\n \"koa-static\": \"^2.0.0\",\n \"koa-route\": \"^2.4.2\",\n \"koa-compress\": \"^1.0.6\",\n \"co-views\": \"^2.1.0\",\n \"swig\": \"^1.3.2\",\n \"co-body\": \"^4.0.0\"\n },\n \"devDependencies\": {\n \"supertest\": \"^0.12.1\",\n \"mocha\": \"^2.4.5\"\n }\n}\n" }, { "path": "nodebrady/public/scripts/.gitkeep", "content": "" }, { "path": "nodebrady/public/styles/main.css", "content": "ul {\n\tmargin: 100px auto 0;\n\tlist-style: none;\n\twidth: 700px;\n\tfont: 30px helvetica;\n\tfont-weight: 100;\n}\n\nli {\n margin-bottom: 50px;\n}\n\nform {\n width: 700px;\n margin: 0 auto;\t\n}\n\ntextarea {\n border-style: none;\n width: 700px;\n margin-left: 20px;\n height: 100px;\n font: 30px helvetica;\n font-weight: 100;\n}" }, { "path": "nodebrady/test/routeSpec.js", "content": "/*global describe, it*/\n'use strict';\nconst superagent = require('supertest');\nconst app = require('../app');\nconst request = superagent(app.listen());\n\ndescribe('Routes', () => {\n describe('GET /', () => {\n it('should return 200', done => {\n request\n .get('/')\n .expect(200, done);\n });\n });\n describe('GET /messages', () => {\n it('should return 200', done => {\n request\n .get('/messages')\n .expect('Content-Type', /json/)\n .expect(200, done);\n });\n });\n describe('GET /messages/notfound', () => {\n it('should return 404', done => {\n request\n .get('/messages/notfound')\n .expect(404, done);\n });\n });\n});\n" }, { "path": "nodebrady/views/layout.html", "content": "\n\n\n\t{% block title %}Messages{% endblock %}\n \n\n\n
\n {% block content %}\n

Forgot to add content?

\n {% endblock %}\n
\n\n" }, { "path": "nodebrady/views/list.html", "content": "{% extends 'layout.html' %}\n\n{% block title %}Messages{% endblock %}\n\n{% block content %}\n
    \n {% for message in messages %}\n
  • {{ message.message }}
    • \n {% endfor %}\n
\n
\n \n
\n{% endblock %}" }, { "path": "parrot/.dockerignore", "content": "Dockerfile\ndraft.toml\nchart/\nNOTICE\nbin/\nobj/\n!published/" }, { "path": "parrot/.draft-tasks.toml", "content": "" }, { "path": "parrot/.draftignore", "content": "*.swp\n*.tmp\n*.temp\n.git*\n" }, { "path": "parrot/.vscode/launch.json", "content": "{\n // Use IntelliSense to find out which attributes exist for C# debugging\n // Use hover for the description of the existing attributes\n // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"name\": \".NET Core Launch (web)\",\n \"type\": \"coreclr\",\n \"request\": \"launch\",\n \"preLaunchTask\": \"build\",\n // If you have changed target frameworks, make sure to update the program path.\n \"program\": \"${workspaceFolder}/bin/Debug/netcoreapp2.0/parrot.dll\",\n \"args\": [],\n \"cwd\": \"${workspaceFolder}\",\n \"stopAtEntry\": false,\n \"internalConsoleOptions\": \"openOnSessionStart\",\n \"launchBrowser\": {\n \"enabled\": true,\n \"args\": \"${auto-detect-url}\",\n \"windows\": {\n \"command\": \"cmd.exe\",\n \"args\": \"/C start ${auto-detect-url}\"\n },\n \"osx\": {\n \"command\": \"open\"\n },\n \"linux\": {\n \"command\": \"xdg-open\"\n }\n },\n \"env\": {\n \"ASPNETCORE_ENVIRONMENT\": \"Development\"\n },\n \"sourceFileMap\": {\n \"/Views\": \"${workspaceFolder}/Views\"\n }\n },\n {\n \"name\": \".NET Core Attach\",\n \"type\": \"coreclr\",\n \"request\": \"attach\",\n \"processId\": \"${command:pickProcess}\"\n }\n ,]\n}" }, { "path": "parrot/.vscode/tasks.json", "content": "{\n \"version\": \"2.0.0\",\n \"tasks\": [\n {\n \"label\": \"build\",\n \"command\": \"dotnet\",\n \"type\": \"process\",\n \"args\": [\n \"build\",\n \"${workspaceFolder}/parrot.csproj\"\n ],\n \"problemMatcher\": \"$msCompile\"\n }\n ]\n}" }, { "path": "parrot/Controllers/ClusterStatusController.cs", "content": "using System;\r\nusing System.Collections.Generic;\r\nusing System.Diagnostics;\r\nusing System.IO;\r\nusing System.Linq;\r\nusing System.Threading.Tasks;\r\nusing Microsoft.AspNetCore.Mvc;\r\nusing Microsoft.Extensions.Logging;\r\nusing Newtonsoft.Json;\r\nusing parrot;\r\nusing parrot.Models;\r\n\r\nnamespace api.Controllers\r\n{\r\n [Route(\"api/[controller]\")]\r\n public class ClusterStatusController : Controller\r\n { \r\n\r\n public ClusterStatusController(ILogger logger, DaemonHub hub)\r\n {\r\n _hub = hub;\r\n _logger = logger;\r\n }\r\n\r\n private DaemonHub _hub;\r\n private readonly ILogger _logger;\r\n\r\n [HttpGet]\r\n public ActionResult Get()\r\n {\r\n return new OkResult();\r\n }\r\n\r\n [HttpDelete]\r\n public ActionResult Delete()\r\n {\r\n _logger.LogDebug(\"Incoming Cluster Clear\");\r\n try {\r\n _hub.clearClusterView();\r\n }\r\n catch(Exception ex) {\r\n HttpContext.Response.StatusCode = (int)System.Net.HttpStatusCode.InternalServerError; \r\n _logger.LogWarning(ex, \"Error clearing cluster view\");\r\n return Json(new { status=\"error\",message=$\"error updating cluster view {ex.Message}\"});\r\n }\r\n return new OkResult();\r\n }\r\n\r\n [HttpPost]\r\n public ActionResult Post([FromBody]Pod pod)\r\n {\r\n _logger.LogDebug(\"Incoming Cluster Update\");\r\n _logger.LogDebug(pod.ToString());\r\n try {\r\n _hub.updateClusterView(pod);\r\n }\r\n catch(Exception ex) {\r\n HttpContext.Response.StatusCode = (int)System.Net.HttpStatusCode.InternalServerError; \r\n _logger.LogWarning(ex, \"Error updating cluster view\");\r\n return Json(new { status=\"error\",message=$\"error updating cluster view {ex.Message}\"});\r\n }\r\n\r\n return new OkResult();\r\n }\r\n }\r\n}\r\n" }, { "path": "parrot/Controllers/HomeController.cs", "content": "using System;\r\nusing System.Collections.Generic;\r\nusing System.Diagnostics;\r\nusing System.Linq;\r\nusing System.Threading.Tasks;\r\nusing Microsoft.AspNetCore.Mvc;\r\nusing parrot.Models;\r\n\r\nnamespace parrot.Controllers\r\n{\r\n public class HomeController : Controller\r\n {\r\n public IActionResult Index()\r\n {\r\n return View();\r\n }\r\n\r\n public IActionResult Error()\r\n {\r\n return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });\r\n }\r\n }\r\n}\r\n" }, { "path": "parrot/Controllers/test.json", "content": "\"metadata\": {\n \"name\": \"nodeapp-nodeapp-66845c9868-phvqv\",\n \"generateName\": \"nodeapp-nodeapp-66845c9868-\",\n \"namespace\": \"default\",\n \"selfLink\": \"/api/v1/namespaces/default/pods/nodeapp-nodeapp-66845c9868-phvqv\",\n \"uid\": \"2c843057-75b3-11e8-bdbc-b20c0e5c020c\",\n \"resourceVersion\": \"403506\",\n \"creationTimestamp\": \"2018-06-22T00:28:24Z\",\n \"labels\": {\n \"app\": \"nodeapp-nodeapp\",\n \"pod-template-hash\": \"2240175424\"\n },\n \"ownerReferences\": [\n {\n \"apiVersion\": \"extensions/v1beta1\",\n \"kind\": \"ReplicaSet\",\n \"name\": \"nodeapp-nodeapp-66845c9868\",\n \"uid\": \"2c82728a-75b3-11e8-bdbc-b20c0e5c020c\",\n \"controller\": true,\n \"blockOwnerDeletion\": true\n }\n ]\n},\n\"spec\": {\n \"volumes\": [\n {\n \"name\": \"default-token-w8ncl\",\n \"secret\": {\n \"secretName\": \"default-token-w8ncl\",\n \"defaultMode\": 420\n }\n }\n ],\n \"containers\": [\n {\n \"name\": \"nodeapp\",\n \"image\": \"phippy.azurecr.io/nodeapp:a11a2889166b4e3031ac506e35c238d9f8756fa3\",\n \"ports\": [\n {\n \"containerPort\": 3000,\n \"protocol\": \"TCP\"\n }\n ],\n \"resources\": {},\n \"volumeMounts\": [\n {\n \"name\": \"default-token-w8ncl\",\n \"readOnly\": true,\n \"mountPath\": \"/var/run/secrets/kubernetes.io/serviceaccount\"\n }\n ],\n \"terminationMessagePath\": \"/dev/termination-log\",\n \"terminationMessagePolicy\": \"File\",\n \"imagePullPolicy\": \"Always\"\n }\n ],\n \"restartPolicy\": \"Always\",\n \"terminationGracePeriodSeconds\": 30,\n \"dnsPolicy\": \"ClusterFirst\",\n \"serviceAccountName\": \"default\",\n \"serviceAccount\": \"default\",\n \"nodeName\": \"aks-agentpool-19990256-0\",\n \"securityContext\": {},\n \"imagePullSecrets\": [\n {\n \"name\": \"draft-pullsecret\"\n }\n ],\n \"schedulerName\": \"default-scheduler\",\n \"tolerations\": [\n {\n \"key\": \"node.kubernetes.io/not-ready\",\n \"operator\": \"Exists\",\n \"effect\": \"NoExecute\",\n \"tolerationSeconds\": 300\n },\n {\n \"key\": \"node.kubernetes.io/unreachable\",\n \"operator\": \"Exists\",\n \"effect\": \"NoExecute\",\n \"tolerationSeconds\": 300\n }\n ]\n},\n\"status\": {\n \"phase\": \"Running\",\n \"conditions\": [\n {\n \"type\": \"Initialized\",\n \"status\": \"True\",\n \"lastProbeTime\": null,\n \"lastTransitionTime\": \"2018-06-22T00:28:24Z\"\n },\n {\n \"type\": \"Ready\",\n \"status\": \"True\",\n \"lastProbeTime\": null,\n \"lastTransitionTime\": \"2018-06-22T00:28:26Z\"\n },\n {\n \"type\": \"PodScheduled\",\n \"status\": \"True\",\n \"lastProbeTime\": null,\n \"lastTransitionTime\": \"2018-06-22T00:28:24Z\"\n }\n ],\n \"hostIP\": \"10.240.0.4\",\n \"podIP\": \"10.244.0.53\",\n \"startTime\": \"2018-06-22T00:28:24Z\",\n \"containerStatuses\": [\n {\n \"name\": \"nodeapp\",\n \"state\": {\n \"running\": {\n \"startedAt\": \"2018-06-22T00:28:26Z\"\n }\n },\n \"lastState\": {},\n \"ready\": true,\n \"restartCount\": 0,\n \"image\": \"phippy.azurecr.io/nodeapp:a11a2889166b4e3031ac506e35c238d9f8756fa3\",\n \"imageID\": \"docker-pullable://phippy.azurecr.io/nodeapp@sha256:b6cddce8c015b215bf1268420825b9ec3fca9e4075aee42bacf264cd055c010f\",\n \"containerID\": \"docker://874c69c9b6a8cf4c9bc820ef762d55133fffd43074f52f15f1cb6388f371e51a\"\n }\n ],\n \"qosClass\": \"BestEffort\"\n}" }, { "path": "parrot/Dockerfile", "content": "FROM mcr.microsoft.com/dotnet/core/sdk:3.1.301-alpine AS build-env\nWORKDIR /app\n\n# Copy csproj and restore as distinct layers\nCOPY *.csproj ./\nRUN dotnet restore\n\n# Copy everything else and build\nCOPY . ./\nRUN dotnet publish -c Release -o out\n\n# Build runtime image\nFROM mcr.microsoft.com/dotnet/core/aspnet:3.1.5-alpine\nWORKDIR /app\nCOPY --from=build-env /app/out .\nENTRYPOINT [\"dotnet\", \"parrot.dll\"]\n" }, { "path": "parrot/Hubs/Daemon.cs", "content": "using System.Threading.Tasks;\nusing System.Collections;\nusing System.Linq;\nusing System.Collections.Generic;\nusing Microsoft.AspNetCore.SignalR;\nusing parrot.Models;\n\nnamespace parrot\n{\n public class DaemonHub : Hub\n {\n static List Pods { get; set; }\n static List DeletedPods { get; set; }\n\n static DaemonHub()\n {\n Pods = new List();\n DeletedPods = new List();\n }\n\n const string POD_DELETED_STATUS = \"Deleted\";\n\n public override Task OnConnectedAsync()\n {\n Clients.All.SendAsync(\"clusterViewUpdated\", Pods);\n return base.OnConnectedAsync();\n }\n\n public void AddPod(Pod pod)\n {\n if(!DeletedPods.Contains(pod.Name))\n {\n Pods.Add(pod);\n }\n }\n\n public void RemovePod(Pod pod)\n {\n Pods.Remove(Pods.First(x => x.Name == pod.Name));\n DeletedPods.Add(pod.Name);\n }\n\n public void UpdatePod(Pod pod)\n {\n Pods.First(x => x.Name == pod.Name).Name = pod.Name;\n Pods.First(x => x.Name == pod.Name).Container = pod.Container;\n Pods.First(x => x.Name == pod.Name).NameSpace = pod.NameSpace;\n Pods.First(x => x.Name == pod.Name).Status = pod.Status;\n }\n\n public void clearClusterView()\n {\n Pods.Clear();\n Clients.All.SendAsync(\"clusterViewUpdated\", Pods);\n }\n\n public void updateClusterView(Pod pod)\n {\n // If the container image is \"image:tag\", strip the \":tag\", otherwise leave it alone\n // not all images are tagged, so..\n if(pod.ContainerImage.Contains(':'))\n pod.ContainerImage = pod.ContainerImage.Substring(0, pod.ContainerImage.IndexOf(':'));\n\n if (Pods.Any(x => x.Name == pod.Name))\n if (pod.Action == POD_DELETED_STATUS)\n RemovePod(pod);\n else\n UpdatePod(pod);\n else\n AddPod(pod);\n\n Clients.All.SendAsync(\"clusterViewUpdated\", Pods);\n }\n }\n}" }, { "path": "parrot/Models/ErrorViewModel.cs", "content": "using System;\r\n\r\nnamespace parrot.Models\r\n{\r\n public class ErrorViewModel\r\n {\r\n public string RequestId { get; set; }\r\n\r\n public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);\r\n }\r\n}" }, { "path": "parrot/Models/Pod.cs", "content": "using System;\n\nnamespace parrot.Models\n{\n public class Pod\n {\n public string Name { get; set; }\n public string Container { get; set; }\n public string NameSpace { get; set; }\n public string ContainerImage { get; set; }\n public string Status { get; set; }\n public string Action { get; set; }\n public string CardImageUrl\n {\n get { return string.Format(\"/media/{0}.png\", Container); }\n }\n\n public override string ToString() {\n return $\"Name: {Name}\\nContainer: {Container}\\nNameSpace: {NameSpace}\\nContainerImage: {ContainerImage}\\nStatus: {Status}\\nAction: {Action}\\nCardImageUrl: {CardImageUrl}\";\n }\n }\n}" }, { "path": "parrot/NOTICE", "content": "MIT License:\n\nCopyright (C) 2017 Cloudbase Solutions, Srl\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "parrot/Program.cs", "content": "using Microsoft.AspNetCore.Hosting;\r\nusing Microsoft.Extensions.Hosting;\r\n\r\nnamespace parrot\r\n{\r\n public class Program\r\n {\r\n public static void Main(string[] args)\r\n {\r\n CreateHostBuilder(args).Build().Run();\r\n }\r\n\r\n public static IHostBuilder CreateHostBuilder(string[] args) =>\r\n Host.CreateDefaultBuilder(args)\r\n .ConfigureWebHostDefaults(webBuilder =>\r\n {\r\n webBuilder.UseStartup();\r\n });\r\n }\r\n}\r\n" }, { "path": "parrot/Startup.cs", "content": "using Microsoft.AspNetCore.Builder;\r\nusing Microsoft.AspNetCore.Hosting;\r\nusing Microsoft.Extensions.Configuration;\r\nusing Microsoft.Extensions.DependencyInjection;\r\nusing Microsoft.Extensions.Hosting;\r\n\r\nnamespace parrot\r\n{\r\n public class Startup\r\n {\r\n public Startup(IConfiguration configuration)\r\n {\r\n Configuration = configuration;\r\n }\r\n\r\n public IConfiguration Configuration { get; }\r\n\r\n // This method gets called by the runtime. Use this method to add services to the container.\r\n public void ConfigureServices(IServiceCollection services)\r\n {\r\n services.AddControllersWithViews();\r\n services.AddSingleton(new DaemonHub());\r\n services.AddSignalR();\r\n }\r\n\r\n // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\r\n public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n {\r\n if (env.IsDevelopment())\r\n {\r\n app.UseDeveloperExceptionPage();\r\n }\r\n else\r\n {\r\n app.UseExceptionHandler(\"/Home/Error\");\r\n }\r\n\r\n app.UseStaticFiles();\r\n app.UseRouting();\r\n app.UseEndpoints(endpoints =>\r\n {\r\n endpoints.MapHub(\"/daemonhub\");\r\n endpoints.MapControllerRoute(\"default\", \"{controller=Home}/{action=Index}/{id?}\");\r\n });\r\n }\r\n }\r\n}\r\n" }, { "path": "parrot/Views/Home/Index.cshtml", "content": "@{\r\n ViewData[\"Title\"] = \"parrot\";\r\n}\r\n\r\n
    \r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n@section footer\r\n{\r\n
\r\n

Connection Status: Idle

\r\n
\r\n}\r\n\r\n@section scripts\r\n{\r\n \r\n \r\n \r\n}" }, { "path": "parrot/Views/Shared/Error.cshtml", "content": "@model ErrorViewModel\r\n@{\r\n ViewData[\"Title\"] = \"Error\";\r\n}\r\n\r\n

Error.

\r\n

An error occurred while processing your request.

\r\n\r\n@if (Model.ShowRequestId)\r\n{\r\n

\r\n Request ID: @Model.RequestId\r\n

\r\n}\r\n\r\n

Development Mode

\r\n

\r\n Swapping to Development environment will display more detailed information about the error that occurred.\r\n

\r\n

\r\n Development environment should not be enabled in deployed applications, as it can result in sensitive information from exceptions being displayed to end users. For local debugging, development environment can be enabled by setting the ASPNETCORE_ENVIRONMENT environment variable to Development, and restarting the application.\r\n

\r\n" }, { "path": "parrot/Views/Shared/_Layout.cshtml", "content": "\r\n\r\n\r\n \r\n \r\n @ViewData[\"Title\"] - parrot\r\n \r\n \r\n\r\n\r\n\r\n
\r\n
\r\n \r\n \r\n parrot tells us whatever captain kube is saying is happening in the cluster\r\n \r\n
\r\n
\r\n\r\n
\r\n @RenderBody()\r\n
\r\n\r\n
\r\n @RenderSection(\"Footer\", required: false)\r\n
\r\n\r\n \r\n \r\n\r\n @RenderSection(\"Scripts\", required: false)\r\n\r\n\r\n" }, { "path": "parrot/Views/Shared/_ValidationScriptsPartial.cshtml", "content": "\r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n" }, { "path": "parrot/Views/_ViewImports.cshtml", "content": "@using parrot\r\n@using parrot.Models\r\n@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers\r\n" }, { "path": "parrot/Views/_ViewStart.cshtml", "content": "@{\r\n Layout = \"_Layout\";\r\n}\r\n" }, { "path": "parrot/appsettings.Development.json", "content": "{\r\n \"Logging\": {\r\n \"IncludeScopes\": false,\r\n \"LogLevel\": {\r\n \"Default\": \"Debug\",\r\n \"System\": \"Information\",\r\n \"Microsoft\": \"Information\"\r\n }\r\n }\r\n}\r\n" }, { "path": "parrot/appsettings.json", "content": "{\r\n \"Logging\": {\r\n \"IncludeScopes\": false,\r\n \"LogLevel\": {\r\n \"Default\": \"Warning\"\r\n }\r\n }\r\n}\r\n" }, { "path": "parrot/bundleconfig.json", "content": "// Configure bundling and minification for the project.\r\n// More info at https://go.microsoft.com/fwlink/?LinkId=808241\r\n[\r\n {\r\n \"outputFileName\": \"wwwroot/css/site.min.css\",\r\n // An array of relative input file paths. Globbing patterns supported\r\n \"inputFiles\": [\r\n \"wwwroot/css/site.css\"\r\n ]\r\n },\r\n {\r\n \"outputFileName\": \"wwwroot/js/site.min.js\",\r\n \"inputFiles\": [\r\n \"wwwroot/js/site.js\"\r\n ],\r\n // Optionally specify minification options\r\n \"minify\": {\r\n \"enabled\": true,\r\n \"renameLocals\": true\r\n },\r\n // Optionally generate .map file\r\n \"sourceMap\": false\r\n }\r\n]\r\n" }, { "path": "parrot/cd-pipeline.yml", "content": "trigger: none\npr: none\n\nvariables:\n- template: ../common/cd-vars-template.yml\n parameters:\n projectName: parrot\n # define 3 more variables: registryName, registryLogin and registryPassword in the Azure pipeline UI definition\n\nresources: \n pipelines:\n - pipeline: ci-pipeline\n source: parrot-ci\n trigger:\n enabled: true\n branches:\n include:\n - master\n\nstages:\n- stage: development\n displayName: development\n jobs:\n - deployment: development\n variables:\n k8sNamespace: 'phippyandfriends'\n # define 5 more variables: aks, rg, aksSpId, aksSpSecret and aksSpTenantId in the Azure pipeline UI definition\n displayName: deploy helm chart into AKS\n pool:\n vmImage: ubuntu-latest\n environment: development-$(projectName)\n strategy:\n runOnce:\n deploy:\n steps:\n - template: ../common/cd-steps-template.yml\n" }, { "path": "parrot/charts/parrot/.helmignore", "content": "# Patterns to ignore when building packages.\n# This supports shell glob matching, relative path matching, and\n# negation (prefixed with !). Only one pattern per line.\n.DS_Store\n# Common VCS dirs\n.git/\n.gitignore\n.bzr/\n.bzrignore\n.hg/\n.hgignore\n.svn/\n# Common backup files\n*.swp\n*.bak\n*.tmp\n*~\n# Various IDEs\n.project\n.idea/\n*.tmproj\n" }, { "path": "parrot/charts/parrot/Chart.yaml", "content": "apiVersion: v1\ndescription: Parrot is Captain Kube's sidekick, who shows everything the captain's doing on-screen. \nname: parrot\nversion: v0.3.0\n" }, { "path": "parrot/charts/parrot/templates/NOTES.txt", "content": "Tail the logs of the lighthouse pod\n\n- kubectl logs -f --namespace {{ .Release.Namespace }} \\\n $(kubectl get pods --namespace {{ .Release.Namespace }} \\\n -l app={{ template \"fullname\" . }} \\\n -o jsonpath='{ .items[0].metadata.name }')\n" }, { "path": "parrot/charts/parrot/templates/_helpers.tpl", "content": "{{/* vim: set filetype=mustache: */}}\n{{/*\nExpand the name of the chart.\n*/}}\n{{- define \"name\" -}}\n{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix \"-\" -}}\n{{- end -}}\n\n{{/*\nCreate a default fully qualified app name.\nWe truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).\n*/}}\n{{- define \"fullname\" -}}\n{{- $name := default .Chart.Name .Values.nameOverride -}}\n{{- printf \"%s-%s\" .Release.Name $name | trunc 63 | trimSuffix \"-\" -}}\n{{- end -}}\n\n{{/*\nGenerate the imagePullSecret for a private Container Registry.\n*/}}\n{{- define \"imagePullSecret\" }}\n{{- printf \"{\\\"auths\\\": {\\\"%s\\\": {\\\"auth\\\": \\\"%s\\\"}}}\" .Values.image.repository (printf \"%s:%s\" .Values.image.username .Values.image.password | b64enc) | b64enc }}\n{{- end }}" }, { "path": "parrot/charts/parrot/templates/deployment.yaml", "content": "apiVersion: apps/v1\nkind: Deployment\nmetadata:\n name: {{ template \"fullname\" . }}\n labels:\n app: {{ template \"fullname\" . }}\n chart: \"{{ .Chart.Name }}-{{ .Chart.Version | replace \"+\" \"_\" }}\"\n release: \"{{ .Release.Name }}\"\n heritage: \"{{ .Release.Service }}\"\nspec:\n replicas: {{ .Values.replicaCount }}\n selector:\n matchLabels:\n app: {{ template \"fullname\" . }}\n template:\n metadata:\n labels:\n app: {{ template \"fullname\" . }}\n spec:\n{{ if .Values.image.useImagePullSecrets }}\n imagePullSecrets:\n - name: {{ .Chart.Name }}-acr-secret\n{{ end }}\n containers:\n - name: {{ .Chart.Name }}\n image: \"{{ .Values.image.repository }}:{{ .Chart.AppVersion }}\"\n imagePullPolicy: {{ .Values.image.pullPolicy }}\n resources:\n{{ toYaml .Values.resources | indent 12 }}\n env:\n - name: ASPNETCORE_ENVIRONMENT\n value: Development\n" }, { "path": "parrot/charts/parrot/templates/ingress.yaml", "content": "{{ if .Values.ingress.enabled }}\napiVersion: extensions/v1beta1\nkind: Ingress\nmetadata:\n name: {{ template \"fullname\" . }}\n labels:\n app: {{ template \"fullname\" . }}\n chart: \"{{ .Chart.Name }}-{{ .Chart.Version | replace \"+\" \"_\" }}\"\n release: \"{{ .Release.Name }}\"\n heritage: \"{{ .Release.Service }}\"\n annotations:\n kubernetes.io/ingress.class: addon-http-application-routing\nspec:\n rules:\n - host: {{ .Release.Name }}.{{ .Values.ingress.basedomain }}\n http:\n paths:\n - path: /\n backend:\n serviceName: {{ template \"fullname\" . }}\n servicePort: {{ .Values.service.externalPort }}\n{{ end }}\n" }, { "path": "parrot/charts/parrot/templates/secret.yaml", "content": "{{ if .Values.image.private }}\napiVersion: v1\nkind: Secret\nmetadata:\n name: {{ .Chart.Name }}-acr-secret\ntype: kubernetes.io/dockerconfigjson\ndata:\n .dockerconfigjson: {{ template \"imagePullSecret\" . }}\n{{ end }}" }, { "path": "parrot/charts/parrot/templates/service.yaml", "content": "apiVersion: v1\nkind: Service\nmetadata:\n name: {{ template \"fullname\" . }}\n labels:\n app: {{ template \"fullname\" . }}\n chart: \"{{ .Chart.Name }}-{{ .Chart.Version }}\"\n release: \"{{ .Release.Name }}\"\n heritage: \"{{ .Release.Service }}\"\nspec:\n ports:\n - port: {{ .Values.service.externalPort }}\n protocol: TCP\n targetPort: {{ .Values.service.internalPort }}\n selector:\n app: {{ template \"fullname\" . }}\n{{ if .Values.ingress.enabled }}\n type: ClusterIP\n{{ else }}\n type: LoadBalancer\n{{ end }}" }, { "path": "parrot/charts/parrot/values.yaml", "content": "replicaCount: 1\nimage:\n useImagePullSecrets: false\n pullPolicy: Always\nservice:\n internalPort: 80\n externalPort: 80\ningress:\n enabled: true\n basedomain: ..aksapp.io # replace with your own from the portal\n" }, { "path": "parrot/ci-pipeline.yml", "content": "trigger:\n batch: true\n branches:\n include: \n - '*'\n paths:\n include: \n - parrot/\n - common/ci-steps-template.yml\n \npr: none\n\npool:\n vmImage: ubuntu-latest\n\nvariables:\n- template: ../common/ci-vars-template.yml\n parameters:\n projectName: parrot\n # define 3 more variables: registryName, registryLogin and registryPassword in the build pipeline in UI\n\nsteps:\n- template: ../common/ci-steps-template.yml\n" }, { "path": "parrot/draft.toml", "content": "[environments]\n [environments.development]\n name = \"parrot\"\n namespace = \"phippyandfriends\"\n wait = true\n watch = false\n watch-delay = 2\n auto-connect = false\n dockerfile = \"\"\n chart = \"\"\n" }, { "path": "parrot/package.json", "content": "{\n \"name\": \"parrot\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"@aspnet/signalr\": \"^1.0.0\",\n \"semantic-ui\": \"^2.3.2\"\n }\n}\n" }, { "path": "parrot/parrot.csproj", "content": "\n\n \n netcoreapp3.1\n \n\n \n \n \n\n \n \n \n \n\n\n" }, { "path": "parrot/semantic/gulpfile.js", "content": "/*******************************\n Set-up\n*******************************/\n\nvar\n gulp = require('gulp-help')(require('gulp')),\n\n // read user config to know what task to load\n config = require('./tasks/config/user'),\n\n // watch changes\n watch = require('./tasks/watch'),\n\n // build all files\n build = require('./tasks/build'),\n buildJS = require('./tasks/build/javascript'),\n buildCSS = require('./tasks/build/css'),\n buildAssets = require('./tasks/build/assets'),\n\n // utility\n clean = require('./tasks/clean'),\n version = require('./tasks/version'),\n\n // docs tasks\n serveDocs = require('./tasks/docs/serve'),\n buildDocs = require('./tasks/docs/build'),\n\n // rtl\n buildRTL = require('./tasks/rtl/build'),\n watchRTL = require('./tasks/rtl/watch')\n;\n\n\n/*******************************\n Tasks\n*******************************/\n\ngulp.task('default', false, [\n 'watch'\n]);\n\ngulp.task('watch', 'Watch for site/theme changes', watch);\n\ngulp.task('build', 'Builds all files from source', build);\ngulp.task('build-javascript', 'Builds all javascript from source', buildJS);\ngulp.task('build-css', 'Builds all css from source', buildCSS);\ngulp.task('build-assets', 'Copies all assets from source', buildAssets);\n\ngulp.task('clean', 'Clean dist folder', clean);\ngulp.task('version', 'Displays current version of Semantic', version);\n\n/*--------------\n Docs\n---------------*/\n\n/*\n Lets you serve files to a local documentation instance\n https://github.com/Semantic-Org/Semantic-UI-Docs/\n*/\n\ngulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs);\ngulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs);\n\n\n/*--------------\n RTL\n---------------*/\n\nif(config.rtl) {\n gulp.task('watch-rtl', 'Watch files as RTL', watchRTL);\n gulp.task('build-rtl', 'Build all files as RTL', buildRTL);\n}\n" }, { "path": "parrot/semantic/src/definitions/behaviors/api.js", "content": "/*!\n * # Semantic UI - API\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nvar\n window = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.api = $.fn.api = function(parameters) {\n\n var\n // use window context if none specified\n $allModules = $.isFunction(this)\n ? $(window)\n : $(this),\n moduleSelector = $allModules.selector || '',\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n\n returnedValue\n ;\n\n $allModules\n .each(function() {\n var\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.fn.api.settings, parameters)\n : $.extend({}, $.fn.api.settings),\n\n // internal aliases\n namespace = settings.namespace,\n metadata = settings.metadata,\n selector = settings.selector,\n error = settings.error,\n className = settings.className,\n\n // define namespaces for modules\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n // element that creates request\n $module = $(this),\n $form = $module.closest(selector.form),\n\n // context used for state\n $context = (settings.stateContext)\n ? $(settings.stateContext)\n : $module,\n\n // request details\n ajaxSettings,\n requestSettings,\n url,\n data,\n requestStartTime,\n\n // standard module\n element = this,\n context = $context[0],\n instance = $module.data(moduleNamespace),\n module\n ;\n\n module = {\n\n initialize: function() {\n if(!methodInvoked) {\n module.bind.events();\n }\n module.instantiate();\n },\n\n instantiate: function() {\n module.verbose('Storing instance of module', module);\n instance = module;\n $module\n .data(moduleNamespace, instance)\n ;\n },\n\n destroy: function() {\n module.verbose('Destroying previous module for', element);\n $module\n .removeData(moduleNamespace)\n .off(eventNamespace)\n ;\n },\n\n bind: {\n events: function() {\n var\n triggerEvent = module.get.event()\n ;\n if( triggerEvent ) {\n module.verbose('Attaching API events to element', triggerEvent);\n $module\n .on(triggerEvent + eventNamespace, module.event.trigger)\n ;\n }\n else if(settings.on == 'now') {\n module.debug('Querying API endpoint immediately');\n module.query();\n }\n }\n },\n\n decode: {\n json: function(response) {\n if(response !== undefined && typeof response == 'string') {\n try {\n response = JSON.parse(response);\n }\n catch(e) {\n // isnt json string\n }\n }\n return response;\n }\n },\n\n read: {\n cachedResponse: function(url) {\n var\n response\n ;\n if(window.Storage === undefined) {\n module.error(error.noStorage);\n return;\n }\n response = sessionStorage.getItem(url);\n module.debug('Using cached response', url, response);\n response = module.decode.json(response);\n return response;\n }\n },\n write: {\n cachedResponse: function(url, response) {\n if(response && response === '') {\n module.debug('Response empty, not caching', response);\n return;\n }\n if(window.Storage === undefined) {\n module.error(error.noStorage);\n return;\n }\n if( $.isPlainObject(response) ) {\n response = JSON.stringify(response);\n }\n sessionStorage.setItem(url, response);\n module.verbose('Storing cached response for url', url, response);\n }\n },\n\n query: function() {\n\n if(module.is.disabled()) {\n module.debug('Element is disabled API request aborted');\n return;\n }\n\n if(module.is.loading()) {\n if(settings.interruptRequests) {\n module.debug('Interrupting previous request');\n module.abort();\n }\n else {\n module.debug('Cancelling request, previous request is still pending');\n return;\n }\n }\n\n // pass element metadata to url (value, text)\n if(settings.defaultData) {\n $.extend(true, settings.urlData, module.get.defaultData());\n }\n\n // Add form content\n if(settings.serializeForm) {\n settings.data = module.add.formData(settings.data);\n }\n\n // call beforesend and get any settings changes\n requestSettings = module.get.settings();\n\n // check if before send cancelled request\n if(requestSettings === false) {\n module.cancelled = true;\n module.error(error.beforeSend);\n return;\n }\n else {\n module.cancelled = false;\n }\n\n // get url\n url = module.get.templatedURL();\n\n if(!url && !module.is.mocked()) {\n module.error(error.missingURL);\n return;\n }\n\n // replace variables\n url = module.add.urlData( url );\n // missing url parameters\n if( !url && !module.is.mocked()) {\n return;\n }\n\n requestSettings.url = settings.base + url;\n\n // look for jQuery ajax parameters in settings\n ajaxSettings = $.extend(true, {}, settings, {\n type : settings.method || settings.type,\n data : data,\n url : settings.base + url,\n beforeSend : settings.beforeXHR,\n success : function() {},\n failure : function() {},\n complete : function() {}\n });\n\n module.debug('Querying URL', ajaxSettings.url);\n module.verbose('Using AJAX settings', ajaxSettings);\n if(settings.cache === 'local' && module.read.cachedResponse(url)) {\n module.debug('Response returned from local cache');\n module.request = module.create.request();\n module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);\n return;\n }\n\n if( !settings.throttle ) {\n module.debug('Sending request', data, ajaxSettings.method);\n module.send.request();\n }\n else {\n if(!settings.throttleFirstRequest && !module.timer) {\n module.debug('Sending request', data, ajaxSettings.method);\n module.send.request();\n module.timer = setTimeout(function(){}, settings.throttle);\n }\n else {\n module.debug('Throttling request', settings.throttle);\n clearTimeout(module.timer);\n module.timer = setTimeout(function() {\n if(module.timer) {\n delete module.timer;\n }\n module.debug('Sending throttled request', data, ajaxSettings.method);\n module.send.request();\n }, settings.throttle);\n }\n }\n\n },\n\n should: {\n removeError: function() {\n return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) );\n }\n },\n\n is: {\n disabled: function() {\n return ($module.filter(selector.disabled).length > 0);\n },\n expectingJSON: function() {\n return settings.dataType === 'json' || settings.dataType === 'jsonp';\n },\n form: function() {\n return $module.is('form') || $context.is('form');\n },\n mocked: function() {\n return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync);\n },\n input: function() {\n return $module.is('input');\n },\n loading: function() {\n return (module.request)\n ? (module.request.state() == 'pending')\n : false\n ;\n },\n abortedRequest: function(xhr) {\n if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) {\n module.verbose('XHR request determined to be aborted');\n return true;\n }\n else {\n module.verbose('XHR request was not aborted');\n return false;\n }\n },\n validResponse: function(response) {\n if( (!module.is.expectingJSON()) || !$.isFunction(settings.successTest) ) {\n module.verbose('Response is not JSON, skipping validation', settings.successTest, response);\n return true;\n }\n module.debug('Checking JSON returned success', settings.successTest, response);\n if( settings.successTest(response) ) {\n module.debug('Response passed success test', response);\n return true;\n }\n else {\n module.debug('Response failed success test', response);\n return false;\n }\n }\n },\n\n was: {\n cancelled: function() {\n return (module.cancelled || false);\n },\n succesful: function() {\n return (module.request && module.request.state() == 'resolved');\n },\n failure: function() {\n return (module.request && module.request.state() == 'rejected');\n },\n complete: function() {\n return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') );\n }\n },\n\n add: {\n urlData: function(url, urlData) {\n var\n requiredVariables,\n optionalVariables\n ;\n if(url) {\n requiredVariables = url.match(settings.regExp.required);\n optionalVariables = url.match(settings.regExp.optional);\n urlData = urlData || settings.urlData;\n if(requiredVariables) {\n module.debug('Looking for required URL variables', requiredVariables);\n $.each(requiredVariables, function(index, templatedString) {\n var\n // allow legacy {$var} style\n variable = (templatedString.indexOf('$') !== -1)\n ? templatedString.substr(2, templatedString.length - 3)\n : templatedString.substr(1, templatedString.length - 2),\n value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)\n ? urlData[variable]\n : ($module.data(variable) !== undefined)\n ? $module.data(variable)\n : ($context.data(variable) !== undefined)\n ? $context.data(variable)\n : urlData[variable]\n ;\n // remove value\n if(value === undefined) {\n module.error(error.requiredParameter, variable, url);\n url = false;\n return false;\n }\n else {\n module.verbose('Found required variable', variable, value);\n value = (settings.encodeParameters)\n ? module.get.urlEncodedValue(value)\n : value\n ;\n url = url.replace(templatedString, value);\n }\n });\n }\n if(optionalVariables) {\n module.debug('Looking for optional URL variables', requiredVariables);\n $.each(optionalVariables, function(index, templatedString) {\n var\n // allow legacy {/$var} style\n variable = (templatedString.indexOf('$') !== -1)\n ? templatedString.substr(3, templatedString.length - 4)\n : templatedString.substr(2, templatedString.length - 3),\n value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)\n ? urlData[variable]\n : ($module.data(variable) !== undefined)\n ? $module.data(variable)\n : ($context.data(variable) !== undefined)\n ? $context.data(variable)\n : urlData[variable]\n ;\n // optional replacement\n if(value !== undefined) {\n module.verbose('Optional variable Found', variable, value);\n url = url.replace(templatedString, value);\n }\n else {\n module.verbose('Optional variable not found', variable);\n // remove preceding slash if set\n if(url.indexOf('/' + templatedString) !== -1) {\n url = url.replace('/' + templatedString, '');\n }\n else {\n url = url.replace(templatedString, '');\n }\n }\n });\n }\n }\n return url;\n },\n formData: function(data) {\n var\n canSerialize = ($.fn.serializeObject !== undefined),\n formData = (canSerialize)\n ? $form.serializeObject()\n : $form.serialize(),\n hasOtherData\n ;\n data = data || settings.data;\n hasOtherData = $.isPlainObject(data);\n\n if(hasOtherData) {\n if(canSerialize) {\n module.debug('Extending existing data with form data', data, formData);\n data = $.extend(true, {}, data, formData);\n }\n else {\n module.error(error.missingSerialize);\n module.debug('Cant extend data. Replacing data with form data', data, formData);\n data = formData;\n }\n }\n else {\n module.debug('Adding form data', formData);\n data = formData;\n }\n return data;\n }\n },\n\n send: {\n request: function() {\n module.set.loading();\n module.request = module.create.request();\n if( module.is.mocked() ) {\n module.mockedXHR = module.create.mockedXHR();\n }\n else {\n module.xhr = module.create.xhr();\n }\n settings.onRequest.call(context, module.request, module.xhr);\n }\n },\n\n event: {\n trigger: function(event) {\n module.query();\n if(event.type == 'submit' || event.type == 'click') {\n event.preventDefault();\n }\n },\n xhr: {\n always: function() {\n // nothing special\n },\n done: function(response, textStatus, xhr) {\n var\n context = this,\n elapsedTime = (new Date().getTime() - requestStartTime),\n timeLeft = (settings.loadingDuration - elapsedTime),\n translatedResponse = ( $.isFunction(settings.onResponse) )\n ? module.is.expectingJSON()\n ? settings.onResponse.call(context, $.extend(true, {}, response))\n : settings.onResponse.call(context, response)\n : false\n ;\n timeLeft = (timeLeft > 0)\n ? timeLeft\n : 0\n ;\n if(translatedResponse) {\n module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response);\n response = translatedResponse;\n }\n if(timeLeft > 0) {\n module.debug('Response completed early delaying state change by', timeLeft);\n }\n setTimeout(function() {\n if( module.is.validResponse(response) ) {\n module.request.resolveWith(context, [response, xhr]);\n }\n else {\n module.request.rejectWith(context, [xhr, 'invalid']);\n }\n }, timeLeft);\n },\n fail: function(xhr, status, httpMessage) {\n var\n context = this,\n elapsedTime = (new Date().getTime() - requestStartTime),\n timeLeft = (settings.loadingDuration - elapsedTime)\n ;\n timeLeft = (timeLeft > 0)\n ? timeLeft\n : 0\n ;\n if(timeLeft > 0) {\n module.debug('Response completed early delaying state change by', timeLeft);\n }\n setTimeout(function() {\n if( module.is.abortedRequest(xhr) ) {\n module.request.rejectWith(context, [xhr, 'aborted', httpMessage]);\n }\n else {\n module.request.rejectWith(context, [xhr, 'error', status, httpMessage]);\n }\n }, timeLeft);\n }\n },\n request: {\n done: function(response, xhr) {\n module.debug('Successful API Response', response);\n if(settings.cache === 'local' && url) {\n module.write.cachedResponse(url, response);\n module.debug('Saving server response locally', module.cache);\n }\n settings.onSuccess.call(context, response, $module, xhr);\n },\n complete: function(firstParameter, secondParameter) {\n var\n xhr,\n response\n ;\n // have to guess callback parameters based on request success\n if( module.was.succesful() ) {\n response = firstParameter;\n xhr = secondParameter;\n }\n else {\n xhr = firstParameter;\n response = module.get.responseFromXHR(xhr);\n }\n module.remove.loading();\n settings.onComplete.call(context, response, $module, xhr);\n },\n fail: function(xhr, status, httpMessage) {\n var\n // pull response from xhr if available\n response = module.get.responseFromXHR(xhr),\n errorMessage = module.get.errorFromRequest(response, status, httpMessage)\n ;\n if(status == 'aborted') {\n module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage);\n settings.onAbort.call(context, status, $module, xhr);\n return true;\n }\n else if(status == 'invalid') {\n module.debug('JSON did not pass success test. A server-side error has most likely occurred', response);\n }\n else if(status == 'error') {\n if(xhr !== undefined) {\n module.debug('XHR produced a server error', status, httpMessage);\n // make sure we have an error to display to console\n if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') {\n module.error(error.statusMessage + httpMessage, ajaxSettings.url);\n }\n settings.onError.call(context, errorMessage, $module, xhr);\n }\n }\n\n if(settings.errorDuration && status !== 'aborted') {\n module.debug('Adding error state');\n module.set.error();\n if( module.should.removeError() ) {\n setTimeout(module.remove.error, settings.errorDuration);\n }\n }\n module.debug('API Request failed', errorMessage, xhr);\n settings.onFailure.call(context, response, $module, xhr);\n }\n }\n },\n\n create: {\n\n request: function() {\n // api request promise\n return $.Deferred()\n .always(module.event.request.complete)\n .done(module.event.request.done)\n .fail(module.event.request.fail)\n ;\n },\n\n mockedXHR: function () {\n var\n // xhr does not simulate these properties of xhr but must return them\n textStatus = false,\n status = false,\n httpMessage = false,\n responder = settings.mockResponse || settings.response,\n asyncResponder = settings.mockResponseAsync || settings.responseAsync,\n asyncCallback,\n response,\n mockedXHR\n ;\n\n mockedXHR = $.Deferred()\n .always(module.event.xhr.complete)\n .done(module.event.xhr.done)\n .fail(module.event.xhr.fail)\n ;\n\n if(responder) {\n if( $.isFunction(responder) ) {\n module.debug('Using specified synchronous callback', responder);\n response = responder.call(context, requestSettings);\n }\n else {\n module.debug('Using settings specified response', responder);\n response = responder;\n }\n // simulating response\n mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);\n }\n else if( $.isFunction(asyncResponder) ) {\n asyncCallback = function(response) {\n module.debug('Async callback returned response', response);\n\n if(response) {\n mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);\n }\n else {\n mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]);\n }\n };\n module.debug('Using specified async response callback', asyncResponder);\n asyncResponder.call(context, requestSettings, asyncCallback);\n }\n return mockedXHR;\n },\n\n xhr: function() {\n var\n xhr\n ;\n // ajax request promise\n xhr = $.ajax(ajaxSettings)\n .always(module.event.xhr.always)\n .done(module.event.xhr.done)\n .fail(module.event.xhr.fail)\n ;\n module.verbose('Created server request', xhr, ajaxSettings);\n return xhr;\n }\n },\n\n set: {\n error: function() {\n module.verbose('Adding error state to element', $context);\n $context.addClass(className.error);\n },\n loading: function() {\n module.verbose('Adding loading state to element', $context);\n $context.addClass(className.loading);\n requestStartTime = new Date().getTime();\n }\n },\n\n remove: {\n error: function() {\n module.verbose('Removing error state from element', $context);\n $context.removeClass(className.error);\n },\n loading: function() {\n module.verbose('Removing loading state from element', $context);\n $context.removeClass(className.loading);\n }\n },\n\n get: {\n responseFromXHR: function(xhr) {\n return $.isPlainObject(xhr)\n ? (module.is.expectingJSON())\n ? module.decode.json(xhr.responseText)\n : xhr.responseText\n : false\n ;\n },\n errorFromRequest: function(response, status, httpMessage) {\n return ($.isPlainObject(response) && response.error !== undefined)\n ? response.error // use json error message\n : (settings.error[status] !== undefined) // use server error message\n ? settings.error[status]\n : httpMessage\n ;\n },\n request: function() {\n return module.request || false;\n },\n xhr: function() {\n return module.xhr || false;\n },\n settings: function() {\n var\n runSettings\n ;\n runSettings = settings.beforeSend.call(context, settings);\n if(runSettings) {\n if(runSettings.success !== undefined) {\n module.debug('Legacy success callback detected', runSettings);\n module.error(error.legacyParameters, runSettings.success);\n runSettings.onSuccess = runSettings.success;\n }\n if(runSettings.failure !== undefined) {\n module.debug('Legacy failure callback detected', runSettings);\n module.error(error.legacyParameters, runSettings.failure);\n runSettings.onFailure = runSettings.failure;\n }\n if(runSettings.complete !== undefined) {\n module.debug('Legacy complete callback detected', runSettings);\n module.error(error.legacyParameters, runSettings.complete);\n runSettings.onComplete = runSettings.complete;\n }\n }\n if(runSettings === undefined) {\n module.error(error.noReturnedValue);\n }\n if(runSettings === false) {\n return runSettings;\n }\n return (runSettings !== undefined)\n ? $.extend(true, {}, runSettings)\n : $.extend(true, {}, settings)\n ;\n },\n urlEncodedValue: function(value) {\n var\n decodedValue = window.decodeURIComponent(value),\n encodedValue = window.encodeURIComponent(value),\n alreadyEncoded = (decodedValue !== value)\n ;\n if(alreadyEncoded) {\n module.debug('URL value is already encoded, avoiding double encoding', value);\n return value;\n }\n module.verbose('Encoding value using encodeURIComponent', value, encodedValue);\n return encodedValue;\n },\n defaultData: function() {\n var\n data = {}\n ;\n if( !$.isWindow(element) ) {\n if( module.is.input() ) {\n data.value = $module.val();\n }\n else if( module.is.form() ) {\n\n }\n else {\n data.text = $module.text();\n }\n }\n return data;\n },\n event: function() {\n if( $.isWindow(element) || settings.on == 'now' ) {\n module.debug('API called without element, no events attached');\n return false;\n }\n else if(settings.on == 'auto') {\n if( $module.is('input') ) {\n return (element.oninput !== undefined)\n ? 'input'\n : (element.onpropertychange !== undefined)\n ? 'propertychange'\n : 'keyup'\n ;\n }\n else if( $module.is('form') ) {\n return 'submit';\n }\n else {\n return 'click';\n }\n }\n else {\n return settings.on;\n }\n },\n templatedURL: function(action) {\n action = action || $module.data(metadata.action) || settings.action || false;\n url = $module.data(metadata.url) || settings.url || false;\n if(url) {\n module.debug('Using specified url', url);\n return url;\n }\n if(action) {\n module.debug('Looking up url for action', action, settings.api);\n if(settings.api[action] === undefined && !module.is.mocked()) {\n module.error(error.missingAction, settings.action, settings.api);\n return;\n }\n url = settings.api[action];\n }\n else if( module.is.form() ) {\n url = $module.attr('action') || $context.attr('action') || false;\n module.debug('No url or action specified, defaulting to form action', url);\n }\n return url;\n }\n },\n\n abort: function() {\n var\n xhr = module.get.xhr()\n ;\n if( xhr && xhr.state() !== 'resolved') {\n module.debug('Cancelling API request');\n xhr.abort();\n }\n },\n\n // reset state\n reset: function() {\n module.remove.error();\n module.remove.loading();\n },\n\n setting: function(name, value) {\n module.debug('Changing setting', name, value);\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n if($.isPlainObject(settings[name])) {\n $.extend(true, settings[name], value);\n }\n else {\n settings[name] = value;\n }\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n //'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.initialize();\n }\n })\n ;\n\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.api.settings = {\n\n name : 'API',\n namespace : 'api',\n\n debug : false,\n verbose : false,\n performance : true,\n\n // object containing all templates endpoints\n api : {},\n\n // whether to cache responses\n cache : true,\n\n // whether new requests should abort previous requests\n interruptRequests : true,\n\n // event binding\n on : 'auto',\n\n // context for applying state classes\n stateContext : false,\n\n // duration for loading state\n loadingDuration : 0,\n\n // whether to hide errors after a period of time\n hideError : 'auto',\n\n // duration for error state\n errorDuration : 2000,\n\n // whether parameters should be encoded with encodeURIComponent\n encodeParameters : true,\n\n // API action to use\n action : false,\n\n // templated URL to use\n url : false,\n\n // base URL to apply to all endpoints\n base : '',\n\n // data that will\n urlData : {},\n\n // whether to add default data to url data\n defaultData : true,\n\n // whether to serialize closest form\n serializeForm : false,\n\n // how long to wait before request should occur\n throttle : 0,\n\n // whether to throttle first request or only repeated\n throttleFirstRequest : true,\n\n // standard ajax settings\n method : 'get',\n data : {},\n dataType : 'json',\n\n // mock response\n mockResponse : false,\n mockResponseAsync : false,\n\n // aliases for mock\n response : false,\n responseAsync : false,\n\n // callbacks before request\n beforeSend : function(settings) { return settings; },\n beforeXHR : function(xhr) {},\n onRequest : function(promise, xhr) {},\n\n // after request\n onResponse : false, // function(response) { },\n\n // response was successful, if JSON passed validation\n onSuccess : function(response, $module) {},\n\n // request finished without aborting\n onComplete : function(response, $module) {},\n\n // failed JSON success test\n onFailure : function(response, $module) {},\n\n // server error\n onError : function(errorMessage, $module) {},\n\n // request aborted\n onAbort : function(errorMessage, $module) {},\n\n successTest : false,\n\n // errors\n error : {\n beforeSend : 'The before send function has aborted the request',\n error : 'There was an error with your request',\n exitConditions : 'API Request Aborted. Exit conditions met',\n JSONParse : 'JSON could not be parsed during error handling',\n legacyParameters : 'You are using legacy API success callback names',\n method : 'The method you called is not defined',\n missingAction : 'API action used but no url was defined',\n missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object',\n missingURL : 'No URL specified for api event',\n noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',\n noStorage : 'Caching responses locally requires session storage',\n parseError : 'There was an error parsing your request',\n requiredParameter : 'Missing a required URL parameter: ',\n statusMessage : 'Server gave an error: ',\n timeout : 'Your request timed out'\n },\n\n regExp : {\n required : /\\{\\$*[A-z0-9]+\\}/g,\n optional : /\\{\\/\\$*[A-z0-9]+\\}/g,\n },\n\n className: {\n loading : 'loading',\n error : 'error'\n },\n\n selector: {\n disabled : '.disabled',\n form : 'form'\n },\n\n metadata: {\n action : 'action',\n url : 'url'\n }\n};\n\n\n\n})( jQuery, window, document );\n" }, { "path": "parrot/semantic/src/definitions/behaviors/form.js", "content": "/*!\n * # Semantic UI - Form Validation\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.form = function(parameters) {\n var\n $allModules = $(this),\n moduleSelector = $allModules.selector || '',\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n legacyParameters = arguments[1],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n returnedValue\n ;\n $allModules\n .each(function() {\n var\n $module = $(this),\n element = this,\n\n formErrors = [],\n keyHeldDown = false,\n\n // set at run-time\n $field,\n $group,\n $message,\n $prompt,\n $submit,\n $clear,\n $reset,\n\n settings,\n validation,\n\n metadata,\n selector,\n className,\n regExp,\n error,\n\n namespace,\n moduleNamespace,\n eventNamespace,\n\n instance,\n module\n ;\n\n module = {\n\n initialize: function() {\n\n // settings grabbed at run time\n module.get.settings();\n if(methodInvoked) {\n if(instance === undefined) {\n module.instantiate();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.verbose('Initializing form validation', $module, settings);\n module.bindEvents();\n module.set.defaults();\n module.instantiate();\n }\n },\n\n instantiate: function() {\n module.verbose('Storing instance of module', module);\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n destroy: function() {\n module.verbose('Destroying previous module', instance);\n module.removeEvents();\n $module\n .removeData(moduleNamespace)\n ;\n },\n\n refresh: function() {\n module.verbose('Refreshing selector cache');\n $field = $module.find(selector.field);\n $group = $module.find(selector.group);\n $message = $module.find(selector.message);\n $prompt = $module.find(selector.prompt);\n\n $submit = $module.find(selector.submit);\n $clear = $module.find(selector.clear);\n $reset = $module.find(selector.reset);\n },\n\n submit: function() {\n module.verbose('Submitting form', $module);\n $module\n .submit()\n ;\n },\n\n attachEvents: function(selector, action) {\n action = action || 'submit';\n $(selector)\n .on('click' + eventNamespace, function(event) {\n module[action]();\n event.preventDefault();\n })\n ;\n },\n\n bindEvents: function() {\n module.verbose('Attaching form events');\n $module\n .on('submit' + eventNamespace, module.validate.form)\n .on('blur' + eventNamespace, selector.field, module.event.field.blur)\n .on('click' + eventNamespace, selector.submit, module.submit)\n .on('click' + eventNamespace, selector.reset, module.reset)\n .on('click' + eventNamespace, selector.clear, module.clear)\n ;\n if(settings.keyboardShortcuts) {\n $module\n .on('keydown' + eventNamespace, selector.field, module.event.field.keydown)\n ;\n }\n $field\n .each(function() {\n var\n $input = $(this),\n type = $input.prop('type'),\n inputEvent = module.get.changeEvent(type, $input)\n ;\n $(this)\n .on(inputEvent + eventNamespace, module.event.field.change)\n ;\n })\n ;\n },\n\n clear: function() {\n $field\n .each(function () {\n var\n $field = $(this),\n $element = $field.parent(),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.find(selector.prompt),\n defaultValue = $field.data(metadata.defaultValue) || '',\n isCheckbox = $element.is(selector.uiCheckbox),\n isDropdown = $element.is(selector.uiDropdown),\n isErrored = $fieldGroup.hasClass(className.error)\n ;\n if(isErrored) {\n module.verbose('Resetting error on field', $fieldGroup);\n $fieldGroup.removeClass(className.error);\n $prompt.remove();\n }\n if(isDropdown) {\n module.verbose('Resetting dropdown value', $element, defaultValue);\n $element.dropdown('clear');\n }\n else if(isCheckbox) {\n $field.prop('checked', false);\n }\n else {\n module.verbose('Resetting field value', $field, defaultValue);\n $field.val('');\n }\n })\n ;\n },\n\n reset: function() {\n $field\n .each(function () {\n var\n $field = $(this),\n $element = $field.parent(),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.find(selector.prompt),\n defaultValue = $field.data(metadata.defaultValue),\n isCheckbox = $element.is(selector.uiCheckbox),\n isDropdown = $element.is(selector.uiDropdown),\n isErrored = $fieldGroup.hasClass(className.error)\n ;\n if(defaultValue === undefined) {\n return;\n }\n if(isErrored) {\n module.verbose('Resetting error on field', $fieldGroup);\n $fieldGroup.removeClass(className.error);\n $prompt.remove();\n }\n if(isDropdown) {\n module.verbose('Resetting dropdown value', $element, defaultValue);\n $element.dropdown('restore defaults');\n }\n else if(isCheckbox) {\n module.verbose('Resetting checkbox value', $element, defaultValue);\n $field.prop('checked', defaultValue);\n }\n else {\n module.verbose('Resetting field value', $field, defaultValue);\n $field.val(defaultValue);\n }\n })\n ;\n },\n\n determine: {\n isValid: function() {\n var\n allValid = true\n ;\n $.each(validation, function(fieldName, field) {\n if( !( module.validate.field(field, fieldName, true) ) ) {\n allValid = false;\n }\n });\n return allValid;\n }\n },\n\n is: {\n bracketedRule: function(rule) {\n return (rule.type && rule.type.match(settings.regExp.bracket));\n },\n shorthandFields: function(fields) {\n var\n fieldKeys = Object.keys(fields),\n firstRule = fields[fieldKeys[0]]\n ;\n return module.is.shorthandRules(firstRule);\n },\n // duck type rule test\n shorthandRules: function(rules) {\n return (typeof rules == 'string' || $.isArray(rules));\n },\n empty: function($field) {\n if(!$field || $field.length === 0) {\n return true;\n }\n else if($field.is('input[type=\"checkbox\"]')) {\n return !$field.is(':checked');\n }\n else {\n return module.is.blank($field);\n }\n },\n blank: function($field) {\n return $.trim($field.val()) === '';\n },\n valid: function(field) {\n var\n allValid = true\n ;\n if(field) {\n module.verbose('Checking if field is valid', field);\n return module.validate.field(validation[field], field, false);\n }\n else {\n module.verbose('Checking if form is valid');\n $.each(validation, function(fieldName, field) {\n if( !module.is.valid(fieldName) ) {\n allValid = false;\n }\n });\n return allValid;\n }\n }\n },\n\n removeEvents: function() {\n $module\n .off(eventNamespace)\n ;\n $field\n .off(eventNamespace)\n ;\n $submit\n .off(eventNamespace)\n ;\n $field\n .off(eventNamespace)\n ;\n },\n\n event: {\n field: {\n keydown: function(event) {\n var\n $field = $(this),\n key = event.which,\n isInput = $field.is(selector.input),\n isCheckbox = $field.is(selector.checkbox),\n isInDropdown = ($field.closest(selector.uiDropdown).length > 0),\n keyCode = {\n enter : 13,\n escape : 27\n }\n ;\n if( key == keyCode.escape) {\n module.verbose('Escape key pressed blurring field');\n $field\n .blur()\n ;\n }\n if(!event.ctrlKey && key == keyCode.enter && isInput && !isInDropdown && !isCheckbox) {\n if(!keyHeldDown) {\n $field\n .one('keyup' + eventNamespace, module.event.field.keyup)\n ;\n module.submit();\n module.debug('Enter pressed on input submitting form');\n }\n keyHeldDown = true;\n }\n },\n keyup: function() {\n keyHeldDown = false;\n },\n blur: function(event) {\n var\n $field = $(this),\n $fieldGroup = $field.closest($group),\n validationRules = module.get.validation($field)\n ;\n if( $fieldGroup.hasClass(className.error) ) {\n module.debug('Revalidating field', $field, validationRules);\n if(validationRules) {\n module.validate.field( validationRules );\n }\n }\n else if(settings.on == 'blur') {\n if(validationRules) {\n module.validate.field( validationRules );\n }\n }\n },\n change: function(event) {\n var\n $field = $(this),\n $fieldGroup = $field.closest($group),\n validationRules = module.get.validation($field)\n ;\n if(validationRules && (settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) )) {\n clearTimeout(module.timer);\n module.timer = setTimeout(function() {\n module.debug('Revalidating field', $field, module.get.validation($field));\n module.validate.field( validationRules );\n }, settings.delay);\n }\n }\n }\n\n },\n\n get: {\n ancillaryValue: function(rule) {\n if(!rule.type || (!rule.value && !module.is.bracketedRule(rule))) {\n return false;\n }\n return (rule.value !== undefined)\n ? rule.value\n : rule.type.match(settings.regExp.bracket)[1] + ''\n ;\n },\n ruleName: function(rule) {\n if( module.is.bracketedRule(rule) ) {\n return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], '');\n }\n return rule.type;\n },\n changeEvent: function(type, $input) {\n if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) {\n return 'change';\n }\n else {\n return module.get.inputEvent();\n }\n },\n inputEvent: function() {\n return (document.createElement('input').oninput !== undefined)\n ? 'input'\n : (document.createElement('input').onpropertychange !== undefined)\n ? 'propertychange'\n : 'keyup'\n ;\n },\n fieldsFromShorthand: function(fields) {\n var\n fullFields = {}\n ;\n $.each(fields, function(name, rules) {\n if(typeof rules == 'string') {\n rules = [rules];\n }\n fullFields[name] = {\n rules: []\n };\n $.each(rules, function(index, rule) {\n fullFields[name].rules.push({ type: rule });\n });\n });\n return fullFields;\n },\n prompt: function(rule, field) {\n var\n ruleName = module.get.ruleName(rule),\n ancillary = module.get.ancillaryValue(rule),\n $field = module.get.field(field.identifier),\n value = $field.val(),\n prompt = $.isFunction(rule.prompt)\n ? rule.prompt(value)\n : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,\n requiresValue = (prompt.search('{value}') !== -1),\n requiresName = (prompt.search('{name}') !== -1),\n $label,\n name\n ;\n if(requiresValue) {\n prompt = prompt.replace('{value}', $field.val());\n }\n if(requiresName) {\n $label = $field.closest(selector.group).find('label').eq(0);\n name = ($label.length == 1)\n ? $label.text()\n : $field.prop('placeholder') || settings.text.unspecifiedField\n ;\n prompt = prompt.replace('{name}', name);\n }\n prompt = prompt.replace('{identifier}', field.identifier);\n prompt = prompt.replace('{ruleValue}', ancillary);\n if(!rule.prompt) {\n module.verbose('Using default validation prompt for type', prompt, ruleName);\n }\n return prompt;\n },\n settings: function() {\n if($.isPlainObject(parameters)) {\n var\n keys = Object.keys(parameters),\n isLegacySettings = (keys.length > 0)\n ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined)\n : false,\n ruleKeys\n ;\n if(isLegacySettings) {\n // 1.x (ducktyped)\n settings = $.extend(true, {}, $.fn.form.settings, legacyParameters);\n validation = $.extend({}, $.fn.form.settings.defaults, parameters);\n module.error(settings.error.oldSyntax, element);\n module.verbose('Extending settings from legacy parameters', validation, settings);\n }\n else {\n // 2.x\n if(parameters.fields && module.is.shorthandFields(parameters.fields)) {\n parameters.fields = module.get.fieldsFromShorthand(parameters.fields);\n }\n settings = $.extend(true, {}, $.fn.form.settings, parameters);\n validation = $.extend({}, $.fn.form.settings.defaults, settings.fields);\n module.verbose('Extending settings', validation, settings);\n }\n }\n else {\n settings = $.fn.form.settings;\n validation = $.fn.form.settings.defaults;\n module.verbose('Using default form validation', validation, settings);\n }\n\n // shorthand\n namespace = settings.namespace;\n metadata = settings.metadata;\n selector = settings.selector;\n className = settings.className;\n regExp = settings.regExp;\n error = settings.error;\n moduleNamespace = 'module-' + namespace;\n eventNamespace = '.' + namespace;\n\n // grab instance\n instance = $module.data(moduleNamespace);\n\n // refresh selector cache\n module.refresh();\n },\n field: function(identifier) {\n module.verbose('Finding field with identifier', identifier);\n identifier = module.escape.string(identifier);\n if($field.filter('#' + identifier).length > 0 ) {\n return $field.filter('#' + identifier);\n }\n else if( $field.filter('[name=\"' + identifier +'\"]').length > 0 ) {\n return $field.filter('[name=\"' + identifier +'\"]');\n }\n else if( $field.filter('[name=\"' + identifier +'[]\"]').length > 0 ) {\n return $field.filter('[name=\"' + identifier +'[]\"]');\n }\n else if( $field.filter('[data-' + metadata.validate + '=\"'+ identifier +'\"]').length > 0 ) {\n return $field.filter('[data-' + metadata.validate + '=\"'+ identifier +'\"]');\n }\n return $('');\n },\n fields: function(fields) {\n var\n $fields = $()\n ;\n $.each(fields, function(index, name) {\n $fields = $fields.add( module.get.field(name) );\n });\n return $fields;\n },\n validation: function($field) {\n var\n fieldValidation,\n identifier\n ;\n if(!validation) {\n return false;\n }\n $.each(validation, function(fieldName, field) {\n identifier = field.identifier || fieldName;\n if( module.get.field(identifier)[0] == $field[0] ) {\n field.identifier = identifier;\n fieldValidation = field;\n }\n });\n return fieldValidation || false;\n },\n value: function (field) {\n var\n fields = [],\n results\n ;\n fields.push(field);\n results = module.get.values.call(element, fields);\n return results[field];\n },\n values: function (fields) {\n var\n $fields = $.isArray(fields)\n ? module.get.fields(fields)\n : $field,\n values = {}\n ;\n $fields.each(function(index, field) {\n var\n $field = $(field),\n type = $field.prop('type'),\n name = $field.prop('name'),\n value = $field.val(),\n isCheckbox = $field.is(selector.checkbox),\n isRadio = $field.is(selector.radio),\n isMultiple = (name.indexOf('[]') !== -1),\n isChecked = (isCheckbox)\n ? $field.is(':checked')\n : false\n ;\n if(name) {\n if(isMultiple) {\n name = name.replace('[]', '');\n if(!values[name]) {\n values[name] = [];\n }\n if(isCheckbox) {\n if(isChecked) {\n values[name].push(value || true);\n }\n else {\n values[name].push(false);\n }\n }\n else {\n values[name].push(value);\n }\n }\n else {\n if(isRadio) {\n if(values[name] === undefined || values[name] == false) {\n values[name] = (isChecked)\n ? value || true\n : false\n ;\n }\n }\n else if(isCheckbox) {\n if(isChecked) {\n values[name] = value || true;\n }\n else {\n values[name] = false;\n }\n }\n else {\n values[name] = value;\n }\n }\n }\n });\n return values;\n }\n },\n\n has: {\n\n field: function(identifier) {\n module.verbose('Checking for existence of a field with identifier', identifier);\n identifier = module.escape.string(identifier);\n if(typeof identifier !== 'string') {\n module.error(error.identifier, identifier);\n }\n if($field.filter('#' + identifier).length > 0 ) {\n return true;\n }\n else if( $field.filter('[name=\"' + identifier +'\"]').length > 0 ) {\n return true;\n }\n else if( $field.filter('[data-' + metadata.validate + '=\"'+ identifier +'\"]').length > 0 ) {\n return true;\n }\n return false;\n }\n\n },\n\n escape: {\n string: function(text) {\n text = String(text);\n return text.replace(regExp.escape, '\\\\$&');\n }\n },\n\n add: {\n // alias\n rule: function(name, rules) {\n module.add.field(name, rules);\n },\n field: function(name, rules) {\n var\n newValidation = {}\n ;\n if(module.is.shorthandRules(rules)) {\n rules = $.isArray(rules)\n ? rules\n : [rules]\n ;\n newValidation[name] = {\n rules: []\n };\n $.each(rules, function(index, rule) {\n newValidation[name].rules.push({ type: rule });\n });\n }\n else {\n newValidation[name] = rules;\n }\n validation = $.extend({}, validation, newValidation);\n module.debug('Adding rules', newValidation, validation);\n },\n fields: function(fields) {\n var\n newValidation\n ;\n if(fields && module.is.shorthandFields(fields)) {\n newValidation = module.get.fieldsFromShorthand(fields);\n }\n else {\n newValidation = fields;\n }\n validation = $.extend({}, validation, newValidation);\n },\n prompt: function(identifier, errors) {\n var\n $field = module.get.field(identifier),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.children(selector.prompt),\n promptExists = ($prompt.length !== 0)\n ;\n errors = (typeof errors == 'string')\n ? [errors]\n : errors\n ;\n module.verbose('Adding field error state', identifier);\n $fieldGroup\n .addClass(className.error)\n ;\n if(settings.inline) {\n if(!promptExists) {\n $prompt = settings.templates.prompt(errors);\n $prompt\n .appendTo($fieldGroup)\n ;\n }\n $prompt\n .html(errors[0])\n ;\n if(!promptExists) {\n if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {\n module.verbose('Displaying error with css transition', settings.transition);\n $prompt.transition(settings.transition + ' in', settings.duration);\n }\n else {\n module.verbose('Displaying error with fallback javascript animation');\n $prompt\n .fadeIn(settings.duration)\n ;\n }\n }\n else {\n module.verbose('Inline errors are disabled, no inline error added', identifier);\n }\n }\n },\n errors: function(errors) {\n module.debug('Adding form error messages', errors);\n module.set.error();\n $message\n .html( settings.templates.error(errors) )\n ;\n }\n },\n\n remove: {\n rule: function(field, rule) {\n var\n rules = $.isArray(rule)\n ? rule\n : [rule]\n ;\n if(rule == undefined) {\n module.debug('Removed all rules');\n validation[field].rules = [];\n return;\n }\n if(validation[field] == undefined || !$.isArray(validation[field].rules)) {\n return;\n }\n $.each(validation[field].rules, function(index, rule) {\n if(rules.indexOf(rule.type) !== -1) {\n module.debug('Removed rule', rule.type);\n validation[field].rules.splice(index, 1);\n }\n });\n },\n field: function(field) {\n var\n fields = $.isArray(field)\n ? field\n : [field]\n ;\n $.each(fields, function(index, field) {\n module.remove.rule(field);\n });\n },\n // alias\n rules: function(field, rules) {\n if($.isArray(field)) {\n $.each(fields, function(index, field) {\n module.remove.rule(field, rules);\n });\n }\n else {\n module.remove.rule(field, rules);\n }\n },\n fields: function(fields) {\n module.remove.field(fields);\n },\n prompt: function(identifier) {\n var\n $field = module.get.field(identifier),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.children(selector.prompt)\n ;\n $fieldGroup\n .removeClass(className.error)\n ;\n if(settings.inline && $prompt.is(':visible')) {\n module.verbose('Removing prompt for field', identifier);\n if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {\n $prompt.transition(settings.transition + ' out', settings.duration, function() {\n $prompt.remove();\n });\n }\n else {\n $prompt\n .fadeOut(settings.duration, function(){\n $prompt.remove();\n })\n ;\n }\n }\n }\n },\n\n set: {\n success: function() {\n $module\n .removeClass(className.error)\n .addClass(className.success)\n ;\n },\n defaults: function () {\n $field\n .each(function () {\n var\n $field = $(this),\n isCheckbox = ($field.filter(selector.checkbox).length > 0),\n value = (isCheckbox)\n ? $field.is(':checked')\n : $field.val()\n ;\n $field.data(metadata.defaultValue, value);\n })\n ;\n },\n error: function() {\n $module\n .removeClass(className.success)\n .addClass(className.error)\n ;\n },\n value: function (field, value) {\n var\n fields = {}\n ;\n fields[field] = value;\n return module.set.values.call(element, fields);\n },\n values: function (fields) {\n if($.isEmptyObject(fields)) {\n return;\n }\n $.each(fields, function(key, value) {\n var\n $field = module.get.field(key),\n $element = $field.parent(),\n isMultiple = $.isArray(value),\n isCheckbox = $element.is(selector.uiCheckbox),\n isDropdown = $element.is(selector.uiDropdown),\n isRadio = ($field.is(selector.radio) && isCheckbox),\n fieldExists = ($field.length > 0),\n $multipleField\n ;\n if(fieldExists) {\n if(isMultiple && isCheckbox) {\n module.verbose('Selecting multiple', value, $field);\n $element.checkbox('uncheck');\n $.each(value, function(index, value) {\n $multipleField = $field.filter('[value=\"' + value + '\"]');\n $element = $multipleField.parent();\n if($multipleField.length > 0) {\n $element.checkbox('check');\n }\n });\n }\n else if(isRadio) {\n module.verbose('Selecting radio value', value, $field);\n $field.filter('[value=\"' + value + '\"]')\n .parent(selector.uiCheckbox)\n .checkbox('check')\n ;\n }\n else if(isCheckbox) {\n module.verbose('Setting checkbox value', value, $element);\n if(value === true) {\n $element.checkbox('check');\n }\n else {\n $element.checkbox('uncheck');\n }\n }\n else if(isDropdown) {\n module.verbose('Setting dropdown value', value, $element);\n $element.dropdown('set selected', value);\n }\n else {\n module.verbose('Setting field value', value, $field);\n $field.val(value);\n }\n }\n });\n }\n },\n\n validate: {\n\n form: function(event, ignoreCallbacks) {\n var\n values = module.get.values(),\n apiRequest\n ;\n\n // input keydown event will fire submit repeatedly by browser default\n if(keyHeldDown) {\n return false;\n }\n\n // reset errors\n formErrors = [];\n if( module.determine.isValid() ) {\n module.debug('Form has no validation errors, submitting');\n module.set.success();\n if(ignoreCallbacks !== true) {\n return settings.onSuccess.call(element, event, values);\n }\n }\n else {\n module.debug('Form has errors');\n module.set.error();\n if(!settings.inline) {\n module.add.errors(formErrors);\n }\n // prevent ajax submit\n if($module.data('moduleApi') !== undefined) {\n event.stopImmediatePropagation();\n }\n if(ignoreCallbacks !== true) {\n return settings.onFailure.call(element, formErrors, values);\n }\n }\n },\n\n // takes a validation object and returns whether field passes validation\n field: function(field, fieldName, showErrors) {\n showErrors = (showErrors !== undefined)\n ? showErrors\n : true\n ;\n if(typeof field == 'string') {\n module.verbose('Validating field', field);\n fieldName = field;\n field = validation[field];\n }\n var\n identifier = field.identifier || fieldName,\n $field = module.get.field(identifier),\n $dependsField = (field.depends)\n ? module.get.field(field.depends)\n : false,\n fieldValid = true,\n fieldErrors = []\n ;\n if(!field.identifier) {\n module.debug('Using field name as identifier', identifier);\n field.identifier = identifier;\n }\n if($field.prop('disabled')) {\n module.debug('Field is disabled. Skipping', identifier);\n fieldValid = true;\n }\n else if(field.optional && module.is.blank($field)){\n module.debug('Field is optional and blank. Skipping', identifier);\n fieldValid = true;\n }\n else if(field.depends && module.is.empty($dependsField)) {\n module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField);\n fieldValid = true;\n }\n else if(field.rules !== undefined) {\n $.each(field.rules, function(index, rule) {\n if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) {\n module.debug('Field is invalid', identifier, rule.type);\n fieldErrors.push(module.get.prompt(rule, field));\n fieldValid = false;\n }\n });\n }\n if(fieldValid) {\n if(showErrors) {\n module.remove.prompt(identifier, fieldErrors);\n settings.onValid.call($field);\n }\n }\n else {\n if(showErrors) {\n formErrors = formErrors.concat(fieldErrors);\n module.add.prompt(identifier, fieldErrors);\n settings.onInvalid.call($field, fieldErrors);\n }\n return false;\n }\n return true;\n },\n\n // takes validation rule and returns whether field passes rule\n rule: function(field, rule) {\n var\n $field = module.get.field(field.identifier),\n type = rule.type,\n value = $field.val(),\n isValid = true,\n ancillary = module.get.ancillaryValue(rule),\n ruleName = module.get.ruleName(rule),\n ruleFunction = settings.rules[ruleName]\n ;\n if( !$.isFunction(ruleFunction) ) {\n module.error(error.noRule, ruleName);\n return;\n }\n // cast to string avoiding encoding special values\n value = (value === undefined || value === '' || value === null)\n ? ''\n : $.trim(value + '')\n ;\n return ruleFunction.call($field, value, ancillary);\n }\n },\n\n setting: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n settings[name] = value;\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if($allModules.length > 1) {\n title += ' ' + '(' + $allModules.length + ')';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n return false;\n }\n });\n }\n if( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n module.initialize();\n })\n ;\n\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.fn.form.settings = {\n\n name : 'Form',\n namespace : 'form',\n\n debug : false,\n verbose : false,\n performance : true,\n\n fields : false,\n\n keyboardShortcuts : true,\n on : 'submit',\n inline : false,\n\n delay : 200,\n revalidate : true,\n\n transition : 'scale',\n duration : 200,\n\n onValid : function() {},\n onInvalid : function() {},\n onSuccess : function() { return true; },\n onFailure : function() { return false; },\n\n metadata : {\n defaultValue : 'default',\n validate : 'validate'\n },\n\n regExp: {\n htmlID : /^[a-zA-Z][\\w:.-]*$/g,\n bracket : /\\[(.*)\\]/i,\n decimal : /^\\d+\\.?\\d*$/,\n email : /^[a-z0-9!#$%&'*+\\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,\n escape : /[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g,\n flags : /^\\/(.*)\\/(.*)?/,\n integer : /^\\-?\\d+$/,\n number : /^\\-?\\d*(\\.\\d+)?$/,\n url : /(https?:\\/\\/(?:www\\.|(?!www))[^\\s\\.]+\\.[^\\s]{2,}|www\\.[^\\s]+\\.[^\\s]{2,})/i\n },\n\n text: {\n unspecifiedRule : 'Please enter a valid value',\n unspecifiedField : 'This field'\n },\n\n prompt: {\n empty : '{name} must have a value',\n checked : '{name} must be checked',\n email : '{name} must be a valid e-mail',\n url : '{name} must be a valid url',\n regExp : '{name} is not formatted correctly',\n integer : '{name} must be an integer',\n decimal : '{name} must be a decimal number',\n number : '{name} must be set to a number',\n is : '{name} must be \"{ruleValue}\"',\n isExactly : '{name} must be exactly \"{ruleValue}\"',\n not : '{name} cannot be set to \"{ruleValue}\"',\n notExactly : '{name} cannot be set to exactly \"{ruleValue}\"',\n contain : '{name} must contain \"{ruleValue}\"',\n containExactly : '{name} must contain exactly \"{ruleValue}\"',\n doesntContain : '{name} cannot contain \"{ruleValue}\"',\n doesntContainExactly : '{name} cannot contain exactly \"{ruleValue}\"',\n minLength : '{name} must be at least {ruleValue} characters',\n length : '{name} must be at least {ruleValue} characters',\n exactLength : '{name} must be exactly {ruleValue} characters',\n maxLength : '{name} cannot be longer than {ruleValue} characters',\n match : '{name} must match {ruleValue} field',\n different : '{name} must have a different value than {ruleValue} field',\n creditCard : '{name} must be a valid credit card number',\n minCount : '{name} must have at least {ruleValue} choices',\n exactCount : '{name} must have exactly {ruleValue} choices',\n maxCount : '{name} must have {ruleValue} or less choices'\n },\n\n selector : {\n checkbox : 'input[type=\"checkbox\"], input[type=\"radio\"]',\n clear : '.clear',\n field : 'input, textarea, select',\n group : '.field',\n input : 'input',\n message : '.error.message',\n prompt : '.prompt.label',\n radio : 'input[type=\"radio\"]',\n reset : '.reset:not([type=\"reset\"])',\n submit : '.submit:not([type=\"submit\"])',\n uiCheckbox : '.ui.checkbox',\n uiDropdown : '.ui.dropdown'\n },\n\n className : {\n error : 'error',\n label : 'ui prompt label',\n pressed : 'down',\n success : 'success'\n },\n\n error: {\n identifier : 'You must specify a string identifier for each field',\n method : 'The method you called is not defined.',\n noRule : 'There is no rule matching the one you specified',\n oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.'\n },\n\n templates: {\n\n // template that produces error message\n error: function(errors) {\n var\n html = '
    '\n ;\n $.each(errors, function(index, value) {\n html += '
  • ' + value + '
    • ';\n });\n html += '
';\n return $(html);\n },\n\n // template that produces label\n prompt: function(errors) {\n return $('
')\n .addClass('ui basic red pointing prompt label')\n .html(errors[0])\n ;\n }\n },\n\n rules: {\n\n // is not empty or blank string\n empty: function(value) {\n return !(value === undefined || '' === value || $.isArray(value) && value.length === 0);\n },\n\n // checkbox checked\n checked: function() {\n return ($(this).filter(':checked').length > 0);\n },\n\n // is most likely an email\n email: function(value){\n return $.fn.form.settings.regExp.email.test(value);\n },\n\n // value is most likely url\n url: function(value) {\n return $.fn.form.settings.regExp.url.test(value);\n },\n\n // matches specified regExp\n regExp: function(value, regExp) {\n if(regExp instanceof RegExp) {\n return value.match(regExp);\n }\n var\n regExpParts = regExp.match($.fn.form.settings.regExp.flags),\n flags\n ;\n // regular expression specified as /baz/gi (flags)\n if(regExpParts) {\n regExp = (regExpParts.length >= 2)\n ? regExpParts[1]\n : regExp\n ;\n flags = (regExpParts.length >= 3)\n ? regExpParts[2]\n : ''\n ;\n }\n return value.match( new RegExp(regExp, flags) );\n },\n\n // is valid integer or matches range\n integer: function(value, range) {\n var\n intRegExp = $.fn.form.settings.regExp.integer,\n min,\n max,\n parts\n ;\n if( !range || ['', '..'].indexOf(range) !== -1) {\n // do nothing\n }\n else if(range.indexOf('..') == -1) {\n if(intRegExp.test(range)) {\n min = max = range - 0;\n }\n }\n else {\n parts = range.split('..', 2);\n if(intRegExp.test(parts[0])) {\n min = parts[0] - 0;\n }\n if(intRegExp.test(parts[1])) {\n max = parts[1] - 0;\n }\n }\n return (\n intRegExp.test(value) &&\n (min === undefined || value >= min) &&\n (max === undefined || value <= max)\n );\n },\n\n // is valid number (with decimal)\n decimal: function(value) {\n return $.fn.form.settings.regExp.decimal.test(value);\n },\n\n // is valid number\n number: function(value) {\n return $.fn.form.settings.regExp.number.test(value);\n },\n\n // is value (case insensitive)\n is: function(value, text) {\n text = (typeof text == 'string')\n ? text.toLowerCase()\n : text\n ;\n value = (typeof value == 'string')\n ? value.toLowerCase()\n : value\n ;\n return (value == text);\n },\n\n // is value\n isExactly: function(value, text) {\n return (value == text);\n },\n\n // value is not another value (case insensitive)\n not: function(value, notValue) {\n value = (typeof value == 'string')\n ? value.toLowerCase()\n : value\n ;\n notValue = (typeof notValue == 'string')\n ? notValue.toLowerCase()\n : notValue\n ;\n return (value != notValue);\n },\n\n // value is not another value (case sensitive)\n notExactly: function(value, notValue) {\n return (value != notValue);\n },\n\n // value contains text (insensitive)\n contains: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text, 'i') ) !== -1);\n },\n\n // value contains text (case sensitive)\n containsExactly: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text) ) !== -1);\n },\n\n // value contains text (insensitive)\n doesntContain: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text, 'i') ) === -1);\n },\n\n // value contains text (case sensitive)\n doesntContainExactly: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text) ) === -1);\n },\n\n // is at least string length\n minLength: function(value, requiredLength) {\n return (value !== undefined)\n ? (value.length >= requiredLength)\n : false\n ;\n },\n\n // see rls notes for 2.0.6 (this is a duplicate of minLength)\n length: function(value, requiredLength) {\n return (value !== undefined)\n ? (value.length >= requiredLength)\n : false\n ;\n },\n\n // is exactly length\n exactLength: function(value, requiredLength) {\n return (value !== undefined)\n ? (value.length == requiredLength)\n : false\n ;\n },\n\n // is less than length\n maxLength: function(value, maxLength) {\n return (value !== undefined)\n ? (value.length <= maxLength)\n : false\n ;\n },\n\n // matches another field\n match: function(value, identifier) {\n var\n $form = $(this),\n matchingValue\n ;\n if( $('[data-validate=\"'+ identifier +'\"]').length > 0 ) {\n matchingValue = $('[data-validate=\"'+ identifier +'\"]').val();\n }\n else if($('#' + identifier).length > 0) {\n matchingValue = $('#' + identifier).val();\n }\n else if($('[name=\"' + identifier +'\"]').length > 0) {\n matchingValue = $('[name=\"' + identifier + '\"]').val();\n }\n else if( $('[name=\"' + identifier +'[]\"]').length > 0 ) {\n matchingValue = $('[name=\"' + identifier +'[]\"]');\n }\n return (matchingValue !== undefined)\n ? ( value.toString() == matchingValue.toString() )\n : false\n ;\n },\n\n // different than another field\n different: function(value, identifier) {\n // use either id or name of field\n var\n $form = $(this),\n matchingValue\n ;\n if( $('[data-validate=\"'+ identifier +'\"]').length > 0 ) {\n matchingValue = $('[data-validate=\"'+ identifier +'\"]').val();\n }\n else if($('#' + identifier).length > 0) {\n matchingValue = $('#' + identifier).val();\n }\n else if($('[name=\"' + identifier +'\"]').length > 0) {\n matchingValue = $('[name=\"' + identifier + '\"]').val();\n }\n else if( $('[name=\"' + identifier +'[]\"]').length > 0 ) {\n matchingValue = $('[name=\"' + identifier +'[]\"]');\n }\n return (matchingValue !== undefined)\n ? ( value.toString() !== matchingValue.toString() )\n : false\n ;\n },\n\n creditCard: function(cardNumber, cardTypes) {\n var\n cards = {\n visa: {\n pattern : /^4/,\n length : [16]\n },\n amex: {\n pattern : /^3[47]/,\n length : [15]\n },\n mastercard: {\n pattern : /^5[1-5]/,\n length : [16]\n },\n discover: {\n 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)/,\n length : [16]\n },\n unionPay: {\n pattern : /^(62|88)/,\n length : [16, 17, 18, 19]\n },\n jcb: {\n pattern : /^35(2[89]|[3-8][0-9])/,\n length : [16]\n },\n maestro: {\n pattern : /^(5018|5020|5038|6304|6759|676[1-3])/,\n length : [12, 13, 14, 15, 16, 17, 18, 19]\n },\n dinersClub: {\n pattern : /^(30[0-5]|^36)/,\n length : [14]\n },\n laser: {\n pattern : /^(6304|670[69]|6771)/,\n length : [16, 17, 18, 19]\n },\n visaElectron: {\n pattern : /^(4026|417500|4508|4844|491(3|7))/,\n length : [16]\n }\n },\n valid = {},\n validCard = false,\n requiredTypes = (typeof cardTypes == 'string')\n ? cardTypes.split(',')\n : false,\n unionPay,\n validation\n ;\n\n if(typeof cardNumber !== 'string' || cardNumber.length === 0) {\n return;\n }\n\n // allow dashes in card\n cardNumber = cardNumber.replace(/[\\-]/g, '');\n\n // verify card types\n if(requiredTypes) {\n $.each(requiredTypes, function(index, type){\n // verify each card type\n validation = cards[type];\n if(validation) {\n valid = {\n length : ($.inArray(cardNumber.length, validation.length) !== -1),\n pattern : (cardNumber.search(validation.pattern) !== -1)\n };\n if(valid.length && valid.pattern) {\n validCard = true;\n }\n }\n });\n\n if(!validCard) {\n return false;\n }\n }\n\n // skip luhn for UnionPay\n unionPay = {\n number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1),\n pattern : (cardNumber.search(cards.unionPay.pattern) !== -1)\n };\n if(unionPay.number && unionPay.pattern) {\n return true;\n }\n\n // verify luhn, adapted from \n var\n length = cardNumber.length,\n multiple = 0,\n producedValue = [\n [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]\n ],\n sum = 0\n ;\n while (length--) {\n sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)];\n multiple ^= 1;\n }\n return (sum % 10 === 0 && sum > 0);\n },\n\n minCount: function(value, minCount) {\n if(minCount == 0) {\n return true;\n }\n if(minCount == 1) {\n return (value !== '');\n }\n return (value.split(',').length >= minCount);\n },\n\n exactCount: function(value, exactCount) {\n if(exactCount == 0) {\n return (value === '');\n }\n if(exactCount == 1) {\n return (value !== '' && value.search(',') === -1);\n }\n return (value.split(',').length == exactCount);\n },\n\n maxCount: function(value, maxCount) {\n if(maxCount == 0) {\n return false;\n }\n if(maxCount == 1) {\n return (value.search(',') === -1);\n }\n return (value.split(',').length <= maxCount);\n }\n }\n\n};\n\n})( jQuery, window, document );\n" }, { "path": "parrot/semantic/src/definitions/behaviors/visibility.js", "content": "/*!\n * # Semantic UI - Visibility\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.visibility = function(parameters) {\n var\n $allModules = $(this),\n moduleSelector = $allModules.selector || '',\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n returnedValue,\n\n moduleCount = $allModules.length,\n loadedCount = 0\n ;\n\n $allModules\n .each(function() {\n var\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.fn.visibility.settings, parameters)\n : $.extend({}, $.fn.visibility.settings),\n\n className = settings.className,\n namespace = settings.namespace,\n error = settings.error,\n metadata = settings.metadata,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n $window = $(window),\n\n $module = $(this),\n $context = $(settings.context),\n\n $placeholder,\n\n selector = $module.selector || '',\n instance = $module.data(moduleNamespace),\n\n requestAnimationFrame = window.requestAnimationFrame\n || window.mozRequestAnimationFrame\n || window.webkitRequestAnimationFrame\n || window.msRequestAnimationFrame\n || function(callback) { setTimeout(callback, 0); },\n\n element = this,\n disabled = false,\n\n contextObserver,\n observer,\n module\n ;\n\n module = {\n\n initialize: function() {\n module.debug('Initializing', settings);\n\n module.setup.cache();\n\n if( module.should.trackChanges() ) {\n\n if(settings.type == 'image') {\n module.setup.image();\n }\n if(settings.type == 'fixed') {\n module.setup.fixed();\n }\n\n if(settings.observeChanges) {\n module.observeChanges();\n }\n module.bind.events();\n }\n\n module.save.position();\n if( !module.is.visible() ) {\n module.error(error.visible, $module);\n }\n\n if(settings.initialCheck) {\n module.checkVisibility();\n }\n module.instantiate();\n },\n\n instantiate: function() {\n module.debug('Storing instance', module);\n $module\n .data(moduleNamespace, module)\n ;\n instance = module;\n },\n\n destroy: function() {\n module.verbose('Destroying previous module');\n if(observer) {\n observer.disconnect();\n }\n if(contextObserver) {\n contextObserver.disconnect();\n }\n $window\n .off('load' + eventNamespace, module.event.load)\n .off('resize' + eventNamespace, module.event.resize)\n ;\n $context\n .off('scroll' + eventNamespace, module.event.scroll)\n .off('scrollchange' + eventNamespace, module.event.scrollchange)\n ;\n if(settings.type == 'fixed') {\n module.resetFixed();\n module.remove.placeholder();\n }\n $module\n .off(eventNamespace)\n .removeData(moduleNamespace)\n ;\n },\n\n observeChanges: function() {\n if('MutationObserver' in window) {\n contextObserver = new MutationObserver(module.event.contextChanged);\n observer = new MutationObserver(module.event.changed);\n contextObserver.observe(document, {\n childList : true,\n subtree : true\n });\n observer.observe(element, {\n childList : true,\n subtree : true\n });\n module.debug('Setting up mutation observer', observer);\n }\n },\n\n bind: {\n events: function() {\n module.verbose('Binding visibility events to scroll and resize');\n if(settings.refreshOnLoad) {\n $window\n .on('load' + eventNamespace, module.event.load)\n ;\n }\n $window\n .on('resize' + eventNamespace, module.event.resize)\n ;\n // pub/sub pattern\n $context\n .off('scroll' + eventNamespace)\n .on('scroll' + eventNamespace, module.event.scroll)\n .on('scrollchange' + eventNamespace, module.event.scrollchange)\n ;\n }\n },\n\n event: {\n changed: function(mutations) {\n module.verbose('DOM tree modified, updating visibility calculations');\n module.timer = setTimeout(function() {\n module.verbose('DOM tree modified, updating sticky menu');\n module.refresh();\n }, 100);\n },\n contextChanged: function(mutations) {\n [].forEach.call(mutations, function(mutation) {\n if(mutation.removedNodes) {\n [].forEach.call(mutation.removedNodes, function(node) {\n if(node == element || $(node).find(element).length > 0) {\n module.debug('Element removed from DOM, tearing down events');\n module.destroy();\n }\n });\n }\n });\n },\n resize: function() {\n module.debug('Window resized');\n if(settings.refreshOnResize) {\n requestAnimationFrame(module.refresh);\n }\n },\n load: function() {\n module.debug('Page finished loading');\n requestAnimationFrame(module.refresh);\n },\n // publishes scrollchange event on one scroll\n scroll: function() {\n if(settings.throttle) {\n clearTimeout(module.timer);\n module.timer = setTimeout(function() {\n $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);\n }, settings.throttle);\n }\n else {\n requestAnimationFrame(function() {\n $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);\n });\n }\n },\n // subscribes to scrollchange\n scrollchange: function(event, scrollPosition) {\n module.checkVisibility(scrollPosition);\n },\n },\n\n precache: function(images, callback) {\n if (!(images instanceof Array)) {\n images = [images];\n }\n var\n imagesLength = images.length,\n loadedCounter = 0,\n cache = [],\n cacheImage = document.createElement('img'),\n handleLoad = function() {\n loadedCounter++;\n if (loadedCounter >= images.length) {\n if ($.isFunction(callback)) {\n callback();\n }\n }\n }\n ;\n while (imagesLength--) {\n cacheImage = document.createElement('img');\n cacheImage.onload = handleLoad;\n cacheImage.onerror = handleLoad;\n cacheImage.src = images[imagesLength];\n cache.push(cacheImage);\n }\n },\n\n enableCallbacks: function() {\n module.debug('Allowing callbacks to occur');\n disabled = false;\n },\n\n disableCallbacks: function() {\n module.debug('Disabling all callbacks temporarily');\n disabled = true;\n },\n\n should: {\n trackChanges: function() {\n if(methodInvoked) {\n module.debug('One time query, no need to bind events');\n return false;\n }\n module.debug('Callbacks being attached');\n return true;\n }\n },\n\n setup: {\n cache: function() {\n module.cache = {\n occurred : {},\n screen : {},\n element : {},\n };\n },\n image: function() {\n var\n src = $module.data(metadata.src)\n ;\n if(src) {\n module.verbose('Lazy loading image', src);\n settings.once = true;\n settings.observeChanges = false;\n\n // show when top visible\n settings.onOnScreen = function() {\n module.debug('Image on screen', element);\n module.precache(src, function() {\n module.set.image(src, function() {\n loadedCount++;\n if(loadedCount == moduleCount) {\n settings.onAllLoaded.call(this);\n }\n settings.onLoad.call(this);\n });\n });\n };\n }\n },\n fixed: function() {\n module.debug('Setting up fixed');\n settings.once = false;\n settings.observeChanges = false;\n settings.initialCheck = true;\n settings.refreshOnLoad = true;\n if(!parameters.transition) {\n settings.transition = false;\n }\n module.create.placeholder();\n module.debug('Added placeholder', $placeholder);\n settings.onTopPassed = function() {\n module.debug('Element passed, adding fixed position', $module);\n module.show.placeholder();\n module.set.fixed();\n if(settings.transition) {\n if($.fn.transition !== undefined) {\n $module.transition(settings.transition, settings.duration);\n }\n }\n };\n settings.onTopPassedReverse = function() {\n module.debug('Element returned to position, removing fixed', $module);\n module.hide.placeholder();\n module.remove.fixed();\n };\n }\n },\n\n create: {\n placeholder: function() {\n module.verbose('Creating fixed position placeholder');\n $placeholder = $module\n .clone(false)\n .css('display', 'none')\n .addClass(className.placeholder)\n .insertAfter($module)\n ;\n }\n },\n\n show: {\n placeholder: function() {\n module.verbose('Showing placeholder');\n $placeholder\n .css('display', 'block')\n .css('visibility', 'hidden')\n ;\n }\n },\n hide: {\n placeholder: function() {\n module.verbose('Hiding placeholder');\n $placeholder\n .css('display', 'none')\n .css('visibility', '')\n ;\n }\n },\n\n set: {\n fixed: function() {\n module.verbose('Setting element to fixed position');\n $module\n .addClass(className.fixed)\n .css({\n position : 'fixed',\n top : settings.offset + 'px',\n left : 'auto',\n zIndex : settings.zIndex\n })\n ;\n settings.onFixed.call(element);\n },\n image: function(src, callback) {\n $module\n .attr('src', src)\n ;\n if(settings.transition) {\n if( $.fn.transition !== undefined) {\n if($module.hasClass(className.visible)) {\n module.debug('Transition already occurred on this image, skipping animation');\n return;\n }\n $module.transition(settings.transition, settings.duration, callback);\n }\n else {\n $module.fadeIn(settings.duration, callback);\n }\n }\n else {\n $module.show();\n }\n }\n },\n\n is: {\n onScreen: function() {\n var\n calculations = module.get.elementCalculations()\n ;\n return calculations.onScreen;\n },\n offScreen: function() {\n var\n calculations = module.get.elementCalculations()\n ;\n return calculations.offScreen;\n },\n visible: function() {\n if(module.cache && module.cache.element) {\n return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0);\n }\n return false;\n },\n verticallyScrollableContext: function() {\n var\n overflowY = ($context.get(0) !== window)\n ? $context.css('overflow-y')\n : false\n ;\n return (overflowY == 'auto' || overflowY == 'scroll');\n },\n horizontallyScrollableContext: function() {\n var\n overflowX = ($context.get(0) !== window)\n ? $context.css('overflow-x')\n : false\n ;\n return (overflowX == 'auto' || overflowX == 'scroll');\n }\n },\n\n refresh: function() {\n module.debug('Refreshing constants (width/height)');\n if(settings.type == 'fixed') {\n module.resetFixed();\n }\n module.reset();\n module.save.position();\n if(settings.checkOnRefresh) {\n module.checkVisibility();\n }\n settings.onRefresh.call(element);\n },\n\n resetFixed: function () {\n module.remove.fixed();\n module.remove.occurred();\n },\n\n reset: function() {\n module.verbose('Resetting all cached values');\n if( $.isPlainObject(module.cache) ) {\n module.cache.screen = {};\n module.cache.element = {};\n }\n },\n\n checkVisibility: function(scroll) {\n module.verbose('Checking visibility of element', module.cache.element);\n\n if( !disabled && module.is.visible() ) {\n\n // save scroll position\n module.save.scroll(scroll);\n\n // update calculations derived from scroll\n module.save.calculations();\n\n // percentage\n module.passed();\n\n // reverse (must be first)\n module.passingReverse();\n module.topVisibleReverse();\n module.bottomVisibleReverse();\n module.topPassedReverse();\n module.bottomPassedReverse();\n\n // one time\n module.onScreen();\n module.offScreen();\n module.passing();\n module.topVisible();\n module.bottomVisible();\n module.topPassed();\n module.bottomPassed();\n\n // on update callback\n if(settings.onUpdate) {\n settings.onUpdate.call(element, module.get.elementCalculations());\n }\n }\n },\n\n passed: function(amount, newCallback) {\n var\n calculations = module.get.elementCalculations(),\n amountInPixels\n ;\n // assign callback\n if(amount && newCallback) {\n settings.onPassed[amount] = newCallback;\n }\n else if(amount !== undefined) {\n return (module.get.pixelsPassed(amount) > calculations.pixelsPassed);\n }\n else if(calculations.passing) {\n $.each(settings.onPassed, function(amount, callback) {\n if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) {\n module.execute(callback, amount);\n }\n else if(!settings.once) {\n module.remove.occurred(callback);\n }\n });\n }\n },\n\n onScreen: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onOnScreen,\n callbackName = 'onScreen'\n ;\n if(newCallback) {\n module.debug('Adding callback for onScreen', newCallback);\n settings.onOnScreen = newCallback;\n }\n if(calculations.onScreen) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return calculations.onOnScreen;\n }\n },\n\n offScreen: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onOffScreen,\n callbackName = 'offScreen'\n ;\n if(newCallback) {\n module.debug('Adding callback for offScreen', newCallback);\n settings.onOffScreen = newCallback;\n }\n if(calculations.offScreen) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return calculations.onOffScreen;\n }\n },\n\n passing: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onPassing,\n callbackName = 'passing'\n ;\n if(newCallback) {\n module.debug('Adding callback for passing', newCallback);\n settings.onPassing = newCallback;\n }\n if(calculations.passing) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return calculations.passing;\n }\n },\n\n\n topVisible: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopVisible,\n callbackName = 'topVisible'\n ;\n if(newCallback) {\n module.debug('Adding callback for top visible', newCallback);\n settings.onTopVisible = newCallback;\n }\n if(calculations.topVisible) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.topVisible;\n }\n },\n\n bottomVisible: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomVisible,\n callbackName = 'bottomVisible'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom visible', newCallback);\n settings.onBottomVisible = newCallback;\n }\n if(calculations.bottomVisible) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.bottomVisible;\n }\n },\n\n topPassed: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopPassed,\n callbackName = 'topPassed'\n ;\n if(newCallback) {\n module.debug('Adding callback for top passed', newCallback);\n settings.onTopPassed = newCallback;\n }\n if(calculations.topPassed) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.topPassed;\n }\n },\n\n bottomPassed: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomPassed,\n callbackName = 'bottomPassed'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom passed', newCallback);\n settings.onBottomPassed = newCallback;\n }\n if(calculations.bottomPassed) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.bottomPassed;\n }\n },\n\n passingReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onPassingReverse,\n callbackName = 'passingReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for passing reverse', newCallback);\n settings.onPassingReverse = newCallback;\n }\n if(!calculations.passing) {\n if(module.get.occurred('passing')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return !calculations.passing;\n }\n },\n\n\n topVisibleReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopVisibleReverse,\n callbackName = 'topVisibleReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for top visible reverse', newCallback);\n settings.onTopVisibleReverse = newCallback;\n }\n if(!calculations.topVisible) {\n if(module.get.occurred('topVisible')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.topVisible;\n }\n },\n\n bottomVisibleReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomVisibleReverse,\n callbackName = 'bottomVisibleReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom visible reverse', newCallback);\n settings.onBottomVisibleReverse = newCallback;\n }\n if(!calculations.bottomVisible) {\n if(module.get.occurred('bottomVisible')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.bottomVisible;\n }\n },\n\n topPassedReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopPassedReverse,\n callbackName = 'topPassedReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for top passed reverse', newCallback);\n settings.onTopPassedReverse = newCallback;\n }\n if(!calculations.topPassed) {\n if(module.get.occurred('topPassed')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.onTopPassed;\n }\n },\n\n bottomPassedReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomPassedReverse,\n callbackName = 'bottomPassedReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom passed reverse', newCallback);\n settings.onBottomPassedReverse = newCallback;\n }\n if(!calculations.bottomPassed) {\n if(module.get.occurred('bottomPassed')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.bottomPassed;\n }\n },\n\n execute: function(callback, callbackName) {\n var\n calculations = module.get.elementCalculations(),\n screen = module.get.screenCalculations()\n ;\n callback = callback || false;\n if(callback) {\n if(settings.continuous) {\n module.debug('Callback being called continuously', callbackName, calculations);\n callback.call(element, calculations, screen);\n }\n else if(!module.get.occurred(callbackName)) {\n module.debug('Conditions met', callbackName, calculations);\n callback.call(element, calculations, screen);\n }\n }\n module.save.occurred(callbackName);\n },\n\n remove: {\n fixed: function() {\n module.debug('Removing fixed position');\n $module\n .removeClass(className.fixed)\n .css({\n position : '',\n top : '',\n left : '',\n zIndex : ''\n })\n ;\n settings.onUnfixed.call(element);\n },\n placeholder: function() {\n module.debug('Removing placeholder content');\n if($placeholder) {\n $placeholder.remove();\n }\n },\n occurred: function(callback) {\n if(callback) {\n var\n occurred = module.cache.occurred\n ;\n if(occurred[callback] !== undefined && occurred[callback] === true) {\n module.debug('Callback can now be called again', callback);\n module.cache.occurred[callback] = false;\n }\n }\n else {\n module.cache.occurred = {};\n }\n }\n },\n\n save: {\n calculations: function() {\n module.verbose('Saving all calculations necessary to determine positioning');\n module.save.direction();\n module.save.screenCalculations();\n module.save.elementCalculations();\n },\n occurred: function(callback) {\n if(callback) {\n if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) {\n module.verbose('Saving callback occurred', callback);\n module.cache.occurred[callback] = true;\n }\n }\n },\n scroll: function(scrollPosition) {\n scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset;\n module.cache.scroll = scrollPosition;\n },\n direction: function() {\n var\n scroll = module.get.scroll(),\n lastScroll = module.get.lastScroll(),\n direction\n ;\n if(scroll > lastScroll && lastScroll) {\n direction = 'down';\n }\n else if(scroll < lastScroll && lastScroll) {\n direction = 'up';\n }\n else {\n direction = 'static';\n }\n module.cache.direction = direction;\n return module.cache.direction;\n },\n elementPosition: function() {\n var\n element = module.cache.element,\n screen = module.get.screenSize()\n ;\n module.verbose('Saving element position');\n // (quicker than $.extend)\n element.fits = (element.height < screen.height);\n element.offset = $module.offset();\n element.width = $module.outerWidth();\n element.height = $module.outerHeight();\n // compensate for scroll in context\n if(module.is.verticallyScrollableContext()) {\n element.offset.top += $context.scrollTop() - $context.offset().top;\n }\n if(module.is.horizontallyScrollableContext()) {\n element.offset.left += $context.scrollLeft - $context.offset().left;\n }\n // store\n module.cache.element = element;\n return element;\n },\n elementCalculations: function() {\n var\n screen = module.get.screenCalculations(),\n element = module.get.elementPosition()\n ;\n // offset\n if(settings.includeMargin) {\n element.margin = {};\n element.margin.top = parseInt($module.css('margin-top'), 10);\n element.margin.bottom = parseInt($module.css('margin-bottom'), 10);\n element.top = element.offset.top - element.margin.top;\n element.bottom = element.offset.top + element.height + element.margin.bottom;\n }\n else {\n element.top = element.offset.top;\n element.bottom = element.offset.top + element.height;\n }\n\n // visibility\n element.topPassed = (screen.top >= element.top);\n element.bottomPassed = (screen.top >= element.bottom);\n element.topVisible = (screen.bottom >= element.top) && !element.topPassed;\n element.bottomVisible = (screen.bottom >= element.bottom) && !element.bottomPassed;\n element.pixelsPassed = 0;\n element.percentagePassed = 0;\n\n // meta calculations\n element.onScreen = ((element.topVisible || element.passing) && !element.bottomPassed);\n element.passing = (element.topPassed && !element.bottomPassed);\n element.offScreen = (!element.onScreen);\n\n // passing calculations\n if(element.passing) {\n element.pixelsPassed = (screen.top - element.top);\n element.percentagePassed = (screen.top - element.top) / element.height;\n }\n module.cache.element = element;\n module.verbose('Updated element calculations', element);\n return element;\n },\n screenCalculations: function() {\n var\n scroll = module.get.scroll()\n ;\n module.save.direction();\n module.cache.screen.top = scroll;\n module.cache.screen.bottom = scroll + module.cache.screen.height;\n return module.cache.screen;\n },\n screenSize: function() {\n module.verbose('Saving window position');\n module.cache.screen = {\n height: $context.height()\n };\n },\n position: function() {\n module.save.screenSize();\n module.save.elementPosition();\n }\n },\n\n get: {\n pixelsPassed: function(amount) {\n var\n element = module.get.elementCalculations()\n ;\n if(amount.search('%') > -1) {\n return ( element.height * (parseInt(amount, 10) / 100) );\n }\n return parseInt(amount, 10);\n },\n occurred: function(callback) {\n return (module.cache.occurred !== undefined)\n ? module.cache.occurred[callback] || false\n : false\n ;\n },\n direction: function() {\n if(module.cache.direction === undefined) {\n module.save.direction();\n }\n return module.cache.direction;\n },\n elementPosition: function() {\n if(module.cache.element === undefined) {\n module.save.elementPosition();\n }\n return module.cache.element;\n },\n elementCalculations: function() {\n if(module.cache.element === undefined) {\n module.save.elementCalculations();\n }\n return module.cache.element;\n },\n screenCalculations: function() {\n if(module.cache.screen === undefined) {\n module.save.screenCalculations();\n }\n return module.cache.screen;\n },\n screenSize: function() {\n if(module.cache.screen === undefined) {\n module.save.screenSize();\n }\n return module.cache.screen;\n },\n scroll: function() {\n if(module.cache.scroll === undefined) {\n module.save.scroll();\n }\n return module.cache.scroll;\n },\n lastScroll: function() {\n if(module.cache.screen === undefined) {\n module.debug('First scroll event, no last scroll could be found');\n return false;\n }\n return module.cache.screen.top;\n }\n },\n\n setting: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n settings[name] = value;\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n instance.save.scroll();\n instance.save.calculations();\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.initialize();\n }\n })\n ;\n\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.fn.visibility.settings = {\n\n name : 'Visibility',\n namespace : 'visibility',\n\n debug : false,\n verbose : false,\n performance : true,\n\n // whether to use mutation observers to follow changes\n observeChanges : true,\n\n // check position immediately on init\n initialCheck : true,\n\n // whether to refresh calculations after all page images load\n refreshOnLoad : true,\n\n // whether to refresh calculations after page resize event\n refreshOnResize : true,\n\n // should call callbacks on refresh event (resize, etc)\n checkOnRefresh : true,\n\n // callback should only occur one time\n once : true,\n\n // callback should fire continuously whe evaluates to true\n continuous : false,\n\n // offset to use with scroll top\n offset : 0,\n\n // whether to include margin in elements position\n includeMargin : false,\n\n // scroll context for visibility checks\n context : window,\n\n // visibility check delay in ms (defaults to animationFrame)\n throttle : false,\n\n // special visibility type (image, fixed)\n type : false,\n\n // z-index to use with visibility 'fixed'\n zIndex : '10',\n\n // image only animation settings\n transition : 'fade in',\n duration : 1000,\n\n // array of callbacks for percentage\n onPassed : {},\n\n // standard callbacks\n onOnScreen : false,\n onOffScreen : false,\n onPassing : false,\n onTopVisible : false,\n onBottomVisible : false,\n onTopPassed : false,\n onBottomPassed : false,\n\n // reverse callbacks\n onPassingReverse : false,\n onTopVisibleReverse : false,\n onBottomVisibleReverse : false,\n onTopPassedReverse : false,\n onBottomPassedReverse : false,\n\n // special callbacks for image\n onLoad : function() {},\n onAllLoaded : function() {},\n\n // special callbacks for fixed position\n onFixed : function() {},\n onUnfixed : function() {},\n\n // utility callbacks\n onUpdate : false, // disabled by default for performance\n onRefresh : function(){},\n\n metadata : {\n src: 'src'\n },\n\n className: {\n fixed : 'fixed',\n placeholder : 'placeholder',\n visible : 'visible'\n },\n\n error : {\n method : 'The method you called is not defined.',\n visible : 'Element is hidden, you must call refresh after element becomes visible'\n }\n\n};\n\n})( jQuery, window, document );\n" }, { "path": "parrot/semantic/src/definitions/collections/breadcrumb.less", "content": "/*!\n * # Semantic UI - Breadcrumb\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'breadcrumb';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Breadcrumb\n*******************************/\n\n.ui.breadcrumb {\n line-height: 1;\n display: @display;\n margin: @verticalMargin 0em;\n vertical-align: @verticalAlign;\n}\n.ui.breadcrumb:first-child {\n margin-top: 0em;\n}\n.ui.breadcrumb:last-child {\n margin-bottom: 0em;\n}\n\n/*******************************\n Content\n*******************************/\n\n/* Divider */\n.ui.breadcrumb .divider {\n display: inline-block;\n opacity: @dividerOpacity;\n margin: 0em @dividerSpacing 0em;\n\n font-size: @dividerSize;\n color: @dividerColor;\n vertical-align: @dividerVerticalAlign;\n}\n\n/* Link */\n.ui.breadcrumb a {\n color: @linkColor;\n}\n.ui.breadcrumb a:hover {\n color: @linkHoverColor;\n}\n\n\n/* Icon Divider */\n.ui.breadcrumb .icon.divider {\n font-size: @iconDividerSize;\n vertical-align: @iconDividerVerticalAlign;\n}\n\n/* Section */\n.ui.breadcrumb a.section {\n cursor: pointer;\n}\n.ui.breadcrumb .section {\n display: inline-block;\n margin: @sectionMargin;\n padding: @sectionPadding;\n}\n\n/* Loose Coupling */\n.ui.breadcrumb.segment {\n display: inline-block;\n padding: @segmentPadding;\n}\n\n/*******************************\n States\n*******************************/\n\n.ui.breadcrumb .active.section {\n font-weight: @activeFontWeight;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n.ui.mini.breadcrumb {\n font-size: @mini;\n}\n.ui.tiny.breadcrumb {\n font-size: @tiny;\n}\n.ui.small.breadcrumb {\n font-size: @small;\n}\n.ui.breadcrumb {\n font-size: @medium;\n}\n.ui.large.breadcrumb {\n font-size: @large;\n}\n.ui.big.breadcrumb {\n font-size: @big;\n}\n.ui.huge.breadcrumb {\n font-size: @huge;\n}\n.ui.massive.breadcrumb {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/collections/form.less", "content": "/*!\n * # Semantic UI - Form\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'form';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Elements\n*******************************/\n\n/*--------------------\n Form\n---------------------*/\n\n.ui.form {\n position: relative;\n max-width: 100%;\n}\n\n/*--------------------\n Content\n---------------------*/\n\n.ui.form > p {\n margin: @paragraphMargin;\n}\n\n/*--------------------\n Field\n---------------------*/\n\n.ui.form .field {\n clear: both;\n margin: @fieldMargin;\n}\n\n.ui.form .field:last-child,\n.ui.form .fields:last-child .field {\n margin-bottom: 0em;\n}\n\n.ui.form .fields .field {\n clear: both;\n margin: 0em;\n}\n\n\n/*--------------------\n Labels\n---------------------*/\n\n.ui.form .field > label {\n display: block;\n margin: @labelMargin;\n color: @labelColor;\n font-size: @labelFontSize;\n font-weight: @labelFontWeight;\n text-transform: @labelTextTransform;\n}\n\n/*--------------------\n Standard Inputs\n---------------------*/\n\n\n.ui.form textarea,\n.ui.form input:not([type]),\n.ui.form input[type=\"date\"],\n.ui.form input[type=\"datetime-local\"],\n.ui.form input[type=\"email\"],\n.ui.form input[type=\"number\"],\n.ui.form input[type=\"password\"],\n.ui.form input[type=\"search\"],\n.ui.form input[type=\"tel\"],\n.ui.form input[type=\"time\"],\n.ui.form input[type=\"text\"],\n.ui.form input[type=\"file\"],\n.ui.form input[type=\"url\"] {\n width: @inputWidth;\n vertical-align: top;\n}\n\n/* Set max height on unusual input */\n.ui.form ::-webkit-datetime-edit,\n.ui.form ::-webkit-inner-spin-button {\n height: @inputLineHeight;\n}\n\n.ui.form input:not([type]),\n.ui.form input[type=\"date\"],\n.ui.form input[type=\"datetime-local\"],\n.ui.form input[type=\"email\"],\n.ui.form input[type=\"number\"],\n.ui.form input[type=\"password\"],\n.ui.form input[type=\"search\"],\n.ui.form input[type=\"tel\"],\n.ui.form input[type=\"time\"],\n.ui.form input[type=\"text\"],\n.ui.form input[type=\"file\"],\n.ui.form input[type=\"url\"] {\n font-family: @inputFont;\n margin: 0em;\n outline: none;\n -webkit-appearance: none;\n tap-highlight-color: rgba(255, 255, 255, 0);\n\n line-height: @inputLineHeight;\n padding: @inputPadding;\n font-size: @inputFontSize;\n\n background: @inputBackground;\n border: @inputBorder;\n color: @inputColor;\n border-radius: @inputBorderRadius;\n box-shadow: @inputBoxShadow;\n transition: @inputTransition;\n}\n\n/* Text Area */\n.ui.form textarea {\n margin: 0em;\n -webkit-appearance: none;\n tap-highlight-color: rgba(255, 255, 255, 0);\n\n padding: @textAreaPadding;\n font-size: @textAreaFontSize;\n background: @textAreaBackground;\n border: @textAreaBorder;\n outline: none;\n color: @inputColor;\n border-radius: @inputBorderRadius;\n box-shadow: @inputBoxShadow;\n transition: @textAreaTransition;\n font-size: @textAreaFontSize;\n line-height: @textAreaLineHeight;\n resize: @textAreaResize;\n}\n.ui.form textarea:not([rows]) {\n height: @textAreaHeight;\n min-height: @textAreaMinHeight;\n max-height: @textAreaMaxHeight;\n}\n\n.ui.form textarea,\n.ui.form input[type=\"checkbox\"] {\n vertical-align: @checkboxVerticalAlign;\n}\n\n/*--------------------------\n Input w/ attached Button\n---------------------------*/\n\n.ui.form input.attached {\n width: auto;\n}\n\n\n/*--------------------\n Basic Select\n---------------------*/\n\n.ui.form select {\n display: block;\n height: auto;\n width: 100%;\n background: @selectBackground;\n border: @selectBorder;\n border-radius: @selectBorderRadius;\n box-shadow: @selectBoxShadow;\n padding: @selectPadding;\n color: @selectColor;\n transition: @selectTransition;\n}\n\n/*--------------------\n Dropdown\n---------------------*/\n\n/* Block */\n.ui.form .field > .selection.dropdown {\n width: 100%;\n}\n.ui.form .field > .selection.dropdown > .dropdown.icon {\n float: right;\n}\n\n/* Inline */\n.ui.form .inline.fields .field > .selection.dropdown,\n.ui.form .inline.field > .selection.dropdown {\n width: auto;\n}\n.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,\n.ui.form .inline.field > .selection.dropdown > .dropdown.icon {\n float: none;\n}\n\n/*--------------------\n UI Input\n---------------------*/\n\n/* Block */\n.ui.form .field .ui.input,\n.ui.form .fields .field .ui.input,\n.ui.form .wide.field .ui.input {\n width: 100%;\n}\n\n/* Inline */\n.ui.form .inline.fields .field:not(.wide) .ui.input,\n.ui.form .inline.field:not(.wide) .ui.input {\n width: auto;\n vertical-align: middle;\n}\n\n/* Auto Input */\n.ui.form .fields .field .ui.input input,\n.ui.form .field .ui.input input {\n width: auto;\n}\n\n/* Full Width Input */\n.ui.form .ten.fields .ui.input input,\n.ui.form .nine.fields .ui.input input,\n.ui.form .eight.fields .ui.input input,\n.ui.form .seven.fields .ui.input input,\n.ui.form .six.fields .ui.input input,\n.ui.form .five.fields .ui.input input,\n.ui.form .four.fields .ui.input input,\n.ui.form .three.fields .ui.input input,\n.ui.form .two.fields .ui.input input,\n.ui.form .wide.field .ui.input input {\n flex: 1 0 auto;\n width: 0px;\n}\n\n\n/*--------------------\n Types of Messages\n---------------------*/\n\n.ui.form .success.message,\n.ui.form .warning.message,\n.ui.form .error.message {\n display: none;\n}\n\n/* Assumptions */\n.ui.form .message:first-child {\n margin-top: 0px;\n}\n\n/*--------------------\n Validation Prompt\n---------------------*/\n\n.ui.form .field .prompt.label {\n white-space: normal;\n background: @promptBackground !important;\n border: @promptBorder !important;\n color: @promptTextColor !important;\n}\n.ui.form .inline.fields .field .prompt,\n.ui.form .inline.field .prompt {\n vertical-align: top;\n margin: @inlinePromptMargin;\n}\n.ui.form .inline.fields .field .prompt:before,\n.ui.form .inline.field .prompt:before {\n border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;\n bottom: auto;\n right: auto;\n top: 50%;\n left: 0em;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------------\n Autofilled\n---------------------*/\n\n.ui.form .field.field input:-webkit-autofill {\n box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;\n border-color: @inputAutoFillBorder !important;\n}\n\n/* Focus */\n.ui.form .field.field input:-webkit-autofill:focus {\n box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;\n border-color: @inputAutoFillFocusBorder !important;\n}\n\n/* Error */\n.ui.form .error.error input:-webkit-autofill {\n box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;\n border-color: @inputAutoFillErrorBorder !important;\n}\n\n\n\n/*--------------------\n Placeholder\n---------------------*/\n\n/* browsers require these rules separate */\n.ui.form ::-webkit-input-placeholder {\n color: @inputPlaceholderColor;\n}\n.ui.form :-ms-input-placeholder {\n color: @inputPlaceholderColor;\n}\n.ui.form ::-moz-placeholder {\n color: @inputPlaceholderColor;\n}\n\n.ui.form :focus::-webkit-input-placeholder {\n color: @inputPlaceholderFocusColor;\n}\n.ui.form :focus:-ms-input-placeholder {\n color: @inputPlaceholderFocusColor;\n}\n.ui.form :focus::-moz-placeholder {\n color: @inputPlaceholderFocusColor;\n}\n\n/* Error Placeholder */\n.ui.form .error ::-webkit-input-placeholder {\n color: @inputErrorPlaceholderColor;\n}\n.ui.form .error :-ms-input-placeholder {\n color: @inputErrorPlaceholderColor !important;\n}\n.ui.form .error ::-moz-placeholder {\n color: @inputErrorPlaceholderColor;\n}\n\n.ui.form .error :focus::-webkit-input-placeholder {\n color: @inputErrorPlaceholderFocusColor;\n}\n.ui.form .error :focus:-ms-input-placeholder {\n color: @inputErrorPlaceholderFocusColor !important;\n}\n.ui.form .error :focus::-moz-placeholder {\n color: @inputErrorPlaceholderFocusColor;\n}\n\n\n/*--------------------\n Focus\n---------------------*/\n\n.ui.form input:not([type]):focus,\n.ui.form input[type=\"date\"]:focus,\n.ui.form input[type=\"datetime-local\"]:focus,\n.ui.form input[type=\"email\"]:focus,\n.ui.form input[type=\"number\"]:focus,\n.ui.form input[type=\"password\"]:focus,\n.ui.form input[type=\"search\"]:focus,\n.ui.form input[type=\"tel\"]:focus,\n.ui.form input[type=\"time\"]:focus,\n.ui.form input[type=\"text\"]:focus,\n.ui.form input[type=\"file\"]:focus,\n.ui.form input[type=\"url\"]:focus {\n color: @inputFocusColor;\n border-color: @inputFocusBorderColor;\n border-radius: @inputFocusBorderRadius;\n background: @inputFocusBackground;\n box-shadow: @inputFocusBoxShadow;\n}\n.ui.form textarea:focus {\n color: @textAreaFocusColor;\n border-color: @textAreaFocusBorderColor;\n border-radius: @textAreaFocusBorderRadius;\n background: @textAreaFocusBackground;\n box-shadow: @textAreaFocusBoxShadow;\n -webkit-appearance: none;\n}\n\n\n/*--------------------\n Success\n---------------------*/\n\n/* On Form */\n.ui.form.success .success.message:not(:empty) {\n display: block;\n}\n.ui.form.success .compact.success.message:not(:empty) {\n display: inline-block;\n}\n.ui.form.success .icon.success.message:not(:empty) {\n display: flex;\n}\n\n/*--------------------\n Warning\n---------------------*/\n\n/* On Form */\n.ui.form.warning .warning.message:not(:empty) {\n display: block;\n}\n.ui.form.warning .compact.warning.message:not(:empty) {\n display: inline-block;\n}\n.ui.form.warning .icon.warning.message:not(:empty) {\n display: flex;\n}\n\n/*--------------------\n Error\n---------------------*/\n\n/* On Form */\n.ui.form.error .error.message:not(:empty) {\n display: block;\n}\n.ui.form.error .compact.error.message:not(:empty) {\n display: inline-block;\n}\n.ui.form.error .icon.error.message:not(:empty) {\n display: flex;\n}\n\n/* On Field(s) */\n.ui.form .fields.error .field label,\n.ui.form .field.error label,\n.ui.form .fields.error .field .input,\n.ui.form .field.error .input {\n color: @formErrorColor;\n}\n\n.ui.form .fields.error .field .corner.label,\n.ui.form .field.error .corner.label {\n border-color: @formErrorColor;\n color: @white;\n}\n\n.ui.form .fields.error .field textarea,\n.ui.form .fields.error .field select,\n.ui.form .fields.error .field input:not([type]),\n.ui.form .fields.error .field input[type=\"date\"],\n.ui.form .fields.error .field input[type=\"datetime-local\"],\n.ui.form .fields.error .field input[type=\"email\"],\n.ui.form .fields.error .field input[type=\"number\"],\n.ui.form .fields.error .field input[type=\"password\"],\n.ui.form .fields.error .field input[type=\"search\"],\n.ui.form .fields.error .field input[type=\"tel\"],\n.ui.form .fields.error .field input[type=\"time\"],\n.ui.form .fields.error .field input[type=\"text\"],\n.ui.form .fields.error .field input[type=\"file\"],\n.ui.form .fields.error .field input[type=\"url\"],\n.ui.form .field.error textarea,\n.ui.form .field.error select,\n.ui.form .field.error input:not([type]),\n.ui.form .field.error input[type=\"date\"],\n.ui.form .field.error input[type=\"datetime-local\"],\n.ui.form .field.error input[type=\"email\"],\n.ui.form .field.error input[type=\"number\"],\n.ui.form .field.error input[type=\"password\"],\n.ui.form .field.error input[type=\"search\"],\n.ui.form .field.error input[type=\"tel\"],\n.ui.form .field.error input[type=\"time\"],\n.ui.form .field.error input[type=\"text\"],\n.ui.form .field.error input[type=\"file\"],\n.ui.form .field.error input[type=\"url\"] {\n background: @formErrorBackground;\n border-color: @formErrorBorder;\n color: @formErrorColor;\n border-radius: @inputErrorBorderRadius;\n box-shadow: @inputErrorBoxShadow;\n}\n.ui.form .field.error textarea:focus,\n.ui.form .field.error select:focus,\n.ui.form .field.error input:not([type]):focus,\n.ui.form .field.error input[type=\"date\"]:focus,\n.ui.form .field.error input[type=\"datetime-local\"]:focus,\n.ui.form .field.error input[type=\"email\"]:focus,\n.ui.form .field.error input[type=\"number\"]:focus,\n.ui.form .field.error input[type=\"password\"]:focus,\n.ui.form .field.error input[type=\"search\"]:focus,\n.ui.form .field.error input[type=\"tel\"]:focus,\n.ui.form .field.error input[type=\"time\"]:focus,\n.ui.form .field.error input[type=\"text\"]:focus,\n.ui.form .field.error input[type=\"file\"]:focus,\n.ui.form .field.error input[type=\"url\"]:focus {\n background: @inputErrorFocusBackground;\n border-color: @inputErrorFocusBorder;\n color: @inputErrorFocusColor;\n\n -webkit-appearance: none;\n box-shadow: @inputErrorFocusBoxShadow;\n}\n\n/* Preserve Native Select Stylings */\n.ui.form .field.error select {\n -webkit-appearance: menulist-button;\n}\n\n/*------------------\n Dropdown Error\n--------------------*/\n\n.ui.form .fields.error .field .ui.dropdown,\n.ui.form .fields.error .field .ui.dropdown .item,\n.ui.form .field.error .ui.dropdown,\n.ui.form .field.error .ui.dropdown .text,\n.ui.form .field.error .ui.dropdown .item {\n background: @formErrorBackground;\n color: @formErrorColor;\n}\n.ui.form .fields.error .field .ui.dropdown,\n.ui.form .field.error .ui.dropdown {\n border-color: @formErrorBorder !important;\n}\n.ui.form .fields.error .field .ui.dropdown:hover,\n.ui.form .field.error .ui.dropdown:hover {\n border-color: @formErrorBorder !important;\n}\n.ui.form .fields.error .field .ui.dropdown:hover .menu,\n.ui.form .field.error .ui.dropdown:hover .menu {\n border-color: @formErrorBorder;\n}\n.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,\n.ui.form .field.error .ui.multiple.selection.dropdown > .label {\n background-color: @dropdownErrorLabelBackground;\n color: @dropdownErrorLabelColor;\n}\n\n/* Hover */\n.ui.form .fields.error .field .ui.dropdown .menu .item:hover,\n.ui.form .field.error .ui.dropdown .menu .item:hover {\n background-color: @dropdownErrorHoverBackground;\n}\n\n/* Selected */\n.ui.form .fields.error .field .ui.dropdown .menu .selected.item,\n.ui.form .field.error .ui.dropdown .menu .selected.item {\n background-color: @dropdownErrorSelectedBackground;\n}\n\n\n/* Active */\n.ui.form .fields.error .field .ui.dropdown .menu .active.item,\n.ui.form .field.error .ui.dropdown .menu .active.item {\n background-color: @dropdownErrorActiveBackground !important;\n}\n\n/*--------------------\n Checkbox Error\n---------------------*/\n\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {\n color: @formErrorColor;\n}\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {\n background: @formErrorBackground;\n border-color: @formErrorBorder;\n}\n.ui.form .fields.error .field .checkbox label:after,\n.ui.form .field.error .checkbox label:after,\n.ui.form .fields.error .field .checkbox .box:after,\n.ui.form .field.error .checkbox .box:after {\n color: @formErrorColor;\n}\n\n/*--------------------\n Disabled\n---------------------*/\n\n.ui.form .disabled.fields .field,\n.ui.form .disabled.field,\n.ui.form .field :disabled {\n pointer-events: none;\n opacity: @disabledOpacity;\n}\n.ui.form .field.disabled > label,\n.ui.form .fields.disabled > label {\n opacity: @disabledLabelOpacity;\n}\n.ui.form .field.disabled :disabled {\n opacity: 1;\n}\n\n\n/*--------------\n Loading\n---------------*/\n\n.ui.loading.form {\n position: relative;\n cursor: default;\n pointer-events: none;\n}\n.ui.loading.form:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 0%;\n background: @loaderDimmerColor;\n width: 100%;\n height: 100%;\n z-index: @loaderDimmerZIndex;\n}\n.ui.loading.form:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: form-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n visibility: visible;\n z-index: @loaderLineZIndex;\n}\n\n@keyframes form-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/*******************************\n Element Types\n*******************************/\n\n/*--------------------\n Required Field\n---------------------*/\n\n.ui.form .required.fields:not(.grouped) > .field > label:after,\n.ui.form .required.fields.grouped > label:after,\n.ui.form .required.field > label:after,\n.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,\n.ui.form .required.field > .checkbox:after {\n margin: @requiredMargin;\n content: @requiredContent;\n color: @requiredColor;\n}\n\n.ui.form .required.fields:not(.grouped) > .field > label:after,\n.ui.form .required.fields.grouped > label:after,\n.ui.form .required.field > label:after {\n display: inline-block;\n vertical-align: top;\n}\n\n.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,\n.ui.form .required.field > .checkbox:after {\n position: absolute;\n top: 0%;\n left: 100%;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*--------------------\n Inverted Colors\n---------------------*/\n\n.ui.inverted.form label,\n.ui.form .inverted.segment label,\n.ui.form .inverted.segment .ui.checkbox label,\n.ui.form .inverted.segment .ui.checkbox .box,\n.ui.inverted.form .ui.checkbox label,\n.ui.inverted.form .ui.checkbox .box,\n.ui.inverted.form .inline.fields > label,\n.ui.inverted.form .inline.fields .field > label,\n.ui.inverted.form .inline.fields .field > p,\n.ui.inverted.form .inline.field > label,\n.ui.inverted.form .inline.field > p {\n color: @invertedLabelColor;\n}\n\n/* Inverted Field */\n.ui.inverted.form input:not([type]),\n.ui.inverted.form input[type=\"date\"],\n.ui.inverted.form input[type=\"datetime-local\"],\n.ui.inverted.form input[type=\"email\"],\n.ui.inverted.form input[type=\"number\"],\n.ui.inverted.form input[type=\"password\"],\n.ui.inverted.form input[type=\"search\"],\n.ui.inverted.form input[type=\"tel\"],\n.ui.inverted.form input[type=\"time\"],\n.ui.inverted.form input[type=\"text\"],\n.ui.inverted.form input[type=\"file\"],\n.ui.inverted.form input[type=\"url\"] {\n background: @invertedInputBackground;\n border-color: @invertedInputBorderColor;\n color: @invertedInputColor;\n box-shadow: @invertedInputBoxShadow;\n}\n\n\n/*--------------------\n Field Groups\n---------------------*/\n\n/* Grouped Vertically */\n.ui.form .grouped.fields {\n display: block;\n margin: @groupedMargin;\n}\n.ui.form .grouped.fields:last-child {\n margin-bottom: 0em;\n}\n\n.ui.form .grouped.fields > label {\n margin: @groupedLabelMargin;\n color: @groupedLabelColor;\n font-size: @groupedLabelFontSize;\n font-weight: @groupedLabelFontWeight;\n text-transform: @groupedLabelTextTransform;\n}\n\n.ui.form .grouped.fields .field,\n.ui.form .grouped.inline.fields .field {\n display: block;\n margin: @groupedFieldMargin;\n padding: 0em;\n}\n\n/*--------------------\n Fields\n---------------------*/\n\n/* Split fields */\n.ui.form .fields {\n display: flex;\n flex-direction: row;\n margin: @fieldsMargin;\n}\n.ui.form .fields > .field {\n flex: 0 1 auto;\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n}\n.ui.form .fields > .field:first-child {\n border-left: none;\n box-shadow: none;\n}\n\n/* Other Combinations */\n.ui.form .two.fields > .fields,\n.ui.form .two.fields > .field {\n width: @twoColumn;\n}\n.ui.form .three.fields > .fields,\n.ui.form .three.fields > .field {\n width: @threeColumn;\n}\n.ui.form .four.fields > .fields,\n.ui.form .four.fields > .field {\n width: @fourColumn;\n}\n.ui.form .five.fields > .fields,\n.ui.form .five.fields > .field {\n width: @fiveColumn;\n}\n.ui.form .six.fields > .fields,\n.ui.form .six.fields > .field {\n width: @sixColumn;\n}\n.ui.form .seven.fields > .fields,\n.ui.form .seven.fields > .field {\n width: @sevenColumn;\n}\n.ui.form .eight.fields > .fields,\n.ui.form .eight.fields > .field {\n width: @eightColumn;\n}\n.ui.form .nine.fields > .fields,\n.ui.form .nine.fields > .field {\n width: @nineColumn;\n}\n.ui.form .ten.fields > .fields,\n.ui.form .ten.fields > .field {\n width: @tenColumn;\n}\n\n/* Swap to full width on mobile */\n@media only screen and (max-width : @largestMobileScreen) {\n .ui.form .fields {\n flex-wrap: wrap;\n }\n\n .ui[class*=\"equal width\"].form:not(.unstackable) .fields > .field,\n .ui.form:not(.unstackable) [class*=\"equal width\"].fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field {\n width: @oneColumn !important;\n margin: 0em 0em @rowDistance;\n }\n}\n\n\n/* Sizing Combinations */\n.ui.form .fields .wide.field {\n width: @oneWide;\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n}\n\n.ui.form .one.wide.field {\n width: @oneWide !important;\n}\n.ui.form .two.wide.field {\n width: @twoWide !important;\n}\n.ui.form .three.wide.field {\n width: @threeWide !important;\n}\n.ui.form .four.wide.field {\n width: @fourWide !important;\n}\n.ui.form .five.wide.field {\n width: @fiveWide !important;\n}\n.ui.form .six.wide.field {\n width: @sixWide !important;\n}\n.ui.form .seven.wide.field {\n width: @sevenWide !important;\n}\n.ui.form .eight.wide.field {\n width: @eightWide !important;\n}\n.ui.form .nine.wide.field {\n width: @nineWide !important;\n}\n.ui.form .ten.wide.field {\n width: @tenWide !important;\n}\n.ui.form .eleven.wide.field {\n width: @elevenWide !important;\n}\n.ui.form .twelve.wide.field {\n width: @twelveWide !important;\n}\n.ui.form .thirteen.wide.field {\n width: @thirteenWide !important;\n}\n.ui.form .fourteen.wide.field {\n width: @fourteenWide !important;\n}\n.ui.form .fifteen.wide.field {\n width: @fifteenWide !important;\n}\n.ui.form .sixteen.wide.field {\n width: @sixteenWide !important;\n}\n\n/* Swap to full width on mobile */\n@media only screen and (max-width : @largestMobileScreen) {\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field {\n width: @oneColumn !important;\n }\n .ui.form .fields {\n margin-bottom: 0em;\n }\n}\n\n/*--------------------\n Equal Width\n---------------------*/\n\n.ui[class*=\"equal width\"].form .fields > .field,\n.ui.form [class*=\"equal width\"].fields > .field {\n width: 100%;\n flex: 1 1 auto;\n}\n\n/*--------------------\n Inline Fields\n---------------------*/\n\n.ui.form .inline.fields {\n margin: @fieldMargin;\n align-items: center;\n}\n.ui.form .inline.fields .field {\n margin: 0em;\n padding: @inlineFieldsMargin;\n}\n\n/* Inline Label */\n.ui.form .inline.fields > label,\n.ui.form .inline.fields .field > label,\n.ui.form .inline.fields .field > p,\n.ui.form .inline.field > label,\n.ui.form .inline.field > p {\n display: inline-block;\n width: auto;\n margin-top: 0em;\n margin-bottom: 0em;\n vertical-align: baseline;\n font-size: @inlineLabelFontSize;\n font-weight: @inlineLabelFontWeight;\n color: @inlineLabelColor;\n text-transform: @inlineLabelTextTransform;\n}\n\n/* Grouped Inline Label */\n.ui.form .inline.fields > label {\n margin: @groupedInlineLabelMargin;\n}\n\n/* Inline Input */\n.ui.form .inline.fields .field > input,\n.ui.form .inline.fields .field > select,\n.ui.form .inline.field > input,\n.ui.form .inline.field > select {\n display: inline-block;\n width: auto;\n\n margin-top: 0em;\n margin-bottom: 0em;\n\n vertical-align: middle;\n font-size: @inlineInputSize;\n}\n\n/* Label */\n.ui.form .inline.fields .field > :first-child,\n.ui.form .inline.field > :first-child {\n margin: 0em @inlineLabelDistance 0em 0em;\n}\n.ui.form .inline.fields .field > :only-child,\n.ui.form .inline.field > :only-child {\n margin: 0em;\n}\n\n/* Wide */\n.ui.form .inline.fields .wide.field {\n display: flex;\n align-items: center;\n}\n.ui.form .inline.fields .wide.field > input,\n.ui.form .inline.fields .wide.field > select {\n width: 100%;\n}\n\n\n/*--------------------\n Sizes\n---------------------*/\n\n.ui.mini.form {\n font-size: @mini;\n}\n.ui.tiny.form {\n font-size: @tiny;\n}\n.ui.small.form {\n font-size: @small;\n}\n.ui.form {\n font-size: @medium;\n}\n.ui.large.form {\n font-size: @large;\n}\n.ui.big.form {\n font-size: @big;\n}\n.ui.huge.form {\n font-size: @huge;\n}\n.ui.massive.form {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/collections/grid.less", "content": "/*!\n * # Semantic UI - Grid\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'grid';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Standard\n*******************************/\n\n.ui.grid {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: stretch;\n padding: 0em;\n}\n\n/*----------------------\n Remove Gutters\n-----------------------*/\n\n.ui.grid {\n margin-top: -(@rowSpacing / 2);\n margin-bottom: -(@rowSpacing / 2);\n margin-left: -(@gutterWidth / 2);\n margin-right: -(@gutterWidth / 2);\n}\n.ui.relaxed.grid {\n margin-left: -(@relaxedGutterWidth / 2);\n margin-right: -(@relaxedGutterWidth / 2);\n}\n.ui[class*=\"very relaxed\"].grid {\n margin-left: -(@veryRelaxedGutterWidth / 2);\n margin-right: -(@veryRelaxedGutterWidth / 2);\n}\n\n\n/* Preserve Rows Spacing on Consecutive Grids */\n.ui.grid + .grid {\n margin-top: @consecutiveGridDistance;\n}\n\n/*-------------------\n Columns\n--------------------*/\n\n/* Standard 16 column */\n.ui.grid > .column:not(.row),\n.ui.grid > .row > .column {\n position: relative;\n display: inline-block;\n\n width: @oneWide;\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n vertical-align: top;\n}\n\n.ui.grid > * {\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n}\n\n/*-------------------\n Rows\n--------------------*/\n\n.ui.grid > .row {\n position: relative;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: inherit;\n align-items: stretch;\n width: 100% !important;\n padding: 0rem;\n padding-top: (@rowSpacing / 2);\n padding-bottom: (@rowSpacing / 2);\n}\n\n/*-------------------\n Columns\n--------------------*/\n\n/* Vertical padding when no rows */\n.ui.grid > .column:not(.row) {\n padding-top: (@rowSpacing / 2);\n padding-bottom: (@rowSpacing / 2);\n}\n.ui.grid > .row > .column {\n margin-top: 0em;\n margin-bottom: 0em;\n}\n\n/*-------------------\n Content\n--------------------*/\n\n.ui.grid > .row > img,\n.ui.grid > .row > .column > img {\n max-width: @columnMaxImageWidth;\n}\n\n/*-------------------\n Loose Coupling\n--------------------*/\n\n/* Collapse Margin on Consecutive Grid */\n.ui.grid > .ui.grid:first-child {\n margin-top: 0em;\n}\n.ui.grid > .ui.grid:last-child {\n margin-bottom: 0em;\n}\n\n/* Segment inside Aligned Grid */\n.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),\n.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {\n width: 100%;\n}\n\n/* Align Dividers with Gutter */\n.ui.grid .row + .ui.divider {\n flex-grow: 1;\n margin: (@rowSpacing / 2) (@gutterWidth / 2);\n}\n.ui.grid .column + .ui.vertical.divider {\n height: ~\"calc(50% - \"(@rowSpacing/2)~\")\";\n}\n\n/* Remove Border on Last Horizontal Segment */\n.ui.grid > .row > .column:last-child > .horizontal.segment,\n.ui.grid > .column:last-child > .horizontal.segment {\n box-shadow: none;\n}\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-----------------------\n Page Grid\n-------------------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.page.grid {\n width: @mobileWidth;\n padding-left: @mobileGutter;\n padding-right: @mobileGutter;\n margin-left: 0em;\n margin-right: 0em;\n }\n}\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.page.grid {\n width: @tabletWidth;\n margin-left: @tabletMargin;\n margin-right: @tabletMargin;\n padding-left: @tabletGutter;\n padding-right: @tabletGutter;\n }\n}\n@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {\n .ui.page.grid {\n width: @computerWidth;\n margin-left: @computerMargin;\n margin-right: @computerMargin;\n padding-left: @computerGutter;\n padding-right: @computerGutter;\n }\n}\n@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {\n .ui.page.grid {\n width: @largeMonitorWidth;\n margin-left: @largeMonitorMargin;\n margin-right: @largeMonitorMargin;\n padding-left: @largeMonitorGutter;\n padding-right: @largeMonitorGutter;\n }\n}\n@media only screen and (min-width: @widescreenMonitorBreakpoint) {\n .ui.page.grid {\n width: @widescreenMonitorWidth;\n margin-left: @widescreenMargin;\n margin-right: @widescreenMargin;\n padding-left: @widescreenMonitorGutter;\n padding-right: @widescreenMonitorGutter;\n }\n}\n\n\n/*-------------------\n Column Count\n--------------------*/\n\n/* Assume full width with one column */\n.ui.grid > .column:only-child,\n.ui.grid > .row > .column:only-child {\n width: @oneColumn;\n}\n\n/* Grid Based */\n.ui[class*=\"one column\"].grid > .row > .column,\n.ui[class*=\"one column\"].grid > .column:not(.row) {\n width: @oneColumn;\n}\n.ui[class*=\"two column\"].grid > .row > .column,\n.ui[class*=\"two column\"].grid > .column:not(.row) {\n width: @twoColumn;\n}\n.ui[class*=\"three column\"].grid > .row > .column,\n.ui[class*=\"three column\"].grid > .column:not(.row) {\n width: @threeColumn;\n}\n.ui[class*=\"four column\"].grid > .row > .column,\n.ui[class*=\"four column\"].grid > .column:not(.row) {\n width: @fourColumn;\n}\n.ui[class*=\"five column\"].grid > .row > .column,\n.ui[class*=\"five column\"].grid > .column:not(.row) {\n width: @fiveColumn;\n}\n.ui[class*=\"six column\"].grid > .row > .column,\n.ui[class*=\"six column\"].grid > .column:not(.row) {\n width: @sixColumn;\n}\n.ui[class*=\"seven column\"].grid > .row > .column,\n.ui[class*=\"seven column\"].grid > .column:not(.row) {\n width: @sevenColumn;\n}\n.ui[class*=\"eight column\"].grid > .row > .column,\n.ui[class*=\"eight column\"].grid > .column:not(.row) {\n width: @eightColumn;\n}\n.ui[class*=\"nine column\"].grid > .row > .column,\n.ui[class*=\"nine column\"].grid > .column:not(.row) {\n width: @nineColumn;\n}\n.ui[class*=\"ten column\"].grid > .row > .column,\n.ui[class*=\"ten column\"].grid > .column:not(.row) {\n width: @tenColumn;\n}\n.ui[class*=\"eleven column\"].grid > .row > .column,\n.ui[class*=\"eleven column\"].grid > .column:not(.row) {\n width: @elevenColumn;\n}\n.ui[class*=\"twelve column\"].grid > .row > .column,\n.ui[class*=\"twelve column\"].grid > .column:not(.row) {\n width: @twelveColumn;\n}\n.ui[class*=\"thirteen column\"].grid > .row > .column,\n.ui[class*=\"thirteen column\"].grid > .column:not(.row) {\n width: @thirteenColumn;\n}\n.ui[class*=\"fourteen column\"].grid > .row > .column,\n.ui[class*=\"fourteen column\"].grid > .column:not(.row) {\n width: @fourteenColumn;\n}\n.ui[class*=\"fifteen column\"].grid > .row > .column,\n.ui[class*=\"fifteen column\"].grid > .column:not(.row) {\n width: @fifteenColumn;\n}\n.ui[class*=\"sixteen column\"].grid > .row > .column,\n.ui[class*=\"sixteen column\"].grid > .column:not(.row) {\n width: @sixteenColumn;\n}\n\n/* Row Based Overrides */\n.ui.grid > [class*=\"one column\"].row > .column {\n width: @oneColumn !important;\n}\n.ui.grid > [class*=\"two column\"].row > .column {\n width: @twoColumn !important;\n}\n.ui.grid > [class*=\"three column\"].row > .column {\n width: @threeColumn !important;\n}\n.ui.grid > [class*=\"four column\"].row > .column {\n width: @fourColumn !important;\n}\n.ui.grid > [class*=\"five column\"].row > .column {\n width: @fiveColumn !important;\n}\n.ui.grid > [class*=\"six column\"].row > .column {\n width: @sixColumn !important;\n}\n.ui.grid > [class*=\"seven column\"].row > .column {\n width: @sevenColumn !important;\n}\n.ui.grid > [class*=\"eight column\"].row > .column {\n width: @eightColumn !important;\n}\n.ui.grid > [class*=\"nine column\"].row > .column {\n width: @nineColumn !important;\n}\n.ui.grid > [class*=\"ten column\"].row > .column {\n width: @tenColumn !important;\n}\n.ui.grid > [class*=\"eleven column\"].row > .column {\n width: @elevenColumn !important;\n}\n.ui.grid > [class*=\"twelve column\"].row > .column {\n width: @twelveColumn !important;\n}\n.ui.grid > [class*=\"thirteen column\"].row > .column {\n width: @thirteenColumn !important;\n}\n.ui.grid > [class*=\"fourteen column\"].row > .column {\n width: @fourteenColumn !important;\n}\n.ui.grid > [class*=\"fifteen column\"].row > .column {\n width: @fifteenColumn !important;\n}\n.ui.grid > [class*=\"sixteen column\"].row > .column {\n width: @sixteenColumn !important;\n}\n\n/* Celled Page */\n.ui.celled.page.grid {\n box-shadow: none;\n}\n\n/*-------------------\n Column Width\n--------------------*/\n\n/* Sizing Combinations */\n.ui.grid > .row > [class*=\"one wide\"].column,\n.ui.grid > .column.row > [class*=\"one wide\"].column,\n.ui.grid > [class*=\"one wide\"].column,\n.ui.column.grid > [class*=\"one wide\"].column {\n width: @oneWide !important;\n}\n.ui.grid > .row > [class*=\"two wide\"].column,\n.ui.grid > .column.row > [class*=\"two wide\"].column,\n.ui.grid > [class*=\"two wide\"].column,\n.ui.column.grid > [class*=\"two wide\"].column {\n width: @twoWide !important;\n}\n.ui.grid > .row > [class*=\"three wide\"].column,\n.ui.grid > .column.row > [class*=\"three wide\"].column,\n.ui.grid > [class*=\"three wide\"].column,\n.ui.column.grid > [class*=\"three wide\"].column {\n width: @threeWide !important;\n}\n.ui.grid > .row > [class*=\"four wide\"].column,\n.ui.grid > .column.row > [class*=\"four wide\"].column,\n.ui.grid > [class*=\"four wide\"].column,\n.ui.column.grid > [class*=\"four wide\"].column {\n width: @fourWide !important;\n}\n.ui.grid > .row > [class*=\"five wide\"].column,\n.ui.grid > .column.row > [class*=\"five wide\"].column,\n.ui.grid > [class*=\"five wide\"].column,\n.ui.column.grid > [class*=\"five wide\"].column {\n width: @fiveWide !important;\n}\n.ui.grid > .row > [class*=\"six wide\"].column,\n.ui.grid > .column.row > [class*=\"six wide\"].column,\n.ui.grid > [class*=\"six wide\"].column,\n.ui.column.grid > [class*=\"six wide\"].column {\n width: @sixWide !important;\n}\n.ui.grid > .row > [class*=\"seven wide\"].column,\n.ui.grid > .column.row > [class*=\"seven wide\"].column,\n.ui.grid > [class*=\"seven wide\"].column,\n.ui.column.grid > [class*=\"seven wide\"].column {\n width: @sevenWide !important;\n}\n.ui.grid > .row > [class*=\"eight wide\"].column,\n.ui.grid > .column.row > [class*=\"eight wide\"].column,\n.ui.grid > [class*=\"eight wide\"].column,\n.ui.column.grid > [class*=\"eight wide\"].column {\n width: @eightWide !important;\n}\n.ui.grid > .row > [class*=\"nine wide\"].column,\n.ui.grid > .column.row > [class*=\"nine wide\"].column,\n.ui.grid > [class*=\"nine wide\"].column,\n.ui.column.grid > [class*=\"nine wide\"].column {\n width: @nineWide !important;\n}\n.ui.grid > .row > [class*=\"ten wide\"].column,\n.ui.grid > .column.row > [class*=\"ten wide\"].column,\n.ui.grid > [class*=\"ten wide\"].column,\n.ui.column.grid > [class*=\"ten wide\"].column {\n width: @tenWide !important;\n}\n.ui.grid > .row > [class*=\"eleven wide\"].column,\n.ui.grid > .column.row > [class*=\"eleven wide\"].column,\n.ui.grid > [class*=\"eleven wide\"].column,\n.ui.column.grid > [class*=\"eleven wide\"].column {\n width: @elevenWide !important;\n}\n.ui.grid > .row > [class*=\"twelve wide\"].column,\n.ui.grid > .column.row > [class*=\"twelve wide\"].column,\n.ui.grid > [class*=\"twelve wide\"].column,\n.ui.column.grid > [class*=\"twelve wide\"].column {\n width: @twelveWide !important;\n}\n.ui.grid > .row > [class*=\"thirteen wide\"].column,\n.ui.grid > .column.row > [class*=\"thirteen wide\"].column,\n.ui.grid > [class*=\"thirteen wide\"].column,\n.ui.column.grid > [class*=\"thirteen wide\"].column {\n width: @thirteenWide !important;\n}\n.ui.grid > .row > [class*=\"fourteen wide\"].column,\n.ui.grid > .column.row > [class*=\"fourteen wide\"].column,\n.ui.grid > [class*=\"fourteen wide\"].column,\n.ui.column.grid > [class*=\"fourteen wide\"].column {\n width: @fourteenWide !important;\n}\n.ui.grid > .row > [class*=\"fifteen wide\"].column,\n.ui.grid > .column.row > [class*=\"fifteen wide\"].column,\n.ui.grid > [class*=\"fifteen wide\"].column,\n.ui.column.grid > [class*=\"fifteen wide\"].column {\n width: @fifteenWide !important;\n}\n.ui.grid > .row > [class*=\"sixteen wide\"].column,\n.ui.grid > .column.row > [class*=\"sixteen wide\"].column,\n.ui.grid > [class*=\"sixteen wide\"].column,\n.ui.column.grid > [class*=\"sixteen wide\"].column {\n width: @sixteenWide !important;\n}\n\n/*----------------------\n Width per Device\n-----------------------*/\n\n/* Mobile Sizing Combinations */\n@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {\n .ui.grid > .row > [class*=\"one wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"one wide mobile\"].column,\n .ui.grid > [class*=\"one wide mobile\"].column,\n .ui.column.grid > [class*=\"one wide mobile\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"two wide mobile\"].column,\n .ui.grid > [class*=\"two wide mobile\"].column,\n .ui.column.grid > [class*=\"two wide mobile\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"three wide mobile\"].column,\n .ui.grid > [class*=\"three wide mobile\"].column,\n .ui.column.grid > [class*=\"three wide mobile\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"four wide mobile\"].column,\n .ui.grid > [class*=\"four wide mobile\"].column,\n .ui.column.grid > [class*=\"four wide mobile\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"five wide mobile\"].column,\n .ui.grid > [class*=\"five wide mobile\"].column,\n .ui.column.grid > [class*=\"five wide mobile\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"six wide mobile\"].column,\n .ui.grid > [class*=\"six wide mobile\"].column,\n .ui.column.grid > [class*=\"six wide mobile\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"seven wide mobile\"].column,\n .ui.grid > [class*=\"seven wide mobile\"].column,\n .ui.column.grid > [class*=\"seven wide mobile\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"eight wide mobile\"].column,\n .ui.grid > [class*=\"eight wide mobile\"].column,\n .ui.column.grid > [class*=\"eight wide mobile\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"nine wide mobile\"].column,\n .ui.grid > [class*=\"nine wide mobile\"].column,\n .ui.column.grid > [class*=\"nine wide mobile\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"ten wide mobile\"].column,\n .ui.grid > [class*=\"ten wide mobile\"].column,\n .ui.column.grid > [class*=\"ten wide mobile\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide mobile\"].column,\n .ui.grid > [class*=\"eleven wide mobile\"].column,\n .ui.column.grid > [class*=\"eleven wide mobile\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide mobile\"].column,\n .ui.grid > [class*=\"twelve wide mobile\"].column,\n .ui.column.grid > [class*=\"twelve wide mobile\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide mobile\"].column,\n .ui.grid > [class*=\"thirteen wide mobile\"].column,\n .ui.column.grid > [class*=\"thirteen wide mobile\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide mobile\"].column,\n .ui.grid > [class*=\"fourteen wide mobile\"].column,\n .ui.column.grid > [class*=\"fourteen wide mobile\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide mobile\"].column,\n .ui.grid > [class*=\"fifteen wide mobile\"].column,\n .ui.column.grid > [class*=\"fifteen wide mobile\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide mobile\"].column,\n .ui.grid > [class*=\"sixteen wide mobile\"].column,\n .ui.column.grid > [class*=\"sixteen wide mobile\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Tablet Sizing Combinations */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.grid > .row > [class*=\"one wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"one wide tablet\"].column,\n .ui.grid > [class*=\"one wide tablet\"].column,\n .ui.column.grid > [class*=\"one wide tablet\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"two wide tablet\"].column,\n .ui.grid > [class*=\"two wide tablet\"].column,\n .ui.column.grid > [class*=\"two wide tablet\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"three wide tablet\"].column,\n .ui.grid > [class*=\"three wide tablet\"].column,\n .ui.column.grid > [class*=\"three wide tablet\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"four wide tablet\"].column,\n .ui.grid > [class*=\"four wide tablet\"].column,\n .ui.column.grid > [class*=\"four wide tablet\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"five wide tablet\"].column,\n .ui.grid > [class*=\"five wide tablet\"].column,\n .ui.column.grid > [class*=\"five wide tablet\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"six wide tablet\"].column,\n .ui.grid > [class*=\"six wide tablet\"].column,\n .ui.column.grid > [class*=\"six wide tablet\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"seven wide tablet\"].column,\n .ui.grid > [class*=\"seven wide tablet\"].column,\n .ui.column.grid > [class*=\"seven wide tablet\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"eight wide tablet\"].column,\n .ui.grid > [class*=\"eight wide tablet\"].column,\n .ui.column.grid > [class*=\"eight wide tablet\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"nine wide tablet\"].column,\n .ui.grid > [class*=\"nine wide tablet\"].column,\n .ui.column.grid > [class*=\"nine wide tablet\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"ten wide tablet\"].column,\n .ui.grid > [class*=\"ten wide tablet\"].column,\n .ui.column.grid > [class*=\"ten wide tablet\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide tablet\"].column,\n .ui.grid > [class*=\"eleven wide tablet\"].column,\n .ui.column.grid > [class*=\"eleven wide tablet\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide tablet\"].column,\n .ui.grid > [class*=\"twelve wide tablet\"].column,\n .ui.column.grid > [class*=\"twelve wide tablet\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide tablet\"].column,\n .ui.grid > [class*=\"thirteen wide tablet\"].column,\n .ui.column.grid > [class*=\"thirteen wide tablet\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide tablet\"].column,\n .ui.grid > [class*=\"fourteen wide tablet\"].column,\n .ui.column.grid > [class*=\"fourteen wide tablet\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide tablet\"].column,\n .ui.grid > [class*=\"fifteen wide tablet\"].column,\n .ui.column.grid > [class*=\"fifteen wide tablet\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide tablet\"].column,\n .ui.grid > [class*=\"sixteen wide tablet\"].column,\n .ui.column.grid > [class*=\"sixteen wide tablet\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Computer/Desktop Sizing Combinations */\n@media only screen and (min-width: @computerBreakpoint) {\n .ui.grid > .row > [class*=\"one wide computer\"].column,\n .ui.grid > .column.row > [class*=\"one wide computer\"].column,\n .ui.grid > [class*=\"one wide computer\"].column,\n .ui.column.grid > [class*=\"one wide computer\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide computer\"].column,\n .ui.grid > .column.row > [class*=\"two wide computer\"].column,\n .ui.grid > [class*=\"two wide computer\"].column,\n .ui.column.grid > [class*=\"two wide computer\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide computer\"].column,\n .ui.grid > .column.row > [class*=\"three wide computer\"].column,\n .ui.grid > [class*=\"three wide computer\"].column,\n .ui.column.grid > [class*=\"three wide computer\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide computer\"].column,\n .ui.grid > .column.row > [class*=\"four wide computer\"].column,\n .ui.grid > [class*=\"four wide computer\"].column,\n .ui.column.grid > [class*=\"four wide computer\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide computer\"].column,\n .ui.grid > .column.row > [class*=\"five wide computer\"].column,\n .ui.grid > [class*=\"five wide computer\"].column,\n .ui.column.grid > [class*=\"five wide computer\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide computer\"].column,\n .ui.grid > .column.row > [class*=\"six wide computer\"].column,\n .ui.grid > [class*=\"six wide computer\"].column,\n .ui.column.grid > [class*=\"six wide computer\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide computer\"].column,\n .ui.grid > .column.row > [class*=\"seven wide computer\"].column,\n .ui.grid > [class*=\"seven wide computer\"].column,\n .ui.column.grid > [class*=\"seven wide computer\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide computer\"].column,\n .ui.grid > .column.row > [class*=\"eight wide computer\"].column,\n .ui.grid > [class*=\"eight wide computer\"].column,\n .ui.column.grid > [class*=\"eight wide computer\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide computer\"].column,\n .ui.grid > .column.row > [class*=\"nine wide computer\"].column,\n .ui.grid > [class*=\"nine wide computer\"].column,\n .ui.column.grid > [class*=\"nine wide computer\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide computer\"].column,\n .ui.grid > .column.row > [class*=\"ten wide computer\"].column,\n .ui.grid > [class*=\"ten wide computer\"].column,\n .ui.column.grid > [class*=\"ten wide computer\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide computer\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide computer\"].column,\n .ui.grid > [class*=\"eleven wide computer\"].column,\n .ui.column.grid > [class*=\"eleven wide computer\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide computer\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide computer\"].column,\n .ui.grid > [class*=\"twelve wide computer\"].column,\n .ui.column.grid > [class*=\"twelve wide computer\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide computer\"].column,\n .ui.grid > [class*=\"thirteen wide computer\"].column,\n .ui.column.grid > [class*=\"thirteen wide computer\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide computer\"].column,\n .ui.grid > [class*=\"fourteen wide computer\"].column,\n .ui.column.grid > [class*=\"fourteen wide computer\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide computer\"].column,\n .ui.grid > [class*=\"fifteen wide computer\"].column,\n .ui.column.grid > [class*=\"fifteen wide computer\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide computer\"].column,\n .ui.grid > [class*=\"sixteen wide computer\"].column,\n .ui.column.grid > [class*=\"sixteen wide computer\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Large Monitor Sizing Combinations */\n@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){\n .ui.grid > .row > [class*=\"one wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"one wide large screen\"].column,\n .ui.grid > [class*=\"one wide large screen\"].column,\n .ui.column.grid > [class*=\"one wide large screen\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"two wide large screen\"].column,\n .ui.grid > [class*=\"two wide large screen\"].column,\n .ui.column.grid > [class*=\"two wide large screen\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"three wide large screen\"].column,\n .ui.grid > [class*=\"three wide large screen\"].column,\n .ui.column.grid > [class*=\"three wide large screen\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"four wide large screen\"].column,\n .ui.grid > [class*=\"four wide large screen\"].column,\n .ui.column.grid > [class*=\"four wide large screen\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"five wide large screen\"].column,\n .ui.grid > [class*=\"five wide large screen\"].column,\n .ui.column.grid > [class*=\"five wide large screen\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"six wide large screen\"].column,\n .ui.grid > [class*=\"six wide large screen\"].column,\n .ui.column.grid > [class*=\"six wide large screen\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"seven wide large screen\"].column,\n .ui.grid > [class*=\"seven wide large screen\"].column,\n .ui.column.grid > [class*=\"seven wide large screen\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"eight wide large screen\"].column,\n .ui.grid > [class*=\"eight wide large screen\"].column,\n .ui.column.grid > [class*=\"eight wide large screen\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"nine wide large screen\"].column,\n .ui.grid > [class*=\"nine wide large screen\"].column,\n .ui.column.grid > [class*=\"nine wide large screen\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"ten wide large screen\"].column,\n .ui.grid > [class*=\"ten wide large screen\"].column,\n .ui.column.grid > [class*=\"ten wide large screen\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide large screen\"].column,\n .ui.grid > [class*=\"eleven wide large screen\"].column,\n .ui.column.grid > [class*=\"eleven wide large screen\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide large screen\"].column,\n .ui.grid > [class*=\"twelve wide large screen\"].column,\n .ui.column.grid > [class*=\"twelve wide large screen\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide large screen\"].column,\n .ui.grid > [class*=\"thirteen wide large screen\"].column,\n .ui.column.grid > [class*=\"thirteen wide large screen\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide large screen\"].column,\n .ui.grid > [class*=\"fourteen wide large screen\"].column,\n .ui.column.grid > [class*=\"fourteen wide large screen\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide large screen\"].column,\n .ui.grid > [class*=\"fifteen wide large screen\"].column,\n .ui.column.grid > [class*=\"fifteen wide large screen\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide large screen\"].column,\n .ui.grid > [class*=\"sixteen wide large screen\"].column,\n .ui.column.grid > [class*=\"sixteen wide large screen\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Widescreen Sizing Combinations */\n@media only screen and (min-width: @widescreenMonitorBreakpoint) {\n .ui.grid > .row > [class*=\"one wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"one wide widescreen\"].column,\n .ui.grid > [class*=\"one wide widescreen\"].column,\n .ui.column.grid > [class*=\"one wide widescreen\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"two wide widescreen\"].column,\n .ui.grid > [class*=\"two wide widescreen\"].column,\n .ui.column.grid > [class*=\"two wide widescreen\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"three wide widescreen\"].column,\n .ui.grid > [class*=\"three wide widescreen\"].column,\n .ui.column.grid > [class*=\"three wide widescreen\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"four wide widescreen\"].column,\n .ui.grid > [class*=\"four wide widescreen\"].column,\n .ui.column.grid > [class*=\"four wide widescreen\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"five wide widescreen\"].column,\n .ui.grid > [class*=\"five wide widescreen\"].column,\n .ui.column.grid > [class*=\"five wide widescreen\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"six wide widescreen\"].column,\n .ui.grid > [class*=\"six wide widescreen\"].column,\n .ui.column.grid > [class*=\"six wide widescreen\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"seven wide widescreen\"].column,\n .ui.grid > [class*=\"seven wide widescreen\"].column,\n .ui.column.grid > [class*=\"seven wide widescreen\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"eight wide widescreen\"].column,\n .ui.grid > [class*=\"eight wide widescreen\"].column,\n .ui.column.grid > [class*=\"eight wide widescreen\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"nine wide widescreen\"].column,\n .ui.grid > [class*=\"nine wide widescreen\"].column,\n .ui.column.grid > [class*=\"nine wide widescreen\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"ten wide widescreen\"].column,\n .ui.grid > [class*=\"ten wide widescreen\"].column,\n .ui.column.grid > [class*=\"ten wide widescreen\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide widescreen\"].column,\n .ui.grid > [class*=\"eleven wide widescreen\"].column,\n .ui.column.grid > [class*=\"eleven wide widescreen\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide widescreen\"].column,\n .ui.grid > [class*=\"twelve wide widescreen\"].column,\n .ui.column.grid > [class*=\"twelve wide widescreen\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide widescreen\"].column,\n .ui.grid > [class*=\"thirteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"thirteen wide widescreen\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide widescreen\"].column,\n .ui.grid > [class*=\"fourteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"fourteen wide widescreen\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide widescreen\"].column,\n .ui.grid > [class*=\"fifteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"fifteen wide widescreen\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide widescreen\"].column,\n .ui.grid > [class*=\"sixteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"sixteen wide widescreen\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/*----------------------\n Centered\n-----------------------*/\n\n.ui.centered.grid,\n.ui.centered.grid > .row,\n.ui.grid > .centered.row {\n text-align: center;\n justify-content: center;\n}\n.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),\n.ui.centered.grid > .row > .column:not(.aligned):not(.justified),\n.ui.grid .centered.row > .column:not(.aligned):not(.justified) {\n text-align: left;\n}\n\n.ui.grid > .centered.column,\n.ui.grid > .row > .centered.column {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n/*----------------------\n Relaxed\n-----------------------*/\n\n.ui.relaxed.grid > .column:not(.row),\n.ui.relaxed.grid > .row > .column,\n.ui.grid > .relaxed.row > .column {\n padding-left: (@relaxedGutterWidth / 2);\n padding-right: (@relaxedGutterWidth / 2);\n}\n\n.ui[class*=\"very relaxed\"].grid > .column:not(.row),\n.ui[class*=\"very relaxed\"].grid > .row > .column,\n.ui.grid > [class*=\"very relaxed\"].row > .column {\n padding-left: (@veryRelaxedGutterWidth / 2);\n padding-right: (@veryRelaxedGutterWidth / 2);\n}\n\n/* Coupling with UI Divider */\n.ui.relaxed.grid .row + .ui.divider,\n.ui.grid .relaxed.row + .ui.divider {\n margin-left: (@relaxedGutterWidth / 2);\n margin-right: (@relaxedGutterWidth / 2);\n}\n.ui[class*=\"very relaxed\"].grid .row + .ui.divider,\n.ui.grid [class*=\"very relaxed\"].row + .ui.divider {\n margin-left: (@veryRelaxedGutterWidth / 2);\n margin-right: (@veryRelaxedGutterWidth / 2);\n}\n\n\n/*----------------------\n Padded\n-----------------------*/\n\n.ui.padded.grid:not(.vertically):not(.horizontally) {\n margin: 0em !important;\n}\n[class*=\"horizontally padded\"].ui.grid {\n margin-left: 0em !important;\n margin-right: 0em !important;\n}\n[class*=\"vertically padded\"].ui.grid {\n margin-top: 0em !important;\n margin-bottom: 0em !important;\n}\n\n/*----------------------\n \"Floated\"\n-----------------------*/\n\n.ui.grid [class*=\"left floated\"].column {\n margin-right: auto;\n}\n.ui.grid [class*=\"right floated\"].column {\n margin-left: auto;\n}\n\n\n/*----------------------\n Divided\n-----------------------*/\n\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .column:not(.row),\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .row > .column {\n box-shadow: @dividedBorder;\n}\n\n/* Swap from padding to margin on columns to have dividers align */\n.ui[class*=\"vertically divided\"].grid > .column:not(.row),\n.ui[class*=\"vertically divided\"].grid > .row > .column {\n margin-top: (@rowSpacing / 2);\n margin-bottom: (@rowSpacing / 2);\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n.ui[class*=\"vertically divided\"].grid > .row {\n margin-top: 0em;\n margin-bottom: 0em;\n}\n\n\n\n/* No divider on first column on row */\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: none;\n}\n\n/* No space on top of first row */\n.ui[class*=\"vertically divided\"].grid > .row:first-child > .column {\n margin-top: 0em;\n}\n\n\n/* Divided Row */\n.ui.grid > .divided.row > .column {\n box-shadow: @dividedBorder;\n}\n.ui.grid > .divided.row > .column:first-child {\n box-shadow: none;\n}\n\n/* Vertically Divided */\n.ui[class*=\"vertically divided\"].grid > .row {\n position: relative;\n}\n.ui[class*=\"vertically divided\"].grid > .row:before {\n position: absolute;\n content: \"\";\n top: 0em;\n left: 0px;\n\n width: ~\"calc(100% - \"@gutterWidth~\")\";\n height: 1px;\n\n margin: 0% (@gutterWidth / 2);\n box-shadow: @verticallyDividedBorder;\n}\n\n/* Padded Horizontally Divided */\n[class*=\"horizontally padded\"].ui.divided.grid,\n.ui.padded.divided.grid:not(.vertically):not(.horizontally) {\n width: 100%;\n}\n\n/* First Row Vertically Divided */\n.ui[class*=\"vertically divided\"].grid > .row:first-child:before {\n box-shadow: none;\n}\n\n/* Inverted Divided */\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .column:not(.row),\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .row > .column {\n box-shadow: @dividedInvertedBorder;\n}\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .column:not(.row):first-child,\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: none;\n}\n.ui.inverted[class*=\"vertically divided\"].grid > .row:before {\n box-shadow: @verticallyDividedInvertedBorder;\n}\n\n/* Relaxed */\n.ui.relaxed[class*=\"vertically divided\"].grid > .row:before {\n margin-left: (@relaxedGutterWidth / 2);\n margin-right: (@relaxedGutterWidth / 2);\n width: ~\"calc(100% - \"@relaxedGutterWidth~\")\";\n}\n.ui[class*=\"very relaxed\"][class*=\"vertically divided\"].grid > .row:before {\n margin-left: @veryRelaxedGutterWidth;\n margin-right: @veryRelaxedGutterWidth;\n width: ~\"calc(100% - \"@veryRelaxedGutterWidth~\")\";\n}\n\n/*----------------------\n Celled\n-----------------------*/\n\n.ui.celled.grid {\n width: 100%;\n margin: @celledMargin;\n box-shadow: @celledGridDivider;\n}\n\n.ui.celled.grid > .row {\n width: 100% !important;\n margin: 0em;\n padding: 0em;\n box-shadow: @celledRowDivider;\n}\n.ui.celled.grid > .column:not(.row),\n.ui.celled.grid > .row > .column {\n box-shadow: @celledColumnDivider;\n}\n\n.ui.celled.grid > .column:first-child,\n.ui.celled.grid > .row > .column:first-child {\n box-shadow: none;\n}\n\n.ui.celled.grid > .column:not(.row),\n.ui.celled.grid > .row > .column {\n padding: @celledPadding;\n}\n.ui.relaxed.celled.grid > .column:not(.row),\n.ui.relaxed.celled.grid > .row > .column {\n padding: @celledRelaxedPadding;\n}\n.ui[class*=\"very relaxed\"].celled.grid > .column:not(.row),\n.ui[class*=\"very relaxed\"].celled.grid > .row > .column {\n padding: @celledVeryRelaxedPadding;\n}\n\n/* Internally Celled */\n.ui[class*=\"internally celled\"].grid {\n box-shadow: none;\n margin: 0em;\n}\n.ui[class*=\"internally celled\"].grid > .row:first-child {\n box-shadow: none;\n}\n.ui[class*=\"internally celled\"].grid > .row > .column:first-child {\n box-shadow: none;\n}\n\n/*----------------------\n Vertically Aligned\n-----------------------*/\n\n/* Top Aligned */\n.ui[class*=\"top aligned\"].grid > .column:not(.row),\n.ui[class*=\"top aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"top aligned\"].row > .column,\n.ui.grid > [class*=\"top aligned\"].column:not(.row),\n.ui.grid > .row > [class*=\"top aligned\"].column {\n flex-direction: column;\n vertical-align: top;\n align-self: flex-start !important;\n}\n\n/* Middle Aligned */\n.ui[class*=\"middle aligned\"].grid > .column:not(.row),\n.ui[class*=\"middle aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"middle aligned\"].row > .column,\n.ui.grid > [class*=\"middle aligned\"].column:not(.row),\n.ui.grid > .row > [class*=\"middle aligned\"].column {\n flex-direction: column;\n vertical-align: middle;\n align-self: center !important;\n}\n\n/* Bottom Aligned */\n.ui[class*=\"bottom aligned\"].grid > .column:not(.row),\n.ui[class*=\"bottom aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"bottom aligned\"].row > .column,\n.ui.grid > [class*=\"bottom aligned\"].column:not(.row),\n.ui.grid > .row > [class*=\"bottom aligned\"].column {\n flex-direction: column;\n vertical-align: bottom;\n align-self: flex-end !important;\n}\n\n/* Stretched */\n.ui.stretched.grid > .row > .column,\n.ui.stretched.grid > .column,\n.ui.grid > .stretched.row > .column,\n.ui.grid > .stretched.column:not(.row),\n.ui.grid > .row > .stretched.column {\n display: inline-flex !important;\n align-self: stretch;\n flex-direction: column;\n}\n\n.ui.stretched.grid > .row > .column > *,\n.ui.stretched.grid > .column > *,\n.ui.grid > .stretched.row > .column > *,\n.ui.grid > .stretched.column:not(.row) > *,\n.ui.grid > .row > .stretched.column > * {\n flex-grow: 1;\n}\n\n/*----------------------\n Horizontally Centered\n-----------------------*/\n\n/* Left Aligned */\n.ui[class*=\"left aligned\"].grid > .column,\n.ui[class*=\"left aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"left aligned\"].row > .column,\n.ui.grid > [class*=\"left aligned\"].column.column,\n.ui.grid > .row > [class*=\"left aligned\"].column.column {\n text-align: left;\n align-self: inherit;\n}\n\n/* Center Aligned */\n.ui[class*=\"center aligned\"].grid > .column,\n.ui[class*=\"center aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"center aligned\"].row > .column,\n.ui.grid > [class*=\"center aligned\"].column.column,\n.ui.grid > .row > [class*=\"center aligned\"].column.column {\n text-align: center;\n align-self: inherit;\n}\n.ui[class*=\"center aligned\"].grid {\n justify-content: center;\n}\n\n/* Right Aligned */\n.ui[class*=\"right aligned\"].grid > .column,\n.ui[class*=\"right aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"right aligned\"].row > .column,\n.ui.grid > [class*=\"right aligned\"].column.column,\n.ui.grid > .row > [class*=\"right aligned\"].column.column {\n text-align: right;\n align-self: inherit;\n}\n\n/* Justified */\n.ui.justified.grid > .column,\n.ui.justified.grid > .row > .column,\n.ui.grid > .justified.row > .column,\n.ui.grid > .justified.column.column,\n.ui.grid > .row > .justified.column.column {\n text-align: justify;\n hyphens: auto;\n}\n\n/*----------------------\n Colored\n-----------------------*/\n\n.ui.grid > .row > .red.column,\n.ui.grid > .row > .orange.column,\n.ui.grid > .row > .yellow.column,\n.ui.grid > .row > .olive.column,\n.ui.grid > .row > .green.column,\n.ui.grid > .row > .teal.column,\n.ui.grid > .row > .blue.column,\n.ui.grid > .row > .violet.column,\n.ui.grid > .row > .purple.column,\n.ui.grid > .row > .pink.column,\n.ui.grid > .row > .brown.column,\n.ui.grid > .row > .grey.column,\n.ui.grid > .row > .black.column {\n margin-top: -(@rowSpacing / 2);\n margin-bottom: -(@rowSpacing / 2);\n padding-top: (@rowSpacing / 2);\n padding-bottom: (@rowSpacing / 2);\n}\n\n/* Red */\n.ui.grid > .red.row,\n.ui.grid > .red.column,\n.ui.grid > .row > .red.column {\n background-color: @red !important;\n color: @white;\n}\n/* Orange */\n.ui.grid > .orange.row,\n.ui.grid > .orange.column,\n.ui.grid > .row > .orange.column {\n background-color: @orange !important;\n color: @white;\n}\n/* Yellow */\n.ui.grid > .yellow.row,\n.ui.grid > .yellow.column,\n.ui.grid > .row > .yellow.column {\n background-color: @yellow !important;\n color: @white;\n}\n/* Olive */\n.ui.grid > .olive.row,\n.ui.grid > .olive.column,\n.ui.grid > .row > .olive.column {\n background-color: @olive !important;\n color: @white;\n}\n/* Green */\n.ui.grid > .green.row,\n.ui.grid > .green.column,\n.ui.grid > .row > .green.column {\n background-color: @green !important;\n color: @white;\n}\n/* Teal */\n.ui.grid > .teal.row,\n.ui.grid > .teal.column,\n.ui.grid > .row > .teal.column {\n background-color: @teal !important;\n color: @white;\n}\n/* Blue */\n.ui.grid > .blue.row,\n.ui.grid > .blue.column,\n.ui.grid > .row > .blue.column {\n background-color: @blue !important;\n color: @white;\n}\n/* Violet */\n.ui.grid > .violet.row,\n.ui.grid > .violet.column,\n.ui.grid > .row > .violet.column {\n background-color: @violet !important;\n color: @white;\n}\n/* Purple */\n.ui.grid > .purple.row,\n.ui.grid > .purple.column,\n.ui.grid > .row > .purple.column {\n background-color: @purple !important;\n color: @white;\n}\n/* Pink */\n.ui.grid > .pink.row,\n.ui.grid > .pink.column,\n.ui.grid > .row > .pink.column {\n background-color: @pink !important;\n color: @white;\n}\n/* Brown */\n.ui.grid > .brown.row,\n.ui.grid > .brown.column,\n.ui.grid > .row > .brown.column {\n background-color: @brown !important;\n color: @white;\n}\n/* Grey */\n.ui.grid > .grey.row,\n.ui.grid > .grey.column,\n.ui.grid > .row > .grey.column {\n background-color: @grey !important;\n color: @white;\n}\n/* Black */\n.ui.grid > .black.row,\n.ui.grid > .black.column,\n.ui.grid > .row > .black.column {\n background-color: @black !important;\n color: @white;\n}\n\n\n/*----------------------\n Equal Width\n-----------------------*/\n\n.ui[class*=\"equal width\"].grid > .column:not(.row),\n.ui[class*=\"equal width\"].grid > .row > .column,\n.ui.grid > [class*=\"equal width\"].row > .column {\n display: inline-block;\n flex-grow: 1;\n}\n.ui[class*=\"equal width\"].grid > .wide.column,\n.ui[class*=\"equal width\"].grid > .row > .wide.column,\n.ui.grid > [class*=\"equal width\"].row > .wide.column {\n flex-grow: 0;\n}\n\n\n/*----------------------\n Reverse\n-----------------------*/\n\n\n/* Mobile */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui[class*=\"mobile reversed\"].grid,\n .ui[class*=\"mobile reversed\"].grid > .row,\n .ui.grid > [class*=\"mobile reversed\"].row {\n flex-direction: row-reverse;\n }\n .ui[class*=\"mobile vertically reversed\"].grid,\n .ui.stackable[class*=\"mobile reversed\"] {\n flex-direction: column-reverse;\n }\n\n /* Divided Reversed */\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: @dividedBorder;\n }\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:last-child,\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:last-child {\n box-shadow: none;\n }\n /* Vertically Divided Reversed */\n .ui.grid[class*=\"vertically divided\"][class*=\"mobile vertically reversed\"] > .row:first-child:before {\n box-shadow: @verticallyDividedBorder;\n }\n .ui.grid[class*=\"vertically divided\"][class*=\"mobile vertically reversed\"] > .row:last-child:before {\n box-shadow: none;\n }\n /* Celled Reversed */\n .ui[class*=\"mobile reversed\"].celled.grid > .row > .column:first-child {\n box-shadow: @celledColumnDivider;\n }\n .ui[class*=\"mobile reversed\"].celled.grid > .row > .column:last-child {\n box-shadow: none;\n }\n}\n\n/* Tablet */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui[class*=\"tablet reversed\"].grid,\n .ui[class*=\"tablet reversed\"].grid > .row,\n .ui.grid > [class*=\"tablet reversed\"].row {\n flex-direction: row-reverse;\n }\n .ui[class*=\"tablet vertically reversed\"].grid {\n flex-direction: column-reverse;\n }\n\n /* Divided Reversed */\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: @dividedBorder;\n }\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:last-child,\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:last-child {\n box-shadow: none;\n }\n /* Vertically Divided Reversed */\n .ui.grid[class*=\"vertically divided\"][class*=\"tablet vertically reversed\"] > .row:first-child:before {\n box-shadow: @verticallyDividedBorder;\n }\n .ui.grid[class*=\"vertically divided\"][class*=\"tablet vertically reversed\"] > .row:last-child:before {\n box-shadow: none;\n }\n /* Celled Reversed */\n .ui[class*=\"tablet reversed\"].celled.grid > .row > .column:first-child {\n box-shadow: @celledColumnDivider;\n }\n .ui[class*=\"tablet reversed\"].celled.grid > .row > .column:last-child {\n box-shadow: none;\n }\n}\n\n/* Computer */\n@media only screen and (min-width: @computerBreakpoint) {\n .ui[class*=\"computer reversed\"].grid,\n .ui[class*=\"computer reversed\"].grid > .row,\n .ui.grid > [class*=\"computer reversed\"].row {\n flex-direction: row-reverse;\n }\n .ui[class*=\"computer vertically reversed\"].grid {\n flex-direction: column-reverse;\n }\n\n /* Divided Reversed */\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: @dividedBorder;\n }\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:last-child,\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:last-child {\n box-shadow: none;\n }\n /* Vertically Divided Reversed */\n .ui.grid[class*=\"vertically divided\"][class*=\"computer vertically reversed\"] > .row:first-child:before {\n box-shadow: @verticallyDividedBorder;\n }\n .ui.grid[class*=\"vertically divided\"][class*=\"computer vertically reversed\"] > .row:last-child:before {\n box-shadow: none;\n }\n /* Celled Reversed */\n .ui[class*=\"computer reversed\"].celled.grid > .row > .column:first-child {\n box-shadow: @celledColumnDivider;\n }\n .ui[class*=\"computer reversed\"].celled.grid > .row > .column:last-child {\n box-shadow: none;\n }\n}\n\n\n/*-------------------\n Doubling\n--------------------*/\n\n/* Tablet Only */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.doubling.grid {\n width: auto;\n }\n .ui.grid > .doubling.row,\n .ui.doubling.grid > .row {\n margin: 0em !important;\n padding: 0em !important;\n }\n .ui.grid > .doubling.row > .column,\n .ui.doubling.grid > .row > .column {\n display: inline-block !important;\n padding-top: (@rowSpacing / 2) !important;\n padding-bottom: (@rowSpacing / 2) !important;\n box-shadow: none !important;\n margin: 0em;\n }\n .ui[class*=\"two column\"].doubling.grid > .row > .column,\n .ui[class*=\"two column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"two column\"].doubling.row.row > .column {\n width: @oneColumn !important;\n }\n .ui[class*=\"three column\"].doubling.grid > .row > .column,\n .ui[class*=\"three column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"three column\"].doubling.row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"four column\"].doubling.grid > .row > .column,\n .ui[class*=\"four column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"four column\"].doubling.row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"five column\"].doubling.grid > .row > .column,\n .ui[class*=\"five column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"five column\"].doubling.row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"six column\"].doubling.grid > .row > .column,\n .ui[class*=\"six column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"six column\"].doubling.row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"seven column\"].doubling.grid > .row > .column,\n .ui[class*=\"seven column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"seven column\"].doubling.row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"eight column\"].doubling.grid > .row > .column,\n .ui[class*=\"eight column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"eight column\"].doubling.row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"nine column\"].doubling.grid > .row > .column,\n .ui[class*=\"nine column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"nine column\"].doubling.row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"ten column\"].doubling.grid > .row > .column,\n .ui[class*=\"ten column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"ten column\"].doubling.row.row > .column {\n width: @fiveColumn !important;\n }\n .ui[class*=\"eleven column\"].doubling.grid > .row > .column,\n .ui[class*=\"eleven column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"eleven column\"].doubling.row.row > .column {\n width: @fiveColumn !important;\n }\n .ui[class*=\"twelve column\"].doubling.grid > .row > .column,\n .ui[class*=\"twelve column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"twelve column\"].doubling.row.row > .column {\n width: @sixColumn !important;\n }\n .ui[class*=\"thirteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"thirteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"thirteen column\"].doubling.row.row > .column {\n width: @sixColumn !important;\n }\n .ui[class*=\"fourteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"fourteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"fourteen column\"].doubling.row.row > .column {\n width: @sevenColumn !important;\n }\n .ui[class*=\"fifteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"fifteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"fifteen column\"].doubling.row.row > .column {\n width: @sevenColumn !important;\n }\n .ui[class*=\"sixteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"sixteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"sixteen column\"].doubling.row.row > .column {\n width: @eightColumn !important;\n }\n}\n\n/* Mobile Only */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.grid > .doubling.row,\n .ui.doubling.grid > .row {\n margin: 0em !important;\n padding: 0em !important;\n }\n .ui.grid > .doubling.row > .column,\n .ui.doubling.grid > .row > .column {\n padding-top: (@rowSpacing / 2) !important;\n padding-bottom: (@rowSpacing / 2) !important;\n margin: 0em !important;\n box-shadow: none !important;\n }\n .ui[class*=\"two column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"two column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"two column\"].doubling:not(.stackable).row.row > .column {\n width: @oneColumn !important;\n }\n .ui[class*=\"three column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"three column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"three column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"four column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"four column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"four column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"five column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"five column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"five column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"six column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"six column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"six column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"seven column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"seven column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"seven column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"eight column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"eight column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"eight column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"nine column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"nine column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"nine column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"ten column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"ten column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"ten column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"eleven column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"eleven column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"eleven column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"twelve column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"twelve column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"twelve column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"thirteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"thirteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"thirteen column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"fourteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"fourteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"fourteen column\"].doubling:not(.stackable).row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"fifteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"fifteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"fifteen column\"].doubling:not(.stackable).row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"sixteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"sixteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"sixteen column\"].doubling:not(.stackable).row.row > .column {\n width: @fourColumn !important;\n }\n}\n\n/*-------------------\n Stackable\n--------------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.stackable.grid {\n width: auto;\n margin-left: 0em !important;\n margin-right: 0em !important;\n }\n .ui.stackable.grid > .row > .wide.column,\n .ui.stackable.grid > .wide.column,\n .ui.stackable.grid > .column.grid > .column,\n .ui.stackable.grid > .column.row > .column,\n .ui.stackable.grid > .row > .column,\n .ui.stackable.grid > .column:not(.row),\n .ui.grid > .stackable.stackable.row > .column {\n width: 100% !important;\n margin: 0em 0em !important;\n box-shadow: none !important;\n padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;\n }\n .ui.stackable.grid:not(.vertically) > .row {\n margin: 0em;\n padding: 0em;\n }\n\n /* Coupling */\n .ui.container > .ui.stackable.grid > .column,\n .ui.container > .ui.stackable.grid > .row > .column {\n padding-left: 0em !important;\n padding-right: 0em !important;\n }\n\n /* Don't pad inside segment or nested grid */\n .ui.grid .ui.stackable.grid,\n .ui.segment:not(.vertical) .ui.stackable.page.grid {\n margin-left: -(@stackableGutter / 2) !important;\n margin-right: -(@stackableGutter / 2) !important;\n }\n\n /* Divided Stackable */\n .ui.stackable.divided.grid > .row:first-child > .column:first-child,\n .ui.stackable.celled.grid > .row:first-child > .column:first-child,\n .ui.stackable.divided.grid > .column:not(.row):first-child,\n .ui.stackable.celled.grid > .column:not(.row):first-child {\n border-top: none !important;\n }\n .ui.inverted.stackable.celled.grid > .column:not(.row),\n .ui.inverted.stackable.divided.grid > .column:not(.row),\n .ui.inverted.stackable.celled.grid > .row > .column,\n .ui.inverted.stackable.divided.grid > .row > .column {\n border-top: @stackableInvertedMobileBorder;\n }\n\n .ui.stackable.celled.grid > .column:not(.row),\n .ui.stackable.divided:not(.vertically).grid > .column:not(.row),\n .ui.stackable.celled.grid > .row > .column,\n .ui.stackable.divided:not(.vertically).grid > .row > .column {\n border-top: @stackableMobileBorder;\n box-shadow: none !important;\n padding-top: @stackableRowSpacing !important;\n padding-bottom: @stackableRowSpacing !important;\n }\n\n .ui.stackable.celled.grid > .row {\n box-shadow: none !important;\n }\n .ui.stackable.divided:not(.vertically).grid > .column:not(.row),\n .ui.stackable.divided:not(.vertically).grid > .row > .column {\n padding-left: 0em !important;\n padding-right: 0em !important;\n }\n\n}\n\n/*----------------------\n Only (Device)\n-----------------------*/\n\n\n/* These include arbitrary class repetitions for forced specificity */\n\n/* Mobile Only Hide */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"computer only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"computer only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"computer only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"computer only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"large screen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"large screen only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n/* Tablet Only Hide */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.tablet),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.tablet),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.tablet),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.tablet) {\n display: none !important;\n }\n .ui[class*=\"computer only\"].grid.grid.grid:not(.tablet),\n .ui.grid.grid.grid > [class*=\"computer only\"].row:not(.tablet),\n .ui.grid.grid.grid > [class*=\"computer only\"].column:not(.tablet),\n .ui.grid.grid.grid > .row > [class*=\"computer only\"].column:not(.tablet) {\n display: none !important;\n }\n .ui[class*=\"large screen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"large screen only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n\n/* Computer Only Hide */\n@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"large screen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"large screen only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n\n/* Large Screen Only Hide */\n@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n\n/* Widescreen Only Hide */\n@media only screen and (min-width: @widescreenMonitorBreakpoint) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.computer) {\n display: none !important;\n }\n}\n\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/collections/menu.less", "content": "/*\n * # Semantic - Menu\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Copyright 2015 Contributor\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'menu';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Standard\n*******************************/\n\n/*--------------\n Menu\n---------------*/\n\n.ui.menu {\n display: flex;\n margin: @margin;\n font-family: @fontFamily;\n background: @background;\n font-weight: @fontWeight;\n border: @border;\n box-shadow: @boxShadow;\n border-radius: @borderRadius;\n min-height: @minHeight;\n}\n\n.ui.menu:after {\n content: '';\n display: block;\n height: 0px;\n clear: both;\n visibility: hidden;\n}\n\n.ui.menu:first-child {\n margin-top: 0rem;\n}\n.ui.menu:last-child {\n margin-bottom: 0rem;\n}\n\n\n/*--------------\n Sub-Menu\n---------------*/\n\n.ui.menu .menu {\n margin: 0em;\n}\n\n.ui.menu:not(.vertical) > .menu {\n display: flex;\n}\n\n/*--------------\n Item\n---------------*/\n\n.ui.menu:not(.vertical) .item {\n display: flex;\n align-items: center;\n}\n\n.ui.menu .item {\n position: relative;\n vertical-align: middle;\n line-height: 1;\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n flex: 0 0 auto;\n user-select: none;\n\n background: @itemBackground;\n padding: @itemVerticalPadding @itemHorizontalPadding;\n text-transform: @itemTextTransform;\n color: @itemTextColor;\n font-weight: @itemFontWeight;\n transition: @itemTransition;\n}\n\n.ui.menu > .item:first-child {\n border-radius: @borderRadius 0px 0px @borderRadius;\n}\n\n/* Border */\n.ui.menu .item:before {\n position: absolute;\n content: '';\n top: 0%;\n right: 0px;\n height: 100%;\n\n width: @dividerSize;\n background: @dividerBackground;\n}\n\n/*--------------\n Text Content\n---------------*/\n\n.ui.menu .text.item > *,\n.ui.menu .item > a:not(.ui),\n.ui.menu .item > p:only-child {\n user-select: text;\n line-height: @textLineHeight;\n}\n.ui.menu .item > p:first-child {\n margin-top: 0;\n}\n.ui.menu .item > p:last-child {\n margin-bottom: 0;\n}\n\n/*--------------\n Icons\n---------------*/\n\n.ui.menu .item > i.icon {\n opacity: @iconOpacity;\n float: @iconFloat;\n margin: @iconMargin;\n}\n\n/*--------------\n Button\n---------------*/\n\n.ui.menu:not(.vertical) .item > .button {\n position: relative;\n top: @buttonOffset;\n margin: @buttonMargin;\n padding-bottom: @buttonVerticalPadding;\n padding-top: @buttonVerticalPadding;\n font-size: @buttonSize;\n}\n\n/*----------------\n Grid / Container\n-----------------*/\n\n.ui.menu > .grid,\n.ui.menu > .container {\n display: flex;\n align-items: inherit;\n flex-direction: inherit;\n}\n\n/*--------------\n Inputs\n---------------*/\n\n.ui.menu .item > .input {\n width: 100%;\n}\n.ui.menu:not(.vertical) .item > .input {\n position: relative;\n top: @inputOffset;\n margin: @inputVerticalMargin 0em;\n}\n.ui.menu .item > .input input {\n font-size: @inputSize;\n padding-top: @inputVerticalPadding;\n padding-bottom: @inputVerticalPadding;\n}\n\n\n/*--------------\n Header\n---------------*/\n\n.ui.menu .header.item,\n.ui.vertical.menu .header.item {\n margin: 0em;\n background: @headerBackground;\n text-transform: @headerTextTransform;\n font-weight: @headerWeight;\n}\n\n.ui.vertical.menu .item > .header:not(.ui) {\n margin: @verticalHeaderMargin;\n font-size: @verticalHeaderFontSize;\n font-weight: @verticalHeaderFontWeight;\n}\n\n/*--------------\n Dropdowns\n---------------*/\n\n\n/* Dropdown Icon */\n.ui.menu .item > i.dropdown.icon {\n padding: 0em;\n float: @dropdownIconFloat;\n margin: 0em 0em 0em @dropdownIconDistance;\n}\n\n/* Menu */\n.ui.menu .dropdown.item .menu {\n min-width: ~\"calc(100% - 1px)\";\n border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;\n background: @dropdownBackground;\n margin: @dropdownMenuDistance 0px 0px;\n box-shadow: @dropdownMenuBoxShadow;\n flex-direction: column !important;\n}\n\n\n/* Menu Items */\n.ui.menu .ui.dropdown .menu > .item {\n margin: 0;\n text-align: left;\n font-size: @dropdownItemFontSize !important;\n padding: @dropdownItemPadding !important;\n background: @dropdownItemBackground !important;\n color: @dropdownItemColor !important;\n text-transform: @dropdownItemTextTransform !important;\n font-weight: @dropdownItemFontWeight !important;\n box-shadow: @dropdownItemBoxShadow !important;\n transition: @dropdownItemTransition !important;\n}\n.ui.menu .ui.dropdown .menu > .item:hover {\n background: @dropdownHoveredItemBackground !important;\n color: @dropdownHoveredItemColor !important;\n}\n.ui.menu .ui.dropdown .menu > .selected.item {\n background: @dropdownSelectedItemBackground !important;\n color: @dropdownSelectedItemColor !important;\n}\n.ui.menu .ui.dropdown .menu > .active.item {\n background: @dropdownActiveItemBackground !important;\n font-weight: @dropdownActiveItemFontWeight !important;\n color: @dropdownActiveItemColor !important;\n}\n\n.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {\n display: block;\n}\n.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {\n display: inline-block;\n font-size: @dropdownItemIconFontSize !important;\n float: @dropdownItemIconFloat;\n margin: @dropdownItemIconMargin;\n}\n\n\n/* Secondary */\n.ui.secondary.menu .dropdown.item > .menu,\n.ui.text.menu .dropdown.item > .menu {\n border-radius: @dropdownMenuBorderRadius;\n margin-top: @secondaryDropdownMenuDistance;\n}\n\n/* Pointing */\n.ui.menu .pointing.dropdown.item .menu {\n margin-top: @pointingDropdownMenuDistance;\n}\n\n/* Inverted */\n.ui.inverted.menu .search.dropdown.item > .search,\n.ui.inverted.menu .search.dropdown.item > .text {\n color: @invertedSelectionDropdownColor;\n}\n\n/* Vertical */\n.ui.vertical.menu .dropdown.item > .icon {\n float: right;\n content: \"\\f0da\";\n margin-left: 1em;\n}\n.ui.vertical.menu .dropdown.item .menu {\n left: 100%;\n min-width: 0;\n margin: 0em 0em 0em @dropdownMenuDistance;\n box-shadow: @dropdownVerticalMenuBoxShadow;\n border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;\n}\n.ui.vertical.menu .dropdown.item.upward .menu {\n bottom: 0;\n}\n.ui.vertical.menu .dropdown.item:not(.upward) .menu {\n top: 0;\n}\n.ui.vertical.menu .active.dropdown.item {\n border-top-right-radius: 0em;\n border-bottom-right-radius: 0em;\n}\n.ui.vertical.menu .dropdown.active.item {\n box-shadow: none;\n}\n\n/* Evenly Divided */\n.ui.item.menu .dropdown .menu .item {\n width: 100%;\n}\n\n/*--------------\n Labels\n---------------*/\n\n.ui.menu .item > .label {\n background: @labelBackground;\n color: @labelTextColor;\n margin-left: @labelTextMargin;\n padding: @labelVerticalPadding @labelHorizontalPadding;\n}\n.ui.vertical.menu .item > .label {\n background: @labelBackground;\n color: @labelTextColor;\n margin-top: @labelOffset;\n margin-bottom: @labelOffset;\n padding: @labelVerticalPadding @labelHorizontalPadding;\n}\n.ui.menu .item > .floating.label {\n padding: @labelVerticalPadding @labelHorizontalPadding;\n}\n\n/*--------------\n Images\n---------------*/\n\n.ui.menu .item > img:not(.ui) {\n display: inline-block;\n vertical-align: middle;\n margin: @imageMargin;\n width: @imageWidth;\n}\n.ui.vertical.menu .item > img:not(.ui):only-child {\n display: block;\n max-width: 100%;\n width: @verticalImageWidth;\n}\n\n/*******************************\n Coupling\n*******************************/\n\n/*--------------\n List\n---------------*/\n\n/* Menu divider shouldnt apply */\n.ui.menu .list .item:before {\n background: none !important;\n}\n\n/*--------------\n Sidebar\n---------------*/\n\n/* Show vertical dividers below last */\n\n.ui.vertical.sidebar.menu > .item:first-child:before {\n display: block !important;\n}\n.ui.vertical.sidebar.menu > .item::before {\n top: auto;\n bottom: 0px;\n}\n\n/*--------------\n Container\n---------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.menu > .ui.container {\n width: 100% !important;\n margin-left: 0em !important;\n margin-right: 0em !important;\n }\n}\n@media only screen and (min-width: @tabletBreakpoint) {\n .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {\n border-left: @dividerSize solid @dividerBackground;\n }\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Hover\n---------------*/\n\n\n.ui.link.menu .item:hover,\n.ui.menu .dropdown.item:hover,\n.ui.menu .link.item:hover,\n.ui.menu a.item:hover {\n cursor: pointer;\n background: @hoverItemBackground;\n color: @hoverItemTextColor;\n}\n\n\n/*--------------\n Pressed\n---------------*/\n\n.ui.link.menu .item:active,\n.ui.menu .link.item:active,\n.ui.menu a.item:active {\n background: @pressedItemBackground;\n color: @pressedItemTextColor;\n}\n\n\n/*--------------\n Active\n---------------*/\n\n.ui.menu .active.item {\n background: @activeItemBackground;\n color: @activeItemTextColor;\n font-weight: @activeItemFontWeight;\n box-shadow: @activeItemBoxShadow;\n}\n.ui.menu .active.item > i.icon {\n opacity: @activeIconOpacity;\n}\n\n/*--------------\n Active Hover\n---------------*/\n\n.ui.menu .active.item:hover,\n.ui.vertical.menu .active.item:hover {\n background-color: @activeHoverItemBackground;\n color: @activeHoverItemColor;\n}\n\n\n/*--------------\n Disabled\n---------------*/\n\n.ui.menu .item.disabled,\n.ui.menu .item.disabled:hover {\n cursor: default !important;\n background-color: transparent !important;\n color: @disabledTextColor !important;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*------------------\nFloated Menu / Item\n-------------------*/\n\n/* Left Floated */\n.ui.menu:not(.vertical) .left.item,\n.ui.menu:not(.vertical) .left.menu {\n display: flex;\n margin-right: auto !important;\n}\n/* Right Floated */\n.ui.menu:not(.vertical) .right.item,\n.ui.menu:not(.vertical) .right.menu {\n display: flex;\n margin-left: auto !important;\n}\n\n/* Swapped Borders */\n.ui.menu .right.item::before,\n.ui.menu .right.menu > .item::before {\n right: auto;\n left: 0;\n}\n\n\n/*--------------\n Vertical\n---------------*/\n\n.ui.vertical.menu {\n display: block;\n flex-direction: column;\n background: @verticalBackground;\n box-shadow: @verticalBoxShadow;\n}\n\n/*--- Item ---*/\n.ui.vertical.menu .item {\n display: block;\n background: @verticalItemBackground;\n border-top: none;\n border-right: none;\n}\n.ui.vertical.menu > .item:first-child {\n border-radius: @borderRadius @borderRadius 0px 0px;\n}\n.ui.vertical.menu > .item:last-child {\n border-radius: 0px 0px @borderRadius @borderRadius;\n}\n\n/*--- Label ---*/\n.ui.vertical.menu .item > .label {\n float: right;\n text-align: center;\n}\n\n/*--- Icon ---*/\n.ui.vertical.menu .item > i.icon {\n width: @iconWidth;\n float: @verticalIconFloat;\n margin: @verticalIconMargin;\n}\n.ui.vertical.menu .item > .label + i.icon {\n float: @labelAndIconFloat;\n margin: @labelAndIconMargin;\n}\n\n\n/*--- Border ---*/\n.ui.vertical.menu .item:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 0px;\n width: 100%;\n height: @dividerSize;\n background: @verticalDividerBackground;\n}\n\n.ui.vertical.menu .item:first-child:before {\n display: none !important;\n}\n\n\n/*--- Sub Menu ---*/\n.ui.vertical.menu .item > .menu {\n margin: @subMenuMargin;\n}\n.ui.vertical.menu .menu .item {\n background: none;\n padding: @subMenuVerticalPadding @subMenuHorizontalPadding;\n font-size: @subMenuFontSize;\n color: @subMenuTextColor;\n}\n.ui.vertical.menu .item .menu a.item:hover,\n.ui.vertical.menu .item .menu .link.item:hover {\n color: @darkTextColor;\n}\n.ui.vertical.menu .menu .item:before {\n display: none;\n}\n\n/* Vertical Active */\n.ui.vertical.menu .active.item {\n background: @activeItemBackground;\n border-radius: 0em;\n box-shadow: @verticalActiveBoxShadow;\n}\n.ui.vertical.menu > .active.item:first-child {\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.vertical.menu > .active.item:last-child {\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui.vertical.menu > .active.item:only-child {\n border-radius: @borderRadius;\n}\n.ui.vertical.menu .active.item .menu .active.item {\n border-left: none;\n}\n.ui.vertical.menu .item .menu .active.item {\n background-color: @subMenuActiveBackground;\n font-weight: @subMenuActiveFontWeight;\n color: @subMenuActiveTextColor;\n}\n\n\n/*--------------\n Tabular\n---------------*/\n\n.ui.tabular.menu {\n border-radius: 0em;\n box-shadow: none !important;\n border: none;\n background: @tabularBackground;\n border-bottom: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.tabular.fluid.menu {\n width: @tabularFluidWidth !important;\n}\n.ui.tabular.menu .item {\n background: transparent;\n border-bottom: none;\n\n border-left: @tabularBorderWidth solid transparent;\n border-right: @tabularBorderWidth solid transparent;\n border-top: @tabularOppositeBorderWidth solid transparent;\n padding: @tabularVerticalPadding @tabularHorizontalPadding;\n color: @tabularTextColor;\n}\n.ui.tabular.menu .item:before {\n display: none;\n}\n\n/* Hover */\n.ui.tabular.menu .item:hover {\n background-color: transparent;\n color: @tabularHoveredTextColor;\n}\n\n/* Active */\n.ui.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-top-width: @tabularBorderWidth;\n border-color: @tabularBorderColor;\n font-weight: @tabularActiveWeight;\n margin-bottom: -@tabularBorderWidth;\n box-shadow: @tabularActiveBoxShadow;\n border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important;\n}\n\n/* Coupling with segment for attachment */\n.ui.tabular.menu + .attached:not(.top).segment,\n.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {\n border-top: none;\n margin-left: 0px;\n margin-top: 0px;\n margin-right: 0px;\n width: 100%;\n}\n.top.attached.segment + .ui.bottom.tabular.menu {\n position: relative;\n width: @tabularFluidWidth;\n left: -@tabularFluidOffset;\n}\n\n/* Bottom Vertical Tabular */\n.ui.bottom.tabular.menu {\n background: @tabularBackground;\n border-radius: 0em;\n box-shadow: none !important;\n border-bottom: none;\n border-top: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.bottom.tabular.menu .item {\n background: none;\n border-left: @tabularBorderWidth solid transparent;\n border-right: @tabularBorderWidth solid transparent;\n border-bottom: @tabularBorderWidth solid transparent;\n border-top: none;\n}\n.ui.bottom.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-color: @tabularBorderColor;\n margin: -@tabularBorderWidth 0px 0px 0px;\n border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;\n}\n\n/* Vertical Tabular (Left) */\n.ui.vertical.tabular.menu {\n background: @tabularVerticalBackground;\n border-radius: 0em;\n box-shadow: none !important;\n border-bottom: none;\n border-right: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.vertical.tabular.menu .item {\n background: none;\n border-left: @tabularBorderWidth solid transparent;\n border-bottom: @tabularBorderWidth solid transparent;\n border-top: @tabularBorderWidth solid transparent;\n border-right: none;\n}\n.ui.vertical.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-color: @tabularBorderColor;\n margin: 0px -@tabularBorderWidth 0px 0px;\n border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;\n}\n\n/* Vertical Right Tabular */\n.ui.vertical.right.tabular.menu {\n background: @tabularVerticalBackground;\n border-radius: 0em;\n box-shadow: none !important;\n border-bottom: none;\n border-right: none;\n border-left: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.vertical.right.tabular.menu .item {\n background: none;\n border-right: @tabularBorderWidth solid transparent;\n border-bottom: @tabularBorderWidth solid transparent;\n border-top: @tabularBorderWidth solid transparent;\n border-left: none;\n}\n.ui.vertical.right.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-color: @tabularBorderColor;\n margin: 0px 0px 0px -@tabularBorderWidth;\n border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;\n}\n\n/* Dropdown */\n.ui.tabular.menu .active.dropdown.item {\n margin-bottom: 0px;\n border-left: @tabularBorderWidth solid transparent;\n border-right: @tabularBorderWidth solid transparent;\n border-top: @tabularOppositeBorderWidth solid transparent;\n border-bottom: none;\n}\n\n\n\n/*--------------\n Pagination\n---------------*/\n\n.ui.pagination.menu {\n margin: 0em;\n display: inline-flex;\n vertical-align: middle;\n}\n.ui.pagination.menu .item:last-child {\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui.compact.menu .item:last-child {\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui.pagination.menu .item:last-child:before {\n display: none;\n}\n\n.ui.pagination.menu .item {\n min-width: @paginationMinWidth;\n text-align: center;\n}\n.ui.pagination.menu .icon.item i.icon {\n vertical-align: top;\n}\n\n/* Active */\n.ui.pagination.menu .active.item {\n border-top: none;\n padding-top: @itemVerticalPadding;\n background-color: @paginationActiveBackground;\n color: @paginationActiveTextColor;\n box-shadow: none;\n}\n\n/*--------------\n Secondary\n---------------*/\n\n.ui.secondary.menu {\n background: @secondaryBackground;\n margin-left: -@secondaryItemSpacing;\n margin-right: -@secondaryItemSpacing;\n border-radius: 0em;\n border: none;\n box-shadow: none;\n}\n\n/* Item */\n.ui.secondary.menu .item {\n align-self: center;\n box-shadow: none;\n border: none;\n padding: @secondaryItemPadding;\n margin: @secondaryItemMargin;\n background: @secondaryItemBackground;\n transition: @secondaryItemTransition;\n border-radius: @secondaryItemBorderRadius;\n}\n\n/* No Divider */\n.ui.secondary.menu .item:before {\n display: none !important;\n}\n\n/* Header */\n.ui.secondary.menu .header.item {\n border-radius: 0em;\n border-right: @secondaryHeaderBorder;\n background: @secondaryHeaderBackground;\n}\n\n/* Image */\n.ui.secondary.menu .item > img:not(.ui) {\n margin: 0em;\n}\n\n/* Hover */\n.ui.secondary.menu .dropdown.item:hover,\n.ui.secondary.menu .link.item:hover,\n.ui.secondary.menu a.item:hover {\n background: @secondaryHoverItemBackground;\n color: @secondaryHoverItemColor;\n}\n\n/* Active */\n.ui.secondary.menu .active.item {\n box-shadow: none;\n background: @secondaryActiveItemBackground;\n color: @secondaryActiveItemColor;\n border-radius: @secondaryItemBorderRadius;\n}\n\n/* Active Hover */\n.ui.secondary.menu .active.item:hover {\n box-shadow: none;\n background: @secondaryActiveHoverItemBackground;\n color: @secondaryActiveHoverItemColor;\n}\n\n\n/* Inverted */\n.ui.secondary.inverted.menu .link.item,\n.ui.secondary.inverted.menu a.item {\n color: @secondaryInvertedColor !important;\n}\n.ui.secondary.inverted.menu .dropdown.item:hover,\n.ui.secondary.inverted.menu .link.item:hover,\n.ui.secondary.inverted.menu a.item:hover {\n background: @secondaryInvertedHoverBackground;\n color: @secondaryInvertedHoverColor !important;\n}\n.ui.secondary.inverted.menu .active.item {\n background: @secondaryInvertedActiveBackground;\n color: @secondaryInvertedActiveColor !important;\n}\n\n/* Fix item margins */\n.ui.secondary.item.menu {\n margin-left: 0em;\n margin-right: 0em;\n}\n.ui.secondary.item.menu .item:last-child {\n margin-right: 0em;\n}\n.ui.secondary.attached.menu {\n box-shadow: none;\n}\n\n/* Sub Menu */\n.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {\n margin: @secondaryMenuSubMenuMargin;\n}\n.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {\n margin: @secondaryMenuSubMenuItemMargin;\n padding: @secondaryMenuSubMenuItemPadding;\n}\n\n\n/*---------------------\n Secondary Vertical\n-----------------------*/\n\n.ui.secondary.vertical.menu > .item {\n border: none;\n margin: @secondaryVerticalItemMargin;\n border-radius: @secondaryVerticalItemBorderRadius !important;\n}\n.ui.secondary.vertical.menu > .header.item {\n border-radius: 0em;\n}\n\n/* Sub Menu */\n.ui.vertical.secondary.menu .item > .menu .item {\n background-color: transparent;\n}\n\n/* Inverted */\n.ui.secondary.inverted.menu {\n background-color: transparent;\n}\n\n/*---------------------\n Secondary Pointing\n-----------------------*/\n\n.ui.secondary.pointing.menu {\n margin-left: 0em;\n margin-right: 0em;\n border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;\n}\n\n.ui.secondary.pointing.menu .item {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-radius: 0em;\n align-self: flex-end;\n\n margin: 0em 0em -@secondaryPointingBorderWidth;\n padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;\n border-bottom-width: @secondaryPointingBorderWidth;\n transition: @secondaryItemTransition;\n}\n\n/* Item Types */\n.ui.secondary.pointing.menu .header.item {\n color: @secondaryPointingHeaderColor !important;\n}\n.ui.secondary.pointing.menu .text.item {\n box-shadow: none !important;\n}\n.ui.secondary.pointing.menu .item:after {\n display: none;\n}\n\n/* Hover */\n.ui.secondary.pointing.menu .dropdown.item:hover,\n.ui.secondary.pointing.menu .link.item:hover,\n.ui.secondary.pointing.menu a.item:hover {\n background-color: transparent;\n color: @secondaryPointingHoverTextColor;\n}\n\n/* Pressed */\n.ui.secondary.pointing.menu .dropdown.item:active,\n.ui.secondary.pointing.menu .link.item:active,\n.ui.secondary.pointing.menu a.item:active {\n background-color: transparent;\n border-color: @secondaryPointingBorderColor;\n}\n\n/* Active */\n.ui.secondary.pointing.menu .active.item {\n background-color: transparent;\n box-shadow: none;\n border-color: @secondaryPointingActiveBorderColor;\n font-weight: @secondaryPointingActiveFontWeight;\n color: @secondaryPointingActiveTextColor;\n}\n\n/* Active Hover */\n.ui.secondary.pointing.menu .active.item:hover {\n border-color: @secondaryPointingActiveHoverBorderColor;\n color: @secondaryPointingActiveHoverTextColor;\n}\n\n/* Active Dropdown */\n.ui.secondary.pointing.menu .active.dropdown.item {\n border-color: @secondaryPointingActiveDropdownBorderColor;\n}\n\n/* Vertical Pointing */\n.ui.secondary.vertical.pointing.menu {\n border-bottom-width: 0px;\n border-right-width: @secondaryPointingBorderWidth;\n border-right-style: solid;\n border-right-color: @secondaryPointingBorderColor;\n}\n.ui.secondary.vertical.pointing.menu .item {\n border-bottom: none;\n border-right-style: solid;\n border-right-color: transparent;\n border-radius: 0em !important;\n margin: @secondaryVerticalPointingItemMargin;\n border-right-width: @secondaryPointingBorderWidth;\n}\n\n/* Vertical Active */\n.ui.secondary.vertical.pointing.menu .active.item {\n border-color: @secondaryPointingActiveBorderColor;\n}\n\n/* Inverted */\n.ui.secondary.inverted.pointing.menu {\n border-color: @secondaryPointingInvertedBorderColor;\n}\n\n.ui.secondary.inverted.pointing.menu {\n border-width: @secondaryPointingBorderWidth;\n border-color: @secondaryPointingBorderColor;\n}\n.ui.secondary.inverted.pointing.menu .item {\n color: @secondaryPointingInvertedItemTextColor;\n}\n.ui.secondary.inverted.pointing.menu .header.item {\n color: @secondaryPointingInvertedItemHeaderColor !important;\n}\n\n/* Hover */\n.ui.secondary.inverted.pointing.menu .link.item:hover,\n.ui.secondary.inverted.pointing.menu a.item:hover {\n color: @secondaryPointingInvertedItemHoverTextColor;\n}\n\n\n/* Active */\n.ui.secondary.inverted.pointing.menu .active.item {\n border-color: @secondaryPointingInvertedActiveBorderColor;\n color: @secondaryPointingInvertedActiveColor;\n}\n\n/*--------------\n Text Menu\n---------------*/\n\n.ui.text.menu {\n background: none transparent;\n border-radius: 0px;\n box-shadow: none;\n border: none;\n\n margin: @textMenuMargin;\n}\n.ui.text.menu .item {\n border-radius: 0px;\n box-shadow: none;\n align-self: center;\n margin: @textMenuItemMargin;\n padding: @textMenuItemPadding;\n font-weight: @textMenuItemFontWeight;\n color: @textMenuItemColor;\n transition: @textMenuItemTransition;\n}\n\n/* Border */\n.ui.text.menu .item:before,\n.ui.text.menu .menu .item:before {\n display: none !important;\n}\n\n/* Header */\n.ui.text.menu .header.item {\n background-color: transparent;\n opacity: 1;\n color: @textMenuHeaderColor;\n font-size: @textMenuHeaderSize;\n text-transform: @textMenuHeaderTextTransform;\n font-weight: @textMenuHeaderFontWeight;\n}\n\n/* Image */\n.ui.text.menu .item > img:not(.ui) {\n margin: 0em;\n}\n\n/*--- fluid text ---*/\n.ui.text.item.menu .item {\n margin: 0em;\n}\n\n/*--- vertical text ---*/\n.ui.vertical.text.menu {\n margin: @textVerticalMenuMargin;\n}\n.ui.vertical.text.menu:first-child {\n margin-top: 0rem;\n}\n.ui.vertical.text.menu:last-child {\n margin-bottom: 0rem;\n}\n.ui.vertical.text.menu .item {\n margin: @textVerticalMenuItemMargin;\n padding-left: 0em;\n padding-right: 0em;\n}\n.ui.vertical.text.menu .item > i.icon {\n float: @textVerticalMenuIconFloat;\n margin: @iconMargin;\n}\n.ui.vertical.text.menu .header.item {\n margin: @textVerticalMenuHeaderMargin;\n}\n\n/* Vertical Sub Menu */\n.ui.vertical.text.menu .item:not(.dropdown) > .menu {\n margin: @textMenuSubMenuMargin;\n}\n.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {\n margin: @textMenuSubMenuItemMargin;\n padding: @textMenuSubMenuItemPadding;\n}\n\n/*--- hover ---*/\n.ui.text.menu .item:hover {\n opacity: 1;\n background-color: transparent;\n}\n\n/*--- active ---*/\n.ui.text.menu .active.item {\n background-color: transparent;\n border: none;\n box-shadow: none;\n font-weight: @textMenuActiveItemFontWeight;\n color: @textMenuActiveItemColor;\n}\n\n/*--- active hover ---*/\n.ui.text.menu .active.item:hover {\n background-color: transparent;\n}\n\n/* Disable Bariations */\n.ui.text.pointing.menu .active.item:after {\n box-shadow: none;\n}\n.ui.text.attached.menu {\n box-shadow: none;\n}\n\n/* Inverted */\n.ui.inverted.text.menu,\n.ui.inverted.text.menu .item,\n.ui.inverted.text.menu .item:hover,\n.ui.inverted.text.menu .active.item {\n background-color: transparent !important;\n}\n\n/* Fluid */\n.ui.fluid.text.menu {\n margin-left: 0em;\n margin-right: 0em;\n}\n\n/*--------------\n Icon Only\n---------------*/\n\n/* Vertical Menu */\n.ui.vertical.icon.menu {\n display: inline-block;\n width: auto;\n}\n\n/* Item */\n.ui.icon.menu .item {\n height: auto;\n text-align: @iconMenuTextAlign;\n color: @iconMenuItemColor;\n}\n\n/* Icon */\n.ui.icon.menu .item > .icon:not(.dropdown) {\n margin: 0;\n opacity: 1;\n}\n\n/* Icon Gylph */\n.ui.icon.menu .icon:before {\n opacity: 1;\n}\n\n/* (x) Item Icon */\n.ui.menu .icon.item > .icon {\n width: auto;\n margin: 0em auto;\n}\n\n/* Vertical Icon */\n.ui.vertical.icon.menu .item > .icon:not(.dropdown) {\n display: block;\n opacity: 1;\n margin: 0em auto;\n float: none;\n}\n\n/* Inverted */\n.ui.inverted.icon.menu .item {\n color: @iconMenuInvertedItemColor;\n}\n\n/*--------------\n Labeled Icon\n---------------*/\n\n/* Menu */\n.ui.labeled.icon.menu {\n text-align: center;\n}\n\n/* Item */\n.ui.labeled.icon.menu .item {\n min-width: @labeledIconMinWidth;\n flex-direction: column;\n}\n\n/* Icon */\n.ui.labeled.icon.menu .item > .icon:not(.dropdown) {\n height: 1em;\n display: block;\n font-size: @labeledIconSize !important;\n margin: 0em auto @labeledIconTextMargin !important;\n}\n\n/* Fluid */\n.ui.fluid.labeled.icon.menu > .item {\n min-width: 0em;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Stackable\n---------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.stackable.menu {\n flex-direction: column;\n }\n .ui.stackable.menu .item {\n width: 100% !important;\n }\n .ui.stackable.menu .item:before {\n position: absolute;\n content: '';\n top: auto;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: @dividerSize;\n background: @verticalDividerBackground;\n }\n\n .ui.stackable.menu .left.menu,\n .ui.stackable.menu .left.item {\n margin-right: 0 !important;\n }\n .ui.stackable.menu .right.menu,\n .ui.stackable.menu .right.item {\n margin-left: 0 !important;\n }\n\n .ui.stackable.menu .right.menu,\n .ui.stackable.menu .left.menu {\n flex-direction: column;\n }\n}\n\n/*--------------\n Colors\n---------------*/\n\n/*--- Standard Colors ---*/\n.ui.menu .red.active.item,\n.ui.red.menu .active.item {\n border-color: @red !important;\n color: @red !important;\n}\n.ui.menu .orange.active.item,\n.ui.orange.menu .active.item {\n border-color: @orange !important;\n color: @orange !important;\n}\n.ui.menu .yellow.active.item,\n.ui.yellow.menu .active.item {\n border-color: @yellow !important;\n color: @yellow !important;\n}\n.ui.menu .olive.active.item,\n.ui.olive.menu .active.item {\n border-color: @olive !important;\n color: @olive !important;\n}\n.ui.menu .green.active.item,\n.ui.green.menu .active.item {\n border-color: @green !important;\n color: @green !important;\n}\n.ui.menu .teal.active.item,\n.ui.teal.menu .active.item {\n border-color: @teal !important;\n color: @teal !important;\n}\n.ui.menu .blue.active.item,\n.ui.blue.menu .active.item {\n border-color: @blue !important;\n color: @blue !important;\n}\n.ui.menu .violet.active.item,\n.ui.violet.menu .active.item {\n border-color: @violet !important;\n color: @violet !important;\n}\n.ui.menu .purple.active.item,\n.ui.purple.menu .active.item {\n border-color: @purple !important;\n color: @purple !important;\n}\n.ui.menu .pink.active.item,\n.ui.pink.menu .active.item {\n border-color: @pink !important;\n color: @pink !important;\n}\n.ui.menu .brown.active.item,\n.ui.brown.menu .active.item {\n border-color: @brown !important;\n color: @brown !important;\n}\n.ui.menu .grey.active.item,\n.ui.grey.menu .active.item {\n border-color: @grey !important;\n color: @grey !important;\n}\n\n\n/*--------------\n Inverted\n---------------*/\n\n.ui.inverted.menu {\n border: @invertedBorder;\n background: @invertedBackground;\n box-shadow: @invertedBoxShadow;\n}\n\n/* Menu Item */\n.ui.inverted.menu .item,\n.ui.inverted.menu .item > a:not(.ui) {\n background: @invertedItemBackground;\n color: @invertedItemTextColor;\n}\n.ui.inverted.menu .item.menu {\n background: @invertedSubMenuBackground;\n}\n\n/*--- Border ---*/\n.ui.inverted.menu .item:before {\n background: @invertedDividerBackground;\n}\n.ui.vertical.inverted.menu .item:before {\n background: @invertedVerticalDividerBackground;\n}\n\n/* Sub Menu */\n.ui.vertical.inverted.menu .menu .item,\n.ui.vertical.inverted.menu .menu .item a:not(.ui) {\n color: @invertedSubMenuColor;\n}\n\n/* Header */\n.ui.inverted.menu .header.item {\n margin: 0em;\n background: @invertedHeaderBackground;\n box-shadow: none;\n}\n\n/* Disabled */\n.ui.inverted.menu .item.disabled,\n.ui.inverted.menu .item.disabled:hover {\n color: @invertedDisabledTextColor;\n}\n\n/*--- Hover ---*/\n.ui.link.inverted.menu .item:hover,\n.ui.inverted.menu .dropdown.item:hover,\n.ui.inverted.menu .link.item:hover,\n.ui.inverted.menu a.item:hover {\n background: @invertedHoverBackground;\n color: @invertedHoverColor;\n}\n.ui.vertical.inverted.menu .item .menu a.item:hover,\n.ui.vertical.inverted.menu .item .menu .link.item:hover {\n background: @invertedSubMenuBackground;\n color: @invertedSubMenuHoverColor;\n}\n\n/*--- Pressed ---*/\n.ui.inverted.menu a.item:active,\n.ui.inverted.menu .link.item:active{\n background: @invertedMenuPressedBackground;\n color: @invertedMenuPressedColor;\n}\n\n/*--- Active ---*/\n.ui.inverted.menu .active.item {\n background: @invertedActiveBackground;\n color: @invertedActiveColor !important;\n}\n.ui.inverted.vertical.menu .item .menu .active.item {\n background: @invertedSubMenuActiveBackground;\n color: @invertedSubMenuActiveColor;\n}\n.ui.inverted.pointing.menu .active.item:after {\n background: @invertedArrowActiveColor !important;\n margin: 0em !important;\n box-shadow: none !important;\n border: none !important;\n}\n\n/*--- Active Hover ---*/\n.ui.inverted.menu .active.item:hover {\n background: @invertedActiveHoverBackground;\n color: @invertedActiveHoverColor !important;\n}\n.ui.inverted.pointing.menu .active.item:hover:after {\n background: @invertedArrowActiveHoverColor !important;\n}\n\n\n/*--------------\n Floated\n---------------*/\n\n.ui.floated.menu {\n float: left;\n margin: 0rem @floatedDistance 0rem 0rem;\n}\n.ui.floated.menu .item:last-child:before {\n display: none;\n}\n\n.ui.right.floated.menu {\n float: right;\n margin: 0rem 0rem 0rem @floatedDistance;\n}\n\n\n/*--------------\n Inverted\n---------------*/\n\n/* Red */\n.ui.inverted.menu .red.active.item,\n.ui.inverted.red.menu {\n background-color: @red;\n}\n.ui.inverted.red.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.red.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Orange */\n.ui.inverted.menu .orange.active.item,\n.ui.inverted.orange.menu {\n background-color: @orange;\n}\n.ui.inverted.orange.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.orange.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Yellow */\n.ui.inverted.menu .yellow.active.item,\n.ui.inverted.yellow.menu {\n background-color: @yellow;\n}\n.ui.inverted.yellow.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.yellow.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Olive */\n.ui.inverted.menu .olive.active.item,\n.ui.inverted.olive.menu {\n background-color: @olive;\n}\n.ui.inverted.olive.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.olive.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Green */\n.ui.inverted.menu .green.active.item,\n.ui.inverted.green.menu {\n background-color: @green;\n}\n.ui.inverted.green.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.green.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Teal */\n.ui.inverted.menu .teal.active.item,\n.ui.inverted.teal.menu {\n background-color: @teal;\n}\n.ui.inverted.teal.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.teal.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Blue */\n.ui.inverted.menu .blue.active.item,\n.ui.inverted.blue.menu {\n background-color: @blue;\n}\n.ui.inverted.blue.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.blue.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Violet */\n.ui.inverted.menu .violet.active.item,\n.ui.inverted.violet.menu {\n background-color: @violet;\n}\n.ui.inverted.violet.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.violet.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Purple */\n.ui.inverted.menu .purple.active.item,\n.ui.inverted.purple.menu {\n background-color: @purple;\n}\n.ui.inverted.purple.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.purple.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Pink */\n.ui.inverted.menu .pink.active.item,\n.ui.inverted.pink.menu {\n background-color: @pink;\n}\n.ui.inverted.pink.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.pink.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Brown */\n.ui.inverted.menu .brown.active.item,\n.ui.inverted.brown.menu {\n background-color: @brown;\n}\n.ui.inverted.brown.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.brown.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Grey */\n.ui.inverted.menu .grey.active.item,\n.ui.inverted.grey.menu {\n background-color: @grey;\n}\n.ui.inverted.grey.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.grey.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n\n/*--------------\n Fitted\n---------------*/\n\n.ui.fitted.menu .item,\n.ui.fitted.menu .item .menu .item,\n.ui.menu .fitted.item {\n padding: 0em;\n}\n.ui.horizontally.fitted.menu .item,\n.ui.horizontally.fitted.menu .item .menu .item,\n.ui.menu .horizontally.fitted.item {\n padding-top: @itemVerticalPadding;\n padding-bottom: @itemVerticalPadding;\n}\n.ui.vertically.fitted.menu .item,\n.ui.vertically.fitted.menu .item .menu .item,\n.ui.menu .vertically.fitted.item {\n padding-left: @itemHorizontalPadding;\n padding-right: @itemHorizontalPadding;\n}\n\n/*--------------\n Borderless\n---------------*/\n\n.ui.borderless.menu .item:before,\n.ui.borderless.menu .item .menu .item:before,\n.ui.menu .borderless.item:before {\n background: none !important;\n}\n\n/*-------------------\n Compact\n--------------------*/\n\n.ui.compact.menu {\n display: inline-flex;\n margin: 0em;\n vertical-align: middle;\n}\n.ui.compact.vertical.menu {\n display: inline-block;\n}\n.ui.compact.menu .item:last-child {\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui.compact.menu .item:last-child:before {\n display: none;\n}\n.ui.compact.vertical.menu {\n width: auto !important;\n}\n.ui.compact.vertical.menu .item:last-child::before {\n display: block;\n}\n\n/*-------------------\n Fluid\n--------------------*/\n\n.ui.menu.fluid,\n.ui.vertical.menu.fluid {\n width: 100% !important;\n}\n\n\n/*-------------------\n Evenly Sized\n--------------------*/\n\n.ui.item.menu,\n.ui.item.menu .item {\n width: 100%;\n padding-left: 0em !important;\n padding-right: 0em !important;\n margin-left: 0em !important;\n margin-right: 0em !important;\n text-align: center;\n justify-content: center;\n}\n.ui.attached.item.menu {\n margin: 0em @attachedHorizontalOffset !important;\n}\n\n.ui.item.menu .item:last-child:before {\n display: none;\n}\n\n.ui.menu.two.item .item {\n width: 50%;\n}\n.ui.menu.three.item .item {\n width: 33.333%;\n}\n.ui.menu.four.item .item {\n width: 25%;\n}\n.ui.menu.five.item .item {\n width: 20%;\n}\n.ui.menu.six.item .item {\n width: 16.666%;\n}\n.ui.menu.seven.item .item {\n width: 14.285%;\n}\n.ui.menu.eight.item .item {\n width: 12.500%;\n}\n.ui.menu.nine.item .item {\n width: 11.11%;\n}\n.ui.menu.ten.item .item {\n width: 10.0%;\n}\n.ui.menu.eleven.item .item {\n width: 9.09%;\n}\n.ui.menu.twelve.item .item {\n width: 8.333%;\n}\n\n/*--------------\n Fixed\n---------------*/\n\n.ui.menu.fixed {\n position: fixed;\n z-index: 101;\n margin: 0em;\n width: 100%;\n}\n.ui.menu.fixed,\n.ui.menu.fixed .item:first-child,\n.ui.menu.fixed .item:last-child {\n border-radius: 0px !important;\n}\n\n.ui.fixed.menu,\n.ui[class*=\"top fixed\"].menu {\n top: 0px;\n left: 0px;\n right: auto;\n bottom: auto;\n}\n.ui[class*=\"top fixed\"].menu {\n border-top: none;\n border-left: none;\n border-right: none;\n}\n.ui[class*=\"right fixed\"].menu {\n border-top: none;\n border-bottom: none;\n border-right: none;\n top: 0px;\n right: 0px;\n left: auto;\n bottom: auto;\n width: auto;\n height: 100%;\n}\n.ui[class*=\"bottom fixed\"].menu {\n border-bottom: none;\n border-left: none;\n border-right: none;\n bottom: 0px;\n left: 0px;\n top: auto;\n right: auto;\n}\n.ui[class*=\"left fixed\"].menu {\n border-top: none;\n border-bottom: none;\n border-left: none;\n top: 0px;\n left: 0px;\n right: auto;\n bottom: auto;\n width: auto;\n height: 100%;\n}\n\n/* Coupling with Grid */\n.ui.fixed.menu + .ui.grid {\n padding-top: @fixedPrecedingGridMargin;\n}\n\n\n/*-------------------\n Pointing\n--------------------*/\n\n.ui.pointing.menu .item:after {\n visibility: hidden;\n position: absolute;\n content: '';\n top: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n background: none;\n\n margin: (@arrowBorderWidth / 2) 0em 0em;\n width: @arrowSize;\n height: @arrowSize;\n\n border: none;\n border-bottom: @arrowBorder;\n border-right: @arrowBorder;\n\n z-index: @arrowZIndex;\n transition: @arrowTransition;\n}\n.ui.vertical.pointing.menu .item:after {\n position: absolute;\n top: 50%;\n right: 0%;\n bottom: auto;\n left: auto;\n\n transform: translateX(50%) translateY(-50%) rotate(45deg);\n margin: 0em -(@arrowBorderWidth / 2) 0em 0em;\n\n border: none;\n border-top: @arrowBorder;\n border-right: @arrowBorder;\n}\n\n/* Active */\n.ui.pointing.menu .active.item:after {\n visibility: visible;\n}\n.ui.pointing.menu .active.dropdown.item:after {\n visibility: hidden;\n}\n\n/* Don't double up pointers */\n.ui.pointing.menu .dropdown.active.item:after,\n.ui.pointing.menu .active.item .menu .active.item:after {\n display: none;\n}\n\n/* Colors */\n.ui.pointing.menu .active.item:hover:after {\n background-color: @arrowHoverColor;\n}\n.ui.pointing.menu .active.item:after {\n background-color: @arrowActiveColor;\n}\n.ui.pointing.menu .active.item:hover:after {\n background-color: @arrowActiveHoverColor;\n}\n\n.ui.vertical.pointing.menu .active.item:hover:after {\n background-color: @arrowVerticalHoverColor;\n}\n.ui.vertical.pointing.menu .active.item:after {\n background-color: @arrowVerticalActiveColor;\n}\n.ui.vertical.pointing.menu .menu .active.item:after {\n background-color: @arrowVerticalSubMenuColor;\n}\n\n\n\n/*--------------\n Attached\n---------------*/\n\n/* Middle */\n.ui.attached.menu {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: 0em @attachedHorizontalOffset;\n width: @attachedWidth;\n max-width: @attachedWidth;\n box-shadow: @attachedBoxShadow;\n}\n.ui.attached + .ui.attached.menu:not(.top) {\n border-top: none;\n}\n\n/* Top */\n.ui[class*=\"top attached\"].menu {\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n margin-top: @verticalMargin;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.menu[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n\n/* Bottom */\n.ui[class*=\"bottom attached\"].menu {\n bottom: 0px;\n margin-top: 0em;\n top: @attachedBottomOffset;\n margin-bottom: @verticalMargin;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui[class*=\"bottom attached\"].menu:last-child {\n margin-bottom: 0em;\n}\n\n/* Attached Menu Item */\n.ui.top.attached.menu > .item:first-child {\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui.bottom.attached.menu > .item:first-child {\n border-radius: 0em 0em 0em @borderRadius;\n}\n\n/* Tabular Attached */\n.ui.attached.menu:not(.tabular) {\n border: @attachedBorder;\n}\n.ui.attached.inverted.menu {\n border: none;\n}\n.ui.attached.tabular.menu {\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n/* Mini */\n.ui.mini.menu {\n font-size: @mini;\n}\n.ui.mini.vertical.menu {\n width: @miniWidth;\n}\n\n/* Tiny */\n.ui.tiny.menu {\n font-size: @tiny;\n}\n.ui.tiny.vertical.menu {\n width: @tinyWidth;\n}\n\n/* Small */\n.ui.small.menu {\n font-size: @small;\n}\n.ui.small.vertical.menu {\n width: @smallWidth;\n}\n\n/* Medium */\n.ui.menu {\n font-size: @medium;\n}\n.ui.vertical.menu {\n width: @mediumWidth;\n}\n\n/* Large */\n.ui.large.menu {\n font-size: @large;\n}\n.ui.large.vertical.menu {\n width: @largeWidth;\n}\n\n/* Huge */\n.ui.huge.menu {\n font-size: @huge;\n}\n.ui.huge.vertical.menu {\n width: @hugeWidth;\n}\n\n/* Big */\n.ui.big.menu {\n font-size: @big;\n}\n.ui.big.vertical.menu {\n width: @bigWidth;\n}\n\n/* Massive */\n.ui.massive.menu {\n font-size: @massive;\n}\n.ui.massive.vertical.menu {\n width: @massiveWidth;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/collections/message.less", "content": "/*!\n * # Semantic UI - Message\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'message';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Message\n*******************************/\n\n.ui.message {\n position: relative;\n min-height: 1em;\n margin: @verticalMargin 0em;\n background: @background;\n padding: @padding;\n line-height: @lineHeight;\n color: @textColor;\n transition: @transition;\n border-radius: @borderRadius;\n box-shadow: @boxShadow;\n}\n\n.ui.message:first-child {\n margin-top: 0em;\n}\n.ui.message:last-child {\n margin-bottom: 0em;\n}\n\n\n/*--------------\n Content\n---------------*/\n\n/* Header */\n.ui.message .header {\n display: @headerDisplay;\n font-family: @headerFont;\n font-weight: @headerFontWeight;\n margin: @headerMargin;\n}\n\n/* Default font size */\n.ui.message .header:not(.ui) {\n font-size: @headerFontSize;\n}\n\n/* Paragraph */\n.ui.message p {\n opacity: @messageTextOpacity;\n margin: @messageParagraphMargin 0em;\n}\n.ui.message p:first-child {\n margin-top: 0em;\n}\n.ui.message p:last-child {\n margin-bottom: 0em;\n}\n.ui.message .header + p {\n margin-top: @headerParagraphDistance;\n}\n\n/* List */\n.ui.message .list:not(.ui) {\n text-align: left;\n padding: 0em;\n opacity: @listOpacity;\n list-style-position: @listStylePosition;\n margin: @listMargin 0em 0em;\n}\n.ui.message .list:not(.ui):first-child {\n margin-top: 0em;\n}\n.ui.message .list:not(.ui):last-child {\n margin-bottom: 0em;\n}\n.ui.message .list:not(.ui) li {\n position: relative;\n list-style-type: none;\n margin: 0em 0em @listItemMargin @listItemIndent;\n padding: 0em;\n}\n.ui.message .list:not(.ui) li:before {\n position: absolute;\n content: '•';\n left: -1em;\n height: 100%;\n vertical-align: baseline;\n}\n.ui.message .list:not(.ui) li:last-child {\n margin-bottom: 0em;\n}\n\n\n/* Icon */\n.ui.message > .icon {\n margin-right: @iconDistance;\n}\n\n/* Close Icon */\n.ui.message > .close.icon {\n cursor: pointer;\n position: absolute;\n margin: 0em;\n top: @closeTopDistance;\n right: @closeRightDistance;\n opacity: @closeOpacity;\n transition: @closeTransition;\n}\n.ui.message > .close.icon:hover {\n opacity: 1;\n}\n\n/* First / Last Element */\n.ui.message > :first-child {\n margin-top: 0em;\n}\n.ui.message > :last-child {\n margin-bottom: 0em;\n}\n\n/*******************************\n Coupling\n*******************************/\n\n.ui.dropdown .menu > .message {\n margin: 0px -@borderWidth;\n}\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Visible\n---------------*/\n\n.ui.visible.visible.visible.visible.message {\n display: block;\n}\n\n.ui.icon.visible.visible.visible.visible.message {\n display: flex;\n}\n\n/*--------------\n Hidden\n---------------*/\n\n.ui.hidden.hidden.hidden.hidden.message {\n display: none;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Compact\n---------------*/\n\n.ui.compact.message {\n display: inline-block;\n}\n.ui.compact.icon.message {\n display: inline-flex;\n}\n\n\n/*--------------\n Attached\n---------------*/\n\n.ui.attached.message {\n margin-bottom: @attachedYOffset;\n border-radius: @borderRadius @borderRadius 0em 0em;\n box-shadow: @attachedBoxShadow;\n margin-left: @attachedXOffset;\n margin-right: @attachedXOffset;\n}\n.ui.attached + .ui.attached.message:not(.top):not(.bottom) {\n margin-top: @attachedYOffset;\n border-radius: 0em;\n}\n.ui.bottom.attached.message {\n margin-top: @attachedYOffset;\n border-radius: 0em 0em @borderRadius @borderRadius;\n box-shadow: @attachedBottomBoxShadow;\n}\n.ui.bottom.attached.message:not(:last-child) {\n margin-bottom: @verticalMargin;\n}\n.ui.attached.icon.message {\n width: auto;\n}\n\n\n/*--------------\n Icon\n---------------*/\n\n.ui.icon.message {\n display: flex;\n width: 100%;\n align-items: center;\n}\n.ui.icon.message > .icon:not(.close) {\n display: block;\n flex: 0 0 auto;\n width: auto;\n line-height: 1;\n vertical-align: @iconVerticalAlign;\n font-size: @iconSize;\n opacity: @iconOpacity;\n}\n.ui.icon.message > .content {\n display: block;\n flex: 1 1 auto;\n vertical-align: @iconVerticalAlign;\n}\n\n\n.ui.icon.message .icon:not(.close) + .content {\n padding-left: @iconContentDistance;\n}\n.ui.icon.message .circular.icon {\n width: 1em;\n}\n\n/*--------------\n Floating\n---------------*/\n\n.ui.floating.message {\n box-shadow: @floatingBoxShadow;\n}\n\n\n/*--------------\n Colors\n---------------*/\n\n.ui.black.message {\n background-color: @black;\n color: @invertedTextColor;\n}\n\n/*--------------\n Types\n---------------*/\n\n/* Positive */\n.ui.positive.message {\n background-color: @positiveBackgroundColor;\n color: @positiveTextColor;\n}\n.ui.positive.message,\n.ui.attached.positive.message {\n box-shadow: @positiveBoxShadow;\n}\n.ui.positive.message .header {\n color: @positiveHeaderColor;\n}\n\n/* Negative */\n.ui.negative.message {\n background-color: @negativeBackgroundColor;\n color: @negativeTextColor;\n}\n.ui.negative.message,\n.ui.attached.negative.message {\n box-shadow: @negativeBoxShadow;\n}\n.ui.negative.message .header {\n color: @negativeHeaderColor;\n}\n\n/* Info */\n.ui.info.message {\n background-color: @infoBackgroundColor;\n color: @infoTextColor;\n}\n.ui.info.message,\n.ui.attached.info.message {\n box-shadow: @infoBoxShadow;\n}\n.ui.info.message .header {\n color: @infoHeaderColor;\n}\n\n/* Warning */\n.ui.warning.message {\n background-color: @warningBackgroundColor;\n color: @warningTextColor;\n}\n.ui.warning.message,\n.ui.attached.warning.message {\n box-shadow: @warningBoxShadow;\n}\n.ui.warning.message .header {\n color: @warningHeaderColor;\n}\n\n/* Error */\n.ui.error.message {\n background-color: @errorBackgroundColor;\n color: @errorTextColor;\n}\n.ui.error.message,\n.ui.attached.error.message {\n box-shadow: @errorBoxShadow;\n}\n.ui.error.message .header {\n color: @errorHeaderColor;\n}\n\n/* Success */\n.ui.success.message {\n background-color: @successBackgroundColor;\n color: @successTextColor;\n}\n.ui.success.message,\n.ui.attached.success.message {\n box-shadow: @successBoxShadow;\n}\n.ui.success.message .header {\n color: @successHeaderColor;\n}\n\n\n/* Colors */\n.ui.inverted.message,\n.ui.black.message {\n background-color: @black;\n color: @invertedTextColor;\n}\n\n.ui.red.message {\n background-color: @redBackground;\n color: @redTextColor;\n box-shadow: @redBoxShadow;\n}\n.ui.red.message .header {\n color: @redHeaderColor;\n}\n\n.ui.orange.message {\n background-color: @orangeBackground;\n color: @orangeTextColor;\n box-shadow: @orangeBoxShadow;\n}\n.ui.orange.message .header {\n color: @orangeHeaderColor;\n}\n\n.ui.yellow.message {\n background-color: @yellowBackground;\n color: @yellowTextColor;\n box-shadow: @yellowBoxShadow;\n}\n.ui.yellow.message .header {\n color: @yellowHeaderColor;\n}\n\n.ui.olive.message {\n background-color: @oliveBackground;\n color: @oliveTextColor;\n box-shadow: @oliveBoxShadow;\n}\n.ui.olive.message .header {\n color: @oliveHeaderColor;\n}\n\n.ui.green.message {\n background-color: @greenBackground;\n color: @greenTextColor;\n box-shadow: @greenBoxShadow;\n}\n.ui.green.message .header {\n color: @greenHeaderColor;\n}\n\n.ui.teal.message {\n background-color: @tealBackground;\n color: @tealTextColor;\n box-shadow: @tealBoxShadow;\n}\n.ui.teal.message .header {\n color: @tealHeaderColor;\n}\n\n.ui.blue.message {\n background-color: @blueBackground;\n color: @blueTextColor;\n box-shadow: @blueBoxShadow;\n}\n.ui.blue.message .header {\n color: @blueHeaderColor;\n}\n\n.ui.violet.message {\n background-color: @violetBackground;\n color: @violetTextColor;\n box-shadow: @violetBoxShadow;\n}\n.ui.violet.message .header {\n color: @violetHeaderColor;\n}\n\n.ui.purple.message {\n background-color: @purpleBackground;\n color: @purpleTextColor;\n box-shadow: @purpleBoxShadow;\n}\n.ui.purple.message .header {\n color: @purpleHeaderColor;\n}\n\n.ui.pink.message {\n background-color: @pinkBackground;\n color: @pinkTextColor;\n box-shadow: @pinkBoxShadow;\n}\n.ui.pink.message .header {\n color: @pinkHeaderColor;\n}\n\n.ui.brown.message {\n background-color: @brownBackground;\n color: @brownTextColor;\n box-shadow: @brownBoxShadow;\n}\n.ui.brown.message .header {\n color: @brownHeaderColor;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n.ui.mini.message {\n font-size: @relativeMini;\n}\n.ui.tiny.message {\n font-size: @relativeTiny;\n}\n.ui.small.message {\n font-size: @relativeSmall;\n}\n.ui.message {\n font-size: @relativeMedium;\n}\n.ui.large.message {\n font-size: @relativeLarge;\n}\n.ui.big.message {\n font-size: @relativeBig;\n}\n.ui.huge.message {\n font-size: @relativeHuge;\n}\n.ui.massive.message {\n font-size: @relativeMassive;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/collections/table.less", "content": "/*!\n * # Semantic UI - Table\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'table';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Table\n*******************************/\n\n/* Prototype */\n.ui.table {\n width: 100%;\n background: @background;\n margin: @margin;\n border: @border;\n box-shadow: @boxShadow;\n border-radius: @borderRadius;\n text-align: @textAlign;\n color: @color;\n border-collapse: @borderCollapse;\n border-spacing: @borderSpacing;\n}\n\n.ui.table:first-child {\n margin-top: 0em;\n}\n.ui.table:last-child {\n margin-bottom: 0em;\n}\n\n/*******************************\n Parts\n*******************************/\n\n/* Table Content */\n.ui.table th,\n.ui.table td {\n transition: @transition;\n}\n\n/* Headers */\n.ui.table thead {\n box-shadow: @headerBoxShadow;\n}\n.ui.table thead th {\n cursor: auto;\n background: @headerBackground;\n text-align: @headerAlign;\n color: @headerColor;\n padding: @headerVerticalPadding @headerHorizontalPadding;\n vertical-align: @headerVerticalAlign;\n font-style: @headerFontStyle;\n font-weight: @headerFontWeight;\n text-transform: @headerTextTransform;\n border-bottom: @headerBorder;\n border-left: @headerDivider;\n}\n\n.ui.table thead tr > th:first-child {\n border-left: none;\n}\n\n.ui.table thead tr:first-child > th:first-child {\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui.table thead tr:first-child > th:last-child {\n border-radius: 0em @borderRadius 0em 0em;\n}\n.ui.table thead tr:first-child > th:only-child {\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n\n/* Footer */\n.ui.table tfoot {\n box-shadow: @footerBoxShadow;\n}\n.ui.table tfoot th {\n cursor: auto;\n border-top: @footerBorder;\n background: @footerBackground;\n text-align: @footerAlign;\n color: @footerColor;\n padding: @footerVerticalPadding @footerHorizontalPadding;\n vertical-align: @footerVerticalAlign;\n font-style: @footerFontStyle;\n font-weight: @footerFontWeight;\n text-transform: @footerTextTransform;\n}\n.ui.table tfoot tr > th:first-child {\n border-left: none;\n}\n.ui.table tfoot tr:first-child > th:first-child {\n border-radius: 0em 0em 0em @borderRadius;\n}\n.ui.table tfoot tr:first-child > th:last-child {\n border-radius: 0em 0em @borderRadius 0em;\n}\n.ui.table tfoot tr:first-child > th:only-child {\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n\n/* Table Row */\n.ui.table tr td {\n border-top: @rowBorder;\n}\n.ui.table tr:first-child td {\n border-top: none;\n}\n\n/* Repeated tbody */\n.ui.table tbody + tbody tr:first-child td {\n border-top: @rowBorder;\n}\n\n/* Table Cells */\n.ui.table td {\n padding: @cellVerticalPadding @cellHorizontalPadding;\n text-align: @cellTextAlign;\n}\n\n/* Icons */\n.ui.table > .icon {\n vertical-align: @iconVerticalAlign;\n}\n.ui.table > .icon:only-child {\n margin: 0em;\n}\n\n/* Table Segment */\n.ui.table.segment {\n padding: 0em;\n}\n.ui.table.segment:after {\n display: none;\n}\n.ui.table.segment.stacked:after {\n display: block;\n}\n\n\n/* Responsive */\n@media only screen and (max-width : @largestMobileScreen) {\n .ui.table:not(.unstackable) {\n width: 100%;\n }\n .ui.table:not(.unstackable) tbody,\n .ui.table:not(.unstackable) tr,\n .ui.table:not(.unstackable) tr > th,\n .ui.table:not(.unstackable) tr > td {\n display: block !important;\n width: auto !important;\n display: block !important;\n }\n\n .ui.table:not(.unstackable) {\n padding: 0em;\n }\n .ui.table:not(.unstackable) thead {\n display: @responsiveHeaderDisplay;\n }\n .ui.table:not(.unstackable) tfoot {\n display: @responsiveFooterDisplay;\n }\n .ui.table:not(.unstackable) tr {\n padding-top: @responsiveRowVerticalPadding;\n padding-bottom: @responsiveRowVerticalPadding;\n box-shadow: @responsiveRowBoxShadow;\n }\n\n .ui.table:not(.unstackable) tr > th,\n .ui.table:not(.unstackable) tr > td {\n background: none;\n border: none !important;\n padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important;\n box-shadow: @responsiveCellBoxShadow;\n }\n .ui.table:not(.unstackable) th:first-child,\n .ui.table:not(.unstackable) td:first-child {\n font-weight: @responsiveCellHeaderFontWeight;\n }\n\n /* Definition Table */\n .ui.definition.table:not(.unstackable) thead th:first-child {\n box-shadow: none !important;\n }\n}\n\n\n/*******************************\n Coupling\n*******************************/\n\n/* UI Image */\n.ui.table th .image,\n.ui.table th .image img,\n.ui.table td .image,\n.ui.table td .image img {\n max-width: none;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*--------------\n Complex\n---------------*/\n\n.ui.structured.table {\n border-collapse: collapse;\n}\n.ui.structured.table thead th {\n border-left: @headerDivider;\n border-right: @headerDivider;\n}\n.ui.structured.sortable.table thead th {\n border-left: @sortableBorder;\n border-right: @sortableBorder;\n}\n.ui.structured.basic.table th {\n border-left: @basicTableHeaderDivider;\n border-right: @basicTableHeaderDivider;\n}\n.ui.structured.celled.table tr th,\n.ui.structured.celled.table tr td {\n border-left: @cellBorder;\n border-right: @cellBorder;\n}\n\n/*--------------\n Definition\n---------------*/\n\n.ui.definition.table thead:not(.full-width) th:first-child {\n pointer-events: none;\n background: @definitionHeaderBackground;\n font-weight: @definitionHeaderFontWeight;\n color: @definitionHeaderColor;\n box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground;\n}\n\n.ui.definition.table tfoot:not(.full-width) th:first-child {\n pointer-events: none;\n background: @definitionFooterBackground;\n font-weight: @definitionFooterColor;\n color: @definitionFooterFontWeight;\n box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground;\n}\n\n/* Remove Border */\n.ui.celled.definition.table thead:not(.full-width) th:first-child {\n box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground;\n}\n.ui.celled.definition.table tfoot:not(.full-width) th:first-child {\n box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground;\n}\n\n/* Highlight Defining Column */\n.ui.definition.table tr td:first-child:not(.ignored),\n.ui.definition.table tr td.definition {\n background: @definitionColumnBackground;\n font-weight: @definitionColumnFontWeight;\n color: @definitionColumnColor;\n text-transform: @definitionColumnTextTransform;\n box-shadow: @definitionColumnBoxShadow;\n text-align: @definitionColumnTextAlign;\n font-size: @definitionColumnFontSize;\n padding-left: @definitionColumnHorizontalPadding;\n padding-right: @definitionColumnHorizontalPadding;\n}\n\n\n/* Fix 2nd Column */\n.ui.definition.table thead:not(.full-width) th:nth-child(2) {\n border-left: @borderWidth solid @borderColor;\n}\n.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {\n border-left: @borderWidth solid @borderColor;\n}\n.ui.definition.table td:nth-child(2) {\n border-left: @borderWidth solid @borderColor;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Positive\n---------------*/\n\n.ui.table tr.positive,\n.ui.table td.positive {\n box-shadow: @positiveBoxShadow;\n}\n.ui.table tr.positive,\n.ui.table td.positive {\n background: @positiveBackgroundColor !important;\n color: @positiveColor !important;\n}\n\n/*--------------\n Negative\n---------------*/\n\n.ui.table tr.negative,\n.ui.table td.negative {\n box-shadow: @negativeBoxShadow;\n}\n.ui.table tr.negative,\n.ui.table td.negative {\n background: @negativeBackgroundColor !important;\n color: @negativeColor !important;\n}\n\n/*--------------\n Error\n---------------*/\n\n.ui.table tr.error,\n.ui.table td.error {\n box-shadow: @errorBoxShadow;\n}\n.ui.table tr.error,\n.ui.table td.error {\n background: @errorBackgroundColor !important;\n color: @errorColor !important;\n}\n/*--------------\n Warning\n---------------*/\n\n.ui.table tr.warning,\n.ui.table td.warning {\n box-shadow: @warningBoxShadow;\n}\n.ui.table tr.warning,\n.ui.table td.warning {\n background: @warningBackgroundColor !important;\n color: @warningColor !important;\n}\n\n/*--------------\n Active\n---------------*/\n\n.ui.table tr.active,\n.ui.table td.active {\n box-shadow: @activeBoxShadow;\n}\n.ui.table tr.active,\n.ui.table td.active {\n background: @activeBackgroundColor !important;\n color: @activeColor !important;\n}\n\n\n\n/*--------------\n Disabled\n---------------*/\n\n.ui.table tr.disabled td,\n.ui.table tr td.disabled,\n.ui.table tr.disabled:hover,\n.ui.table tr:hover td.disabled {\n pointer-events: none;\n color: @disabledTextColor;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Stackable\n---------------*/\n\n@media only screen and (max-width : @largestTabletScreen) {\n\n .ui[class*=\"tablet stackable\"].table,\n .ui[class*=\"tablet stackable\"].table tbody,\n .ui[class*=\"tablet stackable\"].table tr,\n .ui[class*=\"tablet stackable\"].table tr > th,\n .ui[class*=\"tablet stackable\"].table tr > td {\n display: block !important;\n width: 100% !important;\n display: block !important;\n }\n\n .ui[class*=\"tablet stackable\"].table {\n padding: 0em;\n }\n .ui[class*=\"tablet stackable\"].table thead {\n display: @responsiveHeaderDisplay;\n }\n .ui[class*=\"tablet stackable\"].table tfoot {\n display: @responsiveFooterDisplay;\n }\n .ui[class*=\"tablet stackable\"].table tr {\n padding-top: @responsiveRowVerticalPadding;\n padding-bottom: @responsiveRowVerticalPadding;\n box-shadow: @responsiveRowBoxShadow;\n }\n .ui[class*=\"tablet stackable\"].table tr > th,\n .ui[class*=\"tablet stackable\"].table tr > td {\n background: none;\n border: none !important;\n padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;\n box-shadow: @responsiveCellBoxShadow;\n }\n\n /* Definition Table */\n .ui.definition[class*=\"tablet stackable\"].table thead th:first-child {\n box-shadow: none !important;\n }\n}\n\n/*--------------\n Text Alignment\n---------------*/\n\n.ui.table[class*=\"left aligned\"],\n.ui.table [class*=\"left aligned\"] {\n text-align: left;\n}\n.ui.table[class*=\"center aligned\"],\n.ui.table [class*=\"center aligned\"] {\n text-align: center;\n}\n.ui.table[class*=\"right aligned\"],\n.ui.table [class*=\"right aligned\"] {\n text-align: right;\n}\n\n/*------------------\n Vertical Alignment\n------------------*/\n\n.ui.table[class*=\"top aligned\"],\n.ui.table [class*=\"top aligned\"] {\n vertical-align: top;\n}\n.ui.table[class*=\"middle aligned\"],\n.ui.table [class*=\"middle aligned\"] {\n vertical-align: middle;\n}\n.ui.table[class*=\"bottom aligned\"],\n.ui.table [class*=\"bottom aligned\"] {\n vertical-align: bottom;\n}\n\n/*--------------\n Collapsing\n---------------*/\n\n.ui.table th.collapsing,\n.ui.table td.collapsing {\n width: 1px;\n white-space: nowrap;\n}\n\n/*--------------\n Fixed\n---------------*/\n\n.ui.fixed.table {\n table-layout: fixed;\n}\n\n.ui.fixed.table th,\n.ui.fixed.table td {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n/*--------------\n Selectable\n---------------*/\n\n.ui.selectable.table tbody tr:hover,\n.ui.table tbody tr td.selectable:hover {\n background: @selectableBackground !important;\n color: @selectableTextColor !important;\n}\n.ui.selectable.inverted.table tbody tr:hover,\n.ui.inverted.table tbody tr td.selectable:hover {\n background: @selectableInvertedBackground !important;\n color: @selectableInvertedTextColor !important;\n}\n\n/* Selectable Cell Link */\n.ui.table tbody tr td.selectable {\n padding: 0em;\n}\n.ui.table tbody tr td.selectable > a:not(.ui) {\n display: block;\n color: inherit;\n padding: @cellVerticalPadding @cellHorizontalPadding;\n}\n\n/* Other States */\n.ui.selectable.table tr.error:hover,\n.ui.table tr td.selectable.error:hover,\n.ui.selectable.table tr:hover td.error {\n background: @errorBackgroundHover !important;\n color: @errorColorHover !important;\n}\n.ui.selectable.table tr.warning:hover,\n.ui.table tr td.selectable.warning:hover,\n.ui.selectable.table tr:hover td.warning {\n background: @warningBackgroundHover !important;\n color: @warningColorHover !important;\n}\n.ui.selectable.table tr.active:hover,\n.ui.table tr td.selectable.active:hover,\n.ui.selectable.table tr:hover td.active {\n background: @activeBackgroundColor !important;\n color: @activeColor !important;\n}\n.ui.selectable.table tr.positive:hover,\n.ui.table tr td.selectable.positive:hover,\n.ui.selectable.table tr:hover td.positive {\n background: @positiveBackgroundHover !important;\n color: @positiveColorHover !important;\n}\n.ui.selectable.table tr.negative:hover,\n.ui.table tr td.selectable.negative:hover,\n.ui.selectable.table tr:hover td.negative {\n background: @negativeBackgroundHover !important;\n color: @negativeColorHover !important;\n}\n\n\n\n/*-------------------\n Attached\n--------------------*/\n\n/* Middle */\n.ui.attached.table {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: 0em @attachedHorizontalOffset;\n width: @attachedWidth;\n max-width: @attachedWidth;\n box-shadow: @attachedBoxShadow;\n border: @attachedBorder;\n}\n.ui.attached + .ui.attached.table:not(.top) {\n border-top: none;\n}\n\n/* Top */\n.ui[class*=\"top attached\"].table {\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n margin-top: @verticalMargin;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.table[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n\n/* Bottom */\n.ui[class*=\"bottom attached\"].table {\n bottom: 0px;\n margin-top: 0em;\n top: @attachedBottomOffset;\n margin-bottom: @verticalMargin;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui[class*=\"bottom attached\"].table:last-child {\n margin-bottom: 0em;\n}\n\n/*--------------\n Striped\n---------------*/\n\n/* Table Striping */\n.ui.striped.table > tr:nth-child(2n),\n.ui.striped.table tbody tr:nth-child(2n) {\n background-color: @stripedBackground;\n}\n\n/* Stripes */\n.ui.inverted.striped.table > tr:nth-child(2n),\n.ui.inverted.striped.table tbody tr:nth-child(2n) {\n background-color: @invertedStripedBackground;\n}\n\n/* Allow striped active hover */\n.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {\n background: @activeBackgroundHover !important;\n color: @activeColorHover !important;\n}\n\n/*--------------\n Single Line\n---------------*/\n\n.ui.table[class*=\"single line\"],\n.ui.table [class*=\"single line\"] {\n white-space: nowrap;\n}\n.ui.table[class*=\"single line\"],\n.ui.table [class*=\"single line\"] {\n white-space: nowrap;\n}\n\n/*-------------------\n Colors\n--------------------*/\n\n/* Red */\n.ui.red.table {\n border-top: @coloredBorderSize solid @red;\n}\n.ui.inverted.red.table {\n background-color: @red !important;\n color: @white !important;\n}\n\n/* Orange */\n.ui.orange.table {\n border-top: @coloredBorderSize solid @orange;\n}\n.ui.inverted.orange.table {\n background-color: @orange !important;\n color: @white !important;\n}\n\n/* Yellow */\n.ui.yellow.table {\n border-top: @coloredBorderSize solid @yellow;\n}\n.ui.inverted.yellow.table {\n background-color: @yellow !important;\n color: @white !important;\n}\n\n/* Olive */\n.ui.olive.table {\n border-top: @coloredBorderSize solid @olive;\n}\n.ui.inverted.olive.table {\n background-color: @olive !important;\n color: @white !important;\n}\n\n/* Green */\n.ui.green.table {\n border-top: @coloredBorderSize solid @green;\n}\n.ui.inverted.green.table {\n background-color: @green !important;\n color: @white !important;\n}\n\n/* Teal */\n.ui.teal.table {\n border-top: @coloredBorderSize solid @teal;\n}\n.ui.inverted.teal.table {\n background-color: @teal !important;\n color: @white !important;\n}\n\n/* Blue */\n.ui.blue.table {\n border-top: @coloredBorderSize solid @blue;\n}\n.ui.inverted.blue.table {\n background-color: @blue !important;\n color: @white !important;\n}\n\n/* Violet */\n.ui.violet.table {\n border-top: @coloredBorderSize solid @violet;\n}\n.ui.inverted.violet.table {\n background-color: @violet !important;\n color: @white !important;\n}\n\n/* Purple */\n.ui.purple.table {\n border-top: @coloredBorderSize solid @purple;\n}\n.ui.inverted.purple.table {\n background-color: @purple !important;\n color: @white !important;\n}\n\n/* Pink */\n.ui.pink.table {\n border-top: @coloredBorderSize solid @pink;\n}\n.ui.inverted.pink.table {\n background-color: @pink !important;\n color: @white !important;\n}\n\n/* Brown */\n.ui.brown.table {\n border-top: @coloredBorderSize solid @brown;\n}\n.ui.inverted.brown.table {\n background-color: @brown !important;\n color: @white !important;\n}\n\n/* Grey */\n.ui.grey.table {\n border-top: @coloredBorderSize solid @grey;\n}\n.ui.inverted.grey.table {\n background-color: @grey !important;\n color: @white !important;\n}\n\n/* Black */\n.ui.black.table {\n border-top: @coloredBorderSize solid @black;\n}\n.ui.inverted.black.table {\n background-color: @black !important;\n color: @white !important;\n}\n\n\n/*--------------\n Column Count\n---------------*/\n\n/* Grid Based */\n.ui.one.column.table td {\n width: @oneColumn;\n}\n.ui.two.column.table td {\n width: @twoColumn;\n}\n.ui.three.column.table td {\n width: @threeColumn;\n}\n.ui.four.column.table td {\n width: @fourColumn;\n}\n.ui.five.column.table td {\n width: @fiveColumn;\n}\n.ui.six.column.table td {\n width: @sixColumn;\n}\n.ui.seven.column.table td {\n width: @sevenColumn;\n}\n.ui.eight.column.table td {\n width: @eightColumn;\n}\n.ui.nine.column.table td {\n width: @nineColumn;\n}\n.ui.ten.column.table td {\n width: @tenColumn;\n}\n.ui.eleven.column.table td {\n width: @elevenColumn;\n}\n.ui.twelve.column.table td {\n width: @twelveColumn;\n}\n.ui.thirteen.column.table td {\n width: @thirteenColumn;\n}\n.ui.fourteen.column.table td {\n width: @fourteenColumn;\n}\n.ui.fifteen.column.table td {\n width: @fifteenColumn;\n}\n.ui.sixteen.column.table td {\n width: @sixteenColumn;\n}\n\n/* Column Width */\n.ui.table th.one.wide,\n.ui.table td.one.wide {\n width: @oneWide;\n}\n.ui.table th.two.wide,\n.ui.table td.two.wide {\n width: @twoWide;\n}\n.ui.table th.three.wide,\n.ui.table td.three.wide {\n width: @threeWide;\n}\n.ui.table th.four.wide,\n.ui.table td.four.wide {\n width: @fourWide;\n}\n.ui.table th.five.wide,\n.ui.table td.five.wide {\n width: @fiveWide;\n}\n.ui.table th.six.wide,\n.ui.table td.six.wide {\n width: @sixWide;\n}\n.ui.table th.seven.wide,\n.ui.table td.seven.wide {\n width: @sevenWide;\n}\n.ui.table th.eight.wide,\n.ui.table td.eight.wide {\n width: @eightWide;\n}\n.ui.table th.nine.wide,\n.ui.table td.nine.wide {\n width: @nineWide;\n}\n.ui.table th.ten.wide,\n.ui.table td.ten.wide {\n width: @tenWide;\n}\n.ui.table th.eleven.wide,\n.ui.table td.eleven.wide {\n width: @elevenWide;\n}\n.ui.table th.twelve.wide,\n.ui.table td.twelve.wide {\n width: @twelveWide;\n}\n.ui.table th.thirteen.wide,\n.ui.table td.thirteen.wide {\n width: @thirteenWide;\n}\n.ui.table th.fourteen.wide,\n.ui.table td.fourteen.wide {\n width: @fourteenWide;\n}\n.ui.table th.fifteen.wide,\n.ui.table td.fifteen.wide {\n width: @fifteenWide;\n}\n.ui.table th.sixteen.wide,\n.ui.table td.sixteen.wide {\n width: @sixteenWide;\n}\n\n/*--------------\n Sortable\n---------------*/\n\n.ui.sortable.table thead th {\n cursor: pointer;\n white-space: nowrap;\n border-left: @sortableBorder;\n color: @sortableColor;\n}\n.ui.sortable.table thead th:first-child {\n border-left: none;\n}\n.ui.sortable.table thead th.sorted,\n.ui.sortable.table thead th.sorted:hover {\n user-select: none;\n}\n\n.ui.sortable.table thead th:after {\n display: none;\n font-style: normal;\n font-weight: @normal;\n text-decoration: inherit;\n content: '';\n height: 1em;\n width: @sortableIconWidth;\n opacity: @sortableIconOpacity;\n margin: 0em 0em 0em @sortableIconDistance;\n font-family: @sortableIconFont;\n}\n.ui.sortable.table thead th.ascending:after {\n content: @sortableIconAscending;\n}\n.ui.sortable.table thead th.descending:after {\n content: @sortableIconDescending;\n}\n\n/* Hover */\n.ui.sortable.table th.disabled:hover {\n cursor: auto;\n color: @sortableDisabledColor;\n}\n.ui.sortable.table thead th:hover {\n background: @sortableHoverBackground;\n color: @sortableHoverColor;\n}\n\n/* Sorted */\n.ui.sortable.table thead th.sorted {\n background: @sortableActiveBackground;\n color: @sortableActiveColor;\n}\n.ui.sortable.table thead th.sorted:after {\n display: inline-block;\n}\n\n/* Sorted Hover */\n.ui.sortable.table thead th.sorted:hover {\n background: @sortableActiveHoverBackground;\n color: @sortableActiveHoverColor;\n}\n\n/* Inverted */\n.ui.inverted.sortable.table thead th.sorted {\n background: @sortableInvertedActiveBackground;\n color: @sortableInvertedActiveColor;\n}\n.ui.inverted.sortable.table thead th:hover {\n background: @sortableInvertedHoverBackground;\n color: @sortableInvertedHoverColor;\n}\n.ui.inverted.sortable.table thead th {\n border-left-color: @sortableInvertedBorderColor;\n border-right-color: @sortableInvertedBorderColor;\n}\n\n\n/*--------------\n Inverted\n---------------*/\n\n/* Text Color */\n.ui.inverted.table {\n background: @invertedBackground;\n color: @invertedCellColor;\n border: @invertedBorder;\n}\n.ui.inverted.table th {\n background-color: @invertedHeaderBackground;\n border-color: @invertedHeaderBorderColor !important;\n color: @invertedHeaderColor !important;\n}\n.ui.inverted.table tr td {\n border-color: @invertedCellBorderColor !important;\n}\n\n.ui.inverted.table tr.disabled td,\n.ui.inverted.table tr td.disabled,\n.ui.inverted.table tr.disabled:hover td,\n.ui.inverted.table tr:hover td.disabled {\n pointer-events: none;\n color: @invertedDisabledTextColor;\n}\n\n/* Definition */\n.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,\n.ui.inverted.definition.table thead:not(.full-width) th:first-child {\n background: @definitionPageBackground;\n}\n.ui.inverted.definition.table tr td:first-child {\n background: @invertedDefinitionColumnBackground;\n color: @invertedDefinitionColumnColor;\n}\n\n/*--------------\n Collapsing\n---------------*/\n\n.ui.collapsing.table {\n width: auto;\n}\n\n/*--------------\n Basic\n---------------*/\n\n.ui.basic.table {\n background: @basicTableBackground;\n border: @basicTableBorder;\n box-shadow: @basicBoxShadow;\n}\n.ui.basic.table thead,\n.ui.basic.table tfoot {\n box-shadow: none;\n}\n.ui.basic.table th {\n background: @basicTableHeaderBackground;\n border-left: @basicTableHeaderDivider;\n}\n.ui.basic.table tbody tr {\n border-bottom: @basicTableCellBorder;\n}\n.ui.basic.table td {\n background: @basicTableCellBackground;\n}\n.ui.basic.striped.table tbody tr:nth-child(2n) {\n background-color: @basicTableStripedBackground !important;\n}\n\n/* Very Basic */\n.ui[class*=\"very basic\"].table {\n border: none;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) th,\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) td {\n padding: @basicTableCellPadding;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) th:first-child,\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) td:first-child {\n padding-left: 0em;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) th:last-child,\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) td:last-child {\n padding-right: 0em;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) thead tr:first-child th {\n padding-top: 0em;\n}\n\n/*--------------\n Celled\n---------------*/\n\n.ui.celled.table tr th,\n.ui.celled.table tr td {\n border-left: @cellBorder;\n}\n.ui.celled.table tr th:first-child,\n.ui.celled.table tr td:first-child {\n border-left: none;\n}\n\n/*--------------\n Padded\n---------------*/\n\n.ui.padded.table th {\n padding-left: @paddedHorizontalPadding;\n padding-right: @paddedHorizontalPadding;\n}\n.ui.padded.table th,\n.ui.padded.table td {\n padding: @paddedVerticalPadding @paddedHorizontalPadding;\n}\n\n/* Very */\n.ui[class*=\"very padded\"].table th {\n padding-left: @veryPaddedHorizontalPadding;\n padding-right: @veryPaddedHorizontalPadding;\n}\n.ui[class*=\"very padded\"].table td {\n padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;\n}\n\n/*--------------\n Compact\n---------------*/\n\n.ui.compact.table th {\n padding-left: @compactHorizontalPadding;\n padding-right: @compactHorizontalPadding;\n}\n.ui.compact.table td {\n padding: @compactVerticalPadding @compactHorizontalPadding;\n}\n\n/* Very */\n.ui[class*=\"very compact\"].table th {\n padding-left: @veryCompactHorizontalPadding;\n padding-right: @veryCompactHorizontalPadding;\n}\n.ui[class*=\"very compact\"].table td {\n padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n/* Small */\n.ui.small.table {\n font-size: @small;\n}\n\n/* Standard */\n.ui.table {\n font-size: @medium;\n}\n\n/* Large */\n.ui.large.table {\n font-size: @large;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/button.less", "content": "/*!\n * # Semantic UI - Button\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'button';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Button\n*******************************/\n\n.ui.button {\n cursor: pointer;\n display: inline-block;\n\n min-height: 1em;\n\n outline: none;\n border: none;\n vertical-align: @verticalAlign;\n background: @background;\n color: @textColor;\n\n font-family: @fontFamily;\n\n margin: 0em @horizontalMargin @verticalMargin 0em;\n padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);\n\n text-transform: @textTransform;\n text-shadow: @textShadow;\n font-weight: @fontWeight;\n line-height: @lineHeight;\n font-style: normal;\n text-align: center;\n text-decoration: none;\n\n border-radius: @borderRadius;\n box-shadow: @boxShadow;\n\n user-select: none;\n transition: @transition;\n will-change: @willChange;\n\n -webkit-tap-highlight-color: @tapColor;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Hover\n---------------*/\n\n.ui.button:hover {\n background-color: @hoverBackgroundColor;\n background-image: @hoverBackgroundImage;\n box-shadow: @hoverBoxShadow;\n color: @hoverColor;\n}\n\n.ui.button:hover .icon {\n opacity: @iconHoverOpacity;\n}\n\n/*--------------\n Focus\n---------------*/\n\n.ui.button:focus {\n background-color: @focusBackgroundColor;\n color: @focusColor;\n background-image: @focusBackgroundImage !important;\n box-shadow: @focusBoxShadow !important;\n}\n\n.ui.button:focus .icon {\n opacity: @iconFocusOpacity;\n}\n\n/*--------------\n Down\n---------------*/\n\n.ui.button:active,\n.ui.active.button:active {\n background-color: @downBackgroundColor;\n background-image: @downBackgroundImage;\n color: @downColor;\n box-shadow: @downBoxShadow;\n}\n\n/*--------------\n Active\n---------------*/\n\n.ui.active.button {\n background-color: @activeBackgroundColor;\n background-image: @activeBackgroundImage;\n box-shadow: @activeBoxShadow;\n color: @activeColor;\n}\n.ui.active.button:hover {\n background-color: @activeHoverBackgroundColor;\n background-image: @activeHoverBackgroundImage;\n color: @activeHoverColor;\n}\n.ui.active.button:active {\n background-color: @activeBackgroundColor;\n background-image: @activeBackgroundImage;\n}\n\n\n/*--------------\n Loading\n---------------*/\n\n/* Specificity hack */\n.ui.loading.loading.loading.loading.loading.loading.button {\n position: relative;\n cursor: default;\n text-shadow: none !important;\n color: transparent !important;\n opacity: @loadingOpacity;\n pointer-events: @loadingPointerEvents;\n transition: @loadingTransition;\n}\n.ui.loading.button:before {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n border-radius: @circularRadius;\n border: @loaderLineWidth solid @invertedLoaderFillColor;\n}\n.ui.loading.button:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: button-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @invertedLoaderLineColor transparent transparent;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n}\n.ui.labeled.icon.loading.button .icon {\n background-color: transparent;\n box-shadow: none;\n}\n\n@keyframes button-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.ui.basic.loading.button:not(.inverted):before {\n border-color: @loaderFillColor;\n}\n.ui.basic.loading.button:not(.inverted):after {\n border-top-color: @loaderLineColor;\n}\n\n/*-------------------\n Disabled\n--------------------*/\n\n.ui.buttons .disabled.button,\n.ui.disabled.button,\n.ui.button:disabled,\n.ui.disabled.button:hover,\n.ui.disabled.active.button {\n cursor: default;\n opacity: @disabledOpacity !important;\n background-image: none !important;\n box-shadow: none !important;\n pointer-events: none !important;\n}\n\n/* Basic Group With Disabled */\n.ui.basic.buttons .ui.disabled.button {\n border-color: @disabledBorderColor;\n}\n\n/*******************************\n Types\n*******************************/\n\n/*-------------------\n Animated\n--------------------*/\n\n.ui.animated.button {\n position: relative;\n overflow: hidden;\n padding-right: 0em !important;\n vertical-align: @animatedVerticalAlign;\n z-index: @animatedZIndex;\n}\n\n.ui.animated.button .content {\n will-change: transform, opacity;\n}\n.ui.animated.button .visible.content {\n position: relative;\n margin-right: @horizontalPadding;\n}\n.ui.animated.button .hidden.content {\n position: absolute;\n width: 100%;\n}\n\n/* Horizontal */\n.ui.animated.button .visible.content,\n.ui.animated.button .hidden.content {\n transition: right @animationDuration @animationEasing 0s;\n}\n.ui.animated.button .visible.content {\n left: auto;\n right: 0%;\n}\n.ui.animated.button .hidden.content {\n top: 50%;\n left: auto;\n right: -100%;\n margin-top: -(@lineHeight / 2);\n}\n.ui.animated.button:focus .visible.content,\n.ui.animated.button:hover .visible.content {\n left: auto;\n right: 200%;\n}\n.ui.animated.button:focus .hidden.content,\n.ui.animated.button:hover .hidden.content {\n left: auto;\n right: 0%;\n}\n\n/* Vertical */\n.ui.vertical.animated.button .visible.content,\n.ui.vertical.animated.button .hidden.content {\n transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;\n}\n.ui.vertical.animated.button .visible.content {\n transform: translateY(0%);\n right: auto;\n}\n.ui.vertical.animated.button .hidden.content {\n top: -50%;\n left: 0%;\n right: auto;\n}\n.ui.vertical.animated.button:focus .visible.content,\n.ui.vertical.animated.button:hover .visible.content {\n transform: translateY(200%);\n right: auto;\n}\n.ui.vertical.animated.button:focus .hidden.content,\n.ui.vertical.animated.button:hover .hidden.content {\n top: 50%;\n right: auto;\n}\n\n/* Fade */\n.ui.fade.animated.button .visible.content,\n.ui.fade.animated.button .hidden.content {\n transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;\n}\n.ui.fade.animated.button .visible.content {\n left: auto;\n right: auto;\n opacity: 1;\n transform: scale(1);\n}\n.ui.fade.animated.button .hidden.content {\n opacity: 0;\n left: 0%;\n right: auto;\n transform: scale(@fadeScaleHigh);\n}\n.ui.fade.animated.button:focus .visible.content,\n.ui.fade.animated.button:hover .visible.content {\n left: auto;\n right: auto;\n opacity: 0;\n transform: scale(@fadeScaleLow);\n}\n.ui.fade.animated.button:focus .hidden.content,\n.ui.fade.animated.button:hover .hidden.content {\n left: 0%;\n right: auto;\n opacity: 1;\n transform: scale(1);\n}\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;\n background: transparent none;\n color: @white;\n text-shadow: none !important;\n}\n\n/* Group */\n.ui.inverted.buttons .button {\n margin: @invertedGroupButtonOffset;\n}\n.ui.inverted.buttons .button:first-child {\n margin-left: 0em;\n}\n.ui.inverted.vertical.buttons .button {\n margin: @invertedVerticalGroupButtonOffset;\n}\n.ui.inverted.vertical.buttons .button:first-child {\n margin-top: 0em;\n}\n\n/* States */\n\n/* Hover */\n.ui.inverted.button:hover {\n background: @white;\n box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;\n color: @hoverColor;\n}\n\n/* Active / Focus */\n.ui.inverted.button:focus,\n.ui.inverted.button.active {\n background: @white;\n box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;\n color: @focusColor;\n}\n\n/* Active Focus */\n.ui.inverted.button.active:focus {\n background: @midWhite;\n box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important;\n color: @focusColor;\n}\n\n\n/*-------------------\n Labeled Button\n--------------------*/\n\n.ui.labeled.button:not(.icon) {\n display: inline-flex;\n flex-direction: row;\n background: none !important;\n padding: 0px !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ui.labeled.button > .button {\n margin: 0px;\n}\n.ui.labeled.button > .label {\n display: flex;\n align-items: @labeledLabelAlign;\n margin: 0px 0px 0px @labeledLabelBorderOffset !important;\n font-size: @labeledLabelFontSize;\n padding: @labeledLabelPadding;\n font-size: @labeledLabelFontSize;\n border-color: @labeledLabelBorderColor;\n}\n\n/* Tag */\n.ui.labeled.button > .tag.label:before {\n width: @labeledTagLabelSize;\n height: @labeledTagLabelSize;\n}\n\n/* Right */\n.ui.labeled.button:not([class*=\"left labeled\"]) > .button {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n.ui.labeled.button:not([class*=\"left labeled\"]) > .label {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n/* Left Side */\n.ui[class*=\"left labeled\"].button > .button {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n.ui[class*=\"left labeled\"].button > .label {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n\n/*-------------------\n Social\n--------------------*/\n\n/* Facebook */\n.ui.facebook.button {\n background-color: @facebookColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.facebook.button:hover {\n background-color: @facebookHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.facebook.button:active {\n background-color: @facebookDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Twitter */\n.ui.twitter.button {\n background-color: @twitterColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.twitter.button:hover {\n background-color: @twitterHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.twitter.button:active {\n background-color: @twitterDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Google Plus */\n.ui.google.plus.button {\n background-color: @googlePlusColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.google.plus.button:hover {\n background-color: @googlePlusHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.google.plus.button:active {\n background-color: @googlePlusDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Linked In */\n.ui.linkedin.button {\n background-color: @linkedInColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.linkedin.button:hover {\n background-color: @linkedInHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.linkedin.button:active {\n background-color: @linkedInDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* YouTube */\n.ui.youtube.button {\n background-color: @youtubeColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.youtube.button:hover {\n background-color: @youtubeHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.youtube.button:active {\n background-color: @youtubeDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Instagram */\n.ui.instagram.button {\n background-color: @instagramColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.instagram.button:hover {\n background-color: @instagramHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.instagram.button:active {\n background-color: @instagramDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Pinterest */\n.ui.pinterest.button {\n background-color: @pinterestColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.pinterest.button:hover {\n background-color: @pinterestHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.pinterest.button:active {\n background-color: @pinterestDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* VK */\n.ui.vk.button {\n background-color: #4D7198;\n color: @white;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.vk.button:hover {\n background-color: @vkHoverColor;\n color: @white;\n}\n.ui.vk.button:active {\n background-color: @vkDownColor;\n color: @white;\n}\n\n/*--------------\n Icon\n---------------*/\n\n.ui.button > .icon:not(.button) {\n height: @iconHeight;\n opacity: @iconOpacity;\n margin: @iconMargin;\n transition: @iconTransition;\n vertical-align: @iconVerticalAlign;\n color: @iconColor;\n}\n\n.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {\n margin: @iconMargin;\n}\n.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {\n margin: @rightIconMargin;\n}\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui[class*=\"left floated\"].buttons,\n.ui[class*=\"left floated\"].button {\n float: left;\n margin-left: 0em;\n margin-right: @floatedMargin;\n}\n.ui[class*=\"right floated\"].buttons,\n.ui[class*=\"right floated\"].button {\n float: right;\n margin-right: 0em;\n margin-left: @floatedMargin;\n}\n\n/*-------------------\n Compact\n--------------------*/\n\n.ui.compact.buttons .button,\n.ui.compact.button {\n padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );\n}\n.ui.compact.icon.buttons .button,\n.ui.compact.icon.button {\n padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );\n}\n.ui.compact.labeled.icon.buttons .button,\n.ui.compact.labeled.icon.button {\n padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n.ui.mini.buttons .button,\n.ui.mini.buttons .or,\n.ui.mini.button {\n font-size: @mini;\n}\n.ui.tiny.buttons .button,\n.ui.tiny.buttons .or,\n.ui.tiny.button {\n font-size: @tiny;\n}\n.ui.small.buttons .button,\n.ui.small.buttons .or,\n.ui.small.button {\n font-size: @small;\n}\n.ui.buttons .button,\n.ui.buttons .or,\n.ui.button {\n font-size: @medium;\n}\n.ui.large.buttons .button,\n.ui.large.buttons .or,\n.ui.large.button {\n font-size: @large;\n}\n.ui.big.buttons .button,\n.ui.big.buttons .or,\n.ui.big.button {\n font-size: @big;\n}\n.ui.huge.buttons .button,\n.ui.huge.buttons .or,\n.ui.huge.button {\n font-size: @huge;\n}\n.ui.massive.buttons .button,\n.ui.massive.buttons .or,\n.ui.massive.button {\n font-size: @massive;\n}\n\n/*--------------\n Icon Only\n---------------*/\n\n.ui.icon.buttons .button,\n.ui.icon.button {\n padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset );\n}\n.ui.icon.buttons .button > .icon,\n.ui.icon.button > .icon {\n opacity: @iconButtonOpacity;\n margin: 0em !important;\n vertical-align: top;\n}\n\n\n/*-------------------\n Basic\n--------------------*/\n\n.ui.basic.buttons .button,\n.ui.basic.button {\n background: @basicBackground !important;\n color: @basicTextColor !important;\n font-weight: @basicFontWeight;\n border-radius: @basicBorderRadius;\n text-transform: @basicTextTransform;\n text-shadow: none !important;\n box-shadow: @basicBoxShadow;\n}\n.ui.basic.buttons {\n box-shadow: @basicGroupBoxShadow;\n border: @basicGroupBorder;\n border-radius: @borderRadius;\n}\n.ui.basic.buttons .button {\n border-radius: 0em;\n}\n\n.ui.basic.buttons .button:hover,\n.ui.basic.button:hover {\n background: @basicHoverBackground !important;\n color: @basicHoverTextColor !important;\n box-shadow: @basicHoverBoxShadow;\n}\n.ui.basic.buttons .button:focus,\n.ui.basic.button:focus {\n background: @basicFocusBackground !important;\n color: @basicFocusTextColor !important;\n box-shadow: @basicFocusBoxShadow;\n}\n.ui.basic.buttons .button:active,\n.ui.basic.button:active {\n background: @basicDownBackground !important;\n color: @basicDownTextColor !important;\n box-shadow: @basicDownBoxShadow;\n}\n.ui.basic.buttons .active.button,\n.ui.basic.active.button {\n background: @basicActiveBackground !important;\n box-shadow: @basicActiveBoxShadow !important;\n color: @basicActiveTextColor !important;\n}\n.ui.basic.buttons .active.button:hover,\n.ui.basic.active.button:hover {\n background-color: @transparentBlack;\n}\n\n/* Vertical */\n.ui.basic.buttons .button:hover {\n box-shadow: @basicHoverBoxShadow inset;\n}\n.ui.basic.buttons .button:active {\n box-shadow: @basicDownBoxShadow inset;\n}\n.ui.basic.buttons .active.button {\n box-shadow: @basicActiveBoxShadow !important;\n}\n\n/* Standard Basic Inverted */\n.ui.basic.inverted.buttons .button,\n.ui.basic.inverted.button {\n background-color: transparent !important;\n color: @offWhite !important;\n box-shadow: @basicInvertedBoxShadow !important;\n}\n.ui.basic.inverted.buttons .button:hover,\n.ui.basic.inverted.button:hover {\n color: @white !important;\n box-shadow: @basicInvertedHoverBoxShadow !important;\n}\n.ui.basic.inverted.buttons .button:focus,\n.ui.basic.inverted.button:focus {\n color: @white !important;\n box-shadow: @basicInvertedFocusBoxShadow !important;\n}\n.ui.basic.inverted.buttons .button:active,\n.ui.basic.inverted.button:active {\n background-color: @transparentWhite !important;\n color: @white !important;\n box-shadow: @basicInvertedDownBoxShadow !important;\n}\n.ui.basic.inverted.buttons .active.button,\n.ui.basic.inverted.active.button {\n background-color: @transparentWhite;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n box-shadow: @basicInvertedActiveBoxShadow;\n}\n.ui.basic.inverted.buttons .active.button:hover,\n.ui.basic.inverted.active.button:hover {\n background-color: @strongTransparentWhite;\n box-shadow: @basicInvertedHoverBoxShadow !important;\n}\n\n\n/* Basic Group */\n.ui.basic.buttons .button {\n border-left: @basicGroupBorder;\n box-shadow: none;\n}\n.ui.basic.vertical.buttons .button {\n border-left: none;\n}\n.ui.basic.vertical.buttons .button {\n border-left-width: 0px;\n border-top: @basicGroupBorder;\n}\n.ui.basic.vertical.buttons .button:first-child {\n border-top-width: 0px;\n}\n\n\n\n/*--------------\n Labeled Icon\n---------------*/\n\n.ui.labeled.icon.buttons .button,\n.ui.labeled.icon.button {\n position: relative;\n padding-left: @labeledIconPadding !important;\n padding-right: @horizontalPadding !important;\n}\n\n/* Left Labeled */\n.ui.labeled.icon.buttons > .button > .icon,\n.ui.labeled.icon.button > .icon {\n position: absolute;\n height: 100%;\n line-height: 1;\n border-radius: 0px;\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;\n text-align: center;\n\n margin: @labeledIconMargin;\n width: @labeledIconWidth;\n background-color: @labeledIconBackgroundColor;\n color: @labeledIconColor;\n box-shadow: @labeledIconLeftShadow;\n}\n\n/* Left Labeled */\n.ui.labeled.icon.buttons > .button > .icon,\n.ui.labeled.icon.button > .icon {\n top: 0em;\n left: 0em;\n}\n\n/* Right Labeled */\n.ui[class*=\"right labeled\"].icon.button {\n padding-right: @labeledIconPadding !important;\n padding-left: @horizontalPadding !important;\n}\n.ui[class*=\"right labeled\"].icon.button > .icon {\n left: auto;\n right: 0em;\n border-radius: 0px;\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;\n box-shadow: @labeledIconRightShadow;\n}\n\n\n.ui.labeled.icon.buttons > .button > .icon:before,\n.ui.labeled.icon.button > .icon:before,\n.ui.labeled.icon.buttons > .button > .icon:after,\n.ui.labeled.icon.button > .icon:after {\n display: block;\n position: absolute;\n width: 100%;\n top: 50%;\n text-align: center;\n transform: translateY(-50%);\n}\n\n.ui.labeled.icon.buttons .button > .icon {\n border-radius: 0em;\n}\n.ui.labeled.icon.buttons .button:first-child > .icon {\n border-top-left-radius: @borderRadius;\n border-bottom-left-radius: @borderRadius;\n}\n.ui.labeled.icon.buttons .button:last-child > .icon {\n border-top-right-radius: @borderRadius;\n border-bottom-right-radius: @borderRadius;\n}\n.ui.vertical.labeled.icon.buttons .button:first-child > .icon {\n border-radius: 0em;\n border-top-left-radius: @borderRadius;\n}\n.ui.vertical.labeled.icon.buttons .button:last-child > .icon {\n border-radius: 0em;\n border-bottom-left-radius: @borderRadius;\n}\n\n/* Fluid Labeled */\n.ui.fluid[class*=\"left labeled\"].icon.button,\n.ui.fluid[class*=\"right labeled\"].icon.button {\n padding-left: @horizontalPadding !important;\n padding-right: @horizontalPadding !important;\n}\n\n\n\n\n/*--------------\n Toggle\n---------------*/\n\n/* Toggle (Modifies active state to give affordances) */\n.ui.toggle.buttons .active.button,\n.ui.buttons .button.toggle.active,\n.ui.button.toggle.active {\n background-color: @positiveColor !important;\n box-shadow: none !important;\n text-shadow: @invertedTextShadow;\n color: @invertedTextColor !important;\n}\n.ui.button.toggle.active:hover {\n background-color: @positiveColorHover !important;\n text-shadow: @invertedTextShadow;\n color: @invertedTextColor !important;\n}\n\n/*--------------\n Circular\n---------------*/\n\n.ui.circular.button {\n border-radius: 10em;\n}\n.ui.circular.button > .icon {\n width: 1em;\n vertical-align: baseline;\n}\n\n\n/*-------------------\n Or Buttons\n--------------------*/\n\n.ui.buttons .or {\n position: relative;\n width: @orGap;\n height: @orHeight;\n z-index: @orZIndex;\n}\n.ui.buttons .or:before {\n position: absolute;\n text-align: center;\n border-radius: @circularRadius;\n\n content: @orText;\n top: 50%;\n left: 50%;\n background-color: @orBackgroundColor;\n text-shadow: @orTextShadow;\n\n margin-top: @orVerticalOffset;\n margin-left: @orHorizontalOffset;\n\n width: @orCircleSize;\n height: @orCircleSize;\n\n line-height: @orLineHeight;\n color: @orTextColor;\n\n font-style: @orTextStyle;\n font-weight: @orTextWeight;\n\n box-shadow: @orBoxShadow;\n}\n.ui.buttons .or[data-text]:before {\n content: attr(data-text);\n}\n\n/* Fluid Or */\n.ui.fluid.buttons .or {\n width: 0em !important;\n}\n.ui.fluid.buttons .or:after {\n display: none;\n}\n\n\n/*-------------------\n Attached\n--------------------*/\n\n\n/* Singular */\n.ui.attached.button {\n position: relative;\n display: block;\n margin: 0em;\n border-radius: 0em;\n box-shadow: @attachedBoxShadow !important;\n}\n\n/* Top / Bottom */\n.ui.attached.top.button {\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.attached.bottom.button {\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n\n/* Left / Right */\n.ui.left.attached.button {\n display: inline-block;\n border-left: none;\n text-align: right;\n\n padding-right: @attachedHorizontalPadding;\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui.right.attached.button {\n display: inline-block;\n text-align: left;\n padding-left: @attachedHorizontalPadding;\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n\n/* Plural */\n.ui.attached.buttons {\n position: relative;\n display: flex;\n border-radius: 0em;\n width: auto !important;\n z-index: @attachedZIndex;\n margin-left: @attachedOffset;\n margin-right: @attachedOffset;\n}\n.ui.attached.buttons .button {\n margin: 0em;\n}\n.ui.attached.buttons .button:first-child {\n border-radius: 0em;\n}\n.ui.attached.buttons .button:last-child {\n border-radius: 0em;\n}\n\n/* Top / Bottom */\n.ui[class*=\"top attached\"].buttons {\n margin-bottom: @attachedOffset;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui[class*=\"top attached\"].buttons .button:first-child {\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui[class*=\"top attached\"].buttons .button:last-child {\n border-radius: 0em @borderRadius 0em 0em;\n}\n\n.ui[class*=\"bottom attached\"].buttons {\n margin-top: @attachedOffset;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui[class*=\"bottom attached\"].buttons .button:first-child {\n border-radius: 0em 0em 0em @borderRadius;\n}\n.ui[class*=\"bottom attached\"].buttons .button:last-child {\n border-radius: 0em 0em @borderRadius 0em;\n}\n\n/* Left / Right */\n.ui[class*=\"left attached\"].buttons {\n display: inline-flex;\n margin-right: 0em;\n margin-left: @attachedOffset;\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui[class*=\"left attached\"].buttons .button:first-child {\n margin-left: @attachedOffset;\n border-radius: 0em @borderRadius 0em 0em;\n}\n.ui[class*=\"left attached\"].buttons .button:last-child {\n margin-left: @attachedOffset;\n border-radius: 0em 0em @borderRadius 0em;\n}\n\n.ui[class*=\"right attached\"].buttons {\n display: inline-flex;\n margin-left: 0em;\n margin-right: @attachedOffset;\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui[class*=\"right attached\"].buttons .button:first-child {\n margin-left: @attachedOffset;\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui[class*=\"right attached\"].buttons .button:last-child {\n margin-left: @attachedOffset;\n border-radius: 0em 0em 0em @borderRadius;\n}\n\n/*-------------------\n Fluid\n--------------------*/\n\n.ui.fluid.buttons,\n.ui.fluid.button {\n width: 100%;\n}\n.ui.fluid.button {\n display: block;\n}\n\n.ui.two.buttons {\n width: 100%;\n}\n.ui.two.buttons > .button {\n width: 50%;\n}\n\n.ui.three.buttons {\n width: 100%;\n}\n.ui.three.buttons > .button {\n width: 33.333%;\n}\n\n.ui.four.buttons {\n width: 100%;\n}\n.ui.four.buttons > .button {\n width: 25%;\n}\n\n.ui.five.buttons {\n width: 100%;\n}\n.ui.five.buttons > .button {\n width: 20%;\n}\n\n.ui.six.buttons {\n width: 100%;\n}\n.ui.six.buttons > .button {\n width: 16.666%;\n}\n\n.ui.seven.buttons {\n width: 100%;\n}\n.ui.seven.buttons > .button {\n width: 14.285%;\n}\n\n.ui.eight.buttons {\n width: 100%;\n}\n.ui.eight.buttons > .button {\n width: 12.500%;\n}\n\n.ui.nine.buttons {\n width: 100%;\n}\n.ui.nine.buttons > .button {\n width: 11.11%;\n}\n\n.ui.ten.buttons {\n width: 100%;\n}\n.ui.ten.buttons > .button {\n width: 10%;\n}\n\n.ui.eleven.buttons {\n width: 100%;\n}\n.ui.eleven.buttons > .button {\n width: 9.09%;\n}\n\n.ui.twelve.buttons {\n width: 100%;\n}\n.ui.twelve.buttons > .button {\n width: 8.3333%;\n}\n\n/* Fluid Vertical Buttons */\n.ui.fluid.vertical.buttons,\n.ui.fluid.vertical.buttons > .button {\n display: flex;\n width: auto;\n}\n\n.ui.two.vertical.buttons > .button {\n height: 50%;\n}\n.ui.three.vertical.buttons > .button {\n height: 33.333%;\n}\n.ui.four.vertical.buttons > .button {\n height: 25%;\n}\n.ui.five.vertical.buttons > .button {\n height: 20%;\n}\n.ui.six.vertical.buttons > .button {\n height: 16.666%;\n}\n.ui.seven.vertical.buttons > .button {\n height: 14.285%;\n}\n.ui.eight.vertical.buttons > .button {\n height: 12.500%;\n}\n.ui.nine.vertical.buttons > .button {\n height: 11.11%;\n}\n.ui.ten.vertical.buttons > .button {\n height: 10%;\n}\n.ui.eleven.vertical.buttons > .button {\n height: 9.09%;\n}\n.ui.twelve.vertical.buttons > .button {\n height: 8.3333%;\n}\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/*--- Black ---*/\n.ui.black.buttons .button,\n.ui.black.button {\n background-color: @black;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.black.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.black.buttons .button:hover,\n.ui.black.button:hover {\n background-color: @blackHover;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n.ui.black.buttons .button:focus,\n.ui.black.button:focus {\n background-color: @blackFocus;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n.ui.black.buttons .button:active,\n.ui.black.button:active {\n background-color: @blackDown;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n.ui.black.buttons .active.button,\n.ui.black.buttons .active.button:active,\n.ui.black.active.button,\n.ui.black.button .active.button:active {\n background-color: @blackActive;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n\n/* Basic */\n.ui.basic.black.buttons .button,\n.ui.basic.black.button {\n box-shadow: 0px 0px 0px @basicBorderSize @black inset !important;\n color: @black !important;\n}\n.ui.basic.black.buttons .button:hover,\n.ui.basic.black.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;\n color: @blackHover !important;\n}\n.ui.basic.black.buttons .button:focus,\n.ui.basic.black.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important;\n color: @blackHover !important;\n}\n.ui.basic.black.buttons .active.button,\n.ui.basic.black.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important;\n color: @blackDown !important;\n}\n.ui.basic.black.buttons .button:active,\n.ui.basic.black.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;\n color: @blackDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.black.buttons .button,\n.ui.inverted.black.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;\n color: @invertedTextColor;\n}\n.ui.inverted.black.buttons .button:hover,\n.ui.inverted.black.button:hover,\n.ui.inverted.black.buttons .button:focus,\n.ui.inverted.black.button:focus,\n.ui.inverted.black.buttons .button.active,\n.ui.inverted.black.button.active,\n.ui.inverted.black.buttons .button:active,\n.ui.inverted.black.button:active {\n box-shadow: none !important;\n color: @lightBlackTextColor;\n}\n.ui.inverted.black.buttons .button:hover,\n.ui.inverted.black.button:hover {\n background-color: @lightBlackHover;\n}\n.ui.inverted.black.buttons .button:focus,\n.ui.inverted.black.button:focus {\n background-color: @lightBlackFocus;\n}\n.ui.inverted.black.buttons .active.button,\n.ui.inverted.black.active.button {\n background-color: @lightBlackActive;\n}\n.ui.inverted.black.buttons .button:active,\n.ui.inverted.black.button:active {\n background-color: @lightBlackDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.black.basic.buttons .button,\n.ui.inverted.black.buttons .basic.button,\n.ui.inverted.black.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.black.basic.buttons .button:hover,\n.ui.inverted.black.buttons .basic.button:hover,\n.ui.inverted.black.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important;\n color: @white !important;\n}\n.ui.inverted.black.basic.buttons .button:focus,\n.ui.inverted.black.basic.buttons .button:focus,\n.ui.inverted.black.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important;\n color: @lightBlack !important;\n}\n.ui.inverted.black.basic.buttons .active.button,\n.ui.inverted.black.buttons .basic.active.button,\n.ui.inverted.black.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important;\n color: @white !important;\n}\n.ui.inverted.black.basic.buttons .button:active,\n.ui.inverted.black.buttons .basic.button:active,\n.ui.inverted.black.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;\n color: @white !important;\n}\n\n/*--- Grey ---*/\n.ui.grey.buttons .button,\n.ui.grey.button {\n background-color: @grey;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.grey.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.grey.buttons .button:hover,\n.ui.grey.button:hover {\n background-color: @greyHover;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n.ui.grey.buttons .button:focus,\n.ui.grey.button:focus {\n background-color: @greyFocus;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n.ui.grey.buttons .button:active,\n.ui.grey.button:active {\n background-color: @greyDown;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n.ui.grey.buttons .active.button,\n.ui.grey.buttons .active.button:active,\n.ui.grey.active.button,\n.ui.grey.button .active.button:active {\n background-color: @greyActive;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n\n/* Basic */\n.ui.basic.grey.buttons .button,\n.ui.basic.grey.button {\n box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important;\n color: @grey !important;\n}\n.ui.basic.grey.buttons .button:hover,\n.ui.basic.grey.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important;\n color: @greyHover !important;\n}\n.ui.basic.grey.buttons .button:focus,\n.ui.basic.grey.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important;\n color: @greyHover !important;\n}\n.ui.basic.grey.buttons .active.button,\n.ui.basic.grey.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important;\n color: @greyDown !important;\n}\n.ui.basic.grey.buttons .button:active,\n.ui.basic.grey.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important;\n color: @greyDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.grey.buttons .button,\n.ui.inverted.grey.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;\n color: @invertedTextColor;\n}\n.ui.inverted.grey.buttons .button:hover,\n.ui.inverted.grey.button:hover,\n.ui.inverted.grey.buttons .button:focus,\n.ui.inverted.grey.button:focus,\n.ui.inverted.grey.buttons .button.active,\n.ui.inverted.grey.button.active,\n.ui.inverted.grey.buttons .button:active,\n.ui.inverted.grey.button:active {\n box-shadow: none !important;\n color: @lightGreyTextColor;\n}\n.ui.inverted.grey.buttons .button:hover,\n.ui.inverted.grey.button:hover {\n background-color: @lightGreyHover;\n}\n.ui.inverted.grey.buttons .button:focus,\n.ui.inverted.grey.button:focus {\n background-color: @lightGreyFocus;\n}\n.ui.inverted.grey.buttons .active.button,\n.ui.inverted.grey.active.button {\n background-color: @lightGreyActive;\n}\n.ui.inverted.grey.buttons .button:active,\n.ui.inverted.grey.button:active {\n background-color: @lightGreyDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.grey.basic.buttons .button,\n.ui.inverted.grey.buttons .basic.button,\n.ui.inverted.grey.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.grey.basic.buttons .button:hover,\n.ui.inverted.grey.buttons .basic.button:hover,\n.ui.inverted.grey.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important;\n color: @white !important;\n}\n.ui.inverted.grey.basic.buttons .button:focus,\n.ui.inverted.grey.basic.buttons .button:focus,\n.ui.inverted.grey.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important;\n color: @lightGrey !important;\n}\n.ui.inverted.grey.basic.buttons .active.button,\n.ui.inverted.grey.buttons .basic.active.button,\n.ui.inverted.grey.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important;\n color: @white !important;\n}\n.ui.inverted.grey.basic.buttons .button:active,\n.ui.inverted.grey.buttons .basic.button:active,\n.ui.inverted.grey.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important;\n color: @white !important;\n}\n\n\n/*--- Brown ---*/\n.ui.brown.buttons .button,\n.ui.brown.button {\n background-color: @brown;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.brown.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.brown.buttons .button:hover,\n.ui.brown.button:hover {\n background-color: @brownHover;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n.ui.brown.buttons .button:focus,\n.ui.brown.button:focus {\n background-color: @brownFocus;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n.ui.brown.buttons .button:active,\n.ui.brown.button:active {\n background-color: @brownDown;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n.ui.brown.buttons .active.button,\n.ui.brown.buttons .active.button:active,\n.ui.brown.active.button,\n.ui.brown.button .active.button:active {\n background-color: @brownActive;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n\n/* Basic */\n.ui.basic.brown.buttons .button,\n.ui.basic.brown.button {\n box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important;\n color: @brown !important;\n}\n.ui.basic.brown.buttons .button:hover,\n.ui.basic.brown.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important;\n color: @brownHover !important;\n}\n.ui.basic.brown.buttons .button:focus,\n.ui.basic.brown.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important;\n color: @brownHover !important;\n}\n.ui.basic.brown.buttons .active.button,\n.ui.basic.brown.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important;\n color: @brownDown !important;\n}\n.ui.basic.brown.buttons .button:active,\n.ui.basic.brown.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important;\n color: @brownDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.brown.buttons .button,\n.ui.inverted.brown.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important;\n color: @lightBrown;\n}\n.ui.inverted.brown.buttons .button:hover,\n.ui.inverted.brown.button:hover,\n.ui.inverted.brown.buttons .button:focus,\n.ui.inverted.brown.button:focus,\n.ui.inverted.brown.buttons .button.active,\n.ui.inverted.brown.button.active,\n.ui.inverted.brown.buttons .button:active,\n.ui.inverted.brown.button:active {\n box-shadow: none !important;\n color: @lightBrownTextColor;\n}\n.ui.inverted.brown.buttons .button:hover,\n.ui.inverted.brown.button:hover {\n background-color: @lightBrownHover;\n}\n.ui.inverted.brown.buttons .button:focus,\n.ui.inverted.brown.button:focus {\n background-color: @lightBrownFocus;\n}\n.ui.inverted.brown.buttons .active.button,\n.ui.inverted.brown.active.button {\n background-color: @lightBrownActive;\n}\n.ui.inverted.brown.buttons .button:active,\n.ui.inverted.brown.button:active {\n background-color: @lightBrownDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.brown.basic.buttons .button,\n.ui.inverted.brown.buttons .basic.button,\n.ui.inverted.brown.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.brown.basic.buttons .button:hover,\n.ui.inverted.brown.buttons .basic.button:hover,\n.ui.inverted.brown.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important;\n color: @lightBrown !important;\n}\n.ui.inverted.brown.basic.buttons .button:focus,\n.ui.inverted.brown.basic.buttons .button:focus,\n.ui.inverted.brown.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important;\n color: @lightBrown !important;\n}\n.ui.inverted.brown.basic.buttons .active.button,\n.ui.inverted.brown.buttons .basic.active.button,\n.ui.inverted.brown.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important;\n color: @lightBrown !important;\n}\n.ui.inverted.brown.basic.buttons .button:active,\n.ui.inverted.brown.buttons .basic.button:active,\n.ui.inverted.brown.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important;\n color: @lightBrown !important;\n}\n\n/*--- Blue ---*/\n.ui.blue.buttons .button,\n.ui.blue.button {\n background-color: @blue;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.blue.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.blue.buttons .button:hover,\n.ui.blue.button:hover {\n background-color: @blueHover;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n.ui.blue.buttons .button:focus,\n.ui.blue.button:focus {\n background-color: @blueFocus;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n.ui.blue.buttons .button:active,\n.ui.blue.button:active {\n background-color: @blueDown;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n.ui.blue.buttons .active.button,\n.ui.blue.buttons .active.button:active,\n.ui.blue.active.button,\n.ui.blue.button .active.button:active {\n background-color: @blueActive;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n\n/* Basic */\n.ui.basic.blue.buttons .button,\n.ui.basic.blue.button {\n box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important;\n color: @blue !important;\n}\n.ui.basic.blue.buttons .button:hover,\n.ui.basic.blue.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;\n color: @blueHover !important;\n}\n.ui.basic.blue.buttons .button:focus,\n.ui.basic.blue.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important;\n color: @blueHover !important;\n}\n.ui.basic.blue.buttons .active.button,\n.ui.basic.blue.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important;\n color: @blueDown !important;\n}\n.ui.basic.blue.buttons .button:active,\n.ui.basic.blue.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;\n color: @blueDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.blue.buttons .button,\n.ui.inverted.blue.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;\n color: @lightBlue;\n}\n.ui.inverted.blue.buttons .button:hover,\n.ui.inverted.blue.button:hover,\n.ui.inverted.blue.buttons .button:focus,\n.ui.inverted.blue.button:focus,\n.ui.inverted.blue.buttons .button.active,\n.ui.inverted.blue.button.active,\n.ui.inverted.blue.buttons .button:active,\n.ui.inverted.blue.button:active {\n box-shadow: none !important;\n color: @lightBlueTextColor;\n}\n.ui.inverted.blue.buttons .button:hover,\n.ui.inverted.blue.button:hover {\n background-color: @lightBlueHover;\n}\n.ui.inverted.blue.buttons .button:focus,\n.ui.inverted.blue.button:focus {\n background-color: @lightBlueFocus;\n}\n.ui.inverted.blue.buttons .active.button,\n.ui.inverted.blue.active.button {\n background-color: @lightBlueActive;\n}\n.ui.inverted.blue.buttons .button:active,\n.ui.inverted.blue.button:active {\n background-color: @lightBlueDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.blue.basic.buttons .button,\n.ui.inverted.blue.buttons .basic.button,\n.ui.inverted.blue.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.blue.basic.buttons .button:hover,\n.ui.inverted.blue.buttons .basic.button:hover,\n.ui.inverted.blue.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important;\n color: @lightBlue !important;\n}\n.ui.inverted.blue.basic.buttons .button:focus,\n.ui.inverted.blue.basic.buttons .button:focus,\n.ui.inverted.blue.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important;\n color: @lightBlue !important;\n}\n.ui.inverted.blue.basic.buttons .active.button,\n.ui.inverted.blue.buttons .basic.active.button,\n.ui.inverted.blue.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important;\n color: @lightBlue !important;\n}\n.ui.inverted.blue.basic.buttons .button:active,\n.ui.inverted.blue.buttons .basic.button:active,\n.ui.inverted.blue.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important;\n color: @lightBlue !important;\n}\n\n/*--- Green ---*/\n.ui.green.buttons .button,\n.ui.green.button {\n background-color: @green;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.green.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.green.buttons .button:hover,\n.ui.green.button:hover {\n background-color: @greenHover;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n.ui.green.buttons .button:focus,\n.ui.green.button:focus {\n background-color: @greenFocus;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n.ui.green.buttons .button:active,\n.ui.green.button:active {\n background-color: @greenDown;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n.ui.green.buttons .active.button,\n.ui.green.buttons .active.button:active,\n.ui.green.active.button,\n.ui.green.button .active.button:active {\n background-color: @greenActive;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n\n\n/* Basic */\n.ui.basic.green.buttons .button,\n.ui.basic.green.button {\n box-shadow: 0px 0px 0px @basicBorderSize @green inset !important;\n color: @green !important;\n}\n.ui.basic.green.buttons .button:hover,\n.ui.basic.green.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;\n color: @greenHover !important;\n}\n.ui.basic.green.buttons .button:focus,\n.ui.basic.green.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important;\n color: @greenHover !important;\n}\n.ui.basic.green.buttons .active.button,\n.ui.basic.green.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important;\n color: @greenDown !important;\n}\n.ui.basic.green.buttons .button:active,\n.ui.basic.green.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;\n color: @greenDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.green.buttons .button,\n.ui.inverted.green.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;\n color: @lightGreen;\n}\n.ui.inverted.green.buttons .button:hover,\n.ui.inverted.green.button:hover,\n.ui.inverted.green.buttons .button:focus,\n.ui.inverted.green.button:focus,\n.ui.inverted.green.buttons .button.active,\n.ui.inverted.green.button.active,\n.ui.inverted.green.buttons .button:active,\n.ui.inverted.green.button:active {\n box-shadow: none !important;\n color: @greenTextColor;\n}\n.ui.inverted.green.buttons .button:hover,\n.ui.inverted.green.button:hover {\n background-color: @lightGreenHover;\n}\n.ui.inverted.green.buttons .button:focus,\n.ui.inverted.green.button:focus {\n background-color: @lightGreenFocus;\n}\n.ui.inverted.green.buttons .active.button,\n.ui.inverted.green.active.button {\n background-color: @lightGreenActive;\n}\n.ui.inverted.green.buttons .button:active,\n.ui.inverted.green.button:active {\n background-color: @lightGreenDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.green.basic.buttons .button,\n.ui.inverted.green.buttons .basic.button,\n.ui.inverted.green.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.green.basic.buttons .button:hover,\n.ui.inverted.green.buttons .basic.button:hover,\n.ui.inverted.green.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important;\n color: @lightGreen !important;\n}\n.ui.inverted.green.basic.buttons .button:focus,\n.ui.inverted.green.basic.buttons .button:focus,\n.ui.inverted.green.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important;\n color: @lightGreen !important;\n}\n.ui.inverted.green.basic.buttons .active.button,\n.ui.inverted.green.buttons .basic.active.button,\n.ui.inverted.green.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important;\n color: @lightGreen !important;\n}\n.ui.inverted.green.basic.buttons .button:active,\n.ui.inverted.green.buttons .basic.button:active,\n.ui.inverted.green.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important;\n color: @lightGreen !important;\n}\n\n/*--- Orange ---*/\n.ui.orange.buttons .button,\n.ui.orange.button {\n background-color: @orange;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.orange.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.orange.buttons .button:hover,\n.ui.orange.button:hover {\n background-color: @orangeHover;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n.ui.orange.buttons .button:focus,\n.ui.orange.button:focus {\n background-color: @orangeFocus;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n.ui.orange.buttons .button:active,\n.ui.orange.button:active {\n background-color: @orangeDown;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n.ui.orange.buttons .active.button,\n.ui.orange.buttons .active.button:active,\n.ui.orange.active.button,\n.ui.orange.button .active.button:active {\n background-color: @orangeActive;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n\n/* Basic */\n.ui.basic.orange.buttons .button,\n.ui.basic.orange.button {\n box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important;\n color: @orange !important;\n}\n.ui.basic.orange.buttons .button:hover,\n.ui.basic.orange.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;\n color: @orangeHover !important;\n}\n.ui.basic.orange.buttons .button:focus,\n.ui.basic.orange.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important;\n color: @orangeHover !important;\n}\n.ui.basic.orange.buttons .active.button,\n.ui.basic.orange.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important;\n color: @orangeDown !important;\n}\n.ui.basic.orange.buttons .button:active,\n.ui.basic.orange.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;\n color: @orangeDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.orange.buttons .button,\n.ui.inverted.orange.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;\n color: @lightOrange;\n}\n.ui.inverted.orange.buttons .button:hover,\n.ui.inverted.orange.button:hover,\n.ui.inverted.orange.buttons .button:focus,\n.ui.inverted.orange.button:focus,\n.ui.inverted.orange.buttons .button.active,\n.ui.inverted.orange.button.active,\n.ui.inverted.orange.buttons .button:active,\n.ui.inverted.orange.button:active {\n box-shadow: none !important;\n color: @lightOrangeTextColor;\n}\n.ui.inverted.orange.buttons .button:hover,\n.ui.inverted.orange.button:hover {\n background-color: @lightOrangeHover;\n}\n.ui.inverted.orange.buttons .button:focus,\n.ui.inverted.orange.button:focus {\n background-color: @lightOrangeFocus;\n}\n.ui.inverted.orange.buttons .active.button,\n.ui.inverted.orange.active.button {\n background-color: @lightOrangeActive;\n}\n.ui.inverted.orange.buttons .button:active,\n.ui.inverted.orange.button:active {\n background-color: @lightOrangeDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.orange.basic.buttons .button,\n.ui.inverted.orange.buttons .basic.button,\n.ui.inverted.orange.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.orange.basic.buttons .button:hover,\n.ui.inverted.orange.buttons .basic.button:hover,\n.ui.inverted.orange.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important;\n color: @lightOrange !important;\n}\n.ui.inverted.orange.basic.buttons .button:focus,\n.ui.inverted.orange.basic.buttons .button:focus,\n.ui.inverted.orange.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important;\n color: @lightOrange !important;\n}\n.ui.inverted.orange.basic.buttons .active.button,\n.ui.inverted.orange.buttons .basic.active.button,\n.ui.inverted.orange.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important;\n color: @lightOrange !important;\n}\n.ui.inverted.orange.basic.buttons .button:active,\n.ui.inverted.orange.buttons .basic.button:active,\n.ui.inverted.orange.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important;\n color: @lightOrange !important;\n}\n\n/*--- Pink ---*/\n.ui.pink.buttons .button,\n.ui.pink.button {\n background-color: @pink;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.pink.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.pink.buttons .button:hover,\n.ui.pink.button:hover {\n background-color: @pinkHover;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n.ui.pink.buttons .button:focus,\n.ui.pink.button:focus {\n background-color: @pinkFocus;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n.ui.pink.buttons .button:active,\n.ui.pink.button:active {\n background-color: @pinkDown;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n.ui.pink.buttons .active.button,\n.ui.pink.buttons .active.button:active,\n.ui.pink.active.button,\n.ui.pink.button .active.button:active {\n background-color: @pinkActive;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n\n/* Basic */\n.ui.basic.pink.buttons .button,\n.ui.basic.pink.button {\n box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important;\n color: @pink !important;\n}\n.ui.basic.pink.buttons .button:hover,\n.ui.basic.pink.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;\n color: @pinkHover !important;\n}\n.ui.basic.pink.buttons .button:focus,\n.ui.basic.pink.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important;\n color: @pinkHover !important;\n}\n.ui.basic.pink.buttons .active.button,\n.ui.basic.pink.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important;\n color: @pinkDown !important;\n}\n.ui.basic.pink.buttons .button:active,\n.ui.basic.pink.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;\n color: @pinkDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.pink.buttons .button,\n.ui.inverted.pink.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;\n color: @lightPink;\n}\n.ui.inverted.pink.buttons .button:hover,\n.ui.inverted.pink.button:hover,\n.ui.inverted.pink.buttons .button:focus,\n.ui.inverted.pink.button:focus,\n.ui.inverted.pink.buttons .button.active,\n.ui.inverted.pink.button.active,\n.ui.inverted.pink.buttons .button:active,\n.ui.inverted.pink.button:active {\n box-shadow: none !important;\n color: @lightPinkTextColor;\n}\n.ui.inverted.pink.buttons .button:hover,\n.ui.inverted.pink.button:hover {\n background-color: @lightPinkHover;\n}\n.ui.inverted.pink.buttons .button:focus,\n.ui.inverted.pink.button:focus {\n background-color: @lightPinkFocus;\n}\n.ui.inverted.pink.buttons .active.button,\n.ui.inverted.pink.active.button {\n background-color: @lightPinkActive;\n}\n.ui.inverted.pink.buttons .button:active,\n.ui.inverted.pink.button:active {\n background-color: @lightPinkDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.pink.basic.buttons .button,\n.ui.inverted.pink.buttons .basic.button,\n.ui.inverted.pink.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.pink.basic.buttons .button:hover,\n.ui.inverted.pink.buttons .basic.button:hover,\n.ui.inverted.pink.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important;\n color: @lightPink !important;\n}\n.ui.inverted.pink.basic.buttons .button:focus,\n.ui.inverted.pink.basic.buttons .button:focus,\n.ui.inverted.pink.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important;\n color: @lightPink !important;\n}\n.ui.inverted.pink.basic.buttons .active.button,\n.ui.inverted.pink.buttons .basic.active.button,\n.ui.inverted.pink.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important;\n color: @lightPink !important;\n}\n.ui.inverted.pink.basic.buttons .button:active,\n.ui.inverted.pink.buttons .basic.button:active,\n.ui.inverted.pink.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important;\n color: @lightPink !important;\n}\n\n\n/*--- Violet ---*/\n.ui.violet.buttons .button,\n.ui.violet.button {\n background-color: @violet;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.violet.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.violet.buttons .button:hover,\n.ui.violet.button:hover {\n background-color: @violetHover;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n.ui.violet.buttons .button:focus,\n.ui.violet.button:focus {\n background-color: @violetFocus;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n.ui.violet.buttons .button:active,\n.ui.violet.button:active {\n background-color: @violetDown;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n.ui.violet.buttons .active.button,\n.ui.violet.buttons .active.button:active,\n.ui.violet.active.button,\n.ui.violet.button .active.button:active {\n background-color: @violetActive;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n\n/* Basic */\n.ui.basic.violet.buttons .button,\n.ui.basic.violet.button {\n box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important;\n color: @violet !important;\n}\n.ui.basic.violet.buttons .button:hover,\n.ui.basic.violet.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important;\n color: @violetHover !important;\n}\n.ui.basic.violet.buttons .button:focus,\n.ui.basic.violet.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important;\n color: @violetHover !important;\n}\n.ui.basic.violet.buttons .active.button,\n.ui.basic.violet.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important;\n color: @violetDown !important;\n}\n.ui.basic.violet.buttons .button:active,\n.ui.basic.violet.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important;\n color: @violetDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.violet.buttons .button,\n.ui.inverted.violet.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important;\n color: @lightViolet;\n}\n.ui.inverted.violet.buttons .button:hover,\n.ui.inverted.violet.button:hover,\n.ui.inverted.violet.buttons .button:focus,\n.ui.inverted.violet.button:focus,\n.ui.inverted.violet.buttons .button.active,\n.ui.inverted.violet.button.active,\n.ui.inverted.violet.buttons .button:active,\n.ui.inverted.violet.button:active {\n box-shadow: none !important;\n color: @lightVioletTextColor;\n}\n.ui.inverted.violet.buttons .button:hover,\n.ui.inverted.violet.button:hover {\n background-color: @lightVioletHover;\n}\n.ui.inverted.violet.buttons .button:focus,\n.ui.inverted.violet.button:focus {\n background-color: @lightVioletFocus;\n}\n.ui.inverted.violet.buttons .active.button,\n.ui.inverted.violet.active.button {\n background-color: @lightVioletActive;\n}\n.ui.inverted.violet.buttons .button:active,\n.ui.inverted.violet.button:active {\n background-color: @lightVioletDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.violet.basic.buttons .button,\n.ui.inverted.violet.buttons .basic.button,\n.ui.inverted.violet.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.violet.basic.buttons .button:hover,\n.ui.inverted.violet.buttons .basic.button:hover,\n.ui.inverted.violet.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important;\n color: @lightViolet !important;\n}\n.ui.inverted.violet.basic.buttons .button:focus,\n.ui.inverted.violet.basic.buttons .button:focus,\n.ui.inverted.violet.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important;\n color: @lightViolet !important;\n}\n.ui.inverted.violet.basic.buttons .active.button,\n.ui.inverted.violet.buttons .basic.active.button,\n.ui.inverted.violet.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important;\n color: @lightViolet !important;\n}\n.ui.inverted.violet.basic.buttons .button:active,\n.ui.inverted.violet.buttons .basic.button:active,\n.ui.inverted.violet.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important;\n color: @lightViolet !important;\n}\n\n/*--- Purple ---*/\n.ui.purple.buttons .button,\n.ui.purple.button {\n background-color: @purple;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.purple.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.purple.buttons .button:hover,\n.ui.purple.button:hover {\n background-color: @purpleHover;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n.ui.purple.buttons .button:focus,\n.ui.purple.button:focus {\n background-color: @purpleFocus;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n.ui.purple.buttons .button:active,\n.ui.purple.button:active {\n background-color: @purpleDown;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n.ui.purple.buttons .active.button,\n.ui.purple.buttons .active.button:active,\n.ui.purple.active.button,\n.ui.purple.button .active.button:active {\n background-color: @purpleActive;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n\n/* Basic */\n.ui.basic.purple.buttons .button,\n.ui.basic.purple.button {\n box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important;\n color: @purple !important;\n}\n.ui.basic.purple.buttons .button:hover,\n.ui.basic.purple.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;\n color: @purpleHover !important;\n}\n.ui.basic.purple.buttons .button:focus,\n.ui.basic.purple.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important;\n color: @purpleHover !important;\n}\n.ui.basic.purple.buttons .active.button,\n.ui.basic.purple.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important;\n color: @purpleDown !important;\n}\n.ui.basic.purple.buttons .button:active,\n.ui.basic.purple.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;\n color: @purpleDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.purple.buttons .button,\n.ui.inverted.purple.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;\n color: @lightPurple;\n}\n.ui.inverted.purple.buttons .button:hover,\n.ui.inverted.purple.button:hover,\n.ui.inverted.purple.buttons .button:focus,\n.ui.inverted.purple.button:focus,\n.ui.inverted.purple.buttons .button.active,\n.ui.inverted.purple.button.active,\n.ui.inverted.purple.buttons .button:active,\n.ui.inverted.purple.button:active {\n box-shadow: none !important;\n color: @lightPurpleTextColor;\n}\n.ui.inverted.purple.buttons .button:hover,\n.ui.inverted.purple.button:hover {\n background-color: @lightPurpleHover;\n}\n.ui.inverted.purple.buttons .button:focus,\n.ui.inverted.purple.button:focus {\n background-color: @lightPurpleFocus;\n}\n.ui.inverted.purple.buttons .active.button,\n.ui.inverted.purple.active.button {\n background-color: @lightPurpleActive;\n}\n.ui.inverted.purple.buttons .button:active,\n.ui.inverted.purple.button:active {\n background-color: @lightPurpleDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.purple.basic.buttons .button,\n.ui.inverted.purple.buttons .basic.button,\n.ui.inverted.purple.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.purple.basic.buttons .button:hover,\n.ui.inverted.purple.buttons .basic.button:hover,\n.ui.inverted.purple.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important;\n color: @lightPurple !important;\n}\n.ui.inverted.purple.basic.buttons .button:focus,\n.ui.inverted.purple.basic.buttons .button:focus,\n.ui.inverted.purple.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important;\n color: @lightPurple !important;\n}\n.ui.inverted.purple.basic.buttons .active.button,\n.ui.inverted.purple.buttons .basic.active.button,\n.ui.inverted.purple.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important;\n color: @lightPurple !important;\n}\n.ui.inverted.purple.basic.buttons .button:active,\n.ui.inverted.purple.buttons .basic.button:active,\n.ui.inverted.purple.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important;\n color: @lightPurple !important;\n}\n\n/*--- Red ---*/\n.ui.red.buttons .button,\n.ui.red.button {\n background-color: @red;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.red.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.red.buttons .button:hover,\n.ui.red.button:hover {\n background-color: @redHover;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n.ui.red.buttons .button:focus,\n.ui.red.button:focus {\n background-color: @redFocus;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n.ui.red.buttons .button:active,\n.ui.red.button:active {\n background-color: @redDown;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n.ui.red.buttons .active.button,\n.ui.red.buttons .active.button:active,\n.ui.red.active.button,\n.ui.red.button .active.button:active {\n background-color: @redActive;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n\n/* Basic */\n.ui.basic.red.buttons .button,\n.ui.basic.red.button {\n box-shadow: 0px 0px 0px @basicBorderSize @red inset !important;\n color: @red !important;\n}\n.ui.basic.red.buttons .button:hover,\n.ui.basic.red.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;\n color: @redHover !important;\n}\n.ui.basic.red.buttons .button:focus,\n.ui.basic.red.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important;\n color: @redHover !important;\n}\n.ui.basic.red.buttons .active.button,\n.ui.basic.red.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important;\n color: @redDown !important;\n}\n.ui.basic.red.buttons .button:active,\n.ui.basic.red.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;\n color: @redDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.red.buttons .button,\n.ui.inverted.red.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;\n color: @lightRed;\n}\n.ui.inverted.red.buttons .button:hover,\n.ui.inverted.red.button:hover,\n.ui.inverted.red.buttons .button:focus,\n.ui.inverted.red.button:focus,\n.ui.inverted.red.buttons .button.active,\n.ui.inverted.red.button.active,\n.ui.inverted.red.buttons .button:active,\n.ui.inverted.red.button:active {\n box-shadow: none !important;\n color: @lightRedTextColor;\n}\n.ui.inverted.red.buttons .button:hover,\n.ui.inverted.red.button:hover {\n background-color: @lightRedHover;\n}\n.ui.inverted.red.buttons .button:focus,\n.ui.inverted.red.button:focus {\n background-color: @lightRedFocus;\n}\n.ui.inverted.red.buttons .active.button,\n.ui.inverted.red.active.button {\n background-color: @lightRedActive;\n}\n.ui.inverted.red.buttons .button:active,\n.ui.inverted.red.button:active {\n background-color: @lightRedDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.red.basic.buttons .button,\n.ui.inverted.red.buttons .basic.button,\n.ui.inverted.red.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.red.basic.buttons .button:hover,\n.ui.inverted.red.buttons .basic.button:hover,\n.ui.inverted.red.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important;\n color: @lightRed !important;\n}\n.ui.inverted.red.basic.buttons .button:focus,\n.ui.inverted.red.basic.buttons .button:focus,\n.ui.inverted.red.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important;\n color: @lightRed !important;\n}\n.ui.inverted.red.basic.buttons .active.button,\n.ui.inverted.red.buttons .basic.active.button,\n.ui.inverted.red.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important;\n color: @lightRed !important;\n}\n.ui.inverted.red.basic.buttons .button:active,\n.ui.inverted.red.buttons .basic.button:active,\n.ui.inverted.red.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important;\n color: @lightRed !important;\n}\n\n\n/*--- Teal ---*/\n.ui.teal.buttons .button,\n.ui.teal.button {\n background-color: @teal;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.teal.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.teal.buttons .button:hover,\n.ui.teal.button:hover {\n background-color: @tealHover;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n.ui.teal.buttons .button:focus,\n.ui.teal.button:focus {\n background-color: @tealFocus;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n.ui.teal.buttons .button:active,\n.ui.teal.button:active {\n background-color: @tealDown;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n.ui.teal.buttons .active.button,\n.ui.teal.buttons .active.button:active,\n.ui.teal.active.button,\n.ui.teal.button .active.button:active {\n background-color: @tealActive;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n\n/* Basic */\n.ui.basic.teal.buttons .button,\n.ui.basic.teal.button {\n box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important;\n color: @teal !important;\n}\n.ui.basic.teal.buttons .button:hover,\n.ui.basic.teal.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;\n color: @tealHover !important;\n}\n.ui.basic.teal.buttons .button:focus,\n.ui.basic.teal.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important;\n color: @tealHover !important;\n}\n.ui.basic.teal.buttons .active.button,\n.ui.basic.teal.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important;\n color: @tealDown !important;\n}\n.ui.basic.teal.buttons .button:active,\n.ui.basic.teal.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;\n color: @tealDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.teal.buttons .button,\n.ui.inverted.teal.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;\n color: @lightTeal;\n}\n.ui.inverted.teal.buttons .button:hover,\n.ui.inverted.teal.button:hover,\n.ui.inverted.teal.buttons .button:focus,\n.ui.inverted.teal.button:focus,\n.ui.inverted.teal.buttons .button.active,\n.ui.inverted.teal.button.active,\n.ui.inverted.teal.buttons .button:active,\n.ui.inverted.teal.button:active {\n box-shadow: none !important;\n color: @lightTealTextColor;\n}\n.ui.inverted.teal.buttons .button:hover,\n.ui.inverted.teal.button:hover {\n background-color: @lightTealHover;\n}\n.ui.inverted.teal.buttons .button:focus,\n.ui.inverted.teal.button:focus {\n background-color: @lightTealFocus;\n}\n.ui.inverted.teal.buttons .active.button,\n.ui.inverted.teal.active.button {\n background-color: @lightTealActive;\n}\n.ui.inverted.teal.buttons .button:active,\n.ui.inverted.teal.button:active {\n background-color: @lightTealDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.teal.basic.buttons .button,\n.ui.inverted.teal.buttons .basic.button,\n.ui.inverted.teal.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.teal.basic.buttons .button:hover,\n.ui.inverted.teal.buttons .basic.button:hover,\n.ui.inverted.teal.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important;\n color: @lightTeal !important;\n}\n.ui.inverted.teal.basic.buttons .button:focus,\n.ui.inverted.teal.basic.buttons .button:focus,\n.ui.inverted.teal.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important;\n color: @lightTeal !important;\n}\n.ui.inverted.teal.basic.buttons .active.button,\n.ui.inverted.teal.buttons .basic.active.button,\n.ui.inverted.teal.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important;\n color: @lightTeal !important;\n}\n.ui.inverted.teal.basic.buttons .button:active,\n.ui.inverted.teal.buttons .basic.button:active,\n.ui.inverted.teal.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important;\n color: @lightTeal !important;\n}\n\n\n/*--- Olive ---*/\n.ui.olive.buttons .button,\n.ui.olive.button {\n background-color: @olive;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.olive.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.olive.buttons .button:hover,\n.ui.olive.button:hover {\n background-color: @oliveHover;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n.ui.olive.buttons .button:focus,\n.ui.olive.button:focus {\n background-color: @oliveFocus;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n.ui.olive.buttons .button:active,\n.ui.olive.button:active {\n background-color: @oliveDown;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n.ui.olive.buttons .active.button,\n.ui.olive.buttons .active.button:active,\n.ui.olive.active.button,\n.ui.olive.button .active.button:active {\n background-color: @oliveActive;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n\n/* Basic */\n.ui.basic.olive.buttons .button,\n.ui.basic.olive.button {\n box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important;\n color: @olive !important;\n}\n.ui.basic.olive.buttons .button:hover,\n.ui.basic.olive.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important;\n color: @oliveHover !important;\n}\n.ui.basic.olive.buttons .button:focus,\n.ui.basic.olive.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important;\n color: @oliveHover !important;\n}\n.ui.basic.olive.buttons .active.button,\n.ui.basic.olive.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important;\n color: @oliveDown !important;\n}\n.ui.basic.olive.buttons .button:active,\n.ui.basic.olive.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important;\n color: @oliveDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.olive.buttons .button,\n.ui.inverted.olive.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important;\n color: @lightOlive;\n}\n.ui.inverted.olive.buttons .button:hover,\n.ui.inverted.olive.button:hover,\n.ui.inverted.olive.buttons .button:focus,\n.ui.inverted.olive.button:focus,\n.ui.inverted.olive.buttons .button.active,\n.ui.inverted.olive.button.active,\n.ui.inverted.olive.buttons .button:active,\n.ui.inverted.olive.button:active {\n box-shadow: none !important;\n color: @lightOliveTextColor;\n}\n.ui.inverted.olive.buttons .button:hover,\n.ui.inverted.olive.button:hover {\n background-color: @lightOliveHover;\n}\n.ui.inverted.olive.buttons .button:focus,\n.ui.inverted.olive.button:focus {\n background-color: @lightOliveFocus;\n}\n.ui.inverted.olive.buttons .active.button,\n.ui.inverted.olive.active.button {\n background-color: @lightOliveActive;\n}\n.ui.inverted.olive.buttons .button:active,\n.ui.inverted.olive.button:active {\n background-color: @lightOliveDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.olive.basic.buttons .button,\n.ui.inverted.olive.buttons .basic.button,\n.ui.inverted.olive.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.olive.basic.buttons .button:hover,\n.ui.inverted.olive.buttons .basic.button:hover,\n.ui.inverted.olive.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important;\n color: @lightOlive !important;\n}\n.ui.inverted.olive.basic.buttons .button:focus,\n.ui.inverted.olive.basic.buttons .button:focus,\n.ui.inverted.olive.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important;\n color: @lightOlive !important;\n}\n.ui.inverted.olive.basic.buttons .active.button,\n.ui.inverted.olive.buttons .basic.active.button,\n.ui.inverted.olive.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important;\n color: @lightOlive !important;\n}\n.ui.inverted.olive.basic.buttons .button:active,\n.ui.inverted.olive.buttons .basic.button:active,\n.ui.inverted.olive.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important;\n color: @lightOlive !important;\n}\n\n/*--- Yellow ---*/\n.ui.yellow.buttons .button,\n.ui.yellow.button {\n background-color: @yellow;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.yellow.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.yellow.buttons .button:hover,\n.ui.yellow.button:hover {\n background-color: @yellowHover;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n.ui.yellow.buttons .button:focus,\n.ui.yellow.button:focus {\n background-color: @yellowFocus;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n.ui.yellow.buttons .button:active,\n.ui.yellow.button:active {\n background-color: @yellowDown;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n.ui.yellow.buttons .active.button,\n.ui.yellow.buttons .active.button:active,\n.ui.yellow.active.button,\n.ui.yellow.button .active.button:active {\n background-color: @yellowActive;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n\n/* Basic */\n.ui.basic.yellow.buttons .button,\n.ui.basic.yellow.button {\n box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important;\n color: @yellow !important;\n}\n.ui.basic.yellow.buttons .button:hover,\n.ui.basic.yellow.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;\n color: @yellowHover !important;\n}\n.ui.basic.yellow.buttons .button:focus,\n.ui.basic.yellow.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important;\n color: @yellowHover !important;\n}\n.ui.basic.yellow.buttons .active.button,\n.ui.basic.yellow.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important;\n color: @yellowDown !important;\n}\n.ui.basic.yellow.buttons .button:active,\n.ui.basic.yellow.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;\n color: @yellowDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.yellow.buttons .button,\n.ui.inverted.yellow.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;\n color: @lightYellow;\n}\n.ui.inverted.yellow.buttons .button:hover,\n.ui.inverted.yellow.button:hover,\n.ui.inverted.yellow.buttons .button:focus,\n.ui.inverted.yellow.button:focus,\n.ui.inverted.yellow.buttons .button.active,\n.ui.inverted.yellow.button.active,\n.ui.inverted.yellow.buttons .button:active,\n.ui.inverted.yellow.button:active {\n box-shadow: none !important;\n color: @lightYellowTextColor;\n}\n.ui.inverted.yellow.buttons .button:hover,\n.ui.inverted.yellow.button:hover {\n background-color: @lightYellowHover;\n}\n.ui.inverted.yellow.buttons .button:focus,\n.ui.inverted.yellow.button:focus {\n background-color: @lightYellowFocus;\n}\n.ui.inverted.yellow.buttons .active.button,\n.ui.inverted.yellow.active.button {\n background-color: @lightYellowActive;\n}\n.ui.inverted.yellow.buttons .button:active,\n.ui.inverted.yellow.button:active {\n background-color: @lightYellowDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.yellow.basic.buttons .button,\n.ui.inverted.yellow.buttons .basic.button,\n.ui.inverted.yellow.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.yellow.basic.buttons .button:hover,\n.ui.inverted.yellow.buttons .basic.button:hover,\n.ui.inverted.yellow.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important;\n color: @lightYellow !important;\n}\n.ui.inverted.yellow.basic.buttons .button:focus,\n.ui.inverted.yellow.basic.buttons .button:focus,\n.ui.inverted.yellow.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important;\n color: @lightYellow !important;\n}\n.ui.inverted.yellow.basic.buttons .active.button,\n.ui.inverted.yellow.buttons .basic.active.button,\n.ui.inverted.yellow.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important;\n color: @lightYellow !important;\n}\n.ui.inverted.yellow.basic.buttons .button:active,\n.ui.inverted.yellow.buttons .basic.button:active,\n.ui.inverted.yellow.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important;\n color: @lightYellow !important;\n}\n\n\n/*-------------------\n Primary\n--------------------*/\n\n/*--- Standard ---*/\n.ui.primary.buttons .button,\n.ui.primary.button {\n background-color: @primaryColor;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.primary.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.primary.buttons .button:hover,\n.ui.primary.button:hover {\n background-color: @primaryColorHover;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n.ui.primary.buttons .button:focus,\n.ui.primary.button:focus {\n background-color: @primaryColorFocus;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n.ui.primary.buttons .button:active,\n.ui.primary.button:active {\n background-color: @primaryColorDown;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n.ui.primary.buttons .active.button,\n.ui.primary.buttons .active.button:active,\n.ui.primary.active.button,\n.ui.primary.button .active.button:active {\n background-color: @primaryColorActive;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n\n/* Basic */\n.ui.basic.primary.buttons .button,\n.ui.basic.primary.button {\n box-shadow: 0px 0px 0px @basicBorderSize @primaryColor inset !important;\n color: @primaryColor !important;\n}\n.ui.basic.primary.buttons .button:hover,\n.ui.basic.primary.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorHover inset !important;\n color: @primaryColorHover !important;\n}\n.ui.basic.primary.buttons .button:focus,\n.ui.basic.primary.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorFocus inset !important;\n color: @primaryColorHover !important;\n}\n.ui.basic.primary.buttons .active.button,\n.ui.basic.primary.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorActive inset !important;\n color: @primaryColorDown !important;\n}\n.ui.basic.primary.buttons .button:active,\n.ui.basic.primary.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorDown inset !important;\n color: @primaryColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.primary.buttons .button,\n.ui.inverted.primary.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColor inset !important;\n color: @lightPrimaryColor;\n}\n.ui.inverted.primary.buttons .button:hover,\n.ui.inverted.primary.button:hover,\n.ui.inverted.primary.buttons .button:focus,\n.ui.inverted.primary.button:focus,\n.ui.inverted.primary.buttons .button.active,\n.ui.inverted.primary.button.active,\n.ui.inverted.primary.buttons .button:active,\n.ui.inverted.primary.button:active {\n box-shadow: none !important;\n color: @lightPrimaryTextColor;\n}\n.ui.inverted.primary.buttons .button:hover,\n.ui.inverted.primary.button:hover {\n background-color: @lightPrimaryColorHover;\n}\n.ui.inverted.primary.buttons .button:focus,\n.ui.inverted.primary.button:focus {\n background-color: @lightPrimaryColorFocus;\n}\n.ui.inverted.primary.buttons .active.button,\n.ui.inverted.primary.active.button {\n background-color: @lightPrimaryColorActive;\n}\n.ui.inverted.primary.buttons .button:active,\n.ui.inverted.primary.button:active {\n background-color: @lightPrimaryColorDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.primary.basic.buttons .button,\n.ui.inverted.primary.buttons .basic.button,\n.ui.inverted.primary.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.primary.basic.buttons .button:hover,\n.ui.inverted.primary.buttons .basic.button:hover,\n.ui.inverted.primary.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorHover inset !important;\n color: @lightPrimaryColor !important;\n}\n.ui.inverted.primary.basic.buttons .button:focus,\n.ui.inverted.primary.basic.buttons .button:focus,\n.ui.inverted.primary.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorFocus inset !important;\n color: @lightPrimaryColor !important;\n}\n.ui.inverted.primary.basic.buttons .active.button,\n.ui.inverted.primary.buttons .basic.active.button,\n.ui.inverted.primary.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorActive inset !important;\n color: @lightPrimaryColor !important;\n}\n.ui.inverted.primary.basic.buttons .button:active,\n.ui.inverted.primary.buttons .basic.button:active,\n.ui.inverted.primary.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorDown inset !important;\n color: @lightPrimaryColor !important;\n}\n\n/*-------------------\n Secondary\n--------------------*/\n\n/* Standard */\n.ui.secondary.buttons .button,\n.ui.secondary.button {\n background-color: @secondaryColor;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.secondary.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.secondary.buttons .button:hover,\n.ui.secondary.button:hover {\n background-color: @secondaryColorHover;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n.ui.secondary.buttons .button:focus,\n.ui.secondary.button:focus {\n background-color: @secondaryColorFocus;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n.ui.secondary.buttons .button:active,\n.ui.secondary.button:active {\n background-color: @secondaryColorDown;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n.ui.secondary.buttons .active.button,\n.ui.secondary.buttons .active.button:active,\n.ui.secondary.active.button,\n.ui.secondary.button .active.button:active {\n background-color: @secondaryColorActive;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n\n/* Basic */\n.ui.basic.secondary.buttons .button,\n.ui.basic.secondary.button {\n box-shadow: 0px 0px 0px @basicBorderSize @secondaryColor inset !important;\n color: @secondaryColor !important;\n}\n.ui.basic.secondary.buttons .button:hover,\n.ui.basic.secondary.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorHover inset !important;\n color: @secondaryColorHover !important;\n}\n.ui.basic.secondary.buttons .button:focus,\n.ui.basic.secondary.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorFocus inset !important;\n color: @secondaryColorHover !important;\n}\n.ui.basic.secondary.buttons .active.button,\n.ui.basic.secondary.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorActive inset !important;\n color: @secondaryColorDown !important;\n}\n.ui.basic.secondary.buttons .button:active,\n.ui.basic.secondary.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorDown inset !important;\n color: @secondaryColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.secondary.buttons .button,\n.ui.inverted.secondary.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColor inset !important;\n color: @lightSecondaryColor;\n}\n.ui.inverted.secondary.buttons .button:hover,\n.ui.inverted.secondary.button:hover,\n.ui.inverted.secondary.buttons .button:focus,\n.ui.inverted.secondary.button:focus,\n.ui.inverted.secondary.buttons .button.active,\n.ui.inverted.secondary.button.active,\n.ui.inverted.secondary.buttons .button:active,\n.ui.inverted.secondary.button:active {\n box-shadow: none !important;\n color: @lightSecondaryTextColor;\n}\n.ui.inverted.secondary.buttons .button:hover,\n.ui.inverted.secondary.button:hover {\n background-color: @lightSecondaryColorHover;\n}\n.ui.inverted.secondary.buttons .button:focus,\n.ui.inverted.secondary.button:focus {\n background-color: @lightSecondaryColorFocus;\n}\n.ui.inverted.secondary.buttons .active.button,\n.ui.inverted.secondary.active.button {\n background-color: @lightSecondaryColorActive;\n}\n.ui.inverted.secondary.buttons .button:active,\n.ui.inverted.secondary.button:active {\n background-color: @lightSecondaryColorDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.secondary.basic.buttons .button,\n.ui.inverted.secondary.buttons .basic.button,\n.ui.inverted.secondary.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.secondary.basic.buttons .button:hover,\n.ui.inverted.secondary.buttons .basic.button:hover,\n.ui.inverted.secondary.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorHover inset !important;\n color: @lightSecondaryColor !important;\n}\n.ui.inverted.secondary.basic.buttons .button:focus,\n.ui.inverted.secondary.basic.buttons .button:focus,\n.ui.inverted.secondary.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorFocus inset !important;\n color: @lightSecondaryColor !important;\n}\n.ui.inverted.secondary.basic.buttons .active.button,\n.ui.inverted.secondary.buttons .basic.active.button,\n.ui.inverted.secondary.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorActive inset !important;\n color: @lightSecondaryColor !important;\n}\n.ui.inverted.secondary.basic.buttons .button:active,\n.ui.inverted.secondary.buttons .basic.button:active,\n.ui.inverted.secondary.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorDown inset !important;\n color: @lightSecondaryColor !important;\n}\n\n/*---------------\n Positive\n----------------*/\n\n/* Standard */\n.ui.positive.buttons .button,\n.ui.positive.button {\n background-color: @positiveColor;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.positive.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.positive.buttons .button:hover,\n.ui.positive.button:hover {\n background-color: @positiveColorHover;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n.ui.positive.buttons .button:focus,\n.ui.positive.button:focus {\n background-color: @positiveColorFocus;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n.ui.positive.buttons .button:active,\n.ui.positive.button:active {\n background-color: @positiveColorDown;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n.ui.positive.buttons .active.button,\n.ui.positive.buttons .active.button:active,\n.ui.positive.active.button,\n.ui.positive.button .active.button:active {\n background-color: @positiveColorActive;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n\n/* Basic */\n.ui.basic.positive.buttons .button,\n.ui.basic.positive.button {\n box-shadow: 0px 0px 0px @basicBorderSize @positiveColor inset !important;\n color: @positiveColor !important;\n}\n.ui.basic.positive.buttons .button:hover,\n.ui.basic.positive.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorHover inset !important;\n color: @positiveColorHover !important;\n}\n.ui.basic.positive.buttons .button:focus,\n.ui.basic.positive.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorFocus inset !important;\n color: @positiveColorHover !important;\n}\n.ui.basic.positive.buttons .active.button,\n.ui.basic.positive.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorActive inset !important;\n color: @positiveColorDown !important;\n}\n.ui.basic.positive.buttons .button:active,\n.ui.basic.positive.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorDown inset !important;\n color: @positiveColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/*---------------\n Negative\n----------------*/\n\n/* Standard */\n.ui.negative.buttons .button,\n.ui.negative.button {\n background-color: @negativeColor;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.negative.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.negative.buttons .button:hover,\n.ui.negative.button:hover {\n background-color: @negativeColorHover;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n.ui.negative.buttons .button:focus,\n.ui.negative.button:focus {\n background-color: @negativeColorFocus;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n.ui.negative.buttons .button:active,\n.ui.negative.button:active {\n background-color: @negativeColorDown;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n.ui.negative.buttons .active.button,\n.ui.negative.buttons .active.button:active,\n.ui.negative.active.button,\n.ui.negative.button .active.button:active {\n background-color: @negativeColorActive;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n\n/* Basic */\n.ui.basic.negative.buttons .button,\n.ui.basic.negative.button {\n box-shadow: 0px 0px 0px @basicBorderSize @negativeColor inset !important;\n color: @negativeColor !important;\n}\n.ui.basic.negative.buttons .button:hover,\n.ui.basic.negative.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorHover inset !important;\n color: @negativeColorHover !important;\n}\n.ui.basic.negative.buttons .button:focus,\n.ui.basic.negative.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorFocus inset !important;\n color: @negativeColorHover !important;\n}\n.ui.basic.negative.buttons .active.button,\n.ui.basic.negative.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorActive inset !important;\n color: @negativeColorDown !important;\n}\n.ui.basic.negative.buttons .button:active,\n.ui.basic.negative.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorDown inset !important;\n color: @negativeColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/*******************************\n Groups\n*******************************/\n\n.ui.buttons {\n display: inline-flex;\n flex-direction: row;\n font-size: 0em;\n vertical-align: baseline;\n margin: @verticalMargin @horizontalMargin 0em 0em;\n}\n.ui.buttons:not(.basic):not(.inverted) {\n box-shadow: @groupBoxShadow;\n}\n\n/* Clearfix */\n.ui.buttons:after {\n content: \".\";\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n/* Standard Group */\n.ui.buttons .button {\n flex: 1 0 auto;\n margin: 0em;\n border-radius: 0em;\n margin: @groupButtonOffset;\n}\n.ui.buttons > .ui.button:not(.basic):not(.inverted),\n.ui.buttons:not(.basic):not(.inverted) > .button {\n box-shadow: @groupButtonBoxShadow;\n}\n\n.ui.buttons .button:first-child {\n border-left: none;\n margin-left: 0em;\n border-top-left-radius: @borderRadius;\n border-bottom-left-radius: @borderRadius;\n}\n.ui.buttons .button:last-child {\n border-top-right-radius: @borderRadius;\n border-bottom-right-radius: @borderRadius;\n}\n\n/* Vertical Style */\n.ui.vertical.buttons {\n display: inline-flex;\n flex-direction: column;\n}\n.ui.vertical.buttons .button {\n display: block;\n float: none;\n width: 100%;\n margin: @verticalGroupOffset;\n box-shadow: @verticalBoxShadow;\n border-radius: 0em;\n}\n.ui.vertical.buttons .button:first-child {\n border-top-left-radius: @borderRadius;\n border-top-right-radius: @borderRadius;\n}\n.ui.vertical.buttons .button:last-child {\n margin-bottom: 0px;\n border-bottom-left-radius: @borderRadius;\n border-bottom-right-radius: @borderRadius;\n}\n.ui.vertical.buttons .button:only-child {\n border-radius: @borderRadius;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/container.less", "content": "/*!\n * # Semantic UI - Container\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'container';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Container\n*******************************/\n\n/* All Sizes */\n.ui.container {\n display: block;\n max-width: @maxWidth !important;\n}\n\n/* Mobile */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.container {\n width: @mobileWidth !important;\n margin-left: @mobileGutter !important;\n margin-right: @mobileGutter !important;\n }\n .ui.grid.container {\n width: @mobileGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @mobileRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @mobileVeryRelaxedGridWidth !important;\n }\n}\n\n/* Tablet */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.container {\n width: @tabletWidth;\n margin-left: @tabletGutter !important;\n margin-right: @tabletGutter !important;\n }\n .ui.grid.container {\n width: @tabletGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @tabletRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @tabletVeryRelaxedGridWidth !important;\n }\n}\n\n/* Small Monitor */\n@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {\n .ui.container {\n width: @computerWidth;\n margin-left: @computerGutter !important;\n margin-right: @computerGutter !important;\n }\n .ui.grid.container {\n width: @computerGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @computerRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @computerVeryRelaxedGridWidth !important;\n }\n}\n\n/* Large Monitor */\n@media only screen and (min-width: @largeMonitorBreakpoint) {\n .ui.container {\n width: @largeMonitorWidth;\n margin-left: @largeMonitorGutter !important;\n margin-right: @largeMonitorGutter !important;\n }\n .ui.grid.container {\n width: @largeMonitorGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @largeMonitorRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @largeMonitorVeryRelaxedGridWidth !important;\n }\n}\n\n/*******************************\n Types\n*******************************/\n\n\n/* Text Container */\n.ui.text.container {\n font-family: @textFontFamily;\n max-width: @textWidth !important;\n line-height: @textLineHeight;\n}\n\n.ui.text.container {\n font-size: @textSize;\n}\n\n/* Fluid */\n.ui.fluid.container {\n width: 100%;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n.ui[class*=\"left aligned\"].container {\n text-align: left;\n}\n.ui[class*=\"center aligned\"].container {\n text-align: center;\n}\n.ui[class*=\"right aligned\"].container {\n text-align: right;\n}\n.ui.justified.container {\n text-align: justify;\n hyphens: auto;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/divider.less", "content": "/*!\n * # Semantic UI - Divider\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'divider';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Divider\n*******************************/\n\n.ui.divider {\n margin: @margin;\n\n line-height: 1;\n height: 0em;\n\n font-weight: @fontWeight;\n text-transform: @textTransform;\n letter-spacing: @letterSpacing;\n color: @color;\n\n user-select: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/*--------------\n Basic\n---------------*/\n\n.ui.divider:not(.vertical):not(.horizontal) {\n border-top: @shadowWidth solid @shadowColor;\n border-bottom: @highlightWidth solid @highlightColor;\n}\n\n/*--------------\n Coupling\n---------------*/\n\n/* Allow divider between each column row */\n.ui.grid > .column + .divider,\n.ui.grid > .row > .column + .divider {\n left: auto;\n}\n\n/*--------------\n Horizontal\n---------------*/\n\n.ui.horizontal.divider {\n display: table;\n white-space: nowrap;\n\n height: auto;\n margin: @horizontalMargin;\n line-height: 1;\n text-align: center;\n}\n\n.ui.horizontal.divider:before,\n.ui.horizontal.divider:after {\n content: '';\n display: table-cell;\n position: relative;\n top: 50%;\n width: 50%;\n background-repeat: no-repeat;\n}\n\n.ui.horizontal.divider:before {\n background-position: right @horizontalDividerMargin top 50%;\n}\n.ui.horizontal.divider:after {\n background-position: left @horizontalDividerMargin top 50%;\n}\n\n/*--------------\n Vertical\n---------------*/\n\n.ui.vertical.divider {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n\n margin: 0rem;\n padding: 0em;\n width: auto;\n height: 50%;\n\n line-height: 0em;\n text-align: center;\n transform: translateX(-50%);\n}\n\n.ui.vertical.divider:before,\n.ui.vertical.divider:after {\n position: absolute;\n left: 50%;\n content: '';\n z-index: 3;\n\n border-left: @shadowWidth solid @shadowColor;\n border-right: @highlightWidth solid @highlightColor;\n\n width: 0%;\n height: @verticalDividerHeight;\n}\n\n.ui.vertical.divider:before {\n top: -100%;\n}\n.ui.vertical.divider:after {\n top: auto;\n bottom: 0px;\n}\n\n/* Inside grid */\n@media only screen and (max-width : @largestMobileScreen) {\n\n .ui.stackable.grid .ui.vertical.divider,\n .ui.grid .stackable.row .ui.vertical.divider {\n display: table;\n white-space: nowrap;\n height: auto;\n margin: @horizontalMargin;\n overflow: hidden;\n line-height: 1;\n text-align: center;\n position: static;\n top: 0;\n left: 0;\n transform: none;\n }\n\n .ui.stackable.grid .ui.vertical.divider:before,\n .ui.grid .stackable.row .ui.vertical.divider:before,\n .ui.stackable.grid .ui.vertical.divider:after,\n .ui.grid .stackable.row .ui.vertical.divider:after {\n position: static;\n left: 0;\n border-left: none;\n border-right: none;\n content: '';\n display: table-cell;\n position: relative;\n top: 50%;\n width: 50%;\n background-repeat: no-repeat;\n }\n\n .ui.stackable.grid .ui.vertical.divider:before,\n .ui.grid .stackable.row .ui.vertical.divider:before {\n background-position: right @horizontalDividerMargin top 50%;\n }\n .ui.stackable.grid .ui.vertical.divider:after,\n .ui.grid .stackable.row .ui.vertical.divider:after {\n background-position: left @horizontalDividerMargin top 50%;\n }\n}\n\n/*--------------\n Icon\n---------------*/\n\n.ui.divider > .icon {\n margin: @dividerIconMargin;\n font-size: @dividerIconSize;\n height: 1em;\n vertical-align: middle;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Hidden\n---------------*/\n\n.ui.hidden.divider {\n border-color: transparent !important;\n}\n.ui.hidden.divider:before,\n.ui.hidden.divider:after {\n display: none;\n}\n\n/*--------------\n Inverted\n---------------*/\n\n.ui.divider.inverted,\n.ui.vertical.inverted.divider,\n.ui.horizontal.inverted.divider {\n color: @invertedTextColor;\n}\n.ui.divider.inverted,\n.ui.divider.inverted:after,\n.ui.divider.inverted:before {\n border-top-color: @invertedShadowColor !important;\n border-left-color: @invertedShadowColor !important;\n border-bottom-color: @invertedHighlightColor !important;\n border-right-color: @invertedHighlightColor !important;\n}\n\n/*--------------\n Fitted\n---------------*/\n\n.ui.fitted.divider {\n margin: 0em;\n}\n\n/*--------------\n Clearing\n---------------*/\n\n.ui.clearing.divider {\n clear: both;\n}\n\n/*--------------\n Section\n---------------*/\n\n.ui.section.divider {\n margin-top: @sectionMargin;\n margin-bottom: @sectionMargin;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n.ui.divider {\n font-size: @medium;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/flag.less", "content": "/*!\n * # Semantic UI - Flag\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'flag';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Flag\n*******************************/\n\ni.flag:not(.icon) {\n display: inline-block;\n\n width: @width;\n height: @height;\n\n line-height: @height;\n vertical-align: @verticalAlign;\n margin: 0em @margin 0em 0em;\n\n text-decoration: inherit;\n\n speak: none;\n font-smoothing: antialiased;\n backface-visibility: hidden;\n}\n\n/* Sprite */\ni.flag:not(.icon):before {\n display: inline-block;\n content: '';\n background: url(@spritePath) no-repeat -108px -1976px;\n width: @width;\n height: @height;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/header.less", "content": "/*!\n * # Semantic UI - Header\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'header';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Header\n*******************************/\n\n/* Standard */\n.ui.header {\n border: none;\n margin: @margin;\n padding: @verticalPadding @horizontalPadding;\n font-family: @fontFamily;\n font-weight: @fontWeight;\n line-height: @lineHeight;\n text-transform: @textTransform;\n color: @textColor;\n}\n\n.ui.header:first-child {\n margin-top: @firstMargin;\n}\n.ui.header:last-child {\n margin-bottom: @lastMargin;\n}\n\n/*--------------\n Sub Header\n---------------*/\n\n.ui.header .sub.header {\n display: block;\n font-weight: @normal;\n padding: 0em;\n margin: @subHeaderMargin;\n font-size: @subHeaderFontSize;\n line-height: @subHeaderLineHeight;\n color: @subHeaderColor;\n}\n\n/*--------------\n Icon\n---------------*/\n\n.ui.header > .icon {\n display: table-cell;\n opacity: @iconOpacity;\n font-size: @iconSize;\n padding-top: @iconOffset;\n vertical-align: @iconAlignment;\n}\n\n/* With Text Node */\n.ui.header .icon:only-child {\n display: inline-block;\n padding: 0em;\n margin-right: @iconMargin;\n}\n\n/*-------------------\n Image\n--------------------*/\n\n.ui.header > .image:not(.icon),\n.ui.header > img {\n display: inline-block;\n margin-top: @imageOffset;\n width: @imageWidth;\n height: @imageHeight;\n vertical-align: @imageAlignment;\n}\n.ui.header > .image:not(.icon):only-child,\n.ui.header > img:only-child {\n margin-right: @imageMargin;\n}\n\n/*--------------\n Content\n---------------*/\n\n.ui.header .content {\n display: inline-block;\n vertical-align: @contentAlignment;\n}\n\n/* After Image */\n.ui.header > img + .content,\n.ui.header > .image + .content {\n padding-left: @imageMargin;\n vertical-align: @contentImageAlignment;\n}\n\n/* After Icon */\n.ui.header > .icon + .content {\n padding-left: @iconMargin;\n display: table-cell;\n vertical-align: @contentIconAlignment;\n}\n\n\n/*--------------\n Loose Coupling\n---------------*/\n\n.ui.header .ui.label {\n font-size: @labelSize;\n margin-left: @labelDistance;\n vertical-align: @labelVerticalAlign;\n}\n\n/* Positioning */\n.ui.header + p {\n margin-top: @nextParagraphDistance;\n}\n\n\n\n/*******************************\n Types\n*******************************/\n\n\n/*--------------\n Page\n---------------*/\n\nh1.ui.header {\n font-size: @h1;\n}\nh2.ui.header {\n font-size: @h2;\n}\nh3.ui.header {\n font-size: @h3;\n}\nh4.ui.header {\n font-size: @h4;\n}\nh5.ui.header {\n font-size: @h5;\n}\n\n\n/* Sub Header */\nh1.ui.header .sub.header {\n font-size: @h1SubHeaderFontSize;\n}\nh2.ui.header .sub.header {\n font-size: @h2SubHeaderFontSize;\n}\nh3.ui.header .sub.header {\n font-size: @h3SubHeaderFontSize;\n}\nh4.ui.header .sub.header {\n font-size: @h4SubHeaderFontSize;\n}\nh5.ui.header .sub.header {\n font-size: @h5SubHeaderFontSize;\n}\n\n\n/*--------------\n Content Heading\n---------------*/\n\n.ui.huge.header {\n min-height: 1em;\n font-size: @hugeFontSize;\n}\n.ui.large.header {\n font-size: @largeFontSize;\n}\n.ui.medium.header {\n font-size: @mediumFontSize;\n}\n.ui.small.header {\n font-size: @smallFontSize;\n}\n.ui.tiny.header {\n font-size: @tinyFontSize;\n}\n\n/* Sub Header */\n.ui.huge.header .sub.header {\n font-size: @hugeSubHeaderFontSize;\n}\n.ui.large.header .sub.header {\n font-size: @hugeSubHeaderFontSize;\n}\n.ui.header .sub.header {\n font-size: @subHeaderFontSize;\n}\n.ui.small.header .sub.header {\n font-size: @smallSubHeaderFontSize;\n}\n.ui.tiny.header .sub.header {\n font-size: @tinySubHeaderFontSize;\n}\n\n/*--------------\n Sub Heading\n---------------*/\n\n.ui.sub.header {\n padding: 0em;\n margin-bottom: @subHeadingDistance;\n font-weight: @subHeadingFontWeight;\n font-size: @subHeadingFontSize;\n text-transform: @subHeadingTextTransform;\n color: @subHeadingColor;\n}\n\n.ui.small.sub.header {\n font-size: @smallSubHeadingSize;\n}\n.ui.sub.header {\n font-size: @subHeadingFontSize;\n}\n.ui.large.sub.header {\n font-size: @largeSubHeadingSize;\n}\n.ui.huge.sub.header {\n font-size: @hugeSubHeadingSize;\n}\n\n\n\n/*-------------------\n Icon\n--------------------*/\n\n.ui.icon.header {\n display: inline-block;\n text-align: center;\n margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin;\n}\n.ui.icon.header:after {\n content: '';\n display: block;\n height: 0px;\n clear: both;\n visibility: hidden;\n}\n\n.ui.icon.header:first-child {\n margin-top: @iconHeaderFirstMargin;\n}\n.ui.icon.header .icon {\n float: none;\n display: block;\n width: auto;\n height: auto;\n line-height: 1;\n padding: 0em;\n font-size: @iconHeaderSize;\n margin: 0em auto @iconHeaderMargin;\n opacity: @iconHeaderOpacity;\n}\n.ui.icon.header .content {\n display: block;\n padding: 0em;\n}\n.ui.icon.header .circular.icon {\n font-size: @circularHeaderIconSize;\n}\n.ui.icon.header .square.icon {\n font-size: @squareHeaderIconSize;\n}\n.ui.block.icon.header .icon {\n margin-bottom: 0em;\n}\n.ui.icon.header.aligned {\n margin-left: auto;\n margin-right: auto;\n display: block;\n}\n\n/*******************************\n States\n*******************************/\n\n.ui.disabled.header {\n opacity: @disabledOpacity;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.header {\n color: @invertedColor;\n}\n.ui.inverted.header .sub.header {\n color: @invertedSubHeaderColor;\n}\n.ui.inverted.attached.header {\n background: @invertedAttachedBackground;\n box-shadow: none;\n border-color: transparent;\n}\n.ui.inverted.block.header {\n background: @invertedBlockBackground;\n box-shadow: none;\n}\n.ui.inverted.block.header {\n border-bottom: none;\n}\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/*--- Red ---*/\n.ui.red.header {\n color: @red !important;\n}\na.ui.red.header:hover {\n color: @redHover !important;\n}\n.ui.red.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @red;\n}\n\n/* Inverted */\n.ui.inverted.red.header {\n color: @lightRed !important;\n}\na.ui.inverted.red.header:hover {\n color: @lightRedHover !important;\n}\n\n/*--- Orange ---*/\n.ui.orange.header {\n color: @orange !important;\n}\na.ui.orange.header:hover {\n color: @orangeHover !important;\n}\n.ui.orange.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @orange;\n}\n/* Inverted */\n.ui.inverted.orange.header {\n color: @lightOrange !important;\n}\na.ui.inverted.orange.header:hover {\n color: @lightOrangeHover !important;\n}\n\n/*--- Olive ---*/\n.ui.olive.header {\n color: @olive !important;\n}\na.ui.olive.header:hover {\n color: @oliveHover !important;\n}\n.ui.olive.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @olive;\n}\n/* Inverted */\n.ui.inverted.olive.header {\n color: @lightOlive !important;\n}\na.ui.inverted.olive.header:hover {\n color: @lightOliveHover !important;\n}\n\n/*--- Yellow ---*/\n.ui.yellow.header {\n color: @yellow !important;\n}\na.ui.yellow.header:hover {\n color: @yellowHover !important;\n}\n.ui.yellow.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @yellow;\n}\n/* Inverted */\n.ui.inverted.yellow.header {\n color: @lightYellow !important;\n}\na.ui.inverted.yellow.header:hover {\n color: @lightYellowHover !important;\n}\n\n/*--- Green ---*/\n.ui.green.header {\n color: @green !important;\n}\na.ui.green.header:hover {\n color: @greenHover !important;\n}\n.ui.green.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @green;\n}\n/* Inverted */\n.ui.inverted.green.header {\n color: @lightGreen !important;\n}\na.ui.inverted.green.header:hover {\n color: @lightGreenHover !important;\n}\n\n/*--- Teal ---*/\n.ui.teal.header {\n color: @teal !important;\n}\na.ui.teal.header:hover {\n color: @tealHover !important;\n}\n.ui.teal.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @teal;\n}\n/* Inverted */\n.ui.inverted.teal.header {\n color: @lightTeal !important;\n}\na.ui.inverted.teal.header:hover {\n color: @lightTealHover !important;\n}\n\n/*--- Blue ---*/\n.ui.blue.header {\n color: @blue !important;\n}\na.ui.blue.header:hover {\n color: @blueHover !important;\n}\n.ui.blue.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @blue;\n}\n/* Inverted */\n.ui.inverted.blue.header {\n color: @lightBlue !important;\n}\na.ui.inverted.blue.header:hover {\n color: @lightBlueHover !important;\n}\n\n/*--- Violet ---*/\n.ui.violet.header {\n color: @violet !important;\n}\na.ui.violet.header:hover {\n color: @violetHover !important;\n}\n.ui.violet.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @violet;\n}\n/* Inverted */\n.ui.inverted.violet.header {\n color: @lightViolet !important;\n}\na.ui.inverted.violet.header:hover {\n color: @lightVioletHover !important;\n}\n\n/*--- Purple ---*/\n.ui.purple.header {\n color: @purple !important;\n}\na.ui.purple.header:hover {\n color: @purpleHover !important;\n}\n.ui.purple.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @purple;\n}\n/* Inverted */\n.ui.inverted.purple.header {\n color: @lightPurple !important;\n}\na.ui.inverted.purple.header:hover {\n color: @lightPurpleHover !important;\n}\n\n/*--- Pink ---*/\n.ui.pink.header {\n color: @pink !important;\n}\na.ui.pink.header:hover {\n color: @pinkHover !important;\n}\n.ui.pink.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @pink;\n}\n/* Inverted */\n.ui.inverted.pink.header {\n color: @lightPink !important;\n}\na.ui.inverted.pink.header:hover {\n color: @lightPinkHover !important;\n}\n\n/*--- Brown ---*/\n.ui.brown.header {\n color: @brown !important;\n}\na.ui.brown.header:hover {\n color: @brownHover !important;\n}\n.ui.brown.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @brown;\n}\n/* Inverted */\n.ui.inverted.brown.header {\n color: @lightBrown !important;\n}\na.ui.inverted.brown.header:hover {\n color: @lightBrownHover !important;\n}\n\n/*--- Grey ---*/\n.ui.grey.header {\n color: @grey !important;\n}\na.ui.grey.header:hover {\n color: @greyHover !important;\n}\n.ui.grey.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @grey;\n}\n/* Inverted */\n.ui.inverted.grey.header {\n color: @lightGrey !important;\n}\na.ui.inverted.grey.header:hover {\n color: @lightGreyHover !important;\n}\n\n\n/*-------------------\n Aligned\n--------------------*/\n\n.ui.left.aligned.header {\n text-align: left;\n}\n.ui.right.aligned.header {\n text-align: right;\n}\n.ui.centered.header,\n.ui.center.aligned.header {\n text-align: center;\n}\n.ui.justified.header {\n text-align: justify;\n}\n.ui.justified.header:after {\n display: inline-block;\n content: '';\n width: 100%;\n}\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui.floated.header,\n.ui[class*=\"left floated\"].header {\n float: left;\n margin-top: 0em;\n margin-right: @floatedMargin;\n}\n.ui[class*=\"right floated\"].header {\n float: right;\n margin-top: 0em;\n margin-left: @floatedMargin;\n}\n\n/*-------------------\n Fitted\n--------------------*/\n\n.ui.fitted.header {\n padding: 0em;\n}\n\n\n/*-------------------\n Dividing\n--------------------*/\n\n.ui.dividing.header {\n padding-bottom: @dividedBorderPadding;\n border-bottom: @dividedBorder;\n}\n.ui.dividing.header .sub.header {\n padding-bottom: @dividedSubHeaderPadding;\n}\n.ui.dividing.header .icon {\n margin-bottom: @dividedIconPadding;\n}\n\n.ui.inverted.dividing.header {\n border-bottom-color: @invertedDividedBorderColor;\n}\n\n\n/*-------------------\n Block\n--------------------*/\n\n.ui.block.header {\n background: @blockBackground;\n padding: @blockVerticalPadding @blockHorizontalPadding;\n box-shadow: @blockBoxShadow;\n border: @blockBorder;\n border-radius: @blockBorderRadius;\n}\n\n.ui.tiny.block.header {\n font-size: @tinyBlock;\n}\n.ui.small.block.header {\n font-size: @smallBlock;\n}\n.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {\n font-size: @mediumBlock;\n}\n.ui.large.block.header {\n font-size: @largeBlock;\n}\n.ui.huge.block.header {\n font-size: @hugeBlock;\n}\n\n/*-------------------\n Attached\n--------------------*/\n\n.ui.attached.header {\n background: @attachedBackground;\n padding: @attachedVerticalPadding @attachedHorizontalPadding;\n margin-left: @attachedOffset;\n margin-right: @attachedOffset;\n box-shadow: @attachedBoxShadow;\n border: @attachedBorder;\n}\n.ui.attached.block.header {\n background: @blockBackground;\n}\n\n.ui.attached:not(.top):not(.bottom).header {\n margin-top: 0em;\n margin-bottom: 0em;\n border-top: none;\n border-radius: 0em;\n}\n.ui.top.attached.header {\n margin-bottom: 0em;\n border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;\n}\n.ui.bottom.attached.header {\n margin-top: 0em;\n border-top: none;\n border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;\n}\n\n/* Attached Sizes */\n.ui.tiny.attached.header {\n font-size: @tinyAttachedSize;\n}\n.ui.small.attached.header {\n font-size: @smallAttachedSize;\n}\n.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {\n font-size: @mediumAttachedSize;\n}\n.ui.large.attached.header {\n font-size: @largeAttachedSize;\n}\n.ui.huge.attached.header {\n font-size: @hugeAttachedSize;\n}\n\n/*-------------------\n Sizing\n--------------------*/\n\n.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {\n font-size: @mediumFontSize;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/icon.less", "content": "/*!\n * # Semantic UI - Icon\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'icon';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Icon\n*******************************/\n\n@font-face {\n font-family: 'Icons';\n src: @fallbackSRC;\n src: @src;\n font-style: normal;\n font-weight: @normal;\n font-variant: normal;\n text-decoration: inherit;\n text-transform: none;\n}\n\ni.icon {\n display: inline-block;\n opacity: @opacity;\n\n margin: 0em @distanceFromText 0em 0em;\n\n width: @width;\n height: @height;\n\n font-family: 'Icons';\n font-style: normal;\n font-weight: @normal;\n text-decoration: inherit;\n text-align: center;\n\n speak: none;\n font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n backface-visibility: hidden;\n}\n\ni.icon:before {\n background: none !important;\n}\n\n/*******************************\n Types\n*******************************/\n\n/*--------------\n Loading\n---------------*/\n\ni.icon.loading {\n height: 1em;\n line-height: 1;\n animation: icon-loading @loadingDuration linear infinite;\n}\n@keyframes icon-loading {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/*******************************\n States\n*******************************/\n\ni.icon.hover {\n opacity: 1 !important;\n}\n\ni.icon.active {\n opacity: 1 !important;\n}\n\ni.emphasized.icon {\n opacity: 1 !important;\n}\n\ni.disabled.icon {\n opacity: @disabledOpacity !important;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Fitted\n--------------------*/\n\ni.fitted.icon {\n width: auto;\n margin: 0em !important;\n}\n\n/*-------------------\n Link\n--------------------*/\n\ni.link.icon, i.link.icons {\n cursor: pointer;\n opacity: @linkOpacity;\n transition: opacity @defaultDuration @defaultEasing;\n}\ni.link.icon:hover, i.link.icons:hover {\n opacity: 1 !important;\n}\n\n/*-------------------\n Circular\n--------------------*/\n\ni.circular.icon {\n border-radius: 500em !important;\n line-height: 1 !important;\n\n padding: @circularPadding !important;\n box-shadow: @circularShadow;\n\n width: @circularSize !important;\n height: @circularSize !important;\n}\ni.circular.inverted.icon {\n border: none;\n box-shadow: none;\n}\n\n/*-------------------\n Flipped\n--------------------*/\n\ni.flipped.icon,\ni.horizontally.flipped.icon {\n transform: scale(-1, 1);\n}\ni.vertically.flipped.icon {\n transform: scale(1, -1);\n}\n\n/*-------------------\n Rotated\n--------------------*/\n\ni.rotated.icon,\ni.right.rotated.icon,\ni.clockwise.rotated.icon {\n transform: rotate(90deg);\n}\n\ni.left.rotated.icon,\ni.counterclockwise.rotated.icon {\n transform: rotate(-90deg);\n}\n\n/*-------------------\n Bordered\n--------------------*/\n\ni.bordered.icon {\n line-height: 1;\n vertical-align: baseline;\n\n width: @borderedSize;\n height: @borderedSize;\n padding: @borderedVerticalPadding @borderedHorizontalPadding !important;\n box-shadow: @borderedShadow;\n}\ni.bordered.inverted.icon {\n border: none;\n box-shadow: none;\n}\n\n/*-------------------\n Inverted\n--------------------*/\n\n/* Inverted Shapes */\ni.inverted.bordered.icon,\ni.inverted.circular.icon {\n background-color: @black !important;\n color: @white !important;\n}\n\ni.inverted.icon {\n color: @white;\n}\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/* Red */\ni.red.icon {\n color: @red !important;\n}\ni.inverted.red.icon {\n color: @lightRed !important;\n}\ni.inverted.bordered.red.icon,\ni.inverted.circular.red.icon {\n background-color: @red !important;\n color: @white !important;\n}\n\n/* Orange */\ni.orange.icon {\n color: @orange !important;\n}\ni.inverted.orange.icon {\n color: @lightOrange !important;\n}\ni.inverted.bordered.orange.icon,\ni.inverted.circular.orange.icon {\n background-color: @orange !important;\n color: @white !important;\n}\n\n/* Yellow */\ni.yellow.icon {\n color: @yellow !important;\n}\ni.inverted.yellow.icon {\n color: @lightYellow !important;\n}\ni.inverted.bordered.yellow.icon,\ni.inverted.circular.yellow.icon {\n background-color: @yellow !important;\n color: @white !important;\n}\n\n/* Olive */\ni.olive.icon {\n color: @olive !important;\n}\ni.inverted.olive.icon {\n color: @lightOlive !important;\n}\ni.inverted.bordered.olive.icon,\ni.inverted.circular.olive.icon {\n background-color: @olive !important;\n color: @white !important;\n}\n\n/* Green */\ni.green.icon {\n color: @green !important;\n}\ni.inverted.green.icon {\n color: @lightGreen !important;\n}\ni.inverted.bordered.green.icon,\ni.inverted.circular.green.icon {\n background-color: @green !important;\n color: @white !important;\n}\n\n/* Teal */\ni.teal.icon {\n color: @teal !important;\n}\ni.inverted.teal.icon {\n color: @lightTeal !important;\n}\ni.inverted.bordered.teal.icon,\ni.inverted.circular.teal.icon {\n background-color: @teal !important;\n color: @white !important;\n}\n\n/* Blue */\ni.blue.icon {\n color: @blue !important;\n}\ni.inverted.blue.icon {\n color: @lightBlue !important;\n}\ni.inverted.bordered.blue.icon,\ni.inverted.circular.blue.icon {\n background-color: @blue !important;\n color: @white !important;\n}\n\n/* Violet */\ni.violet.icon {\n color: @violet !important;\n}\ni.inverted.violet.icon {\n color: @lightViolet !important;\n}\ni.inverted.bordered.violet.icon,\ni.inverted.circular.violet.icon {\n background-color: @violet !important;\n color: @white !important;\n}\n\n/* Purple */\ni.purple.icon {\n color: @purple !important;\n}\ni.inverted.purple.icon {\n color: @lightPurple !important;\n}\ni.inverted.bordered.purple.icon,\ni.inverted.circular.purple.icon {\n background-color: @purple !important;\n color: @white !important;\n}\n\n/* Pink */\ni.pink.icon {\n color: @pink !important;\n}\ni.inverted.pink.icon {\n color: @lightPink !important;\n}\ni.inverted.bordered.pink.icon,\ni.inverted.circular.pink.icon {\n background-color: @pink !important;\n color: @white !important;\n}\n\n/* Brown */\ni.brown.icon {\n color: @brown !important;\n}\ni.inverted.brown.icon {\n color: @lightBrown !important;\n}\ni.inverted.bordered.brown.icon,\ni.inverted.circular.brown.icon {\n background-color: @brown !important;\n color: @white !important;\n}\n\n/* Grey */\ni.grey.icon {\n color: @grey !important;\n}\ni.inverted.grey.icon {\n color: @lightGrey !important;\n}\ni.inverted.bordered.grey.icon,\ni.inverted.circular.grey.icon {\n background-color: @grey !important;\n color: @white !important;\n}\n\n/* Black */\ni.black.icon {\n color: @black !important;\n}\ni.inverted.black.icon {\n color: @lightBlack !important;\n}\ni.inverted.bordered.black.icon,\ni.inverted.circular.black.icon {\n background-color: @black !important;\n color: @white !important;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\ni.mini.icon,\ni.mini.icons {\n line-height: 1;\n font-size: @mini;\n}\ni.tiny.icon,\ni.tiny.icons {\n line-height: 1;\n font-size: @tiny;\n}\ni.small.icon,\ni.small.icons {\n line-height: 1;\n font-size: @small;\n}\ni.icon,\ni.icons {\n font-size: @medium;\n}\ni.large.icon,\ni.large.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @large;\n}\ni.big.icon,\ni.big.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @big;\n}\ni.huge.icon,\ni.huge.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @huge;\n}\ni.massive.icon,\ni.massive.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @massive;\n}\n\n/*******************************\n Groups\n*******************************/\n\ni.icons {\n display: inline-block;\n position: relative;\n line-height: 1;\n}\n\ni.icons .icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n margin: 0em;\n margin: 0;\n}\n\ni.icons .icon:first-child {\n position: static;\n width: auto;\n height: auto;\n vertical-align: top;\n transform: none;\n margin-right: @distanceFromText;\n}\n\n/* Corner Icon */\ni.icons .corner.icon {\n top: auto;\n left: auto;\n right: 0;\n bottom: 0;\n transform: none;\n font-size: @cornerIconSize;\n text-shadow: @cornerIconShadow;\n}\ni.icons .top.right.corner.icon {\n top: 0;\n left: auto;\n right: 0;\n bottom: auto;\n}\ni.icons .top.left.corner.icon {\n top: 0;\n left: 0;\n right: auto;\n bottom: auto;\n}\ni.icons .bottom.left.corner.icon {\n top: auto;\n left: 0;\n right: auto;\n bottom: 0;\n}\ni.icons .bottom.right.corner.icon {\n top: auto;\n left: auto;\n right: 0;\n bottom: 0;\n}\n\ni.icons .inverted.corner.icon {\n text-shadow: @cornerIconInvertedShadow;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/image.less", "content": "/*!\n * # Semantic UI - Image\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'image';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Image\n*******************************/\n\n.ui.image {\n position: relative;\n display: inline-block;\n vertical-align: middle;\n max-width: 100%;\n background-color: @placeholderColor;\n}\n\nimg.ui.image {\n display: block;\n}\n\n.ui.image svg,\n.ui.image img {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n\n/*******************************\n States\n*******************************/\n\n.ui.hidden.images,\n.ui.hidden.image {\n display: none;\n}\n.ui.hidden.transition.images,\n.ui.hidden.transition.image {\n display: block;\n visibility: hidden;\n}\n.ui.images > .hidden.transition {\n display: inline-block;\n visibility: hidden;\n}\n\n\n.ui.disabled.images,\n.ui.disabled.image {\n cursor: default;\n opacity: @disabledOpacity;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*--------------\n Inline\n---------------*/\n\n.ui.inline.image,\n.ui.inline.image svg,\n.ui.inline.image img {\n display: inline-block;\n}\n\n/*------------------\n Vertical Aligned\n-------------------*/\n\n.ui.top.aligned.images .image,\n.ui.top.aligned.image,\n.ui.top.aligned.image svg,\n.ui.top.aligned.image img {\n display: inline-block;\n vertical-align: top;\n}\n.ui.middle.aligned.images .image,\n.ui.middle.aligned.image,\n.ui.middle.aligned.image svg,\n.ui.middle.aligned.image img {\n display: inline-block;\n vertical-align: middle;\n}\n.ui.bottom.aligned.images .image,\n.ui.bottom.aligned.image,\n.ui.bottom.aligned.image svg,\n.ui.bottom.aligned.image img {\n display: inline-block;\n vertical-align: bottom;\n}\n\n/*--------------\n Rounded\n---------------*/\n\n.ui.rounded.images .image,\n.ui.rounded.image,\n.ui.rounded.images .image > *,\n.ui.rounded.image > * {\n border-radius: @roundedBorderRadius;\n}\n\n/*--------------\n Bordered\n---------------*/\n\n.ui.bordered.images .image,\n.ui.bordered.images img,\n.ui.bordered.images svg,\n.ui.bordered.image img,\n.ui.bordered.image svg,\nimg.ui.bordered.image {\n border: @imageBorder;\n}\n\n/*--------------\n Circular\n---------------*/\n\n.ui.circular.images,\n.ui.circular.image {\n overflow: hidden;\n}\n\n.ui.circular.images .image,\n.ui.circular.image,\n.ui.circular.images .image > *,\n.ui.circular.image > * {\n -webkit-border-radius: @circularRadius;\n -moz-border-radius: @circularRadius;\n border-radius: @circularRadius;\n}\n\n/*--------------\n Fluid\n---------------*/\n\n.ui.fluid.images,\n.ui.fluid.image,\n.ui.fluid.images img,\n.ui.fluid.images svg,\n.ui.fluid.image svg,\n.ui.fluid.image img {\n display: block;\n width: 100%;\n height: auto;\n}\n\n\n/*--------------\n Avatar\n---------------*/\n\n.ui.avatar.images .image,\n.ui.avatar.images img,\n.ui.avatar.images svg,\n.ui.avatar.image img,\n.ui.avatar.image svg,\n.ui.avatar.image {\n margin-right: @avatarMargin;\n\n display: inline-block;\n width: @avatarSize;\n height: @avatarSize;\n\n -webkit-border-radius: @circularRadius;\n -moz-border-radius: @circularRadius;\n border-radius: @circularRadius;\n}\n\n/*-------------------\n Spaced\n--------------------*/\n\n.ui.spaced.image {\n display: inline-block !important;\n margin-left: @spacedDistance;\n margin-right: @spacedDistance;\n}\n\n.ui[class*=\"left spaced\"].image {\n margin-left: @spacedDistance;\n margin-right: 0em;\n}\n\n.ui[class*=\"right spaced\"].image {\n margin-left: 0em;\n margin-right: @spacedDistance;\n}\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui.floated.image,\n.ui.floated.images {\n float: left;\n margin-right: @floatedHorizontalMargin;\n margin-bottom: @floatedVerticalMargin;\n}\n.ui.right.floated.images,\n.ui.right.floated.image {\n float: right;\n margin-right: 0em;\n margin-bottom: @floatedVerticalMargin;\n margin-left: @floatedHorizontalMargin;\n}\n\n.ui.floated.images:last-child,\n.ui.floated.image:last-child {\n margin-bottom: 0em;\n}\n\n\n.ui.centered.images,\n.ui.centered.image {\n margin-left: auto;\n margin-right: auto;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n.ui.mini.images .image,\n.ui.mini.images img,\n.ui.mini.images svg,\n.ui.mini.image {\n width: @miniWidth;\n height: auto;\n font-size: @mini;\n}\n.ui.tiny.images .image,\n.ui.tiny.images img,\n.ui.tiny.images svg,\n.ui.tiny.image {\n width: @tinyWidth;\n height: auto;\n font-size: @tiny;\n}\n.ui.small.images .image,\n.ui.small.images img,\n.ui.small.images svg,\n.ui.small.image {\n width: @smallWidth;\n height: auto;\n font-size: @small;\n}\n.ui.medium.images .image,\n.ui.medium.images img,\n.ui.medium.images svg,\n.ui.medium.image {\n width: @mediumWidth;\n height: auto;\n font-size: @medium;\n}\n.ui.large.images .image,\n.ui.large.images img,\n.ui.large.images svg,\n.ui.large.image {\n width: @largeWidth;\n height: auto;\n font-size: @large;\n}\n.ui.big.images .image,\n.ui.big.images img,\n.ui.big.images svg,\n.ui.big.image {\n width: @bigWidth;\n height: auto;\n font-size: @big;\n}\n.ui.huge.images .image,\n.ui.huge.images img,\n.ui.huge.images svg,\n.ui.huge.image {\n width: @hugeWidth;\n height: auto;\n font-size: @huge;\n}\n.ui.massive.images .image,\n.ui.massive.images img,\n.ui.massive.images svg,\n.ui.massive.image {\n width: @massiveWidth;\n height: auto;\n font-size: @massive;\n}\n\n\n/*******************************\n Groups\n*******************************/\n\n.ui.images {\n font-size: 0em;\n margin: 0em -@imageHorizontalMargin 0rem;\n}\n\n.ui.images .image,\n.ui.images > img,\n.ui.images > svg {\n display: inline-block;\n margin: 0em @imageHorizontalMargin @imageVerticalMargin;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/input.less", "content": "/*!\n * # Semantic UI - Input\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'input';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Standard\n*******************************/\n\n\n/*--------------------\n Inputs\n---------------------*/\n\n.ui.input {\n position: relative;\n font-weight: @normal;\n font-style: normal;\n display: inline-flex;\n color: @inputColor;\n}\n.ui.input > input {\n margin: 0em;\n max-width: 100%;\n flex: 1 0 auto;\n outline: none;\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n text-align: @textAlign;\n line-height: @lineHeight;\n\n font-family: @inputFont;\n padding: @padding;\n\n background: @background;\n border: @border;\n color: @inputColor;\n border-radius: @borderRadius;\n transition: @transition;\n\n box-shadow: @boxShadow;\n}\n\n\n/*--------------------\n Placeholder\n---------------------*/\n\n/* browsers require these rules separate */\n\n.ui.input > input::-webkit-input-placeholder {\n color: @placeholderColor;\n}\n.ui.input > input::-moz-placeholder {\n color: @placeholderColor;\n}\n.ui.input > input:-ms-input-placeholder {\n color: @placeholderColor;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------------\n Disabled\n---------------------*/\n\n.ui.disabled.input,\n.ui.input:not(.disabled) input[disabled] {\n opacity: @disabledOpacity;\n}\n\n.ui.disabled.input > input,\n.ui.input:not(.disabled) input[disabled] {\n pointer-events: none;\n}\n\n/*--------------------\n Active\n---------------------*/\n\n.ui.input > input:active,\n.ui.input.down input {\n border-color: @downBorderColor;\n background: @downBackground;\n color: @downColor;\n box-shadow: @downBoxShadow;\n}\n\n/*--------------------\n Loading\n---------------------*/\n\n.ui.loading.loading.input > i.icon:before {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n border-radius: @circularRadius;\n border: @loaderLineWidth solid @loaderFillColor;\n}\n.ui.loading.loading.input > i.icon:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: button-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @loaderLineColor transparent transparent;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n}\n\n\n/*--------------------\n Focus\n---------------------*/\n\n.ui.input.focus > input,\n.ui.input > input:focus {\n border-color: @focusBorderColor;\n background: @focusBackground;\n color: @focusColor;\n box-shadow: @focusBoxShadow;\n}\n.ui.input.focus > input::-webkit-input-placeholder,\n.ui.input > input:focus::-webkit-input-placeholder {\n color: @placeholderFocusColor;\n}\n.ui.input.focus > input::-moz-placeholder,\n.ui.input > input:focus::-moz-placeholder {\n color: @placeholderFocusColor;\n}\n.ui.input.focus > input:-ms-input-placeholder,\n.ui.input > input:focus:-ms-input-placeholder {\n color: @placeholderFocusColor;\n}\n\n\n\n/*--------------------\n Error\n---------------------*/\n\n.ui.input.error > input {\n background-color: @errorBackground;\n border-color: @errorBorder;\n color: @errorColor;\n box-shadow: @errorBoxShadow;\n}\n\n/* Error Placeholder */\n.ui.input.error > input::-webkit-input-placeholder {\n color: @placeholderErrorColor;\n}\n.ui.input.error > input::-moz-placeholder {\n color: @placeholderErrorColor;\n}\n.ui.input.error > input:-ms-input-placeholder {\n color: @placeholderErrorColor !important;\n}\n\n/* Focused Error Placeholder */\n.ui.input.error > input:focus::-webkit-input-placeholder {\n color: @placeholderErrorFocusColor;\n}\n.ui.input.error > input:focus::-moz-placeholder {\n color: @placeholderErrorFocusColor;\n}\n.ui.input.error > input:focus:-ms-input-placeholder {\n color: @placeholderErrorFocusColor !important;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------------\n Transparent\n---------------------*/\n\n\n.ui.transparent.input > input {\n border-color: transparent !important;\n background-color: transparent !important;\n padding: 0em !important;\n box-shadow: none !important;\n border-radius: 0px !important;\n}\n\n/* Transparent Icon */\n.ui.transparent.icon.input > i.icon {\n width: @transparentIconWidth;\n}\n.ui.transparent.icon.input > input {\n padding-left: 0em !important;\n padding-right: @transparentIconMargin !important;\n}\n.ui.transparent[class*=\"left icon\"].input > input {\n padding-left: @transparentIconMargin !important;\n padding-right: 0em !important;\n}\n\n/* Transparent Inverted */\n.ui.transparent.inverted.input {\n color: @transparentInvertedColor;\n}\n.ui.transparent.inverted.input > input {\n color: inherit;\n}\n\n.ui.transparent.inverted.input > input::-webkit-input-placeholder {\n color: @transparentInvertedPlaceholderColor;\n}\n.ui.transparent.inverted.input > input::-moz-placeholder {\n color: @transparentInvertedPlaceholderColor;\n}\n.ui.transparent.inverted.input > input:-ms-input-placeholder {\n color: @transparentInvertedPlaceholderColor;\n}\n\n\n/*--------------------\n Icon\n---------------------*/\n\n.ui.icon.input > i.icon {\n cursor: default;\n position: absolute;\n line-height: 1;\n text-align: center;\n top: 0px;\n right: 0px;\n margin: 0em;\n height: 100%;\n\n width: @iconWidth;\n opacity: @iconOpacity;\n border-radius: 0em @borderRadius @borderRadius 0em;\n transition: @iconTransition;\n}\n.ui.icon.input > i.icon:not(.link) {\n pointer-events: none;\n}\n.ui.icon.input > input {\n padding-right: @iconMargin !important;\n}\n\n.ui.icon.input > i.icon:before,\n.ui.icon.input > i.icon:after {\n left: 0;\n position: absolute;\n text-align: center;\n top: 50%;\n width: 100%;\n margin-top: @iconOffset;\n}\n.ui.icon.input > i.link.icon {\n cursor: pointer;\n}\n.ui.icon.input > i.circular.icon {\n top: @circularIconVerticalOffset;\n right: @circularIconHorizontalOffset;\n}\n\n/* Left Icon Input */\n.ui[class*=\"left icon\"].input > i.icon {\n right: auto;\n left: @borderWidth;\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui[class*=\"left icon\"].input > i.circular.icon {\n right: auto;\n left: @circularIconHorizontalOffset;\n}\n.ui[class*=\"left icon\"].input > input {\n padding-left: @iconMargin !important;\n padding-right: @horizontalPadding !important;\n}\n\n/* Focus */\n.ui.icon.input > input:focus ~ i.icon {\n opacity: 1;\n}\n\n/*--------------------\n Labeled\n---------------------*/\n\n/* Adjacent Label */\n.ui.labeled.input > .label {\n flex: 0 0 auto;\n margin: 0;\n font-size: @relativeMedium;\n}\n.ui.labeled.input > .label:not(.corner) {\n padding-top: @verticalPadding;\n padding-bottom: @verticalPadding;\n}\n\n/* Regular Label on Left */\n.ui.labeled.input:not([class*=\"corner labeled\"]) .label:first-child {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n.ui.labeled.input:not([class*=\"corner labeled\"]) .label:first-child + input {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n border-left-color: transparent;\n}\n.ui.labeled.input:not([class*=\"corner labeled\"]) .label:first-child + input:focus {\n border-left-color: @focusBorderColor;\n}\n\n/* Regular Label on Right */\n.ui[class*=\"right labeled\"].input > input {\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n border-right-color: transparent !important;\n}\n.ui[class*=\"right labeled\"].input > input + .label {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n.ui[class*=\"right labeled\"].input > input:focus {\n border-right-color: @focusBorderColor !important;\n}\n\n/* Corner Label */\n.ui.labeled.input .corner.label {\n top: @labelCornerTop;\n right: @labelCornerRight;\n font-size: @labelCornerSize;\n border-radius: 0em @borderRadius 0em 0em;\n}\n\n/* Spacing with corner label */\n.ui[class*=\"corner labeled\"]:not([class*=\"left corner labeled\"]).labeled.input > input {\n padding-right: @labeledMargin !important;\n}\n.ui[class*=\"corner labeled\"].icon.input:not([class*=\"left corner labeled\"]) > input {\n padding-right: @labeledIconInputMargin !important;\n}\n.ui[class*=\"corner labeled\"].icon.input:not([class*=\"left corner labeled\"]) > .icon {\n margin-right: @labeledIconMargin;\n}\n\n/* Left Labeled */\n.ui[class*=\"left corner labeled\"].labeled.input > input {\n padding-left: @labeledMargin !important;\n}\n.ui[class*=\"left corner labeled\"].icon.input > input {\n padding-left: @labeledIconInputMargin !important;\n}\n.ui[class*=\"left corner labeled\"].icon.input > .icon {\n margin-left: @labeledIconMargin;\n}\n\n/* Corner Label Position */\n.ui.input > .ui.corner.label {\n top: @borderWidth;\n right: @borderWidth;\n}\n.ui.input > .ui.left.corner.label {\n right: auto;\n left: @borderWidth;\n}\n\n\n/*--------------------\n Action\n---------------------*/\n\n.ui.action.input > .button,\n.ui.action.input > .buttons {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n}\n.ui.action.input > .button,\n.ui.action.input > .buttons > .button {\n padding-top: @verticalPadding;\n padding-bottom: @verticalPadding;\n margin: 0;\n}\n\n/* Button on Right */\n.ui.action.input:not([class*=\"left action\"]) > input {\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n border-right-color: transparent !important;\n}\n.ui.action.input:not([class*=\"left action\"]) > .dropdown:not(:first-child),\n.ui.action.input:not([class*=\"left action\"]) > .button:not(:first-child),\n.ui.action.input:not([class*=\"left action\"]) > .buttons:not(:first-child) > .button {\n border-radius: 0px;\n}\n.ui.action.input:not([class*=\"left action\"]) > .dropdown:last-child,\n.ui.action.input:not([class*=\"left action\"]) > .button:last-child,\n.ui.action.input:not([class*=\"left action\"]) > .buttons:last-child > .button {\n border-radius: 0px @borderRadius @borderRadius 0px;\n}\n\n/* Input Focus */\n.ui.action.input:not([class*=\"left action\"]) > input:focus {\n border-right-color: @focusBorderColor !important;\n}\n\n/* Button on Left */\n.ui[class*=\"left action\"].input > input {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n border-left-color: transparent !important;\n}\n.ui[class*=\"left action\"].input > .dropdown,\n.ui[class*=\"left action\"].input > .button,\n.ui[class*=\"left action\"].input > .buttons > .button {\n border-radius: 0px;\n}\n.ui[class*=\"left action\"].input > .dropdown:first-child,\n.ui[class*=\"left action\"].input > .button:first-child,\n.ui[class*=\"left action\"].input > .buttons:first-child > .button {\n border-radius: @borderRadius 0px 0px @borderRadius;\n}\n/* Input Focus */\n.ui[class*=\"left action\"].input > input:focus {\n border-left-color: @focusBorderColor !important;\n}\n\n/*--------------------\n Inverted\n---------------------*/\n\n/* Standard */\n.ui.inverted.input > input {\n border: none;\n}\n\n/*--------------------\n Fluid\n---------------------*/\n\n.ui.fluid.input {\n display: flex;\n}\n.ui.fluid.input > input {\n width: 0px !important;\n}\n\n/*--------------------\n Size\n---------------------*/\n\n.ui.mini.input {\n font-size: @relativeMini;\n}\n.ui.small.input {\n font-size: @relativeSmall;\n}\n.ui.input {\n font-size: @relativeMedium;\n}\n.ui.large.input {\n font-size: @relativeLarge;\n}\n.ui.big.input {\n font-size: @relativeBig;\n}\n.ui.huge.input {\n font-size: @relativeHuge;\n}\n.ui.massive.input {\n font-size: @relativeMassive;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/label.less", "content": "/*!\n * # Semantic UI - Label\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'label';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Label\n*******************************/\n\n.ui.label {\n display: inline-block;\n line-height: 1;\n vertical-align: @verticalAlign;\n\n margin: @verticalMargin @horizontalMargin;\n\n background-color: @backgroundColor;\n background-image: @backgroundImage;\n padding: @verticalPadding @horizontalPadding;\n color: @color;\n\n text-transform: @textTransform;\n font-weight: @fontWeight;\n\n border: @border;\n border-radius: @borderRadius;\n transition: @transition;\n}\n\n.ui.label:first-child {\n margin-left: 0em;\n}\n.ui.label:last-child {\n margin-right: 0em;\n}\n\n/* Link */\na.ui.label {\n cursor: pointer;\n}\n\n/* Inside Link */\n.ui.label > a {\n cursor: pointer;\n color: inherit;\n opacity: @linkOpacity;\n transition: @linkTransition;\n}\n.ui.label > a:hover {\n opacity: 1;\n}\n\n/* Image */\n.ui.label > img {\n width: auto !important;\n vertical-align: middle;\n height: @imageHeight !important;\n}\n\n/* Icon */\n.ui.label > .icon {\n width: auto;\n margin: 0em @iconDistance 0em 0em;\n}\n\n/* Detail */\n.ui.label > .detail {\n display: inline-block;\n vertical-align: top;\n font-weight: @detailFontWeight;\n margin-left: @detailMargin;\n opacity: @detailOpacity;\n}\n.ui.label > .detail .icon {\n margin: 0em @detailIconDistance 0em 0em;\n}\n\n\n/* Removable label */\n.ui.label > .close.icon,\n.ui.label > .delete.icon {\n cursor: pointer;\n margin-right: 0em;\n margin-left: @deleteMargin;\n font-size: @deleteSize;\n opacity: @deleteOpacity;\n transition: @deleteTransition;\n}\n.ui.label > .delete.icon:hover {\n opacity: 1;\n}\n\n/*-------------------\n Group\n--------------------*/\n\n.ui.labels > .label {\n margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em;\n}\n\n\n/*-------------------\n Coupling\n--------------------*/\n\n.ui.header > .ui.label {\n margin-top: @lineHeightOffset;\n}\n\n\n/* Remove border radius on attached segment */\n.ui.attached.segment > .ui.top.left.attached.label,\n.ui.bottom.attached.segment > .ui.top.left.attached.label {\n border-top-left-radius: 0;\n}\n.ui.attached.segment > .ui.top.right.attached.label,\n.ui.bottom.attached.segment > .ui.top.right.attached.label {\n border-top-right-radius: 0;\n}\n.ui.top.attached.segment > .ui.bottom.left.attached.label {\n border-bottom-left-radius: 0;\n}\n.ui.top.attached.segment > .ui.bottom.right.attached.label {\n border-bottom-right-radius: 0;\n}\n\n/* Padding on next content after a label */\n.ui.top.attached.label:first-child + :not(.attached),\n.ui.top.attached.label + [class*=\"right floated\"] + * {\n margin-top: @attachedSegmentPadding !important;\n}\n.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) {\n margin-top: 0em;\n margin-bottom: @attachedSegmentPadding !important;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n.ui.image.label {\n width: auto !important;\n margin-top: 0em;\n margin-bottom: 0em;\n max-width: 9999px;\n vertical-align: baseline;\n text-transform: none;\n\n background: @imageLabelBackground;\n padding: @imageLabelPadding;\n border-radius: @imageLabelBorderRadius;\n box-shadow: @imageLabelBoxShadow;\n}\n\n.ui.image.label img {\n display: inline-block;\n vertical-align: top;\n\n height: @imageLabelImageHeight;\n margin: @imageLabelImageMargin;\n border-radius: @imageLabelImageBorderRadius;\n}\n\n.ui.image.label .detail {\n background: @imageLabelDetailBackground;\n margin: @imageLabelDetailMargin;\n padding: @imageLabelDetailPadding;\n border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em;\n}\n\n/*-------------------\n Tag\n--------------------*/\n\n.ui.tag.labels .label,\n.ui.tag.label {\n margin-left: 1em;\n position: relative;\n padding-left: @tagHorizontalPadding;\n padding-right: @tagHorizontalPadding;\n\n border-radius: 0em @borderRadius @borderRadius 0em;\n transition: @tagTransition;\n}\n.ui.tag.labels .label:before,\n.ui.tag.label:before {\n position: absolute;\n transform: translateY(-50%) translateX(50%) rotate(-45deg);\n\n top: @tagTriangleTopOffset;\n right: @tagTriangleRightOffset;\n content: '';\n\n background-color: inherit;\n background-image: @tagTriangleBackgroundImage;\n\n width: @tagTriangleSize;\n height: @tagTriangleSize;\n transition: @tagTransition;\n}\n\n\n.ui.tag.labels .label:after,\n.ui.tag.label:after {\n position: absolute;\n content: '';\n top: 50%;\n left: -(@tagCircleSize / 2);\n\n margin-top: -(@tagCircleSize / 2);\n background-color: @tagCircleColor !important;\n width: @tagCircleSize;\n height: @tagCircleSize;\n\n box-shadow: @tagCircleBoxShadow;\n border-radius: @circularRadius;\n}\n\n\n/*-------------------\n Corner Label\n--------------------*/\n\n.ui.corner.label {\n position: absolute;\n top: 0em;\n right: 0em;\n margin: 0em;\n padding: 0em;\n text-align: center;\n\n border-color: @backgroundColor;\n\n width: @cornerTriangleSize;\n height: @cornerTriangleSize;\n z-index: @cornerTriangleZIndex;\n transition: @cornerTriangleTransition;\n}\n\n/* Icon Label */\n.ui.corner.label{\n background-color: transparent !important;\n}\n.ui.corner.label:after {\n position: absolute;\n content: \"\";\n right: 0em;\n top: 0em;\n z-index: -1;\n\n width: 0em;\n height: 0em;\n background-color: transparent !important;\n\n border-top: 0em solid transparent;\n border-right: @cornerTriangleSize solid transparent;\n border-bottom: @cornerTriangleSize solid transparent;\n border-left: 0em solid transparent;\n\n border-right-color: inherit;\n transition: @cornerTriangleTransition;\n}\n\n.ui.corner.label .icon {\n cursor: default;\n position: relative;\n top: @cornerIconTopOffset;\n left: @cornerIconLeftOffset;\n font-size: @cornerIconSize;\n margin: 0em;\n}\n\n/* Left Corner */\n.ui.left.corner.label,\n.ui.left.corner.label:after {\n right: auto;\n left: 0em;\n}\n.ui.left.corner.label:after {\n border-top: @cornerTriangleSize solid transparent;\n border-right: @cornerTriangleSize solid transparent;\n border-bottom: 0em solid transparent;\n border-left: 0em solid transparent;\n\n border-top-color: inherit;\n}\n.ui.left.corner.label .icon {\n left: -@cornerIconLeftOffset;\n}\n\n/* Segment */\n.ui.segment > .ui.corner.label {\n top: -1px;\n right: -1px;\n}\n.ui.segment > .ui.left.corner.label {\n right: auto;\n left: -1px;\n}\n\n/*-------------------\n Ribbon\n--------------------*/\n\n.ui.ribbon.label {\n position: relative;\n margin: 0em;\n min-width: max-content;\n border-radius: 0em @borderRadius @borderRadius 0em;\n border-color: @ribbonShadowColor;\n}\n\n.ui.ribbon.label:after {\n position: absolute;\n content: '';\n\n top: 100%;\n left: 0%;\n background-color: transparent !important;\n\n border-style: solid;\n border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em;\n border-color: transparent;\n border-right-color: inherit;\n\n width: 0em;\n height: 0em;\n}\n/* Positioning */\n.ui.ribbon.label {\n left: @ribbonOffset;\n margin-right: -@ribbonTriangleSize;\n padding-left: @ribbonDistance;\n padding-right: @ribbonTriangleSize;\n}\n.ui[class*=\"right ribbon\"].label {\n left: @rightRibbonOffset;\n padding-left: @ribbonTriangleSize;\n padding-right: @ribbonDistance;\n}\n\n/* Right Ribbon */\n.ui[class*=\"right ribbon\"].label {\n text-align: left;\n transform: translateX(-100%);\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui[class*=\"right ribbon\"].label:after {\n left: auto;\n right: 0%;\n\n border-style: solid;\n border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em;\n border-color: transparent;\n border-top-color: inherit;\n}\n\n/* Inside Table */\n.ui.image > .ribbon.label,\n.ui.card .image > .ribbon.label {\n position: absolute;\n top: @ribbonImageTopDistance;\n}\n.ui.card .image > .ui.ribbon.label,\n.ui.image > .ui.ribbon.label {\n left: @ribbonImageOffset;\n}\n.ui.card .image > .ui[class*=\"right ribbon\"].label,\n.ui.image > .ui[class*=\"right ribbon\"].label {\n left: @rightRibbonImageOffset;\n padding-left: @horizontalPadding;\n}\n\n/* Inside Table */\n.ui.table td > .ui.ribbon.label {\n left: @ribbonTableOffset;\n}\n.ui.table td > .ui[class*=\"right ribbon\"].label {\n left: @rightRibbonTableOffset;\n padding-left: @horizontalPadding;\n}\n\n\n/*-------------------\n Attached\n--------------------*/\n\n.ui[class*=\"top attached\"].label,\n.ui.attached.label {\n width: 100%;\n position: absolute;\n margin: 0em;\n top: 0em;\n left: 0em;\n\n padding: @attachedVerticalPadding @attachedHorizontalPadding;\n\n border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em;\n}\n.ui[class*=\"bottom attached\"].label {\n top: auto;\n bottom: 0em;\n border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius;\n}\n\n.ui[class*=\"top left attached\"].label {\n width: auto;\n margin-top: 0em !important;\n border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em;\n}\n\n.ui[class*=\"top right attached\"].label {\n width: auto;\n left: auto;\n right: 0em;\n border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius;\n}\n.ui[class*=\"bottom left attached\"].label {\n width: auto;\n top: auto;\n bottom: 0em;\n border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius;\n}\n.ui[class*=\"bottom right attached\"].label {\n top: auto;\n bottom: 0em;\n left: auto;\n right: 0em;\n width: auto;\n border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*-------------------\n Disabled\n--------------------*/\n\n.ui.label.disabled {\n opacity: 0.5;\n}\n\n/*-------------------\n Hover\n--------------------*/\n\na.ui.labels .label:hover,\na.ui.label:hover {\n background-color: @labelHoverBackgroundColor;\n border-color: @labelHoverBackgroundColor;\n\n background-image: @labelHoverBackgroundImage;\n color: @labelHoverTextColor;\n}\n.ui.labels a.label:hover:before,\na.ui.label:hover:before {\n color: @labelHoverTextColor;\n}\n\n/*-------------------\n Active\n--------------------*/\n\n.ui.active.label {\n background-color: @labelActiveBackgroundColor;\n border-color: @labelActiveBackgroundColor;\n\n background-image: @labelActiveBackgroundImage;\n color: @labelActiveTextColor;\n}\n.ui.active.label:before {\n background-color: @labelActiveBackgroundColor;\n background-image: @labelActiveBackgroundImage;\n color: @labelActiveTextColor;\n}\n\n/*-------------------\n Active Hover\n--------------------*/\n\na.ui.labels .active.label:hover,\na.ui.active.label:hover {\n background-color: @labelActiveHoverBackgroundColor;\n border-color: @labelActiveHoverBackgroundColor;\n\n background-image: @labelActiveHoverBackgroundImage;\n color: @labelActiveHoverTextColor;\n}\n.ui.labels a.active.label:ActiveHover:before,\na.ui.active.label:ActiveHover:before {\n background-color: @labelActiveHoverBackgroundColor;\n background-image: @labelActiveHoverBackgroundImage;\n color: @labelActiveHoverTextColor;\n}\n\n\n/*-------------------\n Visible\n--------------------*/\n\n.ui.labels.visible .label,\n.ui.label.visible:not(.dropdown) {\n display: inline-block !important;\n}\n\n/*-------------------\n Hidden\n--------------------*/\n\n.ui.labels.hidden .label,\n.ui.label.hidden {\n display: none !important;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/*--- Red ---*/\n.ui.red.labels .label,\n.ui.red.label {\n background-color: @red !important;\n border-color: @red !important;\n color: @redTextColor !important;\n}\n/* Link */\n.ui.red.labels .label:hover,\na.ui.red.label:hover{\n background-color: @redHover !important;\n border-color: @redHover !important;\n color: @redHoverTextColor !important;\n}\n/* Corner */\n.ui.red.corner.label,\n.ui.red.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.red.ribbon.label {\n border-color: @redRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.red.label {\n background-color: @basicBackground !important;\n color: @red !important;\n border-color: @red !important;\n}\n.ui.basic.red.labels a.label:hover,\na.ui.basic.red.label:hover {\n background-color: @white !important;\n color: @redHover !important;\n border-color: @redHover !important;\n}\n\n/*--- Orange ---*/\n.ui.orange.labels .label,\n.ui.orange.label {\n background-color: @orange !important;\n border-color: @orange !important;\n color: @orangeTextColor !important;\n}\n/* Link */\n.ui.orange.labels .label:hover,\na.ui.orange.label:hover{\n background-color: @orangeHover !important;\n border-color: @orangeHover !important;\n color: @orangeHoverTextColor !important;\n}\n/* Corner */\n.ui.orange.corner.label,\n.ui.orange.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.orange.ribbon.label {\n border-color: @orangeRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.orange.label {\n background-color: @basicBackground !important;\n color: @orange !important;\n border-color: @orange !important;\n}\n.ui.basic.orange.labels a.label:hover,\na.ui.basic.orange.label:hover {\n background-color: @white !important;\n color: @orangeHover !important;\n border-color: @orangeHover !important;\n}\n\n/*--- Yellow ---*/\n.ui.yellow.labels .label,\n.ui.yellow.label {\n background-color: @yellow !important;\n border-color: @yellow !important;\n color: @yellowTextColor !important;\n}\n/* Link */\n.ui.yellow.labels .label:hover,\na.ui.yellow.label:hover{\n background-color: @yellowHover !important;\n border-color: @yellowHover !important;\n color: @yellowHoverTextColor !important;\n}\n/* Corner */\n.ui.yellow.corner.label,\n.ui.yellow.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.yellow.ribbon.label {\n border-color: @yellowRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.yellow.label {\n background-color: @basicBackground !important;\n color: @yellow !important;\n border-color: @yellow !important;\n}\n.ui.basic.yellow.labels a.label:hover,\na.ui.basic.yellow.label:hover {\n background-color: @white !important;\n color: @yellowHover !important;\n border-color: @yellowHover !important;\n}\n\n/*--- Olive ---*/\n.ui.olive.labels .label,\n.ui.olive.label {\n background-color: @olive !important;\n border-color: @olive !important;\n color: @oliveTextColor !important;\n}\n/* Link */\n.ui.olive.labels .label:hover,\na.ui.olive.label:hover{\n background-color: @oliveHover !important;\n border-color: @oliveHover !important;\n color: @oliveHoverTextColor !important;\n}\n/* Corner */\n.ui.olive.corner.label,\n.ui.olive.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.olive.ribbon.label {\n border-color: @greenRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.olive.label {\n background-color: @basicBackground !important;\n color: @olive !important;\n border-color: @olive !important;\n}\n.ui.basic.olive.labels a.label:hover,\na.ui.basic.olive.label:hover {\n background-color: @white !important;\n color: @oliveHover !important;\n border-color: @oliveHover !important;\n}\n\n/*--- Green ---*/\n.ui.green.labels .label,\n.ui.green.label {\n background-color: @green !important;\n border-color: @green !important;\n color: @greenTextColor !important;\n}\n/* Link */\n.ui.green.labels .label:hover,\na.ui.green.label:hover{\n background-color: @greenHover !important;\n border-color: @greenHover !important;\n color: @greenHoverTextColor !important;\n}\n/* Corner */\n.ui.green.corner.label,\n.ui.green.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.green.ribbon.label {\n border-color: @greenRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.green.label {\n background-color: @basicBackground !important;\n color: @green !important;\n border-color: @green !important;\n}\n.ui.basic.green.labels a.label:hover,\na.ui.basic.green.label:hover {\n background-color: @white !important;\n color: @greenHover !important;\n border-color: @greenHover !important;\n}\n\n/*--- Teal ---*/\n.ui.teal.labels .label,\n.ui.teal.label {\n background-color: @teal !important;\n border-color: @teal !important;\n color: @tealTextColor !important;\n}\n/* Link */\n.ui.teal.labels .label:hover,\na.ui.teal.label:hover{\n background-color: @tealHover !important;\n border-color: @tealHover !important;\n color: @tealHoverTextColor !important;\n}\n/* Corner */\n.ui.teal.corner.label,\n.ui.teal.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.teal.ribbon.label {\n border-color: @tealRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.teal.label {\n background-color: @basicBackground !important;\n color: @teal !important;\n border-color: @teal !important;\n}\n.ui.basic.teal.labels a.label:hover,\na.ui.basic.teal.label:hover {\n background-color: @white !important;\n color: @tealHover !important;\n border-color: @tealHover !important;\n}\n\n/*--- Blue ---*/\n.ui.blue.labels .label,\n.ui.blue.label {\n background-color: @blue !important;\n border-color: @blue !important;\n color: @blueTextColor !important;\n}\n/* Link */\n.ui.blue.labels .label:hover,\na.ui.blue.label:hover{\n background-color: @blueHover !important;\n border-color: @blueHover !important;\n color: @blueHoverTextColor !important;\n}\n/* Corner */\n.ui.blue.corner.label,\n.ui.blue.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.blue.ribbon.label {\n border-color: @blueRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.blue.label {\n background-color: @basicBackground !important;\n color: @blue !important;\n border-color: @blue !important;\n}\n.ui.basic.blue.labels a.label:hover,\na.ui.basic.blue.label:hover {\n background-color: @white !important;\n color: @blueHover !important;\n border-color: @blueHover !important;\n}\n\n/*--- Violet ---*/\n.ui.violet.labels .label,\n.ui.violet.label {\n background-color: @violet !important;\n border-color: @violet !important;\n color: @violetTextColor !important;\n}\n/* Link */\n.ui.violet.labels .label:hover,\na.ui.violet.label:hover{\n background-color: @violetHover !important;\n border-color: @violetHover !important;\n color: @violetHoverTextColor !important;\n}\n/* Corner */\n.ui.violet.corner.label,\n.ui.violet.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.violet.ribbon.label {\n border-color: @violetRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.violet.label {\n background-color: @basicBackground !important;\n color: @violet !important;\n border-color: @violet !important;\n}\n.ui.basic.violet.labels a.label:hover,\na.ui.basic.violet.label:hover {\n background-color: @white !important;\n color: @violetHover !important;\n border-color: @violetHover !important;\n}\n\n/*--- Purple ---*/\n.ui.purple.labels .label,\n.ui.purple.label {\n background-color: @purple !important;\n border-color: @purple !important;\n color: @purpleTextColor !important;\n}\n/* Link */\n.ui.purple.labels .label:hover,\na.ui.purple.label:hover{\n background-color: @purpleHover !important;\n border-color: @purpleHover !important;\n color: @purpleHoverTextColor !important;\n}\n/* Corner */\n.ui.purple.corner.label,\n.ui.purple.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.purple.ribbon.label {\n border-color: @purpleRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.purple.label {\n background-color: @basicBackground !important;\n color: @purple !important;\n border-color: @purple !important;\n}\n.ui.basic.purple.labels a.label:hover,\na.ui.basic.purple.label:hover {\n background-color: @white !important;\n color: @purpleHover !important;\n border-color: @purpleHover !important;\n}\n\n/*--- Pink ---*/\n.ui.pink.labels .label,\n.ui.pink.label {\n background-color: @pink !important;\n border-color: @pink !important;\n color: @pinkTextColor !important;\n}\n/* Link */\n.ui.pink.labels .label:hover,\na.ui.pink.label:hover{\n background-color: @pinkHover !important;\n border-color: @pinkHover !important;\n color: @pinkHoverTextColor !important;\n}\n/* Corner */\n.ui.pink.corner.label,\n.ui.pink.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.pink.ribbon.label {\n border-color: @pinkRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.pink.label {\n background-color: @basicBackground !important;\n color: @pink !important;\n border-color: @pink !important;\n}\n.ui.basic.pink.labels a.label:hover,\na.ui.basic.pink.label:hover {\n background-color: @white !important;\n color: @pinkHover !important;\n border-color: @pinkHover !important;\n}\n\n/*--- Brown ---*/\n.ui.brown.labels .label,\n.ui.brown.label {\n background-color: @brown !important;\n border-color: @brown !important;\n color: @brownTextColor !important;\n}\n/* Link */\n.ui.brown.labels .label:hover,\na.ui.brown.label:hover{\n background-color: @brownHover !important;\n border-color: @brownHover !important;\n color: @brownHoverTextColor !important;\n}\n/* Corner */\n.ui.brown.corner.label,\n.ui.brown.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.brown.ribbon.label {\n border-color: @brownRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.brown.label {\n background-color: @basicBackground !important;\n color: @brown !important;\n border-color: @brown !important;\n}\n.ui.basic.brown.labels a.label:hover,\na.ui.basic.brown.label:hover {\n background-color: @white !important;\n color: @brownHover !important;\n border-color: @brownHover !important;\n}\n\n/*--- Grey ---*/\n.ui.grey.labels .label,\n.ui.grey.label {\n background-color: @grey !important;\n border-color: @grey !important;\n color: @greyTextColor !important;\n}\n/* Link */\n.ui.grey.labels .label:hover,\na.ui.grey.label:hover{\n background-color: @greyHover !important;\n border-color: @greyHover !important;\n color: @greyHoverTextColor !important;\n}\n/* Corner */\n.ui.grey.corner.label,\n.ui.grey.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.grey.ribbon.label {\n border-color: @brownRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.grey.label {\n background-color: @basicBackground !important;\n color: @grey !important;\n border-color: @grey !important;\n}\n.ui.basic.grey.labels a.label:hover,\na.ui.basic.grey.label:hover {\n background-color: @white !important;\n color: @greyHover !important;\n border-color: @greyHover !important;\n}\n\n/*--- Black ---*/\n.ui.black.labels .label,\n.ui.black.label {\n background-color: @black !important;\n border-color: @black !important;\n color: @blackTextColor !important;\n}\n/* Link */\n.ui.black.labels .label:hover,\na.ui.black.label:hover{\n background-color: @blackHover !important;\n border-color: @blackHover !important;\n color: @blackHoverTextColor !important;\n}\n/* Corner */\n.ui.black.corner.label,\n.ui.black.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.black.ribbon.label {\n border-color: @brownRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.black.label {\n background-color: @basicBackground !important;\n color: @black !important;\n border-color: @black !important;\n}\n.ui.basic.black.labels a.label:hover,\na.ui.basic.black.label:hover {\n background-color: @white !important;\n color: @blackHover !important;\n border-color: @blackHover !important;\n}\n\n\n/*-------------------\n Basic\n--------------------*/\n\n.ui.basic.label {\n background: @basicBackground;\n border: @basicBorder;\n color: @basicColor;\n box-shadow: @basicBoxShadow;\n}\n\n/* Link */\na.ui.basic.label:hover {\n text-decoration: none;\n background: @basicHoverBackground;\n color: @basicHoverColor;\n box-shadow: @basicHoverBorder;\n box-shadow: @basicHoverBoxShadow;\n}\n\n/* Pointing */\n.ui.basic.pointing.label:before {\n border-color: inherit;\n}\n\n\n/*-------------------\n Fluid\n--------------------*/\n\n.ui.label.fluid,\n.ui.fluid.labels > .label {\n width: 100%;\n box-sizing: border-box;\n}\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.labels .label,\n.ui.inverted.label {\n color: @invertedTextColor !important;\n}\n\n/*-------------------\n Horizontal\n--------------------*/\n\n.ui.horizontal.labels .label,\n.ui.horizontal.label {\n margin: 0em @horizontalLabelMargin 0em 0em;\n\n padding: @horizontalLabelVerticalPadding @horizontalPadding;\n min-width: @horizontalLabelMinWidth;\n text-align: center;\n}\n\n\n/*-------------------\n Circular\n--------------------*/\n\n.ui.circular.labels .label,\n.ui.circular.label {\n min-width: @circularMinSize;\n min-height: @circularMinSize;\n\n padding: @circularPadding !important;\n\n line-height: 1em;\n text-align: center;\n border-radius: @circularRadius;\n}\n.ui.empty.circular.labels .label,\n.ui.empty.circular.label {\n min-width: 0em;\n min-height: 0em;\n overflow: hidden;\n width: @emptyCircleSize;\n height: @emptyCircleSize;\n vertical-align: baseline;\n}\n\n/*-------------------\n Pointing\n--------------------*/\n\n.ui.pointing.label {\n position: relative;\n}\n\n.ui.attached.pointing.label {\n position: absolute;\n}\n\n.ui.pointing.label:before {\n background-color: inherit;\n background-image: inherit;\n border-width: none;\n border-style: solid;\n border-color: @pointingBorderColor;\n}\n/* Arrow */\n.ui.pointing.label:before {\n position: absolute;\n content: '';\n transform: rotate(45deg);\n background-image: none;\n\n z-index: @pointingTriangleZIndex;\n width: @pointingTriangleSize;\n height: @pointingTriangleSize;\n transition: @pointingTriangleTransition;\n}\n\n/*--- Above ---*/\n.ui.pointing.label,\n.ui[class*=\"pointing above\"].label {\n margin-top: @pointingVerticalDistance;\n}\n.ui.pointing.label:before,\n.ui[class*=\"pointing above\"].label:before {\n border-width: @borderWidth 0px 0px @borderWidth;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n top: 0%;\n left: 50%;\n}\n/*--- Below ---*/\n.ui[class*=\"bottom pointing\"].label,\n.ui[class*=\"pointing below\"].label {\n margin-top: 0em;\n margin-bottom: @pointingVerticalDistance;\n}\n.ui[class*=\"bottom pointing\"].label:before,\n.ui[class*=\"pointing below\"].label:before {\n border-width: 0px @borderWidth @borderWidth 0px;\n top: auto;\n right: auto;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n top: 100%;\n left: 50%;\n}\n/*--- Left ---*/\n.ui[class*=\"left pointing\"].label {\n margin-top: 0em;\n margin-left: @pointingHorizontalDistance;\n}\n.ui[class*=\"left pointing\"].label:before {\n border-width: 0px 0px @borderWidth @borderWidth;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n bottom: auto;\n right: auto;\n top: 50%;\n left: 0em;\n}\n/*--- Right ---*/\n.ui[class*=\"right pointing\"].label {\n margin-top: 0em;\n margin-right: @pointingHorizontalDistance;\n}\n.ui[class*=\"right pointing\"].label:before {\n border-width: @borderWidth @borderWidth 0px 0px;\n transform: translateX(50%) translateY(-50%) rotate(45deg);\n top: 50%;\n right: 0%;\n bottom: auto;\n left: auto;\n}\n\n/* Basic Pointing */\n\n/*--- Above ---*/\n.ui.basic.pointing.label:before,\n.ui.basic[class*=\"pointing above\"].label:before {\n margin-top: @basicPointingTriangleOffset;\n}\n/*--- Below ---*/\n.ui.basic[class*=\"bottom pointing\"].label:before,\n.ui.basic[class*=\"pointing below\"].label:before {\n bottom: auto;\n top: 100%;\n margin-top: -@basicPointingTriangleOffset;\n}\n/*--- Left ---*/\n.ui.basic[class*=\"left pointing\"].label:before {\n top: 50%;\n left: @basicPointingTriangleOffset;\n}\n/*--- Right ---*/\n.ui.basic[class*=\"right pointing\"].label:before {\n top: 50%;\n right: @basicPointingTriangleOffset;\n}\n\n\n/*------------------\n Floating Label\n-------------------*/\n\n.ui.floating.label {\n position: absolute;\n z-index: @floatingZIndex;\n top: @floatingTopOffset;\n left: 100%;\n margin: 0em 0em 0em @floatingLeftOffset !important;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n.ui.mini.labels .label,\n.ui.mini.label {\n font-size: @mini;\n}\n.ui.tiny.labels .label,\n.ui.tiny.label {\n font-size: @tiny;\n}\n.ui.small.labels .label,\n.ui.small.label {\n font-size: @small;\n}\n.ui.labels .label,\n.ui.label {\n font-size: @medium;\n}\n.ui.large.labels .label,\n.ui.large.label {\n font-size: @large;\n}\n.ui.big.labels .label,\n.ui.big.label {\n font-size: @big;\n}\n.ui.huge.labels .label,\n.ui.huge.label {\n font-size: @huge;\n}\n.ui.massive.labels .label,\n.ui.massive.label {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/list.less", "content": "/*!\n * # Semantic UI - List\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'list';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n List\n*******************************/\n\nul.ui.list,\nol.ui.list,\n.ui.list {\n list-style-type: @listStyleType;\n margin: @margin;\n padding: @verticalPadding @horizontalPadding;\n}\n\nul.ui.list:first-child,\nol.ui.list:first-child,\n.ui.list:first-child {\n margin-top: 0em;\n padding-top: 0em;\n}\n\nul.ui.list:last-child,\nol.ui.list:last-child,\n.ui.list:last-child {\n margin-bottom: 0em;\n padding-bottom: 0em;\n}\n\n/*******************************\n Content\n*******************************/\n\n/* List Item */\nul.ui.list li,\nol.ui.list li,\n.ui.list > .item,\n.ui.list .list > .item {\n display: list-item;\n table-layout: fixed;\n list-style-type: @listStyleType;\n list-style-position: @listStylePosition;\n\n padding: @itemPadding;\n line-height: @itemLineHeight;\n}\n\nul.ui.list > li:first-child:after,\nol.ui.list > li:first-child:after,\n.ui.list > .list > .item,\n.ui.list > .item:after {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\nul.ui.list li:first-child,\nol.ui.list li:first-child,\n.ui.list .list > .item:first-child,\n.ui.list > .item:first-child {\n padding-top: 0em;\n}\nul.ui.list li:last-child,\nol.ui.list li:last-child,\n.ui.list .list > .item:last-child,\n.ui.list > .item:last-child {\n padding-bottom: 0em;\n}\n\n/* Child List */\nul.ui.list ul,\nol.ui.list ol,\n.ui.list .list {\n clear: both;\n margin: 0em;\n padding: @childListPadding;\n}\n\n/* Child Item */\nul.ui.list ul li,\nol.ui.list ol li,\n.ui.list .list > .item {\n padding: @childItemPadding;\n line-height: @childItemLineHeight;\n}\n\n\n/* Icon */\n.ui.list .list > .item > i.icon,\n.ui.list > .item > i.icon {\n display: table-cell;\n margin: 0em;\n padding-top: @iconOffset;\n padding-right: @iconDistance;\n vertical-align: @iconContentVerticalAlign;\n transition: @iconTransition;\n}\n.ui.list .list > .item > i.icon:only-child,\n.ui.list > .item > i.icon:only-child {\n display: inline-block;\n vertical-align: @iconVerticalAlign;\n}\n\n\n/* Image */\n.ui.list .list > .item > .image,\n.ui.list > .item > .image {\n display: table-cell;\n background-color: transparent;\n margin: 0em;\n vertical-align: @imageAlign;\n}\n.ui.list .list > .item > .image:not(:only-child):not(img),\n.ui.list > .item > .image:not(:only-child):not(img) {\n padding-right: @imageDistance;\n}\n.ui.list .list > .item > .image img,\n.ui.list > .item > .image img {\n vertical-align: @imageAlign;\n}\n\n.ui.list .list > .item > img.image,\n.ui.list .list > .item > .image:only-child,\n.ui.list > .item > img.image,\n.ui.list > .item > .image:only-child {\n display: inline-block;\n}\n\n/* Content */\n.ui.list .list > .item > .content,\n.ui.list > .item > .content {\n line-height: @contentLineHeight;\n}\n.ui.list .list > .item > .image + .content,\n.ui.list .list > .item > .icon + .content,\n.ui.list > .item > .image + .content,\n.ui.list > .item > .icon + .content {\n display: table-cell;\n padding: 0em 0em 0em @contentDistance;\n vertical-align: @contentVerticalAlign;\n}\n.ui.list .list > .item > img.image + .content,\n.ui.list > .item > img.image + .content {\n display: inline-block;\n}\n.ui.list .list > .item > .content > .list,\n.ui.list > .item > .content > .list {\n margin-left: 0em;\n padding-left: 0em;\n}\n\n/* Header */\n.ui.list .list > .item .header,\n.ui.list > .item .header {\n display: block;\n margin: 0em;\n font-family: @itemHeaderFontFamily;\n font-weight: @itemHeaderFontWeight;\n color: @itemHeaderColor;\n}\n\n/* Description */\n.ui.list .list > .item .description,\n.ui.list > .item .description {\n display: block;\n color: @itemDescriptionColor;\n}\n\n/* Child Link */\n.ui.list > .item a,\n.ui.list .list > .item a {\n cursor: pointer;\n}\n\n/* Linking Item */\n.ui.list .list > a.item,\n.ui.list > a.item {\n cursor: pointer;\n color: @itemLinkColor;\n}\n.ui.list .list > a.item:hover,\n.ui.list > a.item:hover {\n color: @itemLinkHoverColor;\n}\n\n/* Linked Item Icons */\n.ui.list .list > a.item i.icon,\n.ui.list > a.item i.icon {\n color: @itemLinkIconColor;\n}\n\n/* Header Link */\n.ui.list .list > .item a.header,\n.ui.list > .item a.header {\n cursor: pointer;\n color: @itemHeaderLinkColor !important;\n}\n.ui.list .list > .item a.header:hover,\n.ui.list > .item a.header:hover {\n color: @itemHeaderLinkHoverColor !important;\n}\n\n/* Floated Content */\n.ui[class*=\"left floated\"].list {\n float: left;\n}\n.ui[class*=\"right floated\"].list {\n float: right;\n}\n\n.ui.list .list > .item [class*=\"left floated\"],\n.ui.list > .item [class*=\"left floated\"] {\n float: left;\n margin: @leftFloatMargin;\n}\n.ui.list .list > .item [class*=\"right floated\"],\n.ui.list > .item [class*=\"right floated\"] {\n float: right;\n margin: @rightFloatMargin;\n}\n\n/*******************************\n Coupling\n*******************************/\n\n.ui.menu .ui.list > .item,\n.ui.menu .ui.list .list > .item {\n display: list-item;\n table-layout: fixed;\n background-color: transparent;\n\n list-style-type: @listStyleType;\n list-style-position: @listStylePosition;\n\n padding: @itemVerticalPadding @itemHorizontalPadding;\n line-height: @itemLineHeight;\n}\n.ui.menu .ui.list .list > .item:before,\n.ui.menu .ui.list > .item:before {\n border: none;\n background: none;\n}\n.ui.menu .ui.list .list > .item:first-child,\n.ui.menu .ui.list > .item:first-child {\n padding-top: 0em;\n}\n.ui.menu .ui.list .list > .item:last-child,\n.ui.menu .ui.list > .item:last-child {\n padding-bottom: 0em;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*-------------------\n Horizontal\n--------------------*/\n\n.ui.horizontal.list {\n display: inline-block;\n font-size: 0em;\n}\n.ui.horizontal.list > .item {\n display: inline-block;\n margin-left: @horizontalSpacing;\n font-size: 1rem;\n}\n.ui.horizontal.list:not(.celled) > .item:first-child {\n margin-left: 0em !important;\n padding-left: 0em !important;\n}\n.ui.horizontal.list .list {\n padding-left: 0em;\n padding-bottom: 0em;\n}\n\n.ui.horizontal.list > .item > .image,\n.ui.horizontal.list .list > .item > .image,\n.ui.horizontal.list > .item > .icon,\n.ui.horizontal.list .list > .item > .icon,\n.ui.horizontal.list > .item > .content,\n.ui.horizontal.list .list > .item > .content {\n vertical-align: @horizontalVerticalAlign;\n}\n\n/* Padding on all elements */\n.ui.horizontal.list > .item:first-child,\n.ui.horizontal.list > .item:last-child {\n padding-top: @itemVerticalPadding;\n padding-bottom: @itemVerticalPadding;\n}\n\n/* Horizontal List */\n.ui.horizontal.list > .item > i.icon {\n margin: 0em;\n padding: 0em @horizontalIconDistance 0em 0em;\n}\n.ui.horizontal.list > .item > .icon,\n.ui.horizontal.list > .item > .icon + .content {\n float: none;\n display: inline-block;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*-------------------\n Disabled\n--------------------*/\n\n.ui.list .list > .disabled.item,\n.ui.list > .disabled.item {\n pointer-events: none;\n color: @disabledColor !important;\n}\n.ui.inverted.list .list > .disabled.item,\n.ui.inverted.list > .disabled.item {\n color: @invertedDisabledColor !important;\n}\n\n/*-------------------\n Hover\n--------------------*/\n\n.ui.list .list > a.item:hover .icon,\n.ui.list > a.item:hover .icon {\n color: @itemLinkIconHoverColor;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.list .list > a.item > .icon,\n.ui.inverted.list > a.item > .icon {\n color: @invertedIconLinkColor;\n}\n.ui.inverted.list .list > .item .header,\n.ui.inverted.list > .item .header {\n color: @invertedHeaderColor;\n}\n.ui.inverted.list .list > .item .description,\n.ui.inverted.list > .item .description {\n color: @invertedDescriptionColor;\n}\n\n/* Item Link */\n.ui.inverted.list .list > a.item,\n.ui.inverted.list > a.item {\n cursor: pointer;\n color: @invertedItemLinkColor;\n}\n.ui.inverted.list .list > a.item:hover,\n.ui.inverted.list > a.item:hover {\n color: @invertedItemLinkHoverColor;\n}\n\n\n/* Linking Content */\n.ui.inverted.list .item a:not(.ui) {\n color: @invertedItemLinkColor !important;\n}\n.ui.inverted.list .item a:not(.ui):hover {\n color: @invertedItemLinkHoverColor !important;\n}\n\n/*-------------------\n Aligned\n--------------------*/\n\n.ui.list[class*=\"top aligned\"] .image,\n.ui.list[class*=\"top aligned\"] .content,\n.ui.list [class*=\"top aligned\"] {\n vertical-align: top !important;\n}\n.ui.list[class*=\"middle aligned\"] .image,\n.ui.list[class*=\"middle aligned\"] .content,\n.ui.list [class*=\"middle aligned\"] {\n vertical-align: middle !important;\n}\n.ui.list[class*=\"bottom aligned\"] .image,\n.ui.list[class*=\"bottom aligned\"] .content,\n.ui.list [class*=\"bottom aligned\"] {\n vertical-align: bottom !important;\n}\n\n/*-------------------\n Link\n--------------------*/\n\n.ui.link.list .item,\n.ui.link.list a.item,\n.ui.link.list .item a:not(.ui) {\n color: @linkListItemColor;\n transition: @linkListTransition;\n}\n.ui.link.list.list a.item:hover,\n.ui.link.list.list .item a:not(.ui):hover {\n color: @linkListItemHoverColor;\n}\n.ui.link.list.list a.item:active,\n.ui.link.list.list .item a:not(.ui):active {\n color: @linkListItemDownColor;\n}\n.ui.link.list.list .active.item,\n.ui.link.list.list .active.item a:not(.ui) {\n color: @linkListItemActiveColor;\n}\n\n/* Inverted */\n.ui.inverted.link.list .item,\n.ui.inverted.link.list a.item,\n.ui.inverted.link.list .item a:not(.ui) {\n color: @invertedLinkListItemColor;\n}\n.ui.inverted.link.list.list a.item:hover,\n.ui.inverted.link.list.list .item a:not(.ui):hover {\n color: @invertedLinkListItemHoverColor;\n}\n.ui.inverted.link.list.list a.item:active,\n.ui.inverted.link.list.list .item a:not(.ui):active {\n color: @invertedLinkListItemDownColor;\n}\n.ui.inverted.link.list.list a.active.item,\n.ui.inverted.link.list.list .active.item a:not(.ui) {\n color: @invertedLinkListItemActiveColor;\n}\n\n/*-------------------\n Selection\n--------------------*/\n\n.ui.selection.list .list > .item,\n.ui.selection.list > .item {\n cursor: pointer;\n background: @selectionListBackground;\n padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;\n margin: @selectionListItemMargin;\n color: @selectionListColor;\n border-radius: @selectionListItemBorderRadius;\n transition: @selectionListTransition;\n}\n.ui.selection.list .list > .item:last-child,\n.ui.selection.list > .item:last-child {\n margin-bottom: 0em;\n}\n.ui.selection.list.list > .item:hover,\n.ui.selection.list > .item:hover {\n background: @selectionListHoverBackground;\n color: @selectionListHoverColor;\n}\n.ui.selection.list .list > .item:active,\n.ui.selection.list > .item:active {\n background: @selectionListDownBackground;\n color: @selectionListDownColor;\n}\n.ui.selection.list .list > .item.active,\n.ui.selection.list > .item.active {\n background: @selectionListActiveBackground;\n color: @selectionListActiveColor;\n}\n\n/* Inverted */\n.ui.inverted.selection.list > .item,\n.ui.inverted.selection.list > .item {\n background: @invertedSelectionListBackground;\n color: @invertedSelectionListColor;\n}\n.ui.inverted.selection.list > .item:hover,\n.ui.inverted.selection.list > .item:hover {\n background: @invertedSelectionListHoverBackground;\n color: @invertedSelectionListHoverColor;\n}\n.ui.inverted.selection.list > .item:active,\n.ui.inverted.selection.list > .item:active {\n background: @invertedSelectionListDownBackground;\n color: @invertedSelectionListDownColor;\n}\n.ui.inverted.selection.list > .item.active,\n.ui.inverted.selection.list > .item.active {\n background: @invertedSelectionListActiveBackground;\n color: @invertedSelectionListActiveColor;\n}\n\n/* Celled / Divided Selection List */\n.ui.celled.selection.list .list > .item,\n.ui.divided.selection.list .list > .item,\n.ui.celled.selection.list > .item,\n.ui.divided.selection.list > .item {\n border-radius: 0em;\n}\n\n/*-------------------\n Animated\n--------------------*/\n\n.ui.animated.list > .item {\n transition: @animatedListTransition;\n}\n.ui.animated.list:not(.horizontal) > .item:hover {\n padding-left: @animatedListIndent;\n}\n\n/*-------------------\n Fitted\n--------------------*/\n.ui.fitted.list:not(.selection) .list > .item,\n.ui.fitted.list:not(.selection) > .item {\n padding-left: 0em;\n padding-right: 0em;\n}\n.ui.fitted.selection.list .list > .item,\n.ui.fitted.selection.list > .item {\n margin-left: -@selectionListItemHorizontalPadding;\n margin-right: -@selectionListItemHorizontalPadding;\n}\n\n/*-------------------\n Bulleted\n--------------------*/\n\nul.ui.list,\n.ui.bulleted.list {\n margin-left: @bulletDistance;\n}\nul.ui.list li,\n.ui.bulleted.list .list > .item,\n.ui.bulleted.list > .item {\n position: relative;\n}\nul.ui.list li:before,\n.ui.bulleted.list .list > .item:before,\n.ui.bulleted.list > .item:before {\n user-select: none;\n pointer-events: none;\n position: absolute;\n top: auto;\n left: auto;\n font-weight: @normal;\n margin-left: @bulletOffset;\n content: @bulletCharacter;\n opacity: @bulletOpacity;\n color: @bulletColor;\n vertical-align: @bulletVerticalAlign;\n}\n\nul.ui.list li:before,\n.ui.bulleted.list .list > a.item:before,\n.ui.bulleted.list > a.item:before {\n color: @bulletLinkColor;\n}\n\nul.ui.list ul,\n.ui.bulleted.list .list {\n padding-left: @bulletChildDistance;\n}\n\n/* Horizontal Bulleted */\nul.ui.horizontal.bulleted.list,\n.ui.horizontal.bulleted.list {\n margin-left: 0em;\n}\nul.ui.horizontal.bulleted.list li,\n.ui.horizontal.bulleted.list > .item {\n margin-left: @horizontalBulletSpacing;\n}\nul.ui.horizontal.bulleted.list li:first-child,\n.ui.horizontal.bulleted.list > .item:first-child {\n margin-left: 0em;\n}\nul.ui.horizontal.bulleted.list li::before,\n.ui.horizontal.bulleted.list > .item::before {\n color: @horizontalBulletColor;\n}\nul.ui.horizontal.bulleted.list li:first-child::before,\n.ui.horizontal.bulleted.list > .item:first-child::before {\n display: none;\n}\n\n/*-------------------\n Ordered\n--------------------*/\n\nol.ui.list,\n.ui.ordered.list,\n.ui.ordered.list .list,\nol.ui.list ol {\n counter-reset: ordered;\n margin-left: @orderedCountDistance;\n list-style-type: none;\n}\nol.ui.list li,\n.ui.ordered.list .list > .item,\n.ui.ordered.list > .item {\n list-style-type: none;\n position: relative;\n}\nol.ui.list li:before,\n.ui.ordered.list .list > .item:before,\n.ui.ordered.list > .item:before {\n position: absolute;\n top: auto;\n left: auto;\n user-select: none;\n pointer-events: none;\n margin-left: -(@orderedCountDistance);\n counter-increment: @orderedCountName;\n content: @orderedCountContent;\n text-align: @orderedCountTextAlign;\n color: @orderedCountColor;\n vertical-align: @orderedCountVerticalAlign;\n opacity: @orderedCountOpacity;\n}\n\nol.ui.inverted.list li:before,\n.ui.ordered.inverted.list .list > .item:before,\n.ui.ordered.inverted.list > .item:before {\n color: @orderedInvertedCountColor;\n}\n\n/* Value */\n.ui.ordered.list > .list > .item[data-value],\n.ui.ordered.list > .item[data-value] {\n content: attr(data-value);\n}\nol.ui.list li[value]:before {\n content: attr(value);\n}\n\n/* Child Lists */\nol.ui.list ol,\n.ui.ordered.list .list {\n margin-left: @orderedChildCountDistance;\n}\nol.ui.list ol li:before,\n.ui.ordered.list .list > .item:before {\n margin-left: @orderedChildCountOffset;\n}\n\n/* Horizontal Ordered */\nol.ui.horizontal.list,\n.ui.ordered.horizontal.list {\n margin-left: 0em;\n}\nol.ui.horizontal.list li:before,\n.ui.ordered.horizontal.list .list > .item:before,\n.ui.ordered.horizontal.list > .item:before {\n position: static;\n margin: 0em @horizontalOrderedCountDistance 0em 0em;\n}\n\n/*-------------------\n Divided\n--------------------*/\n\n.ui.divided.list > .item {\n border-top: @dividedBorder;\n}\n.ui.divided.list .list > .item {\n border-top: @dividedChildListBorder;\n}\n.ui.divided.list .item .list > .item {\n border-top: @dividedChildItemBorder;\n}\n.ui.divided.list .list > .item:first-child,\n.ui.divided.list > .item:first-child {\n border-top: none;\n}\n\n/* Sub Menu */\n.ui.divided.list:not(.horizontal) .list > .item:first-child {\n border-top-width: @dividedBorderWidth;\n}\n\n/* Divided bulleted */\n.ui.divided.bulleted.list:not(.horizontal),\n.ui.divided.bulleted.list .list {\n margin-left: 0em;\n padding-left: 0em;\n}\n.ui.divided.bulleted.list > .item:not(.horizontal) {\n padding-left: @bulletDistance;\n}\n\n/* Divided Ordered */\n.ui.divided.ordered.list {\n margin-left: 0em;\n}\n.ui.divided.ordered.list .list > .item,\n.ui.divided.ordered.list > .item {\n padding-left: @orderedCountDistance;\n}\n.ui.divided.ordered.list .item .list {\n margin-left: 0em;\n margin-right: 0em;\n padding-bottom: @itemVerticalPadding;\n}\n.ui.divided.ordered.list .item .list > .item {\n padding-left: @orderedChildCountDistance;\n}\n\n/* Divided Selection */\n.ui.divided.selection.list .list > .item,\n.ui.divided.selection.list > .item {\n margin: 0em;\n border-radius: 0em;\n}\n\n/* Divided horizontal */\n.ui.divided.horizontal.list {\n margin-left: 0em;\n}\n.ui.divided.horizontal.list > .item:not(:first-child) {\n padding-left: @horizontalDividedSpacing;\n}\n.ui.divided.horizontal.list > .item:not(:last-child) {\n padding-right: @horizontalDividedSpacing;\n}\n.ui.divided.horizontal.list > .item {\n border-top: none;\n border-left: @dividedBorder;\n margin: 0em;\n line-height: @horizontalDividedLineHeight;\n}\n.ui.horizontal.divided.list > .item:first-child {\n border-left: none;\n}\n/* Inverted */\n.ui.divided.inverted.list > .item,\n.ui.divided.inverted.list > .list,\n.ui.divided.inverted.horizontal.list > .item {\n border-color: @dividedInvertedBorderColor;\n}\n\n\n/*-------------------\n Celled\n--------------------*/\n\n.ui.celled.list > .item,\n.ui.celled.list > .list {\n border-top: @celledBorder;\n padding-left: @celledHorizontalPadding;\n padding-right: @celledHorizontalPadding;\n}\n.ui.celled.list > .item:last-child {\n border-bottom: @celledBorder;\n}\n\n/* Padding on all elements */\n.ui.celled.list > .item:first-child,\n.ui.celled.list > .item:last-child {\n padding-top: @itemVerticalPadding;\n padding-bottom: @itemVerticalPadding;\n}\n\n/* Sub Menu */\n.ui.celled.list .item .list > .item {\n border-width: 0px;\n}\n.ui.celled.list .list > .item:first-child {\n border-top-width: 0px;\n}\n\n/* Celled Bulleted */\n.ui.celled.bulleted.list {\n margin-left: 0em;\n}\n.ui.celled.bulleted.list .list > .item,\n.ui.celled.bulleted.list > .item {\n padding-left: (@bulletDistance);\n}\n.ui.celled.bulleted.list .item .list {\n margin-left: -(@bulletDistance);\n margin-right: -(@bulletDistance);\n padding-bottom: @itemVerticalPadding;\n}\n\n/* Celled Ordered */\n.ui.celled.ordered.list {\n margin-left: 0em;\n}\n.ui.celled.ordered.list .list > .item,\n.ui.celled.ordered.list > .item {\n padding-left: @orderedCountDistance;\n}\n.ui.celled.ordered.list .item .list {\n margin-left: 0em;\n margin-right: 0em;\n padding-bottom: @itemVerticalPadding;\n}\n.ui.celled.ordered.list .list > .item {\n padding-left: @orderedChildCountDistance;\n}\n\n/* Celled Horizontal */\n.ui.horizontal.celled.list {\n margin-left: 0em;\n}\n.ui.horizontal.celled.list .list > .item,\n.ui.horizontal.celled.list > .item {\n border-top: none;\n border-left: @celledBorder;\n margin: 0em;\n padding-left: @horizontalCelledSpacing;\n padding-right: @horizontalCelledSpacing;\n\n line-height: @horizontalCelledLineHeight;\n}\n.ui.horizontal.celled.list .list > .item:last-child,\n.ui.horizontal.celled.list > .item:last-child {\n border-bottom: none;\n border-right: @celledBorder;\n}\n\n/* Inverted */\n.ui.celled.inverted.list > .item,\n.ui.celled.inverted.list > .list {\n border-color: @celledInvertedBorder;\n}\n.ui.celled.inverted.horizontal.list .list > .item,\n.ui.celled.inverted.horizontal.list > .item {\n border-color: @celledInvertedBorder;\n}\n\n/*-------------------\n Relaxed\n--------------------*/\n\n.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {\n padding-top: @relaxedItemVerticalPadding;\n}\n.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {\n padding-bottom: @relaxedItemVerticalPadding;\n}\n.ui.horizontal.relaxed.list .list > .item:not(:first-child),\n.ui.horizontal.relaxed.list > .item:not(:first-child) {\n padding-left: @relaxedHorizontalPadding;\n}\n.ui.horizontal.relaxed.list .list > .item:not(:last-child),\n.ui.horizontal.relaxed.list > .item:not(:last-child) {\n padding-right: @relaxedHorizontalPadding;\n}\n\n/* Very Relaxed */\n.ui[class*=\"very relaxed\"].list:not(.horizontal) > .item:not(:first-child) {\n padding-top: @veryRelaxedItemVerticalPadding;\n}\n.ui[class*=\"very relaxed\"].list:not(.horizontal) > .item:not(:last-child) {\n padding-bottom: @veryRelaxedItemVerticalPadding;\n}\n.ui.horizontal[class*=\"very relaxed\"].list .list > .item:not(:first-child),\n.ui.horizontal[class*=\"very relaxed\"].list > .item:not(:first-child) {\n padding-left: @veryRelaxedHorizontalPadding;\n}\n.ui.horizontal[class*=\"very relaxed\"].list .list > .item:not(:last-child),\n.ui.horizontal[class*=\"very relaxed\"].list > .item:not(:last-child) {\n padding-right: @veryRelaxedHorizontalPadding;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n.ui.mini.list {\n font-size: @relativeMini;\n}\n.ui.tiny.list {\n font-size: @relativeTiny;\n}\n.ui.small.list {\n font-size: @relativeSmall;\n}\n.ui.list {\n font-size: @relativeMedium;\n}\n.ui.large.list {\n font-size: @relativeLarge;\n}\n.ui.big.list {\n font-size: @relativeBig;\n}\n.ui.huge.list {\n font-size: @relativeHuge;\n}\n.ui.massive.list {\n font-size: @relativeMassive;\n}\n\n.ui.mini.horizontal.list .list > .item,\n.ui.mini.horizontal.list > .item {\n font-size: @mini;\n}\n.ui.tiny.horizontal.list .list > .item,\n.ui.tiny.horizontal.list > .item {\n font-size: @tiny;\n}\n.ui.small.horizontal.list .list > .item,\n.ui.small.horizontal.list > .item {\n font-size: @small;\n}\n.ui.horizontal.list .list > .item,\n.ui.horizontal.list > .item {\n font-size: @medium;\n}\n.ui.large.horizontal.list .list > .item,\n.ui.large.horizontal.list > .item {\n font-size: @large;\n}\n.ui.big.horizontal.list .list > .item,\n.ui.big.horizontal.list > .item {\n font-size: @big;\n}\n.ui.huge.horizontal.list .list > .item,\n.ui.huge.horizontal.list > .item {\n font-size: @huge;\n}\n.ui.massive.horizontal.list .list > .item,\n.ui.massive.horizontal.list > .item {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n\n" }, { "path": "parrot/semantic/src/definitions/elements/loader.less", "content": "/*!\n * # Semantic UI - Loader\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'loader';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Loader\n*******************************/\n\n\n/* Standard Size */\n.ui.loader {\n display: none;\n position: absolute;\n top: @loaderTopOffset;\n left: @loaderLeftOffset;\n margin: 0px;\n text-align: center;\n z-index: 1000;\n transform: translateX(-50%) translateY(-50%);\n}\n\n/* Static Shape */\n.ui.loader:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 50%;\n width: 100%;\n height: 100%;\n\n border-radius: @circularRadius;\n border: @loaderLineWidth solid @loaderFillColor;\n}\n\n/* Active Shape */\n.ui.loader:after {\n position: absolute;\n content: '';\n top: 0%;\n left: 50%;\n width: 100%;\n height: 100%;\n\n animation: loader @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @shapeBorderColor;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n}\n\n/* Active Animation */\n@keyframes loader {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Sizes */\n.ui.mini.loader:before,\n.ui.mini.loader:after {\n width: @mini;\n height: @mini;\n margin: @miniOffset;\n}\n.ui.tiny.loader:before,\n.ui.tiny.loader:after {\n width: @tiny;\n height: @tiny;\n margin: @tinyOffset;\n}\n.ui.small.loader:before,\n.ui.small.loader:after {\n width: @small;\n height: @small;\n margin: @smallOffset;\n}\n.ui.loader:before,\n.ui.loader:after {\n width: @medium;\n height: @medium;\n margin: @mediumOffset;\n}\n.ui.large.loader:before,\n.ui.large.loader:after {\n width: @large;\n height: @large;\n margin: @largeOffset;\n}\n.ui.big.loader:before,\n.ui.big.loader:after {\n width: @big;\n height: @big;\n margin: @bigOffset;\n}\n.ui.huge.loader:before,\n.ui.huge.loader:after {\n width: @huge;\n height: @huge;\n margin: @hugeOffset;\n}\n.ui.massive.loader:before,\n.ui.massive.loader:after {\n width: @massive;\n height: @massive;\n margin: @massiveOffset;\n}\n\n/*-------------------\n Coupling\n--------------------*/\n\n/* Show inside active dimmer */\n.ui.dimmer .loader {\n display: block;\n}\n\n/* Black Dimmer */\n.ui.dimmer .ui.loader {\n color: @invertedLoaderTextColor;\n}\n.ui.dimmer .ui.loader:before {\n border-color: @invertedLoaderFillColor;\n}\n.ui.dimmer .ui.loader:after {\n border-color: @invertedShapeBorderColor;\n}\n\n/* White Dimmer (Inverted) */\n.ui.inverted.dimmer .ui.loader {\n color: @loaderTextColor;\n}\n.ui.inverted.dimmer .ui.loader:before {\n border-color: @loaderFillColor;\n}\n.ui.inverted.dimmer .ui.loader:after {\n border-color: @shapeBorderColor;\n}\n\n/*******************************\n Types\n*******************************/\n\n\n/*-------------------\n Text\n--------------------*/\n\n.ui.text.loader {\n width: auto !important;\n height: auto !important;\n text-align: center;\n font-style: normal;\n}\n\n\n/*******************************\n States\n*******************************/\n\n.ui.indeterminate.loader:after {\n animation-direction: @indeterminateDirection;\n animation-duration: @indeterminateSpeed;\n}\n\n.ui.loader.active,\n.ui.loader.visible {\n display: block;\n}\n.ui.loader.disabled,\n.ui.loader.hidden {\n display: none;\n}\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Sizes\n--------------------*/\n\n\n/* Loader */\n.ui.inverted.dimmer .ui.mini.loader,\n.ui.mini.loader {\n width: @mini;\n height: @mini;\n font-size: @miniFontSize;\n}\n.ui.inverted.dimmer .ui.tiny.loader,\n.ui.tiny.loader {\n width: @tiny;\n height: @tiny;\n font-size: @tinyFontSize;\n}\n.ui.inverted.dimmer .ui.small.loader,\n.ui.small.loader {\n width: @small;\n height: @small;\n font-size: @smallFontSize;\n}\n.ui.inverted.dimmer .ui.loader,\n.ui.loader {\n width: @medium;\n height: @medium;\n font-size: @mediumFontSize;\n}\n.ui.inverted.dimmer .ui.large.loader,\n.ui.large.loader {\n width: @large;\n height: @large;\n font-size: @largeFontSize;\n}\n.ui.inverted.dimmer .ui.big.loader,\n.ui.big.loader {\n width: @big;\n height: @big;\n font-size: @bigFontSize;\n}\n.ui.inverted.dimmer .ui.huge.loader,\n.ui.huge.loader {\n width: @huge;\n height: @huge;\n font-size: @hugeFontSize;\n}\n.ui.inverted.dimmer .ui.massive.loader,\n.ui.massive.loader {\n width: @massive;\n height: @massive;\n font-size: @massiveFontSize;\n}\n\n/* Text Loader */\n.ui.mini.text.loader {\n min-width: @mini;\n padding-top: (@mini + @textDistance);\n}\n.ui.tiny.text.loader {\n min-width: @tiny;\n padding-top: (@tiny + @textDistance);\n}\n.ui.small.text.loader {\n min-width: @small;\n padding-top: (@small + @textDistance);\n}\n.ui.text.loader {\n min-width: @medium;\n padding-top: (@medium + @textDistance);\n}\n.ui.large.text.loader {\n min-width: @large;\n padding-top: (@large + @textDistance);\n}\n.ui.big.text.loader {\n min-width: @big;\n padding-top: (@big + @textDistance);\n}\n.ui.huge.text.loader {\n min-width: @huge;\n padding-top: (@huge + @textDistance);\n}\n.ui.massive.text.loader {\n min-width: @massive;\n padding-top: (@massive + @textDistance);\n}\n\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.loader {\n color: @invertedLoaderTextColor\n}\n.ui.inverted.loader:before {\n border-color: @invertedLoaderFillColor;\n}\n.ui.inverted.loader:after {\n border-top-color: @invertedLoaderLineColor;\n}\n\n/*-------------------\n Inline\n--------------------*/\n\n.ui.inline.loader {\n position: relative;\n vertical-align: @inlineVerticalAlign;\n margin: @inlineMargin;\n left: 0em;\n top: 0em;\n transform: none;\n}\n\n.ui.inline.loader.active,\n.ui.inline.loader.visible {\n display: inline-block;\n}\n\n/* Centered Inline */\n.ui.centered.inline.loader.active,\n.ui.centered.inline.loader.visible {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/rail.less", "content": "/*!\n * # Semantic UI - Rail\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'rail';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Rails\n*******************************/\n\n.ui.rail {\n position: absolute;\n top: 0%;\n width: @width;\n height: @height;\n}\n\n.ui.left.rail {\n left: auto;\n right: 100%;\n padding: 0em @splitDistance 0em 0em;\n margin: 0em @splitDistance 0em 0em;\n}\n\n.ui.right.rail {\n left: 100%;\n right: auto;\n padding: 0em 0em 0em @splitDistance;\n margin: 0em 0em 0em @splitDistance;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Internal\n---------------*/\n\n.ui.left.internal.rail {\n left: 0%;\n right: auto;\n padding: 0em 0em 0em @splitDistance;\n margin: 0em 0em 0em @splitDistance;\n}\n\n.ui.right.internal.rail {\n left: auto;\n right: 0%;\n padding: 0em @splitDistance 0em 0em;\n margin: 0em @splitDistance 0em 0em;\n}\n\n\n/*--------------\n Dividing\n---------------*/\n\n.ui.dividing.rail {\n width: @dividingWidth;\n}\n.ui.left.dividing.rail {\n padding: 0em @splitDividingDistance 0em 0em;\n margin: 0em @splitDividingDistance 0em 0em;\n border-right: @dividingBorder;\n}\n.ui.right.dividing.rail {\n border-left: @dividingBorder;\n padding: 0em 0em 0em @splitDividingDistance;\n margin: 0em 0em 0em @splitDividingDistance;\n}\n\n/*--------------\n Distance\n---------------*/\n\n.ui.close.rail {\n width: @closeWidth;\n}\n.ui.close.left.rail {\n padding: 0em @splitCloseDistance 0em 0em;\n margin: 0em @splitCloseDistance 0em 0em;\n}\n.ui.close.right.rail {\n padding: 0em 0em 0em @splitCloseDistance;\n margin: 0em 0em 0em @splitCloseDistance;\n}\n\n.ui.very.close.rail {\n width: @veryCloseWidth;\n}\n.ui.very.close.left.rail {\n padding: 0em @splitVeryCloseDistance 0em 0em;\n margin: 0em @splitVeryCloseDistance 0em 0em;\n}\n.ui.very.close.right.rail {\n padding: 0em 0em 0em @splitVeryCloseDistance;\n margin: 0em 0em 0em @splitVeryCloseDistance;\n}\n\n/*--------------\n Attached\n---------------*/\n\n.ui.attached.left.rail,\n.ui.attached.right.rail {\n padding: 0em;\n margin: 0em;\n}\n\n/*--------------\n Sizing\n---------------*/\n\n.ui.mini.rail {\n font-size: @mini;\n}\n.ui.tiny.rail {\n font-size: @tiny;\n}\n.ui.small.rail {\n font-size: @small;\n}\n.ui.rail {\n font-size: @medium;\n}\n.ui.large.rail {\n font-size: @large;\n}\n.ui.big.rail {\n font-size: @big;\n}\n.ui.huge.rail {\n font-size: @huge;\n}\n.ui.massive.rail {\n font-size: @massive;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/reveal.less", "content": "/*!\n * # Semantic UI - Reveal\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'reveal';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Reveal\n*******************************/\n\n.ui.reveal {\n display: inherit;\n position: relative !important;\n font-size: 0em !important;\n}\n\n.ui.reveal > .visible.content {\n position: absolute !important;\n top: 0em !important;\n left: 0em !important;\n z-index: @topZIndex !important;\n transition: @transition;\n}\n.ui.reveal > .hidden.content {\n position: relative !important;\n z-index: @bottomZIndex !important;\n}\n\n/* Make sure hovered element is on top of other reveal */\n.ui.active.reveal .visible.content,\n.ui.reveal:hover .visible.content {\n z-index: @activeZIndex !important;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n\n/*--------------\n Slide\n---------------*/\n\n.ui.slide.reveal {\n position: relative !important;\n overflow: hidden !important;\n white-space: nowrap;\n}\n\n.ui.slide.reveal > .content {\n display: block;\n width: 100%;\n white-space: normal;\n float: left;\n\n margin: 0em;\n transition: @slideTransition;\n}\n\n.ui.slide.reveal > .visible.content {\n position: relative !important;\n}\n.ui.slide.reveal > .hidden.content {\n position: absolute !important;\n left: 0% !important;\n width: 100% !important;\n transform: translateX(100%) !important;\n}\n.ui.slide.active.reveal > .visible.content,\n.ui.slide.reveal:hover > .visible.content {\n transform: translateX(-100%) !important;\n}\n.ui.slide.active.reveal > .hidden.content,\n.ui.slide.reveal:hover > .hidden.content {\n transform: translateX(0%) !important;\n}\n\n.ui.slide.right.reveal > .visible.content {\n transform: translateX(0%) !important;\n}\n.ui.slide.right.reveal > .hidden.content {\n transform: translateX(-100%) !important;\n}\n.ui.slide.right.active.reveal > .visible.content,\n.ui.slide.right.reveal:hover > .visible.content {\n transform: translateX(100%) !important;\n}\n.ui.slide.right.active.reveal > .hidden.content,\n.ui.slide.right.reveal:hover > .hidden.content {\n transform: translateX(0%) !important;\n}\n\n.ui.slide.up.reveal > .hidden.content {\n transform: translateY(100%) !important;\n}\n.ui.slide.up.active.reveal > .visible.content,\n.ui.slide.up.reveal:hover > .visible.content {\n transform: translateY(-100%) !important;\n}\n.ui.slide.up.active.reveal > .hidden.content,\n.ui.slide.up.reveal:hover > .hidden.content {\n transform: translateY(0%) !important;\n}\n\n.ui.slide.down.reveal > .hidden.content {\n transform: translateY(-100%) !important;\n}\n.ui.slide.down.active.reveal > .visible.content,\n.ui.slide.down.reveal:hover > .visible.content {\n transform: translateY(100%) !important;\n}\n.ui.slide.down.active.reveal > .hidden.content,\n.ui.slide.down.reveal:hover > .hidden.content {\n transform: translateY(0%) !important;\n}\n\n\n/*--------------\n Fade\n---------------*/\n\n.ui.fade.reveal > .visible.content {\n opacity: 1;\n}\n.ui.fade.active.reveal > .visible.content,\n.ui.fade.reveal:hover > .visible.content {\n opacity: 0;\n}\n\n\n/*--------------\n Move\n---------------*/\n\n.ui.move.reveal {\n position: relative !important;\n overflow: hidden !important;\n white-space: nowrap;\n}\n\n.ui.move.reveal > .content {\n display: block;\n float: left;\n white-space: normal;\n\n margin: 0em;\n transition: @moveTransition;\n}\n\n.ui.move.reveal > .visible.content {\n position: relative !important;\n}\n.ui.move.reveal > .hidden.content {\n position: absolute !important;\n left: 0% !important;\n width: 100% !important;\n}\n.ui.move.active.reveal > .visible.content,\n.ui.move.reveal:hover > .visible.content {\n transform: translateX(-100%) !important;\n}\n.ui.move.right.active.reveal > .visible.content,\n.ui.move.right.reveal:hover > .visible.content {\n transform: translateX(100%) !important;\n}\n.ui.move.up.active.reveal > .visible.content,\n.ui.move.up.reveal:hover > .visible.content {\n transform: translateY(-100%) !important;\n}\n.ui.move.down.active.reveal > .visible.content,\n.ui.move.down.reveal:hover > .visible.content {\n transform: translateY(100%) !important;\n}\n\n\n\n/*--------------\n Rotate\n---------------*/\n\n.ui.rotate.reveal > .visible.content {\n transition-duration: @transitionDuration;\n transform: rotate(0deg);\n}\n\n.ui.rotate.reveal > .visible.content,\n.ui.rotate.right.reveal > .visible.content {\n transform-origin: bottom right;\n}\n.ui.rotate.active.reveal > .visible.content,\n.ui.rotate.reveal:hover > .visible.content,\n.ui.rotate.right.active.reveal > .visible.content,\n.ui.rotate.right.reveal:hover > .visible.content {\n transform: rotate(@rotateDegrees);\n}\n\n.ui.rotate.left.reveal > .visible.content {\n transform-origin: bottom left;\n}\n.ui.rotate.left.active.reveal > .visible.content,\n.ui.rotate.left.reveal:hover > .visible.content {\n transform: rotate(-@rotateDegrees);\n}\n\n/*******************************\n States\n*******************************/\n\n.ui.disabled.reveal:hover > .visible.visible.content {\n position: static !important;\n display: block !important;\n opacity: 1 !important;\n top: 0 !important;\n left: 0 !important;\n right: auto !important;\n bottom: auto !important;\n transform: none !important;\n}\n.ui.disabled.reveal:hover > .hidden.hidden.content {\n display: none !important;\n}\n\n\n/*******************************\n Coupling\n*******************************/\n\n.ui.reveal > .ui.ribbon.label {\n z-index: @overlayZIndex;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Visible\n---------------*/\n\n.ui.visible.reveal {\n overflow: visible;\n}\n\n/*--------------\n Instant\n---------------*/\n\n.ui.instant.reveal > .content {\n transition-delay: 0s !important;\n}\n\n\n/*--------------\n Sizing\n---------------*/\n\n.ui.reveal > .content {\n font-size: @medium !important;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/segment.less", "content": "/*!\n * # Semantic UI - Segment\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'segment';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Segment\n*******************************/\n\n.ui.segment {\n position: relative;\n background: @background;\n box-shadow: @boxShadow;\n margin: @margin;\n padding: @padding;\n border-radius: @borderRadius;\n border: @border;\n}\n\n.ui.segment:first-child {\n margin-top: 0em;\n}\n.ui.segment:last-child {\n margin-bottom: 0em;\n}\n\n\n/* Vertical */\n.ui.vertical.segment {\n margin: 0em;\n padding-left: 0em;\n padding-right: 0em;\n\n background: none transparent;\n border-radius: 0px;\n box-shadow: none;\n border: none;\n border-bottom: @borderWidth solid @borderColor;\n}\n.ui.vertical.segment:last-child {\n border-bottom: none;\n}\n\n\n/*-------------------\n Loose Coupling\n--------------------*/\n\n/* Header */\n.ui.inverted.segment > .ui.header {\n color: @white;\n}\n\n/* Label */\n.ui[class*=\"bottom attached\"].segment > [class*=\"top attached\"].label {\n border-top-left-radius: 0em;\n border-top-right-radius: 0em;\n}\n.ui[class*=\"top attached\"].segment > [class*=\"bottom attached\"].label {\n border-bottom-left-radius: 0em;\n border-bottom-right-radius: 0em;\n}\n.ui.attached.segment:not(.top):not(.bottom) > [class*=\"top attached\"].label {\n border-top-left-radius: 0em;\n border-top-right-radius: 0em;\n}\n.ui.attached.segment:not(.top):not(.bottom) > [class*=\"bottom attached\"].label {\n border-bottom-left-radius: 0em;\n border-bottom-right-radius: 0em;\n}\n\n/* Grid */\n.ui.page.grid.segment,\n.ui.grid > .row > .ui.segment.column,\n.ui.grid > .ui.segment.column {\n padding-top: @pageGridMargin;\n padding-bottom: @pageGridMargin;\n}\n.ui.grid.segment {\n margin: @margin;\n border-radius: @borderRadius;\n}\n\n/* Table */\n.ui.basic.table.segment {\n background: @background;\n border: @border;\n box-shadow: @boxShadow;\n}\n.ui[class*=\"very basic\"].table.segment {\n padding: @padding;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*-------------------\n Piled\n--------------------*/\n\n.ui.piled.segments,\n.ui.piled.segment {\n margin: @piledMargin 0em;\n box-shadow: @piledBoxShadow;\n z-index: @piledZIndex;\n}\n.ui.piled.segment:first-child {\n margin-top: 0em;\n}\n.ui.piled.segment:last-child {\n margin-bottom: 0em;\n}\n.ui.piled.segments:after,\n.ui.piled.segments:before,\n.ui.piled.segment:after,\n.ui.piled.segment:before {\n background-color: @white;\n visibility: visible;\n content: '';\n display: block;\n height: 100%;\n left: 0px;\n position: absolute;\n width: 100%;\n border: @piledBorder;\n box-shadow: @piledBoxShadow;\n}\n.ui.piled.segments:before,\n.ui.piled.segment:before {\n transform: rotate(-@piledDegrees);\n top: 0;\n z-index: -2;\n}\n.ui.piled.segments:after,\n.ui.piled.segment:after {\n transform: rotate(@piledDegrees);\n top: 0;\n z-index: -1;\n}\n\n/* Piled Attached */\n.ui[class*=\"top attached\"].piled.segment {\n margin-top: @piledMargin;\n margin-bottom: 0em;\n}\n.ui.piled.segment[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n.ui.piled.segment[class*=\"bottom attached\"] {\n margin-top: 0em;\n margin-bottom: @piledMargin;\n}\n.ui.piled.segment[class*=\"bottom attached\"]:last-child {\n margin-bottom: 0em;\n}\n\n/*-------------------\n Stacked\n--------------------*/\n\n.ui.stacked.segment {\n padding-bottom: @stackedPadding;\n}\n.ui.stacked.segments:before,\n.ui.stacked.segments:after,\n.ui.stacked.segment:before,\n.ui.stacked.segment:after {\n content: '';\n position: absolute;\n bottom: -(@stackedHeight / 2);\n left: 0%;\n\n border-top: 1px solid @borderColor;\n background: @stackedPageBackground;\n\n width: 100%;\n height: @stackedHeight;\n visibility: visible;\n}\n.ui.stacked.segments:before,\n.ui.stacked.segment:before {\n display: none;\n}\n\n/* Add additional page */\n.ui.tall.stacked.segments:before,\n.ui.tall.stacked.segment:before {\n display: block;\n bottom: 0px;\n}\n\n/* Inverted */\n.ui.stacked.inverted.segments:before,\n.ui.stacked.inverted.segments:after,\n.ui.stacked.inverted.segment:before,\n.ui.stacked.inverted.segment:after {\n background-color: @subtleTransparentBlack;\n border-top: 1px solid @selectedBorderColor;\n}\n\n/*-------------------\n Padded\n--------------------*/\n\n.ui.padded.segment {\n padding: @paddedSegmentPadding;\n}\n\n.ui[class*=\"very padded\"].segment {\n padding: @veryPaddedSegmentPadding;\n}\n\n/* Padded vertical */\n.ui.padded.segment.vertical.segment,\n.ui[class*=\"very padded\"].vertical.segment {\n padding-left: 0px;\n padding-right: 0px;\n}\n\n/*-------------------\n Compact\n--------------------*/\n\n.ui.compact.segment {\n display: table;\n}\n\n/* Compact Group */\n.ui.compact.segments {\n display: inline-flex;\n}\n.ui.compact.segments .segment,\n.ui.segments .compact.segment {\n display: block;\n flex: 0 1 auto;\n}\n\n/*-------------------\n Circular\n--------------------*/\n\n.ui.circular.segment {\n display: table-cell;\n padding: @circularPadding;\n text-align: center;\n vertical-align: middle;\n border-radius: 500em;\n}\n\n/*-------------------\n Raised\n--------------------*/\n\n.ui.raised.segments,\n.ui.raised.segment {\n box-shadow: @raisedBoxShadow;\n}\n\n\n/*******************************\n Groups\n*******************************/\n\n/* Group */\n.ui.segments {\n flex-direction: column;\n position: relative;\n margin: @groupedMargin;\n border: @groupedBorder;\n box-shadow: @groupedBoxShadow;\n border-radius: @groupedBorderRadius;\n}\n.ui.segments:first-child {\n margin-top: 0em;\n}\n.ui.segments:last-child {\n margin-bottom: 0em;\n}\n\n\n/* Nested Segment */\n.ui.segments > .segment {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: @groupedSegmentMargin;\n width: @groupedSegmentWidth;\n box-shadow: @groupedSegmentBoxShadow;\n border: @groupedSegmentBorder;\n border-top: @groupedSegmentDivider;\n}\n\n.ui.segments:not(.horizontal) > .segment:first-child {\n top: @attachedTopOffset;\n bottom: 0px;\n border-top: none;\n margin-top: 0em;\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n\n/* Bottom */\n.ui.segments:not(.horizontal) > .segment:last-child {\n top: @attachedBottomOffset;\n bottom: 0px;\n margin-top: 0em;\n margin-bottom: 0em;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n\n/* Only */\n.ui.segments:not(.horizontal) > .segment:only-child {\n border-radius: @borderRadius;\n}\n\n\n/* Nested Group */\n.ui.segments > .ui.segments {\n border-top: @groupedSegmentDivider;\n margin: @nestedGroupMargin;\n}\n.ui.segments > .segments:first-child {\n border-top: none;\n}\n.ui.segments > .segment + .segments:not(.horizontal) {\n margin-top: 0em;\n}\n\n/* Horizontal Group */\n.ui.horizontal.segments {\n display: flex;\n flex-direction: row;\n background-color: transparent;\n border-radius: 0px;\n padding: 0em;\n background-color: @background;\n box-shadow: @boxShadow;\n margin: @margin;\n border-radius: @borderRadius;\n border: @border;\n}\n\n/* Nested Horizontal Group */\n.ui.segments > .horizontal.segments {\n margin: 0em;\n background-color: transparent;\n border-radius: 0px;\n border: none;\n box-shadow: none;\n border-top: @groupedSegmentDivider;\n}\n\n/* Horizontal Segment */\n.ui.horizontal.segments > .segment {\n flex: 1 1 auto;\n -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */\n margin: 0em;\n min-width: 0px;\n background-color: transparent;\n border-radius: 0px;\n border: none;\n box-shadow: none;\n border-left: @borderWidth solid @borderColor;\n}\n\n/* Border Fixes */\n.ui.segments > .horizontal.segments:first-child {\n border-top: none;\n}\n.ui.horizontal.segments > .segment:first-child {\n border-left: none;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Disabled\n---------------*/\n\n.ui.disabled.segment {\n opacity: @disabledOpacity;\n color: @disabledTextColor;\n}\n\n/*--------------\n Loading\n---------------*/\n\n.ui.loading.segment {\n position: relative;\n cursor: default;\n pointer-events: none;\n text-shadow: none !important;\n color: transparent !important;\n transition: all 0s linear;\n}\n.ui.loading.segment:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 0%;\n background: @loaderDimmerColor;\n width: 100%;\n height: 100%;\n border-radius: @borderRadius;\n z-index: @loaderDimmerZIndex;\n}\n.ui.loading.segment:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: segment-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n visibility: visible;\n z-index: @loaderLineZIndex;\n}\n\n@keyframes segment-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Basic\n--------------------*/\n\n.ui.basic.segment {\n background: @basicBackground;\n box-shadow: @basicBoxShadow;\n border: @basicBorder;\n border-radius: @basicBorderRadius;\n}\n\n/*-------------------\n Clearing\n--------------------*/\n\n.ui.clearing.segment:after {\n content: \".\";\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n/*-------------------\n Colors\n--------------------*/\n\n/* Red */\n.ui.red.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @red !important;\n}\n.ui.inverted.red.segment {\n background-color: @red !important;\n color: @white !important;\n}\n\n/* Orange */\n.ui.orange.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @orange !important;\n}\n.ui.inverted.orange.segment {\n background-color: @orange !important;\n color: @white !important;\n}\n\n/* Yellow */\n.ui.yellow.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @yellow !important;\n}\n.ui.inverted.yellow.segment {\n background-color: @yellow !important;\n color: @white !important;\n}\n\n/* Olive */\n.ui.olive.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @olive !important;\n}\n.ui.inverted.olive.segment {\n background-color: @olive !important;\n color: @white !important;\n}\n\n/* Green */\n.ui.green.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @green !important;\n}\n.ui.inverted.green.segment {\n background-color: @green !important;\n color: @white !important;\n}\n\n/* Teal */\n.ui.teal.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @teal !important;\n}\n.ui.inverted.teal.segment {\n background-color: @teal !important;\n color: @white !important;\n}\n\n/* Blue */\n.ui.blue.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @blue !important;\n}\n.ui.inverted.blue.segment {\n background-color: @blue !important;\n color: @white !important;\n}\n\n/* Violet */\n.ui.violet.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @violet !important;\n}\n.ui.inverted.violet.segment {\n background-color: @violet !important;\n color: @white !important;\n}\n\n/* Purple */\n.ui.purple.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @purple !important;\n}\n.ui.inverted.purple.segment {\n background-color: @purple !important;\n color: @white !important;\n}\n\n/* Pink */\n.ui.pink.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @pink !important;\n}\n.ui.inverted.pink.segment {\n background-color: @pink !important;\n color: @white !important;\n}\n\n/* Brown */\n.ui.brown.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @brown !important;\n}\n.ui.inverted.brown.segment {\n background-color: @brown !important;\n color: @white !important;\n}\n\n/* Grey */\n.ui.grey.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @grey !important;\n}\n.ui.inverted.grey.segment {\n background-color: @grey !important;\n color: @white !important;\n}\n\n/* Black */\n.ui.black.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @black !important;\n}\n.ui.inverted.black.segment {\n background-color: @black !important;\n color: @white !important;\n}\n\n/*-------------------\n Aligned\n--------------------*/\n\n.ui[class*=\"left aligned\"].segment {\n text-align: left;\n}\n.ui[class*=\"right aligned\"].segment {\n text-align: right;\n}\n.ui[class*=\"center aligned\"].segment {\n text-align: center;\n}\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui.floated.segment,\n.ui[class*=\"left floated\"].segment {\n float: left;\n margin-right: @floatedDistance;\n}\n.ui[class*=\"right floated\"].segment {\n float: right;\n margin-left: @floatedDistance;\n}\n\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.segment {\n border: none;\n box-shadow: none;\n}\n.ui.inverted.segment,\n.ui.primary.inverted.segment {\n background: @invertedBackground;\n color: @invertedTextColor;\n}\n\n/* Nested */\n.ui.inverted.segment .segment {\n color: @textColor;\n}\n.ui.inverted.segment .inverted.segment {\n color: @invertedTextColor;\n}\n\n/* Attached */\n.ui.inverted.attached.segment {\n border-color: @solidWhiteBorderColor;\n}\n\n/*-------------------\n Emphasis\n--------------------*/\n\n/* Secondary */\n.ui.secondary.segment {\n background: @secondaryBackground;\n color: @secondaryColor;\n}\n.ui.secondary.inverted.segment {\n background: @secondaryInvertedBackground;\n color: @secondaryInvertedColor;\n}\n\n/* Tertiary */\n.ui.tertiary.segment {\n background: @tertiaryBackground;\n color: @tertiaryColor;\n}\n.ui.tertiary.inverted.segment {\n background: @tertiaryInvertedBackground;\n color: @tertiaryInvertedColor;\n}\n\n\n/*-------------------\n Attached\n--------------------*/\n\n/* Middle */\n.ui.attached.segment {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: 0em @attachedHorizontalOffset;\n width: @attachedWidth;\n max-width: @attachedWidth;\n box-shadow: @attachedBoxShadow;\n border: @attachedBorder;\n}\n.ui.attached:not(.message) + .ui.attached.segment:not(.top) {\n border-top: none;\n}\n\n/* Top */\n.ui[class*=\"top attached\"].segment {\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n margin-top: @verticalMargin;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.segment[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n\n/* Bottom */\n.ui.segment[class*=\"bottom attached\"] {\n bottom: 0px;\n margin-top: 0em;\n top: @attachedBottomOffset;\n margin-bottom: @verticalMargin;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui.segment[class*=\"bottom attached\"]:last-child {\n margin-bottom: 0em;\n}\n\n/*-------------------\n Size\n--------------------*/\n\n.ui.mini.segments .segment,\n.ui.mini.segment {\n font-size: @mini;\n}\n.ui.tiny.segments .segment,\n.ui.tiny.segment {\n font-size: @tiny;\n}\n.ui.small.segments .segment,\n.ui.small.segment {\n font-size: @small;\n}\n.ui.segments .segment,\n.ui.segment {\n font-size: @medium;\n}\n.ui.large.segments .segment,\n.ui.large.segment {\n font-size: @large;\n}\n.ui.big.segments .segment,\n.ui.big.segment {\n font-size: @big;\n}\n.ui.huge.segments .segment,\n.ui.huge.segment {\n font-size: @huge;\n}\n.ui.massive.segments .segment,\n.ui.massive.segment {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/elements/step.less", "content": "/*!\n * # Semantic UI - Step\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Step\n*******************************/\n\n/*--------------\n Load Theme\n---------------*/\n\n@type : 'element';\n@element : 'step';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Plural\n*******************************/\n\n.ui.steps {\n display: inline-flex;\n flex-direction: row;\n align-items: stretch;\n margin: @stepMargin;\n background: @stepsBackground;\n box-shadow: @stepsBoxShadow;\n line-height: @lineHeight;\n border-radius: @stepsBorderRadius;\n border: @stepsBorder;\n}\n\n/* First Steps */\n.ui.steps:first-child {\n margin-top: 0em;\n}\n\n/* Last Steps */\n.ui.steps:last-child {\n margin-bottom: 0em;\n}\n\n\n/*******************************\n Singular\n*******************************/\n\n.ui.steps .step {\n position: relative;\n display: flex;\n flex: 1 0 auto;\n flex-wrap: wrap;\n flex-direction: row;\n vertical-align: middle;\n align-items: center;\n justify-content: @justifyContent;\n\n margin: @verticalMargin @horizontalMargin;\n padding: @verticalPadding @horizontalPadding;\n background: @background;\n color: @textColor;\n box-shadow: @boxShadow;\n border-radius: @borderRadius;\n border: @border;\n border-right: @divider;\n transition: @transition;\n}\n\n/* Arrow */\n.ui.steps .step:after {\n display: none;\n position: absolute;\n z-index: 2;\n content: '';\n top: @arrowTopOffset;\n right: @arrowRightOffset;\n border: medium none;\n background-color: @arrowBackgroundColor;\n width: @arrowSize;\n height: @arrowSize;\n\n border-style: solid;\n border-color: @borderColor;\n border-width: @arrowBorderWidth;\n\n transition: @transition;\n transform: translateY(-50%) translateX(50%) rotate(-45deg);\n}\n\n/* First Step */\n.ui.steps .step:first-child {\n padding-left: @horizontalPadding;\n border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;\n}\n\n/* Last Step */\n.ui.steps .step:last-child {\n border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;\n}\n.ui.steps .step:last-child {\n border-right: none;\n margin-right: 0em;\n}\n\n/* Only Step */\n.ui.steps .step:only-child {\n border-radius: @stepsBorderRadius;\n}\n\n\n/*******************************\n Content\n*******************************/\n\n/* Title */\n.ui.steps .step .title {\n font-family: @titleFontFamily;\n font-size: @titleFontSize;\n font-weight: @titleFontWeight;\n}\n.ui.steps .step > .title {\n width: 100%;\n}\n\n/* Description */\n.ui.steps .step .description {\n font-weight: @descriptionFontWeight;\n font-size: @descriptionFontSize;\n color: @descriptionColor;\n}\n.ui.steps .step > .description {\n width: 100%;\n}\n.ui.steps .step .title ~ .description {\n margin-top: @descriptionDistance;\n}\n\n/* Icon */\n.ui.steps .step > .icon {\n line-height: 1;\n font-size: @iconSize;\n margin: 0em @iconDistance 0em 0em;\n}\n.ui.steps .step > .icon,\n.ui.steps .step > .icon ~ .content {\n display: block;\n flex: 0 1 auto;\n align-self: @iconAlign;\n}\n.ui.steps .step > .icon ~ .content {\n flex-grow: 1 0 auto;\n}\n\n/* Horizontal Icon */\n.ui.steps:not(.vertical) .step > .icon {\n width: auto;\n}\n\n/* Link */\n.ui.steps .link.step,\n.ui.steps a.step {\n cursor: pointer;\n}\n\n/*******************************\n Types\n*******************************/\n\n/*--------------\n Ordered\n---------------*/\n\n.ui.ordered.steps {\n counter-reset: ordered;\n}\n.ui.ordered.steps .step:before {\n display: block;\n position: static;\n text-align: center;\n content: counters(ordered, \".\");\n align-self: @iconAlign;\n margin-right: @iconDistance;\n font-size: @iconSize;\n counter-increment: ordered;\n font-family: @orderedFontFamily;\n font-weight: @orderedFontWeight;\n}\n\n.ui.ordered.steps .step > * {\n display: block;\n align-self: @iconAlign;\n}\n\n\n/*--------------\n Vertical\n---------------*/\n\n.ui.vertical.steps {\n display: inline-flex;\n flex-direction: column;\n overflow: visible;\n}\n.ui.vertical.steps .step {\n justify-content: flex-start;\n border-radius: @borderRadius;\n padding: @verticalPadding @horizontalPadding;\n border-right: none;\n border-bottom: @verticalDivider;\n}\n.ui.vertical.steps .step:first-child {\n padding: @verticalPadding @horizontalPadding;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n}\n.ui.vertical.steps .step:last-child {\n border-bottom: none;\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n}\n.ui.vertical.steps .step:only-child {\n border-radius: @stepsBorderRadius;\n}\n\n\n/* Arrow */\n.ui.vertical.steps .step:after {\n display: none;\n}\n.ui.vertical.steps .step:after {\n top: @verticalArrowTopOffset;\n right: @verticalArrowRightOffset;\n border-width: @verticalArrowBorderWidth;\n}\n\n.ui.vertical.steps .step:after {\n display: @verticalArrowDisplay;\n}\n.ui.vertical.steps .active.step:after {\n display: @verticalActiveArrowDisplay;\n}\n.ui.vertical.steps .step:last-child:after {\n display: @verticalLastArrowDisplay;\n}\n.ui.vertical.steps .active.step:last-child:after {\n display: @verticalActiveLastArrowDisplay;\n}\n\n\n/*---------------\n Responsive\n----------------*/\n\n/* Mobile (Default) */\n@media only screen and (max-width: (@largestMobileScreen)) {\n\n .ui.steps:not(.unstackable) {\n display: inline-flex;\n overflow: visible;\n flex-direction: column;\n }\n .ui.steps:not(.unstackable) .step {\n width: 100% !important;\n flex-direction: column;\n border-radius: @borderRadius;\n padding: @verticalPadding @horizontalPadding;\n }\n .ui.steps:not(.unstackable) .step:first-child {\n padding: @verticalPadding @horizontalPadding;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n }\n .ui.steps:not(.unstackable) .step:last-child {\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n }\n\n /* Arrow */\n .ui.steps:not(.unstackable) .step:after {\n display: none !important;\n }\n\n /* Content */\n .ui.steps:not(.unstackable) .step .content {\n text-align: center;\n }\n\n /* Icon */\n .ui.steps:not(.unstackable) .step > .icon,\n .ui.ordered.steps:not(.unstackable) .step:before {\n margin: 0em 0em @mobileIconDistance 0em;\n }\n\n}\n\n/*******************************\n States\n*******************************/\n\n/* Link Hover */\n.ui.steps .link.step:hover::after,\n.ui.steps .link.step:hover,\n.ui.steps a.step:hover::after,\n.ui.steps a.step:hover {\n background: @hoverBackground;\n color: @hoverColor;\n}\n\n/* Link Down */\n.ui.steps .link.step:active::after,\n.ui.steps .link.step:active,\n.ui.steps a.step:active::after,\n.ui.steps a.step:active {\n background: @downBackground;\n color: @downColor;\n}\n\n/* Active */\n.ui.steps .step.active {\n cursor: auto;\n background: @activeBackground;\n}\n.ui.steps .step.active:after {\n background: @activeBackground;\n}\n.ui.steps .step.active .title {\n color: @activeColor;\n}\n.ui.ordered.steps .step.active:before,\n.ui.steps .active.step .icon {\n color: @activeIconColor;\n}\n\n/* Active Arrow */\n.ui.steps .step:after {\n display: @arrowDisplay;\n}\n.ui.steps .active.step:after {\n display: @activeArrowDisplay;\n}\n.ui.steps .step:last-child:after {\n display: @lastArrowDisplay;\n}\n.ui.steps .active.step:last-child:after {\n display: @activeLastArrowDisplay;\n}\n\n/* Active Hover */\n.ui.steps .link.active.step:hover::after,\n.ui.steps .link.active.step:hover,\n.ui.steps a.active.step:hover::after,\n.ui.steps a.active.step:hover {\n cursor: pointer;\n background: @activeHoverBackground;\n color: @activeHoverColor;\n}\n\n/* Completed */\n.ui.steps .step.completed > .icon:before,\n.ui.ordered.steps .step.completed:before {\n color: @completedColor;\n}\n\n/* Disabled */\n.ui.steps .disabled.step {\n cursor: auto;\n background: @disabledBackground;\n pointer-events: none;\n}\n.ui.steps .disabled.step,\n.ui.steps .disabled.step .title,\n.ui.steps .disabled.step .description {\n color: @disabledColor;\n}\n.ui.steps .disabled.step:after {\n background: @disabledBackground;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*--------------\n Stackable\n---------------*/\n\n/* Tablet Or Below */\n@media only screen and (max-width: @largestTabletScreen) {\n\n.ui[class*=\"tablet stackable\"].steps {\n display: inline-flex;\n overflow: visible;\n flex-direction: column;\n}\n\n/* Steps */\n.ui[class*=\"tablet stackable\"].steps .step {\n flex-direction: column;\n border-radius: @borderRadius;\n padding: @verticalPadding @horizontalPadding;\n}\n.ui[class*=\"tablet stackable\"].steps .step:first-child {\n padding: @verticalPadding @horizontalPadding;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n}\n.ui[class*=\"tablet stackable\"].steps .step:last-child {\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n}\n\n/* Arrow */\n.ui[class*=\"tablet stackable\"].steps .step:after {\n display: none !important;\n}\n\n/* Content */\n.ui[class*=\"tablet stackable\"].steps .step .content {\n text-align: center;\n}\n\n/* Icon */\n.ui[class*=\"tablet stackable\"].steps .step > .icon,\n.ui[class*=\"tablet stackable\"].ordered.steps .step:before {\n margin: 0em 0em @mobileIconDistance 0em;\n}\n\n}\n\n/*--------------\n Fluid\n---------------*/\n\n/* Fluid */\n.ui.fluid.steps {\n display: flex;\n width: 100%;\n}\n\n/*--------------\n Attached\n---------------*/\n\n/* Top */\n.ui.attached.steps {\n width: @attachedWidth !important;\n margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;\n max-width: @attachedWidth;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n}\n.ui.attached.steps .step:first-child {\n border-radius: @stepsBorderRadius 0em 0em 0em;\n}\n.ui.attached.steps .step:last-child {\n border-radius: 0em @stepsBorderRadius 0em 0em;\n}\n\n/* Bottom */\n.ui.bottom.attached.steps {\n margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n}\n.ui.bottom.attached.steps .step:first-child {\n border-radius: 0em 0em 0em @stepsBorderRadius;\n}\n.ui.bottom.attached.steps .step:last-child {\n border-radius: 0em 0em @stepsBorderRadius 0em;\n}\n\n/*-------------------\n Evenly Divided\n--------------------*/\n\n.ui.one.steps,\n.ui.two.steps,\n.ui.three.steps,\n.ui.four.steps,\n.ui.five.steps,\n.ui.six.steps,\n.ui.seven.steps,\n.ui.eight.steps {\n width: 100%;\n}\n.ui.one.steps > .step,\n.ui.two.steps > .step,\n.ui.three.steps > .step,\n.ui.four.steps > .step,\n.ui.five.steps > .step,\n.ui.six.steps > .step,\n.ui.seven.steps > .step,\n.ui.eight.steps > .step {\n flex-wrap: nowrap;\n}\n.ui.one.steps > .step {\n width: 100%;\n}\n.ui.two.steps > .step {\n width: 50%;\n}\n.ui.three.steps > .step {\n width: 33.333%;\n}\n.ui.four.steps > .step {\n width: 25%;\n}\n.ui.five.steps > .step {\n width: 20%;\n}\n.ui.six.steps > .step {\n width: 16.666%;\n}\n.ui.seven.steps > .step {\n width: 14.285%;\n}\n.ui.eight.steps > .step {\n width: 12.500%;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n\n.ui.mini.steps .step,\n.ui.mini.step {\n font-size: @mini;\n}\n.ui.tiny.steps .step,\n.ui.tiny.step {\n font-size: @tiny;\n}\n.ui.small.steps .step,\n.ui.small.step {\n font-size: @small;\n}\n.ui.steps .step,\n.ui.step {\n font-size: @medium;\n}\n.ui.large.steps .step,\n.ui.large.step {\n font-size: @large;\n}\n.ui.big.steps .step,\n.ui.big.step {\n font-size: @big;\n}\n.ui.huge.steps .step,\n.ui.huge.step {\n font-size: @huge;\n}\n.ui.massive.steps .step,\n.ui.massive.step {\n font-size: @massive;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/globals/reset.less", "content": "/*!\n * # Semantic UI - Reset\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'global';\n@element : 'reset';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Reset\n*******************************/\n\n/* Border-Box */\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\nhtml {\n box-sizing: border-box;\n}\n\n/* iPad Input Shadows */\ninput[type=\"text\"], input[type=\"email\"], input[type=\"search\"], input[type=\"password\"] {\n -webkit-appearance: none;\n -moz-appearance: none; /* mobile firefox too! */\n}\n\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/globals/site.js", "content": "/*!\n * # Semantic UI - Site\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n$.site = $.fn.site = function(parameters) {\n var\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.site.settings, parameters)\n : $.extend({}, $.site.settings),\n\n namespace = settings.namespace,\n error = settings.error,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n $document = $(document),\n $module = $document,\n element = this,\n instance = $module.data(moduleNamespace),\n\n module,\n returnedValue\n ;\n module = {\n\n initialize: function() {\n module.instantiate();\n },\n\n instantiate: function() {\n module.verbose('Storing instance of site', module);\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n normalize: function() {\n module.fix.console();\n module.fix.requestAnimationFrame();\n },\n\n fix: {\n console: function() {\n module.debug('Normalizing window.console');\n if (console === undefined || console.log === undefined) {\n module.verbose('Console not available, normalizing events');\n module.disable.console();\n }\n if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') {\n module.verbose('Console group not available, normalizing events');\n window.console.group = function() {};\n window.console.groupEnd = function() {};\n window.console.groupCollapsed = function() {};\n }\n if (typeof console.markTimeline == 'undefined') {\n module.verbose('Mark timeline not available, normalizing events');\n window.console.markTimeline = function() {};\n }\n },\n consoleClear: function() {\n module.debug('Disabling programmatic console clearing');\n window.console.clear = function() {};\n },\n requestAnimationFrame: function() {\n module.debug('Normalizing requestAnimationFrame');\n if(window.requestAnimationFrame === undefined) {\n module.debug('RequestAnimationFrame not available, normalizing event');\n window.requestAnimationFrame = window.requestAnimationFrame\n || window.mozRequestAnimationFrame\n || window.webkitRequestAnimationFrame\n || window.msRequestAnimationFrame\n || function(callback) { setTimeout(callback, 0); }\n ;\n }\n }\n },\n\n moduleExists: function(name) {\n return ($.fn[name] !== undefined && $.fn[name].settings !== undefined);\n },\n\n enabled: {\n modules: function(modules) {\n var\n enabledModules = []\n ;\n modules = modules || settings.modules;\n $.each(modules, function(index, name) {\n if(module.moduleExists(name)) {\n enabledModules.push(name);\n }\n });\n return enabledModules;\n }\n },\n\n disabled: {\n modules: function(modules) {\n var\n disabledModules = []\n ;\n modules = modules || settings.modules;\n $.each(modules, function(index, name) {\n if(!module.moduleExists(name)) {\n disabledModules.push(name);\n }\n });\n return disabledModules;\n }\n },\n\n change: {\n setting: function(setting, value, modules, modifyExisting) {\n modules = (typeof modules === 'string')\n ? (modules === 'all')\n ? settings.modules\n : [modules]\n : modules || settings.modules\n ;\n modifyExisting = (modifyExisting !== undefined)\n ? modifyExisting\n : true\n ;\n $.each(modules, function(index, name) {\n var\n namespace = (module.moduleExists(name))\n ? $.fn[name].settings.namespace || false\n : true,\n $existingModules\n ;\n if(module.moduleExists(name)) {\n module.verbose('Changing default setting', setting, value, name);\n $.fn[name].settings[setting] = value;\n if(modifyExisting && namespace) {\n $existingModules = $(':data(module-' + namespace + ')');\n if($existingModules.length > 0) {\n module.verbose('Modifying existing settings', $existingModules);\n $existingModules[name]('setting', setting, value);\n }\n }\n }\n });\n },\n settings: function(newSettings, modules, modifyExisting) {\n modules = (typeof modules === 'string')\n ? [modules]\n : modules || settings.modules\n ;\n modifyExisting = (modifyExisting !== undefined)\n ? modifyExisting\n : true\n ;\n $.each(modules, function(index, name) {\n var\n $existingModules\n ;\n if(module.moduleExists(name)) {\n module.verbose('Changing default setting', newSettings, name);\n $.extend(true, $.fn[name].settings, newSettings);\n if(modifyExisting && namespace) {\n $existingModules = $(':data(module-' + namespace + ')');\n if($existingModules.length > 0) {\n module.verbose('Modifying existing settings', $existingModules);\n $existingModules[name]('setting', newSettings);\n }\n }\n }\n });\n }\n },\n\n enable: {\n console: function() {\n module.console(true);\n },\n debug: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Enabling debug for modules', modules);\n module.change.setting('debug', true, modules, modifyExisting);\n },\n verbose: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Enabling verbose debug for modules', modules);\n module.change.setting('verbose', true, modules, modifyExisting);\n }\n },\n disable: {\n console: function() {\n module.console(false);\n },\n debug: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Disabling debug for modules', modules);\n module.change.setting('debug', false, modules, modifyExisting);\n },\n verbose: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Disabling verbose debug for modules', modules);\n module.change.setting('verbose', false, modules, modifyExisting);\n }\n },\n\n console: function(enable) {\n if(enable) {\n if(instance.cache.console === undefined) {\n module.error(error.console);\n return;\n }\n module.debug('Restoring console function');\n window.console = instance.cache.console;\n }\n else {\n module.debug('Disabling console function');\n instance.cache.console = window.console;\n window.console = {\n clear : function(){},\n error : function(){},\n group : function(){},\n groupCollapsed : function(){},\n groupEnd : function(){},\n info : function(){},\n log : function(){},\n markTimeline : function(){},\n warn : function(){}\n };\n }\n },\n\n destroy: function() {\n module.verbose('Destroying previous site for', $module);\n $module\n .removeData(moduleNamespace)\n ;\n },\n\n cache: {},\n\n setting: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n settings[name] = value;\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Element' : element,\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n module.destroy();\n }\n module.initialize();\n }\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.site.settings = {\n\n name : 'Site',\n namespace : 'site',\n\n error : {\n console : 'Console cannot be restored, most likely it was overwritten outside of module',\n method : 'The method you called is not defined.'\n },\n\n debug : false,\n verbose : false,\n performance : true,\n\n modules: [\n 'accordion',\n 'api',\n 'checkbox',\n 'dimmer',\n 'dropdown',\n 'embed',\n 'form',\n 'modal',\n 'nag',\n 'popup',\n 'rating',\n 'shape',\n 'sidebar',\n 'state',\n 'sticky',\n 'tab',\n 'transition',\n 'visit',\n 'visibility'\n ],\n\n siteNamespace : 'site',\n namespaceStub : {\n cache : {},\n config : {},\n sections : {},\n section : {},\n utilities : {}\n }\n\n};\n\n// allows for selection of elements with data attributes\n$.extend($.expr[ \":\" ], {\n data: ($.expr.createPseudo)\n ? $.expr.createPseudo(function(dataName) {\n return function(elem) {\n return !!$.data(elem, dataName);\n };\n })\n : function(elem, i, match) {\n // support: jQuery < 1.8\n return !!$.data(elem, match[ 3 ]);\n }\n});\n\n\n})( jQuery, window, document );\n" }, { "path": "parrot/semantic/src/definitions/globals/site.less", "content": "/*!\n * # Semantic UI - Site\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'global';\n@element : 'site';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Page\n*******************************/\n\n.loadFonts();\n\nhtml,\nbody {\n height: 100%;\n}\n\nhtml {\n font-size: @emSize;\n}\n\nbody {\n margin: 0px;\n padding: 0px;\n overflow-x: @pageOverflowX;\n min-width: @pageMinWidth;\n background: @pageBackground;\n font-family: @pageFont;\n font-size: @fontSize;\n line-height: @lineHeight;\n color: @textColor;\n font-smoothing: @fontSmoothing;\n}\n\n/*******************************\n Headers\n*******************************/\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n font-family: @headerFont;\n line-height: @headerLineHeight;\n margin: @headerMargin;\n font-weight: @headerFontWeight;\n padding: 0em;\n}\n\nh1 {\n min-height: 1rem;\n font-size: @h1;\n}\nh2 {\n font-size: @h2;\n}\nh3 {\n font-size: @h3;\n}\nh4 {\n font-size: @h4;\n}\nh5 {\n font-size: @h5;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child,\nh4:first-child,\nh5:first-child {\n margin-top: 0em;\n}\n\nh1:last-child,\nh2:last-child,\nh3:last-child,\nh4:last-child,\nh5:last-child {\n margin-bottom: 0em;\n}\n\n\n/*******************************\n Text\n*******************************/\n\np {\n margin: @paragraphMargin;\n line-height: @paragraphLineHeight;\n}\np:first-child {\n margin-top: 0em;\n}\np:last-child {\n margin-bottom: 0em;\n}\n\n/*-------------------\n Links\n--------------------*/\n\na {\n color: @linkColor;\n text-decoration: @linkUnderline;\n}\na:hover {\n color: @linkHoverColor;\n text-decoration: @linkHoverUnderline;\n}\n\n\n/*******************************\n Scrollbars\n*******************************/\n\n.addScrollbars() when (@useCustomScrollbars) {\n\n /* Force Simple Scrollbars */\n body ::-webkit-scrollbar {\n -webkit-appearance: none;\n width: @customScrollbarWidth;\n height: @customScrollbarHeight;\n }\n body ::-webkit-scrollbar-track {\n background: @trackBackground;\n border-radius: @trackBorderRadius;\n }\n body ::-webkit-scrollbar-thumb {\n cursor: pointer;\n border-radius: @thumbBorderRadius;\n background: @thumbBackground;\n transition: @thumbTransition;\n }\n body ::-webkit-scrollbar-thumb:window-inactive {\n background: @thumbInactiveBackground;\n }\n body ::-webkit-scrollbar-thumb:hover {\n background: @thumbHoverBackground;\n }\n\n /* Inverted UI */\n body .ui.inverted::-webkit-scrollbar-track {\n background: @trackInvertedBackground;\n }\n body .ui.inverted::-webkit-scrollbar-thumb {\n background: @thumbInvertedBackground;\n }\n body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {\n background: @thumbInvertedInactiveBackground;\n }\n body .ui.inverted::-webkit-scrollbar-thumb:hover {\n background: @thumbInvertedHoverBackground;\n }\n}\n\n/*******************************\n Highlighting\n*******************************/\n\n/* Site */\n::-webkit-selection {\n background-color: @highlightBackground;\n color: @highlightColor;\n}\n::-moz-selection {\n background-color: @highlightBackground;\n color: @highlightColor;\n}\n::selection {\n background-color: @highlightBackground;\n color: @highlightColor;\n}\n\n/* Form */\ntextarea::-webkit-selection,\ninput::-webkit-selection {\n background-color: @inputHighlightBackground;\n color: @inputHighlightColor;\n}\ntextarea::-moz-selection,\ninput::-moz-selection {\n background-color: @inputHighlightBackground;\n color: @inputHighlightColor;\n}\ntextarea::selection,\ninput::selection {\n background-color: @inputHighlightBackground;\n color: @inputHighlightColor;\n}\n\n.addScrollbars();\n.loadUIOverrides();\n" }, { "path": "parrot/semantic/src/definitions/modules/accordion.js", "content": "/*!\n * # Semantic UI - Accordion\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.accordion = function(parameters) {\n var\n $allModules = $(this),\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n\n requestAnimationFrame = window.requestAnimationFrame\n || window.mozRequestAnimationFrame\n || window.webkitRequestAnimationFrame\n || window.msRequestAnimationFrame\n || function(callback) { setTimeout(callback, 0); },\n\n returnedValue\n ;\n $allModules\n .each(function() {\n var\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.fn.accordion.settings, parameters)\n : $.extend({}, $.fn.accordion.settings),\n\n className = settings.className,\n namespace = settings.namespace,\n selector = settings.selector,\n error = settings.error,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n moduleSelector = $allModules.selector || '',\n\n $module = $(this),\n $title = $module.find(selector.title),\n $content = $module.find(selector.content),\n\n element = this,\n instance = $module.data(moduleNamespace),\n observer,\n module\n ;\n\n module = {\n\n initialize: function() {\n module.debug('Initializing', $module);\n module.bind.events();\n if(settings.observeChanges) {\n module.observeChanges();\n }\n module.instantiate();\n },\n\n instantiate: function() {\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n destroy: function() {\n module.debug('Destroying previous instance', $module);\n $module\n .off(eventNamespace)\n .removeData(moduleNamespace)\n ;\n },\n\n refresh: function() {\n $title = $module.find(selector.title);\n $content = $module.find(selector.content);\n },\n\n observeChanges: function() {\n if('MutationObserver' in window) {\n observer = new MutationObserver(function(mutations) {\n module.debug('DOM tree modified, updating selector cache');\n module.refresh();\n });\n observer.observe(element, {\n childList : true,\n subtree : true\n });\n module.debug('Setting up mutation observer', observer);\n }\n },\n\n bind: {\n events: function() {\n module.debug('Binding delegated events');\n $module\n .on(settings.on + eventNamespace, selector.trigger, module.event.click)\n ;\n }\n },\n\n event: {\n click: function() {\n module.toggle.call(this);\n }\n },\n\n toggle: function(query) {\n var\n $activeTitle = (query !== undefined)\n ? (typeof query === 'number')\n ? $title.eq(query)\n : $(query).closest(selector.title)\n : $(this).closest(selector.title),\n $activeContent = $activeTitle.next($content),\n isAnimating = $activeContent.hasClass(className.animating),\n isActive = $activeContent.hasClass(className.active),\n isOpen = (isActive && !isAnimating),\n isOpening = (!isActive && isAnimating)\n ;\n module.debug('Toggling visibility of content', $activeTitle);\n if(isOpen || isOpening) {\n if(settings.collapsible) {\n module.close.call($activeTitle);\n }\n else {\n module.debug('Cannot close accordion content collapsing is disabled');\n }\n }\n else {\n module.open.call($activeTitle);\n }\n },\n\n open: function(query) {\n var\n $activeTitle = (query !== undefined)\n ? (typeof query === 'number')\n ? $title.eq(query)\n : $(query).closest(selector.title)\n : $(this).closest(selector.title),\n $activeContent = $activeTitle.next($content),\n isAnimating = $activeContent.hasClass(className.animating),\n isActive = $activeContent.hasClass(className.active),\n isOpen = (isActive || isAnimating)\n ;\n if(isOpen) {\n module.debug('Accordion already open, skipping', $activeContent);\n return;\n }\n module.debug('Opening accordion content', $activeTitle);\n settings.onOpening.call($activeContent);\n settings.onChanging.call($activeContent);\n if(settings.exclusive) {\n module.closeOthers.call($activeTitle);\n }\n $activeTitle\n .addClass(className.active)\n ;\n $activeContent\n .stop(true, true)\n .addClass(className.animating)\n ;\n if(settings.animateChildren) {\n if($.fn.transition !== undefined && $module.transition('is supported')) {\n $activeContent\n .children()\n .transition({\n animation : 'fade in',\n queue : false,\n useFailSafe : true,\n debug : settings.debug,\n verbose : settings.verbose,\n duration : settings.duration\n })\n ;\n }\n else {\n $activeContent\n .children()\n .stop(true, true)\n .animate({\n opacity: 1\n }, settings.duration, module.resetOpacity)\n ;\n }\n }\n $activeContent\n .slideDown(settings.duration, settings.easing, function() {\n $activeContent\n .removeClass(className.animating)\n .addClass(className.active)\n ;\n module.reset.display.call(this);\n settings.onOpen.call(this);\n settings.onChange.call(this);\n })\n ;\n },\n\n close: function(query) {\n var\n $activeTitle = (query !== undefined)\n ? (typeof query === 'number')\n ? $title.eq(query)\n : $(query).closest(selector.title)\n : $(this).closest(selector.title),\n $activeContent = $activeTitle.next($content),\n isAnimating = $activeContent.hasClass(className.animating),\n isActive = $activeContent.hasClass(className.active),\n isOpening = (!isActive && isAnimating),\n isClosing = (isActive && isAnimating)\n ;\n if((isActive || isOpening) && !isClosing) {\n module.debug('Closing accordion content', $activeContent);\n settings.onClosing.call($activeContent);\n settings.onChanging.call($activeContent);\n $activeTitle\n .removeClass(className.active)\n ;\n $activeContent\n .stop(true, true)\n .addClass(className.animating)\n ;\n if(settings.animateChildren) {\n if($.fn.transition !== undefined && $module.transition('is supported')) {\n $activeContent\n .children()\n .transition({\n animation : 'fade out',\n queue : false,\n useFailSafe : true,\n debug : settings.debug,\n verbose : settings.verbose,\n duration : settings.duration\n })\n ;\n }\n else {\n $activeContent\n .children()\n .stop(true, true)\n .animate({\n opacity: 0\n }, settings.duration, module.resetOpacity)\n ;\n }\n }\n $activeContent\n .slideUp(settings.duration, settings.easing, function() {\n $activeContent\n .removeClass(className.animating)\n .removeClass(className.active)\n ;\n module.reset.display.call(this);\n settings.onClose.call(this);\n settings.onChange.call(this);\n })\n ;\n }\n },\n\n closeOthers: function(index) {\n var\n $activeTitle = (index !== undefined)\n ? $title.eq(index)\n : $(this).closest(selector.title),\n $parentTitles = $activeTitle.parents(selector.content).prev(selector.title),\n $activeAccordion = $activeTitle.closest(selector.accordion),\n activeSelector = selector.title + '.' + className.active + ':visible',\n activeContent = selector.content + '.' + className.active + ':visible',\n $openTitles,\n $nestedTitles,\n $openContents\n ;\n if(settings.closeNested) {\n $openTitles = $activeAccordion.find(activeSelector).not($parentTitles);\n $openContents = $openTitles.next($content);\n }\n else {\n $openTitles = $activeAccordion.find(activeSelector).not($parentTitles);\n $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);\n $openTitles = $openTitles.not($nestedTitles);\n $openContents = $openTitles.next($content);\n }\n if( ($openTitles.length > 0) ) {\n module.debug('Exclusive enabled, closing other content', $openTitles);\n $openTitles\n .removeClass(className.active)\n ;\n $openContents\n .removeClass(className.animating)\n .stop(true, true)\n ;\n if(settings.animateChildren) {\n if($.fn.transition !== undefined && $module.transition('is supported')) {\n $openContents\n .children()\n .transition({\n animation : 'fade out',\n useFailSafe : true,\n debug : settings.debug,\n verbose : settings.verbose,\n duration : settings.duration\n })\n ;\n }\n else {\n $openContents\n .children()\n .stop(true, true)\n .animate({\n opacity: 0\n }, settings.duration, module.resetOpacity)\n ;\n }\n }\n $openContents\n .slideUp(settings.duration , settings.easing, function() {\n $(this).removeClass(className.active);\n module.reset.display.call(this);\n })\n ;\n }\n },\n\n reset: {\n\n display: function() {\n module.verbose('Removing inline display from element', this);\n $(this).css('display', '');\n if( $(this).attr('style') === '') {\n $(this)\n .attr('style', '')\n .removeAttr('style')\n ;\n }\n },\n\n opacity: function() {\n module.verbose('Removing inline opacity from element', this);\n $(this).css('opacity', '');\n if( $(this).attr('style') === '') {\n $(this)\n .attr('style', '')\n .removeAttr('style')\n ;\n }\n },\n\n },\n\n setting: function(name, value) {\n module.debug('Changing setting', name, value);\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n if($.isPlainObject(settings[name])) {\n $.extend(true, settings[name], value);\n }\n else {\n settings[name] = value;\n }\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n module.debug('Changing internal', name, value);\n if(value !== undefined) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else {\n module[name] = value;\n }\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.initialize();\n }\n })\n ;\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.fn.accordion.settings = {\n\n name : 'Accordion',\n namespace : 'accordion',\n\n silent : false,\n debug : false,\n verbose : false,\n performance : true,\n\n on : 'click', // event on title that opens accordion\n\n observeChanges : true, // whether accordion should automatically refresh on DOM insertion\n\n exclusive : true, // whether a single accordion content panel should be open at once\n collapsible : true, // whether accordion content can be closed\n closeNested : false, // whether nested content should be closed when a panel is closed\n animateChildren : true, // whether children opacity should be animated\n\n duration : 350, // duration of animation\n easing : 'easeOutQuad', // easing equation for animation\n\n onOpening : function(){}, // callback before open animation\n onClosing : function(){}, // callback before closing animation\n onChanging : function(){}, // callback before closing or opening animation\n\n onOpen : function(){}, // callback after open animation\n onClose : function(){}, // callback after closing animation\n onChange : function(){}, // callback after closing or opening animation\n\n error: {\n method : 'The method you called is not defined'\n },\n\n className : {\n active : 'active',\n animating : 'animating'\n },\n\n selector : {\n accordion : '.accordion',\n title : '.title',\n trigger : '.title',\n content : '.content'\n }\n\n};\n\n// Adds easing\n$.extend( $.easing, {\n easeOutQuad: function (x, t, b, c, d) {\n return -c *(t/=d)*(t-2) + b;\n }\n});\n\n})( jQuery, window, document );\n\n" }, { "path": "parrot/semantic/src/definitions/modules/accordion.less", "content": "/*!\r\n * # Semantic UI - Accordion\r\n * http://github.com/semantic-org/semantic-ui/\r\n *\r\n *\r\n * Released under the MIT license\r\n * http://opensource.org/licenses/MIT\r\n *\r\n */\r\n\r\n/*******************************\r\n Theme\r\n*******************************/\r\n\r\n@type : 'module';\r\n@element : 'accordion';\r\n\r\n@import (multiple) '../../theme.config';\r\n\r\n/*******************************\r\n Accordion\r\n*******************************/\r\n\r\n.ui.accordion,\r\n.ui.accordion .accordion {\r\n max-width: 100%;\r\n}\r\n.ui.accordion .accordion {\r\n margin: @childAccordionMargin;\r\n padding: @childAccordionPadding;\r\n}\r\n\r\n/* Title */\r\n.ui.accordion .title,\r\n.ui.accordion .accordion .title {\r\n cursor: pointer;\r\n}\r\n\r\n/* Default Styling */\r\n.ui.accordion .title:not(.ui) {\r\n padding: @titlePadding;\r\n font-family: @titleFont;\r\n font-size: @titleFontSize;\r\n color: @titleColor;\r\n}\r\n\r\n/* Content */\r\n.ui.accordion .title ~ .content,\r\n.ui.accordion .accordion .title ~ .content {\r\n display: none;\r\n}\r\n\r\n/* Default Styling */\r\n.ui.accordion:not(.styled) .title ~ .content:not(.ui),\r\n.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {\r\n margin: @contentMargin;\r\n padding: @contentPadding;\r\n}\r\n.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {\r\n padding-bottom: 0em;\r\n}\r\n\r\n/* Arrow */\r\n.ui.accordion .title .dropdown.icon,\r\n.ui.accordion .accordion .title .dropdown.icon {\r\n display: @iconDisplay;\r\n float: @iconFloat;\r\n opacity: @iconOpacity;\r\n width: @iconWidth;\r\n height: @iconHeight;\r\n margin: @iconMargin;\r\n padding: @iconPadding;\r\n font-size: @iconFontSize;\r\n transition: @iconTransition;\r\n vertical-align: @iconVerticalAlign;\r\n transform: @iconTransform;\r\n}\r\n\r\n/*--------------\r\n Coupling\r\n---------------*/\r\n\r\n/* Menu */\r\n.ui.accordion.menu .item .title {\r\n display: block;\r\n padding: @menuTitlePadding;\r\n}\r\n.ui.accordion.menu .item .title > .dropdown.icon {\r\n float: @menuIconFloat;\r\n margin: @menuIconMargin;\r\n transform: @menuIconTransform;\r\n}\r\n\r\n/* Header */\r\n.ui.accordion .ui.header .dropdown.icon {\r\n font-size: @iconFontSize;\r\n margin: @iconMargin;\r\n}\r\n\r\n/*******************************\r\n States\r\n*******************************/\r\n\r\n.ui.accordion .active.title .dropdown.icon,\r\n.ui.accordion .accordion .active.title .dropdown.icon {\r\n transform: @activeIconTransform;\r\n}\r\n\r\n.ui.accordion.menu .item .active.title > .dropdown.icon {\r\n transform: @activeIconTransform;\r\n}\r\n\r\n/*******************************\r\n Types\r\n*******************************/\r\n\r\n/*--------------\r\n Styled\r\n---------------*/\r\n\r\n.ui.styled.accordion {\r\n width: @styledWidth;\r\n}\r\n\r\n.ui.styled.accordion,\r\n.ui.styled.accordion .accordion {\r\n border-radius: @styledBorderRadius;\r\n background: @styledBackground;\r\n box-shadow: @styledBoxShadow;\r\n}\r\n.ui.styled.accordion .title,\r\n.ui.styled.accordion .accordion .title {\r\n margin: @styledTitleMargin;\r\n padding: @styledTitlePadding;\r\n color: @styledTitleColor;\r\n font-weight: @styledTitleFontWeight;\r\n border-top: @styledTitleBorder;\r\n transition: @styledTitleTransition;\r\n}\r\n.ui.styled.accordion > .title:first-child,\r\n.ui.styled.accordion .accordion .title:first-child {\r\n border-top: none;\r\n}\r\n\r\n\r\n/* Content */\r\n.ui.styled.accordion .content,\r\n.ui.styled.accordion .accordion .content {\r\n margin: @styledContentMargin;\r\n padding: @styledContentPadding;\r\n}\r\n.ui.styled.accordion .accordion .content {\r\n padding: @styledChildContentMargin;\r\n padding: @styledChildContentPadding;\r\n}\r\n\r\n\r\n/* Hover */\r\n.ui.styled.accordion .title:hover,\r\n.ui.styled.accordion .active.title,\r\n.ui.styled.accordion .accordion .title:hover,\r\n.ui.styled.accordion .accordion .active.title {\r\n background: @styledTitleHoverBackground;\r\n color: @styledTitleHoverColor;\r\n}\r\n.ui.styled.accordion .accordion .title:hover,\r\n.ui.styled.accordion .accordion .active.title {\r\n background: @styledHoverChildTitleBackground;\r\n color: @styledHoverChildTitleColor;\r\n}\r\n\r\n\r\n/* Active */\r\n.ui.styled.accordion .active.title {\r\n background: @styledActiveTitleBackground;\r\n color: @styledActiveTitleColor;\r\n}\r\n.ui.styled.accordion .accordion .active.title {\r\n background: @styledActiveChildTitleBackground;\r\n color: @styledActiveChildTitleColor;\r\n}\r\n\r\n\r\n/*******************************\r\n States\r\n*******************************/\r\n\r\n/*--------------\r\n Active\r\n---------------*/\r\n\r\n.ui.accordion .active.content,\r\n.ui.accordion .accordion .active.content {\r\n display: block;\r\n}\r\n\r\n/*******************************\r\n Variations\r\n*******************************/\r\n\r\n/*--------------\r\n Fluid\r\n---------------*/\r\n\r\n.ui.fluid.accordion,\r\n.ui.fluid.accordion .accordion {\r\n width: 100%;\r\n}\r\n\r\n/*--------------\r\n Inverted\r\n---------------*/\r\n\r\n.ui.inverted.accordion .title:not(.ui) {\r\n color: @invertedTitleColor;\r\n}\r\n\r\n.loadUIOverrides();\r\n\r\n" }, { "path": "parrot/semantic/src/definitions/modules/checkbox.js", "content": "/*!\n * # Semantic UI - Checkbox\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.checkbox = function(parameters) {\n var\n $allModules = $(this),\n moduleSelector = $allModules.selector || '',\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n returnedValue\n ;\n\n $allModules\n .each(function() {\n var\n settings = $.extend(true, {}, $.fn.checkbox.settings, parameters),\n\n className = settings.className,\n namespace = settings.namespace,\n selector = settings.selector,\n error = settings.error,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n $module = $(this),\n $label = $(this).children(selector.label),\n $input = $(this).children(selector.input),\n input = $input[0],\n\n initialLoad = false,\n shortcutPressed = false,\n instance = $module.data(moduleNamespace),\n\n observer,\n element = this,\n module\n ;\n\n module = {\n\n initialize: function() {\n module.verbose('Initializing checkbox', settings);\n\n module.create.label();\n module.bind.events();\n\n module.set.tabbable();\n module.hide.input();\n\n module.observeChanges();\n module.instantiate();\n module.setup();\n },\n\n instantiate: function() {\n module.verbose('Storing instance of module', module);\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n destroy: function() {\n module.verbose('Destroying module');\n module.unbind.events();\n module.show.input();\n $module.removeData(moduleNamespace);\n },\n\n fix: {\n reference: function() {\n if( $module.is(selector.input) ) {\n module.debug('Behavior called on adjusting invoked element');\n $module = $module.closest(selector.checkbox);\n module.refresh();\n }\n }\n },\n\n setup: function() {\n module.set.initialLoad();\n if( module.is.indeterminate() ) {\n module.debug('Initial value is indeterminate');\n module.indeterminate();\n }\n else if( module.is.checked() ) {\n module.debug('Initial value is checked');\n module.check();\n }\n else {\n module.debug('Initial value is unchecked');\n module.uncheck();\n }\n module.remove.initialLoad();\n },\n\n refresh: function() {\n $label = $module.children(selector.label);\n $input = $module.children(selector.input);\n input = $input[0];\n },\n\n hide: {\n input: function() {\n module.verbose('Modifying z-index to be unselectable');\n $input.addClass(className.hidden);\n }\n },\n show: {\n input: function() {\n module.verbose('Modifying z-index to be selectable');\n $input.removeClass(className.hidden);\n }\n },\n\n observeChanges: function() {\n if('MutationObserver' in window) {\n observer = new MutationObserver(function(mutations) {\n module.debug('DOM tree modified, updating selector cache');\n module.refresh();\n });\n observer.observe(element, {\n childList : true,\n subtree : true\n });\n module.debug('Setting up mutation observer', observer);\n }\n },\n\n attachEvents: function(selector, event) {\n var\n $element = $(selector)\n ;\n event = $.isFunction(module[event])\n ? module[event]\n : module.toggle\n ;\n if($element.length > 0) {\n module.debug('Attaching checkbox events to element', selector, event);\n $element\n .on('click' + eventNamespace, event)\n ;\n }\n else {\n module.error(error.notFound);\n }\n },\n\n event: {\n click: function(event) {\n var\n $target = $(event.target)\n ;\n if( $target.is(selector.input) ) {\n module.verbose('Using default check action on initialized checkbox');\n return;\n }\n if( $target.is(selector.link) ) {\n module.debug('Clicking link inside checkbox, skipping toggle');\n return;\n }\n module.toggle();\n $input.focus();\n event.preventDefault();\n },\n keydown: function(event) {\n var\n key = event.which,\n keyCode = {\n enter : 13,\n space : 32,\n escape : 27\n }\n ;\n if(key == keyCode.escape) {\n module.verbose('Escape key pressed blurring field');\n $input.blur();\n shortcutPressed = true;\n }\n else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {\n module.verbose('Enter/space key pressed, toggling checkbox');\n module.toggle();\n shortcutPressed = true;\n }\n else {\n shortcutPressed = false;\n }\n },\n keyup: function(event) {\n if(shortcutPressed) {\n event.preventDefault();\n }\n }\n },\n\n check: function() {\n if( !module.should.allowCheck() ) {\n return;\n }\n module.debug('Checking checkbox', $input);\n module.set.checked();\n if( !module.should.ignoreCallbacks() ) {\n settings.onChecked.call(input);\n settings.onChange.call(input);\n }\n },\n\n uncheck: function() {\n if( !module.should.allowUncheck() ) {\n return;\n }\n module.debug('Unchecking checkbox');\n module.set.unchecked();\n if( !module.should.ignoreCallbacks() ) {\n settings.onUnchecked.call(input);\n settings.onChange.call(input);\n }\n },\n\n indeterminate: function() {\n if( module.should.allowIndeterminate() ) {\n module.debug('Checkbox is already indeterminate');\n return;\n }\n module.debug('Making checkbox indeterminate');\n module.set.indeterminate();\n if( !module.should.ignoreCallbacks() ) {\n settings.onIndeterminate.call(input);\n settings.onChange.call(input);\n }\n },\n\n determinate: function() {\n if( module.should.allowDeterminate() ) {\n module.debug('Checkbox is already determinate');\n return;\n }\n module.debug('Making checkbox determinate');\n module.set.determinate();\n if( !module.should.ignoreCallbacks() ) {\n settings.onDeterminate.call(input);\n settings.onChange.call(input);\n }\n },\n\n enable: function() {\n if( module.is.enabled() ) {\n module.debug('Checkbox is already enabled');\n return;\n }\n module.debug('Enabling checkbox');\n module.set.enabled();\n settings.onEnable.call(input);\n // preserve legacy callbacks\n settings.onEnabled.call(input);\n },\n\n disable: function() {\n if( module.is.disabled() ) {\n module.debug('Checkbox is already disabled');\n return;\n }\n module.debug('Disabling checkbox');\n module.set.disabled();\n settings.onDisable.call(input);\n // preserve legacy callbacks\n settings.onDisabled.call(input);\n },\n\n get: {\n radios: function() {\n var\n name = module.get.name()\n ;\n return $('input[name=\"' + name + '\"]').closest(selector.checkbox);\n },\n otherRadios: function() {\n return module.get.radios().not($module);\n },\n name: function() {\n return $input.attr('name');\n }\n },\n\n is: {\n initialLoad: function() {\n return initialLoad;\n },\n radio: function() {\n return ($input.hasClass(className.radio) || $input.attr('type') == 'radio');\n },\n indeterminate: function() {\n return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate');\n },\n checked: function() {\n return $input.prop('checked') !== undefined && $input.prop('checked');\n },\n disabled: function() {\n return $input.prop('disabled') !== undefined && $input.prop('disabled');\n },\n enabled: function() {\n return !module.is.disabled();\n },\n determinate: function() {\n return !module.is.indeterminate();\n },\n unchecked: function() {\n return !module.is.checked();\n }\n },\n\n should: {\n allowCheck: function() {\n if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow check, checkbox is already checked');\n return false;\n }\n if(settings.beforeChecked.apply(input) === false) {\n module.debug('Should not allow check, beforeChecked cancelled');\n return false;\n }\n return true;\n },\n allowUncheck: function() {\n if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow uncheck, checkbox is already unchecked');\n return false;\n }\n if(settings.beforeUnchecked.apply(input) === false) {\n module.debug('Should not allow uncheck, beforeUnchecked cancelled');\n return false;\n }\n return true;\n },\n allowIndeterminate: function() {\n if(module.is.indeterminate() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow indeterminate, checkbox is already indeterminate');\n return false;\n }\n if(settings.beforeIndeterminate.apply(input) === false) {\n module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');\n return false;\n }\n return true;\n },\n allowDeterminate: function() {\n if(module.is.determinate() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow determinate, checkbox is already determinate');\n return false;\n }\n if(settings.beforeDeterminate.apply(input) === false) {\n module.debug('Should not allow determinate, beforeDeterminate cancelled');\n return false;\n }\n return true;\n },\n forceCallbacks: function() {\n return (module.is.initialLoad() && settings.fireOnInit);\n },\n ignoreCallbacks: function() {\n return (initialLoad && !settings.fireOnInit);\n }\n },\n\n can: {\n change: function() {\n return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );\n },\n uncheck: function() {\n return (typeof settings.uncheckable === 'boolean')\n ? settings.uncheckable\n : !module.is.radio()\n ;\n }\n },\n\n set: {\n initialLoad: function() {\n initialLoad = true;\n },\n checked: function() {\n module.verbose('Setting class to checked');\n $module\n .removeClass(className.indeterminate)\n .addClass(className.checked)\n ;\n if( module.is.radio() ) {\n module.uncheckOthers();\n }\n if(!module.is.indeterminate() && module.is.checked()) {\n module.debug('Input is already checked, skipping input property change');\n return;\n }\n module.verbose('Setting state to checked', input);\n $input\n .prop('indeterminate', false)\n .prop('checked', true)\n ;\n module.trigger.change();\n },\n unchecked: function() {\n module.verbose('Removing checked class');\n $module\n .removeClass(className.indeterminate)\n .removeClass(className.checked)\n ;\n if(!module.is.indeterminate() && module.is.unchecked() ) {\n module.debug('Input is already unchecked');\n return;\n }\n module.debug('Setting state to unchecked');\n $input\n .prop('indeterminate', false)\n .prop('checked', false)\n ;\n module.trigger.change();\n },\n indeterminate: function() {\n module.verbose('Setting class to indeterminate');\n $module\n .addClass(className.indeterminate)\n ;\n if( module.is.indeterminate() ) {\n module.debug('Input is already indeterminate, skipping input property change');\n return;\n }\n module.debug('Setting state to indeterminate');\n $input\n .prop('indeterminate', true)\n ;\n module.trigger.change();\n },\n determinate: function() {\n module.verbose('Removing indeterminate class');\n $module\n .removeClass(className.indeterminate)\n ;\n if( module.is.determinate() ) {\n module.debug('Input is already determinate, skipping input property change');\n return;\n }\n module.debug('Setting state to determinate');\n $input\n .prop('indeterminate', false)\n ;\n },\n disabled: function() {\n module.verbose('Setting class to disabled');\n $module\n .addClass(className.disabled)\n ;\n if( module.is.disabled() ) {\n module.debug('Input is already disabled, skipping input property change');\n return;\n }\n module.debug('Setting state to disabled');\n $input\n .prop('disabled', 'disabled')\n ;\n module.trigger.change();\n },\n enabled: function() {\n module.verbose('Removing disabled class');\n $module.removeClass(className.disabled);\n if( module.is.enabled() ) {\n module.debug('Input is already enabled, skipping input property change');\n return;\n }\n module.debug('Setting state to enabled');\n $input\n .prop('disabled', false)\n ;\n module.trigger.change();\n },\n tabbable: function() {\n module.verbose('Adding tabindex to checkbox');\n if( $input.attr('tabindex') === undefined) {\n $input.attr('tabindex', 0);\n }\n }\n },\n\n remove: {\n initialLoad: function() {\n initialLoad = false;\n }\n },\n\n trigger: {\n change: function() {\n var\n events = document.createEvent('HTMLEvents'),\n inputElement = $input[0]\n ;\n if(inputElement) {\n module.verbose('Triggering native change event');\n events.initEvent('change', true, false);\n inputElement.dispatchEvent(events);\n }\n }\n },\n\n\n create: {\n label: function() {\n if($input.prevAll(selector.label).length > 0) {\n $input.prev(selector.label).detach().insertAfter($input);\n module.debug('Moving existing label', $label);\n }\n else if( !module.has.label() ) {\n $label = $('