mirror of
https://github.com/ansible/awx.git
synced 2026-01-12 10:30:03 -03:30
Add contextual variables and update references
This commit is contained in:
gconsidine
parent
2c98294035
commit
f11aef01ef
@ -77,7 +77,7 @@ function EditCredentialsController (models, $state, $scope) {
|
||||
};
|
||||
|
||||
vm.form.onSaveSuccess = res => {
|
||||
$state.go('credentials', { reload: true });
|
||||
$state.go('credentials.edit', { credential_id: credential.get('id') }, { reload: true });
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.at-ActionGroup {
|
||||
margin-top: @at-space-6x;
|
||||
margin-top: @at-margin-panel;
|
||||
|
||||
button:last-child {
|
||||
margin-left: @at-space-5x;
|
||||
margin-left: @at-margin-panel-inset;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,14 +38,14 @@ function atFormActionController ($state) {
|
||||
vm.setCancelDefaults = () => {
|
||||
scope.text = 'CANCEL';
|
||||
scope.fill = 'Hollow';
|
||||
scope.color = 'white';
|
||||
scope.color = 'default';
|
||||
scope.action = () => $state.go('^');
|
||||
};
|
||||
|
||||
vm.setSaveDefaults = () => {
|
||||
scope.text = 'SAVE';
|
||||
scope.fill = '';
|
||||
scope.color = 'green';
|
||||
scope.color = 'success';
|
||||
scope.action = () => form.submit();
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
.at-Input {
|
||||
.at-mixin-Placeholder(@at-gray-dark-3x);
|
||||
.at-mixin-Placeholder(@at-color-input-placeholder);
|
||||
|
||||
height: @at-input-height;
|
||||
background: @at-white;
|
||||
height: @at-height-input;
|
||||
background: @at-color-input-background;
|
||||
border-radius: @at-border-radius;
|
||||
color: @at-gray-dark-5x;
|
||||
color: @at-color-input-text;
|
||||
|
||||
&, &:active {
|
||||
border-color: @at-gray-dark-2x;
|
||||
border-color: @at-color-input-border;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @at-blue;
|
||||
border-color: @at-color-input-focus;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,43 +21,43 @@
|
||||
|
||||
& > label {
|
||||
& > input[type=checkbox] {
|
||||
height: @at-input-height;
|
||||
height: @at-height-input;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
padding: 0 0 0 @at-space-6x;
|
||||
padding: 0 0 0 @at-padding-panel;
|
||||
line-height: @at-line-height-tall;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.at-InputContainer {
|
||||
margin-top: @at-space-6x;
|
||||
margin-top: @at-margin-panel;
|
||||
}
|
||||
|
||||
.at-Input-button {
|
||||
min-width: @at-input-button-width;
|
||||
display: block;
|
||||
height: @at-input-height;
|
||||
height: @at-height-button;
|
||||
line-height: 1;
|
||||
|
||||
&, &:active, &:hover, &:focus {
|
||||
color: @at-gray-dark-3x;
|
||||
border-color: @at-gray-dark-2x;
|
||||
background-color: @at-white;
|
||||
color: @at-color-button-text-default;
|
||||
border-color: @at-color-input-border;
|
||||
background-color: @at-color-default;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.at-Input--focus {
|
||||
border-color: @at-blue;
|
||||
border-color: @at-color-input-focus;
|
||||
}
|
||||
|
||||
.at-Input--rejected {
|
||||
&, &:focus {
|
||||
border-color: @at-red;
|
||||
border-color: @at-color-input-error;
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,7 +66,6 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: @at-input-button-width;
|
||||
z-index: -2;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -77,15 +76,15 @@
|
||||
|
||||
.at-InputGroup {
|
||||
padding: 0;
|
||||
margin: @at-space-6x 0 0 0;
|
||||
margin: @at-margin-panel 0 0 0;
|
||||
}
|
||||
|
||||
.at-InputGroup-border {
|
||||
position: absolute;
|
||||
width: @at-inset-width;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
background: @at-gray-dark;
|
||||
left: -@at-inset-width;
|
||||
background: @at-color-panel-border;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.at-InputGroup-button {
|
||||
@ -93,19 +92,21 @@
|
||||
|
||||
& > button {
|
||||
height: 100%;
|
||||
border-right: none;
|
||||
color: @at-color-button-text-default;
|
||||
}
|
||||
}
|
||||
|
||||
.at-InputGroup-title {
|
||||
.at-mixin-Heading(@at-font-size-2x);
|
||||
margin: 0 0 0 @at-space-5x;
|
||||
.at-mixin-Heading(@at-font-size-panel-inset-heading);
|
||||
margin: 0 0 0 @at-margin-panel-inset;
|
||||
}
|
||||
|
||||
.at-InputGroup-divider {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: @at-space-6x;
|
||||
height: @at-height-divider;
|
||||
}
|
||||
|
||||
.at-InputLabel {
|
||||
@ -114,17 +115,17 @@
|
||||
}
|
||||
|
||||
.at-InputLabel-name {
|
||||
color: @at-gray-dark-4x;
|
||||
font-size: @at-font-size-2x;
|
||||
font-weight: @at-font-weight;
|
||||
color: @at-color-form-label;
|
||||
font-size: @at-font-size-form-label;
|
||||
font-weight: @at-font-weight-body;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.at-InputLabel-hint {
|
||||
margin-left: @at-space-4x;
|
||||
color: @at-gray-dark-3x;
|
||||
font-size: @at-font-size;
|
||||
font-weight: @at-font-weight;
|
||||
margin-left: @at-margin-form-label-hint;
|
||||
color: @at-color-input-hint;
|
||||
font-size: @at-font-size-help-text;
|
||||
font-weight: @at-font-weight-body;
|
||||
line-height: @at-line-height-short;
|
||||
}
|
||||
|
||||
@ -137,15 +138,15 @@
|
||||
margin-bottom: 0;
|
||||
|
||||
& > input[type=checkbox] {
|
||||
margin: 0 @at-space 0 0;
|
||||
margin: 0 3px 0 0;
|
||||
position: relative;
|
||||
top: @at-space;
|
||||
top: 3px
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: @at-font-size;
|
||||
color: @at-gray-dark-4x;
|
||||
font-weight: @at-font-weight;
|
||||
font-size: @at-font-size-help-text;
|
||||
color: @at-color-form-label;
|
||||
font-weight: @at-font-weight-body;
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -153,16 +154,16 @@
|
||||
}
|
||||
|
||||
.at-InputMessage--rejected {
|
||||
font-size: @at-font-size;
|
||||
color: @at-red;
|
||||
margin: @at-space-3x 0 0 0;
|
||||
font-size: @at-font-size-help-text;
|
||||
color: @at-color-error;
|
||||
margin: @at-margin-input-message 0 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.at-InputLabel-required {
|
||||
color: @at-red;
|
||||
font-weight: @at-font-weight-2x;
|
||||
font-size: @at-font-size-2x;
|
||||
color: @at-color-error;
|
||||
font-weight: @at-font-weight-heading;
|
||||
font-size: @at-font-size-form-label;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -171,13 +172,13 @@
|
||||
width: 100%;
|
||||
|
||||
& > i {
|
||||
font-size: @at-font-size;
|
||||
font-size: @at-font-size-button;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
top: @at-space-4x;
|
||||
right: @at-space-4x;
|
||||
color: @at-gray-dark-2x;
|
||||
top: @at-height-input / 3;
|
||||
right: @at-height-input / 3;
|
||||
color: @at-color-icon;
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,7 +189,7 @@
|
||||
}
|
||||
|
||||
.at-InputSelect-select {
|
||||
height: @at-input-height;
|
||||
height: @at-height-input;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
@ -49,7 +49,6 @@ function AtInputGroupController ($scope, $compile) {
|
||||
|
||||
vm.insert(group);
|
||||
state._group = group;
|
||||
vm.compile(group);
|
||||
};
|
||||
|
||||
vm.createComponentConfigs = inputs => {
|
||||
@ -138,20 +137,22 @@ function AtInputGroupController ($scope, $compile) {
|
||||
vm.createComponent = (input, index) => {
|
||||
let tabindex = Number(scope.tab) + index;
|
||||
let col = input._expand ? 12 : scope.col;
|
||||
|
||||
return angular.element(
|
||||
let component = angular.element(
|
||||
`<${input._component} col="${col}" tab="${tabindex}"
|
||||
state="${state._reference}._group[${index}]">
|
||||
</${input._component}>`
|
||||
);
|
||||
|
||||
$compile(component)(scope.$parent)
|
||||
|
||||
return component;
|
||||
};
|
||||
|
||||
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 => {
|
||||
group.forEach(component => $compile(component._element[0])(scope.$parent));
|
||||
return divider;
|
||||
};
|
||||
|
||||
vm.clear = () => {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<div class="input-group">
|
||||
<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-click="vm.search()">
|
||||
<i class="fa fa-search"></i>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.at-Panel {
|
||||
margin: @at-space-6x 0 0 0;
|
||||
padding: @at-space-6x;
|
||||
border-color: @at-gray-dark;
|
||||
margin: @at-margin-panel 0 0 0;
|
||||
padding: @at-padding-panel;
|
||||
border-color: @at-color-panel-border;
|
||||
}
|
||||
|
||||
.at-Panel-heading {
|
||||
@ -20,6 +20,6 @@
|
||||
}
|
||||
|
||||
.at-Panel-headingTitle {
|
||||
.at-mixin-Heading(@at-font-size-3x);
|
||||
.at-mixin-Heading(@at-font-size-panel-heading);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.at-Popover {
|
||||
padding: 0 0 0 @at-space-3x;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.at-Popover--inline {
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
.at-Popover-icon {
|
||||
.at-mixin-ButtonIcon();
|
||||
font-size: @at-font-size-4x;
|
||||
font-size: @at-font-size-icon;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@ -17,35 +17,35 @@
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
color: @at-white;
|
||||
background-color: @at-gray-dark-4x;
|
||||
max-width: @at-popover-width;
|
||||
padding: @at-space-4x;
|
||||
background-color: @at-color-body-background-dark;
|
||||
max-width: @at-popover-maxwidth;
|
||||
padding: @at-padding-popover;
|
||||
height: auto;
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
margin: 0 0 0 @at-space-6x;
|
||||
margin: 0 0 0 18px;
|
||||
border-radius: @at-border-radius;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0, 0.2);
|
||||
transition: opacity .15s linear;
|
||||
font-weight: @at-font-weight
|
||||
font-weight: @at-font-weight-body;
|
||||
}
|
||||
|
||||
.at-Popover-arrow {
|
||||
color: @at-gray-dark-4x;
|
||||
color: @at-color-body-background-dark;
|
||||
position: fixed;
|
||||
z-index: 1999;
|
||||
padding: 0;
|
||||
margin: @at-space-4x 0 0 @at-space;
|
||||
margin: 8px 0 0 3px;
|
||||
}
|
||||
|
||||
.at-Popover-title {
|
||||
.at-mixin-Heading(@at-font-size);
|
||||
color: @at-white;
|
||||
margin-bottom: @at-space-4x;
|
||||
.at-mixin-Heading(@at-font-size-body);
|
||||
color: @at-color-body-text-dark;
|
||||
margin-bottom: @at-margin-popover;
|
||||
}
|
||||
|
||||
.at-Popover-text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: @at-font-size;
|
||||
font-size: @at-font-size-body;
|
||||
}
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
.at-TabGroup {
|
||||
margin-top: @at-space-6x;
|
||||
margin-top: @at-margin-panel;
|
||||
}
|
||||
|
||||
.at-Tab {
|
||||
margin: 0 @at-space-5x 0 0;
|
||||
font-size: @at-font-size;
|
||||
margin: 0 @at-margin-item-column 0 0;
|
||||
font-size: @at-font-size-body;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.at-Tab--active {
|
||||
&, &:hover, &:active, &:focus {
|
||||
color: @at-white;
|
||||
background-color: @at-gray-dark-3x;
|
||||
border-color: @at-gray-dark-3x;
|
||||
color: @at-color-tab-text-default-active;
|
||||
background-color: @at-color-tab-default-active;
|
||||
border-color: @at-color-tab-border-default-active;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.at-Tab--disabled {
|
||||
&, &:hover, &:active, &:focus {
|
||||
background-color: @at-white;
|
||||
color: @at-gray-dark-2x;
|
||||
border-color: @at-gray-dark-2x;
|
||||
background-color: @at-color-tab-default-disabled;
|
||||
color: @at-color-tab-text-default-disabled;
|
||||
border-color: @at-color-tab-border-default-disabled;
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -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-class="{ 'at-Tab--active': state._active, 'at-Tab--disabled': state._disabled }"
|
||||
ng-click="vm.go()">
|
||||
|
||||
67
awx/ui/client/lib/theme/_base-variables.less
Normal file
67
awx/ui/client/lib/theme/_base-variables.less
Normal 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;
|
||||
|
||||
@ -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
128
awx/ui/client/lib/theme/_contextual-variables.less
Normal 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
41
awx/ui/client/lib/theme/_global.less
Normal 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;
|
||||
}
|
||||
@ -11,9 +11,9 @@
|
||||
}
|
||||
|
||||
.at-mixin-Heading (@size) {
|
||||
color: @at-gray-dark-4x;
|
||||
color: @at-color-body-text;
|
||||
font-size: @size;
|
||||
font-weight: @at-font-weight-2x;
|
||||
font-weight: @at-font-weight-heading;
|
||||
line-height: @at-line-height-short;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
@ -21,12 +21,13 @@
|
||||
}
|
||||
|
||||
.at-mixin-Button () {
|
||||
height: @at-input-height;
|
||||
padding: @at-space-2x @at-space-4x;
|
||||
font-size: @at-font-size;
|
||||
height: @at-height-input;
|
||||
padding: @at-padding-button-vertical @at-padding-button-horizontal;
|
||||
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;
|
||||
|
||||
&, &:hover, &:focus {
|
||||
@ -42,21 +43,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.at-mixin-ButtonHollow (@color, @accent) {
|
||||
background-color: @at-white;
|
||||
color: @@color;
|
||||
border-color: @@color;
|
||||
.at-mixin-ButtonHollow (@bg, @border, @text) {
|
||||
@hover: '@{bg}-hover';
|
||||
|
||||
background-color: @@bg;
|
||||
color: @@text;
|
||||
border-color: @@border;
|
||||
|
||||
&:hover, &:active {
|
||||
color: @@color;
|
||||
background-color: @at-white--hover;
|
||||
color: @@text;
|
||||
background-color: @@hover;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: @at-white;
|
||||
background-color: @@accent;
|
||||
border-color: @@accent;
|
||||
color: @@text;
|
||||
background-color: @@hover;
|
||||
border-color: @@border;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -67,14 +70,14 @@
|
||||
|
||||
.at-mixin-ButtonIcon () {
|
||||
line-height: @at-line-height-short;
|
||||
color: @at-gray-dark-2x;
|
||||
color: @at-color-icon;
|
||||
|
||||
& > i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > i:hover {
|
||||
color: @at-gray-dark-3x;
|
||||
color: @at-color-icon-hover
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// App-wide styles
|
||||
@import '_variables';
|
||||
@import '_base-variables';
|
||||
@import '_contextual-variables';
|
||||
@import '_mixins';
|
||||
@import '_utility';
|
||||
@import '_common';
|
||||
@import '_global';
|
||||
|
||||
// Aggregated component and feature specific styles
|
||||
@import '../components/_index';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user