diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8fc1617a3d..521a4850d8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -17,8 +17,7 @@ Before you fil an issue or a pull request, quickly read of the following tips on ### Prerequisites -Most of the time, you'll have installed Kitematic before contibuting, but for the -sake of completeness, you can also install [Node.js 0.10.38](https://nodejs.org/dist/v0.10.38/). +- [Node.js 0.10.38](https://nodejs.org/dist/v0.10.38/) ### Other Prerequisites (Mac) - The latest Xcode from the Apple App Store. diff --git a/README.md b/README.md index ff1fcca754..2eb39471f4 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ [![Build Status](https://travis-ci.org/kitematic/kitematic.svg?branch=master)](https://travis-ci.org/kitematic/kitematic) -[![Coverage Status](https://coveralls.io/repos/kitematic/kitematic/badge.svg?branch=master)](https://coveralls.io/r/kitematic/kitematic?branch=master) [![bitHound Score](https://www.bithound.io/github/kitematic/kitematic/badges/score.svg)](https://www.bithound.io/github/kitematic/kitematic) @@ -7,6 +6,8 @@ Kitematic is a simple application for managing Docker containers on Mac OS X and Windows (coming soon). +![Kitematic Screenshot](https://cloud.githubusercontent.com/assets/3325447/8119979/152f1010-104f-11e5-9298-cd3e92b61ec6.png) + ## Installing Kitematic [Download the latest version](https://kitematic.com/download) of Kitematic. diff --git a/fonts/icons-24px.eot b/fonts/icons-24px.eot deleted file mode 100644 index 9d4b7388f2..0000000000 Binary files a/fonts/icons-24px.eot and /dev/null differ diff --git a/fonts/icons-24px.svg b/fonts/icons-24px.svg deleted file mode 100644 index 91d9fab189..0000000000 --- a/fonts/icons-24px.svg +++ /dev/null @@ -1,1652 +0,0 @@ - - - -Generated by Fontastic.me - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/fonts/icons-24px.ttf b/fonts/icons-24px.ttf deleted file mode 100644 index 7c68a974b3..0000000000 Binary files a/fonts/icons-24px.ttf and /dev/null differ diff --git a/fonts/icons-24px.woff b/fonts/icons-24px.woff deleted file mode 100644 index f816ee643b..0000000000 Binary files a/fonts/icons-24px.woff and /dev/null differ diff --git a/fonts/kitematic.eot b/fonts/kitematic.eot new file mode 100644 index 0000000000..3bccd0f7fc Binary files /dev/null and b/fonts/kitematic.eot differ diff --git a/fonts/kitematic.svg b/fonts/kitematic.svg new file mode 100644 index 0000000000..717dfdef22 --- /dev/null +++ b/fonts/kitematic.svg @@ -0,0 +1,31 @@ + + + +Generated by Fontastic.me + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/kitematic.ttf b/fonts/kitematic.ttf new file mode 100644 index 0000000000..72bb395c5a Binary files /dev/null and b/fonts/kitematic.ttf differ diff --git a/fonts/kitematic.woff b/fonts/kitematic.woff new file mode 100644 index 0000000000..121ee6e711 Binary files /dev/null and b/fonts/kitematic.woff differ diff --git a/package.json b/package.json index ec312c88e3..2f06bdf0ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Kitematic", - "version": "0.6.3", + "version": "0.6.6", "author": "Kitematic", "description": "Simple Docker Container management for Mac OS X.", "homepage": "https://kitematic.com/", diff --git a/src/browser.js b/src/browser.js index cb8010dd1f..bc0979d16b 100644 --- a/src/browser.js +++ b/src/browser.js @@ -65,10 +65,10 @@ app.on('open-url', function (event, url) { app.on('ready', function () { var mainWindow = new BrowserWindow({ - width: size.width || 1000, - height: size.height || 780, - 'min-width': 1000, - 'min-height': 600, + width: size.width || 800, + height: size.height || 600, + 'min-width': 700, + 'min-height': 500, 'standard-window': false, resizable: true, frame: false, diff --git a/src/components/ContainerDetailsHeader.react.js b/src/components/ContainerDetailsHeader.react.js index adbf2d2326..363e55a3d7 100644 --- a/src/components/ContainerDetailsHeader.react.js +++ b/src/components/ContainerDetailsHeader.react.js @@ -23,8 +23,10 @@ var ContainerDetailsHeader = React.createClass({ state = STOPPED; } return ( -
-

{this.props.container.Name}

