diff --git a/.gitignore b/.gitignore index ef877a0..aa4f729 100644 --- a/.gitignore +++ b/.gitignore @@ -7,10 +7,14 @@ node_modules coverage # production -build +/build # misc .DS_Store .env npm-debug.log .vscode +yarn-error.log + +#semantic build +src/semantic/dist diff --git a/README.md b/README.md index 7a0c343..ad8e624 100644 --- a/README.md +++ b/README.md @@ -16,3 +16,25 @@ To use against a production gocommerce install, make sure to set environment var * **REACT_APP_SITE_URL** the URL of the ecommerce website * **REACT_APP_NETLIFY_AUTH** the URL of the GoTrue instance used to manage authentication * **REACT_APP_NETLIFY_COMMERCE** The URL of the GoCommerce instance + +## Semantic UI Styling +This UI uses a custom theme built using [Semantic UI React](https://react.semantic-ui.com/theming) framework. + +To make changes to the theme, modifiy the variable and override files (which are stored inside the `collections`, `elements`, `globals`, `modules` and `views` folders) inside the site folder. +``` +src/semantic/src/site +``` +It is inside here you will find the files for all component styles and variables. +More information about how to create and work with Semantic's theming can be found here: +[Semantic theming](https://semantic-ui.com/usage/theming.html) + +To build all css files run: +``` +yarn build:css +``` +This compiles the variable and overide files to css files. + +To watch for css changes run: +``` +yarn watch:css +``` diff --git a/package.json b/package.json index 31bfeaf..5d370dc 100644 --- a/package.json +++ b/package.json @@ -6,31 +6,58 @@ "eslint": "^3.19.0", "eslint-plugin-flowtype": "^2.32.1", "flow-bin": "^0.37.4", - "react-scripts": "0.9.5" + "react-scripts": "0.9.5", + "react-to-print": "^2.0.0-alpha-4" }, "dependencies": { + "better-console": "^1.0.1", "csvexport": "^1.0.2", "date-fns": "^1.21.0", "director": "^1.2.8", - "gocommerce-js": "^3.9.0", + "gocommerce-js": "^4.4.1", + "gulp": "^3.9.1", + "gulp-autoprefixer": "^4.0.0", + "gulp-chmod": "^2.0.0", + "gulp-clean-css": "^3.7.0", + "gulp-clone": "^1.1.3", + "gulp-concat": "^2.6.1", + "gulp-concat-css": "^2.3.0", + "gulp-dedupe": "^0.0.2", + "gulp-flatten": "^0.3.1", + "gulp-header": "^1.8.9", + "gulp-help": "^1.6.1", + "gulp-if": "^2.0.2", + "gulp-less": "^3.3.2", + "gulp-plumber": "^1.1.0", + "gulp-print": "^2.0.1", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.6.1", + "gulp-rtlcss": "^1.0.0", + "gulp-uglify": "^3.0.0", + "gulp-watch": "^4.3.11", "history": "^4.5.0", "jwt-decode": "^2.1.0", "lodash": "^4.17.4", + "mdi-react": "^4.1.0", "money": "^0.2.0", "netlify-auth-js": "^0.5.2", "react": "^15.4.1", "react-dom": "^15.4.1", "react-gravatar": "^2.6.1", - "semantic-ui-css": "^2.2.4", - "semantic-ui-react": "^0.62.1" + "require-dot-file": "^0.4.0", + "run-sequence": "^2.1.0", + "semantic-ui-react": "^0.62.1", + "yamljs": "^0.3.0" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", + "build:css": "cd src/semantic && gulp build", + "start": "yarn build:css && react-scripts start", + "build": "yarn build:css && react-scripts build", + "watch:css": "cd src/semantic && gulp watch", "test": "react-scripts test --env=jsdom", - "lint": "npm run lint:js", + "lint": "yarn lint:js", "lint:js": "eslint .", - "lint:js:fix": "npm run lint:js -- --fix", + "lint:js:fix": "yarn lint:js -- --fix", "eject": "react-scripts eject", "flow": "flow" } diff --git a/src/App.css b/src/App.css index 49ad7d3..5f7e17a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,8 @@ .App {} .Main { - margin-left: 15rem; + margin: 0 7rem 0 7rem; padding: 1rem; + margin-top: 50px; } .tr-clickable { @@ -15,3 +16,11 @@ .search-padding { padding-bottom: 1rem; } + +@media only screen and (max-width: 767px){ + .Main { + overflow-x: hidden; + margin: 0; + padding: 0; + } +} diff --git a/src/App.js b/src/App.js index 8cedf70..5832f7c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,23 @@ // @flow -import type {User} from './Types'; -import React, {PropTypes, Component} from 'react'; -import director from 'director'; -import Auth from 'netlify-auth-js'; -import Commerce from 'gocommerce-js'; -import Sidebar from './Components/Sidebar'; -import {WithAuthentication, Customers, Discounts, Order, Orders, Reports} from './Components'; -import 'semantic-ui-css/semantic.css'; -import './App.css'; -import config from './config/default.json'; - -const env = process.env.REACT_APP_ENV || 'dev'; +import type { User } from "./Types"; +import React, { PropTypes, Component } from "react"; +import director from "director"; +import Auth from "netlify-auth-js"; +import Commerce from "gocommerce-js"; +import { + WithAuthentication, + Navigation, + Customers, + Discounts, + Order, + Orders, + Reports +} from "./Components"; +import "./semantic/dist/semantic.min.css"; +import "./App.css"; +import config from "./config/default.json"; + +const env = process.env.REACT_APP_ENV || "dev"; if (process.env.REACT_APP_SITE_URL) { config.siteURL = process.env.REACT_APP_SITE_URL; } @@ -27,12 +34,12 @@ if (process.env.REACT_APP_RECEIPT_TEMPLATE) { config.receiptTemplate = process.env.REACT_APP_RECEIPT_TEMPLATE; } -const auth = new Auth({APIUrl: config.netlifyAuth}); -const commerce = new Commerce({APIUrl: config.netlifyCommerce}); +const auth = new Auth({ APIUrl: config.netlifyAuth }); +const commerce = new Commerce({ APIUrl: config.netlifyCommerce }); type Router = { init: () => void, - setRoute: (string) => void + setRoute: string => void }; function NotFound(props) { @@ -51,8 +58,8 @@ class App extends Component { props: {}; state: { user: ?User, - route: 'reports' | 'orders' | 'order' | 'customers', - active: 'Reports' | 'Orders' | 'Customers', + route: "reports" | "orders" | "order" | "customers", + active: "Reports" | "Orders" | "Customers", params: {}, query: ?{} }; @@ -63,43 +70,55 @@ class App extends Component { router: PropTypes.object }; - constructor(props : {}) { + constructor(props: {}) { super(props); - const user = auth.currentUser(); + const user = auth.currentUser(); commerce.setUser(user); - this.state = {user, route: "reports", active: "Reports", params: {}, query: null}; + this.state = { + user, + route: "reports", + active: "Reports", + params: {}, + query: null + }; } componentDidMount() { this.router = new director.Router({ - "/": () => this.setState({route: "reports", active: "Reports"}), - "/orders": () => this.setState({route: "orders", active: "Orders"}), - "/orders/:id": (id) => this.setState({route: "order", active: "Orders", params: {id}}), - "/orders/:id/:item": (id, item) => this.setState({route: "order", active: "Orders", params: {id, item}}), - "/customers": () => this.setState({route: "customers", active: "Customers"}), - }).configure({html5history: true}); + "/": () => this.setState({ route: "reports", active: "Reports" }), + "/orders": () => this.setState({ route: "orders", active: "Orders" }), + "/orders/:id": id => + this.setState({ route: "order", active: "Orders", params: { id } }), + "/orders/:id/:item": (id, item) => + this.setState({ + route: "order", + active: "Orders", + params: { id, item } + }), + "/customers": () => + this.setState({ route: "customers", active: "Customers" }) + }).configure({ html5history: true }); this.router.init(); } handleLogin = (email: string, password: string) => { - return auth.login(email, password) - .then((user) => { - user.persistSession(user); - commerce.setUser(user); - this.setState({user}); - return user; - }); + return auth.login(email, password).then(user => { + user.persistSession(user); + commerce.setUser(user); + this.setState({ user }); + return user; + }); }; handleLogout = () => { - const {user} = this.state; + const { user } = this.state; user && user.logout(); - this.setState({user: null}); + this.setState({ user: null }); }; handleLink = (e: SyntheticInputEvent) => { e.preventDefault(); - const path = e.target.getAttribute('href'); + const path = e.target.getAttribute("href"); if (path) { this.handlePush(path); } @@ -110,27 +129,37 @@ class App extends Component { }; render() { - const {user, route, active, params, query} = this.state; + const { user, route, active, params, query } = this.state; const component = MainComponent[route] || null; - return (
- - -
- {component && React.createElement(component, { - config, route, commerce, user, params, query, push: this.handlePush, onLink: this.handleLink - })} -
- -
); + return ( +
+ + +
+ {component && + React.createElement(component, { + config, + route, + commerce, + user, + params, + query, + push: this.handlePush, + onLink: this.handleLink + })} +
+ +
+ ); } } diff --git a/src/Components/Customers/index.js b/src/Components/Customers/index.js index f1e434b..dd101b2 100644 --- a/src/Components/Customers/index.js +++ b/src/Components/Customers/index.js @@ -1,18 +1,36 @@ // @flow -import type {Commerce, Customer, Pagination} from '../../Types'; -import React, {PropTypes, Component} from 'react'; -import {Breadcrumb, Divider, Grid, Item, Segment, Input, Button} from 'semantic-ui-react'; -import ErrorMessage from '../Messages/Error'; -import Gravatar from 'react-gravatar'; -import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; +import type { Commerce, Customer, Pagination } from "../../Types"; +import React, { PropTypes, Component } from "react"; +import { + Breadcrumb, + Form, + Divider, + Grid, + Checkbox, + Card, + Segment, + Input, + Button, + Container, + Modal +} from "semantic-ui-react"; +import ErrorMessage from "../Messages/Error"; +import Gravatar from "react-gravatar"; +import distanceInWordsToNow from "date-fns/distance_in_words_to_now"; +import PaginationView, { pageFromURL } from "../Pagination"; +import "csvexport/dist/Export.min"; + +const PER_PAGE = 50; type props = { commerce: Commerce, - onLink: (SyntheticEvent) => void + onLink: SyntheticEvent => void }; export default class Customers extends Component { props: props; state: { + modalOpen: boolean, + selectedCustomers: Object, loading: boolean, error: ?Object, customers: ?Array, @@ -24,21 +42,28 @@ export default class Customers extends Component { constructor(props: props) { super(props); this.state = { + modalOpen: false, + selectedCustomers: {}, loading: true, error: null, customers: null, - page: 1, + page: pageFromURL(), pagination: null, search: null }; } componentDidMount() { - this.loadUsers() + this.loadUsers(); } - handleSearchInput = (e: SyntheticEvent, el: {value: ?string}) => { - this.setState({search: el.value ? el.value : null}); + handleSearchInput = (e: SyntheticEvent, el: { value: ?string }) => { + this.setState({ search: el.value ? el.value : null }); + }; + + handlePage = (e: SyntheticEvent, el: { "data-number": string }) => { + e.preventDefault(); + this.changePage(parseInt(el["data-number"], 10)); }; search = (e: SyntheticEvent) => { @@ -46,72 +71,155 @@ export default class Customers extends Component { this.loadUsers(); }; + changePage(page: number) { + let location = document.location.href; + if (location.match(/page=\d+/)) { + location = location.replace(/page=\d+/, `page=${page}`); + } else { + location += `${location.match(/\?/) ? "&" : "?"}page=${page}`; + } + this.props.push(location.replace(/https?:\/\/[^\/]+/, "")); + this.setState({ page }, this.loadUsers); + } + + handleOpen = () => this.setState({ modalOpen: true }) + + handleClose = () => this.setState({ modalOpen: false }) + + handleCustomerSelect = (e: SyntheticEvent, el: { value: string, checked: boolean}) =>{ + if(el.checked){ + this.setState({ selectedCustomers: {...this.state.selectedCustomers, [el.value]:true}}) + } else { + const selected = {...this.state.selectedCustomers} + delete selected[el.value] + this.setState({selectedCustomers: {...selected}}) + } + } + + handleDownload = (e: SyntheticEvent) => { + e.preventDefault(); + const customers = this.state.customers.filter(customer => this.state.selectedCustomers[customer.id]) + const exporter = window.Export.create({ filename: "customers.csv" }); + if(customers.length > 0){ + exporter.downloadCsv(customers) + }; + } + + deleteSelectedUsers = () => { + this.setState({ loading: true , modalOpen: false }); + const selectedIds = Object.keys(this.state.selectedCustomers); + this.props.commerce + .deleteUsers(selectedIds) + .then(({ users, pagination }) => { + this.setState({ + loading: false, + customers: users, + pagination, + error: null + }); + this.loadUsers(); + }) + .catch(error => { + console.log("Error deleting customers: %o", error); + this.setState({ loading: false, error }); + }); + } + loadUsers = () => { - this.setState({loading: true}); - this.props.commerce.users(this.userQuery()) - .then(({users, pagination}) => { - this.setState({loading: false, customers: users, pagination, error: null}); + this.setState({ loading: true }); + this.props.commerce + .users(this.userQuery()) + .then(({ users, pagination }) => { + this.setState({ + loading: false, + customers: users, + pagination, + error: null + }); }) - .catch((error) => { + .catch(error => { console.log("Error loading customers: %o", error); - this.setState({loading: false, error}); + this.setState({ loading: false, error }); }); }; - + userQuery(page: ?number) { const query: Object = { + per_page: PER_PAGE, page: page || this.state.page }; if (this.state.search) { - query.email = UsersFilters.email(this.state) + query.email = UsersFilters.email(this.state); } return query; } - render() { - const {onLink} = this.props; - const {loading, error, customers} = this.state; - - return
- - - - - Customers - - - - - - - - - - -
- - - - -
- - - - - {customers && customers.map((customer) => -
- -
- - {customer.email} - {customer.order_count} Orders - Created {distanceInWordsToNow(customer.created_at)} ago - - )} - - -
; + const { onLink } = this.props; + const { loading, error, customers, pagination } = this.state; + + return ( + +
+ + + +
+ + + + Delete Customer Data} + open={this.state.modalOpen} + onClose={this.handleClose} + size='small'> + Delete Customer Data + +

Are you sure you want to delete this customer data?

+ + + + + + + + ); + } +} diff --git a/src/Components/Order/Address.js b/src/Components/Order/Address.js index 8f24b30..8f34188 100644 --- a/src/Components/Order/Address.js +++ b/src/Components/Order/Address.js @@ -1,21 +1,45 @@ // @flow import type {Address} from '../../Types'; import React from "react"; +import AddressEditor from './AddressEditor'; -type args = {title: string, address: ?Address, href: string, onLink: (SyntheticEvent) => void}; -export default function({title, address, href, onLink}: args) { +type args = { + title: string, + address: ?Address, + href: string, + onSave: any, + item: 'shipping_address' | 'billing_address' +} + +const IconStyle = { + padding: '5px', + boxShadow: 'none' +} + +const H3Style = { + color: '#2a4872', + fontSize: '13px' +} +const Hr = { + border: 'none', + height: '2px', + color: '#2a4872', + backgroundColor: '#2a4872' +} +export default function ({ title, address, href, onSave, item }: args) { return
-

- {title} - Edit +

+ {title === "Billing" ? String.fromCodePoint(128181) + " BILLING" : title === "Shipping" ? String.fromCodePoint(128230) + " SHIPPING" : null} + {address && }

- +
{address &&
- {address.first_name} {address.last_name}
- {address.company && {address.company}
} - {address.address1}
- {address.address2 && {address.address2}
} + {address.name}
+ {address.company && {address.company}
} + {address.address1}
+ {address.address2 && {address.address2}
} {address.city}, {address.zip}, {address.state && `${address.state}, `} {address.country}
} +
; } diff --git a/src/Components/Order/AddressEditor.js b/src/Components/Order/AddressEditor.js index adaaee2..8313281 100644 --- a/src/Components/Order/AddressEditor.js +++ b/src/Components/Order/AddressEditor.js @@ -1,34 +1,55 @@ // @flow import type {Order, Address} from '../../Types'; import React, {Component} from "react"; -import {Button, Form} from "semantic-ui-react"; +import ErrorMessage from '../Messages/Error'; +import {Button, Form, Modal} from "semantic-ui-react"; +import PencilIcon from "mdi-react/PencilIcon"; +import CloseCircleIcon from "mdi-react/CloseCircleIcon"; + +const IconStyle = { + float: 'right', + cursor: 'pointer', +} type Props = { order: Order, - item: 'shipping_address' | 'billing_address' + item: 'shipping_address' | 'billing_address', + address: Address, + onSave: (SyntheticEvent) => void }; + export default class AddressEditor extends Component { state: { - addr: ?Address + address: ?Address, + error: ?Object, + loading: boolean, + modalOpen: boolean }; constructor(props: Props) { super(props); this.state = { - addr: props.order ? Object.assign({}, props.order[props.item]) : null + address: props.address, + error: null, + loading: false, + modalOpen: false }; } + handleOpen = () => this.setState({ modalOpen: true }) + + handleClose = () => this.setState({ modalOpen: false }) + componentWillReceiveProps(nextProps: Props) { if (nextProps.order && !this.props.order) { - this.setState({addr: Object.assign({}, nextProps.order[nextProps.item])}); + this.setState({address: Object.assign({}, nextProps.order[nextProps.item])}); } } handleChange = (e: SyntheticEvent) => { - if (e.target instanceof HTMLInputElement && e.target.name && e.target.value){ - this.setState({addr: { - ...this.state.addr, + if (e.target instanceof HTMLInputElement && e.target.name && e.target.value.length >=0 ){ + this.setState({address: { + ...this.state.address, [e.target.name]: e.target.value }}); } @@ -36,34 +57,59 @@ export default class AddressEditor extends Component { handleSubmit = (e: SyntheticEvent) => { e.preventDefault(); - this.props.onSave(this.props.item, this.state); + this.setState({loading: true}) + this.props.onSave(this.props.item, this.state.address) + .then(()=> { + this.handleClose(); + this.setState({loading: false}) + }) + .catch((error) => { + console.error("Error updating order: %o"); + this.setState({error,loading: false}); + }) }; render() { - const {order, onLink} = this.props; - if (!order) { return null; } - - const addr = this.state.addr; + const { item, order, onSave } = this.props; + const { address, error, loading} = this.state; - return addr && -
- - - - - - - - - - - - - - - - - or Cancel -
; + return } + open={this.state.modalOpen} + onClose={this.handleClose} + > + + {item ==="billing_address" ? String.fromCodePoint(128181) + " Billing Address" : item === "shipping_address" ? String.fromCodePoint(128230) + " Shipping Address": null} + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + } } diff --git a/src/Components/Order/index.js b/src/Components/Order/index.js index e6b8f36..70be468 100644 --- a/src/Components/Order/index.js +++ b/src/Components/Order/index.js @@ -1,8 +1,11 @@ // @flow -import type {Config, Currency, Commerce, Order, Customer, TransactionType} from '../../Types'; -import React, {PropTypes, Component} from 'react'; +import type { Config, Currency, Commerce, Order, Customer, TransactionType } from '../../Types'; +import React, { PropTypes, Component } from 'react'; +import ReactToPrint from "react-to-print"; import format from 'date-fns/format'; -import {Button, Form, Grid, Header, List, Message, Segment, Table} from 'semantic-ui-react'; +import { Button, Form, Grid, Header, List, Message, Segment, Table, Container, Modal } from 'semantic-ui-react'; +import CheckboxMarkedIcon from "mdi-react/CheckboxMarkedIcon"; +import CloseCircleIcon from "mdi-react/CloseCircleIcon"; import Layout from '../Layout'; import ErrorMessage from '../Messages/Error'; import Address from './Address'; @@ -55,18 +58,28 @@ export default class OrderView extends Component { config: Config, push: (string) => void, onLink: (SyntheticEvent) => void, + onSave: (SyntheticEvent) => void }; state: { loading: boolean, error: ?Object, order: ?Order, customer: ?Customer, - newFullfilementState: ?string + newFullfilementState: ?string, + modalOpen: boolean }; + componentRef: ?HTMLDivElement; constructor(props: Object) { super(props); - this.state = {loading: true, error: null, order: null, customer: null, newFullfilementState: null}; + this.state = { + loading: true, + error: null, + order: null, + customer: null, + newFullfilementState: null, + modalOpen: false + }; } componentDidMount() { @@ -82,24 +95,23 @@ export default class OrderView extends Component { this.setState({loading: false, error}); }); } + + handleOpen = () => this.setState({ modalOpen: true }) + + handleClose = () => this.setState({ modalOpen: false }) handleSave = (item: 'shipping_address' | 'billing_address' | 'fulfillment_state', data: Object | string) => { const {commerce, push} = this.props; const {order} = this.state; if (!order) { - return; + return Promise.resolve(); } - this.setState({loading: true}); - commerce.updateOrder(order.id, {[item]: data}) + return commerce.updateOrder(order.id, {[item]: data}) .then((order) => { push(`/orders/${order.id}`); this.setState({loading: false, error: null, order}); }) - .catch((error) => { - console.error("Error updating order: %o"); - this.setState({loading: false, error}); - }) }; handleShippingUpdate = (e: SyntheticEvent) => { @@ -125,183 +137,158 @@ export default class OrderView extends Component { commerce.orderReceipt(order.id, config.receiptTemplate).then((data) => { openWindow.document.body.innerHTML = data.data; }); - } render() { - const {config, params, onLink} = this.props; + const {config, params, onLink } = this.props; const {customer, loading, error, order, newFullfilementState} = this.state; - const item = params.item ? EditableItems[params.item] : null; return + > - - - - - -
- Order Details - - {params.id} - -
- - {item && React.createElement(item, {order, item: params.item, onLink, onSave: this.handleSave})} - {!item && - - -

General Details

- - {order &&

- Subtotal: {formatPrice(order.subtotal, order.currency)}
- Taxes: {formatPrice(order.taxes, order.currency)}
- Total: {formatPrice(order.total, order.currency)} -

} - - {order &&

- {format(order.created_at, 'MMM DD, YYYY')} -

} - - - - + + + + +
+ + {params.id} + {order &&

+ {format(order.created_at, 'MMM DD, YYYY')} – {formatPrice(order.subtotal, order.currency)} +

} + + {order && + {order.billing_address.name} + {customer &&

+ {customer.order_count} orders – {order.email}

} + } +
+ + {item && React.createElement(item, {order, item: params.item, onLink, onSave: this.handleSave})} + {!item && + +
- - - -
+ {order && order.transactions && order.transactions.map((t) => + {order.payment_state ==="paid"? : null} + {order.payment_state === "paid"? "Paid on " + format(t.created_at, 'MMM DD') : order.payment_state === "pending"? "Pending" : order.payment_state} + {t.failure_description && + Transaction failed +

{t.failure_description}

+ } + )} + + +
(this.componentRef = el)}> +
+ onSave={this.handleSave} + item="shipping_address" + /> +
+ {order && + {order.fulfillment_state === "shipped" ? : null} + {order.fulfillment_state === "shipped" ? "Shipped " : order.fulfillment_state === "pending"? "Not shipped" : order.fulfillment_state} + } +
+ } + content={() => this.componentRef} + /> + - - - } - - - -
- Line Items - - {order && formatItemTypes(order.line_items)} - -
- - - - - - SKU - - - Item - - - Attributes - - - Type - - - Qty - - - Cost - - - - - {order && (order.line_items || []).map((item) => ( - - {item.sku} - -
- {item.title || null} - - {item.description &&
{item.description}
} - -
- - {JSON.stringify(item.meta, null, 2)} - {item.type || null} - {item.quantity || null} - {formatPrice(item.price, order.currency)} - - ))} - -
- - - - - -
- Customer - {order && order.email} -
- - {!customer &&

Anonymous Buyer

} - {customer &&

{customer.order_count} total orders {" "} - view

} - - - - -
- Billing Status - - {order && order.payment_state} - {order && order.payment_state === 'paid' && receipt} - -
- - {order && - {order.transactions && order.transactions.map((t) => - - {formatPrice(t.amount, order.currency)} {formatTransactionType(t.type)} - - {format(t.created_at, 'MMM DD, YYYY')} - - {t.failure_description && - Transaction failed -

{t.failure_description}

- } - )} - } - - - -
- Shipping Status - Shipping to {order && order.shipping_address && order.shipping_address.country} -
- -
- - - - {order && newFullfilementState && newFullfilementState !== order.fulfillment_state && } -
- - - - + + + {order && (order.line_items || []).map((item) => ( + +

{item.quantity + "x"}

+
+ {item.title || null} + +

{item.sku}

+ +
+
+

{item.type || null}

+

{formatPrice(item.price, order.currency)}

+
+ + } + open={this.state.modalOpen} + onClose={this.handleClose}> + {item.title} + + +

SKU:

+

{item.sku}

+
+

Quantity:

+

{item.quantity}

+
+

Type

+

{item.type}

+
+

Price

+

{formatPrice(item.price, order.currency)}

+
+

Taxes

+

{formatPrice(item.vat, order.currency)}

+
+

Total

+

{formatPrice(item.price + item.vat, order.currency)}

+ + + + +

Authors

+

{item.meta ? item.meta.authors : null}

+
+

Product path

+

{item.sku}

+
+

Component

+

{item.meta ? item.meta.component : null}

+ + + + ))} + + + {order && +

{ Math.round((order.discount / order.total) * 100) + "%"} Discount

+

{formatPrice(order.discount, order.currency)}

+
+

Shipping

+

{formatPrice(order.shipping, order.currency)}

+
+
{formatPrice(order.total, order.currency)}
+
+ Before Tax:

{formatPrice(order.subtotal, order.currency)}


+ Taxes:

{formatPrice(order.taxes, order.currency)}


+ Total:

{formatPrice(order.total, order.currency)}

+
+ } + + + } + + + + + + ; } } diff --git a/src/Components/Orders/index.js b/src/Components/Orders/index.js index 6d9e1ec..fff08be 100644 --- a/src/Components/Orders/index.js +++ b/src/Components/Orders/index.js @@ -1,136 +1,214 @@ // @flow -import type {Commerce, Pagination, Order, Address} from '../../Types'; -import _ from 'lodash'; -import React, {Component} from 'react'; -import {Button, Checkbox, Grid, Dimmer, Dropdown, Loader, Table, Input, Select} from 'semantic-ui-react'; -import Layout from '../Layout'; -import PaginationView, {pageFromURL} from '../Pagination'; -import ErrorMessage from '../Messages/Error'; -import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; -import countries from '../../data/countries.json'; -import 'csvexport/dist/Export.min'; -import './Orders.css'; - - -const STORED_FIELDS_KEY = 'commerce.admin.orderFields'; +import type { Commerce, Pagination, Order, Address } from "../../Types"; +import _ from "lodash"; +import React, { Component } from "react"; +import { + Button, + Checkbox, + Grid, + Dimmer, + Dropdown, + Loader, + Table, + Input, + Select, + Form, + Container, + Popup, + Icon +} from "semantic-ui-react"; +import Layout from "../Layout"; +import PaginationView, { pageFromURL } from "../Pagination"; +import ErrorMessage from "../Messages/Error"; +import distanceInWordsToNow from "date-fns/distance_in_words_to_now"; +import format from "date-fns/format"; +import getTime from "date-fns/get_time"; +import countries from "../../data/countries.json"; +import eucountries from "../../data/eucountries.js"; +import "csvexport/dist/Export.min"; +import "./Orders.css"; + +const STORED_FIELDS_KEY = "commerce.admin.orderFields.v2"; const PER_PAGE = 50; // needed for cmd click functionality -let isCtrlKeyDown = false -const isCtrlKey = e => (e.key === 'Meta' || e.key === 'Control' || e.metaKey || e.ctrlKey) +let isCtrlKeyDown = false; +const isCtrlKey = e => + e.key === "Meta" || e.key === "Control" || e.metaKey || e.ctrlKey; function formatField(label: string, order: Order) { - return order[label.toLowerCase().replace(/ /, '_')]; + return order[label.toLowerCase().replace(/ /, "_")]; } -function formatLineItems(order: Order, csv: boolean) { +function formatLineItems(order: Order, csv?: boolean) { if (csv) { - return order.line_items && order.line_items.map((item) => `${item.quantity} x ${item.title}`).join(', '); + return ( + order.line_items && + order.line_items + .map(item => `${item.quantity} x ${item.title}`) + .join(", ") + ); } - return order.line_items && order.line_items.map((item) => - {item.quantity} x “{item.title}”
-) + return ( + order.line_items && + order.line_items.map(item => ( + + {item.quantity} x “{item.title}”
+ + )) + ); } function formatLineItemTypes(order: Order, csv: boolean) { let types = []; - (order.line_items || []).map(item => !types.includes(item.type) && types.push(item.type)) + (order.line_items || []).map( + item => !types.includes(item.type) && types.push(item.type) + ); - return types.map(t =>
{t}
) + return types.map(t =>
{t}
); } -const addressFields = ['name', 'company', 'address1', 'address2', 'city', 'zip', 'state', 'country']; - -function formatAddress(field: 'shipping_address' | 'billing_address') { +const addressFields = [ + "name", + "company", + "address1", + "address2", + "city", + "zip", + "state", + "country" +]; + +function formatAddress(field: "shipping_address" | "billing_address") { return (order: Order, csv: boolean) => { const addr: Address = order[field]; if (csv) { return addr; } - return addr &&
- {addr.name}
- {addr.company && {addr.company}
} - {addr.address1}
- {addr.address2 && {addr.address2}
} - {addr.city}, {addr.zip}, {addr.state && `${addr.state}, `} {addr.country} -
; + return ( + addr && ( +
+ {addr.first_name} +
+ {addr.company && ( + + {addr.company} +
+ + )} + {addr.address1} +
+ {addr.address2 && ( + + {addr.address2} +
+ + )} + {addr.city}, {addr.zip}, {addr.state && `${addr.state}, `}{" "} + {addr.country} +
+ ) + ); }; } -function formatPriceField(field: 'total' | 'taxes' | 'subtotal') { - return (order) => { - const amount = (order[field] / 100).toFixed(2); - switch(order.currency) { - case "USD": - return `$${amount}`; - case "EUR": - return `${amount}€`; - default: - return `${amount} ${order.currency}`; - } +function formatPriceField(field: "total" | "taxes" | "subtotal") { + return order => { + const currency = order.currency; + return field === "taxes" + ? formatTaxes(order) + : "" + formatCurrency(order[field], currency, field); }; } -function formatDateField(field: 'created_at' | 'updated_at') { - return (order, csv) => { - if (csv) { return JSON.stringify(order[field]); } - return distanceInWordsToNow(order[field]) + " ago"; +function formatTaxes(order: Order) { + const percentage = Math.round((order.taxes / order.total) * 100) + "%"; + return `${percentage} \u2192 ${formatCurrency(order.taxes, order.currency)}`; +} + +function formatCurrency(amount: number, currency: string) { + const amountString = (amount / 100).toFixed(2); + switch (currency) { + case "USD": + return `$${amountString}`; + case "EUR": + return `${amountString}€`; + default: + return `${amountString} ${currency}`; } } +function formatDateField(field: "created_at" | "updated_at") { + return (order, csv) => { + if (csv) { + return JSON.stringify(order[field]); + } + return format(order[field], "MMM DD YYYY"); + }; +} + const fields = { ID: {}, - Email: {sort: "email"}, - Items: {fn: formatLineItems}, - Type: {fn: formatLineItemTypes}, - "Shipping Address": {fn: formatAddress("shipping_address")}, - "Shipping Country": {fn: (order) => order.shipping_address.country}, - "Billing Address": {fn: formatAddress("billing_address")}, - "Billing Country": {fn: (order) => order.billing_address.country}, - Taxes: {sort: "taxes", fn: formatPriceField("taxes")}, - Subtotal: {sort: "subtotal", fn: formatPriceField("subtotal")}, - "Shipping State": {fn: (order) => order.fulfillment_state}, + Date: { sort: "created_at", fn: formatDateField("created_at") }, + "Updated At": { sort: "updated_at", fn: formatDateField("updated_at") }, + Items: { fn: formatLineItems }, + Type: { fn: formatLineItemTypes }, + Subtotal: { sort: "subtotal", fn: formatPriceField("subtotal") }, + Taxes: { sort: "taxes", fn: formatPriceField("taxes") }, + Total: { sort: "total", fn: formatPriceField("total") }, + Name: { fn: order => order.billing_address.name }, + Email: { sort: "email" }, "Payment State": {}, - Total: {sort: "total", fn: formatPriceField("total")}, - "Created At": {sort: "created_at", fn: formatDateField("created_at")}, - "Updated At": {sort: "updated_at", fn: formatDateField("updated_at")} + "Billing Address": { fn: formatAddress("billing_address") }, + "Billing Country": { fn: order => order.billing_address.country }, + "Billing Company": { fn: order => order.billing_address.company }, + "Shipping State": { fn: order => order.fulfillment_state }, + "Shipping Address": { fn: formatAddress("shipping_address") }, + "Shipping Country": { fn: order => order.shipping_address.country }, + "Shipping Company": { fn: order => order.shipping_address.company } }; const enabledFields = { ID: false, + Date: true, + "Updated At": false, Items: true, Type: true, + Subtotal: false, + Taxes: false, + Total: true, + Name: false, Email: true, - "Shipping Address": false, - "Shipping Country": false, + "Payment State": true, "Billing Address": false, "Billing Country": false, + "Billing Company": false, "Shipping State": true, - "Payment State": true, - Taxes: false, - Subtotal: false, - Total: true, - "Created At": true, - "Updated At":false + "Shipping Address": false, + "Shipping Country": false, + "Shipping Company": false }; +let filterCount = 0; + class OrderDetail extends Component { props: { order: Order, - enabledFields: {[key: string]: boolean }, - onLink: (any) => void, - onSelect: (string) => void + enabledFields: { [key: string]: boolean }, + onLink: any => void, + onSelect: string => void }; handleClick = (e: SyntheticEvent) => { if (isCtrlKeyDown) { - return window.open(`/orders/${this.props.order.id}`, '_blank') + return window.open(`/orders/${this.props.order.id}`, "_blank"); } - this.props.onLink({ preventDefault: e.preventDefault, - target: {getAttribute: (a) => ({href: `/orders/${this.props.order.id}`}[a])} + target: { + getAttribute: a => ({ href: `/orders/${this.props.order.id}` }[a]) + } }); }; @@ -140,44 +218,81 @@ class OrderDetail extends Component { }; render() { - const {order, enabledFields} = this.props; - - return + const { order, enabledFields } = this.props; + return ( + - + {Object.keys(enabledFields).map(field => { - const tdData = fields[field].fn ? fields[field].fn(order) : formatField(field, order) - - return enabledFields[field] && ( - - {field === 'Items' ? e.preventDefault()}>{tdData} : tdData} - - ) + const tdData = fields[field].fn + ? fields[field].fn(order) + : formatField(field, order); + return ( + enabledFields[field] && ( + + {field === "Items" ? ( + e.preventDefault()} + > + {tdData} + + ) : ( + tdData + )} + + ) + ); })} - ; + + ); } } export default class Orders extends Component { + baseFilterState: Object; props: { commerce: Commerce, - push: (string) => void, - onLink: (HTMLElement) => void + push: string => void, + onLink: HTMLElement => void }; state: { loading: boolean, downloading: boolean, error: ?any, - filters: Array<'tax' | 'shipping_countries' | 'email' | 'items'>, + sortedBy: string, + direction: "asc" | "desc", + disabledFields: { + disableAddressField: boolean, + disableBillingField: boolean, + disableShippingField: boolean, + disableTypeField: boolean, + disableDateField: boolean, + disableTaxField: boolean + }, + billingCountryType: string | null, + filterCount: number, + filters: { + from: number | null, + to: number | null, + payment_state: string | null, + fulfillment_state: string | null, + item_type: string | null, + billing_countries: Array, + email: string | null + }, page: number, - enabledFields: {[key: string]: boolean}, - tax: boolean, - shippingCountries: ?Array, + enabledFields: { [key: string]: boolean }, orders: ?Array, pagination: ?Pagination, - searchScope: 'email' | 'items', + searchScope: "email" | "item_type", search: ?string, + allSelected: boolean, selection: boolean }; @@ -185,92 +300,131 @@ export default class Orders extends Component { super(props); const storedFields = localStorage.getItem(STORED_FIELDS_KEY); this.state = { + direction: "asc", + sortedBy: "created_at", loading: true, downloading: false, error: null, - filters: [], + disabledFields: { + disableAddressField: true, + disableBillingField: true, + disableShippingField: true, + disableTypeField: true, + disableDateField: true, + disableTaxField: true + }, + billingCountryType: null, + filterCount: 0, + filters: { + from: null, + to: null, + payment_state: null, + fulfillment_state: null, + item_type: null, + billing_countries: [], + email: null + }, page: pageFromURL(), - enabledFields: storedFields ? JSON.parse(storedFields) : Object.assign({}, enabledFields), - tax: false, - shippingCountries: null, + enabledFields: storedFields + ? JSON.parse(storedFields) + : Object.assign({}, enabledFields), orders: null, pagination: null, - searchScope: 'email', + searchScope: "email", search: null, + allSelected: false, selection: false }; + + this.baseFilterState = { ...this.state.filters }; } + resetFilters = () => { + const disabledFields = _.mapValues(this.state.disabledFields, () => true); + this.setState({ + filters: this.baseFilterState, + disabledFields, + billingCountryType: null, + filterCount: 0 + }); + this.loadOrders(); + }; componentDidMount() { this.loadOrders(); - document.addEventListener('keydown', e => isCtrlKey(e) && (isCtrlKeyDown = true)) - document.addEventListener('keyup', e => isCtrlKey(e) && (isCtrlKeyDown = false)) + document.addEventListener( + "keydown", + e => isCtrlKey(e) && (isCtrlKeyDown = true) + ); + document.addEventListener( + "keyup", + e => isCtrlKey(e) && (isCtrlKeyDown = false) + ); } - handleToggleField = (e: SyntheticEvent, el: {name: string}) => { - const {enabledFields} = this.state; - const updated = Object.assign({}, enabledFields, {[el.name]: !enabledFields[el.name]}); - this.setState({enabledFields: updated}); + handleToggleField = (e: SyntheticEvent, el: { name: string }) => { + const { enabledFields } = this.state; + const updated = Object.assign({}, enabledFields, { + [el.name]: !enabledFields[el.name] + }); + this.setState({ enabledFields: updated }); localStorage.setItem(STORED_FIELDS_KEY, JSON.stringify(updated)); }; - handleTax = (e: SyntheticEvent) => { - e.preventDefault(); - const {tax, filters} = this.state; - if (tax) { - this.setState({tax: false, filters: filters.filter(f => f !== 'tax')}, this.loadOrders); - } else { - this.setState({tax: true, filters: filters.concat(['tax'])}, this.loadOrders); - } - }; - - handleCountries = (e: SyntheticEvent, el: {value: Array}) => { - const {shippingCountries, filters} = this.state; - if (JSON.stringify(el.value) === JSON.stringify(shippingCountries)) { + handleCountries = (e: SyntheticEvent, el: { value: Array }) => { + const { filters } = this.state; + if (el.value.toString() === filters.billing_countries.toString()) { return; } - if (el.value.length) { - this.setState({shippingCountries: el.value, filters: filters.concat(['shipping_countries'])}, this.loadOrders); + this.setState({ + filters: { ...this.state.filters, billing_countries: el.value } + }); } else { - this.setState({shippingCountries: [], filters: filters.filter(f => f !== 'shipping_countries')}, this.loadOrders); + this.setState( + { + filters: filters.filter(f => f !== "shipping_countries") + }, + this.loadOrders + ); } }; - handlePage = (e: SyntheticEvent, el: {'data-number': string}) => { + handlePage = (e: SyntheticEvent, el: { "data-number": string }) => { e.preventDefault(); - this.changePage(parseInt(el['data-number'], 10)); + this.changePage(parseInt(el["data-number"], 10)); }; handleDownload = (e: SyntheticEvent) => { e.preventDefault(); - const exporter = window.Export.create({filename: 'orders.csv'}); - this.setState({downloading: true}); + const exporter = window.Export.create({ filename: "orders.csv" }); + this.setState({ downloading: true }); this.downloadAll() - .then((orders) => { - this.setState({downloading: false}); - const {enabledFields} = this.state; - const rows = orders.map((order) => { - console.log('Rows for orders ', order.id) + .then(orders => { + this.setState({ downloading: false }); + const { enabledFields } = this.state; + const rows = orders.map(order => { const formattedOrder = {}; - const headers = _.flatten(Object.keys(enabledFields).map((field) => { - const match = field.match(/(\S+) Address$/); - if (match) { - return addressFields.map((field) => `${match[1]} ${field}`); - } - return field; - })) - Object.keys(enabledFields).forEach((field) => { + const headers = _.flatten( + Object.keys(enabledFields).map(field => { + const match = field.match(/(\S+) Address$/); + if (match) { + return addressFields.map(field => `${match[1]} ${field}`); + } + return field; + }) + ); + Object.keys(enabledFields).forEach(field => { if (enabledFields[field]) { const match = field.match(/(\S+) Address$/); if (match) { const addr = formatField(field, order); - console.log(addr, field, order) - addressFields.forEach((field) => { + addressFields.forEach(field => { formattedOrder[`${match[1]} ${field}`] = addr[field]; - }) + }); } else { - formattedOrder[field] = fields[field].fn ? fields[field].fn(order, true) : formatField(field, order); + formattedOrder[field] = fields[field].fn + ? fields[field].fn(order, true) + : formatField(field, order); } } }); @@ -278,235 +432,554 @@ export default class Orders extends Component { }); exporter.downloadCsv(rows); }) - .catch((error) => this.setState({downloading: false, error})); + .catch(error => this.setState({ downloading: false, error })); }; - handleSearchInput = (e: SyntheticEvent, el: {value: ?string}) => { - this.setState({search: el.value ? el.value : null}); - }; - - handleSearchScope = (e: SyntheticEvent, el: {value: string}) => { + handleSearchScope = (e: SyntheticEvent, el: { value: string }) => { switch (el.value) { - case 'email': - this.setState({searchScope: 'email'}); + case "email": + this.setState({ searchScope: "email" }); return; - case 'items': - this.setState({searchScope: 'items'}); + case "item_type": + this.setState({ searchScope: "item_type" }); return; default: - this.setState({error: `Bad search scope: '${el.value}'`}); + this.setState({ error: `Bad search scope: '${el.value}'` }); } }; search = (e: SyntheticEvent) => { - const {search, searchScope, filters} = this.state; - + const { search, searchScope, filters } = this.state; e.preventDefault(); - - let newFilters = filters.slice(); - let filtersToRemove = this.searchOptions.map(opt => opt.value) - - if (search) { - if (!newFilters.includes(searchScope)) newFilters.push(searchScope); - filtersToRemove = filtersToRemove.filter(val => val !== searchScope); - } - - // Remove any non-active search filters - newFilters = newFilters.filter(f => !filtersToRemove.some(ftr => f === ftr)); - - this.setState({filters: newFilters}, this.loadOrders); + this.loadOrders(); }; changePage(page: number) { let location = document.location.href; if (location.match(/page=\d+/)) { - location = location.replace(/page=\d+/, `page=${page}`) + location = location.replace(/page=\d+/, `page=${page}`); } else { - location += `${location.match(/\?/) ? '&' : '?'}page=${page}`; + location += `${location.match(/\?/) ? "&" : "?"}page=${page}`; } - this.props.push(location.replace(/https?:\/\/[^\/]+/, '')); - this.setState({page}, this.loadOrders); + this.props.push(location.replace(/https?:\/\/[^\/]+/, "")); + this.setState({ page }, this.loadOrders); } loadOrders = () => { - this.setState({loading: true}); - this.props.commerce.orderHistory(this.orderQuery()) - .then((response) => { - const {orders, pagination} = response; + this.setState({ loading: true }); + const { params, options } = this.orderQuery(); + this.props.commerce + .orderHistory(params, options) + .then(response => { + const { orders, pagination } = response; if (pagination.last < this.state.page && this.state.page !== 1) { return this.changePage(1); } - this.setState({loading: false, orders, pagination, error: null}); + this.setState({ loading: false, orders, pagination, error: null }); }) - .catch((error) => { + .catch(error => { console.log("Error loading orders: %o", error); - this.setState({loading: false, error}); + this.setState({ loading: false, error }); }); - } + }; orderQuery(page: ?number) { - const query: Object = { + const filteredFilters = { ...this.state.filters }; + if (this.state.disabledFields.disableAddressField) { + delete filteredFilters.shipping_address; + } + if (this.state.disabledFields.disableBillingField) { + delete filteredFilters.payment_state; + } + if (this.state.disabledFields.disableShippingField) { + delete filteredFilters.fulfillment_state; + } + if (this.state.disabledFields.disableDateField) { + delete filteredFilters.from; + delete filteredFilters.to; + } + if (!this.state.disabledFields.disableTaxField) { + filteredFilters.tax = true; + } + if (this.state.searchScope === "item_type") { + delete filteredFilters.email; + } else { + delete filteredFilters.item_type; + } + + filteredFilters[this.state.searchScope] = this.state.search; + filteredFilters.sort = `${this.state.sortedBy} ${this.state.direction}`; + + + const params: Object = { user_id: "all", per_page: PER_PAGE, - page: page || this.state.page + page: page || this.state.page, + ..._.pickBy(filteredFilters, function(value, key) { + if (Array.isArray(value) && value.length == 0) { + return false; + } + return value; + }) + }; + + const options = {}; + if(this.state.billingCountryType === "not-eu"){ + options.negatedParams = {billing_countries: eucountries} + } + + return { + params, + options }; - this.state.filters.forEach((filter) => { - query[filter] = OrdersFilters[filter](this.state); - }); - return query; } downloadAll(page: ?number) { - const selected = (this.state.orders || []).filter((order) => order.selected); + const selected = (this.state.orders || []).filter(order => order.selected); if (selected.length > 0) { return Promise.resolve(selected); } - - return this.props.commerce.orderHistory(this.orderQuery(page || 1)) - .then(({orders, pagination}) => ( - pagination.last === pagination.current ? orders : this.downloadAll(pagination.next).then(o => orders.concat(o)) - )); - }; + const { params, options } = this.orderQuery(page || 1); + return this.props.commerce + .orderHistory(params, options) + .then( + ({ orders, pagination }) => + pagination.last === pagination.current + ? orders + : this.downloadAll(pagination.next).then(o => orders.concat(o)) + ); + } searchOptions = [ - { key: 'email', text: 'Email', value: 'email' }, - { key: 'items', text: 'Items', value: 'items' }, - ] + { key: "email", text: "Email", value: "email" }, + { key: "item_type", text: "Items", value: "item_type" } + ]; + + shippingOptions = [ + { key: "pending", text: "Pending", value: "pending" }, + { key: "shipped", text: "Shipped", value: "shipped" }, + { key: "failed", text: "Failed", value: "failed" } + ]; + + paymentOptions = [ + { key: "pending", text: "Pending", value: "pending" }, + { key: "paid", text: "Paid", value: "paid" }, + { key: "failed", text: "Failed", value: "failed" } + ]; handleSelect = (id: string) => { - this.setState((state) => { + this.setState(state => { let selection = false; - - let orders = state.orders.map((order) => { + let orders = state.orders.map(order => { if (order.id === id) { - order = {...order, selected: !order.selected}; + order = { ...order, selected: !order.selected }; } - if (order.selected) selection = true - return order + if (order.selected) selection = true; + return order; }); - return {orders, selection}; + return { orders, selection }; }); - } + }; + + handleToDateSelection = (e: SyntheticEvent, el: { value: string }) => { + this.setState({ + filters: { ...this.state.filters, to: getTime(el.value) / 1000 } + }); + }; + + handleFromDateSelection = (e: SyntheticEvent, el: { value: string }) => { + this.setState({ + filters: { ...this.state.filters, from: getTime(el.value) / 1000 } + }); + }; + handleSearchQuery = ( + e: SyntheticEvent, + el: { value: string, name: string } + ) => { + this.setState({ search: el.value ? el.value : null }); + }; + + handleSelections = ( + e: SyntheticEvent, + el: { value: string, name: string } + ) => { + switch (el.name) { + case "order-billing-state": + this.setState({ + filters: { ...this.state.filters, payment_state: el.value } + }); + break; + case "order-shipping-state": + this.setState({ + filters: { ...this.state.filters, fulfillment_state: el.value } + }); + break; + case "order-item-type": + this.setState({ + filters: { ...this.state.filters, item_type: el.value } + }); + break; + } + }; - handleToggleAll = e => { - e.preventDefault() - const selection = !this.state.allSelected + handleCheckSelect = ( + e: SyntheticEvent, + el: { value: string, checked: boolean } + ) => { + this.setState({ + disabledFields: { + ...this.state.disabledFields, + [el.value]: !this.state.disabledFields[el.value] + } + }); + }; + + handleCountryChange = (e: SyntheticEvent, el: { value: string }) => { + if (el.value === "eu") { + this.setState({ + billingCountryType: el.value, + filters: { ...this.state.filters, billing_countries: eucountries } + }); + } + this.setState({ billingCountryType: el.value }); + }; + handleToggleAll = (e: SyntheticEvent) => { + e.preventDefault(); + const selection = !this.state.allSelected; this.setState({ allSelected: selection, selection, orders: this.state.orders.map(o => ({ ...o, selected: selection })) - }) - } + }); + }; handleReceipts = (e: SyntheticEvent) => { e.preventDefault(); - - const {commerce} = this.props; - const {orders} = this.state; + const { commerce } = this.props; + const { orders } = this.state; const openWindow = window.open("about:blank", "Receipts"); - Promise.all((orders || []).filter((o) => o.selected && o.payment_state === 'paid').map((order) => commerce.orderReceipt(order.id))) - .then((receipts) => { - openWindow.document.body.innerHTML = receipts.map((data) => data.data).join("
"); - }); - } + Promise.all( + (orders || []) + .filter(o => o.selected && o.payment_state === "paid") + .map(order => commerce.orderReceipt(order.id)) + ).then(receipts => { + openWindow.document.body.innerHTML = receipts + .map(data => data.data) + .join("
"); + }); + }; render() { - const {onLink} = this.props; - const {loading, allSelected, downloading, error, orders, pagination, tax, enabledFields, searchScope, selection} = this.state; - - return - - - - Loading orders... - - -
- - - - - - - - {Object.keys(enabledFields).map((field) => - - )} - - - - - - - - - - - - - - - - - {Object.keys(enabledFields).map((field) => enabledFields[field] && - {field} - )} - - - - {orders && orders.map((order) => ( - - ))} - -
- - - ; + + + + + + + } + positioning="bottom center" + basic + > +
+ + + + + + + + + + + + + + + + {!disableAddressField && ( + + + + + + )} + {billingCountryType === "country" && ( + ({ + text: country.label, + value: country.label + }))} + onChange={this.handleCountries} + /> + )} + + + +
+ + + + + {Object.keys(enabledFields).map(field => ( + + + + + ))} + + + + + + + + + + + + + + + + + + {Object.keys(enabledFields).map(field => { + const fieldName = { + Date: "created_at", + "Updated At": "updated_at", + Email: "email", + Taxes: "taxes", + Subtotal: "subtotal", + Total: "total" + }[field]; + return ( + enabledFields[field] && ( + { + if (!fieldName) { + return; + } + this.setState( + { + sortedBy: fieldName, + direction: + this.state.sortedBy === fieldName && + this.state.direction === "asc" + ? "desc" + : "asc" + }, + () => this.loadOrders() + ); + }} + > + {" "} + {field === "Shipping State" + ? String.fromCodePoint(128230) + : field === "Payment State" + ? String.fromCodePoint(128181) + : field} + {this.state.sortedBy === fieldName && + (this.state.direction === "asc" ? ( + + ) : ( + + ))} + + ) + ); + })} + + + + {orders && + orders.map(order => ( + + ))} + +
+ +
+ + + ); } } - -const OrdersFilters = { - tax(state) { - return true; - }, - shipping_countries(state) { - return state.shippingCountries && state.shippingCountries.join(','); - }, - email(state) { - return state.search - }, - items(state) { - return state.search - } -}; diff --git a/src/Components/Pagination/index.js b/src/Components/Pagination/index.js index f84ea0b..3b2f5ef 100644 --- a/src/Components/Pagination/index.js +++ b/src/Components/Pagination/index.js @@ -1,17 +1,29 @@ // @flow -import React, {Component} from 'react'; -import {List, Menu} from 'semantic-ui-react'; +import React, { Component } from "react"; +import { List, Menu } from "semantic-ui-react"; +import ChevronLeftIcon from "mdi-react/ChevronLeftIcon"; +import ChevronRightIcon from "mdi-react/ChevronRightIcon"; function calculatePages(current: number, last: number) { - if (last <= 1) { return null; } + if (last <= 1) { + return null; + } - const pages = [{name: "First", number: 1}]; + const pages = [{ name: "First", number: 1 }]; for (let page = 1; page <= last; page++) { - if (page - current < -3) { continue; } - if (current - page < -3) { continue; } - pages.push({name: page.toString(), number: page, active: page === current}); + if (page - current < -3) { + continue; + } + if (current - page < -3) { + continue; + } + pages.push({ + name: page.toString(), + number: page, + active: page === current + }); } - pages.push({name: "Last", number: last}); + pages.push({ name: "Last", number: last }); return pages; } @@ -24,28 +36,45 @@ export function pageFromURL() { } type args = { - current: number, next: ?number, last: number, total: number, - perPage: number, onClick: (SyntheticEvent, Object) => void + current: number, + next: ?number, + last: number, + total: number, + perPage: number, + onClick: (SyntheticEvent, Object) => void }; -export default function Pagination({current, next, last, total, perPage, onClick}: args) { +export default function Pagination({ + current, + next, + last, + total, + perPage, + onClick +}: args) { const pages = calculatePages(current, last); - if (!pages) { return null; } + if (!pages) { + return null; + } const from = (current - 1) * perPage; const to = Math.min(from + perPage, total); - - return - - - {pages.map((page, i) => )} - - - {from}-{to} of {total} - ; + const paginationText = current + "of" + last; + + return ( + + + + {current !== 1 && ( + + + + )} + + + + + + + + ); } diff --git a/src/Components/Reports/index.js b/src/Components/Reports/index.js index 83a5d03..24ae0a0 100644 --- a/src/Components/Reports/index.js +++ b/src/Components/Reports/index.js @@ -1,40 +1,49 @@ // @flow -import type {Config, Commerce, Currency} from '../../Types'; -import React, {Component} from 'react'; -import addWeeks from 'date-fns/add_weeks'; -import {Table} from 'semantic-ui-react'; -import fx from 'money'; -import Layout from '../Layout'; -import ErrorMessage from '../Messages/Error'; -import {formatPrice} from '../Order'; - -const EXCHANGE_RATE_API = 'https://api.fixer.io/latest?base=USD'; - -type SalesRow = { +import type { Config, Commerce, Currency } from "../../Types"; +import React, { Component } from "react"; +import addWeeks from "date-fns/add_weeks"; +import { Container, Table, Segment, Grid, List, Divider } from "semantic-ui-react"; +import fx from "money"; +import Layout from "../Layout"; +import ErrorMessage from "../Messages/Error"; +import { formatPrice } from "../Order"; +import { addMonths, addDays } from "date-fns"; +import { RoadIcon } from "mdi-react"; + +const EXCHANGE_RATE_API = "https://api.fixer.io/latest?base=USD"; + +type SalesRow = Array<{ subtotal: number, taxes: number, total: number, currency: Currency -}; +}>; + type SalesReport = Array; -type ProductsRow = { + +type ProductsRow = Array<{ sku: string, path: string, total: number, currency: Currency -}; +}>; + type ProductsReport = Array; function ts(date) { return parseInt(date.getTime() / 1000, 10); } +function getLastSecond(year: number, month: number) { + return new Date(year, month + 1, 1, 0, 0, -1); +} + function sumUSD(sales, field) { return (sales || []).reduce((sum, row) => { - if (row.currency === 'USD') { + if (row.currency === "USD") { return sum + row[field]; } - return sum + fx.convert(row[field], {from: row.currency, to: 'USD'}); + return sum + fx.convert(row[field], { from: row.currency, to: "USD" }); }, 0); } @@ -44,18 +53,58 @@ function withRates() { return Promise.resolve(); } return fetch(EXCHANGE_RATE_API) - .then((response) => response.json()) - .then((data) => { + .then(response => response.json()) + .then(data => { fx.base = data.base; fx.rates = data.rates; - }) + }); } +const makeTotals = (us: ?number, eu: ?number) => { + let totalAmount = "0.00"; + + if (us && eu) { + totalAmount = formatPrice(us, "USD") + " + " + formatPrice(eu, "EUR"); + } else if (us) { + totalAmount = formatPrice(us, "USD"); + } else if (eu) { + totalAmount = formatPrice(eu, "EUR"); + } + return totalAmount; +}; + +const makeSalesRows = (us: Object[], eu: Object[], key, title, orders) => { + const usAmount = us.length > 0 ? us[0].total : undefined; + const euAmount = eu.length > 0 ? eu[0].total : undefined; + return ( + + {title} + {orders ? orders : "0"} orders + {makeTotals(usAmount, euAmount)} + + ); +}; + +const makeProductRows = (us: Object[], eu: Object[], product, i, config) => { + const usAmount = us.length > 0 ? us[0].total : undefined; + const euAmount = eu.length > 0 ? eu[0].total : undefined; + return ( + + + + {product[0].sku} + + + {makeTotals(usAmount, euAmount)} + + ); +}; type props = { config: Config, commerce: Commerce, - onLink: (SyntheticEvent) => void + onLink: SyntheticEvent => void }; + export default class Reports extends Component { props: props; state: { @@ -69,88 +118,150 @@ export default class Reports extends Component { constructor(props: props) { super(props); this.state = { - loading: true, sales: null, products: null, error: null, salesTotal: null + loading: true, + sales: null, + products: null, + error: null, + salesTotal: null }; } componentDidMount() { - this.props.commerce.report('sales', {from: ts(addWeeks(new Date(), -1))}) - .then((report) => { - this.setState({loading: false, sales: report}); - withRates().then(() => { - this.setState({salesTotal: { - currency: 'USD', - subtotal: sumUSD(report, 'subtotal'), - taxes: sumUSD(report, 'taxes'), - total: sumUSD(report, 'total') - }}); + const rotate = function(arr: Array, n: number): Array { + const len = arr.length; + return arr.slice(len - n).concat(arr.slice(0, len - n)); + }; + + const createDate = new Date(); + const currentMonth = createDate.getMonth(); + const currentYear = createDate.getFullYear(); + + const months = []; + for (let i = 11; i >= 0; i--) { + months.push({ + month: i, + year: i < currentMonth ? currentYear : currentYear-1 + }) + } + + const monthStrings = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December" + ]; + + const currentMonths = rotate(months, currentMonth); + + Promise.all([ + this.props.commerce.report("sales", { + from: ts(addWeeks(new Date(), -1)) + }), + this.props.commerce.report("sales", { + from: ts(addDays(new Date(), -30)) + }), + ...currentMonths.map(({ month, year }) => { + return this.props.commerce.report("sales", { + from: ts(new Date(year, month)), + to: ts(getLastSecond(year, month)) + }); + }) + ]) + .then(reports => { + const titles = [ + "Last 7 days", + "last 30 days", + ...currentMonths.map(({ month, year }) => `${monthStrings[month]} ${year}`) + ]; + reports.forEach((report, i) => { + report.title = titles[i] }); + this.setState({ loading: false, sales: reports }); }) - .catch((error) => { - this.setState({loading: false, error}); + .catch(error => { + this.setState({ loading: false, error }); }); - this.props.commerce.report('products', {from: ts(addWeeks(new Date(), -1))}) - .then((report) => { - console.log(report); - this.setState({loading: false, products: report}); + this.props.commerce + .report("products", { + from: ts(addWeeks(new Date(), -30)) }) - .catch((error) => { - this.setState({loading: false, error}); + .then(reports => { + const allReports = []; + const reportsMap = new Map(); + + for (let r of reports) { + const dupe = reportsMap.get(r.sku); + if (!dupe) { + reportsMap.set(r.sku, [r]); + } else { + dupe.push(r); + } + } + for (let [k, v] of reportsMap) { + allReports.push(v); + } + this.setState({ loading: false, products: allReports }); }) + .catch(error => { + this.setState({ loading: false, error }); + }); } render() { - const {config, onLink} = this.props; - const {loading, error, sales, salesTotal, products} = this.state; - - return - - -

Sales Last Week

- - - - Currency - SubTotal - Taxes - Total - - - - {sales && sales.map((row, i) => - {row.currency} - {formatPrice(row.subtotal, row.currency)} - {formatPrice(row.taxes, row.currency)} - {formatPrice(row.total, row.currency)} - )} - - - {salesTotal && - Estimated Total in {salesTotal.currency} - {formatPrice(salesTotal.subtotal, salesTotal.currency)} - {formatPrice(salesTotal.taxes, salesTotal.currency)} - {formatPrice(salesTotal.total, salesTotal.currency)} - } - -
- -

Top Products Last Week

- - - - Product - Amount Sold - Currency - - - - {products && products.map((row, i) => - {row.sku} - {formatPrice(row.total, row.currency)} - {row.currency} - )} - -
- ; + const { config, onLink } = this.props; + const { loading, error, sales, salesTotal, products } = this.state; + + return ( +
+ + + + + + + + {sales && + sales.map((sale, i) => { + const orders = sale.reduce((a, b) => a + b.orders, 0); + const usd = sale.filter(s => s.currency === "USD"); + const eur = sale.filter(s => s.currency === "EUR"); + return makeSalesRows(usd, eur, i, sale.title, orders); + })} + +
+ + + + + + + TOP PRODUCTS: + LAST 7 DAYS + + + + + {products && + products.map((product, i) => { + const usd = product.filter(s => s.currency === "USD"); + const eur = product.filter(s => s.currency === "EUR"); + return makeProductRows(usd, eur, product, i, config); + })} + +
+ + + + +
+ ); } } diff --git a/src/Components/WithAuthentication/LoginForm.js b/src/Components/WithAuthentication/LoginForm.js index 6ff982d..388f59a 100644 --- a/src/Components/WithAuthentication/LoginForm.js +++ b/src/Components/WithAuthentication/LoginForm.js @@ -1,29 +1,49 @@ -import React, {Component} from 'react'; -import {Modal, Form, Message, Button} from 'semantic-ui-react'; +import React, { Component } from "react"; +import { Grid, Header, Form, Message, Button } from "semantic-ui-react"; export default class LoginForm extends Component { - handleSubmit = (e, {formData}) => { + handleSubmit = (e, { formData }) => { e.preventDefault(); - - const {loading, onLogin} = this.props; + const { loading, onLogin } = this.props; if (!loading) { onLogin(formData.email, formData.password); } }; render() { - const {show, loading, error} = this.props; + const { loading, error } = this.props; - return - Login - -
- - - - - -
- ; + return ( + + +
+ Sign In to GoCommerce +
+
+ + + + + +
+ + ); } } diff --git a/src/Components/WithAuthentication/index.js b/src/Components/WithAuthentication/index.js index 81bc4fb..0bb4060 100644 --- a/src/Components/WithAuthentication/index.js +++ b/src/Components/WithAuthentication/index.js @@ -1,5 +1,5 @@ -import React, {Component} from 'react'; -import LoginForm from './LoginForm'; +import React, { Component } from "react"; +import LoginForm from "./LoginForm"; export default class WithAuthentication extends Component { constructor(props) { @@ -11,22 +11,38 @@ export default class WithAuthentication extends Component { } handleLogin = (email, password) => { - this.setState({loading: true}); - this.props.onLogin(email, password) + this.setState({ loading: true }); + this.props + .onLogin(email, password) .then(() => { - this.setState({loading: false, error: null}); + this.setState({ loading: false, error: null }); }) - .catch((error) => { - this.setState({loading: false, error: (error.description || error.msg || error.toString())}); + .catch(error => { + this.setState({ + loading: false, + error: + error.description || + error.msg || + error.error_description || + error.toString() + }); }); }; render() { - const {user, children} = this.props; - const {loading, error} = this.state; - return
- {} - {user && children} -
; + const { user, children } = this.props; + const { loading, error } = this.state; + return ( +
+ {!user && ( + + )} + {user && children} +
+ ); } } diff --git a/src/Components/index.js b/src/Components/index.js index 4cd00be..7ff90ab 100644 --- a/src/Components/index.js +++ b/src/Components/index.js @@ -1,6 +1,6 @@ -export {default as WithAuthentication} from './WithAuthentication'; -export {default as Customers} from './Customers'; -export {default as Order} from './Order'; -export {default as Orders} from './Orders'; -export {default as Reports} from './Reports'; -export {default as Sidebar} from './Sidebar'; +export { default as WithAuthentication } from "./WithAuthentication"; +export { default as Customers } from "./Customers"; +export { default as Order } from "./Order"; +export { default as Orders } from "./Orders"; +export { default as Reports } from "./Reports"; +export { default as Navigation } from "./Navigation"; diff --git a/src/Types.js b/src/Types.js index 6f7a9c7..2805f11 100644 --- a/src/Types.js +++ b/src/Types.js @@ -18,7 +18,9 @@ export type Customer = { id: string, email: string, order_count: number, - created_at: string + created_at: string, + last_order_at: string, + name: string }; export type Order = { @@ -29,14 +31,14 @@ export type Order = { subtotal: number, taxes: number, total: number, - + discount: number, shipping_address: Address, billing_address: Address, payment_processor: 'stripe' | 'paypal', payment_state: 'pending' | 'paid', fulfillment_state: 'pending' | 'shipped', - + shipping: number, currency: Currency, vatnumber: string, @@ -53,7 +55,7 @@ export type Order = { export type LineItem = { id: string, - + meta: Meta, title: string, sku: string, path: string, @@ -64,7 +66,8 @@ export type LineItem = { type: string, created_at: string, - updated_at: string + updated_at: string, + vat: number }; export type TransactionType = 'charge' | 'refund'; @@ -79,12 +82,21 @@ export type Transaction = { }; export type Address = { + name: string, first_name: string, last_name: string, company: string, address1: string, address2: string, city: string, country: string, state: string, zip: string }; +export type Meta = { + author: string, + authors: string, + component: string, + product_path: string, + product_sku: string +}; + export type Commerce = { orderHistory: (Object) => Promise<{pagination: Pagination, orders: Array}>, orderDetails: (string) => Promise, diff --git a/src/data/eucountries.js b/src/data/eucountries.js new file mode 100644 index 0000000..370a10c --- /dev/null +++ b/src/data/eucountries.js @@ -0,0 +1,29 @@ +export default [ +"Austria", +"Belgium", +"Bulgaria", +"Croatia", +"Republic of Cyprus", +"Czech Republic", +"Denmark", +"Estonia", +"Finland", +"France", +"Germany", +"Greece", +"Hungary", +"Ireland", +"Italy", +"Latvia", +"Lithuania", +"Luxembourg", +"Malta", +"Netherlands", +"Poland", +"Portugal", +"Romania", +"Slovakia", +"Slovenia", +"Spain", +"Sweden", +"United Kingdom"] \ No newline at end of file diff --git a/src/semantic/gulpfile.js b/src/semantic/gulpfile.js new file mode 100644 index 0000000..1dcbc90 --- /dev/null +++ b/src/semantic/gulpfile.js @@ -0,0 +1,70 @@ +/******************************* + Set-up +*******************************/ + +var + gulp = require('gulp-help')(require('gulp')), + + // read user config to know what task to load + config = require('./tasks/config/user'), + + // watch changes + watch = require('./tasks/watch'), + + // build all files + build = require('./tasks/build'), + buildCSS = require('./tasks/build/css'), + buildAssets = require('./tasks/build/assets'), + + // utility + clean = require('./tasks/clean'), + version = require('./tasks/version'), + + // docs tasks + serveDocs = require('./tasks/docs/serve'), + buildDocs = require('./tasks/docs/build'), + + // rtl + buildRTL = require('./tasks/rtl/build'), + watchRTL = require('./tasks/rtl/watch') +; + + +/******************************* + Tasks +*******************************/ + +gulp.task('default', false, [ + 'watch' +]); + +gulp.task('watch', 'Watch for site/theme changes', watch); + +gulp.task('build', 'Builds all files from source', build); +gulp.task('build-css', 'Builds all css from source', buildCSS); +gulp.task('build-assets', 'Copies all assets from source', buildAssets); + +gulp.task('clean', 'Clean dist folder', clean); +gulp.task('version', 'Displays current version of Semantic', version); + +/*-------------- + Docs +---------------*/ + +/* + Lets you serve files to a local documentation instance + https://github.com/Semantic-Org/Semantic-UI-Docs/ +*/ + +gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs); +gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs); + + +/*-------------- + RTL +---------------*/ + +if(config.rtl) { + gulp.task('watch-rtl', 'Watch files as RTL', watchRTL); + gulp.task('build-rtl', 'Build all files as RTL', buildRTL); +} diff --git a/src/semantic/semantic.json b/src/semantic/semantic.json new file mode 100644 index 0000000..1a5db93 --- /dev/null +++ b/src/semantic/semantic.json @@ -0,0 +1,23 @@ +{ + "base": "semantic/", + "paths": { + "source": { + "config": "src/theme.config", + "definitions": "src/definitions/", + "site": "src/site/", + "themes": "src/themes/" + }, + "output": { + "packaged": "dist/", + "uncompressed": "dist/components/", + "compressed": "dist/components/", + "themes": "dist/themes/" + }, + "clean": "dist/" + }, + "permission": false, + "autoInstall": false, + "rtl": false, + "components": ["reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "rail", "reveal", "segment", "step", "breadcrumb", "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", "statistic", "accordion", "checkbox", "dimmer", "dropdown", "embed", "modal", "nag", "popup", "progress", "rating", "search", "shape", "sidebar", "sticky", "tab", "transition", "api", "form", "state", "visibility"], + "version": "2.2.6" +} \ No newline at end of file diff --git a/src/semantic/src/definitions/collections/breadcrumb.less b/src/semantic/src/definitions/collections/breadcrumb.less new file mode 100755 index 0000000..67a4e31 --- /dev/null +++ b/src/semantic/src/definitions/collections/breadcrumb.less @@ -0,0 +1,122 @@ +/*! + * # Semantic UI - Breadcrumb + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'breadcrumb'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Breadcrumb +*******************************/ + +.ui.breadcrumb { + line-height: 1; + display: @display; + margin: @verticalMargin 0em; + vertical-align: @verticalAlign; +} +.ui.breadcrumb:first-child { + margin-top: 0em; +} +.ui.breadcrumb:last-child { + margin-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* Divider */ +.ui.breadcrumb .divider { + display: inline-block; + opacity: @dividerOpacity; + margin: 0em @dividerSpacing 0em; + + font-size: @dividerSize; + color: @dividerColor; + vertical-align: @dividerVerticalAlign; +} + +/* Link */ +.ui.breadcrumb a { + color: @linkColor; +} +.ui.breadcrumb a:hover { + color: @linkHoverColor; +} + + +/* Icon Divider */ +.ui.breadcrumb .icon.divider { + font-size: @iconDividerSize; + vertical-align: @iconDividerVerticalAlign; +} + +/* Section */ +.ui.breadcrumb a.section { + cursor: pointer; +} +.ui.breadcrumb .section { + display: inline-block; + margin: @sectionMargin; + padding: @sectionPadding; +} + +/* Loose Coupling */ +.ui.breadcrumb.segment { + display: inline-block; + padding: @segmentPadding; +} + +/******************************* + States +*******************************/ + +.ui.breadcrumb .active.section { + font-weight: @activeFontWeight; +} + + +/******************************* + Variations +*******************************/ + +.ui.mini.breadcrumb { + font-size: @mini; +} +.ui.tiny.breadcrumb { + font-size: @tiny; +} +.ui.small.breadcrumb { + font-size: @small; +} +.ui.breadcrumb { + font-size: @medium; +} +.ui.large.breadcrumb { + font-size: @large; +} +.ui.big.breadcrumb { + font-size: @big; +} +.ui.huge.breadcrumb { + font-size: @huge; +} +.ui.massive.breadcrumb { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/collections/form.less b/src/semantic/src/definitions/collections/form.less new file mode 100755 index 0000000..0504601 --- /dev/null +++ b/src/semantic/src/definitions/collections/form.less @@ -0,0 +1,1053 @@ +/*! + * # Semantic UI - Form + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'form'; + +@import (multiple) '../../theme.config'; + +/******************************* + Elements +*******************************/ + +/*-------------------- + Form +---------------------*/ + +.ui.form { + position: relative; + max-width: 100%; +} + +/*-------------------- + Content +---------------------*/ + +.ui.form > p { + margin: @paragraphMargin; +} + +/*-------------------- + Field +---------------------*/ + +.ui.form .field { + clear: both; + margin: @fieldMargin; +} + +.ui.form .field:last-child, +.ui.form .fields:last-child .field { + margin-bottom: 0em; +} + +.ui.form .fields .field { + clear: both; + margin: 0em; +} + + +/*-------------------- + Labels +---------------------*/ + +.ui.form .field > label { + display: block; + margin: @labelMargin; + color: @labelColor; + font-size: @labelFontSize; + font-weight: @labelFontWeight; + text-transform: @labelTextTransform; +} + +/*-------------------- + Standard Inputs +---------------------*/ + + +.ui.form textarea, +.ui.form input:not([type]), +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="file"], +.ui.form input[type="url"] { + width: @inputWidth; + vertical-align: top; +} + +/* Set max height on unusual input */ +.ui.form ::-webkit-datetime-edit, +.ui.form ::-webkit-inner-spin-button { + height: @inputLineHeight; +} + +.ui.form input:not([type]), +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="file"], +.ui.form input[type="url"] { + font-family: @inputFont; + margin: 0em; + outline: none; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + + line-height: @inputLineHeight; + padding: @inputPadding; + font-size: @inputFontSize; + + background: @inputBackground; + border: @inputBorder; + color: @inputColor; + border-radius: @inputBorderRadius; + box-shadow: @inputBoxShadow; + transition: @inputTransition; +} + +/* Text Area */ +.ui.form textarea { + margin: 0em; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + + padding: @textAreaPadding; + font-size: @textAreaFontSize; + background: @textAreaBackground; + border: @textAreaBorder; + outline: none; + color: @inputColor; + border-radius: @inputBorderRadius; + box-shadow: @inputBoxShadow; + transition: @textAreaTransition; + font-size: @textAreaFontSize; + line-height: @textAreaLineHeight; + resize: @textAreaResize; +} +.ui.form textarea:not([rows]) { + height: @textAreaHeight; + min-height: @textAreaMinHeight; + max-height: @textAreaMaxHeight; +} + +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: @checkboxVerticalAlign; +} + +/*-------------------------- + Input w/ attached Button +---------------------------*/ + +.ui.form input.attached { + width: auto; +} + + +/*-------------------- + Basic Select +---------------------*/ + +.ui.form select { + display: block; + height: auto; + width: 100%; + background: @selectBackground; + border: @selectBorder; + border-radius: @selectBorderRadius; + box-shadow: @selectBoxShadow; + padding: @selectPadding; + color: @selectColor; + transition: @selectTransition; +} + +/*-------------------- + Dropdown +---------------------*/ + +/* Block */ +.ui.form .field > .selection.dropdown { + width: 100%; +} +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +/* Inline */ +.ui.form .inline.fields .field > .selection.dropdown, +.ui.form .inline.field > .selection.dropdown { + width: auto; +} +.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, +.ui.form .inline.field > .selection.dropdown > .dropdown.icon { + float: none; +} + +/*-------------------- + UI Input +---------------------*/ + +/* Block */ +.ui.form .field .ui.input, +.ui.form .fields .field .ui.input, +.ui.form .wide.field .ui.input { + width: 100%; +} + +/* Inline */ +.ui.form .inline.fields .field:not(.wide) .ui.input, +.ui.form .inline.field:not(.wide) .ui.input { + width: auto; + vertical-align: middle; +} + +/* Auto Input */ +.ui.form .fields .field .ui.input input, +.ui.form .field .ui.input input { + width: auto; +} + +/* Full Width Input */ +.ui.form .ten.fields .ui.input input, +.ui.form .nine.fields .ui.input input, +.ui.form .eight.fields .ui.input input, +.ui.form .seven.fields .ui.input input, +.ui.form .six.fields .ui.input input, +.ui.form .five.fields .ui.input input, +.ui.form .four.fields .ui.input input, +.ui.form .three.fields .ui.input input, +.ui.form .two.fields .ui.input input, +.ui.form .wide.field .ui.input input { + flex: 1 0 auto; + width: 0px; +} + + +/*-------------------- + Types of Messages +---------------------*/ + +.ui.form .success.message, +.ui.form .warning.message, +.ui.form .error.message { + display: none; +} + +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0px; +} + +/*-------------------- + Validation Prompt +---------------------*/ + +.ui.form .field .prompt.label { + white-space: normal; + background: @promptBackground !important; + border: @promptBorder !important; + color: @promptTextColor !important; +} +.ui.form .inline.fields .field .prompt, +.ui.form .inline.field .prompt { + vertical-align: top; + margin: @inlinePromptMargin; +} +.ui.form .inline.fields .field .prompt:before, +.ui.form .inline.field .prompt:before { + border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Autofilled +---------------------*/ + +.ui.form .field.field input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important; + border-color: @inputAutoFillBorder !important; +} + +/* Focus */ +.ui.form .field.field input:-webkit-autofill:focus { + box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important; + border-color: @inputAutoFillFocusBorder !important; +} + +/* Error */ +.ui.form .error.error input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important; + border-color: @inputAutoFillErrorBorder !important; +} + + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: @inputPlaceholderColor; +} +.ui.form :-ms-input-placeholder { + color: @inputPlaceholderColor; +} +.ui.form ::-moz-placeholder { + color: @inputPlaceholderColor; +} + +.ui.form :focus::-webkit-input-placeholder { + color: @inputPlaceholderFocusColor; +} +.ui.form :focus:-ms-input-placeholder { + color: @inputPlaceholderFocusColor; +} +.ui.form :focus::-moz-placeholder { + color: @inputPlaceholderFocusColor; +} + +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: @inputErrorPlaceholderColor; +} +.ui.form .error :-ms-input-placeholder { + color: @inputErrorPlaceholderColor !important; +} +.ui.form .error ::-moz-placeholder { + color: @inputErrorPlaceholderColor; +} + +.ui.form .error :focus::-webkit-input-placeholder { + color: @inputErrorPlaceholderFocusColor; +} +.ui.form .error :focus:-ms-input-placeholder { + color: @inputErrorPlaceholderFocusColor !important; +} +.ui.form .error :focus::-moz-placeholder { + color: @inputErrorPlaceholderFocusColor; +} + + +/*-------------------- + Focus +---------------------*/ + +.ui.form input:not([type]):focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="datetime-local"]:focus, +.ui.form input[type="email"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="file"]:focus, +.ui.form input[type="url"]:focus { + color: @inputFocusColor; + border-color: @inputFocusBorderColor; + border-radius: @inputFocusBorderRadius; + background: @inputFocusBackground; + box-shadow: @inputFocusBoxShadow; +} +.ui.form textarea:focus { + color: @textAreaFocusColor; + border-color: @textAreaFocusBorderColor; + border-radius: @textAreaFocusBorderRadius; + background: @textAreaFocusBackground; + box-shadow: @textAreaFocusBoxShadow; + -webkit-appearance: none; +} + + +/*-------------------- + Success +---------------------*/ + +/* On Form */ +.ui.form.success .success.message:not(:empty) { + display: block; +} +.ui.form.success .compact.success.message:not(:empty) { + display: inline-block; +} +.ui.form.success .icon.success.message:not(:empty) { + display: flex; +} + +/*-------------------- + Warning +---------------------*/ + +/* On Form */ +.ui.form.warning .warning.message:not(:empty) { + display: block; +} +.ui.form.warning .compact.warning.message:not(:empty) { + display: inline-block; +} +.ui.form.warning .icon.warning.message:not(:empty) { + display: flex; +} + +/*-------------------- + Error +---------------------*/ + +/* On Form */ +.ui.form.error .error.message:not(:empty) { + display: block; +} +.ui.form.error .compact.error.message:not(:empty) { + display: inline-block; +} +.ui.form.error .icon.error.message:not(:empty) { + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.error .field label, +.ui.form .field.error label, +.ui.form .fields.error .field .input, +.ui.form .field.error .input { + color: @formErrorColor; +} + +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: @formErrorColor; + color: @white; +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="datetime-local"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="search"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="file"], +.ui.form .fields.error .field input[type="url"], +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="datetime-local"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="search"], +.ui.form .field.error input[type="tel"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="file"], +.ui.form .field.error input[type="url"] { + background: @formErrorBackground; + border-color: @formErrorBorder; + color: @formErrorColor; + border-radius: @inputErrorBorderRadius; + box-shadow: @inputErrorBoxShadow; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="datetime-local"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="search"]:focus, +.ui.form .field.error input[type="tel"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="file"]:focus, +.ui.form .field.error input[type="url"]:focus { + background: @inputErrorFocusBackground; + border-color: @inputErrorFocusBorder; + color: @inputErrorFocusColor; + + -webkit-appearance: none; + box-shadow: @inputErrorFocusBoxShadow; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.error select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Dropdown Error +--------------------*/ + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item { + background: @formErrorBackground; + color: @formErrorColor; +} +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown { + border-color: @formErrorBorder !important; +} +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: @formErrorBorder !important; +} +.ui.form .fields.error .field .ui.dropdown:hover .menu, +.ui.form .field.error .ui.dropdown:hover .menu { + border-color: @formErrorBorder; +} +.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.error .ui.multiple.selection.dropdown > .label { + background-color: @dropdownErrorLabelBackground; + color: @dropdownErrorLabelColor; +} + +/* Hover */ +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: @dropdownErrorHoverBackground; +} + +/* Selected */ +.ui.form .fields.error .field .ui.dropdown .menu .selected.item, +.ui.form .field.error .ui.dropdown .menu .selected.item { + background-color: @dropdownErrorSelectedBackground; +} + + +/* Active */ +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: @dropdownErrorActiveBackground !important; +} + +/*-------------------- + Checkbox Error +---------------------*/ + +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { + color: @formErrorColor; +} +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { + background: @formErrorBackground; + border-color: @formErrorBorder; +} +.ui.form .fields.error .field .checkbox label:after, +.ui.form .field.error .checkbox label:after, +.ui.form .fields.error .field .checkbox .box:after, +.ui.form .field.error .checkbox .box:after { + color: @formErrorColor; +} + +/*-------------------- + Disabled +---------------------*/ + +.ui.form .disabled.fields .field, +.ui.form .disabled.field, +.ui.form .field :disabled { + pointer-events: none; + opacity: @disabledOpacity; +} +.ui.form .field.disabled > label, +.ui.form .fields.disabled > label { + opacity: @disabledLabelOpacity; +} +.ui.form .field.disabled :disabled { + opacity: 1; +} + + +/*-------------- + Loading +---------------*/ + +.ui.loading.form { + position: relative; + cursor: default; + pointer-events: none; +} +.ui.loading.form:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + z-index: @loaderDimmerZIndex; +} +.ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: form-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; +} + +@keyframes form-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/******************************* + Element Types +*******************************/ + +/*-------------------- + Required Field +---------------------*/ + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after, +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + margin: @requiredMargin; + content: @requiredContent; + color: @requiredColor; +} + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after { + display: inline-block; + vertical-align: top; +} + +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + position: absolute; + top: 0%; + left: 100%; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Inverted Colors +---------------------*/ + +.ui.inverted.form label, +.ui.form .inverted.segment label, +.ui.form .inverted.segment .ui.checkbox label, +.ui.form .inverted.segment .ui.checkbox .box, +.ui.inverted.form .ui.checkbox label, +.ui.inverted.form .ui.checkbox .box, +.ui.inverted.form .inline.fields > label, +.ui.inverted.form .inline.fields .field > label, +.ui.inverted.form .inline.fields .field > p, +.ui.inverted.form .inline.field > label, +.ui.inverted.form .inline.field > p { + color: @invertedLabelColor; +} + +/* Inverted Field */ +.ui.inverted.form input:not([type]), +.ui.inverted.form input[type="date"], +.ui.inverted.form input[type="datetime-local"], +.ui.inverted.form input[type="email"], +.ui.inverted.form input[type="number"], +.ui.inverted.form input[type="password"], +.ui.inverted.form input[type="search"], +.ui.inverted.form input[type="tel"], +.ui.inverted.form input[type="time"], +.ui.inverted.form input[type="text"], +.ui.inverted.form input[type="file"], +.ui.inverted.form input[type="url"] { + background: @invertedInputBackground; + border-color: @invertedInputBorderColor; + color: @invertedInputColor; + box-shadow: @invertedInputBoxShadow; +} + + +/*-------------------- + Field Groups +---------------------*/ + +/* Grouped Vertically */ +.ui.form .grouped.fields { + display: block; + margin: @groupedMargin; +} +.ui.form .grouped.fields:last-child { + margin-bottom: 0em; +} + +.ui.form .grouped.fields > label { + margin: @groupedLabelMargin; + color: @groupedLabelColor; + font-size: @groupedLabelFontSize; + font-weight: @groupedLabelFontWeight; + text-transform: @groupedLabelTextTransform; +} + +.ui.form .grouped.fields .field, +.ui.form .grouped.inline.fields .field { + display: block; + margin: @groupedFieldMargin; + padding: 0em; +} + +/*-------------------- + Fields +---------------------*/ + +/* Split fields */ +.ui.form .fields { + display: flex; + flex-direction: row; + margin: @fieldsMargin; +} +.ui.form .fields > .field { + flex: 0 1 auto; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} +.ui.form .fields > .field:first-child { + border-left: none; + box-shadow: none; +} + +/* Other Combinations */ +.ui.form .two.fields > .fields, +.ui.form .two.fields > .field { + width: @twoColumn; +} +.ui.form .three.fields > .fields, +.ui.form .three.fields > .field { + width: @threeColumn; +} +.ui.form .four.fields > .fields, +.ui.form .four.fields > .field { + width: @fourColumn; +} +.ui.form .five.fields > .fields, +.ui.form .five.fields > .field { + width: @fiveColumn; +} +.ui.form .six.fields > .fields, +.ui.form .six.fields > .field { + width: @sixColumn; +} +.ui.form .seven.fields > .fields, +.ui.form .seven.fields > .field { + width: @sevenColumn; +} +.ui.form .eight.fields > .fields, +.ui.form .eight.fields > .field { + width: @eightColumn; +} +.ui.form .nine.fields > .fields, +.ui.form .nine.fields > .field { + width: @nineColumn; +} +.ui.form .ten.fields > .fields, +.ui.form .ten.fields > .field { + width: @tenColumn; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.form .fields { + flex-wrap: wrap; + } + + .ui[class*="equal width"].form .fields > .field, + .ui.form [class*="equal width"].fields > .field, + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .six.fields > .fields, + .ui.form .six.fields > .field, + .ui.form .seven.fields > .fields, + .ui.form .seven.fields > .field, + .ui.form .eight.fields > .fields, + .ui.form .eight.fields > .field, + .ui.form .nine.fields > .fields, + .ui.form .nine.fields > .field, + .ui.form .ten.fields > .fields, + .ui.form .ten.fields > .field { + width: @oneColumn !important; + margin: 0em 0em @rowDistance; + } +} + + +/* Sizing Combinations */ +.ui.form .fields .wide.field { + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} + +.ui.form .one.wide.field { + width: @oneWide !important; +} +.ui.form .two.wide.field { + width: @twoWide !important; +} +.ui.form .three.wide.field { + width: @threeWide !important; +} +.ui.form .four.wide.field { + width: @fourWide !important; +} +.ui.form .five.wide.field { + width: @fiveWide !important; +} +.ui.form .six.wide.field { + width: @sixWide !important; +} +.ui.form .seven.wide.field { + width: @sevenWide !important; +} +.ui.form .eight.wide.field { + width: @eightWide !important; +} +.ui.form .nine.wide.field { + width: @nineWide !important; +} +.ui.form .ten.wide.field { + width: @tenWide !important; +} +.ui.form .eleven.wide.field { + width: @elevenWide !important; +} +.ui.form .twelve.wide.field { + width: @twelveWide !important; +} +.ui.form .thirteen.wide.field { + width: @thirteenWide !important; +} +.ui.form .fourteen.wide.field { + width: @fourteenWide !important; +} +.ui.form .fifteen.wide.field { + width: @fifteenWide !important; +} +.ui.form .sixteen.wide.field { + width: @sixteenWide !important; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .fields > .two.wide.field, + .ui.form .fields > .three.wide.field, + .ui.form .fields > .four.wide.field, + .ui.form .fields > .five.wide.field, + .ui.form .fields > .six.wide.field, + .ui.form .fields > .seven.wide.field, + .ui.form .fields > .eight.wide.field, + .ui.form .fields > .nine.wide.field, + .ui.form .fields > .ten.wide.field, + .ui.form .fields > .eleven.wide.field, + .ui.form .fields > .twelve.wide.field, + .ui.form .fields > .thirteen.wide.field, + .ui.form .fields > .fourteen.wide.field, + .ui.form .fields > .fifteen.wide.field, + .ui.form .fields > .sixteen.wide.field { + width: @oneColumn !important; + } + .ui.form .fields { + margin-bottom: 0em; + } +} + +/*-------------------- + Equal Width +---------------------*/ + +.ui[class*="equal width"].form .fields > .field, +.ui.form [class*="equal width"].fields > .field { + width: 100%; + flex: 1 1 auto; +} + +/*-------------------- + Inline Fields +---------------------*/ + +.ui.form .inline.fields { + margin: @fieldMargin; + align-items: center; +} +.ui.form .inline.fields .field { + margin: 0em; + padding: @inlineFieldsMargin; +} + +/* Inline Label */ +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: baseline; + font-size: @inlineLabelFontSize; + font-weight: @inlineLabelFontWeight; + color: @inlineLabelColor; + text-transform: @inlineLabelTextTransform; +} + +/* Grouped Inline Label */ +.ui.form .inline.fields > label { + margin: @groupedInlineLabelMargin; +} + +/* Inline Input */ +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.ui.form .inline.field > input, +.ui.form .inline.field > select { + display: inline-block; + width: auto; + + margin-top: 0em; + margin-bottom: 0em; + + vertical-align: middle; + font-size: @inlineInputSize; +} + +/* Label */ +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em @inlineLabelDistance 0em 0em; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} + +/* Wide */ +.ui.form .inline.fields .wide.field { + display: flex; + align-items: center; +} +.ui.form .inline.fields .wide.field > input, +.ui.form .inline.fields .wide.field > select { + width: 100%; +} + + +/*-------------------- + Sizes +---------------------*/ + +.ui.mini.form { + font-size: @mini; +} +.ui.tiny.form { + font-size: @tiny; +} +.ui.small.form { + font-size: @small; +} +.ui.form { + font-size: @medium; +} +.ui.large.form { + font-size: @large; +} +.ui.big.form { + font-size: @big; +} +.ui.huge.form { + font-size: @huge; +} +.ui.massive.form { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/collections/grid.less b/src/semantic/src/definitions/collections/grid.less new file mode 100755 index 0000000..ba1b535 --- /dev/null +++ b/src/semantic/src/definitions/collections/grid.less @@ -0,0 +1,1920 @@ +/*! + * # Semantic UI - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'grid'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +.ui.grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + padding: 0em; +} + +/*---------------------- + Remove Gutters +-----------------------*/ + +.ui.grid { + margin-top: -(@rowSpacing / 2); + margin-bottom: -(@rowSpacing / 2); + margin-left: -(@gutterWidth / 2); + margin-right: -(@gutterWidth / 2); +} +.ui.relaxed.grid { + margin-left: -(@relaxedGutterWidth / 2); + margin-right: -(@relaxedGutterWidth / 2); +} +.ui[class*="very relaxed"].grid { + margin-left: -(@veryRelaxedGutterWidth / 2); + margin-right: -(@veryRelaxedGutterWidth / 2); +} + + +/* Preserve Rows Spacing on Consecutive Grids */ +.ui.grid + .grid { + margin-top: @consecutiveGridDistance; +} + +/*------------------- + Columns +--------------------*/ + +/* Standard 16 column */ +.ui.grid > .column:not(.row), +.ui.grid > .row > .column { + position: relative; + display: inline-block; + + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); + vertical-align: top; +} + +.ui.grid > * { + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} + +/*------------------- + Rows +--------------------*/ + +.ui.grid > .row { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: inherit; + align-items: stretch; + width: 100% !important; + padding: 0rem; + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} + +/*------------------- + Columns +--------------------*/ + +/* Vertical padding when no rows */ +.ui.grid > .column:not(.row) { + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} +.ui.grid > .row > .column { + margin-top: 0em; + margin-bottom: 0em; +} + +/*------------------- + Content +--------------------*/ + +.ui.grid > .row > img, +.ui.grid > .row > .column > img { + max-width: @columnMaxImageWidth; +} + +/*------------------- + Loose Coupling +--------------------*/ + +/* Collapse Margin on Consecutive Grid */ +.ui.grid > .ui.grid:first-child { + margin-top: 0em; +} +.ui.grid > .ui.grid:last-child { + margin-bottom: 0em; +} + +/* Segment inside Aligned Grid */ +.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), +.ui.aligned.grid .column > .segment:not(.compact):not(.attached) { + width: 100%; +} + +/* Align Dividers with Gutter */ +.ui.grid .row + .ui.divider { + flex-grow: 1; + margin: (@rowSpacing / 2) (@gutterWidth / 2); +} +.ui.grid .column + .ui.vertical.divider { + height: ~"calc(50% - "(@rowSpacing/2)~")"; +} + +/* Remove Border on Last Horizontal Segment */ +.ui.grid > .row > .column:last-child > .horizontal.segment, +.ui.grid > .column:last-child > .horizontal.segment { + box-shadow: none; +} + +/******************************* + Variations +*******************************/ + + +/*----------------------- + Page Grid +-------------------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.page.grid { + width: @mobileWidth; + padding-left: @mobileGutter; + padding-right: @mobileGutter; + margin-left: 0em; + margin-right: 0em; + } +} +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.page.grid { + width: @tabletWidth; + margin-left: @tabletMargin; + margin-right: @tabletMargin; + padding-left: @tabletGutter; + padding-right: @tabletGutter; + } +} +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.page.grid { + width: @computerWidth; + margin-left: @computerMargin; + margin-right: @computerMargin; + padding-left: @computerGutter; + padding-right: @computerGutter; + } +} +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { + .ui.page.grid { + width: @largeMonitorWidth; + margin-left: @largeMonitorMargin; + margin-right: @largeMonitorMargin; + padding-left: @largeMonitorGutter; + padding-right: @largeMonitorGutter; + } +} +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.page.grid { + width: @widescreenMonitorWidth; + margin-left: @widescreenMargin; + margin-right: @widescreenMargin; + padding-left: @widescreenMonitorGutter; + padding-right: @widescreenMonitorGutter; + } +} + + +/*------------------- + Column Count +--------------------*/ + +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: @oneColumn; +} + +/* Grid Based */ +.ui[class*="one column"].grid > .row > .column, +.ui[class*="one column"].grid > .column:not(.row) { + width: @oneColumn; +} +.ui[class*="two column"].grid > .row > .column, +.ui[class*="two column"].grid > .column:not(.row) { + width: @twoColumn; +} +.ui[class*="three column"].grid > .row > .column, +.ui[class*="three column"].grid > .column:not(.row) { + width: @threeColumn; +} +.ui[class*="four column"].grid > .row > .column, +.ui[class*="four column"].grid > .column:not(.row) { + width: @fourColumn; +} +.ui[class*="five column"].grid > .row > .column, +.ui[class*="five column"].grid > .column:not(.row) { + width: @fiveColumn; +} +.ui[class*="six column"].grid > .row > .column, +.ui[class*="six column"].grid > .column:not(.row) { + width: @sixColumn; +} +.ui[class*="seven column"].grid > .row > .column, +.ui[class*="seven column"].grid > .column:not(.row) { + width: @sevenColumn; +} +.ui[class*="eight column"].grid > .row > .column, +.ui[class*="eight column"].grid > .column:not(.row) { + width: @eightColumn; +} +.ui[class*="nine column"].grid > .row > .column, +.ui[class*="nine column"].grid > .column:not(.row) { + width: @nineColumn; +} +.ui[class*="ten column"].grid > .row > .column, +.ui[class*="ten column"].grid > .column:not(.row) { + width: @tenColumn; +} +.ui[class*="eleven column"].grid > .row > .column, +.ui[class*="eleven column"].grid > .column:not(.row) { + width: @elevenColumn; +} +.ui[class*="twelve column"].grid > .row > .column, +.ui[class*="twelve column"].grid > .column:not(.row) { + width: @twelveColumn; +} +.ui[class*="thirteen column"].grid > .row > .column, +.ui[class*="thirteen column"].grid > .column:not(.row) { + width: @thirteenColumn; +} +.ui[class*="fourteen column"].grid > .row > .column, +.ui[class*="fourteen column"].grid > .column:not(.row) { + width: @fourteenColumn; +} +.ui[class*="fifteen column"].grid > .row > .column, +.ui[class*="fifteen column"].grid > .column:not(.row) { + width: @fifteenColumn; +} +.ui[class*="sixteen column"].grid > .row > .column, +.ui[class*="sixteen column"].grid > .column:not(.row) { + width: @sixteenColumn; +} + +/* Row Based Overrides */ +.ui.grid > [class*="one column"].row > .column { + width: @oneColumn !important; +} +.ui.grid > [class*="two column"].row > .column { + width: @twoColumn !important; +} +.ui.grid > [class*="three column"].row > .column { + width: @threeColumn !important; +} +.ui.grid > [class*="four column"].row > .column { + width: @fourColumn !important; +} +.ui.grid > [class*="five column"].row > .column { + width: @fiveColumn !important; +} +.ui.grid > [class*="six column"].row > .column { + width: @sixColumn !important; +} +.ui.grid > [class*="seven column"].row > .column { + width: @sevenColumn !important; +} +.ui.grid > [class*="eight column"].row > .column { + width: @eightColumn !important; +} +.ui.grid > [class*="nine column"].row > .column { + width: @nineColumn !important; +} +.ui.grid > [class*="ten column"].row > .column { + width: @tenColumn !important; +} +.ui.grid > [class*="eleven column"].row > .column { + width: @elevenColumn !important; +} +.ui.grid > [class*="twelve column"].row > .column { + width: @twelveColumn !important; +} +.ui.grid > [class*="thirteen column"].row > .column { + width: @thirteenColumn !important; +} +.ui.grid > [class*="fourteen column"].row > .column { + width: @fourteenColumn !important; +} +.ui.grid > [class*="fifteen column"].row > .column { + width: @fifteenColumn !important; +} +.ui.grid > [class*="sixteen column"].row > .column { + width: @sixteenColumn !important; +} + +/* Celled Page */ +.ui.celled.page.grid { + box-shadow: none; +} + +/*------------------- + Column Width +--------------------*/ + +/* Sizing Combinations */ +.ui.grid > .row > [class*="one wide"].column, +.ui.grid > .column.row > [class*="one wide"].column, +.ui.grid > [class*="one wide"].column, +.ui.column.grid > [class*="one wide"].column { + width: @oneWide !important; +} +.ui.grid > .row > [class*="two wide"].column, +.ui.grid > .column.row > [class*="two wide"].column, +.ui.grid > [class*="two wide"].column, +.ui.column.grid > [class*="two wide"].column { + width: @twoWide !important; +} +.ui.grid > .row > [class*="three wide"].column, +.ui.grid > .column.row > [class*="three wide"].column, +.ui.grid > [class*="three wide"].column, +.ui.column.grid > [class*="three wide"].column { + width: @threeWide !important; +} +.ui.grid > .row > [class*="four wide"].column, +.ui.grid > .column.row > [class*="four wide"].column, +.ui.grid > [class*="four wide"].column, +.ui.column.grid > [class*="four wide"].column { + width: @fourWide !important; +} +.ui.grid > .row > [class*="five wide"].column, +.ui.grid > .column.row > [class*="five wide"].column, +.ui.grid > [class*="five wide"].column, +.ui.column.grid > [class*="five wide"].column { + width: @fiveWide !important; +} +.ui.grid > .row > [class*="six wide"].column, +.ui.grid > .column.row > [class*="six wide"].column, +.ui.grid > [class*="six wide"].column, +.ui.column.grid > [class*="six wide"].column { + width: @sixWide !important; +} +.ui.grid > .row > [class*="seven wide"].column, +.ui.grid > .column.row > [class*="seven wide"].column, +.ui.grid > [class*="seven wide"].column, +.ui.column.grid > [class*="seven wide"].column { + width: @sevenWide !important; +} +.ui.grid > .row > [class*="eight wide"].column, +.ui.grid > .column.row > [class*="eight wide"].column, +.ui.grid > [class*="eight wide"].column, +.ui.column.grid > [class*="eight wide"].column { + width: @eightWide !important; +} +.ui.grid > .row > [class*="nine wide"].column, +.ui.grid > .column.row > [class*="nine wide"].column, +.ui.grid > [class*="nine wide"].column, +.ui.column.grid > [class*="nine wide"].column { + width: @nineWide !important; +} +.ui.grid > .row > [class*="ten wide"].column, +.ui.grid > .column.row > [class*="ten wide"].column, +.ui.grid > [class*="ten wide"].column, +.ui.column.grid > [class*="ten wide"].column { + width: @tenWide !important; +} +.ui.grid > .row > [class*="eleven wide"].column, +.ui.grid > .column.row > [class*="eleven wide"].column, +.ui.grid > [class*="eleven wide"].column, +.ui.column.grid > [class*="eleven wide"].column { + width: @elevenWide !important; +} +.ui.grid > .row > [class*="twelve wide"].column, +.ui.grid > .column.row > [class*="twelve wide"].column, +.ui.grid > [class*="twelve wide"].column, +.ui.column.grid > [class*="twelve wide"].column { + width: @twelveWide !important; +} +.ui.grid > .row > [class*="thirteen wide"].column, +.ui.grid > .column.row > [class*="thirteen wide"].column, +.ui.grid > [class*="thirteen wide"].column, +.ui.column.grid > [class*="thirteen wide"].column { + width: @thirteenWide !important; +} +.ui.grid > .row > [class*="fourteen wide"].column, +.ui.grid > .column.row > [class*="fourteen wide"].column, +.ui.grid > [class*="fourteen wide"].column, +.ui.column.grid > [class*="fourteen wide"].column { + width: @fourteenWide !important; +} +.ui.grid > .row > [class*="fifteen wide"].column, +.ui.grid > .column.row > [class*="fifteen wide"].column, +.ui.grid > [class*="fifteen wide"].column, +.ui.column.grid > [class*="fifteen wide"].column { + width: @fifteenWide !important; +} +.ui.grid > .row > [class*="sixteen wide"].column, +.ui.grid > .column.row > [class*="sixteen wide"].column, +.ui.grid > [class*="sixteen wide"].column, +.ui.column.grid > [class*="sixteen wide"].column { + width: @sixteenWide !important; +} + +/*---------------------- + Width per Device +-----------------------*/ + +/* Mobile Sizing Combinations */ +@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) { + .ui.grid > .row > [class*="one wide mobile"].column, + .ui.grid > .column.row > [class*="one wide mobile"].column, + .ui.grid > [class*="one wide mobile"].column, + .ui.column.grid > [class*="one wide mobile"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide mobile"].column, + .ui.grid > .column.row > [class*="two wide mobile"].column, + .ui.grid > [class*="two wide mobile"].column, + .ui.column.grid > [class*="two wide mobile"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide mobile"].column, + .ui.grid > .column.row > [class*="three wide mobile"].column, + .ui.grid > [class*="three wide mobile"].column, + .ui.column.grid > [class*="three wide mobile"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide mobile"].column, + .ui.grid > .column.row > [class*="four wide mobile"].column, + .ui.grid > [class*="four wide mobile"].column, + .ui.column.grid > [class*="four wide mobile"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide mobile"].column, + .ui.grid > .column.row > [class*="five wide mobile"].column, + .ui.grid > [class*="five wide mobile"].column, + .ui.column.grid > [class*="five wide mobile"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide mobile"].column, + .ui.grid > .column.row > [class*="six wide mobile"].column, + .ui.grid > [class*="six wide mobile"].column, + .ui.column.grid > [class*="six wide mobile"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide mobile"].column, + .ui.grid > .column.row > [class*="seven wide mobile"].column, + .ui.grid > [class*="seven wide mobile"].column, + .ui.column.grid > [class*="seven wide mobile"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide mobile"].column, + .ui.grid > .column.row > [class*="eight wide mobile"].column, + .ui.grid > [class*="eight wide mobile"].column, + .ui.column.grid > [class*="eight wide mobile"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide mobile"].column, + .ui.grid > .column.row > [class*="nine wide mobile"].column, + .ui.grid > [class*="nine wide mobile"].column, + .ui.column.grid > [class*="nine wide mobile"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide mobile"].column, + .ui.grid > .column.row > [class*="ten wide mobile"].column, + .ui.grid > [class*="ten wide mobile"].column, + .ui.column.grid > [class*="ten wide mobile"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide mobile"].column, + .ui.grid > .column.row > [class*="eleven wide mobile"].column, + .ui.grid > [class*="eleven wide mobile"].column, + .ui.column.grid > [class*="eleven wide mobile"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide mobile"].column, + .ui.grid > .column.row > [class*="twelve wide mobile"].column, + .ui.grid > [class*="twelve wide mobile"].column, + .ui.column.grid > [class*="twelve wide mobile"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide mobile"].column, + .ui.grid > .column.row > [class*="thirteen wide mobile"].column, + .ui.grid > [class*="thirteen wide mobile"].column, + .ui.column.grid > [class*="thirteen wide mobile"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide mobile"].column, + .ui.grid > .column.row > [class*="fourteen wide mobile"].column, + .ui.grid > [class*="fourteen wide mobile"].column, + .ui.column.grid > [class*="fourteen wide mobile"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide mobile"].column, + .ui.grid > .column.row > [class*="fifteen wide mobile"].column, + .ui.grid > [class*="fifteen wide mobile"].column, + .ui.column.grid > [class*="fifteen wide mobile"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide mobile"].column, + .ui.grid > .column.row > [class*="sixteen wide mobile"].column, + .ui.grid > [class*="sixteen wide mobile"].column, + .ui.column.grid > [class*="sixteen wide mobile"].column { + width: @sixteenWide !important; + } +} + +/* Tablet Sizing Combinations */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.grid > .row > [class*="one wide tablet"].column, + .ui.grid > .column.row > [class*="one wide tablet"].column, + .ui.grid > [class*="one wide tablet"].column, + .ui.column.grid > [class*="one wide tablet"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide tablet"].column, + .ui.grid > .column.row > [class*="two wide tablet"].column, + .ui.grid > [class*="two wide tablet"].column, + .ui.column.grid > [class*="two wide tablet"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide tablet"].column, + .ui.grid > .column.row > [class*="three wide tablet"].column, + .ui.grid > [class*="three wide tablet"].column, + .ui.column.grid > [class*="three wide tablet"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide tablet"].column, + .ui.grid > .column.row > [class*="four wide tablet"].column, + .ui.grid > [class*="four wide tablet"].column, + .ui.column.grid > [class*="four wide tablet"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide tablet"].column, + .ui.grid > .column.row > [class*="five wide tablet"].column, + .ui.grid > [class*="five wide tablet"].column, + .ui.column.grid > [class*="five wide tablet"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide tablet"].column, + .ui.grid > .column.row > [class*="six wide tablet"].column, + .ui.grid > [class*="six wide tablet"].column, + .ui.column.grid > [class*="six wide tablet"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide tablet"].column, + .ui.grid > .column.row > [class*="seven wide tablet"].column, + .ui.grid > [class*="seven wide tablet"].column, + .ui.column.grid > [class*="seven wide tablet"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide tablet"].column, + .ui.grid > .column.row > [class*="eight wide tablet"].column, + .ui.grid > [class*="eight wide tablet"].column, + .ui.column.grid > [class*="eight wide tablet"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide tablet"].column, + .ui.grid > .column.row > [class*="nine wide tablet"].column, + .ui.grid > [class*="nine wide tablet"].column, + .ui.column.grid > [class*="nine wide tablet"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide tablet"].column, + .ui.grid > .column.row > [class*="ten wide tablet"].column, + .ui.grid > [class*="ten wide tablet"].column, + .ui.column.grid > [class*="ten wide tablet"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide tablet"].column, + .ui.grid > .column.row > [class*="eleven wide tablet"].column, + .ui.grid > [class*="eleven wide tablet"].column, + .ui.column.grid > [class*="eleven wide tablet"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide tablet"].column, + .ui.grid > .column.row > [class*="twelve wide tablet"].column, + .ui.grid > [class*="twelve wide tablet"].column, + .ui.column.grid > [class*="twelve wide tablet"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide tablet"].column, + .ui.grid > .column.row > [class*="thirteen wide tablet"].column, + .ui.grid > [class*="thirteen wide tablet"].column, + .ui.column.grid > [class*="thirteen wide tablet"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide tablet"].column, + .ui.grid > .column.row > [class*="fourteen wide tablet"].column, + .ui.grid > [class*="fourteen wide tablet"].column, + .ui.column.grid > [class*="fourteen wide tablet"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide tablet"].column, + .ui.grid > .column.row > [class*="fifteen wide tablet"].column, + .ui.grid > [class*="fifteen wide tablet"].column, + .ui.column.grid > [class*="fifteen wide tablet"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide tablet"].column, + .ui.grid > .column.row > [class*="sixteen wide tablet"].column, + .ui.grid > [class*="sixteen wide tablet"].column, + .ui.column.grid > [class*="sixteen wide tablet"].column { + width: @sixteenWide !important; + } +} + +/* Computer/Desktop Sizing Combinations */ +@media only screen and (min-width: @computerBreakpoint) { + .ui.grid > .row > [class*="one wide computer"].column, + .ui.grid > .column.row > [class*="one wide computer"].column, + .ui.grid > [class*="one wide computer"].column, + .ui.column.grid > [class*="one wide computer"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide computer"].column, + .ui.grid > .column.row > [class*="two wide computer"].column, + .ui.grid > [class*="two wide computer"].column, + .ui.column.grid > [class*="two wide computer"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide computer"].column, + .ui.grid > .column.row > [class*="three wide computer"].column, + .ui.grid > [class*="three wide computer"].column, + .ui.column.grid > [class*="three wide computer"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide computer"].column, + .ui.grid > .column.row > [class*="four wide computer"].column, + .ui.grid > [class*="four wide computer"].column, + .ui.column.grid > [class*="four wide computer"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide computer"].column, + .ui.grid > .column.row > [class*="five wide computer"].column, + .ui.grid > [class*="five wide computer"].column, + .ui.column.grid > [class*="five wide computer"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide computer"].column, + .ui.grid > .column.row > [class*="six wide computer"].column, + .ui.grid > [class*="six wide computer"].column, + .ui.column.grid > [class*="six wide computer"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide computer"].column, + .ui.grid > .column.row > [class*="seven wide computer"].column, + .ui.grid > [class*="seven wide computer"].column, + .ui.column.grid > [class*="seven wide computer"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide computer"].column, + .ui.grid > .column.row > [class*="eight wide computer"].column, + .ui.grid > [class*="eight wide computer"].column, + .ui.column.grid > [class*="eight wide computer"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide computer"].column, + .ui.grid > .column.row > [class*="nine wide computer"].column, + .ui.grid > [class*="nine wide computer"].column, + .ui.column.grid > [class*="nine wide computer"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide computer"].column, + .ui.grid > .column.row > [class*="ten wide computer"].column, + .ui.grid > [class*="ten wide computer"].column, + .ui.column.grid > [class*="ten wide computer"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide computer"].column, + .ui.grid > .column.row > [class*="eleven wide computer"].column, + .ui.grid > [class*="eleven wide computer"].column, + .ui.column.grid > [class*="eleven wide computer"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide computer"].column, + .ui.grid > .column.row > [class*="twelve wide computer"].column, + .ui.grid > [class*="twelve wide computer"].column, + .ui.column.grid > [class*="twelve wide computer"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide computer"].column, + .ui.grid > .column.row > [class*="thirteen wide computer"].column, + .ui.grid > [class*="thirteen wide computer"].column, + .ui.column.grid > [class*="thirteen wide computer"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide computer"].column, + .ui.grid > .column.row > [class*="fourteen wide computer"].column, + .ui.grid > [class*="fourteen wide computer"].column, + .ui.column.grid > [class*="fourteen wide computer"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide computer"].column, + .ui.grid > .column.row > [class*="fifteen wide computer"].column, + .ui.grid > [class*="fifteen wide computer"].column, + .ui.column.grid > [class*="fifteen wide computer"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide computer"].column, + .ui.grid > .column.row > [class*="sixteen wide computer"].column, + .ui.grid > [class*="sixteen wide computer"].column, + .ui.column.grid > [class*="sixteen wide computer"].column { + width: @sixteenWide !important; + } +} + +/* Large Monitor Sizing Combinations */ +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){ + .ui.grid > .row > [class*="one wide large screen"].column, + .ui.grid > .column.row > [class*="one wide large screen"].column, + .ui.grid > [class*="one wide large screen"].column, + .ui.column.grid > [class*="one wide large screen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide large screen"].column, + .ui.grid > .column.row > [class*="two wide large screen"].column, + .ui.grid > [class*="two wide large screen"].column, + .ui.column.grid > [class*="two wide large screen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide large screen"].column, + .ui.grid > .column.row > [class*="three wide large screen"].column, + .ui.grid > [class*="three wide large screen"].column, + .ui.column.grid > [class*="three wide large screen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide large screen"].column, + .ui.grid > .column.row > [class*="four wide large screen"].column, + .ui.grid > [class*="four wide large screen"].column, + .ui.column.grid > [class*="four wide large screen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide large screen"].column, + .ui.grid > .column.row > [class*="five wide large screen"].column, + .ui.grid > [class*="five wide large screen"].column, + .ui.column.grid > [class*="five wide large screen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide large screen"].column, + .ui.grid > .column.row > [class*="six wide large screen"].column, + .ui.grid > [class*="six wide large screen"].column, + .ui.column.grid > [class*="six wide large screen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide large screen"].column, + .ui.grid > .column.row > [class*="seven wide large screen"].column, + .ui.grid > [class*="seven wide large screen"].column, + .ui.column.grid > [class*="seven wide large screen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide large screen"].column, + .ui.grid > .column.row > [class*="eight wide large screen"].column, + .ui.grid > [class*="eight wide large screen"].column, + .ui.column.grid > [class*="eight wide large screen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide large screen"].column, + .ui.grid > .column.row > [class*="nine wide large screen"].column, + .ui.grid > [class*="nine wide large screen"].column, + .ui.column.grid > [class*="nine wide large screen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide large screen"].column, + .ui.grid > .column.row > [class*="ten wide large screen"].column, + .ui.grid > [class*="ten wide large screen"].column, + .ui.column.grid > [class*="ten wide large screen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide large screen"].column, + .ui.grid > .column.row > [class*="eleven wide large screen"].column, + .ui.grid > [class*="eleven wide large screen"].column, + .ui.column.grid > [class*="eleven wide large screen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide large screen"].column, + .ui.grid > .column.row > [class*="twelve wide large screen"].column, + .ui.grid > [class*="twelve wide large screen"].column, + .ui.column.grid > [class*="twelve wide large screen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide large screen"].column, + .ui.grid > .column.row > [class*="thirteen wide large screen"].column, + .ui.grid > [class*="thirteen wide large screen"].column, + .ui.column.grid > [class*="thirteen wide large screen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide large screen"].column, + .ui.grid > .column.row > [class*="fourteen wide large screen"].column, + .ui.grid > [class*="fourteen wide large screen"].column, + .ui.column.grid > [class*="fourteen wide large screen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide large screen"].column, + .ui.grid > .column.row > [class*="fifteen wide large screen"].column, + .ui.grid > [class*="fifteen wide large screen"].column, + .ui.column.grid > [class*="fifteen wide large screen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide large screen"].column, + .ui.grid > .column.row > [class*="sixteen wide large screen"].column, + .ui.grid > [class*="sixteen wide large screen"].column, + .ui.column.grid > [class*="sixteen wide large screen"].column { + width: @sixteenWide !important; + } +} + +/* Widescreen Sizing Combinations */ +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.grid > .row > [class*="one wide widescreen"].column, + .ui.grid > .column.row > [class*="one wide widescreen"].column, + .ui.grid > [class*="one wide widescreen"].column, + .ui.column.grid > [class*="one wide widescreen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide widescreen"].column, + .ui.grid > .column.row > [class*="two wide widescreen"].column, + .ui.grid > [class*="two wide widescreen"].column, + .ui.column.grid > [class*="two wide widescreen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide widescreen"].column, + .ui.grid > .column.row > [class*="three wide widescreen"].column, + .ui.grid > [class*="three wide widescreen"].column, + .ui.column.grid > [class*="three wide widescreen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide widescreen"].column, + .ui.grid > .column.row > [class*="four wide widescreen"].column, + .ui.grid > [class*="four wide widescreen"].column, + .ui.column.grid > [class*="four wide widescreen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide widescreen"].column, + .ui.grid > .column.row > [class*="five wide widescreen"].column, + .ui.grid > [class*="five wide widescreen"].column, + .ui.column.grid > [class*="five wide widescreen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide widescreen"].column, + .ui.grid > .column.row > [class*="six wide widescreen"].column, + .ui.grid > [class*="six wide widescreen"].column, + .ui.column.grid > [class*="six wide widescreen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide widescreen"].column, + .ui.grid > .column.row > [class*="seven wide widescreen"].column, + .ui.grid > [class*="seven wide widescreen"].column, + .ui.column.grid > [class*="seven wide widescreen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide widescreen"].column, + .ui.grid > .column.row > [class*="eight wide widescreen"].column, + .ui.grid > [class*="eight wide widescreen"].column, + .ui.column.grid > [class*="eight wide widescreen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide widescreen"].column, + .ui.grid > .column.row > [class*="nine wide widescreen"].column, + .ui.grid > [class*="nine wide widescreen"].column, + .ui.column.grid > [class*="nine wide widescreen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide widescreen"].column, + .ui.grid > .column.row > [class*="ten wide widescreen"].column, + .ui.grid > [class*="ten wide widescreen"].column, + .ui.column.grid > [class*="ten wide widescreen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide widescreen"].column, + .ui.grid > .column.row > [class*="eleven wide widescreen"].column, + .ui.grid > [class*="eleven wide widescreen"].column, + .ui.column.grid > [class*="eleven wide widescreen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide widescreen"].column, + .ui.grid > .column.row > [class*="twelve wide widescreen"].column, + .ui.grid > [class*="twelve wide widescreen"].column, + .ui.column.grid > [class*="twelve wide widescreen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide widescreen"].column, + .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, + .ui.grid > [class*="thirteen wide widescreen"].column, + .ui.column.grid > [class*="thirteen wide widescreen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, + .ui.grid > [class*="fourteen wide widescreen"].column, + .ui.column.grid > [class*="fourteen wide widescreen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, + .ui.grid > [class*="fifteen wide widescreen"].column, + .ui.column.grid > [class*="fifteen wide widescreen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide widescreen"].column, + .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, + .ui.grid > [class*="sixteen wide widescreen"].column, + .ui.column.grid > [class*="sixteen wide widescreen"].column { + width: @sixteenWide !important; + } +} + +/*---------------------- + Centered +-----------------------*/ + +.ui.centered.grid, +.ui.centered.grid > .row, +.ui.grid > .centered.row { + text-align: center; + justify-content: center; +} +.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), +.ui.centered.grid > .row > .column:not(.aligned):not(.justified), +.ui.grid .centered.row > .column:not(.aligned):not(.justified) { + text-align: left; +} + +.ui.grid > .centered.column, +.ui.grid > .row > .centered.column { + display: block; + margin-left: auto; + margin-right: auto; +} + +/*---------------------- + Relaxed +-----------------------*/ + +.ui.relaxed.grid > .column:not(.row), +.ui.relaxed.grid > .row > .column, +.ui.grid > .relaxed.row > .column { + padding-left: (@relaxedGutterWidth / 2); + padding-right: (@relaxedGutterWidth / 2); +} + +.ui[class*="very relaxed"].grid > .column:not(.row), +.ui[class*="very relaxed"].grid > .row > .column, +.ui.grid > [class*="very relaxed"].row > .column { + padding-left: (@veryRelaxedGutterWidth / 2); + padding-right: (@veryRelaxedGutterWidth / 2); +} + +/* Coupling with UI Divider */ +.ui.relaxed.grid .row + .ui.divider, +.ui.grid .relaxed.row + .ui.divider { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); +} +.ui[class*="very relaxed"].grid .row + .ui.divider, +.ui.grid [class*="very relaxed"].row + .ui.divider { + margin-left: (@veryRelaxedGutterWidth / 2); + margin-right: (@veryRelaxedGutterWidth / 2); +} + + +/*---------------------- + Padded +-----------------------*/ + +.ui.padded.grid:not(.vertically):not(.horizontally) { + margin: 0em !important; +} +[class*="horizontally padded"].ui.grid { + margin-left: 0em !important; + margin-right: 0em !important; +} +[class*="vertically padded"].ui.grid { + margin-top: 0em !important; + margin-bottom: 0em !important; +} + +/*---------------------- + "Floated" +-----------------------*/ + +.ui.grid [class*="left floated"].column { + margin-right: auto; +} +.ui.grid [class*="right floated"].column { + margin-left: auto; +} + + +/*---------------------- + Divided +-----------------------*/ + +.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column { + box-shadow: @dividedBorder; +} + +/* Swap from padding to margin on columns to have dividers align */ +.ui[class*="vertically divided"].grid > .column:not(.row), +.ui[class*="vertically divided"].grid > .row > .column { + margin-top: (@rowSpacing / 2); + margin-bottom: (@rowSpacing / 2); + padding-top: 0rem; + padding-bottom: 0rem; +} +.ui[class*="vertically divided"].grid > .row { + margin-top: 0em; + margin-bottom: 0em; +} + + + +/* No divider on first column on row */ +.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: none; +} + +/* No space on top of first row */ +.ui[class*="vertically divided"].grid > .row:first-child > .column { + margin-top: 0em; +} + + +/* Divided Row */ +.ui.grid > .divided.row > .column { + box-shadow: @dividedBorder; +} +.ui.grid > .divided.row > .column:first-child { + box-shadow: none; +} + +/* Vertically Divided */ +.ui[class*="vertically divided"].grid > .row { + position: relative; +} +.ui[class*="vertically divided"].grid > .row:before { + position: absolute; + content: ""; + top: 0em; + left: 0px; + + width: ~"calc(100% - "@gutterWidth~")"; + height: 1px; + + margin: 0% (@gutterWidth / 2); + box-shadow: @verticallyDividedBorder; +} + +/* Padded Horizontally Divided */ +[class*="horizontally padded"].ui.divided.grid, +.ui.padded.divided.grid:not(.vertically):not(.horizontally) { + width: 100%; +} + +/* First Row Vertically Divided */ +.ui[class*="vertically divided"].grid > .row:first-child:before { + box-shadow: none; +} + +/* Inverted Divided */ +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { + box-shadow: @dividedInvertedBorder; +} +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: none; +} +.ui.inverted[class*="vertically divided"].grid > .row:before { + box-shadow: @verticallyDividedInvertedBorder; +} + +/* Relaxed */ +.ui.relaxed[class*="vertically divided"].grid > .row:before { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); + width: ~"calc(100% - "@relaxedGutterWidth~")"; +} +.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { + margin-left: @veryRelaxedGutterWidth; + margin-right: @veryRelaxedGutterWidth; + width: ~"calc(100% - "@veryRelaxedGutterWidth~")"; +} + +/*---------------------- + Celled +-----------------------*/ + +.ui.celled.grid { + width: 100%; + margin: @celledMargin; + box-shadow: @celledGridDivider; +} + +.ui.celled.grid > .row { + width: 100% !important; + margin: 0em; + padding: 0em; + box-shadow: @celledRowDivider; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + box-shadow: @celledColumnDivider; +} + +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + box-shadow: none; +} + +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + padding: @celledPadding; +} +.ui.relaxed.celled.grid > .column:not(.row), +.ui.relaxed.celled.grid > .row > .column { + padding: @celledRelaxedPadding; +} +.ui[class*="very relaxed"].celled.grid > .column:not(.row), +.ui[class*="very relaxed"].celled.grid > .row > .column { + padding: @celledVeryRelaxedPadding; +} + +/* Internally Celled */ +.ui[class*="internally celled"].grid { + box-shadow: none; + margin: 0em; +} +.ui[class*="internally celled"].grid > .row:first-child { + box-shadow: none; +} +.ui[class*="internally celled"].grid > .row > .column:first-child { + box-shadow: none; +} + +/*---------------------- + Vertically Aligned +-----------------------*/ + +/* Top Aligned */ +.ui[class*="top aligned"].grid > .column:not(.row), +.ui[class*="top aligned"].grid > .row > .column, +.ui.grid > [class*="top aligned"].row > .column, +.ui.grid > [class*="top aligned"].column:not(.row), +.ui.grid > .row > [class*="top aligned"].column { + flex-direction: column; + vertical-align: top; + align-self: flex-start !important; +} + +/* Middle Aligned */ +.ui[class*="middle aligned"].grid > .column:not(.row), +.ui[class*="middle aligned"].grid > .row > .column, +.ui.grid > [class*="middle aligned"].row > .column, +.ui.grid > [class*="middle aligned"].column:not(.row), +.ui.grid > .row > [class*="middle aligned"].column { + flex-direction: column; + vertical-align: middle; + align-self: center !important; +} + +/* Bottom Aligned */ +.ui[class*="bottom aligned"].grid > .column:not(.row), +.ui[class*="bottom aligned"].grid > .row > .column, +.ui.grid > [class*="bottom aligned"].row > .column, +.ui.grid > [class*="bottom aligned"].column:not(.row), +.ui.grid > .row > [class*="bottom aligned"].column { + flex-direction: column; + vertical-align: bottom; + align-self: flex-end !important; +} + +/* Stretched */ +.ui.stretched.grid > .row > .column, +.ui.stretched.grid > .column, +.ui.grid > .stretched.row > .column, +.ui.grid > .stretched.column:not(.row), +.ui.grid > .row > .stretched.column { + display: inline-flex !important; + align-self: stretch; + flex-direction: column; +} + +.ui.stretched.grid > .row > .column > *, +.ui.stretched.grid > .column > *, +.ui.grid > .stretched.row > .column > *, +.ui.grid > .stretched.column:not(.row) > *, +.ui.grid > .row > .stretched.column > * { + flex-grow: 1; +} + +/*---------------------- + Horizontally Centered +-----------------------*/ + +/* Left Aligned */ +.ui[class*="left aligned"].grid > .column, +.ui[class*="left aligned"].grid > .row > .column, +.ui.grid > [class*="left aligned"].row > .column, +.ui.grid > [class*="left aligned"].column.column, +.ui.grid > .row > [class*="left aligned"].column.column { + text-align: left; + align-self: inherit; +} + +/* Center Aligned */ +.ui[class*="center aligned"].grid > .column, +.ui[class*="center aligned"].grid > .row > .column, +.ui.grid > [class*="center aligned"].row > .column, +.ui.grid > [class*="center aligned"].column.column, +.ui.grid > .row > [class*="center aligned"].column.column { + text-align: center; + align-self: inherit; +} +.ui[class*="center aligned"].grid { + justify-content: center; +} + +/* Right Aligned */ +.ui[class*="right aligned"].grid > .column, +.ui[class*="right aligned"].grid > .row > .column, +.ui.grid > [class*="right aligned"].row > .column, +.ui.grid > [class*="right aligned"].column.column, +.ui.grid > .row > [class*="right aligned"].column.column { + text-align: right; + align-self: inherit; +} + +/* Justified */ +.ui.justified.grid > .column, +.ui.justified.grid > .row > .column, +.ui.grid > .justified.row > .column, +.ui.grid > .justified.column.column, +.ui.grid > .row > .justified.column.column { + text-align: justify; + hyphens: auto; +} + +/*---------------------- + Colored +-----------------------*/ + +.ui.grid > .row > .red.column, +.ui.grid > .row > .orange.column, +.ui.grid > .row > .yellow.column, +.ui.grid > .row > .olive.column, +.ui.grid > .row > .green.column, +.ui.grid > .row > .teal.column, +.ui.grid > .row > .blue.column, +.ui.grid > .row > .violet.column, +.ui.grid > .row > .purple.column, +.ui.grid > .row > .pink.column, +.ui.grid > .row > .brown.column, +.ui.grid > .row > .grey.column, +.ui.grid > .row > .black.column { + margin-top: -(@rowSpacing / 2); + margin-bottom: -(@rowSpacing / 2); + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} + +/* Red */ +.ui.grid > .red.row, +.ui.grid > .red.column, +.ui.grid > .row > .red.column { + background-color: @red !important; + color: @white; +} +/* Orange */ +.ui.grid > .orange.row, +.ui.grid > .orange.column, +.ui.grid > .row > .orange.column { + background-color: @orange !important; + color: @white; +} +/* Yellow */ +.ui.grid > .yellow.row, +.ui.grid > .yellow.column, +.ui.grid > .row > .yellow.column { + background-color: @yellow !important; + color: @white; +} +/* Olive */ +.ui.grid > .olive.row, +.ui.grid > .olive.column, +.ui.grid > .row > .olive.column { + background-color: @olive !important; + color: @white; +} +/* Green */ +.ui.grid > .green.row, +.ui.grid > .green.column, +.ui.grid > .row > .green.column { + background-color: @green !important; + color: @white; +} +/* Teal */ +.ui.grid > .teal.row, +.ui.grid > .teal.column, +.ui.grid > .row > .teal.column { + background-color: @teal !important; + color: @white; +} +/* Blue */ +.ui.grid > .blue.row, +.ui.grid > .blue.column, +.ui.grid > .row > .blue.column { + background-color: @blue !important; + color: @white; +} +/* Violet */ +.ui.grid > .violet.row, +.ui.grid > .violet.column, +.ui.grid > .row > .violet.column { + background-color: @violet !important; + color: @white; +} +/* Purple */ +.ui.grid > .purple.row, +.ui.grid > .purple.column, +.ui.grid > .row > .purple.column { + background-color: @purple !important; + color: @white; +} +/* Pink */ +.ui.grid > .pink.row, +.ui.grid > .pink.column, +.ui.grid > .row > .pink.column { + background-color: @pink !important; + color: @white; +} +/* Brown */ +.ui.grid > .brown.row, +.ui.grid > .brown.column, +.ui.grid > .row > .brown.column { + background-color: @brown !important; + color: @white; +} +/* Grey */ +.ui.grid > .grey.row, +.ui.grid > .grey.column, +.ui.grid > .row > .grey.column { + background-color: @grey !important; + color: @white; +} +/* Black */ +.ui.grid > .black.row, +.ui.grid > .black.column, +.ui.grid > .row > .black.column { + background-color: @black !important; + color: @white; +} + + +/*---------------------- + Equal Width +-----------------------*/ + +.ui[class*="equal width"].grid > .column:not(.row), +.ui[class*="equal width"].grid > .row > .column, +.ui.grid > [class*="equal width"].row > .column { + display: inline-block; + flex-grow: 1; +} +.ui[class*="equal width"].grid > .wide.column, +.ui[class*="equal width"].grid > .row > .wide.column, +.ui.grid > [class*="equal width"].row > .wide.column { + flex-grow: 0; +} + + +/*---------------------- + Reverse +-----------------------*/ + + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui[class*="mobile reversed"].grid, + .ui[class*="mobile reversed"].grid > .row, + .ui.grid > [class*="mobile reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="mobile vertically reversed"].grid, + .ui.stackable[class*="mobile reversed"] { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui[class*="tablet reversed"].grid, + .ui[class*="tablet reversed"].grid > .row, + .ui.grid > [class*="tablet reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="tablet vertically reversed"].grid { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + +/* Computer */ +@media only screen and (min-width: @computerBreakpoint) { + .ui[class*="computer reversed"].grid, + .ui[class*="computer reversed"].grid > .row, + .ui.grid > [class*="computer reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="computer vertically reversed"].grid { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + + +/*------------------- + Doubling +--------------------*/ + +/* Tablet Only */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.doubling.grid { + width: auto; + } + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + display: inline-block !important; + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + box-shadow: none !important; + margin: 0em; + } + .ui[class*="two column"].doubling.grid > .row > .column, + .ui[class*="two column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling.row.row > .column { + width: @oneColumn !important; + } + .ui[class*="three column"].doubling.grid > .row > .column, + .ui[class*="three column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling.row.row > .column { + width: @twoColumn !important; + } + .ui[class*="four column"].doubling.grid > .row > .column, + .ui[class*="four column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling.row.row > .column { + width: @twoColumn !important; + } + .ui[class*="five column"].doubling.grid > .row > .column, + .ui[class*="five column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="six column"].doubling.grid > .row > .column, + .ui[class*="six column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="seven column"].doubling.grid > .row > .column, + .ui[class*="seven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="eight column"].doubling.grid > .row > .column, + .ui[class*="eight column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling.row.row > .column { + width: @fourColumn !important; + } + .ui[class*="nine column"].doubling.grid > .row > .column, + .ui[class*="nine column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling.row.row > .column { + width: @fourColumn !important; + } + .ui[class*="ten column"].doubling.grid > .row > .column, + .ui[class*="ten column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling.row.row > .column { + width: @fiveColumn !important; + } + .ui[class*="eleven column"].doubling.grid > .row > .column, + .ui[class*="eleven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling.row.row > .column { + width: @fiveColumn !important; + } + .ui[class*="twelve column"].doubling.grid > .row > .column, + .ui[class*="twelve column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling.row.row > .column { + width: @sixColumn !important; + } + .ui[class*="thirteen column"].doubling.grid > .row > .column, + .ui[class*="thirteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling.row.row > .column { + width: @sixColumn !important; + } + .ui[class*="fourteen column"].doubling.grid > .row > .column, + .ui[class*="fourteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling.row.row > .column { + width: @sevenColumn !important; + } + .ui[class*="fifteen column"].doubling.grid > .row > .column, + .ui[class*="fifteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling.row.row > .column { + width: @sevenColumn !important; + } + .ui[class*="sixteen column"].doubling.grid > .row > .column, + .ui[class*="sixteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling.row.row > .column { + width: @eightColumn !important; + } +} + +/* Mobile Only */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + margin: 0em !important; + box-shadow: none !important; + } + .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { + width: @oneColumn !important; + } + .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } +} + +/*------------------- + Stackable +--------------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.grid { + width: auto; + margin-left: 0em !important; + margin-right: 0em !important; + } + .ui.stackable.grid > .row > .wide.column, + .ui.stackable.grid > .wide.column, + .ui.stackable.grid > .column.grid > .column, + .ui.stackable.grid > .column.row > .column, + .ui.stackable.grid > .row > .column, + .ui.stackable.grid > .column:not(.row), + .ui.grid > .stackable.stackable.row > .column { + width: 100% !important; + margin: 0em 0em !important; + box-shadow: none !important; + padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important; + } + .ui.stackable.grid:not(.vertically) > .row { + margin: 0em; + padding: 0em; + } + + /* Coupling */ + .ui.container > .ui.stackable.grid > .column, + .ui.container > .ui.stackable.grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } + + /* Don't pad inside segment or nested grid */ + .ui.grid .ui.stackable.grid, + .ui.segment:not(.vertical) .ui.stackable.page.grid { + margin-left: -(@stackableGutter / 2) !important; + margin-right: -(@stackableGutter / 2) !important; + } + + /* Divided Stackable */ + .ui.stackable.divided.grid > .row:first-child > .column:first-child, + .ui.stackable.celled.grid > .row:first-child > .column:first-child, + .ui.stackable.divided.grid > .column:not(.row):first-child, + .ui.stackable.celled.grid > .column:not(.row):first-child { + border-top: none !important; + } + .ui.inverted.stackable.celled.grid > .column:not(.row), + .ui.inverted.stackable.divided.grid > .column:not(.row), + .ui.inverted.stackable.celled.grid > .row > .column, + .ui.inverted.stackable.divided.grid > .row > .column { + border-top: @stackableInvertedMobileBorder; + } + + .ui.stackable.celled.grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.celled.grid > .row > .column, + .ui.stackable.divided:not(.vertically).grid > .row > .column { + border-top: @stackableMobileBorder; + box-shadow: none !important; + padding-top: @stackableRowSpacing !important; + padding-bottom: @stackableRowSpacing !important; + } + + .ui.stackable.celled.grid > .row { + box-shadow: none !important; + } + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } + +} + +/*---------------------- + Only (Device) +-----------------------*/ + + +/* These include arbitrary class repetitions for forced specificity */ + +/* Mobile Only Hide */ +@media only screen and (max-width: @largestMobileScreen) { + .ui[class*="tablet only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} +/* Tablet Only Hide */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui[class*="mobile only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Computer Only Hide */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Large Screen Only Hide */ +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Widescreen Only Hide */ +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/collections/menu.less b/src/semantic/src/definitions/collections/menu.less new file mode 100755 index 0000000..3285b97 --- /dev/null +++ b/src/semantic/src/definitions/collections/menu.less @@ -0,0 +1,1965 @@ +/* + * # Semantic - Menu + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributor + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'menu'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +/*-------------- + Menu +---------------*/ + +.ui.menu { + display: flex; + margin: @margin; + font-family: @fontFamily; + background: @background; + font-weight: @fontWeight; + border: @border; + box-shadow: @boxShadow; + border-radius: @borderRadius; + min-height: @minHeight; +} + +.ui.menu:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} + +.ui.menu:first-child { + margin-top: 0rem; +} +.ui.menu:last-child { + margin-bottom: 0rem; +} + + +/*-------------- + Sub-Menu +---------------*/ + +.ui.menu .menu { + margin: 0em; +} + +.ui.menu:not(.vertical) > .menu { + display: flex; +} + +/*-------------- + Item +---------------*/ + +.ui.menu:not(.vertical) .item { + display: flex; + align-items: center; +} + +.ui.menu .item { + position: relative; + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-tap-highlight-color: transparent; + flex: 0 0 auto; + user-select: none; + + background: @itemBackground; + padding: @itemVerticalPadding @itemHorizontalPadding; + text-transform: @itemTextTransform; + color: @itemTextColor; + font-weight: @itemFontWeight; + transition: @itemTransition; +} + +.ui.menu > .item:first-child { + border-radius: @borderRadius 0px 0px @borderRadius; +} + +/* Border */ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0%; + right: 0px; + height: 100%; + + width: @dividerSize; + background: @dividerBackground; +} + +/*-------------- + Text Content +---------------*/ + +.ui.menu .text.item > *, +.ui.menu .item > a:not(.ui), +.ui.menu .item > p:only-child { + user-select: text; + line-height: @textLineHeight; +} +.ui.menu .item > p:first-child { + margin-top: 0; +} +.ui.menu .item > p:last-child { + margin-bottom: 0; +} + +/*-------------- + Icons +---------------*/ + +.ui.menu .item > i.icon { + opacity: @iconOpacity; + float: @iconFloat; + margin: @iconMargin; +} + +/*-------------- + Button +---------------*/ + +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: @buttonOffset; + margin: @buttonMargin; + padding-bottom: @buttonVerticalPadding; + padding-top: @buttonVerticalPadding; + font-size: @buttonSize; +} + +/*---------------- + Grid / Container +-----------------*/ + +.ui.menu > .grid, +.ui.menu > .container { + display: flex; + align-items: inherit; + flex-direction: inherit; +} + +/*-------------- + Inputs +---------------*/ + +.ui.menu .item > .input { + width: 100%; +} +.ui.menu:not(.vertical) .item > .input { + position: relative; + top: @inputOffset; + margin: @inputVerticalMargin 0em; +} +.ui.menu .item > .input input { + font-size: @inputSize; + padding-top: @inputVerticalPadding; + padding-bottom: @inputVerticalPadding; +} + + +/*-------------- + Header +---------------*/ + +.ui.menu .header.item, +.ui.vertical.menu .header.item { + margin: 0em; + background: @headerBackground; + text-transform: @headerTextTransform; + font-weight: @headerWeight; +} + +.ui.vertical.menu .item > .header:not(.ui) { + margin: @verticalHeaderMargin; + font-size: @verticalHeaderFontSize; + font-weight: @verticalHeaderFontWeight; +} + +/*-------------- + Dropdowns +---------------*/ + + +/* Dropdown Icon */ +.ui.menu .item > i.dropdown.icon { + padding: 0em; + float: @dropdownIconFloat; + margin: 0em 0em 0em @dropdownIconDistance; +} + +/* Menu */ +.ui.menu .dropdown.item .menu { + left: 0px; + min-width: ~"calc(100% - 1px)"; + border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius; + background: @dropdownBackground; + margin: @dropdownMenuDistance 0px 0px; + box-shadow: @dropdownMenuBoxShadow; + flex-direction: column !important; +} + + +/* Menu Items */ +.ui.menu .ui.dropdown .menu > .item { + margin: 0; + text-align: left; + font-size: @dropdownItemFontSize !important; + padding: @dropdownItemPadding !important; + background: @dropdownItemBackground !important; + color: @dropdownItemColor !important; + text-transform: @dropdownItemTextTransform !important; + font-weight: @dropdownItemFontWeight !important; + box-shadow: @dropdownItemBoxShadow !important; + transition: @dropdownItemTransition !important; +} +.ui.menu .ui.dropdown .menu > .item:hover { + background: @dropdownHoveredItemBackground !important; + color: @dropdownHoveredItemColor !important; +} +.ui.menu .ui.dropdown .menu > .selected.item { + background: @dropdownSelectedItemBackground !important; + color: @dropdownSelectedItemColor !important; +} +.ui.menu .ui.dropdown .menu > .active.item { + background: @dropdownActiveItemBackground !important; + font-weight: @dropdownActiveItemFontWeight !important; + color: @dropdownActiveItemColor !important; +} + +.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { + display: block; +} +.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { + display: inline-block; + font-size: @dropdownItemIconFontSize !important; + float: @dropdownItemIconFloat; + margin: @dropdownItemIconMargin; +} + + +/* Secondary */ +.ui.secondary.menu .dropdown.item > .menu, +.ui.text.menu .dropdown.item > .menu { + border-radius: @dropdownMenuBorderRadius; + margin-top: @secondaryDropdownMenuDistance; +} + +/* Pointing */ +.ui.menu .pointing.dropdown.item .menu { + margin-top: @pointingDropdownMenuDistance; +} + +/* Inverted */ +.ui.inverted.menu .search.dropdown.item > .search, +.ui.inverted.menu .search.dropdown.item > .text { + color: @invertedSelectionDropdownColor; +} + +/* Vertical */ +.ui.vertical.menu .dropdown.item > .icon { + float: right; + content: "\f0da"; + margin-left: 1em; +} +.ui.vertical.menu .dropdown.item .menu { + left: 100%; + min-width: 0; + margin: 0em 0em 0em @dropdownMenuDistance; + box-shadow: @dropdownVerticalMenuBoxShadow; + border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius; +} +.ui.vertical.menu .dropdown.item.upward .menu { + bottom: 0; +} +.ui.vertical.menu .dropdown.item:not(.upward) .menu { + top: 0; +} +.ui.vertical.menu .active.dropdown.item { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.active.item { + box-shadow: none; +} + +/* Evenly Divided */ +.ui.item.menu .dropdown .menu .item { + width: 100%; +} + +/*-------------- + Labels +---------------*/ + +.ui.menu .item > .label { + background: @labelBackground; + color: @labelTextColor; + margin-left: @labelTextMargin; + padding: @labelVerticalPadding @labelHorizontalPadding; +} +.ui.vertical.menu .item > .label { + background: @labelBackground; + color: @labelTextColor; + margin-top: @labelOffset; + margin-bottom: @labelOffset; + padding: @labelVerticalPadding @labelHorizontalPadding; +} +.ui.menu .item > .floating.label { + padding: @labelVerticalPadding @labelHorizontalPadding; +} + +/*-------------- + Images +---------------*/ + +.ui.menu .item > img:not(.ui) { + display: inline-block; + vertical-align: middle; + margin: @imageMargin; + width: @imageWidth; +} +.ui.vertical.menu .item > img:not(.ui):only-child { + display: block; + max-width: 100%; + width: @verticalImageWidth; +} + +/******************************* + Coupling +*******************************/ + +/*-------------- + Sidebar +---------------*/ + +/* Show vertical dividers below last */ + +.ui.vertical.sidebar.menu > .item:first-child:before { + display: block !important; +} +.ui.vertical.sidebar.menu > .item::before { + top: auto; + bottom: 0px; +} + +/*-------------- + Container +---------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.menu > .ui.container { + width: 100% !important; + margin-left: 0em !important; + margin-right: 0em !important; + } +} +@media only screen and (min-width: @tabletBreakpoint) { + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { + border-left: @dividerSize solid @dividerBackground; + } +} + + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + + +.ui.link.menu .item:hover, +.ui.menu .dropdown.item:hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover { + cursor: pointer; + background: @hoverItemBackground; + color: @hoverItemTextColor; +} + + +/*-------------- + Pressed +---------------*/ + +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active { + background: @pressedItemBackground; + color: @pressedItemTextColor; +} + + +/*-------------- + Active +---------------*/ + +.ui.menu .active.item { + background: @activeItemBackground; + color: @activeItemTextColor; + font-weight: @activeItemFontWeight; + box-shadow: @activeItemBoxShadow; +} +.ui.menu .active.item > i.icon { + opacity: @activeIconOpacity; +} + +/*-------------- + Active Hover +---------------*/ + +.ui.menu .active.item:hover, +.ui.vertical.menu .active.item:hover { + background-color: @activeHoverItemBackground; + color: @activeHoverItemColor; +} + + +/*-------------- + Disabled +---------------*/ + +.ui.menu .item.disabled, +.ui.menu .item.disabled:hover { + cursor: default; + background-color: transparent !important; + color: @disabledTextColor; +} + + +/******************************* + Types +*******************************/ + +/*------------------ +Floated Menu / Item +-------------------*/ + +/* Left Floated */ +.ui.menu:not(.vertical) .left.item, +.ui.menu:not(.vertical) .left.menu { + display: flex; + margin-right: auto !important; +} +/* Right Floated */ +.ui.menu:not(.vertical) .right.item, +.ui.menu:not(.vertical) .right.menu { + display: flex; + margin-left: auto !important; +} + +/* Swapped Borders */ +.ui.menu .right.item::before, +.ui.menu .right.menu > .item::before { + right: auto; + left: 0; +} + + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.menu { + display: block; + flex-direction: column; + background: @verticalBackground; + box-shadow: @verticalBoxShadow; +} + +/*--- Item ---*/ +.ui.vertical.menu .item { + display: block; + background: @verticalItemBackground; + border-top: none; + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: @borderRadius @borderRadius 0px 0px; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px @borderRadius @borderRadius; +} + +/*--- Label ---*/ +.ui.vertical.menu .item > .label { + float: right; + text-align: center; +} + +/*--- Icon ---*/ +.ui.vertical.menu .item > i.icon { + width: @iconWidth; + float: @verticalIconFloat; + margin: @verticalIconMargin; +} +.ui.vertical.menu .item > .label + i.icon { + float: @labelAndIconFloat; + margin: @labelAndIconMargin; +} + + +/*--- Border ---*/ +.ui.vertical.menu .item:before { + position: absolute; + content: ''; + top: 0%; + left: 0px; + width: 100%; + height: @dividerSize; + background: @verticalDividerBackground; +} + +.ui.vertical.menu .item:first-child:before { + display: none !important; +} + + +/*--- Sub Menu ---*/ +.ui.vertical.menu .item > .menu { + margin: @subMenuMargin; +} +.ui.vertical.menu .menu .item { + background: none; + padding: @subMenuVerticalPadding @subMenuHorizontalPadding; + font-size: @subMenuFontSize; + color: @subMenuTextColor; +} +.ui.vertical.menu .item .menu a.item:hover, +.ui.vertical.menu .item .menu .link.item:hover { + color: @darkTextColor; +} +.ui.vertical.menu .menu .item:before { + display: none; +} + +/* Vertical Active */ +.ui.vertical.menu .active.item { + background: @activeItemBackground; + border-radius: 0em; + box-shadow: @verticalActiveBoxShadow; +} +.ui.vertical.menu > .active.item:first-child { + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui.vertical.menu > .active.item:only-child { + border-radius: @borderRadius; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; +} +.ui.vertical.menu .item .menu .active.item { + background-color: @subMenuActiveBackground; + font-weight: @subMenuActiveFontWeight; + color: @subMenuActiveTextColor; +} + + +/*-------------- + Tabular +---------------*/ + +.ui.tabular.menu { + border-radius: 0em; + box-shadow: none !important; + border: none; + background: @tabularBackground; + border-bottom: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.tabular.fluid.menu { + width: @tabularFluidWidth !important; +} +.ui.tabular.menu .item { + background: transparent; + border-bottom: none; + + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-top: @tabularOppositeBorderWidth solid transparent; + padding: @tabularVerticalPadding @tabularHorizontalPadding; + color: @tabularTextColor; +} +.ui.tabular.menu .item:before { + display: none; +} + +/* Hover */ +.ui.tabular.menu .item:hover { + background-color: transparent; + color: @tabularHoveredTextColor; +} + +/* Active */ +.ui.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-top-width: @tabularBorderWidth; + border-color: @tabularBorderColor; + font-weight: @tabularActiveWeight; + margin-bottom: -@tabularBorderWidth; + box-shadow: @tabularActiveBoxShadow; + border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important; +} + +/* Coupling with segment for attachment */ +.ui.tabular.menu + .attached:not(.top).segment, +.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { + border-top: none; + margin-left: 0px; + margin-top: 0px; + margin-right: 0px; + width: 100%; +} +.top.attached.segment + .ui.bottom.tabular.menu { + position: relative; + width: @tabularFluidWidth; + left: -@tabularFluidOffset; +} + +/* Bottom Vertical Tabular */ +.ui.bottom.tabular.menu { + background: @tabularBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-top: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.bottom.tabular.menu .item { + background: none; + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: none; +} +.ui.bottom.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: -@tabularBorderWidth 0px 0px 0px; + border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important; +} + +/* Vertical Tabular (Left) */ +.ui.vertical.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.vertical.tabular.menu .item { + background: none; + border-left: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: @tabularBorderWidth solid transparent; + border-right: none; +} +.ui.vertical.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: 0px -@tabularBorderWidth 0px 0px; + border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important; +} + +/* Vertical Right Tabular */ +.ui.vertical.right.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: none; + border-left: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.vertical.right.tabular.menu .item { + background: none; + border-right: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: @tabularBorderWidth solid transparent; + border-left: none; +} +.ui.vertical.right.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: 0px 0px 0px -@tabularBorderWidth; + border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important; +} + +/* Dropdown */ +.ui.tabular.menu .active.dropdown.item { + margin-bottom: 0px; + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-top: @tabularOppositeBorderWidth solid transparent; + border-bottom: none; +} + + + +/*-------------- + Pagination +---------------*/ + +.ui.pagination.menu { + margin: 0em; + display: inline-flex; + vertical-align: middle; +} +.ui.pagination.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.compact.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.pagination.menu .item:last-child:before { + display: none; +} + +.ui.pagination.menu .item { + min-width: @paginationMinWidth; + text-align: center; +} +.ui.pagination.menu .icon.item i.icon { + vertical-align: top; +} + +/* Active */ +.ui.pagination.menu .active.item { + border-top: none; + padding-top: @itemVerticalPadding; + background-color: @paginationActiveBackground; + color: @paginationActiveTextColor; + box-shadow: none; +} + +/*-------------- + Secondary +---------------*/ + +.ui.secondary.menu { + background: @secondaryBackground; + margin-left: -@secondaryItemSpacing; + margin-right: -@secondaryItemSpacing; + border-radius: 0em; + border: none; + box-shadow: none; +} + +/* Item */ +.ui.secondary.menu .item { + align-self: center; + box-shadow: none; + border: none; + padding: @secondaryItemPadding; + margin: @secondaryItemMargin; + background: @secondaryItemBackground; + transition: @secondaryItemTransition; + border-radius: @secondaryItemBorderRadius; +} + +/* No Divider */ +.ui.secondary.menu .item:before { + display: none !important; +} + +/* Header */ +.ui.secondary.menu .header.item { + border-radius: 0em; + border-right: @secondaryHeaderBorder; + background: @secondaryHeaderBackground; +} + +/* Image */ +.ui.secondary.menu .item > img:not(.ui) { + margin: 0em; +} + +/* Hover */ +.ui.secondary.menu .dropdown.item:hover, +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + background: @secondaryHoverItemBackground; + color: @secondaryHoverItemColor; +} + +/* Active */ +.ui.secondary.menu .active.item { + box-shadow: none; + background: @secondaryActiveItemBackground; + color: @secondaryActiveItemColor; + border-radius: @secondaryItemBorderRadius; +} + +/* Active Hover */ +.ui.secondary.menu .active.item:hover { + box-shadow: none; + background: @secondaryActiveHoverItemBackground; + color: @secondaryActiveHoverItemColor; +} + + +/* Inverted */ +.ui.secondary.inverted.menu .link.item, +.ui.secondary.inverted.menu a.item { + color: @secondaryInvertedColor !important; +} +.ui.secondary.inverted.menu .dropdown.item:hover, +.ui.secondary.inverted.menu .link.item:hover, +.ui.secondary.inverted.menu a.item:hover { + background: @secondaryInvertedHoverBackground; + color: @secondaryInvertedHoverColor !important; +} +.ui.secondary.inverted.menu .active.item { + background: @secondaryInvertedActiveBackground; + color: @secondaryInvertedActiveColor !important; +} + +/* Fix item margins */ +.ui.secondary.item.menu { + margin-left: 0em; + margin-right: 0em; +} +.ui.secondary.item.menu .item:last-child { + margin-right: 0em; +} +.ui.secondary.attached.menu { + box-shadow: none; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu { + margin: @secondaryMenuSubMenuMargin; +} +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { + margin: @secondaryMenuSubMenuItemMargin; + padding: @secondaryMenuSubMenuItemPadding; +} + + +/*--------------------- + Secondary Vertical +-----------------------*/ + +.ui.secondary.vertical.menu > .item { + border: none; + margin: @secondaryVerticalItemMargin; + border-radius: @secondaryVerticalItemBorderRadius !important; +} +.ui.secondary.vertical.menu > .header.item { + border-radius: 0em; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item > .menu .item { + background-color: transparent; +} + +/* Inverted */ +.ui.secondary.inverted.menu { + background-color: transparent; +} + +/*--------------------- + Secondary Pointing +-----------------------*/ + +.ui.secondary.pointing.menu { + margin-left: 0em; + margin-right: 0em; + border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor; +} + +.ui.secondary.pointing.menu .item { + border-bottom-color: transparent; + border-bottom-style: solid; + border-radius: 0em; + align-self: flex-end; + + margin: 0em 0em -@secondaryPointingBorderWidth; + padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; + border-bottom-width: @secondaryPointingBorderWidth; + transition: @secondaryItemTransition; +} + +/* Item Types */ +.ui.secondary.pointing.menu .header.item { + color: @secondaryPointingHeaderColor !important; +} +.ui.secondary.pointing.menu .text.item { + box-shadow: none !important; +} +.ui.secondary.pointing.menu .item:after { + display: none; +} + +/* Hover */ +.ui.secondary.pointing.menu .dropdown.item:hover, +.ui.secondary.pointing.menu .link.item:hover, +.ui.secondary.pointing.menu a.item:hover { + background-color: transparent; + color: @secondaryPointingHoverTextColor; +} + +/* Pressed */ +.ui.secondary.pointing.menu .dropdown.item:active, +.ui.secondary.pointing.menu .link.item:active, +.ui.secondary.pointing.menu a.item:active { + background-color: transparent; + border-color: @secondaryPointingBorderColor; +} + +/* Active */ +.ui.secondary.pointing.menu .active.item { + background-color: transparent; + box-shadow: none; + border-color: @secondaryPointingActiveBorderColor; + font-weight: @secondaryPointingActiveFontWeight; + color: @secondaryPointingActiveTextColor; +} + +/* Active Hover */ +.ui.secondary.pointing.menu .active.item:hover { + border-color: @secondaryPointingActiveHoverBorderColor; + color: @secondaryPointingActiveHoverTextColor; +} + +/* Active Dropdown */ +.ui.secondary.pointing.menu .active.dropdown.item { + border-color: @secondaryPointingActiveDropdownBorderColor; +} + +/* Vertical Pointing */ +.ui.secondary.vertical.pointing.menu { + border-bottom-width: 0px; + border-right-width: @secondaryPointingBorderWidth; + border-right-style: solid; + border-right-color: @secondaryPointingBorderColor; +} +.ui.secondary.vertical.pointing.menu .item { + border-bottom: none; + border-right-style: solid; + border-right-color: transparent; + border-radius: 0em !important; + margin: @secondaryVerticalPointingItemMargin; + border-right-width: @secondaryPointingBorderWidth; +} + +/* Vertical Active */ +.ui.secondary.vertical.pointing.menu .active.item { + border-color: @secondaryPointingActiveBorderColor; +} + +/* Inverted */ +.ui.secondary.inverted.pointing.menu { + border-color: @secondaryPointingInvertedBorderColor; +} + +.ui.secondary.inverted.pointing.menu { + border-width: @secondaryPointingBorderWidth; + border-color: @secondaryPointingBorderColor; +} +.ui.secondary.inverted.pointing.menu .item { + color: @secondaryPointingInvertedItemTextColor; +} +.ui.secondary.inverted.pointing.menu .header.item { + color: @secondaryPointingInvertedItemHeaderColor !important; +} + +/* Hover */ +.ui.secondary.inverted.pointing.menu .link.item:hover, +.ui.secondary.inverted.pointing.menu a.item:hover { + color: @secondaryPointingInvertedItemHoverTextColor; +} + + +/* Active */ +.ui.secondary.inverted.pointing.menu .active.item { + border-color: @secondaryPointingInvertedActiveBorderColor; + color: @secondaryPointingInvertedActiveColor; +} + +/*-------------- + Text Menu +---------------*/ + +.ui.text.menu { + background: none transparent; + border-radius: 0px; + box-shadow: none; + border: none; + + margin: @textMenuMargin; +} +.ui.text.menu .item { + border-radius: 0px; + box-shadow: none; + align-self: center; + margin: @textMenuItemMargin; + padding: @textMenuItemPadding; + font-weight: @textMenuItemFontWeight; + color: @textMenuItemColor; + transition: @textMenuItemTransition; +} + +/* Border */ +.ui.text.menu .item:before, +.ui.text.menu .menu .item:before { + display: none !important; +} + +/* Header */ +.ui.text.menu .header.item { + background-color: transparent; + opacity: 1; + color: @textMenuHeaderColor; + font-size: @textMenuHeaderSize; + text-transform: @textMenuHeaderTextTransform; + font-weight: @textMenuHeaderFontWeight; +} + +/* Image */ +.ui.text.menu .item > img:not(.ui) { + margin: 0em; +} + +/*--- fluid text ---*/ +.ui.text.item.menu .item { + margin: 0em; +} + +/*--- vertical text ---*/ +.ui.vertical.text.menu { + margin: @textVerticalMenuMargin; +} +.ui.vertical.text.menu:first-child { + margin-top: 0rem; +} +.ui.vertical.text.menu:last-child { + margin-bottom: 0rem; +} +.ui.vertical.text.menu .item { + margin: @textVerticalMenuItemMargin; + padding-left: 0em; + padding-right: 0em; +} +.ui.vertical.text.menu .item > i.icon { + float: @textVerticalMenuIconFloat; + margin: @iconMargin; +} +.ui.vertical.text.menu .header.item { + margin: @textVerticalMenuHeaderMargin; +} + +/* Vertical Sub Menu */ +.ui.vertical.text.menu .item:not(.dropdown) > .menu { + margin: @textMenuSubMenuMargin; +} +.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { + margin: @textMenuSubMenuItemMargin; + padding: @textMenuSubMenuItemPadding; +} + +/*--- hover ---*/ +.ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; +} + +/*--- active ---*/ +.ui.text.menu .active.item { + background-color: transparent; + border: none; + box-shadow: none; + font-weight: @textMenuActiveItemFontWeight; + color: @textMenuActiveItemColor; +} + +/*--- active hover ---*/ +.ui.text.menu .active.item:hover { + background-color: transparent; +} + +/* Disable Bariations */ +.ui.text.pointing.menu .active.item:after { + box-shadow: none; +} +.ui.text.attached.menu { + box-shadow: none; +} + +/* Inverted */ +.ui.inverted.text.menu, +.ui.inverted.text.menu .item, +.ui.inverted.text.menu .item:hover, +.ui.inverted.text.menu .active.item { + background-color: transparent !important; +} + +/* Fluid */ +.ui.fluid.text.menu { + margin-left: 0em; + margin-right: 0em; +} + +/*-------------- + Icon Only +---------------*/ + +/* Vertical Menu */ +.ui.vertical.icon.menu { + display: inline-block; + width: auto; +} + +/* Item */ +.ui.icon.menu .item { + height: auto; + text-align: @iconMenuTextAlign; + color: @iconMenuItemColor; +} + +/* Icon */ +.ui.icon.menu .item > .icon:not(.dropdown) { + margin: 0; + opacity: 1; +} + +/* Icon Gylph */ +.ui.icon.menu .icon:before { + opacity: 1; +} + +/* (x) Item Icon */ +.ui.menu .icon.item > .icon { + width: auto; + margin: 0em auto; +} + +/* Vertical Icon */ +.ui.vertical.icon.menu .item > .icon:not(.dropdown) { + display: block; + opacity: 1; + margin: 0em auto; + float: none; +} + +/* Inverted */ +.ui.inverted.icon.menu .item { + color: @iconMenuInvertedItemColor; +} + +/*-------------- + Labeled Icon +---------------*/ + +/* Menu */ +.ui.labeled.icon.menu { + text-align: center; +} + +/* Item */ +.ui.labeled.icon.menu .item { + min-width: @labeledIconMinWidth; + flex-direction: column; +} + +/* Icon */ +.ui.labeled.icon.menu .item > .icon:not(.dropdown) { + height: 1em; + display: block; + font-size: @labeledIconSize !important; + margin: 0em auto @labeledIconTextMargin !important; +} + +/* Fluid */ +.ui.fluid.labeled.icon.menu > .item { + min-width: 0em; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.menu { + flex-direction: column; + } + .ui.stackable.menu .item { + width: 100% !important; + } + .ui.stackable.menu .item:before { + position: absolute; + content: ''; + top: auto; + bottom: 0px; + left: 0px; + width: 100%; + height: @dividerSize; + background: @verticalDividerBackground; + } + + .ui.stackable.menu .left.menu, + .ui.stackable.menu .left.item { + margin-right: 0 !important; + } + .ui.stackable.menu .right.menu, + .ui.stackable.menu .right.item { + margin-left: 0 !important; + } +} + +/*-------------- + Colors +---------------*/ + +/*--- Standard Colors ---*/ +.ui.menu .red.active.item, +.ui.red.menu .active.item { + border-color: @red !important; + color: @red !important; +} +.ui.menu .orange.active.item, +.ui.orange.menu .active.item { + border-color: @orange !important; + color: @orange !important; +} +.ui.menu .yellow.active.item, +.ui.yellow.menu .active.item { + border-color: @yellow !important; + color: @yellow !important; +} +.ui.menu .olive.active.item, +.ui.olive.menu .active.item { + border-color: @olive !important; + color: @olive !important; +} +.ui.menu .green.active.item, +.ui.green.menu .active.item { + border-color: @green !important; + color: @green !important; +} +.ui.menu .teal.active.item, +.ui.teal.menu .active.item { + border-color: @teal !important; + color: @teal !important; +} +.ui.menu .blue.active.item, +.ui.blue.menu .active.item { + border-color: @blue !important; + color: @blue !important; +} +.ui.menu .violet.active.item, +.ui.violet.menu .active.item { + border-color: @violet !important; + color: @violet !important; +} +.ui.menu .purple.active.item, +.ui.purple.menu .active.item { + border-color: @purple !important; + color: @purple !important; +} +.ui.menu .pink.active.item, +.ui.pink.menu .active.item { + border-color: @pink !important; + color: @pink !important; +} +.ui.menu .brown.active.item, +.ui.brown.menu .active.item { + border-color: @brown !important; + color: @brown !important; +} +.ui.menu .grey.active.item, +.ui.grey.menu .active.item { + border-color: @grey !important; + color: @grey !important; +} + + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.menu { + border: @invertedBorder; + background: @invertedBackground; + box-shadow: @invertedBoxShadow; +} + +/* Menu Item */ +.ui.inverted.menu .item, +.ui.inverted.menu .item > a:not(.ui) { + background: @invertedItemBackground; + color: @invertedItemTextColor; +} +.ui.inverted.menu .item.menu { + background: @invertedSubMenuBackground; +} + +/*--- Border ---*/ +.ui.inverted.menu .item:before { + background: @invertedDividerBackground; +} +.ui.vertical.inverted.menu .item:before { + background: @invertedVerticalDividerBackground; +} + +/* Sub Menu */ +.ui.vertical.inverted.menu .menu .item, +.ui.vertical.inverted.menu .menu .item a:not(.ui) { + color: @invertedSubMenuColor; +} + +/* Header */ +.ui.inverted.menu .header.item { + margin: 0em; + background: @invertedHeaderBackground; + box-shadow: none; +} + +/* Disabled */ +.ui.inverted.menu .item.disabled, +.ui.inverted.menu .item.disabled:hover { + color: @invertedDisabledTextColor; +} + +/*--- Hover ---*/ +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .dropdown.item:hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover { + background: @invertedHoverBackground; + color: @invertedHoverColor; +} +.ui.vertical.inverted.menu .item .menu a.item:hover, +.ui.vertical.inverted.menu .item .menu .link.item:hover { + background: @invertedSubMenuBackground; + color: @invertedSubMenuHoverColor; +} + +/*--- Pressed ---*/ +.ui.inverted.menu a.item:active, +.ui.inverted.menu .link.item:active{ + background: @invertedMenuPressedBackground; + color: @invertedMenuPressedColor; +} + +/*--- Active ---*/ +.ui.inverted.menu .active.item { + background: @invertedActiveBackground; + color: @invertedActiveColor !important; +} +.ui.inverted.vertical.menu .item .menu .active.item { + background: @invertedSubMenuActiveBackground; + color: @invertedSubMenuActiveColor; +} +.ui.inverted.pointing.menu .active.item:after { + background: @invertedArrowActiveColor !important; + margin: 0em !important; + box-shadow: none !important; + border: none !important; +} + +/*--- Active Hover ---*/ +.ui.inverted.menu .active.item:hover { + background: @invertedActiveHoverBackground; + color: @invertedActiveHoverColor !important; +} +.ui.inverted.pointing.menu .active.item:hover:after { + background: @invertedArrowActiveHoverColor !important; +} + + +/*-------------- + Floated +---------------*/ + +.ui.floated.menu { + float: left; + margin: 0rem @floatedDistance 0rem 0rem; +} +.ui.floated.menu .item:last-child:before { + display: none; +} + +.ui.right.floated.menu { + float: right; + margin: 0rem 0rem 0rem @floatedDistance; +} + + +/*-------------- + Inverted +---------------*/ + +/* Red */ +.ui.inverted.menu .red.active.item, +.ui.inverted.red.menu { + background-color: @red; +} +.ui.inverted.red.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.red.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Orange */ +.ui.inverted.menu .orange.active.item, +.ui.inverted.orange.menu { + background-color: @orange; +} +.ui.inverted.orange.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.orange.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Yellow */ +.ui.inverted.menu .yellow.active.item, +.ui.inverted.yellow.menu { + background-color: @yellow; +} +.ui.inverted.yellow.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.yellow.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Olive */ +.ui.inverted.menu .olive.active.item, +.ui.inverted.olive.menu { + background-color: @olive; +} +.ui.inverted.olive.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.olive.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Green */ +.ui.inverted.menu .green.active.item, +.ui.inverted.green.menu { + background-color: @green; +} +.ui.inverted.green.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.green.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Teal */ +.ui.inverted.menu .teal.active.item, +.ui.inverted.teal.menu { + background-color: @teal; +} +.ui.inverted.teal.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.teal.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Blue */ +.ui.inverted.menu .blue.active.item, +.ui.inverted.blue.menu { + background-color: @blue; +} +.ui.inverted.blue.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.blue.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Violet */ +.ui.inverted.menu .violet.active.item, +.ui.inverted.violet.menu { + background-color: @violet; +} +.ui.inverted.violet.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.violet.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Purple */ +.ui.inverted.menu .purple.active.item, +.ui.inverted.purple.menu { + background-color: @purple; +} +.ui.inverted.purple.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.purple.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Pink */ +.ui.inverted.menu .pink.active.item, +.ui.inverted.pink.menu { + background-color: @pink; +} +.ui.inverted.pink.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.pink.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Brown */ +.ui.inverted.menu .brown.active.item, +.ui.inverted.brown.menu { + background-color: @brown; +} +.ui.inverted.brown.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.brown.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Grey */ +.ui.inverted.menu .grey.active.item, +.ui.inverted.grey.menu { + background-color: @grey; +} +.ui.inverted.grey.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.grey.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.menu .item, +.ui.fitted.menu .item .menu .item, +.ui.menu .fitted.item { + padding: 0em; +} +.ui.horizontally.fitted.menu .item, +.ui.horizontally.fitted.menu .item .menu .item, +.ui.menu .horizontally.fitted.item { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: @itemHorizontalPadding; + padding-right: @itemHorizontalPadding; +} + +/*-------------- + Borderless +---------------*/ + +.ui.borderless.menu .item:before, +.ui.borderless.menu .item .menu .item:before, +.ui.menu .borderless.item:before { + background: none !important; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.menu { + display: inline-flex; + margin: 0em; + vertical-align: middle; +} +.ui.compact.vertical.menu { + display: inline-block; +} +.ui.compact.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.compact.menu .item:last-child:before { + display: none; +} +.ui.compact.vertical.menu { + width: auto !important; +} +.ui.compact.vertical.menu .item:last-child::before { + display: block; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.menu.fluid, +.ui.vertical.menu.fluid { + width: 100% !important; +} + + +/*------------------- + Evenly Sized +--------------------*/ + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0em !important; + padding-right: 0em !important; + margin-left: 0em !important; + margin-right: 0em !important; + text-align: center; + justify-content: center; +} + +.ui.item.menu .item:last-child:before { + display: none; +} + +.ui.menu.two.item .item { + width: 50%; +} +.ui.menu.three.item .item { + width: 33.333%; +} +.ui.menu.four.item .item { + width: 25%; +} +.ui.menu.five.item .item { + width: 20%; +} +.ui.menu.six.item .item { + width: 16.666%; +} +.ui.menu.seven.item .item { + width: 14.285%; +} +.ui.menu.eight.item .item { + width: 12.500%; +} +.ui.menu.nine.item .item { + width: 11.11%; +} +.ui.menu.ten.item .item { + width: 10.0%; +} +.ui.menu.eleven.item .item { + width: 9.09%; +} +.ui.menu.twelve.item .item { + width: 8.333%; +} + +/*-------------- + Fixed +---------------*/ + +.ui.menu.fixed { + position: fixed; + z-index: 101; + margin: 0em; + width: 100%; +} +.ui.menu.fixed, +.ui.menu.fixed .item:first-child, +.ui.menu.fixed .item:last-child { + border-radius: 0px !important; +} + +.ui.fixed.menu, +.ui[class*="top fixed"].menu { + top: 0px; + left: 0px; + right: auto; + bottom: auto; +} +.ui[class*="top fixed"].menu { + border-top: none; + border-left: none; + border-right: none; +} +.ui[class*="right fixed"].menu { + border-top: none; + border-bottom: none; + border-right: none; + top: 0px; + right: 0px; + left: auto; + bottom: auto; + width: auto; + height: 100%; +} +.ui[class*="bottom fixed"].menu { + border-bottom: none; + border-left: none; + border-right: none; + bottom: 0px; + left: 0px; + top: auto; + right: auto; +} +.ui[class*="left fixed"].menu { + border-top: none; + border-bottom: none; + border-left: none; + top: 0px; + left: 0px; + right: auto; + bottom: auto; + width: auto; + height: 100%; +} + +/* Coupling with Grid */ +.ui.fixed.menu + .ui.grid { + padding-top: @fixedPrecedingGridMargin; +} + + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.menu .item:after { + visibility: hidden; + position: absolute; + content: ''; + top: 100%; + left: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + background: none; + + margin: (@arrowBorderWidth / 2) 0em 0em; + width: @arrowSize; + height: @arrowSize; + + border: none; + border-bottom: @arrowBorder; + border-right: @arrowBorder; + + z-index: @arrowZIndex; + transition: @arrowTransition; +} +.ui.vertical.pointing.menu .item:after { + position: absolute; + top: 50%; + right: 0%; + bottom: auto; + left: auto; + + transform: translateX(50%) translateY(-50%) rotate(45deg); + margin: 0em -(@arrowBorderWidth / 2) 0em 0em; + + border: none; + border-top: @arrowBorder; + border-right: @arrowBorder; +} + +/* Active */ +.ui.pointing.menu .active.item:after { + visibility: visible; +} +.ui.pointing.menu .active.dropdown.item:after { + visibility: hidden; +} + +/* Don't double up pointers */ +.ui.pointing.menu .dropdown.active.item:after, +.ui.pointing.menu .active.item .menu .active.item:after { + display: none; +} + +/* Colors */ +.ui.pointing.menu .active.item:hover:after { + background-color: @arrowHoverColor; +} +.ui.pointing.menu .active.item:after { + background-color: @arrowActiveColor; +} +.ui.pointing.menu .active.item:hover:after { + background-color: @arrowActiveHoverColor; +} + +.ui.vertical.pointing.menu .active.item:hover:after { + background-color: @arrowVerticalHoverColor; +} +.ui.vertical.pointing.menu .active.item:after { + background-color: @arrowVerticalActiveColor; +} +.ui.vertical.pointing.menu .menu .active.item:after { + background-color: @arrowVerticalSubMenuColor; +} + + + +/*-------------- + Attached +---------------*/ + +/* Middle */ +.ui.attached.menu { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; +} +.ui.attached + .ui.attached.menu:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].menu { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.menu[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].menu { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].menu:last-child { + margin-bottom: 0em; +} + +/* Attached Menu Item */ +.ui.top.attached.menu > .item:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui.bottom.attached.menu > .item:first-child { + border-radius: 0em 0em 0em @borderRadius; +} + +/* Tabular Attached */ +.ui.attached.menu:not(.tabular) { + border: @attachedBorder; +} +.ui.attached.inverted.menu { + border: none; +} +.ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; +} + +/*-------------- + Sizes +---------------*/ + +/* Mini */ +.ui.mini.menu { + font-size: @mini; +} +.ui.mini.vertical.menu { + width: @miniWidth; +} + +/* Tiny */ +.ui.tiny.menu { + font-size: @tiny; +} +.ui.tiny.vertical.menu { + width: @tinyWidth; +} + +/* Small */ +.ui.small.menu { + font-size: @small; +} +.ui.small.vertical.menu { + width: @smallWidth; +} + +/* Medium */ +.ui.menu { + font-size: @medium; +} +.ui.vertical.menu { + width: @mediumWidth; +} + +/* Large */ +.ui.large.menu { + font-size: @large; +} +.ui.large.vertical.menu { + width: @largeWidth; +} + +/* Huge */ +.ui.huge.menu { + font-size: @huge; +} +.ui.huge.vertical.menu { + width: @hugeWidth; +} + +/* Big */ +.ui.big.menu { + font-size: @big; +} +.ui.big.vertical.menu { + width: @bigWidth; +} + +/* Massive */ +.ui.massive.menu { + font-size: @massive; +} +.ui.massive.vertical.menu { + width: @massiveWidth; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/collections/message.less b/src/semantic/src/definitions/collections/message.less new file mode 100755 index 0000000..7b75feb --- /dev/null +++ b/src/semantic/src/definitions/collections/message.less @@ -0,0 +1,478 @@ +/*! + * # Semantic UI - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'message'; + +@import (multiple) '../../theme.config'; + +/******************************* + Message +*******************************/ + +.ui.message { + position: relative; + min-height: 1em; + margin: @verticalMargin 0em; + background: @background; + padding: @padding; + line-height: @lineHeight; + color: @textColor; + transition: @transition; + border-radius: @borderRadius; + box-shadow: @boxShadow; +} + +.ui.message:first-child { + margin-top: 0em; +} +.ui.message:last-child { + margin-bottom: 0em; +} + + +/*-------------- + Content +---------------*/ + +/* Header */ +.ui.message .header { + display: @headerDisplay; + font-family: @headerFont; + font-weight: @headerFontWeight; + margin: @headerMargin; +} + +/* Default font size */ +.ui.message .header:not(.ui) { + font-size: @headerFontSize; +} + +/* Paragraph */ +.ui.message p { + opacity: @messageTextOpacity; + margin: @messageParagraphMargin 0em; +} +.ui.message p:first-child { + margin-top: 0em; +} +.ui.message p:last-child { + margin-bottom: 0em; +} +.ui.message .header + p { + margin-top: @headerParagraphDistance; +} + +/* List */ +.ui.message .list:not(.ui) { + text-align: left; + padding: 0em; + opacity: @listOpacity; + list-style-position: @listStylePosition; + margin: @listMargin 0em 0em; +} +.ui.message .list:not(.ui):first-child { + margin-top: 0em; +} +.ui.message .list:not(.ui):last-child { + margin-bottom: 0em; +} +.ui.message .list:not(.ui) li { + position: relative; + list-style-type: none; + margin: 0em 0em @listItemMargin @listItemIndent; + padding: 0em; +} +.ui.message .list:not(.ui) li:before { + position: absolute; + content: '•'; + left: -1em; + height: 100%; + vertical-align: baseline; +} +.ui.message .list:not(.ui) li:last-child { + margin-bottom: 0em; +} + + +/* Icon */ +.ui.message > .icon { + margin-right: @iconDistance; +} + +/* Close Icon */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + margin: 0em; + top: @closeTopDistance; + right: @closeRightDistance; + opacity: @closeOpacity; + transition: @closeTransition; +} +.ui.message > .close.icon:hover { + opacity: 1; +} + +/* First / Last Element */ +.ui.message > :first-child { + margin-top: 0em; +} +.ui.message > :last-child { + margin-bottom: 0em; +} + +/******************************* + Coupling +*******************************/ + +.ui.dropdown .menu > .message { + margin: 0px -@borderWidth; +} + +/******************************* + States +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.visible.visible.visible.message { + display: block; +} + +.ui.icon.visible.visible.visible.visible.message { + display: flex; +} + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.hidden.hidden.hidden.message { + display: none; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Compact +---------------*/ + +.ui.compact.message { + display: inline-block; +} + + +/*-------------- + Attached +---------------*/ + +.ui.attached.message { + margin-bottom: @attachedYOffset; + border-radius: @borderRadius @borderRadius 0em 0em; + box-shadow: @attachedBoxShadow; + margin-left: @attachedXOffset; + margin-right: @attachedXOffset; +} +.ui.attached + .ui.attached.message:not(.top):not(.bottom) { + margin-top: @attachedYOffset; + border-radius: 0em; +} +.ui.bottom.attached.message { + margin-top: @attachedYOffset; + border-radius: 0em 0em @borderRadius @borderRadius; + box-shadow: @attachedBottomBoxShadow; +} +.ui.bottom.attached.message:not(:last-child) { + margin-bottom: @verticalMargin; +} +.ui.attached.icon.message { + width: auto; +} + + +/*-------------- + Icon +---------------*/ + +.ui.icon.message { + display: flex; + width: 100%; + align-items: center; +} +.ui.icon.message > .icon:not(.close) { + display: block; + flex: 0 0 auto; + width: auto; + line-height: 1; + vertical-align: @iconVerticalAlign; + font-size: @iconSize; + opacity: @iconOpacity; +} +.ui.icon.message > .content { + display: block; + flex: 1 1 auto; + vertical-align: @iconVerticalAlign; +} + + +.ui.icon.message .icon:not(.close) + .content { + padding-left: @iconContentDistance; +} +.ui.icon.message .circular.icon { + width: 1em; +} + +/*-------------- + Floating +---------------*/ + +.ui.floating.message { + box-shadow: @floatingBoxShadow; +} + + +/*-------------- + Colors +---------------*/ + +.ui.black.message { + background-color: @black; + color: @invertedTextColor; +} + +/*-------------- + Types +---------------*/ + +/* Positive */ +.ui.positive.message { + background-color: @positiveBackgroundColor; + color: @positiveTextColor; +} +.ui.positive.message, +.ui.attached.positive.message { + box-shadow: @positiveBoxShadow; +} +.ui.positive.message .header { + color: @positiveHeaderColor; +} + +/* Negative */ +.ui.negative.message { + background-color: @negativeBackgroundColor; + color: @negativeTextColor; +} +.ui.negative.message, +.ui.attached.negative.message { + box-shadow: @negativeBoxShadow; +} +.ui.negative.message .header { + color: @negativeHeaderColor; +} + +/* Info */ +.ui.info.message { + background-color: @infoBackgroundColor; + color: @infoTextColor; +} +.ui.info.message, +.ui.attached.info.message { + box-shadow: @infoBoxShadow; +} +.ui.info.message .header { + color: @infoHeaderColor; +} + +/* Warning */ +.ui.warning.message { + background-color: @warningBackgroundColor; + color: @warningTextColor; +} +.ui.warning.message, +.ui.attached.warning.message { + box-shadow: @warningBoxShadow; +} +.ui.warning.message .header { + color: @warningHeaderColor; +} + +/* Error */ +.ui.error.message { + background-color: @errorBackgroundColor; + color: @errorTextColor; +} +.ui.error.message, +.ui.attached.error.message { + box-shadow: @errorBoxShadow; +} +.ui.error.message .header { + color: @errorHeaderColor; +} + +/* Success */ +.ui.success.message { + background-color: @successBackgroundColor; + color: @successTextColor; +} +.ui.success.message, +.ui.attached.success.message { + box-shadow: @successBoxShadow; +} +.ui.success.message .header { + color: @successHeaderColor; +} + + +/* Colors */ +.ui.inverted.message, +.ui.black.message { + background-color: @black; + color: @invertedTextColor; +} + +.ui.red.message { + background-color: @redBackground; + color: @redTextColor; + box-shadow: @redBoxShadow; +} +.ui.red.message .header { + color: @redHeaderColor; +} + +.ui.orange.message { + background-color: @orangeBackground; + color: @orangeTextColor; + box-shadow: @orangeBoxShadow; +} +.ui.orange.message .header { + color: @orangeHeaderColor; +} + +.ui.yellow.message { + background-color: @yellowBackground; + color: @yellowTextColor; + box-shadow: @yellowBoxShadow; +} +.ui.yellow.message .header { + color: @yellowHeaderColor; +} + +.ui.olive.message { + background-color: @oliveBackground; + color: @oliveTextColor; + box-shadow: @oliveBoxShadow; +} +.ui.olive.message .header { + color: @oliveHeaderColor; +} + +.ui.green.message { + background-color: @greenBackground; + color: @greenTextColor; + box-shadow: @greenBoxShadow; +} +.ui.green.message .header { + color: @greenHeaderColor; +} + +.ui.teal.message { + background-color: @tealBackground; + color: @tealTextColor; + box-shadow: @tealBoxShadow; +} +.ui.teal.message .header { + color: @tealHeaderColor; +} + +.ui.blue.message { + background-color: @blueBackground; + color: @blueTextColor; + box-shadow: @blueBoxShadow; +} +.ui.blue.message .header { + color: @blueHeaderColor; +} + +.ui.violet.message { + background-color: @violetBackground; + color: @violetTextColor; + box-shadow: @violetBoxShadow; +} +.ui.violet.message .header { + color: @violetHeaderColor; +} + +.ui.purple.message { + background-color: @purpleBackground; + color: @purpleTextColor; + box-shadow: @purpleBoxShadow; +} +.ui.purple.message .header { + color: @purpleHeaderColor; +} + +.ui.pink.message { + background-color: @pinkBackground; + color: @pinkTextColor; + box-shadow: @pinkBoxShadow; +} +.ui.pink.message .header { + color: @pinkHeaderColor; +} + +.ui.brown.message { + background-color: @brownBackground; + color: @brownTextColor; + box-shadow: @brownBoxShadow; +} +.ui.brown.message .header { + color: @brownHeaderColor; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.message { + font-size: @relativeMini; +} +.ui.tiny.message { + font-size: @relativeTiny; +} +.ui.small.message { + font-size: @relativeSmall; +} +.ui.message { + font-size: @relativeMedium; +} +.ui.large.message { + font-size: @relativeLarge; +} +.ui.big.message { + font-size: @relativeBig; +} +.ui.huge.message { + font-size: @relativeHuge; +} +.ui.massive.message { + font-size: @relativeMassive; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/collections/table.less b/src/semantic/src/definitions/collections/table.less new file mode 100755 index 0000000..b72dbac --- /dev/null +++ b/src/semantic/src/definitions/collections/table.less @@ -0,0 +1,1114 @@ +/*! + * # Semantic UI - Table + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'table'; + +@import (multiple) '../../theme.config'; + +/******************************* + Table +*******************************/ + +/* Prototype */ +.ui.table { + width: 100%; + background: @background; + margin: @margin; + border: @border; + box-shadow: @boxShadow; + border-radius: @borderRadius; + text-align: @textAlign; + color: @color; + border-collapse: @borderCollapse; + border-spacing: @borderSpacing; +} + +.ui.table:first-child { + margin-top: 0em; +} +.ui.table:last-child { + margin-bottom: 0em; +} + +/******************************* + Parts +*******************************/ + +/* Table Content */ +.ui.table th, +.ui.table td { + transition: @transition; +} + +/* Headers */ +.ui.table thead { + box-shadow: @headerBoxShadow; +} +.ui.table thead th { + cursor: auto; + background: @headerBackground; + text-align: @headerAlign; + color: @headerColor; + padding: @headerVerticalPadding @headerHorizontalPadding; + vertical-align: @headerVerticalAlign; + font-style: @headerFontStyle; + font-weight: @headerFontWeight; + text-transform: @headerTextTransform; + border-bottom: @headerBorder; + border-left: @headerDivider; +} + +.ui.table thead tr > th:first-child { + border-left: none; +} + +.ui.table thead tr:first-child > th:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui.table thead tr:first-child > th:last-child { + border-radius: 0em @borderRadius 0em 0em; +} +.ui.table thead tr:first-child > th:only-child { + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Footer */ +.ui.table tfoot { + box-shadow: @footerBoxShadow; +} +.ui.table tfoot th { + cursor: auto; + border-top: @footerBorder; + background: @footerBackground; + text-align: @footerAlign; + color: @footerColor; + padding: @footerVerticalPadding @footerHorizontalPadding; + vertical-align: @footerVerticalAlign; + font-style: @footerFontStyle; + font-weight: @footerFontWeight; + text-transform: @footerTextTransform; +} +.ui.table tfoot tr > th:first-child { + border-left: none; +} +.ui.table tfoot tr:first-child > th:first-child { + border-radius: 0em 0em 0em @borderRadius; +} +.ui.table tfoot tr:first-child > th:last-child { + border-radius: 0em 0em @borderRadius 0em; +} +.ui.table tfoot tr:first-child > th:only-child { + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Table Row */ +.ui.table tr td { + border-top: @rowBorder; +} +.ui.table tr:first-child td { + border-top: none; +} + +/* Table Cells */ +.ui.table td { + padding: @cellVerticalPadding @cellHorizontalPadding; + text-align: @cellTextAlign; +} + +/* Icons */ +.ui.table > .icon { + vertical-align: @iconVerticalAlign; +} +.ui.table > .icon:only-child { + margin: 0em; +} + +/* Table Segment */ +.ui.table.segment { + padding: 0em; +} +.ui.table.segment:after { + display: none; +} +.ui.table.segment.stacked:after { + display: block; +} + + +/* Responsive */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.table:not(.unstackable) { + width: 100%; + } + .ui.table:not(.unstackable) tbody, + .ui.table:not(.unstackable) tr, + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + display: block !important; + width: auto !important; + display: block !important; + } + + .ui.table:not(.unstackable) { + padding: 0em; + } + .ui.table:not(.unstackable) thead { + display: @responsiveHeaderDisplay; + } + .ui.table:not(.unstackable) tfoot { + display: @responsiveFooterDisplay; + } + .ui.table:not(.unstackable) tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + background: none; + border: none !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important; + box-shadow: @responsiveCellBoxShadow; + } + .ui.table:not(.unstackable) th:first-child, + .ui.table:not(.unstackable) td:first-child { + font-weight: bold; + } + + /* Definition Table */ + .ui.definition.table:not(.unstackable) thead th:first-child { + box-shadow: none !important; + } +} + + +/******************************* + Coupling +*******************************/ + +/* UI Image */ +.ui.table th .image, +.ui.table th .image img, +.ui.table td .image, +.ui.table td .image img { + max-width: none; +} + + +/******************************* + Types +*******************************/ + +/*-------------- + Complex +---------------*/ + +.ui.structured.table { + border-collapse: collapse; +} +.ui.structured.table thead th { + border-left: @headerDivider; + border-right: @headerDivider; +} +.ui.structured.sortable.table thead th { + border-left: @sortableBorder; + border-right: @sortableBorder; +} +.ui.structured.basic.table th { + border-left: @basicTableHeaderDivider; + border-right: @basicTableHeaderDivider; +} +.ui.structured.celled.table tr th, +.ui.structured.celled.table tr td { + border-left: @cellBorder; + border-right: @cellBorder; +} + +/*-------------- + Definition +---------------*/ + +.ui.definition.table thead:not(.full-width) th:first-child { + pointer-events: none; + background: @definitionHeaderBackground; + font-weight: @definitionHeaderFontWeight; + color: @definitionHeaderColor; + box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground; +} + +.ui.definition.table tfoot:not(.full-width) th:first-child { + pointer-events: none; + background: @definitionFooterBackground; + font-weight: @definitionFooterColor; + color: @definitionFooterFontWeight; + box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground; +} + +/* Remove Border */ +.ui.celled.definition.table thead:not(.full-width) th:first-child { + box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground; +} +.ui.celled.definition.table tfoot:not(.full-width) th:first-child { + box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground; +} + +/* Highlight Defining Column */ +.ui.definition.table tr td:first-child:not(.ignored), +.ui.definition.table tr td.definition { + background: @definitionColumnBackground; + font-weight: @definitionColumnFontWeight; + color: @definitionColumnColor; + text-transform: @definitionColumnTextTransform; + box-shadow: @definitionColumnBoxShadow; + text-align: @definitionColumnTextAlign; + font-size: @definitionColumnFontSize; + padding-left: @definitionColumnHorizontalPadding; + padding-right: @definitionColumnHorizontalPadding; +} + + +/* Fix 2nd Column */ +.ui.definition.table thead:not(.full-width) th:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} +.ui.definition.table tfoot:not(.full-width) th:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} +.ui.definition.table td:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Positive +---------------*/ + +.ui.table tr.positive, +.ui.table td.positive { + box-shadow: @positiveBoxShadow; +} +.ui.table tr.positive, +.ui.table td.positive { + background: @positiveBackgroundColor !important; + color: @positiveColor !important; +} + +/*-------------- + Negative +---------------*/ + +.ui.table tr.negative, +.ui.table td.negative { + box-shadow: @negativeBoxShadow; +} +.ui.table tr.negative, +.ui.table td.negative { + background: @negativeBackgroundColor !important; + color: @negativeColor !important; +} + +/*-------------- + Error +---------------*/ + +.ui.table tr.error, +.ui.table td.error { + box-shadow: @errorBoxShadow; +} +.ui.table tr.error, +.ui.table td.error { + background: @errorBackgroundColor !important; + color: @errorColor !important; +} +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning, +.ui.table td.warning { + box-shadow: @warningBoxShadow; +} +.ui.table tr.warning, +.ui.table td.warning { + background: @warningBackgroundColor !important; + color: @warningColor !important; +} + +/*-------------- + Active +---------------*/ + +.ui.table tr.active, +.ui.table td.active { + box-shadow: @activeBoxShadow; +} +.ui.table tr.active, +.ui.table td.active { + background: @activeBackgroundColor !important; + color: @activeColor !important; +} + + + +/*-------------- + Disabled +---------------*/ + +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover, +.ui.table tr:hover td.disabled { + pointer-events: none; + color: @disabledTextColor; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width : @largestTabletScreen) { + + .ui[class*="tablet stackable"].table, + .ui[class*="tablet stackable"].table tbody, + .ui[class*="tablet stackable"].table tr, + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + display: block !important; + width: 100% !important; + display: block !important; + } + + .ui[class*="tablet stackable"].table { + padding: 0em; + } + .ui[class*="tablet stackable"].table thead { + display: @responsiveHeaderDisplay; + } + .ui[class*="tablet stackable"].table tfoot { + display: @responsiveFooterDisplay; + } + .ui[class*="tablet stackable"].table tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + background: none; + border: none !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; + box-shadow: @responsiveCellBoxShadow; + } + + /* Definition Table */ + .ui.definition[class*="tablet stackable"].table thead th:first-child { + box-shadow: none !important; + } +} + +/*-------------- + Text Alignment +---------------*/ + +.ui.table[class*="left aligned"], +.ui.table [class*="left aligned"] { + text-align: left; +} +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + text-align: center; +} +.ui.table[class*="right aligned"], +.ui.table [class*="right aligned"] { + text-align: right; +} + +/*------------------ + Vertical Alignment +------------------*/ + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} +.ui.table[class*="middle aligned"], +.ui.table [class*="middle aligned"] { + vertical-align: middle; +} +.ui.table[class*="bottom aligned"], +.ui.table [class*="bottom aligned"] { + vertical-align: bottom; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.table th.collapsing, +.ui.table td.collapsing { + width: 1px; + white-space: nowrap; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.table { + table-layout: fixed; +} + +.ui.fixed.table th, +.ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; +} + + +/*-------------- + Selectable +---------------*/ + +.ui.selectable.table tbody tr:hover, +.ui.table tbody tr td.selectable:hover { + background: @selectableBackground !important; + color: @selectableTextColor !important; +} +.ui.selectable.inverted.table tbody tr:hover, +.ui.inverted.table tbody tr td.selectable:hover { + background: @selectableInvertedBackground !important; + color: @selectableInvertedTextColor !important; +} + +/* Selectable Cell Link */ +.ui.table tbody tr td.selectable { + padding: 0em; +} +.ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + padding: @cellVerticalPadding @cellHorizontalPadding; +} + +/* Other States */ +.ui.selectable.table tr.error:hover, +.ui.table tr td.selectable.error:hover, +.ui.selectable.table tr:hover td.error { + background: @errorBackgroundHover !important; + color: @errorColorHover !important; +} +.ui.selectable.table tr.warning:hover, +.ui.table tr td.selectable.warning:hover, +.ui.selectable.table tr:hover td.warning { + background: @warningBackgroundHover !important; + color: @warningColorHover !important; +} +.ui.selectable.table tr.active:hover, +.ui.table tr td.selectable.active:hover, +.ui.selectable.table tr:hover td.active { + background: @activeBackgroundColor !important; + color: @activeColor !important; +} +.ui.selectable.table tr.positive:hover, +.ui.table tr td.selectable.positive:hover, +.ui.selectable.table tr:hover td.positive { + background: @positiveBackgroundHover !important; + color: @positiveColorHover !important; +} +.ui.selectable.table tr.negative:hover, +.ui.table tr td.selectable.negative:hover, +.ui.selectable.table tr:hover td.negative { + background: @negativeBackgroundHover !important; + color: @negativeColorHover !important; +} + + + +/*------------------- + Attached +--------------------*/ + +/* Middle */ +.ui.attached.table { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached + .ui.attached.table:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].table { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.table[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].table { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].table:last-child { + margin-bottom: 0em; +} + +/*-------------- + Striped +---------------*/ + +/* Table Striping */ +.ui.striped.table > tr:nth-child(2n), +.ui.striped.table tbody tr:nth-child(2n) { + background-color: @stripedBackground; +} + +/* Stripes */ +.ui.inverted.striped.table > tr:nth-child(2n), +.ui.inverted.striped.table tbody tr:nth-child(2n) { + background-color: @invertedStripedBackground; +} + +/* Allow striped active hover */ +.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { + background: @activeBackgroundHover !important; + color: @activeColorHover !important; +} + +/*-------------- + Single Line +---------------*/ + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.table { + border-top: @coloredBorderSize solid @red; +} +.ui.inverted.red.table { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +.ui.orange.table { + border-top: @coloredBorderSize solid @orange; +} +.ui.inverted.orange.table { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +.ui.yellow.table { + border-top: @coloredBorderSize solid @yellow; +} +.ui.inverted.yellow.table { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +.ui.olive.table { + border-top: @coloredBorderSize solid @olive; +} +.ui.inverted.olive.table { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +.ui.green.table { + border-top: @coloredBorderSize solid @green; +} +.ui.inverted.green.table { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +.ui.teal.table { + border-top: @coloredBorderSize solid @teal; +} +.ui.inverted.teal.table { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +.ui.blue.table { + border-top: @coloredBorderSize solid @blue; +} +.ui.inverted.blue.table { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +.ui.violet.table { + border-top: @coloredBorderSize solid @violet; +} +.ui.inverted.violet.table { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +.ui.purple.table { + border-top: @coloredBorderSize solid @purple; +} +.ui.inverted.purple.table { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +.ui.pink.table { + border-top: @coloredBorderSize solid @pink; +} +.ui.inverted.pink.table { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +.ui.brown.table { + border-top: @coloredBorderSize solid @brown; +} +.ui.inverted.brown.table { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +.ui.grey.table { + border-top: @coloredBorderSize solid @grey; +} +.ui.inverted.grey.table { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +.ui.black.table { + border-top: @coloredBorderSize solid @black; +} +.ui.inverted.black.table { + background-color: @black !important; + color: @white !important; +} + + +/*-------------- + Column Count +---------------*/ + +/* Grid Based */ +.ui.one.column.table td { + width: @oneColumn; +} +.ui.two.column.table td { + width: @twoColumn; +} +.ui.three.column.table td { + width: @threeColumn; +} +.ui.four.column.table td { + width: @fourColumn; +} +.ui.five.column.table td { + width: @fiveColumn; +} +.ui.six.column.table td { + width: @sixColumn; +} +.ui.seven.column.table td { + width: @sevenColumn; +} +.ui.eight.column.table td { + width: @eightColumn; +} +.ui.nine.column.table td { + width: @nineColumn; +} +.ui.ten.column.table td { + width: @tenColumn; +} +.ui.eleven.column.table td { + width: @elevenColumn; +} +.ui.twelve.column.table td { + width: @twelveColumn; +} +.ui.thirteen.column.table td { + width: @thirteenColumn; +} +.ui.fourteen.column.table td { + width: @fourteenColumn; +} +.ui.fifteen.column.table td { + width: @fifteenColumn; +} +.ui.sixteen.column.table td { + width: @sixteenColumn; +} + +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: @oneWide; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: @twoWide; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: @threeWide; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: @fourWide; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: @fiveWide; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: @sixWide; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: @sevenWide; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: @eightWide; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: @nineWide; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: @tenWide; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: @elevenWide; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: @twelveWide; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: @thirteenWide; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: @fourteenWide; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: @fifteenWide; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: @sixteenWide; +} + +/*-------------- + Sortable +---------------*/ + +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; + border-left: @sortableBorder; + color: @sortableColor; +} +.ui.sortable.table thead th:first-child { + border-left: none; +} +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + user-select: none; +} + +.ui.sortable.table thead th:after { + display: none; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + content: ''; + height: 1em; + width: @sortableIconWidth; + opacity: @sortableIconOpacity; + margin: 0em 0em 0em @sortableIconDistance; + font-family: @sortableIconFont; +} +.ui.sortable.table thead th.ascending:after { + content: @sortableIconAscending; +} +.ui.sortable.table thead th.descending:after { + content: @sortableIconDescending; +} + +/* Hover */ +.ui.sortable.table th.disabled:hover { + cursor: auto; + color: @sortableDisabledColor; +} +.ui.sortable.table thead th:hover { + background: @sortableHoverBackground; + color: @sortableHoverColor; +} + +/* Sorted */ +.ui.sortable.table thead th.sorted { + background: @sortableActiveBackground; + color: @sortableActiveColor; +} +.ui.sortable.table thead th.sorted:after { + display: inline-block; +} + +/* Sorted Hover */ +.ui.sortable.table thead th.sorted:hover { + background: @sortableActiveHoverBackground; + color: @sortableActiveHoverColor; +} + +/* Inverted */ +.ui.inverted.sortable.table thead th.sorted { + background: @sortableInvertedActiveBackground; + color: @sortableInvertedActiveColor; +} +.ui.inverted.sortable.table thead th:hover { + background: @sortableInvertedHoverBackground; + color: @sortableInvertedHoverColor; +} +.ui.inverted.sortable.table thead th { + border-left-color: @sortableInvertedBorderColor; + border-right-color: @sortableInvertedBorderColor; +} + + +/*-------------- + Inverted +---------------*/ + +/* Text Color */ +.ui.inverted.table { + background: @invertedBackground; + color: @invertedCellColor; + border: @invertedBorder; +} +.ui.inverted.table th { + background-color: @invertedHeaderBackground; + border-color: @invertedHeaderBorderColor !important; + color: @invertedHeaderColor; +} +.ui.inverted.table tr td { + border-color: @invertedCellBorderColor !important; +} + +.ui.inverted.table tr.disabled td, +.ui.inverted.table tr td.disabled, +.ui.inverted.table tr.disabled:hover td, +.ui.inverted.table tr:hover td.disabled { + pointer-events: none; + color: @invertedDisabledTextColor; +} + +/* Definition */ +.ui.inverted.definition.table tfoot:not(.full-width) th:first-child, +.ui.inverted.definition.table thead:not(.full-width) th:first-child { + background: @definitionPageBackground; +} +.ui.inverted.definition.table tr td:first-child { + background: @invertedDefinitionColumnBackground; + color: @invertedDefinitionColumnColor; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.collapsing.table { + width: auto; +} + +/*-------------- + Basic +---------------*/ + +.ui.basic.table { + background: @basicTableBackground; + border: @basicTableBorder; + box-shadow: @basicBoxShadow; +} +.ui.basic.table thead, +.ui.basic.table tfoot { + box-shadow: none; +} +.ui.basic.table th { + background: @basicTableHeaderBackground; + border-left: @basicTableHeaderDivider; +} +.ui.basic.table tbody tr { + border-bottom: @basicTableCellBorder; +} +.ui.basic.table td { + background: @basicTableCellBackground; +} +.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: @basicTableStripedBackground !important; +} + +/* Very Basic */ +.ui[class*="very basic"].table { + border: none; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td { + padding: @basicTableCellPadding; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { + padding-left: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { + padding-right: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { + padding-top: 0em; +} + +/*-------------- + Celled +---------------*/ + +.ui.celled.table tr th, +.ui.celled.table tr td { + border-left: @cellBorder; +} +.ui.celled.table tr th:first-child, +.ui.celled.table tr td:first-child { + border-left: none; +} + +/*-------------- + Padded +---------------*/ + +.ui.padded.table th { + padding-left: @paddedHorizontalPadding; + padding-right: @paddedHorizontalPadding; +} +.ui.padded.table th, +.ui.padded.table td { + padding: @paddedVerticalPadding @paddedHorizontalPadding; +} + +/* Very */ +.ui[class*="very padded"].table th { + padding-left: @veryPaddedHorizontalPadding; + padding-right: @veryPaddedHorizontalPadding; +} +.ui[class*="very padded"].table td { + padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding; +} + +/*-------------- + Compact +---------------*/ + +.ui.compact.table th { + padding-left: @compactHorizontalPadding; + padding-right: @compactHorizontalPadding; +} +.ui.compact.table td { + padding: @compactVerticalPadding @compactHorizontalPadding; +} + +/* Very */ +.ui[class*="very compact"].table th { + padding-left: @veryCompactHorizontalPadding; + padding-right: @veryCompactHorizontalPadding; +} +.ui[class*="very compact"].table td { + padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding; +} + +/*-------------- + Sizes +---------------*/ + +/* Small */ +.ui.small.table { + font-size: @small; +} + +/* Standard */ +.ui.table { + font-size: @medium; +} + +/* Large */ +.ui.large.table { + font-size: @large; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/button.less b/src/semantic/src/definitions/elements/button.less new file mode 100755 index 0000000..9e65066 --- /dev/null +++ b/src/semantic/src/definitions/elements/button.less @@ -0,0 +1,3427 @@ +/*! + * # Semantic UI - Button + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'button'; + +@import (multiple) '../../theme.config'; + +/******************************* + Button +*******************************/ + +.ui.button { + cursor: pointer; + display: inline-block; + + min-height: 1em; + + outline: none; + border: none; + vertical-align: @verticalAlign; + background: @background; + color: @textColor; + + font-family: @fontFamily; + + margin: 0em @horizontalMargin @verticalMargin 0em; + padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); + + text-transform: @textTransform; + text-shadow: @textShadow; + font-weight: @fontWeight; + line-height: @lineHeight; + font-style: normal; + text-align: center; + text-decoration: none; + + border-radius: @borderRadius; + box-shadow: @boxShadow; + + user-select: none; + transition: @transition; + will-change: @willChange; + + -webkit-tap-highlight-color: @tapColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +.ui.button:hover { + background-color: @hoverBackgroundColor; + background-image: @hoverBackgroundImage; + box-shadow: @hoverBoxShadow; + color: @hoverColor; +} + +.ui.button:hover .icon { + opacity: @iconHoverOpacity; +} + +/*-------------- + Focus +---------------*/ + +.ui.button:focus { + background-color: @focusBackgroundColor; + color: @focusColor; + background-image: @focusBackgroundImage !important; + box-shadow: @focusBoxShadow !important; +} + +.ui.button:focus .icon { + opacity: @iconFocusOpacity; +} + +/*-------------- + Down +---------------*/ + +.ui.button:active, +.ui.active.button:active { + background-color: @downBackgroundColor; + background-image: @downBackgroundImage; + color: @downColor; + box-shadow: @downBoxShadow; +} + +/*-------------- + Active +---------------*/ + +.ui.active.button { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; + box-shadow: @activeBoxShadow; + color: @activeColor; +} +.ui.active.button:hover { + background-color: @activeHoverBackgroundColor; + background-image: @activeHoverBackgroundImage; + color: @activeHoverColor; +} +.ui.active.button:active { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; +} + + +/*-------------- + Loading +---------------*/ + +/* Specificity hack */ +.ui.loading.loading.loading.loading.loading.loading.button { + position: relative; + cursor: default; + text-shadow: none !important; + color: transparent !important; + opacity: @loadingOpacity; + pointer-events: @loadingPointerEvents; + transition: @loadingTransition; +} +.ui.loading.button:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @invertedLoaderFillColor; +} +.ui.loading.button:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @invertedLoaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + box-shadow: none; +} + +@keyframes button-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.ui.basic.loading.button:not(.inverted):before { + border-color: @loaderFillColor; +} +.ui.basic.loading.button:not(.inverted):after { + border-top-color: @loaderLineColor; +} + +/*------------------- + Disabled +--------------------*/ + +.ui.buttons .disabled.button, +.ui.disabled.button, +.ui.button:disabled, +.ui.disabled.button:hover, +.ui.disabled.active.button { + cursor: default; + opacity: @disabledOpacity !important; + background-image: none !important; + box-shadow: none !important; + pointer-events: none !important; +} + +/* Basic Group With Disabled */ +.ui.basic.buttons .ui.disabled.button { + border-color: @disabledBorderColor; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Animated +--------------------*/ + +.ui.animated.button { + position: relative; + overflow: hidden; + padding-right: 0em !important; + vertical-align: @animatedVerticalAlign; + z-index: @animatedZIndex; +} + +.ui.animated.button .content { + will-change: transform, opacity; +} +.ui.animated.button .visible.content { + position: relative; + margin-right: @horizontalPadding; +} +.ui.animated.button .hidden.content { + position: absolute; + width: 100%; +} + +/* Horizontal */ +.ui.animated.button .visible.content, +.ui.animated.button .hidden.content { + transition: right @animationDuration @animationEasing 0s; +} +.ui.animated.button .visible.content { + left: auto; + right: 0%; +} +.ui.animated.button .hidden.content { + top: 50%; + left: auto; + right: -100%; + margin-top: -(@lineHeight / 2); +} +.ui.animated.button:focus .visible.content, +.ui.animated.button:hover .visible.content { + left: auto; + right: 200%; +} +.ui.animated.button:focus .hidden.content, +.ui.animated.button:hover .hidden.content { + left: auto; + right: 0%; +} + +/* Vertical */ +.ui.vertical.animated.button .visible.content, +.ui.vertical.animated.button .hidden.content { + transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing; +} +.ui.vertical.animated.button .visible.content { + transform: translateY(0%); + right: auto; +} +.ui.vertical.animated.button .hidden.content { + top: -50%; + left: 0%; + right: auto; +} +.ui.vertical.animated.button:focus .visible.content, +.ui.vertical.animated.button:hover .visible.content { + transform: translateY(200%); + right: auto; +} +.ui.vertical.animated.button:focus .hidden.content, +.ui.vertical.animated.button:hover .hidden.content { + top: 50%; + right: auto; +} + +/* Fade */ +.ui.fade.animated.button .visible.content, +.ui.fade.animated.button .hidden.content { + transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing; +} +.ui.fade.animated.button .visible.content { + left: auto; + right: auto; + opacity: 1; + transform: scale(1); +} +.ui.fade.animated.button .hidden.content { + opacity: 0; + left: 0%; + right: auto; + transform: scale(@fadeScaleHigh); +} +.ui.fade.animated.button:focus .visible.content, +.ui.fade.animated.button:hover .visible.content { + left: auto; + right: auto; + opacity: 0; + transform: scale(@fadeScaleLow); +} +.ui.fade.animated.button:focus .hidden.content, +.ui.fade.animated.button:hover .hidden.content { + left: 0%; + right: auto; + opacity: 1; + transform: scale(1); +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.button { + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + background: transparent none; + color: @white; + text-shadow: none !important; +} + +/* Group */ +.ui.inverted.buttons .button { + margin: @invertedGroupButtonOffset; +} +.ui.inverted.buttons .button:first-child { + margin-left: 0em; +} +.ui.inverted.vertical.buttons .button { + margin: @invertedVerticalGroupButtonOffset; +} +.ui.inverted.vertical.buttons .button:first-child { + margin-top: 0em; +} + +/* States */ + +/* Hover */ +.ui.inverted.button:hover { + background: @white; + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + color: @hoverColor; +} + +/* Active / Focus */ +.ui.inverted.button:focus, +.ui.inverted.button.active { + background: @white; + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + color: @focusColor; +} + +/* Active Focus */ +.ui.inverted.button.active:focus { + background: @midWhite; + box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important; + color: @focusColor; +} + + +/*------------------- + Labeled Button +--------------------*/ + +.ui.labeled.button:not(.icon) { + display: inline-flex; + flex-direction: row; + background: none !important; + padding: 0px !important; + border: none !important; + box-shadow: none !important; +} + +.ui.labeled.button > .button { + margin: 0px; +} +.ui.labeled.button > .label { + display: flex; + align-items: @labeledLabelAlign; + margin: 0px 0px 0px @labeledLabelBorderOffset !important; + font-size: @labeledLabelFontSize; + padding: @labeledLabelPadding; + font-size: @labeledLabelFontSize; + border-color: @labeledLabelBorderColor; +} + +/* Tag */ +.ui.labeled.button > .tag.label:before { + width: @labeledTagLabelSize; + height: @labeledTagLabelSize; +} + +/* Right */ +.ui.labeled.button:not([class*="left labeled"]) > .button { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.button:not([class*="left labeled"]) > .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +/* Left Side */ +.ui[class*="left labeled"].button > .button { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.ui[class*="left labeled"].button > .label { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} + +/*------------------- + Social +--------------------*/ + +/* Facebook */ +.ui.facebook.button { + background-color: @facebookColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.facebook.button:hover { + background-color: @facebookHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.facebook.button:active { + background-color: @facebookDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Twitter */ +.ui.twitter.button { + background-color: @twitterColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.twitter.button:hover { + background-color: @twitterHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.twitter.button:active { + background-color: @twitterDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Google Plus */ +.ui.google.plus.button { + background-color: @googlePlusColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.google.plus.button:hover { + background-color: @googlePlusHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.google.plus.button:active { + background-color: @googlePlusDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Linked In */ +.ui.linkedin.button { + background-color: @linkedInColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.linkedin.button:hover { + background-color: @linkedInHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.linkedin.button:active { + background-color: @linkedInDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* YouTube */ +.ui.youtube.button { + background-color: @youtubeColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.youtube.button:hover { + background-color: @youtubeHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.youtube.button:active { + background-color: @youtubeDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Instagram */ +.ui.instagram.button { + background-color: @instagramColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.instagram.button:hover { + background-color: @instagramHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.instagram.button:active { + background-color: @instagramDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Pinterest */ +.ui.pinterest.button { + background-color: @pinterestColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.pinterest.button:hover { + background-color: @pinterestHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.pinterest.button:active { + background-color: @pinterestDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* VK */ +.ui.vk.button { + background-color: #4D7198; + color: @white; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.vk.button:hover { + background-color: @vkHoverColor; + color: @white; +} +.ui.vk.button:active { + background-color: @vkDownColor; + color: @white; +} + +/*-------------- + Icon +---------------*/ + +.ui.button > .icon:not(.button) { + height: @iconHeight; + opacity: @iconOpacity; + margin: @iconMargin; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + color: @iconColor; +} + +.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) { + margin: @iconMargin; +} +.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { + margin: @rightIconMargin; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Floated +--------------------*/ + +.ui[class*="left floated"].buttons, +.ui[class*="left floated"].button { + float: left; + margin-left: 0em; + margin-right: @floatedMargin; +} +.ui[class*="right floated"].buttons, +.ui[class*="right floated"].button { + float: right; + margin-right: 0em; + margin-left: @floatedMargin; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.buttons .button, +.ui.compact.button { + padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset ); +} +.ui.compact.icon.buttons .button, +.ui.compact.icon.button { + padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset ); +} +.ui.compact.labeled.icon.buttons .button, +.ui.compact.labeled.icon.button { + padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset ); +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.buttons .button, +.ui.mini.buttons .or, +.ui.mini.button { + font-size: @mini; +} +.ui.tiny.buttons .button, +.ui.tiny.buttons .or, +.ui.tiny.button { + font-size: @tiny; +} +.ui.small.buttons .button, +.ui.small.buttons .or, +.ui.small.button { + font-size: @small; +} +.ui.buttons .button, +.ui.buttons .or, +.ui.button { + font-size: @medium; +} +.ui.large.buttons .button, +.ui.large.buttons .or, +.ui.large.button { + font-size: @large; +} +.ui.big.buttons .button, +.ui.big.buttons .or, +.ui.big.button { + font-size: @big; +} +.ui.huge.buttons .button, +.ui.huge.buttons .or, +.ui.huge.button { + font-size: @huge; +} +.ui.massive.buttons .button, +.ui.massive.buttons .or, +.ui.massive.button { + font-size: @massive; +} + +/*-------------- + Icon Only +---------------*/ + +.ui.icon.buttons .button, +.ui.icon.button { + padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: @iconButtonOpacity; + margin: 0em; + vertical-align: top; +} + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.buttons .button, +.ui.basic.button { + background: @basicBackground !important; + color: @basicTextColor !important; + font-weight: @basicFontWeight; + border-radius: @basicBorderRadius; + text-transform: @basicTextTransform; + text-shadow: none !important; + box-shadow: @basicBoxShadow; +} +.ui.basic.buttons { + box-shadow: @basicGroupBoxShadow; + border: @basicGroupBorder; + border-radius: @borderRadius; +} +.ui.basic.buttons .button { + border-radius: 0em; +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + background: @basicHoverBackground !important; + color: @basicHoverTextColor !important; + box-shadow: @basicHoverBoxShadow; +} +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { + background: @basicFocusBackground !important; + color: @basicFocusTextColor !important; + box-shadow: @basicFocusBoxShadow; +} +.ui.basic.buttons .button:active, +.ui.basic.button:active { + background: @basicDownBackground !important; + color: @basicDownTextColor !important; + box-shadow: @basicDownBoxShadow; +} +.ui.basic.buttons .active.button, +.ui.basic.active.button { + background: @basicActiveBackground !important; + box-shadow: @basicActiveBoxShadow !important; + color: @basicActiveTextColor; + box-shadow: @selectedBorderColor; +} +.ui.basic.buttons .active.button:hover, +.ui.basic.active.button:hover { + background-color: @transparentBlack; +} + +/* Vertical */ +.ui.basic.buttons .button:hover { + box-shadow: @basicHoverBoxShadow inset; +} +.ui.basic.buttons .button:active { + box-shadow: @basicDownBoxShadow inset; +} +.ui.basic.buttons .active.button { + box-shadow: @selectedBorderColor inset; +} + +/* Standard Basic Inverted */ +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + background-color: transparent !important; + color: @offWhite !important; + box-shadow: @basicInvertedBoxShadow !important; +} +.ui.basic.inverted.buttons .button:hover, +.ui.basic.inverted.button:hover { + color: @white !important; + box-shadow: @basicInvertedHoverBoxShadow !important; +} +.ui.basic.inverted.buttons .button:focus, +.ui.basic.inverted.button:focus { + color: @white !important; + box-shadow: @basicInvertedFocusBoxShadow !important; +} +.ui.basic.inverted.buttons .button:active, +.ui.basic.inverted.button:active { + background-color: @transparentWhite !important; + color: @white !important; + box-shadow: @basicInvertedDownBoxShadow !important; +} +.ui.basic.inverted.buttons .active.button, +.ui.basic.inverted.active.button { + background-color: @transparentWhite; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + box-shadow: @basicInvertedActiveBoxShadow; +} +.ui.basic.inverted.buttons .active.button:hover, +.ui.basic.inverted.active.button:hover { + background-color: @strongTransparentWhite; + box-shadow: @basicInvertedHoverBoxShadow !important; +} + + +/* Basic Group */ +.ui.basic.buttons .button { + border-left: @basicGroupBorder; + box-shadow: none; +} +.ui.basic.vertical.buttons .button { + border-left: none; +} +.ui.basic.vertical.buttons .button { + border-left-width: 0px; + border-top: @basicGroupBorder; +} +.ui.basic.vertical.buttons .button:first-child { + border-top-width: 0px; +} + + + +/*-------------- + Labeled Icon +---------------*/ + +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: @labeledIconPadding !important; + padding-right: @horizontalPadding !important; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + position: absolute; + height: 100%; + line-height: 1; + border-radius: 0px; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + text-align: center; + + margin: @labeledIconMargin; + width: @labeledIconWidth; + background-color: @labeledIconBackgroundColor; + color: @labeledIconColor; + box-shadow: @labeledIconLeftShadow; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + top: 0em; + left: 0em; +} + +/* Right Labeled */ +.ui[class*="right labeled"].icon.button { + padding-right: @labeledIconPadding !important; + padding-left: @horizontalPadding !important; +} +.ui[class*="right labeled"].icon.button > .icon { + left: auto; + right: 0em; + border-radius: 0px; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; + box-shadow: @labeledIconRightShadow; +} + + +.ui.labeled.icon.buttons > .button > .icon:before, +.ui.labeled.icon.button > .icon:before, +.ui.labeled.icon.buttons > .button > .icon:after, +.ui.labeled.icon.button > .icon:after { + display: block; + position: absolute; + width: 100%; + top: 50%; + text-align: center; + transform: translateY(-50%); +} + +.ui.labeled.icon.buttons .button > .icon { + border-radius: 0em; +} +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: @borderRadius; + border-bottom-left-radius: @borderRadius; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0em; + border-top-left-radius: @borderRadius; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0em; + border-bottom-left-radius: @borderRadius; +} + +/* Fluid Labeled */ +.ui.fluid[class*="left labeled"].icon.button, +.ui.fluid[class*="right labeled"].icon.button { + padding-left: @horizontalPadding !important; + padding-right: @horizontalPadding !important; +} + + + + +/*-------------- + Toggle +---------------*/ + +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .active.button, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + background-color: @positiveColor !important; + box-shadow: none !important; + text-shadow: @invertedTextShadow; + color: @invertedTextColor !important; +} +.ui.button.toggle.active:hover { + background-color: @positiveColorHover !important; + text-shadow: @invertedTextShadow; + color: @invertedTextColor !important; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.button { + border-radius: 10em; +} +.ui.circular.button > .icon { + width: 1em; + vertical-align: baseline; +} + + +/*------------------- + Or Buttons +--------------------*/ + +.ui.buttons .or { + position: relative; + width: @orGap; + height: @orHeight; + z-index: @orZIndex; +} +.ui.buttons .or:before { + position: absolute; + text-align: center; + border-radius: @circularRadius; + + content: @orText; + top: 50%; + left: 50%; + background-color: @orBackgroundColor; + text-shadow: @orTextShadow; + + margin-top: @orVerticalOffset; + margin-left: @orHorizontalOffset; + + width: @orCircleSize; + height: @orCircleSize; + + line-height: @orLineHeight; + color: @orTextColor; + + font-style: @orTextStyle; + font-weight: @orTextWeight; + + box-shadow: @orBoxShadow; +} +.ui.buttons .or[data-text]:before { + content: attr(data-text); +} + +/* Fluid Or */ +.ui.fluid.buttons .or { + width: 0em !important; +} +.ui.fluid.buttons .or:after { + display: none; +} + + +/*------------------- + Attached +--------------------*/ + + +/* Singular */ +.ui.attached.button { + position: relative; + display: block; + margin: 0em; + border-radius: 0em; + box-shadow: @attachedBoxShadow !important; +} + +/* Top / Bottom */ +.ui.attached.top.button { + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.attached.bottom.button { + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Left / Right */ +.ui.left.attached.button { + display: inline-block; + border-left: none; + text-align: right; + + padding-right: @attachedHorizontalPadding; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui.right.attached.button { + display: inline-block; + text-align: left; + padding-left: @attachedHorizontalPadding; + border-radius: 0em @borderRadius @borderRadius 0em; +} + +/* Plural */ +.ui.attached.buttons { + position: relative; + display: flex; + border-radius: 0em; + width: auto !important; + z-index: @attachedZIndex; + margin-left: @attachedOffset; + margin-right: @attachedOffset; +} +.ui.attached.buttons .button { + margin: 0em; +} +.ui.attached.buttons .button:first-child { + border-radius: 0em; +} +.ui.attached.buttons .button:last-child { + border-radius: 0em; +} + +/* Top / Bottom */ +.ui[class*="top attached"].buttons { + margin-bottom: @attachedOffset; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui[class*="top attached"].buttons .button:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui[class*="top attached"].buttons .button:last-child { + border-radius: 0em @borderRadius 0em 0em; +} + +.ui[class*="bottom attached"].buttons { + margin-top: @attachedOffset; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].buttons .button:first-child { + border-radius: 0em 0em 0em @borderRadius; +} +.ui[class*="bottom attached"].buttons .button:last-child { + border-radius: 0em 0em @borderRadius 0em; +} + +/* Left / Right */ +.ui[class*="left attached"].buttons { + display: inline-flex; + margin-right: 0em; + margin-left: @attachedOffset; + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui[class*="left attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: 0em @borderRadius 0em 0em; +} +.ui[class*="left attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0em 0em @borderRadius 0em; +} + +.ui[class*="right attached"].buttons { + display: inline-flex; + margin-left: 0em; + margin-right: @attachedOffset; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="right attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: @borderRadius 0em 0em 0em; +} +.ui[class*="right attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0em 0em 0em @borderRadius; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.buttons, +.ui.fluid.button { + width: 100%; +} +.ui.fluid.button { + display: block; +} + +.ui.two.buttons { + width: 100%; +} +.ui.two.buttons > .button { + width: 50%; +} + +.ui.three.buttons { + width: 100%; +} +.ui.three.buttons > .button { + width: 33.333%; +} + +.ui.four.buttons { + width: 100%; +} +.ui.four.buttons > .button { + width: 25%; +} + +.ui.five.buttons { + width: 100%; +} +.ui.five.buttons > .button { + width: 20%; +} + +.ui.six.buttons { + width: 100%; +} +.ui.six.buttons > .button { + width: 16.666%; +} + +.ui.seven.buttons { + width: 100%; +} +.ui.seven.buttons > .button { + width: 14.285%; +} + +.ui.eight.buttons { + width: 100%; +} +.ui.eight.buttons > .button { + width: 12.500%; +} + +.ui.nine.buttons { + width: 100%; +} +.ui.nine.buttons > .button { + width: 11.11%; +} + +.ui.ten.buttons { + width: 100%; +} +.ui.ten.buttons > .button { + width: 10%; +} + +.ui.eleven.buttons { + width: 100%; +} +.ui.eleven.buttons > .button { + width: 9.09%; +} + +.ui.twelve.buttons { + width: 100%; +} +.ui.twelve.buttons > .button { + width: 8.3333%; +} + +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + display: flex; + width: auto; +} + +.ui.two.vertical.buttons > .button { + height: 50%; +} +.ui.three.vertical.buttons > .button { + height: 33.333%; +} +.ui.four.vertical.buttons > .button { + height: 25%; +} +.ui.five.vertical.buttons > .button { + height: 20%; +} +.ui.six.vertical.buttons > .button { + height: 16.666%; +} +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} +.ui.eight.vertical.buttons > .button { + height: 12.500%; +} +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} +.ui.ten.vertical.buttons > .button { + height: 10%; +} +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} +.ui.twelve.vertical.buttons > .button { + height: 8.3333%; +} + + +/*------------------- + Colors +--------------------*/ + +/*--- Black ---*/ +.ui.black.buttons .button, +.ui.black.button { + background-color: @black; + color: @blackTextColor; + text-shadow: @blackTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.black.button { + box-shadow: @coloredBoxShadow; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: @blackHover; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .button:focus, +.ui.black.button:focus { + background-color: @blackFocus; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: @blackDown; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .active.button, +.ui.black.buttons .active.button:active, +.ui.black.active.button, +.ui.black.button .active.button:active { + background-color: @blackActive; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} + +/* Basic */ +.ui.basic.black.buttons .button, +.ui.basic.black.button { + box-shadow: 0px 0px 0px @basicBorderSize @black inset !important; + color: @black !important; +} +.ui.basic.black.buttons .button:hover, +.ui.basic.black.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important; + color: @blackHover !important; +} +.ui.basic.black.buttons .button:focus, +.ui.basic.black.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important; + color: @blackHover !important; +} +.ui.basic.black.buttons .active.button, +.ui.basic.black.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important; + color: @blackDown !important; +} +.ui.basic.black.buttons .button:active, +.ui.basic.black.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important; + color: @blackDown !important; +} +.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.black.buttons .button, +.ui.inverted.black.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important; + color: @invertedTextColor; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover, +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus, +.ui.inverted.black.buttons .button.active, +.ui.inverted.black.button.active, +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + box-shadow: none !important; + color: @lightBlackTextColor; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover { + background-color: @lightBlackHover; +} +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus { + background-color: @lightBlackFocus; +} +.ui.inverted.black.buttons .active.button, +.ui.inverted.black.active.button { + background-color: @lightBlackActive; +} +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + background-color: @lightBlackDown; +} + +/* Inverted Basic */ +.ui.inverted.black.basic.buttons .button, +.ui.inverted.black.buttons .basic.button, +.ui.inverted.black.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:hover, +.ui.inverted.black.buttons .basic.button:hover, +.ui.inverted.black.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important; + color: @lightBlack !important; +} +.ui.inverted.black.basic.buttons .active.button, +.ui.inverted.black.buttons .basic.active.button, +.ui.inverted.black.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:active, +.ui.inverted.black.buttons .basic.button:active, +.ui.inverted.black.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important; + color: @white !important; +} + +/*--- Grey ---*/ +.ui.grey.buttons .button, +.ui.grey.button { + background-color: @grey; + color: @greyTextColor; + text-shadow: @greyTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.grey.button { + box-shadow: @coloredBoxShadow; +} +.ui.grey.buttons .button:hover, +.ui.grey.button:hover { + background-color: @greyHover; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .button:focus, +.ui.grey.button:focus { + background-color: @greyFocus; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .button:active, +.ui.grey.button:active { + background-color: @greyDown; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .active.button, +.ui.grey.buttons .active.button:active, +.ui.grey.active.button, +.ui.grey.button .active.button:active { + background-color: @greyActive; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} + +/* Basic */ +.ui.basic.grey.buttons .button, +.ui.basic.grey.button { + box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important; + color: @grey !important; +} +.ui.basic.grey.buttons .button:hover, +.ui.basic.grey.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important; + color: @greyHover !important; +} +.ui.basic.grey.buttons .button:focus, +.ui.basic.grey.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important; + color: @greyHover !important; +} +.ui.basic.grey.buttons .active.button, +.ui.basic.grey.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important; + color: @greyDown !important; +} +.ui.basic.grey.buttons .button:active, +.ui.basic.grey.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important; + color: @greyDown !important; +} +.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.grey.buttons .button, +.ui.inverted.grey.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important; + color: @invertedTextColor; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover, +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus, +.ui.inverted.grey.buttons .button.active, +.ui.inverted.grey.button.active, +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + box-shadow: none !important; + color: @lightGreyTextColor; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover { + background-color: @lightGreyHover; +} +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus { + background-color: @lightGreyFocus; +} +.ui.inverted.grey.buttons .active.button, +.ui.inverted.grey.active.button { + background-color: @lightGreyActive; +} +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + background-color: @lightGreyDown; +} + +/* Inverted Basic */ +.ui.inverted.grey.basic.buttons .button, +.ui.inverted.grey.buttons .basic.button, +.ui.inverted.grey.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:hover, +.ui.inverted.grey.buttons .basic.button:hover, +.ui.inverted.grey.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important; + color: @lightGrey !important; +} +.ui.inverted.grey.basic.buttons .active.button, +.ui.inverted.grey.buttons .basic.active.button, +.ui.inverted.grey.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:active, +.ui.inverted.grey.buttons .basic.button:active, +.ui.inverted.grey.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important; + color: @white !important; +} + + +/*--- Brown ---*/ +.ui.brown.buttons .button, +.ui.brown.button { + background-color: @brown; + color: @brownTextColor; + text-shadow: @brownTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.brown.button { + box-shadow: @coloredBoxShadow; +} +.ui.brown.buttons .button:hover, +.ui.brown.button:hover { + background-color: @brownHover; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .button:focus, +.ui.brown.button:focus { + background-color: @brownFocus; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .button:active, +.ui.brown.button:active { + background-color: @brownDown; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .active.button, +.ui.brown.buttons .active.button:active, +.ui.brown.active.button, +.ui.brown.button .active.button:active { + background-color: @brownActive; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} + +/* Basic */ +.ui.basic.brown.buttons .button, +.ui.basic.brown.button { + box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important; + color: @brown !important; +} +.ui.basic.brown.buttons .button:hover, +.ui.basic.brown.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important; + color: @brownHover !important; +} +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important; + color: @brownHover !important; +} +.ui.basic.brown.buttons .active.button, +.ui.basic.brown.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important; + color: @brownDown !important; +} +.ui.basic.brown.buttons .button:active, +.ui.basic.brown.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important; + color: @brownDown !important; +} +.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.brown.buttons .button, +.ui.inverted.brown.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important; + color: @lightBrown; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover, +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus, +.ui.inverted.brown.buttons .button.active, +.ui.inverted.brown.button.active, +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + box-shadow: none !important; + color: @lightBrownTextColor; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover { + background-color: @lightBrownHover; +} +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus { + background-color: @lightBrownFocus; +} +.ui.inverted.brown.buttons .active.button, +.ui.inverted.brown.active.button { + background-color: @lightBrownActive; +} +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + background-color: @lightBrownDown; +} + +/* Inverted Basic */ +.ui.inverted.brown.basic.buttons .button, +.ui.inverted.brown.buttons .basic.button, +.ui.inverted.brown.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.brown.basic.buttons .button:hover, +.ui.inverted.brown.buttons .basic.button:hover, +.ui.inverted.brown.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .active.button, +.ui.inverted.brown.buttons .basic.active.button, +.ui.inverted.brown.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .button:active, +.ui.inverted.brown.buttons .basic.button:active, +.ui.inverted.brown.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important; + color: @lightBrown !important; +} + +/*--- Blue ---*/ +.ui.blue.buttons .button, +.ui.blue.button { + background-color: @blue; + color: @blueTextColor; + text-shadow: @blueTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.blue.button { + box-shadow: @coloredBoxShadow; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover { + background-color: @blueHover; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .button:focus, +.ui.blue.button:focus { + background-color: @blueFocus; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: @blueDown; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .active.button, +.ui.blue.buttons .active.button:active, +.ui.blue.active.button, +.ui.blue.button .active.button:active { + background-color: @blueActive; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} + +/* Basic */ +.ui.basic.blue.buttons .button, +.ui.basic.blue.button { + box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important; + color: @blue !important; +} +.ui.basic.blue.buttons .button:hover, +.ui.basic.blue.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important; + color: @blueHover !important; +} +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important; + color: @blueHover !important; +} +.ui.basic.blue.buttons .active.button, +.ui.basic.blue.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important; + color: @blueDown !important; +} +.ui.basic.blue.buttons .button:active, +.ui.basic.blue.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important; + color: @blueDown !important; +} +.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.blue.buttons .button, +.ui.inverted.blue.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; + color: @lightBlue; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover, +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus, +.ui.inverted.blue.buttons .button.active, +.ui.inverted.blue.button.active, +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + box-shadow: none !important; + color: @lightBlueTextColor; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover { + background-color: @lightBlueHover; +} +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus { + background-color: @lightBlueFocus; +} +.ui.inverted.blue.buttons .active.button, +.ui.inverted.blue.active.button { + background-color: @lightBlueActive; +} +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + background-color: @lightBlueDown; +} + +/* Inverted Basic */ +.ui.inverted.blue.basic.buttons .button, +.ui.inverted.blue.buttons .basic.button, +.ui.inverted.blue.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.blue.basic.buttons .button:hover, +.ui.inverted.blue.buttons .basic.button:hover, +.ui.inverted.blue.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .active.button, +.ui.inverted.blue.buttons .basic.active.button, +.ui.inverted.blue.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .button:active, +.ui.inverted.blue.buttons .basic.button:active, +.ui.inverted.blue.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important; + color: @lightBlue !important; +} + +/*--- Green ---*/ +.ui.green.buttons .button, +.ui.green.button { + background-color: @green; + color: @greenTextColor; + text-shadow: @greenTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.green.button { + box-shadow: @coloredBoxShadow; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background-color: @greenHover; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .button:focus, +.ui.green.button:focus { + background-color: @greenFocus; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: @greenDown; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .active.button, +.ui.green.buttons .active.button:active, +.ui.green.active.button, +.ui.green.button .active.button:active { + background-color: @greenActive; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} + + +/* Basic */ +.ui.basic.green.buttons .button, +.ui.basic.green.button { + box-shadow: 0px 0px 0px @basicBorderSize @green inset !important; + color: @green !important; +} +.ui.basic.green.buttons .button:hover, +.ui.basic.green.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important; + color: @greenHover !important; +} +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important; + color: @greenHover !important; +} +.ui.basic.green.buttons .active.button, +.ui.basic.green.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important; + color: @greenDown !important; +} +.ui.basic.green.buttons .button:active, +.ui.basic.green.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important; + color: @greenDown !important; +} +.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.green.buttons .button, +.ui.inverted.green.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; + color: @lightGreen; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover, +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus, +.ui.inverted.green.buttons .button.active, +.ui.inverted.green.button.active, +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + box-shadow: none !important; + color: @greenTextColor; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover { + background-color: @lightGreenHover; +} +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus { + background-color: @lightGreenFocus; +} +.ui.inverted.green.buttons .active.button, +.ui.inverted.green.active.button { + background-color: @lightGreenActive; +} +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + background-color: @lightGreenDown; +} + +/* Inverted Basic */ +.ui.inverted.green.basic.buttons .button, +.ui.inverted.green.buttons .basic.button, +.ui.inverted.green.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.green.basic.buttons .button:hover, +.ui.inverted.green.buttons .basic.button:hover, +.ui.inverted.green.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .active.button, +.ui.inverted.green.buttons .basic.active.button, +.ui.inverted.green.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .button:active, +.ui.inverted.green.buttons .basic.button:active, +.ui.inverted.green.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important; + color: @lightGreen !important; +} + +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: @orange; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.orange.button { + box-shadow: @coloredBoxShadow; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover { + background-color: @orangeHover; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .button:focus, +.ui.orange.button:focus { + background-color: @orangeFocus; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: @orangeDown; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .active.button, +.ui.orange.buttons .active.button:active, +.ui.orange.active.button, +.ui.orange.button .active.button:active { + background-color: @orangeActive; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} + +/* Basic */ +.ui.basic.orange.buttons .button, +.ui.basic.orange.button { + box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important; + color: @orange !important; +} +.ui.basic.orange.buttons .button:hover, +.ui.basic.orange.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important; + color: @orangeHover !important; +} +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important; + color: @orangeHover !important; +} +.ui.basic.orange.buttons .active.button, +.ui.basic.orange.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important; + color: @orangeDown !important; +} +.ui.basic.orange.buttons .button:active, +.ui.basic.orange.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important; + color: @orangeDown !important; +} +.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.orange.buttons .button, +.ui.inverted.orange.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; + color: @lightOrange; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover, +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus, +.ui.inverted.orange.buttons .button.active, +.ui.inverted.orange.button.active, +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + box-shadow: none !important; + color: @lightOrangeTextColor; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover { + background-color: @lightOrangeHover; +} +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus { + background-color: @lightOrangeFocus; +} +.ui.inverted.orange.buttons .active.button, +.ui.inverted.orange.active.button { + background-color: @lightOrangeActive; +} +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + background-color: @lightOrangeDown; +} + +/* Inverted Basic */ +.ui.inverted.orange.basic.buttons .button, +.ui.inverted.orange.buttons .basic.button, +.ui.inverted.orange.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.orange.basic.buttons .button:hover, +.ui.inverted.orange.buttons .basic.button:hover, +.ui.inverted.orange.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .active.button, +.ui.inverted.orange.buttons .basic.active.button, +.ui.inverted.orange.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .button:active, +.ui.inverted.orange.buttons .basic.button:active, +.ui.inverted.orange.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important; + color: @lightOrange !important; +} + +/*--- Pink ---*/ +.ui.pink.buttons .button, +.ui.pink.button { + background-color: @pink; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.pink.button { + box-shadow: @coloredBoxShadow; +} +.ui.pink.buttons .button:hover, +.ui.pink.button:hover { + background-color: @pinkHover; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .button:focus, +.ui.pink.button:focus { + background-color: @pinkFocus; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .button:active, +.ui.pink.button:active { + background-color: @pinkDown; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .active.button, +.ui.pink.buttons .active.button:active, +.ui.pink.active.button, +.ui.pink.button .active.button:active { + background-color: @pinkActive; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} + +/* Basic */ +.ui.basic.pink.buttons .button, +.ui.basic.pink.button { + box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important; + color: @pink !important; +} +.ui.basic.pink.buttons .button:hover, +.ui.basic.pink.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important; + color: @pinkHover !important; +} +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important; + color: @pinkHover !important; +} +.ui.basic.pink.buttons .active.button, +.ui.basic.pink.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important; + color: @pinkDown !important; +} +.ui.basic.pink.buttons .button:active, +.ui.basic.pink.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important; + color: @pinkDown !important; +} +.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.pink.buttons .button, +.ui.inverted.pink.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; + color: @lightPink; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover, +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus, +.ui.inverted.pink.buttons .button.active, +.ui.inverted.pink.button.active, +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + box-shadow: none !important; + color: @lightPinkTextColor; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover { + background-color: @lightPinkHover; +} +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus { + background-color: @lightPinkFocus; +} +.ui.inverted.pink.buttons .active.button, +.ui.inverted.pink.active.button { + background-color: @lightPinkActive; +} +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + background-color: @lightPinkDown; +} + +/* Inverted Basic */ +.ui.inverted.pink.basic.buttons .button, +.ui.inverted.pink.buttons .basic.button, +.ui.inverted.pink.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.pink.basic.buttons .button:hover, +.ui.inverted.pink.buttons .basic.button:hover, +.ui.inverted.pink.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .active.button, +.ui.inverted.pink.buttons .basic.active.button, +.ui.inverted.pink.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .button:active, +.ui.inverted.pink.buttons .basic.button:active, +.ui.inverted.pink.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important; + color: @lightPink !important; +} + + +/*--- Violet ---*/ +.ui.violet.buttons .button, +.ui.violet.button { + background-color: @violet; + color: @violetTextColor; + text-shadow: @violetTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.violet.button { + box-shadow: @coloredBoxShadow; +} +.ui.violet.buttons .button:hover, +.ui.violet.button:hover { + background-color: @violetHover; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .button:focus, +.ui.violet.button:focus { + background-color: @violetFocus; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .button:active, +.ui.violet.button:active { + background-color: @violetDown; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .active.button, +.ui.violet.buttons .active.button:active, +.ui.violet.active.button, +.ui.violet.button .active.button:active { + background-color: @violetActive; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} + +/* Basic */ +.ui.basic.violet.buttons .button, +.ui.basic.violet.button { + box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important; + color: @violet !important; +} +.ui.basic.violet.buttons .button:hover, +.ui.basic.violet.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important; + color: @violetHover !important; +} +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important; + color: @violetHover !important; +} +.ui.basic.violet.buttons .active.button, +.ui.basic.violet.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important; + color: @violetDown !important; +} +.ui.basic.violet.buttons .button:active, +.ui.basic.violet.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important; + color: @violetDown !important; +} +.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.violet.buttons .button, +.ui.inverted.violet.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important; + color: @lightViolet; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover, +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus, +.ui.inverted.violet.buttons .button.active, +.ui.inverted.violet.button.active, +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + box-shadow: none !important; + color: @lightVioletTextColor; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover { + background-color: @lightVioletHover; +} +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus { + background-color: @lightVioletFocus; +} +.ui.inverted.violet.buttons .active.button, +.ui.inverted.violet.active.button { + background-color: @lightVioletActive; +} +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + background-color: @lightVioletDown; +} + +/* Inverted Basic */ +.ui.inverted.violet.basic.buttons .button, +.ui.inverted.violet.buttons .basic.button, +.ui.inverted.violet.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.violet.basic.buttons .button:hover, +.ui.inverted.violet.buttons .basic.button:hover, +.ui.inverted.violet.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .active.button, +.ui.inverted.violet.buttons .basic.active.button, +.ui.inverted.violet.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .button:active, +.ui.inverted.violet.buttons .basic.button:active, +.ui.inverted.violet.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important; + color: @lightViolet !important; +} + +/*--- Purple ---*/ +.ui.purple.buttons .button, +.ui.purple.button { + background-color: @purple; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.purple.button { + box-shadow: @coloredBoxShadow; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover { + background-color: @purpleHover; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .button:focus, +.ui.purple.button:focus { + background-color: @purpleFocus; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: @purpleDown; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .active.button, +.ui.purple.buttons .active.button:active, +.ui.purple.active.button, +.ui.purple.button .active.button:active { + background-color: @purpleActive; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} + +/* Basic */ +.ui.basic.purple.buttons .button, +.ui.basic.purple.button { + box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important; + color: @purple !important; +} +.ui.basic.purple.buttons .button:hover, +.ui.basic.purple.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important; + color: @purpleHover !important; +} +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important; + color: @purpleHover !important; +} +.ui.basic.purple.buttons .active.button, +.ui.basic.purple.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important; + color: @purpleDown !important; +} +.ui.basic.purple.buttons .button:active, +.ui.basic.purple.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important; + color: @purpleDown !important; +} +.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.purple.buttons .button, +.ui.inverted.purple.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; + color: @lightPurple; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover, +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus, +.ui.inverted.purple.buttons .button.active, +.ui.inverted.purple.button.active, +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + box-shadow: none !important; + color: @lightPurpleTextColor; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover { + background-color: @lightPurpleHover; +} +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus { + background-color: @lightPurpleFocus; +} +.ui.inverted.purple.buttons .active.button, +.ui.inverted.purple.active.button { + background-color: @lightPurpleActive; +} +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + background-color: @lightPurpleDown; +} + +/* Inverted Basic */ +.ui.inverted.purple.basic.buttons .button, +.ui.inverted.purple.buttons .basic.button, +.ui.inverted.purple.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.purple.basic.buttons .button:hover, +.ui.inverted.purple.buttons .basic.button:hover, +.ui.inverted.purple.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .active.button, +.ui.inverted.purple.buttons .basic.active.button, +.ui.inverted.purple.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .button:active, +.ui.inverted.purple.buttons .basic.button:active, +.ui.inverted.purple.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important; + color: @lightPurple !important; +} + +/*--- Red ---*/ +.ui.red.buttons .button, +.ui.red.button { + background-color: @red; + color: @redTextColor; + text-shadow: @redTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.red.button { + box-shadow: @coloredBoxShadow; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover { + background-color: @redHover; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .button:focus, +.ui.red.button:focus { + background-color: @redFocus; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: @redDown; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .active.button, +.ui.red.buttons .active.button:active, +.ui.red.active.button, +.ui.red.button .active.button:active { + background-color: @redActive; + color: @redTextColor; + text-shadow: @redTextShadow; +} + +/* Basic */ +.ui.basic.red.buttons .button, +.ui.basic.red.button { + box-shadow: 0px 0px 0px @basicBorderSize @red inset !important; + color: @red !important; +} +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important; + color: @redHover !important; +} +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important; + color: @redHover !important; +} +.ui.basic.red.buttons .active.button, +.ui.basic.red.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important; + color: @redDown !important; +} +.ui.basic.red.buttons .button:active, +.ui.basic.red.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important; + color: @redDown !important; +} +.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.red.buttons .button, +.ui.inverted.red.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; + color: @lightRed; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover, +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus, +.ui.inverted.red.buttons .button.active, +.ui.inverted.red.button.active, +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + box-shadow: none !important; + color: @lightRedTextColor; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover { + background-color: @lightRedHover; +} +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus { + background-color: @lightRedFocus; +} +.ui.inverted.red.buttons .active.button, +.ui.inverted.red.active.button { + background-color: @lightRedActive; +} +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + background-color: @lightRedDown; +} + +/* Inverted Basic */ +.ui.inverted.red.basic.buttons .button, +.ui.inverted.red.buttons .basic.button, +.ui.inverted.red.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.red.basic.buttons .button:hover, +.ui.inverted.red.buttons .basic.button:hover, +.ui.inverted.red.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .active.button, +.ui.inverted.red.buttons .basic.active.button, +.ui.inverted.red.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .button:active, +.ui.inverted.red.buttons .basic.button:active, +.ui.inverted.red.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important; + color: @lightRed !important; +} + + +/*--- Teal ---*/ +.ui.teal.buttons .button, +.ui.teal.button { + background-color: @teal; + color: @tealTextColor; + text-shadow: @tealTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.teal.button { + box-shadow: @coloredBoxShadow; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover { + background-color: @tealHover; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .button:focus, +.ui.teal.button:focus { + background-color: @tealFocus; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: @tealDown; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .active.button, +.ui.teal.buttons .active.button:active, +.ui.teal.active.button, +.ui.teal.button .active.button:active { + background-color: @tealActive; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} + +/* Basic */ +.ui.basic.teal.buttons .button, +.ui.basic.teal.button { + box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important; + color: @teal !important; +} +.ui.basic.teal.buttons .button:hover, +.ui.basic.teal.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important; + color: @tealHover !important; +} +.ui.basic.teal.buttons .button:focus, +.ui.basic.teal.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important; + color: @tealHover !important; +} +.ui.basic.teal.buttons .active.button, +.ui.basic.teal.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important; + color: @tealDown !important; +} +.ui.basic.teal.buttons .button:active, +.ui.basic.teal.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important; + color: @tealDown !important; +} +.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.teal.buttons .button, +.ui.inverted.teal.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; + color: @lightTeal; +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover, +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus, +.ui.inverted.teal.buttons .button.active, +.ui.inverted.teal.button.active, +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + box-shadow: none !important; + color: @lightTealTextColor; +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover { + background-color: @lightTealHover; +} +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus { + background-color: @lightTealFocus; +} +.ui.inverted.teal.buttons .active.button, +.ui.inverted.teal.active.button { + background-color: @lightTealActive; +} +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + background-color: @lightTealDown; +} + +/* Inverted Basic */ +.ui.inverted.teal.basic.buttons .button, +.ui.inverted.teal.buttons .basic.button, +.ui.inverted.teal.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.teal.basic.buttons .button:hover, +.ui.inverted.teal.buttons .basic.button:hover, +.ui.inverted.teal.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .active.button, +.ui.inverted.teal.buttons .basic.active.button, +.ui.inverted.teal.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .button:active, +.ui.inverted.teal.buttons .basic.button:active, +.ui.inverted.teal.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important; + color: @lightTeal !important; +} + + +/*--- Olive ---*/ +.ui.olive.buttons .button, +.ui.olive.button { + background-color: @olive; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.olive.button { + box-shadow: @coloredBoxShadow; +} +.ui.olive.buttons .button:hover, +.ui.olive.button:hover { + background-color: @oliveHover; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .button:focus, +.ui.olive.button:focus { + background-color: @oliveFocus; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .button:active, +.ui.olive.button:active { + background-color: @oliveDown; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .active.button, +.ui.olive.buttons .active.button:active, +.ui.olive.active.button, +.ui.olive.button .active.button:active { + background-color: @oliveActive; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} + +/* Basic */ +.ui.basic.olive.buttons .button, +.ui.basic.olive.button { + box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important; + color: @olive !important; +} +.ui.basic.olive.buttons .button:hover, +.ui.basic.olive.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important; + color: @oliveHover !important; +} +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important; + color: @oliveHover !important; +} +.ui.basic.olive.buttons .active.button, +.ui.basic.olive.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important; + color: @oliveDown !important; +} +.ui.basic.olive.buttons .button:active, +.ui.basic.olive.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important; + color: @oliveDown !important; +} +.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.olive.buttons .button, +.ui.inverted.olive.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important; + color: @lightOlive; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover, +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus, +.ui.inverted.olive.buttons .button.active, +.ui.inverted.olive.button.active, +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + box-shadow: none !important; + color: @lightOliveTextColor; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover { + background-color: @lightOliveHover; +} +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus { + background-color: @lightOliveFocus; +} +.ui.inverted.olive.buttons .active.button, +.ui.inverted.olive.active.button { + background-color: @lightOliveActive; +} +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + background-color: @lightOliveDown; +} + +/* Inverted Basic */ +.ui.inverted.olive.basic.buttons .button, +.ui.inverted.olive.buttons .basic.button, +.ui.inverted.olive.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.olive.basic.buttons .button:hover, +.ui.inverted.olive.buttons .basic.button:hover, +.ui.inverted.olive.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .active.button, +.ui.inverted.olive.buttons .basic.active.button, +.ui.inverted.olive.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .button:active, +.ui.inverted.olive.buttons .basic.button:active, +.ui.inverted.olive.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important; + color: @lightOlive !important; +} + +/*--- Yellow ---*/ +.ui.yellow.buttons .button, +.ui.yellow.button { + background-color: @yellow; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.yellow.button { + box-shadow: @coloredBoxShadow; +} +.ui.yellow.buttons .button:hover, +.ui.yellow.button:hover { + background-color: @yellowHover; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .button:focus, +.ui.yellow.button:focus { + background-color: @yellowFocus; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .button:active, +.ui.yellow.button:active { + background-color: @yellowDown; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .active.button, +.ui.yellow.buttons .active.button:active, +.ui.yellow.active.button, +.ui.yellow.button .active.button:active { + background-color: @yellowActive; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} + +/* Basic */ +.ui.basic.yellow.buttons .button, +.ui.basic.yellow.button { + box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important; + color: @yellow !important; +} +.ui.basic.yellow.buttons .button:hover, +.ui.basic.yellow.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important; + color: @yellowHover !important; +} +.ui.basic.yellow.buttons .button:focus, +.ui.basic.yellow.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important; + color: @yellowHover !important; +} +.ui.basic.yellow.buttons .active.button, +.ui.basic.yellow.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important; + color: @yellowDown !important; +} +.ui.basic.yellow.buttons .button:active, +.ui.basic.yellow.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important; + color: @yellowDown !important; +} +.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.yellow.buttons .button, +.ui.inverted.yellow.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; + color: @lightYellow; +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover, +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus, +.ui.inverted.yellow.buttons .button.active, +.ui.inverted.yellow.button.active, +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + box-shadow: none !important; + color: @lightYellowTextColor; +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover { + background-color: @lightYellowHover; +} +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus { + background-color: @lightYellowFocus; +} +.ui.inverted.yellow.buttons .active.button, +.ui.inverted.yellow.active.button { + background-color: @lightYellowActive; +} +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + background-color: @lightYellowDown; +} + +/* Inverted Basic */ +.ui.inverted.yellow.basic.buttons .button, +.ui.inverted.yellow.buttons .basic.button, +.ui.inverted.yellow.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.yellow.basic.buttons .button:hover, +.ui.inverted.yellow.buttons .basic.button:hover, +.ui.inverted.yellow.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .active.button, +.ui.inverted.yellow.buttons .basic.active.button, +.ui.inverted.yellow.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .button:active, +.ui.inverted.yellow.buttons .basic.button:active, +.ui.inverted.yellow.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important; + color: @lightYellow !important; +} + + +/*------------------- + Primary +--------------------*/ + +/*--- Standard ---*/ +.ui.primary.buttons .button, +.ui.primary.button { + background-color: @primaryColor; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.primary.button { + box-shadow: @coloredBoxShadow; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover { + background-color: @primaryColorHover; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .button:focus, +.ui.primary.button:focus { + background-color: @primaryColorFocus; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: @primaryColorDown; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .active.button, +.ui.primary.buttons .active.button:active, +.ui.primary.active.button, +.ui.primary.button .active.button:active { + background-color: @primaryColorActive; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} + +/* Basic */ +.ui.basic.primary.buttons .button, +.ui.basic.primary.button { + box-shadow: 0px 0px 0px @basicBorderSize @primaryColor inset !important; + color: @primaryColor !important; +} +.ui.basic.primary.buttons .button:hover, +.ui.basic.primary.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorHover inset !important; + color: @primaryColorHover !important; +} +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorFocus inset !important; + color: @primaryColorHover !important; +} +.ui.basic.primary.buttons .active.button, +.ui.basic.primary.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorActive inset !important; + color: @primaryColorDown !important; +} +.ui.basic.primary.buttons .button:active, +.ui.basic.primary.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorDown inset !important; + color: @primaryColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/*------------------- + Secondary +--------------------*/ + +/* Standard */ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: @secondaryColor; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.secondary.button { + box-shadow: @coloredBoxShadow; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover { + background-color: @secondaryColorHover; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .button:focus, +.ui.secondary.button:focus { + background-color: @secondaryColorFocus; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: @secondaryColorDown; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .active.button, +.ui.secondary.buttons .active.button:active, +.ui.secondary.active.button, +.ui.secondary.button .active.button:active { + background-color: @secondaryColorActive; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} + +/* Basic */ +.ui.basic.secondary.buttons .button, +.ui.basic.secondary.button { + box-shadow: 0px 0px 0px @basicBorderSize @secondaryColor inset !important; + color: @secondaryColor !important; +} +.ui.basic.secondary.buttons .button:hover, +.ui.basic.secondary.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorHover inset !important; + color: @secondaryColorHover !important; +} +.ui.basic.secondary.buttons .button:focus, +.ui.basic.secondary.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorFocus inset !important; + color: @secondaryColorHover !important; +} +.ui.basic.secondary.buttons .active.button, +.ui.basic.secondary.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorActive inset !important; + color: @secondaryColorDown !important; +} +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorDown inset !important; + color: @secondaryColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/*--------------- + Positive +----------------*/ + +/* Standard */ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: @positiveColor; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.positive.button { + box-shadow: @coloredBoxShadow; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background-color: @positiveColorHover; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { + background-color: @positiveColorFocus; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: @positiveColorDown; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} +.ui.positive.buttons .active.button, +.ui.positive.buttons .active.button:active, +.ui.positive.active.button, +.ui.positive.button .active.button:active { + background-color: @positiveColorActive; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} + +/* Basic */ +.ui.basic.positive.buttons .button, +.ui.basic.positive.button { + box-shadow: 0px 0px 0px @basicBorderSize @positiveColor inset !important; + color: @positiveColor !important; +} +.ui.basic.positive.buttons .button:hover, +.ui.basic.positive.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorHover inset !important; + color: @positiveColorHover !important; +} +.ui.basic.positive.buttons .button:focus, +.ui.basic.positive.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorFocus inset !important; + color: @positiveColorHover !important; +} +.ui.basic.positive.buttons .active.button, +.ui.basic.positive.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorActive inset !important; + color: @positiveColorDown !important; +} +.ui.basic.positive.buttons .button:active, +.ui.basic.positive.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorDown inset !important; + color: @positiveColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/*--------------- + Negative +----------------*/ + +/* Standard */ +.ui.negative.buttons .button, +.ui.negative.button { + background-color: @negativeColor; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.negative.button { + box-shadow: @coloredBoxShadow; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover { + background-color: @negativeColorHover; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { + background-color: @negativeColorFocus; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: @negativeColorDown; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} +.ui.negative.buttons .active.button, +.ui.negative.buttons .active.button:active, +.ui.negative.active.button, +.ui.negative.button .active.button:active { + background-color: @negativeColorActive; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} + +/* Basic */ +.ui.basic.negative.buttons .button, +.ui.basic.negative.button { + box-shadow: 0px 0px 0px @basicBorderSize @negativeColor inset !important; + color: @negativeColor !important; +} +.ui.basic.negative.buttons .button:hover, +.ui.basic.negative.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorHover inset !important; + color: @negativeColorHover !important; +} +.ui.basic.negative.buttons .button:focus, +.ui.basic.negative.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorFocus inset !important; + color: @negativeColorHover !important; +} +.ui.basic.negative.buttons .active.button, +.ui.basic.negative.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorActive inset !important; + color: @negativeColorDown !important; +} +.ui.basic.negative.buttons .button:active, +.ui.basic.negative.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorDown inset !important; + color: @negativeColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/******************************* + Groups +*******************************/ + +.ui.buttons { + display: inline-flex; + flex-direction: row; + font-size: 0em; + vertical-align: baseline; + margin: @verticalMargin @horizontalMargin 0em 0em; +} +.ui.buttons:not(.basic):not(.inverted) { + box-shadow: @groupBoxShadow; +} + +/* Clearfix */ +.ui.buttons:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* Standard Group */ +.ui.buttons .button { + flex: 1 0 auto; + margin: 0em; + border-radius: 0em; + margin: @groupButtonOffset; +} +.ui.buttons > .ui.button:not(.basic):not(.inverted), +.ui.buttons:not(.basic):not(.inverted) > .button { + box-shadow: @groupButtonBoxShadow; +} + +.ui.buttons .button:first-child { + border-left: none; + margin-left: 0em; + border-top-left-radius: @borderRadius; + border-bottom-left-radius: @borderRadius; +} +.ui.buttons .button:last-child { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} + +/* Vertical Style */ +.ui.vertical.buttons { + display: inline-flex; + flex-direction: column; +} +.ui.vertical.buttons .button { + display: block; + float: none; + width: 100%; + margin: @verticalGroupOffset; + box-shadow: @verticalBoxShadow; + border-radius: 0em; +} +.ui.vertical.buttons .button:first-child { + border-top-left-radius: @borderRadius; + border-top-right-radius: @borderRadius; +} +.ui.vertical.buttons .button:last-child { + margin-bottom: 0px; + border-bottom-left-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} +.ui.vertical.buttons .button:only-child { + border-radius: @borderRadius; +} + +.loadUIOverrides(); + diff --git a/src/semantic/src/definitions/elements/container.less b/src/semantic/src/definitions/elements/container.less new file mode 100644 index 0000000..14b32f2 --- /dev/null +++ b/src/semantic/src/definitions/elements/container.less @@ -0,0 +1,143 @@ +/*! + * # Semantic UI - Container + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'container'; + +@import (multiple) '../../theme.config'; + +/******************************* + Container +*******************************/ + +/* All Sizes */ +.ui.container { + display: block; + max-width: @maxWidth !important; +} + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.container { + width: @mobileWidth !important; + margin-left: @mobileGutter !important; + margin-right: @mobileGutter !important; + } + .ui.grid.container { + width: @mobileGridWidth !important; + } + .ui.relaxed.grid.container { + width: @mobileRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @mobileVeryRelaxedGridWidth !important; + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.container { + width: @tabletWidth; + margin-left: @tabletGutter !important; + margin-right: @tabletGutter !important; + } + .ui.grid.container { + width: @tabletGridWidth !important; + } + .ui.relaxed.grid.container { + width: @tabletRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @tabletVeryRelaxedGridWidth !important; + } +} + +/* Small Monitor */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.container { + width: @computerWidth; + margin-left: @computerGutter !important; + margin-right: @computerGutter !important; + } + .ui.grid.container { + width: @computerGridWidth !important; + } + .ui.relaxed.grid.container { + width: @computerRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @computerVeryRelaxedGridWidth !important; + } +} + +/* Large Monitor */ +@media only screen and (min-width: @largeMonitorBreakpoint) { + .ui.container { + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter !important; + margin-right: @largeMonitorGutter !important; + } + .ui.grid.container { + width: @largeMonitorGridWidth !important; + } + .ui.relaxed.grid.container { + width: @largeMonitorRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @largeMonitorVeryRelaxedGridWidth !important; + } +} + +/******************************* + Types +*******************************/ + + +/* Text Container */ +.ui.text.container { + font-family: @textFontFamily; + max-width: @textWidth !important; + line-height: @textLineHeight; +} + +.ui.text.container { + font-size: @textSize; +} + +/* Fluid */ +.ui.fluid.container { + width: 100%; +} + + +/******************************* + Variations +*******************************/ + +.ui[class*="left aligned"].container { + text-align: left; +} +.ui[class*="center aligned"].container { + text-align: center; +} +.ui[class*="right aligned"].container { + text-align: right; +} +.ui.justified.container { + text-align: justify; + hyphens: auto; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/divider.less b/src/semantic/src/definitions/elements/divider.less new file mode 100755 index 0000000..28c0c68 --- /dev/null +++ b/src/semantic/src/definitions/elements/divider.less @@ -0,0 +1,255 @@ +/*! + * # Semantic UI - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'divider'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Divider +*******************************/ + +.ui.divider { + margin: @margin; + + line-height: 1; + height: 0em; + + font-weight: @fontWeight; + text-transform: @textTransform; + letter-spacing: @letterSpacing; + color: @color; + + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/*-------------- + Basic +---------------*/ + +.ui.divider:not(.vertical):not(.horizontal) { + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; +} + +/*-------------- + Coupling +---------------*/ + +/* Allow divider between each column row */ +.ui.grid > .column + .divider, +.ui.grid > .row > .column + .divider { + left: auto; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.divider { + display: table; + white-space: nowrap; + + height: auto; + margin: @horizontalMargin; + line-height: 1; + text-align: center; +} + +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; +} + +.ui.horizontal.divider:before { + background-position: right @horizontalDividerMargin top 50%; +} +.ui.horizontal.divider:after { + background-position: left @horizontalDividerMargin top 50%; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + + margin: 0rem; + padding: 0em; + width: auto; + height: 50%; + + line-height: 0em; + text-align: center; + transform: translateX(-50%); +} + +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: ''; + z-index: 3; + + border-left: @shadowWidth solid @shadowColor; + border-right: @highlightWidth solid @highlightColor; + + width: 0%; + height: @verticalDividerHeight; +} + +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} + +/* Inside grid */ +@media only screen and (max-width : @largestMobileScreen) { + + .ui.stackable.grid .ui.vertical.divider, + .ui.grid .stackable.row .ui.vertical.divider { + display: table; + white-space: nowrap; + height: auto; + margin: @horizontalMargin; + overflow: hidden; + line-height: 1; + text-align: center; + position: static; + top: 0; + left: 0; + transform: none; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + position: static; + left: 0; + border-left: none; + border-right: none; + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before { + background-position: right @horizontalDividerMargin top 50%; + } + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-position: left @horizontalDividerMargin top 50%; + } +} + +/*-------------- + Icon +---------------*/ + +.ui.divider > .icon { + margin: @dividerIconMargin; + font-size: @dividerIconSize; + height: 1em; + vertical-align: middle; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.divider { + border-color: transparent !important; +} +.ui.hidden.divider:before, +.ui.hidden.divider:after { + display: none; +} + +/*-------------- + Inverted +---------------*/ + +.ui.divider.inverted, +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: @invertedTextColor; +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: @invertedShadowColor !important; + border-left-color: @invertedShadowColor !important; + border-bottom-color: @invertedHighlightColor !important; + border-right-color: @invertedHighlightColor !important; +} + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.divider { + margin: 0em; +} + +/*-------------- + Clearing +---------------*/ + +.ui.clearing.divider { + clear: both; +} + +/*-------------- + Section +---------------*/ + +.ui.section.divider { + margin-top: @sectionMargin; + margin-bottom: @sectionMargin; +} + +/*-------------- + Sizes +---------------*/ + +.ui.divider { + font-size: @medium; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/flag.less b/src/semantic/src/definitions/elements/flag.less new file mode 100755 index 0000000..1f4145e --- /dev/null +++ b/src/semantic/src/definitions/elements/flag.less @@ -0,0 +1,52 @@ +/*! + * # Semantic UI - Flag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'flag'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Flag +*******************************/ + +i.flag:not(.icon) { + display: inline-block; + + width: @width; + height: @height; + + line-height: @height; + vertical-align: @verticalAlign; + margin: 0em @margin 0em 0em; + + text-decoration: inherit; + + speak: none; + font-smoothing: antialiased; + backface-visibility: hidden; +} + +/* Sprite */ +i.flag:not(.icon):before { + display: inline-block; + content: ''; + background: url(@spritePath) no-repeat -108px -1976px; + width: @width; + height: @height; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/header.less b/src/semantic/src/definitions/elements/header.less new file mode 100755 index 0000000..079cac8 --- /dev/null +++ b/src/semantic/src/definitions/elements/header.less @@ -0,0 +1,708 @@ +/*! + * # Semantic UI - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'header'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Header +*******************************/ + +/* Standard */ +.ui.header { + border: none; + margin: @margin; + padding: @verticalPadding @horizontalPadding; + font-family: @fontFamily; + font-weight: @fontWeight; + line-height: @lineHeight; + text-transform: @textTransform; + color: @textColor; +} + +.ui.header:first-child { + margin-top: @firstMargin; +} +.ui.header:last-child { + margin-bottom: @lastMargin; +} + +/*-------------- + Sub Header +---------------*/ + +.ui.header .sub.header { + display: block; + font-weight: normal; + padding: 0em; + margin: @subHeaderMargin; + font-size: @subHeaderFontSize; + line-height: @subHeaderLineHeight; + color: @subHeaderColor; +} + +/*-------------- + Icon +---------------*/ + +.ui.header > .icon { + display: table-cell; + opacity: @iconOpacity; + font-size: @iconSize; + padding-top: @iconOffset; + vertical-align: @iconAlignment; +} + +/* With Text Node */ +.ui.header .icon:only-child { + display: inline-block; + padding: 0em; + margin-right: @iconMargin; +} + +/*------------------- + Image +--------------------*/ + +.ui.header > .image, +.ui.header > img { + display: inline-block; + margin-top: @imageOffset; + width: @imageWidth; + height: @imageHeight; + vertical-align: @imageAlignment; +} +.ui.header > .image:only-child, +.ui.header > img:only-child { + margin-right: @imageMargin; +} + +/*-------------- + Content +---------------*/ + +.ui.header .content { + display: inline-block; + vertical-align: @contentAlignment; +} + +/* After Image */ +.ui.header > img + .content, +.ui.header > .image + .content { + padding-left: @imageMargin; + vertical-align: @contentImageAlignment; +} + +/* After Icon */ +.ui.header > .icon + .content { + padding-left: @iconMargin; + display: table-cell; + vertical-align: @contentIconAlignment; +} + + +/*-------------- + Loose Coupling +---------------*/ + +.ui.header .ui.label { + font-size: @labelSize; + margin-left: @labelDistance; + vertical-align: @labelVerticalAlign; +} + +/* Positioning */ +.ui.header + p { + margin-top: @nextParagraphDistance; +} + + + +/******************************* + Types +*******************************/ + + +/*-------------- + Page +---------------*/ + +h1.ui.header { + font-size: @h1; +} +h2.ui.header { + font-size: @h2; +} +h3.ui.header { + font-size: @h3; +} +h4.ui.header { + font-size: @h4; +} +h5.ui.header { + font-size: @h5; +} + + +/* Sub Header */ +h1.ui.header .sub.header { + font-size: @h1SubHeaderFontSize; +} +h2.ui.header .sub.header { + font-size: @h2SubHeaderFontSize; +} +h3.ui.header .sub.header { + font-size: @h3SubHeaderFontSize; +} +h4.ui.header .sub.header { + font-size: @h4SubHeaderFontSize; +} +h5.ui.header .sub.header { + font-size: @h5SubHeaderFontSize; +} + + +/*-------------- + Content Heading +---------------*/ + +.ui.huge.header { + min-height: 1em; + font-size: @hugeFontSize; +} +.ui.large.header { + font-size: @largeFontSize; +} +.ui.medium.header { + font-size: @mediumFontSize; +} +.ui.small.header { + font-size: @smallFontSize; +} +.ui.tiny.header { + font-size: @tinyFontSize; +} + +/* Sub Header */ +.ui.huge.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.large.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.header .sub.header { + font-size: @subHeaderFontSize; +} +.ui.small.header .sub.header { + font-size: @smallSubHeaderFontSize; +} +.ui.tiny.header .sub.header { + font-size: @tinySubHeaderFontSize; +} + +/*-------------- + Sub Heading +---------------*/ + +.ui.sub.header { + padding: 0em; + margin-bottom: @subHeadingDistance; + font-weight: @subHeadingFontWeight; + font-size: @subHeadingFontSize; + text-transform: @subHeadingTextTransform; + color: @subHeadingColor; +} + +.ui.small.sub.header { + font-size: @smallSubHeadingSize; +} +.ui.sub.header { + font-size: @subHeadingFontSize; +} +.ui.large.sub.header { + font-size: @largeSubHeadingSize; +} +.ui.huge.sub.header { + font-size: @hugeSubHeadingSize; +} + + + +/*------------------- + Icon +--------------------*/ + +.ui.icon.header { + display: inline-block; + text-align: center; + margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin; +} +.ui.icon.header:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} + +.ui.icon.header:first-child { + margin-top: @iconHeaderFirstMargin; +} +.ui.icon.header .icon { + float: none; + display: block; + width: auto; + height: auto; + line-height: 1; + padding: 0em; + font-size: @iconHeaderSize; + margin: 0em auto @iconHeaderMargin; + opacity: @iconHeaderOpacity; +} +.ui.icon.header .content { + display: block; + padding: 0em; +} +.ui.icon.header .circular.icon { + font-size: @circularHeaderIconSize; +} +.ui.icon.header .square.icon { + font-size: @squareHeaderIconSize; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} + +/******************************* + States +*******************************/ + +.ui.disabled.header { + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.header { + color: @invertedColor; +} +.ui.inverted.header .sub.header { + color: @invertedSubHeaderColor; +} +.ui.inverted.attached.header { + background: @invertedAttachedBackground; + box-shadow: none; + border-color: transparent; +} +.ui.inverted.block.header { + background: @invertedBlockBackground; + box-shadow: none; +} +.ui.inverted.block.header { + border-bottom: none; +} + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.header { + color: @red !important; +} +a.ui.red.header:hover { + color: @redHover !important; +} +.ui.red.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @red; +} + +/* Inverted */ +.ui.inverted.red.header { + color: @lightRed !important; +} +a.ui.inverted.red.header:hover { + color: @lightRedHover !important; +} + +/*--- Orange ---*/ +.ui.orange.header { + color: @orange !important; +} +a.ui.orange.header:hover { + color: @orangeHover !important; +} +.ui.orange.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @orange; +} +/* Inverted */ +.ui.inverted.orange.header { + color: @lightOrange !important; +} +a.ui.inverted.orange.header:hover { + color: @lightOrangeHover !important; +} + +/*--- Olive ---*/ +.ui.olive.header { + color: @olive !important; +} +a.ui.olive.header:hover { + color: @oliveHover !important; +} +.ui.olive.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @olive; +} +/* Inverted */ +.ui.inverted.olive.header { + color: @lightOlive !important; +} +a.ui.inverted.olive.header:hover { + color: @lightOliveHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.header { + color: @yellow !important; +} +a.ui.yellow.header:hover { + color: @yellowHover !important; +} +.ui.yellow.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @yellow; +} +/* Inverted */ +.ui.inverted.yellow.header { + color: @lightYellow !important; +} +a.ui.inverted.yellow.header:hover { + color: @lightYellowHover !important; +} + +/*--- Green ---*/ +.ui.green.header { + color: @green !important; +} +a.ui.green.header:hover { + color: @greenHover !important; +} +.ui.green.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @green; +} +/* Inverted */ +.ui.inverted.green.header { + color: @lightGreen !important; +} +a.ui.inverted.green.header:hover { + color: @lightGreenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.header { + color: @teal !important; +} +a.ui.teal.header:hover { + color: @tealHover !important; +} +.ui.teal.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @teal; +} +/* Inverted */ +.ui.inverted.teal.header { + color: @lightTeal !important; +} +a.ui.inverted.teal.header:hover { + color: @lightTealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.header { + color: @blue !important; +} +a.ui.blue.header:hover { + color: @blueHover !important; +} +.ui.blue.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @blue; +} +/* Inverted */ +.ui.inverted.blue.header { + color: @lightBlue !important; +} +a.ui.inverted.blue.header:hover { + color: @lightBlueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.header { + color: @violet !important; +} +a.ui.violet.header:hover { + color: @violetHover !important; +} +.ui.violet.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @violet; +} +/* Inverted */ +.ui.inverted.violet.header { + color: @lightViolet !important; +} +a.ui.inverted.violet.header:hover { + color: @lightVioletHover !important; +} + +/*--- Purple ---*/ +.ui.purple.header { + color: @purple !important; +} +a.ui.purple.header:hover { + color: @purpleHover !important; +} +.ui.purple.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @purple; +} +/* Inverted */ +.ui.inverted.purple.header { + color: @lightPurple !important; +} +a.ui.inverted.purple.header:hover { + color: @lightPurpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.header { + color: @pink !important; +} +a.ui.pink.header:hover { + color: @pinkHover !important; +} +.ui.pink.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @pink; +} +/* Inverted */ +.ui.inverted.pink.header { + color: @lightPink !important; +} +a.ui.inverted.pink.header:hover { + color: @lightPinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.header { + color: @brown !important; +} +a.ui.brown.header:hover { + color: @brownHover !important; +} +.ui.brown.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @brown; +} +/* Inverted */ +.ui.inverted.brown.header { + color: @lightBrown !important; +} +a.ui.inverted.brown.header:hover { + color: @lightBrownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.header { + color: @grey !important; +} +a.ui.grey.header:hover { + color: @greyHover !important; +} +.ui.grey.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @grey; +} +/* Inverted */ +.ui.inverted.grey.header { + color: @lightGrey !important; +} +a.ui.inverted.grey.header:hover { + color: @lightGreyHover !important; +} + + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.centered.header, +.ui.center.aligned.header { + text-align: center; +} +.ui.justified.header { + text-align: justify; +} +.ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui[class*="left floated"].header { + float: left; + margin-top: 0em; + margin-right: @floatedMargin; +} +.ui[class*="right floated"].header { + float: right; + margin-top: 0em; + margin-left: @floatedMargin; +} + +/*------------------- + Fitted +--------------------*/ + +.ui.fitted.header { + padding: 0em; +} + + +/*------------------- + Dividing +--------------------*/ + +.ui.dividing.header { + padding-bottom: @dividedBorderPadding; + border-bottom: @dividedBorder; +} +.ui.dividing.header .sub.header { + padding-bottom: @dividedSubHeaderPadding; +} +.ui.dividing.header .icon { + margin-bottom: @dividedIconPadding; +} + +.ui.inverted.dividing.header { + border-bottom-color: @invertedDividedBorderColor; +} + + +/*------------------- + Block +--------------------*/ + +.ui.block.header { + background: @blockBackground; + padding: @blockVerticalPadding @blockHorizontalPadding; + box-shadow: @blockBoxShadow; + border: @blockBorder; + border-radius: @blockBorderRadius; +} + +.ui.tiny.block.header { + font-size: @tinyBlock; +} +.ui.small.block.header { + font-size: @smallBlock; +} +.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumBlock; +} +.ui.large.block.header { + font-size: @largeBlock; +} +.ui.huge.block.header { + font-size: @hugeBlock; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + background: @attachedBackground; + padding: @attachedVerticalPadding @attachedHorizontalPadding; + margin-left: @attachedOffset; + margin-right: @attachedOffset; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached.block.header { + background: @blockBackground; +} + +.ui.attached:not(.top):not(.bottom).header { + margin-top: 0em; + margin-bottom: 0em; + border-top: none; + border-radius: 0em; +} +.ui.top.attached.header { + margin-bottom: 0em; + border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + border-top: none; + border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; +} + +/* Attached Sizes */ +.ui.tiny.attached.header { + font-size: @tinyAttachedSize; +} +.ui.small.attached.header { + font-size: @smallAttachedSize; +} +.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumAttachedSize; +} +.ui.large.attached.header { + font-size: @largeAttachedSize; +} +.ui.huge.attached.header { + font-size: @hugeAttachedSize; +} + +/*------------------- + Sizing +--------------------*/ + +.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumFontSize; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/icon.less b/src/semantic/src/definitions/elements/icon.less new file mode 100755 index 0000000..29290dc --- /dev/null +++ b/src/semantic/src/definitions/elements/icon.less @@ -0,0 +1,477 @@ +/*! + * # Semantic UI - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'icon'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Icon +*******************************/ + +@font-face { + font-family: 'Icons'; + src: @fallbackSRC; + src: @src; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} + +i.icon { + display: inline-block; + opacity: @opacity; + + margin: 0em @distanceFromText 0em 0em; + + width: @width; + height: @height; + + font-family: 'Icons'; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + text-align: center; + + speak: none; + font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + backface-visibility: hidden; +} + +i.icon:before { + background: none !important; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Loading +---------------*/ + +i.icon.loading { + height: 1em; + line-height: 1; + animation: icon-loading @loadingDuration linear infinite; +} +@keyframes icon-loading { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/******************************* + States +*******************************/ + +i.icon.hover { + opacity: 1 !important; +} + +i.icon.active { + opacity: 1 !important; +} + +i.emphasized.icon { + opacity: 1 !important; +} + +i.disabled.icon { + opacity: @disabledOpacity !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Fitted +--------------------*/ + +i.fitted.icon { + width: auto; + margin: 0em; +} + +/*------------------- + Link +--------------------*/ + +i.link.icon, i.link.icons { + cursor: pointer; + opacity: @linkOpacity; + transition: opacity @defaultDuration @defaultEasing; +} +i.link.icon:hover, i.link.icons:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + + padding: @circularPadding !important; + box-shadow: @circularShadow; + + width: @circularSize !important; + height: @circularSize !important; +} +i.circular.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + transform: scale(-1, 1); +} +i.vertically.flipped.icon { + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + transform: rotate(90deg); +} + +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + transform: rotate(-90deg); +} + +/*------------------- + Bordered +--------------------*/ + +i.bordered.icon { + line-height: 1; + vertical-align: baseline; + + width: @borderedSize; + height: @borderedSize; + padding: @borderedVerticalPadding @borderedHorizontalPadding !important; + box-shadow: @borderedShadow; +} +i.bordered.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Inverted +--------------------*/ + +/* Inverted Shapes */ +i.inverted.bordered.icon, +i.inverted.circular.icon { + background-color: @black !important; + color: @white !important; +} + +i.inverted.icon { + color: @white; +} + + +/*------------------- + Colors +--------------------*/ + +/* Red */ +i.red.icon { + color: @red !important; +} +i.inverted.red.icon { + color: @lightRed !important; +} +i.inverted.bordered.red.icon, +i.inverted.circular.red.icon { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +i.orange.icon { + color: @orange !important; +} +i.inverted.orange.icon { + color: @lightOrange !important; +} +i.inverted.bordered.orange.icon, +i.inverted.circular.orange.icon { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +i.yellow.icon { + color: @yellow !important; +} +i.inverted.yellow.icon { + color: @lightYellow !important; +} +i.inverted.bordered.yellow.icon, +i.inverted.circular.yellow.icon { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +i.olive.icon { + color: @olive !important; +} +i.inverted.olive.icon { + color: @lightOlive !important; +} +i.inverted.bordered.olive.icon, +i.inverted.circular.olive.icon { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +i.green.icon { + color: @green !important; +} +i.inverted.green.icon { + color: @lightGreen !important; +} +i.inverted.bordered.green.icon, +i.inverted.circular.green.icon { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +i.teal.icon { + color: @teal !important; +} +i.inverted.teal.icon { + color: @lightTeal !important; +} +i.inverted.bordered.teal.icon, +i.inverted.circular.teal.icon { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +i.blue.icon { + color: @blue !important; +} +i.inverted.blue.icon { + color: @lightBlue !important; +} +i.inverted.bordered.blue.icon, +i.inverted.circular.blue.icon { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +i.violet.icon { + color: @violet !important; +} +i.inverted.violet.icon { + color: @lightViolet !important; +} +i.inverted.bordered.violet.icon, +i.inverted.circular.violet.icon { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +i.purple.icon { + color: @purple !important; +} +i.inverted.purple.icon { + color: @lightPurple !important; +} +i.inverted.bordered.purple.icon, +i.inverted.circular.purple.icon { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +i.pink.icon { + color: @pink !important; +} +i.inverted.pink.icon { + color: @lightPink !important; +} +i.inverted.bordered.pink.icon, +i.inverted.circular.pink.icon { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +i.brown.icon { + color: @brown !important; +} +i.inverted.brown.icon { + color: @lightBrown !important; +} +i.inverted.bordered.brown.icon, +i.inverted.circular.brown.icon { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +i.grey.icon { + color: @grey !important; +} +i.inverted.grey.icon { + color: @lightGrey !important; +} +i.inverted.bordered.grey.icon, +i.inverted.circular.grey.icon { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +i.black.icon { + color: @black !important; +} +i.inverted.black.icon { + color: @lightBlack !important; +} +i.inverted.bordered.black.icon, +i.inverted.circular.black.icon { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Sizes +--------------------*/ + +i.mini.icon, +i.mini.icons { + line-height: 1; + font-size: @mini; +} +i.tiny.icon, +i.tiny.icons { + line-height: 1; + font-size: @tiny; +} +i.small.icon, +i.small.icons { + line-height: 1; + font-size: @small; +} +i.icon, +i.icons { + font-size: @medium; +} +i.large.icon, +i.large.icons { + line-height: 1; + vertical-align: middle; + font-size: @large; +} +i.big.icon, +i.big.icons { + line-height: 1; + vertical-align: middle; + font-size: @big; +} +i.huge.icon, +i.huge.icons { + line-height: 1; + vertical-align: middle; + font-size: @huge; +} +i.massive.icon, +i.massive.icons { + line-height: 1; + vertical-align: middle; + font-size: @massive; +} + +/******************************* + Groups +*******************************/ + +i.icons { + display: inline-block; + position: relative; + line-height: 1; +} + +i.icons .icon { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + margin: 0em; + margin: 0; +} + +i.icons .icon:first-child { + position: static; + width: auto; + height: auto; + vertical-align: top; + transform: none; + margin-right: @distanceFromText; +} + +/* Corner Icon */ +i.icons .corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; + transform: none; + font-size: @cornerIconSize; + text-shadow: @cornerIconShadow; +} + +i.icons .inverted.corner.icon { + text-shadow: @cornerIconInvertedShadow; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/image.less b/src/semantic/src/definitions/elements/image.less new file mode 100755 index 0000000..b996cde --- /dev/null +++ b/src/semantic/src/definitions/elements/image.less @@ -0,0 +1,324 @@ +/*! + * # Semantic UI - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'image'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Image +*******************************/ + +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: @placeholderColor; +} + +img.ui.image { + display: block; +} + +.ui.image svg, +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} + + +/******************************* + States +*******************************/ + +.ui.hidden.images, +.ui.hidden.image { + display: none; +} +.ui.hidden.transition.images, +.ui.hidden.transition.image { + display: block; + visibility: hidden; +} + + +.ui.disabled.images, +.ui.disabled.image { + cursor: default; + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inline +---------------*/ + +.ui.inline.image, +.ui.inline.image svg, +.ui.inline.image img { + display: inline-block; +} + +/*------------------ + Vertical Aligned +-------------------*/ + +.ui.top.aligned.images .image, +.ui.top.aligned.image, +.ui.top.aligned.image svg, +.ui.top.aligned.image img { + display: inline-block; + vertical-align: top; +} +.ui.middle.aligned.images .image, +.ui.middle.aligned.image, +.ui.middle.aligned.image svg, +.ui.middle.aligned.image img { + display: inline-block; + vertical-align: middle; +} +.ui.bottom.aligned.images .image, +.ui.bottom.aligned.image, +.ui.bottom.aligned.image svg, +.ui.bottom.aligned.image img { + display: inline-block; + vertical-align: bottom; +} + +/*-------------- + Rounded +---------------*/ + +.ui.rounded.images .image, +.ui.rounded.image, +.ui.rounded.images .image > *, +.ui.rounded.image > * { + border-radius: @roundedBorderRadius; +} + +/*-------------- + Bordered +---------------*/ + +.ui.bordered.images .image, +.ui.bordered.images img, +.ui.bordered.images svg, +.ui.bordered.image img, +.ui.bordered.image svg, +img.ui.bordered.image { + border: @imageBorder; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.images, +.ui.circular.image { + overflow: hidden; +} + +.ui.circular.images .image, +.ui.circular.image, +.ui.circular.images .image > *, +.ui.circular.image > * { + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.images, +.ui.fluid.image, +.ui.fluid.images img, +.ui.fluid.images svg, +.ui.fluid.image svg, +.ui.fluid.image img { + display: block; + width: 100%; + height: auto; +} + + +/*-------------- + Avatar +---------------*/ + +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.images svg, +.ui.avatar.image img, +.ui.avatar.image svg, +.ui.avatar.image { + margin-right: @avatarMargin; + + display: inline-block; + width: @avatarSize; + height: @avatarSize; + + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*------------------- + Spaced +--------------------*/ + +.ui.spaced.image { + display: inline-block !important; + margin-left: @spacedDistance; + margin-right: @spacedDistance; +} + +.ui[class*="left spaced"].image { + margin-left: @spacedDistance; + margin-right: 0em; +} + +.ui[class*="right spaced"].image { + margin-left: 0em; + margin-right: @spacedDistance; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: @floatedHorizontalMargin; + margin-bottom: @floatedVerticalMargin; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-right: 0em; + margin-bottom: @floatedVerticalMargin; + margin-left: @floatedHorizontalMargin; +} + +.ui.floated.images:last-child, +.ui.floated.image:last-child { + margin-bottom: 0em; +} + + +.ui.centered.images, +.ui.centered.image { + margin-left: auto; + margin-right: auto; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.images svg, +.ui.mini.image { + width: @miniWidth; + height: auto; + font-size: @mini; +} +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.images svg, +.ui.tiny.image { + width: @tinyWidth; + height: auto; + font-size: @tiny; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.images svg, +.ui.small.image { + width: @smallWidth; + height: auto; + font-size: @small; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.images svg, +.ui.medium.image { + width: @mediumWidth; + height: auto; + font-size: @medium; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.images svg, +.ui.large.image { + width: @largeWidth; + height: auto; + font-size: @large; +} +.ui.big.images .image, +.ui.big.images img, +.ui.big.images svg, +.ui.big.image { + width: @bigWidth; + height: auto; + font-size: @big; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.images svg, +.ui.huge.image { + width: @hugeWidth; + height: auto; + font-size: @huge; +} +.ui.massive.images .image, +.ui.massive.images img, +.ui.massive.images svg, +.ui.massive.image { + width: @massiveWidth; + height: auto; + font-size: @massive; +} + + +/******************************* + Groups +*******************************/ + +.ui.images { + font-size: 0em; + margin: 0em -@imageHorizontalMargin 0rem; +} + +.ui.images .image, +.ui.images img, +.ui.images svg { + display: inline-block; + margin: 0em @imageHorizontalMargin @imageVerticalMargin; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/input.less b/src/semantic/src/definitions/elements/input.less new file mode 100755 index 0000000..991a309 --- /dev/null +++ b/src/semantic/src/definitions/elements/input.less @@ -0,0 +1,507 @@ +/*! + * # Semantic UI - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'input'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Standard +*******************************/ + + +/*-------------------- + Inputs +---------------------*/ + +.ui.input { + position: relative; + font-weight: normal; + font-style: normal; + display: inline-flex; + color: @inputColor; +} +.ui.input input { + margin: 0em; + max-width: 100%; + flex: 1 0 auto; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-align: @textAlign; + line-height: @lineHeight; + + font-family: @inputFont; + padding: @padding; + + background: @background; + border: @border; + color: @inputColor; + border-radius: @borderRadius; + transition: @transition; + + box-shadow: @boxShadow; +} + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ + +.ui.input input::-webkit-input-placeholder { + color: @placeholderColor; +} +.ui.input input::-moz-placeholder { + color: @placeholderColor; +} +.ui.input input:-ms-input-placeholder { + color: @placeholderColor; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input input[disabled] { + opacity: @disabledOpacity; +} + +.ui.disabled.input input, +.ui.input input[disabled] { + pointer-events: none; +} + +/*-------------------- + Active +---------------------*/ + +.ui.input input:active, +.ui.input.down input { + border-color: @downBorderColor; + background: @downBackground; + color: @downColor; + box-shadow: @downBoxShadow; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.loading.input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} +.ui.loading.loading.input > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + + +/*-------------------- + Focus +---------------------*/ + +.ui.input.focus input, +.ui.input input:focus { + border-color: @focusBorderColor; + background: @focusBackground; + color: @focusColor; + box-shadow: @focusBoxShadow; +} +.ui.input.focus input::-webkit-input-placeholder, +.ui.input input:focus::-webkit-input-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus input::-moz-placeholder, +.ui.input input:focus::-moz-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus input:-ms-input-placeholder, +.ui.input input:focus:-ms-input-placeholder { + color: @placeholderFocusColor; +} + + + +/*-------------------- + Error +---------------------*/ + +.ui.input.error input { + background-color: @errorBackground; + border-color: @errorBorder; + color: @errorColor; + box-shadow: @errorBoxShadow; +} + +/* Error Placeholder */ +.ui.input.error input::-webkit-input-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error input::-moz-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error input:-ms-input-placeholder { + color: @placeholderErrorColor !important; +} + +/* Focused Error Placeholder */ +.ui.input.error input:focus::-webkit-input-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error input:focus::-moz-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error input:focus:-ms-input-placeholder { + color: @placeholderErrorFocusColor !important; +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Transparent +---------------------*/ + + +.ui.transparent.input input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + box-shadow: none !important; +} + +/* Transparent Icon */ +.ui.transparent.icon.input > i.icon { + width: @transparentIconWidth; +} +.ui.transparent.icon.input > input { + padding-left: 0em !important; + padding-right: @transparentIconMargin !important; +} +.ui.transparent[class*="left icon"].input > input { + padding-left: @transparentIconMargin !important; + padding-right: 0em !important; +} + +/* Transparent Inverted */ +.ui.transparent.inverted.input { + color: @transparentInvertedColor; +} +.ui.transparent.inverted.input input { + color: inherit; +} + +.ui.transparent.inverted.input input::-webkit-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input::-moz-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input:-ms-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} + + +/*-------------------- + Icon +---------------------*/ + +.ui.icon.input > i.icon { + cursor: default; + position: absolute; + line-height: 1; + text-align: center; + top: 0px; + right: 0px; + margin: 0em; + height: 100%; + + width: @iconWidth; + opacity: @iconOpacity; + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @iconTransition; +} +.ui.icon.input > i.icon:not(.link) { + pointer-events: none; +} +.ui.icon.input input { + padding-right: @iconMargin !important; +} + +.ui.icon.input > i.icon:before, +.ui.icon.input > i.icon:after { + left: 0; + position: absolute; + text-align: center; + top: 50%; + width: 100%; + margin-top: @iconOffset; +} +.ui.icon.input > i.link.icon { + cursor: pointer; +} +.ui.icon.input > i.circular.icon { + top: @circularIconVerticalOffset; + right: @circularIconHorizontalOffset; +} + +/* Left Icon Input */ +.ui[class*="left icon"].input > i.icon { + right: auto; + left: @borderWidth; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: @circularIconHorizontalOffset; +} +.ui[class*="left icon"].input > input { + padding-left: @iconMargin !important; + padding-right: @horizontalPadding !important; +} + +/* Focus */ +.ui.icon.input > input:focus ~ i.icon { + opacity: 1; +} + +/*-------------------- + Labeled +---------------------*/ + +/* Adjacent Label */ +.ui.labeled.input > .label { + flex: 0 0 auto; + margin: 0; + font-size: @relativeMedium; +} +.ui.labeled.input > .label:not(.corner) { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; +} + +/* Regular Label on Left */ +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left-color: transparent; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { + border-left-color: @focusBorderColor; +} + +/* Regular Label on Right */ +.ui[class*="right labeled"].input input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui[class*="right labeled"].input input + .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.ui[class*="right labeled"].input input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Corner Label */ +.ui.labeled.input .corner.label { + top: @labelCornerTop; + right: @labelCornerRight; + font-size: @labelCornerSize; + border-radius: 0em @borderRadius 0em 0em; +} + +/* Spacing with corner label */ +.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input { + padding-right: @labeledMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { + padding-right: @labeledIconInputMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { + margin-right: @labeledIconMargin; +} + +/* Left Labeled */ +.ui[class*="left corner labeled"].labeled.input input { + padding-left: @labeledMargin !important; +} +.ui[class*="left corner labeled"].icon.input > input { + padding-left: @labeledIconInputMargin !important; +} +.ui[class*="left corner labeled"].icon.input > .icon { + margin-left: @labeledIconMargin; +} + +/* Corner Label Position */ +.ui.input > .ui.corner.label { + top: @borderWidth; + right: @borderWidth; +} +.ui.input > .ui.left.corner.label { + right: auto; + left: @borderWidth; +} + + +/*-------------------- + Action +---------------------*/ + +.ui.action.input > .button, +.ui.action.input > .buttons { + display: flex; + align-items: center; + flex: 0 0 auto; +} +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; + margin: 0; +} + +/* Button on Right */ +.ui.action.input:not([class*="left action"]) > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child), +.ui.action.input:not([class*="left action"]) > .button:not(:first-child), +.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button { + border-radius: 0px; +} +.ui.action.input:not([class*="left action"]) > .dropdown:last-child, +.ui.action.input:not([class*="left action"]) > .button:last-child, +.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { + border-radius: 0px @borderRadius @borderRadius 0px; +} + +/* Input Focus */ +.ui.action.input:not([class*="left action"]) input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Button on Left */ +.ui[class*="left action"].input > input { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + border-left-color: transparent !important; +} +.ui[class*="left action"].input > .dropdown, +.ui[class*="left action"].input > .button, +.ui[class*="left action"].input > .buttons > .button { + border-radius: 0px; +} +.ui[class*="left action"].input > .dropdown:first-child, +.ui[class*="left action"].input > .button:first-child, +.ui[class*="left action"].input > .buttons:first-child > .button { + border-radius: @borderRadius 0px 0px @borderRadius; +} +/* Input Focus */ +.ui[class*="left action"].input > input:focus { + border-left-color: @focusBorderColor !important; +} + +/*-------------------- + Inverted +---------------------*/ + +/* Standard */ +.ui.inverted.input input { + border: none; +} + +/*-------------------- + Fluid +---------------------*/ + +.ui.fluid.input { + display: flex; +} +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: @relativeMini; +} +.ui.small.input { + font-size: @relativeSmall; +} +.ui.input { + font-size: @relativeMedium; +} +.ui.large.input { + font-size: @relativeLarge; +} +.ui.big.input { + font-size: @relativeBig; +} +.ui.huge.input { + font-size: @relativeHuge; +} +.ui.massive.input { + font-size: @relativeMassive; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/label.less b/src/semantic/src/definitions/elements/label.less new file mode 100755 index 0000000..7141666 --- /dev/null +++ b/src/semantic/src/definitions/elements/label.less @@ -0,0 +1,1257 @@ +/*! + * # Semantic UI - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'label'; + +@import (multiple) '../../theme.config'; + +/******************************* + Label +*******************************/ + +.ui.label { + display: inline-block; + line-height: 1; + vertical-align: @verticalAlign; + + margin: @verticalMargin @horizontalMargin; + + background-color: @backgroundColor; + background-image: @backgroundImage; + padding: @verticalPadding @horizontalPadding; + color: @color; + + text-transform: @textTransform; + font-weight: @fontWeight; + + border: @border; + border-radius: @borderRadius; + transition: @transition; +} + +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} + +/* Link */ +a.ui.label { + cursor: pointer; +} + +/* Inside Link */ +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: @linkOpacity; + transition: @linkTransition; +} +.ui.label > a:hover { + opacity: 1; +} + +/* Image */ +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: @imageHeight !important; +} + +/* Icon */ +.ui.label > .icon { + width: auto; + margin: 0em @iconDistance 0em 0em; +} + +/* Detail */ +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: @detailFontWeight; + margin-left: @detailMargin; + opacity: @detailOpacity; +} +.ui.label > .detail .icon { + margin: 0em @detailIconDistance 0em 0em; +} + + +/* Removable label */ +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + margin-right: 0em; + margin-left: @deleteMargin; + font-size: @deleteSize; + opacity: @deleteOpacity; + transition: @deleteTransition; +} +.ui.label > .delete.icon:hover { + opacity: 1; +} + +/*------------------- + Group +--------------------*/ + +.ui.labels > .label { + margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; +} + + +/*------------------- + Coupling +--------------------*/ + +.ui.header > .ui.label { + margin-top: @lineHeightOffset; +} + +/* Remove border radius on attached segment */ +.ui.attached.segment > .ui.top.left.attached.label, +.ui.bottom.attached.segment > .ui.top.left.attached.label { + border-top-left-radius: 0; +} +.ui.attached.segment > .ui.top.right.attached.label, +.ui.bottom.attached.segment > .ui.top.right.attached.label { + border-top-right-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.left.attached.label { + border-bottom-left-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.right.attached.label { + border-bottom-right-radius: 0; +} + +/* Padding on next content after a label */ +.ui.top.attached.label:first-child + :not(.attached), +.ui.top.attached.label + [class*="right floated"] + * { + margin-top: @attachedSegmentPadding !important; +} +.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { + margin-top: 0em; + margin-bottom: @attachedSegmentPadding !important; +} + + +/******************************* + Types +*******************************/ + +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + max-width: 9999px; + vertical-align: baseline; + text-transform: none; + + background: @imageLabelBackground; + padding: @imageLabelPadding; + border-radius: @imageLabelBorderRadius; + box-shadow: @imageLabelBoxShadow; +} + +.ui.image.label img { + display: inline-block; + vertical-align: top; + + height: @imageLabelImageHeight; + margin: @imageLabelImageMargin; + border-radius: @imageLabelImageBorderRadius; +} + +.ui.image.label .detail { + background: @imageLabelDetailBackground; + margin: @imageLabelDetailMargin; + padding: @imageLabelDetailPadding; + border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em; +} + +/*------------------- + Tag +--------------------*/ + +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding-left: @tagHorizontalPadding; + padding-right: @tagHorizontalPadding; + + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @tagTransition; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + transform: translateY(-50%) translateX(50%) rotate(-45deg); + + top: @tagTriangleTopOffset; + right: @tagTriangleRightOffset; + content: ''; + + background-color: inherit; + background-image: @tagTriangleBackgroundImage; + + width: @tagTriangleSize; + height: @tagTriangleSize; + transition: @tagTransition; +} + + +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -(@tagCircleSize / 2); + + margin-top: -(@tagCircleSize / 2); + background-color: @tagCircleColor !important; + width: @tagCircleSize; + height: @tagCircleSize; + + box-shadow: @tagCircleBoxShadow; + border-radius: @circularRadius; +} + + +/*------------------- + Corner Label +--------------------*/ + +.ui.corner.label { + position: absolute; + top: 0em; + right: 0em; + margin: 0em; + padding: 0em; + text-align: center; + + border-color: @backgroundColor; + + width: @cornerTriangleSize; + height: @cornerTriangleSize; + z-index: @cornerTriangleZIndex; + transition: @cornerTriangleTransition; +} + +/* Icon Label */ +.ui.corner.label{ + background-color: transparent !important; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + + width: 0em; + height: 0em; + background-color: transparent !important; + + border-top: 0em solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: @cornerTriangleSize solid transparent; + border-left: 0em solid transparent; + + border-right-color: inherit; + transition: @cornerTriangleTransition; +} + +.ui.corner.label .icon { + cursor: default; + position: relative; + top: @cornerIconTopOffset; + left: @cornerIconLeftOffset; + font-size: @cornerIconSize; + margin: 0em; +} + +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: @cornerTriangleSize solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + + border-top-color: inherit; +} +.ui.left.corner.label .icon { + left: -@cornerIconLeftOffset; +} + +/* Segment */ +.ui.segment > .ui.corner.label { + top: -1px; + right: -1px; +} +.ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; +} + +/*------------------- + Ribbon +--------------------*/ + +.ui.ribbon.label { + position: relative; + margin: 0em; + min-width: max-content; + border-radius: 0em @borderRadius @borderRadius 0em; + border-color: @ribbonShadowColor; +} + +.ui.ribbon.label:after { + position: absolute; + content: ''; + + top: 100%; + left: 0%; + background-color: transparent !important; + + border-style: solid; + border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em; + border-color: transparent; + border-right-color: inherit; + + width: 0em; + height: 0em; +} +/* Positioning */ +.ui.ribbon.label { + left: @ribbonOffset; + margin-right: -@ribbonTriangleSize; + padding-left: @ribbonDistance; + padding-right: @ribbonTriangleSize; +} +.ui[class*="right ribbon"].label { + left: @rightRibbonOffset; + padding-left: @ribbonTriangleSize; + padding-right: @ribbonDistance; +} + +/* Right Ribbon */ +.ui[class*="right ribbon"].label { + text-align: left; + transform: translateX(-100%); + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="right ribbon"].label:after { + left: auto; + right: 0%; + + border-style: solid; + border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em; + border-color: transparent; + border-top-color: inherit; +} + +/* Inside Table */ +.ui.image > .ribbon.label, +.ui.card .image > .ribbon.label { + position: absolute; + top: @ribbonImageTopDistance; +} +.ui.card .image > .ui.ribbon.label, +.ui.image > .ui.ribbon.label { + left: @ribbonImageOffset; +} +.ui.card .image > .ui[class*="right ribbon"].label, +.ui.image > .ui[class*="right ribbon"].label { + left: @rightRibbonImageOffset; + padding-left: @horizontalPadding; +} + +/* Inside Table */ +.ui.table td > .ui.ribbon.label { + left: @ribbonTableOffset; +} +.ui.table td > .ui[class*="right ribbon"].label { + left: @rightRibbonTableOffset; + padding-left: @horizontalPadding; +} + + +/*------------------- + Attached +--------------------*/ + +.ui[class*="top attached"].label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + + padding: @attachedVerticalPadding @attachedHorizontalPadding; + + border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em; +} +.ui[class*="bottom attached"].label { + top: auto; + bottom: 0em; + border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius; +} + +.ui[class*="top left attached"].label { + width: auto; + margin-top: 0em !important; + border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em; +} + +.ui[class*="top right attached"].label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius; +} +.ui[class*="bottom left attached"].label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius; +} +.ui[class*="bottom right attached"].label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.label.disabled { + opacity: 0.5; +} + +/*------------------- + Hover +--------------------*/ + +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: @labelHoverBackgroundColor; + border-color: @labelHoverBackgroundColor; + + background-image: @labelHoverBackgroundImage; + color: @labelHoverTextColor; +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + color: @labelHoverTextColor; +} + +/*------------------- + Active +--------------------*/ + +.ui.active.label { + background-color: @labelActiveBackgroundColor; + border-color: @labelActiveBackgroundColor; + + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} +.ui.active.label:before { + background-color: @labelActiveBackgroundColor; + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} + +/*------------------- + Active Hover +--------------------*/ + +a.ui.labels .active.label:hover, +a.ui.active.label:hover { + background-color: @labelActiveHoverBackgroundColor; + border-color: @labelActiveHoverBackgroundColor; + + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} +.ui.labels a.active.label:ActiveHover:before, +a.ui.active.label:ActiveHover:before { + background-color: @labelActiveHoverBackgroundColor; + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} + + +/*------------------- + Visible +--------------------*/ + +.ui.labels.visible .label, +.ui.label.visible:not(.dropdown) { + display: inline-block !important; +} + +/*------------------- + Hidden +--------------------*/ + +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: @red !important; + border-color: @red !important; + color: @redTextColor !important; +} +/* Link */ +.ui.red.labels .label:hover, +a.ui.red.label:hover{ + background-color: @redHover !important; + border-color: @redHover !important; + color: @redHoverTextColor !important; +} +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.red.ribbon.label { + border-color: @redRibbonShadow !important; +} +/* Basic */ +.ui.basic.red.label { + background-color: @white !important; + color: @red !important; + border-color: @red !important; +} +.ui.basic.red.labels a.label:hover, +a.ui.basic.red.label:hover { + background-color: @white !important; + color: @redHover !important; + border-color: @redHover !important; +} + +/*--- Orange ---*/ +.ui.orange.labels .label, +.ui.orange.label { + background-color: @orange !important; + border-color: @orange !important; + color: @orangeTextColor !important; +} +/* Link */ +.ui.orange.labels .label:hover, +a.ui.orange.label:hover{ + background-color: @orangeHover !important; + border-color: @orangeHover !important; + color: @orangeHoverTextColor !important; +} +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.orange.ribbon.label { + border-color: @orangeRibbonShadow !important; +} +/* Basic */ +.ui.basic.orange.label { + background-color: @white !important; + color: @orange !important; + border-color: @orange !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.orange.label:hover { + background-color: @white !important; + color: @orangeHover !important; + border-color: @orangeHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.labels .label, +.ui.yellow.label { + background-color: @yellow !important; + border-color: @yellow !important; + color: @yellowTextColor !important; +} +/* Link */ +.ui.yellow.labels .label:hover, +a.ui.yellow.label:hover{ + background-color: @yellowHover !important; + border-color: @yellowHover !important; + color: @yellowHoverTextColor !important; +} +/* Corner */ +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.yellow.ribbon.label { + border-color: @yellowRibbonShadow !important; +} +/* Basic */ +.ui.basic.yellow.label { + background-color: @white !important; + color: @yellow !important; + border-color: @yellow !important; +} +.ui.basic.yellow.labels a.label:hover, +a.ui.basic.yellow.label:hover { + background-color: @white !important; + color: @yellowHover !important; + border-color: @yellowHover !important; +} + +/*--- Olive ---*/ +.ui.olive.labels .label, +.ui.olive.label { + background-color: @olive !important; + border-color: @olive !important; + color: @oliveTextColor !important; +} +/* Link */ +.ui.olive.labels .label:hover, +a.ui.olive.label:hover{ + background-color: @oliveHover !important; + border-color: @oliveHover !important; + color: @oliveHoverTextColor !important; +} +/* Corner */ +.ui.olive.corner.label, +.ui.olive.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.olive.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.olive.label { + background-color: @white !important; + color: @olive !important; + border-color: @olive !important; +} +.ui.basic.olive.labels a.label:hover, +a.ui.basic.olive.label:hover { + background-color: @white !important; + color: @oliveHover !important; + border-color: @oliveHover !important; +} + +/*--- Green ---*/ +.ui.green.labels .label, +.ui.green.label { + background-color: @green !important; + border-color: @green !important; + color: @greenTextColor !important; +} +/* Link */ +.ui.green.labels .label:hover, +a.ui.green.label:hover{ + background-color: @greenHover !important; + border-color: @greenHover !important; + color: @greenHoverTextColor !important; +} +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.green.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.green.label { + background-color: @white !important; + color: @green !important; + border-color: @green !important; +} +.ui.basic.green.labels a.label:hover, +a.ui.basic.green.label:hover { + background-color: @white !important; + color: @greenHover !important; + border-color: @greenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: @teal !important; + border-color: @teal !important; + color: @tealTextColor !important; +} +/* Link */ +.ui.teal.labels .label:hover, +a.ui.teal.label:hover{ + background-color: @tealHover !important; + border-color: @tealHover !important; + color: @tealHoverTextColor !important; +} +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.teal.ribbon.label { + border-color: @tealRibbonShadow !important; +} +/* Basic */ +.ui.basic.teal.label { + background-color: @white !important; + color: @teal !important; + border-color: @teal !important; +} +.ui.basic.teal.labels a.label:hover, +a.ui.basic.teal.label:hover { + background-color: @white !important; + color: @tealHover !important; + border-color: @tealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: @blue !important; + border-color: @blue !important; + color: @blueTextColor !important; +} +/* Link */ +.ui.blue.labels .label:hover, +a.ui.blue.label:hover{ + background-color: @blueHover !important; + border-color: @blueHover !important; + color: @blueHoverTextColor !important; +} +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.blue.ribbon.label { + border-color: @blueRibbonShadow !important; +} +/* Basic */ +.ui.basic.blue.label { + background-color: @white !important; + color: @blue !important; + border-color: @blue !important; +} +.ui.basic.blue.labels a.label:hover, +a.ui.basic.blue.label:hover { + background-color: @white !important; + color: @blueHover !important; + border-color: @blueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.labels .label, +.ui.violet.label { + background-color: @violet !important; + border-color: @violet !important; + color: @violetTextColor !important; +} +/* Link */ +.ui.violet.labels .label:hover, +a.ui.violet.label:hover{ + background-color: @violetHover !important; + border-color: @violetHover !important; + color: @violetHoverTextColor !important; +} +/* Corner */ +.ui.violet.corner.label, +.ui.violet.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.violet.ribbon.label { + border-color: @violetRibbonShadow !important; +} +/* Basic */ +.ui.basic.violet.label { + background-color: @white !important; + color: @violet !important; + border-color: @violet !important; +} +.ui.basic.violet.labels a.label:hover, +a.ui.basic.violet.label:hover { + background-color: @white !important; + color: @violetHover !important; + border-color: @violetHover !important; +} + +/*--- Purple ---*/ +.ui.purple.labels .label, +.ui.purple.label { + background-color: @purple !important; + border-color: @purple !important; + color: @purpleTextColor !important; +} +/* Link */ +.ui.purple.labels .label:hover, +a.ui.purple.label:hover{ + background-color: @purpleHover !important; + border-color: @purpleHover !important; + color: @purpleHoverTextColor !important; +} +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.purple.ribbon.label { + border-color: @purpleRibbonShadow !important; +} +/* Basic */ +.ui.basic.purple.label { + background-color: @white !important; + color: @purple !important; + border-color: @purple !important; +} +.ui.basic.purple.labels a.label:hover, +a.ui.basic.purple.label:hover { + background-color: @white !important; + color: @purpleHover !important; + border-color: @purpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.labels .label, +.ui.pink.label { + background-color: @pink !important; + border-color: @pink !important; + color: @pinkTextColor !important; +} +/* Link */ +.ui.pink.labels .label:hover, +a.ui.pink.label:hover{ + background-color: @pinkHover !important; + border-color: @pinkHover !important; + color: @pinkHoverTextColor !important; +} +/* Corner */ +.ui.pink.corner.label, +.ui.pink.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.pink.ribbon.label { + border-color: @pinkRibbonShadow !important; +} +/* Basic */ +.ui.basic.pink.label { + background-color: @white !important; + color: @pink !important; + border-color: @pink !important; +} +.ui.basic.pink.labels a.label:hover, +a.ui.basic.pink.label:hover { + background-color: @white !important; + color: @pinkHover !important; + border-color: @pinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.labels .label, +.ui.brown.label { + background-color: @brown !important; + border-color: @brown !important; + color: @brownTextColor !important; +} +/* Link */ +.ui.brown.labels .label:hover, +a.ui.brown.label:hover{ + background-color: @brownHover !important; + border-color: @brownHover !important; + color: @brownHoverTextColor !important; +} +/* Corner */ +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.brown.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.brown.label { + background-color: @white !important; + color: @brown !important; + border-color: @brown !important; +} +.ui.basic.brown.labels a.label:hover, +a.ui.basic.brown.label:hover { + background-color: @white !important; + color: @brownHover !important; + border-color: @brownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.labels .label, +.ui.grey.label { + background-color: @grey !important; + border-color: @grey !important; + color: @greyTextColor !important; +} +/* Link */ +.ui.grey.labels .label:hover, +a.ui.grey.label:hover{ + background-color: @greyHover !important; + border-color: @greyHover !important; + color: @greyHoverTextColor !important; +} +/* Corner */ +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.grey.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.grey.label { + background-color: @white !important; + color: @grey !important; + border-color: @grey !important; +} +.ui.basic.grey.labels a.label:hover, +a.ui.basic.grey.label:hover { + background-color: @white !important; + color: @greyHover !important; + border-color: @greyHover !important; +} + +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: @black !important; + border-color: @black !important; + color: @blackTextColor !important; +} +/* Link */ +.ui.black.labels .label:hover, +a.ui.black.label:hover{ + background-color: @blackHover !important; + border-color: @blackHover !important; + color: @blackHoverTextColor !important; +} +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.black.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.black.label { + background-color: @white !important; + color: @black !important; + border-color: @black !important; +} +.ui.basic.black.labels a.label:hover, +a.ui.basic.black.label:hover { + background-color: @white !important; + color: @blackHover !important; + border-color: @blackHover !important; +} + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.label { + background: @basicBackground; + border: @basicBorder; + color: @basicColor; + box-shadow: @basicBoxShadow; +} + +/* Link */ +a.ui.basic.label:hover { + text-decoration: none; + background: @basicHoverBackground; + color: @basicHoverColor; + box-shadow: @basicHoverBorder; + box-shadow: @basicHoverBoxShadow; +} + +/* Pointing */ +.ui.basic.pointing.label:before { + border-color: inherit; +} + + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + box-sizing: border-box; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.labels .label, +.ui.inverted.label { + color: @invertedTextColor !important; +} + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: 0em @horizontalLabelMargin 0em 0em; + + padding: @horizontalLabelVerticalPadding @horizontalPadding; + min-width: @horizontalLabelMinWidth; + text-align: center; +} + + +/*------------------- + Circular +--------------------*/ + +.ui.circular.labels .label, +.ui.circular.label { + min-width: @circularMinSize; + min-height: @circularMinSize; + + padding: @circularPadding !important; + + line-height: 1em; + text-align: center; + border-radius: @circularRadius; +} +.ui.empty.circular.labels .label, +.ui.empty.circular.label { + min-width: 0em; + min-height: 0em; + overflow: hidden; + width: @emptyCircleSize; + height: @emptyCircleSize; + vertical-align: baseline; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.label { + position: relative; +} + +.ui.attached.pointing.label { + position: absolute; +} + +.ui.pointing.label:before { + background-color: inherit; + background-image: inherit; + border-width: none; + border-style: solid; + border-color: @pointingBorderColor; +} +/* Arrow */ +.ui.pointing.label:before { + position: absolute; + content: ''; + transform: rotate(45deg); + background-image: none; + + z-index: @pointingTriangleZIndex; + width: @pointingTriangleSize; + height: @pointingTriangleSize; + transition: @pointingTriangleTransition; +} + +/*--- Above ---*/ +.ui.pointing.label, +.ui[class*="pointing above"].label { + margin-top: @pointingVerticalDistance; +} +.ui.pointing.label:before, +.ui[class*="pointing above"].label:before { + border-width: @borderWidth 0px 0px @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 0%; + left: 50%; +} +/*--- Below ---*/ +.ui[class*="bottom pointing"].label, +.ui[class*="pointing below"].label { + margin-top: 0em; + margin-bottom: @pointingVerticalDistance; +} +.ui[class*="bottom pointing"].label:before, +.ui[class*="pointing below"].label:before { + border-width: 0px @borderWidth @borderWidth 0px; + top: auto; + right: auto; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; + left: 50%; +} +/*--- Left ---*/ +.ui[class*="left pointing"].label { + margin-top: 0em; + margin-left: @pointingHorizontalDistance; +} +.ui[class*="left pointing"].label:before { + border-width: 0px 0px @borderWidth @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/*--- Right ---*/ +.ui[class*="right pointing"].label { + margin-top: 0em; + margin-right: @pointingHorizontalDistance; +} +.ui[class*="right pointing"].label:before { + border-width: @borderWidth @borderWidth 0px 0px; + transform: translateX(50%) translateY(-50%) rotate(45deg); + top: 50%; + right: 0%; + bottom: auto; + left: auto; +} + +/* Basic Pointing */ + +/*--- Above ---*/ +.ui.basic.pointing.label:before, +.ui.basic[class*="pointing above"].label:before { + margin-top: @basicPointingTriangleOffset; +} +/*--- Below ---*/ +.ui.basic[class*="bottom pointing"].label:before, +.ui.basic[class*="pointing below"].label:before { + bottom: auto; + top: 100%; + margin-top: -@basicPointingTriangleOffset; +} +/*--- Left ---*/ +.ui.basic[class*="left pointing"].label:before { + top: 50%; + left: @basicPointingTriangleOffset; +} +/*--- Right ---*/ +.ui.basic[class*="right pointing"].label:before { + top: 50%; + right: @basicPointingTriangleOffset; +} + + +/*------------------ + Floating Label +-------------------*/ + +.ui.floating.label { + position: absolute; + z-index: @floatingZIndex; + top: @floatingTopOffset; + left: 100%; + margin: 0em 0em 0em @floatingLeftOffset !important; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.labels .label, +.ui.mini.label { + font-size: @mini; +} +.ui.tiny.labels .label, +.ui.tiny.label { + font-size: @tiny; +} +.ui.small.labels .label, +.ui.small.label { + font-size: @small; +} +.ui.labels .label, +.ui.label { + font-size: @medium; +} +.ui.large.labels .label, +.ui.large.label { + font-size: @large; +} +.ui.big.labels .label, +.ui.big.label { + font-size: @big; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: @huge; +} +.ui.massive.labels .label, +.ui.massive.label { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/list.less b/src/semantic/src/definitions/elements/list.less new file mode 100755 index 0000000..b9c9cf4 --- /dev/null +++ b/src/semantic/src/definitions/elements/list.less @@ -0,0 +1,951 @@ +/*! + * # Semantic UI - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'list'; + +@import (multiple) '../../theme.config'; + +/******************************* + List +*******************************/ + +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: @listStyleType; + margin: @margin; + padding: @verticalPadding @horizontalPadding; +} + +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; + padding-top: 0em; +} + +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; + padding-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list > .item, +.ui.list .list > .item { + display: list-item; + table-layout: fixed; + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemPadding; + line-height: @itemLineHeight; +} + +ul.ui.list > li:first-child:after, +ol.ui.list > li:first-child:after, +.ui.list > .list > .item, +.ui.list > .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +ul.ui.list li:first-child, +ol.ui.list li:first-child, +.ui.list .list > .item:first-child, +.ui.list > .item:first-child { + padding-top: 0em; +} +ul.ui.list li:last-child, +ol.ui.list li:last-child, +.ui.list .list > .item:last-child, +.ui.list > .item:last-child { + padding-bottom: 0em; +} + +/* Child List */ +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + clear: both; + margin: 0em; + padding: @childListPadding; +} + +/* Child Item */ +ul.ui.list ul li, +ol.ui.list ol li, +.ui.list .list > .item { + padding: @childItemPadding; + line-height: @childItemLineHeight; +} + + +/* Icon */ +.ui.list .list > .item > i.icon, +.ui.list > .item > i.icon { + display: table-cell; + margin: 0em; + padding-top: @iconOffset; + padding-right: @iconDistance; + vertical-align: @iconContentVerticalAlign; + transition: @iconTransition; +} +.ui.list .list > .item > i.icon:only-child, +.ui.list > .item > i.icon:only-child { + display: inline-block; + vertical-align: @iconVerticalAlign; +} + + +/* Image */ +.ui.list .list > .item > .image, +.ui.list > .item > .image { + display: table-cell; + background-color: transparent; + margin: 0em; + vertical-align: @imageAlign; +} +.ui.list .list > .item > .image:not(:only-child):not(img), +.ui.list > .item > .image:not(:only-child):not(img) { + padding-right: @imageDistance; +} +.ui.list .list > .item > .image img, +.ui.list > .item > .image img { + vertical-align: @imageAlign; +} + +.ui.list .list > .item > img.image, +.ui.list .list > .item > .image:only-child, +.ui.list > .item > img.image, +.ui.list > .item > .image:only-child { + display: inline-block; +} + +/* Content */ +.ui.list .list > .item > .content, +.ui.list > .item > .content { + line-height: @contentLineHeight; +} +.ui.list .list > .item > .image + .content, +.ui.list .list > .item > .icon + .content, +.ui.list > .item > .image + .content, +.ui.list > .item > .icon + .content { + display: table-cell; + padding: 0em 0em 0em @contentDistance; + vertical-align: @contentVerticalAlign; +} +.ui.list .list > .item > img.image + .content, +.ui.list > .item > img.image + .content { + display: inline-block; +} +.ui.list .list > .item > .content > .list, +.ui.list > .item > .content > .list { + margin-left: 0em; + padding-left: 0em; +} + +/* Header */ +.ui.list .list > .item .header, +.ui.list > .item .header { + display: block; + margin: 0em; + font-family: @itemHeaderFontFamily; + font-weight: @itemHeaderFontWeight; + color: @itemHeaderColor; +} + +/* Description */ +.ui.list .list > .item .description, +.ui.list > .item .description { + display: block; + color: @itemDescriptionColor; +} + +/* Child Link */ +.ui.list > .item a, +.ui.list .list > .item a { + cursor: pointer; +} + +/* Linking Item */ +.ui.list .list > a.item, +.ui.list > a.item { + cursor: pointer; + color: @itemLinkColor; +} +.ui.list .list > a.item:hover, +.ui.list > a.item:hover { + color: @itemLinkHoverColor; +} + +/* Linked Item Icons */ +.ui.list .list > a.item i.icon, +.ui.list > a.item i.icon { + color: @itemLinkIconColor; +} + +/* Header Link */ +.ui.list .list > .item a.header, +.ui.list > .item a.header { + cursor: pointer; + color: @itemHeaderLinkColor !important; +} +.ui.list .list > .item a.header:hover, +.ui.list > .item a.header:hover { + color: @itemHeaderLinkHoverColor !important; +} + +/* Floated Content */ +.ui[class*="left floated"].list { + float: left; +} +.ui[class*="right floated"].list { + float: right; +} + +.ui.list .list > .item [class*="left floated"], +.ui.list > .item [class*="left floated"] { + float: left; + margin: @leftFloatMargin; +} +.ui.list .list > .item [class*="right floated"], +.ui.list > .item [class*="right floated"] { + float: right; + margin: @rightFloatMargin; +} + +/******************************* + Coupling +*******************************/ + +.ui.menu .ui.list > .item, +.ui.menu .ui.list .list > .item { + display: list-item; + table-layout: fixed; + background-color: transparent; + + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemVerticalPadding @itemHorizontalPadding; + line-height: @itemLineHeight; +} +.ui.menu .ui.list .list > .item:before, +.ui.menu .ui.list > .item:before { + border: none; + background: none; +} +.ui.menu .ui.list .list > .item:first-child, +.ui.menu .ui.list > .item:first-child { + padding-top: 0em; +} +.ui.menu .ui.list .list > .item:last-child, +.ui.menu .ui.list > .item:last-child { + padding-bottom: 0em; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list > .item { + display: inline-block; + margin-left: @horizontalSpacing; + font-size: 1rem; +} +.ui.horizontal.list:not(.celled) > .item:first-child { + margin-left: 0em !important; + padding-left: 0em !important; +} +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} + +.ui.horizontal.list > .item > .image, +.ui.horizontal.list .list > .item > .image, +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list .list > .item > .icon, +.ui.horizontal.list > .item > .content, +.ui.horizontal.list .list > .item > .content { + vertical-align: @horizontalVerticalAlign; +} + +/* Padding on all elements */ +.ui.horizontal.list > .item:first-child, +.ui.horizontal.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Horizontal List */ +.ui.horizontal.list > .item > i.icon { + margin: 0em; + padding: 0em @horizontalIconDistance 0em 0em; +} +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list > .item > .icon + .content { + float: none; + display: inline-block; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.list .list > .disabled.item, +.ui.list > .disabled.item { + pointer-events: none; + color: @disabledColor !important; +} +.ui.inverted.list .list > .disabled.item, +.ui.inverted.list > .disabled.item { + color: @invertedDisabledColor !important; +} + +/*------------------- + Hover +--------------------*/ + +.ui.list .list > a.item:hover .icon, +.ui.list > a.item:hover .icon { + color: @itemLinkIconHoverColor; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.list .list > a.item > .icon, +.ui.inverted.list > a.item > .icon { + color: @invertedIconLinkColor; +} +.ui.inverted.list .list > .item .header, +.ui.inverted.list > .item .header { + color: @invertedHeaderColor; +} +.ui.inverted.list .list > .item .description, +.ui.inverted.list > .item .description { + color: @invertedDescriptionColor; +} + +/* Item Link */ +.ui.inverted.list .list > a.item, +.ui.inverted.list > a.item { + cursor: pointer; + color: @invertedItemLinkColor; +} +.ui.inverted.list .list > a.item:hover, +.ui.inverted.list > a.item:hover { + color: @invertedItemLinkHoverColor; +} + + +/* Linking Content */ +.ui.inverted.list .item a:not(.ui) { + color: @invertedItemLinkColor !important; +} +.ui.inverted.list .item a:not(.ui):hover { + color: @invertedItemLinkHoverColor !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.list[class*="top aligned"] .image, +.ui.list[class*="top aligned"] .content, +.ui.list [class*="top aligned"] { + vertical-align: top !important; +} +.ui.list[class*="middle aligned"] .image, +.ui.list[class*="middle aligned"] .content, +.ui.list [class*="middle aligned"] { + vertical-align: middle !important; +} +.ui.list[class*="bottom aligned"] .image, +.ui.list[class*="bottom aligned"] .content, +.ui.list [class*="bottom aligned"] { + vertical-align: bottom !important; +} + +/*------------------- + Link +--------------------*/ + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a:not(.ui) { + color: @linkListItemColor; + transition: @linkListTransition; +} +.ui.link.list a.item:hover, +.ui.link.list .item a:not(.ui):hover { + color: @linkListItemHoverColor; +} +.ui.link.list a.item:active, +.ui.link.list .item a:not(.ui):active { + color: @linkListItemDownColor; +} +.ui.link.list .active.item, +.ui.link.list .active.item a:not(.ui) { + color: @linkListItemActiveColor; +} + +/* Inverted */ +.ui.inverted.link.list .item, +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a:not(.ui) { + color: @invertedLinkListItemColor; +} +.ui.inverted.link.list a.item:hover, +.ui.inverted.link.list .item a:not(.ui):hover { + color: @invertedLinkListItemHoverColor; +} +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:not(.ui):active { + color: @invertedLinkListItemDownColor; +} +.ui.inverted.link.list a.active.item, +.ui.inverted.link.list .active.item a:not(.ui) { + color: @invertedLinkListItemActiveColor; +} + +/*------------------- + Selection +--------------------*/ + +.ui.selection.list .list > .item, +.ui.selection.list > .item { + cursor: pointer; + background: @selectionListBackground; + padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding; + margin: @selectionListItemMargin; + color: @selectionListColor; + border-radius: @selectionListItemBorderRadius; + transition: @selectionListTransition; +} +.ui.selection.list .list > .item:last-child, +.ui.selection.list > .item:last-child { + margin-bottom: 0em; +} +.ui.selection.list.list > .item:hover, +.ui.selection.list > .item:hover { + background: @selectionListHoverBackground; + color: @selectionListHoverColor; +} +.ui.selection.list .list > .item:active, +.ui.selection.list > .item:active { + background: @selectionListDownBackground; + color: @selectionListDownColor; +} +.ui.selection.list .list > .item.active, +.ui.selection.list > .item.active { + background: @selectionListActiveBackground; + color: @selectionListActiveColor; +} + +/* Inverted */ +.ui.inverted.selection.list > .item, +.ui.inverted.selection.list > .item { + background: @invertedSelectionListBackground; + color: @invertedSelectionListColor; +} +.ui.inverted.selection.list > .item:hover, +.ui.inverted.selection.list > .item:hover { + background: @invertedSelectionListHoverBackground; + color: @invertedSelectionListHoverColor; +} +.ui.inverted.selection.list > .item:active, +.ui.inverted.selection.list > .item:active { + background: @invertedSelectionListDownBackground; + color: @invertedSelectionListDownColor; +} +.ui.inverted.selection.list > .item.active, +.ui.inverted.selection.list > .item.active { + background: @invertedSelectionListActiveBackground; + color: @invertedSelectionListActiveColor; +} + +/* Celled / Divided Selection List */ +.ui.celled.selection.list .list > .item, +.ui.divided.selection.list .list > .item, +.ui.celled.selection.list > .item, +.ui.divided.selection.list > .item { + border-radius: 0em; +} + +/*------------------- + Animated +--------------------*/ + +.ui.animated.list > .item { + transition: @animatedListTransition; +} +.ui.animated.list:not(.horizontal) > .item:hover { + padding-left: @animatedListIndent; +} + +/*------------------- + Fitted +--------------------*/ +.ui.fitted.list:not(.selection) .list > .item, +.ui.fitted.list:not(.selection) > .item { + padding-left: 0em; + padding-right: 0em; +} +.ui.fitted.selection.list .list > .item, +.ui.fitted.selection.list > .item { + margin-left: -@selectionListItemHorizontalPadding; + margin-right: -@selectionListItemHorizontalPadding; +} + +/*------------------- + Bulleted +--------------------*/ + +ul.ui.list, +.ui.bulleted.list { + margin-left: @bulletDistance; +} +ul.ui.list li, +.ui.bulleted.list .list > .item, +.ui.bulleted.list > .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .list > .item:before, +.ui.bulleted.list > .item:before { + user-select: none; + pointer-events: none; + position: absolute; + top: auto; + left: auto; + font-weight: normal; + margin-left: @bulletOffset; + content: @bulletCharacter; + opacity: @bulletOpacity; + color: @bulletColor; + vertical-align: @bulletVerticalAlign; +} + +ul.ui.list li:before, +.ui.bulleted.list .list > a.item:before, +.ui.bulleted.list > a.item:before { + color: @bulletLinkColor; +} + +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: @bulletChildDistance; +} + +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list > .item { + margin-left: @horizontalBulletSpacing; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list > .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li::before, +.ui.horizontal.bulleted.list > .item::before { + color: @horizontalBulletColor; +} +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list > .item:first-child::before { + display: none; +} + +/*------------------- + Ordered +--------------------*/ + +ol.ui.list, +.ui.ordered.list, +.ui.ordered.list .list, +ol.ui.list ol { + counter-reset: ordered; + margin-left: @orderedCountDistance; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .list > .item, +.ui.ordered.list > .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .list > .item:before, +.ui.ordered.list > .item:before { + position: absolute; + top: auto; + left: auto; + user-select: none; + pointer-events: none; + margin-left: -(@orderedCountDistance); + counter-increment: @orderedCountName; + content: @orderedCountContent; + text-align: @orderedCountTextAlign; + color: @orderedCountColor; + vertical-align: @orderedCountVerticalAlign; + opacity: @orderedCountOpacity; +} + +ol.ui.inverted.list li:before, +.ui.ordered.inverted.list .list > .item:before, +.ui.ordered.inverted.list > .item:before { + color: @orderedInvertedCountColor; +} + +/* Value */ +.ui.ordered.list > .list > .item[data-value], +.ui.ordered.list > .item[data-value] { + content: attr(data-value); +} +ol.ui.list li[value]:before { + content: attr(value); +} + +/* Child Lists */ +ol.ui.list ol, +.ui.ordered.list .list { + margin-left: @orderedChildCountDistance; +} +ol.ui.list ol li:before, +.ui.ordered.list .list > .item:before { + margin-left: @orderedChildCountOffset; +} + +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .list > .item:before, +.ui.ordered.horizontal.list > .item:before { + position: static; + margin: 0em @horizontalOrderedCountDistance 0em 0em; +} + +/*------------------- + Divided +--------------------*/ + +.ui.divided.list > .item { + border-top: @dividedBorder; +} +.ui.divided.list .list > .item { + border-top: @dividedChildListBorder; +} +.ui.divided.list .item .list > .item { + border-top: @dividedChildItemBorder; +} +.ui.divided.list .list > .item:first-child, +.ui.divided.list > .item:first-child { + border-top: none; +} + +/* Sub Menu */ +.ui.divided.list:not(.horizontal) .list > .item:first-child { + border-top-width: @dividedBorderWidth; +} + +/* Divided bulleted */ +.ui.divided.bulleted.list:not(.horizontal), +.ui.divided.bulleted.list .list { + margin-left: 0em; + padding-left: 0em; +} +.ui.divided.bulleted.list > .item:not(.horizontal) { + padding-left: @bulletDistance; +} + +/* Divided Ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list .list > .item, +.ui.divided.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.divided.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.divided.ordered.list .item .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Divided Selection */ +.ui.divided.selection.list .list > .item, +.ui.divided.selection.list > .item { + margin: 0em; + border-radius: 0em; +} + +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list > .item:not(:first-child) { + padding-left: @horizontalDividedSpacing; +} +.ui.divided.horizontal.list > .item:not(:last-child) { + padding-right: @horizontalDividedSpacing; +} +.ui.divided.horizontal.list > .item { + border-top: none; + border-left: @dividedBorder; + margin: 0em; + line-height: @horizontalDividedLineHeight; +} +.ui.horizontal.divided.list > .item:first-child { + border-left: none; +} +/* Inverted */ +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list, +.ui.divided.inverted.horizontal.list > .item { + border-color: @dividedInvertedBorderColor; +} + + +/*------------------- + Celled +--------------------*/ + +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: @celledBorder; + padding-left: @celledHorizontalPadding; + padding-right: @celledHorizontalPadding; +} +.ui.celled.list > .item:last-child { + border-bottom: @celledBorder; +} + +/* Padding on all elements */ +.ui.celled.list > .item:first-child, +.ui.celled.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Sub Menu */ +.ui.celled.list .item .list > .item { + border-width: 0px; +} +.ui.celled.list .list > .item:first-child { + border-top-width: 0px; +} + +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; +} +.ui.celled.bulleted.list .list > .item, +.ui.celled.bulleted.list > .item { + padding-left: (@bulletDistance); +} +.ui.celled.bulleted.list .item .list { + margin-left: -(@bulletDistance); + margin-right: -(@bulletDistance); + padding-bottom: @itemVerticalPadding; +} + +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .list > .item, +.ui.celled.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.celled.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.celled.ordered.list .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .list > .item, +.ui.horizontal.celled.list > .item { + border-top: none; + border-left: @celledBorder; + margin: 0em; + padding-left: @horizontalCelledSpacing; + padding-right: @horizontalCelledSpacing; + + line-height: @horizontalCelledLineHeight; +} +.ui.horizontal.celled.list .list > .item:last-child, +.ui.horizontal.celled.list > .item:last-child { + border-bottom: none; + border-right: @celledBorder; +} + +/* Inverted */ +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: @celledInvertedBorder; +} +.ui.celled.inverted.horizontal.list .list > .item, +.ui.celled.inverted.horizontal.list > .item { + border-color: @celledInvertedBorder; +} + +/*------------------- + Relaxed +--------------------*/ + +.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { + padding-top: @relaxedItemVerticalPadding; +} +.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: @relaxedItemVerticalPadding; +} +.ui.horizontal.relaxed.list .list > .item:not(:first-child), +.ui.horizontal.relaxed.list > .item:not(:first-child) { + padding-left: @relaxedHorizontalPadding; +} +.ui.horizontal.relaxed.list .list > .item:not(:last-child), +.ui.horizontal.relaxed.list > .item:not(:last-child) { + padding-right: @relaxedHorizontalPadding; +} + +/* Very Relaxed */ +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { + padding-top: @veryRelaxedItemVerticalPadding; +} +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: @veryRelaxedItemVerticalPadding; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { + padding-left: @veryRelaxedHorizontalPadding; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { + padding-right: @veryRelaxedHorizontalPadding; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list { + font-size: @relativeMini; +} +.ui.tiny.list { + font-size: @relativeTiny; +} +.ui.small.list { + font-size: @relativeSmall; +} +.ui.list { + font-size: @relativeMedium; +} +.ui.large.list { + font-size: @relativeLarge; +} +.ui.big.list { + font-size: @relativeBig; +} +.ui.huge.list { + font-size: @relativeHuge; +} +.ui.massive.list { + font-size: @relativeMassive; +} + +.ui.mini.horizontal.list .list > .item, +.ui.mini.horizontal.list > .item { + font-size: @mini; +} +.ui.tiny.horizontal.list .list > .item, +.ui.tiny.horizontal.list > .item { + font-size: @tiny; +} +.ui.small.horizontal.list .list > .item, +.ui.small.horizontal.list > .item { + font-size: @small; +} +.ui.horizontal.list .list > .item, +.ui.horizontal.list > .item { + font-size: @medium; +} +.ui.large.horizontal.list .list > .item, +.ui.large.horizontal.list > .item { + font-size: @large; +} +.ui.big.horizontal.list .list > .item, +.ui.big.horizontal.list > .item { + font-size: @big; +} +.ui.huge.horizontal.list .list > .item, +.ui.huge.horizontal.list > .item { + font-size: @huge; +} +.ui.massive.horizontal.list .list > .item, +.ui.massive.horizontal.list > .item { + font-size: @massive; +} + +.loadUIOverrides(); + diff --git a/src/semantic/src/definitions/elements/loader.less b/src/semantic/src/definitions/elements/loader.less new file mode 100755 index 0000000..40d5de6 --- /dev/null +++ b/src/semantic/src/definitions/elements/loader.less @@ -0,0 +1,332 @@ +/*! + * # Semantic UI - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'loader'; + +@import (multiple) '../../theme.config'; + +/******************************* + Loader +*******************************/ + + +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: @loaderTopOffset; + left: @loaderLeftOffset; + margin: 0px; + text-align: center; + z-index: 1000; + transform: translateX(-50%) translateY(-50%); +} + +/* Static Shape */ +.ui.loader:before { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} + +/* Active Shape */ +.ui.loader:after { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + animation: loader @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @shapeBorderColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + +/* Active Animation */ +@keyframes loader { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Sizes */ +.ui.mini.loader:before, +.ui.mini.loader:after { + width: @mini; + height: @mini; + margin: @miniOffset; +} +.ui.tiny.loader:before, +.ui.tiny.loader:after { + width: @tiny; + height: @tiny; + margin: @tinyOffset; +} +.ui.small.loader:before, +.ui.small.loader:after { + width: @small; + height: @small; + margin: @smallOffset; +} +.ui.loader:before, +.ui.loader:after { + width: @medium; + height: @medium; + margin: @mediumOffset; +} +.ui.large.loader:before, +.ui.large.loader:after { + width: @large; + height: @large; + margin: @largeOffset; +} +.ui.big.loader:before, +.ui.big.loader:after { + width: @big; + height: @big; + margin: @bigOffset; +} +.ui.huge.loader:before, +.ui.huge.loader:after { + width: @huge; + height: @huge; + margin: @hugeOffset; +} +.ui.massive.loader:before, +.ui.massive.loader:after { + width: @massive; + height: @massive; + margin: @massiveOffset; +} + +/*------------------- + Coupling +--------------------*/ + +/* Show inside active dimmer */ +.ui.dimmer .loader { + display: block; +} + +/* Black Dimmer */ +.ui.dimmer .ui.loader { + color: @invertedLoaderTextColor; +} +.ui.dimmer .ui.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.dimmer .ui.loader:after { + border-color: @invertedShapeBorderColor; +} + +/* White Dimmer (Inverted) */ +.ui.inverted.dimmer .ui.loader { + color: @loaderTextColor; +} +.ui.inverted.dimmer .ui.loader:before { + border-color: @loaderFillColor; +} +.ui.inverted.dimmer .ui.loader:after { + border-color: @shapeBorderColor; +} + +/******************************* + Types +*******************************/ + + +/*------------------- + Text +--------------------*/ + +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} + + +/******************************* + States +*******************************/ + +.ui.indeterminate.loader:after { + animation-direction: @indeterminateDirection; + animation-duration: @indeterminateSpeed; +} + +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + + +/* Loader */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: @mini; + height: @mini; + font-size: @miniFontSize; +} +.ui.inverted.dimmer .ui.tiny.loader, +.ui.tiny.loader { + width: @tiny; + height: @tiny; + font-size: @tinyFontSize; +} +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: @small; + height: @small; + font-size: @smallFontSize; +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: @medium; + height: @medium; + font-size: @mediumFontSize; +} +.ui.inverted.dimmer .ui.large.loader, +.ui.large.loader { + width: @large; + height: @large; + font-size: @largeFontSize; +} +.ui.inverted.dimmer .ui.big.loader, +.ui.big.loader { + width: @big; + height: @big; + font-size: @bigFontSize; +} +.ui.inverted.dimmer .ui.huge.loader, +.ui.huge.loader { + width: @huge; + height: @huge; + font-size: @hugeFontSize; +} +.ui.inverted.dimmer .ui.massive.loader, +.ui.massive.loader { + width: @massive; + height: @massive; + font-size: @massiveFontSize; +} + +/* Text Loader */ +.ui.mini.text.loader { + min-width: @mini; + padding-top: (@mini + @textDistance); +} +.ui.tiny.text.loader { + min-width: @tiny; + padding-top: (@tiny + @textDistance); +} +.ui.small.text.loader { + min-width: @small; + padding-top: (@small + @textDistance); +} +.ui.text.loader { + min-width: @medium; + padding-top: (@medium + @textDistance); +} +.ui.large.text.loader { + min-width: @large; + padding-top: (@large + @textDistance); +} +.ui.big.text.loader { + min-width: @big; + padding-top: (@big + @textDistance); +} +.ui.huge.text.loader { + min-width: @huge; + padding-top: (@huge + @textDistance); +} +.ui.massive.text.loader { + min-width: @massive; + padding-top: (@massive + @textDistance); +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.loader { + color: @invertedLoaderTextColor +} +.ui.inverted.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.inverted.loader:after { + border-top-color: @invertedLoaderLineColor; +} + +/*------------------- + Inline +--------------------*/ + +.ui.inline.loader { + position: relative; + vertical-align: @inlineVerticalAlign; + margin: @inlineMargin; + left: 0em; + top: 0em; + transform: none; +} + +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} + +/* Centered Inline */ +.ui.centered.inline.loader.active, +.ui.centered.inline.loader.visible { + display: block; + margin-left: auto; + margin-right: auto; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/rail.less b/src/semantic/src/definitions/elements/rail.less new file mode 100755 index 0000000..7eacee7 --- /dev/null +++ b/src/semantic/src/definitions/elements/rail.less @@ -0,0 +1,154 @@ +/*! + * # Semantic UI - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'rail'; + +@import (multiple) '../../theme.config'; + +/******************************* + Rails +*******************************/ + +.ui.rail { + position: absolute; + top: 0%; + width: @width; + height: @height; +} + +.ui.left.rail { + left: auto; + right: 100%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + +.ui.right.rail { + left: 100%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Internal +---------------*/ + +.ui.left.internal.rail { + left: 0%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +.ui.right.internal.rail { + left: auto; + right: 0%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + + +/*-------------- + Dividing +---------------*/ + +.ui.dividing.rail { + width: @dividingWidth; +} +.ui.left.dividing.rail { + padding: 0em @splitDividingDistance 0em 0em; + margin: 0em @splitDividingDistance 0em 0em; + border-right: @dividingBorder; +} +.ui.right.dividing.rail { + border-left: @dividingBorder; + padding: 0em 0em 0em @splitDividingDistance; + margin: 0em 0em 0em @splitDividingDistance; +} + +/*-------------- + Distance +---------------*/ + +.ui.close.rail { + width: @closeWidth; +} +.ui.close.left.rail { + padding: 0em @splitCloseDistance 0em 0em; + margin: 0em @splitCloseDistance 0em 0em; +} +.ui.close.right.rail { + padding: 0em 0em 0em @splitCloseDistance; + margin: 0em 0em 0em @splitCloseDistance; +} + +.ui.very.close.rail { + width: @veryCloseWidth; +} +.ui.very.close.left.rail { + padding: 0em @splitVeryCloseDistance 0em 0em; + margin: 0em @splitVeryCloseDistance 0em 0em; +} +.ui.very.close.right.rail { + padding: 0em 0em 0em @splitVeryCloseDistance; + margin: 0em 0em 0em @splitVeryCloseDistance; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.left.rail, +.ui.attached.right.rail { + padding: 0em; + margin: 0em; +} + +/*-------------- + Sizing +---------------*/ + +.ui.mini.rail { + font-size: @mini; +} +.ui.tiny.rail { + font-size: @tiny; +} +.ui.small.rail { + font-size: @small; +} +.ui.rail { + font-size: @medium; +} +.ui.large.rail { + font-size: @large; +} +.ui.big.rail { + font-size: @big; +} +.ui.huge.rail { + font-size: @huge; +} +.ui.massive.rail { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/reveal.less b/src/semantic/src/definitions/elements/reveal.less new file mode 100755 index 0000000..353ba63 --- /dev/null +++ b/src/semantic/src/definitions/elements/reveal.less @@ -0,0 +1,265 @@ +/*! + * # Semantic UI - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'reveal'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reveal +*******************************/ + +.ui.reveal { + display: inherit; + position: relative !important; + font-size: 0em !important; +} + +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: @topZIndex !important; + transition: @transition; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: @bottomZIndex !important; +} + +/* Make sure hovered element is on top of other reveal */ +.ui.active.reveal .visible.content, +.ui.reveal:hover .visible.content { + z-index: @activeZIndex !important; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Slide +---------------*/ + +.ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.slide.reveal > .content { + display: block; + width: 100%; + float: left; + + margin: 0em; + transition: @slideTransition; +} + +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; + transform: translateX(100%) !important; +} +.ui.slide.active.reveal > .visible.content, +.ui.slide.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.slide.active.reveal > .hidden.content, +.ui.slide.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.right.reveal > .visible.content { + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .hidden.content { + transform: translateX(-100%) !important; +} +.ui.slide.right.active.reveal > .visible.content, +.ui.slide.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.slide.right.active.reveal > .hidden.content, +.ui.slide.right.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.up.reveal > .hidden.content { + transform: translateY(100%) !important; +} +.ui.slide.up.active.reveal > .visible.content, +.ui.slide.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.slide.up.active.reveal > .hidden.content, +.ui.slide.up.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + +.ui.slide.down.reveal > .hidden.content { + transform: translateY(-100%) !important; +} +.ui.slide.down.active.reveal > .visible.content, +.ui.slide.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} +.ui.slide.down.active.reveal > .hidden.content, +.ui.slide.down.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + + +/*-------------- + Fade +---------------*/ + +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.active.reveal > .visible.content, +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} + + +/*-------------- + Move +---------------*/ + +.ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.move.reveal > .content { + display: block; + float: left; + + margin: 0em; + transition: @moveTransition; +} + +.ui.move.reveal > .visible.content { + position: relative !important; +} +.ui.move.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; +} +.ui.move.active.reveal > .visible.content, +.ui.move.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.move.right.active.reveal > .visible.content, +.ui.move.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.move.up.active.reveal > .visible.content, +.ui.move.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.move.down.active.reveal > .visible.content, +.ui.move.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} + + + +/*-------------- + Rotate +---------------*/ + +.ui.rotate.reveal > .visible.content { + transition-duration: @transitionDuration; + transform: rotate(0deg); +} + +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + transform-origin: bottom right; +} +.ui.rotate.active.reveal > .visible.content, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + transform: rotate(@rotateDegrees); +} + +.ui.rotate.left.reveal > .visible.content { + transform-origin: bottom left; +} +.ui.rotate.left.active.reveal > .visible.content, +.ui.rotate.left.reveal:hover > .visible.content { + transform: rotate(-@rotateDegrees); +} + +/******************************* + States +*******************************/ + +.ui.disabled.reveal:hover > .visible.visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.hidden.content { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.reveal { + overflow: visible; +} + +/*-------------- + Instant +---------------*/ + +.ui.instant.reveal > .content { + transition-delay: 0s !important; +} + + +/*-------------- + Sizing +---------------*/ + +.ui.reveal > .content { + font-size: @medium !important; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/segment.less b/src/semantic/src/definitions/elements/segment.less new file mode 100755 index 0000000..4dfbe37 --- /dev/null +++ b/src/semantic/src/definitions/elements/segment.less @@ -0,0 +1,768 @@ +/*! + * # Semantic UI - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'segment'; + +@import (multiple) '../../theme.config'; + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: @background; + box-shadow: @boxShadow; + margin: @margin; + padding: @padding; + border-radius: @borderRadius; + border: @border; +} + +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} + + +/* Vertical */ +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + + background: none transparent; + border-radius: 0px; + box-shadow: none; + border: none; + border-bottom: @borderWidth solid @borderColor; +} +.ui.vertical.segment:last-child { + border-bottom: none; +} + + +/*------------------- + Loose Coupling +--------------------*/ + +/* Header */ +.ui.inverted.segment > .ui.header { + color: @white; +} + +/* Label */ +.ui[class*="bottom attached"].segment > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui[class*="top attached"].segment > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} + +/* Grid */ +.ui.page.grid.segment, +.ui.grid > .row > .ui.segment.column, +.ui.grid > .ui.segment.column { + padding-top: @pageGridMargin; + padding-bottom: @pageGridMargin; +} +.ui.grid.segment { + margin: @margin; + border-radius: @borderRadius; +} + +/* Table */ +.ui.basic.table.segment { + background: @background; + border: @border; + box-shadow: @boxShadow; +} +.ui[class*="very basic"].table.segment { + padding: @padding; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segments, +.ui.piled.segment { + margin: @piledMargin 0em; + box-shadow: @piledBoxShadow; + z-index: @piledZIndex; +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segments:after, +.ui.piled.segments:before, +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: @white; + visibility: visible; + content: ''; + display: block; + height: 100%; + left: 0px; + position: absolute; + width: 100%; + border: @piledBorder; + box-shadow: @piledBoxShadow; +} +.ui.piled.segments:before, +.ui.piled.segment:before { + transform: rotate(-@piledDegrees); + top: 0; + z-index: -2; +} +.ui.piled.segments:after, +.ui.piled.segment:after { + transform: rotate(@piledDegrees); + top: 0; + z-index: -1; +} + +/* Piled Attached */ +.ui[class*="top attached"].piled.segment { + margin-top: @piledMargin; + margin-bottom: 0em; +} +.ui.piled.segment[class*="top attached"]:first-child { + margin-top: 0em; +} +.ui.piled.segment[class*="bottom attached"] { + margin-top: 0em; + margin-bottom: @piledMargin; +} +.ui.piled.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Stacked +--------------------*/ + +.ui.stacked.segment { + padding-bottom: @stackedPadding; +} +.ui.stacked.segments:before, +.ui.stacked.segments:after, +.ui.stacked.segment:before, +.ui.stacked.segment:after { + content: ''; + position: absolute; + bottom: -(@stackedHeight / 2); + left: 0%; + + border-top: 1px solid @borderColor; + background: @stackedPageBackground; + + width: 100%; + height: @stackedHeight; + visibility: visible; +} +.ui.stacked.segments:before, +.ui.stacked.segment:before { + display: none; +} + +/* Add additional page */ +.ui.tall.stacked.segments:before, +.ui.tall.stacked.segment:before { + display: block; + bottom: 0px; +} + +/* Inverted */ +.ui.stacked.inverted.segments:before, +.ui.stacked.inverted.segments:after, +.ui.stacked.inverted.segment:before, +.ui.stacked.inverted.segment:after { + background-color: @subtleTransparentBlack; + border-top: 1px solid @selectedBorderColor; +} + +/*------------------- + Padded +--------------------*/ + +.ui.padded.segment { + padding: @paddedSegmentPadding; +} + +.ui[class*="very padded"].segment { + padding: @veryPaddedSegmentPadding; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.segment { + display: table; +} + +/* Compact Group */ +.ui.compact.segments { + display: inline-flex; +} +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + flex: 0 1 auto; +} + +/*------------------- + Circular +--------------------*/ + +.ui.circular.segment { + display: table-cell; + padding: @circularPadding; + text-align: center; + vertical-align: middle; + border-radius: 500em; +} + +/*------------------- + Raised +--------------------*/ + +.ui.raised.segments, +.ui.raised.segment { + box-shadow: @raisedBoxShadow; +} + + +/******************************* + Groups +*******************************/ + +/* Group */ +.ui.segments { + flex-direction: column; + position: relative; + margin: @groupedMargin; + border: @groupedBorder; + box-shadow: @groupedBoxShadow; + border-radius: @groupedBorderRadius; +} +.ui.segments:first-child { + margin-top: 0em; +} +.ui.segments:last-child { + margin-bottom: 0em; +} + + +/* Nested Segment */ +.ui.segments > .segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: @groupedSegmentMargin; + width: @groupedSegmentWidth; + box-shadow: @groupedSegmentBoxShadow; + border: @groupedSegmentBorder; + border-top: @groupedSegmentDivider; +} + +.ui.segments:not(.horizontal) > .segment:first-child { + top: @attachedTopOffset; + bottom: 0px; + border-top: none; + margin-top: 0em; + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Bottom */ +.ui.segments:not(.horizontal) > .segment:last-child { + top: @attachedBottomOffset; + bottom: 0px; + margin-top: 0em; + margin-bottom: 0em; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Only */ +.ui.segments:not(.horizontal) > .segment:only-child { + border-radius: @borderRadius; +} + + +/* Nested Group */ +.ui.segments > .ui.segments { + border-top: @groupedSegmentDivider; + margin: @nestedGroupMargin; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0em; +} + +/* Horizontal Group */ +.ui.horizontal.segments { + display: flex; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: @background; + box-shadow: @boxShadow; + margin: @margin; + border-radius: @borderRadius; + border: @border; +} + +/* Nested Horizontal Group */ +.ui.segments > .horizontal.segments { + margin: 0em; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-top: @groupedSegmentDivider; +} + +/* Horizontal Segment */ +.ui.horizontal.segments > .segment { + flex: 1 1 auto; + -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */ + margin: 0em; + min-width: 0px; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-left: @borderWidth solid @borderColor; +} + +/* Border Fixes */ +.ui.segments > .horizontal.segments:first-child { + border-top: none; +} +.ui.horizontal.segments > .segment:first-child { + border-left: none; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.segment { + opacity: @disabledOpacity; + color: @disabledTextColor; +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.segment { + position: relative; + cursor: default; + pointer-events: none; + text-shadow: none !important; + color: transparent !important; + transition: all 0s linear; +} +.ui.loading.segment:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + border-radius: @borderRadius; + z-index: @loaderDimmerZIndex; +} +.ui.loading.segment:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: segment-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; +} + +@keyframes segment-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.segment { + background: @basicBackground; + box-shadow: @basicBoxShadow; + border: @basicBorder; + border-radius: @basicBorderRadius; +} + +/*------------------- + Clearing +--------------------*/ + +.ui.clearing.segment:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.segment:not(.inverted) { + border-top: @coloredBorderSize solid @red; +} +.ui.inverted.red.segment { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +.ui.orange.segment:not(.inverted) { + border-top: @coloredBorderSize solid @orange; +} +.ui.inverted.orange.segment { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +.ui.yellow.segment:not(.inverted) { + border-top: @coloredBorderSize solid @yellow; +} +.ui.inverted.yellow.segment { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +.ui.olive.segment:not(.inverted) { + border-top: @coloredBorderSize solid @olive; +} +.ui.inverted.olive.segment { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: @coloredBorderSize solid @green; +} +.ui.inverted.green.segment { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: @coloredBorderSize solid @teal; +} +.ui.inverted.teal.segment { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: @coloredBorderSize solid @blue; +} +.ui.inverted.blue.segment { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: @coloredBorderSize solid @violet; +} +.ui.inverted.violet.segment { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: @coloredBorderSize solid @purple; +} +.ui.inverted.purple.segment { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: @coloredBorderSize solid @pink; +} +.ui.inverted.pink.segment { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: @coloredBorderSize solid @brown; +} +.ui.inverted.brown.segment { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: @coloredBorderSize solid @grey; +} +.ui.inverted.grey.segment { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: @coloredBorderSize solid @black; +} +.ui.inverted.black.segment { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="right aligned"].segment { + text-align: right; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.segment, +.ui[class*="left floated"].segment { + float: left; + margin-right: @floatedDistance; +} +.ui[class*="right floated"].segment { + float: right; + margin-left: @floatedDistance; +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.segment { + border: none; + box-shadow: none; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background: @invertedBackground; + color: @invertedTextColor; +} + +/* Nested */ +.ui.inverted.segment .segment { + color: @textColor; +} +.ui.inverted.segment .inverted.segment { + color: @invertedTextColor; +} + +/* Attached */ +.ui.inverted.attached.segment { + border-color: @solidWhiteBorderColor; +} + +/*------------------- + Emphasis +--------------------*/ + +/* Secondary */ +.ui.secondary.segment { + background: @secondaryBackground; + color: @secondaryColor; +} +.ui.secondary.inverted.segment { + background: @secondaryInvertedBackground; + color: @secondaryInvertedColor; +} + +/* Tertiary */ +.ui.tertiary.segment { + background: @tertiaryBackground; + color: @tertiaryColor; +} +.ui.tertiary.inverted.segment { + background: @tertiaryInvertedBackground; + color: @tertiaryInvertedColor; +} + + +/*------------------- + Attached +--------------------*/ + +/* Middle */ +.ui.attached.segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].segment { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.segment[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui.segment[class*="bottom attached"] { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Size +--------------------*/ + +.ui.mini.segments .segment, +.ui.mini.segment { + font-size: @mini; +} +.ui.tiny.segments .segment, +.ui.tiny.segment { + font-size: @tiny; +} +.ui.small.segments .segment, +.ui.small.segment { + font-size: @small; +} +.ui.segments .segment, +.ui.segment { + font-size: @medium; +} +.ui.large.segments .segment, +.ui.large.segment { + font-size: @large; +} +.ui.big.segments .segment, +.ui.big.segment { + font-size: @big; +} +.ui.huge.segments .segment, +.ui.huge.segment { + font-size: @huge; +} +.ui.massive.segments .segment, +.ui.massive.segment { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/elements/step.less b/src/semantic/src/definitions/elements/step.less new file mode 100755 index 0000000..d4c1937 --- /dev/null +++ b/src/semantic/src/definitions/elements/step.less @@ -0,0 +1,562 @@ +/*! + * # Semantic UI - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Step +*******************************/ + +/*-------------- + Load Theme +---------------*/ + +@type : 'element'; +@element : 'step'; + +@import (multiple) '../../theme.config'; + +/******************************* + Plural +*******************************/ + +.ui.steps { + display: inline-flex; + flex-direction: row; + align-items: stretch; + margin: @stepMargin; + background: @stepsBackground; + box-shadow: @stepsBoxShadow; + line-height: @lineHeight; + border-radius: @stepsBorderRadius; + border: @stepsBorder; +} + +/* First Steps */ +.ui.steps:first-child { + margin-top: 0em; +} + +/* Last Steps */ +.ui.steps:last-child { + margin-bottom: 0em; +} + + +/******************************* + Singular +*******************************/ + +.ui.steps .step { + position: relative; + display: flex; + flex: 1 0 auto; + flex-wrap: wrap; + flex-direction: row; + vertical-align: middle; + align-items: center; + justify-content: @justifyContent; + + margin: @verticalMargin @horizontalMargin; + padding: @verticalPadding @horizontalPadding; + background: @background; + color: @textColor; + box-shadow: @boxShadow; + border-radius: @borderRadius; + border: @border; + border-right: @divider; + transition: @transition; +} + +/* Arrow */ +.ui.steps .step:after { + display: none; + position: absolute; + z-index: 2; + content: ''; + top: @arrowTopOffset; + right: @arrowRightOffset; + border: medium none; + background-color: @arrowBackgroundColor; + width: @arrowSize; + height: @arrowSize; + + border-style: solid; + border-color: @borderColor; + border-width: @arrowBorderWidth; + + transition: @transition; + transform: translateY(-50%) translateX(50%) rotate(-45deg); +} + +/* First Step */ +.ui.steps .step:first-child { + padding-left: @horizontalPadding; + border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius; +} + +/* Last Step */ +.ui.steps .step:last-child { + border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em; +} +.ui.steps .step:last-child { + border-right: none; + margin-right: 0em; +} + +/* Only Step */ +.ui.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/******************************* + Content +*******************************/ + +/* Title */ +.ui.steps .step .title { + font-family: @titleFontFamily; + font-size: @titleFontSize; + font-weight: @titleFontWeight; +} +.ui.steps .step > .title { + width: 100%; +} + +/* Description */ +.ui.steps .step .description { + font-weight: @descriptionFontWeight; + font-size: @descriptionFontSize; + color: @descriptionColor; +} +.ui.steps .step > .description { + width: 100%; +} +.ui.steps .step .title ~ .description { + margin-top: @descriptionDistance; +} + +/* Icon */ +.ui.steps .step > .icon { + line-height: 1; + font-size: @iconSize; + margin: 0em @iconDistance 0em 0em; +} +.ui.steps .step > .icon, +.ui.steps .step > .icon ~ .content { + display: block; + flex: 0 1 auto; + align-self: @iconAlign; +} +.ui.steps .step > .icon ~ .content { + flex-grow: 1 0 auto; +} + +/* Horizontal Icon */ +.ui.steps:not(.vertical) .step > .icon { + width: auto; +} + +/* Link */ +.ui.steps .link.step, +.ui.steps a.step { + cursor: pointer; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Ordered +---------------*/ + +.ui.ordered.steps { + counter-reset: ordered; +} +.ui.ordered.steps .step:before { + display: block; + position: static; + text-align: center; + content: counters(ordered, "."); + align-self: @iconAlign; + margin-right: @iconDistance; + font-size: @iconSize; + counter-increment: ordered; + font-family: @orderedFontFamily; + font-weight: @orderedFontWeight; +} + +.ui.ordered.steps .step > * { + display: block; + align-self: @iconAlign; +} + + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.steps { + display: inline-flex; + flex-direction: column; + overflow: visible; +} +.ui.vertical.steps .step { + justify-content: flex-start; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; + border-right: none; + border-bottom: @verticalDivider; +} +.ui.vertical.steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.vertical.steps .step:last-child { + border-bottom: none; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.vertical.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/* Arrow */ +.ui.vertical.steps .step:after { + display: none; +} +.ui.vertical.steps .step:after { + top: @verticalArrowTopOffset; + right: @verticalArrowRightOffset; + border-width: @verticalArrowBorderWidth; +} + +.ui.vertical.steps .step:after { + display: @verticalArrowDisplay; +} +.ui.vertical.steps .active.step:after { + display: @verticalActiveArrowDisplay; +} +.ui.vertical.steps .step:last-child:after { + display: @verticalLastArrowDisplay; +} +.ui.vertical.steps .active.step:last-child:after { + display: @verticalActiveLastArrowDisplay; +} + + +/*--------------- + Responsive +----------------*/ + +/* Mobile (Default) */ +@media only screen and (max-width: (@largestMobileScreen)) { + +.ui.steps { + display: inline-flex; + overflow: visible; + flex-direction: column; +} +.ui.steps .step { + width: 100% !important; + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; +} +.ui.steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} + +/* Arrow */ +.ui.steps .step:after { + display: none !important; +} + +/* Content */ +.ui.steps .step .content { + text-align: center; +} + +/* Icon */ +.ui.steps .step > .icon, +.ui.ordered.steps .step:before { + margin: 0em 0em @mobileIconDistance 0em; +} + +} + +/******************************* + States +*******************************/ + +/* Link Hover */ +.ui.steps .link.step:hover::after, +.ui.steps .link.step:hover, +.ui.steps a.step:hover::after, +.ui.steps a.step:hover { + background: @hoverBackground; + color: @hoverColor; +} + +/* Link Down */ +.ui.steps .link.step:active::after, +.ui.steps .link.step:active, +.ui.steps a.step:active::after, +.ui.steps a.step:active { + background: @downBackground; + color: @downColor; +} + +/* Active */ +.ui.steps .step.active { + cursor: auto; + background: @activeBackground; +} +.ui.steps .step.active:after { + background: @activeBackground; +} +.ui.steps .step.active .title { + color: @activeColor; +} +.ui.ordered.steps .step.active:before, +.ui.steps .active.step .icon { + color: @activeIconColor; +} + +/* Active Arrow */ +.ui.steps .step:after { + display: @arrowDisplay; +} +.ui.steps .active.step:after { + display: @activeArrowDisplay; +} +.ui.steps .step:last-child:after { + display: @lastArrowDisplay; +} +.ui.steps .active.step:last-child:after { + display: @activeLastArrowDisplay; +} + +/* Active Hover */ +.ui.steps .link.active.step:hover::after, +.ui.steps .link.active.step:hover, +.ui.steps a.active.step:hover::after, +.ui.steps a.active.step:hover { + cursor: pointer; + background: @activeHoverBackground; + color: @activeHoverColor; +} + +/* Completed */ +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + color: @completedColor; +} + +/* Disabled */ +.ui.steps .disabled.step { + cursor: auto; + background: @disabledBackground; + pointer-events: none; +} +.ui.steps .disabled.step, +.ui.steps .disabled.step .title, +.ui.steps .disabled.step .description { + color: @disabledColor; +} +.ui.steps .disabled.step:after { + background: @disabledBackground; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + +/* Tablet Or Below */ +@media only screen and (max-width: @largestTabletScreen) { + +.ui[class*="tablet stackable"].steps { + display: inline-flex; + overflow: visible; + flex-direction: column; +} + +/* Steps */ +.ui[class*="tablet stackable"].steps .step { + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; +} +.ui[class*="tablet stackable"].steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui[class*="tablet stackable"].steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} + +/* Arrow */ +.ui[class*="tablet stackable"].steps .step:after { + display: none !important; +} + +/* Content */ +.ui[class*="tablet stackable"].steps .step .content { + text-align: center; +} + +/* Icon */ +.ui[class*="tablet stackable"].steps .step > .icon, +.ui[class*="tablet stackable"].ordered.steps .step:before { + margin: 0em 0em @mobileIconDistance 0em; +} + +} + +/*-------------- + Fluid +---------------*/ + +/* Fluid */ +.ui.fluid.steps { + display: flex; + width: 100%; +} + +/*-------------- + Attached +---------------*/ + +/* Top */ +.ui.attached.steps { + width: @attachedWidth !important; + margin: 0em @attachedHorizontalOffset @attachedVerticalOffset; + max-width: @attachedWidth; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.attached.steps .step:first-child { + border-radius: @stepsBorderRadius 0em 0em 0em; +} +.ui.attached.steps .step:last-child { + border-radius: 0em @stepsBorderRadius 0em 0em; +} + +/* Bottom */ +.ui.bottom.attached.steps { + margin: @attachedVerticalOffset @attachedHorizontalOffset 0em; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:first-child { + border-radius: 0em 0em 0em @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius 0em; +} + +/*------------------- + Evenly Divided +--------------------*/ + +.ui.one.steps, +.ui.two.steps, +.ui.three.steps, +.ui.four.steps, +.ui.five.steps, +.ui.six.steps, +.ui.seven.steps, +.ui.eight.steps { + width: 100%; +} +.ui.one.steps > .step, +.ui.two.steps > .step, +.ui.three.steps > .step, +.ui.four.steps > .step, +.ui.five.steps > .step, +.ui.six.steps > .step, +.ui.seven.steps > .step, +.ui.eight.steps > .step { + flex-wrap: nowrap; +} +.ui.one.steps > .step { + width: 100%; +} +.ui.two.steps > .step { + width: 50%; +} +.ui.three.steps > .step { + width: 33.333%; +} +.ui.four.steps > .step { + width: 25%; +} +.ui.five.steps > .step { + width: 20%; +} +.ui.six.steps > .step { + width: 16.666%; +} +.ui.seven.steps > .step { + width: 14.285%; +} +.ui.eight.steps > .step { + width: 12.500%; +} + +/*------------------- + Sizes +--------------------*/ + + +.ui.mini.steps .step, +.ui.mini.step { + font-size: @mini; +} +.ui.tiny.steps .step, +.ui.tiny.step { + font-size: @tiny; +} +.ui.small.steps .step, +.ui.small.step { + font-size: @small; +} +.ui.steps .step, +.ui.step { + font-size: @medium; +} +.ui.large.steps .step, +.ui.large.step { + font-size: @large; +} +.ui.big.steps .step, +.ui.big.step { + font-size: @big; +} +.ui.huge.steps .step, +.ui.huge.step { + font-size: @huge; +} +.ui.massive.steps .step, +.ui.massive.step { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/globals/reset.less b/src/semantic/src/definitions/globals/reset.less new file mode 100755 index 0000000..7514d94 --- /dev/null +++ b/src/semantic/src/definitions/globals/reset.less @@ -0,0 +1,40 @@ +/*! + * # Semantic UI - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'reset'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reset +*******************************/ + +/* Border-Box */ +*, +*:before, +*:after { + box-sizing: inherit; +} +html { + box-sizing: border-box; +} + +/* iPad Input Shadows */ +input[type="text"], input[type="email"], input[type="search"], input[type="password"] { + -webkit-appearance: none; + -moz-appearance: none; /* mobile firefox too! */ +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/globals/site.less b/src/semantic/src/definitions/globals/site.less new file mode 100755 index 0000000..49c1534 --- /dev/null +++ b/src/semantic/src/definitions/globals/site.less @@ -0,0 +1,166 @@ +/*! + * # Semantic UI - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'site'; + +@import (multiple) '../../theme.config'; + +/******************************* + Page +*******************************/ + +.loadFonts(); + +html, +body { + height: 100%; +} + +html { + font-size: @emSize; +} + +body { + margin: 0px; + padding: 0px; + overflow-x: @pageOverflowX; + min-width: @pageMinWidth; + background: @pageBackground; + font-family: @pageFont; + font-size: @fontSize; + line-height: @lineHeight; + color: @textColor; + font-smoothing: @fontSmoothing; +} + + + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: @headerFont; + line-height: @headerLineHeight; + margin: @headerMargin; + font-weight: @headerFontWeight; + padding: 0em; +} + +h1 { + min-height: 1rem; + font-size: @h1; +} +h2 { + font-size: @h2; +} +h3 { + font-size: @h3; +} +h4 { + font-size: @h4; +} +h5 { + font-size: @h5; +} + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child { + margin-top: 0em; +} + +h1:last-child, +h2:last-child, +h3:last-child, +h4:last-child, +h5:last-child { + margin-bottom: 0em; +} + + +/******************************* + Text +*******************************/ + +p { + margin: @paragraphMargin; + line-height: @paragraphLineHeight; +} +p:first-child { + margin-top: 0em; +} +p:last-child { + margin-bottom: 0em; +} + +/*------------------- + Links +--------------------*/ + +a { + color: @linkColor; + text-decoration: @linkUnderline; +} +a:hover { + color: @linkHoverColor; + text-decoration: @linkHoverUnderline; +} + + +/******************************* + Highlighting +*******************************/ + +/* Site */ +::-webkit-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::-moz-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::selection { + background-color: @highlightBackground; + color: @highlightColor; +} + +/* Form */ +textarea::-webkit-selection, +input::-webkit-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::-moz-selection, +input::-moz-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::selection, +input::selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/accordion.less b/src/semantic/src/definitions/modules/accordion.less new file mode 100755 index 0000000..835f490 --- /dev/null +++ b/src/semantic/src/definitions/modules/accordion.less @@ -0,0 +1,219 @@ +/*! + * # Semantic UI - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'accordion'; + +@import (multiple) '../../theme.config'; + +/******************************* + Accordion +*******************************/ + +.ui.accordion, +.ui.accordion .accordion { + max-width: 100%; +} +.ui.accordion .accordion { + margin: @childAccordionMargin; + padding: @childAccordionPadding; +} + +/* Title */ +.ui.accordion .title, +.ui.accordion .accordion .title { + cursor: pointer; +} + +/* Default Styling */ +.ui.accordion .title:not(.ui) { + padding: @titlePadding; + font-family: @titleFont; + font-size: @titleFontSize; + color: @titleColor; +} + +/* Content */ +.ui.accordion .title ~ .content, +.ui.accordion .accordion .title ~ .content { + display: none; +} + +/* Default Styling */ +.ui.accordion:not(.styled) .title ~ .content:not(.ui), +.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { + margin: @contentMargin; + padding: @contentPadding; +} +.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { + padding-bottom: 0em; +} + +/* Arrow */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + display: @iconDisplay; + float: @iconFloat; + opacity: @iconOpacity; + width: @iconWidth; + height: @iconHeight; + margin: @iconMargin; + padding: @iconPadding; + font-size: @iconFontSize; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + transform: @iconTransform; +} + +/*-------------- + Coupling +---------------*/ + +/* Menu */ +.ui.accordion.menu .item .title { + display: block; + padding: @menuTitlePadding; +} +.ui.accordion.menu .item .title > .dropdown.icon { + float: @menuIconFloat; + margin: @menuIconMargin; + transform: @menuIconTransform; +} + +/* Header */ +.ui.accordion .ui.header .dropdown.icon { + font-size: @iconFontSize; + margin: @iconMargin; +} + +/******************************* + States +*******************************/ + +.ui.accordion .active.title .dropdown.icon, +.ui.accordion .accordion .active.title .dropdown.icon { + transform: @activeIconTransform; +} + +.ui.accordion.menu .item .active.title > .dropdown.icon { + transform: @activeIconTransform; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Styled +---------------*/ + +.ui.styled.accordion { + width: @styledWidth; +} + +.ui.styled.accordion, +.ui.styled.accordion .accordion { + border-radius: @styledBorderRadius; + background: @styledBackground; + box-shadow: @styledBoxShadow; +} +.ui.styled.accordion .title, +.ui.styled.accordion .accordion .title { + margin: @styledTitleMargin; + padding: @styledTitlePadding; + color: @styledTitleColor; + font-weight: @styledTitleFontWeight; + border-top: @styledTitleBorder; + transition: @styledTitleTransition; +} +.ui.styled.accordion > .title:first-child, +.ui.styled.accordion .accordion .title:first-child { + border-top: none; +} + + +/* Content */ +.ui.styled.accordion .content, +.ui.styled.accordion .accordion .content { + margin: @styledContentMargin; + padding: @styledContentPadding; +} +.ui.styled.accordion .accordion .content { + padding: @styledChildContentMargin; + padding: @styledChildContentPadding; +} + + +/* Hover */ +.ui.styled.accordion .title:hover, +.ui.styled.accordion .active.title, +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledTitleHoverBackground; + color: @styledTitleHoverColor; +} +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledHoverChildTitleBackground; + color: @styledHoverChildTitleColor; +} + + +/* Active */ +.ui.styled.accordion .active.title { + background: @styledActiveTitleBackground; + color: @styledActiveTitleColor; +} +.ui.styled.accordion .accordion .active.title { + background: @styledActiveChildTitleBackground; + color: @styledActiveChildTitleColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Active +---------------*/ + +.ui.accordion .active.content, +.ui.accordion .accordion .active.content { + display: block; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.accordion, +.ui.fluid.accordion .accordion { + width: 100%; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.accordion .title:not(.ui) { + color: @invertedTitleColor; +} + +.loadUIOverrides(); + diff --git a/src/semantic/src/definitions/modules/checkbox.less b/src/semantic/src/definitions/modules/checkbox.less new file mode 100755 index 0000000..98f7746 --- /dev/null +++ b/src/semantic/src/definitions/modules/checkbox.less @@ -0,0 +1,598 @@ +/*! + * # Semantic UI - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'checkbox'; + +@import (multiple) '../../theme.config'; + +/******************************* + Checkbox +*******************************/ + + +/*-------------- + Content +---------------*/ + +.ui.checkbox { + position: relative; + display: inline-block; + backface-visibility: hidden; + outline: none; + vertical-align: baseline; + font-style: normal; + + min-height: @checkboxSize; + font-size: @medium; + line-height: @checkboxLineHeight; + min-width: @checkboxSize; +} + +/* HTML Checkbox */ +.ui.checkbox input[type="checkbox"], +.ui.checkbox input[type="radio"] { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + opacity: 0 !important; + outline: none; + z-index: 3; + width: @checkboxSize; + height: @checkboxSize; +} + + +/*-------------- + Box +---------------*/ + + +.ui.checkbox .box, +.ui.checkbox label { + cursor: auto; + position: relative; + display: block; + padding-left: @labelDistance; + outline: none; + font-size: @labelFontSize; +} + +.ui.checkbox .box:before, +.ui.checkbox label:before { + position: absolute; + top: 0px; + left: 0px; + + width: @checkboxSize; + height: @checkboxSize; + content: ''; + + background: @checkboxBackground; + border-radius: @checkboxBorderRadius; + + transition: @checkboxTransition; + border: @checkboxBorder; +} + +/*-------------- + Checkmark +---------------*/ + +.ui.checkbox .box:after, +.ui.checkbox label:after { + position: absolute; + font-size: @checkboxCheckFontSize; + top: @checkboxCheckTop; + left: @checkboxCheckLeft; + width: @checkboxCheckSize; + height: @checkboxCheckSize; + text-align: center; + + opacity: 0; + color: @checkboxColor; + transition: @checkboxTransition; +} + +/*-------------- + Label +---------------*/ + +/* Inside */ +.ui.checkbox label, +.ui.checkbox + label { + color: @labelColor; + transition: @labelTransition; +} + +/* Outside */ +.ui.checkbox + label { + vertical-align: middle; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Hover +---------------*/ + +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + background: @checkboxHoverBackground; + border-color: @checkboxHoverBorderColor; +} +.ui.checkbox label:hover, +.ui.checkbox + label:hover { + color: @labelHoverColor; +} + +/*-------------- + Down +---------------*/ + +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { + background: @checkboxPressedBackground; + border-color: @checkboxPressedBorderColor; +} +.ui.checkbox .box:active::after, +.ui.checkbox label:active::after { + color: @checkboxPressedColor; +} +.ui.checkbox input:active ~ label { + color: @labelPressedColor; +} + +/*-------------- + Focus +---------------*/ + +.ui.checkbox input:focus ~ .box:before, +.ui.checkbox input:focus ~ label:before { + background: @checkboxFocusBackground; + border-color: @checkboxFocusBorderColor; +} +.ui.checkbox input:focus ~ .box:after, +.ui.checkbox input:focus ~ label:after { + color: @checkboxFocusCheckColor; +} +.ui.checkbox input:focus ~ label { + color: @labelFocusColor; +} + +/*-------------- + Active +---------------*/ + +.ui.checkbox input:checked ~ .box:before, +.ui.checkbox input:checked ~ label:before { + background: @checkboxActiveBackground; + border-color: @checkboxActiveBorderColor; +} +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + opacity: @checkboxActiveCheckOpacity; + color: @checkboxActiveCheckColor; +} + +/*-------------- + Indeterminate +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:before { + background: @checkboxIndeterminateBackground; + border-color: @checkboxIndeterminateBorderColor; +} +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:after { + opacity: @checkboxIndeterminateCheckOpacity; + color: @checkboxIndeterminateCheckColor; +} + +/*-------------- + Active Focus +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, +.ui.checkbox input:checked:focus ~ .box:before, +.ui.checkbox input:checked:focus ~ label:before { + background: @checkboxActiveFocusBackground; + border-color: @checkboxActiveFocusBorderColor; +} +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, +.ui.checkbox input:checked:focus ~ .box:after, +.ui.checkbox input:checked:focus ~ label:after { + color: @checkboxActiveFocusCheckColor; +} + + +/*-------------- + Read-Only +---------------*/ + +.ui.read-only.checkbox, +.ui.read-only.checkbox label { + cursor: default; +} + + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.checkbox .box:after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] ~ .box:after, +.ui.checkbox input[disabled] ~ label { + cursor: default !important; + opacity: @disabledCheckboxOpacity; + color: @disabledCheckboxLabelColor; +} + +/*-------------- + Hidden +---------------*/ + +/* Initialized checkbox moves input below element + to prevent manually triggering */ +.ui.checkbox input.hidden { + z-index: -1; +} + +/* Selectable Label */ +.ui.checkbox input.hidden + label { + cursor: pointer; + user-select: none; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Radio +---------------*/ + +.ui.radio.checkbox { + min-height: @radioSize; +} + +.ui.radio.checkbox .box, +.ui.radio.checkbox label { + padding-left: @radioLabelDistance; +} + +/* Box */ +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + content: ''; + transform: none; + + width: @radioSize; + height: @radioSize; + border-radius: @circularRadius; + top: @radioTop; + left: @radioLeft; +} + +/* Bullet */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + border: none; + content: '' !important; + width: @radioSize; + height: @radioSize; + line-height: @radioSize; +} + +/* Radio Checkbox */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + top: @bulletTop; + left: @bulletLeft; + width: @radioSize; + height: @radioSize; + border-radius: @bulletRadius; + transform: scale(@bulletScale); + background-color: @bulletColor; +} + +/* Focus */ +.ui.radio.checkbox input:focus ~ .box:before, +.ui.radio.checkbox input:focus ~ label:before { + background-color: @radioFocusBackground; +} +.ui.radio.checkbox input:focus ~ .box:after, +.ui.radio.checkbox input:focus ~ label:after { + background-color: @radioFocusBulletColor; +} + +/* Indeterminate */ +.ui.radio.checkbox input:indeterminate ~ .box:after, +.ui.radio.checkbox input:indeterminate ~ label:after { + opacity: 0; +} + +/* Active */ +.ui.radio.checkbox input:checked ~ .box:before, +.ui.radio.checkbox input:checked ~ label:before { + background-color: @radioActiveBackground; +} +.ui.radio.checkbox input:checked ~ .box:after, +.ui.radio.checkbox input:checked ~ label:after { + background-color: @radioActiveBulletColor; +} + +/* Active Focus */ +.ui.radio.checkbox input:focus:checked ~ .box:before, +.ui.radio.checkbox input:focus:checked ~ label:before { + background-color: @radioActiveFocusBackground; +} +.ui.radio.checkbox input:focus:checked ~ .box:after, +.ui.radio.checkbox input:focus:checked ~ label:after { + background-color: @radioActiveFocusBulletColor; +} + +/*-------------- + Slider +---------------*/ + +.ui.slider.checkbox { + min-height: @sliderHeight; +} + +/* Input */ +.ui.slider.checkbox input { + width: @sliderWidth; + height: @sliderHeight; +} + +/* Label */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + padding-left: @sliderLabelDistance; + line-height: @sliderLabelLineHeight; + color: @sliderOffLabelColor; +} + +/* Line */ +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { + display: block; + position: absolute; + content: ''; + transform: none; + border: none !important; + left: 0em; + z-index: 1; + + top: @sliderLineVerticalOffset; + + background-color: @sliderLineColor; + width: @sliderLineWidth; + height: @sliderLineHeight; + + transform: none; + border-radius: @sliderLineRadius; + transition: @sliderLineTransition; + +} + +/* Handle */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background: @handleBackground; + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + + border: none; + box-shadow: @handleBoxShadow; + width: @sliderHandleSize; + height: @sliderHandleSize; + top: @sliderHandleOffset; + left: 0em; + transform: none; + + border-radius: @circularRadius; + transition: @sliderHandleTransition; +} + +/* Focus */ +.ui.slider.checkbox input:focus ~ .box:before, +.ui.slider.checkbox input:focus ~ label:before { + background-color: @toggleFocusColor; + border: none; +} + +/* Hover */ +.ui.slider.checkbox .box:hover, +.ui.slider.checkbox label:hover { + color: @sliderHoverLabelColor; +} +.ui.slider.checkbox .box:hover::before, +.ui.slider.checkbox label:hover::before { + background: @sliderHoverLaneBackground; +} + +/* Active */ +.ui.slider.checkbox input:checked ~ .box, +.ui.slider.checkbox input:checked ~ label { + color: @sliderOnLabelColor !important; +} +.ui.slider.checkbox input:checked ~ .box:before, +.ui.slider.checkbox input:checked ~ label:before { + background-color: @sliderOnLineColor !important; +} +.ui.slider.checkbox input:checked ~ .box:after, +.ui.slider.checkbox input:checked ~ label:after { + left: @sliderTravelDistance; +} + +/* Active Focus */ +.ui.slider.checkbox input:focus:checked ~ .box, +.ui.slider.checkbox input:focus:checked ~ label { + color: @sliderOnFocusLabelColor !important; +} +.ui.slider.checkbox input:focus:checked ~ .box:before, +.ui.slider.checkbox input:focus:checked ~ label:before { + background-color: @sliderOnFocusLineColor !important; +} + + +/*-------------- + Toggle +---------------*/ + +.ui.toggle.checkbox { + min-height: @toggleHeight; +} + +/* Input */ +.ui.toggle.checkbox input { + width: @toggleWidth; + height: @toggleHeight; +} + +/* Label */ +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + min-height: @toggleHandleSize; + padding-left: @toggleLabelDistance; + color: @toggleOffLabelColor; +} +.ui.toggle.checkbox label { + padding-top: @toggleLabelOffset; +} + +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { + display: block; + position: absolute; + content: ''; + z-index: 1; + transform: none; + border: none; + + top: @toggleLaneVerticalOffset; + + background: @toggleLaneBackground; + box-shadow: @toggleLaneBoxShadow; + width: @toggleLaneWidth; + height: @toggleLaneHeight; + border-radius: @toggleHandleRadius; +} + +/* Handle */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + background: @handleBackground; + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + + border: none; + box-shadow: @handleBoxShadow; + width: @toggleHandleSize; + height: @toggleHandleSize; + top: @toggleHandleOffset; + left: 0em; + + border-radius: @circularRadius; + transition: @toggleHandleTransition; +} + +.ui.toggle.checkbox input ~ .box:after, +.ui.toggle.checkbox input ~ label:after { + left: @toggleOffOffset; + box-shadow: @toggleOffHandleBoxShadow; +} + +/* Focus */ +.ui.toggle.checkbox input:focus ~ .box:before, +.ui.toggle.checkbox input:focus ~ label:before { + background-color: @toggleFocusColor; + border: none; +} + +/* Hover */ +.ui.toggle.checkbox .box:hover::before, +.ui.toggle.checkbox label:hover::before { + background-color: @toggleHoverColor; + border: none; +} + +/* Active */ +.ui.toggle.checkbox input:checked ~ .box, +.ui.toggle.checkbox input:checked ~ label { + color: @toggleOnLabelColor !important; +} +.ui.toggle.checkbox input:checked ~ .box:before, +.ui.toggle.checkbox input:checked ~ label:before { + background-color: @toggleOnLaneColor !important; +} +.ui.toggle.checkbox input:checked ~ .box:after, +.ui.toggle.checkbox input:checked ~ label:after { + left: @toggleOnOffset; + box-shadow: @toggleOnHandleBoxShadow; +} + + +/* Active Focus */ +.ui.toggle.checkbox input:focus:checked ~ .box, +.ui.toggle.checkbox input:focus:checked ~ label { + color: @toggleOnFocusLabelColor !important; +} +.ui.toggle.checkbox input:focus:checked ~ .box:before, +.ui.toggle.checkbox input:focus:checked ~ label:before { + background-color: @toggleOnFocusLaneColor !important; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.checkbox .box, +.ui.fitted.checkbox label { + padding-left: 0em !important; +} + +.ui.fitted.toggle.checkbox, +.ui.fitted.toggle.checkbox { + width: @toggleWidth; +} + +.ui.fitted.slider.checkbox, +.ui.fitted.slider.checkbox { + width: @sliderWidth; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/dimmer.less b/src/semantic/src/definitions/modules/dimmer.less new file mode 100755 index 0000000..ff6c605 --- /dev/null +++ b/src/semantic/src/definitions/modules/dimmer.less @@ -0,0 +1,189 @@ +/*! + * # Semantic UI - Dimmer + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'dimmer'; + +@import (multiple) '../../theme.config'; + +/******************************* + Dimmer +*******************************/ + +.dimmable:not(.body) { + position: @dimmablePosition; +} + +.ui.dimmer { + display: none; + position: @dimmerPosition; + top: 0em !important; + left: 0em !important; + + width: 100%; + height: 100%; + + text-align: @textAlign; + vertical-align: @verticalAlign; + + background-color: @backgroundColor; + opacity: @hiddenOpacity; + line-height: @lineHeight; + + animation-fill-mode: both; + animation-duration: @duration; + transition: @transition; + + user-select: none; + will-change: opacity; + z-index: @zIndex; +} + +/* Dimmer Content */ +.ui.dimmer > .content { + width: 100%; + height: 100%; + display: @contentDisplay; + user-select: text; +} +.ui.dimmer > .content > * { + display: @contentChildDisplay; + vertical-align: @verticalAlign; + color: @textColor; +} + + +/* Loose Coupling */ +.ui.segment > .ui.dimmer { + border-radius: inherit !important; +} + +/******************************* + States +*******************************/ + +.animating.dimmable:not(body), +.dimmed.dimmable:not(body) { + overflow: @overflow; +} + +.dimmed.dimmable > .ui.animating.dimmer, +.dimmed.dimmable > .ui.visible.dimmer, +.ui.active.dimmer { + display: block; + opacity: @visibleOpacity; +} + +.ui.disabled.dimmer { + width: 0 !important; + height: 0 !important; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Page +---------------*/ + +.ui.page.dimmer { + position: @pageDimmerPosition; + transform-style: @transformStyle; + perspective: @perspective; + transform-origin: center center; +} + +body.animating.in.dimmable, +body.dimmed.dimmable { + overflow: hidden; +} + +body.dimmable > .dimmer { + position: fixed; +} + +/*-------------- + Blurring +---------------*/ + +.blurring.dimmable > :not(.dimmer) { + filter: @blurredStartFilter; + transition: @blurredTransition; +} +.blurring.dimmed.dimmable > :not(.dimmer) { + filter: @blurredEndFilter; +} + +/* Dimmer Color */ +.blurring.dimmable > .dimmer { + background-color: @blurredBackgroundColor; +} +.blurring.dimmable > .inverted.dimmer { + background-color: @blurredInvertedBackgroundColor; +} + +/*-------------- + Aligned +---------------*/ + +.ui.dimmer > .top.aligned.content > * { + vertical-align: top; +} +.ui.dimmer > .bottom.aligned.content > * { + vertical-align: bottom; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.dimmer { + background-color: @invertedBackgroundColor; +} +.ui.inverted.dimmer > .content > * { + color: @textColor; +} + +/*-------------- + Simple +---------------*/ + +/* Displays without javascript */ +.ui.simple.dimmer { + display: block; + overflow: hidden; + opacity: 1; + width: 0%; + height: 0%; + z-index: -100; + background-color: @simpleStartBackgroundColor; +} +.dimmed.dimmable > .ui.simple.dimmer { + overflow: visible; + opacity: 1; + width: 100%; + height: 100%; + background-color: @simpleEndBackgroundColor; + z-index: @simpleZIndex; +} + +.ui.simple.inverted.dimmer { + background-color: @simpleInvertedStartBackgroundColor; +} +.dimmed.dimmable > .ui.simple.inverted.dimmer { + background-color: @simpleInvertedEndBackgroundColor; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/dropdown.less b/src/semantic/src/definitions/modules/dropdown.less new file mode 100755 index 0000000..9704f86 --- /dev/null +++ b/src/semantic/src/definitions/modules/dropdown.less @@ -0,0 +1,1352 @@ +/*! + * # Semantic UI - Dropdown + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'dropdown'; + +@import (multiple) '../../theme.config'; + +/******************************* + Dropdown +*******************************/ + +.ui.dropdown { + cursor: pointer; + position: relative; + display: inline-block; + outline: none; + text-align: left; + transition: @transition; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/******************************* + Content +*******************************/ + +/*-------------- + Menu +---------------*/ + +.ui.dropdown .menu { + cursor: auto; + position: absolute; + display: none; + outline: none; + top: 100%; + min-width: max-content; + transition: @menuTransition; + + margin: @menuMargin; + padding: @menuPadding; + background: @menuBackground; + + font-size: @relativeMedium; + text-shadow: none; + text-align: @menuTextAlign; + + box-shadow: @menuBoxShadow; + border: @menuBorder; + border-radius: @menuBorderRadius; + transition: @menuTransition; + z-index: @menuZIndex; + will-change: transform, opacity; +} + +.ui.dropdown .menu > * { + white-space: nowrap; +} + + +/*-------------- + Hidden Input +---------------*/ + +.ui.dropdown > input:not(.search):first-child, +.ui.dropdown > select { + display: none !important; +} + +/*-------------- + Dropdown Icon +---------------*/ + +.ui.dropdown > .dropdown.icon { + position: relative; + width: auto; + font-size: @dropdownIconSize; + margin: @dropdownIconMargin; +} +.ui.dropdown .menu > .item .dropdown.icon { + width: auto; + float: @itemDropdownIconFloat; + margin: @itemDropdownIconMargin; +} +.ui.dropdown .menu > .item .dropdown.icon + .text { + margin-right: @itemDropdownIconDistance; +} + + +/*-------------- + Text +---------------*/ + +.ui.dropdown > .text { + display: inline-block; + transition: @textTransition; +} + +/*-------------- + Menu Item +---------------*/ + +.ui.dropdown .menu > .item { + position: relative; + cursor: pointer; + display: block; + border: @itemBorder; + height: @itemHeight; + text-align: @itemTextAlign; + + border-top: @itemDivider; + line-height: @itemLineHeight; + font-size: @itemFontSize; + color: @itemColor; + + padding: @itemPadding !important; + font-size: @itemFontSize; + text-transform: @itemTextTransform; + font-weight: @itemFontWeight; + box-shadow: @itemBoxShadow; + -webkit-touch-callout: none; +} +.ui.dropdown .menu > .item:first-child { + border-top-width: 0px; +} + +/*-------------- + Floated Content +---------------*/ + +.ui.dropdown > .text > [class*="right floated"], +.ui.dropdown .menu .item > [class*="right floated"] { + float: right !important; + margin-right: 0em !important; + margin-left: @floatedDistance !important; +} +.ui.dropdown > .text > [class*="left floated"], +.ui.dropdown .menu .item > [class*="left floated"] { + float: left !important; + margin-left: 0em !important; + margin-right: @floatedDistance !important; +} + +.ui.dropdown .menu .item > .icon.floated, +.ui.dropdown .menu .item > .flag.floated, +.ui.dropdown .menu .item > .image.floated, +.ui.dropdown .menu .item > img.floated { + margin-top: @itemLineHeightOffset; +} + + +/*-------------- + Menu Divider +---------------*/ + +.ui.dropdown .menu > .header { + margin: @menuHeaderMargin; + padding: @menuHeaderPadding; + color: @menuHeaderColor; + font-size: @menuHeaderFontSize; + font-weight: @menuHeaderFontWeight; + text-transform: @menuHeaderTextTransform; +} + +.ui.dropdown .menu > .divider { + border-top: @menuDividerBorder; + height: 0em; + margin: @menuDividerMargin; +} + +.ui.dropdown .menu > .input { + width: auto; + display: flex; + margin: @menuInputMargin; + min-width: @menuInputMinWidth; +} +.ui.dropdown .menu > .header + .input { + margin-top: 0em; +} +.ui.dropdown .menu > .input:not(.transparent) input { + padding: @menuInputPadding; +} +.ui.dropdown .menu > .input:not(.transparent) .button, +.ui.dropdown .menu > .input:not(.transparent) .icon, +.ui.dropdown .menu > .input:not(.transparent) .label { + padding-top: @menuInputVerticalPadding; + padding-bottom: @menuInputVerticalPadding; +} + +/*----------------- + Item Description +-------------------*/ + +.ui.dropdown > .text > .description, +.ui.dropdown .menu > .item > .description { + float: @itemDescriptionFloat; + margin: @itemDescriptionMargin; + color: @itemDescriptionColor; +} + +/*----------------- + Message +-------------------*/ + +.ui.dropdown .menu > .message { + padding: @messagePadding; + font-weight: @messageFontWeight; +} +.ui.dropdown .menu > .message:not(.ui) { + color: @messageColor; +} + +/*-------------- + Sub Menu +---------------*/ + +.ui.dropdown .menu .menu { + top: @subMenuTop !important; + left: @subMenuLeft !important; + right: @subMenuRight !important; + margin: @subMenuMargin !important; + border-radius: @subMenuBorderRadius !important; + z-index: @subMenuZIndex !important; +} + +/* Hide Arrow */ +.ui.dropdown .menu .menu:after { + display: none; +} + +/*-------------- + Sub Elements +---------------*/ + +/* Icons / Flags / Labels / Image */ +.ui.dropdown > .text > .icon, +.ui.dropdown > .text > .label, +.ui.dropdown > .text > .flag, +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image { + margin-top: @textLineHeightOffset; +} +.ui.dropdown .menu > .item > .icon, +.ui.dropdown .menu > .item > .label, +.ui.dropdown .menu > .item > .flag, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + margin-top: @itemLineHeightOffset; +} + +.ui.dropdown > .text > .icon, +.ui.dropdown > .text > .label, +.ui.dropdown > .text > .flag, +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .icon, +.ui.dropdown .menu > .item > .label, +.ui.dropdown .menu > .item > .flag, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + margin-left: 0em; + float: @itemElementFloat; + margin-right: @itemElementDistance; +} + +/*-------------- + Image +---------------*/ + +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + display: inline-block; + vertical-align: middle; + width: auto; + max-height: @menuImageMaxHeight; +} + + +/******************************* + Coupling +*******************************/ + + +/*-------------- + Menu +---------------*/ + +/* Remove Menu Item Divider */ +.ui.dropdown .ui.menu > .item:before, +.ui.menu .ui.dropdown .menu > .item:before { + display: none; +} + +/* Prevent Menu Item Border */ +.ui.menu .ui.dropdown .menu .active.item { + border-left: none; +} + +/* Automatically float dropdown menu right on last menu item */ +.ui.menu .right.menu .dropdown:last-child .menu, +.ui.menu .right.dropdown.item .menu, +.ui.buttons > .ui.dropdown:last-child .menu { + left: auto; + right: 0em; +} + +/*-------------- + Label +---------------*/ + +/* Dropdown Menu */ +.ui.label.dropdown .menu { + min-width: 100%; +} + +/*-------------- + Button +---------------*/ + +/* No Margin On Icon Button */ +.ui.dropdown.icon.button > .dropdown.icon { + margin: 0em; +} +.ui.button.dropdown .menu { + min-width: 100%; +} + + + +/******************************* + Types +*******************************/ + +/*-------------- + Selection +---------------*/ + +/* Displays like a select box */ +.ui.selection.dropdown { + cursor: pointer; + word-wrap: break-word; + line-height: 1em; + white-space: normal; + outline: 0; + transform: rotateZ(0deg); + + min-width: @selectionMinWidth; + min-height: @selectionMinHeight; + + background: @selectionBackground; + display: @selectionDisplay; + padding: @selectionPadding; + color: @selectionTextColor; + box-shadow: @selectionBoxShadow; + border: @selectionBorder; + border-radius: @selectionBorderRadius; + transition: @selectionTransition; +} +.ui.selection.dropdown.visible, +.ui.selection.dropdown.active { + z-index: @selectionZIndex; +} + +select.ui.dropdown { + height: @selectHeight; + padding: @selectPadding; + border: @selectBorder; + visibility: @selectVisibility; +} +.ui.selection.dropdown > .search.icon, +.ui.selection.dropdown > .delete.icon, +.ui.selection.dropdown > .dropdown.icon { + cursor: pointer; + position: absolute; + width: auto; + height: auto; + line-height: @searchSelectionLineHeight; + top: @selectionVerticalPadding; + right: @selectionHorizontalPadding; + z-index: @selectionIconZIndex; + margin: @selectionIconMargin; + padding: @selectionIconPadding; + opacity: @selectionIconOpacity; + transition: @selectionIconTransition; +} + +/* Compact */ +.ui.compact.selection.dropdown { + min-width: 0px; +} + +/* Selection Menu */ +.ui.selection.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + border-top-width: 0px !important; + width: auto; + outline: none; + margin: 0px -@menuBorderWidth; + min-width: @menuMinWidth; + width: @menuMinWidth; + + border-radius: @selectionMenuBorderRadius; + box-shadow: @selectionMenuBoxShadow; + transition: @selectionMenuTransition; +} +.ui.selection.dropdown .menu:after, +.ui.selection.dropdown .menu:before { + display: none; +} + +/*-------------- + Message +---------------*/ + +.ui.selection.dropdown .menu > .message { + padding: @selectionMessagePadding; +} + +@media only screen and (max-width : @largestMobileScreen) { + .ui.selection.dropdown .menu { + max-height: @selectionMobileMaxMenuHeight; + } +} +@media only screen and (min-width: @tabletBreakpoint) { + .ui.selection.dropdown .menu { + max-height: @selectionTabletMaxMenuHeight; + } +} +@media only screen and (min-width: @computerBreakpoint) { + .ui.selection.dropdown .menu { + max-height: @selectionComputerMaxMenuHeight; + } +} +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.selection.dropdown .menu { + max-height: @selectionWidescreenMaxMenuHeight; + } +} + +/* Menu Item */ +.ui.selection.dropdown .menu > .item { + border-top: @selectionItemDivider; + padding: @selectionItemPadding !important; + white-space: normal; + word-wrap: normal; +} + +/* User Item */ +.ui.selection.dropdown .menu > .hidden.addition.item { + display: none; +} + +/* Hover */ +.ui.selection.dropdown:hover { + border-color: @selectionHoverBorderColor; + box-shadow: @selectionHoverBoxShadow; +} + +/* Active */ +.ui.selection.active.dropdown { + border-color: @selectionVisibleBorderColor; + box-shadow: @selectionVisibleBoxShadow; +} +.ui.selection.active.dropdown .menu { + border-color: @selectionVisibleBorderColor; + box-shadow: @selectionVisibleMenuBoxShadow; +} + +/* Focus */ +.ui.selection.dropdown:focus { + border-color: @selectionFocusBorderColor; + box-shadow: @selectionFocusBoxShadow; +} +.ui.selection.dropdown:focus .menu { + border-color: @selectionFocusBorderColor; + box-shadow: @selectionFocusMenuBoxShadow; +} + +/* Visible */ +.ui.selection.visible.dropdown > .text:not(.default) { + font-weight: @selectionVisibleTextFontWeight; + color: @selectionVisibleTextColor; +} + +/* Visible Hover */ +.ui.selection.active.dropdown:hover { + border-color: @selectionActiveHoverBorderColor; + box-shadow: @selectionActiveHoverBoxShadow; +} +.ui.selection.active.dropdown:hover .menu { + border-color: @selectionActiveHoverBorderColor; + box-shadow: @selectionActiveHoverMenuBoxShadow; +} + +/* Dropdown Icon */ +.ui.active.selection.dropdown > .dropdown.icon, +.ui.visible.selection.dropdown > .dropdown.icon { + opacity: @selectionVisibleIconOpacity; + z-index: 3; +} + +/* Connecting Border */ +.ui.active.selection.dropdown { + border-bottom-left-radius: @selectionVisibleConnectingBorder !important; + border-bottom-right-radius: @selectionVisibleConnectingBorder !important; +} + +/* Empty Connecting Border */ +.ui.active.empty.selection.dropdown { + border-radius: @selectionBorderRadius !important; + box-shadow: @selectionBoxShadow !important; +} +.ui.active.empty.selection.dropdown .menu { + border: none !important; + box-shadow: none !important; +} + +/*-------------- + Searchable +---------------*/ + +/* Search Selection */ +.ui.search.dropdown { + min-width: @searchMinWidth; +} + +/* Search Dropdown */ +.ui.search.dropdown > input.search { + background: none transparent !important; + border: none !important; + box-shadow: none !important; + cursor: text; + top: 0em; + left: @textCursorSpacing; + width: 100%; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + padding: inherit; +} + +/* Text Layering */ +.ui.search.dropdown > input.search { + position: absolute; + z-index: 2; +} +.ui.search.dropdown > .text { + cursor: text; + position: relative; + left: @textCursorSpacing; + z-index: 3; +} + +/* Search Selection */ +.ui.search.selection.dropdown > input.search { + line-height: @searchSelectionLineHeight; + padding: @searchSelectionInputPadding; +} + +/* Used to size multi select input to character width */ +.ui.search.selection.dropdown > span.sizer { + line-height: @searchSelectionLineHeight; + padding: @searchSelectionInputPadding; + display: none; + white-space: pre; +} + +/* Active/Visible Search */ +.ui.search.dropdown.active > input.search, +.ui.search.dropdown.visible > input.search { + cursor: auto; +} +.ui.search.dropdown.active > .text, +.ui.search.dropdown.visible > .text { + pointer-events: none; +} + +/* Filtered Text */ +.ui.active.search.dropdown input.search:focus + .text .icon, +.ui.active.search.dropdown input.search:focus + .text .flag { + opacity: @selectionTextUnderlayIconOpacity; +} +.ui.active.search.dropdown input.search:focus + .text { + color: @selectionTextUnderlayColor !important; +} + +/* Search Menu */ +.ui.search.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; +} +@media only screen and (max-width : @largestMobileScreen) { + .ui.search.dropdown .menu { + max-height: @searchMobileMaxMenuHeight; + } +} +@media only screen and (min-width: @tabletBreakpoint) { + .ui.search.dropdown .menu { + max-height: @searchTabletMaxMenuHeight; + } +} +@media only screen and (min-width: @computerBreakpoint) { + .ui.search.dropdown .menu { + max-height: @searchComputerMaxMenuHeight; + } +} +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.search.dropdown .menu { + max-height: @searchWidescreenMaxMenuHeight; + } +} + +/*-------------- + Multiple +---------------*/ + +/* Multiple Selection */ +.ui.multiple.dropdown { + padding: @multipleSelectionPadding; +} +.ui.multiple.dropdown .menu { + cursor: auto; +} + +/* Multiple Search Selection */ +.ui.multiple.search.dropdown, +.ui.multiple.search.dropdown > input.search { + cursor: text; +} + +/* Selection Label */ +.ui.multiple.dropdown > .label { + user-select: none; + display: inline-block; + vertical-align: top; + white-space: normal; + font-size: @labelSize; + padding: @labelPadding; + margin: @labelMargin; + box-shadow: @labelBoxShadow; +} + +/* Dropdown Icon */ +.ui.multiple.dropdown .dropdown.icon { + margin: @multipleSelectionDropdownIconMargin; + padding: @multipleSelectionDropdownIconPadding; +} + +/* Text */ +.ui.multiple.dropdown > .text { + position: static; + padding: 0; + max-width: 100%; + margin: @multipleSelectionChildMargin; + line-height: @multipleSelectionChildLineHeight; +} +.ui.multiple.dropdown > .label ~ input.search { + margin-left: @multipleSelectionSearchAfterLabelDistance !important; +} +.ui.multiple.dropdown > .label ~ .text { + display: none; +} + +/*----------------- + Multiple Search +-----------------*/ + +/* Prompt Text */ +.ui.multiple.search.dropdown > .text { + display: inline-block; + position: absolute; + top: 0; + left: 0; + padding: inherit; + margin: @multipleSelectionChildMargin; + line-height: @multipleSelectionChildLineHeight; +} + +.ui.multiple.search.dropdown > .label ~ .text { + display: none; +} + +/* Search */ +.ui.multiple.search.dropdown > input.search { + position: static; + padding: 0; + max-width: 100%; + margin: @multipleSelectionChildMargin; + width: @multipleSelectionSearchStartWidth; + line-height: @multipleSelectionChildLineHeight; +} + + +/*-------------- + Inline +---------------*/ + +.ui.inline.dropdown { + cursor: pointer; + display: inline-block; + color: @inlineTextColor; +} +.ui.inline.dropdown .dropdown.icon { + margin: @inlineIconMargin; + vertical-align: baseline; +} +.ui.inline.dropdown > .text { + font-weight: @inlineTextFontWeight; +} +.ui.inline.dropdown .menu { + cursor: auto; + margin-top: @inlineMenuDistance; + border-radius: @inlineMenuBorderRadius; +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Active +----------------------*/ + +/* Menu Item Active */ +.ui.dropdown .menu .active.item { + background: @activeItemBackground; + font-weight: @activeItemFontWeight; + color: @activeItemColor; + box-shadow: @activeItemBoxShadow; + z-index: @activeItemZIndex; +} + + +/*-------------------- + Hover +----------------------*/ + +/* Menu Item Hover */ +.ui.dropdown .menu > .item:hover { + background: @hoveredItemBackground; + color: @hoveredItemColor; + z-index: @hoveredZIndex; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.dropdown > i.icon { + height: @relative14px !important; + padding: @relative16px @relative15px !important; +} +.ui.loading.dropdown > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} +.ui.loading.dropdown > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + box-shadow: 0px 0px 0px 1px transparent; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: dropdown-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; +} + +/* Coupling */ +.ui.loading.dropdown.button > i.icon:before, +.ui.loading.dropdown.button > i.icon:after { + display: none; +} + +@keyframes dropdown-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/*-------------------- + Default Text +----------------------*/ + +.ui.dropdown:not(.button) > .default.text, +.ui.default.dropdown:not(.button) > .text { + color: @defaultTextColor; +} +.ui.dropdown:not(.button) > input:focus + .default.text, +.ui.default.dropdown:not(.button) > input:focus + .text { + color: @defaultTextFocusColor; +} +/*-------------------- + Loading +----------------------*/ + +.ui.loading.dropdown > .text { + transition: none; +} + +/* Used To Check Position */ +.ui.dropdown .loading.menu { + display: block; + visibility: hidden; + z-index: @loadingZIndex; +} + +/*-------------------- + Keyboard Select +----------------------*/ + +/* Selected Item */ +.ui.dropdown.selected, +.ui.dropdown .menu .selected.item { + background: @selectedBackground; + color: @selectedColor; +} + + +/*-------------------- + Search Filtered +----------------------*/ + +/* Filtered Item */ +.ui.dropdown > .filtered.text { + visibility: hidden; +} +.ui.dropdown .filtered.item { + display: none !important; +} + + +/*-------------------- + Error +----------------------*/ + +.ui.dropdown.error, +.ui.dropdown.error > .text, +.ui.dropdown.error > .default.text { + color: @errorTextColor; +} + +.ui.selection.dropdown.error { + background: @errorBackgroundColor; + border-color: @errorBorderColor; +} +.ui.selection.dropdown.error:hover { + border-color: @errorBorderColor; +} + +.ui.dropdown.error > .menu, +.ui.dropdown.error > .menu .menu { + border-color: @errorBorderColor; +} +.ui.dropdown.error > .menu > .item { + color: @errorItemTextColor; +} +.ui.multiple.selection.error.dropdown > .label { + border-color: @errorBorderColor; +} + +/* Item Hover */ +.ui.dropdown.error > .menu > .item:hover { + background-color: @errorItemHoverBackground; +} + +/* Item Active */ +.ui.dropdown.error > .menu .active.item { + background-color: @errorItemActiveBackground; +} + + + +/*-------------------- + Disabled +----------------------*/ + +/* Disabled */ +.ui.disabled.dropdown, +.ui.dropdown .menu > .disabled.item { + cursor: default; + pointer-events: none; + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Direction +---------------*/ + +/* Flyout Direction */ +.ui.dropdown .menu { + left: 0px; +} + + +/* Default Side (Right) */ +.ui.dropdown .right.menu > .menu, +.ui.dropdown .menu .right.menu { + left: 100% !important; + right: auto !important; + border-radius: @subMenuBorderRadius !important; +} + +/* Left Flyout Menu */ +.ui.dropdown > .left.menu .menu, +.ui.dropdown .menu .left.menu { + left: auto !important; + right: 100% !important; + border-radius: @leftSubMenuBorderRadius !important; +} + +.ui.dropdown .item .left.dropdown.icon, +.ui.dropdown .left.menu .item .dropdown.icon { + width: auto; + float: @leftMenuDropdownIconFloat; + margin: @leftMenuDropdownIconMargin; +} +.ui.dropdown .item .left.dropdown.icon, +.ui.dropdown .left.menu .item .dropdown.icon { + width: auto; + float: @leftMenuDropdownIconFloat; + margin: @leftMenuDropdownIconMargin; +} +.ui.dropdown .item .left.dropdown.icon + .text, +.ui.dropdown .left.menu .item .dropdown.icon + .text { + margin-left: @itemDropdownIconDistance; +} + + +/*-------------- + Upward +---------------*/ + +/* Upward Main Menu */ +.ui.upward.dropdown > .menu { + top: auto; + bottom: 100%; + box-shadow: @upwardMenuBoxShadow; + border-radius: @upwardMenuBorderRadius; +} + +/* Upward Sub Menu */ +.ui.dropdown .upward.menu { + top: auto !important; + bottom: 0 !important; +} + +/* Active Upward */ +.ui.simple.upward.active.dropdown, +.ui.simple.upward.dropdown:hover { + border-radius: @borderRadius @borderRadius 0em 0em !important; +} +.ui.upward.dropdown.button:not(.pointing):not(.floating).active { + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Selection */ +.ui.upward.selection.dropdown .menu { + border-top-width: @menuBorderWidth !important; + border-bottom-width: 0px !important; + box-shadow: @upwardSelectionMenuBoxShadow; +} +.ui.upward.selection.dropdown:hover { + box-shadow: @upwardSelectionHoverBoxShadow; +} + +/* Active Upward */ +.ui.active.upward.selection.dropdown { + border-radius: @upwardSelectionVisibleBorderRadius !important; +} + +/* Visible Upward */ +.ui.upward.selection.dropdown.visible { + box-shadow: @upwardSelectionVisibleBoxShadow; + border-radius: @upwardSelectionVisibleBorderRadius !important; +} + +/* Visible Hover Upward */ +.ui.upward.active.selection.dropdown:hover { + box-shadow: @upwardSelectionActiveHoverBoxShadow; +} +.ui.upward.active.selection.dropdown:hover .menu { + box-shadow: @upwardSelectionActiveHoverMenuBoxShadow; +} + +/*-------------- + Simple +---------------*/ + +/* Selection Menu */ +.ui.scrolling.dropdown .menu, +.ui.dropdown .scrolling.menu { + overflow-x: hidden; + overflow-y: auto; +} + +.ui.scrolling.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + min-width: 100% !important; + width: auto !important; +} + +.ui.dropdown .scrolling.menu { + position: static; + overflow-y: auto; + border: none; + box-shadow: none !important; + border-radius: 0 !important; + margin: 0 !important; + min-width: 100% !important; + width: auto !important; + border-top: @menuBorder; +} +.ui.scrolling.dropdown .menu .item.item.item, +.ui.dropdown .scrolling.menu > .item.item.item { + border-top: @scrollingMenuItemBorder; + padding-right: @scrollingMenuRightItemPadding !important; +} +.ui.scrolling.dropdown .menu .item:first-child, +.ui.dropdown .scrolling.menu .item:first-child { + border-top: none; +} +.ui.dropdown > .animating.menu .scrolling.menu, +.ui.dropdown > .visible.menu .scrolling.menu { + display: block; +} + +/* Scrollbar in IE */ +@media all and (-ms-high-contrast:none) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + min-width: ~"calc(100% - "@scrollbarWidth~")"; + } +} +@media only screen and (max-width : @largestMobileScreen) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: @scrollingMobileMaxMenuHeight; + } +} +@media only screen and (min-width: @tabletBreakpoint) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: @scrollingTabletMaxMenuHeight; + } +} +@media only screen and (min-width: @computerBreakpoint) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: @scrollingComputerMaxMenuHeight; + } +} +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: @scrollingWidescreenMaxMenuHeight; + } +} + +/*-------------- + Simple +---------------*/ + +/* Displays without javascript */ + +.ui.simple.dropdown .menu:before, +.ui.simple.dropdown .menu:after { + display: none; +} +.ui.simple.dropdown .menu { + position: absolute; + display: block; + overflow: hidden; + top: -9999px !important; + opacity: 0; + width: 0; + height: 0; + transition: @simpleTransition; +} + +.ui.simple.active.dropdown, +.ui.simple.dropdown:hover { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} + +.ui.simple.active.dropdown > .menu, +.ui.simple.dropdown:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 100% !important; + opacity: 1; +} +.ui.simple.dropdown > .menu > .item:active > .menu, +.ui.simple.dropdown:hover > .menu > .item:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 0% !important; + left: 100% !important; + opacity: 1; +} +.ui.simple.disabled.dropdown:hover .menu { + display: none; + height: 0px; + width: 0px; + overflow: hidden; +} + +/* Visible */ +.ui.simple.visible.dropdown > .menu { + display: block; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.dropdown { + display: block; + width: 100%; + min-width: 0em; +} +.ui.fluid.dropdown > .dropdown.icon { + float: right; +} + + +/*-------------- + Floating +---------------*/ + +.ui.floating.dropdown .menu { + left: 0; + right: auto; + box-shadow: @floatingMenuBoxShadow !important; + border-radius: @floatingMenuBorderRadius !important; +} +.ui.floating.dropdown > .menu { + margin-top: @floatingMenuDistance !important; + border-radius: @floatingMenuBorderRadius !important; +} + +/*-------------- + Pointing +---------------*/ + +.ui.pointing.dropdown > .menu { + top: 100%; + margin-top: @pointingMenuDistance; + border-radius: @pointingMenuBorderRadius; +} + +.ui.pointing.dropdown > .menu:after { + display: block; + position: absolute; + pointer-events: none; + content: ''; + visibility: visible; + transform: rotate(45deg); + + width: @pointingArrowSize; + height: @pointingArrowSize; + box-shadow: @pointingArrowBoxShadow; + background: @pointingArrowBackground; + z-index: @pointingArrowZIndex; +} + +.ui.pointing.dropdown > .menu:after { + top: @pointingArrowOffset; + left: 50%; + margin: 0em 0em 0em @pointingArrowOffset; +} + +/* Top Left Pointing */ +.ui.top.left.pointing.dropdown > .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: @pointingArrowDistanceFromEdge 0em 0em; +} +.ui.top.left.pointing.dropdown > .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: @pointingArrowDistanceFromEdge 0em 0em; +} +.ui.top.left.pointing.dropdown > .menu:after { + top: @pointingArrowOffset; + left: @pointingArrowDistanceFromEdge; + right: auto; + margin: 0em; + transform: rotate(45deg); +} +/* Top Right Pointing */ +.ui.top.right.pointing.dropdown > .menu { + top: 100%; + bottom: auto; + right: 0%; + left: auto; + margin: @pointingArrowDistanceFromEdge 0em 0em; +} +.ui.top.right.pointing.dropdown > .menu:after { + top: @pointingArrowOffset; + left: auto; + right: @pointingArrowDistanceFromEdge; + margin: 0em; + transform: rotate(45deg); +} + +/* Left Pointing */ +.ui.left.pointing.dropdown > .menu { + top: 0%; + left: 100%; + right: auto; + margin: 0em 0em 0em @pointingArrowDistanceFromEdge; +} +.ui.left.pointing.dropdown > .menu:after { + top: 1em; + left: @pointingArrowOffset; + margin: 0em 0em 0em 0em; + transform: rotate(-45deg); +} + +/* Right Pointing */ +.ui.right.pointing.dropdown > .menu { + top: 0%; + left: auto; + right: 100%; + margin: 0em @pointingArrowDistanceFromEdge 0em 0em; +} +.ui.right.pointing.dropdown > .menu:after { + top: 1em; + left: auto; + right: @pointingArrowOffset; + margin: 0em 0em 0em 0em; + transform: rotate(135deg); +} + +/* Bottom Pointing */ +.ui.bottom.pointing.dropdown > .menu { + top: auto; + bottom: 100%; + left: 0%; + right: auto; + margin: 0em 0em @pointingArrowDistanceFromEdge ; +} +.ui.bottom.pointing.dropdown > .menu:after { + top: auto; + bottom: @pointingArrowOffset; + right: auto; + margin: 0em; + transform: rotate(-135deg); +} +/* Reverse Sub-Menu Direction */ +.ui.bottom.pointing.dropdown > .menu .menu { + top: auto !important; + bottom: 0px !important; +} + +/* Bottom Left */ +.ui.bottom.left.pointing.dropdown > .menu { + left: 0%; + right: auto; +} +.ui.bottom.left.pointing.dropdown > .menu:after { + left: @pointingArrowDistanceFromEdge; + right: auto; +} + +/* Bottom Right */ +.ui.bottom.right.pointing.dropdown > .menu { + right: 0%; + left: auto; +} +.ui.bottom.right.pointing.dropdown > .menu:after { + left: auto; + right: @pointingArrowDistanceFromEdge; +} + +/* Upward pointing */ +.ui.upward.pointing.dropdown > .menu, +.ui.upward.top.pointing.dropdown > .menu { + top: auto; + bottom: 100%; + margin: 0em 0em @pointingMenuDistance; + border-radius: @pointingUpwardMenuBorderRadius; +} +.ui.upward.pointing.dropdown > .menu:after, +.ui.upward.top.pointing.dropdown > .menu:after { + top: 100%; + bottom: auto; + box-shadow: @pointingUpwardArrowBoxShadow; + margin: @pointingArrowOffset 0em 0em; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/embed.less b/src/semantic/src/definitions/modules/embed.less new file mode 100644 index 0000000..b44d4e6 --- /dev/null +++ b/src/semantic/src/definitions/modules/embed.less @@ -0,0 +1,163 @@ +/*! + * # Semantic UI - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'embed'; + +@import (multiple) '../../theme.config'; + +/******************************* + Types +*******************************/ + +.ui.embed { + position: relative; + position: relative; + max-width: 100%; + height: 0px; + overflow: hidden; + background: @background; + padding-bottom: @widescreenRatio; +} + +/*----------------- + Embedded Content +------------------*/ + +.ui.embed iframe, +.ui.embed embed, +.ui.embed object { + position: absolute; + border: none; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + margin: 0em; + padding: 0em; +} + +/*----------------- + Embed +------------------*/ + +.ui.embed > .embed { + display: none; +} + +/*-------------- + Placeholder +---------------*/ + +.ui.embed > .placeholder { + position: absolute; + cursor: pointer; + top: 0px; + left: 0px; + display: block; + width: 100%; + height: 100%; + background-color: @placeholderBackground; +} + +/*-------------- + Icon +---------------*/ + +.ui.embed > .icon { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 2; +} +.ui.embed > .icon:after { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: 3; + content: ''; + background: @placeholderBackground; + opacity: @placeholderBackgroundOpacity; + transition: @placeholderBackgroundTransition; +} +.ui.embed > .icon:before { + position: absolute; + top: 50%; + left: 50%; + z-index: 4; + transform: translateX(-50%) translateY(-50%); + + color: @iconColor; + font-size: @iconSize; + text-shadow: @iconShadow; + transition: @iconTransition; + z-index: @iconZIndex; +} + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +.ui.embed .icon:hover:after { + background: @hoverPlaceholderBackground; + opacity: @hoverPlaceholderBackgroundOpacity; +} +.ui.embed .icon:hover:before { + color: @hoverIconColor; +} + +/*-------------- + Active +---------------*/ + +.ui.active.embed > .icon, +.ui.active.embed > .placeholder { + display: none; +} +.ui.active.embed > .embed { + display: block; +} + +.loadUIOverrides(); + + +/******************************* + Variations +*******************************/ + +.ui.square.embed { + padding-bottom: @squareRatio; +} +.ui[class*="4:3"].embed { + padding-bottom: @standardRatio; +} +.ui[class*="16:9"].embed { + padding-bottom: @widescreenRatio; +} +.ui[class*="21:9"].embed { + padding-bottom: @ultraWidescreenRatio; +} + + + diff --git a/src/semantic/src/definitions/modules/modal.less b/src/semantic/src/definitions/modules/modal.less new file mode 100755 index 0000000..b59a2f4 --- /dev/null +++ b/src/semantic/src/definitions/modules/modal.less @@ -0,0 +1,484 @@ +/*! + * # Semantic UI - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'modal'; + +@import (multiple) '../../theme.config'; + +/******************************* + Modal +*******************************/ + +.ui.modal { + display: none; + position: fixed; + z-index: @zIndex; + + top: 50%; + left: 50%; + text-align: left; + + background: @background; + border: @border; + box-shadow: @boxShadow; + transform-origin: @transformOrigin; + + border-radius: @borderRadius; + user-select: text; + will-change: top, left, margin, transform, opacity; +} + +.ui.modal > :first-child:not(.icon), +.ui.modal > .icon:first-child + * { + border-top-left-radius: @borderRadius; + border-top-right-radius: @borderRadius; +} + +.ui.modal > :last-child { + border-bottom-left-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} + +/******************************* + Content +*******************************/ + +/*-------------- + Close +---------------*/ + +.ui.modal > .close { + cursor: pointer; + position: absolute; + top: @closeTop; + right: @closeRight; + z-index: 1; + + opacity: @closeOpacity; + font-size: @closeSize; + color: @closeColor; + + width: @closeHitbox; + height: @closeHitbox; + padding: @closePadding; +} +.ui.modal > .close:hover { + opacity: 1; +} + +/*-------------- + Header +---------------*/ + +.ui.modal > .header { + display: block; + font-family: @headerFontFamily; + background: @headerBackground; + margin: @headerMargin; + padding: @headerPadding; + box-shadow: @headerBoxShadow; + + color: @headerColor; + border-bottom: @headerBorder; +} +.ui.modal > .header:not(.ui) { + font-size: @headerFontSize; + line-height: @headerLineHeight; + font-weight: @headerFontWeight; +} + +/*-------------- + Content +---------------*/ + +.ui.modal > .content { + display: block; + width: 100%; + font-size: @contentFontSize; + line-height: @contentLineHeight; + padding: @contentPadding; + background: @contentBackground; +} +.ui.modal > .image.content { + display: flex; + flex-direction: row; +} + +/* Image */ +.ui.modal > .content > .image { + display: block; + flex: 0 1 auto; + width: @imageWidth; + align-self: @imageVerticalAlign; +} +.ui.modal > [class*="top aligned"] { + align-self: top; +} +.ui.modal > [class*="middle aligned"] { + align-self: middle; +} +.ui.modal > [class*="stretched"] { + align-self: stretch; +} + +/* Description */ +.ui.modal > .content > .description { + display: block; + flex: 1 0 auto; + min-width: 0px; + align-self: @descriptionVerticalAlign; +} + +.ui.modal > .content > .icon + .description, +.ui.modal > .content > .image + .description { + flex: 0 1 auto; + min-width: @descriptionMinWidth; + width: @descriptionWidth; + padding-left: @descriptionDistance; +} + +/*rtl:ignore*/ +.ui.modal > .content > .image > i.icon { + margin: 0em; + opacity: 1; + width: auto; + line-height: 1; + font-size: @imageIconSize; +} + +/*-------------- + Actions +---------------*/ + +.ui.modal > .actions { + background: @actionBackground; + padding: @actionPadding; + border-top: @actionBorder; + text-align: @actionAlign; +} +.ui.modal .actions > .button { + margin-left: @buttonDistance; +} + +/*------------------- + Responsive +--------------------*/ + +/* Modal Width */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.modal { + width: @mobileWidth; + margin: @mobileMargin; + } +} +@media only screen and (min-width : @tabletBreakpoint) { + .ui.modal { + width: @tabletWidth; + margin: @tabletMargin; + } +} +@media only screen and (min-width : @computerBreakpoint) { + .ui.modal { + width: @computerWidth; + margin: @computerMargin; + } +} +@media only screen and (min-width : @largeMonitorBreakpoint) { + .ui.modal { + width: @largeMonitorWidth; + margin: @largeMonitorMargin; + } +} +@media only screen and (min-width : @widescreenMonitorBreakpoint) { + .ui.modal { + width: @widescreenMonitorWidth; + margin: @widescreenMonitorMargin; + } +} + +/* Tablet and Mobile */ +@media only screen and (max-width : @largestTabletScreen) { + .ui.modal > .header { + padding-right: @closeHitbox; + } + .ui.modal > .close { + top: @innerCloseTop; + right: @innerCloseRight; + color: @innerCloseColor; + } +} + +/* Mobile */ +@media only screen and (max-width : @largestMobileScreen) { + + .ui.modal > .header { + padding: @mobileHeaderPadding !important; + padding-right: @closeHitbox !important; + } + .ui.modal > .content { + display: block; + padding: @mobileContentPadding !important; + } + .ui.modal > .close { + top: @mobileCloseTop !important; + right: @mobileCloseRight !important; + } + + /*rtl:ignore*/ + .ui.modal .image.content { + flex-direction: column; + } + .ui.modal .content > .image { + display: block; + max-width: 100%; + margin: 0em auto !important; + text-align: center; + padding: @mobileImagePadding !important; + } + .ui.modal > .content > .image > i.icon { + font-size: @mobileImageIconSize; + text-align: center; + } + + /*rtl:ignore*/ + .ui.modal .content > .description { + display: block; + width: 100% !important; + margin: 0em !important; + padding: @mobileDescriptionPadding !important; + box-shadow: none; + } + + /* Let Buttons Stack */ + .ui.modal > .actions { + padding: @mobileActionPadding !important; + } + .ui.modal .actions > .buttons, + .ui.modal .actions > .button { + margin-bottom: @mobileButtonDistance; + } +} + +/*-------------- + Coupling +---------------*/ + +.ui.inverted.dimmer > .ui.modal { + box-shadow: @invertedBoxShadow; +} + +/******************************* + Types +*******************************/ + +.ui.basic.modal { + background-color: transparent; + border: none; + border-radius: 0em; + box-shadow: none !important; + color: @basicModalColor; +} +.ui.basic.modal > .header, +.ui.basic.modal > .content, +.ui.basic.modal > .actions { + background-color: transparent; +} +.ui.basic.modal > .header { + color: @basicModalHeaderColor; +} +.ui.basic.modal > .close { + top: @basicModalCloseTop; + right: @basicModalCloseRight; +} + +.ui.inverted.dimmer > .basic.modal { + color: @basicInvertedModalColor; +} +.ui.inverted.dimmer > .ui.basic.modal > .header { + color: @basicInvertedModalHeaderColor; +} + +/* Tablet and Mobile */ +@media only screen and (max-width : @largestTabletScreen) { + .ui.basic.modal > .close { + color: @basicInnerCloseColor; + } +} + + +/******************************* + States +*******************************/ + +.ui.active.modal { + display: block; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Scrolling +---------------*/ + +/* A modal that cannot fit on the page */ +.scrolling.dimmable.dimmed { + overflow: hidden; +} +.scrolling.dimmable.dimmed > .dimmer { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.scrolling.dimmable > .dimmer { + position: fixed; +} +.modals.dimmer .ui.scrolling.modal { + position: static !important; + margin: @scrollingMargin auto !important; +} + +/* undetached scrolling */ +.scrolling.undetached.dimmable.dimmed { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.scrolling.undetached.dimmable.dimmed > .dimmer { + overflow: hidden; +} +.scrolling.undetached.dimmable .ui.scrolling.modal { + position: absolute; + left: 50%; + margin-top: @scrollingMargin !important; +} + +/* Coupling with Sidebar */ +.undetached.dimmable.dimmed > .pusher { + z-index: auto; +} + +@media only screen and (max-width : @largestTabletScreen) { + .modals.dimmer .ui.scrolling.modal { + margin-top: @mobileScrollingMargin !important; + margin-bottom: @mobileScrollingMargin !important; + } +} + + +/*-------------- + Full Screen +---------------*/ + +.ui.fullscreen.modal { + width: @fullScreenWidth !important; + left: @fullScreenOffset !important; + margin: @fullScreenMargin; +} +.ui.fullscreen.scrolling.modal { + left: 0em !important; +} +.ui.fullscreen.modal > .header { + padding-right: @closeHitbox; +} +.ui.fullscreen.modal > .close { + top: @innerCloseTop; + right: @innerCloseRight; + color: @innerCloseColor; +} + + +/*-------------- + Size +---------------*/ + +.ui.modal { + font-size: @medium; +} + +/* Small */ +.ui.small.modal > .header:not(.ui) { + font-size: @smallHeaderSize; +} + +/* Small Modal Width */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.small.modal { + width: @smallMobileWidth; + margin: @smallMobileMargin; + } +} +@media only screen and (min-width : @tabletBreakpoint) { + .ui.small.modal { + width: @smallTabletWidth; + margin: @smallTabletMargin; + } +} +@media only screen and (min-width : @computerBreakpoint) { + .ui.small.modal { + width: @smallComputerWidth; + margin: @smallComputerMargin; + } +} +@media only screen and (min-width : @largeMonitorBreakpoint) { + .ui.small.modal { + width: @smallLargeMonitorWidth; + margin: @smallLargeMonitorMargin; + } +} +@media only screen and (min-width : @widescreenMonitorBreakpoint) { + .ui.small.modal { + width: @smallWidescreenMonitorWidth; + margin: @smallWidescreenMonitorMargin; + } +} + +/* Large Modal Width */ +.ui.large.modal > .header { + font-size: @largeHeaderSize; +} +@media only screen and (max-width : @largestMobileScreen) { + .ui.large.modal { + width: @largeMobileWidth; + margin: @largeMobileMargin; + } +} +@media only screen and (min-width : @tabletBreakpoint) { + .ui.large.modal { + width: @largeTabletWidth; + margin: @largeTabletMargin; + } +} +@media only screen and (min-width : @computerBreakpoint) { + .ui.large.modal { + width: @largeComputerWidth; + margin: @largeComputerMargin; + } +} +@media only screen and (min-width : @largeMonitorBreakpoint) { + .ui.large.modal { + width: @largeLargeMonitorWidth; + margin: @largeLargeMonitorMargin; + } +} +@media only screen and (min-width : @widescreenMonitorBreakpoint) { + .ui.large.modal { + width: @largeWidescreenMonitorWidth; + margin: @largeWidescreenMonitorMargin; + } +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/nag.less b/src/semantic/src/definitions/modules/nag.less new file mode 100755 index 0000000..b29e306 --- /dev/null +++ b/src/semantic/src/definitions/modules/nag.less @@ -0,0 +1,158 @@ +/*! + * # Semantic UI - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'nag'; + +@import (multiple) '../../theme.config'; + +/******************************* + Nag +*******************************/ + +.ui.nag { + display: none; + opacity: @opacity; + position: @position; + + top: @top; + left: 0px; + z-index: @zIndex; + + min-height: @minHeight; + width: @width; + + margin: @margin; + padding: @padding; + + background: @background; + box-shadow: @boxShadow; + + font-size: @fontSize; + text-align: @textAlign; + color: @color; + + border-radius: @topBorderRadius; + transition: @transition; +} + +a.ui.nag { + cursor: pointer; +} + +.ui.nag > .title { + display: inline-block; + margin: @titleMargin; + color: @titleColor; +} + + +.ui.nag > .close.icon { + cursor: pointer; + opacity: @closeOpacity; + + position: absolute; + top: @closeTop; + right: @closeRight; + + font-size: @closeSize; + + margin: @closeMargin; + color: @closeColor; + transition: @closeTransition; +} + + + +/******************************* + States +*******************************/ + +/* Hover */ +.ui.nag:hover { + background: @nagHoverBackground; + opacity: @nagHoverOpacity; +} + +.ui.nag .close:hover { + opacity: @closeHoverOpacity; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Static +---------------*/ + +.ui.overlay.nag { + position: absolute; + display: block; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.nag { + position: fixed; +} + +/*-------------- + Bottom +---------------*/ + +.ui.bottom.nags, +.ui.bottom.nag { + border-radius: @bottomBorderRadius; + top: auto; + bottom: @bottom; +} + +/*-------------- + White +---------------*/ + +.ui.inverted.nags .nag, +.ui.inverted.nag { + background-color: @invertedBackground; + color: @darkTextColor; +} +.ui.inverted.nags .nag .close, +.ui.inverted.nags .nag .title, +.ui.inverted.nag .close, +.ui.inverted.nag .title { + color: @lightTextColor; +} + + +/******************************* + Groups +*******************************/ + +.ui.nags .nag { + border-radius: @groupedBorderRadius !important; +} +.ui.nags .nag:last-child { + border-radius: @topBorderRadius; +} +.ui.bottom.nags .nag:last-child { + border-radius: @bottomBorderRadius; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/popup.less b/src/semantic/src/definitions/modules/popup.less new file mode 100755 index 0000000..d5aa745 --- /dev/null +++ b/src/semantic/src/definitions/modules/popup.less @@ -0,0 +1,712 @@ +/*! + * # Semantic UI - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'popup'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Popup +*******************************/ + +.ui.popup { + display: none; + position: absolute; + top: 0px; + right: 0px; + + /* Fixes content being squished when inline (moz only) */ + min-width: min-content; + z-index: @zIndex; + + border: @border; + line-height: @lineHeight; + max-width: @maxWidth; + background: @background; + + padding: @verticalPadding @horizontalPadding; + font-weight: @fontWeight; + font-style: @fontStyle; + color: @color; + + border-radius: @borderRadius; + box-shadow: @boxShadow; +} +.ui.popup > .header { + padding: 0em; + + font-family: @headerFont; + font-size: @headerFontSize; + line-height: @headerLineHeight; + font-weight: bold; +} +.ui.popup > .header + .content { + padding-top: @headerDistance; +} + +.ui.popup:before { + position: absolute; + content: ''; + width: @arrowSize; + height: @arrowSize; + + background: @arrowBackground; + transform: rotate(45deg); + + z-index: @arrowZIndex; + box-shadow: @arrowBoxShadow; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Tooltip +---------------*/ + +/* Content */ +[data-tooltip] { + position: relative; +} + +/* Arrow */ +[data-tooltip]:before { + pointer-events: none; + position: absolute; + content: ''; + font-size: @medium; + width: @arrowSize; + height: @arrowSize; + + background: @tooltipArrowBackground; + transform: rotate(45deg); + + z-index: @arrowZIndex; + box-shadow: @tooltipArrowBoxShadow; +} + +/* Popup */ +[data-tooltip]:after { + pointer-events: none; + content: attr(data-tooltip); + position: absolute; + text-transform: none; + text-align: left; + white-space: nowrap; + + font-size: @tooltipFontSize; + + border: @tooltipBorder; + line-height: @tooltipLineHeight; + max-width: @tooltipMaxWidth; + background: @tooltipBackground; + + padding: @tooltipPadding; + font-weight: @tooltipFontWeight; + font-style: @tooltipFontStyle; + color: @tooltipColor; + + border-radius: @tooltipBorderRadius; + box-shadow: @tooltipBoxShadow; + z-index: @tooltipZIndex; +} + +/* Default Position (Top Center) */ +[data-tooltip]:not([data-position]):before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + background: @tooltipArrowBottomBackground; + margin-left: @tooltipArrowHorizontalOffset; + margin-bottom: -@tooltipArrowVerticalOffset; +} +[data-tooltip]:not([data-position]):after { + left: 50%; + transform: translateX(-50%); + bottom: 100%; + margin-bottom: @tooltipDistanceAway; +} + +/* Animation */ +[data-tooltip]:before, +[data-tooltip]:after { + pointer-events: none; + visibility: hidden; +} +[data-tooltip]:before { + opacity: 0; + transform: rotate(45deg) scale(0) !important; + transform-origin: center top; + transition: + all @tooltipDuration @tooltipEasing + ; +} +[data-tooltip]:after { + opacity: 1; + transform-origin: center bottom; + transition: + all @tooltipDuration @tooltipEasing + ; +} +[data-tooltip]:hover:before, +[data-tooltip]:hover:after { + visibility: visible; + pointer-events: auto; +} +[data-tooltip]:hover:before { + transform: rotate(45deg) scale(1) !important; + opacity: 1; +} + +/* Animation Position */ +[data-tooltip]:after, +[data-tooltip][data-position="top center"]:after, +[data-tooltip][data-position="bottom center"]:after { + transform: translateX(-50%) scale(0) !important; +} +[data-tooltip]:hover:after, +[data-tooltip][data-position="bottom center"]:hover:after { + transform: translateX(-50%) scale(1) !important; +} +[data-tooltip][data-position="left center"]:after, +[data-tooltip][data-position="right center"]:after { + transform: translateY(-50%) scale(0) !important; +} +[data-tooltip][data-position="left center"]:hover:after, +[data-tooltip][data-position="right center"]:hover:after { + transform: translateY(-50%) scale(1) !important; +} +[data-tooltip][data-position="top left"]:after, +[data-tooltip][data-position="top right"]:after, +[data-tooltip][data-position="bottom left"]:after, +[data-tooltip][data-position="bottom right"]:after { + transform: scale(0) !important; +} +[data-tooltip][data-position="top left"]:hover:after, +[data-tooltip][data-position="top right"]:hover:after, +[data-tooltip][data-position="bottom left"]:hover:after, +[data-tooltip][data-position="bottom right"]:hover:after { + transform: scale(1) !important; +} + + +/*-------------- + Inverted +---------------*/ + +/* Arrow */ +[data-tooltip][data-inverted]:before { + box-shadow: none !important; +} + +/* Arrow Position */ +[data-tooltip][data-inverted]:before { + background: @invertedArrowBottomBackground; +} + +/* Popup */ +[data-tooltip][data-inverted]:after { + background: @tooltipInvertedBackground; + color: @tooltipInvertedColor; + border: @tooltipInvertedBorder; + box-shadow: @tooltipInvertedBoxShadow; +} +[data-tooltip][data-inverted]:after .header { + background-color: @tooltipInvertedHeaderBackground; + color: @tooltipInvertedHeaderColor; +} + +/*-------------- + Position +---------------*/ + +/* Top Center */ +[data-position="top center"][data-tooltip]:after { + top: auto; + right: auto; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + margin-bottom: @tooltipDistanceAway; +} +[data-position="top center"][data-tooltip]:before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + background: @tooltipArrowTopBackground; + margin-left: @tooltipArrowHorizontalOffset; + margin-bottom: -@tooltipArrowVerticalOffset; +} + +/* Top Left */ +[data-position="top left"][data-tooltip]:after { + top: auto; + right: auto; + left: 0; + bottom: 100%; + margin-bottom: @tooltipDistanceAway; +} +[data-position="top left"][data-tooltip]:before { + top: auto; + right: auto; + bottom: 100%; + left: @arrowDistanceFromEdge; + margin-left: @tooltipArrowHorizontalOffset; + margin-bottom: -@tooltipArrowVerticalOffset; +} + +/* Top Right */ +[data-position="top right"][data-tooltip]:after { + top: auto; + left: auto; + right: 0; + bottom: 100%; + margin-bottom: @tooltipDistanceAway; +} +[data-position="top right"][data-tooltip]:before { + top: auto; + left: auto; + bottom: 100%; + right: @arrowDistanceFromEdge; + margin-left: @tooltipArrowHorizontalOffset; + margin-bottom: -@tooltipArrowVerticalOffset; +} + + +/* Bottom Center */ +[data-position="bottom center"][data-tooltip]:after { + bottom: auto; + right: auto; + left: 50%; + top: 100%; + transform: translateX(-50%); + margin-top: @tooltipDistanceAway; +} +[data-position="bottom center"][data-tooltip]:before { + bottom: auto; + right: auto; + top: 100%; + left: 50%; + margin-left: @tooltipArrowHorizontalOffset; + margin-top: -@tooltipArrowVerticalOffset; +} + +/* Bottom Left */ +[data-position="bottom left"][data-tooltip]:after { + left: 0; + top: 100%; + margin-top: @tooltipDistanceAway; +} +[data-position="bottom left"][data-tooltip]:before { + bottom: auto; + right: auto; + top: 100%; + left: @arrowDistanceFromEdge; + margin-left: @tooltipArrowHorizontalOffset; + margin-top: -@tooltipArrowVerticalOffset; +} + +/* Bottom Right */ +[data-position="bottom right"][data-tooltip]:after { + right: 0; + top: 100%; + margin-top: @tooltipDistanceAway; +} +[data-position="bottom right"][data-tooltip]:before { + bottom: auto; + left: auto; + top: 100%; + right: @arrowDistanceFromEdge; + margin-left: @tooltipArrowVerticalOffset; + margin-top: -@tooltipArrowHorizontalOffset; +} + +/* Left Center */ +[data-position="left center"][data-tooltip]:after { + right: 100%; + top: 50%; + margin-right: @tooltipDistanceAway; + transform: translateY(-50%); +} +[data-position="left center"][data-tooltip]:before { + right: 100%; + top: 50%; + margin-top: @tooltipArrowVerticalOffset; + margin-right: @tooltipArrowHorizontalOffset; +} + +/* Right Center */ +[data-position="right center"][data-tooltip]:after { + left: 100%; + top: 50%; + margin-left: @tooltipDistanceAway; + transform: translateY(-50%); +} +[data-position="right center"][data-tooltip]:before { + left: 100%; + top: 50%; + margin-top: @tooltipArrowHorizontalOffset; + margin-left: -@tooltipArrowVerticalOffset; +} + +/* Arrow */ +[data-position~="bottom"][data-tooltip]:before { + background: @arrowTopBackground; + box-shadow: @bottomArrowBoxShadow; +} +[data-position="left center"][data-tooltip]:before { + background: @arrowCenterBackground; + box-shadow: @leftArrowBoxShadow; +} +[data-position="right center"][data-tooltip]:before { + background: @arrowCenterBackground; + box-shadow: @rightArrowBoxShadow; +} +[data-position~="top"][data-tooltip]:before { + background: @arrowBottomBackground; +} + +/* Inverted Arrow Color */ +[data-inverted][data-position~="bottom"][data-tooltip]:before { + background: @invertedArrowTopBackground; + box-shadow: @bottomArrowBoxShadow; +} +[data-inverted][data-position="left center"][data-tooltip]:before { + background: @invertedArrowCenterBackground; + box-shadow: @leftArrowBoxShadow; +} +[data-inverted][data-position="right center"][data-tooltip]:before { + background: @invertedArrowCenterBackground; + box-shadow: @rightArrowBoxShadow; +} +[data-inverted][data-position~="top"][data-tooltip]:before { + background: @invertedArrowBottomBackground; +} + +[data-position~="bottom"][data-tooltip]:before { + transform-origin: center bottom; +} +[data-position~="bottom"][data-tooltip]:after { + transform-origin: center top; +} +[data-position="left center"][data-tooltip]:before { + transform-origin: top center; +} +[data-position="left center"][data-tooltip]:after { + transform-origin: right center; +} +[data-position="right center"][data-tooltip]:before { + transform-origin: right center; +} +[data-position="right center"][data-tooltip]:after { + transform-origin: left center; +} + +/*-------------- + Spacing +---------------*/ + +.ui.popup { + margin: 0em; +} + +/* Extending from Top */ +.ui.top.popup { + margin: 0em 0em @popupDistanceAway; +} +.ui.top.left.popup { + transform-origin: left bottom; +} +.ui.top.center.popup { + transform-origin: center bottom; +} +.ui.top.right.popup { + transform-origin: right bottom; +} + +/* Extending from Vertical Center */ +.ui.left.center.popup { + margin: 0em @popupDistanceAway 0em 0em; + transform-origin: right 50%; +} +.ui.right.center.popup { + margin: 0em 0em 0em @popupDistanceAway; + transform-origin: left 50%; +} + +/* Extending from Bottom */ +.ui.bottom.popup { + margin: @popupDistanceAway 0em 0em; +} +.ui.bottom.left.popup { + transform-origin: left top; +} +.ui.bottom.center.popup { + transform-origin: center top; +} +.ui.bottom.right.popup { + transform-origin: right top; +} + +/*-------------- + Pointer +---------------*/ + +/*--- Below ---*/ +.ui.bottom.center.popup:before { + margin-left: @arrowOffset; + top: @arrowOffset; + left: 50%; + right: auto; + bottom: auto; + box-shadow: @bottomArrowBoxShadow; +} + +.ui.bottom.left.popup { + margin-left: @boxArrowOffset; +} +/*rtl:rename*/ +.ui.bottom.left.popup:before { + top: @arrowOffset; + left: @arrowDistanceFromEdge; + right: auto; + bottom: auto; + margin-left: 0em; + box-shadow: @bottomArrowBoxShadow; +} + +.ui.bottom.right.popup { + margin-right: @boxArrowOffset; +} +/*rtl:rename*/ +.ui.bottom.right.popup:before { + top: @arrowOffset; + right: @arrowDistanceFromEdge; + bottom: auto; + left: auto; + margin-left: 0em; + box-shadow: @bottomArrowBoxShadow; +} + +/*--- Above ---*/ +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: @arrowOffset; + left: 50%; + margin-left: @arrowOffset; +} +.ui.top.left.popup { + margin-left: @boxArrowOffset; +} +/*rtl:rename*/ +.ui.top.left.popup:before { + bottom: @arrowOffset; + left: @arrowDistanceFromEdge; + top: auto; + right: auto; + margin-left: 0em; +} +.ui.top.right.popup { + margin-right: @boxArrowOffset; +} +/*rtl:rename*/ +.ui.top.right.popup:before { + bottom: @arrowOffset; + right: @arrowDistanceFromEdge; + top: auto; + left: auto; + margin-left: 0em; +} + +/*--- Left Center ---*/ +/*rtl:rename*/ +.ui.left.center.popup:before { + top: 50%; + right: @arrowOffset; + bottom: auto; + left: auto; + margin-top: @arrowOffset; + box-shadow: @leftArrowBoxShadow; +} + +/*--- Right Center ---*/ +/*rtl:rename*/ +.ui.right.center.popup:before { + top: 50%; + left: @arrowOffset; + bottom: auto; + right: auto; + margin-top: @arrowOffset; + box-shadow: @rightArrowBoxShadow; +} + +/* Arrow Color By Location */ +.ui.bottom.popup:before { + background: @arrowTopBackground; +} +.ui.right.center.popup:before, +.ui.left.center.popup:before { + background: @arrowCenterBackground; +} +.ui.top.popup:before { + background: @arrowBottomBackground; +} + +/* Inverted Arrow Color */ +.ui.inverted.bottom.popup:before { + background: @invertedArrowTopBackground; +} +.ui.inverted.right.center.popup:before, +.ui.inverted.left.center.popup:before { + background: @invertedArrowCenterBackground; +} +.ui.inverted.top.popup:before { + background: @invertedArrowBottomBackground; +} + + +/******************************* + Coupling +*******************************/ + +/* Immediate Nested Grid */ +.ui.popup > .ui.grid:not(.padded) { + width: @nestedGridWidth; + margin: @nestedGridMargin; +} + +/******************************* + States +*******************************/ + +.ui.loading.popup { + display: block; + visibility: hidden; + z-index: @loadingZIndex; +} + +.ui.animating.popup, +.ui.visible.popup { + display: block; +} + +.ui.visible.popup { + transform: translateZ(0px); + backface-visibility: hidden; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Basic +---------------*/ + +.ui.basic.popup:before { + display: none; +} + + +/*-------------- + Wide +---------------*/ + +.ui.wide.popup { + max-width: @wideWidth; +} +.ui[class*="very wide"].popup { + max-width: @veryWideWidth; +} + +@media only screen and (max-width: @largestMobileScreen) { + .ui.wide.popup, + .ui[class*="very wide"].popup { + max-width: @maxWidth; + } +} + + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.popup { + width: 100%; + max-width: none; +} + + +/*-------------- + Colors +---------------*/ + +/* Inverted colors */ +.ui.inverted.popup { + background: @invertedBackground; + color: @invertedColor; + border: @invertedBorder; + box-shadow: @invertedBoxShadow; +} +.ui.inverted.popup .header { + background-color: @invertedHeaderBackground; + color: @invertedHeaderColor; +} +.ui.inverted.popup:before { + background-color: @invertedArrowColor; + box-shadow: none !important; +} + +/*-------------- + Flowing +---------------*/ + +.ui.flowing.popup { + max-width: none; +} + + +/*-------------- + Sizes +---------------*/ + +.ui.mini.popup { + font-size: @mini; +} +.ui.tiny.popup { + font-size: @tiny; +} +.ui.small.popup { + font-size: @small; +} +.ui.popup { + font-size: @medium; +} +.ui.large.popup { + font-size: @large; +} +.ui.huge.popup { + font-size: @huge; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/progress.less b/src/semantic/src/definitions/modules/progress.less new file mode 100755 index 0000000..ff8323f --- /dev/null +++ b/src/semantic/src/definitions/modules/progress.less @@ -0,0 +1,503 @@ +/*! + * # Semantic UI - Progress Bar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'progress'; + +@import (multiple) '../../theme.config'; + +/******************************* + Progress +*******************************/ + +.ui.progress { + position: relative; + display: block; + max-width: 100%; + border: @border; + margin: @margin; + box-shadow: @boxShadow; + background: @background; + padding: @padding; + border-radius: @borderRadius; +} + +.ui.progress:first-child { + margin: @firstMargin; +} +.ui.progress:last-child { + margin: @lastMargin; +} + +/******************************* + Content +*******************************/ + +/* Activity Bar */ +.ui.progress .bar { + display: block; + line-height: 1; + position: @barPosition; + width: @barInitialWidth; + min-width: @barMinWidth; + background: @barBackground; + border-radius: @barBorderRadius; + transition: @barTransition; +} + +/* Percent Complete */ +.ui.progress .bar > .progress { + white-space: nowrap; + position: @progressPosition; + width: @progressWidth; + font-size: @progressSize; + top: @progressTop; + right: @progressRight; + left: @progressLeft; + bottom: @progressBottom; + color: @progressColor; + text-shadow: @progressTextShadow; + margin-top: @progressOffset; + font-weight: @progressFontWeight; + text-align: @progressTextAlign; +} + +/* Label */ +.ui.progress > .label { + position: absolute; + width: @labelWidth; + font-size: @labelSize; + top: @labelTop; + right: @labelRight; + left: @labelLeft; + bottom: @labelBottom; + color: @labelColor; + font-weight: @labelFontWeight; + text-shadow: @labelTextShadow; + margin-top: @labelOffset; + text-align: @labelTextAlign; + transition: @labelTransition; +} + + +/******************************* + Types +*******************************/ + + +/* Indicating */ +.ui.indicating.progress[data-percent^="1"] .bar, +.ui.indicating.progress[data-percent^="2"] .bar { + background-color: @indicatingFirstColor; +} +.ui.indicating.progress[data-percent^="3"] .bar { + background-color: @indicatingSecondColor; +} +.ui.indicating.progress[data-percent^="4"] .bar, +.ui.indicating.progress[data-percent^="5"] .bar { + background-color: @indicatingThirdColor; +} +.ui.indicating.progress[data-percent^="6"] .bar { + background-color: @indicatingFourthColor; +} +.ui.indicating.progress[data-percent^="7"] .bar, +.ui.indicating.progress[data-percent^="8"] .bar { + background-color: @indicatingFifthColor; +} +.ui.indicating.progress[data-percent^="9"] .bar, +.ui.indicating.progress[data-percent^="100"] .bar { + background-color: @indicatingSixthColor; +} + +/* Indicating Label */ +.ui.indicating.progress[data-percent^="1"] .label, +.ui.indicating.progress[data-percent^="2"] .label { + color: @indicatingFirstLabelColor; +} +.ui.indicating.progress[data-percent^="3"] .label { + color: @indicatingSecondLabelColor; +} +.ui.indicating.progress[data-percent^="4"] .label, +.ui.indicating.progress[data-percent^="5"] .label { + color: @indicatingThirdLabelColor; +} +.ui.indicating.progress[data-percent^="6"] .label { + color: @indicatingFourthLabelColor; +} +.ui.indicating.progress[data-percent^="7"] .label, +.ui.indicating.progress[data-percent^="8"] .label { + color: @indicatingFifthLabelColor; +} +.ui.indicating.progress[data-percent^="9"] .label, +.ui.indicating.progress[data-percent^="100"] .label { + color: @indicatingSixthLabelColor; +} + +/* Single Digits */ +.ui.indicating.progress[data-percent="1"] .bar, +.ui.indicating.progress[data-percent="2"] .bar, +.ui.indicating.progress[data-percent="3"] .bar, +.ui.indicating.progress[data-percent="4"] .bar, +.ui.indicating.progress[data-percent="5"] .bar, +.ui.indicating.progress[data-percent="6"] .bar, +.ui.indicating.progress[data-percent="7"] .bar, +.ui.indicating.progress[data-percent="8"] .bar, +.ui.indicating.progress[data-percent="9"] .bar { + background-color: @indicatingFirstColor; +} +.ui.indicating.progress[data-percent="1"] .label, +.ui.indicating.progress[data-percent="2"] .label, +.ui.indicating.progress[data-percent="3"] .label, +.ui.indicating.progress[data-percent="4"] .label, +.ui.indicating.progress[data-percent="5"] .label, +.ui.indicating.progress[data-percent="6"] .label, +.ui.indicating.progress[data-percent="7"] .label, +.ui.indicating.progress[data-percent="8"] .label, +.ui.indicating.progress[data-percent="9"] .label { + color: @indicatingFirstLabelColor; +} + +/* Indicating Success */ +.ui.indicating.progress.success .label { + color: @successHeaderColor; +} + +/******************************* + States +*******************************/ + + +/*-------------- + Success +---------------*/ + +.ui.progress.success .bar { + background-color: @successColor !important; +} +.ui.progress.success .bar, +.ui.progress.success .bar::after { + animation: none !important; +} +.ui.progress.success > .label { + color: @successHeaderColor; +} + +/*-------------- + Warning +---------------*/ + +.ui.progress.warning .bar { + background-color: @warningColor !important; +} +.ui.progress.warning .bar, +.ui.progress.warning .bar::after { + animation: none !important; +} +.ui.progress.warning > .label { + color: @warningHeaderColor; +} + +/*-------------- + Error +---------------*/ + +.ui.progress.error .bar { + background-color: @errorColor !important; +} +.ui.progress.error .bar, +.ui.progress.error .bar::after { + animation: none !important; +} +.ui.progress.error > .label { + color: @errorHeaderColor; +} + +/*-------------- + Active +---------------*/ + +.ui.active.progress .bar { + position: relative; + min-width: @activeMinWidth; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: @activePulseColor; + + border-radius: @barBorderRadius; + + animation: progress-active @activePulseDuration @defaultEasing infinite; +} +@keyframes progress-active { + 0% { + opacity: @activePulseMaxOpacity; + width: 0; + } + 90% { + } + 100% { + opacity: 0; + width: 100%; + } +} + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.progress { + opacity: 0.35; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { + animation: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.progress { + background: @invertedBackground; + border: @invertedBorder; +} +.ui.inverted.progress .bar { + background: @invertedBarBackground; +} +.ui.inverted.progress .bar > .progress { + color: @invertedProgressColor; +} +.ui.inverted.progress > .label { + color: @invertedLabelColor; +} +.ui.inverted.progress.success > .label { + color: @successColor; +} +.ui.inverted.progress.warning > .label { + color: @warningColor; +} +.ui.inverted.progress.error > .label { + color: @errorColor; +} + +/*-------------- + Attached +---------------*/ + +/* bottom attached */ +.ui.progress.attached { + background: @attachedBackground; + position: relative; + border: none; + margin: 0em; +} +.ui.progress.attached, +.ui.progress.attached .bar { + display: block; + height: @attachedHeight; + padding: 0px; + overflow: hidden; + border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; +} +.ui.progress.attached .bar { + border-radius: 0em; +} + +/* top attached */ +.ui.progress.top.attached, +.ui.progress.top.attached .bar { + top: 0px; + border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; +} +.ui.progress.top.attached .bar { + border-radius: 0em; +} + +/* Coupling */ +.ui.segment > .ui.attached.progress, +.ui.card > .ui.attached.progress { + position: absolute; + top: auto; + left: 0; + bottom: 100%; + width: 100%; +} +.ui.segment > .ui.bottom.attached.progress, +.ui.card > .ui.bottom.attached.progress { + top: 100%; + bottom: auto; +} + +/*-------------- + Colors +---------------*/ + +/* Red */ +.ui.red.progress .bar { + background-color: @red; +} +.ui.red.inverted.progress .bar { + background-color: @lightRed; +} + +/* Orange */ +.ui.orange.progress .bar { + background-color: @orange; +} +.ui.orange.inverted.progress .bar { + background-color: @lightOrange; +} + +/* Yellow */ +.ui.yellow.progress .bar { + background-color: @yellow; +} +.ui.yellow.inverted.progress .bar { + background-color: @lightYellow; +} + +/* Olive */ +.ui.olive.progress .bar { + background-color: @olive; +} +.ui.olive.inverted.progress .bar { + background-color: @lightOlive; +} + +/* Green */ +.ui.green.progress .bar { + background-color: @green; +} +.ui.green.inverted.progress .bar { + background-color: @lightGreen; +} + +/* Teal */ +.ui.teal.progress .bar { + background-color: @teal; +} +.ui.teal.inverted.progress .bar { + background-color: @lightTeal; +} + +/* Blue */ +.ui.blue.progress .bar { + background-color: @blue; +} +.ui.blue.inverted.progress .bar { + background-color: @lightBlue; +} + +/* Violet */ +.ui.violet.progress .bar { + background-color: @violet; +} +.ui.violet.inverted.progress .bar { + background-color: @lightViolet; +} + +/* Purple */ +.ui.purple.progress .bar { + background-color: @purple; +} +.ui.purple.inverted.progress .bar { + background-color: @lightPurple; +} + +/* Pink */ +.ui.pink.progress .bar { + background-color: @pink; +} +.ui.pink.inverted.progress .bar { + background-color: @lightPink; +} + +/* Brown */ +.ui.brown.progress .bar { + background-color: @brown; +} +.ui.brown.inverted.progress .bar { + background-color: @lightBrown; +} + +/* Grey */ +.ui.grey.progress .bar { + background-color: @grey; +} +.ui.grey.inverted.progress .bar { + background-color: @lightGrey; +} + +/* Black */ +.ui.black.progress .bar { + background-color: @black; +} +.ui.black.inverted.progress .bar { + background-color: @lightBlack; +} + +/*-------------- + Sizes +---------------*/ + +.ui.tiny.progress { + font-size: @tiny; +} +.ui.tiny.progress .bar { + height: @tinyBarHeight; +} + +.ui.small.progress { + font-size: @small; +} +.ui.small.progress .bar { + height: @smallBarHeight; +} + +.ui.progress { + font-size: @medium; +} +.ui.progress .bar { + height: @barHeight; +} + +.ui.large.progress { + font-size: @large; +} +.ui.large.progress .bar { + height: @largeBarHeight; +} + +.ui.big.progress { + font-size: @big; +} +.ui.big.progress .bar { + height: @bigBarHeight; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/rating.less b/src/semantic/src/definitions/modules/rating.less new file mode 100755 index 0000000..b82667c --- /dev/null +++ b/src/semantic/src/definitions/modules/rating.less @@ -0,0 +1,191 @@ +/*! + * # Semantic UI - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'rating'; + +@import (multiple) '../../theme.config'; + +/******************************* + Rating +*******************************/ + +.ui.rating { + display: inline-flex; + white-space: @whiteSpace; + vertical-align: @verticalAlign; +} +.ui.rating:last-child { + margin-right: 0em; +} + +/* Icon */ +.ui.rating .icon { + padding: 0em; + margin: 0em; + text-align: center; + font-weight: normal; + font-style: normal; + flex: 1 0 auto; + cursor: @iconCursor; + width: @iconWidth; + height: @iconHeight; + transition: @iconTransition; +} + + +/******************************* + Types +*******************************/ + + +/*------------------- + Standard +--------------------*/ + +/* Inactive Icon */ +.ui.rating .icon { + background: @inactiveBackground; + color: @inactiveColor; +} + +/* Active Icon */ +.ui.rating .active.icon { + background: @activeBackground; + color: @activeColor; +} + +/* Selected Icon */ +.ui.rating .icon.selected, +.ui.rating .icon.selected.active { + background: @selectedBackground; + color: @selectedColor; +} + + +/*------------------- + Star +--------------------*/ + +/* Inactive */ +.ui.star.rating .icon { + width: @starIconWidth; + height: @starIconHeight; + background: @starInactiveBackground; + color: @starInactiveColor; + text-shadow: @starInactiveTextShadow; +} + +/* Active Star */ +.ui.star.rating .active.icon { + background: @starActiveBackground !important; + color: @starActiveColor !important; + text-shadow: @starActiveTextShadow !important; +} + +/* Selected Star */ +.ui.star.rating .icon.selected, +.ui.star.rating .icon.selected.active { + background: @starSelectedBackground !important; + color: @starSelectedColor !important; + text-shadow: @starSelectedTextShadow !important; +} + + +/*------------------- + Heart +--------------------*/ + +.ui.heart.rating .icon { + width: @heartIconWidth; + height: @heartIconHeight; + background: @heartInactiveBackground; + color: @heartInactiveColor; + text-shadow: @heartInactiveTextShadow !important; +} + +/* Active Heart */ +.ui.heart.rating .active.icon { + background: @heartActiveBackground !important; + color: @heartActiveColor !important; + text-shadow: @heartActiveTextShadow !important; +} + +/* Selected Heart */ +.ui.heart.rating .icon.selected, +.ui.heart.rating .icon.selected.active { + background: @heartSelectedBackground !important; + color: @heartSelectedColor !important; + text-shadow: @heartSelectedTextShadow !important; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +/* disabled rating */ +.ui.disabled.rating .icon { + cursor: default; +} + + +/*------------------- + User Interactive +--------------------*/ + +/* Selected Rating */ +.ui.rating.selected .active.icon { + opacity: @interactiveActiveIconOpacity; +} +.ui.rating.selected .icon.selected, +.ui.rating .icon.selected { + opacity: @interactiveSelectedIconOpacity; +} + + + +/******************************* + Variations +*******************************/ + +.ui.mini.rating { + font-size: @mini; +} +.ui.tiny.rating { + font-size: @tiny; +} +.ui.small.rating { + font-size: @small; +} +.ui.rating { + font-size: @medium; +} +.ui.large.rating { + font-size: @large; +} +.ui.huge.rating { + font-size: @huge; +} +.ui.massive.rating { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/search.less b/src/semantic/src/definitions/modules/search.less new file mode 100755 index 0000000..4d28567 --- /dev/null +++ b/src/semantic/src/definitions/modules/search.less @@ -0,0 +1,417 @@ +/*! + * # Semantic UI - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'search'; + +@import (multiple) '../../theme.config'; + +/******************************* + Search +*******************************/ + +.ui.search { + position: relative; +} + +.ui.search > .prompt { + margin: 0em; + outline: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + + text-shadow: none; + font-style: normal; + font-weight: normal; + + line-height: @promptLineHeight; + padding: @promptPadding; + font-size: @promptFontSize; + + background: @promptBackground; + border: @promptBorder; + color: @promptColor; + box-shadow: @promptBoxShadow; + transition: @promptTransition; +} + +.ui.search .prompt { + border-radius: @promptBorderRadius; +} + + +/*-------------- + Icon +---------------*/ + +.ui.search .prompt ~ .search.icon { + cursor: pointer; +} + +/*-------------- + Results +---------------*/ + +.ui.search > .results { + display: none; + + position: absolute; + top: 100%; + left: 0%; + transform-origin: center top; + white-space: normal; + + background: @resultsBackground; + + margin-top: @resultsDistance; + width: @resultsWidth; + + border-radius: @resultsBorderRadius; + box-shadow: @resultsBoxShadow; + border: @resultsBorder; + z-index: @resultsZIndex; +} +.ui.search > .results > :first-child { + border-radius: @resultsBorderRadius @resultsBorderRadius 0em 0em; +} +.ui.search > .results > :last-child { + border-radius: 0em 0em @resultsBorderRadius @resultsBorderRadius; +} + +/*-------------- + Result +---------------*/ + +.ui.search > .results .result { + cursor: pointer; + display: block; + overflow: hidden; + font-size: @resultFontSize; + padding: @resultPadding; + color: @resultTextColor; + line-height: @resultLineHeight; + border-bottom: @resultDivider; +} +.ui.search > .results .result:last-child { + border-bottom: @resultLastDivider !important; +} + +/* Image */ +.ui.search > .results .result .image { + float: @resultImageFloat; + overflow: hidden; + background: @resultImageBackground; + width: @resultImageWidth; + height: @resultImageHeight; + border-radius: @resultImageBorderRadius; +} +.ui.search > .results .result .image img { + display: block; + width: auto; + height: 100%; +} + +/*-------------- + Info +---------------*/ + +.ui.search > .results .result .image + .content { + margin: @resultImageMargin; +} + +.ui.search > .results .result .title { + margin: @resultTitleMargin; + font-family: @resultTitleFont; + font-weight: @resultTitleFontWeight; + font-size: @resultTitleFontSize; + color: @resultTitleColor; +} +.ui.search > .results .result .description { + margin-top: @resultDescriptionDistance; + font-size: @resultDescriptionFontSize; + color: @resultDescriptionColor; +} +.ui.search > .results .result .price { + float: @resultPriceFloat; + color: @resultPriceColor; +} + +/*-------------- + Message +---------------*/ + +.ui.search > .results > .message { + padding: @messageVerticalPadding @messageHorizontalPadding; +} +.ui.search > .results > .message .header { + font-family: @headerFont; + font-size: @messageHeaderFontSize; + font-weight: @messageHeaderFontWeight; + color: @messageHeaderColor; +} +.ui.search > .results > .message .description { + margin-top: @messageDescriptionDistance; + font-size: @messageDescriptionFontSize; + color: @messageDescriptionColor; +} + +/* View All Results */ +.ui.search > .results > .action { + display: block; + border-top: @actionBorder; + background: @actionBackground; + padding: @actionPadding; + color: @actionColor; + font-weight: @actionFontWeight; + text-align: @actionAlign; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Focus +---------------------*/ + +.ui.search > .prompt:focus { + border-color: @promptFocusBorderColor; + background: @promptFocusBackground; + color: @promptFocusColor; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.search .input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} +.ui.loading.search .input > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + + +/*-------------- + Hover +---------------*/ + +.ui.search > .results .result:hover, +.ui.category.search > .results .category .result:hover { + background: @resultHoverBackground; +} +.ui.search .action:hover { + background: @actionHoverBackground; +} + +/*-------------- + Active +---------------*/ + +.ui.category.search > .results .category.active { + background: @categoryActiveBackground; +} +.ui.category.search > .results .category.active > .name { + color: @categoryNameActiveColor; +} + +.ui.search > .results .result.active, +.ui.category.search > .results .category .result.active { + position: relative; + border-left-color: @resultActiveBorderLeft; + background: @resultActiveBackground; + box-shadow: @resultActiveBoxShadow; +} +.ui.search > .results .result.active .title { + color: @resultActiveTitleColor; +} +.ui.search > .results .result.active .description { + color: @resultActiveDescriptionColor; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Selection +---------------*/ + +.ui.search.selection .prompt { + border-radius: @selectionPromptBorderRadius; +} + +/* Remove input */ +.ui.search.selection > .icon.input > .remove.icon { + pointer-events: none; + position: absolute; + left: auto; + opacity: 0; + color: @selectionCloseIconColor; + top: @selectionCloseTop; + right: @selectionCloseRight; + transition: @selectionCloseTransition; +} +.ui.search.selection > .icon.input > .active.remove.icon { + cursor: pointer; + opacity: @selectionCloseIconOpacity; + pointer-events: auto; +} +.ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon { + right: @selectionCloseIconInputRight; +} +.ui.search.selection > .icon.input > .remove.icon:hover { + opacity: @selectionCloseIconHoverOpacity; + color: @selectionCloseIconHoverColor; +} + + +/*-------------- + Category +---------------*/ + +.ui.category.search .results { + width: @categoryResultsWidth; +} + +/* Category */ +.ui.category.search > .results .category { + background: @categoryBackground; + box-shadow: @categoryBoxShadow; + border-bottom: @categoryDivider; + transition: @categoryTransition; +} + +/* Last Category */ +.ui.category.search > .results .category:last-child { + border-bottom: none; +} + +/* First / Last */ +.ui.category.search > .results .category:first-child .name + .result { + border-radius: 0em @resultsBorderRadius 0em 0em; +} +.ui.category.search > .results .category:last-child .result:last-child { + border-radius: 0em 0em @resultsBorderRadius 0em; +} + +/* Category Result */ +.ui.category.search > .results .category .result { + background: @categoryResultBackground; + margin-left: @categoryNameWidth; + border-left: @categoryResultLeftBorder; + border-bottom: @categoryResultDivider; + transition: @categoryResultTransition; + padding: @categoryResultPadding; +} +.ui.category.search > .results .category:last-child .result:last-child { + border-bottom: @categoryResultLastDivider; +} + +/* Category Result Name */ +.ui.category.search > .results .category > .name { + width: @categoryNameWidth; + background: @categoryNameBackground; + font-family: @categoryNameFont; + font-size: @categoryNameFontSize; + float: @categoryNameFontSize; + float: @categoryNameFloat; + padding: @categoryNamePadding; + font-weight: @categoryNameFontWeight; + color: @categoryNameColor; +} + +/******************************* + Variations +*******************************/ + +/*------------------- + Left / Right +--------------------*/ + +.ui[class*="left aligned"].search > .results { + right: auto; + left: 0%; +} +.ui[class*="right aligned"].search > .results { + right: 0%; + left: auto; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.search .results { + width: 100%; +} + + +/*-------------- + Sizes +---------------*/ + +.ui.mini.search { + font-size: @relativeMini; +} +.ui.small.search { + font-size: @relativeSmall; +} +.ui.search { + font-size: @relativeMedium; +} +.ui.large.search { + font-size: @relativeLarge; +} +.ui.big.search { + font-size: @relativeBig; +} +.ui.huge.search { + font-size: @relativeHuge; +} +.ui.massive.search { + font-size: @relativeMassive; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/shape.less b/src/semantic/src/definitions/modules/shape.less new file mode 100755 index 0000000..c2c87f9 --- /dev/null +++ b/src/semantic/src/definitions/modules/shape.less @@ -0,0 +1,150 @@ +/*! + * # Semantic UI - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'shape'; + +@import (multiple) '../../theme.config'; + +/******************************* + Shape +*******************************/ + +.ui.shape { + position: relative; + vertical-align: top; + display: @display; + perspective: @perspective; + transition: @transition; +} + +.ui.shape .sides { + transform-style: preserve-3d; +} + +.ui.shape .side { + opacity: 1; + width: 100%; + + margin: @sideMargin !important; + backface-visibility: @backfaceVisibility; +} + +.ui.shape .side { + display: none; +} + +.ui.shape .side * { + backface-visibility: visible !important; +} + +/******************************* + Types +*******************************/ + +.ui.cube.shape .side { + min-width: @cubeSize; + height: @cubeSize; + + padding: @cubePadding; + + background-color: @cubeBackground; + color: @cubeTextColor; + box-shadow: @cubeBoxShadow; +} +.ui.cube.shape .side > .content { + width: 100%; + height: 100%; + display: table; + + text-align: @cubeTextAlign; + user-select: text; +} +.ui.cube.shape .side > .content > div { + display: table-cell; + vertical-align: middle; + font-size: @cubeFontSize; +} + +/******************************* + Variations +*******************************/ + +.ui.text.shape.animating .sides { + position: static; +} +.ui.text.shape .side { + white-space: nowrap; +} +.ui.text.shape .side > * { + white-space: normal; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Loading +---------------*/ + +.ui.loading.shape { + position: absolute; + top: -9999px; + left: -9999px; +} + + +/*-------------- + Animating +---------------*/ + +.ui.shape .animating.side { + position: absolute; + top: 0px; + left: 0px; + display: block; + z-index: @animatingZIndex; +} +.ui.shape .hidden.side { + opacity: @hiddenSideOpacity; +} + + +/*-------------- + CSS +---------------*/ + +.ui.shape.animating .sides { + position: absolute; +} +.ui.shape.animating .sides { + transition: @transition; +} +.ui.shape.animating .side { + transition: @sideTransition; +} + +/*-------------- + Active +---------------*/ + +.ui.shape .active.side { + display: block; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/sidebar.less b/src/semantic/src/definitions/modules/sidebar.less new file mode 100755 index 0000000..6affda9 --- /dev/null +++ b/src/semantic/src/definitions/modules/sidebar.less @@ -0,0 +1,552 @@ +/*! + * # Semantic UI - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'sidebar'; + +@import (multiple) '../../theme.config'; + +/******************************* + Sidebar +*******************************/ + +/* Sidebar Menu */ +.ui.sidebar { + position: fixed; + top: 0; + left: 0; + + backface-visibility: hidden; + transition: none; + will-change: transform; + transform: translate3d(0, 0, 0); + visibility: hidden; + -webkit-overflow-scrolling: touch; + + height: 100% !important; + max-height: 100%; + border-radius: 0em !important; + margin: 0em !important; + overflow-y: auto !important; + z-index: @topLayer; +} + +/* GPU Layers for Child Elements */ +.ui.sidebar > * { + backface-visibility: hidden; +} + + +/*-------------- + Direction +---------------*/ + +.ui.left.sidebar { + right: auto; + left: 0px; + transform: translate3d(-100%, 0, 0); +} +.ui.right.sidebar { + right: 0px !important; + left: auto !important; + transform: translate3d(100%, 0%, 0); +} + +.ui.top.sidebar, +.ui.bottom.sidebar { + width: 100% !important; + height: auto !important; +} +.ui.top.sidebar { + top: 0px !important; + bottom: auto !important; + transform: translate3d(0, -100%, 0); +} +.ui.bottom.sidebar { + top: auto !important; + bottom: 0px !important; + transform: translate3d(0, 100%, 0); +} + + +/*-------------- + Pushable +---------------*/ + +.pushable { + height: 100%; + overflow-x: hidden; + padding: 0em !important; +} + +/* Whole Page */ +body.pushable { + background: @canvasBackground !important; +} + +/* Page Context */ +.pushable:not(body) { + transform: translate3d(0, 0, 0); +} +.pushable:not(body) > .ui.sidebar, +.pushable:not(body) > .fixed, +.pushable:not(body) > .pusher:after { + position: absolute; +} + + +/*-------------- + Fixed +---------------*/ + +.pushable > .fixed { + position: fixed; + backface-visibility: hidden; + + transition: transform @duration @easing; + will-change: transform; + z-index: @fixedLayer; +} + +/*-------------- + Page +---------------*/ + +.pushable > .pusher { + position: relative; + backface-visibility: hidden; + overflow: hidden; + min-height: 100%; + transition: transform @duration @easing; + z-index: @middleLayer; +} + +body.pushable > .pusher { + background: @pageBackground; +} + +/* Pusher should inherit background from context */ +.pushable > .pusher { + background: inherit; +} + +/*-------------- + Dimmer +---------------*/ + +.pushable > .pusher:after { + position: fixed; + top: 0px; + right: 0px; + content: ''; + background-color: @dimmerColor; + overflow: hidden; + opacity: 0; + transition: @dimmerTransition; + will-change: opacity; + z-index: @dimmerLayer; +} + +/*-------------- + Coupling +---------------*/ + +.ui.sidebar.menu .item { + border-radius: 0em !important; +} + +/******************************* + States +*******************************/ + +/*-------------- + Dimmed +---------------*/ + +.pushable > .pusher.dimmed:after { + width: 100% !important; + height: 100% !important; + opacity: 1 !important; +} + +/*-------------- + Animating +---------------*/ + +.ui.animating.sidebar { + visibility: visible; +} + +/*-------------- + Visible +---------------*/ + +.ui.visible.sidebar { + visibility: visible; + transform: translate3d(0, 0, 0); +} + +/* Shadow Direction */ +.ui.left.visible.sidebar, +.ui.right.visible.sidebar { + box-shadow: @horizontalBoxShadow; +} +.ui.top.visible.sidebar, +.ui.bottom.visible.sidebar { + box-shadow: @verticalBoxShadow; +} + +/* Visible On Load */ +.ui.visible.left.sidebar ~ .fixed, +.ui.visible.left.sidebar ~ .pusher { + transform: translate3d(@width, 0, 0); +} +.ui.visible.right.sidebar ~ .fixed, +.ui.visible.right.sidebar ~ .pusher { + transform: translate3d(-@width, 0, 0); +} +.ui.visible.top.sidebar ~ .fixed, +.ui.visible.top.sidebar ~ .pusher { + transform: translate3d(0, @height, 0); +} +.ui.visible.bottom.sidebar ~ .fixed, +.ui.visible.bottom.sidebar ~ .pusher { + transform: translate3d(0, -@height, 0); +} + +/* opposite sides visible forces content overlay */ +.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed, +.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher, +.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed, +.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher { + transform: translate3d(0, 0, 0); +} + +/*-------------- + iOS +---------------*/ + +/* + iOS incorrectly sizes document when content + is presented outside of view with 2Dtranslate +*/ +html.ios { + overflow-x: hidden; + -webkit-overflow-scrolling: touch; +} + +html.ios, +html.ios body { + height: initial !important; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Width +---------------*/ + +/* Left / Right */ +.ui.thin.left.sidebar, +.ui.thin.right.sidebar { + width: @thinWidth; +} +.ui[class*="very thin"].left.sidebar, +.ui[class*="very thin"].right.sidebar { + width: @veryThinWidth; +} +.ui.left.sidebar, +.ui.right.sidebar { + width: @width; +} +.ui.wide.left.sidebar, +.ui.wide.right.sidebar { + width: @wideWidth; +} +.ui[class*="very wide"].left.sidebar, +.ui[class*="very wide"].right.sidebar { + width: @veryWideWidth; +} + +/* Left Visible */ +.ui.visible.thin.left.sidebar ~ .fixed, +.ui.visible.thin.left.sidebar ~ .pusher { + transform: translate3d(@thinWidth, 0, 0); +} +.ui.visible[class*="very thin"].left.sidebar ~ .fixed, +.ui.visible[class*="very thin"].left.sidebar ~ .pusher { + transform: translate3d(@veryThinWidth, 0, 0); +} +.ui.visible.wide.left.sidebar ~ .fixed, +.ui.visible.wide.left.sidebar ~ .pusher { + transform: translate3d(@wideWidth, 0, 0); +} +.ui.visible[class*="very wide"].left.sidebar ~ .fixed, +.ui.visible[class*="very wide"].left.sidebar ~ .pusher { + transform: translate3d(@veryWideWidth, 0, 0); +} + +/* Right Visible */ +.ui.visible.thin.right.sidebar ~ .fixed, +.ui.visible.thin.right.sidebar ~ .pusher { + transform: translate3d(-@thinWidth, 0, 0); +} +.ui.visible[class*="very thin"].right.sidebar ~ .fixed, +.ui.visible[class*="very thin"].right.sidebar ~ .pusher { + transform: translate3d(-@veryThinWidth, 0, 0); +} +.ui.visible.wide.right.sidebar ~ .fixed, +.ui.visible.wide.right.sidebar ~ .pusher { + transform: translate3d(-@wideWidth, 0, 0); +} +.ui.visible[class*="very wide"].right.sidebar ~ .fixed, +.ui.visible[class*="very wide"].right.sidebar ~ .pusher { + transform: translate3d(-@veryWideWidth, 0, 0); +} + + + +/******************************* + Animations +*******************************/ + +/*-------------- + Overlay +---------------*/ + +/* Set-up */ +.ui.overlay.sidebar { + z-index: @topLayer; +} + +/* Initial */ +.ui.left.overlay.sidebar { + transform: translate3d(-100%, 0%, 0); +} +.ui.right.overlay.sidebar { + transform: translate3d(100%, 0%, 0); +} +.ui.top.overlay.sidebar { + transform: translate3d(0%, -100%, 0); +} +.ui.bottom.overlay.sidebar { + transform: translate3d(0%, 100%, 0); +} + +/* Animation */ +.animating.ui.overlay.sidebar, +.ui.visible.overlay.sidebar { + transition: transform @duration @easing; +} + +/* End - Sidebar */ +.ui.visible.left.overlay.sidebar { + transform: translate3d(0%, 0%, 0); +} +.ui.visible.right.overlay.sidebar { + transform: translate3d(0%, 0%, 0); +} +.ui.visible.top.overlay.sidebar { + transform: translate3d(0%, 0%, 0); +} +.ui.visible.bottom.overlay.sidebar { + transform: translate3d(0%, 0%, 0); +} + +/* End - Pusher */ +.ui.visible.overlay.sidebar ~ .fixed, +.ui.visible.overlay.sidebar ~ .pusher { + transform: none !important; +} + + + +/*-------------- + Push +---------------*/ + +/* Initial */ +.ui.push.sidebar { + transition: transform @duration @easing; + z-index: @topLayer; +} + +/* Sidebar - Initial */ +.ui.left.push.sidebar { + transform: translate3d(-100%, 0, 0); +} +.ui.right.push.sidebar { + transform: translate3d(100%, 0, 0); +} +.ui.top.push.sidebar { + transform: translate3d(0%, -100%, 0); +} +.ui.bottom.push.sidebar { + transform: translate3d(0%, 100%, 0); +} + +/* End */ +.ui.visible.push.sidebar { + transform: translate3d(0%, 0, 0); +} + + +/*-------------- + Uncover +---------------*/ + +/* Initial */ +.ui.uncover.sidebar { + transform: translate3d(0, 0, 0); + z-index: @bottomLayer; +} + +/* End */ +.ui.visible.uncover.sidebar { + transform: translate3d(0, 0, 0); + transition: transform @duration @easing; +} + + +/*-------------- + Slide Along +---------------*/ + +/* Initial */ +.ui.slide.along.sidebar { + z-index: @bottomLayer; +} + +/* Sidebar - Initial */ +.ui.left.slide.along.sidebar { + transform: translate3d(-50%, 0, 0); +} +.ui.right.slide.along.sidebar { + transform: translate3d(50%, 0, 0); +} +.ui.top.slide.along.sidebar { + transform: translate3d(0, -50%, 0); +} +.ui.bottom.slide.along.sidebar { + transform: translate3d(0%, 50%, 0); +} + +/* Animation */ +.ui.animating.slide.along.sidebar { + transition: transform @duration @easing; +} + +/* End */ +.ui.visible.slide.along.sidebar { + transform: translate3d(0%, 0, 0); +} + + +/*-------------- + Slide Out +---------------*/ + +/* Initial */ +.ui.slide.out.sidebar { + z-index: @bottomLayer; +} + +/* Sidebar - Initial */ +.ui.left.slide.out.sidebar { + transform: translate3d(50%, 0, 0); +} +.ui.right.slide.out.sidebar { + transform: translate3d(-50%, 0, 0); +} +.ui.top.slide.out.sidebar { + transform: translate3d(0%, 50%, 0); +} +.ui.bottom.slide.out.sidebar { + transform: translate3d(0%, -50%, 0); +} + +/* Animation */ +.ui.animating.slide.out.sidebar { + transition: transform @duration @easing; +} + +/* End */ +.ui.visible.slide.out.sidebar { + transform: translate3d(0%, 0, 0); +} + +/*-------------- + Scale Down +---------------*/ + +/* Initial */ +.ui.scale.down.sidebar { + transition: transform @duration @easing; + z-index: @topLayer; +} + +/* Sidebar - Initial */ +.ui.left.scale.down.sidebar { + transform: translate3d(-100%, 0, 0); +} +.ui.right.scale.down.sidebar { + transform: translate3d(100%, 0, 0); +} +.ui.top.scale.down.sidebar { + transform: translate3d(0%, -100%, 0); +} +.ui.bottom.scale.down.sidebar { + transform: translate3d(0%, 100%, 0); +} + +/* Pusher - Initial */ +.ui.scale.down.left.sidebar ~ .pusher { + transform-origin: 75% 50%; +} +.ui.scale.down.right.sidebar ~ .pusher { + transform-origin: 25% 50%; +} +.ui.scale.down.top.sidebar ~ .pusher { + transform-origin: 50% 75%; +} +.ui.scale.down.bottom.sidebar ~ .pusher { + transform-origin: 50% 25%; +} + +/* Animation */ +.ui.animating.scale.down > .visible.ui.sidebar { + transition: transform @duration @easing; +} +.ui.visible.scale.down.sidebar ~ .pusher, +.ui.animating.scale.down.sidebar ~ .pusher { + display: block !important; + width: 100%; + height: 100%; + overflow: hidden !important; +} + +/* End */ +.ui.visible.scale.down.sidebar { + transform: translate3d(0, 0, 0); +} +.ui.visible.scale.down.sidebar ~ .pusher { + transform: scale(0.75); +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/sticky.less b/src/semantic/src/definitions/modules/sticky.less new file mode 100755 index 0000000..9ee898d --- /dev/null +++ b/src/semantic/src/definitions/modules/sticky.less @@ -0,0 +1,74 @@ +/*! + * # Semantic UI - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'sticky'; + +@import (multiple) '../../theme.config'; + +/******************************* + Sticky +*******************************/ + +.ui.sticky { + position: static; + transition: @transition; + z-index: @zIndex; +} + +/******************************* + States +*******************************/ + +/* Bound */ +.ui.sticky.bound { + position: absolute; + left: auto; + right: auto; +} + +/* Fixed */ +.ui.sticky.fixed { + position: fixed; + left: auto; + right: auto; +} + +/* Bound/Fixed Position */ +.ui.sticky.bound.top, +.ui.sticky.fixed.top { + top: 0px; + bottom: auto; +} +.ui.sticky.bound.bottom, +.ui.sticky.fixed.bottom { + top: auto; + bottom: 0px; +} + + +/******************************* + Types +*******************************/ + +.ui.native.sticky { + position: -webkit-sticky; + position: -moz-sticky; + position: -ms-sticky; + position: -o-sticky; + position: sticky; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/tab.less b/src/semantic/src/definitions/modules/tab.less new file mode 100755 index 0000000..3f3ba09 --- /dev/null +++ b/src/semantic/src/definitions/modules/tab.less @@ -0,0 +1,94 @@ +/*! + * # Semantic UI - Tab + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'tab'; + +@import (multiple) '../../theme.config'; + +/******************************* + UI Tabs +*******************************/ + +.ui.tab { + display: none; +} + +/******************************* + States +*******************************/ + +/*-------------------- + Active +---------------------*/ + +.ui.tab.active, +.ui.tab.open { + display: block; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.tab.loading { + position: relative; + overflow: hidden; + display: block; + min-height: @loadingMinHeight; +} +.ui.tab.loading * { + position: @loadingContentPosition !important; + left: @loadingContentOffset !important; +} + +.ui.tab.loading:before, +.ui.tab.loading.segment:before { + position: absolute; + content: ''; + top: @loaderDistanceFromTop; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} +.ui.tab.loading:after, +.ui.tab.loading.segment:after { + position: absolute; + content: ''; + top: @loaderDistanceFromTop; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/modules/transition.less b/src/semantic/src/definitions/modules/transition.less new file mode 100755 index 0000000..92c4963 --- /dev/null +++ b/src/semantic/src/definitions/modules/transition.less @@ -0,0 +1,78 @@ +/*! + * # Semantic UI - Transition + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'transition'; + +@import (multiple) '../../theme.config'; + +/******************************* + Transitions +*******************************/ + +.transition { + animation-iteration-count: 1; + animation-duration: @transitionDefaultDuration; + animation-timing-function: @transitionDefaultEasing; + animation-fill-mode: @transitionDefaultFill; +} + +/******************************* + States +*******************************/ + + +/* Animating */ +.animating.transition { + backface-visibility: @backfaceVisibility; + visibility: visible !important; +} + +/* Loading */ +.loading.transition { + position: absolute; + top: -99999px; + left: -99999px; +} + +/* Hidden */ +.hidden.transition { + display: none; + visibility: hidden; +} + +/* Visible */ +.visible.transition { + display: block !important; + visibility: visible !important; +/* backface-visibility: @backfaceVisibility; + transform: @use3DAcceleration;*/ +} + +/* Disabled */ +.disabled.transition { + animation-play-state: paused; +} + +/******************************* + Variations +*******************************/ + +.looping.transition { + animation-iteration-count: infinite; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/views/ad.less b/src/semantic/src/definitions/views/ad.less new file mode 100644 index 0000000..3c3b86b --- /dev/null +++ b/src/semantic/src/definitions/views/ad.less @@ -0,0 +1,268 @@ +/*! + * # Semantic UI - Ad + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'view'; +@element : 'ad'; + +@import (multiple) '../../theme.config'; + +/******************************* + Advertisement +*******************************/ + +.ui.ad { + display: block; + overflow: @overflow; + margin: @margin; +} + +.ui.ad:first-child { + margin: 0em; +} + +.ui.ad:last-child { + margin: 0em; +} + +.ui.ad iframe { + margin: 0em; + padding: 0em; + border: none; + overflow: hidden; +} + +/*-------------- + Common +---------------*/ + +/* Leaderboard */ +.ui.leaderboard.ad { + width: 728px; + height: 90px; +} + +/* Medium Rectangle */ +.ui[class*="medium rectangle"].ad { + width: 300px; + height: 250px; +} + +/* Large Rectangle */ +.ui[class*="large rectangle"].ad { + width: 336px; + height: 280px; +} +/* Half Page */ +.ui[class*="half page"].ad { + width: 300px; + height: 600px; +} + +/*-------------- + Square +---------------*/ + +/* Square */ +.ui.square.ad { + width: 250px; + height: 250px; +} + +/* Small Square */ +.ui[class*="small square"].ad { + width: 200px; + height: 200px; +} + +/*-------------- + Rectangle +---------------*/ + +/* Small Rectangle */ +.ui[class*="small rectangle"].ad { + width: 180px; + height: 150px; +} + +/* Vertical Rectangle */ +.ui[class*="vertical rectangle"].ad { + width: 240px; + height: 400px; +} + +/*-------------- + Button +---------------*/ + +.ui.button.ad { + width: 120px; + height: 90px; +} +.ui[class*="square button"].ad { + width: 125px; + height: 125px; +} +.ui[class*="small button"].ad { + width: 120px; + height: 60px; +} + +/*-------------- + Skyscrapers +---------------*/ + +/* Skyscraper */ +.ui.skyscraper.ad { + width: 120px; + height: 600px; +} + +/* Wide Skyscraper */ +.ui[class*="wide skyscraper"].ad { + width: 160px; +} + +/*-------------- + Banners +---------------*/ + +/* Banner */ +.ui.banner.ad { + width: 468px; + height: 60px; +} + +/* Vertical Banner */ +.ui[class*="vertical banner"].ad { + width: 120px; + height: 240px; +} + +/* Top Banner */ +.ui[class*="top banner"].ad { + width: 930px; + height: 180px; +} + +/* Half Banner */ +.ui[class*="half banner"].ad { + width: 234px; + height: 60px; +} + +/*-------------- + Boards +---------------*/ + +/* Leaderboard */ +.ui[class*="large leaderboard"].ad { + width: 970px; + height: 90px; +} + +/* Billboard */ +.ui.billboard.ad { + width: 970px; + height: 250px; +} + +/*-------------- + Panorama +---------------*/ + +/* Panorama */ +.ui.panorama.ad { + width: 980px; + height: 120px; +} + +/*-------------- + Netboard +---------------*/ + +/* Netboard */ +.ui.netboard.ad { + width: 580px; + height: 400px; +} + + + +/*-------------- + Mobile +---------------*/ + +/* Large Mobile Banner */ +.ui[class*="large mobile banner"].ad { + width: 320px; + height: 100px; +} + +/* Mobile Leaderboard */ +.ui[class*="mobile leaderboard"].ad { + width: 320px; + height: 50px; +} + +/******************************* + Types +*******************************/ + +/* Mobile Sizes */ +.ui.mobile.ad { + display: none; +} + +@media only screen and (max-width : @largestMobileScreen) { + .ui.mobile.ad { + display: block; + } +} + + +/******************************* + Variations +*******************************/ + +.ui.centered.ad { + margin-left: auto; + margin-right: auto; +} + +.ui.test.ad { + position: relative; + background: @testBackground; +} +.ui.test.ad:after { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + text-align: center; + transform: translateX(-50%) translateY(-50%); + + content: @testText; + color: @testColor; + font-size: @testFontSize; + font-weight: @testFontWeight; +} +.ui.mobile.test.ad:after { + font-size: @testMobileFontSize; +} +.ui.test.ad[data-text]:after { + content: attr(data-text); +} + +.loadUIOverrides(); \ No newline at end of file diff --git a/src/semantic/src/definitions/views/card.less b/src/semantic/src/definitions/views/card.less new file mode 100755 index 0000000..e3474f1 --- /dev/null +++ b/src/semantic/src/definitions/views/card.less @@ -0,0 +1,1059 @@ +/*! + * # Semantic UI - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'view'; +@element : 'card'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +/*-------------- + Card +---------------*/ + +.ui.cards > .card, +.ui.card { + max-width: 100%; + position: relative; + display: @display; + flex-direction: column; + + width: @width; + min-height: @minHeight; + background: @background; + padding: @padding; + + border: @border; + border-radius: @borderRadius; + box-shadow: @boxShadow; + transition: @transition; + z-index: @zIndex; +} +.ui.card { + margin: @margin; +} + +.ui.cards > .card a, +.ui.card a { + cursor: pointer; +} + +.ui.card:first-child { + margin-top: 0em; +} +.ui.card:last-child { + margin-bottom: 0em; +} + +/*-------------- + Cards +---------------*/ + +.ui.cards { + display: @groupDisplay; + margin: @groupMargin; + flex-wrap: wrap; +} + +.ui.cards > .card { + display: @groupCardDisplay; + margin: @groupCardMargin; + float: @groupCardFloat; +} + +/* Clearing */ +.ui.cards:after, +.ui.card:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + + +/* Consecutive Card Groups Preserve Row Spacing */ +.ui.cards ~ .ui.cards { + margin-top: @consecutiveGroupDistance; +} + + +/*-------------- + Rounded Edges +---------------*/ + +.ui.cards > .card > :first-child, +.ui.card > :first-child { + border-radius: @borderRadius @borderRadius 0em 0em !important; + border-top: none !important; +} + +.ui.cards > .card > :last-child, +.ui.card > :last-child { + border-radius: 0em 0em @borderRadius @borderRadius !important; +} + +.ui.cards > .card > :only-child, +.ui.card > :only-child { + border-radius: @borderRadius !important; +} + +/*-------------- + Images +---------------*/ + +.ui.cards > .card > .image, +.ui.card > .image { + position: relative; + display: block; + flex: 0 0 auto; + padding: @imagePadding; + background: @imageBackground; +} +.ui.cards > .card > .image > img, +.ui.card > .image > img { + display: block; + width: 100%; + height: auto; + border-radius: inherit; +} +.ui.cards > .card > .image:not(.ui) > img, +.ui.card > .image:not(.ui) > img { + border: @imageBorder; +} + +/*-------------- + Content +---------------*/ + +.ui.cards > .card > .content, +.ui.card > .content { + flex-grow: 1; + border: @contentBorder; + border-top: @contentDivider; + background: @contentBackground; + margin: @contentMargin; + padding: @contentPadding; + box-shadow: @contentBoxShadow; + font-size: @contentFontSize; + border-radius: @contentBorderRadius; +} + +.ui.cards > .card > .content:after, +.ui.card > .content:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + +.ui.cards > .card > .content > .header, +.ui.card > .content > .header { + display: block; + margin: @headerMargin; + font-family: @headerFont; + color: @headerColor; +} + +/* Default Header Size */ +.ui.cards > .card > .content > .header:not(.ui), +.ui.card > .content > .header:not(.ui) { + font-weight: @headerFontWeight; + font-size: @headerFontSize; + margin-top: @headerLineHeightOffset; + line-height: @headerLineHeight; +} + +.ui.cards > .card > .content > .meta + .description, +.ui.cards > .card > .content > .header + .description, +.ui.card > .content > .meta + .description, +.ui.card > .content > .header + .description { + margin-top: @descriptionDistance; +} + +/*---------------- + Floated Content +-----------------*/ + +.ui.cards > .card [class*="left floated"], +.ui.card [class*="left floated"] { + float: left; +} +.ui.cards > .card [class*="right floated"], +.ui.card [class*="right floated"] { + float: right; +} + +/*-------------- + Aligned +---------------*/ + +.ui.cards > .card [class*="left aligned"], +.ui.card [class*="left aligned"] { + text-align: left; +} +.ui.cards > .card [class*="center aligned"], +.ui.card [class*="center aligned"] { + text-align: center; +} +.ui.cards > .card [class*="right aligned"], +.ui.card [class*="right aligned"] { + text-align: right; +} + + +/*-------------- + Content Image +---------------*/ + +.ui.cards > .card .content img, +.ui.card .content img { + display: inline-block; + vertical-align: @contentImageVerticalAlign; + width: @contentImageWidth; +} +.ui.cards > .card img.avatar, +.ui.cards > .card .avatar img, +.ui.card img.avatar, +.ui.card .avatar img { + width: @avatarSize; + height: @avatarSize; + border-radius: @avatarBorderRadius; +} + + +/*-------------- + Description +---------------*/ + +.ui.cards > .card > .content > .description, +.ui.card > .content > .description { + clear: both; + color: @descriptionColor; +} + +/*-------------- + Paragraph +---------------*/ + +.ui.cards > .card > .content p, +.ui.card > .content p { + margin: 0em 0em @paragraphDistance; +} +.ui.cards > .card > .content p:last-child, +.ui.card > .content p:last-child { + margin-bottom: 0em; +} + +/*-------------- + Meta +---------------*/ + +.ui.cards > .card .meta, +.ui.card .meta { + font-size: @metaFontSize; + color: @metaColor; +} +.ui.cards > .card .meta *, +.ui.card .meta * { + margin-right: @metaSpacing; +} +.ui.cards > .card .meta :last-child, +.ui.card .meta :last-child { + margin-right: 0em; +} + +.ui.cards > .card .meta [class*="right floated"], +.ui.card .meta [class*="right floated"] { + margin-right: 0em; + margin-left: @metaSpacing; +} + +/*-------------- + Links +---------------*/ + +/* Generic */ +.ui.cards > .card > .content a:not(.ui), +.ui.card > .content a:not(.ui) { + color: @contentLinkColor; + transition: @contentLinkTransition; +} +.ui.cards > .card > .content a:not(.ui):hover, +.ui.card > .content a:not(.ui):hover { + color: @contentLinkHoverColor; +} + +/* Header */ +.ui.cards > .card > .content > a.header, +.ui.card > .content > a.header { + color: @headerLinkColor; +} +.ui.cards > .card > .content > a.header:hover, +.ui.card > .content > a.header:hover { + color: @headerLinkHoverColor; +} + +/* Meta */ +.ui.cards > .card .meta > a:not(.ui), +.ui.card .meta > a:not(.ui) { + color: @metaLinkColor; +} +.ui.cards > .card .meta > a:not(.ui):hover, +.ui.card .meta > a:not(.ui):hover { + color: @metaLinkHoverColor; +} + +/*-------------- + Buttons +---------------*/ + +.ui.cards > .card > .buttons, +.ui.card > .buttons, +.ui.cards > .card > .button, +.ui.card > .button { + margin: @buttonMargin; + width: @buttonWidth; +} + +/*-------------- + Dimmer +---------------*/ + +.ui.cards > .card .dimmer, +.ui.card .dimmer { + background-color: @dimmerColor; + z-index: @dimmerZIndex; +} + +/*-------------- + Labels +---------------*/ + +/*-----Star----- */ + +/* Icon */ +.ui.cards > .card > .content .star.icon, +.ui.card > .content .star.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; +} +.ui.cards > .card > .content .star.icon:hover, +.ui.card > .content .star.icon:hover { + opacity: @actionHoverOpacity; + color: @starColor; +} +.ui.cards > .card > .content .active.star.icon, +.ui.card > .content .active.star.icon { + color: @starActiveColor; +} + +/*-----Like----- */ + +/* Icon */ +.ui.cards > .card > .content .like.icon, +.ui.card > .content .like.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; +} +.ui.cards > .card > .content .like.icon:hover, +.ui.card > .content .like.icon:hover { + opacity: @actionHoverOpacity; + color: @likeColor; +} +.ui.cards > .card > .content .active.like.icon, +.ui.card > .content .active.like.icon { + color: @likeActiveColor; +} + +/*---------------- + Extra Content +-----------------*/ + +.ui.cards > .card > .extra, +.ui.card > .extra { + max-width: 100%; + min-height: 0em !important; + flex-grow: 0; + border-top: @extraDivider !important; + position: @extraPosition; + background: @extraBackground; + width: @extraWidth; + margin: @extraMargin; + padding: @extraPadding; + top: @extraTop; + left: @extraLeft; + color: @extraColor; + box-shadow: @extraBoxShadow; + transition: @extraTransition; +} +.ui.cards > .card > .extra a:not(.ui), +.ui.card > .extra a:not(.ui) { + color: @extraLinkColor; +} +.ui.cards > .card > .extra a:not(.ui):hover, +.ui.card > .extra a:not(.ui):hover { + color: @extraLinkHoverColor; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Raised +--------------------*/ + +.ui.raised.cards > .card, +.ui.raised.card { + box-shadow: @raisedShadow; +} +.ui.raised.cards a.card:hover, +.ui.link.cards .raised.card:hover, +a.ui.raised.card:hover, +.ui.link.raised.card:hover { + box-shadow: @raisedShadowHover; +} + +.ui.raised.cards > .card, +.ui.raised.card { + box-shadow: @raisedShadow; +} +/*------------------- + Centered +--------------------*/ + +.ui.centered.cards { + justify-content: center; +} +.ui.centered.card { + margin-left: auto; + margin-right: auto; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.card { + width: 100%; + max-width: 9999px; +} + +/*------------------- + Link +--------------------*/ + +.ui.cards a.card, +.ui.link.cards .card, +a.ui.card, +.ui.link.card { + transform: none; +} + + +.ui.cards a.card:hover, +.ui.link.cards .card:hover, +a.ui.card:hover, +.ui.link.card:hover { + cursor: pointer; + z-index: @linkHoverZIndex; + background: @linkHoverBackground; + border: @linkHoverBorder; + box-shadow: @linkHoverBoxShadow; + transform: @linkHoverTransform; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.cards > .card, +.ui.cards > .red.card, +.ui.red.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @red, + @shadowBoxShadow + ; +} +.ui.red.cards > .card:hover, +.ui.cards > .red.card:hover, +.ui.red.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @redHover, + @shadowHoverBoxShadow + ; +} + +/* Orange */ +.ui.orange.cards > .card, +.ui.cards > .orange.card, +.ui.orange.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @orange, + @shadowBoxShadow + ; +} +.ui.orange.cards > .card:hover, +.ui.cards > .orange.card:hover, +.ui.orange.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @orangeHover, + @shadowHoverBoxShadow + ; +} + +/* Yellow */ +.ui.yellow.cards > .card, +.ui.cards > .yellow.card, +.ui.yellow.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @yellow, + @shadowBoxShadow + ; +} +.ui.yellow.cards > .card:hover, +.ui.cards > .yellow.card:hover, +.ui.yellow.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @yellowHover, + @shadowHoverBoxShadow + ; +} + +/* Olive */ +.ui.olive.cards > .card, +.ui.cards > .olive.card, +.ui.olive.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @olive, + @shadowBoxShadow + ; +} +.ui.olive.cards > .card:hover, +.ui.cards > .olive.card:hover, +.ui.olive.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @oliveHover, + @shadowHoverBoxShadow + ; +} + +/* Green */ +.ui.green.cards > .card, +.ui.cards > .green.card, +.ui.green.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @green, + @shadowBoxShadow + ; +} +.ui.green.cards > .card:hover, +.ui.cards > .green.card:hover, +.ui.green.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @greenHover, + @shadowHoverBoxShadow + ; +} + +/* Teal */ +.ui.teal.cards > .card, +.ui.cards > .teal.card, +.ui.teal.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @teal, + @shadowBoxShadow + ; +} +.ui.teal.cards > .card:hover, +.ui.cards > .teal.card:hover, +.ui.teal.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @tealHover, + @shadowHoverBoxShadow + ; +} + +/* Blue */ +.ui.blue.cards > .card, +.ui.cards > .blue.card, +.ui.blue.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @blue, + @shadowBoxShadow + ; +} +.ui.blue.cards > .card:hover, +.ui.cards > .blue.card:hover, +.ui.blue.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @blueHover, + @shadowHoverBoxShadow + ; +} + +/* Violet */ +.ui.violet.cards > .card, +.ui.cards > .violet.card, +.ui.violet.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @violet, + @shadowBoxShadow + ; +} +.ui.violet.cards > .card:hover, +.ui.cards > .violet.card:hover, +.ui.violet.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @violetHover, + @shadowHoverBoxShadow + ; +} + +/* Purple */ +.ui.purple.cards > .card, +.ui.cards > .purple.card, +.ui.purple.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @purple, + @shadowBoxShadow + ; +} +.ui.purple.cards > .card:hover, +.ui.cards > .purple.card:hover, +.ui.purple.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @purpleHover, + @shadowHoverBoxShadow + ; +} + +/* Pink */ +.ui.pink.cards > .card, +.ui.cards > .pink.card, +.ui.pink.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @pink, + @shadowBoxShadow + ; +} +.ui.pink.cards > .card:hover, +.ui.cards > .pink.card:hover, +.ui.pink.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @pinkHover, + @shadowHoverBoxShadow + ; +} + +/* Brown */ +.ui.brown.cards > .card, +.ui.cards > .brown.card, +.ui.brown.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @brown, + @shadowBoxShadow + ; +} +.ui.brown.cards > .card:hover, +.ui.cards > .brown.card:hover, +.ui.brown.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @brownHover, + @shadowHoverBoxShadow + ; +} + +/* Grey */ +.ui.grey.cards > .card, +.ui.cards > .grey.card, +.ui.grey.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @grey, + @shadowBoxShadow + ; +} +.ui.grey.cards > .card:hover, +.ui.cards > .grey.card:hover, +.ui.grey.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @greyHover, + @shadowHoverBoxShadow + ; +} + +/* Black */ +.ui.black.cards > .card, +.ui.cards > .black.card, +.ui.black.card { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @black, + @shadowBoxShadow + ; +} +.ui.black.cards > .card:hover, +.ui.cards > .black.card:hover, +.ui.black.card:hover { + box-shadow: + @borderShadow, + 0px @coloredShadowDistance 0px 0px @blackHover, + @shadowHoverBoxShadow + ; +} + +/*-------------- + Card Count +---------------*/ + +.ui.one.cards { + margin-left: @oneCardOffset; + margin-right: @oneCardOffset; +} +.ui.one.cards > .card { + width: @oneCard; +} + +.ui.two.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; +} +.ui.two.cards > .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; +} + +.ui.three.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; +} +.ui.three.cards > .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; +} + +.ui.four.cards { + margin-left: @fourCardOffset; + margin-right: @fourCardOffset; +} +.ui.four.cards > .card { + width: @fourCard; + margin-left: @fourCardSpacing; + margin-right: @fourCardSpacing; +} + +.ui.five.cards { + margin-left: @fiveCardOffset; + margin-right: @fiveCardOffset; +} +.ui.five.cards > .card { + width: @fiveCard; + margin-left: @fiveCardSpacing; + margin-right: @fiveCardSpacing; +} + +.ui.six.cards { + margin-left: @sixCardOffset; + margin-right: @sixCardOffset; +} +.ui.six.cards > .card { + width: @sixCard; + margin-left: @sixCardSpacing; + margin-right: @sixCardSpacing; +} + +.ui.seven.cards { + margin-left: @sevenCardOffset; + margin-right: @sevenCardOffset; +} +.ui.seven.cards > .card { + width: @sevenCard; + margin-left: @sevenCardSpacing; + margin-right: @sevenCardSpacing; +} + +.ui.eight.cards { + margin-left: @eightCardOffset; + margin-right: @eightCardOffset; +} +.ui.eight.cards > .card { + width: @eightCard; + margin-left: @eightCardSpacing; + margin-right: @eightCardSpacing; + font-size: 11px; +} + +.ui.nine.cards { + margin-left: @nineCardOffset; + margin-right: @nineCardOffset; +} +.ui.nine.cards > .card { + width: @nineCard; + margin-left: @nineCardSpacing; + margin-right: @nineCardSpacing; + font-size: 10px; +} + +.ui.ten.cards { + margin-left: @tenCardOffset; + margin-right: @tenCardOffset; +} +.ui.ten.cards > .card { + width: @tenCard; + margin-left: @tenCardSpacing; + margin-right: @tenCardSpacing; +} + + +/*------------------- + Doubling +--------------------*/ + +/* Mobile Only */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.two.doubling.cards { + margin-left: @oneCardOffset; + margin-right: @oneCardOffset; + } + .ui.two.doubling.cards .card { + width: @oneCard; + margin-left: @oneCardSpacing; + margin-right: @oneCardSpacing; + } + .ui.three.doubling.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; + } + .ui.three.doubling.cards .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; + } + .ui.four.doubling.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; + } + .ui.four.doubling.cards .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; + } + .ui.five.doubling.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; + } + .ui.five.doubling.cards .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; + } + .ui.six.doubling.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; + } + .ui.six.doubling.cards .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; + } + .ui.seven.doubling.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.seven.doubling.cards .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } + .ui.eight.doubling.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.eight.doubling.cards .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } + .ui.nine.doubling.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.nine.doubling.cards .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } + .ui.ten.doubling.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.ten.doubling.cards .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } +} + +/* Tablet Only */ +@media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) { + .ui.two.doubling.cards { + margin-left: @oneCardOffset; + margin-right: @oneCardOffset; + } + .ui.two.doubling.cards .card { + width: @oneCard; + margin-left: @oneCardSpacing; + margin-right: @oneCardSpacing; + } + .ui.three.doubling.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; + } + .ui.three.doubling.cards .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; + } + .ui.four.doubling.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; + } + .ui.four.doubling.cards .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; + } + .ui.five.doubling.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.five.doubling.cards .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } + .ui.six.doubling.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.six.doubling.cards .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } + .ui.eight.doubling.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.eight.doubling.cards .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } + .ui.eight.doubling.cards { + margin-left: @fourCardOffset; + margin-right: @fourCardOffset; + } + .ui.eight.doubling.cards .card { + width: @fourCard; + margin-left: @fourCardSpacing; + margin-right: @fourCardSpacing; + } + .ui.nine.doubling.cards { + margin-left: @fourCardOffset; + margin-right: @fourCardOffset; + } + .ui.nine.doubling.cards .card { + width: @fourCard; + margin-left: @fourCardSpacing; + margin-right: @fourCardSpacing; + } + .ui.ten.doubling.cards { + margin-left: @fiveCardOffset; + margin-right: @fiveCardOffset; + } + .ui.ten.doubling.cards .card { + width: @fiveCard; + margin-left: @fiveCardSpacing; + margin-right: @fiveCardSpacing; + } +} + +/*------------------- + Stackable +--------------------*/ + +@media only screen and (max-width : @largestMobileScreen) { + .ui.stackable.cards { + display: block !important; + } + .ui.stackable.cards .card:first-child { + margin-top: 0em !important; + } + .ui.stackable.cards > .card { + display: block !important; + height: auto !important; + margin: @stackableRowSpacing @stackableCardSpacing; + padding: 0 !important; + width: @stackableMargin !important; + } +} + + +/*-------------- + Size +---------------*/ + +.ui.cards > .card { + font-size: @medium; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/views/comment.less b/src/semantic/src/definitions/views/comment.less new file mode 100755 index 0000000..d42d5f1 --- /dev/null +++ b/src/semantic/src/definitions/views/comment.less @@ -0,0 +1,269 @@ +/*! + * # Semantic UI - Comment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'view'; +@element : 'comment'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + + +/*-------------- + Comments +---------------*/ + +.ui.comments { + margin: @margin; + max-width: @maxWidth; +} + +.ui.comments:first-child { + margin-top: 0em; +} +.ui.comments:last-child { + margin-bottom: 0em; +} + +/*-------------- + Comment +---------------*/ + +.ui.comments .comment { + position: relative; + background: @commentBackground; + margin: @commentMargin; + padding: @commentPadding; + border: @commentBorder; + border-top: @commentDivider; + line-height: @commentLineHeight; +} +.ui.comments .comment:first-child { + margin-top: @firstCommentMargin; + padding-top: @firstCommentPadding; +} + + +/*-------------------- + Nested Comments +---------------------*/ + +.ui.comments .comment .comments { + margin: @nestedCommentsMargin; + padding: @nestedCommentsPadding; +} +.ui.comments .comment .comments:before{ + position: absolute; + top: 0px; + left: 0px; +} +.ui.comments .comment .comments .comment { + border: @nestedCommentBorder; + border-top: @nestedCommentDivider; + background: @nestedCommentBackground; +} + +/*-------------- + Avatar +---------------*/ + +.ui.comments .comment .avatar { + display: @avatarDisplay; + width: @avatarWidth; + height: @avatarHeight; + float: @avatarFloat; + margin: @avatarMargin; +} +.ui.comments .comment img.avatar, +.ui.comments .comment .avatar img { + display: block; + margin: 0em auto; + width: 100%; + height: 100%; + border-radius: @avatarBorderRadius; +} + +/*-------------- + Content +---------------*/ + +.ui.comments .comment > .content { + display: block; +} +/* If there is an avatar move content over */ +.ui.comments .comment > .avatar ~ .content { + margin-left: @contentMargin; +} + +/*-------------- + Author +---------------*/ + +.ui.comments .comment .author { + font-size: @authorFontSize; + color: @authorColor; + font-weight: @authorFontWeight; +} +.ui.comments .comment a.author { + cursor: pointer; +} +.ui.comments .comment a.author:hover { + color: @authorHoverColor; +} + +/*-------------- + Metadata +---------------*/ + +.ui.comments .comment .metadata { + display: @metadataDisplay; + margin-left: @metadataSpacing; + color: @metadataColor; + font-size: @metadataFontSize; +} +.ui.comments .comment .metadata > * { + display: inline-block; + margin: 0em @metadataContentSpacing 0em 0em; +} +.ui.comments .comment .metadata > :last-child { + margin-right: 0em; +} + +/*-------------------- + Comment Text +---------------------*/ + +.ui.comments .comment .text { + margin: @textMargin; + font-size: @textFontSize; + word-wrap: @textWordWrap; + color: @textColor; + line-height: @textLineHeight; +} + + +/*-------------------- + User Actions +---------------------*/ + +.ui.comments .comment .actions { + font-size: @actionFontSize; +} +.ui.comments .comment .actions a { + cursor: pointer; + display: inline-block; + margin: 0em @actionContentDistance 0em 0em; + color: @actionLinkColor; +} +.ui.comments .comment .actions a:last-child { + margin-right: 0em; +} +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: @actionLinkHoverColor; +} + +/*-------------------- + Reply Form +---------------------*/ + +.ui.comments > .reply.form { + margin-top: @replyDistance; +} +.ui.comments .comment .reply.form { + width: 100%; + margin-top: @commentReplyDistance; +} +.ui.comments .reply.form textarea { + font-size: @replyFontSize; + height: @replyHeight; +} + +/******************************* + State +*******************************/ + +.ui.collapsed.comments, +.ui.comments .collapsed.comments, +.ui.comments .collapsed.comment { + display: none; +} + + +/******************************* + Variations +*******************************/ + +/*-------------------- + Threaded +---------------------*/ + +.ui.threaded.comments .comment .comments { + margin: @threadedCommentMargin; + padding: @threadedCommentPadding; + box-shadow: @threadedCommentBoxShadow; +} + +/*-------------------- + Minimal +---------------------*/ + +.ui.minimal.comments .comment .actions { + opacity: 0; + position: @minimalActionPosition; + top: @minimalActionTop; + right: @minimalActionRight; + left: @minimalActionLeft; + transition: @minimalTransition; + transition-delay: @minimalTransitionDelay; +} +.ui.minimal.comments .comment > .content:hover > .actions { + opacity: 1; +} + + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.comments { + font-size: @mini; +} +.ui.tiny.comments { + font-size: @tiny; +} +.ui.small.comments { + font-size: @small; +} +.ui.comments { + font-size: @medium; +} +.ui.large.comments { + font-size: @large; +} +.ui.big.comments { + font-size: @big; +} +.ui.huge.comments { + font-size: @huge; +} +.ui.massive.comments { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/views/feed.less b/src/semantic/src/definitions/views/feed.less new file mode 100755 index 0000000..2447904 --- /dev/null +++ b/src/semantic/src/definitions/views/feed.less @@ -0,0 +1,278 @@ +/*! + * # Semantic UI - Feed + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'view'; +@element : 'feed'; + +@import (multiple) '../../theme.config'; + +/******************************* + Activity Feed +*******************************/ + +.ui.feed { + margin: @margin; +} +.ui.feed:first-child { + margin-top: 0em; +} +.ui.feed:last-child { + margin-bottom: 0em; +} + + +/******************************* + Content +*******************************/ + +/* Event */ +.ui.feed > .event { + display: flex; + flex-direction: row; + width: @eventWidth; + padding: @eventPadding; + margin: @eventMargin; + background: @eventBackground; + border-top: @eventDivider; +} +.ui.feed > .event:first-child { + border-top: 0px; + padding-top: 0em; +} +.ui.feed > .event:last-child { + padding-bottom: 0em; +} + +/* Event Label */ +.ui.feed > .event > .label { + display: block; + flex: 0 0 auto; + width: @labelWidth; + height: @labelHeight; + align-self: @labelAlignSelf; + text-align: @labelTextAlign; +} +.ui.feed > .event > .label .icon { + opacity: @iconLabelOpacity; + font-size: @iconLabelSize; + width: @iconLabelWidth; + padding: @iconLabelPadding; + background: @iconLabelBackground; + border: @iconLabelBorder; + border-radius: @iconLabelBorderRadius; + color: @iconLabelColor; +} +.ui.feed > .event > .label img { + width: @imageLabelWidth; + height: @imageLabelHeight; + border-radius: @imageLabelBorderRadius; +} +.ui.feed > .event > .label + .content { + margin: @labeledContentMargin; +} + +/*-------------- + Content +---------------*/ + +/* Content */ +.ui.feed > .event > .content { + display: block; + flex: 1 1 auto; + align-self: @contentAlignSelf; + text-align: @contentTextAlign; + word-wrap: @contentWordWrap; +} +.ui.feed > .event:last-child > .content { + padding-bottom: @lastLabeledContentPadding; +} + +/* Link */ +.ui.feed > .event > .content a { + cursor: pointer; +} + +/*-------------- + Date +---------------*/ + +.ui.feed > .event > .content .date { + margin: @dateMargin; + padding: @datePadding; + color: @dateColor; + font-weight: @dateFontWeight; + font-size: @dateFontSize; + font-style: @dateFontStyle; + color: @dateColor; +} + +/*-------------- + Summary +---------------*/ + +.ui.feed > .event > .content .summary { + margin: @summaryMargin; + font-size: @summaryFontSize; + font-weight: @summaryFontWeight; + color: @summaryColor; +} + +/* Summary Image */ +.ui.feed > .event > .content .summary img { + display: inline-block; + width: @summaryImageWidth; + height: @summaryImageHeight; + margin: @summaryImageMargin; + border-radius: @summaryImageBorderRadius; + vertical-align: @summaryImageVerticalAlign; +} +/*-------------- + User +---------------*/ + +.ui.feed > .event > .content .user { + display: inline-block; + font-weight: @userFontWeight; + margin-right: @userDistance; + vertical-align: baseline; +} +.ui.feed > .event > .content .user img { + margin: @userImageMargin; + width: @userImageWidth; + height: @userImageHeight; + vertical-align: @userImageVerticalAlign; +} +/*-------------- + Inline Date +---------------*/ + +/* Date inside Summary */ +.ui.feed > .event > .content .summary > .date { + display: @summaryDateDisplay; + float: @summaryDateFloat; + font-weight: @summaryDateFontWeight; + font-size: @summaryDateFontSize; + font-style: @summaryDateFontStyle; + margin: @summaryDateMargin; + padding: @summaryDatePadding; + color: @summaryDateColor; +} + +/*-------------- + Extra Summary +---------------*/ + +.ui.feed > .event > .content .extra { + margin: @extraMargin; + background: @extraBackground; + padding: @extraPadding; + color: @extraColor; +} + +/* Images */ +.ui.feed > .event > .content .extra.images img { + display: inline-block; + margin: @extraImageMargin; + width: @extraImageWidth; +} + +/* Text */ +.ui.feed > .event > .content .extra.text { + padding: @extraTextPadding; + border-left: @extraTextPointer; + font-size: @extraTextFontSize; + max-width: @extraTextMaxWidth; + line-height: @extraTextLineHeight; +} + +/*-------------- + Meta +---------------*/ + +.ui.feed > .event > .content .meta { + display: @metadataDisplay; + font-size: @metadataFontSize; + margin: @metadataMargin; + background: @metadataBackground; + border: @metadataBorder; + border-radius: @metadataBorderRadius; + box-shadow: @metadataBoxShadow; + padding: @metadataPadding; + color: @metadataColor; +} + +.ui.feed > .event > .content .meta > * { + position: relative; + margin-left: @metadataElementSpacing; +} +.ui.feed > .event > .content .meta > *:after { + content: @metadataDivider; + color: @metadataDividerColor; + top: 0em; + left: @metadataDividerOffset; + opacity: 1; + position: absolute; + vertical-align: top; +} + +.ui.feed > .event > .content .meta .like { + color: @likeColor; + transition: @likeTransition; +} +.ui.feed > .event > .content .meta .like:hover .icon { + color: @likeHoverColor; +} +.ui.feed > .event > .content .meta .active.like .icon { + color: @likeActiveColor; +} + +/* First element */ +.ui.feed > .event > .content .meta > :first-child { + margin-left: 0em; +} +.ui.feed > .event > .content .meta > :first-child::after { + display: none; +} + +/* Action */ +.ui.feed > .event > .content .meta a, +.ui.feed > .event > .content .meta > .icon { + cursor: @metadataActionCursor; + opacity: @metadataActionOpacity; + color: @metadataActionColor; + transition: @metadataActionTransition; +} +.ui.feed > .event > .content .meta a:hover, +.ui.feed > .event > .content .meta a:hover .icon, +.ui.feed > .event > .content .meta > .icon:hover { + color: @metadataActionHoverColor; +} + + + +/******************************* + Variations +*******************************/ + +.ui.small.feed { + font-size: @small; +} +.ui.feed { + font-size: @medium; +} +.ui.large.feed { + font-size: @large; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/views/item.less b/src/semantic/src/definitions/views/item.less new file mode 100755 index 0000000..cba0f47 --- /dev/null +++ b/src/semantic/src/definitions/views/item.less @@ -0,0 +1,464 @@ +/*! + * # Semantic UI - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'view'; +@element : 'item'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +/*-------------- + Item +---------------*/ + +.ui.items > .item { + display: @display; + margin: @itemSpacing 0em; + width: @width; + min-height: @minHeight; + background: @background; + padding: @padding; + + border: @border; + border-radius: @borderRadius; + box-shadow: @boxShadow; + transition: @transition; + z-index: @zIndex; +} +.ui.items > .item a { + cursor: pointer; +} + +/*-------------- + Items +---------------*/ + +.ui.items { + margin: @groupMargin; +} + +.ui.items:first-child { + margin-top: 0em !important; +} +.ui.items:last-child { + margin-bottom: 0em !important; +} + +/*-------------- + Item +---------------*/ + +.ui.items > .item:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +.ui.items > .item:first-child { + margin-top: 0em; +} +.ui.items > .item:last-child { + margin-bottom: 0em; +} + + + +/*-------------- + Images +---------------*/ + +.ui.items > .item > .image { + position: relative; + flex: 0 0 auto; + display: @imageDisplay; + float: @imageFloat; + margin: @imageMargin; + padding: @imagePadding; + max-height: @imageMaxHeight; + align-self: @imageVerticalAlign; +} +.ui.items > .item > .image > img { + display: block; + width: 100%; + height: auto; + border-radius: @imageBorderRadius; + border: @imageBorder; +} + +.ui.items > .item > .image:only-child > img { + border-radius: @borderRadius; +} + + +/*-------------- + Content +---------------*/ + +.ui.items > .item > .content { + display: block; + flex: 1 1 auto; + background: @contentBackground; + margin: @contentMargin; + padding: @contentPadding; + box-shadow: @contentBoxShadow; + font-size: @contentFontSize; + border: @contentBorder; + border-radius: @contentBorderRadius; +} +.ui.items > .item > .content:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + +.ui.items > .item > .image + .content { + min-width: 0; + width: @contentWidth; + display: @contentDisplay; + margin-left: @contentOffset; + align-self: @contentVerticalAlign; + padding-left: @contentImageDistance; +} + +.ui.items > .item > .content > .header { + display: inline-block; + margin: @headerMargin; + font-family: @headerFont; + font-weight: @headerFontWeight; + color: @headerColor; +} +/* Default Header Size */ +.ui.items > .item > .content > .header:not(.ui) { + font-size: @headerFontSize; +} + +/*-------------- + Floated +---------------*/ + +.ui.items > .item [class*="left floated"] { + float: left; +} +.ui.items > .item [class*="right floated"] { + float: right; +} + + +/*-------------- + Content Image +---------------*/ + +.ui.items > .item .content img { + align-self: @contentImageVerticalAlign; + width: @contentImageWidth; +} +.ui.items > .item img.avatar, +.ui.items > .item .avatar img { + width: @avatarSize; + height: @avatarSize; + border-radius: @avatarBorderRadius; +} + + +/*-------------- + Description +---------------*/ + +.ui.items > .item > .content > .description { + margin-top: @descriptionDistance; + max-width: @descriptionMaxWidth; + font-size: @descriptionFontSize; + line-height: @descriptionLineHeight; + color: @descriptionColor; +} + +/*-------------- + Paragraph +---------------*/ + +.ui.items > .item > .content p { + margin: 0em 0em @paragraphDistance; +} +.ui.items > .item > .content p:last-child { + margin-bottom: 0em; +} + +/*-------------- + Meta +---------------*/ + +.ui.items > .item .meta { + margin: @metaMargin; + font-size: @metaFontSize; + line-height: @metaLineHeight; + color: @metaColor; +} +.ui.items > .item .meta * { + margin-right: @metaSpacing; +} +.ui.items > .item .meta :last-child { + margin-right: 0em; +} + +.ui.items > .item .meta [class*="right floated"] { + margin-right: 0em; + margin-left: @metaSpacing; +} + +/*-------------- + Links +---------------*/ + +/* Generic */ +.ui.items > .item > .content a:not(.ui) { + color: @contentLinkColor; + transition: @contentLinkTransition; +} +.ui.items > .item > .content a:not(.ui):hover { + color: @contentLinkHoverColor; +} + +/* Header */ +.ui.items > .item > .content > a.header { + color: @headerLinkColor; +} +.ui.items > .item > .content > a.header:hover { + color: @headerLinkHoverColor; +} + +/* Meta */ +.ui.items > .item .meta > a:not(.ui) { + color: @metaLinkColor; +} +.ui.items > .item .meta > a:not(.ui):hover { + color: @metaLinkHoverColor; +} + + + +/*-------------- + Labels +---------------*/ + +/*-----Star----- */ + +/* Icon */ +.ui.items > .item > .content .favorite.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; +} +.ui.items > .item > .content .favorite.icon:hover { + opacity: @actionHoverOpacity; + color: @favoriteColor; +} +.ui.items > .item > .content .active.favorite.icon { + color: @favoriteActiveColor; +} + +/*-----Like----- */ + +/* Icon */ +.ui.items > .item > .content .like.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; +} +.ui.items > .item > .content .like.icon:hover { + opacity: @actionHoverOpacity; + color: @likeColor; +} +.ui.items > .item > .content .active.like.icon { + color: @likeActiveColor; +} + +/*---------------- + Extra Content +-----------------*/ + +.ui.items > .item .extra { + display: @extraDisplay; + position: @extraPosition; + background: @extraBackground; + margin: @extraMargin; + width: @extraWidth; + padding: @extraPadding; + top: @extraTop; + left: @extraLeft; + color: @extraColor; + box-shadow: @extraBoxShadow; + transition: @extraTransition; + border-top: @extraDivider; +} +.ui.items > .item .extra > * { + margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0em; +} +.ui.items > .item .extra > [class*="right floated"] { + margin: (@extraRowSpacing / 2) 0em (@extraRowSpacing / 2) @extraHorizontalSpacing; +} + +.ui.items > .item .extra:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + + +/******************************* + Responsive +*******************************/ + +/* Default Image Width */ +.ui.items > .item > .image:not(.ui) { + width: @imageWidth; +} + + +/* Tablet Only */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.items > .item { + margin: @tabletItemSpacing 0em; + } + .ui.items > .item > .image:not(.ui) { + width: @tabletImageWidth; + } + .ui.items > .item > .image + .content { + display: block; + padding: 0em 0em 0em @tabletContentImageDistance; + } + +} + +/* Mobile Only */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.items > .item { + flex-direction: column; + margin: @mobileItemSpacing 0em; + } + .ui.items > .item > .image { + display: block; + margin-left: auto; + margin-right: auto; + } + .ui.items > .item > .image, + .ui.items > .item > .image > img { + max-width: 100% !important; + width: @mobileImageWidth !important; + max-height: @mobileImageMaxHeight !important; + } + .ui.items > .item > .image + .content { + display: block; + padding: @mobileContentImageDistance 0em 0em; + } + +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Aligned +--------------------*/ + +.ui.items > .item > .image + [class*="top aligned"].content { + align-self: flex-start; +} +.ui.items > .item > .image + [class*="middle aligned"].content { + align-self: center; +} +.ui.items > .item > .image + [class*="bottom aligned"].content { + align-self: flex-end; +} + + +/*-------------- + Relaxed +---------------*/ + +.ui.relaxed.items > .item { + margin: @relaxedItemSpacing 0em; +} +.ui[class*="very relaxed"].items > .item { + margin: @veryRelaxedItemSpacing 0em; +} + + +/*------------------- + Divided +--------------------*/ + +.ui.divided.items > .item { + border-top: @dividedBorder; + margin: @dividedMargin; + padding: @dividedPadding; +} +.ui.divided.items > .item:first-child { + border-top: none; + margin-top: @dividedFirstLastMargin !important; + padding-top: @dividedFirstLastPadding !important; +} +.ui.divided.items > .item:last-child { + margin-bottom: @dividedFirstLastMargin !important; + padding-bottom: @dividedFirstLastPadding !important; +} + +/* Relaxed Divided */ +.ui.relaxed.divided.items > .item { + margin: 0em; + padding: @relaxedItemSpacing 0em; +} +.ui[class*="very relaxed"].divided.items > .item { + margin: 0em; + padding: @veryRelaxedItemSpacing 0em; +} + + +/*------------------- + Link +--------------------*/ + +.ui.items a.item:hover, +.ui.link.items > .item:hover { + cursor: pointer; +} + +.ui.items a.item:hover .content .header, +.ui.link.items > .item:hover .content .header { + color: @headerLinkHoverColor; +} + + +/*-------------- + Size +---------------*/ + +.ui.items > .item { + font-size: @medium; +} + +.loadUIOverrides(); diff --git a/src/semantic/src/definitions/views/statistic.less b/src/semantic/src/definitions/views/statistic.less new file mode 100755 index 0000000..e345c45 --- /dev/null +++ b/src/semantic/src/definitions/views/statistic.less @@ -0,0 +1,557 @@ +/*! + * # Semantic UI - Statistic + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'view'; +@element : 'statistic'; + +@import (multiple) '../../theme.config'; + +/******************************* + Statistic +*******************************/ + +/* Standalone */ +.ui.statistic { + display: inline-flex; + flex-direction: column; + margin: @margin; + max-width: @maxWidth; +} + +.ui.statistic + .ui.statistic { + margin: 0em 0em 0em @horizontalSpacing; +} + +.ui.statistic:first-child { + margin-top: 0em; +} +.ui.statistic:last-child { + margin-bottom: 0em; +} + + + +/******************************* + Group +*******************************/ + +/* Grouped */ +.ui.statistics { + display: flex; + align-items: flex-start; + flex-wrap: wrap; +} +.ui.statistics > .statistic { + display: inline-flex; + flex: 0 1 auto; + flex-direction: column; + margin: @elementMargin; + max-width: @elementMaxWidth; +} +.ui.statistics { + display: flex; + margin: @groupMargin; +} + +/* Clearing */ +.ui.statistics:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + +.ui.statistics:first-child { + margin-top: 0em; +} +.ui.statistics:last-child { + margin-bottom: 0em; +} + + +/******************************* + Content +*******************************/ + + +/*-------------- + Value +---------------*/ + +.ui.statistics .statistic > .value, +.ui.statistic > .value { + font-family: @valueFont; + font-size: @valueSize; + font-weight: @valueFontWeight; + line-height: @valueLineHeight; + color: @valueColor; + text-transform: @valueTextTransform; + text-align: @textAlign; +} + +/*-------------- + Label +---------------*/ + +.ui.statistics .statistic > .label, +.ui.statistic > .label { + font-family: @labelFont; + font-size: @labelSize; + font-weight: @labelFontWeight; + color: @labelColor; + text-transform: @labelTextTransform; + text-align: @textAlign; +} + +/* Top Label */ +.ui.statistics .statistic > .label ~ .value, +.ui.statistic > .label ~ .value { + margin-top: @topLabelDistance; +} + +/* Bottom Label */ +.ui.statistics .statistic > .value ~ .label, +.ui.statistic > .value ~ .label { + margin-top: @bottomLabelDistance; +} + + + +/******************************* + Types +*******************************/ + +/*-------------- + Icon Value +---------------*/ + +.ui.statistics .statistic > .value .icon, +.ui.statistic > .value .icon { + opacity: 1; + width: auto; + margin: 0em; +} + +/*-------------- + Text Value +---------------*/ + +.ui.statistics .statistic > .text.value, +.ui.statistic > .text.value { + line-height: @textValueLineHeight; + min-height: @textValueMinHeight; + font-weight: @textValueFontWeight; + text-align: center; +} +.ui.statistics .statistic > .text.value + .label, +.ui.statistic > .text.value + .label { + text-align: center; +} + +/*-------------- + Image Value +---------------*/ + +.ui.statistics .statistic > .value img, +.ui.statistic > .value img { + max-height: @imageHeight; + vertical-align: @imageVerticalAlign; +} + + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Count +---------------*/ + + +.ui.ten.statistics { + margin: @itemGroupMargin; +} +.ui.ten.statistics .statistic { + min-width: @tenColumn; + margin: @itemMargin; +} + +.ui.nine.statistics { + margin: @itemGroupMargin; +} +.ui.nine.statistics .statistic { + min-width: @nineColumn; + margin: @itemMargin; +} + +.ui.eight.statistics { + margin: @itemGroupMargin; +} +.ui.eight.statistics .statistic { + min-width: @eightColumn; + margin: @itemMargin; +} + +.ui.seven.statistics { + margin: @itemGroupMargin; +} +.ui.seven.statistics .statistic { + min-width: @sevenColumn; + margin: @itemMargin; +} + +.ui.six.statistics { + margin: @itemGroupMargin; +} +.ui.six.statistics .statistic { + min-width: @sixColumn; + margin: @itemMargin; +} + +.ui.five.statistics { + margin: @itemGroupMargin; +} +.ui.five.statistics .statistic { + min-width: @fiveColumn; + margin: @itemMargin; +} + +.ui.four.statistics { + margin: @itemGroupMargin; +} +.ui.four.statistics .statistic { + min-width: @fourColumn; + margin: @itemMargin; +} + +.ui.three.statistics { + margin: @itemGroupMargin; +} +.ui.three.statistics .statistic { + min-width: @threeColumn; + margin: @itemMargin; +} + +.ui.two.statistics { + margin: @itemGroupMargin; +} +.ui.two.statistics .statistic { + min-width: @twoColumn; + margin: @itemMargin; +} + +.ui.one.statistics { + margin: @itemGroupMargin; +} +.ui.one.statistics .statistic { + min-width: @oneColumn; + margin: @itemMargin; +} + + + + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.statistic { + flex-direction: row; + align-items: center; +} +.ui.horizontal.statistics { + flex-direction: column; + margin: 0em; + max-width: none; +} +.ui.horizontal.statistics .statistic { + flex-direction: row; + align-items: center; + max-width: none; + margin: @horizontalGroupElementMargin; +} + +.ui.horizontal.statistic > .text.value, +.ui.horizontal.statistics > .statistic > .text.value { + min-height: 0em !important; +} +.ui.horizontal.statistics .statistic > .value .icon, +.ui.horizontal.statistic > .value .icon { + width: @iconWidth; +} + +.ui.horizontal.statistics .statistic > .value, +.ui.horizontal.statistic > .value { + display: inline-block; + vertical-align: middle; +} +.ui.horizontal.statistics .statistic > .label, +.ui.horizontal.statistic > .label { + display: inline-block; + vertical-align: middle; + margin: 0em 0em 0em @horizontalLabelDistance; +} + +/*-------------- + Colors +---------------*/ + +.ui.red.statistics .statistic > .value, +.ui.statistics .red.statistic > .value, +.ui.red.statistic > .value { + color: @red; +} +.ui.orange.statistics .statistic > .value, +.ui.statistics .orange.statistic > .value, +.ui.orange.statistic > .value { + color: @orange; +} +.ui.yellow.statistics .statistic > .value, +.ui.statistics .yellow.statistic > .value, +.ui.yellow.statistic > .value { + color: @yellow; +} +.ui.olive.statistics .statistic > .value, +.ui.statistics .olive.statistic > .value, +.ui.olive.statistic > .value { + color: @olive; +} +.ui.green.statistics .statistic > .value, +.ui.statistics .green.statistic > .value, +.ui.green.statistic > .value { + color: @green; +} +.ui.teal.statistics .statistic > .value, +.ui.statistics .teal.statistic > .value, +.ui.teal.statistic > .value { + color: @teal; +} +.ui.blue.statistics .statistic > .value, +.ui.statistics .blue.statistic > .value, +.ui.blue.statistic > .value { + color: @blue; +} +.ui.violet.statistics .statistic > .value, +.ui.statistics .violet.statistic > .value, +.ui.violet.statistic > .value { + color: @violet; +} +.ui.purple.statistics .statistic > .value, +.ui.statistics .purple.statistic > .value, +.ui.purple.statistic > .value { + color: @purple; +} +.ui.pink.statistics .statistic > .value, +.ui.statistics .pink.statistic > .value, +.ui.pink.statistic > .value { + color: @pink; +} +.ui.brown.statistics .statistic > .value, +.ui.statistics .brown.statistic > .value, +.ui.brown.statistic > .value { + color: @brown; +} +.ui.grey.statistics .statistic > .value, +.ui.statistics .grey.statistic > .value, +.ui.grey.statistic > .value { + color: @grey; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.statistics .statistic > .value, +.ui.inverted.statistic .value { + color: @invertedValueColor; +} +.ui.inverted.statistics .statistic > .label, +.ui.inverted.statistic .label { + color: @invertedLabelColor; +} + +.ui.inverted.red.statistics .statistic > .value, +.ui.statistics .inverted.red.statistic > .value, +.ui.inverted.red.statistic > .value { + color: @lightRed; +} +.ui.inverted.orange.statistics .statistic > .value, +.ui.statistics .inverted.orange.statistic > .value, +.ui.inverted.orange.statistic > .value { + color: @lightOrange; +} +.ui.inverted.yellow.statistics .statistic > .value, +.ui.statistics .inverted.yellow.statistic > .value, +.ui.inverted.yellow.statistic > .value { + color: @lightYellow; +} +.ui.inverted.olive.statistics .statistic > .value, +.ui.statistics .inverted.olive.statistic > .value, +.ui.inverted.olive.statistic > .value { + color: @lightOlive; +} +.ui.inverted.green.statistics .statistic > .value, +.ui.statistics .inverted.green.statistic > .value, +.ui.inverted.green.statistic > .value { + color: @lightGreen; +} +.ui.inverted.teal.statistics .statistic > .value, +.ui.statistics .inverted.teal.statistic > .value, +.ui.inverted.teal.statistic > .value { + color: @lightTeal; +} +.ui.inverted.blue.statistics .statistic > .value, +.ui.statistics .inverted.blue.statistic > .value, +.ui.inverted.blue.statistic > .value { + color: @lightBlue; +} +.ui.inverted.violet.statistics .statistic > .value, +.ui.statistics .inverted.violet.statistic > .value, +.ui.inverted.violet.statistic > .value { + color: @lightViolet; +} +.ui.inverted.purple.statistics .statistic > .value, +.ui.statistics .inverted.purple.statistic > .value, +.ui.inverted.purple.statistic > .value { + color: @lightPurple; +} +.ui.inverted.pink.statistics .statistic > .value, +.ui.statistics .inverted.pink.statistic > .value, +.ui.inverted.pink.statistic > .value { + color: @lightPink; +} +.ui.inverted.brown.statistics .statistic > .value, +.ui.statistics .inverted.brown.statistic > .value, +.ui.inverted.brown.statistic > .value { + color: @lightBrown; +} +.ui.inverted.grey.statistics .statistic > .value, +.ui.statistics .inverted.grey.statistic > .value, +.ui.inverted.grey.statistic > .value { + color: @lightGrey; +} + +/*-------------- + Floated +---------------*/ + +.ui[class*="left floated"].statistic { + float: left; + margin: @leftFloatedMargin; +} +.ui[class*="right floated"].statistic { + float: right; + margin: @rightFloatedMargin; +} +.ui.floated.statistic:last-child { + margin-bottom: 0em; +} + + +/*-------------- + Sizes +---------------*/ + + +/* Mini */ +.ui.mini.statistics .statistic > .value, +.ui.mini.statistic > .value { + font-size: @miniValueSize !important; +} +.ui.mini.horizontal.statistics .statistic > .value, +.ui.mini.horizontal.statistic > .value { + font-size: @miniHorizontalValueSize !important; +} +.ui.mini.statistics .statistic > .text.value, +.ui.mini.statistic > .text.value { + font-size: @miniTextValueSize !important; +} + + +/* Tiny */ +.ui.tiny.statistics .statistic > .value, +.ui.tiny.statistic > .value { + font-size: @tinyValueSize !important; +} +.ui.tiny.horizontal.statistics .statistic > .value, +.ui.tiny.horizontal.statistic > .value { + font-size: @tinyHorizontalValueSize !important; +} +.ui.tiny.statistics .statistic > .text.value, +.ui.tiny.statistic > .text.value { + font-size: @tinyTextValueSize !important; +} + +/* Small */ +.ui.small.statistics .statistic > .value, +.ui.small.statistic > .value { + font-size: @smallValueSize !important; +} +.ui.small.horizontal.statistics .statistic > .value, +.ui.small.horizontal.statistic > .value { + font-size: @smallHorizontalValueSize !important; +} +.ui.small.statistics .statistic > .text.value, +.ui.small.statistic > .text.value { + font-size: @smallTextValueSize !important; +} + +/* Medium */ +.ui.statistics .statistic > .value, +.ui.statistic > .value { + font-size: @valueSize !important; +} +.ui.horizontal.statistics .statistic > .value, +.ui.horizontal.statistic > .value { + font-size: @horizontalValueSize !important; +} +.ui.statistics .statistic > .text.value, +.ui.statistic > .text.value { + font-size: @textValueSize !important; +} + +/* Large */ +.ui.large.statistics .statistic > .value, +.ui.large.statistic > .value { + font-size: @largeValueSize !important; +} +.ui.large.horizontal.statistics .statistic > .value, +.ui.large.horizontal.statistic > .value { + font-size: @largeHorizontalValueSize !important; +} +.ui.large.statistics .statistic > .text.value, +.ui.large.statistic > .text.value { + font-size: @largeTextValueSize !important; +} + +/* Huge */ +.ui.huge.statistics .statistic > .value, +.ui.huge.statistic > .value { + font-size: @hugeValueSize !important; +} +.ui.huge.horizontal.statistics .statistic > .value, +.ui.huge.horizontal.statistic > .value { + font-size: @hugeHorizontalValueSize !important; +} +.ui.huge.statistics .statistic > .text.value, +.ui.huge.statistic > .text.value { + font-size: @hugeTextValueSize !important; +} + + +.loadUIOverrides(); diff --git a/src/semantic/src/semantic.less b/src/semantic/src/semantic.less new file mode 100644 index 0000000..c646474 --- /dev/null +++ b/src/semantic/src/semantic.less @@ -0,0 +1,66 @@ +/* + +███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ +██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ +███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ +╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ +███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ +╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ + + Import this file into your LESS project to use Semantic UI without build tools +*/ + +/* Global */ +& { @import "definitions/globals/reset"; } +& { @import "definitions/globals/site"; } + +/* Elements */ +& { @import "definitions/elements/button"; } +& { @import "definitions/elements/container"; } +& { @import "definitions/elements/divider"; } +& { @import "definitions/elements/flag"; } +& { @import "definitions/elements/header"; } +& { @import "definitions/elements/icon"; } +& { @import "definitions/elements/image"; } +& { @import "definitions/elements/input"; } +& { @import "definitions/elements/label"; } +& { @import "definitions/elements/list"; } +& { @import "definitions/elements/loader"; } +& { @import "definitions/elements/rail"; } +& { @import "definitions/elements/reveal"; } +& { @import "definitions/elements/segment"; } +& { @import "definitions/elements/step"; } + +/* Collections */ +& { @import "definitions/collections/breadcrumb"; } +& { @import "definitions/collections/form"; } +& { @import "definitions/collections/grid"; } +& { @import "definitions/collections/menu"; } +& { @import "definitions/collections/message"; } +& { @import "definitions/collections/table"; } + +/* Views */ +& { @import "definitions/views/ad"; } +& { @import "definitions/views/card"; } +& { @import "definitions/views/comment"; } +& { @import "definitions/views/feed"; } +& { @import "definitions/views/item"; } +& { @import "definitions/views/statistic"; } + +/* Modules */ +& { @import "definitions/modules/accordion"; } +& { @import "definitions/modules/checkbox"; } +& { @import "definitions/modules/dimmer"; } +& { @import "definitions/modules/dropdown"; } +& { @import "definitions/modules/embed"; } +& { @import "definitions/modules/modal"; } +& { @import "definitions/modules/nag"; } +& { @import "definitions/modules/popup"; } +& { @import "definitions/modules/progress"; } +& { @import "definitions/modules/rating"; } +& { @import "definitions/modules/search"; } +& { @import "definitions/modules/shape"; } +& { @import "definitions/modules/sidebar"; } +& { @import "definitions/modules/sticky"; } +& { @import "definitions/modules/tab"; } +& { @import "definitions/modules/transition"; } diff --git a/src/semantic/src/site/collections/breadcrumb.overrides b/src/semantic/src/site/collections/breadcrumb.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/collections/breadcrumb.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/collections/breadcrumb.variables b/src/semantic/src/site/collections/breadcrumb.variables new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/collections/breadcrumb.variables @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/collections/form.overrides b/src/semantic/src/site/collections/form.overrides new file mode 100644 index 0000000..3a79834 --- /dev/null +++ b/src/semantic/src/site/collections/form.overrides @@ -0,0 +1,16 @@ +/******************************* + Site Overrides +*******************************/ + +.orders-search { + display: flex; +} +.orders-search .button , .orders-search .dropdown{ + margin: 0 0 0 4px; +} +.ui.form.orders-search .search-input { + margin: auto; +} +.ui.form.orders-search .action.input:not([class*="left action"])>input { + border-radius: 3px!important; +} diff --git a/src/semantic/src/site/collections/form.variables b/src/semantic/src/site/collections/form.variables new file mode 100644 index 0000000..40ba3d9 --- /dev/null +++ b/src/semantic/src/site/collections/form.variables @@ -0,0 +1,44 @@ +/******************************* + User Variable Overrides +*******************************/ + + +/* Input */ +@inputFont: @pageFont; +@inputWidth: 100%; +@inputFontSize: 1em; +@inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding; +@inputBorder: solid 2px rgba(255, 255, 255, 0); +@inputBorderRadius: @absoluteBorderRadius; +@inputColor: @textColor; +@inputTransition: + color @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing +; +@inputBoxShadow: @subtleShadow; + +/* Select */ +@selectBackground: @white; +@selectBorderRadius: @inputBorderRadius; +@selectBorder: @blueBorderColor; +@selectPadding: 0.62em @inputHorizontalPadding; +@selectBoxShadow: @inputBoxShadow; +@selectTransition: @inputTransition; +@selectColor: @inputColor; + +/*------------------- + States +--------------------*/ + +/* Focus */ +@inputFocusPointerSize: 0px; + +/* Input Focus */ +@inputFocusBackground: @inputBackground; +@inputFocusBorderColor: @focusedFormBorderColor; +@inputFocusColor: @focusedFormBorderColor; +@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset; +@inputFocusBorderRadius: @inputBorderRadius; + +@labelColor: @blue; +@labelFontWeight: normal; diff --git a/src/semantic/src/site/collections/grid.overrides b/src/semantic/src/site/collections/grid.overrides new file mode 100644 index 0000000..e8e7cef --- /dev/null +++ b/src/semantic/src/site/collections/grid.overrides @@ -0,0 +1,24 @@ +/******************************* + Site Overrides +*******************************/ +.ui.grid .row.order-col { + max-width: 980px; + margin: auto; + margin-top: 30px; +} +.ui.grid .column .order-billing, .ui.grid .column .order-shipping{ + margin-bottom: 5px; + padding: 10px; + color: #2a4872; +} +.order-prices { + float: right; +} +.order-prices hr { + border: none; + border-top: 4px double #2a4872; +} +.grid .orders-col{ + margin-top: 15px; + margin-bottom: 15px; +} diff --git a/src/semantic/src/site/collections/grid.variables b/src/semantic/src/site/collections/grid.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/collections/grid.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/collections/menu.overrides b/src/semantic/src/site/collections/menu.overrides new file mode 100644 index 0000000..ba51b9e --- /dev/null +++ b/src/semantic/src/site/collections/menu.overrides @@ -0,0 +1,81 @@ +/******************************* + Site Overrides +*******************************/ +.ui.menu:not(.vertical) .item>.button { + color: #a3a8af; + text-decoration: underline; + background-color: #e9edf2; + font-weight: bold; + padding-left: 5px!important; +} + +.ui.secondary.menu .active.item { + color: #2a4872; + border-radius: 16.5px!important; + background-color: #ffffff; +} + +.ui.secondary.menu .active.item:hover { + color: #62676e; + border-radius: 16.5px!important; + background-color: rgba(0, 0, 0, 0.08); +} + +.ui.secondary.menu a.item:hover{ + color: #62676e; + border-radius: 16.5px!important; + background-color: rgba(0, 0, 0, 0.08); +} +.ui.menu.three.item .item-group a { + width: auto; + padding: 8px 15px!important; + margin: 0 5px!important; + flex:none; +} +.ui.menu .item:first-child { + justify-content: flex-start; + padding-left: 20px!important; +} +.ui.menu .item.right:last-child { + justify-content: flex-end; +} + +.item svg { + margin-right: 5px; +} + +.ui.menu.three.item .item { + width: auto; + flex: 1; +} + +@media (max-width: 900px) { + .ui.secondary.item.menu { + flex-direction: column-reverse; + } + .ui.menu .item.right:last-child { + justify-content: normal; + margin-left: 0!important; + } + .ui.secondary.menu .item-left { + display: none; + } +} + +.ui.menu .item:before { + background: none; +} +.ui.pagination.menu{ + min-height: 20px; + height: 27px; + vertical-align: inherit; +} + +.ui.pagination.menu .item { + color: #62676e; + text-transform: lowercase; + font-size: 13px; + padding: 7px!important; + min-width: 2px; + background-image: linear-gradient(to bottom, #ffffff, #f6f7f9); +} diff --git a/src/semantic/src/site/collections/menu.variables b/src/semantic/src/site/collections/menu.variables new file mode 100644 index 0000000..95007a9 --- /dev/null +++ b/src/semantic/src/site/collections/menu.variables @@ -0,0 +1,7 @@ +/******************************* + User Variable Overrides +*******************************/ + +@secondaryBackground: @paleBlue; +@itemTextColor: #a3a8af; +@dropdownBackground: #FFFFFF; diff --git a/src/semantic/src/site/collections/message.overrides b/src/semantic/src/site/collections/message.overrides new file mode 100644 index 0000000..96091c3 --- /dev/null +++ b/src/semantic/src/site/collections/message.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/collections/message.variables b/src/semantic/src/site/collections/message.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/collections/message.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/collections/table.overrides b/src/semantic/src/site/collections/table.overrides new file mode 100644 index 0000000..ca939d9 --- /dev/null +++ b/src/semantic/src/site/collections/table.overrides @@ -0,0 +1,127 @@ +/******************************* + Site Overrides +*******************************/ + +.ui.container.outerScroll .table thead th { + background: #2a4872; + color: #d4d4d5; +} +.ui.celled.table tr:nth-child(odd) { + background-color: #ffffff; +} + +.ui.container.outerScroll .table { + transform: rotateX(180deg); +} + +.outerScroll .table .tr-clickable .ID, +outerScroll .table .tr-clickable .Total { + color: #2a4872; + font-weight: 600; +} +.outerScroll .table .tr-clickable { + color: #62676e; +} +.ui.left-table , .ui.right-table{ + border: none; + box-shadow: 0 2px 6px 0 rgba(42, 72, 114, 0.1), 0 6px 18px 0 rgba(42, 72, 114, 0.05); +} + + .ui.table tbody tr { + color: #2a4872; +} + .ui.left-table td { + font-size: 13px; + padding: 16px 30px; +} + .ui.left-table tr td:nth-child(2) { + color: #989ea9; +} + .left-table tbody tr td:first-child { + font-size: 16px; +} + + .left-table tbody tr:first-child { + background-color: #2a4872; + color: #c1cdde; +} + .left-table tbody tr:first-child td:first-child { + border-radius: .28571429rem 0 0 0; +} + .left-table tbody tr:first-child td:last-child { + border-radius: 0 .28571429rem 0 0; +} + .left-table tbody tr:nth-child(2) { + background-color: #4a6184; + color: #c1cdde; +} + .ui.table thead th { + border-bottom: none; + color: #2a4872; +} + .ui.right-table{ + padding: 20px; +} + .ui.right-table tr:first-child td { + border-top: 2px solid #2a4872; +} + .ui.right-table td { + font-size: 13px; + border-top: 1px solid #c1cdde; +} + .ui.right-table td a { + color: #62676e; +} + .ui.left-table { + max-width: 600px; +} + .ui.right-table { + max-width: 360px; +} + @media only screen and (max-width: 767px){ + + .left-table tbody tr:first-child, .right-table thead tr:first-child { + border-radius: 10px 10px 0 0; + } + .left-header { + background-color: #2a4872; + } + .ui.left-table:first-child { + margin-top: 80px; + } + .ui.right-table { + border-radius: 10px; + } + .ui.right-table, .ui.left-table { + max-width:100%; + } +} + @media (max-width:900px) and (min-width:767px){ + ui.left-table:first-child, .ui.right-table:first-child { + margin-top: 80px; + } + .ui.celled.table tr th { + border-left: 0; + } + + .ui.celled.table tr:nth-child(odd) { + background-color: #ffffff; + } + + .ui.celled.table tr td{ + border-left: 0; + } + + .outerScroll .table{ + transform: rotateX(180deg); + } + + .outerScroll .table .tr-clickable .ID, outerScroll .table .tr-clickable .Total{ + color: #2a4872; + font-weight: 600; + } + + .outerScroll .table .tr-clickable { + color: #62676e; + } + } diff --git a/src/semantic/src/site/collections/table.variables b/src/semantic/src/site/collections/table.variables new file mode 100644 index 0000000..e20712e --- /dev/null +++ b/src/semantic/src/site/collections/table.variables @@ -0,0 +1,14 @@ +/******************************* + User Variable Overrides +*******************************/ +.ui.basic.table { + margin-top: 27px; +} + +.ui.basic.table tbody tr { + background: red; +} +.ui.basic.table tbody tr:first-child { + background-color: lime; + font-size: 14px; +} \ No newline at end of file diff --git a/src/semantic/src/site/elements/button.overrides b/src/semantic/src/site/elements/button.overrides new file mode 100644 index 0000000..e4a2f49 --- /dev/null +++ b/src/semantic/src/site/elements/button.overrides @@ -0,0 +1,42 @@ +/******************************* + Site Overrides +*******************************/ + +.ui.secondary.button, .ui.secondary.buttons .button { + font-weight: normal; + color: #2A4872; + background-image: linear-gradient(to bottom, #FFFFFF, #F6F7F9); + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.15); +} +.ui.secondary.button:focus, .ui.secondary.buttons .button:focus { + background-image :none; + background-color: #D1D4D9; + color: #2A4872; + +} +.ui.secondary.button:hover, .ui.secondary.buttons .button:hover { + background-image :none; + background-color: #D1D4D9; + color: #2A4872; + text-shadow: none; +} +.orders-col .button { + padding: 7px; + min-height: 20px; + height: 27px; + color: #2a4872; + font-size: 13px; + background-image: linear-gradient(to bottom,#fff,#f6f7f9); + border: 1px solid rgba(34,36,38,.15); + box-shadow: 0 2px 6px 0 rgba(42,72,114,.05), 0 1px 3px 0 rgba(42,72,114,.1); +} + +.orders-col .button .dropdown:first-child{ + float: right; + text-align: right; +} + +.ui.negative.button { + background-image: linear-gradient(to bottom,#ff4e4e,#db2828); +} + diff --git a/src/semantic/src/site/elements/button.variables b/src/semantic/src/site/elements/button.variables new file mode 100644 index 0000000..7aa7b9b --- /dev/null +++ b/src/semantic/src/site/elements/button.variables @@ -0,0 +1,33 @@ +/******************************* + User Variable Overrides +*******************************/ + +@submitPrimary: @blue; +@medium: auto; +@fontWeight: normal; +@textColor: @blue; + + @coloredBackgroundImage: linear-gradient(to bottom, #2872ee, #0b50c3); + +/* Ordinality */ +@primaryBackgroundImage: @coloredBackgroundImage; +@secondaryBackgroundImage: @coloredBackgroundImage; + +/*------------------- + States +--------------------*/ + +/* Hovered */ +@hoverBackgroundColor: #D1D4D9; +@hoverBackgroundImage: @backgroundImage; +@hoverBoxShadow: @boxShadow; +@hoverColor: @hoveredTextColor; +@iconHoverOpacity: 0.85; + +/* Focused */ +@focusBackgroundColor: @hoverBackgroundColor; +@focusBackgroundImage: ''; +@focusBoxShadow: ''; +@focusColor: @hoveredTextColor; +@iconFocusOpacity: 0.85; + diff --git a/src/semantic/src/site/elements/container.overrides b/src/semantic/src/site/elements/container.overrides new file mode 100644 index 0000000..4f96219 --- /dev/null +++ b/src/semantic/src/site/elements/container.overrides @@ -0,0 +1,7 @@ +/******************************* + Site Overrides +*******************************/ +.ui.container.outerScroll { + overflow-x: auto; + transform: rotateX(180deg); +} diff --git a/src/semantic/src/site/elements/container.variables b/src/semantic/src/site/elements/container.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/container.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/divider.overrides b/src/semantic/src/site/elements/divider.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/divider.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/divider.variables b/src/semantic/src/site/elements/divider.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/divider.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/flag.overrides b/src/semantic/src/site/elements/flag.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/flag.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/flag.variables b/src/semantic/src/site/elements/flag.variables new file mode 100644 index 0000000..e3e125d --- /dev/null +++ b/src/semantic/src/site/elements/flag.variables @@ -0,0 +1,3 @@ +/*------------------- + Flag Variables +--------------------*/ diff --git a/src/semantic/src/site/elements/header.overrides b/src/semantic/src/site/elements/header.overrides new file mode 100644 index 0000000..12cbfea --- /dev/null +++ b/src/semantic/src/site/elements/header.overrides @@ -0,0 +1,39 @@ +/******************************* + Site Overrides +*******************************/ +.order-col .ui.attached.header{ + background-color: #2a4872; + display: flex; + justify-content: space-between; + padding: 22px 35px; +} +.order-col .sub.header p{ + color: #c1cdde; + font-weight: normal; + font-size: 13px; +} +.order-col .order-billing h3, .order-col .order-shipping h3{ + font-weight: bold; +} +.order-col .sub.header:first-child{ + color: #ffffff; + font-weight: bold; + font-size: 16px; +} +.order-col .sub.header:nth-child(2){ + text-align: right; + font-size: 13px; + color: #ffffff; +} +.sub.header.billing-status:nth-child(2), .sub.header.shipping-status:nth-child(2){ + color: #62676e; + text-align: left; +} +.order-col .sub.header.billing-status-paid:nth-child(2), .order-col .sub.header.shipping-status-shipped:nth-child(2){ + color: #2abc2e; + text-align: left; +} +.sub.header.billing-status-paid svg, .sub.header.shipping-status-shipped svg{ + vertical-align: text-bottom; +} + diff --git a/src/semantic/src/site/elements/header.variables b/src/semantic/src/site/elements/header.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/header.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/icon.overrides b/src/semantic/src/site/elements/icon.overrides new file mode 100644 index 0000000..3feea4d --- /dev/null +++ b/src/semantic/src/site/elements/icon.overrides @@ -0,0 +1,4 @@ +/******************************* + Site Overrides +*******************************/ + diff --git a/src/semantic/src/site/elements/icon.variables b/src/semantic/src/site/elements/icon.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/icon.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/image.overrides b/src/semantic/src/site/elements/image.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/image.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/image.variables b/src/semantic/src/site/elements/image.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/image.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/input.overrides b/src/semantic/src/site/elements/input.overrides new file mode 100644 index 0000000..e69de29 diff --git a/src/semantic/src/site/elements/input.variables b/src/semantic/src/site/elements/input.variables new file mode 100644 index 0000000..9a412d4 --- /dev/null +++ b/src/semantic/src/site/elements/input.variables @@ -0,0 +1,31 @@ +/******************************* + User Variable Overrides +*******************************/ + + +/*------------------- + Element +--------------------*/ + +@inputFont: @pageFont; +@verticalPadding: @inputVerticalPadding; +@horizontalPadding: @inputHorizontalPadding; + +@lineHeight: @inputLineHeight; +@lineHeightOffset: ((@lineHeight - 1em) / 2); + +@padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding; + +@textAlign: left; +@background: @inputBackground; +@borderWidth: 1px; +@border: solid; +@boxShadow: @subtleShadow; + + +/* Focus */ +@focusBorderColor: @focusedFormBorderColor; +@focusBackground: @background; +@focusColor: @hoveredTextColor; +@focusBoxShadow: @subtleShadow; + diff --git a/src/semantic/src/site/elements/label.overrides b/src/semantic/src/site/elements/label.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/label.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/label.variables b/src/semantic/src/site/elements/label.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/label.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/list.overrides b/src/semantic/src/site/elements/list.overrides new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/list.overrides @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/list.variables b/src/semantic/src/site/elements/list.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/list.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/loader.overrides b/src/semantic/src/site/elements/loader.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/loader.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/loader.variables b/src/semantic/src/site/elements/loader.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/loader.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/rail.overrides b/src/semantic/src/site/elements/rail.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/rail.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/rail.variables b/src/semantic/src/site/elements/rail.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/rail.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/reveal.overrides b/src/semantic/src/site/elements/reveal.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/reveal.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/reveal.variables b/src/semantic/src/site/elements/reveal.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/reveal.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/segment.overrides b/src/semantic/src/site/elements/segment.overrides new file mode 100644 index 0000000..52bab6c --- /dev/null +++ b/src/semantic/src/site/elements/segment.overrides @@ -0,0 +1,80 @@ +/******************************* + Site Overrides +*******************************/ +.segment .ui.horizontal.list { + float:right; +} + +.ui.segment.order-item { + padding: 16px 21px; +} +.ui.segment.order-item .header { + color: #2a4872; +} +.order-item { + display: flex; +} +.order-item .sub.header p { + color: #62676e; +} +.order-item .ui.header { + margin-top:0; + flex-grow: 1; +} +.order-item .item-quantity { + width: 30px; + color: #a3a8af; +} +.ui.segment .order-prices { + width: 175px; +} +.ui.segment .order-prices h3 { + text-align: right; + color: #2a4872; +} +.ui.segment .order-prices p{ + text-align: left; + display: inline-block; +} +.item-type p{ + float: left; + margin-right: 30px; + color: #62676e; +} +.ui.segment p.price-detail{ + font-size: 13px; + width:100px; + min-width: 100px; + color: #62676e; +} +.ui.segment p.price-detail + p{ + font-size: 13px; + float: right; + color: #2a4872; +} +.ui.segment .price-total { + text-align: right; + font-size: 13px; + color: #62676e; +} +.ui.segment .price-total p { + margin-bottom: 0; +} +.customers .ui.segment { + padding: 0; +} +.customers .ui.basic.segment .small-button{ + margin-right:8px; + min-height: 20px; + height: 27px; + padding: 0 10px; + box-shadow: 0 2px 6px 0 rgba(92, 101, 115, 0.1), 0 1px 3px 0 rgba(92, 101, 115, 0.3); +} +.customers .ui.basic.segment .small-button.delete { + color: #5f1e1e; + background-image: linear-gradient(to bottom, #fff1f1, #ffe6e6); +} +.customers .ui.basic.segment .small-button.download { + color: #5f531e; + background-image: linear-gradient(to bottom, #fffdf1, #fffae6); +} diff --git a/src/semantic/src/site/elements/segment.variables b/src/semantic/src/site/elements/segment.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/segment.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/step.overrides b/src/semantic/src/site/elements/step.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/elements/step.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/elements/step.variables b/src/semantic/src/site/elements/step.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/elements/step.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/globals/reset.overrides b/src/semantic/src/site/globals/reset.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/globals/reset.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/globals/reset.variables b/src/semantic/src/site/globals/reset.variables new file mode 100644 index 0000000..cd95544 --- /dev/null +++ b/src/semantic/src/site/globals/reset.variables @@ -0,0 +1,3 @@ +/******************************* + User Global Variables +*******************************/ diff --git a/src/semantic/src/site/globals/site.overrides b/src/semantic/src/site/globals/site.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/globals/site.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/globals/site.variables b/src/semantic/src/site/globals/site.variables new file mode 100644 index 0000000..62cb361 --- /dev/null +++ b/src/semantic/src/site/globals/site.variables @@ -0,0 +1,81 @@ +/******************************* + User Global Variables +*******************************/ + + +/*------------------- + Brand Colors +--------------------*/ + +@primaryColor : #1667D6; +@secondaryColor : #ffffff; + +@lightPrimaryColor : @lightBlue; +@lightSecondaryColor : @lightBlack; + + +/*------------------- + Site Colors +--------------------*/ + +/*--- Colors ---*/ +@blue : #2A4872; +@black : #62676E; +@grey : #A3A8AF; + +/*--- Light Colors ---*/ +@lightBlue : #1667D6; +@lightGrey : #DCDDDE; +@paleBlue : #E9EDF2; + +/*--- Neutrals ---*/ +@fullBlack : #000000; +@white : #FAFAFA; + +/*--- Colored Backgrounds ---*/ +@lightBlueBackground : @paleBlue; +@lightGrayBackground : @white; + + +/*--- Colored Border ---*/ +@blueBorderColor : @blue; + +/*------------------- + Focused Input +--------------------*/ + +/* Used on inputs, textarea etc */ +@focusedFormBorderColor: @lightBlue; + +/*------------------- + Alpha Colors +--------------------*/ + +@subtleTransparentBlack : rgba(0, 0, 0, 0.03); +@transparentBlack : rgba(0, 0, 0, 0.05); +@strongTransparentBlack : rgba(0, 0, 0, 0.10); +@veryStrongTransparentBlack : rgba(0, 0, 0, 0.15); + + +@subtleTransparentWhite : rgba(255, 255, 255, 0.02); +@transparentWhite : rgba(255, 255, 255, 0.08); +@strongTransparentWhite : rgba(255, 255, 255, 0.15); + +/*------------------- + Accents +--------------------*/ + +/* Differentiating Neutrals */ +@blueGradient : linear-gradient(to bottom, #2872ee, #0b50c3); +@subtleGradient : linear-gradient(transparent, @transparentBlack); +@subtleShadow : 0 2px 6px 0 rgba(42, 72, 114, 0.05), 0 1px 3px 0 rgba(42, 72, 114, 0.1); +@primaryColorGradiant : linear-gradient(to bottom, #2872ee, #0b50c3); +@secondaryColorGradiant : linear-gradient(to bottom, #ffffff, #f6f7f9); +@pageBackgroundGradiant : linear-gradient(to bottom, #ffffff, #e9edf2); + + +/*------------------- + Page +--------------------*/ +@pageBackground : @paleBlue; +@headerFontWeight : normal; diff --git a/src/semantic/src/site/modules/accordion.overrides b/src/semantic/src/site/modules/accordion.overrides new file mode 100644 index 0000000..660e664 --- /dev/null +++ b/src/semantic/src/site/modules/accordion.overrides @@ -0,0 +1,3 @@ +/******************************* + User Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/accordion.variables b/src/semantic/src/site/modules/accordion.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/accordion.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/chatroom.overrides b/src/semantic/src/site/modules/chatroom.overrides new file mode 100644 index 0000000..660e664 --- /dev/null +++ b/src/semantic/src/site/modules/chatroom.overrides @@ -0,0 +1,3 @@ +/******************************* + User Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/chatroom.variables b/src/semantic/src/site/modules/chatroom.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/chatroom.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/checkbox.overrides b/src/semantic/src/site/modules/checkbox.overrides new file mode 100644 index 0000000..50abd1f --- /dev/null +++ b/src/semantic/src/site/modules/checkbox.overrides @@ -0,0 +1,12 @@ +/******************************* + Site Overrides +*******************************/ +.ui.checkbox .box:before, .ui.checkbox label:before { + box-shadow: inset 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.38); +} +.ui.checkbox input:checked~.box:after, .ui.checkbox input:checked~label:after { + opacity: 1; + color: #ffffff; + background: #3b99fc; + border-radius: 3px; +} diff --git a/src/semantic/src/site/modules/checkbox.variables b/src/semantic/src/site/modules/checkbox.variables new file mode 100644 index 0000000..b71915e --- /dev/null +++ b/src/semantic/src/site/modules/checkbox.variables @@ -0,0 +1,17 @@ +/******************************* + User Variable Overrides +*******************************/ + +@checkboxSize: 14px; +@labelDistance: 20px; + +/* Label */ +@labelFontSize: 16px; +@labelColor: @blue; + +@checkboxCheckFontSize: 12px; +@checkboxBorder: solid 0.5px rgba(0, 0, 0, 0.2); +@checkboxActiveBorderColor: #338ef4; +@checkboxActiveBackground: #338ef4; +@checkboxActiveCheckColor: @white; + diff --git a/src/semantic/src/site/modules/dimmer.overrides b/src/semantic/src/site/modules/dimmer.overrides new file mode 100644 index 0000000..660e664 --- /dev/null +++ b/src/semantic/src/site/modules/dimmer.overrides @@ -0,0 +1,3 @@ +/******************************* + User Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/dimmer.variables b/src/semantic/src/site/modules/dimmer.variables new file mode 100644 index 0000000..682007f --- /dev/null +++ b/src/semantic/src/site/modules/dimmer.variables @@ -0,0 +1,4 @@ +/******************************* + User Variable Overrides +*******************************/ +@backgroundColor: rgba(233, 237, 242, 0.75); diff --git a/src/semantic/src/site/modules/dropdown.overrides b/src/semantic/src/site/modules/dropdown.overrides new file mode 100644 index 0000000..d911bed --- /dev/null +++ b/src/semantic/src/site/modules/dropdown.overrides @@ -0,0 +1,18 @@ +/******************************* + User Overrides +*******************************/ + +.orders-col .selection.dropdown{ + min-height: 20px; + height: 27px; + vertical-align: inherit; + border: 1px solid rgba(34,36,38,.15); + box-shadow: 0 2px 6px 0 rgba(42,72,114,.05), 0 1px 3px 0 rgba(42,72,114,.1); +} +.orders-col .dropdown:not(.button)>.default.text{ + margin: auto; +} +.orders-col .dropdown .item .header{ + color: #2a4872; + margin: 0 0 5px; +} diff --git a/src/semantic/src/site/modules/dropdown.variables b/src/semantic/src/site/modules/dropdown.variables new file mode 100644 index 0000000..a0f324a --- /dev/null +++ b/src/semantic/src/site/modules/dropdown.variables @@ -0,0 +1,7 @@ +/******************************* + User Variable Overrides +*******************************/ + +@raisedShadow: 0 20px 60px 0 rgba(69, 85, 107, 0.15), 0 3px 9px 0 rgba(69, 85, 107, 0.15); +@menuBackground: #FFFFFF; +@menuBoxShadow: @raisedShadow; diff --git a/src/semantic/src/site/modules/embed.overrides b/src/semantic/src/site/modules/embed.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/embed.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/embed.variables b/src/semantic/src/site/modules/embed.variables new file mode 100644 index 0000000..e69de29 diff --git a/src/semantic/src/site/modules/modal.overrides b/src/semantic/src/site/modules/modal.overrides new file mode 100644 index 0000000..3fd719c --- /dev/null +++ b/src/semantic/src/site/modules/modal.overrides @@ -0,0 +1,56 @@ +/******************************* + Site Overrides +*******************************/ + +.ui.modal.order-modal form button{ + width: 100%; +} +.ui.modal.order-modal svg { + float: right; + cursor: pointer; +} +.ui.modal.order-modal .header svg{ + color: #a3a8af; +} +.ui.modal.item-info-modal .header svg { + float: right; + cursor: pointer; +} +.ui.modal.item-info-modal .header { + color: #ffffff; + font-size: 24px; + font-weight: 600; + background-color: #2a4872; + padding: 35px; +} +.ui.modal.item-info-modal .content { + padding: 35px; +} +.ui.modal.item-info-modal .segment { + background-color: #2a4872; + border: none; + box-shadow: none; + padding: 0; +} +.ui.modal.item-info-modal .segment p { + display: inline-block; + color: #ffffff; + width: 150px; + text-align: right; +} +.ui.modal.item-info-modal .segment p+p { + color: #c1cdde; + margin-left: 30px; + font-weight: normal; + text-align: left; + width: auto; +} +.ui.modal.item-info-modal .content .segment { + background-color: #ffffff; +} +.ui.modal.item-info-modal .content .segment p { + color: #2a4872; +} +.ui.modal.item-info-modal .content .segment p+p { + color: #62676e; +} diff --git a/src/semantic/src/site/modules/modal.variables b/src/semantic/src/site/modules/modal.variables new file mode 100644 index 0000000..260c44c --- /dev/null +++ b/src/semantic/src/site/modules/modal.variables @@ -0,0 +1,11 @@ +/******************************* + Site Overrides +*******************************/ +@headerColor: @blue; + +@headerVerticalPadding: 16px; +@headerHorizontalPadding: 30px; + +@smallRatio: 0.4; +@headerBorder: none; +@headerFontWeight: normal; diff --git a/src/semantic/src/site/modules/nag.overrides b/src/semantic/src/site/modules/nag.overrides new file mode 100644 index 0000000..660e664 --- /dev/null +++ b/src/semantic/src/site/modules/nag.overrides @@ -0,0 +1,3 @@ +/******************************* + User Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/nag.variables b/src/semantic/src/site/modules/nag.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/nag.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/popup.overrides b/src/semantic/src/site/modules/popup.overrides new file mode 100644 index 0000000..660e664 --- /dev/null +++ b/src/semantic/src/site/modules/popup.overrides @@ -0,0 +1,3 @@ +/******************************* + User Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/popup.variables b/src/semantic/src/site/modules/popup.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/popup.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/progress.overrides b/src/semantic/src/site/modules/progress.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/progress.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/progress.variables b/src/semantic/src/site/modules/progress.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/progress.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/rating.overrides b/src/semantic/src/site/modules/rating.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/rating.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/rating.variables b/src/semantic/src/site/modules/rating.variables new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/rating.variables @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/search.overrides b/src/semantic/src/site/modules/search.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/search.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/search.variables b/src/semantic/src/site/modules/search.variables new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/search.variables @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/shape.overrides b/src/semantic/src/site/modules/shape.overrides new file mode 100644 index 0000000..660e664 --- /dev/null +++ b/src/semantic/src/site/modules/shape.overrides @@ -0,0 +1,3 @@ +/******************************* + User Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/shape.variables b/src/semantic/src/site/modules/shape.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/shape.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/sidebar.overrides b/src/semantic/src/site/modules/sidebar.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/sidebar.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/sidebar.variables b/src/semantic/src/site/modules/sidebar.variables new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/sidebar.variables @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/sticky.overrides b/src/semantic/src/site/modules/sticky.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/sticky.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/sticky.variables b/src/semantic/src/site/modules/sticky.variables new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/sticky.variables @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/tab.overrides b/src/semantic/src/site/modules/tab.overrides new file mode 100644 index 0000000..660e664 --- /dev/null +++ b/src/semantic/src/site/modules/tab.overrides @@ -0,0 +1,3 @@ +/******************************* + User Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/tab.variables b/src/semantic/src/site/modules/tab.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/tab.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/transition.overrides b/src/semantic/src/site/modules/transition.overrides new file mode 100644 index 0000000..cba59ef --- /dev/null +++ b/src/semantic/src/site/modules/transition.overrides @@ -0,0 +1,3 @@ +/******************************* + Site Overrides +*******************************/ diff --git a/src/semantic/src/site/modules/transition.variables b/src/semantic/src/site/modules/transition.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/modules/transition.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/ad.overrides b/src/semantic/src/site/views/ad.overrides new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/ad.overrides @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/ad.variables b/src/semantic/src/site/views/ad.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/ad.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/card.overrides b/src/semantic/src/site/views/card.overrides new file mode 100644 index 0000000..da72534 --- /dev/null +++ b/src/semantic/src/site/views/card.overrides @@ -0,0 +1,29 @@ +/******************************* + User Variable Overrides +*******************************/ + +.ui.card>.content>.header+.description { + margin-left: 20px; +} +.ui.card>.content>.description { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.customers .ui.card .extra.content { + border: none!important; +} +.customers .ui.card .extra p:nth-child(2){ + float: right; +} +.customers .ui.card .extra p:first-child{ + float: left; + margin-left: 20px; +} +.customers .ui.card .content .header { + color: #2a4872; + margin-left: 20px; +} +.customers .ui.card.active { + background-color: #fffae8; +} diff --git a/src/semantic/src/site/views/card.variables b/src/semantic/src/site/views/card.variables new file mode 100644 index 0000000..80da8c3 --- /dev/null +++ b/src/semantic/src/site/views/card.variables @@ -0,0 +1,10 @@ +/******************************* + User Variable Overrides +*******************************/ +@descriptionColor: @grey; +@contentFontSize: 13px; + +@borderRadius: 5px; +@background: #ffffff; +@boxShadow: 0 2px 6px 0 rgba(42, 72, 114, 0.1), 0 1px 3px 0 rgba(42, 72, 114, 0.05); +@extraColor: @black; \ No newline at end of file diff --git a/src/semantic/src/site/views/comment.overrides b/src/semantic/src/site/views/comment.overrides new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/comment.overrides @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/comment.variables b/src/semantic/src/site/views/comment.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/comment.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/feed.overrides b/src/semantic/src/site/views/feed.overrides new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/feed.overrides @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/feed.variables b/src/semantic/src/site/views/feed.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/feed.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/item.overrides b/src/semantic/src/site/views/item.overrides new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/item.overrides @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/item.variables b/src/semantic/src/site/views/item.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/item.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/statistic.overrides b/src/semantic/src/site/views/statistic.overrides new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/statistic.overrides @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/site/views/statistic.variables b/src/semantic/src/site/views/statistic.variables new file mode 100644 index 0000000..6f085f9 --- /dev/null +++ b/src/semantic/src/site/views/statistic.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/semantic/src/theme.config b/src/semantic/src/theme.config new file mode 100644 index 0000000..d2bc3bb --- /dev/null +++ b/src/semantic/src/theme.config @@ -0,0 +1,92 @@ +/* + +████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ +╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ + ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ + ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ + ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ + ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ + +*/ + +/******************************* + Theme Selection +*******************************/ + +/* To override a theme for an individual element + specify theme name below +*/ + +/* Global */ +@site : 'default'; +@reset : 'default'; + +/* Elements */ +@button : 'default'; +@container : 'default'; +@divider : 'default'; +@flag : 'default'; +@header : 'default'; +@icon : 'default'; +@image : 'default'; +@input : 'default'; +@label : 'default'; +@list : 'default'; +@loader : 'default'; +@rail : 'default'; +@reveal : 'default'; +@segment : 'default'; +@step : 'default'; + +/* Collections */ +@breadcrumb : 'default'; +@form : 'default'; +@grid : 'default'; +@menu : 'default'; +@message : 'default'; +@table : 'default'; + +/* Modules */ +@accordion : 'default'; +@checkbox : 'default'; +@dimmer : 'default'; +@dropdown : 'default'; +@embed : 'default'; +@modal : 'default'; +@nag : 'default'; +@popup : 'default'; +@progress : 'default'; +@rating : 'default'; +@search : 'default'; +@shape : 'default'; +@sidebar : 'default'; +@sticky : 'default'; +@tab : 'default'; +@transition : 'default'; + +/* Views */ +@ad : 'default'; +@card : 'default'; +@comment : 'default'; +@feed : 'default'; +@item : 'default'; +@statistic : 'default'; + +/******************************* + Folders +*******************************/ + +/* Path to theme packages */ +@themesFolder : 'themes'; + +/* Path to site override folder */ +@siteFolder : 'site/'; + + +/******************************* + Import Theme +*******************************/ + +@import "theme.less"; + +/* End Config */ \ No newline at end of file diff --git a/src/semantic/src/theme.less b/src/semantic/src/theme.less new file mode 100644 index 0000000..aeb092d --- /dev/null +++ b/src/semantic/src/theme.less @@ -0,0 +1,61 @@ +/******************************* + Import Directives +*******************************/ + +/*------------------ + Theme +-------------------*/ + +@theme: @@element; + +/*-------------------- + Site Variables +---------------------*/ + +/* Default site.variables */ +@import "@{themesFolder}/default/globals/site.variables"; + +/* Packaged site.variables */ +@import "@{themesFolder}/@{site}/globals/site.variables"; + +/* Component's site.variables */ +@import (optional) "@{themesFolder}/@{theme}/globals/site.variables"; + +/* Site theme site.variables */ +@import (optional) "@{siteFolder}/globals/site.variables"; + + +/*------------------- + Component Variables +---------------------*/ + +/* Default */ +@import "@{themesFolder}/default/@{type}s/@{element}.variables"; + +/* Packaged Theme */ +@import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.variables"; + +/* Site Theme */ +@import (optional) "@{siteFolder}/@{type}s/@{element}.variables"; + + +/******************************* + Mix-ins +*******************************/ + +/*------------------ + Fonts +-------------------*/ + +.loadFonts() when (@importGoogleFonts) { + @import url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}'); +} + +/*------------------ + Overrides +-------------------*/ + +.loadUIOverrides() { + @import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides"; + @import (optional) "@{siteFolder}/@{type}s/@{element}.overrides"; +} diff --git a/src/semantic/src/themes/default/assets/fonts/icons.eot b/src/semantic/src/themes/default/assets/fonts/icons.eot new file mode 100644 index 0000000..c7b00d2 Binary files /dev/null and b/src/semantic/src/themes/default/assets/fonts/icons.eot differ diff --git a/src/semantic/src/themes/default/assets/fonts/icons.svg b/src/semantic/src/themes/default/assets/fonts/icons.svg new file mode 100644 index 0000000..8b66187 --- /dev/null +++ b/src/semantic/src/themes/default/assets/fonts/icons.svg @@ -0,0 +1,685 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/semantic/src/themes/default/assets/fonts/icons.ttf b/src/semantic/src/themes/default/assets/fonts/icons.ttf new file mode 100644 index 0000000..f221e50 Binary files /dev/null and b/src/semantic/src/themes/default/assets/fonts/icons.ttf differ diff --git a/src/semantic/src/themes/default/assets/fonts/icons.woff b/src/semantic/src/themes/default/assets/fonts/icons.woff new file mode 100644 index 0000000..6e7483c Binary files /dev/null and b/src/semantic/src/themes/default/assets/fonts/icons.woff differ diff --git a/src/semantic/src/themes/default/assets/fonts/icons.woff2 b/src/semantic/src/themes/default/assets/fonts/icons.woff2 new file mode 100644 index 0000000..7eb74fd Binary files /dev/null and b/src/semantic/src/themes/default/assets/fonts/icons.woff2 differ diff --git a/src/semantic/src/themes/default/assets/images/flags.png b/src/semantic/src/themes/default/assets/images/flags.png new file mode 100644 index 0000000..cdd33c3 Binary files /dev/null and b/src/semantic/src/themes/default/assets/images/flags.png differ diff --git a/src/semantic/src/themes/default/collections/breadcrumb.overrides b/src/semantic/src/themes/default/collections/breadcrumb.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/collections/breadcrumb.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/collections/breadcrumb.variables b/src/semantic/src/themes/default/collections/breadcrumb.variables new file mode 100644 index 0000000..7d7f619 --- /dev/null +++ b/src/semantic/src/themes/default/collections/breadcrumb.variables @@ -0,0 +1,33 @@ +/******************************* + Breadcrumb +*******************************/ + +/*------------------- + Breadcrumb +--------------------*/ + +@verticalMargin: 0em; +@display: inline-block; +@verticalAlign: middle; + +@dividerSpacing: @3px; +@dividerOpacity: 0.7; +@dividerColor: @lightTextColor; + +@dividerSize: @relativeSmall; +@dividerVerticalAlign: baseline; + +@iconDividerSize: @relativeTiny; +@iconDividerVerticalAlign: baseline; + +@sectionMargin: 0em; +@sectionPadding: 0em; + +/* Coupling */ +@segmentPadding: @relativeMini @relativeMedium; + +/*------------------- + States +--------------------*/ + +@activeFontWeight: bold; \ No newline at end of file diff --git a/src/semantic/src/themes/default/collections/form.overrides b/src/semantic/src/themes/default/collections/form.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/collections/form.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/collections/form.variables b/src/semantic/src/themes/default/collections/form.variables new file mode 100644 index 0000000..6ae407b --- /dev/null +++ b/src/semantic/src/themes/default/collections/form.variables @@ -0,0 +1,195 @@ +/******************************* + Form +*******************************/ + +/*------------------- + Elements +--------------------*/ + +/* Form */ +@gutterWidth: 1em; +@rowDistance: 1em; + +/* Text */ +@paragraphMargin: @rowDistance 0em; + +/* Field */ +@fieldMargin: 0em 0em @rowDistance; + +/* Fields */ +@fieldsMargin: 0em -(@gutterWidth / 2) @rowDistance; + +/* Form Label */ +@labelDistance: @4px; +@labelMargin: 0em 0em @labelDistance 0em; +@labelFontSize: @relativeSmall; +@labelFontWeight: bold; +@labelTextTransform: none; +@labelColor: @textColor; + +/* Input */ +@inputFont: @pageFont; +@inputWidth: 100%; +@inputFontSize: 1em; +@inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding; +@inputBorder: 1px solid @borderColor; +@inputBorderRadius: @absoluteBorderRadius; +@inputColor: @textColor; +@inputTransition: + color @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing +; +@inputBoxShadow: 0em 0em 0em 0em transparent inset; + +/* Select */ +@selectBackground: @white; +@selectBorderRadius: @inputBorderRadius; +@selectBorder: @inputBorder; +@selectPadding: 0.62em @inputHorizontalPadding; +@selectBoxShadow: @inputBoxShadow; +@selectTransition: @inputTransition; +@selectColor: @inputColor; + +/* Text Area */ +@textAreaPadding: @inputVerticalPadding @inputHorizontalPadding; +@textAreaHeight: 12em; +@textAreaResize: vertical; +@textAreaLineHeight: 1.2857; +@textAreaMinHeight: 8em; +@textAreaMaxHeight: 24em; +@textAreaBackground: @inputBackground; +@textAreaBorder: @inputBorder; +@textAreaFontSize: @inputFontSize; +@textAreaTransition: @inputTransition; + +/* Checkbox */ +@checkboxVerticalAlign: top; +@checkboxLabelFontSize: 1em; +@checkboxLabelTextTransform: @labelTextTransform; + +/* Inline Validation Prompt */ +@promptBackground: @white; +@promptBorderColor: @formErrorBorder; +@promptBorder: 1px solid @promptBorderColor; +@promptTextColor: @formErrorColor; +@inlinePromptMargin: -0.25em 0em -0.5em 0.5em; +@inlinePromptBorderWidth: 1px; + +/*------------------- + States +--------------------*/ + +/* Focus */ +@inputFocusPointerSize: 0px; + +/* Input Focus */ +@inputFocusBackground: @inputBackground; +@inputFocusBorderColor: @focusedFormBorderColor; +@inputFocusColor: @selectedTextColor; +@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset; +@inputFocusBorderRadius: @inputBorderRadius; + +/* Text Area Focus */ +@textAreaFocusBackground: @inputFocusBackground; +@textAreaFocusBorderColor: @inputFocusBorderColor; +@textAreaFocusColor: @inputFocusColor; +@textAreaFocusBoxShadow: @inputFocusBoxShadow; +@textAreaFocusBorderRadius: @inputFocusBorderRadius; + +/* Disabled */ +@disabledLabelOpacity: @disabledOpacity; + +/* Errored Input */ +@formErrorColor: @negativeTextColor; +@formErrorBorder: @negativeBorderColor; +@formErrorBackground: @negativeBackgroundColor; + +/* AutoFill */ +@inputAutoFillBackground: #FFFFF0; +@inputAutoFillBorder: #E5DFA1; +@inputAutoFillFocusBackground: @inputAutoFillBackground; +@inputAutoFillFocusBorder: #D5C315; +@inputAutoFillErrorBackground: #FFFAF0; +@inputAutoFillErrorBorder: #E0B4B4; + + +/* Input Error */ +@inputErrorBorderRadius: ''; +@inputErrorBoxShadow: none; + +/* Dropdown Error */ +@dropdownErrorHoverBackground: #FBE7E7; +@dropdownErrorSelectedBackground: @dropdownErrorHoverBackground; +@dropdownErrorActiveBackground: #FDCFCF; +@dropdownErrorLabelBackground: #EACBCB; +@dropdownErrorLabelColor: @errorTextColor; + +/* Focused Error */ +@inputErrorFocusBackground: @negativeBackgroundColor; +@inputErrorFocusColor: @negativeTextColor; +@inputErrorFocusBorder: @negativeBorderColor; +@inputErrorFocusBoxShadow: none; + +/* Placeholder Error */ +@inputErrorPlaceholderColor: lighten(@formErrorColor, 40); +@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30); + +/* Loading Dimmer */ +@loaderDimmerColor: rgba(255, 255, 255, 0.8); +@loaderDimmerZIndex: 100; + +/* Loading Spinner */ +@loaderSize: 3em; +@loaderLineZIndex: 101; + +/*------------------- + Types +--------------------*/ + +/* Required */ +@requiredContent: '*'; +@requiredColor: @negativeColor; +@requiredVerticalOffset: -0.2em; +@requiredDistance: 0.2em; +@requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance; + +/* Inverted */ +@invertedInputBackground: @inputBackground; +@invertedInputBorderColor: @whiteBorderColor; +@invertedInputBoxShadow: @inputBoxShadow; +@invertedInputColor: @inputColor; +@invertedLabelColor: @invertedTextColor; +@invertedInputBoxShadow: none; + +/*------------------- + Variations +--------------------*/ + +/* Grouped Fields */ +@groupedMargin: @fieldMargin; +@groupedFieldMargin: 0.5em 0em; + +@groupedLabelDistance: @labelDistance; +@groupedLabelColor: @labelColor; +@groupedLabelMargin: @labelMargin; +@groupedLabelFontSize: @labelFontSize; +@groupedLabelFontWeight: @labelFontWeight; +@groupedLabelTextTransform: @labelTextTransform; + + +/* Inline */ +@inlineInputSize: @relativeMedium; + +@inlineLabelDistance: @relativeTiny; +@inlineLabelColor: @labelColor; +@inlineLabelFontSize: @labelFontSize; +@inlineLabelFontWeight: @labelFontWeight; +@inlineLabelTextTransform: @labelTextTransform; + +@groupedInlineLabelMargin: 0.035714em 1em 0em 0em; + +/*------------------- + Groups +--------------------*/ + +@inlineFieldsMargin: 0em 1em 0em 0em; diff --git a/src/semantic/src/themes/default/collections/grid.overrides b/src/semantic/src/themes/default/collections/grid.overrides new file mode 100644 index 0000000..0e06821 --- /dev/null +++ b/src/semantic/src/themes/default/collections/grid.overrides @@ -0,0 +1,4 @@ +/******************************* + Theme Overrides +*******************************/ + diff --git a/src/semantic/src/themes/default/collections/grid.variables b/src/semantic/src/themes/default/collections/grid.variables new file mode 100644 index 0000000..cdf5956 --- /dev/null +++ b/src/semantic/src/themes/default/collections/grid.variables @@ -0,0 +1,103 @@ +/******************************* + Grid +*******************************/ + +/* Inherited From Site */ + +// @mobileBreakpoint +// @tabletBreakpoint +// @computerBreakpoint +// @largeMonitorBreakpoint +// @widescreenMonitorBreakpoint + +/******************************* + Grid +*******************************/ + +@minWidth: 320px; + +@gutterWidth: 2rem; +@rowSpacing: 2rem; + +@tableWidth: ~"calc(100% + "@gutterWidth~")"; +@columnMaxImageWidth: 100%; + +@consecutiveGridDistance: (@rowSpacing / 2); + +/******************************* + Variations +*******************************/ + +/*-------------- + Relaxed +---------------*/ + +@relaxedGutterWidth: 3rem; +@veryRelaxedGutterWidth: 5rem; + +/*-------------- + Divided +---------------*/ + +@dividedBorder: -1px 0px 0px 0px @borderColor; +@verticallyDividedBorder: 0px -1px 0px 0px @borderColor; + +@dividedInvertedBorder: -1px 0px 0px 0px @whiteBorderColor; +@verticallyDividedInvertedBorder: 0px -1px 0px 0px @whiteBorderColor; + +/*-------------- + Celled +---------------*/ + +@celledMargin: 1em 0em; +@celledWidth: 1px; +@celledBorderColor: @solidBorderColor; + +@celledPadding: 1em; +@celledRelaxedPadding: 1.5em; +@celledVeryRelaxedPadding: 2em; + +@celledGridDivider: 0px 0px 0px @celledWidth @celledBorderColor; +@celledRowDivider: 0px (-@celledWidth) 0px 0px @celledBorderColor; +@celledColumnDivider: (-@celledWidth) 0px 0px 0px @celledBorderColor; + + +/*-------------- + Stackable +---------------*/ + +@stackableRowSpacing: @rowSpacing; +@stackableGutter: @gutterWidth; +@stackableMobileBorder: 1px solid @borderColor; +@stackableInvertedMobileBorder: 1px solid @whiteBorderColor; + + +/******************************* + Legacy +*******************************/ + +/*-------------- + Page +---------------*/ + +/* Legacy (DO NOT USE) + */ +@mobileWidth: auto; +@mobileMargin: 0em; +@mobileGutter: 0em; + +@tabletWidth: auto; +@tabletMargin: 0em; +@tabletGutter: 2em; + +@computerWidth: auto; +@computerMargin: 0em; +@computerGutter: 3%; + +@largeMonitorWidth: auto; +@largeMonitorMargin: 0em; +@largeMonitorGutter: 15%; + +@widescreenMonitorWidth: auto; +@widescreenMargin: 0em; +@widescreenMonitorGutter: 23%; \ No newline at end of file diff --git a/src/semantic/src/themes/default/collections/menu.overrides b/src/semantic/src/themes/default/collections/menu.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/collections/menu.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/collections/menu.variables b/src/semantic/src/themes/default/collections/menu.variables new file mode 100644 index 0000000..2e4bb79 --- /dev/null +++ b/src/semantic/src/themes/default/collections/menu.variables @@ -0,0 +1,458 @@ +/******************************* + Menu +*******************************/ + +/*------------------- + Collection +--------------------*/ + +/* Menu */ +@verticalMargin: @medium; +@horizontalMargin: 0em; +@margin: @verticalMargin @horizontalMargin; +@background: #FFFFFF; +@fontFamily: @pageFont; +@itemBackground: none; +@fontWeight: normal; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; +@boxShadow: @subtleShadow; +@borderRadius: @defaultBorderRadius; +@minHeight: (@itemVerticalPadding * 2) + 1em; + +/* Menu Item */ +@itemVerticalPadding: @relativeSmall; +@itemHorizontalPadding: @relativeLarge; +@itemTextTransform: none; +@itemTransition: + background @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing +; +@itemFontWeight: normal; +@itemTextColor: @textColor; + +/* Divider */ +@dividerSize: 1px; +@dividerBackground: @internalBorderColor; + +/* Sub Menu */ +@subMenuDistance: 0.5em; +@subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0em; +@subMenuFontSize: @relativeTiny; +@subMenuTextColor: rgba(0, 0, 0, 0.5); + +@subMenuIndent: 0em; +@subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent; +@subMenuVerticalPadding: 0.5em; + +/* Text Item */ +@textLineHeight: 1.3; + +/*-------------- + Elements +---------------*/ + +/* Icon */ +@iconFloat: none; +@iconMargin: 0em @relative5px 0em 0em; +@iconOpacity: 0.9; + +/* Dropdown Icon */ +@dropdownIconFloat: right; +@dropdownIconDistance: 1em; + +/* Header */ +@headerBackground: ''; +@headerWeight: bold; +@headerTextTransform: normal; + +/* Vertical Icon */ +@verticalIconFloat: right; +@verticalIconMargin: 0em 0em 0em 0.5em; + +/* Vertical Header */ +@verticalHeaderMargin: 0em 0em 0.5em; +@verticalHeaderFontSize: @relativeMedium; +@verticalHeaderFontWeight: bold; + +/* Pointing Arrow */ +@arrowSize: @relative8px; +@arrowBorderWidth: 1px; +@arrowBorder: @arrowBorderWidth solid @solidBorderColor; +@arrowTransition: background @defaultDuration @defaultEasing; +@arrowZIndex: 2; + +@arrowHoverColor: #F2F2F2; +@arrowActiveColor: @arrowHoverColor; +@arrowActiveHoverColor: @arrowActiveColor; + +@arrowVerticalHoverColor: @arrowHoverColor; +@arrowVerticalActiveColor: @arrowActiveColor; +@arrowVerticalSubMenuColor: @white; + +/*-------------- + Couplings +---------------*/ + +/* Button */ +@buttonSize: @relativeMedium; +@buttonOffset: 0em; +@buttonMargin: -0.5em 0em; +@buttonVerticalPadding: @relativeMini; + +/* Input */ +@inputSize: @relativeMedium; +@inputVerticalMargin: -0.5em; +@inputOffset: 0em; +@inputVerticalPadding: @relative8px; + +/* Image */ +@imageMargin: -0.3em 0em; +@imageWidth: 2.5em; +@verticalImageWidth: auto; + +/* Label */ +@labelOffset: -0.15em; +@labelBackground: #999999; +@labelTextColor: @white; + +@labelTextMargin: 1em; +@labelVerticalPadding: 0.3em; +@labelHorizontalPadding: @relativeMini; + +@labelAndIconFloat: none; +@labelAndIconMargin: 0em 0.5em 0em 0em; + +/* Dropdown in Menu */ +@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + +@dropdownBackground: #FFFFFF; +@dropdownMenuDistance: 0em; +@dropdownMenuBorderRadius: @borderRadius; + +@dropdownItemFontSize: @relativeMedium; +@dropdownItemPadding: @relativeMini @relativeLarge; +@dropdownItemBackground: transparent; +@dropdownItemColor: @textColor; +@dropdownItemTextTransform: none; +@dropdownItemFontWeight: normal; +@dropdownItemBoxShadow: none; +@dropdownItemTransition: none; + +@dropdownItemIconFloat: none; +@dropdownItemIconFontSize: @relativeMedium; +@dropdownItemIconMargin: 0em 0.75em 0em 0em; + +@dropdownHoveredItemBackground: @transparentBlack; +@dropdownHoveredItemColor: @selectedTextColor; + +/* Dropdown Variations */ +@dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); +@secondaryDropdownMenuDistance: @relative5px; +@pointingDropdownMenuDistance: 0.75em; +@invertedSelectionDropdownColor: @invertedTextColor; + +/*-------------- + States +---------------*/ + +/* Hovered Item */ +@hoverItemBackground: @subtleTransparentBlack; +@hoverItemTextColor: @selectedTextColor; + +/* Pressed Item */ +@pressedItemBackground: @subtleTransparentBlack; +@pressedItemTextColor: @hoverItemTextColor; + + +/* Active Item */ +@activeItemBackground: @transparentBlack; +@activeItemTextColor: @selectedTextColor; +@activeItemFontWeight: normal; +@activeIconOpacity: 1; +@activeItemBoxShadow: none; + +/* Active Hovered Item */ +@activeHoverItemBackground: @transparentBlack; +@activeHoverItemColor: @selectedTextColor; + +/* Selected Dropdown */ +@dropdownSelectedItemBackground: @transparentBlack; +@dropdownSelectedItemColor: @selectedTextColor; + +/* Active Dropdown */ +@dropdownActiveItemBackground: @subtleTransparentBlack; +@dropdownActiveItemColor: @selectedTextColor; +@dropdownActiveItemFontWeight: bold; + +/* Active Sub Menu */ +@subMenuActiveBackground: transparent; +@subMenuActiveTextColor: @activeItemTextColor; +@subMenuActiveFontWeight: bold; + + +/*-------------- + Types +---------------*/ + +/* Vertical */ +@verticalBoxShadow: @boxShadow; +@verticalPointerWidth: 2px; +@verticalBackground: #FFFFFF; +@verticalItemBackground: none; +@verticalDividerBackground: @dividerBackground; + +@verticalActiveBoxShadow: none; + + +/* Secondary */ +@secondaryBackground: none; +@secondaryMargin: 0em -@secondaryItemSpacing; +@secondaryItemBackground: none; +@secondaryItemSpacing: @relative5px; +@secondaryItemMargin: 0em @secondaryItemSpacing; +@secondaryItemVerticalPadding: @relativeMini; +@secondaryItemHorizontalPadding: @relativeSmall; +@secondaryItemPadding: @relativeMini @relativeSmall; +@secondaryItemBorderRadius: @defaultBorderRadius; +@secondaryItemTransition: color @defaultDuration @defaultEasing; +@secondaryItemColor: @unselectedTextColor; + +@secondaryHoverItemBackground: @transparentBlack; +@secondaryHoverItemColor: @selectedTextColor; + +@secondaryActiveItemBackground: @transparentBlack; +@secondaryActiveItemColor: @selectedTextColor; +@secondaryActiveHoverItemBackground: @transparentBlack; +@secondaryActiveHoverItemColor: @selectedTextColor; + +@secondaryActiveHoveredItemBackground: @transparentBlack; +@secondaryActiveHoveredItemColor: @selectedTextColor; + +@secondaryHeaderBackground: none transparent; +@secondaryHeaderBorder: none; + +@secondaryItemVerticalSpacing: @secondaryItemSpacing; +@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing; +@secondaryVerticalItemBorderRadius: @defaultBorderRadius; + +@secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding; +@secondaryMenuSubMenuItemMargin: 0em; +@secondarySubMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent; +@secondaryMenuSubMenuItemPadding: @relative7px @secondarySubMenuHorizontalPadding; + +/* Pointing */ +@secondaryPointingBorderWidth: 2px; +@secondaryPointingBorderColor: @borderColor; +@secondaryPointingItemVerticalPadding: @relativeTiny; +@secondaryPointingItemHorizontalPadding: @relativeLarge; + +@secondaryPointingHoverTextColor: @textColor; + +@secondaryPointingActiveBorderColor: @black; +@secondaryPointingActiveTextColor: @selectedTextColor; +@secondaryPointingActiveFontWeight: bold; + +@secondaryPointingActiveDropdownBorderColor: transparent; + +@secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor; +@secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor; + +@secondaryPointingHeaderColor: @darkTextColor; +@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em; + + +/* Inverted Secondary */ +@secondaryInvertedColor: @invertedLightTextColor; + +@secondaryInvertedHoverBackground: @transparentWhite; +@secondaryInvertedHoverColor: @invertedSelectedTextColor; + +@secondaryInvertedActiveBackground: @strongTransparentWhite; +@secondaryInvertedActiveColor: @invertedSelectedTextColor; + +/* Inverted Pointing */ +@secondaryPointingInvertedBorderColor: @whiteBorderColor; +@secondaryPointingInvertedItemTextColor: @invertedTextColor; +@secondaryPointingInvertedItemHeaderColor: @white; +@secondaryPointingInvertedItemHoverTextColor: @selectedTextColor; +@secondaryPointingInvertedActiveBorderColor: @white; +@secondaryPointingInvertedActiveColor: @invertedSelectedTextColor; + + +/* Tiered */ +@tieredActiveItemBackground: #FCFCFC; +@tieredActiveMenuBackground: #FCFCFC; + +@tieredSubMenuTextTransform: normal; +@tieredSubMenuFontWeight: normal; + +@tieredSubMenuColor: @lightTextColor; + +@tieredSubMenuHoverBackground: none transparent; +@tieredSubMenuHoverColor: @hoveredTextColor; + +@tieredSubMenuActiveBackground: none transparent; +@tieredSubMenuActiveColor: @selectedTextColor; + +@tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2); + + +/* Icon */ +@iconMenuTextAlign: center; +@iconMenuItemColor: @black; +@iconMenuInvertedItemColor: @white; + + +/* Tabular */ +@tabularBorderColor: @solidBorderColor; +@tabularBackgroundColor: transparent; +@tabularBackground: none @tabularBackgroundColor; +@tabularBorderWidth: 1px; +@tabularOppositeBorderWidth: @tabularBorderWidth + 1px; +@tabularVerticalPadding: @itemVerticalPadding; +@tabularHorizontalPadding: @relativeHuge; +@tabularBorderRadius: @defaultBorderRadius; +@tabularTextColor: @itemTextColor; + +@tabularHoveredTextColor: @hoveredTextColor; + +@tabularVerticalBackground: none @tabularBackgroundColor; + +@tabularFluidOffset: 1px; +@tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")"; + +@tabularActiveBackground: none @white; +@tabularActiveColor: @selectedTextColor; +@tabularActiveBoxShadow: none; +@tabularActiveWeight: bold; + + + +/* Pagination */ +@paginationMinWidth: 3em; +@paginationActiveBackground: @transparentBlack; +@paginationActiveTextColor: @selectedTextColor; + +/* Labeled Icon */ +@labeledIconItemHorizontalPadding: @relativeMassive; +@labeledIconSize: @relativeMassive; +@labeledIconMinWidth: 6em; +@labeledIconTextMargin: 0.5rem; + + +/* Text */ +@textMenuItemSpacing: @relative7px; +@textMenuMargin: @relativeMedium -(@textMenuItemSpacing); +@textMenuItemColor: @mutedTextColor; +@textMenuItemFontWeight: normal; +@textMenuItemMargin: 0em 0em; +@textMenuItemPadding: @relative5px @textMenuItemSpacing; +@textMenuItemTransition: opacity @defaultDuration @defaultEasing; + +@textMenuSubMenuMargin: 0em; +@textMenuSubMenuItemMargin: 0em; +@textMenuSubMenuItemPadding: @relative7px 0em; + +@textMenuActiveItemFontWeight: normal; +@textMenuActiveItemColor: @selectedTextColor; + +@textMenuHeaderSize: @relativeSmall; +@textMenuHeaderColor: @darkTextColor; +@textMenuHeaderFontWeight: bold; +@textMenuHeaderTextTransform: uppercase; + +@textVerticalMenuMargin: @relativeMedium 0em; +@textVerticalMenuHeaderMargin: @relative8px 0em @relative10px; +@textVerticalMenuItemMargin: @relative8px 0em; + +@textVerticalMenuIconFloat: none; +@textVerticalMenuIconMargin: @iconMargin; + + +/*-------------- + Variations +---------------*/ + +/* Inverted */ +@invertedBackground: @black; +@invertedBoxShadow: none; +@invertedBorder: 0px solid transparent; +@invertedHeaderBackground: transparent; + +@invertedItemBackground: transparent; +@invertedItemTextColor: @invertedTextColor; + +/* Inverted Sub Menu */ +@invertedSubMenuBackground: transparent; +@invertedSubMenuColor: @invertedUnselectedTextColor; + +/* Inverted Hover */ +@invertedHoverBackground: @transparentWhite; +@invertedHoverColor: @invertedSelectedTextColor; + +@invertedSubMenuHoverBackground: transparent; +@invertedSubMenuHoverColor: @invertedSelectedTextColor; + +/* Pressed */ +@invertedMenuPressedBackground: @transparentWhite; +@invertedMenuPressedColor: @invertedSelectedTextColor; + +/* Inverted Active */ +@invertedActiveBackground: @strongTransparentWhite; +@invertedActiveColor: @invertedSelectedTextColor; +@invertedArrowActiveColor: #3D3E3F; + +/* Inverted Active Hover */ +@invertedActiveHoverBackground: @invertedActiveBackground; +@invertedActiveHoverColor: @white; +@invertedArrowActiveHoverColor: @invertedArrowActiveColor; + +@invertedSubMenuActiveBackground: transparent; +@invertedSubMenuActiveColor: @white; + +/* Inverted Menu Divider */ +@invertedDividerBackground: rgba(255, 255, 255, 0.08); +@invertedVerticalDividerBackground: @invertedDividerBackground; + +/* Inverted Colored */ +@invertedColoredDividerBackground: @dividerBackground; +@invertedColoredActiveBackground: @strongTransparentBlack; + +/* Fixed */ +@fixedPrecedingGridMargin: 2.75rem; + +/* Floated */ +@floatedDistance: 0.5rem; + +/* Attached */ +@attachedTopOffset: 0px; +@attachedBottomOffset: 0px; +@attachedHorizontalOffset: -@borderWidth; +@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")"; +@attachedBoxShadow: none; +@attachedBorder: @borderWidth solid @solidBorderColor; +@attachedBottomBoxShadow: + @boxShadow, + @attachedBoxShadow +; + +/* Resize large sizes */ +@mini: @11px; +@tiny: @12px; +@small: @13px; +@large: @15px; +@huge: @16px; +@big: @17px; +@massive: @18px; + +/* Sizes */ +@miniWidth: 9rem; +@tinyWidth: 11rem; +@smallWidth: 13rem; +@mediumWidth: 15rem; +@largeWidth: 18rem; +@hugeWidth: 20rem; +@bigWidth: 22rem; +@massiveWidth: 25rem; diff --git a/src/semantic/src/themes/default/collections/message.overrides b/src/semantic/src/themes/default/collections/message.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/collections/message.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/collections/message.variables b/src/semantic/src/themes/default/collections/message.variables new file mode 100644 index 0000000..d2083cf --- /dev/null +++ b/src/semantic/src/themes/default/collections/message.variables @@ -0,0 +1,158 @@ +/******************************* + Message +*******************************/ + +// @textColor + +/*------------------- + Elements +--------------------*/ + +@verticalMargin: 1em; +@verticalPadding: 1em; +@horizontalPadding: 1.5em; +@padding: @verticalPadding @horizontalPadding; +@background: #F8F8F9; +@lineHeightOffset: ((@lineHeight - 1em) / 2); + +@borderRadius: @defaultBorderRadius; +@borderWidth: 1px; +@borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset; +@shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); +@boxShadow: + @borderShadow, + @shadowShadow +; + +@transition: + opacity @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + background @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing +; + +/* Header */ +@headerFontSize: @relativeLarge; +@headerFontWeight: bold; +@headerDisplay: block; +@headerDistance: 0rem; +@headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em; +@headerParagraphDistance: 0.25em; + +/* Paragraph */ +@messageTextOpacity: 0.85; +@messageParagraphMargin: 0.75em; + +/* List */ +@listOpacity: 0.85; +@listStylePosition: inside; +@listMargin: 0.5em; +@listItemIndent: 1em; +@listItemMargin: 0.3em; + +/* Icon */ +@iconDistance: 0.6em; + +/* Close Icon */ +@closeTopDistance: @verticalPadding - @lineHeightOffset; +@closeRightDistance: 0.5em; +@closeOpacity: 0.7; +@closeTransition: opacity @defaultDuration @defaultEasing; + + +/*------------------- + Types +--------------------*/ + +/* Icon Message */ +@iconSize: 3em; +@iconOpacity: 0.8; +@iconContentDistance: 0rem; +@iconVerticalAlign: middle; + +/* Attached */ +@attachedXOffset: -1px; +@attachedYOffset: -1px; +@attachedBoxShadow: 0em 0em 0em @borderWidth @borderColor inset; +@attachedBottomBoxShadow: + @attachedBoxShadow, + @subtleShadow +; + +/* Floating */ +@floatingBoxShadow: + @borderShadow, + @floatingShadow +; + +/* Colors */ +@redBoxShadow: + 0px 0px 0px @borderWidth @redBorderColor inset, + @shadowShadow +; +@orangeBoxShadow: + 0px 0px 0px @borderWidth @orangeBorderColor inset, + @shadowShadow +; +@yellowBoxShadow: + 0px 0px 0px @borderWidth @yellowBorderColor inset, + @shadowShadow +; +@oliveBoxShadow: + 0px 0px 0px @borderWidth @oliveBorderColor inset, + @shadowShadow +; +@greenBoxShadow: + 0px 0px 0px @borderWidth @greenBorderColor inset, + @shadowShadow +; +@tealBoxShadow: + 0px 0px 0px @borderWidth @tealBorderColor inset, + @shadowShadow +; +@blueBoxShadow: + 0px 0px 0px @borderWidth @blueBorderColor inset, + @shadowShadow +; +@violetBoxShadow: + 0px 0px 0px @borderWidth @violetBorderColor inset, + @shadowShadow +; +@purpleBoxShadow: + 0px 0px 0px @borderWidth @purpleBorderColor inset, + @shadowShadow +; +@pinkBoxShadow: + 0px 0px 0px @borderWidth @pinkBorderColor inset, + @shadowShadow +; +@brownBoxShadow: + 0px 0px 0px @borderWidth @brownBorderColor inset, + @shadowShadow +; + +/* Warning / Positive / Negative / Info */ +@positiveBoxShadow: + 0px 0px 0px @borderWidth @positiveBorderColor inset, + @shadowShadow +; +@negativeBoxShadow: + 0px 0px 0px @borderWidth @negativeBorderColor inset, + @shadowShadow +; +@infoBoxShadow: + 0px 0px 0px @borderWidth @infoBorderColor inset, + @shadowShadow +; +@warningBoxShadow: + 0px 0px 0px @borderWidth @warningBorderColor inset, + @shadowShadow +; +@errorBoxShadow: + 0px 0px 0px @borderWidth @errorBorderColor inset, + @shadowShadow +; +@successBoxShadow: + 0px 0px 0px @borderWidth @successBorderColor inset, + @shadowShadow +; diff --git a/src/semantic/src/themes/default/collections/table.overrides b/src/semantic/src/themes/default/collections/table.overrides new file mode 100644 index 0000000..e69de29 diff --git a/src/semantic/src/themes/default/collections/table.variables b/src/semantic/src/themes/default/collections/table.variables new file mode 100644 index 0000000..4660f6c --- /dev/null +++ b/src/semantic/src/themes/default/collections/table.variables @@ -0,0 +1,246 @@ +/******************************* + Table +*******************************/ + +/*------------------- + Element +--------------------*/ + +@verticalMargin: 1em; +@horizontalMargin: 0em; +@margin: @verticalMargin @horizontalMargin; +@borderCollapse: separate; +@borderSpacing: 0px; +@borderRadius: @defaultBorderRadius; +@transition: + background @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing +; +@background: @white; +@color: @textColor; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; +@boxShadow: none; +@textAlign: left; + +/*-------------- + Parts +---------------*/ + +/* Table Row */ +@rowBorder: 1px solid @internalBorderColor; + +/* Table Cell */ +@cellVerticalPadding: @relativeMini; +@cellHorizontalPadding: @relativeMini; +@cellVerticalAlign: inherit; +@cellTextAlign: inherit; +@cellBorder: 1px solid @internalBorderColor; + +/* Table Header */ +@headerBorder: 1px solid @internalBorderColor; +@headerDivider: none; +@headerBackground: @offWhite; +@headerAlign: inherit; +@headerVerticalAlign: inherit; +@headerColor: @textColor; +@headerVerticalPadding: @relativeSmall; +@headerHorizontalPadding: @cellHorizontalPadding; +@headerFontStyle: none; +@headerFontWeight: bold; +@headerTextTransform: none; +@headerBoxShadow: none; + +/* Table Footer */ +@footerBoxShadow: none; +@footerBorder: 1px solid @borderColor; +@footerDivider: none; +@footerBackground: @offWhite; +@footerAlign: inherit; +@footerVerticalAlign: middle; +@footerColor: @textColor; +@footerVerticalPadding: @cellVerticalPadding; +@footerHorizontalPadding: @cellHorizontalPadding; +@footerFontStyle: normal; +@footerFontWeight: normal; +@footerTextTransform: none; + +/* Responsive Size */ +@responsiveHeaderDisplay: block; +@responsiveFooterDisplay: block; +@responsiveRowVerticalPadding: 1em; +@responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; +@responsiveCellVerticalPadding: 0.25em; +@responsiveCellHorizontalPadding: 0.75em; +@responsiveCellBoxShadow: none !important; + +/*------------------- + Types +--------------------*/ + +/* Definition */ +@definitionPageBackground: @white; + +@definitionHeaderBackground: transparent; +@definitionHeaderColor: @unselectedTextColor; +@definitionHeaderFontWeight: normal; + +@definitionFooterBackground: @definitionHeaderBackground; +@definitionFooterColor: @definitionHeaderColor; +@definitionFooterFontWeight: @definitionHeaderFontWeight; + +@definitionColumnBackground: @subtleTransparentBlack; +@definitionColumnFontWeight: bold; +@definitionColumnColor: @selectedTextColor; +@definitionColumnFontSize: @relativeMedium; +@definitionColumnTextTransform: ''; +@definitionColumnBoxShadow: ''; +@definitionColumnTextAlign: ''; +@definitionColumnHorizontalPadding: ''; + + +/*-------------- + Couplings +---------------*/ + +@iconVerticalAlign: baseline; + +/*-------------- + States +---------------*/ + +@stateMarkerWidth: 0px; + +/* Positive */ +@positiveColor: @positiveTextColor; +@positiveBoxShadow: @stateMarkerWidth 0px 0px @positiveBorderColor inset; +@positiveBackgroundHover: darken(@positiveBackgroundColor, 3); +@positiveColorHover: darken(@positiveColor, 3); + +/* Negative */ +@negativeColor: @negativeTextColor; +@negativeBoxShadow: @stateMarkerWidth 0px 0px @negativeBorderColor inset; +@negativeBackgroundHover: darken(@negativeBackgroundColor, 3); +@negativeColorHover: darken(@negativeColor, 3); + +/* Error */ +@errorColor: @errorTextColor; +@errorBoxShadow: @stateMarkerWidth 0px 0px @errorBorderColor inset; +@errorBackgroundHover: darken(@errorBackgroundColor, 3); +@errorColorHover: darken(@errorColor, 3); + +/* Warning */ +@warningColor: @warningTextColor; +@warningBoxShadow: @stateMarkerWidth 0px 0px @warningBorderColor inset; +@warningBackgroundHover: darken(@warningBackgroundColor, 3); +@warningColorHover: darken(@warningColor, 3); + +/* Active */ +@activeColor: @textColor; +@activeBackgroundColor: #E0E0E0; +@activeBoxShadow: @stateMarkerWidth 0px 0px @activeColor inset; + +@activeBackgroundHover: #EFEFEF; +@activeColorHover: @selectedTextColor; + +/*-------------- + Types +---------------*/ + +/* Attached */ +@attachedTopOffset: 0px; +@attachedBottomOffset: 0px; +@attachedHorizontalOffset: -@borderWidth; +@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")"; +@attachedBoxShadow: none; +@attachedBorder: @borderWidth solid @solidBorderColor; +@attachedBottomBoxShadow: + @boxShadow, + @attachedBoxShadow +; + +/* Striped */ +@stripedBackground: rgba(0, 0, 50, 0.02); +@invertedStripedBackground: rgba(255, 255, 255, 0.05); + +/* Selectable */ +@selectableBackground: @transparentBlack; +@selectableTextColor: @selectedTextColor; +@selectableInvertedBackground: @transparentWhite; +@selectableInvertedTextColor: @invertedSelectedTextColor; + +/* Sortable */ +@sortableBackground: ''; +@sortableColor: @textColor; + +@sortableBorder: 1px solid @borderColor; +@sortableIconWidth: auto; +@sortableIconDistance: 0.5em; +@sortableIconOpacity: 0.8; +@sortableIconFont: 'Icons'; +@sortableIconAscending: '\f0d8'; +@sortableIconDescending: '\f0d7'; +@sortableDisabledColor: @disabledTextColor; + +@sortableHoverBackground: @transparentBlack; +@sortableHoverColor: @hoveredTextColor; + +@sortableActiveBackground: @transparentBlack; +@sortableActiveColor: @selectedTextColor; + +@sortableActiveHoverBackground: @transparentBlack; +@sortableActiveHoverColor: @selectedTextColor; + +@sortableInvertedBorderColor: transparent; +@sortableInvertedHoverBackground: @transparentWhite @subtleGradient; +@sortableInvertedHoverColor: @invertedHoveredTextColor; +@sortableInvertedActiveBackground: @strongTransparentWhite @subtleGradient; +@sortableInvertedActiveColor: @invertedSelectedTextColor; + +/* Colors */ +@coloredBorderSize: 0.2em; +@coloredBorderRadius: 0em 0em @borderRadius @borderRadius; + +/* Inverted */ +@invertedBackground: #333333; +@invertedBorder: none; +@invertedCellBorderColor: @whiteBorderColor; +@invertedCellColor: @invertedTextColor; + +@invertedHeaderBackground: @veryStrongTransparentBlack; +@invertedHeaderColor: @invertedTextColor; +@invertedHeaderBorderColor: @invertedCellBorderColor; + +@invertedDefinitionColumnBackground: @subtleTransparentWhite; +@invertedDefinitionColumnColor: @invertedSelectedTextColor; +@invertedDefinitionColumnFontWeight: bold; + +/* Basic */ +@basicTableBackground: transparent; +@basicTableBorder: @borderWidth solid @borderColor; +@basicBoxShadow: none; + +@basicTableHeaderBackground: transparent; +@basicTableCellBackground: transparent; +@basicTableHeaderDivider: none; +@basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1); +@basicTableCellPadding: ''; +@basicTableStripedBackground: @transparentBlack; + +/* Padded */ +@paddedVerticalPadding: 1em; +@paddedHorizontalPadding: 1em; +@veryPaddedVerticalPadding: 1.5em; +@veryPaddedHorizontalPadding: 1.5em; + +/* Compact */ +@compactVerticalPadding: 0.5em; +@compactHorizontalPadding: 0.7em; +@veryCompactVerticalPadding: 0.4em; +@veryCompactHorizontalPadding: 0.6em; + + +/* Sizes */ +@small: 0.9em; +@medium: 1em; +@large: 1.1em; diff --git a/src/semantic/src/themes/default/elements/button.overrides b/src/semantic/src/themes/default/elements/button.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/button.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/button.variables b/src/semantic/src/themes/default/elements/button.variables new file mode 100644 index 0000000..96c00aa --- /dev/null +++ b/src/semantic/src/themes/default/elements/button.variables @@ -0,0 +1,358 @@ +/******************************* + Button +*******************************/ + +/*------------------- + Element +--------------------*/ + +/* Button */ +@verticalMargin: 0em; +@horizontalMargin: 0.25em; +@backgroundColor: #E0E1E2; +@backgroundImage: none; +@background: @backgroundColor @backgroundImage; +@lineHeight: 1em; + +/* Button defaults to using same height as input globally */ +@verticalPadding: @inputVerticalPadding; +@horizontalPadding: 1.5em; + +/* Text */ +@textTransform: none; +@tapColor: transparent; +@fontFamily: @pageFont; +@fontWeight: bold; +@textColor: rgba(0, 0, 0, 0.6); +@textShadow: none; +@invertedTextShadow: @textShadow; +@borderRadius: @defaultBorderRadius; +@verticalAlign: baseline; + +/* Internal Shadow */ +@shadowDistance: 0em; +@shadowOffset: (@shadowDistance / 2); +@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset; + +/* Box Shadow */ +@borderBoxShadowColor: transparent; +@borderBoxShadowWidth: 1px; +@borderBoxShadow: 0px 0px 0px @borderBoxShadowWidth @borderBoxShadowColor inset; +@boxShadow: + @borderBoxShadow, + @shadowBoxShadow +; + +/* Icon */ +@iconHeight: @relativeTiny; +@iconOpacity: 0.8; +@iconDistance: @relative6px; +@iconColor: ''; +@iconTransition: opacity @defaultDuration @defaultEasing; +@iconVerticalAlign: ''; + +@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); +@rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance; + +/* Loader */ +@invertedLoaderFillColor: rgba(0, 0, 0, 0.15); + +@transition: + opacity @defaultDuration @defaultEasing, + background-color @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing, + background @defaultDuration @defaultEasing +; +/* +@willChange: box-shadow, transform, opacity, color, background; +*/ +@willChange: ''; + +/*------------------- + Group +--------------------*/ + +@groupBoxShadow: none; +@groupButtonBoxShadow: @boxShadow; +@verticalBoxShadow: none; +@groupButtonOffset: 0px 0px 0px 0px; +@verticalGroupOffset: 0px 0px 0px 0px; + +/*------------------- + States +--------------------*/ + +/* Hovered */ +@hoverBackgroundColor: #CACBCD; +@hoverBackgroundImage: @backgroundImage; +@hoverBoxShadow: @boxShadow; +@hoverColor: @hoveredTextColor; +@iconHoverOpacity: 0.85; + +/* Focused */ +@focusBackgroundColor: @hoverBackgroundColor; +@focusBackgroundImage: ''; +@focusBoxShadow: ''; +@focusColor: @hoveredTextColor; +@iconFocusOpacity: 0.85; + +/* Disabled */ +@disabledBackgroundImage: none; +@disabledBoxShadow: none; + +/* Pressed Down */ +@downBackgroundColor: #BABBBC; +@downBackgroundImage: ''; +@downPressedShadow: none; +@downBoxShadow: + @borderBoxShadow, + @downPressedShadow +; +@downColor: @pressedTextColor; + +/* Active */ +@activeBackgroundColor: #C0C1C2; +@activeBackgroundImage: none; +@activeColor: @selectedTextColor; +@activeBoxShadow: @borderBoxShadow; + +/* Active + Hovered */ +@activeHoverBackgroundColor: @activeBackgroundColor; +@activeHoverBackgroundImage: none; +@activeHoverColor: @activeColor; +@activeHoverBoxShadow: @activeBoxShadow; + +/* Loading */ +@loadingOpacity: 1; +@loadingPointerEvents: auto; +@loadingTransition: + all 0s linear, + opacity @defaultDuration @defaultEasing +; + +/*------------------- + Types +--------------------*/ + +/* Or */ +@orText: 'or'; + +@orGap: 0.3em; +@orHeight: (@verticalPadding * 2) + 1em; +@orZIndex: 3; + +@orCircleDistanceToEdge: (@verticalPadding); +@orCircleSize: @orHeight - @orCircleDistanceToEdge; +@orLineHeight: (@orCircleSize); +@orBoxShadow: @borderBoxShadow; + +@orVerticalOffset: -(@orCircleSize / 2); +@orHorizontalOffset: -(@orCircleSize / 2); + +@orBackgroundColor: @white; +@orTextShadow: @invertedTextShadow; +@orTextStyle: normal; +@orTextWeight: bold; +@orTextColor: @lightTextColor; + + +@orSpacerHeight: @verticalPadding; +@orSpacerColor: transparent; + +/* Icon */ +@iconButtonOpacity: 0.9; + +/* Labeled */ +@labeledLabelFontSize: @medium; +@labeledLabelAlign: center; +@labeledLabelPadding: ''; +@labeledLabelFontSize: @relativeMedium; +@labeledLabelBorderColor: @borderColor; +@labeledLabelBorderOffset: -@borderBoxShadowWidth; +@labeledTagLabelSize: 1.85em; /* hypotenuse of triangle */ +@labeledIconMargin: 0em; + +/* Labeled Icon */ +@labeledIconWidth: 1em + (@verticalPadding * 2); +@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05); +@labeledIconPadding: (@horizontalPadding + @labeledIconWidth); +@labeledIconBorder: transparent; +@labeledIconColor: ''; + +@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset; +@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset; + + +/* Inverted */ +@invertedBorderSize: 2px; +@invertedTextColor: @white; +@invertedTextHoverColor: @hoverColor; +@invertedGroupButtonOffset: 0px 0px 0px -(@invertedBorderSize); +@invertedVerticalGroupButtonOffset: 0px 0px -(@invertedBorderSize) 0px; + +/* Basic */ +@basicBorderRadius: @borderRadius; +@basicBorderSize: 1px; +@basicTextColor: @textColor; +@basicColoredBorderSize: 1px; + +@basicBackground: transparent none; +@basicFontWeight: normal; +@basicBorder: 1px solid @borderColor; +@basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset; +@basicLoadingColor: @offWhite; +@basicTextTransform: none; + +/* Basic Hover */ +@basicHoverBackground: #FFFFFF; +@basicHoverTextColor: @hoveredTextColor; +@basicHoverBoxShadow: + 0px 0px 0px @basicBorderSize @selectedBorderColor inset, + 0px 0px 0px 0px @borderColor inset +; +/* Basic Focus */ +@basicFocusBackground: @basicHoverBackground; +@basicFocusTextColor: @basicHoverTextColor; +@basicFocusBoxShadow: @basicHoverBoxShadow; + +/* Basic Down */ +@basicDownBackground: #F8F8F8; +@basicDownTextColor: @pressedTextColor; +@basicDownBoxShadow: + 0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset, + 0px 1px 4px 0px @borderColor inset +; +/* Basic Active */ +@basicActiveBackground: @transparentBlack; +@basicActiveBoxShadow: ''; +@basicActiveTextColor: @selectedTextColor; + +/* Basic Inverted */ +@basicInvertedBackground: transparent; +@basicInvertedFocusBackground: transparent; +@basicInvertedDownBackground: @transparentWhite; +@basicInvertedActiveBackground: @transparentWhite; + +@basicInvertedBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.5) inset; +@basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset; +@basicInvertedFocusBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset; +@basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.9) inset; +@basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.7) inset; + +@basicInvertedColor: @darkWhite; +@basicInvertedHoverColor: @darkWhiteHover; +@basicInvertedDownColor: @darkWhiteActive; +@basicInvertedActiveColor: @invertedTextColor; + + +/* Basic Group */ +@basicGroupBorder: @basicBorderSize solid @borderColor; +@basicGroupBoxShadow: none; + +/*------------------- + Variations +--------------------*/ + +/* Colors */ +@coloredBackgroundImage: none; +@coloredBoxShadow: @shadowBoxShadow; + +/* Colored */ +@brownTextColor: @invertedTextColor; +@brownTextShadow: @invertedTextShadow; +@redTextColor: @invertedTextColor; +@redTextShadow: @invertedTextShadow; +@orangeTextColor: @invertedTextColor; +@orangeTextShadow: @invertedTextShadow; +@greenTextColor: @invertedTextColor; +@greenTextShadow: @invertedTextShadow; +@blueTextColor: @invertedTextColor; +@blueTextShadow: @invertedTextShadow; +@violetTextColor: @invertedTextColor; +@violetTextShadow: @invertedTextShadow; +@purpleTextColor: @invertedTextColor; +@purpleTextShadow: @invertedTextShadow; +@pinkTextColor: @invertedTextColor; +@pinkTextShadow: @invertedTextShadow; +@blackTextColor: @invertedTextColor; +@blackTextShadow: @invertedTextShadow; +@oliveTextColor: @invertedTextColor; +@oliveTextShadow: @invertedTextShadow; +@yellowTextColor: @invertedTextColor; +@yellowTextShadow: @invertedTextShadow; +@tealTextColor: @invertedTextColor; +@tealTextShadow: @invertedTextShadow; +@greyTextColor: @invertedTextColor; +@greyTextShadow: @invertedTextShadow; + +/* Inverted */ +@lightBrownTextColor: @invertedTextColor; +@lightBrownTextShadow: @invertedTextShadow; +@lightRedTextColor: @invertedTextColor; +@lightRedTextShadow: @invertedTextShadow; +@lightOrangeTextColor: @invertedTextColor; +@lightOrangeTextShadow: @invertedTextShadow; +@lightGreenTextColor: @invertedTextColor; +@lightGreenTextShadow: @invertedTextShadow; +@lightBlueTextColor: @invertedTextColor; +@lightBlueTextShadow: @invertedTextShadow; +@lightVioletTextColor: @invertedTextColor; +@lightVioletTextShadow: @invertedTextShadow; +@lightPurpleTextColor: @invertedTextColor; +@lightPurpleTextShadow: @invertedTextShadow; +@lightPinkTextColor: @invertedTextColor; +@lightPinkTextShadow: @invertedTextShadow; +@lightBlackTextColor: @invertedTextColor; +@lightBlackTextShadow: @invertedTextShadow; +@lightOliveTextColor: @textColor; +@lightOliveTextShadow: @textShadow; +@lightYellowTextColor: @textColor; +@lightYellowTextShadow: @textShadow; +@lightTealTextColor: @textColor; +@lightTealTextShadow: @textShadow; +@lightGreyTextColor: @textColor; +@lightGreyTextShadow: @textShadow; + + +/* Ordinality */ +@primaryBackgroundImage: @coloredBackgroundImage; +@primaryTextColor: @invertedTextColor; +@primaryTextShadow: @invertedTextShadow; +@primaryBoxShadow: @coloredBoxShadow; + +@secondaryBackgroundImage: @coloredBackgroundImage; +@secondaryTextColor: @invertedTextColor; +@secondaryTextShadow: @invertedTextShadow; +@secondaryBoxShadow: @coloredBoxShadow; + +@positiveBackgroundImage: @coloredBackgroundImage; +@positiveTextColor: @invertedTextColor; +@positiveTextShadow: @invertedTextShadow; +@positiveBoxShadow: @coloredBoxShadow; + +@negativeBackgroundImage: @coloredBackgroundImage; +@negativeTextColor: @invertedTextColor; +@negativeTextShadow: @invertedTextShadow; +@negativeBoxShadow: @coloredBoxShadow; + +/* Compact */ +@compactVerticalPadding: (@verticalPadding * 0.75); +@compactHorizontalPadding: (@horizontalPadding * 0.75); + +/* Attached */ +@attachedOffset: -1px; +@attachedBoxShadow: 0px 0px 0px 1px @borderColor; +@attachedHorizontalPadding: 0.75em; +@attachedZIndex: 2; + +/* Floated */ +@floatedMargin: 0.25em; + +/* Animated */ +@animatedVerticalAlign: middle; +@animatedZIndex: 1; +@animationDuration: 0.3s; +@animationEasing: ease; +@fadeScaleHigh: 1.5; +@fadeScaleLow: 0.75; diff --git a/src/semantic/src/themes/default/elements/container.overrides b/src/semantic/src/themes/default/elements/container.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/container.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/container.variables b/src/semantic/src/themes/default/elements/container.variables new file mode 100644 index 0000000..33f3a8c --- /dev/null +++ b/src/semantic/src/themes/default/elements/container.variables @@ -0,0 +1,58 @@ +/******************************* + Container +*******************************/ + +/*------------------- + Element +--------------------*/ + +/* Minimum Gutter is used to determine the maximum container width for a given device */ + +@maxWidth: 100%; + +/* Devices */ +@mobileMinimumGutter: 0em; +@mobileWidth: auto; +@mobileGutter: 1em; + +@tabletMinimumGutter: (@emSize * 1); +@tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth; +@tabletGutter: auto; + +@computerMinimumGutter: (@emSize * 1.5); +@computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth; +@computerGutter: auto; + +@largeMonitorMinimumGutter: (@emSize * 2); +@largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth; +@largeMonitorGutter: auto; + +/* Coupling (Add Negative Margin to container size) */ +@gridGutterWidth: 2rem; +@relaxedGridGutterWidth: 3rem; +@veryRelaxedGridGutterWidth: 5rem; + +@mobileGridWidth: @mobileWidth; +@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")"; +@computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")"; +@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")"; + +@mobileRelaxedGridWidth: @mobileWidth; +@tabletRelaxedGridWidth: ~"calc("@tabletWidth~" + "@relaxedGridGutterWidth~")"; +@computerRelaxedGridWidth: ~"calc("@computerWidth~" + "@relaxedGridGutterWidth~")"; +@largeMonitorRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@relaxedGridGutterWidth~")"; + +@mobileVeryRelaxedGridWidth: @mobileWidth; +@tabletVeryRelaxedGridWidth: ~"calc("@tabletWidth~" + "@veryRelaxedGridGutterWidth~")"; +@computerVeryRelaxedGridWidth: ~"calc("@computerWidth~" + "@veryRelaxedGridGutterWidth~")"; +@largeMonitorVeryRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@veryRelaxedGridGutterWidth~")"; + +/*------------------- + Types +--------------------*/ + +/* Text */ +@textWidth: 700px; +@textFontFamily: @pageFont; +@textLineHeight: 1.5; +@textSize: @large; \ No newline at end of file diff --git a/src/semantic/src/themes/default/elements/divider.overrides b/src/semantic/src/themes/default/elements/divider.overrides new file mode 100644 index 0000000..2690ca2 --- /dev/null +++ b/src/semantic/src/themes/default/elements/divider.overrides @@ -0,0 +1,18 @@ +/******************************* + Theme Overrides +*******************************/ + + +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); +} + +@media only screen and (max-width : (@tabletBreakpoint - 1px)) { + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); + } +} \ No newline at end of file diff --git a/src/semantic/src/themes/default/elements/divider.variables b/src/semantic/src/themes/default/elements/divider.variables new file mode 100644 index 0000000..14a23a7 --- /dev/null +++ b/src/semantic/src/themes/default/elements/divider.variables @@ -0,0 +1,53 @@ +/******************************* + Divider +*******************************/ + +/*------------------- + Element +--------------------*/ + +@margin: 1rem 0rem; + +@highlightWidth: 1px; +@highlightColor: @whiteBorderColor; + +@shadowWidth: 1px; +@shadowColor: @borderColor; + +/* Text */ +@letterSpacing: 0.05em; +@fontWeight: bold; +@color: @darkTextColor; +@textTransform: uppercase; + +/*------------------- + Coupling +--------------------*/ + +/* Icon */ +@dividerIconSize: 1rem; +@dividerIconMargin: 0rem; + + +/******************************* + Variations +*******************************/ + +/* Horizontal / Vertical */ +@horizontalMargin: ''; +@horizontalDividerMargin: 1em; +@horizontalRulerOffset: ~"calc(-50% - "(@horizontalDividerMargin)~")"; + +@verticalDividerMargin: 1rem; +@verticalDividerHeight: ~"calc(100% - "(@verticalDividerMargin)~")"; + +/* Inverted */ +@invertedTextColor: @white; +@invertedHighlightColor: rgba(255, 255, 255, 0.15); +@invertedShadowColor: @borderColor; + +/* Section */ +@sectionMargin: 2rem; + +/* Sizes */ +@medium: 1rem; \ No newline at end of file diff --git a/src/semantic/src/themes/default/elements/flag.overrides b/src/semantic/src/themes/default/elements/flag.overrides new file mode 100644 index 0000000..099978b --- /dev/null +++ b/src/semantic/src/themes/default/elements/flag.overrides @@ -0,0 +1,986 @@ +/* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */ + +/******************************* + Theme Overrides +*******************************/ + +i.flag.ad:before, +i.flag.andorra:before { + background-position: 0px 0px; +} +i.flag.ae:before, +i.flag.united.arab.emirates:before, +i.flag.uae:before { + background-position: 0px -26px; +} +i.flag.af:before, +i.flag.afghanistan:before { + background-position: 0px -52px; +} +i.flag.ag:before, +i.flag.antigua:before { + background-position: 0px -78px; +} +i.flag.ai:before, +i.flag.anguilla:before { + background-position: 0px -104px; +} +i.flag.al:before, +i.flag.albania:before { + background-position: 0px -130px; +} +i.flag.am:before, +i.flag.armenia:before { + background-position: 0px -156px; +} +i.flag.an:before, +i.flag.netherlands.antilles:before { + background-position: 0px -182px; +} +i.flag.ao:before, +i.flag.angola:before { + background-position: 0px -208px; +} +i.flag.ar:before, +i.flag.argentina:before { + background-position: 0px -234px; +} +i.flag.as:before, +i.flag.american.samoa:before { + background-position: 0px -260px; +} +i.flag.at:before, +i.flag.austria:before { + background-position: 0px -286px; +} +i.flag.au:before, +i.flag.australia:before { + background-position: 0px -312px; +} +i.flag.aw:before, +i.flag.aruba:before { + background-position: 0px -338px; +} +i.flag.ax:before, +i.flag.aland.islands:before { + background-position: 0px -364px; +} +i.flag.az:before, +i.flag.azerbaijan:before { + background-position: 0px -390px; +} +i.flag.ba:before, +i.flag.bosnia:before { + background-position: 0px -416px; +} +i.flag.bb:before, +i.flag.barbados:before { + background-position: 0px -442px; +} +i.flag.bd:before, +i.flag.bangladesh:before { + background-position: 0px -468px; +} +i.flag.be:before, +i.flag.belgium:before { + background-position: 0px -494px; +} +i.flag.bf:before, +i.flag.burkina.faso:before { + background-position: 0px -520px; +} +i.flag.bg:before, +i.flag.bulgaria:before { + background-position: 0px -546px; +} +i.flag.bh:before, +i.flag.bahrain:before { + background-position: 0px -572px; +} +i.flag.bi:before, +i.flag.burundi:before { + background-position: 0px -598px; +} +i.flag.bj:before, +i.flag.benin:before { + background-position: 0px -624px; +} +i.flag.bm:before, +i.flag.bermuda:before { + background-position: 0px -650px; +} +i.flag.bn:before, +i.flag.brunei:before { + background-position: 0px -676px; +} +i.flag.bo:before, +i.flag.bolivia:before { + background-position: 0px -702px; +} +i.flag.br:before, +i.flag.brazil:before { + background-position: 0px -728px; +} +i.flag.bs:before, +i.flag.bahamas:before { + background-position: 0px -754px; +} +i.flag.bt:before, +i.flag.bhutan:before { + background-position: 0px -780px; +} +i.flag.bv:before, +i.flag.bouvet.island:before { + background-position: 0px -806px; +} +i.flag.bw:before, +i.flag.botswana:before { + background-position: 0px -832px; +} +i.flag.by:before, +i.flag.belarus:before { + background-position: 0px -858px; +} +i.flag.bz:before, +i.flag.belize:before { + background-position: 0px -884px; +} +i.flag.ca:before, +i.flag.canada:before { + background-position: 0px -910px; +} +i.flag.cc:before, +i.flag.cocos.islands:before { + background-position: 0px -962px; +} +i.flag.cd:before, +i.flag.congo:before { + background-position: 0px -988px; +} +i.flag.cf:before, +i.flag.central.african.republic:before { + background-position: 0px -1014px; +} +i.flag.cg:before, +i.flag.congo.brazzaville:before { + background-position: 0px -1040px; +} +i.flag.ch:before, +i.flag.switzerland:before { + background-position: 0px -1066px; +} +i.flag.ci:before, +i.flag.cote.divoire:before { + background-position: 0px -1092px; +} +i.flag.ck:before, +i.flag.cook.islands:before { + background-position: 0px -1118px; +} +i.flag.cl:before, +i.flag.chile:before { + background-position: 0px -1144px; +} +i.flag.cm:before, +i.flag.cameroon:before { + background-position: 0px -1170px; +} +i.flag.cn:before, +i.flag.china:before { + background-position: 0px -1196px; +} +i.flag.co:before, +i.flag.colombia:before { + background-position: 0px -1222px; +} +i.flag.cr:before, +i.flag.costa.rica:before { + background-position: 0px -1248px; +} +i.flag.cs:before, +i.flag.serbia:before { + background-position: 0px -1274px; +} +i.flag.cu:before, +i.flag.cuba:before { + background-position: 0px -1300px; +} +i.flag.cv:before, +i.flag.cape.verde:before { + background-position: 0px -1326px; +} +i.flag.cx:before, +i.flag.christmas.island:before { + background-position: 0px -1352px; +} +i.flag.cy:before, +i.flag.cyprus:before { + background-position: 0px -1378px; +} +i.flag.cz:before, +i.flag.czech.republic:before { + background-position: 0px -1404px; +} +i.flag.de:before, +i.flag.germany:before { + background-position: 0px -1430px; +} +i.flag.dj:before, +i.flag.djibouti:before { + background-position: 0px -1456px; +} +i.flag.dk:before, +i.flag.denmark:before { + background-position: 0px -1482px; +} +i.flag.dm:before, +i.flag.dominica:before { + background-position: 0px -1508px; +} +i.flag.do:before, +i.flag.dominican.republic:before { + background-position: 0px -1534px; +} +i.flag.dz:before, +i.flag.algeria:before { + background-position: 0px -1560px; +} +i.flag.ec:before, +i.flag.ecuador:before { + background-position: 0px -1586px; +} +i.flag.ee:before, +i.flag.estonia:before { + background-position: 0px -1612px; +} +i.flag.eg:before, +i.flag.egypt:before { + background-position: 0px -1638px; +} +i.flag.eh:before, +i.flag.western.sahara:before { + background-position: 0px -1664px; +} +i.flag.er:before, +i.flag.eritrea:before { + background-position: 0px -1716px; +} +i.flag.es:before, +i.flag.spain:before { + background-position: 0px -1742px; +} +i.flag.et:before, +i.flag.ethiopia:before { + background-position: 0px -1768px; +} +i.flag.eu:before, +i.flag.european.union:before { + background-position: 0px -1794px; +} +i.flag.fi:before, +i.flag.finland:before { + background-position: 0px -1846px; +} +i.flag.fj:before, +i.flag.fiji:before { + background-position: 0px -1872px; +} +i.flag.fk:before, +i.flag.falkland.islands:before { + background-position: 0px -1898px; +} +i.flag.fm:before, +i.flag.micronesia:before { + background-position: 0px -1924px; +} +i.flag.fo:before, +i.flag.faroe.islands:before { + background-position: 0px -1950px; +} +i.flag.fr:before, +i.flag.france:before { + background-position: 0px -1976px; +} +i.flag.ga:before, +i.flag.gabon:before { + background-position: -36px 0px; +} +i.flag.gb:before, +i.flag.united.kingdom:before { + background-position: -36px -26px; +} +i.flag.gd:before, +i.flag.grenada:before { + background-position: -36px -52px; +} +i.flag.ge:before, +i.flag.georgia:before { + background-position: -36px -78px; +} +i.flag.gf:before, +i.flag.french.guiana:before { + background-position: -36px -104px; +} +i.flag.gh:before, +i.flag.ghana:before { + background-position: -36px -130px; +} +i.flag.gi:before, +i.flag.gibraltar:before { + background-position: -36px -156px; +} +i.flag.gl:before, +i.flag.greenland:before { + background-position: -36px -182px; +} +i.flag.gm:before, +i.flag.gambia:before { + background-position: -36px -208px; +} +i.flag.gn:before, +i.flag.guinea:before { + background-position: -36px -234px; +} +i.flag.gp:before, +i.flag.guadeloupe:before { + background-position: -36px -260px; +} +i.flag.gq:before, +i.flag.equatorial.guinea:before { + background-position: -36px -286px; +} +i.flag.gr:before, +i.flag.greece:before { + background-position: -36px -312px; +} +i.flag.gs:before, +i.flag.sandwich.islands:before { + background-position: -36px -338px; +} +i.flag.gt:before, +i.flag.guatemala:before { + background-position: -36px -364px; +} +i.flag.gu:before, +i.flag.guam:before { + background-position: -36px -390px; +} +i.flag.gw:before, +i.flag.guinea-bissau:before { + background-position: -36px -416px; +} +i.flag.gy:before, +i.flag.guyana:before { + background-position: -36px -442px; +} +i.flag.hk:before, +i.flag.hong.kong:before { + background-position: -36px -468px; +} +i.flag.hm:before, +i.flag.heard.island:before { + background-position: -36px -494px; +} +i.flag.hn:before, +i.flag.honduras:before { + background-position: -36px -520px; +} +i.flag.hr:before, +i.flag.croatia:before { + background-position: -36px -546px; +} +i.flag.ht:before, +i.flag.haiti:before { + background-position: -36px -572px; +} +i.flag.hu:before, +i.flag.hungary:before { + background-position: -36px -598px; +} +i.flag.id:before, +i.flag.indonesia:before { + background-position: -36px -624px; +} +i.flag.ie:before, +i.flag.ireland:before { + background-position: -36px -650px; +} +i.flag.il:before, +i.flag.israel:before { + background-position: -36px -676px; +} +i.flag.in:before, +i.flag.india:before { + background-position: -36px -702px; +} +i.flag.io:before, +i.flag.indian.ocean.territory:before { + background-position: -36px -728px; +} +i.flag.iq:before, +i.flag.iraq:before { + background-position: -36px -754px; +} +i.flag.ir:before, +i.flag.iran:before { + background-position: -36px -780px; +} +i.flag.is:before, +i.flag.iceland:before { + background-position: -36px -806px; +} +i.flag.it:before, +i.flag.italy:before { + background-position: -36px -832px; +} +i.flag.jm:before, +i.flag.jamaica:before { + background-position: -36px -858px; +} +i.flag.jo:before, +i.flag.jordan:before { + background-position: -36px -884px; +} +i.flag.jp:before, +i.flag.japan:before { + background-position: -36px -910px; +} +i.flag.ke:before, +i.flag.kenya:before { + background-position: -36px -936px; +} +i.flag.kg:before, +i.flag.kyrgyzstan:before { + background-position: -36px -962px; +} +i.flag.kh:before, +i.flag.cambodia:before { + background-position: -36px -988px; +} +i.flag.ki:before, +i.flag.kiribati:before { + background-position: -36px -1014px; +} +i.flag.km:before, +i.flag.comoros:before { + background-position: -36px -1040px; +} +i.flag.kn:before, +i.flag.saint.kitts.and.nevis:before { + background-position: -36px -1066px; +} +i.flag.kp:before, +i.flag.north.korea:before { + background-position: -36px -1092px; +} +i.flag.kr:before, +i.flag.south.korea:before { + background-position: -36px -1118px; +} +i.flag.kw:before, +i.flag.kuwait:before { + background-position: -36px -1144px; +} +i.flag.ky:before, +i.flag.cayman.islands:before { + background-position: -36px -1170px; +} +i.flag.kz:before, +i.flag.kazakhstan:before { + background-position: -36px -1196px; +} +i.flag.la:before, +i.flag.laos:before { + background-position: -36px -1222px; +} +i.flag.lb:before, +i.flag.lebanon:before { + background-position: -36px -1248px; +} +i.flag.lc:before, +i.flag.saint.lucia:before { + background-position: -36px -1274px; +} +i.flag.li:before, +i.flag.liechtenstein:before { + background-position: -36px -1300px; +} +i.flag.lk:before, +i.flag.sri.lanka:before { + background-position: -36px -1326px; +} +i.flag.lr:before, +i.flag.liberia:before { + background-position: -36px -1352px; +} +i.flag.ls:before, +i.flag.lesotho:before { + background-position: -36px -1378px; +} +i.flag.lt:before, +i.flag.lithuania:before { + background-position: -36px -1404px; +} +i.flag.lu:before, +i.flag.luxembourg:before { + background-position: -36px -1430px; +} +i.flag.lv:before, +i.flag.latvia:before { + background-position: -36px -1456px; +} +i.flag.ly:before, +i.flag.libya:before { + background-position: -36px -1482px; +} +i.flag.ma:before, +i.flag.morocco:before { + background-position: -36px -1508px; +} +i.flag.mc:before, +i.flag.monaco:before { + background-position: -36px -1534px; +} +i.flag.md:before, +i.flag.moldova:before { + background-position: -36px -1560px; +} +i.flag.me:before, +i.flag.montenegro:before { + background-position: -36px -1586px; +} +i.flag.mg:before, +i.flag.madagascar:before { + background-position: -36px -1613px; +} +i.flag.mh:before, +i.flag.marshall.islands:before { + background-position: -36px -1639px; +} +i.flag.mk:before, +i.flag.macedonia:before { + background-position: -36px -1665px; +} +i.flag.ml:before, +i.flag.mali:before { + background-position: -36px -1691px; +} +i.flag.mm:before, +i.flag.myanmar:before, +i.flag.burma:before { + background-position: -36px -1717px; +} +i.flag.mn:before, +i.flag.mongolia:before { + background-position: -36px -1743px; +} +i.flag.mo:before, +i.flag.macau:before { + background-position: -36px -1769px; +} +i.flag.mp:before, +i.flag.northern.mariana.islands:before { + background-position: -36px -1795px; +} +i.flag.mq:before, +i.flag.martinique:before { + background-position: -36px -1821px; +} +i.flag.mr:before, +i.flag.mauritania:before { + background-position: -36px -1847px; +} +i.flag.ms:before, +i.flag.montserrat:before { + background-position: -36px -1873px; +} +i.flag.mt:before, +i.flag.malta:before { + background-position: -36px -1899px; +} +i.flag.mu:before, +i.flag.mauritius:before { + background-position: -36px -1925px; +} +i.flag.mv:before, +i.flag.maldives:before { + background-position: -36px -1951px; +} +i.flag.mw:before, +i.flag.malawi:before { + background-position: -36px -1977px; +} +i.flag.mx:before, +i.flag.mexico:before { + background-position: -72px 0px; +} +i.flag.my:before, +i.flag.malaysia:before { + background-position: -72px -26px; +} +i.flag.mz:before, +i.flag.mozambique:before { + background-position: -72px -52px; +} +i.flag.na:before, +i.flag.namibia:before { + background-position: -72px -78px; +} +i.flag.nc:before, +i.flag.new.caledonia:before { + background-position: -72px -104px; +} +i.flag.ne:before, +i.flag.niger:before { + background-position: -72px -130px; +} +i.flag.nf:before, +i.flag.norfolk.island:before { + background-position: -72px -156px; +} +i.flag.ng:before, +i.flag.nigeria:before { + background-position: -72px -182px; +} +i.flag.ni:before, +i.flag.nicaragua:before { + background-position: -72px -208px; +} +i.flag.nl:before, +i.flag.netherlands:before { + background-position: -72px -234px; +} +i.flag.no:before, +i.flag.norway:before { + background-position: -72px -260px; +} +i.flag.np:before, +i.flag.nepal:before { + background-position: -72px -286px; +} +i.flag.nr:before, +i.flag.nauru:before { + background-position: -72px -312px; +} +i.flag.nu:before, +i.flag.niue:before { + background-position: -72px -338px; +} +i.flag.nz:before, +i.flag.new.zealand:before { + background-position: -72px -364px; +} +i.flag.om:before, +i.flag.oman:before { + background-position: -72px -390px; +} +i.flag.pa:before, +i.flag.panama:before { + background-position: -72px -416px; +} +i.flag.pe:before, +i.flag.peru:before { + background-position: -72px -442px; +} +i.flag.pf:before, +i.flag.french.polynesia:before { + background-position: -72px -468px; +} +i.flag.pg:before, +i.flag.new.guinea:before { + background-position: -72px -494px; +} +i.flag.ph:before, +i.flag.philippines:before { + background-position: -72px -520px; +} +i.flag.pk:before, +i.flag.pakistan:before { + background-position: -72px -546px; +} +i.flag.pl:before, +i.flag.poland:before { + background-position: -72px -572px; +} +i.flag.pm:before, +i.flag.saint.pierre:before { + background-position: -72px -598px; +} +i.flag.pn:before, +i.flag.pitcairn.islands:before { + background-position: -72px -624px; +} +i.flag.pr:before, +i.flag.puerto.rico:before { + background-position: -72px -650px; +} +i.flag.ps:before, +i.flag.palestine:before { + background-position: -72px -676px; +} +i.flag.pt:before, +i.flag.portugal:before { + background-position: -72px -702px; +} +i.flag.pw:before, +i.flag.palau:before { + background-position: -72px -728px; +} +i.flag.py:before, +i.flag.paraguay:before { + background-position: -72px -754px; +} +i.flag.qa:before, +i.flag.qatar:before { + background-position: -72px -780px; +} +i.flag.re:before, +i.flag.reunion:before { + background-position: -72px -806px; +} +i.flag.ro:before, +i.flag.romania:before { + background-position: -72px -832px; +} +i.flag.rs:before, +i.flag.serbia:before { + background-position: -72px -858px; +} +i.flag.ru:before, +i.flag.russia:before { + background-position: -72px -884px; +} +i.flag.rw:before, +i.flag.rwanda:before { + background-position: -72px -910px; +} +i.flag.sa:before, +i.flag.saudi.arabia:before { + background-position: -72px -936px; +} +i.flag.sb:before, +i.flag.solomon.islands:before { + background-position: -72px -962px; +} +i.flag.sc:before, +i.flag.seychelles:before { + background-position: -72px -988px; +} +i.flag.gb.sct:before, +i.flag.scotland:before { + background-position: -72px -1014px; +} +i.flag.sd:before, +i.flag.sudan:before { + background-position: -72px -1040px; +} +i.flag.se:before, +i.flag.sweden:before { + background-position: -72px -1066px; +} +i.flag.sg:before, +i.flag.singapore:before { + background-position: -72px -1092px; +} +i.flag.sh:before, +i.flag.saint.helena:before { + background-position: -72px -1118px; +} +i.flag.si:before, +i.flag.slovenia:before { + background-position: -72px -1144px; +} +i.flag.sj:before, +i.flag.svalbard:before, +i.flag.jan.mayen:before { + background-position: -72px -1170px; +} +i.flag.sk:before, +i.flag.slovakia:before { + background-position: -72px -1196px; +} +i.flag.sl:before, +i.flag.sierra.leone:before { + background-position: -72px -1222px; +} +i.flag.sm:before, +i.flag.san.marino:before { + background-position: -72px -1248px; +} +i.flag.sn:before, +i.flag.senegal:before { + background-position: -72px -1274px; +} +i.flag.so:before, +i.flag.somalia:before { + background-position: -72px -1300px; +} +i.flag.sr:before, +i.flag.suriname:before { + background-position: -72px -1326px; +} +i.flag.st:before, +i.flag.sao.tome:before { + background-position: -72px -1352px; +} +i.flag.sv:before, +i.flag.el.salvador:before { + background-position: -72px -1378px; +} +i.flag.sy:before, +i.flag.syria:before { + background-position: -72px -1404px; +} +i.flag.sz:before, +i.flag.swaziland:before { + background-position: -72px -1430px; +} +i.flag.tc:before, +i.flag.caicos.islands:before { + background-position: -72px -1456px; +} +i.flag.td:before, +i.flag.chad:before { + background-position: -72px -1482px; +} +i.flag.tf:before, +i.flag.french.territories:before { + background-position: -72px -1508px; +} +i.flag.tg:before, +i.flag.togo:before { + background-position: -72px -1534px; +} +i.flag.th:before, +i.flag.thailand:before { + background-position: -72px -1560px; +} +i.flag.tj:before, +i.flag.tajikistan:before { + background-position: -72px -1586px; +} +i.flag.tk:before, +i.flag.tokelau:before { + background-position: -72px -1612px; +} +i.flag.tl:before, +i.flag.timorleste:before { + background-position: -72px -1638px; +} +i.flag.tm:before, +i.flag.turkmenistan:before { + background-position: -72px -1664px; +} +i.flag.tn:before, +i.flag.tunisia:before { + background-position: -72px -1690px; +} +i.flag.to:before, +i.flag.tonga:before { + background-position: -72px -1716px; +} +i.flag.tr:before, +i.flag.turkey:before { + background-position: -72px -1742px; +} +i.flag.tt:before, +i.flag.trinidad:before { + background-position: -72px -1768px; +} +i.flag.tv:before, +i.flag.tuvalu:before { + background-position: -72px -1794px; +} +i.flag.tw:before, +i.flag.taiwan:before { + background-position: -72px -1820px; +} +i.flag.tz:before, +i.flag.tanzania:before { + background-position: -72px -1846px; +} +i.flag.ua:before, +i.flag.ukraine:before { + background-position: -72px -1872px; +} +i.flag.ug:before, +i.flag.uganda:before { + background-position: -72px -1898px; +} +i.flag.um:before, +i.flag.us.minor.islands:before { + background-position: -72px -1924px; +} +i.flag.us:before, +i.flag.america:before, +i.flag.united.states:before { + background-position: -72px -1950px; +} +i.flag.uy:before, +i.flag.uruguay:before { + background-position: -72px -1976px; +} +i.flag.uz:before, +i.flag.uzbekistan:before { + background-position: -108px 0px; +} +i.flag.va:before, +i.flag.vatican.city:before { + background-position: -108px -26px; +} +i.flag.vc:before, +i.flag.saint.vincent:before { + background-position: -108px -52px; +} +i.flag.ve:before, +i.flag.venezuela:before { + background-position: -108px -78px; +} +i.flag.vg:before, +i.flag.british.virgin.islands:before { + background-position: -108px -104px; +} +i.flag.vi:before, +i.flag.us.virgin.islands:before { + background-position: -108px -130px; +} +i.flag.vn:before, +i.flag.vietnam:before { + background-position: -108px -156px; +} +i.flag.vu:before, +i.flag.vanuatu:before { + background-position: -108px -182px; +} +i.flag.gb.wls:before, +i.flag.wales:before { + background-position: -108px -208px; +} +i.flag.wf:before, +i.flag.wallis.and.futuna:before { + background-position: -108px -234px; +} +i.flag.ws:before, +i.flag.samoa:before { + background-position: -108px -260px; +} +i.flag.ye:before, +i.flag.yemen:before { + background-position: -108px -286px; +} +i.flag.yt:before, +i.flag.mayotte:before { + background-position: -108px -312px; +} +i.flag.za:before, +i.flag.south.africa:before { + background-position: -108px -338px; +} +i.flag.zm:before, +i.flag.zambia:before { + background-position: -108px -364px; +} +i.flag.zw:before, +i.flag.zimbabwe:before { + background-position: -108px -390px; +} \ No newline at end of file diff --git a/src/semantic/src/themes/default/elements/flag.variables b/src/semantic/src/themes/default/elements/flag.variables new file mode 100644 index 0000000..cf0884c --- /dev/null +++ b/src/semantic/src/themes/default/elements/flag.variables @@ -0,0 +1,13 @@ +/******************************* + Flag +*******************************/ + +/*------------------- + Element +--------------------*/ + +@spritePath: "@{imagePath}/flags.png"; +@width: 16px; +@height: 11px; +@verticalAlign: baseline; +@margin: 0.5em; \ No newline at end of file diff --git a/src/semantic/src/themes/default/elements/header.overrides b/src/semantic/src/themes/default/elements/header.overrides new file mode 100644 index 0000000..0e06821 --- /dev/null +++ b/src/semantic/src/themes/default/elements/header.overrides @@ -0,0 +1,4 @@ +/******************************* + Theme Overrides +*******************************/ + diff --git a/src/semantic/src/themes/default/elements/header.variables b/src/semantic/src/themes/default/elements/header.variables new file mode 100644 index 0000000..6c4ebfd --- /dev/null +++ b/src/semantic/src/themes/default/elements/header.variables @@ -0,0 +1,151 @@ +/******************************* + Header +*******************************/ + +/*------------------- + Element +--------------------*/ + +@textTransform: none; +@fontFamily: @headerFont; +@fontWeight: @headerFontWeight; +@lineHeight: @headerLineHeight; +@lineHeightOffset: @headerLineHeightOffset; + +@topMargin: @headerTopMargin; +@bottomMargin: @headerBottomMargin; +@margin: @topMargin 0em @bottomMargin; + +@firstMargin: -@lineHeightOffset; +@lastMargin: 0em; +@horizontalPadding: 0em; +@verticalPadding: 0em; + +/* Sub Heading */ +@subHeadingDistance: @2px; +@subHeadingFontSize: @relativeTiny; +@subHeadingFontWeight: bold; +@subHeadingTextTransform: uppercase; +@subHeadingColor: ''; + +@smallSubHeadingSize: @relativeMini; +@largeSubHeadingSize: @relativeSmall; +@hugeSubHeadingSize: @relativeMedium; + +/* Sub Header */ +@subHeaderMargin: 0em; +@subHeaderLineHeight: 1.2em; +@subHeaderColor: @mutedTextColor; + +/* Icon */ +@iconOpacity: 1; +@iconSize: 1.5em; +@iconOffset: @lineHeightOffset; +@iconMargin: 0.75rem; +@iconAlignment: middle; + +/* Image */ +@imageWidth: 2.5em; +@imageHeight: auto; +@imageOffset: @lineHeightOffset; +@imageMargin: @iconMargin; +@imageAlignment: middle; + +/* Label */ +@labelSize: ''; +@labelDistance: 0.5rem; +@labelVerticalAlign: middle; + +/* Content */ +@contentAlignment: top; +@contentIconAlignment: middle; +@contentImageAlignment: middle; + +/* Paragraph after Header */ +@nextParagraphDistance: 0em; + +/*------------------- + Variations +--------------------*/ + +/* Sizing */ +@hugeFontSize : unit(@h1, em); +@largeFontSize : unit(@h2, em); +@mediumFontSize : unit(@h3, em); +@smallFontSize : unit(@h4, em); +@tinyFontSize : unit(@h5, em); + +/* Sub Header */ +@h1SubHeaderFontSize: @large; +@h2SubHeaderFontSize: @large; +@h3SubHeaderFontSize: @medium; +@h4SubHeaderFontSize: @medium; +@h5SubHeaderFontSize: @small; + +@hugeSubHeaderFontSize : @h1SubHeaderFontSize; +@largeSubHeaderFontSize : @h2SubHeaderFontSize; +@subHeaderFontSize : @h3SubHeaderFontSize; +@smallSubHeaderFontSize : @h4SubHeaderFontSize; +@tinySubHeaderFontSize : @h5SubHeaderFontSize; + +/* Icon Header */ +@iconHeaderSize: 3em; +@iconHeaderOpacity: 1; +@iconHeaderMargin: 0.5rem; +@circularHeaderIconSize: 2em; +@squareHeaderIconSize: 2em; + +/* No Line Height Offset */ +@iconHeaderTopMargin: 2rem; +@iconHeaderBottomMargin: @bottomMargin; +@iconHeaderFirstMargin: 0em; + +/* Divided */ +@dividedBorderWidth: 1px; +@dividedBorder: @dividedBorderWidth solid @borderColor; +@dividedColoredBorderWidth: 2px; + +@dividedBorderPadding: @3px; +@dividedSubHeaderPadding: @3px; +@dividedIconPadding: 0em; + +/* Block */ +@blockBackground: @darkWhite; +@blockBoxShadow: none; +@blockBorderWidth: 1px; +@blockBorder: @blockBorderWidth solid @solidBorderColor; +@blockHorizontalPadding: @medium; +@blockVerticalPadding: @mini; +@blockBorderRadius: @defaultBorderRadius; + +@tinyBlock: @tiny; +@smallBlock: @small; +@mediumBlock: @medium; +@largeBlock: @large; +@hugeBlock: @huge; + +/* Attached */ +@attachedOffset: -1px; +@attachedBoxShadow: none; +@attachedBorder: 1px solid @solidBorderColor; +@attachedVerticalPadding: @blockVerticalPadding; +@attachedHorizontalPadding: @blockHorizontalPadding; +@attachedBackground: @white; +@attachedBorderRadius: @blockBorderRadius; + +@tinyAttachedSize: @relativeTiny; +@smallAttachedSize: @relativeSmall; +@mediumAttachedSize: @relativeMedium; +@largeAttachedSize: @relativeLarge; +@bigAttachedSize: @relativeBig; +@hugeAttachedSize: @relativeHuge; + +/* Inverted */ +@invertedColor: @white; +@invertedSubHeaderColor: @invertedMutedTextColor; +@invertedDividedBorderColor: @whiteBorderColor; +@invertedBlockBackground: @lightBlack @subtleGradient; +@invertedAttachedBackground: @invertedBlockBackground; + +/* Floated */ +@floatedMargin: 0.5em; diff --git a/src/semantic/src/themes/default/elements/icon.overrides b/src/semantic/src/themes/default/elements/icon.overrides new file mode 100644 index 0000000..62ab965 --- /dev/null +++ b/src/semantic/src/themes/default/elements/icon.overrides @@ -0,0 +1,941 @@ +/* + * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ + +/******************************* + +Semantic-UI integration of font-awesome : + +///class names are separated +i.icon.circle => i.icon.circle +i.icon.circle-o => i.icon.circle.outline + +//abbreviation are replaced by full letters: +i.icon.ellipsis-h => i.icon.ellipsis.horizontal +i.icon.ellipsis-v => i.icon.ellipsis.vertical +.alpha => .i.icon.alphabet +.asc => .i.icon.ascending +.desc => .i.icon.descending +.alt =>.alternate + +ASCII order is conserved for easier maintenance. + +Icons that only have one style 'outline', 'square' etc do not require this class +for instance `lemon icon` not `lemon outline icon` since there is only one lemon + +*******************************/ + +/******************************* + Icons +*******************************/ + +/* Web Content */ +i.icon.search:before { content: "\f002"; } +i.icon.mail.outline:before { content: "\f003"; } +i.icon.signal:before { content: "\f012"; } +i.icon.setting:before { content: "\f013"; } +i.icon.home:before { content: "\f015"; } +i.icon.inbox:before { content: "\f01c"; } +i.icon.browser:before { content: "\f022"; } +i.icon.tag:before { content: "\f02b"; } +i.icon.tags:before { content: "\f02c"; } +i.icon.image:before { content: "\f03e"; } +i.icon.calendar:before { content: "\f073"; } +i.icon.comment:before { content: "\f075"; } +i.icon.shop:before { content: "\f07a"; } +i.icon.comments:before { content: "\f086"; } +i.icon.external:before { content: "\f08e"; } +i.icon.privacy:before { content: "\f084"; } +i.icon.settings:before { content: "\f085"; } +i.icon.comments:before { content: "\f086"; } +i.icon.external:before { content: "\f08e"; } +i.icon.trophy:before { content: "\f091"; } +i.icon.payment:before { content: "\f09d"; } +i.icon.feed:before { content: "\f09e"; } +i.icon.alarm.outline:before { content: "\f0a2"; } +i.icon.tasks:before { content: "\f0ae"; } +i.icon.cloud:before { content: "\f0c2"; } +i.icon.lab:before { content: "\f0c3"; } +i.icon.mail:before { content: "\f0e0"; } +i.icon.dashboard:before { content: "\f0e4"; } +i.icon.comment.outline:before { content: "\f0e5"; } +i.icon.comments.outline:before { content: "\f0e6"; } +i.icon.sitemap:before { content: "\f0e8"; } +i.icon.idea:before { content: "\f0eb"; } +i.icon.alarm:before { content: "\f0f3"; } +i.icon.terminal:before { content: "\f120"; } +i.icon.code:before { content: "\f121"; } +i.icon.protect:before { content: "\f132"; } +i.icon.calendar.outline:before { content: "\f133"; } +i.icon.ticket:before { content: "\f145"; } +i.icon.external.square:before { content: "\f14c"; } +i.icon.bug:before { content: "\f188"; } +i.icon.mail.square:before { content: "\f199"; } +i.icon.history:before { content: "\f1da"; } +i.icon.options:before { content: "\f1de"; } +i.icon.text.telephone:before { content: "\f1e4"; } +i.icon.find:before { content: "\f1e5"; } +i.icon.wifi:before { content: "\f1eb"; } +i.icon.alarm.mute:before { content: "\f1f6"; } +i.icon.alarm.mute.outline:before { content: "\f1f7"; } +i.icon.copyright:before { content: "\f1f9"; } +i.icon.at:before { content: "\f1fa"; } +i.icon.eyedropper:before { content: "\f1fb"; } +i.icon.paint.brush:before { content: "\f1fc"; } +i.icon.heartbeat:before { content: "\f21e"; } +i.icon.mouse.pointer:before { content: "\f245"; } +i.icon.hourglass.empty:before { content: "\f250"; } +i.icon.hourglass.start:before { content: "\f251"; } +i.icon.hourglass.half:before { content: "\f252"; } +i.icon.hourglass.end:before { content: "\f253"; } +i.icon.hourglass.full:before { content: "\f254"; } +i.icon.hand.pointer:before { content: "\f25a"; } +i.icon.trademark:before { content: "\f25c"; } +i.icon.registered:before { content: "\f25d"; } +i.icon.creative.commons:before { content: "\f25e"; } +i.icon.add.to.calendar:before { content: "\f271"; } +i.icon.remove.from.calendar:before { content: "\f272"; } +i.icon.delete.calendar:before { content: "\f273"; } +i.icon.checked.calendar:before { content: "\f274"; } +i.icon.industry:before { content: "\f275"; } +i.icon.shopping.bag:before { content: "\f290"; } +i.icon.shopping.basket:before { content: "\f291"; } +i.icon.hashtag:before { content: "\f292"; } +i.icon.percent:before { content: "\f295"; } + +/* User Actions */ +i.icon.wait:before { content: "\f017"; } +i.icon.download:before { content: "\f019"; } +i.icon.repeat:before { content: "\f01e"; } +i.icon.refresh:before { content: "\f021"; } +i.icon.lock:before { content: "\f023"; } +i.icon.bookmark:before { content: "\f02e"; } +i.icon.print:before { content: "\f02f"; } +i.icon.write:before { content: "\f040"; } +i.icon.adjust:before { content: "\f042"; } +i.icon.theme:before { content: "\f043"; } +i.icon.edit:before { content: "\f044"; } +i.icon.external.share:before { content: "\f045"; } +i.icon.ban:before { content: "\f05e"; } +i.icon.mail.forward:before { content: "\f064"; } +i.icon.share:before { content: "\f064"; } +i.icon.expand:before { content: "\f065"; } +i.icon.compress:before { content: "\f066"; } +i.icon.unhide:before { content: "\f06e"; } +i.icon.hide:before { content: "\f070"; } +i.icon.random:before { content: "\f074"; } +i.icon.retweet:before { content: "\f079"; } +i.icon.sign.out:before { content: "\f08b"; } +i.icon.pin:before { content: "\f08d"; } +i.icon.sign.in:before { content: "\f090"; } +i.icon.upload:before { content: "\f093"; } +i.icon.call:before { content: "\f095"; } +i.icon.remove.bookmark:before { content: "\f097"; } +i.icon.call.square:before { content: "\f098"; } +i.icon.unlock:before { content: "\f09c"; } +i.icon.configure:before { content: "\f0ad"; } +i.icon.filter:before { content: "\f0b0"; } +i.icon.wizard:before { content: "\f0d0"; } +i.icon.undo:before { content: "\f0e2"; } +i.icon.exchange:before { content: "\f0ec"; } +i.icon.cloud.download:before { content: "\f0ed"; } +i.icon.cloud.upload:before { content: "\f0ee"; } +i.icon.reply:before { content: "\f112"; } +i.icon.reply.all:before { content: "\f122"; } +i.icon.erase:before { content: "\f12d"; } +i.icon.unlock.alternate:before { content: "\f13e"; } +i.icon.write.square:before { content: "\f14b"; } +i.icon.share.square:before { content: "\f14d"; } +i.icon.archive:before { content: "\f187"; } +i.icon.translate:before { content: "\f1ab"; } +i.icon.recycle:before { content: "\f1b8"; } +i.icon.send:before { content: "\f1d8"; } +i.icon.send.outline:before { content: "\f1d9"; } +i.icon.share.alternate:before { content: "\f1e0"; } +i.icon.share.alternate.square:before { content: "\f1e1"; } +i.icon.add.to.cart:before { content: "\f217"; } +i.icon.in.cart:before { content: "\f218"; } +i.icon.add.user:before { content: "\f234"; } +i.icon.remove.user:before { content: "\f235"; } +i.icon.object.group:before { content: "\f247"; } +i.icon.object.ungroup:before { content: "\f248"; } +i.icon.clone:before { content: "\f24d"; } +i.icon.talk:before { content: "\f27a"; } +i.icon.talk.outline:before { content: "\f27b"; } + +/* Messages */ +i.icon.help.circle:before { content: "\f059"; } +i.icon.info.circle:before { content: "\f05a"; } +i.icon.warning.circle:before { content: "\f06a"; } +i.icon.warning.sign:before { content: "\f071"; } +i.icon.announcement:before { content: "\f0a1"; } +i.icon.help:before { content: "\f128"; } +i.icon.info:before { content: "\f129"; } +i.icon.warning:before { content: "\f12a"; } +i.icon.birthday:before { content: "\f1fd"; } +i.icon.help.circle.outline:before { content: "\f29c"; } + +/* Users */ +i.icon.user:before { content: "\f007"; } +i.icon.users:before { content: "\f0c0"; } +i.icon.doctor:before { content: "\f0f0"; } +i.icon.handicap:before { content: "\f193"; } +i.icon.student:before { content: "\f19d"; } +i.icon.child:before { content: "\f1ae"; } +i.icon.spy:before { content: "\f21b"; } + +/* Gender & Sexuality */ +i.icon.female:before { content: "\f182"; } +i.icon.male:before { content: "\f183"; } +i.icon.woman:before { content: "\f221"; } +i.icon.man:before { content: "\f222"; } +i.icon.non.binary.transgender:before { content: "\f223"; } +i.icon.intergender:before { content: "\f224"; } +i.icon.transgender:before { content: "\f225"; } +i.icon.lesbian:before { content: "\f226"; } +i.icon.gay:before { content: "\f227"; } +i.icon.heterosexual:before { content: "\f228"; } +i.icon.other.gender:before { content: "\f229"; } +i.icon.other.gender.vertical:before { content: "\f22a"; } +i.icon.other.gender.horizontal:before { content: "\f22b"; } +i.icon.neuter:before { content: "\f22c"; } +i.icon.genderless:before { content: "\f22d"; } + +/* Accessibility */ +i.icon.universal.access:before { content: "\f29a"; } +i.icon.wheelchair:before { content: "\f29b"; } +i.icon.blind:before { content: "\f29d"; } +i.icon.audio.description:before { content: "\f29e"; } +i.icon.volume.control.phone:before { content: "\f2a0"; } +i.icon.braille:before { content: "\f2a1"; } +i.icon.asl:before { content: "\f2a3"; } +i.icon.assistive.listening.systems:before { content: "\f2a2"; } +i.icon.deafness:before { content: "\f2a4"; } +i.icon.sign.language:before { content: "\f2a7"; } +i.icon.low.vision:before { content: "\f2a8"; } + +/* View Adjustment */ +i.icon.block.layout:before { content: "\f009"; } +i.icon.grid.layout:before { content: "\f00a"; } +i.icon.list.layout:before { content: "\f00b"; } +i.icon.zoom:before { content: "\f00e"; } +i.icon.zoom.out:before { content: "\f010"; } +i.icon.resize.vertical:before { content: "\f07d"; } +i.icon.resize.horizontal:before { content: "\f07e"; } +i.icon.maximize:before { content: "\f0b2"; } +i.icon.crop:before { content: "\f125"; } + +/* Literal Objects */ +i.icon.cocktail:before { content: "\f000"; } +i.icon.road:before { content: "\f018"; } +i.icon.flag:before { content: "\f024"; } +i.icon.book:before { content: "\f02d"; } +i.icon.gift:before { content: "\f06b"; } +i.icon.leaf:before { content: "\f06c"; } +i.icon.fire:before { content: "\f06d"; } +i.icon.plane:before { content: "\f072"; } +i.icon.magnet:before { content: "\f076"; } +i.icon.lemon:before { content: "\f094"; } +i.icon.world:before { content: "\f0ac"; } +i.icon.travel:before { content: "\f0b1"; } +i.icon.shipping:before { content: "\f0d1"; } +i.icon.money:before { content: "\f0d6"; } +i.icon.legal:before { content: "\f0e3"; } +i.icon.lightning:before { content: "\f0e7"; } +i.icon.umbrella:before { content: "\f0e9"; } +i.icon.treatment:before { content: "\f0f1"; } +i.icon.suitcase:before { content: "\f0f2"; } +i.icon.bar:before { content: "\f0fc"; } +i.icon.flag.outline:before { content: "\f11d"; } +i.icon.flag.checkered:before { content: "\f11e"; } +i.icon.puzzle:before { content: "\f12e"; } +i.icon.fire.extinguisher:before { content: "\f134"; } +i.icon.rocket:before { content: "\f135"; } +i.icon.anchor:before { content: "\f13d"; } +i.icon.bullseye:before { content: "\f140"; } +i.icon.sun:before { content: "\f185"; } +i.icon.moon:before { content: "\f186"; } +i.icon.fax:before { content: "\f1ac"; } +i.icon.life.ring:before { content: "\f1cd"; } +i.icon.bomb:before { content: "\f1e2"; } +i.icon.soccer:before { content: "\f1e3"; } +i.icon.calculator:before { content: "\f1ec"; } +i.icon.diamond:before { content: "\f219"; } +i.icon.sticky.note:before { content: "\f249"; } +i.icon.sticky.note.outline:before { content: "\f24a"; } +i.icon.law:before { content: "\f24e"; } +i.icon.hand.peace:before { content: "\f25b"; } +i.icon.hand.rock:before { content: "\f255"; } +i.icon.hand.paper:before { content: "\f256"; } +i.icon.hand.scissors:before { content: "\f257"; } +i.icon.hand.lizard:before { content: "\f258"; } +i.icon.hand.spock:before { content: "\f259"; } +i.icon.tv:before { content: "\f26c"; } + +/* Shapes */ +i.icon.crosshairs:before { content: "\f05b"; } +i.icon.asterisk:before { content: "\f069"; } +i.icon.square.outline:before { content: "\f096"; } +i.icon.certificate:before { content: "\f0a3"; } +i.icon.square:before { content: "\f0c8"; } +i.icon.quote.left:before { content: "\f10d"; } +i.icon.quote.right:before { content: "\f10e"; } +i.icon.spinner:before { content: "\f110"; } +i.icon.circle:before { content: "\f111"; } +i.icon.ellipsis.horizontal:before { content: "\f141"; } +i.icon.ellipsis.vertical:before { content: "\f142"; } +i.icon.cube:before { content: "\f1b2"; } +i.icon.cubes:before { content: "\f1b3"; } +i.icon.circle.notched:before { content: "\f1ce"; } +i.icon.circle.thin:before { content: "\f1db"; } + +/* Item Selection */ +i.icon.checkmark:before { content: "\f00c"; } +i.icon.remove:before { content: "\f00d"; } +i.icon.checkmark.box:before { content: "\f046"; } +i.icon.move:before { content: "\f047"; } +i.icon.add.circle:before { content: "\f055"; } +i.icon.minus.circle:before { content: "\f056"; } +i.icon.remove.circle:before { content: "\f057"; } +i.icon.check.circle:before { content: "\f058"; } +i.icon.remove.circle.outline:before { content: "\f05c"; } +i.icon.check.circle.outline:before { content: "\f05d"; } +i.icon.plus:before { content: "\f067"; } +i.icon.minus:before { content: "\f068"; } +i.icon.add.square:before { content: "\f0fe"; } +i.icon.radio:before { content: "\f10c"; } +i.icon.minus.square:before { content: "\f146"; } +i.icon.minus.square.outline:before { content: "\f147"; } +i.icon.check.square:before { content: "\f14a"; } +i.icon.selected.radio:before { content: "\f192"; } +i.icon.plus.square.outline:before { content: "\f196"; } +i.icon.toggle.off:before { content: "\f204"; } +i.icon.toggle.on:before { content: "\f205"; } + +/* Media */ +i.icon.film:before { content: "\f008"; } +i.icon.sound:before { content: "\f025"; } +i.icon.photo:before { content: "\f030"; } +i.icon.bar.chart:before { content: "\f080"; } +i.icon.camera.retro:before { content: "\f083"; } +i.icon.newspaper:before { content: "\f1ea"; } +i.icon.area.chart:before { content: "\f1fe"; } +i.icon.pie.chart:before { content: "\f200"; } +i.icon.line.chart:before { content: "\f201"; } + +/* Pointers */ +i.icon.arrow.circle.outline.down:before { content: "\f01a"; } +i.icon.arrow.circle.outline.up:before { content: "\f01b"; } +i.icon.chevron.left:before { content: "\f053"; } +i.icon.chevron.right:before { content: "\f054"; } +i.icon.arrow.left:before { content: "\f060"; } +i.icon.arrow.right:before { content: "\f061"; } +i.icon.arrow.up:before { content: "\f062"; } +i.icon.arrow.down:before { content: "\f063"; } +i.icon.chevron.up:before { content: "\f077"; } +i.icon.chevron.down:before { content: "\f078"; } +i.icon.pointing.right:before { content: "\f0a4"; } +i.icon.pointing.left:before { content: "\f0a5"; } +i.icon.pointing.up:before { content: "\f0a6"; } +i.icon.pointing.down:before { content: "\f0a7"; } +i.icon.arrow.circle.left:before { content: "\f0a8"; } +i.icon.arrow.circle.right:before { content: "\f0a9"; } +i.icon.arrow.circle.up:before { content: "\f0aa"; } +i.icon.arrow.circle.down:before { content: "\f0ab"; } +i.icon.caret.down:before { content: "\f0d7"; } +i.icon.caret.up:before { content: "\f0d8"; } +i.icon.caret.left:before { content: "\f0d9"; } +i.icon.caret.right:before { content: "\f0da"; } +i.icon.angle.double.left:before { content: "\f100"; } +i.icon.angle.double.right:before { content: "\f101"; } +i.icon.angle.double.up:before { content: "\f102"; } +i.icon.angle.double.down:before { content: "\f103"; } +i.icon.angle.left:before { content: "\f104"; } +i.icon.angle.right:before { content: "\f105"; } +i.icon.angle.up:before { content: "\f106"; } +i.icon.angle.down:before { content: "\f107"; } +i.icon.chevron.circle.left:before { content: "\f137"; } +i.icon.chevron.circle.right:before { content: "\f138"; } +i.icon.chevron.circle.up:before { content: "\f139"; } +i.icon.chevron.circle.down:before { content: "\f13a"; } +i.icon.toggle.down:before { content: "\f150"; } +i.icon.toggle.up:before { content: "\f151"; } +i.icon.toggle.right:before { content: "\f152"; } +i.icon.long.arrow.down:before { content: "\f175"; } +i.icon.long.arrow.up:before { content: "\f176"; } +i.icon.long.arrow.left:before { content: "\f177"; } +i.icon.long.arrow.right:before { content: "\f178"; } +i.icon.arrow.circle.outline.right:before { content: "\f18e"; } +i.icon.arrow.circle.outline.left:before { content: "\f190"; } +i.icon.toggle.left:before { content: "\f191"; } + +/* Mobile */ +i.icon.tablet:before { content: "\f10a"; } +i.icon.mobile:before { content: "\f10b"; } +i.icon.battery.full:before { content: "\f240"; } +i.icon.battery.high:before { content: "\f241"; } +i.icon.battery.medium:before { content: "\f242"; } +i.icon.battery.low:before { content: "\f243"; } +i.icon.battery.empty:before { content: "\f244"; } + +/* Computer */ +i.icon.power:before { content: "\f011"; } +i.icon.trash.outline:before { content: "\f014"; } +i.icon.disk.outline:before { content: "\f0a0"; } +i.icon.desktop:before { content: "\f108"; } +i.icon.laptop:before { content: "\f109"; } +i.icon.game:before { content: "\f11b"; } +i.icon.keyboard:before { content: "\f11c"; } +i.icon.plug:before { content: "\f1e6"; } + +/* File System */ +i.icon.trash:before { content: "\f1f8"; } +i.icon.file.outline:before { content: "\f016"; } +i.icon.folder:before { content: "\f07b"; } +i.icon.folder.open:before { content: "\f07c"; } +i.icon.file.text.outline:before { content: "\f0f6"; } +i.icon.folder.outline:before { content: "\f114"; } +i.icon.folder.open.outline:before { content: "\f115"; } +i.icon.level.up:before { content: "\f148"; } +i.icon.level.down:before { content: "\f149"; } +i.icon.file:before { content: "\f15b"; } +i.icon.file.text:before { content: "\f15c"; } +i.icon.file.pdf.outline:before { content: "\f1c1"; } +i.icon.file.word.outline:before { content: "\f1c2"; } +i.icon.file.excel.outline:before { content: "\f1c3"; } +i.icon.file.powerpoint.outline:before { content: "\f1c4"; } +i.icon.file.image.outline:before { content: "\f1c5"; } +i.icon.file.archive.outline:before { content: "\f1c6"; } +i.icon.file.audio.outline:before { content: "\f1c7"; } +i.icon.file.video.outline:before { content: "\f1c8"; } +i.icon.file.code.outline:before { content: "\f1c9"; } + +/* Technologies */ +i.icon.qrcode:before { content: "\f029"; } +i.icon.barcode:before { content: "\f02a"; } +i.icon.rss:before { content: "\f09e"; } +i.icon.fork:before { content: "\f126"; } +i.icon.html5:before { content: "\f13b"; } +i.icon.css3:before { content: "\f13c"; } +i.icon.rss.square:before { content: "\f143"; } +i.icon.openid:before { content: "\f19b"; } +i.icon.database:before { content: "\f1c0"; } +i.icon.server:before { content: "\f233"; } +i.icon.usb:before { content: "\f287"; } +i.icon.bluetooth:before { content: "\f293"; } +i.icon.bluetooth.alternative:before { content: "\f294"; } + +/* Rating */ +i.icon.heart:before { content: "\f004"; } +i.icon.star:before { content: "\f005"; } +i.icon.empty.star:before { content: "\f006"; } +i.icon.thumbs.outline.up:before { content: "\f087"; } +i.icon.thumbs.outline.down:before { content: "\f088"; } +i.icon.star.half:before { content: "\f089"; } +i.icon.empty.heart:before { content: "\f08a"; } +i.icon.smile:before { content: "\f118"; } +i.icon.frown:before { content: "\f119"; } +i.icon.meh:before { content: "\f11a"; } +i.icon.star.half.empty:before { content: "\f123"; } +i.icon.thumbs.up:before { content: "\f164"; } +i.icon.thumbs.down:before { content: "\f165"; } + +/* Audio */ +i.icon.music:before { content: "\f001"; } +i.icon.video.play.outline:before { content: "\f01d"; } +i.icon.volume.off:before { content: "\f026"; } +i.icon.volume.down:before { content: "\f027"; } +i.icon.volume.up:before { content: "\f028"; } +i.icon.record:before { content: "\f03d"; } +i.icon.step.backward:before { content: "\f048"; } +i.icon.fast.backward:before { content: "\f049"; } +i.icon.backward:before { content: "\f04a"; } +i.icon.play:before { content: "\f04b"; } +i.icon.pause:before { content: "\f04c"; } +i.icon.stop:before { content: "\f04d"; } +i.icon.forward:before { content: "\f04e"; } +i.icon.fast.forward:before { content: "\f050"; } +i.icon.step.forward:before { content: "\f051"; } +i.icon.eject:before { content: "\f052"; } +i.icon.unmute:before { content: "\f130"; } +i.icon.mute:before { content: "\f131"; } +i.icon.video.play:before { content: "\f144"; } +i.icon.closed.captioning:before { content: "\f20a"; } +i.icon.pause.circle:before { content: "\f28b"; } +i.icon.pause.circle.outline:before { content: "\f28c"; } +i.icon.stop.circle:before { content: "\f28d"; } +i.icon.stop.circle.outline:before { content: "\f28e"; } + +/* Map, Locations, & Transportation */ +i.icon.marker:before { content: "\f041"; } +i.icon.coffee:before { content: "\f0f4"; } +i.icon.food:before { content: "\f0f5"; } +i.icon.building.outline:before { content: "\f0f7"; } +i.icon.hospital:before { content: "\f0f8"; } +i.icon.emergency:before { content: "\f0f9"; } +i.icon.first.aid:before { content: "\f0fa"; } +i.icon.military:before { content: "\f0fb"; } +i.icon.h:before { content: "\f0fd"; } +i.icon.location.arrow:before { content: "\f124"; } +i.icon.compass:before { content: "\f14e"; } +i.icon.space.shuttle:before { content: "\f197"; } +i.icon.university:before { content: "\f19c"; } +i.icon.building:before { content: "\f1ad"; } +i.icon.paw:before { content: "\f1b0"; } +i.icon.spoon:before { content: "\f1b1"; } +i.icon.car:before { content: "\f1b9"; } +i.icon.taxi:before { content: "\f1ba"; } +i.icon.tree:before { content: "\f1bb"; } +i.icon.bicycle:before { content: "\f206"; } +i.icon.bus:before { content: "\f207"; } +i.icon.ship:before { content: "\f21a"; } +i.icon.motorcycle:before { content: "\f21c"; } +i.icon.street.view:before { content: "\f21d"; } +i.icon.hotel:before { content: "\f236"; } +i.icon.train:before { content: "\f238"; } +i.icon.subway:before { content: "\f239"; } +i.icon.map.pin:before { content: "\f276"; } +i.icon.map.signs:before { content: "\f277"; } +i.icon.map.outline:before { content: "\f278"; } +i.icon.map:before { content: "\f279"; } + +/* Tables */ +i.icon.table:before { content: "\f0ce"; } +i.icon.columns:before { content: "\f0db"; } +i.icon.sort:before { content: "\f0dc"; } +i.icon.sort.descending:before { content: "\f0dd"; } +i.icon.sort.ascending:before { content: "\f0de"; } +i.icon.sort.alphabet.ascending:before { content: "\f15d"; } +i.icon.sort.alphabet.descending:before { content: "\f15e"; } +i.icon.sort.content.ascending:before { content: "\f160"; } +i.icon.sort.content.descending:before { content: "\f161"; } +i.icon.sort.numeric.ascending:before { content: "\f162"; } +i.icon.sort.numeric.descending:before { content: "\f163"; } + +/* Text Editor */ +i.icon.font:before { content: "\f031"; } +i.icon.bold:before { content: "\f032"; } +i.icon.italic:before { content: "\f033"; } +i.icon.text.height:before { content: "\f034"; } +i.icon.text.width:before { content: "\f035"; } +i.icon.align.left:before { content: "\f036"; } +i.icon.align.center:before { content: "\f037"; } +i.icon.align.right:before { content: "\f038"; } +i.icon.align.justify:before { content: "\f039"; } +i.icon.list:before { content: "\f03a"; } +i.icon.outdent:before { content: "\f03b"; } +i.icon.indent:before { content: "\f03c"; } +i.icon.linkify:before { content: "\f0c1"; } +i.icon.cut:before { content: "\f0c4"; } +i.icon.copy:before { content: "\f0c5"; } +i.icon.attach:before { content: "\f0c6"; } +i.icon.save:before { content: "\f0c7"; } +i.icon.content:before { content: "\f0c9"; } +i.icon.unordered.list:before { content: "\f0ca"; } +i.icon.ordered.list:before { content: "\f0cb"; } +i.icon.strikethrough:before { content: "\f0cc"; } +i.icon.underline:before { content: "\f0cd"; } +i.icon.paste:before { content: "\f0ea"; } +i.icon.unlinkify:before { content: "\f127"; } +i.icon.superscript:before { content: "\f12b"; } +i.icon.subscript:before { content: "\f12c"; } +i.icon.header:before { content: "\f1dc"; } +i.icon.paragraph:before { content: "\f1dd"; } +i.icon.text.cursor:before { content: "\f246"; } + +/* Currency */ +i.icon.euro:before { content: "\f153"; } +i.icon.pound:before { content: "\f154"; } +i.icon.dollar:before { content: "\f155"; } +i.icon.rupee:before { content: "\f156"; } +i.icon.yen:before { content: "\f157"; } +i.icon.ruble:before { content: "\f158"; } +i.icon.won:before { content: "\f159"; } +i.icon.bitcoin:before { content: "\f15a"; } +i.icon.lira:before { content: "\f195"; } +i.icon.shekel:before { content: "\f20b"; } + +/* Payment Options */ +i.icon.paypal:before { content: "\f1ed"; } +i.icon.google.wallet:before { content: "\f1ee"; } +i.icon.visa:before { content: "\f1f0"; } +i.icon.mastercard:before { content: "\f1f1"; } +i.icon.discover:before { content: "\f1f2"; } +i.icon.american.express:before { content: "\f1f3"; } +i.icon.paypal.card:before { content: "\f1f4"; } +i.icon.stripe:before { content: "\f1f5"; } +i.icon.japan.credit.bureau:before { content: "\f24b"; } +i.icon.diners.club:before { content: "\f24c"; } +i.icon.credit.card.alternative:before { content: "\f283"; } + +/* Networks and Websites*/ +i.icon.twitter.square:before { content: "\f081"; } +i.icon.facebook.square:before { content: "\f082"; } +i.icon.linkedin.square:before { content: "\f08c"; } +i.icon.github.square:before { content: "\f092"; } +i.icon.twitter:before { content: "\f099"; } +i.icon.facebook.f:before { content: "\f09a"; } +i.icon.github:before { content: "\f09b"; } +i.icon.pinterest:before { content: "\f0d2"; } +i.icon.pinterest.square:before { content: "\f0d3"; } +i.icon.google.plus.square:before { content: "\f0d4"; } +i.icon.google.plus:before { content: "\f0d5"; } +i.icon.linkedin:before { content: "\f0e1"; } +i.icon.github.alternate:before { content: "\f113"; } +i.icon.maxcdn:before { content: "\f136"; } +i.icon.youtube.square:before { content: "\f166"; } +i.icon.youtube:before { content: "\f167"; } +i.icon.xing:before { content: "\f168"; } +i.icon.xing.square:before { content: "\f169"; } +i.icon.youtube.play:before { content: "\f16a"; } +i.icon.dropbox:before { content: "\f16b"; } +i.icon.stack.overflow:before { content: "\f16c"; } +i.icon.instagram:before { content: "\f16d"; } +i.icon.flickr:before { content: "\f16e"; } +i.icon.adn:before { content: "\f170"; } +i.icon.bitbucket:before { content: "\f171"; } +i.icon.bitbucket.square:before { content: "\f172"; } +i.icon.tumblr:before { content: "\f173"; } +i.icon.tumblr.square:before { content: "\f174"; } +i.icon.apple:before { content: "\f179"; } +i.icon.windows:before { content: "\f17a"; } +i.icon.android:before { content: "\f17b"; } +i.icon.linux:before { content: "\f17c"; } +i.icon.dribble:before { content: "\f17d"; } +i.icon.skype:before { content: "\f17e"; } +i.icon.foursquare:before { content: "\f180"; } +i.icon.trello:before { content: "\f181"; } +i.icon.gittip:before { content: "\f184"; } +i.icon.vk:before { content: "\f189"; } +i.icon.weibo:before { content: "\f18a"; } +i.icon.renren:before { content: "\f18b"; } +i.icon.pagelines:before { content: "\f18c"; } +i.icon.stack.exchange:before { content: "\f18d"; } +i.icon.vimeo.square:before { content: "\f194"; } +i.icon.slack:before { content: "\f198"; } +i.icon.wordpress:before { content: "\f19a"; } +i.icon.yahoo:before { content: "\f19e"; } +i.icon.google:before { content: "\f1a0"; } +i.icon.reddit:before { content: "\f1a1"; } +i.icon.reddit.square:before { content: "\f1a2"; } +i.icon.stumbleupon.circle:before { content: "\f1a3"; } +i.icon.stumbleupon:before { content: "\f1a4"; } +i.icon.delicious:before { content: "\f1a5"; } +i.icon.digg:before { content: "\f1a6"; } +i.icon.pied.piper:before { content: "\f1a7"; } +i.icon.pied.piper.alternate:before { content: "\f1a8"; } +i.icon.drupal:before { content: "\f1a9"; } +i.icon.joomla:before { content: "\f1aa"; } +i.icon.behance:before { content: "\f1b4"; } +i.icon.behance.square:before { content: "\f1b5"; } +i.icon.steam:before { content: "\f1b6"; } +i.icon.steam.square:before { content: "\f1b7"; } +i.icon.spotify:before { content: "\f1bc"; } +i.icon.deviantart:before { content: "\f1bd"; } +i.icon.soundcloud:before { content: "\f1be"; } +i.icon.vine:before { content: "\f1ca"; } +i.icon.codepen:before { content: "\f1cb"; } +i.icon.jsfiddle:before { content: "\f1cc"; } +i.icon.rebel:before { content: "\f1d0"; } +i.icon.empire:before { content: "\f1d1"; } +i.icon.git.square:before { content: "\f1d2"; } +i.icon.git:before { content: "\f1d3"; } +i.icon.hacker.news:before { content: "\f1d4"; } +i.icon.tencent.weibo:before { content: "\f1d5"; } +i.icon.qq:before { content: "\f1d6"; } +i.icon.wechat:before { content: "\f1d7"; } +i.icon.slideshare:before { content: "\f1e7"; } +i.icon.twitch:before { content: "\f1e8"; } +i.icon.yelp:before { content: "\f1e9"; } +i.icon.lastfm:before { content: "\f202"; } +i.icon.lastfm.square:before { content: "\f203"; } +i.icon.ioxhost:before { content: "\f208"; } +i.icon.angellist:before { content: "\f209"; } +i.icon.meanpath:before { content: "\f20c"; } +i.icon.buysellads:before { content: "\f20d"; } +i.icon.connectdevelop:before { content: "\f20e"; } +i.icon.dashcube:before { content: "\f210"; } +i.icon.forumbee:before { content: "\f211"; } +i.icon.leanpub:before { content: "\f212"; } +i.icon.sellsy:before { content: "\f213"; } +i.icon.shirtsinbulk:before { content: "\f214"; } +i.icon.simplybuilt:before { content: "\f215"; } +i.icon.skyatlas:before { content: "\f216"; } +i.icon.facebook:before { content: "\f230"; } +i.icon.pinterest:before { content: "\f231"; } +i.icon.whatsapp:before { content: "\f232"; } +i.icon.viacoin:before { content: "\f237"; } +i.icon.medium:before { content: "\f23a"; } +i.icon.y.combinator:before { content: "\f23b"; } +i.icon.optinmonster:before { content: "\f23c"; } +i.icon.opencart:before { content: "\f23d"; } +i.icon.expeditedssl:before { content: "\f23e"; } +i.icon.gg:before { content: "\f260"; } +i.icon.gg.circle:before { content: "\f261"; } +i.icon.tripadvisor:before { content: "\f262"; } +i.icon.odnoklassniki:before { content: "\f263"; } +i.icon.odnoklassniki.square:before { content: "\f264"; } +i.icon.pocket:before { content: "\f265"; } +i.icon.wikipedia:before { content: "\f266"; } +i.icon.safari:before { content: "\f267"; } +i.icon.chrome:before { content: "\f268"; } +i.icon.firefox:before { content: "\f269"; } +i.icon.opera:before { content: "\f26a"; } +i.icon.internet.explorer:before { content: "\f26b"; } +i.icon.contao:before { content: "\f26d"; } +i.icon.\35 00px:before { content: "\f26e"; } +i.icon.amazon:before { content: "\f270"; } +i.icon.houzz:before { content: "\f27c"; } +i.icon.vimeo:before { content: "\f27d"; } +i.icon.black.tie:before { content: "\f27e"; } +i.icon.fonticons:before { content: "\f280"; } +i.icon.reddit.alien:before { content: "\f281"; } +i.icon.microsoft.edge:before { content: "\f282"; } +i.icon.codiepie:before { content: "\f284"; } +i.icon.modx:before { content: "\f285"; } +i.icon.fort.awesome:before { content: "\f286"; } +i.icon.product.hunt:before { content: "\f288"; } +i.icon.mixcloud:before { content: "\f289"; } +i.icon.scribd:before { content: "\f28a"; } +i.icon.gitlab:before { content: "\f296"; } +i.icon.wpbeginner:before { content: "\f297"; } +i.icon.wpforms:before { content: "\f298"; } +i.icon.envira.gallery:before { content: "\f299"; } +i.icon.glide:before { content: "\f2a5"; } +i.icon.glide.g:before { content: "\f2a6"; } +i.icon.viadeo:before { content: "\f2a9"; } +i.icon.viadeo.square:before { content: "\f2aa"; } +i.icon.snapchat:before { content: "\f2ab"; } +i.icon.snapchat.ghost:before { content: "\f2ac"; } +i.icon.snapchat.square:before { content: "\f2ad"; } +i.icon.pied.piper.hat:before { content: "\f2ae"; } +i.icon.first.order:before { content: "\f2b0"; } +i.icon.yoast:before { content: "\f2b1"; } +i.icon.themeisle:before { content: "\f2b2"; } +i.icon.google.plus.circle:before { content: "\f2b3"; } +i.icon.font.awesome:before { content: "\f2b4"; } + +/******************************* + Aliases +*******************************/ + +i.icon.like:before { content: "\f004"; } +i.icon.favorite:before { content: "\f005"; } +i.icon.video:before { content: "\f008"; } +i.icon.check:before { content: "\f00c"; } +i.icon.close:before { content: "\f00d"; } +i.icon.cancel:before { content: "\f00d"; } +i.icon.delete:before { content: "\f00d"; } +i.icon.x:before { content: "\f00d"; } +i.icon.zoom.in:before { content: "\f00e"; } +i.icon.magnify:before { content: "\f00e"; } +i.icon.shutdown:before { content: "\f011"; } +i.icon.clock:before { content: "\f017"; } +i.icon.time:before { content: "\f017"; } +i.icon.play.circle.outline:before { content: "\f01d"; } +i.icon.headphone:before { content: "\f025"; } +i.icon.camera:before { content: "\f030"; } +i.icon.video.camera:before { content: "\f03d"; } +i.icon.picture:before { content: "\f03e"; } +i.icon.pencil:before { content: "\f040"; } +i.icon.compose:before { content: "\f040"; } +i.icon.point:before { content: "\f041"; } +i.icon.tint:before { content: "\f043"; } +i.icon.signup:before { content: "\f044"; } +i.icon.plus.circle:before { content: "\f055"; } +i.icon.question.circle:before { content: "\f059"; } +i.icon.dont:before { content: "\f05e"; } +i.icon.minimize:before { content: "\f066"; } +i.icon.add:before { content: "\f067"; } +i.icon.exclamation.circle:before { content: "\f06a"; } +i.icon.attention:before { content: "\f06a"; } +i.icon.eye:before { content: "\f06e"; } +i.icon.exclamation.triangle:before { content: "\f071"; } +i.icon.shuffle:before { content: "\f074"; } +i.icon.chat:before { content: "\f075"; } +i.icon.cart:before { content: "\f07a"; } +i.icon.shopping.cart:before { content: "\f07a"; } +i.icon.bar.graph:before { content: "\f080"; } +i.icon.key:before { content: "\f084"; } +i.icon.cogs:before { content: "\f085"; } +i.icon.discussions:before { content: "\f086"; } +i.icon.like.outline:before { content: "\f087"; } +i.icon.dislike.outline:before { content: "\f088"; } +i.icon.heart.outline:before { content: "\f08a"; } +i.icon.log.out:before { content: "\f08b"; } +i.icon.thumb.tack:before { content: "\f08d"; } +i.icon.winner:before { content: "\f091"; } +i.icon.phone:before { content: "\f095"; } +i.icon.bookmark.outline:before { content: "\f097"; } +i.icon.phone.square:before { content: "\f098"; } +i.icon.credit.card:before { content: "\f09d"; } +i.icon.hdd.outline:before { content: "\f0a0"; } +i.icon.bullhorn:before { content: "\f0a1"; } +i.icon.bell.outline:before { content: "\f0a2"; } +i.icon.hand.outline.right:before { content: "\f0a4"; } +i.icon.hand.outline.left:before { content: "\f0a5"; } +i.icon.hand.outline.up:before { content: "\f0a6"; } +i.icon.hand.outline.down:before { content: "\f0a7"; } +i.icon.globe:before { content: "\f0ac"; } +i.icon.wrench:before { content: "\f0ad"; } +i.icon.briefcase:before { content: "\f0b1"; } +i.icon.group:before { content: "\f0c0"; } +i.icon.linkify:before { content: "\f0c1"; } +i.icon.chain:before { content: "\f0c1"; } +i.icon.flask:before { content: "\f0c3"; } +i.icon.sidebar:before { content: "\f0c9"; } +i.icon.bars:before { content: "\f0c9"; } +i.icon.list.ul:before { content: "\f0ca"; } +i.icon.list.ol:before { content: "\f0cb"; } +i.icon.numbered.list:before { content: "\f0cb"; } +i.icon.magic:before { content: "\f0d0"; } +i.icon.truck:before { content: "\f0d1"; } +i.icon.currency:before { content: "\f0d6"; } +i.icon.triangle.down:before { content: "\f0d7"; } +i.icon.dropdown:before { content: "\f0d7"; } +i.icon.triangle.up:before { content: "\f0d8"; } +i.icon.triangle.left:before { content: "\f0d9"; } +i.icon.triangle.right:before { content: "\f0da"; } +i.icon.envelope:before { content: "\f0e0"; } +i.icon.conversation:before { content: "\f0e6"; } +i.icon.rain:before { content: "\f0e9"; } +i.icon.clipboard:before { content: "\f0ea"; } +i.icon.lightbulb:before { content: "\f0eb"; } +i.icon.bell:before { content: "\f0f3"; } +i.icon.ambulance:before { content: "\f0f9"; } +i.icon.medkit:before { content: "\f0fa"; } +i.icon.fighter.jet:before { content: "\f0fb"; } +i.icon.beer:before { content: "\f0fc"; } +i.icon.plus.square:before { content: "\f0fe"; } +i.icon.computer:before { content: "\f108"; } +i.icon.circle.outline:before { content: "\f10c"; } +i.icon.gamepad:before { content: "\f11b"; } +i.icon.star.half.full:before { content: "\f123"; } +i.icon.broken.chain:before { content: "\f127"; } +i.icon.question:before { content: "\f128"; } +i.icon.exclamation:before { content: "\f12a"; } +i.icon.eraser:before { content: "\f12d"; } +i.icon.microphone:before { content: "\f130"; } +i.icon.microphone.slash:before { content: "\f131"; } +i.icon.shield:before { content: "\f132"; } +i.icon.target:before { content: "\f140"; } +i.icon.play.circle:before { content: "\f144"; } +i.icon.pencil.square:before { content: "\f14b"; } +i.icon.eur:before { content: "\f153"; } +i.icon.gbp:before { content: "\f154"; } +i.icon.usd:before { content: "\f155"; } +i.icon.inr:before { content: "\f156"; } +i.icon.cny:before { content: "\f157"; } +i.icon.rmb:before { content: "\f157"; } +i.icon.jpy:before { content: "\f157"; } +i.icon.rouble:before { content: "\f158"; } +i.icon.rub:before { content: "\f158"; } +i.icon.krw:before { content: "\f159"; } +i.icon.btc:before { content: "\f15a"; } +i.icon.gratipay:before { content: "\f184"; } +i.icon.zip:before { content: "\f187"; } +i.icon.dot.circle.outline:before { content: "\f192"; } +i.icon.try:before { content: "\f195"; } +i.icon.graduation:before { content: "\f19d"; } +i.icon.circle.outline:before { content: "\f1db"; } +i.icon.sliders:before { content: "\f1de"; } +i.icon.weixin:before { content: "\f1d7"; } +i.icon.tty:before { content: "\f1e4"; } +i.icon.teletype:before { content: "\f1e4"; } +i.icon.binoculars:before { content: "\f1e5"; } +i.icon.power.cord:before { content: "\f1e6"; } +i.icon.wi-fi:before { content: "\f1eb"; } +i.icon.visa.card:before { content: "\f1f0"; } +i.icon.mastercard.card:before { content: "\f1f1"; } +i.icon.discover.card:before { content: "\f1f2"; } +i.icon.amex:before { content: "\f1f3"; } +i.icon.american.express.card:before { content: "\f1f3"; } +i.icon.stripe.card:before { content: "\f1f5"; } +i.icon.bell.slash:before { content: "\f1f6"; } +i.icon.bell.slash.outline:before { content: "\f1f7"; } +i.icon.area.graph:before { content: "\f1fe"; } +i.icon.pie.graph:before { content: "\f200"; } +i.icon.line.graph:before { content: "\f201"; } +i.icon.cc:before { content: "\f20a"; } +i.icon.sheqel:before { content: "\f20b"; } +i.icon.ils:before { content: "\f20b"; } +i.icon.plus.cart:before { content: "\f217"; } +i.icon.arrow.down.cart:before { content: "\f218"; } +i.icon.detective:before { content: "\f21b"; } +i.icon.venus:before { content: "\f221"; } +i.icon.mars:before { content: "\f222"; } +i.icon.mercury:before { content: "\f223"; } +i.icon.intersex:before { content: "\f224"; } +i.icon.venus.double:before { content: "\f226"; } +i.icon.female.homosexual:before { content: "\f226"; } +i.icon.mars.double:before { content: "\f227"; } +i.icon.male.homosexual:before { content: "\f227"; } +i.icon.venus.mars:before { content: "\f228"; } +i.icon.mars.stroke:before { content: "\f229"; } +i.icon.mars.alternate:before { content: "\f229"; } +i.icon.mars.vertical:before { content: "\f22a"; } +i.icon.mars.stroke.vertical:before { content: "\f22a"; } +i.icon.mars.horizontal:before { content: "\f22b"; } +i.icon.mars.stroke.horizontal:before { content: "\f22b"; } +i.icon.asexual:before { content: "\f22d"; } +i.icon.facebook.official:before { content: "\f230"; } +i.icon.user.plus:before { content: "\f234"; } +i.icon.user.times:before { content: "\f235"; } +i.icon.user.close:before { content: "\f235"; } +i.icon.user.cancel:before { content: "\f235"; } +i.icon.user.delete:before { content: "\f235"; } +i.icon.user.x:before { content: "\f235"; } +i.icon.bed:before { content: "\f236"; } +i.icon.yc:before { content: "\f23b"; } +i.icon.ycombinator:before { content: "\f23b"; } +i.icon.battery.four:before { content: "\f240"; } +i.icon.battery.three:before { content: "\f241"; } +i.icon.battery.three.quarters:before { content: "\f241"; } +i.icon.battery.two:before { content: "\f242"; } +i.icon.battery.half:before { content: "\f242"; } +i.icon.battery.one:before { content: "\f243"; } +i.icon.battery.quarter:before { content: "\f243"; } +i.icon.battery.zero:before { content: "\f244"; } +i.icon.i.cursor:before { content: "\f246"; } +i.icon.jcb:before { content: "\f24b"; } +i.icon.japan.credit.bureau.card:before { content: "\f24b"; } +i.icon.diners.club.card:before { content: "\f24c"; } +i.icon.balance:before { content: "\f24e"; } +i.icon.hourglass.outline:before { content: "\f250"; } +i.icon.hourglass.zero:before { content: "\f250"; } +i.icon.hourglass.one:before { content: "\f251"; } +i.icon.hourglass.two:before { content: "\f252"; } +i.icon.hourglass.three:before { content: "\f253"; } +i.icon.hourglass.four:before { content: "\f254"; } +i.icon.grab:before { content: "\f255"; } +i.icon.hand.victory:before { content: "\f25b"; } +i.icon.tm:before { content: "\f25c"; } +i.icon.r.circle:before { content: "\f25d"; } +i.icon.television:before { content: "\f26c"; } +i.icon.five.hundred.pixels:before { content: "\f26e"; } +i.icon.calendar.plus:before { content: "\f271"; } +i.icon.calendar.minus:before { content: "\f272"; } +i.icon.calendar.times:before { content: "\f273"; } +i.icon.calendar.check:before { content: "\f274"; } +i.icon.factory:before { content: "\f275"; } +i.icon.commenting:before { content: "\f27a"; } +i.icon.commenting.outline:before { content: "\f27b"; } +i.icon.edge:before { content: "\f282"; } +i.icon.ms.edge:before { content: "\f282"; } +i.icon.wordpress.beginner:before { content: "\f297"; } +i.icon.wordpress.forms:before { content: "\f298"; } +i.icon.envira:before { content: "\f299"; } +i.icon.question.circle.outline:before { content: "\f29c"; } +i.icon.assistive.listening.devices:before { content: "\f2a2"; } +i.icon.als:before { content: "\f2a2"; } +i.icon.ald:before { content: "\f2a2"; } +i.icon.asl.interpreting:before { content: "\f2a3"; } +i.icon.deaf:before { content: "\f2a4"; } +i.icon.american.sign.language.interpreting:before { content: "\f2a3"; } +i.icon.hard.of.hearing:before{ content: "\f2a4"; } +i.icon.signing:before { content: "\f2a7"; } +i.icon.new.pied.piper:before { content: "\f2ae"; } +i.icon.theme.isle:before { content: "\f2b2"; } +i.icon.google.plus.official:before { content: "\f2b3"; } +i.icon.fa:before { content: "\f2b4"; } diff --git a/src/semantic/src/themes/default/elements/icon.variables b/src/semantic/src/themes/default/elements/icon.variables new file mode 100644 index 0000000..245ea00 --- /dev/null +++ b/src/semantic/src/themes/default/elements/icon.variables @@ -0,0 +1,62 @@ +/******************************* + Icon +*******************************/ + +/*------------------- + Icon Variables +--------------------*/ + +@fontName: 'icons'; +@fallbackSRC: url("@{fontPath}/@{fontName}.eot"); +@src: + url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), + url("@{fontPath}/@{fontName}.woff2") format('woff2'), + url("@{fontPath}/@{fontName}.woff") format('woff'), + url("@{fontPath}/@{fontName}.ttf") format('truetype'), + url("@{fontPath}/@{fontName}.svg#icons") format('svg') +; + +@opacity: 1; +@width: @iconWidth; +@height: 1em; +@distanceFromText: 0.25rem; + + +/* Variations */ + +@linkOpacity: 0.8; +@linkDuration: 0.3s; +@loadingDuration: 2s; + +@circularSize: 2em; +@circularPadding: 0.5em 0.5em; +@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + +@borderedSize: 2em; +@borderedVerticalPadding: ((@borderedSize - @height) / 2); +@borderedHorizontalPadding: ((@borderedSize - @width) / 2); +@borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + +@cornerIconSize: 0.45em; +@cornerIconStroke: 1px; +@cornerIconShadow: + -@cornerIconStroke -@cornerIconStroke 0 @white, + @cornerIconStroke -@cornerIconStroke 0 @white, + -@cornerIconStroke @cornerIconStroke 0 @white, + @cornerIconStroke @cornerIconStroke 0 @white +; +@cornerIconInvertedShadow: + -@cornerIconStroke -@cornerIconStroke 0 @black, + @cornerIconStroke -@cornerIconStroke 0 @black, + -@cornerIconStroke @cornerIconStroke 0 @black, + @cornerIconStroke @cornerIconStroke 0 @black +; + +@mini: 0.4em; +@tiny: 0.5em; +@small: 0.75em; +@medium: 1em; +@large: 1.5em; +@big: 2em; +@huge: 4em; +@massive: 8em; diff --git a/src/semantic/src/themes/default/elements/image.overrides b/src/semantic/src/themes/default/elements/image.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/image.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/image.variables b/src/semantic/src/themes/default/elements/image.variables new file mode 100644 index 0000000..925110e --- /dev/null +++ b/src/semantic/src/themes/default/elements/image.variables @@ -0,0 +1,44 @@ +/******************************* + Image +*******************************/ + +/*------------------- + Element +--------------------*/ + +@placeholderColor: transparent; +@roundedBorderRadius: 0.3125em; + +@imageHorizontalMargin: 0.25rem; +@imageVerticalMargin: 0.5rem; +@imageBorder: 1px solid rgba(0, 0, 0, 0.1); + +/*------------------- + Types +--------------------*/ + +/* Avatar */ +@avatarSize: 2em; +@avatarMargin: 0.25em; + + +/*------------------- + Variations +--------------------*/ + +/* Spaced */ +@spacedDistance: 0.5em; + +/* Floated */ +@floatedHorizontalMargin: 1em; +@floatedVerticalMargin: 1em; + +/* Size */ +@miniWidth: 35px; +@tinyWidth: 80px; +@smallWidth: 150px; +@mediumWidth: 300px; +@largeWidth: 450px; +@bigWidth: 600px; +@hugeWidth: 800px; +@massiveWidth: 960px; diff --git a/src/semantic/src/themes/default/elements/input.overrides b/src/semantic/src/themes/default/elements/input.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/input.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/input.variables b/src/semantic/src/themes/default/elements/input.variables new file mode 100644 index 0000000..04741f3 --- /dev/null +++ b/src/semantic/src/themes/default/elements/input.variables @@ -0,0 +1,101 @@ +/******************************* + Input +*******************************/ + +/*------------------- + Element +--------------------*/ + +@inputFont: @pageFont; +@verticalPadding: @inputVerticalPadding; +@horizontalPadding: @inputHorizontalPadding; + +@lineHeight: @inputLineHeight; +@lineHeightOffset: ((@lineHeight - 1em) / 2); + +@padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding; + +@textAlign: left; +@background: @inputBackground; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; +@boxShadow: none; + +@borderRadius: @defaultBorderRadius; +@transition: + box-shadow @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing +; + +/*------------------- + Types +--------------------*/ + +/* Icon Input */ +@iconWidth: (@verticalPadding * 2) + @glyphWidth; +@iconOpacity: 0.5; +@iconFocusOpacity: 1; +@iconOffset: -0.5em; + +@iconDistance: 0em; +@iconMargin: @iconWidth + @iconDistance; +@iconTransition: opacity 0.3s @defaultEasing; + +@transparentIconWidth: @glyphWidth; +@transparentIconMargin: 2em; + +/* Circular Icon Input */ +@circularIconVerticalOffset: 0.35em; +@circularIconHorizontalOffset: 0.5em; + +/* Labeled Input */ +@labelCornerTop: @borderWidth; +@labelCornerRight: @borderWidth; +@labelCornerSize: @relative9px; +@labelSize: 1em; +@labelVerticalPadding: (@verticalPadding - @lineHeightOffset); + +@labeledMargin: 2.5em; +@labeledIconInputMargin: 3.25em; +@labeledIconMargin: 1.25em; + +/*------------------- + States +--------------------*/ + +/* Placeholder */ +@placeholderColor: @inputPlaceholderColor; +@placeholderFocusColor: @inputPlaceholderFocusColor; + +/* Down */ +@downBorderColor: rgba(0, 0, 0, 0.3); +@downBackground: #FAFAFA; +@downColor: @textColor; +@downBoxShadow: none; + +/* Focus */ +@focusBorderColor: @focusedFormBorderColor; +@focusBackground: @background; +@focusColor: @hoveredTextColor; +@focusBoxShadow: none; + +/* Error */ +@errorBackground: @negativeBackgroundColor; +@errorColor: @negativeTextColor; +@errorBorder: @negativeBorderColor; +@errorBoxShadow: none; + +@placeholderErrorColor: lighten(@errorColor, 40); +@placeholderErrorFocusColor: lighten(@errorColor, 30); + +/* Loader */ +@invertedLoaderFillColor: rgba(0, 0, 0, 0.15); + +/*------------------- + Variations +--------------------*/ + +/* Inverted */ +@transparentInvertedPlaceholderColor: @invertedUnselectedTextColor; +@transparentInvertedColor: @white; + diff --git a/src/semantic/src/themes/default/elements/label.overrides b/src/semantic/src/themes/default/elements/label.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/label.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/label.variables b/src/semantic/src/themes/default/elements/label.variables new file mode 100644 index 0000000..23cd5d0 --- /dev/null +++ b/src/semantic/src/themes/default/elements/label.variables @@ -0,0 +1,254 @@ +/******************************* + Label +*******************************/ + +/*------------------- + Element +--------------------*/ + +@verticalAlign: baseline; +@verticalMargin: 0em; +@horizontalMargin: @relative2px; +@backgroundColor: #E8E8E8; +@color: @mutedTextColor; +@backgroundImage: none; +@verticalPadding: 0.5833em; /* medium is not @emSize custom value required */ +@horizontalPadding: 0.833em; +@borderRadius: @absoluteBorderRadius; +@textTransform: none; +@fontWeight: bold; +@borderWidth: 1px; +@border: 0px solid transparent; + +@lineHeightOffset: -(@verticalPadding / 2); + +@labelTransitionDuration: @defaultDuration; +@labelTransitionEasing: @defaultEasing; +@transition: background @labelTransitionDuration @labelTransitionEasing; + +/* Group */ +@groupVerticalMargin: 0.5em; +@groupHorizontalMargin: 0.5em; + +/*------------------- + Parts +--------------------*/ + +/* Link */ +@linkOpacity: 0.5; +@linkTransition: @labelTransitionDuration opacity @labelTransitionEasing; + +/* Icon */ +@iconDistance: 0.75em; + +/* Image */ +@imageHeight: (1em + @verticalPadding * 2); + +/* Detail */ +@detailFontWeight: bold; +@detailOpacity: 0.8; +@detailIconDistance: 0.25em; +@detailMargin: 1em; + +/* Delete */ +@deleteOpacity: @linkOpacity; +@deleteSize: @relativeSmall; +@deleteMargin: 0.5em; +@deleteTransition: background @labelTransitionDuration @labelTransitionEasing; + +/*------------------- + Types +--------------------*/ + +/* Image Label */ +@imageLabelBackground: @backgroundColor; +@imageLabelVerticalPadding: @verticalPadding; +@imageLabelHorizontalPadding: @horizontalPadding; +@imageLabelTextDistance: 0.5em; +@imageLabelDetailDistance: @imageLabelTextDistance; +@imageLabelBorderRadius: @borderRadius; +@imageLabelBoxShadow: none; +@imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance; + +@imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance; +@imageLabelImageBorderRadius: @imageLabelBorderRadius 0em 0em @imageLabelBorderRadius; +@imageLabelImageHeight: @imageHeight; + +@imageLabelDetailBackground: @strongTransparentBlack; +@imageLabelDetailPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding; +@imageLabelDetailMargin: -@imageLabelVerticalPadding -@imageLabelHorizontalPadding -@imageLabelVerticalPadding @imageLabelDetailDistance; + +/*------------------- + States +--------------------*/ + +/* Hover */ +@labelHoverBackgroundColor: #E0E0E0; +@labelHoverBackgroundImage: none; +@labelHoverTextColor: @hoveredTextColor; + +/* Active */ +@labelActiveBackgroundColor: #D0D0D0; +@labelActiveBackgroundImage: none; +@labelActiveTextColor: @selectedTextColor; + +/* Active Hover */ +@labelActiveHoverBackgroundColor: #C8C8C8; +@labelActiveHoverBackgroundImage: none; +@labelActiveHoverTextColor: @selectedTextColor; + + +/*------------------- + Variations +--------------------*/ + +/* Basic */ +@basicBackground: none @white; +@basicBorderWidth: 1px; +@basicBorder: @basicBorderWidth solid @borderColor; +@basicColor: @textColor; +@basicBoxShadow: none; + +@basicHoverBackground: @basicBackground; +@basicHoverColor: @linkHoverColor; +@basicHoverBorder: @basicBorder; +@basicHoverBoxShadow: @basicBoxShadow; + +/* Tag */ +@tagCircleColor: @white; +@tagCircleSize: 0.5em; +@tagHorizontalPadding: 1.5em; +@tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); +@tagTriangleRightOffset: 100%; +@tagTriangleTopOffset: 50%; +@tagTriangleSize: 1.56em; +@tagTriangleBackgroundImage: none; +@tagTransition: none; /* Avoids error with background: inherit; on animation */ + +/* Ribbon */ +@ribbonTriangleSize: 1.2em; +@ribbonShadowColor: rgba(0, 0, 0, 0.15); + +@ribbonMargin: 1rem; +@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")"; +@ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")"; +@rightRibbonOffset: ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")"; + +@ribbonImageTopDistance: 1rem; +@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */ +@ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")"; +@rightRibbonImageOffset: ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")"; + +@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */ +@ribbonTableOffset: ~"calc("-@ribbonTableMargin~" - "@ribbonTriangleSize~")"; +@rightRibbonTableOffset: ~"calc(100% + "@ribbonTableMargin~" + "@ribbonTriangleSize~")"; + + +/* Colors */ +@redTextColor: @white; +@orangeTextColor: @white; +@yellowTextColor: @white; +@oliveTextColor: @white; +@greenTextColor: @white; +@tealTextColor: @white; +@blueTextColor: @white; +@violetTextColor: @white; +@purpleTextColor: @white; +@pinkTextColor: @white; +@brownTextColor: @white; +@greyTextColor: @white; +@blackTextColor: @white; + +@redHoverTextColor: @white; +@orangeHoverTextColor: @white; +@yellowHoverTextColor: @white; +@oliveHoverTextColor: @white; +@greenHoverTextColor: @white; +@tealHoverTextColor: @white; +@blueHoverTextColor: @white; +@violetHoverTextColor: @white; +@purpleHoverTextColor: @white; +@pinkHoverTextColor: @white; +@brownHoverTextColor: @white; +@greyHoverTextColor: @white; +@blackHoverTextColor: @white; + +@redRibbonShadow: darken(@red, 10); +@orangeRibbonShadow: darken(@orange, 10); +@yellowRibbonShadow: darken(@yellow, 10); +@oliveRibbonShadow: darken(@olive, 10); +@greenRibbonShadow: darken(@green, 10); +@tealRibbonShadow: darken(@teal, 10); +@blueRibbonShadow: darken(@blue, 10); +@violetRibbonShadow: darken(@violet, 10); +@purpleRibbonShadow: darken(@purple, 10); +@pinkRibbonShadow: darken(@pink, 10); +@brownRibbonShadow: darken(@brown, 10); +@greyRibbonShadow: darken(@grey, 10); +@blackRibbonShadow: darken(@black, 10); + +/* Attached */ +@attachedSegmentPadding: 2rem; +@attachedVerticalPadding: 0.75em; +@attachedHorizontalPadding: 1em; + +@attachedCornerBorderRadius: @3px; +@attachedBorderRadius: @borderRadius; + +/* Corner */ +@cornerSizeRatio: 1; +@cornerTransition: color @labelTransitionDuration @labelTransitionEasing; +@cornerTriangleSize: 4em; +@cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing; +@cornerTriangleZIndex: 1; + +@cornerIconSize: @relativeLarge; +@cornerIconTopOffset: @relative9px; +@cornerIconLeftOffset: @relative11px; + +/* Corner Text */ +@cornerTextWidth: 3em; +@cornerTextWeight: bold; +@cornerTextSize: 1em; + +/* Horizontal */ +@horizontalLabelMinWidth: 3em; +@horizontalLabelMargin: 0.5em; +@horizontalLabelVerticalPadding: 0.4em; + +/* Circular Padding */ +@circularPadding: 0.5em; +@circularMinSize: 2em; +@emptyCircleSize: 0.5em; + +/* Pointing */ +@pointingBorderColor: inherit; +@pointingBorderWidth: @borderWidth; +@pointingVerticalDistance: 1em; +@pointingTriangleSize: 0.6666em; +@pointingHorizontalDistance: @pointingTriangleSize; + +@pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing; +@pointingTriangleZIndex: 2; + +/* Basic Pointing */ +@basicPointingTriangleOffset: -@pointingBorderWidth; + +/* Floating */ +@floatingTopOffset: -1em; +@floatingLeftOffset: -1.5em; +@floatingZIndex: 100; + +/*------------------- + Group +--------------------*/ + +/* Sizing */ +@mini : @9px; +@tiny : @10px; +@small : @11px; +@medium : @12px; +@large : @absoluteMedium; +@big : @absoluteBig; +@huge : @absoluteHuge; +@massive : @absoluteMassive; diff --git a/src/semantic/src/themes/default/elements/list.overrides b/src/semantic/src/themes/default/elements/list.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/list.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/list.variables b/src/semantic/src/themes/default/elements/list.variables new file mode 100644 index 0000000..290c9ee --- /dev/null +++ b/src/semantic/src/themes/default/elements/list.variables @@ -0,0 +1,224 @@ +/******************************* + List +*******************************/ + +/*------------------- + View +--------------------*/ + +/* List */ +@listStyleType: none; +@listStylePosition: outside; +@margin: 1em 0em; +@verticalPadding: 0em; +@horizontalPadding: 0em; + +/* List Item */ +@itemVerticalPadding: @relative3px; +@itemHorizontalPadding: 0em; +@itemPadding: @itemVerticalPadding @itemHorizontalPadding; +@itemLineHeight: @relativeLarge; + +/* Sub List */ +@childListPadding: 0.75em 0em 0.25em 0.5em; +@childListIndent: 1em; + +/* Sub List Item */ +@childItemVerticalPadding: @relative2px; +@childItemHorizontalPadding: 0em; +@childItemPadding: @childItemVerticalPadding @childItemHorizontalPadding; +@childItemLineHeight: inherit; + +/*------------------- + Elements +--------------------*/ + +/* Icon */ +@iconDistance: @relative4px; +@iconOffset: ((@itemLineHeight - 1rem) / 2); +@iconTransition: color @defaultDuration @defaultEasing; +@iconVerticalAlign: top; +@iconContentVerticalAlign: top; + +/* Image */ +@imageDistance: 0.5em; +@imageAlign: top; + +/* Content */ +@contentDistance: 0.5em; +@contentLineHeight: @itemLineHeight; +@contentLineHeightOffset: (@contentLineHeight - 1em) / 2; +@contentVerticalAlign: top; + +/* Header */ +@itemHeaderFontFamily: @headerFont; +@itemHeaderFontWeight: bold; +@itemHeaderColor: @textColor; + +/* Description */ +@itemDescriptionColor: rgba(0, 0, 0, 0.7); + +/* Link */ +@itemLinkColor: @linkColor; +@itemLinkHoverColor: @linkHoverColor; + +/* Header Link */ +@itemHeaderLinkColor: @itemLinkColor; +@itemHeaderLinkHoverColor: @itemLinkHoverColor; + +/* Linked Icon */ +@itemLinkIconColor: @lightTextColor; +@itemLinkIconHoverColor: @textColor; +@invertedIconLinkColor: @invertedLightTextColor; + +/*------------------- + States +--------------------*/ + +@disabledColor: @disabledTextColor; +@invertedDisabledColor: @invertedDisabledTextColor; + +/*------------------- + Variations +--------------------*/ + +/* Float */ +@floatDistance: 1em; +@leftFloatMargin: 0em @floatDistance 0em 0em; +@rightFloatMargin: 0em 0em 0em @floatDistance; + +/* Horizontal */ +@horizontalSpacing: 1em; +@horizontalIconDistance: 0.25em; +@horizontalVerticalAlign: middle; + +/* Inverted */ +@invertedListIconColor: @invertedLightTextColor; +@invertedHeaderColor: @invertedTextColor; +@invertedDescriptionColor: @invertedLightTextColor; +@invertedItemLinkColor: @invertedTextColor; +@invertedItemLinkHoverColor: @linkHoverColor; + +/* Link List */ +@linkListItemColor: @unselectedTextColor; +@linkListItemHoverColor: @hoveredTextColor; +@linkListItemDownColor: @pressedTextColor; +@linkListItemActiveColor: @selectedTextColor; +@linkListTransition: + @defaultDuration color @defaultEasing +; + +/* Inverted Link List */ +@invertedLinkListItemColor: @invertedUnselectedTextColor; +@invertedLinkListItemHoverColor: @invertedHoveredTextColor; +@invertedLinkListItemDownColor: @invertedPressedTextColor; +@invertedLinkListItemActiveColor: @invertedSelectedTextColor; + +/* Selection List */ +@selectionListItemMargin: 0em; +@selectionListItemBorderRadius: 0.5em; +@selectionListItemVerticalPadding: 0.5em; +@selectionListItemHorizontalPadding: 0.5em; +@selectionListTransition: + @defaultDuration color @defaultEasing, + @defaultDuration padding-left @defaultEasing, + @defaultDuration background-color @defaultEasing +; + +/* Selection List States */ +@selectionListBackground: transparent; +@selectionListColor: @unselectedTextColor; +@selectionListHoverBackground: @subtleTransparentBlack; +@selectionListHoverColor: @hoveredTextColor; +@selectionListDownBackground: @transparentBlack; +@selectionListDownColor: @pressedTextColor; +@selectionListActiveBackground: @transparentBlack; +@selectionListActiveColor: @selectedTextColor; + +/* Inverted Selection List */ +@invertedSelectionListBackground: transparent; +@invertedSelectionListColor: @invertedUnselectedTextColor; +@invertedSelectionListHoverBackground: @subtleTransparentWhite; +@invertedSelectionListHoverColor: @invertedHoveredTextColor; +@invertedSelectionListDownBackground: @transparentWhite; +@invertedSelectionListDownColor: @invertedPressedTextColor; +@invertedSelectionListActiveBackground: @transparentWhite; +@invertedSelectionListActiveColor: @invertedSelectedTextColor; + +/* Animated List */ +@animatedDuration: 0.25s; +@animatedDelay: 0.1s; +@animatedListTransition: + @animatedDuration color @defaultEasing @animatedDelay, + @animatedDuration padding-left @defaultEasing @animatedDelay, + @animatedDuration background-color @defaultEasing @animatedDelay +; +@animatedListIndent: 1em; + +/* Bulleted */ +@bulletDistance: 1.25rem; +@bulletOffset: -@bulletDistance; + +@bulletOpacity: 1; +@bulletCharacter: '•'; +@bulletColor: inherit; +@bulletLinkColor: @textColor; +@bulletVerticalAlign: top; +@bulletChildDistance: @bulletDistance; + +/* Horizontal Bullets */ +@horizontalBulletColor: @textColor; +@horizontalBulletSpacing: @bulletDistance + 0.5em; + +/* Ordered List */ +@orderedCountName: ordered; +@orderedCountContent: counters(ordered, ".") " "; +@orderedCountColor: @textColor; +@orderedCountDistance: 1.25rem; +@orderedCountOpacity: 0.8; +@orderedCountTextAlign: right; +@orderedCountVerticalAlign: middle; + +@orderedChildCountDistance: 1em; +@orderedChildCountOffset: -2em; + +@orderedInvertedCountColor: @invertedLightTextColor; + +/* Horizontal Ordered */ +@horizontalOrderedCountDistance: 0.5em; + +/* Divided */ +@dividedBorderWidth: 1px; +@dividedBorder: @dividedBorderWidth solid @borderColor; +@dividedInvertedBorderColor: @whiteBorderColor; +@dividedChildListBorder: none; +@dividedChildItemBorder: none; + +/* Divided Horizontal */ +@horizontalDividedSpacing: (@horizontalSpacing / 2); +@horizontalDividedLineHeight: 0.6; + +/* Divided */ +@celledBorderWidth: 1px; +@celledBorder: @celledBorderWidth solid @borderColor; +@celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor; +@celledHorizontalPadding: 0.5em; +@celledChildListBorder: none; +@celledChildItemBorder: none; + +/* Divided Horizontal */ +@horizontalCelledSpacing: (@horizontalSpacing / 2); +@horizontalCelledLineHeight: 0.6; + +/* Relaxed */ +@relaxedItemVerticalPadding: @relative6px; +@relaxedChildItemVerticalPadding: @relative3px; +@relaxedHeaderMargin: 0.25rem; +@relaxedHorizontalPadding: 1rem; + +/* Very Relaxed */ +@veryRelaxedItemVerticalPadding: @relative12px; +@veryRelaxedChildItemVerticalPadding: @relative4px; +@veryRelaxedHeaderMargin: 0.5rem; +@veryRelaxedHorizontalPadding: 1.5rem; + diff --git a/src/semantic/src/themes/default/elements/loader.overrides b/src/semantic/src/themes/default/elements/loader.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/loader.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/loader.variables b/src/semantic/src/themes/default/elements/loader.variables new file mode 100644 index 0000000..5cb1b9d --- /dev/null +++ b/src/semantic/src/themes/default/elements/loader.variables @@ -0,0 +1,72 @@ +/******************************* + Loader +*******************************/ + +/* Some global loader styles defined in site.variables */ +// @loaderSpeed +// @loaderLineWidth +// @loaderFillColor +// @loaderLineColor +// @invertedLoaderFillColor +// @invertedLoaderLineColor + +/*------------------- + Standard +--------------------*/ + +@loaderTopOffset: 50%; +@loaderLeftOffset: 50%; + +@shapeBorderColor: @loaderLineColor transparent transparent; +@invertedShapeBorderColor: @invertedLoaderLineColor transparent transparent; + +/*------------------- + Types +--------------------*/ + +/* Text */ +@textDistance: @relativeMini; +@loaderTextColor: @textColor; +@invertedLoaderTextColor: @invertedTextColor; + +/*------------------- + States +--------------------*/ + +@indeterminateDirection: reverse; +@indeterminateSpeed: (2 * @loaderSpeed); + +/*------------------- + Variations +--------------------*/ + +@inlineVerticalAlign: middle; +@inlineMargin: 0em; + +/* Exact Sizes (Avoids Rounding Errors) */ +@mini : @14px; +@tiny : @16px; +@small : @24px; +@medium : @32px; +@large : @48px; +@big : @52px; +@huge : @58px; +@massive : @64px; + +@miniOffset: 0em 0em 0em -(@mini / 2); +@tinyOffset: 0em 0em 0em -(@tiny / 2); +@smallOffset: 0em 0em 0em -(@small / 2); +@mediumOffset: 0em 0em 0em -(@medium / 2); +@largeOffset: 0em 0em 0em -(@large / 2); +@bigOffset: 0em 0em 0em -(@big / 2); +@hugeOffset: 0em 0em 0em -(@huge / 2); +@massiveOffset: 0em 0em 0em -(@massive / 2); + +@tinyFontSize: @relativeTiny; +@miniFontSize: @relativeMini; +@smallFontSize: @relativeSmall; +@mediumFontSize: @relativeMedium; +@largeFontSize: @relativeLarge; +@bigFontSize: @relativeBig; +@hugeFontSize: @relativeHuge; +@massiveFontSize: @relativeMassive; diff --git a/src/semantic/src/themes/default/elements/rail.overrides b/src/semantic/src/themes/default/elements/rail.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/rail.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/rail.variables b/src/semantic/src/themes/default/elements/rail.variables new file mode 100644 index 0000000..321a26d --- /dev/null +++ b/src/semantic/src/themes/default/elements/rail.variables @@ -0,0 +1,34 @@ +/******************************* + Rail +*******************************/ + +/*------------------- + Element +--------------------*/ + +@width: 300px; +@height: 100%; + +@distance: 4rem; +@splitDistance: (@distance / 2); + +/*------------------- + Variations +--------------------*/ + +/* Close */ +@closeDistance: 2em; +@veryCloseDistance: 1em; + +@splitCloseDistance: (@closeDistance / 2); +@splitVeryCloseDistance: (@veryCloseDistance / 2); + +@closeWidth: ~"calc("@width~" + "@splitCloseDistance~")"; +@veryCloseWidth: ~"calc("@width~" + "@splitVeryCloseDistance~")"; + +/* Dividing */ +@dividingBorder: 1px solid @borderColor; +@dividingDistance: 5rem; +@splitDividingDistance: (@dividingDistance / 2); +@dividingWidth: @width + @splitDividingDistance; + diff --git a/src/semantic/src/themes/default/elements/reveal.overrides b/src/semantic/src/themes/default/elements/reveal.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/reveal.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/reveal.variables b/src/semantic/src/themes/default/elements/reveal.variables new file mode 100644 index 0000000..dafa5de --- /dev/null +++ b/src/semantic/src/themes/default/elements/reveal.variables @@ -0,0 +1,17 @@ +/******************************* + Reveal +*******************************/ + +@transitionDelay: 0.1s; +@transitionDuration: 0.5s; +@transitionEasing: cubic-bezier(0.175, 0.885, 0.320, 1); +@transition: all @transitionDuration @defaultEasing @transitionDelay; + +@bottomZIndex: 2; +@topZIndex: 3; +@activeZIndex: 4; + +/* Types */ +@rotateDegrees: 110deg; +@moveTransition: transform @transitionDuration @transitionEasing @transitionDelay; +@slideTransition: transform @transitionDuration @defaultEasing @transitionDelay; \ No newline at end of file diff --git a/src/semantic/src/themes/default/elements/segment.overrides b/src/semantic/src/themes/default/elements/segment.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/elements/segment.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/elements/segment.variables b/src/semantic/src/themes/default/elements/segment.variables new file mode 100644 index 0000000..16a545e --- /dev/null +++ b/src/semantic/src/themes/default/elements/segment.variables @@ -0,0 +1,139 @@ +/******************************* + Segment +*******************************/ + +/*------------------- + Element +--------------------*/ + +@background: @white; +@borderWidth: 1px; +@border: @borderWidth solid @borderColor; + +@boxShadow: @subtleShadow; +@verticalPadding: 1em; +@horizontalPadding: 1em; +@padding: @verticalPadding @horizontalPadding; + +@verticalMargin: 1rem; +@horizontalMargin: 0em; +@margin: @verticalMargin @horizontalMargin; +@borderRadius: @defaultBorderRadius; + +/*------------------- + Group +--------------------*/ + +@groupedMargin: @margin; +@groupedBorder: @border; +@groupedBoxShadow: @boxShadow; +@groupedBorderRadius: @borderRadius; + +@nestedGroupMargin: @verticalMargin @verticalMargin; + +@groupedSegmentBorder: none; +@groupedSegmentDivider: @border; +@groupedSegmentMargin: 0em; +@groupedSegmentWidth: auto; +@groupedSegmentBoxShadow: none; + +/*------------------- + Coupling +--------------------*/ + +/* Page Grid Segment */ +@pageGridMargin: (2 * @verticalPadding); + +/******************************* + States +*******************************/ + +/* Loading Dimmer */ +@loaderDimmerColor: rgba(255, 255, 255, 0.8); +@loaderDimmerZIndex: 100; + +/* Loading Spinner */ +@loaderSize: 3em; +@loaderLineZIndex: 101; + + +/******************************* + Variations +*******************************/ + +/* Piled */ +@piledZIndex: auto; +@piledMargin: 3em; +@piledBoxShadow: ''; +@piledDegrees: 1.2deg; +@piledBorder: @border; + +/* Circular */ +@circularPadding: 2em; + +/* Stacked */ +@stackedHeight: 6px; +@stackedPageBackground: @subtleTransparentBlack; +@stackedPadding: @verticalPadding + (0.4em); +@tallStackedPadding: @verticalPadding + (0.8em); + +/* Raised */ +@raisedBoxShadow: @floatingShadow; + +/* Padded */ +@paddedSegmentPadding: 1.5em; +@veryPaddedSegmentPadding: 3em; + +/* Attached */ +@attachedTopOffset: 0px; +@attachedBottomOffset: 0px; +@attachedHorizontalOffset: -@borderWidth; +@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")"; +@attachedBoxShadow: none; +@attachedBorder: @borderWidth solid @solidBorderColor; +@attachedBottomBoxShadow: + @boxShadow, + @attachedBoxShadow +; + +/* Inverted */ +@invertedBackground: @black; + +/* Floated */ +@floatedDistance: 1em; + +/* Basic */ +@basicBackground: none transparent; +@basicBorder: none; +@basicBoxShadow: none; +@basicBorderRadius: 0px; + +/* Colors */ +@coloredBorderSize: 2px; + +/* Ordinality */ +@secondaryBackground: @darkWhite; +@secondaryColor: @mutedTextColor; + +@tertiaryBackground: @midWhite; +@tertiaryColor: @mutedTextColor; + +@secondaryInvertedLightness: 0.2; +@secondaryInvertedBackground: + lighten(@black, (@secondaryInvertedLightness * 100)) + linear-gradient( + rgba(255, 255, 255, @secondaryInvertedLightness) 0%, + rgba(255, 255, 255, @secondaryInvertedLightness) 100% + ) +; +@secondaryInvertedColor: @invertedMutedTextColor; + +@tertiaryInvertedLightness: 0.35; +@tertiaryInvertedBackground: + lighten(@black, (@tertiaryInvertedLightness * 100)) + linear-gradient( + rgba(255, 255, 255, @tertiaryInvertedLightness) 0%, + rgba(255, 255, 255, @tertiaryInvertedLightness) 100% + ) +; +@tertiaryInvertedColor: @invertedMutedTextColor; diff --git a/src/semantic/src/themes/default/elements/step.overrides b/src/semantic/src/themes/default/elements/step.overrides new file mode 100644 index 0000000..e7aca52 --- /dev/null +++ b/src/semantic/src/themes/default/elements/step.overrides @@ -0,0 +1,16 @@ +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Step'; + src: + url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+gAAANZAAAAAAAAADgAWwABAAAAAwAWAAEAAAAAAAIABgATAG4AAAAtCZEAAAAAAAAAEgDeAAEAAAAAAAAANQAAAAEAAAAAAAEACAA1AAEAAAAAAAIABwA9AAEAAAAAAAMACABEAAEAAAAAAAQACABMAAEAAAAAAAUACwBUAAEAAAAAAAYACABfAAEAAAAAAAoAKwBnAAEAAAAAAAsAEwCSAAMAAQQJAAAAagClAAMAAQQJAAEAEAEPAAMAAQQJAAIADgEfAAMAAQQJAAMAEAEtAAMAAQQJAAQAEAE9AAMAAQQJAAUAFgFNAAMAAQQJAAYAEAFjAAMAAQQJAAoAVgFzAAMAAQQJAAsAJgHJQ29weXJpZ2h0IChDKSAyMDE0IGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb21mb250ZWxsb1JlZ3VsYXJmb250ZWxsb2ZvbnRlbGxvVmVyc2lvbiAxLjBmb250ZWxsb0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQA0ACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQBmAG8AbgB0AGUAbABsAG8AUgBlAGcAdQBsAGEAcgBmAG8AbgB0AGUAbABsAG8AZgBvAG4AdABlAGwAbABvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AbgB0AGUAbABsAG8ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAQIBAwljaGVja21hcmsGY2lyY2xlAAAAAAEAAf//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+xsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywB0MrsgACAENgQi2wBSywByNCIyCwACNCYbCAYrABYLAEKi2wBiwgIEUgsAJFY7ABRWJgRLABYC2wBywgIEUgsAArI7ECBCVgIEWKI2EgZCCwIFBYIbAAG7AwUFiwIBuwQFlZI7AAUFhlWbADJSNhRESwAWAtsAgssQUFRbABYUQtsAkssAFgICCwCUNKsABQWCCwCSNCWbAKQ0qwAFJYILAKI0JZLbAKLCC4BABiILgEAGOKI2GwC0NgIIpgILALI0IjLbALLEtUWLEHAURZJLANZSN4LbAMLEtRWEtTWLEHAURZGyFZJLATZSN4LbANLLEADENVWLEMDEOwAWFCsAorWbAAQ7ACJUKxCQIlQrEKAiVCsAEWIyCwAyVQWLEBAENgsAQlQoqKIIojYbAJKiEjsAFhIIojYbAJKiEbsQEAQ2CwAiVCsAIlYbAJKiFZsAlDR7AKQ0dgsIBiILACRWOwAUViYLEAABMjRLABQ7AAPrIBAQFDYEItsA4ssQAFRVRYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLLAIK7EABUVUWACwDCNCIGCwAWG1DQ0BAAsAQkKKYLENBSuwbSsbIlktsBossQAZKy2wGyyxARkrLbAcLLECGSstsB0ssQMZKy2wHiyxBBkrLbAfLLEFGSstsCAssQYZKy2wISyxBxkrLbAiLLEIGSstsCMssQkZKy2wJCwgPLABYC2wJSwgYLANYCBDI7ABYEOwAiVhsAFgsCQqIS2wJiywJSuwJSotsCcsICBHICCwAkVjsAFFYmAjYTgjIIpVWCBHICCwAkVjsAFFYmAjYTgbIVktsCgssQAFRVRYALABFrAnKrABFTAbIlktsCkssAgrsQAFRVRYALABFrAnKrABFTAbIlktsCosIDWwAWAtsCssALADRWOwAUVisAArsAJFY7ABRWKwACuwABa0AAAAAABEPiM4sSoBFSotsCwsIDwgRyCwAkVjsAFFYmCwAENhOC2wLSwuFzwtsC4sIDwgRyCwAkVjsAFFYmCwAENhsAFDYzgtsC8ssQIAFiUgLiBHsAAjQrACJUmKikcjRyNhIFhiGyFZsAEjQrIuAQEVFCotsDAssAAWsAQlsAQlRyNHI2GwBkUrZYouIyAgPIo4LbAxLLAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjILAIQyCKI0cjRyNhI0ZgsARDsIBiYCCwACsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsIBiYSMgILAEJiNGYTgbI7AIQ0awAiWwCENHI0cjYWAgsARDsIBiYCMgsAArI7AEQ2CwACuwBSVhsAUlsIBisAQmYSCwBCVgZCOwAyVgZFBYIRsjIVkjICCwBCYjRmE4WS2wMiywABYgICCwBSYgLkcjRyNhIzw4LbAzLLAAFiCwCCNCICAgRiNHsAArI2E4LbA0LLAAFrADJbACJUcjRyNhsABUWC4gPCMhG7ACJbACJUcjRyNhILAFJbAEJUcjRyNhsAYlsAUlSbACJWGwAUVjIyBYYhshWWOwAUViYCMuIyAgPIo4IyFZLbA1LLAAFiCwCEMgLkcjRyNhIGCwIGBmsIBiIyAgPIo4LbA2LCMgLkawAiVGUlggPFkusSYBFCstsDcsIyAuRrACJUZQWCA8WS6xJgEUKy2wOCwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xJgEUKy2wOSywMCsjIC5GsAIlRlJYIDxZLrEmARQrLbA6LLAxK4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrEmARQrsARDLrAmKy2wOyywABawBCWwBCYgLkcjRyNhsAZFKyMgPCAuIzixJgEUKy2wPCyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhsAIlRmE4IyA8IzgbISAgRiNHsAArI2E4IVmxJgEUKy2wPSywMCsusSYBFCstsD4ssDErISMgIDywBCNCIzixJgEUK7AEQy6wJistsD8ssAAVIEewACNCsgABARUUEy6wLCotsEAssAAVIEewACNCsgABARUUEy6wLCotsEEssQABFBOwLSotsEIssC8qLbBDLLAAFkUjIC4gRoojYTixJgEUKy2wRCywCCNCsEMrLbBFLLIAADwrLbBGLLIAATwrLbBHLLIBADwrLbBILLIBATwrLbBJLLIAAD0rLbBKLLIAAT0rLbBLLLIBAD0rLbBMLLIBAT0rLbBNLLIAADkrLbBOLLIAATkrLbBPLLIBADkrLbBQLLIBATkrLbBRLLIAADsrLbBSLLIAATsrLbBTLLIBADsrLbBULLIBATsrLbBVLLIAAD4rLbBWLLIAAT4rLbBXLLIBAD4rLbBYLLIBAT4rLbBZLLIAADorLbBaLLIAATorLbBbLLIBADorLbBcLLIBATorLbBdLLAyKy6xJgEUKy2wXiywMiuwNistsF8ssDIrsDcrLbBgLLAAFrAyK7A4Ky2wYSywMysusSYBFCstsGIssDMrsDYrLbBjLLAzK7A3Ky2wZCywMyuwOCstsGUssDQrLrEmARQrLbBmLLA0K7A2Ky2wZyywNCuwNystsGgssDQrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAoUAA4AAAAAEPQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPeFJAWNtYXAAAAGIAAAAOgAAAUrQEhm3Y3Z0IAAAAcQAAAAUAAAAHAZJ/5RmcGdtAAAB2AAABPkAAAmRigp4O2dhc3AAAAbUAAAACAAAAAgAAAAQZ2x5ZgAABtwAAACuAAAAtt9nBHZoZWFkAAAHjAAAADUAAAA2ASs8e2hoZWEAAAfEAAAAIAAAACQHUwNNaG10eAAAB+QAAAAMAAAADAspAABsb2NhAAAH8AAAAAgAAAAIADgAW21heHAAAAf4AAAAIAAAACAApgm8bmFtZQAACBgAAAF3AAACzcydGhxwb3N0AAAJkAAAACoAAAA7rr1AmHByZXAAAAm8AAAAVgAAAFaSoZr/eJxjYGTewTiBgZWBg6mKaQ8DA0MPhGZ8wGDIyMTAwMTAysyAFQSkuaYwOLxgeMHIHPQ/iyGKmZvBHyjMCJIDAPe9C2B4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGF4w/v8PUvCCAURLMELVAwEjG8OIBwBk5AavAAB4nGNgQANGDEbM3P83gjAAELQD4XicnVXZdtNWFJU8ZHASOmSgoA7X3DhQ68qEKRgwaSrFdiEdHAitBB2kDHTkncc+62uOQrtWH/m07n09JLR0rbYsls++R1tn2DrnRhwjKn0aiGvUoZKXA6msPZZK90lc13Uvj5UMBnFdthJPSZuonSRKat3sUC7xWOsqWSdYJ+PlIFZPVZ5noAziFB5lSUQbRBuplyZJ4onjJ4kWZxAfJUkgJaMQp9LIUEI1GsRS1aFM6dCr1xNx00DKRqMedVhU90PFJ8c1p9SsA0YqVznCFevVRr4bpwMve5DEOsGzrYcxHnisfpQqkIqR6cg/dkpOlIaBVHHUoVbi6DCTX/eRTCrNQKaMYkWl7oG43f102xYxPXQ6vi5KlUaqurnOKJrt0fGogygP2cbppNzQ2fbw5RlTVKtdcbPtQGYNXErJbHSfRAAdJlLj6QFONZwCqRn1R8XZ588BEslclKo8VTKHegOZMzt7cTHtbiersnCknwcyb3Z2452HQ6dXh3/R+hdM4cxHj+Jifj5C+lBqfiJOJKVGWMzyp4YfcVcgQrkxiAsXyuBThDl0RdrZZl3jtTH2hs/5SqlhPQna6KP4fgr9TiQrHGdRo/VInM1j13Wt3GdQS7W7Fzsyr0OVIu7vCwuuM+eEYZ4WC1VfnvneBTT/Bohn/EDeNIVL+5YpSrRvm6JMu2iKCu0SVKVdNsUU7YoppmnPmmKG9h1TzNKeMzLj/8vc55H7HN7xkJv2XeSmfQ+5ad9HbtoPkJtWITdtHblpLyA3rUZu2lWjOnYEGgZpF1IVQdA0svph3Fab9UDWjDR8aWDyLmLI+upER521tcofxX914gsHcmmip7siF5viLq/bFj483e6rj5pG3bDV+MaR8jAeRnocmtBZ+c3hv+1N3S6a7jKqMugBFUwKwABl7UAC0zrbCaT1mqf48gdgXIZ4zkpDtVSfO4am7+V5X/exOfG+x+3GLrdcd3kJWdYNcmP28N9SZKrrH+UtrVQnR6wrJ49VaxhDKrwour6SlHu0tRu/KKmy8l6U1srnk5CbPYMbQlu27mGwI0xpyiUeXlOlKD3UUo6yQyxvKco84JSLC1qGxLgOdQ9qa8TpoXoYGwshhqG0vRBwSCldFd+0ynfxHqtr2Oj4xRXh6XpyEhGf4ir7UfBU10b96A7avGbdMoMpVaqn+4xPsa/b9lFZaaSOsxe3VAfXNOsaORXTT+Rr4HRvOGjdAz1UfDRBI1U1x+jGKGM0ljXl3wR0MVZ+w2jVYvs93E+dpFWsuUuY7JsT9+C0u/0q+7WcW0bW/dcGvW3kip8jMb8tCvw7B2K3ZA3UO5OBGAvIWdAYxhYmdxiug23EbfY/Jqf/34aFRXJXOxq7eerD1ZNRJXfZ8rjLTXZZ16M2R9VOGvsIjS0PN+bY4XIstsRgQbb+wf8x7gF3aVEC4NDIZZiI2nShnurh6h6rsW04VxIBds2x43QAegAuQd8cu9bzCYD13CPnLsB9cgh2yCH4lByCz8i5BfA5OQRfkEMwIIdgl5w7AA/IIXhIDsEeOQSPyNkE+JIcgq/IIYjJIUjIuQ3wmByCJ+QQfE0OwTdGrk5k/pYH2QD6zqKbQKmdGhzaOGRGrk3Y+zxY9oFFZB9aROqRkesT6lMeLPV7i0j9wSJSfzRyY0L9iQdL/dkiUn+xiNRnxpeZIymvDp7zjg7+BJfqrV4AAAAAAQAB//8AD3icY2BkAALmJUwzGEQZZBwk+RkZGBmdGJgYmbIYgMwsoGSiiLgIs5A2owg7I5uSOqOaiT2jmZE8I5gQY17C/09BQEfg3yt+fh8gvYQxD0j68DOJiQn8U+DnZxQDcQUEljLmCwBpBgbG/3//b2SOZ+Zm4GEQcuAH2sblDLSEm8FFVJhJEGgLH6OSHpMdo5EcI3Nk0bEXJ/LYqvZ82VXHGFd6pKTkyCsQwQAAq+QkqAAAeJxjYGRgYADiw5VSsfH8Nl8ZuJlfAEUYzpvO6IXQCb7///7fyLyEmRvI5WBgAokCAFb/DJAAAAB4nGNgZGBgDvqfxRDF/IKB4f935iUMQBEUwAwAi5YFpgPoAAAD6AAAA1kAAAAAAAAAOABbAAEAAAADABYAAQAAAAAAAgAGABMAbgAAAC0JkQAAAAB4nHWQy2rCQBSG//HSi0JbWui2sypKabxgN4IgWHTTbqS4LTHGJBIzMhkFX6Pv0IfpS/RZ+puMpShNmMx3vjlz5mQAXOMbAvnzxJGzwBmjnAs4Rc9ykf7Zcon8YrmMKt4sn9C/W67gAYHlKm7wwQqidM5ogU/LAlfi0nIBF+LOcpH+0XKJ3LNcxq14tXxC71muYCJSy1Xci6+BWm11FIRG1gZ12W62OnK6lYoqStxYumsTKp3KvpyrxPhxrBxPLfc89oN17Op9uJ8nvk4jlciW09yrkZ/42jX+bFc93QRtY+ZyrtVSDm2GXGm18D3jhMasuo3G3/MwgMIKW2hEvKoQBhI12jrnNppooUOaMkMyM8+KkMBFTONizR1htpIy7nPMGSW0PjNisgOP3+WRH5MC7o9ZRR+tHsYT0u6MKPOSfTns7jBrREqyTDezs9/eU2x4WpvWcNeuS511JTE8qCF5H7u1BY1H72S3Ymi7aPD95/9+AN1fhEsAeJxjYGKAAC4G7ICZgYGRiZGZMzkjNTk7N7Eomy05syg5J5WBAQBE1QZBAABLuADIUlixAQGOWbkIAAgAYyCwASNEsAMjcLIEKAlFUkSyCgIHKrEGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAA) format('woff') + ; +} +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + font-family: 'Step'; + content: '\e800'; /* '' */ +} \ No newline at end of file diff --git a/src/semantic/src/themes/default/elements/step.variables b/src/semantic/src/themes/default/elements/step.variables new file mode 100644 index 0000000..268d875 --- /dev/null +++ b/src/semantic/src/themes/default/elements/step.variables @@ -0,0 +1,130 @@ +/******************************* + Step +*******************************/ + +/*------------------- + Group +--------------------*/ + +@stepMargin: 1em 0em; +@stepsBorderRadius: @defaultBorderRadius; +@stepsBackground: ''; +@stepsBoxShadow: none; +@stepsBorder: 1px solid @borderColor; + +/*------------------- + Element +--------------------*/ + +@verticalMargin: 0em; +@horizontalMargin: 0em; + +@arrowSize: @relativeLarge; +@verticalPadding: @relativeLarge; +@horizontalPadding: 2em; + +@transition: + background-color @defaultDuration @defaultEasing, + opacity @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing +; +@lineHeight: @relativeLarge; +@alignItems: center; +@justifyContent: center; +@backgroundColor: @white; +@background: @backgroundColor; +@borderRadius: 0em; +@borderWidth: 1px; +@boxShadow: none; +@border: none; +@divider: @borderWidth solid @borderColor; + +/* Icon */ +@iconDistance: 1rem; +@iconSize: 2.5em; +@iconAlign: middle; + +/* Title */ +@titleFontFamily: @headerFont; +@titleFontWeight: bold; +@titleFontSize: @relativeLarge; +@titleColor: @darkTextColor; + +/* Description */ +@descriptionDistance: 0.25em; +@descriptionFontSize: @relativeSmall; +@descriptionFontWeight: normal; +@descriptionColor: @textColor; + + +/* Arrow */ +@arrowBackgroundColor: @backgroundColor; +@arrowTopOffset: 50%; +@arrowRightOffset: 0%; +@arrowBorderWidth: 0px @borderWidth @borderWidth 0px; + +@arrowDisplay: block; +@lastArrowDisplay: none; + +@activeArrowDisplay: block; +@activeLastArrowDisplay: none; + +/* Mobile */ +@mobileIconDistance: @iconDistance; + +/*------------------- + Types +--------------------*/ + +/* Vertical */ +@verticalDivider: @divider; +@verticalArrowTopOffset: 50%; +@verticalArrowRightOffset: 0%; +@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px; + +@verticalArrowDisplay: none; +@verticalLastArrowDisplay: @verticalArrowDisplay; + +@verticalActiveArrowDisplay: block; +@verticalActiveLastArrowDisplay: block; + +/*------------------- + Variations +--------------------*/ + +@attachedHorizontalOffset: -@borderWidth; +@attachedVerticalOffset: 0; +@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")"; + +@orderedFontFamily: inherit; +@orderedFontWeight: bold; + +/*------------------- + States +--------------------*/ + +/* Completed */ +@completedColor: @positiveColor; + +/* Hover */ +@hoverBackground: @offWhite; +@hoverColor: @hoveredTextColor; + +/* Down */ +@downBackground: @darkWhite; +@downColor: @pressedTextColor; + +/* Active */ +@activeBackground: @darkWhite; +@activeColor: @linkColor; +@activeIconColor: @darkTextColor; + +/* Active + Hover */ +@activeHoverBackground: @lightGrey; +@activeHoverColor: @textColor; + + +/* Disabled */ +@disabledBackground: @background; +@disabledColor: @disabledTextColor; diff --git a/src/semantic/src/themes/default/globals/reset.overrides b/src/semantic/src/themes/default/globals/reset.overrides new file mode 100644 index 0000000..8a241a8 --- /dev/null +++ b/src/semantic/src/themes/default/globals/reset.overrides @@ -0,0 +1,429 @@ +/******************************* + Theme Overrides +*******************************/ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * Correct `block` display not defined in IE 8/9. + */ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/src/semantic/src/themes/default/globals/reset.variables b/src/semantic/src/themes/default/globals/reset.variables new file mode 100644 index 0000000..0eedf27 --- /dev/null +++ b/src/semantic/src/themes/default/globals/reset.variables @@ -0,0 +1,3 @@ +/******************************* + Reset +*******************************/ \ No newline at end of file diff --git a/src/semantic/src/themes/default/globals/site.overrides b/src/semantic/src/themes/default/globals/site.overrides new file mode 100644 index 0000000..3cff744 --- /dev/null +++ b/src/semantic/src/themes/default/globals/site.overrides @@ -0,0 +1,4 @@ +/******************************* + Global Overrides +*******************************/ + diff --git a/src/semantic/src/themes/default/globals/site.variables b/src/semantic/src/themes/default/globals/site.variables new file mode 100644 index 0000000..5ac1594 --- /dev/null +++ b/src/semantic/src/themes/default/globals/site.variables @@ -0,0 +1,936 @@ +/******************************* + Site Settings +*******************************/ + +/*------------------- + Fonts +--------------------*/ + +@fontName : 'Lato'; +@fontSmoothing : antialiased; + +@headerFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif; +@pageFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif; + +@googleFontName : @fontName; +@importGoogleFonts : true; +@googleFontSizes : '400,700,400italic,700italic'; +@googleSubset : 'latin'; + +@googleProtocol : 'https://'; +@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}'; + +/*------------------- + Base Sizes +--------------------*/ + +/* This is the single variable that controls them all */ +@emSize : 14px; + +/* The size of page text */ +@fontSize : 14px; + + +/*------------------- + Border Radius +--------------------*/ + +/* See Power-user section below + for explanation of @px variables +*/ +@relativeBorderRadius: @relative4px; +@absoluteBorderRadius: @4px; + +@defaultBorderRadius: @absoluteBorderRadius; + +/*------------------- + Brand Colors +--------------------*/ + +@primaryColor : @blue; +@secondaryColor : @black; + +@lightPrimaryColor : @lightBlue; +@lightSecondaryColor : @lightBlack; + +/*-------------- + Page Heading +---------------*/ + +@headerFontWeight : bold; +@headerLineHeight : 1.2857em; + +@h1 : 2rem; +@h2 : 1.714rem; +@h3 : 1.28rem; +@h4 : 1.071rem; +@h5 : 1rem; + +/*-------------- + Form Input +---------------*/ + +/* This adjusts the default form input across all elements */ +@inputBackground : @white; +@inputVerticalPadding : @relative11px; +@inputHorizontalPadding : @relative14px; +@inputPadding : @inputVerticalPadding @inputHorizontalPadding; + +/* Input Text Color */ +@inputColor: @textColor; +@inputPlaceholderColor: lighten(@inputColor, 75); +@inputPlaceholderFocusColor: lighten(@inputColor, 45); + +/* Line Height Default For Inputs in Browser */ +@inputLineHeight: 1.2142em; + +/*------------------- + Focused Input +--------------------*/ + +/* Used on inputs, textarea etc */ +@focusedFormBorderColor: #85B7D9; + +/* Used on dropdowns, other larger blocks */ +@focusedFormMutedBorderColor: #96C8DA; + +/*------------------- + Sizes +--------------------*/ + +/* + Sizes are all expressed in terms of 14px/em (default em) + This ensures these "ratios" remain constant despite changes in EM +*/ + +@miniSize : (11 / 14); +@tinySize : (12 / 14); +@smallSize : (13 / 14); +@mediumSize : (14 / 14); +@largeSize : (16 / 14); +@bigSize : (18 / 14); +@hugeSize : (20 / 14); +@massiveSize : (24 / 14); + + +/*------------------- + Page +--------------------*/ + +@pageBackground : #FFFFFF; +@pageOverflowX : hidden; + +@lineHeight : 1.4285em; +@textColor : rgba(0, 0, 0, 0.87); + +/*------------------- + Paragraph +--------------------*/ + +@paragraphMargin : 0em 0em 1em; +@paragraphLineHeight : @lineHeight; + +/*------------------- + Links +--------------------*/ + +@linkColor : #4183C4; +@linkUnderline : none; +@linkHoverColor : darken(saturate(@linkColor, 20), 15, relative); +@linkHoverUnderline : @linkUnderline; + +/*------------------- + Highlighted Text +--------------------*/ + +@highlightBackground : #CCE2FF; +@highlightColor : @textColor; + +@inputHighlightBackground : rgba(100, 100, 100, 0.4); +@inputHighlightColor : @textColor; + + +/*------------------- + Loader +--------------------*/ + +@loaderSize : @relativeBig; +@loaderSpeed : 0.6s; +@loaderLineWidth : 0.2em; +@loaderFillColor : rgba(0, 0, 0, 0.1); +@loaderLineColor : @grey; + +@invertedLoaderFillColor : rgba(255, 255, 255, 0.15); +@invertedLoaderLineColor : @white; + +/*------------------- + Grid +--------------------*/ + +@columnCount: 16; + +/*------------------- + Transitions +--------------------*/ + +@defaultDuration : 0.1s; +@defaultEasing : ease; + +/*------------------- + Breakpoints +--------------------*/ + +@mobileBreakpoint : 320px; +@tabletBreakpoint : 768px; +@computerBreakpoint : 992px; +@largeMonitorBreakpoint : 1200px; +@widescreenMonitorBreakpoint : 1920px; + +/*------------------- + Site Colors +--------------------*/ + +/*--- Colors ---*/ +@red : #DB2828; +@orange : #F2711C; +@yellow : #FBBD08; +@olive : #B5CC18; +@green : #21BA45; +@teal : #00B5AD; +@blue : #2185D0; +@violet : #6435C9; +@purple : #A333C8; +@pink : #E03997; +@brown : #A5673F; +@grey : #767676; +@black : #1B1C1D; + +/*--- Light Colors ---*/ +@lightRed : #FF695E; +@lightOrange : #FF851B; +@lightYellow : #FFE21F; +@lightOlive : #D9E778; +@lightGreen : #2ECC40; +@lightTeal : #6DFFFF; +@lightBlue : #54C8FF; +@lightViolet : #A291FB; +@lightPurple : #DC73FF; +@lightPink : #FF8EDF; +@lightBrown : #D67C1C; +@lightGrey : #DCDDDE; +@lightBlack : #545454; + +/*--- Neutrals ---*/ +@fullBlack : #000000; +@offWhite : #F9FAFB; +@darkWhite : #F3F4F5; +@midWhite : #DCDDDE; +@white : #FFFFFF; + +/*--- Colored Backgrounds ---*/ +@redBackground : #FFE8E6; +@orangeBackground : #FFEDDE; +@yellowBackground : #FFF8DB; +@oliveBackground : #FBFDEF; +@greenBackground : #E5F9E7; +@tealBackground : #E1F7F7; +@blueBackground : #DFF0FF; +@violetBackground : #EAE7FF; +@purpleBackground : #F6E7FF; +@pinkBackground : #FFE3FB; +@brownBackground : #F1E2D3; + +/*--- Colored Headers ---*/ +@redHeaderColor : darken(@redTextColor, 5); +@oliveHeaderColor : darken(@oliveTextColor, 5); +@greenHeaderColor : darken(@greenTextColor, 5); +@yellowHeaderColor : darken(@yellowTextColor, 5); +@blueHeaderColor : darken(@blueTextColor, 5); +@tealHeaderColor : darken(@tealTextColor, 5); +@pinkHeaderColor : darken(@pinkTextColor, 5); +@violetHeaderColor : darken(@violetTextColor, 5); +@purpleHeaderColor : darken(@purpleTextColor, 5); +@orangeHeaderColor : darken(@orangeTextColor, 5); +@brownHeaderColor : darken(@brownTextColor, 5); + +/*--- Colored Text ---*/ +@redTextColor : @red; +@orangeTextColor : @orange; +@yellowTextColor : #B58105; // Yellow text is difficult to read +@oliveTextColor : #8ABC1E; // Olive is difficult to read +@greenTextColor : #1EBC30; // Green is difficult to read +@tealTextColor : #10A3A3; // Teal text is difficult to read +@blueTextColor : @blue; +@violetTextColor : @violet; +@purpleTextColor : @purple; +@pinkTextColor : @pink; +@brownTextColor : @brown; + +/*--- Colored Border ---*/ +@redBorderColor : @redTextColor; +@orangeBorderColor : @orangeTextColor; +@yellowBorderColor : @yellowTextColor; +@oliveBorderColor : @oliveTextColor; +@greenBorderColor : @greenTextColor; +@tealBorderColor : @tealTextColor; +@blueBorderColor : @blueTextColor; +@violetBorderColor : @violetTextColor; +@purpleBorderColor : @purpleTextColor; +@pinkBorderColor : @pinkTextColor; +@brownBorderColor : @brownTextColor; + +/*------------------- + Alpha Colors +--------------------*/ + +@subtleTransparentBlack : rgba(0, 0, 0, 0.03); +@transparentBlack : rgba(0, 0, 0, 0.05); +@strongTransparentBlack : rgba(0, 0, 0, 0.10); +@veryStrongTransparentBlack : rgba(0, 0, 0, 0.15); + +@subtleTransparentWhite : rgba(255, 255, 255, 0.02); +@transparentWhite : rgba(255, 255, 255, 0.08); +@strongTransparentWhite : rgba(255, 255, 255, 0.15); + +/*------------------- + Accents +--------------------*/ + +/* Differentiating Neutrals */ +@subtleGradient: linear-gradient(transparent, @transparentBlack); + +/* Differentiating Layers */ +@subtleShadow: + 0px 1px 2px 0 @borderColor +; +@floatingShadow: + 0px 2px 4px 0px rgba(34, 36, 38, 0.12), + 0px 2px 10px 0px rgba(34, 36, 38, 0.15) +; + +/******************************* + Power-User +*******************************/ + + +/*------------------- + Emotive Colors +--------------------*/ + +/* Positive */ +@positiveColor : @green; +@positiveBackgroundColor : #FCFFF5; +@positiveBorderColor : #A3C293; +@positiveHeaderColor : #1A531B; +@positiveTextColor : #2C662D; + +/* Negative */ +@negativeColor : @red; +@negativeBackgroundColor : #FFF6F6; +@negativeBorderColor : #E0B4B4; +@negativeHeaderColor : #912D2B; +@negativeTextColor : #9F3A38; + +/* Info */ +@infoColor : #31CCEC; +@infoBackgroundColor : #F8FFFF; +@infoBorderColor : #A9D5DE; +@infoHeaderColor : #0E566C; +@infoTextColor : #276F86; + +/* Warning */ +@warningColor : #F2C037; +@warningBorderColor : #C9BA9B; +@warningBackgroundColor : #FFFAF3; +@warningHeaderColor : #794B02; +@warningTextColor : #573A08; + +/*------------------- + Paths +--------------------*/ + +/* For source only. Modified in gulp for dist */ +@imagePath : '../../themes/default/assets/images'; +@fontPath : '../../themes/default/assets/fonts'; + +/*------------------- + Em Sizes +--------------------*/ + +/* + This rounds @size values to the closest pixel then expresses that value in (r)em. + This ensures all size values round to exact pixels +*/ +@mini : unit( round(@miniSize * @emSize) / @emSize, rem); +@tiny : unit( round(@tinySize * @emSize) / @emSize, rem); +@small : unit( round(@smallSize * @emSize) / @emSize, rem); +@medium : unit( round(@mediumSize * @emSize) / @emSize, rem); +@large : unit( round(@largeSize * @emSize) / @emSize, rem); +@big : unit( round(@bigSize * @emSize) / @emSize, rem); +@huge : unit( round(@hugeSize * @emSize) / @emSize, rem); +@massive : unit( round(@massiveSize * @emSize) / @emSize, rem); + +/* em */ +@relativeMini : unit( round(@miniSize * @emSize) / @emSize, em); +@relativeTiny : unit( round(@tinySize * @emSize) / @emSize, em); +@relativeSmall : unit( round(@smallSize * @emSize) / @emSize, em); +@relativeMedium : unit( round(@mediumSize * @emSize) / @emSize, em); +@relativeLarge : unit( round(@largeSize * @emSize) / @emSize, em); +@relativeBig : unit( round(@bigSize * @emSize) / @emSize, em); +@relativeHuge : unit( round(@hugeSize * @emSize) / @emSize, em); +@relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em); + +/* rem */ +@absoluteMini : unit( round(@miniSize * @emSize) / @emSize, rem); +@absoluteTiny : unit( round(@tinySize * @emSize) / @emSize, rem); +@absoluteSmall : unit( round(@smallSize * @emSize) / @emSize, rem); +@absoluteMedium : unit( round(@mediumSize * @emSize) / @emSize, rem); +@absoluteLarge : unit( round(@largeSize * @emSize) / @emSize, rem); +@absoluteBig : unit( round(@bigSize * @emSize) / @emSize, rem); +@absoluteHuge : unit( round(@hugeSize * @emSize) / @emSize, rem); +@absoluteMassive : unit( round(@massiveSize * @emSize) / @emSize, rem); + +/*------------------- + Icons +--------------------*/ + +/* Maximum Glyph Width of Icon */ +@iconWidth : 1.18em; + +/*------------------- + Neutral Text +--------------------*/ + +@darkTextColor : rgba(0, 0, 0, 0.85); +@mutedTextColor : rgba(0, 0, 0, 0.6); +@lightTextColor : rgba(0, 0, 0, 0.4); + +@unselectedTextColor : rgba(0, 0, 0, 0.4); +@hoveredTextColor : rgba(0, 0, 0, 0.8); +@pressedTextColor : rgba(0, 0, 0, 0.9); +@selectedTextColor : rgba(0, 0, 0, 0.95); +@disabledTextColor : rgba(0, 0, 0, 0.2); + +@invertedTextColor : rgba(255, 255, 255, 0.9); +@invertedMutedTextColor : rgba(255, 255, 255, 0.8); +@invertedLightTextColor : rgba(255, 255, 255, 0.7); +@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5); +@invertedHoveredTextColor : rgba(255, 255, 255, 1); +@invertedPressedTextColor : rgba(255, 255, 255, 1); +@invertedSelectedTextColor : rgba(255, 255, 255, 1); +@invertedDisabledTextColor : rgba(255, 255, 255, 0.2); + +/*------------------- + Brand Colors +--------------------*/ + +@facebookColor : #3B5998; +@twitterColor : #55ACEE; +@googlePlusColor : #DD4B39; +@linkedInColor : #1F88BE; +@youtubeColor : #CC181E; +@pinterestColor : #BD081C; +@vkColor : #4D7198; +@instagramColor : #49769C; + +/*------------------- + Borders +--------------------*/ + +@circularRadius : 500rem; + +@borderColor : rgba(34, 36, 38, 0.15); +@strongBorderColor : rgba(34, 36, 38, 0.22); +@internalBorderColor : rgba(34, 36, 38, 0.1); +@selectedBorderColor : rgba(34, 36, 38, 0.35); +@strongSelectedBorderColor : rgba(34, 36, 38, 0.5); +@disabledBorderColor : rgba(34, 36, 38, 0.5); + +@solidInternalBorderColor : #FAFAFA; +@solidBorderColor : #D4D4D5; +@solidSelectedBorderColor : #BCBDBD; + +@whiteBorderColor : rgba(255, 255, 255, 0.1); +@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); + +@solidWhiteBorderColor : #555555; +@selectedSolidWhiteBorderColor : #999999; + + +/*------------------- + Derived Values +--------------------*/ + +/* Loaders Position Offset */ +@loaderOffset : -(@loaderSize / 2); +@loaderMargin : @loaderOffset 0em 0em @loaderOffset; + +/* Rendered Scrollbar Width */ +@scrollbarWidth: 17px; + +/* Maximum Single Character Glyph Width, aka Capital "W" */ +@glyphWidth: 1.1em; + +/* Used to match floats with text */ +@lineHeightOffset : ((@lineHeight - 1em) / 2); +@headerLineHeightOffset : (@headerLineHeight - 1em) / 2; + +/* Header Spacing */ +@headerTopMargin : ~"calc(2rem - "@headerLineHeightOffset~")"; +@headerBottomMargin : 1rem; +@headerMargin : @headerTopMargin 0em @headerBottomMargin; + +/* Minimum Mobile Width */ +@pageMinWidth : 320px; + +/* Positive / Negative Dupes */ +@successBackgroundColor : @positiveBackgroundColor; +@successColor : @positiveColor; +@successBorderColor : @positiveBorderColor; +@successHeaderColor : @positiveHeaderColor; +@successTextColor : @positiveTextColor; + +@errorBackgroundColor : @negativeBackgroundColor; +@errorColor : @negativeColor; +@errorBorderColor : @negativeBorderColor; +@errorHeaderColor : @negativeHeaderColor; +@errorTextColor : @negativeTextColor; + + +/* Responsive */ +@largestMobileScreen : (@tabletBreakpoint - 1px); +@largestTabletScreen : (@computerBreakpoint - 1px); +@largestSmallMonitor : (@largeMonitorBreakpoint - 1px); +@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px); + + +/*------------------- + Exact Pixel Values +--------------------*/ +/* + These are used to specify exact pixel values in em + for things like borders that remain constantly + sized as emSize adjusts + + Since there are many more sizes than names for sizes, + these are named by their original pixel values. + +*/ + +@1px : unit( (1 / @emSize), rem); +@2px : unit( (2 / @emSize), rem); +@3px : unit( (3 / @emSize), rem); +@4px : unit( (4 / @emSize), rem); +@5px : unit( (5 / @emSize), rem); +@6px : unit( (6 / @emSize), rem); +@7px : unit( (7 / @emSize), rem); +@8px : unit( (8 / @emSize), rem); +@9px : unit( (9 / @emSize), rem); +@10px : unit( (10 / @emSize), rem); +@11px : unit( (11 / @emSize), rem); +@12px : unit( (12 / @emSize), rem); +@13px : unit( (13 / @emSize), rem); +@14px : unit( (14 / @emSize), rem); +@15px : unit( (15 / @emSize), rem); +@16px : unit( (16 / @emSize), rem); +@17px : unit( (17 / @emSize), rem); +@18px : unit( (18 / @emSize), rem); +@19px : unit( (19 / @emSize), rem); +@20px : unit( (20 / @emSize), rem); +@21px : unit( (21 / @emSize), rem); +@22px : unit( (22 / @emSize), rem); +@23px : unit( (23 / @emSize), rem); +@24px : unit( (24 / @emSize), rem); +@25px : unit( (25 / @emSize), rem); +@26px : unit( (26 / @emSize), rem); +@27px : unit( (27 / @emSize), rem); +@28px : unit( (28 / @emSize), rem); +@29px : unit( (29 / @emSize), rem); +@30px : unit( (30 / @emSize), rem); +@31px : unit( (31 / @emSize), rem); +@32px : unit( (32 / @emSize), rem); +@33px : unit( (33 / @emSize), rem); +@34px : unit( (34 / @emSize), rem); +@35px : unit( (35 / @emSize), rem); +@36px : unit( (36 / @emSize), rem); +@37px : unit( (37 / @emSize), rem); +@38px : unit( (38 / @emSize), rem); +@39px : unit( (39 / @emSize), rem); +@40px : unit( (40 / @emSize), rem); +@41px : unit( (41 / @emSize), rem); +@42px : unit( (42 / @emSize), rem); +@43px : unit( (43 / @emSize), rem); +@44px : unit( (44 / @emSize), rem); +@45px : unit( (45 / @emSize), rem); +@46px : unit( (46 / @emSize), rem); +@47px : unit( (47 / @emSize), rem); +@48px : unit( (48 / @emSize), rem); +@49px : unit( (49 / @emSize), rem); +@50px : unit( (50 / @emSize), rem); +@51px : unit( (51 / @emSize), rem); +@52px : unit( (52 / @emSize), rem); +@53px : unit( (53 / @emSize), rem); +@54px : unit( (54 / @emSize), rem); +@55px : unit( (55 / @emSize), rem); +@56px : unit( (56 / @emSize), rem); +@57px : unit( (57 / @emSize), rem); +@58px : unit( (58 / @emSize), rem); +@59px : unit( (59 / @emSize), rem); +@60px : unit( (60 / @emSize), rem); +@61px : unit( (61 / @emSize), rem); +@62px : unit( (62 / @emSize), rem); +@63px : unit( (63 / @emSize), rem); +@64px : unit( (64 / @emSize), rem); + +@relative1px : unit( (1 / @emSize), em); +@relative2px : unit( (2 / @emSize), em); +@relative3px : unit( (3 / @emSize), em); +@relative4px : unit( (4 / @emSize), em); +@relative5px : unit( (5 / @emSize), em); +@relative6px : unit( (6 / @emSize), em); +@relative7px : unit( (7 / @emSize), em); +@relative8px : unit( (8 / @emSize), em); +@relative9px : unit( (9 / @emSize), em); +@relative10px : unit( (10 / @emSize), em); +@relative11px : unit( (11 / @emSize), em); +@relative12px : unit( (12 / @emSize), em); +@relative13px : unit( (13 / @emSize), em); +@relative14px : unit( (14 / @emSize), em); +@relative15px : unit( (15 / @emSize), em); +@relative16px : unit( (16 / @emSize), em); +@relative17px : unit( (17 / @emSize), em); +@relative18px : unit( (18 / @emSize), em); +@relative19px : unit( (19 / @emSize), em); +@relative20px : unit( (20 / @emSize), em); +@relative21px : unit( (21 / @emSize), em); +@relative22px : unit( (22 / @emSize), em); +@relative23px : unit( (23 / @emSize), em); +@relative24px : unit( (24 / @emSize), em); +@relative25px : unit( (25 / @emSize), em); +@relative26px : unit( (26 / @emSize), em); +@relative27px : unit( (27 / @emSize), em); +@relative28px : unit( (28 / @emSize), em); +@relative29px : unit( (29 / @emSize), em); +@relative30px : unit( (30 / @emSize), em); +@relative31px : unit( (31 / @emSize), em); +@relative32px : unit( (32 / @emSize), em); +@relative33px : unit( (33 / @emSize), em); +@relative34px : unit( (34 / @emSize), em); +@relative35px : unit( (35 / @emSize), em); +@relative36px : unit( (36 / @emSize), em); +@relative37px : unit( (37 / @emSize), em); +@relative38px : unit( (38 / @emSize), em); +@relative39px : unit( (39 / @emSize), em); +@relative40px : unit( (40 / @emSize), em); +@relative41px : unit( (41 / @emSize), em); +@relative42px : unit( (42 / @emSize), em); +@relative43px : unit( (43 / @emSize), em); +@relative44px : unit( (44 / @emSize), em); +@relative45px : unit( (45 / @emSize), em); +@relative46px : unit( (46 / @emSize), em); +@relative47px : unit( (47 / @emSize), em); +@relative48px : unit( (48 / @emSize), em); +@relative49px : unit( (49 / @emSize), em); +@relative50px : unit( (50 / @emSize), em); +@relative51px : unit( (51 / @emSize), em); +@relative52px : unit( (52 / @emSize), em); +@relative53px : unit( (53 / @emSize), em); +@relative54px : unit( (54 / @emSize), em); +@relative55px : unit( (55 / @emSize), em); +@relative56px : unit( (56 / @emSize), em); +@relative57px : unit( (57 / @emSize), em); +@relative58px : unit( (58 / @emSize), em); +@relative59px : unit( (59 / @emSize), em); +@relative60px : unit( (60 / @emSize), em); +@relative61px : unit( (61 / @emSize), em); +@relative62px : unit( (62 / @emSize), em); +@relative63px : unit( (63 / @emSize), em); +@relative64px : unit( (64 / @emSize), em); + +/* Columns */ +@oneWide : (1 / @columnCount * 100%); +@twoWide : (2 / @columnCount * 100%); +@threeWide : (3 / @columnCount * 100%); +@fourWide : (4 / @columnCount * 100%); +@fiveWide : (5 / @columnCount * 100%); +@sixWide : (6 / @columnCount * 100%); +@sevenWide : (7 / @columnCount * 100%); +@eightWide : (8 / @columnCount * 100%); +@nineWide : (9 / @columnCount * 100%); +@tenWide : (10 / @columnCount * 100%); +@elevenWide : (11 / @columnCount * 100%); +@twelveWide : (12 / @columnCount * 100%); +@thirteenWide : (13 / @columnCount * 100%); +@fourteenWide : (14 / @columnCount * 100%); +@fifteenWide : (15 / @columnCount * 100%); +@sixteenWide : (16 / @columnCount * 100%); + +@oneColumn : (1 / 1 * 100%); +@twoColumn : (1 / 2 * 100%); +@threeColumn : (1 / 3 * 100%); +@fourColumn : (1 / 4 * 100%); +@fiveColumn : (1 / 5 * 100%); +@sixColumn : (1 / 6 * 100%); +@sevenColumn : (1 / 7 * 100%); +@eightColumn : (1 / 8 * 100%); +@nineColumn : (1 / 9 * 100%); +@tenColumn : (1 / 10 * 100%); +@elevenColumn : (1 / 11 * 100%); +@twelveColumn : (1 / 12 * 100%); +@thirteenColumn : (1 / 13 * 100%); +@fourteenColumn : (1 / 14 * 100%); +@fifteenColumn : (1 / 15 * 100%); +@sixteenColumn : (1 / 16 * 100%); + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +@disabledOpacity: 0.45; +@disabledTextColor: rgba(40, 40, 40, 0.3); +@invertedDisabledTextColor: rgba(225, 225, 225, 0.3); + +/*------------------- + Hover +--------------------*/ + +/*--- Shadows ---*/ +@floatingShadowHover: + 0px 2px 4px 0px rgba(34, 36, 38, 0.15), + 0px 2px 10px 0px rgba(34, 36, 38, 0.25) +; + +/*--- Colors ---*/ +@primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative); +@secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative); + +@redHover : saturate(darken(@red, 5), 10, relative); +@orangeHover : saturate(darken(@orange, 5), 10, relative); +@yellowHover : saturate(darken(@yellow, 5), 10, relative); +@oliveHover : saturate(darken(@olive, 5), 10, relative); +@greenHover : saturate(darken(@green, 5), 10, relative); +@tealHover : saturate(darken(@teal, 5), 10, relative); +@blueHover : saturate(darken(@blue, 5), 10, relative); +@violetHover : saturate(darken(@violet, 5), 10, relative); +@purpleHover : saturate(darken(@purple, 5), 10, relative); +@pinkHover : saturate(darken(@pink, 5), 10, relative); +@brownHover : saturate(darken(@brown, 5), 10, relative); + +@lightRedHover : saturate(darken(@lightRed, 5), 10, relative); +@lightOrangeHover : saturate(darken(@lightOrange, 5), 10, relative); +@lightYellowHover : saturate(darken(@lightYellow, 5), 10, relative); +@lightOliveHover : saturate(darken(@lightOlive, 5), 10, relative); +@lightGreenHover : saturate(darken(@lightGreen, 5), 10, relative); +@lightTealHover : saturate(darken(@lightTeal, 5), 10, relative); +@lightBlueHover : saturate(darken(@lightBlue, 5), 10, relative); +@lightVioletHover : saturate(darken(@lightViolet, 5), 10, relative); +@lightPurpleHover : saturate(darken(@lightPurple, 5), 10, relative); +@lightPinkHover : saturate(darken(@lightPink, 5), 10, relative); +@lightBrownHover : saturate(darken(@lightBrown, 5), 10, relative); +@lightGreyHover : saturate(darken(@lightGrey, 5), 10, relative); +@lightBlackHover : saturate(darken(@fullBlack, 5), 10, relative); + +/*--- Emotive ---*/ +@positiveColorHover : saturate(darken(@positiveColor, 5), 10, relative); +@negativeColorHover : saturate(darken(@negativeColor, 5), 10, relative); + +/*--- Brand ---*/ +@facebookHoverColor : saturate(darken(@facebookColor, 5), 10, relative); +@twitterHoverColor : saturate(darken(@twitterColor, 5), 10, relative); +@googlePlusHoverColor : saturate(darken(@googlePlusColor, 5), 10, relative); +@linkedInHoverColor : saturate(darken(@linkedInColor, 5), 10, relative); +@youtubeHoverColor : saturate(darken(@youtubeColor, 5), 10, relative); +@instagramHoverColor : saturate(darken(@instagramColor, 5), 10, relative); +@pinterestHoverColor : saturate(darken(@pinterestColor, 5), 10, relative); +@vkHoverColor : saturate(darken(@vkColor, 5), 10, relative); + +/*--- Dark Tones ---*/ +@fullBlackHover : lighten(@fullBlack, 5); +@blackHover : lighten(@black, 5); +@greyHover : lighten(@grey, 5); + +/*--- Light Tones ---*/ +@whiteHover : darken(@white, 5); +@offWhiteHover : darken(@offWhite, 5); +@darkWhiteHover : darken(@darkWhite, 5); + +/*------------------- + Focus +--------------------*/ + +/*--- Colors ---*/ +@primaryColorFocus : saturate(darken(@primaryColor, 8), 20, relative); +@secondaryColorFocus : saturate(lighten(@secondaryColor, 8), 20, relative); + +@redFocus : saturate(darken(@red, 8), 20, relative); +@orangeFocus : saturate(darken(@orange, 8), 20, relative); +@yellowFocus : saturate(darken(@yellow, 8), 20, relative); +@oliveFocus : saturate(darken(@olive, 8), 20, relative); +@greenFocus : saturate(darken(@green, 8), 20, relative); +@tealFocus : saturate(darken(@teal, 8), 20, relative); +@blueFocus : saturate(darken(@blue, 8), 20, relative); +@violetFocus : saturate(darken(@violet, 8), 20, relative); +@purpleFocus : saturate(darken(@purple, 8), 20, relative); +@pinkFocus : saturate(darken(@pink, 8), 20, relative); +@brownFocus : saturate(darken(@brown, 8), 20, relative); + +@lightRedFocus : saturate(darken(@lightRed, 8), 20, relative); +@lightOrangeFocus : saturate(darken(@lightOrange, 8), 20, relative); +@lightYellowFocus : saturate(darken(@lightYellow, 8), 20, relative); +@lightOliveFocus : saturate(darken(@lightOlive, 8), 20, relative); +@lightGreenFocus : saturate(darken(@lightGreen, 8), 20, relative); +@lightTealFocus : saturate(darken(@lightTeal, 8), 20, relative); +@lightBlueFocus : saturate(darken(@lightBlue, 8), 20, relative); +@lightVioletFocus : saturate(darken(@lightViolet, 8), 20, relative); +@lightPurpleFocus : saturate(darken(@lightPurple, 8), 20, relative); +@lightPinkFocus : saturate(darken(@lightPink, 8), 20, relative); +@lightBrownFocus : saturate(darken(@lightBrown, 8), 20, relative); +@lightGreyFocus : saturate(darken(@lightGrey, 8), 20, relative); +@lightBlackFocus : saturate(darken(@fullBlack, 8), 20, relative); + +/*--- Emotive ---*/ +@positiveColorFocus : saturate(darken(@positiveColor, 8), 20, relative); +@negativeColorFocus : saturate(darken(@negativeColor, 8), 20, relative); + +/*--- Brand ---*/ +@facebookFocusColor : saturate(darken(@facebookColor, 8), 20, relative); +@twitterFocusColor : saturate(darken(@twitterColor, 8), 20, relative); +@googlePlusFocusColor : saturate(darken(@googlePlusColor, 8), 20, relative); +@linkedInFocusColor : saturate(darken(@linkedInColor, 8), 20, relative); +@youtubeFocusColor : saturate(darken(@youtubeColor, 8), 20, relative); +@instagramFocusColor : saturate(darken(@instagramColor, 8), 20, relative); +@pinterestFocusColor : saturate(darken(@pinterestColor, 8), 20, relative); +@vkFocusColor : saturate(darken(@vkColor, 8), 20, relative); + +/*--- Dark Tones ---*/ +@fullBlackFocus : lighten(@fullBlack, 8); +@blackFocus : lighten(@black, 8); +@greyFocus : lighten(@grey, 8); + +/*--- Light Tones ---*/ +@whiteFocus : darken(@white, 8); +@offWhiteFocus : darken(@offWhite, 8); +@darkWhiteFocus : darken(@darkWhite, 8); + + +/*------------------- + Down (:active) +--------------------*/ + +/*--- Colors ---*/ +@primaryColorDown : darken(@primaryColor, 10); +@secondaryColorDown : lighten(@secondaryColor, 10); + +@redDown : darken(@red, 10); +@orangeDown : darken(@orange, 10); +@yellowDown : darken(@yellow, 10); +@oliveDown : darken(@olive, 10); +@greenDown : darken(@green, 10); +@tealDown : darken(@teal, 10); +@blueDown : darken(@blue, 10); +@violetDown : darken(@violet, 10); +@purpleDown : darken(@purple, 10); +@pinkDown : darken(@pink, 10); +@brownDown : darken(@brown, 10); + +@lightRedDown : darken(@lightRed, 10); +@lightOrangeDown : darken(@lightOrange, 10); +@lightYellowDown : darken(@lightYellow, 10); +@lightOliveDown : darken(@lightOlive, 10); +@lightGreenDown : darken(@lightGreen, 10); +@lightTealDown : darken(@lightTeal, 10); +@lightBlueDown : darken(@lightBlue, 10); +@lightVioletDown : darken(@lightViolet, 10); +@lightPurpleDown : darken(@lightPurple, 10); +@lightPinkDown : darken(@lightPink, 10); +@lightBrownDown : darken(@lightBrown, 10); +@lightGreyDown : darken(@lightGrey, 10); +@lightBlackDown : darken(@fullBlack, 10); + +/*--- Emotive ---*/ +@positiveColorDown : darken(@positiveColor, 10); +@negativeColorDown : darken(@negativeColor, 10); + +/*--- Brand ---*/ +@facebookDownColor : darken(@facebookColor, 10); +@twitterDownColor : darken(@twitterColor, 10); +@googlePlusDownColor : darken(@googlePlusColor, 10); +@linkedInDownColor : darken(@linkedInColor, 10); +@youtubeDownColor : darken(@youtubeColor, 10); +@instagramDownColor : darken(@instagramColor, 10); +@pinterestDownColor : darken(@pinterestColor, 10); +@vkDownColor : darken(@vkColor, 10); + +/*--- Dark Tones ---*/ +@fullBlackDown : lighten(@fullBlack, 10); +@blackDown : lighten(@black, 10); +@greyDown : lighten(@grey, 10); + +/*--- Light Tones ---*/ +@whiteDown : darken(@white, 10); +@offWhiteDown : darken(@offWhite, 10); +@darkWhiteDown : darken(@darkWhite, 10); + + +/*------------------- + Active +--------------------*/ + +/*--- Colors ---*/ +@primaryColorActive : saturate(darken(@primaryColor, 5), 15, relative); +@secondaryColorActive : saturate(lighten(@secondaryColor, 5), 15, relative); + +@redActive : saturate(darken(@red, 5), 15, relative); +@orangeActive : saturate(darken(@orange, 5), 15, relative); +@yellowActive : saturate(darken(@yellow, 5), 15, relative); +@oliveActive : saturate(darken(@olive, 5), 15, relative); +@greenActive : saturate(darken(@green, 5), 15, relative); +@tealActive : saturate(darken(@teal, 5), 15, relative); +@blueActive : saturate(darken(@blue, 5), 15, relative); +@violetActive : saturate(darken(@violet, 5), 15, relative); +@purpleActive : saturate(darken(@purple, 5), 15, relative); +@pinkActive : saturate(darken(@pink, 5), 15, relative); +@brownActive : saturate(darken(@brown, 5), 15, relative); + +@lightRedActive : saturate(darken(@lightRed, 5), 15, relative); +@lightOrangeActive : saturate(darken(@lightOrange, 5), 15, relative); +@lightYellowActive : saturate(darken(@lightYellow, 5), 15, relative); +@lightOliveActive : saturate(darken(@lightOlive, 5), 15, relative); +@lightGreenActive : saturate(darken(@lightGreen, 5), 15, relative); +@lightTealActive : saturate(darken(@lightTeal, 5), 15, relative); +@lightBlueActive : saturate(darken(@lightBlue, 5), 15, relative); +@lightVioletActive : saturate(darken(@lightViolet, 5), 15, relative); +@lightPurpleActive : saturate(darken(@lightPurple, 5), 15, relative); +@lightPinkActive : saturate(darken(@lightPink, 5), 15, relative); +@lightBrownActive : saturate(darken(@lightBrown, 5), 15, relative); +@lightGreyActive : saturate(darken(@lightGrey, 5), 15, relative); +@lightBlackActive : saturate(darken(@fullBlack, 5), 15, relative); + +/*--- Emotive ---*/ +@positiveColorActive : saturate(darken(@positiveColor, 5), 15, relative); +@negativeColorActive : saturate(darken(@negativeColor, 5), 15, relative); + +/*--- Brand ---*/ +@facebookActiveColor : saturate(darken(@facebookColor, 5), 15, relative); +@twitterActiveColor : saturate(darken(@twitterColor, 5), 15, relative); +@googlePlusActiveColor : saturate(darken(@googlePlusColor, 5), 15, relative); +@linkedInActiveColor : saturate(darken(@linkedInColor, 5), 15, relative); +@youtubeActiveColor : saturate(darken(@youtubeColor, 5), 15, relative); +@instagramActiveColor : saturate(darken(@instagramColor, 5), 15, relative); +@pinterestActiveColor : saturate(darken(@pinterestColor, 5), 15, relative); +@vkActiveColor : saturate(darken(@vkColor, 5), 15, relative); + +/*--- Dark Tones ---*/ +@fullBlackActive : darken(@fullBlack, 5); +@blackActive : darken(@black, 5); +@greyActive : darken(@grey, 5); + +/*--- Light Tones ---*/ +@whiteActive : darken(@white, 5); +@offWhiteActive : darken(@offWhite, 5); +@darkWhiteActive : darken(@darkWhite, 5); diff --git a/src/semantic/src/themes/default/modules/accordion.overrides b/src/semantic/src/themes/default/modules/accordion.overrides new file mode 100644 index 0000000..52c8dbd --- /dev/null +++ b/src/semantic/src/themes/default/modules/accordion.overrides @@ -0,0 +1,28 @@ +/******************************* + Theme Overrides +*******************************/ +@font-face { + font-family: 'Accordion'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') + ; + font-weight: normal; + font-style: normal; +} + +/* Dropdown Icon */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + font-family: Accordion; + line-height: 1; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +.ui.accordion .title .dropdown.icon:before, +.ui.accordion .accordion .title .dropdown.icon:before { + content: '\f0da'/*rtl:'\f0d9'*/; +} \ No newline at end of file diff --git a/src/semantic/src/themes/default/modules/accordion.variables b/src/semantic/src/themes/default/modules/accordion.variables new file mode 100644 index 0000000..b025e01 --- /dev/null +++ b/src/semantic/src/themes/default/modules/accordion.variables @@ -0,0 +1,100 @@ +/******************************* + Accordion +*******************************/ + +@boxShadow: none; + +/* Title */ +@titleFont: @headerFont; +@titlePadding: 0.5em 0em; +@titleFontSize: 1em; +@titleColor: @textColor; + +/* Icon */ +@iconOpacity: 1; +@iconFontSize: 1em; +@iconFloat: none; +@iconWidth: 1.25em; +@iconHeight: 1em; +@iconDisplay: inline-block; +@iconMargin: 0em 0.25rem 0em 0rem; +@iconPadding: 0em; +@iconTransition: + transform @defaultDuration @defaultEasing, + opacity @defaultDuration @defaultEasing +; +@iconVerticalAlign: baseline; +@iconTransform: none; + +/* Child Accordion */ +@childAccordionMargin: 1em 0em 0em; +@childAccordionPadding: 0em; + +/* Content */ +@contentMargin: ''; +@contentPadding: 0.5em 0em 1em; + +/*------------------- + Coupling +--------------------*/ + +@menuTitlePadding: 0em; +@menuIconFloat: right; +@menuIconMargin: @lineHeightOffset 0em 0em 1em; +@menuIconTransform: rotate(180deg); + + +/*------------------- + States +--------------------*/ + +@activeIconTransform: rotate(90deg); + +/*------------------- + Variations +--------------------*/ + +/* Styled */ +@styledWidth: 600px; +@styledBackground: @white; +@styledBorderRadius: @defaultBorderRadius; +@styledBoxShadow: + @subtleShadow, + 0px 0px 0px 1px @borderColor +; + +/* Content */ +@styledContentMargin: 0em; +@styledContentPadding: 0.5em 1em 1.5em; + +/* Child Content */ +@styledChildContentMargin: 0em; +@styledChildContentPadding: @styledContentPadding; + +/* Styled Title */ +@styledTitleMargin: 0em; +@styledTitlePadding: 0.75em 1em; +@styledTitleFontWeight: bold; +@styledTitleColor: @unselectedTextColor; +@styledTitleTransition: background-color @defaultDuration @defaultEasing; +@styledTitleBorder: 1px solid @borderColor; +@styledTitleTransition: + background @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing +; + +/* Styled Title States */ +@styledTitleHoverBackground: transparent; +@styledTitleHoverColor: @textColor; +@styledActiveTitleBackground: transparent; +@styledActiveTitleColor: @selectedTextColor; + +/* Styled Child Title States */ +@styledHoverChildTitleBackground: @styledTitleHoverBackground; +@styledHoverChildTitleColor: @styledTitleHoverColor; +@styledActiveChildTitleBackground: @styledActiveTitleBackground; +@styledActiveChildTitleColor: @styledActiveTitleColor; + +/* Inverted */ +@invertedTitleColor: @invertedTextColor; + diff --git a/src/semantic/src/themes/default/modules/chatroom.overrides b/src/semantic/src/themes/default/modules/chatroom.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/modules/chatroom.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/modules/chatroom.variables b/src/semantic/src/themes/default/modules/chatroom.variables new file mode 100644 index 0000000..0da971c --- /dev/null +++ b/src/semantic/src/themes/default/modules/chatroom.variables @@ -0,0 +1,3 @@ +/******************************* + Chatroom +*******************************/ \ No newline at end of file diff --git a/src/semantic/src/themes/default/modules/checkbox.overrides b/src/semantic/src/themes/default/modules/checkbox.overrides new file mode 100644 index 0000000..e83ad9f --- /dev/null +++ b/src/semantic/src/themes/default/modules/checkbox.overrides @@ -0,0 +1,36 @@ +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Checkbox'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype') + ; +} + +/* Checkmark */ +.ui.checkbox label:after, +.ui.checkbox .box:after { + font-family: 'Checkbox'; +} + +/* Checked */ +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + content: '\e800'; +} + +/* Indeterminate */ +.ui.checkbox input:indeterminate ~ .box:after, +.ui.checkbox input:indeterminate ~ label:after { + font-size: 12px; + content: '\e801'; +} + + +/* UTF Reference +.check:before { content: '\e800'; } +.dash:before { content: '\e801'; } +.plus:before { content: '\e802'; } +*/ diff --git a/src/semantic/src/themes/default/modules/checkbox.variables b/src/semantic/src/themes/default/modules/checkbox.variables new file mode 100644 index 0000000..9902583 --- /dev/null +++ b/src/semantic/src/themes/default/modules/checkbox.variables @@ -0,0 +1,193 @@ +/******************************* + Checkbox +*******************************/ + +@checkboxSize: 17px; +@checkboxColor: @textColor; +@checkboxLineHeight: @checkboxSize; + + +/* Label */ +@labelDistance: 1.85714em; /* 26px @ 14/em */ + +/* Checkbox */ +@checkboxBackground: @white; +@checkboxBorder: 1px solid @solidBorderColor; +@checkboxBorderRadius: @3px; +@checkboxTransition: + border @defaultDuration @defaultEasing, + opacity @defaultDuration @defaultEasing, + transform @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing +; + +/* Checkmark */ +@checkboxCheckFontSize: 14px; +@checkboxCheckTop: 0px; +@checkboxCheckLeft: 0px; +@checkboxCheckSize: @checkboxSize; + +/* Label */ +@labelFontSize: @relativeMedium; +@labelColor: @textColor; +@labelTransition: color @defaultDuration @defaultEasing; + +/*------------------- + States +--------------------*/ + +/* Hover */ +@checkboxHoverBackground: @checkboxBackground; +@checkboxHoverBorderColor: @selectedBorderColor; +@labelHoverColor: @hoveredTextColor; + +/* Pressed */ +@checkboxPressedBackground: @offWhite; +@checkboxPressedBorderColor: @selectedBorderColor; +@checkboxPressedColor: @selectedTextColor; +@labelPressedColor: @selectedTextColor; + +/* Focus */ +@checkboxFocusBackground: @white; +@checkboxFocusBorderColor: @focusedFormMutedBorderColor; +@checkboxFocusCheckColor: @selectedTextColor; +@labelFocusColor: @selectedTextColor; + +/* Active */ +@labelActiveColor: @selectedTextColor; +@checkboxActiveBackground: @white; +@checkboxActiveBorderColor: @selectedBorderColor; +@checkboxActiveCheckColor: @selectedTextColor; +@checkboxActiveCheckOpacity: 1; + +/* Active Focus */ +@checkboxActiveFocusBackground: @white; +@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor; +@checkboxActiveFocusCheckColor: @selectedTextColor; + +/* Indeterminate */ +@checkboxIndeterminateBackground: @checkboxActiveBackground; +@checkboxIndeterminateBorderColor: @checkboxActiveBorderColor; +@checkboxIndeterminateCheckOpacity: 1; +@checkboxIndeterminateCheckColor: @checkboxActiveCheckColor; + +/* Disabled */ +@disabledCheckboxOpacity: 0.5; +@disabledCheckboxLabelColor: rgba(0, 0, 0, 1); + +/*------------------- + Types +--------------------*/ + +/* Radio */ +/* Uses px to avoid rounding issues with circles */ + +@radioSize: 15px; +@radioTop: 1px; +@radioLeft: 0px; +@radioLabelDistance: @labelDistance; + +@bulletTop: 1px; +@bulletLeft: 0px; +@bulletScale: (7 / 15); /* 7px as unitless value from radio size */ +@bulletColor: @textColor; +@bulletRadius: @circularRadius; + +@radioFocusBackground: @checkboxFocusBackground; +@radioFocusBulletColor: @checkboxFocusCheckColor; + +@radioActiveBackground: @checkboxActiveBackground; +@radioActiveBulletColor: @checkboxActiveCheckColor; + +@radioActiveFocusBackground: @checkboxActiveFocusBackground; +@radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor; + +/* Slider & Toggle Handle */ +@handleBackground: @white @subtleGradient; +@handleBoxShadow: + @subtleShadow, + 0px 0px 0px 1px @borderColor inset +; + +/* Slider */ +@sliderHandleSize: 1.5rem; +@sliderLineWidth: 3.5rem; +@sliderTransitionDuration: 0.3s; + +@sliderHandleOffset: (1rem - @sliderHandleSize) / 2; +@sliderHandleTransition: left @sliderTransitionDuration @defaultEasing; + +@sliderWidth: @sliderLineWidth; +@sliderHeight: (@sliderHandleSize + @sliderHandleOffset); + +@sliderLineHeight: @3px; +@sliderLineVerticalOffset: 0.4rem; +@sliderLineColor: @transparentBlack; +@sliderLineRadius: @circularRadius; +@sliderLineTransition: background @sliderTransitionDuration @defaultEasing; + +@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize; + +@sliderLabelDistance: @sliderLineWidth + 1rem; +@sliderOffLabelColor: @unselectedTextColor; + +@sliderLabelLineHeight: 1rem; + +/* Slider States */ +@sliderHoverLaneBackground: @veryStrongTransparentBlack; +@sliderHoverLabelColor: @hoveredTextColor; + +@sliderOnLineColor: @lightBlack; +@sliderOnLabelColor: @selectedTextColor; + +@sliderOnFocusLineColor: @lightBlackFocus; +@sliderOnFocusLabelColor: @sliderOnLabelColor; + + + +/* Toggle */ +@toggleLaneWidth: 3.5rem; +@toggleHandleSize: 1.5rem; +@toggleTransitionDuration: 0.2s; + +@toggleWidth: @toggleLaneWidth; +@toggleHeight: @toggleHandleSize; + +@toggleHandleRadius: @circularRadius; +@toggleHandleOffset: 0rem; +@toggleHandleTransition: + background @sliderTransitionDuration @defaultEasing, + left @sliderTransitionDuration @defaultEasing +; + +@toggleLaneBackground: @transparentBlack; +@toggleLaneHeight: @toggleHandleSize; +@toggleLaneBoxShadow: none; +@toggleLaneVerticalOffset: 0rem; +@toggleOffOffset: -0.05rem; +@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.15rem; + +@toggleLabelDistance: @toggleLaneWidth + 1rem; +@toggleLabelLineHeight: 1.5rem; +@toggleLabelOffset: 0.15em; + + +@toggleFocusColor: @veryStrongTransparentBlack; +@toggleHoverColor: @toggleFocusColor; + +@toggleOffLabelColor: @checkboxColor; +@toggleOffHandleBoxShadow: none; + +@toggleOnLabelColor: @selectedTextColor; +@toggleOnLaneColor: @primaryColor; + +@toggleOnHandleBoxShadow: none; + +@toggleOnFocusLaneColor: @primaryColorFocus; +@toggleOnFocusLabelColor: @toggleOnLabelColor; + + + +/*------------------- + Variations +--------------------*/ diff --git a/src/semantic/src/themes/default/modules/dimmer.overrides b/src/semantic/src/themes/default/modules/dimmer.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/src/semantic/src/themes/default/modules/dimmer.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/semantic/src/themes/default/modules/dimmer.variables b/src/semantic/src/themes/default/modules/dimmer.variables new file mode 100644 index 0000000..a4772ba --- /dev/null +++ b/src/semantic/src/themes/default/modules/dimmer.variables @@ -0,0 +1,61 @@ +/******************************* + Dimmer +*******************************/ + +@dimmablePosition: relative; +@dimmerPosition: absolute; + +@backgroundColor: rgba(0, 0, 0 , 0.85); +@lineHeight: 1; +@perspective: 2000px; + +@duration: 0.5s; +@transition: + background-color @duration linear +; +@zIndex: 1000; +@textAlign: center; +@verticalAlign: middle; +@textColor: @white; +@overflow: hidden; + +@blurredStartFilter: ~"blur(0px) grayscale(0)"; +@blurredEndFilter: ~"blur(5px) grayscale(0.7)"; +@blurredTransition: 800ms filter @defaultEasing; + +@blurredBackgroundColor: rgba(0, 0, 0, 0.6); +@blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6); + +/* Hidden (Default) */ +@hiddenOpacity: 0; + +/* Content */ +@contentDisplay: table; +@contentChildDisplay: table-cell; + +/* Visible */ +@visibleOpacity: 1; + +/*------------------- + Types +--------------------*/ + +/* Page Dimmer*/ +@transformStyle: ''; +@pageDimmerPosition: fixed; + + +/*------------------- + Variations +--------------------*/ + +/* Inverted */ +@invertedBackgroundColor: rgba(255, 255, 255, 0.85); +@invertedTextColor: @textColor; + +/* Simple */ +@simpleZIndex: 1; +@simpleStartBackgroundColor: rgba(0, 0, 0, 0); +@simpleEndBackgroundColor: @backgroundColor; +@simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0); +@simpleInvertedEndBackgroundColor: @invertedBackgroundColor; \ No newline at end of file diff --git a/src/semantic/src/themes/default/modules/dropdown.overrides b/src/semantic/src/themes/default/modules/dropdown.overrides new file mode 100644 index 0000000..729e201 --- /dev/null +++ b/src/semantic/src/themes/default/modules/dropdown.overrides @@ -0,0 +1,62 @@ +/******************************* + Theme Overrides +*******************************/ + +/* Dropdown Carets */ +@font-face { + font-family: 'Dropdown'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') + ; + font-weight: normal; + font-style: normal; +} + +.ui.dropdown > .dropdown.icon { + font-family: 'Dropdown'; + line-height: 1; + height: 1em; + width: 1.23em; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .dropdown.icon:before { + content: '\f0d7'; +} + +/* Sub Menu */ +.ui.dropdown .menu .item .dropdown.icon:before { + content: '\f0da'/*rtl:'\f0d9'*/; +} + +.ui.dropdown .item .left.dropdown.icon:before, +.ui.dropdown .left.menu .item .dropdown.icon:before { + content: "\f0d9"/*rtl:"\f0da"*/; +} + +/* Vertical Menu Dropdown */ +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da"/*rtl:"\f0d9"*/; +} + +/* Icons for Reference +.dropdown.down.icon { + content: "\f0d7"; +} +.dropdown.up.icon { + content: "\f0d8"; +} +.dropdown.left.icon { + content: "\f0d9"; +} +.dropdown.icon.icon { + content: "\f0da"; +} +*/ diff --git a/src/semantic/src/themes/default/modules/dropdown.variables b/src/semantic/src/themes/default/modules/dropdown.variables new file mode 100644 index 0000000..f7c4f51 --- /dev/null +++ b/src/semantic/src/themes/default/modules/dropdown.variables @@ -0,0 +1,373 @@ +/******************************* + Dropdown +*******************************/ + +/*------------------- + Element +--------------------*/ + +@transition: + box-shadow @defaultDuration @defaultEasing, + width @defaultDuration @defaultEasing +; +@borderRadius: @defaultBorderRadius; + +@raisedShadow: 0px 2px 3px 0px @borderColor; + +/*------------------- + Content +--------------------*/ + +/* Icon */ +@dropdownIconSize: @relative12px; +@dropdownIconMargin: 0em 0em 0em 1em; + +/* Current Text */ +@textTransition: none; + +/* Menu */ +@menuBackground: #FFFFFF; +@menuMargin: 0em; +@menuPadding: 0em 0em; +@menuTop: 100%; +@menuTextAlign: left; + +@menuBorderWidth: 1px; +@menuBorderColor: @borderColor; +@menuBorder: @menuBorderWidth solid @menuBorderColor; +@menuBoxShadow: @raisedShadow; +@menuBorderRadius: @borderRadius; +@menuTransition: opacity @defaultDuration @defaultEasing; +@menuMinWidth: ~"calc(100% + "(@menuBorderWidth * 2)~")"; +@menuZIndex: 11; + +/* Text */ +@textLineHeight: 1em; +@textLineHeightOffset: (@textLineHeight - 1em); +@textCursorSpacing: 1px; + +/* Menu Item */ +@itemFontSize: @medium; +@itemTextAlign: left; +@itemBorder: none; +@itemHeight: auto; +@itemDivider: none; +@itemColor: @textColor; +@itemVerticalPadding: @mini; +@itemHorizontalPadding: @large; +@itemPadding: @itemVerticalPadding @itemHorizontalPadding; +@itemFontWeight: normal; +@itemLineHeight: 1em; +@itemLineHeightOffset: (@itemLineHeight - 1em); +@itemTextTransform: none; +@itemBoxShadow: none; + +/* Sub Menu */ +@subMenuTop: 0%; +@subMenuLeft: 100%; +@subMenuRight: auto; +@subMenuDistanceAway: -0.5em; +@subMenuMargin: 0em 0em 0em @subMenuDistanceAway; +@subMenuBorderRadius: @borderRadius; +@subMenuZIndex: 21; + +/* Menu Header */ +@menuHeaderColor: @darkTextColor; +@menuHeaderFontSize: @relative11px; +@menuHeaderFontWeight: bold; +@menuHeaderTextTransform: uppercase; +@menuHeaderMargin: 1rem 0rem 0.75rem; +@menuHeaderPadding: 0em @itemHorizontalPadding; + +/* Menu Divider */ +@menuDividerMargin: 0.5em 0em; +@menuDividerColor: @internalBorderColor; +@menuDividerSize: 1px; +@menuDividerBorder: @menuDividerSize solid @menuDividerColor; + +/* Menu Input */ +@menuInputMargin: @large @mini; +@menuInputMinWidth: 10rem; +@menuInputVerticalPadding: 0.5em; +@menuInputHorizontalPadding: @inputHorizontalPadding; +@menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding; + +/* Menu Image */ +@menuImageMaxHeight: 2em; + +/* Item Sub-Element */ +@itemElementFloat: none; +@itemElementDistance: @mini; + +/* Sub-Menu Dropdown Icon */ +@itemDropdownIconDistance: 1em; +@itemDropdownIconFloat: right; +@itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemDropdownIconDistance; + +/* Description */ +@itemDescriptionFloat: right; +@itemDescriptionMargin: 0em 0em 0em 1em; +@itemDescriptionColor: @lightTextColor; + +/* Message */ +@messagePadding: @selectionItemPadding; +@messageFontWeight: normal; +@messageColor: @unselectedTextColor; + +/* Floated Content */ +@floatedDistance: 1em; + +/*------------------- + Types +--------------------*/ + +/*------------ + Selection +--------------*/ + +@selectionMinWidth: 14em; +@selectionVerticalPadding: @inputVerticalPadding; +@selectionHorizontalPadding: @inputHorizontalPadding; +@selectionBorderEmWidth: @relative1px; +@selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth; +@selectionBackground: @inputBackground; +@selectionDisplay: inline-block; +@selectionIconDistance: @inputHorizontalPadding + @glyphWidth; +@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding; +@selectionZIndex: 10; + +@selectionItemDivider: 1px solid @solidInternalBorderColor; +@selectionMessagePadding: @selectionItemPadding; + +/*