Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-01 12:04:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create fab buttons

Browse source
This commit is contained in:
Marcos Moura 2016-07-18 01:14:47 -03:00
parent 9da8a6d924
commit b5e77c36bd
6 changed files with 110 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/mdBottomBar/mdBottomBar.scss
View file

@ -8,7 +8,6 @@
display: flex;
justify-content: center;
box-shadow: $material-shadow-8dp;
border-top: 1px solid $shadow-key-penumbra-opacity;
}
.md-bottom-bar-item {

77
src/components/mdButton/mdButton.scss
View file

@ -4,6 +4,9 @@ $button-width: 88px;
$button-height: 36px;
$button-radius: 2px;
$button-fab-size: 56px;
$button-fab-size-mini: 40px;
$button-dense-height: 32px;
$button-icon-size: 40px;
@ -101,43 +104,61 @@ $button-icon-size: 40px;
}
}
/*
&.md-fab {
// Include the top/left/bottom/right fab positions
@include fab-all-positions();
z-index: $z-index-fab;
line-height: $button-fab-line-height;
width: $button-fab-size;
height: $button-fab-size;
min-width: 0;
width: $button-fab-width;
height: $button-fab-height;
vertical-align: middle;
@include md-shadow-bottom-z-1();
border-radius: $button-fab-border-radius;
background-clip: padding-box;
padding: 0;
overflow: hidden;
box-shadow: $material-shadow-2dp;
border-radius: $button-fab-size;
line-height: $button-fab-size;
vertical-align: middle;
background-clip: padding-box;
transition: $swift-ease-in;
transition-property: background-color, box-shadow, transform;
.md-ripple-container {
border-radius: $button-fab-border-radius;
background-clip: padding-box;
overflow: hidden;
// The following hack causes Safari/Chrome to respect overflow hidden for ripples
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
transition-property: background-color,
box-shadow,
transform;
&:hover,
&:focus {
box-shadow: $material-shadow-5dp;
}
&.md-fab-top-right {
position: absolute;
top: 16px;
right: 16px;
}
&.md-fab-top-left {
position: absolute;
top: 16px;
left: 16px;
}
&.md-fab-bottom-right {
position: absolute;
right: 16px;
bottom: 16px;
}
&.md-fab-bottom-left {
position: absolute;
left: 16px;
bottom: 16px;
}
&.md-mini {
line-height: $button-fab-mini-line-height;
width: $button-fab-mini-width;
height: $button-fab-mini-height;
width: $button-fab-size-mini;
height: $button-fab-size-mini;
line-height: $button-fab-size-mini;
}
.md-ink-ripple {
border-radius: $button-fab-size;
}
}
*/
.md-ink-ripple {
border-radius: $button-radius;

26
src/components/mdButton/mdButton.theme
View file

@ -17,12 +17,33 @@
}
}
&.md-fab {
color: ACCENT-CONTRAST;
background-color: ACCENT-COLOR;
&:hover,
&:focus {
background-color: ACCENT-COLOR-A700;
}
&.md-fab-clean {
color: BACKGROUND-COLOR-900;
background-color: BACKGROUND-COLOR-50;
&:hover,
&:focus {
background-color: BACKGROUND-COLOR-200;
}
}
}
&.md-primary {
&:not(.md-icon-button) {
color: PRIMARY-COLOR;
}
&.md-raised {
&.md-raised,
&.md-fab {
background-color: PRIMARY-COLOR;
color: PRIMARY-CONTRAST;
@ -62,7 +83,8 @@
color: WARN-COLOR;
}
&.md-raised {
&.md-raised,
&.md-fab {
background-color: WARN-COLOR;
color: WARN-CONTRAST;

2
src/core/core.theme
View file

@ -1,4 +1,4 @@
body.THEME_NAME {
color: rgba(0, 0, 0, .87);
background-color: BACKGROUND-COLOR;
background-color: BACKGROUND-COLOR-50;
}

2
src/docs.scss
View file

@ -1,4 +1,6 @@
.docs {
padding: 0 8px;
.cell-phone {
width: 360px;
height: 480px;

36
src/docs.vue
View file

@ -6,10 +6,42 @@
<md-button @click="clickAction">Button</md-button>
<md-link-button class="md-primary" :disabled="disabled">Primary</md-link-button>
<md-link-button class="md-primary md-raised">Raised</md-link-button>
<md-link-button class="md-accent md-raised">Accent</md-link-button>
<md-button class="md-accent md-raised">Accent</md-button>
<md-link-button class="md-warn">Warn</md-link-button>
<md-link-button class="md-raised md-primary" :disabled="!disabled">Disabled</md-link-button>
<md-link-button class="md-raised md-dense md-accent">Dense</md-link-button>
<md-button class="md-raised md-dense md-accent">Dense</md-button>
</section>
<section>
<h2 class="title">Floating action button</h2>
<md-button class="md-fab md-fab-clean">
<md-icon>my_location</md-icon>
</md-button>
<md-button class="md-fab">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-fab md-primary">
<md-icon>edit</md-icon>
</md-button>
<md-button class="md-fab md-warn">
<md-icon>save</md-icon>
</md-button>
<md-button class="md-fab md-mini">
<md-icon>content_copy</md-icon>
</md-button>
<md-button class="md-fab md-mini md-primary">
<md-icon>content_paste</md-icon>
</md-button>
<md-button class="md-fab md-mini md-warn">
<md-icon>content_cut</md-icon>
</md-button>
</section>
<section>