External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-15 18:20:00 -03:30
Code Issues Packages Projects Releases Wiki Activity

Add contextual variables and update references

Browse Source
This commit is contained in:
gconsidine
2017-06-20 10:02:47 -04:00
parent 2c98294035
commit f11aef01ef
17 changed files with 349 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/features/credentials/edit-credentials.controller.js
View File

@@ -77,7 +77,7 @@ function EditCredentialsController (models, $state, $scope) {
}; };
vm.form.onSaveSuccess = res => { vm.form.onSaveSuccess = res => {
$state.go('credentials', { reload: true }); $state.go('credentials.edit', { credential_id: credential.get('id') }, { reload: true });
}; };
} }

4
awx/ui/client/lib/components/action/_index.less
View File

@@ -1,7 +1,7 @@
.at-ActionGroup { .at-ActionGroup {
margin-top: @at-space-6x; margin-top: @at-margin-panel;
button:last-child { button:last-child {
margin-left: @at-space-5x; margin-left: @at-margin-panel-inset;
} }
} }

4
awx/ui/client/lib/components/form/action.directive.js
View File

@@ -38,14 +38,14 @@ function atFormActionController ($state) {
vm.setCancelDefaults = () => { vm.setCancelDefaults = () => {
scope.text = 'CANCEL'; scope.text = 'CANCEL';
scope.fill = 'Hollow'; scope.fill = 'Hollow';
scope.color = 'white'; scope.color = 'default';
scope.action = () => $state.go('^'); scope.action = () => $state.go('^');
}; };
vm.setSaveDefaults = () => { vm.setSaveDefaults = () => {
scope.text = 'SAVE'; scope.text = 'SAVE';
scope.fill = ''; scope.fill = '';
scope.color = 'green'; scope.color = 'success';
scope.action = () => form.submit(); scope.action = () => form.submit();
}; };
} }

95
awx/ui/client/lib/components/input/_index.less
View File

