Small improvmenets on article-bar

Leonardo Merlin
1 parent 5adb8201
Showing 3 changed files with 11 additions and 4 deletions Show diff stats
src/app/components/programa/programa.scss
src/app/partials/programas/programa.html
src/app/partials/programas/programas.scss
@@ -8,6 +8,7 @@ $darken: 15%;
 .program-box {
     cursor: pointer;
     background-color: #fff;
+    margin-top: $program-box-space;
     margin-bottom: $program-box-space;
  
     .contraste & {
@@ -3,20 +3,20 @@
   <div class="article-bar" ng-class="programa.program.categories[0].slug">
     <div class="navbar">
       <div class="navbar-header">
-        <button class="btn btn-link" ng-click="programa.goBack()">
+        <button class="article-bar--item btn btn-link" ng-click="programa.goBack()">
           <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
           <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
           Voltar
         </button>
       </div>
       <div class="navbar-left">
-        <button class="btn btn-link">
+        <button class="article-bar--item btn btn-link">
           <span class="glyphicon glyphicon-refresh"></span>
           <span class="category-name">{{::programa.program.categories[0].name}}</span>
         </button>
       </div>
       <div class="navbar-right">
-        <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="form-control">
+        <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="article-bar--item form-control">
           <option value="">-- Selectione um Tema --</option>
         </select>
       </div>
 .article-bar {
-
+    
     .btn {
         color: #fff;
         font-weight: bold;
     }
+    
+    &--item {
+        margin: 8px 0;
+    }
+
+
  
     @each $category, $color in $categories {
         &.#{$category} {
...	...	@@ -8,6 +8,7 @@ $darken: 15%;
8	8	.program-box {
9	9	cursor: pointer;
10	10	background-color: #fff;
	11	+ margin-top: $program-box-space;
11	12	margin-bottom: $program-box-space;
12	13
13	14	.contraste & {
...	...
...	...	@@ -3,20 +3,20 @@
3	3	<div class="article-bar" ng-class="programa.program.categories[0].slug">
4	4	<div class="navbar">
5	5	<div class="navbar-header">
6		- <button class="btn btn-link" ng-click="programa.goBack()">
	6	+ <button class="article-bar--item btn btn-link" ng-click="programa.goBack()">
7	7	<!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
8	8	<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
9	9	Voltar
10	10	</button>
11	11	</div>
12	12	<div class="navbar-left">
13		- <button class="btn btn-link">
	13	+ <button class="article-bar--item btn btn-link">
14	14	<span class="glyphicon glyphicon-refresh"></span>
15	15	<span class="category-name">{{::programa.program.categories[0].name}}</span>
16	16	</button>
17	17	</div>
18	18	<div class="navbar-right">
19		- <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="form-control">
	19	+ <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="article-bar--item form-control">
20	20	<option value="">-- Selectione um Tema --</option>
21	21	</select>
22	22	</div>
...	...
1	1	.article-bar {
2		-
	2	+
3	3	.btn {
4	4	color: #fff;
5	5	font-weight: bold;
6	6	}
	7	+
	8	+ &--item {
	9	+ margin: 8px 0;
	10	+ }
	11	+
	12	+
7	13
8	14	@each $category, $color in $categories {
9	15	&.#{$category} {
...	...