roda-component 0.0.10 → 0.1.0

data/test/dummy/public/chat/bower/open-sans-fontface/sass/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin fontdef($OpenSansPath, $OpenSansVersion, $FontType:"Regular") {
+  src:  url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.eot?v=#{$OpenSansVersion}');
+  src:  url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.eot?#iefix&v=#{$OpenSansVersion}') format('embedded-opentype'),
+        url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.woff?v=#{$OpenSansVersion}') format('woff'),
+        url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.ttf?v=#{$OpenSansVersion}') format('truetype'),
+        url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.svg?v=#{$OpenSansVersion}#OpenSansBold') format('svg');
+}

data/test/dummy/public/chat/bower/open-sans-fontface/sass/_variables.scss

@@ -0,0 +1,2 @@
+$OpenSansPath: "./fonts" !default;
+$OpenSansVersion: "1.1.0" !default; 

data/test/dummy/public/chat/bower/open-sans-fontface/sass/open-sans.scss

@@ -0,0 +1,12 @@
+@import "variables";
+@import "mixins";
+@import "Light";
+@import "LightItalic";
+@import "Regular";
+@import "Italic";
+@import "Semibold";
+@import "SemiboldItalic";
+@import "Bold";
+@import "BoldItalic";
+@import "ExtraBold";
+@import "ExtraBoldItalic";

data/test/dummy/public/chat/css/login.css

