Perbaikan Sementara

Author: teguhzundi

dist/it-framework-all.js

@@ -2591,7 +2591,7 @@ IT.Toolbar = class extends IT.Component {
 },settings);
 me.id = me.settings.id||IT.Utils.id();
 me.content = $(`
-<div id="${me.id}" class="it-toolbar toolbar-${me.settings.position} clearfix">
+<div id="${me.id}" class="it-toolbar toolbar-${me.settings.position}">
 <ul class="it-toolbar-left"></ul>
 <ul class="it-toolbar-right"></ul>
 </div>

dist/it-framework.min.css

@@ -9,12 +9,15 @@ $view_sm: 768px;
 $view_md: 992px;
 $view_lg: 1200px;
 
+$title_height: 32px;
+$title_padding: 0 10px;
+
 // Form 
 $form_space_padding: 15px 15px 0px;
 $form_space_items: 15px;
 $label_width_default: 100px;
+
 // Input
-$input_height_default: 25px;
 $input_border_color: #ccc;
 $input_border_focus_color: #66AFE9;
 $input_border_invalid_color: red;
@@ -23,19 +26,22 @@ $label_width_default: 100px;
 $input_readonly_bg_color: #FFFADB;
 $input_readonly_border_color: #F7FC71;
 $input_width_default: 200px;
-$input_height_default: 25px;
+$input_height_default: 30px;
+$input_padding: 0 10px;
+
 // Select 
-$select_height_default: 25px;
+$select_height_default: 30px;
+
 // CheckBox
 $checkbox_width_default: 21px;
 $checkbox_height_default: 21px;
 $checkbox_label_fontsize: 15px;
 
 // Toolbar
-$toolbar_height_default : 35px;
-$toolbar_input_height: 25px;
-$toolbar_select_height: 25px;
-$toolbar_button_height: 25px;
+$toolbar_input_height: 30px;
+$toolbar_select_height: 30px;
+$toolbar_button_height: 30px;
+$toolbar_padding: 6px 0;
 
 // MessageBox
 $state_primary_color: #4BC0F9;
@@ -50,7 +56,7 @@ $state_warning_dark_color: #C99F01;
 // Button
 $button_height_default: 30px;
 $button_text_color: #000;
-$button_text_size: 11px;
+$button_text_size: 13px;
 $button_border_color: #999;
 $button_border: 1px solid $button_border_color;
 $button_background_color: #fff;

dist/it-framework.min.js

@@ -5,7 +5,7 @@
 border-radius: $button_rounded_size;
 color: $button_text_color;
 cursor: pointer;
-font-family: Aller;
+font-family: Roboto;
 font-size: $button_text_size;
 display: inline-block;
 padding: $button_padding;

src/sass/_variable.scss

@@ -7,7 +7,7 @@
 @include justify-content(center);
 @include align-items(center);
 @include prefix(backface-visibility, hidden);
-@include transition(all .3s);
+@include transition(all 250ms);
 
 &.dialog-show {
 visibility: visible;
@@ -24,7 +24,7 @@
 @include prefix(border-radius, 3px);
 @include prefix(box-shadow, 0 0 5px rgba(0, 0, 0, .3));
 @include prefix(transform, scale(.7));
-@include transition(all .3s);
+@include transition(all 250ms);
 @include flexbox();
 @include flex-direction(column);
 
@@ -34,12 +34,7 @@
 }
 
 >.it-title {
-background: #eee;
-padding: 13px;
-font-family: Roboto;
-font-weight: bold;
 @include prefix(border-radius, 0 0 0 0);
-@include prefix(box-shadow, none);
 }
 }
 

src/sass/components/_button.scss

@@ -47,7 +47,7 @@
 }
 
 &-input {
-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+box-shadow: inset 0 2px 3px rgba($color: #ccc, $alpha: .2);
 font-family: Roboto;
 line-height: $input_height_default;
 height: $input_height_default;
@@ -107,7 +107,7 @@
 &-input,
 &-item {
  border: 1px solid $input_border_color;
-padding: 0 5px;
+padding: $input_padding;
 }
 
 &-item {
@@ -121,7 +121,7 @@
 &-input,
 &-item {
  border: 1px solid $input_border_color;
-padding: 0 5px;
+padding: $input_padding;
 height: $input_height_default;
 line-height: $input_height_default;
 }
@@ -134,4 +134,11 @@
 border-left: none;
 }
 }
+
+&-input {
+&-label {
+margin: 0;
+line-height: 1.6em;
+}
+}
 }

src/sass/components/_dialog.scss

@@ -1,12 +1,17 @@
 .it {
 &-title {
-@include gradient($base_color, $base_color_dark);
-padding: 7px;
-color: #333;
-font-family: Aller;
+padding: $title_padding;
+height: $title_height;
+line-height: $title_height;
+font-weight: 500;
+font-size: 14px;
+background: #eee;
+text-transform: uppercase;
+border-radius: 3px;
 
 .fa {
 margin-right: 8px;
+width: 16px;
 }
 }
 }

src/sass/components/_edit.scss

@@ -1,31 +1,35 @@
 .it {
 &-toolbar {
-white-space: nowrap;
 position: relative;
-padding: 3px;
-@include gradient($base_color, $base_color_dark);
+background: #fff;
 @include flexbox();
 @include align-items(center);
-border-bottom: 1px solid #eee;
+padding: $toolbar_padding;
 
 &-left, 
 &-right {
 list-style: none;
-@include resetMP();
-@include flexbox();
-@include align-items(center);
+margin: 0;
+padding-left: 0;
+display: flex;
+align-items: center;
+}
 
+&-left {
+margin-right: auto;
+
 > li {
-display: inline;
 margin-right: 4px;
 }
 }
 
-&-left {
-@include flex(1);
-}
+&-right {
+margin-left: auto;
 
-&-right {}
+> li {
+margin-left: 4px;
+}
+}
 
 // Textbox, Select Component
 .it-edit {
@@ -50,12 +54,12 @@
 
 &:not([class*="btn-"]) {
 border-color: transparent;
-background: transparent;
+background: #f8f8f8;
 @include transition(transform .2s);
 
 &:hover {
 @include gradient($base_color, $base_color_dark);
-border-color: #ddd;
+border-color: #e4e4e4;
 }
 }
 }