{state} +
+
+ {this.props.container.Name}{state} +
); } diff --git a/src/components/ContainerDetailsSubheader.react.js b/src/components/ContainerDetailsSubheader.react.js index 5695417b30..67c383e14f 100644 --- a/src/components/ContainerDetailsSubheader.react.js +++ b/src/components/ContainerDetailsSubheader.react.js @@ -1,4 +1,3 @@ -var $ = require('jquery'); var _ = require('underscore'); var React = require('react'); var exec = require('exec'); @@ -7,10 +6,8 @@ var metrics = require('../utils/MetricsUtil'); var ContainerUtil = require('../utils/ContainerUtil'); var util = require('../utils/Util'); var machine = require('../utils/DockerMachineUtil'); -var RetinaImage = require('react-retina-image'); var classNames = require('classnames'); var resources = require('../utils/ResourcesUtil'); -var dockerUtil = require('../utils/DockerUtil'); var containerActions = require('../actions/ContainerActions'); var dockerMachineUtil = require('../utils/DockerMachineUtil'); @@ -62,12 +59,6 @@ var ContainerDetailsSubheader = React.createClass({ this.context.router.transitionTo('containerHome', {name: this.context.router.getCurrentParams().name}); } }, - showLogs: function () { - if (!this.disableTab()) { - metrics.track('Viewed Logs'); - this.context.router.transitionTo('containerLogs', {name: this.context.router.getCurrentParams().name}); - } - }, showSettings: function () { if (!this.disableTab()) { metrics.track('Viewed Settings'); @@ -115,51 +106,7 @@ var ContainerDetailsSubheader = React.createClass({ dockerMachineUtil.dockerTerminal(`docker exec -it ${this.props.container.Name} ${shell}`); } }, - handleItemMouseEnterView: function () { - var $action = $(this.getDOMNode()).find('.action .view'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveView: function () { - var $action = $(this.getDOMNode()).find('.action .view'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterRestart: function () { - var $action = $(this.getDOMNode()).find('.action .restart'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveRestart: function () { - var $action = $(this.getDOMNode()).find('.action .restart'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterStop: function () { - var $action = $(this.getDOMNode()).find('.action .stop'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveStop: function () { - var $action = $(this.getDOMNode()).find('.action .stop'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterStart: function () { - var $action = $(this.getDOMNode()).find('.action .start'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveStart: function () { - var $action = $(this.getDOMNode()).find('.action .start'); - $action.css("visibility", "hidden"); - }, - handleItemMouseEnterTerminal: function () { - var $action = $(this.getDOMNode()).find('.action .terminal'); - $action.css("visibility", "visible"); - }, - handleItemMouseLeaveTerminal: function () { - var $action = $(this.getDOMNode()).find('.action .terminal'); - $action.css("visibility", "hidden"); - }, render: function () { - var runActionClass = classNames({ - action: true, - disabled: this.disableRun() - }); var restartActionClass = classNames({ action: true, disabled: this.disableRestart() @@ -181,33 +128,28 @@ var ContainerDetailsSubheader = React.createClass({ var currentRoute = _.last(currentRoutes); var tabHomeClasses = classNames({ - 'tab': true, + 'details-tab': true, 'active': currentRoute === 'containerHome', disabled: this.disableTab() }); - var tabLogsClasses = classNames({ - 'tab': true, - 'active': currentRoute === 'containerLogs', - disabled: this.disableTab() - }); var tabSettingsClasses = classNames({ - 'tab': true, + 'details-tab': true, 'active': currentRoutes && (currentRoutes.indexOf('containerSettings') >= 0), disabled: this.disableTab() }); var startStopToggle; if (this.disableStop()) { startStopToggle = ( -
-
- Start +
+
+
START
); } else { startStopToggle = ( -
-
- Stop +
+
+
STOP
); } @@ -215,22 +157,17 @@ var ContainerDetailsSubheader = React.createClass({
{startStopToggle} -
-
- Restart +
+
+
RESTART
-
-
- Terminal -
-
-
- View +
+
+
EXEC
Home - Logs Settings
diff --git a/src/components/ContainerHome.react.js b/src/components/ContainerHome.react.js index 18d0f97ffc..e6fec53db0 100644 --- a/src/components/ContainerHome.react.js +++ b/src/components/ContainerHome.react.js @@ -27,14 +27,23 @@ var ContainerHome = React.createClass({ }, handleResize: function () { - $('.left .wrapper').height(window.innerHeight - 240); - $('.right .wrapper').height(window.innerHeight / 2 - 100); + $('.full .wrapper').height(window.innerHeight - 132); + $('.left .wrapper').height(window.innerHeight - 132); + $('.right .wrapper').height(window.innerHeight / 2 - 55); }, handleErrorClick: function () { shell.openExternal('https://github.com/kitematic/kitematic/issues/new'); }, + showWeb: function () { + return _.keys(this.props.ports).length > 0; + }, + + showFolders: function () { + return this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running; + }, + render: function () { if (!this.props.container) { return; @@ -88,43 +97,42 @@ var ContainerHome = React.createClass({ ); } } else { - if (this.props.defaultPort) { + var logWidget = ( + + ); + var webWidget; + if (this.showWeb()) { + webWidget = ( + + ); + } + var folderWidget; + if (this.showFolders()) { + folderWidget = ( + + ); + } + if (logWidget && !webWidget && !folderWidget) { body = (
-
- -
-
- - +
+ {logWidget}
); } else { - var right; - if (_.keys(this.props.ports) > 0) { - right = ( -
- - -
- ); - } else { - right = ( -
- -
- ); - } body = (
- + {logWidget} +
+
+ {webWidget} + {folderWidget}
- {right}
); diff --git a/src/components/ContainerHomeFolders.react.js b/src/components/ContainerHomeFolders.react.js index 5074bdf89e..f2b9912684 100644 --- a/src/components/ContainerHomeFolders.react.js +++ b/src/components/ContainerHomeFolders.react.js @@ -58,9 +58,8 @@ var ContainerHomeFolder = React.createClass({ return false; } - console.log(this.props.container.Volumes); var folders = _.map(_.omit(this.props.container.Volumes, (v, k) => k.indexOf('/Users/') !== -1), (val, key) => { - var firstFolder = key.split('/')[1]; + var firstFolder = key; return (
@@ -69,19 +68,21 @@ var ContainerHomeFolder = React.createClass({ ); }); - if (this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running) { - return ( -
-

Edit Files

-
+ return ( +
+
+
+
Volumes
+
+ +
+
+
{folders}
-
Change Folders
- ); - } else { - return false; - } +
+ ); } }); diff --git a/src/components/ContainerHomeLogs.react.js b/src/components/ContainerHomeLogs.react.js index d31a4df92e..b0d6a7b4bb 100644 --- a/src/components/ContainerHomeLogs.react.js +++ b/src/components/ContainerHomeLogs.react.js @@ -71,12 +71,14 @@ module.exports = React.createClass({ } return (
-

Logs

+
+
Container Logs
+
{logs}
-
View Logs
+
); } diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js index 69bba09568..63644bbb11 100644 --- a/src/components/ContainerHomePreview.react.js +++ b/src/components/ContainerHomePreview.react.js @@ -51,38 +51,53 @@ var ContainerHomePreview = React.createClass({ var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'}); preview = (
-

Web Preview

+
+
Web Preview
+
+ +
+
+ +
+
{frame} -
Open in Browser
-
Not showing correctly?
); } else { - var ports = _.map(_.pairs(this.props.ports), function (pair) { + var ports = _.map(_.pairs(this.props.ports), pair => { var key = pair[0]; var val = pair[1]; return ( -
- {key} - {val.display} -
+ + {key} + {val.display} + ); }); preview = (
-

IP & Ports

-

You can access this container using the following IP address and port:

-
-
-
DOCKER PORT
-
MAC PORT
+
+
IP & PORTS
+
+
- {ports}
+

You can access this container using the following IP address and port:

+ + + + + + + + + {ports} + +
DOCKER PORTMAC PORT
); diff --git a/src/components/ContainerListItem.react.js b/src/components/ContainerListItem.react.js index b8c07387af..7a3da947db 100644 --- a/src/components/ContainerListItem.react.js +++ b/src/components/ContainerListItem.react.js @@ -108,7 +108,7 @@ var ContainerListItem = React.createClass({
- +
diff --git a/src/components/ContainerSettings.react.js b/src/components/ContainerSettings.react.js index 856b1fccc9..70f1faecc3 100644 --- a/src/components/ContainerSettings.react.js +++ b/src/components/ContainerSettings.react.js @@ -1,3 +1,4 @@ +var $ = require('jquery'); var _ = require('underscore'); var React = require('react/addons'); var Router = require('react-router'); @@ -11,6 +12,17 @@ var ContainerSettings = React.createClass({ }, componentDidMount: function() { this.init(); + this.handleResize(); + window.addEventListener('resize', this.handleResize); + }, + componentWillUnmount: function() { + window.removeEventListener('resize', this.handleResize); + }, + componentDidUpdate: function () { + this.handleResize(); + }, + handleResize: function () { + $('.settings-panel').height(window.innerHeight - 210); }, init: function () { var currentRoute = _.last(this.context.router.getCurrentRoutes()).name; diff --git a/src/components/ContainerSettingsGeneral.react.js b/src/components/ContainerSettingsGeneral.react.js index ca25572e88..e95bee4b06 100644 --- a/src/components/ContainerSettingsGeneral.react.js +++ b/src/components/ContainerSettingsGeneral.react.js @@ -30,7 +30,7 @@ var ContainerSettingsGeneral = React.createClass({ }, handleNameChange: function (e) { - let name = e.target.value; + var name = e.target.value; if (name === this.state.slugName) { return; } @@ -185,9 +185,9 @@ var ContainerSettingsGeneral = React.createClass({ let [id, key, val] = kvp; let icon; if (index === this.state.env.length - 1) { - icon = ; + icon = ; } else { - icon = ; + icon = ; } return ( diff --git a/src/components/ContainerSettingsPorts.react.js b/src/components/ContainerSettingsPorts.react.js index f08787dfd2..c584920503 100644 --- a/src/components/ContainerSettingsPorts.react.js +++ b/src/components/ContainerSettingsPorts.react.js @@ -46,29 +46,33 @@ var ContainerSettingsPorts = React.createClass({ }, render: function () { if (!this.props.container) { - return (
); + return false; } var ports = _.map(_.pairs(this.state.ports), pair => { var key = pair[0]; var val = pair[1]; return ( -
- {key} - {val.display} -
+ + {key} + {val.display} + ); }); return (

Configure Ports

-
-
-
DOCKER PORT
-
LOCAL PORT
-
- {ports} -
+ + + + + + + + + {ports} + +
DOCKER PORTMAC PORT
); diff --git a/src/components/ContainerSettingsVolumes.react.js b/src/components/ContainerSettingsVolumes.react.js index 64992927a4..2541cfec06 100644 --- a/src/components/ContainerSettingsVolumes.react.js +++ b/src/components/ContainerSettingsVolumes.react.js @@ -56,43 +56,43 @@ var ContainerSettingsVolumes = React.createClass({ if(util.isWindows()) { homeDir = util.windowsToLinuxPath(homeDir); } - var volumes = _.map(this.props.container.Volumes, (val, key) => { if (!val || val.indexOf(homeDir) === -1) { val = ( - - No Folder - Change - Remove - + No Folder ); } else { val = ( - - {val.replace(process.env.HOME, '~')} - Change - Remove - + {val.replace(process.env.HOME, '~')} ); } return ( -
- {key} - {val} -
+ + {key} + {val} + + Change + Remove + + ); }); return (

Configure Volumes

-
-
-
DOCKER FOLDER
-
LOCAL FOLDER
-
- {volumes} -
+ + + + + + + + + + {volumes} + +
DOCKER FOLDERMAC FOLDER
); diff --git a/src/components/Containers.react.js b/src/components/Containers.react.js index b7ef82dcb5..449afb4835 100644 --- a/src/components/Containers.react.js +++ b/src/components/Containers.react.js @@ -6,7 +6,6 @@ var containerStore = require('../stores/ContainerStore'); var ContainerList = require('./ContainerList.react'); var Header = require('./Header.react'); var metrics = require('../utils/MetricsUtil'); -var RetinaImage = require('react-retina-image'); var shell = require('shell'); var machine = require('../utils/DockerMachineUtil'); @@ -162,7 +161,7 @@ var Containers = React.createClass({

Containers

- + New
@@ -170,9 +169,9 @@ var Containers = React.createClass({
- DOCKER CLI - - + DOCKER CLI + +
diff --git a/src/components/Header.react.js b/src/components/Header.react.js index 296b3590be..63754f1d38 100644 --- a/src/components/Header.react.js +++ b/src/components/Header.react.js @@ -4,6 +4,7 @@ var RetinaImage = require('react-retina-image'); var remote = require('remote'); var ipc = require('ipc'); var autoUpdater = remote.require('auto-updater'); +var util = require('../utils/Util'); var metrics = require('../utils/MetricsUtil'); var Menu = remote.require('menu'); var MenuItem = remote.require('menu-item'); @@ -94,8 +95,7 @@ var Header = React.createClass({ }); accountActions.verify(); }, - render: function () { - let updateWidget = this.state.updateAvailable && !this.props.hideLogin ? UPDATE NOW : null; + renderWindowButtons: function () { let buttons; if (this.state.fullscreen) { buttons = ( @@ -106,49 +106,92 @@ var Header = React.createClass({
); } else { - buttons = ( -
+ if (false /*util.isWindows()*/) { + buttons = ( +
+
+
+
+
+ ); + } else { + buttons = ( +
-
- ); +
+ ); + } } - - let username; - if (this.props.hideLogin) { - username = null; - } else if (this.state.username) { - username = ( - - {this.state.username} {this.state.verified ? null : '(Unverified)'} - - ); - } else { - username = ( - - Log In - - ); - } - + return buttons; + }, + renderDashboardHeader: function () { let headerClasses = classNames({ bordered: !this.props.hideLogin, header: true, 'no-drag': true }); - + let username; + if (this.props.hideLogin) { + username = null; + } else if (this.state.username) { + username = ( +
+
+ {this.state.username} {this.state.verified ? null : '(Unverified)'} +
+
+ ); + } else { + username = ( +
+
+ LOGIN +
+
+ ); + } + let updateWidget = this.state.updateAvailable && !this.props.hideLogin ? UPDATE NOW : null; return (
- {buttons} -
- {updateWidget} -
-
+
+ {this.renderWindowButtons()} {username}
+
+
+ {updateWidget} +
+
+ +
+
); + }, + renderBasicHeader: function () { + let headerClasses = classNames({ + bordered: !this.props.hideLogin, + header: true, + 'no-drag': true + }); + return ( +
+
+ {this.renderWindowButtons()} +
+
+
+
+ ); + }, + render: function () { + if (this.props.hideLogin) { + return this.renderBasicHeader(); + } else { + return this.renderDashboardHeader(); + } } }); diff --git a/src/components/ImageCard.react.js b/src/components/ImageCard.react.js index 86efd89c35..663a703d03 100644 --- a/src/components/ImageCard.react.js +++ b/src/components/ImageCard.react.js @@ -4,8 +4,6 @@ var Router = require('react-router'); var shell = require('shell'); var RetinaImage = require('react-retina-image'); var metrics = require('../utils/MetricsUtil'); -var OverlayTrigger = require('react-bootstrap').OverlayTrigger; -var Tooltip = require('react-bootstrap').Tooltip; var containerActions = require('../actions/ContainerActions'); var containerStore = require('../stores/ContainerStore'); var tagStore = require('../stores/TagStore'); @@ -57,12 +55,22 @@ var ImageCard = React.createClass({ containerActions.run(name, repo, this.state.chosenTag); this.transitionTo('containerHome', {name}); }, + handleMenuOverlayClick: function () { + let $menuOverlay = $(this.getDOMNode()).find('.menu-overlay'); + $menuOverlay.fadeIn(300); + }, + handleCloseMenuOverlay: function () { + var $menuOverlay = $(this.getDOMNode()).find('.menu-overlay'); + $menuOverlay.fadeOut(300); + }, handleTagOverlayClick: function () { let $tagOverlay = $(this.getDOMNode()).find('.tag-overlay'); $tagOverlay.fadeIn(300); tagActions.tags(this.props.image.namespace + '/' + this.props.image.name); }, handleCloseTagOverlay: function () { + let $menuOverlay = $(this.getDOMNode()).find('.menu-overlay'); + $menuOverlay.hide(); var $tagOverlay = $(this.getDOMNode()).find('.tag-overlay'); $tagOverlay.fadeOut(300); }, @@ -77,23 +85,19 @@ var ImageCard = React.createClass({ }, render: function () { var self = this; - let name; + var name; if (this.props.image.namespace === 'library') { name = (
official
- View on Docker Hub}> - {this.props.image.name} - + {this.props.image.name}
); } else { name = (
{this.props.image.namespace}
- View on Docker Hub}> - {this.props.image.name} - + {this.props.image.name}
); } @@ -114,9 +118,9 @@ var ImageCard = React.createClass({ } var tags; if (self.state.loading) { - tags = ; + tags = ; } else if (self.state.tags.length === 0) { - tags = No Tags; + tags =
No Tags
; } else { var tagDisplay = self.state.tags.map(function (t) { if (t === self.state.chosenTag) { @@ -134,43 +138,58 @@ var ImageCard = React.createClass({ var badge = null; if (this.props.image.namespace === 'library') { badge = ( - + ); } else if (this.props.image.is_private) { badge = ( - + ); } return (
-
+
+
+ SELECTED TAG: {this.state.chosenTag} +
+
+ VIEW ON DOCKER HUB +
+
+ +
+
+

Please select an image tag.

{tags} +
+ +
-
- {badge} -
-
- {name} -
-
- {description} +
+
+ {badge} +
+
+ {name} +
+
+ {description} +
-
- +
+ {this.props.image.star_count}
-
- - {this.state.chosenTag} +
+
-
- Create +
+ CREATE
diff --git a/src/components/NewContainerSearch.react.js b/src/components/NewContainerSearch.react.js index 8b18ce97a3..954d0eafa3 100644 --- a/src/components/NewContainerSearch.react.js +++ b/src/components/NewContainerSearch.react.js @@ -207,7 +207,7 @@ module.exports = React.createClass({ let magnifierClasses = classNames({ hidden: this.state.loading, icon: true, - 'icon-magnifier': true, + 'icon-search': true, 'search-icon': true }); @@ -215,24 +215,21 @@ module.exports = React.createClass({
-
- Select a Docker image to create a container. -
- +
-
-
FILTER BY All Recommended - My Repositories + My Repos
+
+
{results}
diff --git a/src/menutemplate.js b/src/menutemplate.js index fd50876516..df41ffa201 100644 --- a/src/menutemplate.js +++ b/src/menutemplate.js @@ -42,25 +42,30 @@ var MenuTemplate = function () { click: function () { metrics.track('Installed Docker Commands'); if (!setupUtil.shouldUpdateBinaries()) { + dialog.showMessageBox({ + message: 'Docker binaries are already installed in /usr/local/bin', + buttons: ['OK'] + }); return; } let copy = setupUtil.needsBinaryFix() ? - util.exec(setupUtil.copyBinariesCmd() + ' && ' + setupUtil.fixBinariesCmd()) : + util.exec(setupUtil.macSudoCmd(setupUtil.copyBinariesCmd() + ' && ' + setupUtil.fixBinariesCmd())) : util.exec(setupUtil.copyBinariesCmd()); copy.then(() => { dialog.showMessageBox({ - message: 'Docker binaries have been copied to /usr/local/bin', + message: 'Docker binaries have been installed under /usr/local/bin', buttons: ['OK'] }); - }).catch(() => {}); + }).catch((err) => { + console.log(err); + }); }, }, { type: 'separator' - }, - { + }, { label: 'Hide Kitematic', accelerator: util.CommandOrCtrl() + '+H', selector: 'hide:' diff --git a/src/stores/SetupStore.js b/src/stores/SetupStore.js index 59e804b920..1cab123ad7 100644 --- a/src/stores/SetupStore.js +++ b/src/stores/SetupStore.js @@ -49,6 +49,8 @@ var _steps = [{ } catch (err) { throw null; } + } else if (!util.isWindows() && !virtualBox.active()) { + yield util.exec(setupUtil.macSudoCmd(util.escapePath('/Library/Application Support/VirtualBox/LaunchDaemons/VirtualBoxStartup.sh') + ' restart')); } }) }, { @@ -147,7 +149,7 @@ var SetupStore = assign(Object.create(EventEmitter.prototype), { var vboxNeedsInstall = !virtualBox.installed(); required.download = vboxNeedsInstall && (!fs.existsSync(vboxfile) || setupUtil.checksum(vboxfile) !== virtualBox.checksum()); - required.install = vboxNeedsInstall; + required.install = vboxNeedsInstall || !virtualBox.active(); required.init = required.install || !(yield machine.exists()) || (yield machine.state()) !== 'Running' || !isoversion || util.compareVersions(isoversion, packagejson['docker-version']) < 0; var exists = yield machine.exists(); diff --git a/src/utils/HubUtil.js b/src/utils/HubUtil.js index f3eb313bbe..e14ca89ef3 100644 --- a/src/utils/HubUtil.js +++ b/src/utils/HubUtil.js @@ -62,7 +62,7 @@ module.exports = { let data = JSON.parse(body); // If the JWT has expired, then log in again to get a new JWT - if (data && data.detail === 'Signature has expired.') { + if (data && data.detail && data.detail.indexOf('expired') !== -1) { let config = this.config(); if (!this.config()) { this.logout(); diff --git a/src/utils/RegHubUtil.js b/src/utils/RegHubUtil.js index cf00640249..bb7b1f5734 100644 --- a/src/utils/RegHubUtil.js +++ b/src/utils/RegHubUtil.js @@ -5,7 +5,6 @@ var util = require('../utils/Util'); var hubUtil = require('../utils/HubUtil'); var repositoryServerActions = require('../actions/RepositoryServerActions'); var tagServerActions = require('../actions/TagServerActions'); -var Promise = require('bluebird'); let REGHUB2_ENDPOINT = process.env.REGHUB2_ENDPOINT || 'https://registry.hub.docker.com/v2'; let searchReq = null; @@ -62,7 +61,7 @@ module.exports = { let data = JSON.parse(body); let repos = data.repos; async.map(repos, (repo, cb) => { - let name = repo.repo; + var name = repo.repo; if (util.isOfficialRepo(name)) { name = 'library/' + name; } diff --git a/src/utils/SetupUtil.js b/src/utils/SetupUtil.js index a7697daec1..25925741f4 100644 --- a/src/utils/SetupUtil.js +++ b/src/utils/SetupUtil.js @@ -59,7 +59,7 @@ var SetupUtil = { } }, macSudoCmd: function (cmd) { - return `${util.escapePath(resources.macsudo())} -p "Kitematic requires administrative privileges to install." sh -c \"${cmd}\"`; + return `${util.escapePath(resources.macsudo())} -p "Kitematic requires administrative privileges to install and/or start VirtualBox." sh -c \"${cmd}\"`; }, simulateProgress(estimateSeconds, progress) { var times = _.range(0, estimateSeconds * 1000, 200); diff --git a/src/utils/Util.js b/src/utils/Util.js index 4566025bf5..b18debb743 100644 --- a/src/utils/Util.js +++ b/src/utils/Util.js @@ -15,7 +15,7 @@ module.exports = { fn(args, options, (stderr, stdout, code) => { if (code) { var cmd = Array.isArray(args) ? args.join(' ') : args; - reject(new Error(cmd + ' returned non zero exit code. Stderr: ' + stderr)); + reject(new Error(cmd + ' returned non zero exit code.\n===== Stderr =====\n ' + stderr + '\n===== Stdout =====\n' + stdout)); } else { resolve(stdout); } diff --git a/src/utils/VirtualBoxUtil.js b/src/utils/VirtualBoxUtil.js index 80705cbe78..b6729cef60 100644 --- a/src/utils/VirtualBoxUtil.js +++ b/src/utils/VirtualBoxUtil.js @@ -23,9 +23,12 @@ var VirtualBox = { if(util.isWindows()) { return fs.existsSync('C:\\Program Files\\Oracle\\VirtualBox\\VBoxManage.exe') && fs.existsSync('C:\\Program Files\\Oracle\\VirtualBox\\VirtualBox.exe'); } else { - return fs.existsSync('/usr/bin/VBoxManage') && fs.existsSync('/Applications/VirtualBox.app'); + return fs.existsSync('/usr/bin/VBoxManage') && fs.existsSync('/Applications/VirtualBox.app') && fs.existsSync('/Applications/VirtualBox.app/Contents/MacOS/VBoxManage'); } }, + active: function () { + return fs.existsSync('/dev/vboxnetctl'); + }, version: function () { return new Promise((resolve, reject) => { util.exec([this.command(), '-v']).then(stdout => { diff --git a/styles/container-home.less b/styles/container-home.less index e13bc06256..9b1db79789 100644 --- a/styles/container-home.less +++ b/styles/container-home.less @@ -5,32 +5,31 @@ display: flex; flex: 1 auto; flex-direction: row; - padding: 10px 27px; + padding: 1rem; .left { - width: 60%; + width: 100%; flex-direction: column; - margin-right: 30px; + margin-right: 1rem; } .right { width: 40%; + min-width: 200px; + max-width: 600px; flex-direction: column; } - .subtext { - text-align: right; - color: @gray-lighter; - margin-top: 2px; - transition: all 0.25s; - &:hover { - color: darken(@gray-lightest, 10%); - } + .full { + width: 100%; } .web-preview { - margin-bottom: 50px; + margin-bottom: 1rem; .widget { .widget-style(); + .top-bar { + .widget-bar-style(); + } background-color: white; width: 100%; - height: 95%; + height: 100%; p { font-size: 13px; color: @gray-normal; @@ -38,63 +37,41 @@ padding-bottom: 0px; } .table { - padding-left: 20px; - padding-right: 20px; - .icon-arrow-right { - color: #BBB; - font-size: 13px; - margin: 0px 8px; - position: relative; - top: 2px; - flex: 0 auto; - min-width: 13px; - } - &.ports { - .table-labels { - margin-top: 20px; - flex: 1 auto; - display: flex; - font-size: 10px; - color: @gray-light; - .label-left { - flex: 0 auto; - min-width: 60px; - margin-right: 30px; - text-align: right; - } - .label-right { - flex: 1 auto; - display: inline-block; + color: @gray-normal; + font-size: 12px; + margin-left: 0.2rem; + max-width: 300px; + tr { + &:first-child { + td { + border: none; } } - .table-values { - flex: 1 auto; - display: flex; - flex-direction: row; - margin: 8px 0; - font-size: 12px; - .value-left { + td { + border-color: @color-divider; + &.right { text-align: right; - min-width: 70px; - flex: 0 auto; - padding: 0px; - } - .value-right { - flex: 1 auto; - -webkit-user-select: text; - max-width: 170px; - padding: 0px; } } } + th { + font-size: 10px; + color: @gray-lighter; + font-weight: 500; + border: none; + &.right { + text-align: right; + } + } } .frame { + padding-top: 8rem; border: 0; position: absolute; left: -100%; top: -100%; height: 400%; - width: 401%; + width: 400%; transform: scale(0.5); } .frame-overlay { @@ -125,24 +102,32 @@ } } .mini-logs { - margin-bottom: 50px; .widget { .widget-style(); - background-color: @gray-darkest; - color: @gray-lightest; + .top-bar { + .widget-bar-style(); + background-color: darken(@gray-darkest, 3%); + border-bottom: 1px solid rgba(255,255,255,0.1); + .text { + color: white; + } + } height: 100%; - padding: 10px; - font-family: @font-code; - font-size: 7px; - white-space: pre; .logs { - overflow: hidden; + background-color: @gray-darkest; + color: @gray-lightest; + font-family: @font-code; + font-size: 10px; + white-space: pre-wrap; + -webkit-user-select: text; + padding: 1.2rem 1.2rem 5rem 1.2rem; + overflow: auto; height: 100%; } p { margin-bottom: 0px; } - .mini-logs-overlay { + /*.mini-logs-overlay { position: absolute; top: 0; left: 0; @@ -167,29 +152,40 @@ background-color: @gray-darkest; opacity: 0.75; } - } + }*/ } } .folders { .widget { .widget-style(); - padding: 10px 5px; background-color: white; - display: flex; - .folder { - width: 110px; - padding: 5px; - &:hover { - background-color: darken(@color-background, 2%); - border-radius: 10px; - } - img { - display: block; - margin: 0 auto; - } - .text { - margin-top: 4px; - text-align: center; + .top-bar { + .widget-bar-style(); + } + .folders-list { + .folder { + display: flex; + padding: 1rem; + border-bottom: 1px solid @color-divider; + &:last-child { + border-bottom: none; + } + &:hover { + background-color: @color-box-button; + } + img { + width: 32px; + min-width: 32px; + height: 25px; + } + .text { + margin-top: 0.3rem; + margin-left: 1rem; + width: 180px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } } } } diff --git a/styles/container-settings.less b/styles/container-settings.less index be22086853..d37ade6650 100644 --- a/styles/container-settings.less +++ b/styles/container-settings.less @@ -1,38 +1,38 @@ .details-panel .settings { display: flex; flex: 1 auto; - flex-direction: row; + flex-direction: column; + background-color: white; + margin: 1rem; + margin-bottom: 0; + border: 1px solid @color-divider; + border-radius: @border-radius; .settings-menu { - min-width: 180px; + display: flex; flex: 0 auto; + height: 40px; + border-bottom: 1px solid @color-divider; ul { - position: fixed; - margin: 0; - padding: 0; - padding-top: 14px; display: flex; - flex-direction: column; + flex-direction: row; + width: 100%; + justify-content: flex-end; a { - min-width: 160px; - margin-left: 12px; color: @gray-normal; - flex-shrink: 0; cursor: default; outline: none; - margin-bottom: 10px; &.active { li { - color: white; - border-radius: 40px; - .brand-gradient(); + font-weight: 500; + border-bottom: 3px solid @brand-primary; + color: @gray-darkest; } } &:hover { text-decoration: none; li { cursor: default; - border-radius: 40px; - background-color: @gray-lightest; + color: @gray-darkest; } } &:focus { @@ -40,24 +40,32 @@ } } li { + transition: all 140ms; vertical-align: middle; - padding: 5px 12px; + padding: 0.9rem 1.6rem; display: flex; flex-direction: row; } } } .settings-panel { - padding-left: 20px; + padding: 2rem; flex: 1 auto; overflow-x: hidden; + h3 { + margin-top: 0; + color: @gray-darker; + font-weight: 400; + font-size: 18px; + } .settings-section { - margin-bottom: 40px; + margin-bottom: 4rem; } .container-name { - margin-bottom: 20px; + margin-bottom: 2rem; input { - width: 40%; + width: 100%; + max-width: 500px; } p { font-weight: 300; @@ -71,8 +79,9 @@ } .env-vars-labels { width: 100%; - font-size: 12px; - color: @gray-light; + font-size: 14px; + color: @gray-lighter; + font-weight: 500; margin-left: 5px; margin-bottom: 5px; margin-top: 20px; @@ -102,98 +111,32 @@ } } .table { - margin-bottom: 0; - .icon-arrow-right { - color: #BBB; - font-size: 20px; - margin: 0px 10px; - flex: 0 auto; - min-width: 13px; - } &.ports { - .table-labels { - margin-top: 20px; - flex: 1 auto; - display: flex; - font-size: 12px; - color: @gray-light; - .label-left { - flex: 0 auto; - min-width: 85px; - margin-right: 30px; - text-align: right; - } - .label-right { - flex: 1 auto; - display: inline-block; - margin-left: 10px; - width: 40%; - } - } - .table-values { - flex: 1 auto; - display: flex; - flex-direction: row; - margin: 8px 0; - .value-left { - text-align: right; - min-width: 85px; - flex: 0 auto; - padding: 0px; - } - .value-right { - flex: 1 auto; - -webkit-user-select: text; - max-width: 170px; - padding: 0px; - } - label { - margin-left: 8px; - margin-top: 1px; - font-weight: 400; - font-size: 13px; - } - input[type="checked"] { - - } - } + max-width: 500px; } &.volumes { - .table-labels { - margin-top: 20px; - flex: 1 auto; - display: flex; - font-size: 12px; - color: @gray-light; - .label-left { - flex: 0 auto; - margin-right: 30px; - } - .label-right { - flex: 1 auto; - display: inline-block; - margin-left: 10px; + max-width: 100%; + } + color: @gray-normal; + tr { + &:first-child { + td { + border: none; } } - .table-values { - flex: 1 auto; - display: flex; - flex-direction: row; - margin: 8px 0; - .value-left { - flex: 0 auto; - padding: 0px; - } - .value-right { - flex: 1 auto; - -webkit-user-select: text; - padding: 0px; - } - .btn { - margin-left: 10px; - } + td { + border-color: @color-divider; } } + th { + font-size: 14px; + color: @gray-lighter; + font-weight: 500; + border: none; + } + .btn { + margin-right: 0.5rem; + } } } } diff --git a/styles/header.less b/styles/header.less index 5a4da6bfc3..d679229e6f 100644 --- a/styles/header.less +++ b/styles/header.less @@ -1,10 +1,10 @@ .header { - min-height: 50px; + min-height: 40px; -webkit-app-region: drag; -webkit-user-select: none; &.bordered { - border-bottom: 1px solid #E7E7E7; + border-bottom: 1px solid @color-divider; } display: flex; @@ -12,31 +12,44 @@ .no-drag { -webkit-app-region: no-drag; } + + .left-header { + display: flex; + min-width: @sidebar-width + 1px; + } + .updates { flex: 1 auto; display: flex; align-items: center; justify-content: flex-end; margin-right: 20px; + } - img { - margin: 0 14px; - height: 16px; - width: 20px; - } + .logo { + position: absolute; + right: 1rem; + top: 0.8rem; + } + + .login-wrapper { + flex: 1 auto; + display: flex; + justify-content: flex-end; } .login { flex: 0 auto; display: flex; - color: #88919C; align-items: center; - justify-content: flex-end; - margin-right: 13px; + border-left: 1px solid @color-divider; + border-right: 1px solid @color-divider; + padding: 0 1rem 0 1rem; + .box-button(); &:active { img, span { - -webkit-filter: brightness(0.8); + -webkit-filter: brightness(0.9); } } @@ -45,10 +58,17 @@ } } + .windows-buttons { + display: flex; + align-items: center; + justify-content: center; + + + } + .buttons { display: flex; - margin-left: 14px; - + margin: 0 1.5rem; align-items: center; justify-content: center; &:hover { diff --git a/styles/icons.less b/styles/icons.less index 71422ce7d2..de69405330 100644 --- a/styles/icons.less +++ b/styles/icons.less @@ -1,19 +1,19 @@ @charset "UTF-8"; @font-face { - font-family: "icons-24px"; - src:url("icons-24px.eot"); - src:url("icons-24px.eot?#iefix") format("embedded-opentype"), - url("icons-24px.woff") format("woff"), - url("icons-24px.ttf") format("truetype"), - url("icons-24px.svg#icons-24px") format("svg"); + font-family: "kitematic"; + src:url("kitematic.eot"); + src:url("kitematic.eot?#iefix") format("embedded-opentype"), + url("kitematic.woff") format("woff"), + url("kitematic.ttf") format("truetype"), + url("kitematic.svg#kitematic") format("svg"); font-weight: normal; font-style: normal; } [data-icon]:before { - font-family: "icons-24px" !important; + font-family: "kitematic" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; @@ -21,4946 +21,85 @@ text-transform: none !important; speak: none; line-height: 1; + //-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-"]:before, [class*=" icon-"]:before { - font-family: "icons-24px" !important; + font-family: "kitematic" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; + //-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.icon-bin-1:before { - content: "\e000"; +.icon-add:before { + content: "a"; } -.icon-bin-2:before { - content: "\e001"; +.icon-badge-private:before { + content: "e"; } -.icon-binocular:before { - content: "\e002"; +.icon-restart:before { + content: "f"; } -.icon-bomb:before { - content: "\e003"; +.icon-browser-view:before { + content: "g"; } -.icon-clip-1:before { - content: "\e004"; +.icon-search:before { + content: "h"; } -.icon-clip-2:before { - content: "\e005"; +.icon-start:before { + content: "i"; } -.icon-crosshair-1:before { - content: "\e006"; +.icon-delete:before { + content: "j"; } -.icon-crosshair-2:before { - content: "\e007"; +.icon-stop:before { + content: "l"; } -.icon-crosshair-3:before { - content: "\e008"; +.icon-tag:before { + content: "m"; } -.icon-cutter:before { - content: "\e009"; +.icon-expand:before { + content: "q"; } -.icon-delete-1:before { - content: "\e00a"; +.icon-favorite:before { + content: "r"; } -.icon-delete-2:before { - content: "\e00b"; -} -.icon-edit-1:before { - content: "\e00c"; -} -.icon-edit-2:before { - content: "\e00d"; -} -.icon-edit-3:before { - content: "\e00e"; -} -.icon-hide:before { - content: "\e00f"; -} -.icon-ink:before { - content: "\e010"; -} -.icon-key-1:before { - content: "\e011"; -} -.icon-key-2:before { - content: "\e012"; -} -.icon-link-1:before { - content: "\e013"; -} -.icon-link-2:before { - content: "\e014"; -} -.icon-link-3:before { - content: "\e015"; -} -.icon-link-broken-1:before { - content: "\e016"; -} -.icon-link-broken-2:before { - content: "\e017"; -} -.icon-lock-1:before { - content: "\e018"; -} -.icon-lock-2:before { - content: "\e019"; -} -.icon-lock-3:before { - content: "\e01a"; -} -.icon-lock-4:before { - content: "\e01b"; -} -.icon-lock-5:before { - content: "\e01c"; -} -.icon-lock-unlock-1:before { - content: "\e01d"; -} -.icon-lock-unlock-2:before { - content: "\e01e"; -} -.icon-magnifier:before { - content: "\e01f"; -} -.icon-pen-1:before { - content: "\e020"; -} -.icon-pen-2:before { - content: "\e021"; -} -.icon-pen-3:before { - content: "\e022"; -} -.icon-pen-4:before { - content: "\e023"; -} -.icon-pencil-1:before { - content: "\e024"; -} -.icon-pencil-2:before { - content: "\e025"; -} -.icon-pencil-3:before { - content: "\e026"; -} -.icon-pin-1:before { - content: "\e027"; -} -.icon-pin-2:before { - content: "\e028"; -} -.icon-power-1:before { - content: "\e029"; -} -.icon-power-2:before { - content: "\e02a"; -} -.icon-preview-1:before { - content: "\e02b"; -} -.icon-preview-2:before { - content: "\e02c"; -} -.icon-scissor-1:before { - content: "\e02d"; -} -.icon-scissor-2:before { - content: "\e02e"; -} -.icon-skull-1:before { - content: "\e02f"; -} -.icon-skull-2:before { - content: "\e030"; -} -.icon-type-1:before { - content: "\e031"; -} -.icon-type-2:before { - content: "\e032"; -} -.icon-type-3:before { - content: "\e033"; -} -.icon-type-4:before { - content: "\e034"; -} -.icon-zoom-area:before { - content: "\e035"; -} -.icon-zoom-in:before { - content: "\e036"; -} -.icon-zoom-out:before { - content: "\e037"; -} -.icon-cursor-1:before { - content: "\e038"; -} -.icon-cursor-2:before { - content: "\e039"; -} -.icon-cursor-add:before { - content: "\e03a"; -} -.icon-cursor-duplicate:before { - content: "\e03b"; -} -.icon-cursor-move:before { - content: "\e03c"; -} -.icon-cursor-move-2:before { - content: "\e03d"; -} -.icon-cursor-select-area:before { - content: "\e03e"; -} -.icon-hand:before { - content: "\e03f"; -} -.icon-hand-block:before { - content: "\e040"; -} -.icon-hand-grab-1:before { - content: "\e041"; -} -.icon-hand-grab-2:before { - content: "\e042"; -} -.icon-hand-point:before { - content: "\e043"; -} -.icon-hand-touch-1:before { - content: "\e044"; -} -.icon-hand-touch-2:before { - content: "\e045"; -} -.icon-hand-touch-3:before { - content: "\e046"; -} -.icon-hand-touch-4:before { - content: "\e047"; -} -.icon-bookmark-1:before { - content: "\e048"; -} -.icon-bookmark-2:before { - content: "\e049"; -} -.icon-bookmark-3:before { - content: "\e04a"; -} -.icon-bookmark-4:before { - content: "\e04b"; -} -.icon-tag-1:before { - content: "\e04c"; -} -.icon-tag-2:before { - content: "\e04d"; -} -.icon-tag-add:before { - content: "\e04e"; -} -.icon-tag-delete:before { - content: "\e04f"; -} -.icon-tags-1:before { - content: "\e050"; -} -.icon-tags-2:before { - content: "\e051"; -} -.icon-anchor-point-1:before { - content: "\e052"; -} -.icon-anchor-point-2:before { - content: "\e053"; -} -.icon-arrange-1:before { - content: "\e054"; -} -.icon-arrange-2:before { - content: "\e055"; -} -.icon-artboard:before { - content: "\e056"; -} -.icon-brush-1:before { - content: "\e057"; -} -.icon-brush-2:before { - content: "\e058"; -} -.icon-bucket:before { - content: "\e059"; -} -.icon-crop:before { - content: "\e05a"; -} -.icon-dropper-1:before { - content: "\e05b"; -} -.icon-dropper-2:before { - content: "\e05c"; -} -.icon-dropper-3:before { - content: "\e05d"; -} -.icon-glue:before { - content: "\e05e"; -} -.icon-grid:before { - content: "\e05f"; -} -.icon-layers:before { - content: "\e060"; -} -.icon-magic-wand-1:before { - content: "\e061"; -} -.icon-magic-wand-2:before { - content: "\e062"; -} -.icon-magnet:before { - content: "\e063"; -} -.icon-marker:before { - content: "\e064"; -} -.icon-palette:before { - content: "\e065"; -} -.icon-pen-5:before { - content: "\e066"; -} -.icon-pen-6:before { - content: "\e067"; -} -.icon-quill:before { - content: "\e068"; -} -.icon-reflect:before { - content: "\e069"; -} -.icon-roller:before { - content: "\e06a"; -} -.icon-ruler-1:before { - content: "\e06b"; -} -.icon-ruler-2:before { - content: "\e06c"; -} -.icon-scale-diagonal-1:before { - content: "\e06d"; -} -.icon-scale-diagonal-2:before { - content: "\e06e"; -} -.icon-scale-horizontal:before { - content: "\e06f"; -} -.icon-scale-tool-1:before { - content: "\e070"; -} -.icon-scale-tool-2:before { - content: "\e071"; -} -.icon-scale-tool-3:before { - content: "\e072"; -} -.icon-scale-vertical:before { - content: "\e073"; -} -.icon-shear-tool:before { - content: "\e074"; -} -.icon-spray:before { - content: "\e075"; -} -.icon-stamp:before { - content: "\e076"; -} -.icon-stationery-1:before { - content: "\e077"; -} -.icon-stationery-2:before { - content: "\e078"; -} -.icon-stationery-3:before { - content: "\e079"; -} -.icon-vector:before { - content: "\e07a"; -} -.icon-award-1:before { - content: "\e07b"; -} -.icon-award-2:before { - content: "\e07c"; -} -.icon-award-3:before { - content: "\e07d"; -} -.icon-award-4:before { - content: "\e07e"; -} -.icon-award-5:before { - content: "\e07f"; -} -.icon-award-6:before { - content: "\e080"; -} -.icon-crown-1:before { - content: "\e081"; -} -.icon-crown-2:before { - content: "\e082"; -} -.icon-crown-3:before { - content: "\e083"; -} -.icon-fire:before { - content: "\e084"; -} -.icon-flag-1:before { - content: "\e085"; -} -.icon-flag-2:before { - content: "\e086"; -} -.icon-flag-3:before { - content: "\e087"; -} -.icon-flag-4:before { - content: "\e088"; -} -.icon-flag-5:before { - content: "\e089"; -} -.icon-flag-6:before { - content: "\e08a"; -} -.icon-flag-7:before { - content: "\e08b"; -} -.icon-flag-8:before { - content: "\e08c"; -} -.icon-google-plus-1:before { - content: "\e08d"; -} -.icon-google-plus-2:before { - content: "\e08e"; -} -.icon-hand-like-1:before { - content: "\e08f"; -} -.icon-hand-like-2:before { - content: "\e090"; -} -.icon-hand-unlike-1:before { - content: "\e091"; -} -.icon-hand-unlike-2:before { - content: "\e092"; -} -.icon-heart-1:before { - content: "\e093"; -} -.icon-heart-2:before { - content: "\e094"; -} -.icon-heart-angel:before { - content: "\e095"; -} -.icon-heart-broken:before { - content: "\e096"; -} -.icon-heart-minus:before { - content: "\e097"; -} -.icon-heart-plus:before { - content: "\e098"; -} -.icon-present:before { - content: "\e099"; -} -.icon-rank-1:before { - content: "\e09a"; -} -.icon-rank-2:before { - content: "\e09b"; -} -.icon-ribbon:before { - content: "\e09c"; -} -.icon-star-1:before { - content: "\e09d"; -} -.icon-star-2:before { - content: "\e09e"; -} -.icon-star-3:before { - content: "\e09f"; -} -.icon-star-4:before { - content: "\e0a0"; -} -.icon-star-5:before { - content: "\e0a1"; -} -.icon-star-6:before { - content: "\e0a2"; -} -.icon-star-7:before { - content: "\e0a3"; -} -.icon-star-8:before { - content: "\e0a4"; -} -.icon-star-9:before { - content: "\e0a5"; -} -.icon-star-10:before { - content: "\e0a6"; -} -.icon-trophy:before { - content: "\e0a7"; -} -.icon-bubble-2:before { - content: "\e0a8"; -} -.icon-bubble-add-1:before { - content: "\e0a9"; -} -.icon-bubble-add-2:before { - content: "\e0aa"; -} -.icon-bubble-add-3:before { - content: "\e0ab"; -} -.icon-bubble-ask-1:before { - content: "\e0ac"; -} -.icon-bubble-ask-2:before { - content: "\e0ad"; -} -.icon-bubble-attention-1:before { - content: "\e0ae"; -} -.icon-bubble-attention-2:before { - content: "\e0af"; -} -.icon-bubble-attention-3:before { - content: "\e0b0"; -} -.icon-bubble-attention-4:before { - content: "\e0b1"; -} -.icon-bubble-attention-5:before { - content: "\e0b2"; -} -.icon-bubble-attention-6:before { - content: "\e0b3"; -} -.icon-bubble-attention-7:before { - content: "\e0b4"; -} -.icon-bubble-block-1:before { - content: "\e0b5"; -} -.icon-bubble-block-2:before { - content: "\e0b6"; -} -.icon-bubble-block-3:before { - content: "\e0b7"; -} -.icon-bubble-chat-1:before { - content: "\e0b8"; -} -.icon-bubble-chat-2:before { - content: "\e0b9"; -} -.icon-bubble-check-1:before { - content: "\e0ba"; -} -.icon-bubble-check-2:before { - content: "\e0bb"; -} -.icon-bubble-check-3:before { - content: "\e0bc"; -} -.icon-bubble-comment-1:before { - content: "\e0bd"; -} -.icon-bubble-comment-2:before { - content: "\e0be"; -} -.icon-bubble-conversation-1:before { - content: "\e0bf"; -} -.icon-bubble-conversation-2:before { - content: "\e0c0"; -} -.icon-bubble-conversation-3:before { - content: "\e0c1"; -} -.icon-bubble-conversation-4:before { - content: "\e0c2"; -} -.icon-bubble-conversation-5:before { - content: "\e0c3"; -} -.icon-bubble-conversation-6:before { - content: "\e0c4"; -} -.icon-bubble-delete-1:before { - content: "\e0c5"; -} -.icon-bubble-delete-2:before { - content: "\e0c6"; -} -.icon-bubble-delete-3:before { - content: "\e0c7"; -} -.icon-bubble-edit-1:before { - content: "\e0c8"; -} -.icon-bubble-edit-2:before { - content: "\e0c9"; -} -.icon-bubble-edit-3:before { - content: "\e0ca"; -} -.icon-bubble-heart-1:before { - content: "\e0cb"; -} -.icon-bubble-heart-2:before { - content: "\e0cc"; -} -.icon-bubble-minus-1:before { - content: "\e0cd"; -} -.icon-bubble-minus-2:before { - content: "\e0ce"; -} -.icon-bubble-minus-3:before { - content: "\e0cf"; -} -.icon-bubble-quote-1:before { - content: "\e0d0"; -} -.icon-bubble-quote-2:before { - content: "\e0d1"; -} -.icon-bubble-smiley-3:before { - content: "\e0d2"; -} -.icon-bubble-smiley-4:before { - content: "\e0d3"; -} -.icon-bubble-smiley-smile:before { - content: "\e0d4"; -} -.icon-bubble-smiley-wink:before { - content: "\e0d5"; -} -.icon-bubble-star-1:before { - content: "\e0d6"; -} -.icon-bubble-star-2:before { - content: "\e0d7"; -} -.icon-bubble-star-3:before { - content: "\e0d8"; -} -.icon-chat-1:before { - content: "\e0d9"; -} -.icon-chat-2:before { - content: "\e0da"; -} -.icon-chat-3:before { - content: "\e0db"; -} -.icon-chat-4:before { - content: "\e0dc"; -} -.icon-chat-5:before { - content: "\e0dd"; -} -.icon-chat-bubble-1:before { - content: "\e0de"; -} -.icon-chat-bubble-2:before { - content: "\e0df"; -} -.icon-smiley-happy-1:before { - content: "\e0e0"; -} -.icon-smiley-happy-2:before { - content: "\e0e1"; -} -.icon-smiley-happy-3:before { - content: "\e0e2"; -} -.icon-smiley-happy-4:before { - content: "\e0e3"; -} -.icon-smiley-happy-5:before { - content: "\e0e4"; -} -.icon-smiley-relax:before { - content: "\e0e5"; -} -.icon-smiley-sad:before { - content: "\e0e6"; -} -.icon-smiley-surprise:before { - content: "\e0e7"; -} -.icon-thinking-1:before { - content: "\e0e8"; -} -.icon-thinking-2:before { - content: "\e0e9"; -} -.icon-call-1:before { - content: "\e0ea"; -} -.icon-call-2:before { - content: "\e0eb"; -} -.icon-call-3:before { - content: "\e0ec"; -} -.icon-call-4:before { - content: "\e0ed"; -} -.icon-call-add:before { - content: "\e0ee"; -} -.icon-call-block:before { - content: "\e0ef"; -} -.icon-call-delete:before { - content: "\e0f0"; -} -.icon-call-in:before { - content: "\e0f1"; -} -.icon-call-minus:before { - content: "\e0f2"; -} -.icon-call-out:before { - content: "\e0f3"; -} -.icon-contact:before { - content: "\e0f4"; -} -.icon-fax:before { - content: "\e0f5"; -} -.icon-hang-up:before { - content: "\e0f6"; -} -.icon-message:before { - content: "\e0f7"; -} -.icon-mobile-phone-1:before { - content: "\e0f8"; -} -.icon-mobile-phone-2:before { - content: "\e0f9"; -} -.icon-phone-1:before { - content: "\e0fa"; -} -.icon-phone-2:before { - content: "\e0fb"; -} -.icon-phone-3:before { - content: "\e0fc"; -} -.icon-phone-4:before { - content: "\e0fd"; -} -.icon-phone-vibration:before { - content: "\e0fe"; -} -.icon-signal-fine:before { - content: "\e0ff"; -} -.icon-signal-full:before { - content: "\e100"; -} -.icon-signal-high:before { - content: "\e101"; -} -.icon-signal-no:before { - content: "\e102"; -} -.icon-signal-poor:before { - content: "\e103"; -} -.icon-signal-weak:before { - content: "\e104"; -} -.icon-smartphone:before { - content: "\e105"; -} -.icon-tape:before { - content: "\e106"; -} -.icon-camera-symbol-1:before { - content: "\e107"; -} -.icon-camera-symbol-2:before { - content: "\e108"; -} -.icon-camera-symbol-3:before { - content: "\e109"; -} -.icon-headphone:before { - content: "\e10a"; -} -.icon-antenna-1:before { - content: "\e10b"; -} -.icon-antenna-2:before { - content: "\e10c"; -} -.icon-antenna-3:before { - content: "\e10d"; -} -.icon-hotspot-1:before { - content: "\e10e"; -} -.icon-hotspot-2:before { - content: "\e10f"; +.icon-feedback:before { + content: "s"; } .icon-link:before { - content: "\e110"; + content: "t"; } -.icon-megaphone-1:before { - content: "\e111"; +.icon-more:before { + content: "u"; } -.icon-megaphone-2:before { - content: "\e112"; +.icon-preferences:before { + content: "v"; } -.icon-radar:before { - content: "\e113"; +.icon-badge-official:before { + content: "c"; } -.icon-rss-1:before { - content: "\e114"; +.icon-docker-cli:before { + content: "d"; } -.icon-rss-2:before { - content: "\e115"; +.icon-docker-exec:before { + content: "k"; } -.icon-satellite:before { - content: "\e116"; +.icon-user:before { + content: "n"; } -.icon-address-1:before { - content: "\e117"; +.icon-open-external:before { + content: "b"; } -.icon-address-2:before { - content: "\e118"; -} -.icon-address-3:before { - content: "\e119"; -} -.icon-forward:before { - content: "\e11a"; -} -.icon-inbox-1:before { - content: "\e11b"; -} -.icon-inbox-2:before { - content: "\e11c"; -} -.icon-inbox-3:before { - content: "\e11d"; -} -.icon-inbox-4:before { - content: "\e11e"; -} -.icon-letter-1:before { - content: "\e11f"; -} -.icon-letter-2:before { - content: "\e120"; -} -.icon-letter-3:before { - content: "\e121"; -} -.icon-letter-4:before { - content: "\e122"; -} -.icon-letter-5:before { - content: "\e123"; -} -.icon-mail-1:before { - content: "\e124"; -} -.icon-mail-2:before { - content: "\e125"; -} -.icon-mail-add:before { - content: "\e126"; -} -.icon-mail-attention:before { - content: "\e127"; -} -.icon-mail-block:before { - content: "\e128"; -} -.icon-mail-box-1:before { - content: "\e129"; -} -.icon-mail-box-2:before { - content: "\e12a"; -} -.icon-mail-box-3:before { - content: "\e12b"; -} -.icon-mail-checked:before { - content: "\e12c"; -} -.icon-mail-compose:before { - content: "\e12d"; -} -.icon-mail-delete:before { - content: "\e12e"; -} -.icon-mail-favorite:before { - content: "\e12f"; -} -.icon-mail-inbox:before { - content: "\e130"; -} -.icon-mail-lock:before { - content: "\e131"; -} -.icon-mail-minus:before { - content: "\e132"; -} -.icon-mail-read:before { - content: "\e133"; -} -.icon-mail-recieved-1:before { - content: "\e134"; -} -.icon-mail-recieved-2:before { - content: "\e135"; -} -.icon-mail-search-1:before { - content: "\e136"; -} -.icon-mail-search-2:before { - content: "\e137"; -} -.icon-mail-sent-1:before { - content: "\e138"; -} -.icon-mail-sent-2:before { - content: "\e139"; -} -.icon-mail-setting:before { - content: "\e13a"; -} -.icon-mail-star:before { - content: "\e13b"; -} -.icon-mail-sync:before { - content: "\e13c"; -} -.icon-mail-time:before { - content: "\e13d"; -} -.icon-outbox-1:before { - content: "\e13e"; -} -.icon-outbox-2:before { - content: "\e13f"; -} -.icon-plane-paper-1:before { - content: "\e140"; -} -.icon-plane-paper-2:before { - content: "\e141"; -} -.icon-reply-mail-1:before { - content: "\e142"; -} -.icon-reply-mail-2:before { - content: "\e143"; -} -.icon-connection-1:before { - content: "\e144"; -} -.icon-connection-2:before { - content: "\e145"; -} -.icon-connection-3:before { - content: "\e146"; -} -.icon-contacts-1:before { - content: "\e147"; -} -.icon-contacts-2:before { - content: "\e148"; -} -.icon-contacts-3:before { - content: "\e149"; -} -.icon-contacts-4:before { - content: "\e14a"; -} -.icon-female:before { - content: "\e14b"; -} -.icon-gender-female:before { - content: "\e14c"; -} -.icon-gender-male:before { - content: "\e14d"; -} -.icon-genders:before { - content: "\e14e"; -} -.icon-id-1:before { - content: "\e14f"; -} -.icon-id-2:before { - content: "\e150"; -} -.icon-id-3:before { - content: "\e151"; -} -.icon-id-4:before { - content: "\e152"; -} -.icon-id-5:before { - content: "\e153"; -} -.icon-id-6:before { - content: "\e154"; -} -.icon-id-7:before { - content: "\e155"; -} -.icon-id-8:before { - content: "\e156"; -} -.icon-male:before { - content: "\e157"; -} -.icon-profile-1:before { - content: "\e158"; -} -.icon-profile-2:before { - content: "\e159"; -} -.icon-profile-3:before { - content: "\e15a"; -} -.icon-profile-4:before { - content: "\e15b"; -} -.icon-profile-5:before { - content: "\e15c"; -} -.icon-profile-6:before { - content: "\e15d"; -} -.icon-profile-athlete:before { - content: "\e15e"; -} -.icon-profile-bussiness-man:before { - content: "\e15f"; -} -.icon-profile-chef:before { - content: "\e160"; -} -.icon-profile-cop:before { - content: "\e161"; -} -.icon-profile-doctor-1:before { - content: "\e162"; -} -.icon-profile-doctor-2:before { - content: "\e163"; -} -.icon-profile-gentleman-1:before { - content: "\e164"; -} -.icon-profile-gentleman-2:before { - content: "\e165"; -} -.icon-profile-graduate:before { - content: "\e166"; -} -.icon-profile-king:before { - content: "\e167"; -} -.icon-profile-lady-1:before { - content: "\e168"; -} -.icon-profile-lady-2:before { - content: "\e169"; -} -.icon-profile-man:before { - content: "\e16a"; -} -.icon-profile-nurse1:before { - content: "\e16b"; -} -.icon-profile-nurse-2:before { - content: "\e16c"; -} -.icon-profile-prisoner:before { - content: "\e16d"; -} -.icon-profile-serviceman-1:before { - content: "\e16e"; -} -.icon-profile-serviceman-2:before { - content: "\e16f"; -} -.icon-profile-spy:before { - content: "\e170"; -} -.icon-profile-teacher:before { - content: "\e171"; -} -.icon-profile-thief:before { - content: "\e172"; -} -.icon-user-1:before { - content: "\e173"; -} -.icon-user-2:before { - content: "\e174"; -} -.icon-user-add-1:before { - content: "\e175"; -} -.icon-user-add-2:before { - content: "\e176"; -} -.icon-user-block-1:before { - content: "\e177"; -} -.icon-user-block-2:before { - content: "\e178"; -} -.icon-user-checked-1:before { - content: "\e179"; -} -.icon-user-checked-2:before { - content: "\e17a"; -} -.icon-user-delete-1:before { - content: "\e17b"; -} -.icon-user-delete-2:before { - content: "\e17c"; -} -.icon-user-edit-1:before { - content: "\e17d"; -} -.icon-user-edit-2:before { - content: "\e17e"; -} -.icon-user-heart-1:before { - content: "\e17f"; -} -.icon-user-heart-2:before { - content: "\e180"; -} -.icon-user-lock-1:before { - content: "\e181"; -} -.icon-user-lock-2:before { - content: "\e182"; -} -.icon-user-minus-1:before { - content: "\e183"; -} -.icon-user-minus-2:before { - content: "\e184"; -} -.icon-user-search-1:before { - content: "\e185"; -} -.icon-user-search-2:before { - content: "\e186"; -} -.icon-user-setting-1:before { - content: "\e187"; -} -.icon-user-setting-2:before { - content: "\e188"; -} -.icon-user-star-1:before { - content: "\e189"; -} -.icon-user-star-2:before { - content: "\e18a"; -} -.icon-bag-shopping-1:before { - content: "\e18b"; -} -.icon-bag-shopping-2:before { - content: "\e18c"; -} -.icon-bag-shopping-3:before { - content: "\e18d"; -} -.icon-basket-1:before { - content: "\e18e"; -} -.icon-basket-2:before { - content: "\e18f"; -} -.icon-basket-3:before { - content: "\e190"; -} -.icon-basket-add:before { - content: "\e191"; -} -.icon-basket-minus:before { - content: "\e192"; -} -.icon-briefcase:before { - content: "\e193"; -} -.icon-cart-1:before { - content: "\e194"; -} -.icon-cart-2:before { - content: "\e195"; -} -.icon-cart-3:before { - content: "\e196"; -} -.icon-cart-4:before { - content: "\e197"; -} -.icon-cut:before { - content: "\e198"; -} -.icon-handbag-1:before { - content: "\e199"; -} -.icon-handbag-2:before { - content: "\e19a"; -} -.icon-purse-1:before { - content: "\e19b"; -} -.icon-purse-2:before { - content: "\e19c"; -} -.icon-qr-code:before { - content: "\e19d"; -} -.icon-receipt-1:before { - content: "\e19e"; -} -.icon-receipt-2:before { - content: "\e19f"; -} -.icon-receipt-3:before { - content: "\e1a0"; -} -.icon-receipt-4:before { - content: "\e1a1"; -} -.icon-shopping-1:before { - content: "\e1a2"; -} -.icon-sign-new-1:before { - content: "\e1a3"; -} -.icon-sign-new-2:before { - content: "\e1a4"; -} -.icon-sign-parking:before { - content: "\e1a5"; -} -.icon-signal-star:before { - content: "\e1a6"; -} -.icon-trolley-1:before { - content: "\e1a7"; -} -.icon-trolley-2:before { - content: "\e1a8"; -} -.icon-trolley-3:before { - content: "\e1a9"; -} -.icon-trolley-load:before { - content: "\e1aa"; -} -.icon-trolley-off:before { - content: "\e1ab"; -} -.icon-wallet-1:before { - content: "\e1ac"; -} -.icon-wallet-2:before { - content: "\e1ad"; -} -.icon-wallet-3:before { - content: "\e1ae"; -} -.icon-camera-1:before { - content: "\e1af"; -} -.icon-camera-2:before { - content: "\e1b0"; -} -.icon-camera-3:before { - content: "\e1b1"; -} -.icon-camera-4:before { - content: "\e1b2"; -} -.icon-camera-5:before { - content: "\e1b3"; -} -.icon-camera-back:before { - content: "\e1b4"; -} -.icon-camera-focus:before { - content: "\e1b5"; -} -.icon-camera-frames:before { - content: "\e1b6"; -} -.icon-camera-front:before { - content: "\e1b7"; -} -.icon-camera-graph-1:before { - content: "\e1b8"; -} -.icon-camera-graph-2:before { - content: "\e1b9"; -} -.icon-camera-landscape:before { - content: "\e1ba"; -} -.icon-camera-lens-1:before { - content: "\e1bb"; -} -.icon-camera-lens-2:before { - content: "\e1bc"; -} -.icon-camera-light:before { - content: "\e1bd"; -} -.icon-camera-portrait:before { - content: "\e1be"; -} -.icon-camera-view:before { - content: "\e1bf"; -} -.icon-film-1:before { - content: "\e1c0"; -} -.icon-film-2:before { - content: "\e1c1"; -} -.icon-photo-1:before { - content: "\e1c2"; -} -.icon-photo-2:before { - content: "\e1c3"; -} -.icon-photo-frame:before { - content: "\e1c4"; -} -.icon-photos-1:before { - content: "\e1c5"; -} -.icon-photos-2:before { - content: "\e1c6"; -} -.icon-polaroid:before { - content: "\e1c7"; -} -.icon-signal-camera-1:before { - content: "\e1c8"; -} -.icon-signal-camera-2:before { - content: "\e1c9"; -} -.icon-user-photo:before { - content: "\e1ca"; -} -.icon-backward-1:before { - content: "\e1cb"; -} -.icon-dvd-player:before { - content: "\e1cc"; -} -.icon-eject-1:before { - content: "\e1cd"; -} -.icon-film-3:before { - content: "\e1ce"; -} -.icon-forward-1:before { - content: "\e1cf"; -} -.icon-handycam:before { - content: "\e1d0"; -} -.icon-movie-play-1:before { - content: "\e1d1"; -} -.icon-movie-play-2:before { - content: "\e1d2"; -} -.icon-movie-play-3:before { - content: "\e1d3"; -} -.icon-next-1:before { - content: "\e1d4"; -} -.icon-pause-1:before { - content: "\e1d5"; -} -.icon-play-1:before { - content: "\e1d6"; -} -.icon-player:before { - content: "\e1d7"; -} -.icon-previous-1:before { - content: "\e1d8"; -} -.icon-record-1:before { - content: "\e1d9"; -} -.icon-slate:before { - content: "\e1da"; -} -.icon-stop-1:before { - content: "\e1db"; -} -.icon-television:before { - content: "\e1dc"; -} -.icon-video-camera-1:before { - content: "\e1dd"; -} -.icon-video-camera-2:before { - content: "\e1de"; -} -.icon-backward-2:before { - content: "\e1df"; -} -.icon-cd:before { - content: "\e1e0"; -} -.icon-eject-2:before { - content: "\e1e1"; -} -.icon-equalizer-2:before { - content: "\e1e2"; -} -.icon-equalizer-3:before { - content: "\e1e3"; -} -.icon-forward-2:before { - content: "\e1e4"; -} -.icon-gramophone:before { - content: "\e1e5"; -} -.icon-gramophone-record-2:before { - content: "\e1e6"; -} -.icon-guitar:before { - content: "\e1e7"; -} -.icon-headphone-1:before { - content: "\e1e8"; -} -.icon-headphone-2:before { - content: "\e1e9"; -} -.icon-microphone-1:before { - content: "\e1ea"; -} -.icon-microphone-2:before { - content: "\e1eb"; -} -.icon-microphone-3:before { - content: "\e1ec"; -} -.icon-movie-play-4:before { - content: "\e1ed"; -} -.icon-music-note-1:before { - content: "\e1ee"; -} -.icon-music-note-2:before { - content: "\e1ef"; -} -.icon-music-note-3:before { - content: "\e1f0"; -} -.icon-music-note-4:before { - content: "\e1f1"; -} -.icon-next-2:before { - content: "\e1f2"; -} -.icon-notes-1:before { - content: "\e1f3"; -} -.icon-notes-2:before { - content: "\e1f4"; -} -.icon-pause-2:before { - content: "\e1f5"; -} -.icon-piano:before { - content: "\e1f6"; -} -.icon-play-2:before { - content: "\e1f7"; -} -.icon-playlist:before { - content: "\e1f8"; -} -.icon-previous-2:before { - content: "\e1f9"; -} -.icon-radio-1:before { - content: "\e1fa"; -} -.icon-radio-2:before { - content: "\e1fb"; -} -.icon-record-2:before { - content: "\e1fc"; -} -.icon-recorder:before { - content: "\e1fd"; -} -.icon-saxophone:before { - content: "\e1fe"; -} -.icon-speaker-1:before { - content: "\e1ff"; -} -.icon-speaker-2:before { - content: "\e200"; -} -.icon-speaker-3:before { - content: "\e201"; -} -.icon-stop-2:before { - content: "\e202"; -} -.icon-tape-1:before { - content: "\e203"; -} -.icon-trumpet:before { - content: "\e204"; -} -.icon-volume-down-1:before { - content: "\e205"; -} -.icon-volume-down-2:before { - content: "\e206"; -} -.icon-volume-loud-1:before { - content: "\e207"; -} -.icon-volume-loud-2:before { - content: "\e208"; -} -.icon-volume-low-1:before { - content: "\e209"; -} -.icon-volume-low-2:before { - content: "\e20a"; -} -.icon-volume-medium-1:before { - content: "\e20b"; -} -.icon-volume-medium-2:before { - content: "\e20c"; -} -.icon-volume-mute-1:before { - content: "\e20d"; -} -.icon-volume-mute-2:before { - content: "\e20e"; -} -.icon-volume-mute-3:before { - content: "\e20f"; -} -.icon-volume-up-1:before { - content: "\e210"; -} -.icon-volume-up-2:before { - content: "\e211"; -} -.icon-walkman:before { - content: "\e212"; -} -.icon-cloud:before { - content: "\e213"; -} -.icon-cloud-add:before { - content: "\e214"; -} -.icon-cloud-checked:before { - content: "\e215"; -} -.icon-cloud-delete:before { - content: "\e216"; -} -.icon-cloud-download:before { - content: "\e217"; -} -.icon-cloud-minus:before { - content: "\e218"; -} -.icon-cloud-refresh:before { - content: "\e219"; -} -.icon-cloud-sync:before { - content: "\e21a"; -} -.icon-cloud-upload:before { - content: "\e21b"; -} -.icon-download-1:before { - content: "\e21c"; -} -.icon-download-2:before { - content: "\e21d"; -} -.icon-download-3:before { - content: "\e21e"; -} -.icon-download-4:before { - content: "\e21f"; -} -.icon-download-5:before { - content: "\e220"; -} -.icon-download-6:before { - content: "\e221"; -} -.icon-download-7:before { - content: "\e222"; -} -.icon-download-8:before { - content: "\e223"; -} -.icon-download-9:before { - content: "\e224"; -} -.icon-download-10:before { - content: "\e225"; -} -.icon-download-11:before { - content: "\e226"; -} -.icon-download-12:before { - content: "\e227"; -} -.icon-download-13:before { - content: "\e228"; -} -.icon-download-14:before { - content: "\e229"; -} -.icon-download-15:before { - content: "\e22a"; -} -.icon-download-file:before { - content: "\e22b"; -} -.icon-download-folder:before { - content: "\e22c"; -} -.icon-goal-1:before { - content: "\e22d"; -} -.icon-goal-2:before { - content: "\e22e"; -} -.icon-transfer-1:before { - content: "\e22f"; -} -.icon-transfer-2:before { - content: "\e230"; -} -.icon-transfer-3:before { - content: "\e231"; -} -.icon-transfer-4:before { - content: "\e232"; -} -.icon-transfer-5:before { - content: "\e233"; -} -.icon-transfer-6:before { - content: "\e234"; -} -.icon-transfer-7:before { - content: "\e235"; -} -.icon-transfer-8:before { - content: "\e236"; -} -.icon-transfer-9:before { - content: "\e237"; -} -.icon-transfer-10:before { - content: "\e238"; -} -.icon-transfer-11:before { - content: "\e239"; -} -.icon-transfer-12:before { - content: "\e23a"; -} -.icon-upload-1:before { - content: "\e23b"; -} -.icon-upload-2:before { - content: "\e23c"; -} -.icon-upload-3:before { - content: "\e23d"; -} -.icon-upload-4:before { - content: "\e23e"; -} -.icon-upload-5:before { - content: "\e23f"; -} -.icon-upload-6:before { - content: "\e240"; -} -.icon-upload-7:before { - content: "\e241"; -} -.icon-upload-8:before { - content: "\e242"; -} -.icon-upload-9:before { - content: "\e243"; -} -.icon-upload-10:before { - content: "\e244"; -} -.icon-upload-11:before { - content: "\e245"; -} -.icon-upload-12:before { - content: "\e246"; -} -.icon-clipboard-1:before { - content: "\e247"; -} -.icon-clipboard-2:before { - content: "\e248"; -} -.icon-clipboard-3:before { - content: "\e249"; -} -.icon-clipboard-add:before { - content: "\e24a"; -} -.icon-clipboard-block:before { - content: "\e24b"; -} -.icon-clipboard-checked:before { - content: "\e24c"; -} -.icon-clipboard-delete:before { - content: "\e24d"; -} -.icon-clipboard-edit:before { - content: "\e24e"; -} -.icon-clipboard-minus:before { - content: "\e24f"; -} -.icon-document-1:before { - content: "\e250"; -} -.icon-document-2:before { - content: "\e251"; -} -.icon-file-1:before { - content: "\e252"; -} -.icon-file-2:before { - content: "\e253"; -} -.icon-file-add:before { - content: "\e254"; -} -.icon-file-attention:before { - content: "\e255"; -} -.icon-file-block:before { - content: "\e256"; -} -.icon-file-bookmark:before { - content: "\e257"; -} -.icon-file-checked:before { - content: "\e258"; -} -.icon-file-code:before { - content: "\e259"; -} -.icon-file-delete:before { - content: "\e25a"; -} -.icon-file-download:before { - content: "\e25b"; -} -.icon-file-edit:before { - content: "\e25c"; -} -.icon-file-favorite-1:before { - content: "\e25d"; -} -.icon-file-favorite-2:before { - content: "\e25e"; -} -.icon-file-graph-1:before { - content: "\e25f"; -} -.icon-file-graph-2:before { - content: "\e260"; -} -.icon-file-home:before { - content: "\e261"; -} -.icon-file-image-1:before { - content: "\e262"; -} -.icon-file-image-2:before { - content: "\e263"; -} -.icon-file-list:before { - content: "\e264"; -} -.icon-file-lock:before { - content: "\e265"; -} -.icon-file-media:before { - content: "\e266"; -} -.icon-file-minus:before { - content: "\e267"; -} -.icon-file-music:before { - content: "\e268"; -} -.icon-file-new:before { - content: "\e269"; -} -.icon-file-registry:before { - content: "\e26a"; -} -.icon-file-search:before { - content: "\e26b"; -} -.icon-file-setting:before { - content: "\e26c"; -} -.icon-file-sync:before { - content: "\e26d"; -} -.icon-file-table:before { - content: "\e26e"; -} -.icon-file-thumbnail:before { - content: "\e26f"; -} -.icon-file-time:before { - content: "\e270"; -} -.icon-file-transfer:before { - content: "\e271"; -} -.icon-file-upload:before { - content: "\e272"; -} -.icon-file-zip:before { - content: "\e273"; -} -.icon-files-1:before { - content: "\e274"; -} -.icon-files-2:before { - content: "\e275"; -} -.icon-files-3:before { - content: "\e276"; -} -.icon-files-4:before { - content: "\e277"; -} -.icon-files-5:before { - content: "\e278"; -} -.icon-files-6:before { - content: "\e279"; -} -.icon-hand-file-1:before { - content: "\e27a"; -} -.icon-hand-file-2:before { - content: "\e27b"; -} -.icon-note-paper-1:before { - content: "\e27c"; -} -.icon-note-paper-2:before { - content: "\e27d"; -} -.icon-note-paper-add:before { - content: "\e27e"; -} -.icon-note-paper-attention:before { - content: "\e27f"; -} -.icon-note-paper-block:before { - content: "\e280"; -} -.icon-note-paper-checked:before { - content: "\e281"; -} -.icon-note-paper-delete:before { - content: "\e282"; -} -.icon-note-paper-download:before { - content: "\e283"; -} -.icon-note-paper-edit:before { - content: "\e284"; -} -.icon-note-paper-favorite:before { - content: "\e285"; -} -.icon-note-paper-lock:before { - content: "\e286"; -} -.icon-note-paper-minus:before { - content: "\e287"; -} -.icon-note-paper-search:before { - content: "\e288"; -} -.icon-note-paper-sync:before { - content: "\e289"; -} -.icon-note-paper-upload:before { - content: "\e28a"; -} -.icon-print:before { - content: "\e28b"; -} -.icon-folder-1:before { - content: "\e28c"; -} -.icon-folder-2:before { - content: "\e28d"; -} -.icon-folder-3:before { - content: "\e28e"; -} -.icon-folder-4:before { - content: "\e28f"; -} -.icon-folder-add:before { - content: "\e290"; -} -.icon-folder-attention:before { - content: "\e291"; -} -.icon-folder-block:before { - content: "\e292"; -} -.icon-folder-bookmark:before { - content: "\e293"; -} -.icon-folder-checked:before { - content: "\e294"; -} -.icon-folder-code:before { - content: "\e295"; -} -.icon-folder-delete:before { - content: "\e296"; -} -.icon-folder-download:before { - content: "\e297"; -} -.icon-folder-edit:before { - content: "\e298"; -} -.icon-folder-favorite:before { - content: "\e299"; -} -.icon-folder-home:before { - content: "\e29a"; -} -.icon-folder-image:before { - content: "\e29b"; -} -.icon-folder-lock:before { - content: "\e29c"; -} -.icon-folder-media:before { - content: "\e29d"; -} -.icon-folder-minus:before { - content: "\e29e"; -} -.icon-folder-music:before { - content: "\e29f"; -} -.icon-folder-new:before { - content: "\e2a0"; -} -.icon-folder-search:before { - content: "\e2a1"; -} -.icon-folder-setting:before { - content: "\e2a2"; -} -.icon-folder-share-1:before { - content: "\e2a3"; -} -.icon-folder-share-2:before { - content: "\e2a4"; -} -.icon-folder-sync:before { - content: "\e2a5"; -} -.icon-folder-transfer:before { - content: "\e2a6"; -} -.icon-folder-upload:before { - content: "\e2a7"; -} -.icon-folder-zip:before { - content: "\e2a8"; -} -.icon-add-1:before { - content: "\e2a9"; -} -.icon-add-2:before { - content: "\e2aa"; -} -.icon-add-3:before { - content: "\e2ab"; -} -.icon-add-4:before { - content: "\e2ac"; -} -.icon-add-tag:before { - content: "\e2ad"; -} -.icon-arrow-1:before { - content: "\e2ae"; -} -.icon-arrow-2:before { - content: "\e2af"; -} -.icon-arrow-down-1:before { - content: "\e2b0"; -} -.icon-arrow-down-2:before { - content: "\e2b1"; -} -.icon-arrow-left-1:before { - content: "\e2b2"; -} -.icon-arrow-left-2:before { - content: "\e2b3"; -} -.icon-arrow-move-1:before { - content: "\e2b4"; -} -.icon-arrow-move-down:before { - content: "\e2b5"; -} -.icon-arrow-move-left:before { - content: "\e2b6"; -} -.icon-arrow-move-right:before { - content: "\e2b7"; -} -.icon-arrow-move-up:before { - content: "\e2b8"; -} -.icon-arrow-right-1:before { - content: "\e2b9"; -} -.icon-arrow-right-2:before { - content: "\e2ba"; -} -.icon-arrow-up-1:before { - content: "\e2bb"; -} -.icon-arrow-up-2:before { - content: "\e2bc"; -} -.icon-back:before { - content: "\e2bd"; -} -.icon-center-expand:before { - content: "\e2be"; -} -.icon-center-reduce:before { - content: "\e2bf"; -} -.icon-delete-1-1:before { - content: "\e2c0"; -} -.icon-delete-2-1:before { - content: "\e2c1"; -} -.icon-delete-3:before { - content: "\e2c2"; -} -.icon-delete-4:before { - content: "\e2c3"; -} -.icon-delete-tag:before { - content: "\e2c4"; -} -.icon-expand-horizontal:before { - content: "\e2c5"; -} -.icon-expand-vertical:before { - content: "\e2c6"; -} -.icon-forward-3:before { - content: "\e2c7"; -} -.icon-infinity:before { - content: "\e2c8"; -} -.icon-loading:before { - content: "\e2c9"; -} -.icon-log-out-1:before { - content: "\e2ca"; -} -.icon-log-out-2:before { - content: "\e2cb"; -} -.icon-loop-1:before { - content: "\e2cc"; -} -.icon-loop-2:before { - content: "\e2cd"; -} -.icon-loop-3:before { - content: "\e2ce"; -} -.icon-minus-1:before { - content: "\e2cf"; -} -.icon-minus-2:before { - content: "\e2d0"; -} -.icon-minus-3:before { - content: "\e2d1"; -} -.icon-minus-4:before { - content: "\e2d2"; -} -.icon-minus-tag:before { - content: "\e2d3"; -} -.icon-move-diagonal-1:before { - content: "\e2d4"; -} -.icon-move-diagonal-2:before { - content: "\e2d5"; -} -.icon-move-horizontal-1:before { - content: "\e2d6"; -} -.icon-move-horizontal-2:before { - content: "\e2d7"; -} -.icon-move-vertical-1:before { - content: "\e2d8"; -} -.icon-move-vertical-2:before { - content: "\e2d9"; -} -.icon-next-1-1:before { - content: "\e2da"; -} -.icon-next-2-1:before { - content: "\e2db"; -} -.icon-power-1-1:before { - content: "\e2dc"; -} -.icon-power-2-1:before { - content: "\e2dd"; -} -.icon-power-3:before { - content: "\e2de"; -} -.icon-power-4:before { - content: "\e2df"; -} -.icon-recycle:before { - content: "\e2e0"; -} -.icon-refresh:before { - content: "\e2e1"; -} -.icon-repeat:before { - content: "\e2e2"; -} -.icon-return:before { - content: "\e2e3"; -} -.icon-scale-all-1:before { - content: "\e2e4"; -} -.icon-scale-center:before { - content: "\e2e5"; -} -.icon-scale-horizontal-1:before { - content: "\e2e6"; -} -.icon-scale-horizontal-2:before { - content: "\e2e7"; -} -.icon-scale-reduce-1:before { - content: "\e2e8"; -} -.icon-scale-reduce-2:before { - content: "\e2e9"; -} -.icon-scale-reduce-3:before { - content: "\e2ea"; -} -.icon-scale-spread-1:before { - content: "\e2eb"; -} -.icon-scale-spread-2:before { - content: "\e2ec"; -} -.icon-scale-spread-3:before { - content: "\e2ed"; -} -.icon-scale-vertical-1:before { - content: "\e2ee"; -} -.icon-scale-vertical-2:before { - content: "\e2ef"; -} -.icon-scroll-horizontal-1:before { - content: "\e2f0"; -} -.icon-scroll-horizontal-2:before { - content: "\e2f1"; -} -.icon-scroll-omnidirectional-1:before { - content: "\e2f2"; -} -.icon-scroll-omnidirectional-2:before { - content: "\e2f3"; -} -.icon-scroll-vertical-1:before { - content: "\e2f4"; -} -.icon-scroll-vertical-2:before { - content: "\e2f5"; -} -.icon-shuffle:before { - content: "\e2f6"; -} -.icon-split:before { - content: "\e2f7"; -} -.icon-sync-1:before { - content: "\e2f8"; -} -.icon-sync-2:before { - content: "\e2f9"; -} -.icon-timer:before { - content: "\e2fa"; -} -.icon-transfer:before { - content: "\e2fb"; -} -.icon-transfer-1-1:before { - content: "\e2fc"; -} -.icon-check-1:before { - content: "\e2fd"; -} -.icon-check-2:before { - content: "\e2fe"; -} -.icon-check-3:before { - content: "\e2ff"; -} -.icon-check-box:before { - content: "\e300"; -} -.icon-check-bubble:before { - content: "\e301"; -} -.icon-check-circle-1:before { - content: "\e302"; -} -.icon-check-circle-2:before { - content: "\e303"; -} -.icon-check-list:before { - content: "\e304"; -} -.icon-check-shield:before { - content: "\e305"; -} -.icon-cross:before { - content: "\e306"; -} -.icon-cross-bubble:before { - content: "\e307"; -} -.icon-cross-shield:before { - content: "\e308"; -} -.icon-briefcase-1:before { - content: "\e309"; -} -.icon-brightness-high:before { - content: "\e30a"; -} -.icon-brightness-low:before { - content: "\e30b"; -} -.icon-hammer-1:before { - content: "\e30c"; -} -.icon-hammer-2:before { - content: "\e30d"; -} -.icon-pulse:before { - content: "\e30e"; -} -.icon-scale:before { - content: "\e30f"; -} -.icon-screw-driver:before { - content: "\e310"; -} -.icon-setting-adjustment:before { - content: "\e311"; -} -.icon-setting-gear:before { - content: "\e312"; -} -.icon-setting-gears-1:before { - content: "\e313"; -} -.icon-setting-gears-2:before { - content: "\e314"; -} -.icon-setting-wrenches:before { - content: "\e315"; -} -.icon-switch-1:before { - content: "\e316"; -} -.icon-switch-2:before { - content: "\e317"; -} -.icon-wrench:before { - content: "\e318"; -} -.icon-alarm-1:before { - content: "\e319"; -} -.icon-alarm-clock:before { - content: "\e31a"; -} -.icon-alarm-off:before { - content: "\e31b"; -} -.icon-alarm-snooze:before { - content: "\e31c"; -} -.icon-bell:before { - content: "\e31d"; -} -.icon-calendar-1:before { - content: "\e31e"; -} -.icon-calendar-2:before { - content: "\e31f"; -} -.icon-clock-1:before { - content: "\e320"; -} -.icon-clock-2:before { - content: "\e321"; -} -.icon-clock-3:before { - content: "\e322"; -} -.icon-hourglass-1:before { - content: "\e323"; -} -.icon-hourglass-2:before { - content: "\e324"; -} -.icon-timer-1:before { - content: "\e325"; -} -.icon-timer-3-quarter-1:before { - content: "\e326"; -} -.icon-timer-3-quarter-2:before { - content: "\e327"; -} -.icon-timer-full-1:before { - content: "\e328"; -} -.icon-timer-full-2:before { - content: "\e329"; -} -.icon-timer-half-1:before { - content: "\e32a"; -} -.icon-timer-half-2:before { - content: "\e32b"; -} -.icon-timer-half-3:before { - content: "\e32c"; -} -.icon-timer-half-4:before { - content: "\e32d"; -} -.icon-timer-quarter-1:before { - content: "\e32e"; -} -.icon-timer-quarter-2:before { - content: "\e32f"; -} -.icon-watch-1:before { - content: "\e330"; -} -.icon-watch-2:before { - content: "\e331"; -} -.icon-alert-1:before { - content: "\e332"; -} -.icon-alert-2:before { - content: "\e333"; -} -.icon-alert-3:before { - content: "\e334"; -} -.icon-information:before { - content: "\e335"; -} -.icon-nuclear-1:before { - content: "\e336"; -} -.icon-nuclear-2:before { - content: "\e337"; -} -.icon-question-mark:before { - content: "\e338"; -} -.icon-abacus:before { - content: "\e339"; -} -.icon-amex-card:before { - content: "\e33a"; -} -.icon-atm:before { - content: "\e33b"; -} -.icon-balance:before { - content: "\e33c"; -} -.icon-bank-1:before { - content: "\e33d"; -} -.icon-bank-2:before { - content: "\e33e"; -} -.icon-bank-note-1:before { - content: "\e33f"; -} -.icon-bank-note-2:before { - content: "\e340"; -} -.icon-bank-note-3:before { - content: "\e341"; -} -.icon-bitcoins:before { - content: "\e342"; -} -.icon-board:before { - content: "\e343"; -} -.icon-box-1:before { - content: "\e344"; -} -.icon-box-2:before { - content: "\e345"; -} -.icon-box-3:before { - content: "\e346"; -} -.icon-box-download:before { - content: "\e347"; -} -.icon-box-shipping:before { - content: "\e348"; -} -.icon-box-upload:before { - content: "\e349"; -} -.icon-business-chart-1:before { - content: "\e34a"; -} -.icon-business-chart-2:before { - content: "\e34b"; -} -.icon-calculator-1:before { - content: "\e34c"; -} -.icon-calculator-2:before { - content: "\e34d"; -} -.icon-calculator-3:before { - content: "\e34e"; -} -.icon-cash-register:before { - content: "\e34f"; -} -.icon-chart-board:before { - content: "\e350"; -} -.icon-chart-down:before { - content: "\e351"; -} -.icon-chart-up:before { - content: "\e352"; -} -.icon-check:before { - content: "\e353"; -} -.icon-coins-1:before { - content: "\e354"; -} -.icon-coins-2:before { - content: "\e355"; -} -.icon-court:before { - content: "\e356"; -} -.icon-credit-card:before { - content: "\e357"; -} -.icon-credit-card-lock:before { - content: "\e358"; -} -.icon-delivery:before { - content: "\e359"; -} -.icon-dollar-bag:before { - content: "\e35a"; -} -.icon-dollar-currency-1:before { - content: "\e35b"; -} -.icon-dollar-currency-2:before { - content: "\e35c"; -} -.icon-dollar-currency-3:before { - content: "\e35d"; -} -.icon-dollar-currency-4:before { - content: "\e35e"; -} -.icon-euro-bag:before { - content: "\e35f"; -} -.icon-euro-currency-1:before { - content: "\e360"; -} -.icon-euro-currency-2:before { - content: "\e361"; -} -.icon-euro-currency-3:before { - content: "\e362"; -} -.icon-euro-currency-4:before { - content: "\e363"; -} -.icon-forklift:before { - content: "\e364"; -} -.icon-hand-card:before { - content: "\e365"; -} -.icon-hand-coin:before { - content: "\e366"; -} -.icon-keynote:before { - content: "\e367"; -} -.icon-master-card:before { - content: "\e368"; -} -.icon-money:before { - content: "\e369"; -} -.icon-parking-meter:before { - content: "\e36a"; -} -.icon-percent-1:before { - content: "\e36b"; -} -.icon-percent-2:before { - content: "\e36c"; -} -.icon-percent-3:before { - content: "\e36d"; -} -.icon-percent-4:before { - content: "\e36e"; -} -.icon-percent-5:before { - content: "\e36f"; -} -.icon-percent-up:before { - content: "\e370"; -} -.icon-pie-chart-1:before { - content: "\e371"; -} -.icon-pie-chart-2:before { - content: "\e372"; -} -.icon-piggy-bank:before { - content: "\e373"; -} -.icon-pound-currency-1:before { - content: "\e374"; -} -.icon-pound-currency-2:before { - content: "\e375"; -} -.icon-pound-currency-3:before { - content: "\e376"; -} -.icon-pound-currency-4:before { - content: "\e377"; -} -.icon-safe-1:before { - content: "\e378"; -} -.icon-safe-2:before { - content: "\e379"; -} -.icon-shop:before { - content: "\e37a"; -} -.icon-sign:before { - content: "\e37b"; -} -.icon-trolley:before { - content: "\e37c"; -} -.icon-truck-1:before { - content: "\e37d"; -} -.icon-truck-2:before { - content: "\e37e"; -} -.icon-visa-card:before { - content: "\e37f"; -} -.icon-yen-currency-1:before { - content: "\e380"; -} -.icon-yen-currency-2:before { - content: "\e381"; -} -.icon-yen-currency-3:before { - content: "\e382"; -} -.icon-yen-currency-4:before { - content: "\e383"; -} -.icon-add-marker-1:before { - content: "\e384"; -} -.icon-add-marker-1-1:before { - content: "\e385"; -} -.icon-add-marker-2:before { - content: "\e386"; -} -.icon-add-marker-2-1:before { - content: "\e387"; -} -.icon-add-marker-3:before { - content: "\e388"; -} -.icon-compass-1:before { - content: "\e389"; -} -.icon-compass-2:before { - content: "\e38a"; -} -.icon-compass-3:before { - content: "\e38b"; -} -.icon-delete-marker-1:before { - content: "\e38c"; -} -.icon-delete-marker-1-1:before { - content: "\e38d"; -} -.icon-delete-marker-2:before { - content: "\e38e"; -} -.icon-delete-marker-2-1:before { - content: "\e38f"; -} -.icon-favorite-marker-1:before { - content: "\e390"; -} -.icon-favorite-marker-1-1:before { - content: "\e391"; -} -.icon-favorite-marker-2:before { - content: "\e392"; -} -.icon-favorite-marker-2-1:before { - content: "\e393"; -} -.icon-globe:before { - content: "\e394"; -} -.icon-location:before { - content: "\e395"; -} -.icon-map-1:before { - content: "\e396"; -} -.icon-map-location:before { - content: "\e397"; -} -.icon-map-marker-1:before { - content: "\e398"; -} -.icon-map-marker-1-1:before { - content: "\e399"; -} -.icon-map-marker-2:before { - content: "\e39a"; -} -.icon-map-marker-3:before { - content: "\e39b"; -} -.icon-map-marker-pin:before { - content: "\e39c"; -} -.icon-map-pin:before { - content: "\e39d"; -} -.icon-marker-1:before { - content: "\e39e"; -} -.icon-marker-1-1:before { - content: "\e39f"; -} -.icon-marker-2:before { - content: "\e3a0"; -} -.icon-marker-2-1:before { - content: "\e3a1"; -} -.icon-marker-pin-1:before { - content: "\e3a2"; -} -.icon-marker-pin-2:before { - content: "\e3a3"; -} -.icon-marker-pin-location:before { - content: "\e3a4"; -} -.icon-minus-marker-1:before { - content: "\e3a5"; -} -.icon-minus-marker-1-1:before { - content: "\e3a6"; -} -.icon-minus-marker-2:before { - content: "\e3a7"; -} -.icon-minus-marker-2-1:before { - content: "\e3a8"; -} -.icon-minus-marker-3:before { - content: "\e3a9"; -} -.icon-anchor:before { - content: "\e3aa"; -} -.icon-bank:before { - content: "\e3ab"; -} -.icon-beach:before { - content: "\e3ac"; -} -.icon-boat:before { - content: "\e3ad"; -} -.icon-building-1:before { - content: "\e3ae"; -} -.icon-building-2:before { - content: "\e3af"; -} -.icon-building-3:before { - content: "\e3b0"; -} -.icon-buildings-1:before { - content: "\e3b1"; -} -.icon-buildings-2:before { - content: "\e3b2"; -} -.icon-buildings-3:before { - content: "\e3b3"; -} -.icon-buildings-4:before { - content: "\e3b4"; -} -.icon-castle:before { - content: "\e3b5"; -} -.icon-column:before { - content: "\e3b6"; -} -.icon-direction-sign:before { - content: "\e3b7"; -} -.icon-factory:before { - content: "\e3b8"; -} -.icon-fence:before { - content: "\e3b9"; -} -.icon-garage:before { - content: "\e3ba"; -} -.icon-globe-1:before { - content: "\e3bb"; -} -.icon-globe-2:before { - content: "\e3bc"; -} -.icon-house-1:before { - content: "\e3bd"; -} -.icon-house-2:before { - content: "\e3be"; -} -.icon-house-3:before { - content: "\e3bf"; -} -.icon-house-4:before { - content: "\e3c0"; -} -.icon-library:before { - content: "\e3c1"; -} -.icon-light-house:before { - content: "\e3c2"; -} -.icon-pisa:before { - content: "\e3c3"; -} -.icon-skyscraper:before { - content: "\e3c4"; -} -.icon-temple:before { - content: "\e3c5"; -} -.icon-treasure-map:before { - content: "\e3c6"; -} -.icon-tree:before { - content: "\e3c7"; -} -.icon-tree-pine:before { - content: "\e3c8"; -} -.icon-attention:before { - content: "\e3c9"; -} -.icon-bug-1:before { - content: "\e3ca"; -} -.icon-bug-2:before { - content: "\e3cb"; -} -.icon-css3:before { - content: "\e3cc"; -} -.icon-firewall:before { - content: "\e3cd"; -} -.icon-html5:before { - content: "\e3ce"; -} -.icon-plugins-1:before { - content: "\e3cf"; -} -.icon-plugins-2:before { - content: "\e3d0"; -} -.icon-script:before { - content: "\e3d1"; -} -.icon-new-window:before { - content: "\e3d2"; -} -.icon-window-1:before { - content: "\e3d3"; -} -.icon-window-2:before { - content: "\e3d4"; -} -.icon-window-3:before { - content: "\e3d5"; -} -.icon-window-add:before { - content: "\e3d6"; -} -.icon-window-alert:before { - content: "\e3d7"; -} -.icon-window-check:before { - content: "\e3d8"; -} -.icon-window-code-1:before { - content: "\e3d9"; -} -.icon-window-code-2:before { - content: "\e3da"; -} -.icon-window-code-3:before { - content: "\e3db"; -} -.icon-window-column:before { - content: "\e3dc"; -} -.icon-window-delete:before { - content: "\e3dd"; -} -.icon-window-denied:before { - content: "\e3de"; -} -.icon-window-download-1:before { - content: "\e3df"; -} -.icon-window-download-2:before { - content: "\e3e0"; -} -.icon-window-edit:before { - content: "\e3e1"; -} -.icon-window-favorite:before { - content: "\e3e2"; -} -.icon-window-graph-1:before { - content: "\e3e3"; -} -.icon-window-graph-2:before { - content: "\e3e4"; -} -.icon-window-hand:before { - content: "\e3e5"; -} -.icon-window-home:before { - content: "\e3e6"; -} -.icon-window-like:before { - content: "\e3e7"; -} -.icon-window-list-1:before { - content: "\e3e8"; -} -.icon-window-list-2:before { - content: "\e3e9"; -} -.icon-window-lock:before { - content: "\e3ea"; -} -.icon-window-minimize:before { - content: "\e3eb"; -} -.icon-window-minus:before { - content: "\e3ec"; -} -.icon-window-refresh:before { - content: "\e3ed"; -} -.icon-window-register:before { - content: "\e3ee"; -} -.icon-window-search:before { - content: "\e3ef"; -} -.icon-window-selection:before { - content: "\e3f0"; -} -.icon-window-setting:before { - content: "\e3f1"; -} -.icon-window-sync:before { - content: "\e3f2"; -} -.icon-window-thumbnails-1:before { - content: "\e3f3"; -} -.icon-window-thumbnails-2:before { - content: "\e3f4"; -} -.icon-window-time:before { - content: "\e3f5"; -} -.icon-window-upload-1:before { - content: "\e3f6"; -} -.icon-window-upload-2:before { - content: "\e3f7"; -} -.icon-windows-selection:before { - content: "\e3f8"; -} -.icon-database:before { - content: "\e3f9"; -} -.icon-database-alert:before { - content: "\e3fa"; -} -.icon-database-block:before { - content: "\e3fb"; -} -.icon-database-check:before { - content: "\e3fc"; -} -.icon-database-delete:before { - content: "\e3fd"; -} -.icon-database-download:before { - content: "\e3fe"; -} -.icon-database-edit:before { - content: "\e3ff"; -} -.icon-database-lock:before { - content: "\e400"; -} -.icon-database-minus:before { - content: "\e401"; -} -.icon-database-network:before { - content: "\e402"; -} -.icon-database-plus:before { - content: "\e403"; -} -.icon-database-refresh:before { - content: "\e404"; -} -.icon-database-search:before { - content: "\e405"; -} -.icon-database-setting:before { - content: "\e406"; -} -.icon-database-sync:before { - content: "\e407"; -} -.icon-database-time:before { - content: "\e408"; -} -.icon-database-upload:before { - content: "\e409"; -} -.icon-battery-charging:before { - content: "\e40a"; -} -.icon-battery-full:before { - content: "\e40b"; -} -.icon-battery-high:before { - content: "\e40c"; -} -.icon-battery-low:before { - content: "\e40d"; -} -.icon-battery-medium:before { - content: "\e40e"; -} -.icon-cd-1:before { - content: "\e40f"; -} -.icon-cd-2:before { - content: "\e410"; -} -.icon-chip:before { - content: "\e411"; -} -.icon-computer:before { - content: "\e412"; -} -.icon-disc:before { - content: "\e413"; -} -.icon-filter:before { - content: "\e414"; -} -.icon-floppy-disk:before { - content: "\e415"; -} -.icon-gameboy:before { - content: "\e416"; -} -.icon-harddisk-1:before { - content: "\e417"; -} -.icon-harddisk-2:before { - content: "\e418"; -} -.icon-imac:before { - content: "\e419"; -} -.icon-ipad-1:before { - content: "\e41a"; -} -.icon-ipad-2:before { - content: "\e41b"; -} -.icon-ipod:before { - content: "\e41c"; -} -.icon-joystick-1:before { - content: "\e41d"; -} -.icon-joystick-2:before { - content: "\e41e"; -} -.icon-joystick-3:before { - content: "\e41f"; -} -.icon-keyboard-1:before { - content: "\e420"; -} -.icon-keyboard-2:before { - content: "\e421"; -} -.icon-kindle-1:before { - content: "\e422"; -} -.icon-kindle-2:before { - content: "\e423"; -} -.icon-laptop-1:before { - content: "\e424"; -} -.icon-laptop-2:before { - content: "\e425"; -} -.icon-memory-card:before { - content: "\e426"; -} -.icon-mobile-phone:before { - content: "\e427"; -} -.icon-mouse-1:before { - content: "\e428"; -} -.icon-mouse-2:before { - content: "\e429"; -} -.icon-mp3player:before { - content: "\e42a"; -} -.icon-plug-1:before { - content: "\e42b"; -} -.icon-plug-2:before { - content: "\e42c"; -} -.icon-plug-slot:before { - content: "\e42d"; -} -.icon-printer:before { - content: "\e42e"; -} -.icon-projector:before { - content: "\e42f"; -} -.icon-remote:before { - content: "\e430"; -} -.icon-router:before { - content: "\e431"; -} -.icon-screen-1:before { - content: "\e432"; -} -.icon-screen-2:before { - content: "\e433"; -} -.icon-screen-3:before { - content: "\e434"; -} -.icon-screen-4:before { - content: "\e435"; -} -.icon-smartphone-1:before { - content: "\e436"; -} -.icon-television-1:before { - content: "\e437"; -} -.icon-typewriter-1:before { - content: "\e438"; -} -.icon-typewriter-2:before { - content: "\e439"; -} -.icon-usb-1:before { - content: "\e43a"; -} -.icon-usb-2:before { - content: "\e43b"; -} -.icon-webcam:before { - content: "\e43c"; -} -.icon-wireless-router-1:before { - content: "\e43d"; -} -.icon-wireless-router-2:before { - content: "\e43e"; -} -.icon-bluetooth:before { - content: "\e43f"; -} -.icon-ethernet:before { - content: "\e440"; -} -.icon-ethernet-slot:before { - content: "\e441"; -} -.icon-firewire-1:before { - content: "\e442"; -} -.icon-firewire-2:before { - content: "\e443"; -} -.icon-network-1:before { - content: "\e444"; -} -.icon-network-2:before { - content: "\e445"; -} -.icon-server-1:before { - content: "\e446"; -} -.icon-server-2:before { - content: "\e447"; -} -.icon-server-3:before { - content: "\e448"; -} -.icon-usb:before { - content: "\e449"; -} -.icon-wireless-signal:before { - content: "\e44a"; -} -.icon-book-1:before { - content: "\e44b"; -} -.icon-book-2:before { - content: "\e44c"; -} -.icon-book-3:before { - content: "\e44d"; -} -.icon-book-4:before { - content: "\e44e"; -} -.icon-book-5:before { - content: "\e44f"; -} -.icon-book-6:before { - content: "\e450"; -} -.icon-book-7:before { - content: "\e451"; -} -.icon-book-8:before { - content: "\e452"; -} -.icon-book-download-1:before { - content: "\e453"; -} -.icon-book-download-2:before { - content: "\e454"; -} -.icon-book-favorite-1:before { - content: "\e455"; -} -.icon-book-favorite-2:before { - content: "\e456"; -} -.icon-bookmark-1-1:before { - content: "\e457"; -} -.icon-bookmark-2-1:before { - content: "\e458"; -} -.icon-bookmark-3-1:before { - content: "\e459"; -} -.icon-bookmark-4-1:before { - content: "\e45a"; -} -.icon-books-1:before { - content: "\e45b"; -} -.icon-books-2:before { - content: "\e45c"; -} -.icon-books-3:before { - content: "\e45d"; -} -.icon-briefcase-2:before { - content: "\e45e"; -} -.icon-contact-book-1:before { - content: "\e45f"; -} -.icon-contact-book-2:before { - content: "\e460"; -} -.icon-contact-book-3:before { - content: "\e461"; -} -.icon-contact-book-4:before { - content: "\e462"; -} -.icon-copyright:before { - content: "\e463"; -} -.icon-creative-commons:before { - content: "\e464"; -} -.icon-cube:before { - content: "\e465"; -} -.icon-data-filter:before { - content: "\e466"; -} -.icon-document-box-1:before { - content: "\e467"; -} -.icon-document-box-2:before { - content: "\e468"; -} -.icon-document-box-3:before { - content: "\e469"; -} -.icon-drawer-1:before { - content: "\e46a"; -} -.icon-drawer-2:before { - content: "\e46b"; -} -.icon-drawer-3:before { - content: "\e46c"; -} -.icon-envelope:before { - content: "\e46d"; -} -.icon-file:before { - content: "\e46e"; -} -.icon-files:before { - content: "\e46f"; -} -.icon-filter-1:before { - content: "\e470"; -} -.icon-filter-2:before { - content: "\e471"; -} -.icon-layers-1:before { - content: "\e472"; -} -.icon-list-1:before { - content: "\e473"; -} -.icon-list-2:before { - content: "\e474"; -} -.icon-newspaper-1:before { - content: "\e475"; -} -.icon-newspaper-2:before { - content: "\e476"; -} -.icon-registry-1:before { - content: "\e477"; -} -.icon-registry-2:before { - content: "\e478"; -} -.icon-shield-1:before { - content: "\e479"; -} -.icon-shield-2:before { - content: "\e47a"; -} -.icon-shield-3:before { - content: "\e47b"; -} -.icon-sketchbook:before { - content: "\e47c"; -} -.icon-sound-book:before { - content: "\e47d"; -} -.icon-thumbnails-1:before { - content: "\e47e"; -} -.icon-thumbnails-2:before { - content: "\e47f"; -} -.icon-graph:before { - content: "\e480"; -} -.icon-hierarchy-1:before { - content: "\e481"; -} -.icon-hierarchy-2:before { - content: "\e482"; -} -.icon-hierarchy-3:before { - content: "\e483"; -} -.icon-hierarchy-4:before { - content: "\e484"; -} -.icon-hierarchy-5:before { - content: "\e485"; -} -.icon-hierarchy-6:before { - content: "\e486"; -} -.icon-hierarchy-7:before { - content: "\e487"; -} -.icon-network-1-1:before { - content: "\e488"; -} -.icon-network-2-1:before { - content: "\e489"; -} -.icon-backpack:before { - content: "\e48a"; -} -.icon-balance-1:before { - content: "\e48b"; -} -.icon-bed:before { - content: "\e48c"; -} -.icon-bench:before { - content: "\e48d"; -} -.icon-bomb-1:before { - content: "\e48e"; -} -.icon-bricks:before { - content: "\e48f"; -} -.icon-bullets:before { - content: "\e490"; -} -.icon-buoy:before { - content: "\e491"; -} -.icon-campfire:before { - content: "\e492"; -} -.icon-can:before { - content: "\e493"; -} -.icon-candle:before { - content: "\e494"; -} -.icon-canon:before { - content: "\e495"; -} -.icon-cctv-1:before { - content: "\e496"; -} -.icon-cctv-2:before { - content: "\e497"; -} -.icon-chair:before { - content: "\e498"; -} -.icon-chair-director:before { - content: "\e499"; -} -.icon-cigarette:before { - content: "\e49a"; -} -.icon-construction-sign:before { - content: "\e49b"; -} -.icon-diamond:before { - content: "\e49c"; -} -.icon-disabled:before { - content: "\e49d"; -} -.icon-door:before { - content: "\e49e"; -} -.icon-drawer:before { - content: "\e49f"; -} -.icon-driller:before { - content: "\e4a0"; -} -.icon-dumbbells:before { - content: "\e4a1"; -} -.icon-fire-extinguisher:before { - content: "\e4a2"; -} -.icon-flashlight:before { - content: "\e4a3"; -} -.icon-gas-station:before { - content: "\e4a4"; -} -.icon-gun:before { - content: "\e4a5"; -} -.icon-lamp-1:before { - content: "\e4a6"; -} -.icon-lamp-2:before { - content: "\e4a7"; -} -.icon-lamp-3:before { - content: "\e4a8"; -} -.icon-lamp-4:before { - content: "\e4a9"; -} -.icon-lightbulb-1:before { - content: "\e4aa"; -} -.icon-lightbulb-2:before { - content: "\e4ab"; -} -.icon-measuring-tape:before { - content: "\e4ac"; -} -.icon-mine-cart:before { - content: "\e4ad"; -} -.icon-missile:before { - content: "\e4ae"; -} -.icon-ring:before { - content: "\e4af"; -} -.icon-scale-1:before { - content: "\e4b0"; -} -.icon-shovel:before { - content: "\e4b1"; -} -.icon-smoke-no:before { - content: "\e4b2"; -} -.icon-sofa-1:before { - content: "\e4b3"; -} -.icon-sofa-2:before { - content: "\e4b4"; -} -.icon-sofa-3:before { - content: "\e4b5"; -} -.icon-target:before { - content: "\e4b6"; -} -.icon-torch:before { - content: "\e4b7"; -} -.icon-traffic-cone:before { - content: "\e4b8"; -} -.icon-traffic-light-1:before { - content: "\e4b9"; -} -.icon-traffic-light-2:before { - content: "\e4ba"; -} -.icon-treasure-chest-1:before { - content: "\e4bb"; -} -.icon-treasure-chest-2:before { - content: "\e4bc"; -} -.icon-trowel:before { - content: "\e4bd"; -} -.icon-watering-can:before { - content: "\e4be"; -} -.icon-weigh:before { - content: "\e4bf"; -} -.icon-36-text-arrow-redo:before { - content: "\e4c0"; -} -.icon-academic-cap:before { - content: "\e4c1"; -} -.icon-baseball-helmet:before { - content: "\e4c2"; -} -.icon-beanie:before { - content: "\e4c3"; -} -.icon-bike-helmet:before { - content: "\e4c4"; -} -.icon-bow:before { - content: "\e4c5"; -} -.icon-cap:before { - content: "\e4c6"; -} -.icon-chaplin:before { - content: "\e4c7"; -} -.icon-chef-hat:before { - content: "\e4c8"; -} -.icon-cloth-hanger:before { - content: "\e4c9"; -} -.icon-fins:before { - content: "\e4ca"; -} -.icon-football-helmet:before { - content: "\e4cb"; -} -.icon-glasses:before { - content: "\e4cc"; -} -.icon-glasses-1:before { - content: "\e4cd"; -} -.icon-glasses-2:before { - content: "\e4ce"; -} -.icon-magician-hat:before { - content: "\e4cf"; -} -.icon-monocle-1:before { - content: "\e4d0"; -} -.icon-monocle-2:before { - content: "\e4d1"; -} -.icon-necktie:before { - content: "\e4d2"; -} -.icon-safety-helmet:before { - content: "\e4d3"; -} -.icon-scuba-tank:before { - content: "\e4d4"; -} -.icon-shirt-1:before { - content: "\e4d5"; -} -.icon-shirt-2:before { - content: "\e4d6"; -} -.icon-shirt-3:before { - content: "\e4d7"; -} -.icon-sneakers:before { - content: "\e4d8"; -} -.icon-snorkel:before { - content: "\e4d9"; -} -.icon-sombrero:before { - content: "\e4da"; -} -.icon-sunglasses:before { - content: "\e4db"; -} -.icon-tall-hat:before { - content: "\e4dc"; -} -.icon-trousers:before { - content: "\e4dd"; -} -.icon-walking-stick:before { - content: "\e4de"; -} -.icon-arrow-undo:before { - content: "\e4df"; -} -.icon-bold:before { - content: "\e4e0"; -} -.icon-columns:before { - content: "\e4e1"; -} -.icon-eraser:before { - content: "\e4e2"; -} -.icon-font-color:before { - content: "\e4e3"; -} -.icon-html:before { - content: "\e4e4"; -} -.icon-italic:before { - content: "\e4e5"; -} -.icon-list-1-1:before { - content: "\e4e6"; -} -.icon-list-2-1:before { - content: "\e4e7"; -} -.icon-list-3:before { - content: "\e4e8"; -} -.icon-list-4:before { - content: "\e4e9"; -} -.icon-paragraph:before { - content: "\e4ea"; -} -.icon-paste:before { - content: "\e4eb"; -} -.icon-print-preview:before { - content: "\e4ec"; -} -.icon-quote:before { - content: "\e4ed"; -} -.icon-strikethrough:before { - content: "\e4ee"; -} -.icon-text:before { - content: "\e4ef"; -} -.icon-text-wrapping-1:before { - content: "\e4f0"; -} -.icon-text-wrapping-2:before { - content: "\e4f1"; -} -.icon-text-wrapping-3:before { - content: "\e4f2"; -} -.icon-underline:before { - content: "\e4f3"; -} -.icon-align-center:before { - content: "\e4f4"; -} -.icon-align-left:before { - content: "\e4f5"; -} -.icon-align-right:before { - content: "\e4f6"; -} -.icon-all-caps:before { - content: "\e4f7"; -} -.icon-arrange-2-1:before { - content: "\e4f8"; -} -.icon-arrange-2-2:before { - content: "\e4f9"; -} -.icon-arrange-2-3:before { - content: "\e4fa"; -} -.icon-arrange-2-4:before { - content: "\e4fb"; -} -.icon-arrange-3-1:before { - content: "\e4fc"; -} -.icon-arrange-3-2:before { - content: "\e4fd"; -} -.icon-arrange-3-3:before { - content: "\e4fe"; -} -.icon-arrange-3-4:before { - content: "\e4ff"; -} -.icon-arrange-3-5:before { - content: "\e500"; -} -.icon-arrange-4-1:before { - content: "\e501"; -} -.icon-arrange-4-2:before { - content: "\e502"; -} -.icon-arrange-4-3:before { - content: "\e503"; -} -.icon-arrange-5:before { - content: "\e504"; -} -.icon-consolidate-all:before { - content: "\e505"; -} -.icon-decrease-indent-1:before { - content: "\e506"; -} -.icon-decrease-indent-2:before { - content: "\e507"; -} -.icon-horizontal-page:before { - content: "\e508"; -} -.icon-increase-indent-1:before { - content: "\e509"; -} -.icon-increase-indent-2:before { - content: "\e50a"; -} -.icon-justify:before { - content: "\e50b"; -} -.icon-leading-1:before { - content: "\e50c"; -} -.icon-leading-2:before { - content: "\e50d"; -} -.icon-left-indent:before { - content: "\e50e"; -} -.icon-right-indent:before { - content: "\e50f"; -} -.icon-small-caps:before { - content: "\e510"; -} -.icon-vertical-page:before { - content: "\e511"; -} -.icon-alt-mac:before { - content: "\e512"; -} -.icon-alt-windows:before { - content: "\e513"; -} -.icon-arrow-down:before { - content: "\e514"; -} -.icon-arrow-down-left:before { - content: "\e515"; -} -.icon-arrow-down-right:before { - content: "\e516"; -} -.icon-arrow-left:before { - content: "\e517"; -} -.icon-arrow-right:before { - content: "\e518"; -} -.icon-arrow-up:before { - content: "\e519"; -} -.icon-arrow-up-left:before { - content: "\e51a"; -} -.icon-arrow-up-right:before { - content: "\e51b"; -} -.icon-asterisk-1:before { - content: "\e51c"; -} -.icon-asterisk-2:before { - content: "\e51d"; -} -.icon-back-tab-1:before { - content: "\e51e"; -} -.icon-back-tab-2:before { - content: "\e51f"; -} -.icon-backward-delete:before { - content: "\e520"; -} -.icon-blank:before { - content: "\e521"; -} -.icon-eject:before { - content: "\e522"; -} -.icon-enter-1:before { - content: "\e523"; -} -.icon-enter-2:before { - content: "\e524"; -} -.icon-escape:before { - content: "\e525"; -} -.icon-page-down:before { - content: "\e526"; -} -.icon-page-up:before { - content: "\e527"; -} -.icon-return-1:before { - content: "\e528"; -} -.icon-shift-1:before { - content: "\e529"; -} -.icon-shift-2:before { - content: "\e52a"; -} -.icon-tab:before { - content: "\e52b"; -} -.icon-apple:before { - content: "\e52c"; -} -.icon-beer:before { - content: "\e52d"; -} -.icon-boil:before { - content: "\e52e"; -} -.icon-bottle-1:before { - content: "\e52f"; -} -.icon-bottle-2:before { - content: "\e530"; -} -.icon-bottle-3:before { - content: "\e531"; -} -.icon-bottle-4:before { - content: "\e532"; -} -.icon-bread:before { - content: "\e533"; -} -.icon-burger-1:before { - content: "\e534"; -} -.icon-burger-2:before { - content: "\e535"; -} -.icon-cake-1:before { - content: "\e536"; -} -.icon-cake-2:before { - content: "\e537"; -} -.icon-champagne:before { - content: "\e538"; -} -.icon-cheese:before { - content: "\e539"; -} -.icon-cocktail:before { - content: "\e53a"; -} -.icon-cocktail-1:before { - content: "\e53b"; -} -.icon-cocktail-2:before { - content: "\e53c"; -} -.icon-coffee-pot:before { - content: "\e53d"; -} -.icon-cup1:before { - content: "\e53e"; -} -.icon-cup-2:before { - content: "\e53f"; -} -.icon-deep-fry:before { - content: "\e540"; -} -.icon-energy-drink:before { - content: "\e541"; -} -.icon-espresso-machine:before { - content: "\e542"; -} -.icon-food-dome:before { - content: "\e543"; -} -.icon-fork-and-knife:before { - content: "\e544"; -} -.icon-fork-and-spoon:before { - content: "\e545"; -} -.icon-grape:before { - content: "\e546"; -} -.icon-grater:before { - content: "\e547"; -} -.icon-grill:before { - content: "\e548"; -} -.icon-hot-drinks-glass:before { - content: "\e549"; -} -.icon-hotdog:before { - content: "\e54a"; -} -.icon-ice-cream-1:before { - content: "\e54b"; -} -.icon-ice-cream-2:before { - content: "\e54c"; -} -.icon-ice-cream-3:before { - content: "\e54d"; -} -.icon-ice-drinks-galss:before { - content: "\e54e"; -} -.icon-juicer:before { - content: "\e54f"; -} -.icon-kitchen-timer:before { - content: "\e550"; -} -.icon-milk:before { - content: "\e551"; -} -.icon-orange:before { - content: "\e552"; -} -.icon-oven:before { - content: "\e553"; -} -.icon-pan-fry:before { - content: "\e554"; -} -.icon-pepper-salt:before { - content: "\e555"; -} -.icon-pizza:before { - content: "\e556"; -} -.icon-popcorn:before { - content: "\e557"; -} -.icon-serving:before { - content: "\e558"; -} -.icon-soda:before { - content: "\e559"; -} -.icon-soda-can-1:before { - content: "\e55a"; -} -.icon-soda-can-2:before { - content: "\e55b"; -} -.icon-steam:before { - content: "\e55c"; -} -.icon-tea-pot:before { - content: "\e55d"; -} -.icon-thermometer-high:before { - content: "\e55e"; -} -.icon-thermometer-low:before { - content: "\e55f"; -} -.icon-thermometer-medium:before { - content: "\e560"; -} -.icon-water:before { - content: "\e561"; -} -.icon-wine:before { - content: "\e562"; -} -.icon-ambulance:before { - content: "\e563"; -} -.icon-beaker-1:before { - content: "\e564"; -} -.icon-beaker-2:before { - content: "\e565"; -} -.icon-blood:before { - content: "\e566"; -} -.icon-drug:before { - content: "\e567"; -} -.icon-first-aid:before { - content: "\e568"; -} -.icon-hashish:before { - content: "\e569"; -} -.icon-heartpulse:before { - content: "\e56a"; -} -.icon-hospital-1:before { - content: "\e56b"; -} -.icon-hospital-2:before { - content: "\e56c"; -} -.icon-hospital-sign-1:before { - content: "\e56d"; -} -.icon-hospital-sign-2:before { - content: "\e56e"; -} -.icon-hospital-sign-3:before { - content: "\e56f"; -} -.icon-medicine:before { - content: "\e570"; -} -.icon-microscope:before { - content: "\e571"; -} -.icon-mortar-and-pestle:before { - content: "\e572"; -} -.icon-plaster:before { - content: "\e573"; -} -.icon-pulse-graph-1:before { - content: "\e574"; -} -.icon-pulse-graph-2:before { - content: "\e575"; -} -.icon-pulse-graph-3:before { - content: "\e576"; -} -.icon-red-cross:before { - content: "\e577"; -} -.icon-stethoscope:before { - content: "\e578"; -} -.icon-syringe:before { - content: "\e579"; -} -.icon-yin-yang:before { - content: "\e57a"; -} -.icon-balloon:before { - content: "\e57b"; -} -.icon-briefcase-lock:before { - content: "\e57c"; -} -.icon-card:before { - content: "\e57d"; -} -.icon-cards:before { - content: "\e57e"; -} -.icon-cards-2:before { - content: "\e57f"; -} -.icon-curtain:before { - content: "\e580"; -} -.icon-dice-1:before { - content: "\e581"; -} -.icon-dice-2:before { - content: "\e582"; -} -.icon-happy-smiley:before { - content: "\e583"; -} -.icon-pacman:before { - content: "\e584"; -} -.icon-pacman-ghost:before { - content: "\e585"; -} -.icon-sad-smiley:before { - content: "\e586"; -} -.icon-sign-1:before { - content: "\e587"; -} -.icon-smileys:before { - content: "\e588"; -} -.icon-suitcase-1:before { - content: "\e589"; -} -.icon-suitcase-2:before { - content: "\e58a"; -} -.icon-tetris:before { - content: "\e58b"; -} -.icon-ticket-1:before { - content: "\e58c"; -} -.icon-ticket-2:before { - content: "\e58d"; -} -.icon-ticket-3:before { - content: "\e58e"; -} -.icon-virus:before { - content: "\e58f"; -} -.icon-cloud-1:before { - content: "\e590"; -} -.icon-cloud-lightning:before { - content: "\e591"; -} -.icon-clouds:before { - content: "\e592"; -} -.icon-first-quarter-moon:before { - content: "\e593"; -} -.icon-full-moon:before { - content: "\e594"; -} -.icon-hail:before { - content: "\e595"; -} -.icon-heavy-rain:before { - content: "\e596"; -} -.icon-moon-cloud:before { - content: "\e597"; -} -.icon-rain:before { - content: "\e598"; -} -.icon-rain-lightning:before { - content: "\e599"; -} -.icon-snow:before { - content: "\e59a"; -} -.icon-sun:before { - content: "\e59b"; -} -.icon-sun-cloud:before { - content: "\e59c"; -} -.icon-thermometer:before { - content: "\e59d"; -} -.icon-third-quarter-moon:before { - content: "\e59e"; -} -.icon-umbrella:before { - content: "\e59f"; -} -.icon-waning-crescent-moon:before { - content: "\e5a0"; -} -.icon-waning-gibbous-moon:before { - content: "\e5a1"; -} -.icon-waxing-crescent-moon:before { - content: "\e5a2"; -} -.icon-waxing-gibbous-moon:before { - content: "\e5a3"; -} -.icon-bicycle:before { - content: "\e5a4"; -} -.icon-bus-1:before { - content: "\e5a5"; -} -.icon-bus-2:before { - content: "\e5a6"; -} -.icon-car-1:before { - content: "\e5a7"; -} -.icon-car-2:before { - content: "\e5a8"; -} -.icon-car-3:before { - content: "\e5a9"; -} -.icon-car-4:before { - content: "\e5aa"; -} -.icon-helicopter:before { - content: "\e5ab"; -} -.icon-mountain-bike:before { - content: "\e5ac"; -} -.icon-pickup:before { - content: "\e5ad"; -} -.icon-plane-1:before { - content: "\e5ae"; -} -.icon-plane-2:before { - content: "\e5af"; -} -.icon-plane-landing:before { - content: "\e5b0"; -} -.icon-plane-takeoff:before { - content: "\e5b1"; -} -.icon-road:before { - content: "\e5b2"; -} -.icon-road-bike:before { - content: "\e5b3"; -} -.icon-rocket:before { - content: "\e5b4"; -} -.icon-scooter:before { - content: "\e5b5"; -} -.icon-ship:before { - content: "\e5b6"; -} -.icon-train:before { - content: "\e5b7"; -} -.icon-tram:before { - content: "\e5b8"; -} -.icon-cactus:before { - content: "\e5b9"; -} -.icon-clover:before { - content: "\e5ba"; -} -.icon-flower:before { - content: "\e5bb"; -} -.icon-hand-eco:before { - content: "\e5bc"; -} -.icon-hand-globe:before { - content: "\e5bd"; -} -.icon-leaf:before { - content: "\e5be"; -} -.icon-light-eco:before { - content: "\e5bf"; -} -.icon-potted-plant-1:before { - content: "\e5c0"; -} -.icon-potted-plant-2:before { - content: "\e5c1"; -} -.icon-2-fingers-double-tap:before { - content: "\e5c2"; -} -.icon-2-fingers-down-swipe:before { - content: "\e5c3"; -} -.icon-2-fingers-horizontal-swipe:before { - content: "\e5c4"; -} -.icon-2-fingers-left-swipe:before { - content: "\e5c5"; -} -.icon-2-fingers-omnidirectional-swipe:before { - content: "\e5c6"; -} -.icon-2-fingers-right-swipe:before { - content: "\e5c7"; -} -.icon-2-fingers-tab-hold:before { - content: "\e5c8"; -} -.icon-2-fingers-tap:before { - content: "\e5c9"; -} -.icon-2-fingers-up-swipe:before { - content: "\e5ca"; -} -.icon-2-fingers-vertical-swipe:before { - content: "\e5cb"; -} -.icon-double-tap:before { - content: "\e5cc"; -} -.icon-drag-down:before { - content: "\e5cd"; -} -.icon-drag-horizontal:before { - content: "\e5ce"; -} -.icon-drag-left:before { - content: "\e5cf"; -} -.icon-drag-right:before { - content: "\e5d0"; -} -.icon-drag-up:before { - content: "\e5d1"; -} -.icon-drag-vertical:before { - content: "\e5d2"; -} -.icon-filck-down:before { - content: "\e5d3"; -} -.icon-flick-up:before { - content: "\e5d4"; -} -.icon-horizontal-flick:before { - content: "\e5d5"; -} -.icon-left-flick:before { - content: "\e5d6"; -} -.icon-omnidirectional-drag:before { - content: "\e5d7"; -} -.icon-omnidirectional-flick:before { - content: "\e5d8"; -} -.icon-omnidirectional-swipe:before { - content: "\e5d9"; -} -.icon-pinch:before { - content: "\e5da"; -} -.icon-right-flick:before { - content: "\e5db"; -} -.icon-rotate-clockwise:before { - content: "\e5dc"; -} -.icon-rotate-counterclockwise:before { - content: "\e5dd"; -} -.icon-spread:before { - content: "\e5de"; -} -.icon-swipe-down:before { - content: "\e5df"; -} -.icon-swipe-horizontal:before { - content: "\e5e0"; -} -.icon-swipe-left:before { - content: "\e5e1"; -} -.icon-swipe-right:before { - content: "\e5e2"; -} -.icon-swipe-up:before { - content: "\e5e3"; -} -.icon-swipe-vertical:before { - content: "\e5e4"; -} -.icon-tap:before { - content: "\e5e5"; -} -.icon-tap-hold:before { - content: "\e5e6"; -} -.icon-vertical-flick:before { - content: "\e5e7"; -} -.icon-arrow-1-1:before { - content: "\e5e8"; -} -.icon-arrow-2-1:before { - content: "\e5e9"; -} -.icon-arrow-3:before { - content: "\e5ea"; -} -.icon-arrow-4:before { - content: "\e5eb"; -} -.icon-arrow-5:before { - content: "\e5ec"; -} -.icon-arrow-6:before { - content: "\e5ed"; -} -.icon-arrow-7:before { - content: "\e5ee"; -} -.icon-arrow-8:before { - content: "\e5ef"; -} -.icon-arrow-9:before { - content: "\e5f0"; -} -.icon-arrow-10:before { - content: "\e5f1"; -} -.icon-arrow-11:before { - content: "\e5f2"; -} -.icon-arrow-12:before { - content: "\e5f3"; -} -.icon-arrow-13:before { - content: "\e5f4"; -} -.icon-arrow-14:before { - content: "\e5f5"; -} -.icon-arrow-15:before { - content: "\e5f6"; -} -.icon-arrow-16:before { - content: "\e5f7"; -} -.icon-arrow-17:before { - content: "\e5f8"; -} -.icon-arrow-18:before { - content: "\e5f9"; -} -.icon-arrow-19:before { - content: "\e5fa"; -} -.icon-arrow-20:before { - content: "\e5fb"; -} -.icon-arrow-21:before { - content: "\e5fc"; -} -.icon-arrow-22:before { - content: "\e5fd"; -} -.icon-arrow-23:before { - content: "\e5fe"; -} -.icon-arrow-24:before { - content: "\e5ff"; -} -.icon-arrow-25:before { - content: "\e600"; -} -.icon-arrow-26:before { - content: "\e601"; -} -.icon-arrow-27:before { - content: "\e602"; -} -.icon-arrow-28:before { - content: "\e603"; -} -.icon-arrow-29:before { - content: "\e604"; -} -.icon-arrow-30:before { - content: "\e605"; -} -.icon-arrow-31:before { - content: "\e606"; -} -.icon-arrow-32:before { - content: "\e607"; -} -.icon-arrow-33:before { - content: "\e608"; -} -.icon-arrow-34:before { - content: "\e609"; -} -.icon-arrow-35:before { - content: "\e60a"; -} -.icon-arrow-36:before { - content: "\e60b"; -} -.icon-arrow-37:before { - content: "\e60c"; -} -.icon-arrow-38:before { - content: "\e60d"; -} -.icon-arrow-39:before { - content: "\e60e"; -} -.icon-arrow-40:before { - content: "\e60f"; -} -.icon-arrow-41:before { - content: "\e610"; -} -.icon-arrow-42:before { - content: "\e611"; -} -.icon-arrow-43:before { - content: "\e612"; -} -.icon-arrow-44:before { - content: "\e613"; -} -.icon-arrow-45:before { - content: "\e614"; -} -.icon-arrow-46:before { - content: "\e615"; -} -.icon-arrow-47:before { - content: "\e616"; -} -.icon-arrow-48:before { - content: "\e617"; -} -.icon-arrow-49:before { - content: "\e618"; -} -.icon-arrow-50:before { - content: "\e619"; -} -.icon-arrow-51:before { - content: "\e61a"; -} -.icon-arrow-52:before { - content: "\e61b"; -} -.icon-arrow-53:before { - content: "\e61c"; -} -.icon-arrow-54:before { - content: "\e61d"; -} -.icon-arrow-55:before { - content: "\e61e"; -} -.icon-arrow-56:before { - content: "\e61f"; -} -.icon-arrow-57:before { - content: "\e620"; -} -.icon-arrow-58:before { - content: "\e621"; -} -.icon-arrow-59:before { - content: "\e622"; -} -.icon-arrow-60:before { - content: "\e623"; -} -.icon-arrow-61:before { - content: "\e624"; -} -.icon-arrow-62:before { - content: "\e625"; -} -.icon-arrow-63:before { - content: "\e626"; -} -.icon-arrow-64:before { - content: "\e627"; -} -.icon-arrow-65:before { - content: "\e628"; -} -.icon-arrow-66:before { - content: "\e629"; -} -.icon-arrow-67:before { - content: "\e62a"; -} -.icon-arrow-68:before { - content: "\e62b"; -} -.icon-arrow-69:before { - content: "\e62c"; -} -.icon-arrow-70:before { - content: "\e62d"; -} -.icon-arrow-71:before { - content: "\e62e"; -} -.icon-arrow-72:before { - content: "\e62f"; -} -.icon-arrow-circle-1:before { - content: "\e630"; -} -.icon-arrow-circle-2:before { - content: "\e631"; -} -.icon-arrow-circle-3:before { - content: "\e632"; -} -.icon-arrow-circle-4:before { - content: "\e633"; -} -.icon-arrow-circle-5:before { - content: "\e634"; -} -.icon-arrow-circle-6:before { - content: "\e635"; -} -.icon-arrow-circle-7:before { - content: "\e636"; -} -.icon-arrow-circle-8:before { - content: "\e637"; -} -.icon-arrow-circle-9:before { - content: "\e638"; -} -.icon-arrow-circle-10:before { - content: "\e639"; -} -.icon-arrow-circle-11:before { - content: "\e63a"; -} -.icon-arrow-circle-12:before { - content: "\e63b"; -} -.icon-arrow-circle-13:before { - content: "\e63c"; -} -.icon-arrow-circle-14:before { - content: "\e63d"; -} -.icon-arrow-circle-15:before { - content: "\e63e"; -} -.icon-arrow-circle-16:before { - content: "\e63f"; -} -.icon-arrow-circle-17:before { - content: "\e640"; -} -.icon-arrow-circle-18:before { - content: "\e641"; -} -.icon-arrow-circle-19:before { - content: "\e642"; -} -.icon-arrow-circle-20:before { - content: "\e643"; -} -.icon-arrow-circle-21:before { - content: "\e644"; -} -.icon-arrow-circle-22:before { - content: "\e645"; -} -.icon-arrow-circle-23:before { - content: "\e646"; -} -.icon-arrow-circle-24:before { - content: "\e647"; -} -.icon-arrow-circle-25:before { - content: "\e648"; -} -.icon-arrow-circle-26:before { - content: "\e649"; -} -.icon-arrow-circle-27:before { - content: "\e64a"; -} -.icon-arrow-circle-28:before { - content: "\e64b"; -} -.icon-arrow-circle-29:before { - content: "\e64c"; -} -.icon-arrow-circle-30:before { - content: "\e64d"; -} -.icon-arrow-delete-1:before { - content: "\e64e"; -} -.icon-arrow-delete-2:before { - content: "\e64f"; -} -.icon-arrow-dot-1:before { - content: "\e650"; -} -.icon-arrow-dot-2:before { - content: "\e651"; -} -.icon-arrow-dot-3:before { - content: "\e652"; -} -.icon-arrow-dot-4:before { - content: "\e653"; -} -.icon-arrow-dot-5:before { - content: "\e654"; -} -.icon-arrow-dot-6:before { - content: "\e655"; -} -.icon-arrow-rectangle-1:before { - content: "\e656"; -} -.icon-arrow-rectangle-2:before { - content: "\e657"; -} -.icon-arrow-rectangle-3:before { - content: "\e658"; -} -.icon-arrow-rectangle-4:before { - content: "\e659"; -} -.icon-arrow-rectangle-5:before { - content: "\e65a"; -} -.icon-arrow-rectangle-6:before { - content: "\e65b"; -} -.icon-arrow-rectangle-7:before { - content: "\e65c"; -} -.icon-arrow-rectangle-8:before { - content: "\e65d"; -} -.icon-arrow-rectangle-9:before { - content: "\e65e"; -} -.icon-arrow-rectangle-10:before { - content: "\e65f"; -} -.icon-arrow-rectangle-11:before { - content: "\e660"; -} -.icon-arrow-rectangle-12:before { - content: "\e661"; -} -.icon-arrow-rectangle-13:before { - content: "\e662"; -} -.icon-arrow-rectangle-14:before { - content: "\e663"; -} -.icon-arrow-rectangle-15:before { - content: "\e664"; -} -.icon-arrow-rectangle-16:before { - content: "\e665"; -} -.icon-arrow-rectangle-17:before { - content: "\e666"; -} -.icon-arrow-rectangle-18:before { - content: "\e667"; -} -.icon-arrow-rectangle-19:before { - content: "\e668"; -} -.icon-arrow-rectangle-20:before { - content: "\e669"; +.icon-edit:before { + content: "o"; } diff --git a/styles/left-panel.less b/styles/left-panel.less index 4fe8312929..3245ad5b17 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -1,30 +1,28 @@ /* Sidebar */ .sidebar { - padding-top: 10px; background-color: white; margin: 0; border-right: 1px solid @color-divider; display: flex; flex-direction: column; - min-width: 260px; + min-width: @sidebar-width; box-sizing: border-box; position: relative; .sidebar-header { flex: 0 auto; - min-width: 240px; - min-height: 47px; + min-width: @sidebar-width; + min-height: 44px; display: flex; border-bottom: 1px solid transparent; transition: border-bottom 0.25s; &.sep { - border-bottom: 1px solid #EEE; + border-bottom: 1px solid @color-divider; box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.03); } h4 { align-self: flex-start; - padding-left: 26px; - margin: 14px 0 0; + padding: 0.4rem 0 0 1.4rem; display: inline-block; position: relative; } @@ -32,27 +30,17 @@ display: flex; flex: 1 auto; justify-content: flex-end; - margin-right: 20px; - margin-top: 3px; + margin: 0.8rem 0.8rem 0 0; a { display: block; text-decoration: none; cursor: default; + &:focus { + outline: 0; + } &.active { .btn-new { opacity: 0.3; - &:hover { - color: @brand-action; - } - } - } - .btn-new { - display: block; - font-size: 24px; - color: @brand-action; - transition: all 0.25s; - &:hover { - color: darken(@brand-action, 15%); } } } @@ -66,7 +54,7 @@ overflow-y: auto; overflow-x: hidden; box-sizing: border-box; - max-width: 260px; + max-width: @sidebar-width; ul { flex: 1 auto; margin: 0; @@ -88,15 +76,20 @@ text-decoration: none; cursor: default; } + &:first-child { + li { + //border-top: 1px solid @color-divider; + } + } &:focus { text-decoration: none; } &.active { background: @brand-action; li { - height: 57px; + height: 45px; border-bottom: none; - .brand-gradient(); + background-color: @brand-primary; .name { color: white; } @@ -104,31 +97,33 @@ color: white; opacity: 0.8; } - .btn-delete { - font-size: 24px; - color: white; - position: relative; - z-index: 9999; + .action { + .btn { + border: 1px solid white; + .icon { + color: white; + } + } } .state-new { - .at2x('container-white.png', 20px, 20px); + .at2x('container-white.png', @container-state-size, @container-state-size); } .state-running { - .at2x('running-white.png', 20px, 20px); + .at2x('running-white.png', @container-state-size, @container-state-size); .runningwave { - .at2x('runningwave-white.png', 20px, 20px); + .at2x('runningwave-white.png', @container-state-size, @container-state-size); } } .state-paused { - .at2x('wavy-white.png', 20px, 20px); + .at2x('wavy-white.png', @container-state-size, @container-state-size); } .state-stopped { - .at2x('stopped-white.png', 20px, 20px); + .at2x('stopped-white.png', @container-state-size, @container-state-size); } .state-downloading { - .at2x('downloading-white.png', 20px, 20px); + .at2x('downloading-white.png', @container-state-size, @container-state-size); .downloading-arrow { - .at2x('downloading-arrow-white.png', 20px, 20px); + .at2x('downloading-arrow-white.png', @container-state-size, @container-state-size); } } } @@ -136,28 +131,33 @@ } li { vertical-align: middle; - padding: 10px 16px 10px 26px; + padding: 0.7rem 1rem 0.7rem 1.4rem; display: flex; flex-direction: row; - height: 57px; + height: 45px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + &:hover { + background-color: @color-box-button; + } .info { - font-size: 13px; - margin-left: 16px; + margin-left: 1rem; .name { text-overflow: ellipsis; - max-width: 140px; + max-width: @sidebar-text-overflow-width; white-space: nowrap; overflow: hidden; - font-size: 14px; + font-size: 12px; font-weight: 400; color: @gray-darkest; } .image { + margin-top: -0.1rem; color: @gray-light; font-size: 10px; font-weight: 400; text-overflow: ellipsis; - max-width: 140px; + max-width: @sidebar-text-overflow-width; white-space: nowrap; overflow: hidden; } @@ -166,42 +166,41 @@ display: none; flex: 1; position: relative; - top: 5px; + top: 0.2rem; text-align: right; - margin-right: 4px; - .btn-delete { - font-size: 24px; - color: @gray-lighter; - position: relative; - z-index: 9999; + .btn { + border: 1px solid @gray-lighter; + .icon { + color: @gray-lighter; + } } } .state { - margin-top: 9px; + margin-top: 0.6rem; display: inline-block; position: relative; - min-width: 20px; - height: 20px; + min-width: @container-state-size; + height: @container-state-size; } .state-error { - .at2x('error.png', 20px, 20px); + .at2x('error.png', @container-state-size, @container-state-size); } .state-stopped { - .at2x('stopped.png', 20px, 20px); + .at2x('stopped.png', @container-state-size, @container-state-size); } .state-paused { - .at2x('paused.png', 20px, 20px); + .at2x('paused.png', @container-state-size, @container-state-size); } .state-new { - .at2x('container.png', 20px, 20px); + .at2x('container.png', @container-state-size, @container-state-size); } .state-downloading { - .at2x('downloading.png', 20px, 20px); + .at2x('downloading.png', @container-state-size, @container-state-size); overflow: hidden; .downloading-arrow { - width: 20px; - height: 20px; - .at2x('downloading-arrow.png', 20px, 20px); + width: @container-state-size; + height: @container-state-size; + .at2x('downloading-arrow.png', @container-state-size, @container-state-size); position: absolute; -webkit-animation-name: translatedownload; -webkit-animation-duration: 1.8s; @@ -210,14 +209,14 @@ } } .state-running { - .at2x('running.png', 20px, 20px); + .at2x('running.png', @container-state-size, @container-state-size); overflow: hidden; .runningwave { position: absolute; - width: 40px; - height: 20px; + width: @container-state-size * 2; + height: @container-state-size; left: -20px; - .at2x('runningwave.png', 20px, 20px); + .at2x('runningwave.png', @container-state-size, @container-state-size); -webkit-animation-name: translatewave; -webkit-animation-duration: 7.0s; -webkit-animation-iteration-count: infinite; @@ -226,9 +225,9 @@ } .state-restarting { display: inline-block; - width: 20px; - height: 20px; - .at2x('restarting.png', 20px, 20px); + width: @container-state-size; + height: @container-state-size; + .at2x('restarting.png', @container-state-size, @container-state-size); background-repeat: repeat-x; -webkit-animation-delay: -1s; -webkit-animation-name: rotate; @@ -244,8 +243,8 @@ /* Sidebar Buttons */ .sidebar-buttons { - border-top: 1px solid #F0F4F8; - min-height: 48px; + border-top: 1px solid @color-divider; + min-height: 40px; flex: 0 auto; display: flex; flex-direction: row; @@ -258,10 +257,7 @@ height: 18px; } .btn-sidebar { - font-size: 13px; - font-weight: 500; - color: @brand-primary; - + .box-button(); flex: 0 auto; display: flex; align-items: center; @@ -270,20 +266,26 @@ &:active { img, .text { - -webkit-filter: brightness(0.7); + -webkit-filter: brightness(0.9); } } } .btn-terminal { flex: 1 auto; - border-right: 1px solid #F0F4F8; - img { - margin-right: 10px; - } + border-right: 1px solid @color-divider; + color: @brand-primary; } .btn-feedback { - border-right: 1px solid #F0F4F8; + border-right: 1px solid @color-divider; + .icon { + margin-right: 0; + } + } + .btn-preferences { + .icon { + margin-right: 0; + } } .btn { position: relative; diff --git a/styles/main.less b/styles/main.less index 2494e833aa..56b0ca58e1 100644 --- a/styles/main.less +++ b/styles/main.less @@ -28,6 +28,9 @@ html, body { -webkit-user-drag: none; font-family: @font-regular; cursor: default; + -webkit-font-smoothing: subpixel-antialiased; + text-rendering: optimizelegibility; + //-webkit-font-smoothing: antialiased; img { pointer-events: none; } diff --git a/styles/mixins.less b/styles/mixins.less index 2bc0374bb0..02cb1f1f1d 100644 --- a/styles/mixins.less +++ b/styles/mixins.less @@ -23,15 +23,62 @@ } .widget-style() { - border-radius: 4px; - border: 1px solid @gray-lighter; + border-radius: @border-radius; + border: 1px solid @color-divider; position: relative; overflow: hidden; } +.widget-bar-style() { + height: 40px; + background-color: white; + border-bottom: 1px solid @color-divider; + display: flex; + align-items: flex-start; + position: relative; + z-index: 99999; + .text { + flex: 1 auto; + padding: 1.1rem; + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + color: @gray-light; + } + .action { + flex: 0 auto; + height: 40px; + width: 40px; + align-self: flex-end; + border-left: 1px solid @color-divider; + padding-top: 0.8rem; + padding-left: 0.9rem; + .box-button(); + } +} + .fade-in() { opacity: 0; -webkit-animation: fadein ease-in 1; -webkit-animation-fill-mode: forwards; -webkit-animation-duration: 0.2s; } + +.box-button { + transition: all 100ms; + color: @gray-light; + font-size: 10px; + font-weight: 500; + .icon { + font-size: 2rem; + margin-right: 0.7rem; + margin-top: 0.5rem; + } + &:hover { + background-color: @color-box-button; + } + &:active { + box-shadow: inset 0 0 1px @color-divider; + background-color: darken(@color-box-button, 1%); + } +} \ No newline at end of file diff --git a/styles/new-container.less b/styles/new-container.less index 141228b8ec..61f99f719b 100644 --- a/styles/new-container.less +++ b/styles/new-container.less @@ -31,7 +31,6 @@ display: flex; flex: 1 auto; flex-direction: column; - padding: 25px 0 0; .spinner { display: inline-block; @@ -43,35 +42,6 @@ flex: 1 auto; color: @gray-normal; - .results-filters { - flex: 0 auto; - flex-shrink: 0; - display: flex; - flex-direction: row; - justify-content: flex-end; - font-size: 13px; - margin: 0 10px; - margin-bottom: 10px; - - .results-filter { - text-align: center; - margin: 0 10px; - min-width: 40px; - &.tab { - &:hover { - border-radius: 40px; - background-color: @gray-lightest; - } - } - } - - .results-filter-title { - color: @gray-lighter; - font-weight: 500; - padding-top: 6px; - } - } - .no-results { flex: 1 auto; display: flex; @@ -115,45 +85,49 @@ } } .new-container-header { - margin: 0 20px 8px; + background-color: white; + height: 45px; + border-bottom: 1px solid @color-divider; display: flex; flex: 0 auto; flex-shrink: 0; - .text { - flex: 1 auto; - width: 50%; - font-size: 14px; - color: @gray-normal; - } .search { flex: 1 auto; .search-bar { - top: -7px; position: relative; .loading { position: absolute; - top: 7px; - left: 10px; + top: 13px; + left: 13px; } .search-icon { - font-size: 18px; + font-size: 20px; color: @gray-lighter; position: absolute; - top: 5px; - left: 10px; + top: 10px; + left: 13px; } input { - border-radius: 20px; - font-size: 12px; - height: 30px; - padding: 4px 8px 4px 35px; + transition: all 140ms; + width: 90%; + max-width: 500px; + border-radius: 0; + position: relative; + top: -1px; + left: -1px; + font-size: 14px; + height: 46px; + padding-left: 4.4rem; color: @gray-darkest; - margin-bottom: 3px; - border-color: @gray-lighter; box-shadow: none; + border: 1px solid @color-divider; + //border-right: 1px solid transparent; + &:hover { + border: 1px solid @gray-lighter; + } &:focus { box-shadow: none; - border-color: @brand-primary; + border: 1px solid @brand-primary; } &::-webkit-input-placeholder { color: @gray-lighter; @@ -162,42 +136,94 @@ } } } + .results-filters { + margin: 1.2rem 1.2rem 0 0; + .results-filter-title { + font-size: 12px; + color: @gray-lighter; + font-weight: 500; + margin-right: 0.7rem; + } + } } } .result-grids { overflow: auto; - margin: 0 0 0 20px; + margin: 0 0 0 1.3rem; + .result-grid { + display: flex; + align-content: stretch; display: flex; flex-flow: row wrap; + flex-wrap: wrap; justify-content: flex-start; margin-top: 10px; .image-item { display: flex; + flex: 1 0; position: relative; - width: 320px; - height: 166px; - border-radius: 4px; + min-width: @image-card-width; + max-width: @image-card-width; + height: @image-card-height; + border-radius: @border-radius; background-color: white; - margin-right: 20px; - margin-bottom: 20px; - .tag-overlay { - z-index: 999; - background-color: rgba(0,0,0,0.8); - border-radius: 4px; - width: 320px; - height: 166px; + margin-right: 1rem; + margin-bottom: 1rem; + .overlay { + display: flex; + flex: 1 0; + background-color: white; + border-radius: @border-radius; + min-width: @image-card-width; + max-width: @image-card-width; + height: @image-card-height; position: absolute; - color: white; - font-size: 13px; + color: @gray-normal; display: none; - padding: 10px; + border: 1px solid @color-divider; + + } + .menu-overlay { + z-index: 999; + .menu-item { + padding: 0.8rem 1rem; + border-bottom: 1px solid @color-divider; + height: 40px; + .box-button(); + .selected-tag { + color: @brand-primary; + margin-left: 0.3rem; + } + .icon { + font-size: 18px; + } + .text { + position: relative; + top: -0.4rem; + margin-left: 0.3rem; + } + } + .close-overlay { + position: absolute; + bottom: 1rem; + right: 1rem; + } + } + .tag-overlay { + z-index: 1000; + .close-overlay { + position: absolute; + top: 0.6rem; + right: 0.7rem; + } p { - color: white; - padding-bottom: 7px; - border-bottom: 1px solid rgba(255,255,255,0.2); + color: @gray-normal; + padding: 0.8rem 1rem; + margin-bottom: 0; + border-bottom: 1px solid @color-divider; } .tag-list { display: flex; @@ -205,133 +231,149 @@ align-items: flex-start; align-content: flex-start; flex-flow: row wrap; - height: 100px; + height: 90px; overflow: auto; + padding: 0.5rem; .tag { + font-size: 10px; + padding: 0.3rem 0.6rem; display: inline-block; flex: 0 auto; - margin-right: 2px; - padding: 3px 5px; + border-radius: @border-radius; + margin-right: 0.3rem; + margin-bottom: 0.3rem; + border: 1px solid transparent; &.active { - background-color: rgba(255,255,255,0.2); - border-radius: 20px; + background-color: @brand-primary; + color: white; + &:hover { + background-color: @brand-primary; + color: white; + border: 1px solid transparent; + } } &:hover { - background-color: rgba(255,255,255,0.2); - border-radius: 20px; + background-color: @color-box-button; + border: 1px solid @color-divider; } } } .tags-loading { position: relative; - left: 42%; - top: 20%; + left: 45%; text-align: center; - margin: 14px auto; + margin-top: 3rem; -webkit-animation-name: spin; -webkit-animation-duration: 1.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } + .no-tags { + color: @gray-lighter; + text-align: center; + margin-top: 3rem; + } } .logo { - flex: 1 auto; - min-width: 90px; + width: 60px; + min-width: 60px; + max-width: 60px; background-color: @brand-action; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-top-left-radius: @border-radius; + border-bottom-left-radius: @border-radius; justify-content: center; text-align: center; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2); img { - margin-top: 15px; + width: 35px; + height: auto; + margin-top: 1.2rem; } } .card { - padding: 10px 20px 10px 20px; position: relative; - border: 1px solid @gray-lighter; + border: 1px solid darken(@gray-lightest, 5%); border-left: 0; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - .badges { - position: absolute; - right: 15px; - top: 8px; - } - .name { - font-size: 18px; - color: @gray-darkest; - margin-bottom: 0px; - position: relative; - width: 190px; - .namespace { - font-size: 11px; - color: @gray-lighter; - margin-bottom: -3px; - &.official { - color: @brand-action; + border-top-right-radius: @border-radius; + border-bottom-right-radius: @border-radius; + .info { + padding: 0.7rem 1rem 0.7rem 1.2rem; + .badges { + color: @brand-primary; + position: absolute; + right: 0.6rem; + top: 0.7rem; + } + .name { + color: @gray-darkest; + position: relative; + width: 190px; + .namespace { + font-size: 10px; + color: @gray-normal; + &.official { + color: @brand-action; + } + } + .repo { + font-size: 13px; + font-weight: 500; + display: inline-block; + max-width: 190px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } - .repo { - display: inline-block; - max-width: 190px; - overflow: hidden; + .description { + font-size: 10px; + color: @gray-light; + padding-right: 1rem; + height: 44px; text-overflow: ellipsis; - white-space: nowrap; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + display: -webkit-box; + word-wrap: break-word; } } - .description { - font-size: 12px; - color: @gray-normal; - height: 50px; - width: 190px; - text-overflow: ellipsis; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - display: -webkit-box; - word-wrap: break-word; - } .actions { - width: 190px; - position: absolute; - bottom: 8px; - .stars { - height: 15px; + display: flex; + flex-direaction: column; + justify-content: flex-end; + height: 33px; + border-top: 1px solid @color-divider; + .favorites { + flex: 1 auto; font-size: 10px; - color: @gray-darker; - border-right: 1px solid @gray-lightest; - padding-right: 10px; + color: @gray-normal; + border-right: 1px solid @color-divider; + padding: 1.1rem 1.2rem; .icon { position: relative; - font-size: 16px; - margin-right: 3px; - top: -1px; - color: @gray-darkest; + font-size: 11px; + margin-right: 0.5rem; + color: @gray-normal; } .text { position: relative; - top: -6px; + top: -0.2rem; } } .tags { - height: 15px; + flex: 1 auto; font-size: 10px; color: @gray-darker; - padding-left: 10px; - .icon { + padding-left: 1rem; + .key { position: relative; - font-size: 12px; - margin-right: 2px; - top: 2px; - color: @gray-darkest; + font-weight: 400; + color: @gray-light; } .text { position: relative; - top: -2px; - padding: 3px 5px; - text-decoration: underline; + color: @brand-action; &:hover { background-color: @brand-action; color: white; @@ -339,17 +381,31 @@ } } } + .more-menu { + flex: 0 auto; + width: 39px; + padding: 0.4rem 1rem; + font-size: 20px; + .box-button(); + } .action { - flex: 1 auto; - .btn { - text-align: right; - position: relative; - float: right; - top: -7px; + flex: 0 auto; + position: relative; + top: -1px; + right: -1px; + height: 34px; + .box-button(); + padding: 0.9rem 1rem; + color: @brand-primary; + border: 1px solid @brand-primary; + border-bottom-right-radius: @border-radius; + transition: all 140ms; + &:hover { + background-color: @brand-action; + color: white; + border: 1px solid darken(@brand-primary, 10%); } } - display: flex; - flex-direaction: row; } } } diff --git a/styles/right-panel.less b/styles/right-panel.less index d67a9f9974..71d5ea0dd3 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -3,135 +3,173 @@ margin: 0; padding: 0; box-sizing: border-box; - flex: 1; + flex: 1 0; display: flex; flex-direction: column; + .header-section { + position: absolute; + top: 10px; + .text { + font-size: 14px; + color: @gray-darker; + font-weight: 500; + margin-left: 1.5rem; + .status { + padding: 0.3rem; + border-radius: @border-radius; + font-size: 10px; + font-weight: 500; + position: relative; + left: 1rem; + color: white; + border: 1px solid white; + &.running { + border-color: @brand-positive; + color: @brand-positive; + } + &.paused { + border-color: @gray-lighter; + color: @gray-lighter; + } + &.stopped { + border-color: @gray-lighter; + color: @gray-lighter; + } + &.downloading { + border-color: @brand-action; + color: @brand-action; + } + } + } + } .details-subheader { - flex: 0 auto; + flex: 0 0; display: flex; flex-direction: row; position: relative; border-bottom: 1px solid @color-divider; + border-radius: @border-radius; background-color: white; - height: 51px; - padding: 6px 10px 10px 24px; - font-size: 13px; - color: @gray-normal; + top: -1px; + font-size: 10px; + padding-left: 0.3rem; .details-header-actions { flex: 1 auto; text-align: left; - margin-top: -12px; + position: relative; .action { display: inline-block; - position: relative; - img { - width: 35px; - height: 35px; - } - &.disabled { - opacity: 0.3; - &:active { - img, .btn-label { - -webkit-filter: brightness(1); - } - } + width: 54px; + padding-top: 0.5rem; + height: 60px; + .box-button(); + &:hover { + background-color: transparent; + color: @gray-darkest; } &:active { - img, .btn-label { - -webkit-filter: brightness(0.8); - } + color: @brand-action; + box-shadow: none; + background-color: transparent; + } + //border-right: 1px solid @color-divider; + &.disabled { + background-color: white; + color: fade(@gray-light, 20%); } .action-icon { - color: @gray-normal; - margin-right: 15px; + text-align: center; + //height: 44px; + .icon { + font-size: 30px; + margin-left: 0.6rem; + } } .btn-label { - position: absolute; - color: @brand-action; + text-align: center; font-size: 9px; - width: 200px; - top: 38px; - &.view { - left: 8px; - } - &.restart { - left: 3px; - } - &.stop { - left: 8px; - } - &.start { - left: 8px; - } - &.terminal { - left: 1px; - } - visibility: hidden; + position: relative; + top: -0.5rem; } } } .details-subheader-tabs { - flex: 1 auto; - text-align: right; - margin-right: 3px; - margin-top: 3px; - } - } - .details-header { - flex: 0 auto; - display: flex; - flex-direction: row; - padding: 18px 24px 24px 24px; - position: relative; - background-color: white; - h1 { - margin: 0; - font-size: 20px; - font-weight: 400; - margin: 0; - color: @gray-darkest; - } - .status { - font-size: 10px; - font-weight: 500; + display: flex; + justify-content: flex-end; + align-items: flex-end; position: relative; - top: 8px; - left: 14px; - &.running { - color: @brand-positive; - } - &.paused { - color: @gray-lighter; - } - &.stopped { - color: @gray-lighter; - } - &.downloading { - color: @brand-action; + right: -1px; + top: 1px; + flex: 1 0; + text-align: right; + .details-tab { + transition: background-color 140ms; + font-size: 14px; + font-weight: 500; + padding: 1.5rem 2rem; + border-top: 1px solid @color-divider; + border-left: 1px solid @color-divider; + border-bottom: 1px solid transparent; + color: @gray-light; + &:hover { + background-color: @color-box-button; + } + &:last-child { + border-right: 1px solid @color-divider; + } + //border-radius: @border-radius; + &.active { + background-color: @color-background; + border-bottom: 1px solid @color-background; + border-top: 3px solid @brand-primary; + color: @gray-darker; + } + &:active { + box-shadow: inset 0 0 1px @color-divider; + background-color: darken(@color-box-button, 1%); + } + &.disabled { + color: @gray-lightest; + &:hover { + background-color: white; + } + &:active { + background-color: white; + } + &.active { + &:hover { + background-color: @color-background; + } + } + } } } } .tab { - margin-left: 16px; - padding: 6px 10px; + font-size: 12px; font-weight: 400; display: inline-block; + margin: 0 0.6rem; + transition: all 0.3s; + color: @gray-light; + border-bottom: 3px solid transparent; + text-align: center; + min-width: 20px; + padding-bottom: 1rem; &.active { - border-radius: 40px; - color: white; - .brand-gradient(); + font-weight: 500; + color: @gray-darkest; + border-bottom: 3px solid @brand-primary; } &.disabled { opacity: 0.5; &:hover { - border-radius: 40px; - background-color: transparent; + color: @gray-light; } } &:hover { - border-radius: 40px; - background-color: @gray-lightest; + color: @gray-darkest; } } @@ -148,8 +186,7 @@ } } .details-panel { - flex: 1; + flex: 1 auto; overflow: auto; - background-color: white; } } diff --git a/styles/setup.less b/styles/setup.less index f6f1e44b3f..8b8fa30c25 100644 --- a/styles/setup.less +++ b/styles/setup.less @@ -10,13 +10,15 @@ flex-direction: row; flex: 1 auto; - + + padding: 2rem; + .image { display: flex; flex: 1 auto; align-items: center; justify-content: flex-end; - padding-right: 40px; + padding-right: 10rem; img { width: 399px; @@ -38,8 +40,8 @@ flex: 1 auto; align-items: flex-end; justify-content: center; - padding-right: 60px; - padding-left: 80px; + padding-right: 5rem; + padding-left: 15rem; flex-direction: column; img { @@ -96,14 +98,10 @@ button[type="submit"] { flex: 0 auto; display: block; + .btn-filled-styles(@brand-action); font-size: 18px; padding: 10px 20px; - color: white; - background-color: @brand-action; border: 0; - &:hover { - background-color: darken(@brand-action, 5%); - } } } diff --git a/styles/theme.less b/styles/theme.less index e5bda86122..6b70e109a6 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -6,7 +6,7 @@ @import "bootstrap/mixins.less"; h2 { - font-size: 18px; + font-size: 16px; color: @gray-normal; } @@ -22,10 +22,14 @@ h4 { } a { - transition: color 0.25s; + color: @brand-action; + transition: color 150ms; + //cursor: pointer; &:hover { text-decoration: none; + color: darken(@brand-action, 10%); } + outline: 0 !important; } input[type="text"] { @@ -41,8 +45,8 @@ input[type="text"] { border-bottom: 1px solid @brand-action; } &::-webkit-input-placeholder { - color: #DDD; - font-weight: 300; + color: @gray-lighter; + font-weight: 400; } } } @@ -62,34 +66,33 @@ input[type="text"] { } // Mixin for generating new styles -.btn-styles(@btn-color: @gray-normal) { - transition: all 0.25s; +.btn-hollow-styles(@btn-color: @gray-normal) { .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners - border-color: @btn-color; - color: @btn-color; + transition: all 100ms; + background: transparent; + border: 1px solid @btn-color; + color: @btn-color; + font-weight: 500; - &:hover, - &:focus { - border-color: darken(@btn-color, 15%); - color: darken(@btn-color, 15%); + &:hover { + background-color: fade(@btn-color, 2%); + border-color: darken(@btn-color, 5%); + color: darken(@btn-color, 5%); cursor: default; box-shadow: none; - background: none; } + &:focus, + &.focus { + color: @btn-color; + outline: none; + } + &:active { - background-color: lighten(@btn-color, 45%); - border-color: darken(@btn-color, 15%); - color: darken(@btn-color, 15%); - box-shadow: none; - } - - &.active { - background-color: @btn-color; - color: white; - box-shadow: none; - box-shadow: none; - } + background-color: fade(@btn-color, 3%); + border-color: darken(@btn-color, 5%); + box-shadow: 0 0 15px fade(@btn-color, 25%); + } &:disabled, &[disabled] { @@ -104,6 +107,45 @@ input[type="text"] { } } +.btn-filled-styles(@btn-color: @gray-normal) { + .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners + transition: all 100ms; + background: @btn-color; + border: none; + color: white; + font-weight: 500; + + &:hover { + background-color: darken(@btn-color, 4%); + color: white; + cursor: default; + box-shadow: none; + } + + &:focus, + &.focus { + color: white; + outline: none; + } + + &:active { + background-color: darken(@btn-color, 5%); + box-shadow: 0 0 15px fade(@btn-color, 25%); + } + + &:disabled, + &[disabled] { + opacity: 0.5; + background: @btn-color; + &.active { + background: @btn-color; + color: white; + box-shadow: none; + box-shadow: none; + } + } +} + .btn-group { &.tabs { .btn { @@ -125,16 +167,40 @@ input[type="text"] { // Common styles .btn { - font-size: 13px; background-color: transparent; color: @gray-normal; border: 1px solid @gray-normal; - border-radius: 40px; + border-radius: @border-radius; box-shadow: none; - font-weight: 400; text-shadow: none; - padding: 5px 14px 5px 14px; cursor: default; + font-size: 12px; + padding: 0.5rem 1rem; + text-transform: uppercase; + + &.has-icon { + .icon { + font-size: 0.9rem; + margin-right: 0.4rem; + &::before { + -webkit-font-smoothing: subpixel-antialiased; + } + } + } + + &.circular { + border-radius: 100%; + width: 25px; + height: 25px; + padding: 0; + padding-top: 4px; + .icon { + font-size: 10px; + &::before { + -webkit-font-smoothing: subpixel-antialiased; + } + } + } &.small { font-size: 11px; @@ -180,36 +246,35 @@ input[type="text"] { &.only-icon { padding: 6px 7px 6px 7px; + border-radius: 100%; &.small { width: 22px; - padding: 4px 5px 4px 5px; + padding: 3px 5px 4px 5px; + .icon { + &::before { + -webkit-font-smoothing: subpixel-antialiased; + } + } } } } // Apply the mixin to the buttons .btn-action { - .btn-styles(@brand-action); + .btn-hollow-styles(@brand-action); + &.btn-hollow { + .btn-hollow-styles(@brand-action); + } } .btn-positive { - .btn-styles(@brand-positive); - &:hover, - &:focus { - border-color: darken(@brand-positive, 7%); - color: darken(@brand-positive, 7%); - } - &:active { - background-color: lighten(@brand-positive, 53%); - border-color: darken(@brand-positive, 7%); - color: darken(@brand-positive, 7%); - } + .btn-hollow-styles(@brand-positive); } -.btn-default { .btn-styles(@btn-default-bg); } -.btn-primary { .btn-styles(@btn-primary-bg); } -.btn-success { .btn-styles(@btn-success-bg); } -.btn-info { .btn-styles(@btn-info-bg); } -.btn-warning { .btn-styles(@btn-warning-bg); } -.btn-danger { .btn-styles(@btn-danger-bg); } +.btn-default { .btn-filled-styles(@btn-default-bg); } +.btn-primary { .btn-filled-styles(@btn-primary-bg); } +.btn-success { .btn-filled-styles(@btn-success-bg); } +.btn-info { .btn-filled-styles(@btn-info-bg); } +.btn-warning { .btn-filled-styles(@btn-warning-bg); } +.btn-danger { .btn-filled-styles(@btn-danger-bg); } .tooltip { .tooltip-inner { diff --git a/styles/variables.less b/styles/variables.less index dc0624f59e..c1bdae289f 100644 --- a/styles/variables.less +++ b/styles/variables.less @@ -1,5 +1,5 @@ -@brand-primary: #24B8EB; -@brand-action: #24B8EB; +@brand-primary: #22b8eb; +@brand-action: @brand-primary; @brand-positive: #15CC35; @brand-negative: #FF5F52; @@ -13,14 +13,24 @@ @traffic-light-gray-border: #D3D3D3; @gray-darkest: #233137; -@gray-darker: #556473; -@gray-normal: #7A8491; -@gray-light: #9AA7BB; -@gray-lighter: #C4CDDA; -@gray-lightest: #E1E8EF; +@gray-darker: #3f5167; +@gray-normal: #556473; +@gray-light: #7a8491; +@gray-lighter: #c4cdda; +@gray-lightest: #e6edf4; @color-divider: @gray-lightest; -@color-background: #FCFCFC; +@color-box-button: lighten(@gray-lightest, 5%); +@color-background: lighten(@gray-lightest, 4.5%); @font-regular: "Helvetica Neue", Segoe UI, Arial, "Lucida Grande", sans-serif; @font-code: Menlo, Consolas; + +@border-radius: 0.2rem; + +@sidebar-width: 220px; +@sidebar-text-overflow-width: 140px; + +@container-state-size: 20px; +@image-card-width: 260px; +@image-card-height: 130px;