Commit 65cd424d authored by Matt Vanderpol's avatar Matt Vanderpol

Apply additional styling from replace page

parent 00d31b82
......@@ -19,44 +19,44 @@ extra_js:
.row
.col-md-10.col-md-offset-1
.roi-calculator-container.js-roi-calculator.u-margin-top-lg
.row
.col-md-3
.row.header-row
.col-md-4
.brand-title.text-center
Category
.col-md-4
.col-md-3
.brand-title.text-center
GitLab
= partial "includes/logos/wm_web.svg"
.col-md-5
.brand-title.text-center
Your toolchain
.row
.col-md-3
.col-md-4
.col-md-5
%span#js-roi-calculator-total
Total
-# .row
-# .col-md-4
-# .col-md-3
-# .col-md-5
-# %span#js-roi-calculator-total
-# Total
- data.categories.each do |category_key, category|
- next unless category.roi
.row
.col-md-3
.row.data-row
.col-md-4.data-col
= category.name
.col-md-4
Included
.col-md-5
.dropdown.level.js-competitor-dropdown
%button.dropdown-menu-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
.dropdown-title
%i.fa.fa-chevron-down
%ul.dropdown-menu.dropdown-scroll
- data.features.competitors.each do |competitor_key, competitor|
- next if competitor_key[0..6] == 'gitlab_'
- next unless competitor.category && competitor.category.include?(category_key)
%li
= competitor.name
.col-md-3.data-col
.included-group
= partial "includes/icons/checkmark.svg"
Included
.col-md-5.data-col
.toolchain-group
.dropdown.level.js-competitor-dropdown
%button.dropdown-menu-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
.dropdown-title
%i.fa.fa-chevron-down
%ul.dropdown-menu.dropdown-scroll
- data.features.competitors.each do |competitor_key, competitor|
- next if competitor_key[0..6] == 'gitlab_'
- next unless competitor.category && competitor.category.include?(category_key)
%li
= competitor.name
.input-group
%span.input-group-addon $
%input.form-control.js-roi-calculator-input{ type: "number", name: "#{category_key}_cost" }
%span.input-group-addon /mo
%input.js-roi-calculator-input{ type: "number", name: "#{category_key}_cost" }
@import "variables";
@import "vendor/bootstrap/bootstrap/variables";
@import "vendor/bootstrap/bootstrap/mixins";
@import "vendor/bootstrap/bootstrap/input-groups";
@import "utility-classes";
@import "dropdowns";
$lt-border-style: 1px solid $color-gray-extra-light;
.roi-calculator-container {
margin-right: -15px;
margin-left: -15px;
padding-right: 15px;
padding-left: 15px;
box-shadow: 0 2px 4px $color-transparent-alt;
border-radius: $border-radius-large;
background: $color-white;
tbody td,
tbody th {
vertical-align: middle;
.row {
display: flex;
}
[class^=col-md-] {
padding: 0;
border-right: $lt-border-style;
}
.header-row + .data-row > .data-col {
padding-top: 15px;
}
.data-row > .data-col {
display: flex;
align-items: center;
padding: 7px 15px 8px;
}
tbody > tr:nth-of-type(odd) {
background-color: $color-gray-extra-light-alt;
.data-row:last-of-type > .data-col {
padding-bottom: 15px;
}
.brand-title {
height: 60px;
padding: 10px 0;
border-bottom: $lt-border-style;
}
.included-group {
display: flex;
svg {
width: 25px;
height: 25px;
margin-right: 10px;
fill: $point-title-color;
}
}
.toolchain-group {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px;
border-radius: 3px;
background: $color-gray-extra-light-alt;
}
.dropdown {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment