SUIT-ify less and fix bottom padding for about modal

This commit is contained in:
John Mitchell 2017-03-06 12:26:20 -05:00 committed by Matthew Jones
parent 205e52cbe8
commit ef87d35901
2 changed files with 46 additions and 44 deletions

View File

@ -3,56 +3,58 @@
.About-ansibleVersion,
.About-cowsay--code {
.About-cowsayCode {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}
.About-ansibleVersion {
color: @default-data-txt;
.About-cowsayContainer {
width: 340px;
margin: 0 auto;
}
.About-cowsayCode {
background-color: @default-bg;
padding-left: 30px;
border-style: none;
max-width: 340px;
padding-left: 30px;
}
.About-modalHeader {
border: none;
padding-bottom: 0px;
}
.About-modalDialog {
max-width: 500px;
}
.About-cowsay--container{
width: 340px;
margin: 0 auto;
.About-modalBody {
padding-top: 0px;
padding-bottom: 0px;
}
.About-cowsay--code{
background-color: @default-bg;
padding-left: 30px;
border-style: none;
max-width: 340px;
padding-left: 30px;
}
.About .modal-header{
border: none;
padding-bottom: 0px;
}
.About .modal-dialog{
max-width: 500px;
}
.About .modal-body{
padding-top: 0px;
}
.About-brand--redhat{
.About-brandImg {
float: left;
width: 112px;
padding-top: 13px;
}
.About-brand--ansible{
max-width: 120px;
margin: 0 auto;
.About-close {
position: absolute;
top: 15px;
right: 15px;
z-index: 10;
}
.About-close{
position: absolute;
top: 15px;
right: 15px;
z-index: 10;
.About-modalFooter {
clear: both;
}
.About p{
color: @default-interface-txt;
.About-footerText {
text-align: right;
color: @default-interface-txt;
margin: 0;
font-size: 12px;
padding-top: 10px;
}
.About-modal--footer {
clear: both;
.About-ansibleVersion {
color: @default-data-txt;
}

View File

@ -1,15 +1,15 @@
<div class="About modal fade" id="about-modal">
<div class="modal-dialog">
<div class="modal-dialog About-modalDialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-header About-modalHeader">
<button data-dismiss="modal" type="button" class="close About-close">
<span class="fa fa-times-circle"></span>
</button>
</div>
<div class="modal-body">
<div class="About-cowsay--container">
<div class="modal-body About-modalBody">
<div class="About-cowsayContainer">
<!-- Don't indent this properly, you'll break the cow -->
<pre class="About-cowsay--code">
<pre class="About-cowsayCode">
_______________
< Tower {{version}} >
---------------
@ -20,9 +20,9 @@
|| ||
</pre>
</div>
<div class="About-modal--footer">
<img class="About-brand--redhat img-responsive" src="/static/assets/tower-logo-login.svg" />
<p class="text-right">
<div class="About-modalFooter">
<img class="About-brandImg img-responsive" src="/static/assets/tower-logo-login.svg" />
<p class="About-footerText">
<span class="About-ansibleVersion">
Ansible {{ ansible_version }}
</span> <br>