public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed border, cleaned up css and fixed class naming

Browse Source
This commit is contained in:
Patrick O'Carroll
2018-09-24 12:49:29 +02:00
parent c1d36f9e48
commit daffa7d067
2 changed files with 21 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/org/partials/orgUsers.html
+4 -4
View File
@@ -8,14 +8,14 @@
</label> </label>
<div ng-if="ctrl.pendingInvites.length" style="margin-left: 1rem"> <div ng-if="ctrl.pendingInvites.length" style="margin-left: 1rem">
<button class="btn toggle-btn-left toggle-btn-left--active" ng-if="!ctrl.showInvites"> <button class="btn toggle-btn active" ng-if="!ctrl.showInvites">
Users Users
</button><button class="btn toggle-btn-right toggle-btn-right--inactive" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true"> </button><button class="btn toggle-btn" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
Pending Invites ({{ctrl.pendingInvites.length}}) Pending Invites ({{ctrl.pendingInvites.length}})
</button> </button>
<button class="btn toggle-btn-left toggle-btn-left--inactive" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false"> <button class="btn toggle-btn" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
Users Users
</button><button class="btn toggle-btn-right toggle-btn-right--active" ng-if="ctrl.showInvites"> </button><button class="btn toggle-btn active" ng-if="ctrl.showInvites">
Pending Invites ({{ctrl.pendingInvites.length}}) Pending Invites ({{ctrl.pendingInvites.length}})
</button> </button>
</div> </div>
public/sass/components/_buttons.scss
+17 -44
View File
@@ -224,51 +224,24 @@ $btn-service-icon-width: 35px;
//Toggle button //Toggle button
.toggle-btn { .toggle-btn {
&-left { background: $input-label-bg;
border-radius: 2px 0 0 2px; color: $text-color-weak;
border-left: 1px solid #dae0e8; box-shadow: $card-shadow;
border-top: 1px solid #dae0e8;
border-bottom: 1px solid #dae0e8;
margin: 0;
box-shadow: $card-shadow;
&--active {
background-color: #fff;
//background-color: $btn-secondary-bg;
//color: #fff;
background-color: lighten($input-label-bg, 5%);
color: $link-color;
&:hover {
cursor: default;
}
}
&--inactive {
//@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
background: $input-label-bg;
color: $text-color-weak;
}
}
&-right {
border-radius: 0 2px 2px 0;
border-right: 1px solid #dae0e8;
border-top: 1px solid #dae0e8;
border-bottom: 1px solid #dae0e8;
margin-left: 0 !important;
box-shadow: $card-shadow;
&--active { &:nth-child(1) {
background-color: #fff; border-radius: 2px 0 0 2px;
//background-color: $btn-secondary-bg; margin: 0;
//color: #FFF; }
background-color: lighten($input-label-bg, 5%); &:nth-child(2) {
color: $link-color; border-radius: 0 2px 2px 0;
&:hover { margin-left: 0 !important;
cursor: default; }
}
} &.active {
&--inactive { background-color: lighten($input-label-bg, 5%);
//@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow); color: $link-color;
background: $input-label-bg; &:hover {
color: $text-color-weak; cursor: default;
} }
} }
} }