Skip to content

Commit

Permalink
style gl-panel gl-toast
Browse files Browse the repository at this point in the history
  • Loading branch information
Kitz-Parnupat committed Nov 3, 2016
1 parent cb42b38 commit 81af5d9
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 19 deletions.
36 changes: 20 additions & 16 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
{
"name": "gl-styles",
"description": "gl-style for web components",
"version": "0.0.11",
"main": "gl-color.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-button": "PolymerElements/paper-button#^1.0.13",
"iron-icons": "PolymerElements/iron-icons#^1.1.3"
}
}
"name": "gl-styles",
"description": "gl-style for web components",
"version": "0.0.11",
"main": "gl-color.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-button": "PolymerElements/paper-button#^1.0.13",
"iron-icons": "PolymerElements/iron-icons#^1.1.3",
"paper-toast": "PolymerElements/paper-toast#^1.3.0",
"paper-spinner": "PolymerElements/paper-spinner#^1.2.1",
"gl-font": "9lon-gl-font#^0.0.5",
"iron-icon": "PolymerElements/iron-icon#^1.0.12"
}
}
52 changes: 50 additions & 2 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,19 @@

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">

<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../../paper-spinner/paper-spinner.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../gl-font/gl-rsu-font.html">
<link rel="import" href="../gl-color.html">
<link rel="import" href="../gl-size.html">
<link rel="import" href="../gl-table.html">
<link rel="import" href="../gl-panel.html">
<link rel="import" href="../gl-toast.html">


<style is="custom-style" include="demo-pages-shared-styles gl-color gl-size gl-table">
<style is="custom-style" include="demo-pages-shared-styles gl-color gl-size gl-table gl-panel gl-toast">
.title {
font-size: var(--font-size-large);
}
Expand Down Expand Up @@ -138,6 +143,49 @@ <h3>Basic gl-color Demo</h3>
</tbody>
</table>
</div>

class : gl-panel-default
<div class="gl-panel-default">
<div class="gl-panel-default-header">
Header
</div>
<div class="gl-panel-default-content">
content
</div>
</div>

class : gl-toast-loading
<div>
<paper-button raised onclick="toast0.open()">Default toast</paper-button>
<paper-toast class="gl-toast-loading" id="toast0" positionTarget>
<paper-spinner active></paper-spinner>
<span>
กำลังโหลด...
</span>
</paper-toast>
</div>

class : gl-toast-loading
<div>
<paper-button raised onclick="toastDialog.open()">ToastDialog</paper-button>
<paper-toast class="gl-toast-dialog" id="toastDialog" duration="0">
<span>ต้องการลบข้อมูลใช้หรือไม่ ? </span>
<div>
<paper-button class="gl-btn-success gl-small" onclick="toastDialog.toggle()" confirm>Yes</paper-button>
<paper-button class="gl-bg-danger gl-small" onclick="toastDialog.toggle()">No</paper-button>
</div>
</paper-toast>
</div>
class : gl-toast-success
<div>
<paper-button raised onclick="toastStatus.open()">ToastDialog</paper-button>
<paper-toast class ="gl-toast-success" id="toastStatus">
<iron-icon icon ="done"></iron-icon>
<span>
เสร็จสิ้น..
</span>
</paper-toast>
</div>
</demo-snippet>
</div>

Expand Down
14 changes: 13 additions & 1 deletion gl-panel.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,19 @@
<dom-module id="gl-panel">
<template>
<style>

.gl-panel-default {
border: 1px solid #ddd;
}
.gl-panel-default-header{
background-color: orange;
padding: 8px 10px 8px 10px;
color: white;
font-size: 18px;
text-align: left;
}
.gl-panel-default-content{
padding: 20px;
}
</style>

</template>
Expand Down
59 changes: 59 additions & 0 deletions gl-toast.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@

<dom-module id="gl-toast">
<template>
<style>
paper-spinner{
--paper-spinner-stroke-width: 3px;
}
paper-button{
font-size: 16px !important;
}
.gl-toast-loading, .gl-toast-success, .gl-toast-warning, .gl-toast-error,.gl-toast-dialog{
width: 100%;
text-align: center;
font-size: 22px;
font-family: 'rsubold', sans-serif;
-webkit-font-smoothing: antialiased;
color: white;
}
.gl-toast-loading>span{
padding-left:10px;
position:relative;
bottom: 6px;
}
.gl-toast-loading>div{
padding: 10px 20px 10px 20px;
}
.gl-toast-dialog>div{
padding: 10px 20px 10px 20px;
}
.gl-toast-success{
background-color: #5cb85c;
}
.gl-toast-success>span{
padding-left:10px;
}
.gl-toast-warning{
background-color: #f0ad4e;
}
.gl-toast-error,.gl-toast-connecterror{
background-color: #d9534f;
}
.gl-toast-connecterror,.gl-toast-dialog{
width: 100%;
text-align: center;
}
.gl-toast-dialog{
background-color: #337ab7;
}
.gl-toast-connecterror>span{
font-size: 16px;
}
</style>
</template>
<script>
Polymer({
is: 'gl-toast'
});
</script>
</dom-module>

0 comments on commit 81af5d9

Please sign in to comment.