Skip to content

Refactor management styles for less specificity. #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tylersmalley merged 1 commit into from
Jun 10, 2016
Merged

Refactor management styles for less specificity. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/plugins/kibana/public/management/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
ng-class="{ 'management-section-info-expanded': section.showInfo }"
class="col-xs-12 management-section management-section-{{::section.id}}">

<div class="panel panel-product">
<div class="panel panel-product management-panel-product">
<div class="panel-heading panel-heading-{{::section.id}}">
{{::section.display}}

<i
class="fa fa-info-circle pull-right"
class="fa fa-info-circle pull-right panel-heading-icon"
ng-click="section.showInfo = !!!section.showInfo"
ng-if="section.info">
</i>
Expand All @@ -28,7 +28,7 @@
class="col-xs-4 col-md-3"
ng-repeat="item in section.items.inOrder">

<a kbn-href="{{::item.url}}">
<a class="management-link" kbn-href="{{::item.url}}">
{{::item.display}}
</a>
</li>
Expand Down
49 changes: 26 additions & 23 deletions src/plugins/kibana/public/management/styles/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,31 @@ kbn-management-app {

kbn-management-landing {
padding: 5px;
}

.management-panel-product {
Copy link
Copy Markdown
Author

@cjcenizal cjcenizal Jun 8, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By un-nesting these selectors we pave the way for refactoring them into reusable components in the (near?) future. Un-nesting them reduces specificity and makes it easier to move them around while being confident we're not breaking anything.

I created a new class name to enable us to un-nest the selector. I'm not entirely sure how panel-product is intended to be used throughout the app, though, so this may not be the best decision... it's something I would like to ask you about.

margin-bottom: 10px;

.panel-body {
Copy link
Copy Markdown
Author

@cjcenizal cjcenizal Jun 8, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case I think it makes sense to let panel-body remain nested (for now) since it's closely coupled with the idea of the management-panel-product.

padding-bottom: 30px;
position: relative;
}
}

.management-section {
padding-left: 5px;
padding-right: 5px;
}
Copy link
Copy Markdown
Author

@cjcenizal cjcenizal Jun 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created the panel-heading-icon class to avoid having this high-specificity child selector. Now these styles become more readable because the selector has a meaningful name, and also more flexible because we can apply it to a div or span should we decide to change up our icon system.


.management-link {
Copy link
Copy Markdown
Author

@cjcenizal cjcenizal Jun 9, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created this new class so we can scope the typography-related styles to the link text itself. These styles previously belonged to panel-body.

font-size: 17px;
line-height: 32px;
}

.panel-heading-icon {
font-size: 0.9em;
padding: 5px;
}

.product-overview {
color: @kibanaGray2;
Expand All @@ -55,18 +80,8 @@ kbn-management-landing {
position: absolute;
}

.panel-heading i {
font-size: 0.9em;
padding: 5px;
}

.management-section {
padding-left: 5px;
padding-right: 5px;
}

.management-section-info-expanded {
.panel-heading i {
.panel-heading-icon {
color: @black;
}

Expand All @@ -75,18 +90,6 @@ kbn-management-landing {
}
}

.panel-product {
margin-bottom: 10px;

.panel-body {
padding-bottom: 30px;
font-size: 17px;
line-height: 32px;
position: relative;
}
}
}

kbn-management-objects {
form {
margin-bottom: @line-height-computed;
Expand Down