| Current Path : /var/www/quickscrum.com/Old-Guide/wp-content/plugins/pods/ui/css/less/ |
| Current File : /var/www/quickscrum.com/Old-Guide/wp-content/plugins/pods/ui/css/less/pods-wizard.less |
// Import less mixins
@import "mixins.less";
// Todo: finish converting font colors to variables
@green-dark: #6f9472;
@green-light: #e6f9e6;
@green-mid: #caebcc;
@grey-border: #dfdfdf;
@width: 780px;
// Upgrade wizard specific styles
#pods-wizard-box {
width: @width + 2;
color: #555555;
margin: 20px;
&.pods-wizard-steps-1 #pods-wizard-heading ul li {
width: @width;
}
&.pods-wizard-steps-2 #pods-wizard-heading ul li {
width: @width / 2;
}
&.pods-wizard-steps-3 #pods-wizard-heading ul li {
width: @width / 3;
}
&.pods-wizard-steps-4 #pods-wizard-heading ul li {
width: @width / 4;
}
&.pods-wizard-steps-5 #pods-wizard-heading ul li {
width: @width / 5;
}
#pods-wizard-heading {
ul {
margin: 0;
padding: 0;
li {
list-style:none;
display: block;
float: left;
height: 30px;
padding-top: 5px;
color: #ababab;
margin-bottom: 0;
font: 18px 'Garamond, Georgia';
position: relative;
border-top: 1px solid @grey-border;
border-bottom: 1px solid @grey-border;
.vertical-gradient(#f9f9f9, #ededed);
i {
display: block;
width: 11px;
height: 35px;
position: absolute;
top: 0;
left: 0;
background: url(../images/arrow_next.png);
}
span {
display: inline-block;
margin: 0 5px 0 20px;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background: #ababab;
color: #f2f2f2;
box-shadow: none;
font-size: 20px;
font-weight: bold;
.multi-border-radius(30px, 30px, 30px, 30px);
}
&.pods-wizard-menu-current {
color: #fff;
border-bottom: 1px solid #6e6e6e;
border-top: 1px solid #808080;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
.vertical-gradient(#808080, #6e6e6e);
span {
text-shadow: none;
background: #fff;
color: #6f6f6f;
.box-shadow(1px, 1px, 2px, 0.2);
}
&+ li > i {
background: url(../images/arrow_current.png);
}
}
&.pods-wizard-menu-complete {
color: @green-dark;
border-bottom: 1px solid #bbddbd;
.vertical-gradient(#d4f4d6, #bbddbd);
&+ li > i {
background: url(../images/arrow_complete.png);
}
&+ li.pods-wizard-menu-complete > i {
background: url(../images/arrow_complete_previous.png);
}
span {
background: @green-dark;
color: @green-mid;
}
em {
display: block;
top: 10px;
right: 5px;
background: url(../images/tick.png) no-repeat right center;
width: 17px;
height: 17px;
position: absolute;
}
&:last-child {
em {
right: 15px;
}
}
}
&:first-child {
i {
background: none;
}
border-left: 1px solid @grey-border;
.multi-border-radius(8px, 0, 0, 0);
}
&:last-child {
border-right: 1px solid @grey-border;
.multi-border-radius(0, 8px, 0, 0);
}
}
}
}
#pods-wizard-main {
clear: both;
overflow: auto;
p {
font-size: 13px;
line-height: 22px;
}
p.padded {
padding: 0 20px 20px;
}
#pods-wizard-choices {
margin: 15px 20px 25px 20px;
}
.pods-advanced-toggle {
display: inline-block;
text-decoration: underline;
padding-left: 15px;
}
.pods-wizard-option-content {
display: none;
.pods-package-import-group {
.pods-field-option-group {
padding-top: 0;
p {
margin-top: 0;
}
}
}
}
.stuffbox {
margin: 15px 15px 0px 15px;
h3 {
font-size: 15px;
font-weight: normal;
line-height: 1;
padding: 7px 10px;
font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
}
.inside {
padding: 0;
div.pods-wizard-content {
h3 {
margin: 1.33em 20px;
font-size: 1.35em;
}
h4 {
margin: 1.33em 20px;
font-size: 1.2em;
}
ul.normal {
margin: 15px 20px;
list-style: circle;
li {
margin: 0 0 8px 30px;
padding-left: 4px;
line-height: 22px;
font-size: 14px;
list-style: circle;
}
}
}
}
}
.pods-wizard-panel {
display: none;
border-left: 1px solid @grey-border;
border-right: 1px solid @grey-border;
padding-bottom: 25px;
&:first-child {
display: block;
}
.button-primary, .button-secondary {
padding: 8px 15px;
border-radius: 14px 14px 14px 14px;
}
.pods-wizard-content {
background: #fff;
&.pods-wizard-grey {
background: #f9f9f9;
}
p {
padding: 20px;
margin-top: 0;
}
}
table {
width: 100%;
th, td {
height: 47px;
}
th {
text-align: left;
background: #f9f9f9;
text-transform: uppercase;
padding-left: 53px;
}
tr {
td {
font-size: 20px;
&.pods-wizard-right {
text-align: right;
}
&.pods-wizard-name {
padding-left: 20px;
em {
color: #777;
font-style: normal;
font-size: 14px;
}
.pods-wizard-info {
float: right;
text-align: right;
font-size: 12px;
padding-right: 15px;
}
}
img {
display: none;
}
}
&.pods-wizard-table-complete td {
background: #e6f9e6;
color: #6f9472;
border-top: 1px solid #fff;
i {
display: inline-block;
width: 17px;
height: 17px;
background: url(../images/tick.png);
}
}
&.pods-wizard-table-warning td {
background: #ffffe0;
border-top: 1px solid #e7dd5f;
border-bottom: 1px solid #e7dd5f;
&:first-child {
border-left: 1px solid #e7dd5f;
}
&:last-child {
border-right: 1px solid #e7dd5f;
}
}
&.pods-wizard-table-error td {
background: #ffebe8;
border-top: 1px solid #cc0000;
border-bottom: 1px solid #cc0000;
&:first-child {
border-left: 1px solid #cc0000;
}
&:last-child {
border-right: 1px solid #cc0000;
}
}
&.pods-wizard-table-active td {
background: #fff4e0;
border-top: 1px solid #fff;
border-bottom: 1px solid #dfdfdf;
color: #eba600;
img {
display: inline;
}
}
&.pods-wizard-table-pending td {
border-top: 1px solid #fff;
border-bottom: 1px solid #dfdfdf;
color: #ababab;
}
}
}
#pods-wizard-options {
text-align: center;
.pods-wizard-option {
width: 290px;
display: inline-block;
vertical-align: top;
&:first-child {
margin-right: 40px;
}
a {
height: 140px;
padding-top: 10px;
display: block;
background: #f9f9f9;
position: relative;
text-decoration: none;
.multi-border-radius(8px, 8px, 8px, 8px);
.box-shadow(0px, 0px, 4px, 0.3);
h2 {
color: #21759B;
font-weight: bold;
font-size: 1.5em;
padding-right: 0;
}
p {
font-style: normal;
font-size: 14px;
color: #555555;
margin: 7px;
line-height: 17px;
}
&:hover {
background: #feffe0;
h2 {
color: #D54E21;
}
}
span {
display: none;
}
&.pods-wizard-option-active {
background: #feffe0;
color: #D54E21;
span {
width: 290px;
height: 30px;
background: #D54E21;
display: block;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
color: #fff;
font: 13px/30px bold Garamond, Georgia;
.multi-border-radius(0, 0, 8px, 8px);
}
}
&:visited {
p {
color: #555555;
}
}
}
p {
font-size: 12px;
line-height: 17px;
font-style: italic;
em {
margin: 0;
padding: 0;
}
}
}
}
}
}
#pods-wizard-actions {
height: 35px;
border: 1px solid @grey-border;
position: relative;
clear: both;
.multi-border-radius(0, 0, 8px, 8px);
.vertical-gradient(#ededed, #f9f9f9);
.button {
display: block;
height: 35px;
width: 110px;
position: absolute;
top: 0;
line-height: 35px;
text-align: center;
font-weight: bold;
font-size: 15px;
padding: 0;
border: none !important;
&.button-primary {
right: 0;
color: #fff;
.vertical-gradient(#278ab8, #22789f);
.multi-border-radius(0, 0, 8px, 0);
&:hover {
background: #22789f;
}
}
&.button-secondary {
left: 0;
color: #7b7b7b;
.vertical-gradient(#dfdfdf, #b2b2b2);
.multi-border-radius(0, 0, 0, 8px);
&:hover {
background: #b2b2b2;
}
}
}
#pods-wizard-finished {
display: none;
height: 35px;
line-height: 35px;
text-align: center;
padding-right: 142px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
.vertical-gradient(#808080, #6e6e6e);
.multi-border-radius(0, 0, 8px, 8px);
}
#pods-wizard-next.finished {
width: 150px;
}
}
&.pods-wizard-hide-first {
#pods-wizard-main {
border-bottom: 1px solid @grey-border;
.multi-border-radius(0, 0, 8px, 8px);
}
#pods-wizard-actions {
display: none;
}
}
}