mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 01:57:35 -03:30
Style Audit of Host Event Modal
This commit is contained in:
jaredevantabor
parent
a467d20341
commit
fd54cc7ab3
@ -1,150 +1,150 @@
|
||||
@import "./client/src/shared/branding/colors.less";
|
||||
@import "./client/src/shared/branding/colors.default.less";
|
||||
@import "./client/src/shared/layouts/one-plus-two.less";
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
not supported by any browser */
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.HostEvent .modal-dialog{
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
.HostEvent .CodeMirror{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.HostEvent-controls button.HostEvent-close{
|
||||
color: #FFFFFF;
|
||||
text-transform: uppercase;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
background-color: @default-link;
|
||||
border-color: @default-link;
|
||||
&:hover{
|
||||
background-color: @default-link-hov;
|
||||
border-color: @default-link-hov;
|
||||
}
|
||||
}
|
||||
.HostEvent-body{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.HostEvent-tab {
|
||||
color: @btn-txt;
|
||||
background-color: @btn-bg;
|
||||
font-size: 12px;
|
||||
border: 1px solid @btn-bord;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
transition: background-color 0.2s;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
.noselect;
|
||||
}
|
||||
.HostEvent-tab:hover {
|
||||
color: @btn-txt;
|
||||
background-color: @btn-bg-hov;
|
||||
cursor: pointer;
|
||||
}
|
||||
.HostEvent-tab--selected{
|
||||
color: @btn-txt-sel!important;
|
||||
background-color: @default-icon!important;
|
||||
border-color: @default-icon!important;
|
||||
}
|
||||
.HostEvent-view--container{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.HostEvent .modal-footer{
|
||||
border: 0;
|
||||
margin-top: 0px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.HostEvent-controls{
|
||||
float: right;
|
||||
button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.HostEvent-status--ok{
|
||||
color: @green;
|
||||
}
|
||||
.HostEvent-status--unreachable{
|
||||
color: @unreachable;
|
||||
}
|
||||
.HostEvent-status--changed{
|
||||
color: @changed;
|
||||
}
|
||||
.HostEvent-status--failed{
|
||||
color: @default-err;
|
||||
}
|
||||
.HostEvent-status--skipped{
|
||||
color: @skipped;
|
||||
}
|
||||
.HostEvent-title{
|
||||
color: @default-interface-txt;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
// .HostEvent .modal-body{
|
||||
// max-height: 500px;
|
||||
// overflow-y: auto;
|
||||
// padding: 20px;
|
||||
// @import "./client/src/shared/branding/colors.less";
|
||||
// @import "./client/src/shared/branding/colors.default.less";
|
||||
// @import "./client/src/shared/layouts/one-plus-two.less";
|
||||
//
|
||||
// .noselect {
|
||||
// -webkit-touch-callout: none; /* iOS Safari */
|
||||
// -webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
// -khtml-user-select: none; /* Konqueror */
|
||||
// -moz-user-select: none; /* Firefox */
|
||||
// -ms-user-select: none; /* Internet Explorer/Edge */
|
||||
// user-select: none; /* Non-prefixed version, currently
|
||||
// not supported by any browser */
|
||||
// }
|
||||
//
|
||||
// @media screen and (min-width: 768px){
|
||||
// .HostEvent .modal-dialog{
|
||||
// width: 700px;
|
||||
// }
|
||||
// }
|
||||
// .HostEvent .CodeMirror{
|
||||
// overflow-x: hidden;
|
||||
// }
|
||||
// .HostEvent-controls button.HostEvent-close{
|
||||
// color: #FFFFFF;
|
||||
// text-transform: uppercase;
|
||||
// padding-left: 15px;
|
||||
// padding-right: 15px;
|
||||
// background-color: @default-link;
|
||||
// border-color: @default-link;
|
||||
// &:hover{
|
||||
// background-color: @default-link-hov;
|
||||
// border-color: @default-link-hov;
|
||||
// }
|
||||
// }
|
||||
// .HostEvent-body{
|
||||
// margin-bottom: 10px;
|
||||
// }
|
||||
// .HostEvent-tab {
|
||||
// color: @btn-txt;
|
||||
// background-color: @btn-bg;
|
||||
// font-size: 12px;
|
||||
// border: 1px solid @btn-bord;
|
||||
// height: 30px;
|
||||
// border-radius: 5px;
|
||||
// margin-right: 20px;
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
// padding-bottom: 5px;
|
||||
// padding-top: 5px;
|
||||
// transition: background-color 0.2s;
|
||||
// text-transform: uppercase;
|
||||
// text-align: center;
|
||||
// white-space: nowrap;
|
||||
// .noselect;
|
||||
// }
|
||||
// .HostEvent-tab:hover {
|
||||
// color: @btn-txt;
|
||||
// background-color: @btn-bg-hov;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// .HostEvent-tab--selected{
|
||||
// color: @btn-txt-sel!important;
|
||||
// background-color: @default-icon!important;
|
||||
// border-color: @default-icon!important;
|
||||
// }
|
||||
// .HostEvent-view--container{
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// flex-wrap: nowrap;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
// .HostEvent .modal-footer{
|
||||
// border: 0;
|
||||
// margin-top: 0px;
|
||||
// padding-top: 5px;
|
||||
// }
|
||||
// .HostEvent-controls{
|
||||
// float: right;
|
||||
// button {
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
// }
|
||||
// .HostEvent-status--ok{
|
||||
// color: @green;
|
||||
// }
|
||||
// .HostEvent-status--unreachable{
|
||||
// color: @unreachable;
|
||||
// }
|
||||
// .HostEvent-status--changed{
|
||||
// color: @changed;
|
||||
// }
|
||||
// .HostEvent-status--failed{
|
||||
// color: @default-err;
|
||||
// }
|
||||
// .HostEvent-status--skipped{
|
||||
// color: @skipped;
|
||||
// }
|
||||
// .HostEvent-title{
|
||||
// color: @default-interface-txt;
|
||||
// font-weight: 600;
|
||||
// margin-bottom: 8px;
|
||||
// }
|
||||
// // .HostEvent .modal-body{
|
||||
// // max-height: 500px;
|
||||
// // overflow-y: auto;
|
||||
// // padding: 20px;
|
||||
// // }
|
||||
// .HostEvent-nav{
|
||||
// padding-top: 12px;
|
||||
// padding-bottom: 12px;
|
||||
// }
|
||||
// .HostEvent-field{
|
||||
// margin-bottom: 8px;
|
||||
// flex: 0 1 12em;
|
||||
// }
|
||||
// .HostEvent-field--label{
|
||||
// text-transform: uppercase;
|
||||
// flex: 0 1 80px;
|
||||
// max-width: 80px;
|
||||
// font-size: 12px;
|
||||
// word-wrap: break-word;
|
||||
// }
|
||||
// .HostEvent-field{
|
||||
// .OnePlusTwo-left--detailsRow;
|
||||
// }
|
||||
// .HostEvent-field--content{
|
||||
// word-wrap: break-word;
|
||||
// max-width: 13em;
|
||||
// flex: 0 1 13em;
|
||||
// }
|
||||
// .HostEvent-details--left, .HostEvent-details--right{
|
||||
// flex: 1 1 47%;
|
||||
// }
|
||||
// .HostEvent-details--left{
|
||||
// margin-right: 40px;
|
||||
// }
|
||||
// .HostEvent-details--right{
|
||||
// .HostEvent-field--label{
|
||||
// flex: 0 1 25em;
|
||||
// }
|
||||
// .HostEvent-field--content{
|
||||
// max-width: 15em;
|
||||
// flex: 0 1 15em;
|
||||
// align-self: flex-end;
|
||||
// }
|
||||
// }
|
||||
// .HostEvent-button:disabled {
|
||||
// pointer-events: all!important;
|
||||
// }
|
||||
.HostEvent-nav{
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.HostEvent-field{
|
||||
margin-bottom: 8px;
|
||||
flex: 0 1 12em;
|
||||
}
|
||||
.HostEvent-field--label{
|
||||
text-transform: uppercase;
|
||||
flex: 0 1 80px;
|
||||
max-width: 80px;
|
||||
font-size: 12px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.HostEvent-field{
|
||||
.OnePlusTwo-left--detailsRow;
|
||||
}
|
||||
.HostEvent-field--content{
|
||||
word-wrap: break-word;
|
||||
max-width: 13em;
|
||||
flex: 0 1 13em;
|
||||
}
|
||||
.HostEvent-details--left, .HostEvent-details--right{
|
||||
flex: 1 1 47%;
|
||||
}
|
||||
.HostEvent-details--left{
|
||||
margin-right: 40px;
|
||||
}
|
||||
.HostEvent-details--right{
|
||||
.HostEvent-field--label{
|
||||
flex: 0 1 25em;
|
||||
}
|
||||
.HostEvent-field--content{
|
||||
max-width: 15em;
|
||||
flex: 0 1 15em;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
.HostEvent-button:disabled {
|
||||
pointer-events: all!important;
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
<!-- controls -->
|
||||
<div class="HostEvent-controls">
|
||||
<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close HostEvent-button" ng-show="true" >Close</button>
|
||||
<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,20 +20,14 @@
|
||||
.HostEvent .CodeMirror{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.HostEvent-controls button.HostEvent-close{
|
||||
color: #FFFFFF;
|
||||
text-transform: uppercase;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
background-color: @default-link;
|
||||
border-color: @default-link;
|
||||
&:hover{
|
||||
background-color: @default-link-hov;
|
||||
border-color: @default-link-hov;
|
||||
}
|
||||
|
||||
.HostEvent-close:hover{
|
||||
color: @btn-txt;
|
||||
background-color: @btn-bg-hov;
|
||||
}
|
||||
|
||||
.HostEvent-body{
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.HostEvent-tab {
|
||||
color: @btn-txt;
|
||||
@ -106,12 +100,12 @@
|
||||
}
|
||||
.HostEvent .modal-body{
|
||||
max-height: 500px;
|
||||
padding: 20px;
|
||||
padding: 0px!important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.HostEvent-nav{
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.HostEvent-field{
|
||||
margin-bottom: 8px;
|
||||
@ -164,10 +158,11 @@
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-style: normal;
|
||||
background-color: @default-no-items-bord;
|
||||
}
|
||||
|
||||
.HostEvent-numberColumnPreload {
|
||||
background-color: @default-no-items-bord;
|
||||
background-color: @default-list-header-bg;
|
||||
height: 198px;
|
||||
border-right: 1px solid #ccc;
|
||||
width: 30px;
|
||||
@ -175,7 +170,7 @@
|
||||
}
|
||||
|
||||
.HostEvent-numberColumn {
|
||||
background-color: @default-no-items-bord;
|
||||
background-color: @default-list-header-bg;
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom-left-radius: 5px;
|
||||
color: #999;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user