@@ -1,17 +1,17 @@
.at-Input { .at-Input {
.at-mixin-Placeholder(@at-gray-dark-3x); .at-mixin-Placeholder(@at-color-input-placeholder);
height: @at-input-height; height: @at-height-input;
background: @at-white; background: @at-color-input-background;
border-radius: @at-border-radius; border-radius: @at-border-radius;
color: @at-gray-dark-5x; color: @at-color-input-text;
&, &:active { &, &:active {
border-color: @at-gray-dark-2x; border-color: @at-color-input-border;
} }
&:focus { &:focus {
border-color: @at-blue; border-color: @at-color-input-focus;
} }
} }
@@ -21,43 +21,43 @@
& > label { & > label {
& > input[type=checkbox] { & > input[type=checkbox] {
height: @at-input-height; height: @at-height-input;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
& > p { & > p {
margin: 0; margin: 0;
padding: 0 0 0 @at-space-6x; padding: 0 0 0 @at-padding-panel;
line-height: @at-line-height-tall; line-height: @at-line-height-tall;
} }
} }
} }
.at-InputContainer { .at-InputContainer {
margin-top: @at-space-6x; margin-top: @at-margin-panel;
} }
.at-Input-button { .at-Input-button {
min-width: @at-input-button-width;
display: block; display: block;
height: @at-input-height; height: @at-height-button;
line-height: 1;
&, &:active, &:hover, &:focus { &, &:active, &:hover, &:focus {
color: @at-gray-dark-3x; color: @at-color-button-text-default;
border-color: @at-gray-dark-2x; border-color: @at-color-input-border;
background-color: @at-white; background-color: @at-color-default;
cursor: pointer; cursor: pointer;
} }
} }
.at-Input--focus { .at-Input--focus {
border-color: @at-blue; border-color: @at-color-input-focus;
} }
.at-Input--rejected { .at-Input--rejected {
&, &:focus { &, &:focus {
border-color: @at-red; border-color: @at-color-input-error;
} }
} }
@@ -66,7 +66,6 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
left: 0; left: 0;
right: @at-input-button-width;
z-index: -2; z-index: -2;
opacity: 0; opacity: 0;
} }
@@ -77,15 +76,15 @@
.at-InputGroup { .at-InputGroup {
padding: 0; padding: 0;
margin: @at-space-6x 0 0 0; margin: @at-margin-panel 0 0 0;
} }
.at-InputGroup-border { .at-InputGroup-border {
position: absolute; position: absolute;
width: @at-inset-width; width: 5px;
height: 100%; height: 100%;
background: @at-gray-dark; background: @at-color-panel-border;
left: -@at-inset-width; left: -5px;
} }
.at-InputGroup-button { .at-InputGroup-button {
@@ -93,19 +92,21 @@
& > button { & > button {
height: 100%; height: 100%;
border-right: none;
color: @at-color-button-text-default;
} }
} }
.at-InputGroup-title { .at-InputGroup-title {
.at-mixin-Heading(@at-font-size-2x); .at-mixin-Heading(@at-font-size-panel-inset-heading);
margin: 0 0 0 @at-space-5x; margin: 0 0 0 @at-margin-panel-inset;
} }
.at-InputGroup-divider { .at-InputGroup-divider {
clear: both; clear: both;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: @at-space-6x; height: @at-height-divider;
} }
.at-InputLabel { .at-InputLabel {
@@ -114,17 +115,17 @@
} }
.at-InputLabel-name { .at-InputLabel-name {
color: @at-gray-dark-4x; color: @at-color-form-label;
font-size: @at-font-size-2x; font-size: @at-font-size-form-label;
font-weight: @at-font-weight; font-weight: @at-font-weight-body;
text-transform: uppercase; text-transform: uppercase;
} }
.at-InputLabel-hint { .at-InputLabel-hint {
margin-left: @at-space-4x; margin-left: @at-margin-form-label-hint;
color: @at-gray-dark-3x; color: @at-color-input-hint;
font-size: @at-font-size; font-size: @at-font-size-help-text;
font-weight: @at-font-weight; font-weight: @at-font-weight-body;
line-height: @at-line-height-short; line-height: @at-line-height-short;
} }
@@ -137,15 +138,15 @@
margin-bottom: 0; margin-bottom: 0;
& > input[type=checkbox] { & > input[type=checkbox] {
margin: 0 @at-space 0 0; margin: 0 3px 0 0;
position: relative; position: relative;
top: @at-space; top: 3px
} }
& > p { & > p {
font-size: @at-font-size; font-size: @at-font-size-help-text;
color: @at-gray-dark-4x; color: @at-color-form-label;
font-weight: @at-font-weight; font-weight: @at-font-weight-body;
display: inline; display: inline;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -153,16 +154,16 @@
} }
.at-InputMessage--rejected { .at-InputMessage--rejected {
font-size: @at-font-size; font-size: @at-font-size-help-text;
color: @at-red; color: @at-color-error;
margin: @at-space-3x 0 0 0; margin: @at-margin-input-message 0 0 0;
padding: 0; padding: 0;
} }
.at-InputLabel-required { .at-InputLabel-required {
color: @at-red; color: @at-color-error;
font-weight: @at-font-weight-2x; font-weight: @at-font-weight-heading;
font-size: @at-font-size-2x; font-size: @at-font-size-form-label;
margin: 0; margin: 0;
} }
@@ -171,13 +172,13 @@
width: 100%; width: 100%;
& > i { & > i {
font-size: @at-font-size; font-size: @at-font-size-button;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
pointer-events: none; pointer-events: none;
top: @at-space-4x; top: @at-height-input / 3;
right: @at-space-4x; right: @at-height-input / 3;
color: @at-gray-dark-2x; color: @at-color-icon;
} }
} }
@@ -188,7 +189,7 @@
} }
.at-InputSelect-select { .at-InputSelect-select {
height: @at-input-height; height: @at-height-input;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
z-index: 1; z-index: 1;

15
awx/ui/client/lib/components/input/group.directive.js
View File

@@ -49,7 +49,6 @@ function AtInputGroupController ($scope, $compile) {
vm.insert(group); vm.insert(group);
state._group = group; state._group = group;
vm.compile(group);
}; };
vm.createComponentConfigs = inputs => { vm.createComponentConfigs = inputs => {
@@ -138,20 +137,22 @@ function AtInputGroupController ($scope, $compile) {
vm.createComponent = (input, index) => { vm.createComponent = (input, index) => {
let tabindex = Number(scope.tab) + index; let tabindex = Number(scope.tab) + index;
let col = input._expand ? 12 : scope.col; let col = input._expand ? 12 : scope.col;
let component = angular.element(
return angular.element(
`<${input._component} col="${col}" tab="${tabindex}" `<${input._component} col="${col}" tab="${tabindex}"
state="${state._reference}._group[${index}]"> state="${state._reference}._group[${index}]">
</${input._component}>` </${input._component}>`
); );
$compile(component)(scope.$parent)
return component;
}; };
vm.createDivider = () => { vm.createDivider = () => {
return angular.element('<at-divider></at-divider>'); let divider = angular.element('<at-divider></at-divider>');
}; $compile(divider[0])(scope.$parent);
vm.compile = group => { return divider;
group.forEach(component => $compile(component._element[0])(scope.$parent));
}; };
vm.clear = () => { vm.clear = () => {

2
awx/ui/client/lib/components/input/lookup.partial.html
View File

@@ -4,7 +4,7 @@
<div class="input-group"> <div class="input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn at-ButtonHollow--white at-Input-button" <button class="btn at-ButtonHollow--default at-Input-button"
ng-disabled="state._disabled || form.disabled" ng-disabled="state._disabled || form.disabled"
ng-click="vm.search()"> ng-click="vm.search()">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>

8
awx/ui/client/lib/components/panel/_index.less
View File

@@ -1,7 +1,7 @@
.at-Panel { .at-Panel {
margin: @at-space-6x 0 0 0; margin: @at-margin-panel 0 0 0;
padding: @at-space-6x; padding: @at-padding-panel;
border-color: @at-gray-dark; border-color: @at-color-panel-border;
} }
.at-Panel-heading { .at-Panel-heading {
@@ -20,6 +20,6 @@
} }
.at-Panel-headingTitle { .at-Panel-headingTitle {
.at-mixin-Heading(@at-font-size-3x); .at-mixin-Heading(@at-font-size-panel-heading);
text-transform: none; text-transform: none;
} }

26
awx/ui/client/lib/components/popover/_index.less
View File

@@ -1,5 +1,5 @@
.at-Popover { .at-Popover {
padding: 0 0 0 @at-space-3x; padding: 0 0 0 5px;
} }
.at-Popover--inline { .at-Popover--inline {
@@ -8,7 +8,7 @@
.at-Popover-icon { .at-Popover-icon {
.at-mixin-ButtonIcon(); .at-mixin-ButtonIcon();
font-size: @at-font-size-4x; font-size: @at-font-size-icon;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@@ -17,35 +17,35 @@
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
color: @at-white; color: @at-white;
background-color: @at-gray-dark-4x; background-color: @at-color-body-background-dark;
max-width: @at-popover-width; max-width: @at-popover-maxwidth;
padding: @at-space-4x; padding: @at-padding-popover;
height: auto; height: auto;
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
margin: 0 0 0 @at-space-6x; margin: 0 0 0 18px;
border-radius: @at-border-radius; border-radius: @at-border-radius;
box-shadow: 0 5px 10px rgba(0,0,0, 0.2); box-shadow: 0 5px 10px rgba(0,0,0, 0.2);
transition: opacity .15s linear; transition: opacity .15s linear;
font-weight: @at-font-weight font-weight: @at-font-weight-body;
} }
.at-Popover-arrow { .at-Popover-arrow {
color: @at-gray-dark-4x; color: @at-color-body-background-dark;
position: fixed; position: fixed;
z-index: 1999; z-index: 1999;
padding: 0; padding: 0;
margin: @at-space-4x 0 0 @at-space; margin: 8px 0 0 3px;
} }
.at-Popover-title { .at-Popover-title {
.at-mixin-Heading(@at-font-size); .at-mixin-Heading(@at-font-size-body);
color: @at-white; color: @at-color-body-text-dark;
margin-bottom: @at-space-4x; margin-bottom: @at-margin-popover;
} }
.at-Popover-text { .at-Popover-text {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: @at-font-size; font-size: @at-font-size-body;
} }

19
awx/ui/client/lib/components/tabs/_index.less
View File

@@ -1,26 +1,27 @@
.at-TabGroup { .at-TabGroup {
margin-top: @at-space-6x; margin-top: @at-margin-panel;
} }
.at-Tab { .at-Tab {
margin: 0 @at-space-5x 0 0; margin: 0 @at-margin-item-column 0 0;
font-size: @at-font-size; font-size: @at-font-size-body;
line-height: 1;
} }
.at-Tab--active { .at-Tab--active {
&, &:hover, &:active, &:focus { &, &:hover, &:active, &:focus {
color: @at-white; color: @at-color-tab-text-default-active;
background-color: @at-gray-dark-3x; background-color: @at-color-tab-default-active;
border-color: @at-gray-dark-3x; border-color: @at-color-tab-border-default-active;
cursor: default; cursor: default;
} }
} }
.at-Tab--disabled { .at-Tab--disabled {
&, &:hover, &:active, &:focus { &, &:hover, &:active, &:focus {
background-color: @at-white; background-color: @at-color-tab-default-disabled;
color: @at-gray-dark-2x; color: @at-color-tab-text-default-disabled;
border-color: @at-gray-dark-2x; border-color: @at-color-tab-border-default-disabled;
opacity: 0.65; opacity: 0.65;
cursor: not-allowed; cursor: not-allowed;
} }

2
awx/ui/client/lib/components/tabs/tab.partial.html
View File

@@ -1,4 +1,4 @@
<button class="btn at-ButtonHollow--white at-Tab" <button class="btn at-ButtonHollow--default at-Tab"
ng-attr-disabled="{{ state._disabled || undefined }}" ng-attr-disabled="{{ state._disabled || undefined }}"
ng-class="{ 'at-Tab--active': state._active, 'at-Tab--disabled': state._disabled }" ng-class="{ 'at-Tab--active': state._active, 'at-Tab--disabled': state._disabled }"
ng-click="vm.go()"> ng-click="vm.go()">

67
awx/ui/client/lib/theme/_base-variables.less Normal file
View File

@@ -0,0 +1,67 @@
/**
* All base variables used. These should only be referenced by the contextual variables defined
* in the _contextual-variables.less file. In development, unless you are intentionally making a
* fundamental change, these variables should not be modified, removed, or added to.
*
* These variables should not be used directly in development of components or features. If an
* alias doesn't exist for the context you're working within, check with UX to create a new alias
* or to define a more applicable alias.
*
* The goal is for UX to define the contexts for the contextual variables, so it's easy to make
* modifications like, "Change heading text to be smaller" or "Make all warnings a lighter shade
* of orange"
*
* 1. Colors
* 2. Typography
* 3. Layout
*
*/
// 1. Colors --------------------------------------------------------------------------------------
@at-gray-light-3x: #fcfcfc;
@at-gray-light-2x: #f2f2f2;
@at-gray-light: #ebebeb;
@at-gray: #e1e1e1;
@at-gray-dark: #d7d7d7;
@at-gray-dark-2x: #b7b7b7;
@at-gray-dark-3x: #848992;
@at-gray-dark-4x: #707070;
@at-gray-dark-5x: #161b1f;
@at-white: #ffffff;
@at-white-hover: #f2f2f2;
@at-blue: #337ab7;
@at-blue-hover: #286090;
@at-green: #5cb85c;
@at-green-hover: #449D44;
@at-orange: #f0ad4e;
@at-orange-hover: #ec971f;
@at-red: #d9534f;
@at-red-hover: #c9302c;
@at-red-bright: #ff0000;
@at-red-bright-hover: #d81f1f;
// 2. Typography ----------------------------------------------------------------------------------
@at-font-size: 12px;
@at-font-size-2x: 13px;
@at-font-size-3x: 14px;
@at-font-size-4x: 16px;
@at-font-size-5x: 20px;
@at-font-weight: 400;
@at-font-weight-2x: 700;
// 3. Layout --------------------------------------------------------------------------------------
@at-space: 5px;
@at-space-2x: 10px;
@at-space-3x: 15px;
@at-space-4x: 20px;

38
awx/ui/client/lib/theme/_common.less
View File

@@ -1,38 +0,0 @@
/**
* For styles that are used in more than one place throughout the application.
*
* 1. Buttons
*
*/
// 1. Buttons -------------------------------------------------------------------------------------
.at-Button--green {
.at-mixin-Button();
.at-mixin-ButtonColor('at-green', 'at-white');
&[disabled] {
background: @at-gray-dark;
}
}
.at-Button--blue {
.at-mixin-Button();
.at-mixin-ButtonColor('at-blue', 'at-white');
}
.at-Button--red {
.at-mixin-Button();
.at-mixin-ButtonColor('at-red', 'at-white');
}
.at-ButtonHollow--white {
.at-mixin-Button();
.at-mixin-ButtonHollow('at-gray-dark-3x', 'at-gray-dark-2x');
border-color: @at-gray-dark;
}
.at-ButtonIcon {
padding: @at-space-2x @at-space-4x;
font-size: @at-font-size-3x;
}

128
awx/ui/client/lib/theme/_contextual-variables.less Normal file
View File

@@ -0,0 +1,128 @@
/**
* All variables used in the UI. Use these variables directly during the development of components
* and features. Be sure the context of the variable name applies to the work that's being done.
* For example, it wouldn't make sense to use `@at-input-height` to describe the height of a
* button. Either add an alias if it makes sense to use the same base variable, or add a new
* base variable to reference.
*
* Keep in mind the goal is to be able to modify an item by referencing its context instead of
* an arbitrary variable name. For example, tt should be a simple change when an ask comes in to
* "increase the height of inputs"
*
* 1. Colors
* 2. Typography
* 3. Layout
* 4. Misc
*
*/
// 1. Colors --------------------------------------------------------------------------------------
@at-color-default: @at-white;
@at-color-default-hover: @at-white-hover;
@at-color-unreachable: @at-red-bright;
@at-color-unreachable-hover: @at-red-bright-hover;
@at-color-error: @at-red;
@at-color-error-hover: @at-red-hover;
@at-color-warning: @at-orange;
@at-color-warning-hover: @at-orange-hover;
@at-color-info: @at-blue;
@at-color-info-hover: @at-blue-hover;
@at-color-success: @at-green;
@at-color-success-hover: @at-green-hover;
@at-color-disabled: @at-gray-dark;
@at-color-body-background-dark: @at-gray-dark-4x;
@at-color-body-text-dark: @at-white;
@at-color-body-background: @at-gray-light-3x;
@at-color-body-text: @at-gray-dark-4x;
@at-color-button-border-default: @at-gray-dark-2x;
@at-color-button-text-default: @at-gray-dark-4x;
@at-color-tab-default-active: @at-gray-dark-2x;
@at-color-tab-border-default-active: @at-gray-dark-2x;
@at-color-tab-text-default-active: @at-white;
@at-color-tab-default-disabled: @at-white;
@at-color-tab-border-default-disabled: @at-gray-dark-2x;
@at-color-tab-text-default-disabled: @at-gray-dark-4x;
@at-color-form-label: @at-gray-dark-4x;
@at-color-input-border: @at-gray-dark-2x;
@at-color-input-error: @at-color-error;
@at-color-input-focus: @at-color-info;
@at-color-input-placeholder: @at-gray-dark-3x;
@at-color-input-hint: @at-gray-dark-3x;
@at-color-input-text: @at-gray-dark-5x;
@at-color-input-background: @at-white;
@at-color-icon: @at-gray-dark-2x;
@at-color-icon-hover: @at-gray-dark-3x;
@at-color-panel-heading: @at-gray-dark-4x;
@at-color-panel-border: @at-gray-dark;
@at-color-table-header-background: @at-gray-light;
@at-color-line-separator: @at-gray;
// 2. Typography ----------------------------------------------------------------------------------
@at-font-size-help-text: @at-font-size;
@at-font-size-button: @at-font-size;
@at-font-size-form-label: @at-font-size-2x;
@at-font-size-breadcrumb: @at-font-size-3x;
@at-font-size-input: @at-font-size-3x;
@at-font-size-panel-heading: @at-font-size-3x;
@at-font-size-navigation: @at-font-size-3x;
@at-font-size-table-heading: @at-font-size-3x;
@at-font-size-body: @at-font-size-3x;
@at-font-size-panel-inset-heading: @at-font-size-2x;
@at-font-size-icon: @at-font-size-4x;
@at-font-size-menu-icon: @at-font-size-5x;
@at-font-weight-body: @at-font-weight;
@at-font-weight-heading: @at-font-weight-2x;
// 3. Layout --------------------------------------------------------------------------------------
@at-padding-button-horizontal: @at-space-2x;
@at-padding-button-vertical: @at-space;
@at-padding-inset: @at-space-3x;
@at-padding-panel: @at-space-4x;
@at-padding-popover: @at-space-2x;
@at-margin-input-message: @at-space;
@at-margin-item-column: @at-space-3x;
@at-margin-panel: @at-space-4x;
@at-margin-panel-inset: @at-space-3x;
@at-margin-popover: @at-space-2x;
@at-margin-tag: @at-space-2x;
@at-margin-form-label: @at-space;
@at-margin-form-label-hint: @at-space-2x;
@at-margin-top-search-key: @at-space-2x;
@at-height-divider: @at-margin-panel;
@at-height-input: 30px;
@at-height-button: 30px;
@at-height-tab: 30px;
// 4. Misc ----------------------------------------------------------------------------------------
@at-border-radius: 5px;
@at-popover-maxwidth: 320px;
@at-line-height-short: 0.9;
@at-line-height-tall: 2;
@at-line-height: 24px;

41
awx/ui/client/lib/theme/_global.less Normal file
View File

@@ -0,0 +1,41 @@
/**
* For styles that are used in more than one place throughout the application.
*
* 1. Buttons
*
*/
// 1. Buttons -------------------------------------------------------------------------------------
.at-Button--success {
.at-mixin-Button();
.at-mixin-ButtonColor('at-color-success', 'at-color-default');
&[disabled] {
background: @at-color-disabled;
}
}
.at-Button--info {
.at-mixin-Button();
.at-mixin-ButtonColor('at-color-info', 'at-color-default');
}
.at-Button--error {
.at-mixin-Button();
.at-mixin-ButtonColor('at-color-error', 'at-color-default');
}
.at-ButtonHollow--default {
.at-mixin-Button();
.at-mixin-ButtonHollow(
'at-color-default',
'at-color-button-border-default',
'at-color-button-text-default'
);
}
.at-ButtonIcon {
padding: 4px @at-padding-button-horizontal;
font-size: @at-font-size-body;
}

37
awx/ui/client/lib/theme/_mixins.less
View File

@@ -11,9 +11,9 @@
} }
.at-mixin-Heading (@size) { .at-mixin-Heading (@size) {
color: @at-gray-dark-4x; color: @at-color-body-text;
font-size: @size; font-size: @size;
font-weight: @at-font-weight-2x; font-weight: @at-font-weight-heading;
line-height: @at-line-height-short; line-height: @at-line-height-short;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
@@ -21,12 +21,13 @@
} }
.at-mixin-Button () { .at-mixin-Button () {
height: @at-input-height; height: @at-height-input;
padding: @at-space-2x @at-space-4x; padding: @at-padding-button-vertical @at-padding-button-horizontal;
font-size: @at-font-size; font-size: @at-font-size-body;
line-height: 1;
} }
.at-mixin-ButtonColor (@background, @color, @hover: '@{background}--hover') { .at-mixin-ButtonColor (@background, @color, @hover: '@{background}-hover') {
background-color: @@background; background-color: @@background;
&, &:hover, &:focus { &, &:hover, &:focus {
@@ -42,21 +43,23 @@
} }
} }
.at-mixin-ButtonHollow (@color, @accent) { .at-mixin-ButtonHollow (@bg, @border, @text) {
background-color: @at-white; @hover: '@{bg}-hover';
color: @@color;
border-color: @@color; background-color: @@bg;
color: @@text;
border-color: @@border;
&:hover, &:active { &:hover, &:active {
color: @@color; color: @@text;
background-color: @at-white--hover; background-color: @@hover;
box-shadow: none; box-shadow: none;
} }
&:focus { &:focus {
color: @at-white; color: @@text;
background-color: @@accent; background-color: @@hover;
border-color: @@accent; border-color: @@border;
cursor: default; cursor: default;
} }
@@ -67,14 +70,14 @@
.at-mixin-ButtonIcon () { .at-mixin-ButtonIcon () {
line-height: @at-line-height-short; line-height: @at-line-height-short;
color: @at-gray-dark-2x; color: @at-color-icon;
& > i { & > i {
cursor: pointer; cursor: pointer;
} }
& > i:hover { & > i:hover {
color: @at-gray-dark-3x; color: @at-color-icon-hover
} }
} }

72
awx/ui/client/lib/theme/_variables.less
View File

@@ -1,72 +0,0 @@
/**
* All variables used in the UI.
*
* 1. Colors
* 2. Typography
* 3. Layout
* 4. Input
* 5. Misc
*/
// 1. Colors --------------------------------------------------------------------------------------
@at-gray-light-5x: #fcfcfc;
@at-gray-light-4x: #fafafa;
@at-gray-light-3x: #f6f6f6;
@at-gray-light-2x: #f2f2f2;
@at-gray-light: #ebebeb;
@at-gray: #e1e1e1;
@at-gray-dark: #d7d7d7;
@at-gray-dark-2x: #b7b7b7;
@at-gray-dark-3x: #848992;
@at-gray-dark-4x: #707070;
@at-gray-dark-5x: #161b1f;
@at-white: #ffffff;
@at-white--hover: #f2f2f2;
@at-blue: #337ab7;
@at-blue--hover: #286090;
@at-green: #5cb85c;
@at-green--hover: #449D44;
@at-yellow: #f0ad4e;
@at-yellow--hover: #ec971f;
@at-red: #d9534f;
@at-red--hover: #c9302c;
@at-redAlert: #ff0000;
@at-redAlert--hover: #d81f1f;
// 2. Typography ----------------------------------------------------------------------------------
@at-font-size: 12px;
@at-font-size-2x: 13px;
@at-font-size-3x: 14px;
@at-font-size-4x: 16px;
@at-font-weight: 400;
@at-font-weight-2x: 700;
@at-font-weight-3x: 900;
@at-line-height-short: 0.9;
@at-line-height-tall: 2;
@at-line-height: 24px;
// 3. Layout --------------------------------------------------------------------------------------
@at-space: 3px;
@at-space-2x: 4px;
@at-space-3x: 5px;
@at-space-4x: 10px;
@at-space-5x: 15px;
@at-space-6x: 20px;
// 4. Input ---------------------------------------------------------------------------------------
@at-input-button-width: 72px;
@at-input-height: 30px;
// 5. Misc ----------------------------------------------------------------------------------------
@at-border-radius: 5px;
@at-popover-width: 320px;
@at-inset-width: 5px;

5
awx/ui/client/lib/theme/index.less
View File

@@ -1,8 +1,9 @@
// App-wide styles // App-wide styles
@import '_variables'; @import '_base-variables';
@import '_contextual-variables';
@import '_mixins'; @import '_mixins';
@import '_utility'; @import '_utility';
@import '_common'; @import '_global';
// Aggregated component and feature specific styles // Aggregated component and feature specific styles
@import '../components/_index'; @import '../components/_index';