Skip to content

N
nexpie-grafana-theme
Commit 128fb8fa by Patrick O'Carroll Committed by Torkel Ödegaard
Options

Theme: Reworking button styling (#16362) 

* 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
parent 9b39dbc2
Showing with 130 additions and 100 deletions
packages/grafana-ui/src/components/Button/AbstractButton.tsx
......@@ -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);
`,
};
};
......
packages/grafana-ui/src/components/Button/Button.story.tsx
......@@ -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'
);
......
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
......@@ -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,
......
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
......@@ -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
// -------------------------
......
packages/grafana-ui/src/themes/default.ts
......@@ -67,6 +67,11 @@ const theme: GrafanaThemeCommons = {
sm: '1px',
},
},
height: {
sm: '24px',
md: '32px',
lg: '48px',
},
panelPadding: {
horizontal: 16,
vertical: 8,
......
packages/grafana-ui/src/types/theme.ts
......@@ -72,6 +72,11 @@ export interface GrafanaThemeCommons {
sm: string;
};
};
height: {
sm: string;
md: string;
lg: string;
};
panelPadding: {
horizontal: number;
vertical: number;
......
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
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} />;
......
public/app/core/components/org_switcher.ts
......@@ -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>
......
public/app/features/admin/partials/edit_org.html
......@@ -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>
......
public/app/features/admin/partials/edit_user.html
......@@ -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>
......
public/app/features/alerting/StateHistory.tsx
......@@ -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>
......
public/app/features/alerting/partials/notifications_list.html
......@@ -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.',
......
public/app/features/annotations/partials/editor.html
......@@ -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">
......
public/app/features/api-keys/ApiKeysPage.tsx
......@@ -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',
......
public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
......@@ -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],
......
public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
......@@ -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 {
......
public/app/features/dashboard/components/DashLinks/editor.html
......@@ -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>
......
public/app/features/datasources/DataSourcesListItem.tsx
......@@ -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>
......
public/app/features/datasources/DataSourcesListPage.tsx
......@@ -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.',
......
public/app/features/explore/NoDataSourceCallToAction.tsx
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`
......
public/app/features/manage-dashboards/partials/snapshot_list.html
......@@ -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>
......
public/app/features/playlist/partials/playlist.html
......@@ -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>
......
public/app/features/profile/partials/profile.html
......@@ -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>
......
public/app/features/teams/TeamGroupSync.tsx
......@@ -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">
......
public/app/features/teams/TeamList.tsx
......@@ -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',
}}
/>
);
}
......
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
......@@ -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
......
public/app/features/teams/partials/create_team.html
......@@ -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>
......
public/app/features/templating/partials/editor.html
......@@ -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>
......
public/app/features/users/InviteeRow.tsx
......@@ -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>
......
public/app/features/users/UsersTable.tsx
......@@ -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>
......
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
......@@ -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
......
public/sass/_variables.generated.scss
......@@ -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
// -------------------------
......
public/sass/components/_buttons.scss
......@@ -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 {
......
public/sass/components/_navbar.scss
......@@ -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 {
......
public/sass/pages/_login.scss
......@@ -20,6 +20,7 @@ $login-border: #8daac5;
& .btn-primary {
@include buttonBackground(#ff6600, #bc3e06);
height: 40px;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment