yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-31 04:25:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds pattern definition and consumer classes for nacho-button, nacho-filter-rail and nacho-global-search components

Browse Source
This commit is contained in:
Seyi Adebajo 2017-03-24 22:05:12 -07:00 committed by Mars Lan
parent f78b967964
commit 10d1dfa04e
4 changed files with 201 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wherehows-web/app/serializers/application.js Normal file
View File

@ -0,0 +1,6 @@
import DS from 'ember-data';
import DataTableSerializerMixin from 'ember-data-table/mixins/serializer';
export default DS.JSONAPISerializer.extend(DataTableSerializerMixin, {
});

93
wherehows-web/app/styles/components/_nacho-button.scss Normal file
View File

@ -0,0 +1,93 @@
@import "restyle";
@include restyle-define(button, (
// Button Component Variables
restyle-var(height): 32px,
restyle-var(horizontal-padding): 16px,
restyle-var(main-color): $secondary-color,
restyle-var(background-color): $secondary-color,
restyle-var(font-size): 1.7rem,
restyle-var(font-weight): 600,
restyle-var(text-color): $text-color,
restyle-var(border-radius): 2px,
background-color: restyle-var(background-color),
border: 0,
border-radius: restyle-var(border-radius),
box-sizing: border-box,
color: restyle-var(text-color),
cursor: pointer,
display: inline-block,
font-size: restyle-var(font-size),
font-weight: restyle-var(font-weight),
font-family: inherit,
height: restyle-var(height),
line-height: restyle-var(height),
overflow: hidden,
outline: 0,
padding: 0 restyle-var(horizontal-padding),
position: relative,
text-align: center,
text-decoration: none,
vertical-align: middle,
z-index: z(default),
restyle-modifiers: (
small: (
restyle-var(font-size): 1.5rem,
restyle-var(height): 24px,
restyle-var(horizontal-padding): 16px,
),
medium: (
// Default
),
large: (
restyle-var(font-size): 1.7rem,
restyle-var(height): 40px,
restyle-var(horizontal-padding): 24px
),
x-large: (
restyle-var(font-size): 2.1rem,
restyle-var(height): 48px,
restyle-var(horizontal-padding): 32px,
restyle-var(font-weight): normal
),
tertiary: (
restyle-var(main-color): transparent
),
secondary: (
restyle-var(background-color): transparent,
restyle-var(text-color): $text-invert-color,
restyle-var(box-shadow-size): inset 0 0 0 1px,
restyle-var(box-shadow-size-hover): inset 0 0 0 2px,
restyle-var(box-shadow-size-active): inset 0 0 0 3px,
restyle-var(font-weight): 300,
box-shadow: (
restyle-var(box-shadow-size) restyle-var(main-color),
restyle-var(box-shadow-size-hover) transparent,
restyle-var(box-shadow-size-active) transparent
)
)
)
));
.nacho-button {
@include restyle(button);
&--x-large {
@include restyle(x-large button);
}
&--large {
@include restyle(large button);
}
&--small {
@include restyle(small button);
}
&--secondary {
@include restyle(secondary button);
}
&--tertiary {
@include restyle(tertiary button);
}
}

92
wherehows-web/app/styles/components/_nacho-filter-rail.scss Normal file
View File

@ -0,0 +1,92 @@
@import "restyle";
$pad-width: 16px;
@include restyle-define(filter-card, (
restyle-var(horizontal-padding): $pad-width,
background-color: set-color(white, base),
padding: restyle-var(horizontal-padding),
position: relative,
border-bottom: 1px solid set-color(grey, light)
));
@include restyle-define(filter-rail, (
list-style-type: none,
padding: 0,
border: 1px solid set-color(grey, light)
));
.nacho-filter-rail {
@include restyle(filter-rail);
// Temporary rule to counteract margin on bs `.pager` class in search results
// page view
margin: 20px 0;
&__header {
color: set-color(blue, oxford);
background-color: set-color(white, base);
padding: $pad-width;
font-size: 17px;
font-weight: 600;
}
}
.nacho-filter-card {
@include restyle(filter-card);
&:last-child {
border-bottom: none;
}
&__label, .ember-radio-button {
display: block;
}
&__header {
padding: 0 0 $pad-width/2;
}
}
// TODO: DSS-6628 ember-radio-button component does not currently support styles
// on <label> element. There might be a work around:
// https://github.com/yapplabs/ember-radio-button/issues/13
// Investigate and find a way to apply a class to the <label> without
// the override used below
// Override ember-radio-button styles
.ember-radio-button {
position: relative;
left: 26px;
&:before,
&:after {
content: " ";
height: 20px;
width: 20px;
position: absolute;
top: 0;
left: -26px;
display: block;
box-sizing: border-box;
border-radius: 50%;
}
&:before {
border: 1px solid set_color(grey, mid);
}
&:after {
border: 0 solid set-color(blue, curious);
transition: border-width 167ms cubic-bezier(0, 0, 0.2, 1);
border-width: 0px;
}
&.checked:after {
border-width: 6px;
}
input[type=radio] {
opacity: 0;
margin: 16px 2px 0 0;
position: absolute;
}
}

10
wherehows-web/app/styles/components/_nacho-global-search.scss Normal file
View File

@ -0,0 +1,10 @@
/// Search bar height
$height: 40px;
.nacho-global-search {
color: $text-color;
&__text-input {
height: $height;
}
}