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-ansibleVersion,
.About-cowsay--code { .About-cowsayCode {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
} }
.About-ansibleVersion { .About-cowsayContainer {
color: @default-data-txt;
}
.About-cowsay--container{
width: 340px; width: 340px;
margin: 0 auto; margin: 0 auto;
} }
.About-cowsay--code{ .About-cowsayCode {
background-color: @default-bg; background-color: @default-bg;
padding-left: 30px; padding-left: 30px;
border-style: none; border-style: none;
max-width: 340px; max-width: 340px;
padding-left: 30px; padding-left: 30px;
} }
.About .modal-header{ .About-modalHeader {
border: none; border: none;
padding-bottom: 0px; padding-bottom: 0px;
} }
.About .modal-dialog{ .About-modalDialog {
max-width: 500px; max-width: 500px;
} }
.About .modal-body{
.About-modalBody {
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px;
} }
.About-brand--redhat{ .About-brandImg {
float: left; float: left;
width: 112px; width: 112px;
padding-top: 13px; padding-top: 13px;
} }
.About-brand--ansible{
max-width: 120px;
margin: 0 auto;
}
.About-close { .About-close {
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; right: 15px;
z-index: 10; z-index: 10;
} }
.About p{
.About-modalFooter {
clear: both;
}
.About-footerText {
text-align: right;
color: @default-interface-txt; color: @default-interface-txt;
margin: 0; margin: 0;
font-size: 12px; font-size: 12px;
padding-top: 10px; 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="About modal fade" id="about-modal">
<div class="modal-dialog"> <div class="modal-dialog About-modalDialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header About-modalHeader">
<button data-dismiss="modal" type="button" class="close About-close"> <button data-dismiss="modal" type="button" class="close About-close">
<span class="fa fa-times-circle"></span> <span class="fa fa-times-circle"></span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body About-modalBody">
<div class="About-cowsay--container"> <div class="About-cowsayContainer">
<!-- Don't indent this properly, you'll break the cow --> <!-- Don't indent this properly, you'll break the cow -->
<pre class="About-cowsay--code"> <pre class="About-cowsayCode">
_______________ _______________
< Tower {{version}} > < Tower {{version}} >
--------------- ---------------
@@ -20,9 +20,9 @@
|| || || ||
</pre> </pre>
</div> </div>
<div class="About-modal--footer"> <div class="About-modalFooter">
<img class="About-brand--redhat img-responsive" src="/static/assets/tower-logo-login.svg" /> <img class="About-brandImg img-responsive" src="/static/assets/tower-logo-login.svg" />
<p class="text-right"> <p class="About-footerText">
<span class="About-ansibleVersion"> <span class="About-ansibleVersion">
Ansible {{ ansible_version }} Ansible {{ ansible_version }}
</span> <br> </span> <br>