@@ -0,0 +1,140 @@
+*{
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  box-sizing:border-box;
+}
+body{
+  /* background: url(http://www.vauls.com/img/3.jpg) #a9b89e; */
+  background: #a9b89e;
+  font-family:Arial;
+  font-size:12px;
+  color:#C4BCB0;
+}
+input[type="text"],
+input[type="password"]{
+  background:#EAE6E1;
+  border:0;
+  font-weight:bold;
+  padding:10px;
+  border-radius:3px;
+  width:100%;
+  margin:5px 0;
+  outline:medium none;
+  color:#838383;
+}
+input[type="checkbox"]{
+  -webkit-appearance:none;
+  width:10px;
+  height:10px;
+  position:relative;
+  outline:medium none;
+  margin-right:10px;
+}
+input[type="checkbox"]::before{
+  width:9px;
+  height:9px;
+  content:"";
+  display:block;
+  border:3px solid #C4BCB0;
+  border-radius: 9px;
+  position:absolute;
+}
+input[type="checkbox"]:checked::after{
+  width:5px;
+  height:5px;
+  content:"";
+  display:block;
+  background: #C4BCB0;
+  border-radius: 5px;
+  position:absolute;
+  left:5px;
+  top:5px;
+}
+input[type="submit"]{
+  display:block;
+  padding:10px;
+  background:#50BFA4;
+  border:0;
+  border-radius:3px;
+  font-weight:bold;
+  width:100%;
+  color:#fff;
+  cursor:pointer;
+  -webkit-transition:all 0.3s;
+  -moz-transition:all 0.3s;
+  transition:all 0.3s;
+}
+input[type="submit"]:hover{
+  background:#58CCB0;
+}
+.main-form{
+  width:350px;
+  margin: 100px auto;
+  padding:50px;
+  border: 1px solid rgba(0,0,0,0.1);
+  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
+  background:#fff;
+}
+.logo{
+  background:#50BFA4;
+  width:40px;
+  height:40px;
+  display:block;
+  margin:0 auto 30px;
+  border-top-left-radius:20px;
+  border-top-right-radius:20px;
+  border-bottom-left-radius:20px;
+  position:relative;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.logo::before{
+  width:14px;
+  height:14px;
+  display:block;
+  border:5px solid #F7F5F2;
+  content:"";
+  position:absolute;
+  border-radius:14px;
+  top:8px;
+  left:8px;
+}
+.main-form > label{
+  display:block;
+  margin:10px 0 15px;
+  line-height:15px;
+  cursor:pointer;
+}
+.main-form > div{
+  margin-top:20px;
+}
+a{
+  color:#C4BCB0;
+  text-decoration:none;
+}
+.main-form > a{
+  font-size:11px;
+  display:block;
+  text-align:center;
+  margin:10px 0;
+}
+.main-form > div >a:first-child{
+  font-weight:bold;
+}
+.main-form > div >a:nth-child(2){
+  border:1px solid #3DA087;
+  display:inline-block;
+  border-radius:3px;
+  color:#3DA087;
+  font-weight:bold;
+  padding:7px 15px;
+  margin-left:28px;
+  -webkit-transition:all 0.3s;
+  -moz-transition:all 0.3s;
+  transition:all 0.3s;
+}
+.main-form > div >a:nth-child(2):hover{
+  background:#3DA087;
+  color:#fff;
+}

data/test/dummy/public/chat/css/login.scss

@@ -0,0 +1,147 @@
+body.login {
+  *{
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing:border-box;
+    box-sizing:border-box;
+  }
+  body{
+    /* background: url(http://www.vauls.com/img/3.jpg) #a9b89e; */
+    background: #a9b89e;
+    font-family:Arial;
+    font-size:12px;
+    color:#C4BCB0;
+  }
+  .field-error {
+    color: #610010;
+    font-size: 11px;
+    font-style: italic;
+  }
+  input[type="text"],
+  input[type="password"]{
+    background:#EAE6E1;
+    border:0;
+    font-weight:bold;
+    padding:10px;
+    border-radius:3px;
+    width:100%;
+    margin:5px 0;
+    outline:medium none;
+    color:#838383;
+  }
+  input[type="checkbox"]{
+    -webkit-appearance:none;
+    width:10px;
+    height:10px;
+    position:relative;
+    outline:medium none;
+    margin-right:10px;
+  }
+  input[type="checkbox"]::before{
+    width:9px;
+    height:9px;
+    content:"";
+    display:block;
+    border:3px solid #C4BCB0;
+    border-radius: 9px;
+    position:absolute;
+  }
+  input[type="checkbox"]:checked::after{
+    width:5px;
+    height:5px;
+    content:"";
+    display:block;
+    background: #C4BCB0;
+    border-radius: 5px;
+    position:absolute;
+    left:5px;
+    top:5px;
+  }
+  input[type="submit"]{
+    display:block;
+    padding:10px;
+    background:#50BFA4;
+    border:0;
+    border-radius:3px;
+    font-weight:bold;
+    width:100%;
+    color:#fff;
+    cursor:pointer;
+    -webkit-transition:all 0.3s;
+    -moz-transition:all 0.3s;
+    transition:all 0.3s;
+  }
+  input[type="submit"]:hover{
+    background:#58CCB0;
+  }
+  .main-form{
+    width:350px;
+    margin: 100px auto;
+    padding:50px;
+    border: 1px solid rgba(0,0,0,0.1);
+    -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
+    background:#fff;
+  }
+  .logo{
+    background:#50BFA4;
+    width:40px;
+    height:40px;
+    display:block;
+    margin:0 auto 30px;
+    border-top-left-radius:20px;
+    border-top-right-radius:20px;
+    border-bottom-left-radius:20px;
+    position:relative;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  .logo::before{
+    width:14px;
+    height:14px;
+    display:block;
+    border:5px solid #F7F5F2;
+    content:"";
+    position:absolute;
+    border-radius:14px;
+    top:8px;
+    left:8px;
+  }
+  .main-form > label{
+    display:block;
+    margin:10px 0 15px;
+    line-height:15px;
+    cursor:pointer;
+  }
+  .main-form > div{
+    margin-top:20px;
+  }
+  a{
+    color:#C4BCB0;
+    text-decoration:none;
+  }
+  .main-form > a{
+    font-size:11px;
+    display:block;
+    text-align:center;
+    margin:10px 0;
+  }
+  .main-form > div >a:first-child{
+    font-weight:bold;
+  }
+  .main-form > div >a:nth-child(2){
+    border:1px solid #3DA087;
+    display:inline-block;
+    border-radius:3px;
+    color:#3DA087;
+    font-weight:bold;
+    padding:7px 15px;
+    margin-left:28px;
+    -webkit-transition:all 0.3s;
+    -moz-transition:all 0.3s;
+    transition:all 0.3s;
+  }
+  .main-form > div >a:nth-child(2):hover{
+    background:#3DA087;
+    color:#fff;
+  }
+}

data/test/dummy/public/chat/css/style.css

@@ -0,0 +1,397 @@
+/* 
+  HTML implementation of a Hip Chat redesign based on Jan Dvořák Dribbble shot.
+  https://dribbble.com/shots/1529065-HipChat-Redesign
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+body{
+	background: url(http://i.imgur.com/MQB99sg.jpg) #a9b89e;
+	font-family: 'Open Sans', Arial, sans-serif;
+	font-size: 12px;
+	color: #333f4d;
+}
+b{
+	font-weight: bold;
+}
+.window-wrapper{
+	background: #fff;
+	width: 780px;
+	margin: 30px auto;
+	border-radius: 6px;
+	box-shadow: 0 0 6px rgba(0,0,0,0.3);
+	overflow: hidden;
+	min-height: 530px;
+	position: relative;
+}
+.window-title{
+	padding: 14px;
+	position: relative;
+}
+.dots{
+	float: left;
+	width: 50px;
+}
+.window-title > .title{
+	overflow: hidden;
+	text-align: center;
+  font-weight: bold;
+}
+.window-title > .expand{
+	position: absolute;
+	right: 14px;
+	top: 12px;
+}
+.dots > i{
+	margin-right: 2px;
+}
+.dots > i:nth-child(1){
+	color: #f57e7d;
+}
+.dots > i:nth-child(2){
+	color: #ffc881;
+}
+.dots > i:nth-child(3){
+	color: #82cf85;
+}
+.expand > i{
+	color: #cfd6e0;
+	font-size: 18px;
+	cursor: pointer;
+}
+.window-area{
+	position: absolute;
+	top: 40px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding-left: 176px;
+}
+.conversation-list{
+	width: 176px;
+	background: #505d71;
+	float: left;
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+}
+.conversation-list ul li a{
+	padding: 15px;
+	color: #bcc3d0;
+	text-decoration: none;
+	display: block;
+	position: relative;
+	border-bottom: 2px solid #586476;
+}
+.conversation-list ul li a:hover,
+.conversation-list ul li.active a{
+	background: #445166;
+	color: #fff;
+}
+.conversation-list ul li a i{
+	color: #79889d;
+	font-size: 1.2em;
+}
+.conversation-list ul li a span{
+	display: inline-block;
+	margin-left: 14px;
+}
+.conversation-list ul li a i.fa-times{
+	position: absolute;
+	top:19px;
+	right:21px;
+	font-size: 10px;
+}
+.conversation-list .online{
+	color: #82cf85;
+}
+.conversation-list .idle{
+	color: #ffac69;
+}
+.conversation-list .offline{
+	color: #f57e7d;
+}
+.chat-area{
+	border-top: 1px solid #cfdae1;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 176px;
+  right:175px;
+	box-shadow: inset 0 1px 3px rgba(207, 218, 225, 0.42)
+}
+.chat-area .title{
+	padding: 10px;
+	overflow: hidden;
+  line-height:15px;
+}
+.chat-area .title .fa-search{
+	font-size: 14px;
+	float: right;
+	color: #a8bbc6;
+	cursor: pointer;
+}
+.chat-area .chat-list{
+	border-top: 1px solid #cfdae1;
+	border-bottom: 1px solid #cfdae1;
+	position: absolute;
+	left: 0;
+	top: 35px;
+	right: 0;
+	bottom: 44px;
+	overflow-y: auto;
+	outline: none;
+}
+.chat-area ul{
+	margin-right: -4px;
+}
+.chat-area ul > li{
+	border-top: 1px solid #cfdae1;
+	overflow: hidden;
+	position: relative;
+}
+.chat-area ul > li.me{
+	background: #e4eaee;
+}
+.chat-area ul > li:first-child{
+	border-top: none;
+}
+.chat-area ul .name{
+	padding: 14px;
+	text-align: right;
+	width: 100px;
+	float: left;
+	color: #5d7185;
+	font-weight: bold;
+	line-height: 20px;
+}
+.chat-area ul .message{
+	padding: 14px;
+	border-left: 1px solid #cfdae1;
+	float: left;
+	color: #333f4d;
+	width: 214px;
+}
+.chat-area ul .message > p{
+	line-height: 20px;
+}
+.chat-area ul .message > p > .blue-label{
+	background: #6ea0ff;
+	color: #fff;
+	padding: 0 5px;
+	border-radius: 5px;
+}
+.chat-area ul .message .msg-time{
+	position: absolute;
+	top:16px;
+	right: 15px;
+	color: #738ba3;
+	font-size: 9px;
+}
+.input-area{
+	background: #e4eaee;
+	padding: 6px;
+	overflow: hidden;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-top: 1px solid #cfdae1;
+}
+.input-area .input-wrapper{
+	background: #fff;
+	border: 1px solid #cfdae1;
+	border-radius: 5px;
+	overflow: hidden;
+	float: left;
+}
+.input-area .input-wrapper input{
+	height: 30px;
+	line-height: 30px;
+	border: 0;
+	margin: 0;
+	padding: 0 10px;
+	outline: none;
+	color: #5D7185;
+	min-width: 271px;
+}
+.input-area .input-wrapper i{
+	font-size: 18px;
+	color: #a0b4c0;
+	margin-right: 10px;
+	cursor: pointer;
+}
+.input-area > input{
+	background: #a0b4c0;
+	border: none;
+  letter-spacing:1px;
+	font-weight: bold;
+	color: #fff;
+	border-radius: 5px;
+	float:right;
+	height: 30px;
+	line-height: 30px;
+	cursor: pointer;
+	font-family: 'Open Sans', Arial, sans-serif;
+   outline: none;
+}
+.right-tabs{
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	border-left: 1px solid #cfdae1;
+	border-top: 1px solid #cfdae1;
+	width: 175px;
+}
+.right-tabs > ul.tabs{
+	overflow: hidden;
+}
+.right-tabs > ul.tabs > li{
+	float: left;
+	width: 33.3%;
+	text-align: center;
+	border-bottom: 1px solid #cfdae1;
+}
+.right-tabs > ul.tabs > li > a{
+	border-left: 1px solid #cfdae1;
+	color: #72a3ff;
+	display: block;
+	background: #eef2f8;
+	padding: 8px 0;
+}
+.right-tabs > ul.tabs > li.active{
+	border-bottom: none;
+}
+.right-tabs > ul.tabs > li.active > a{
+	background: #fff;
+	color: #c3ccd3;
+}
+.right-tabs > ul.tabs > li:first-child > a{
+	border-left: none;
+}
+.right-tabs > ul.tabs > li > a >i{
+	font-size: 18px
+}
+ul.tabs-container{
+	padding: 10px;
+	color: #6e7f91;
+}
+.right-tabs > .fa-cog{
+	position: absolute;
+	bottom: 14px;
+	right: 14px;
+	color: #a0b4c0;
+	font-size: 18px;
+	cursor: pointer;
+}
+.member-list > li{
+	padding: 5px 0;
+}
+.member-list > li .status{
+	margin: 0 10px 0 0;
+	font-size: 14px;
+}
+.member-list > li .status.online{
+	color: #82cf85;
+}
+.member-list > li .status.idle{
+	color: #ffac69;
+}
+.member-list > li .status.offline{
+	color: #f57e7d;
+}
+.member-list > li .time{
+	float: right;
+	font-size: 9px;
+	margin-top: 4px;
+}
+.my-account{
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 29px;
+	padding: 8px;
+	background: #445166;
+}
+.my-account > .image{
+	width: 30px;
+	height: 30px;
+	float: left;
+	position: relative;
+}
+.my-account > .image > i{
+	position: absolute;
+	top: -2px;
+	right: -2px;
+}
+.my-account > .image > img{
+	width: 30px;
+	height: 30px;
+	border-radius: 30px;
+}
+.my-account > .name{
+	color: #fff;
+	font-weight: bold;
+	margin-left: 10px;
+	float: left;
+	cursor: pointer;
+}
+.my-account > .name .availability{
+	display: block;
+	font-weight: normal;
+	color: #8391a1;
+	margin-top: 5px;
+}
+.jspDrag{
+	background: #A1AFC4;
+	border-radius: 10px;
+}
+.jspVerticalBar{
+	width: 7px;
+}