IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Theme: Reworking button styling (#16362)

Browse Source 
* added new variables for height in theme, added height to gui button large, replaced add gicon with regular gicon, replaced + with gicon, changed button display to flex

* set fixed height to large button, removed xlarge button and replaced with large button

* removed button-mini and replaced with button-small, set fixed height to default button and button-small

* fixed padding for default and large button, fixed height for navbar button, fixed snapshots

* fixed padding and margin on navbar buttons

* gave special height to login btn-primary

* readded btn-mini class with same styling as btn-small and a deprecated notice

* fixed add panel widget buttons
This commit is contained in:
Patrick O'Carroll 2019-04-08 09:48:15 +02:00 committed by Torkel Ödegaard
parent 9b39dbc2fb
commit 128fb8fa7e
35 changed files with 130 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/grafana-ui/src/components/Button/AbstractButton.tsx
View File

@ -65,35 +65,28 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
background,
fontSize,
iconDistance,
height,
fontWeight = theme.typography.weight.semibold;
switch (size) {
case ButtonSize.ExtraSmall:
padding = `${theme.spacing.xs} ${theme.spacing.sm}`;
fontSize = theme.typography.size.xs;
iconDistance = theme.spacing.xs;
break;
case ButtonSize.Small:
padding = `${theme.spacing.xs} ${theme.spacing.sm}`;
fontSize = theme.typography.size.sm;
iconDistance = theme.spacing.xs;
height = theme.height.sm;
break;
case ButtonSize.Large:
padding = `${theme.spacing.md} ${theme.spacing.lg}`;
fontSize = theme.typography.size.lg;
fontWeight = theme.typography.weight.regular;
iconDistance = theme.spacing.sm;
break;
case ButtonSize.ExtraLarge:
padding = `${theme.spacing.md} ${theme.spacing.lg}`;
fontSize = theme.typography.size.lg;
fontWeight = theme.typography.weight.regular;
iconDistance = theme.spacing.sm;
height = theme.height.lg;
break;
default:
padding = `${theme.spacing.sm} ${theme.spacing.md}`;
iconDistance = theme.spacing.sm;
fontSize = theme.typography.size.base;
height = theme.height.md;
}
switch (variant) {
@ -133,7 +126,8 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
return {
button: css`
label: button;
display: inline-block;
display: flex;
align-items: center;
font-weight: ${fontWeight};
font-size: ${fontSize};
font-family: ${theme.typography.fontFamily.sansSerif};
@ -143,6 +137,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
vertical-align: middle;
cursor: pointer;
border: none;
height: ${height};
border-radius: ${borderRadius};
${background};
@ -161,6 +156,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
icon: css`
label: button-icon;
margin-right: ${iconDistance};
filter: brightness(100);
`,
};
};

2
packages/grafana-ui/src/components/Button/Button.story.tsx
View File

@ -48,7 +48,7 @@ ButtonStories.add('with icon', () => {
Plus: 'fa fa-plus',
User: 'fa fa-user',
Gear: 'fa fa-gear',
Annotation: 'gicon gicon-add-annotation',
Annotation: 'gicon gicon-annotation',
},
'fa fa-plus'
);

10
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
View File

@ -176,6 +176,11 @@ exports[`Render should render with base threshold 1`] = `
"white": "#ffffff",
"yellow": "#ecbb13",
},
"height": Object {
"lg": "48px",
"md": "32px",
"sm": "24px",
},
"name": "Grafana Dark",
"panelPadding": Object {
"horizontal": 16,
@ -334,6 +339,11 @@ exports[`Render should render with base threshold 1`] = `
"white": "#ffffff",
"yellow": "#ecbb13",
},
"height": Object {
"lg": "48px",
"md": "32px",
"sm": "24px",
},
"name": "Grafana Dark",
"panelPadding": Object {
"horizontal": 16,

6
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@ -87,6 +87,12 @@ $container-max-widths: (
$grid-columns: 12 !default;
$grid-gutter-width: ${theme.spacing.gutter} !default;
// Component heights
// -------------------------
$height-sm: ${theme.height.sm};
$height-md: ${theme.height.md};
$height-lg: ${theme.height.lg};
// Typography
// -------------------------

5
packages/grafana-ui/src/themes/default.ts
View File

@ -67,6 +67,11 @@ const theme: GrafanaThemeCommons = {
sm: '1px',
},
},
height: {
sm: '24px',
md: '32px',
lg: '48px',
},
panelPadding: {
horizontal: 16,
vertical: 8,

5
packages/grafana-ui/src/types/theme.ts
View File

@ -72,6 +72,11 @@ export interface GrafanaThemeCommons {
sm: string;
};
};
height: {
sm: string;
md: string;
lg: string;
};
panelPadding: {
horizontal: number;
vertical: number;

6
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
View File

@ -1,5 +1,5 @@
import React, { useContext } from 'react';
import { CallToActionCard, ExtraLargeLinkButton, ThemeContext } from '@grafana/ui';
import { CallToActionCard, LargeLinkButton, ThemeContext } from '@grafana/ui';
import { css } from 'emotion';
export interface Props {
model: any;
@ -37,9 +37,9 @@ const EmptyListCTA: React.FunctionComponent<Props> = props => {
: '';
const ctaElement = (
<ExtraLargeLinkButton onClick={onClick} href={buttonLink} icon={buttonIcon} className={ctaElementClassName}>
<LargeLinkButton onClick={onClick} href={buttonLink} icon={buttonIcon} className={ctaElementClassName}>
{buttonTitle}
</ExtraLargeLinkButton>
</LargeLinkButton>
);
return <CallToActionCard message={title} footer={footer} callToActionElement={ctaElement} theme={theme} />;

4
public/app/core/components/org_switcher.ts
View File

@ -29,10 +29,10 @@ const template = `
<td>{{org.name}}</td>
<td>{{org.role}}</td>
<td class="text-right">
<span class="btn btn-primary btn-mini" ng-show="org.orgId === ctrl.currentOrgId">
<span class="btn btn-primary btn-small" ng-show="org.orgId === ctrl.currentOrgId">
Current
</span>
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== ctrl.currentOrgId">
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-small" ng-show="org.orgId !== ctrl.currentOrgId">
Switch to
</a>
</td>

2
public/app/features/admin/partials/edit_org.html
View File

@ -35,7 +35,7 @@
</div>
</td>
<td style="width: 1%">
<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-mini">
<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

2
public/app/features/admin/partials/edit_user.html
View File

@ -91,7 +91,7 @@
</div>
</td>
<td style="width: 1%">
<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

2
public/app/features/alerting/StateHistory.tsx
View File

@ -72,7 +72,7 @@ class StateHistory extends PureComponent<Props, State> {
{stateHistoryItems.length > 0 && (
<div className="p-b-1">
<span className="muted">Last 50 state changes</span>
<button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
<button className="btn btn-small btn-danger pull-right" onClick={this.clearHistory}>
<i className="fa fa-trash" /> {` Clear history`}
</button>
</div>

2
public/app/features/alerting/partials/notifications_list.html
View File

@ -47,7 +47,7 @@
<div ng-if="ctrl.notifications.length === 0">
<empty-list-cta model="{
title: 'There are no notification channels defined yet',
buttonIcon: 'gicon gicon-add-alert-notification-channel',
buttonIcon: 'gicon gicon-alert-notification-channel',
buttonLink: 'alerting/notification/new',
buttonTitle: 'Add channel',
proTip: 'You can include images in your alert notifications.',

6
public/app/features/annotations/partials/editor.html
View File

@ -36,7 +36,7 @@
<td style="width: 1%"><i ng-click="ctrl.move($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="ctrl.move($index,1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%">
<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
<i class="fa fa-remove"></i>
</a>
</td>
@ -48,8 +48,8 @@
<div ng-if="ctrl.annotations.length === 1" class="p-t-2">
<div class="empty-list-cta">
<div class="empty-list-cta__title">There are no custom annotation queries added yet</div>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-annotation"></i>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-large btn-primary">
<i class="gicon gicon-annotation"></i>
Add Annotation Query
</a>
<div class="grafana-info-box">

2
public/app/features/api-keys/ApiKeysPage.tsx
View File

@ -113,7 +113,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
<EmptyListCTA
model={{
title: "You haven't added any API Keys yet.",
buttonIcon: 'fa fa-plus',
buttonIcon: 'gicon gicon-apikeys',
buttonLink: '#',
onClick: this.onToggleAdding,
buttonTitle: ' New API Key',

2
public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
View File

@ -38,7 +38,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
<EmptyListCTA
model={
Object {
"buttonIcon": "fa fa-plus",
"buttonIcon": "gicon gicon-apikeys",
"buttonLink": "#",
"buttonTitle": " New API Key",
"onClick": [Function],

4
public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
View File

@ -37,7 +37,9 @@
.add-panel-widget__link {
margin: 0 $space-sm;
width: 154px;
width: 160px;
height: 88px !important;
flex-direction: column !important;
}
.add-panel-widget__icon {

6
public/app/features/dashboard/components/DashLinks/editor.html
View File

@ -10,8 +10,8 @@
<div class="empty-list-cta__title">
There are no dashboard links added yet
</div>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-link"></i>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-large btn-primary">
<i class="gicon gicon-link"></i>
Add Dashboard Link
</a>
<div class="grafana-info-box">
@ -61,7 +61,7 @@
<i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
</td>
<td style="width: 1%">
<a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
<a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
<i class="fa fa-remove"></i>
</a>
</td>

2
public/app/features/datasources/DataSourcesListItem.tsx
View File

@ -21,7 +21,7 @@ export class DataSourcesListItem extends PureComponent<Props> {
<div className="card-item-details">
<div className="card-item-name">
{dataSource.name}
{dataSource.isDefault && <span className="btn btn-secondary btn-mini card-item-label">default</span>}
{dataSource.isDefault && <span className="btn btn-secondary btn-small card-item-label">default</span>}
</div>
<div className="card-item-sub-name">{dataSource.url}</div>
</div>

2
public/app/features/datasources/DataSourcesListPage.tsx
View File

@ -39,7 +39,7 @@ export interface Props {
const emptyListModel = {
title: 'There are no data sources defined yet',
buttonIcon: 'gicon gicon-add-datasources',
buttonIcon: 'gicon gicon-datasources',
buttonLink: 'datasources/new',
buttonTitle: 'Add data source',
proTip: 'You can also define data sources through configuration files.',

6
public/app/features/explore/NoDataSourceCallToAction.tsx
View File

@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import { css } from 'emotion';
import { ThemeContext, ExtraLargeLinkButton, CallToActionCard } from '@grafana/ui';
import { ThemeContext, LargeLinkButton, CallToActionCard } from '@grafana/ui';
export const NoDataSourceCallToAction = () => {
const theme = useContext(ThemeContext);
@ -22,9 +22,9 @@ export const NoDataSourceCallToAction = () => {
);
const ctaElement = (
<ExtraLargeLinkButton href="/datasources/new" icon="gicon gicon-add-datasources">
<LargeLinkButton href="/datasources/new" icon="gicon gicon-datasources">
Add data source
</ExtraLargeLinkButton>
</LargeLinkButton>
);
const cardClassName = css`

4
public/app/features/manage-dashboards/partials/snapshot_list.html
View File

@ -20,13 +20,13 @@
<span class="query-keyword" ng-if="snapshot.external">External</span>
</td>
<td class="text-center">
<a href="{{snapshot.url}}" class="btn btn-inverse btn-mini">
<a href="{{snapshot.url}}" class="btn btn-inverse btn-small">
<i class="fa fa-eye"></i>
View
</a>
</td>
<td class="text-right">
<a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
<a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

10
public/app/features/playlist/partials/playlist.html
View File

@ -34,13 +34,13 @@
</td>
<td class="selected-playlistitem-settings">
<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<button class="btn btn-inverse btn-small" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<i class="fa fa-arrow-up"></i>
</button>
<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
<button class="btn btn-inverse btn-small" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
<i class="fa fa-arrow-down"></i>
</button>
<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
<button class="btn btn-inverse btn-small" ng-click="ctrl.removePlaylistItem(playlistItem)">
<i class="fa fa-remove"></i>
</button>
</td>
@ -64,7 +64,7 @@
<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<i class="fa fa-plus"></i>
Add to playlist
</button>
@ -82,7 +82,7 @@
</a>
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
<i class="fa fa-plus"></i>
Add to playlist
</button>

4
public/app/features/profile/partials/profile.html
View File

@ -63,10 +63,10 @@
<td>{{org.name}}</td>
<td>{{org.role}}</td>
<td class="text-right">
<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
<span class="btn btn-primary btn-small" ng-show="org.orgId === contextSrv.user.orgId">
Current
</span>
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-small" ng-show="org.orgId !== contextSrv.user.orgId">
Select
</a>
</td>

6
public/app/features/teams/TeamGroupSync.tsx
View File

@ -63,7 +63,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
<tr key={group.groupId}>
<td>{group.groupId}</td>
<td style={{ width: '1%' }}>
<a className="btn btn-danger btn-mini" onClick={() => this.onRemoveGroup(group)}>
<a className="btn btn-danger btn-small" onClick={() => this.onRemoveGroup(group)}>
<i className="fa fa-remove" />
</a>
</td>
@ -121,8 +121,8 @@ export class TeamGroupSync extends PureComponent<Props, State> {
{groups.length === 0 && !isAdding && (
<div className="empty-list-cta">
<div className="empty-list-cta__title">There are no external groups to sync with</div>
<button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
<i className="gicon gicon-add-team" />
<button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-large btn-primary">
<i className="gicon gicon-team" />
Add Group
</button>
<div className="empty-list-cta__pro-tip">

26
public/app/features/teams/TeamList.tsx
View File

@ -73,20 +73,18 @@ export class TeamList extends PureComponent<Props, any> {
renderEmptyList() {
return (
<div className="page-container page-body">
<EmptyListCTA
model={{
title: "You haven't created any teams yet.",
buttonIcon: 'fa fa-plus',
buttonLink: 'org/teams/new',
buttonTitle: ' New team',
proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
proTipLink: '',
proTipLinkTitle: '',
proTipTarget: '_blank',
}}
/>
</div>
<EmptyListCTA
model={{
title: "You haven't created any teams yet.",
buttonIcon: 'gicon gicon-team',
buttonLink: 'org/teams/new',
buttonTitle: ' New team',
proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
proTipLink: '',
proTipLinkTitle: '',
proTipTarget: '_blank',
}}
/>
);
}

10
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
View File

@ -81,11 +81,11 @@ exports[`Render should render component 1`] = `
There are no external groups to sync with
</div>
<button
className="empty-list-cta__button btn btn-xlarge btn-primary"
className="empty-list-cta__button btn btn-large btn-primary"
onClick={[Function]}
>
<i
className="gicon gicon-add-team"
className="gicon gicon-team"
/>
Add Group
</button>
@ -225,7 +225,7 @@ exports[`Render should render groups table 1`] = `
}
>
<a
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@ -248,7 +248,7 @@ exports[`Render should render groups table 1`] = `
}
>
<a
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@ -271,7 +271,7 @@ exports[`Render should render groups table 1`] = `
}
>
<a
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i

4
public/app/features/teams/partials/create_team.html
View File

@ -18,8 +18,8 @@
<input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary width-12">
<i class="fa fa-save"></i> Create
<button type="submit" class="btn btn-primary">
Create
</button>
</div>
</form>

8
public/app/features/templating/partials/editor.html
View File

@ -11,8 +11,8 @@
<div ng-if="variables.length === 0">
<div class="empty-list-cta">
<div class="empty-list-cta__title">There are no variables added yet</div>
<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-variable"></i>
<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-large btn-primary">
<i class="gicon gicon-variable"></i>
Add variable
</a>
<div class="grafana-info-box">
@ -58,12 +58,12 @@
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-small">
Duplicate
</a>
</td>
<td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

4
public/app/features/users/InviteeRow.tsx
View File

@ -27,7 +27,7 @@ class InviteeRow extends PureComponent<Props> {
<td>{invitee.email}</td>
<td>{invitee.name}</td>
<td className="text-right">
<button className="btn btn-inverse btn-mini" onClick={this.copyToClipboard}>
<button className="btn btn-inverse btn-small" onClick={this.copyToClipboard}>
<textarea
readOnly={true}
value={invitee.url}
@ -39,7 +39,7 @@ class InviteeRow extends PureComponent<Props> {
&nbsp;
</td>
<td>
<button className="btn btn-danger btn-mini" onClick={() => revokeInvite(invitee.code)}>
<button className="btn btn-danger btn-small" onClick={() => revokeInvite(invitee.code)}>
<i className="fa fa-remove" />
</button>
</td>

2
public/app/features/users/UsersTable.tsx
View File

@ -52,7 +52,7 @@ const UsersTable: FC<Props> = props => {
</div>
</td>
<td>
<div onClick={() => onRemoveUser(user)} className="btn btn-danger btn-mini">
<div onClick={() => onRemoveUser(user)} className="btn btn-danger btn-small">
<i className="fa fa-remove" />
</div>
</td>

12
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
View File

@ -115,7 +115,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@ -178,7 +178,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@ -241,7 +241,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@ -304,7 +304,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@ -367,7 +367,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@ -430,7 +430,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i

6
public/sass/_variables.generated.scss
View File

@ -90,6 +90,12 @@ $container-max-widths: (
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
// Component heights
// -------------------------
$height-sm: 24px;
$height-md: 32px;
$height-lg: 48px;
// Typography
// -------------------------

32
public/sass/components/_buttons.scss
View File

@ -7,7 +7,9 @@
// Core
.btn {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
font-size: $font-size-base;
@ -15,8 +17,9 @@
vertical-align: middle;
cursor: pointer;
border: none;
height: $height-md;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $border-radius-sm);
@include button-size($btn-padding-y, $space-md, $font-size-base, $border-radius-sm);
&,
&:active,
@ -51,29 +54,28 @@
// Button Sizes
// --------------------------------------------------
// XLarge
.btn-xlarge {
@include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $border-radius-sm);
font-weight: normal;
padding-bottom: $btn-padding-y-xl - 3;
.gicon {
font-size: 31px;
margin-right: $space-md;
}
}
// Large
.btn-large {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $border-radius-sm);
@include button-size($btn-padding-y-lg, $space-lg, $font-size-lg, $border-radius-sm);
font-weight: normal;
height: $height-lg;
.gicon {
//font-size: 31px;
margin-right: $space-sm;
filter: brightness(100);
}
}
.btn-small {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
height: $height-sm;
}
// Deprecated, only used by old plugins
.btn-mini {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $border-radius-sm);
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
height: $height-sm;
}
.btn-link {

5
public/sass/components/_navbar.scss
View File

@ -112,12 +112,11 @@
display: flex;
align-items: center;
font-weight: $btn-font-weight;
padding: 6px 11px;
padding: 6px $space-sm;
line-height: 16px;
height: 30px;
color: $text-muted;
border: 1px solid $navbar-button-border;
margin-left: 3px;
margin-left: $space-xs;
white-space: nowrap;
.gicon {

1
public/sass/pages/_login.scss
View File

@ -20,6 +20,7 @@ $login-border: #8daac5;
& .btn-primary {
@include buttonBackground(#ff6600, #bc3e06);
height: 40px;
}
}