Commit @9c5e0d377f2c0240890a198236631b1c005d8d2d

DeokHong Kim (a.k.a insanehong) 2013-10-13

changed notification icon sylte changed state color

changed state color

@9c5e0d377f2c0240890a198236631b1c005d8d2d

cb0613b

9c5e0d3

app/assets/stylesheets/less/_page.less

--- app/assets/stylesheets/less/_page.less

+++ app/assets/stylesheets/less/_page.less


                 font-size:16px;
                 padding:15px 20px;
                 text-align:center;
-                background-color:@yobi-cyan-dark;
+                background-color:#8b8b8b;
                 color:@yobi-white;
                 .border-radius(6px);
             }

                 }
 
                 .stream-type {
-                    width:26px;
-                    height:26px;
-                    padding:4px;
-                    border: 1px solid @state-open;
+                    display:inline-block;
+                    padding:4px 6px;
+                    border: 4px solid @state-open;
                     .border-radius(50%);
                     background: #FFF;
                     position:absolute;
                     top:12px; 
                     left:0;
-                    color:#fdfdfd;
+                    color:@state-open;
+                    text-align:center;
+                    line-height:20px;
+                    font-size:16px;
+                    font-weight:bold;
+                    vertical-align: middle;
 
-                    &.closed {border: 1px solid @state-closed;}
-                    &.changed {border: 1px solid @state-changed;}
-                    &.rejected {border: 1px solid @state-rejected;}
-                    &.warning {border : 1px solid @state-warning;}
-
-                    span { 
-                        background:@state-open;
-                        width:26px;
-                        height:26px;
-                        .border-radius(50%);
-                        display:inline-block;
-                        font-size:15px;
-                        text-align : center;
-
-                        &.closed {background:  @state-closed;}
-                        &.changed {background: @state-changed;}
-                        &.rejected {background: @state-rejected;}
-                        &.warning {background : @state-warning;}
-
-                        i { vertical-align:middle;width:auto;height:auto;}
-                    }
+                    &.closed {border: 4px solid @state-closed; color:@state-closed;}
+                    &.changed {border: 4px solid @state-changed;color:@state-changed}
+                    &.rejected {border: 4px solid @state-rejected;color:@state-rejected}
+                    &.warning {border : 4px solid @state-warning;color:@state-warning}
 
                 }
 

cb0613b

9c5e0d3

app/assets/stylesheets/less/_variables.less

--- app/assets/stylesheets/less/_variables.less

+++ app/assets/stylesheets/less/_variables.less


 @yobi-btn-disabled-hover : #cacfd2;
 
 // State color
-@state-open: @yobi-green-dark;
-@state-closed: @yobi-red-dark;
-@state-rejected: @yobi-orange-dark;
-@state-warning: @yobi-yello-dark;
-@state-changed: @yobi-blue-dark;
+@state-open: #b6da54;
+@state-closed: #fd6956;
+@state-rejected: #fd8658;
+@state-warning: #fcc666;
+@state-changed: #65c9df;
 
 @primary         : @orange;
 @secondary       : @blue2;

cb0613b

9c5e0d3

app/views/index/partial_notifications.scala.html

--- app/views/index/partial_notifications.scala.html

+++ app/views/index/partial_notifications.scala.html


 <li class="notification-stream">
     @defining(User.find.byId(noti.senderId)){ user =>
     <div class="stream-type @notifycationIcon(noti.eventType,noti.newValue)">
-        <span class="@notifycationIcon(noti.eventType,noti.newValue)"><i class="yobicon-@notifycationIcon(noti.eventType,noti.newValue)"></i></span>
+        <i class="yobicon-@notifycationIcon(noti.eventType,noti.newValue)"></i>
     </div>
     <div class="stream-desc" data-target="message-@noti.id" data-toggle="learnmore">
         <div class="stream-info">

Add a comment

Open 0
Closed 0

List

...	...	@@ -960,7 +960,7 @@
960	960	font-size:16px;
961	961	padding:15px 20px;
962	962	text-align:center;
963		- background-color:@yobi-cyan-dark;
	963	+ background-color:#8b8b8b;
964	964	color:@yobi-white;
965	965	.border-radius(6px);
966	966	}
...	...	@@ -993,38 +993,25 @@
993	993	}
994	994
995	995	.stream-type {
996		- width:26px;
997		- height:26px;
998		- padding:4px;
999		- border: 1px solid @state-open;
	996	+ display:inline-block;
	997	+ padding:4px 6px;
	998	+ border: 4px solid @state-open;
1000	999	.border-radius(50%);
1001	1000	background: #FFF;
1002	1001	position:absolute;
1003	1002	top:12px;
1004	1003	left:0;
1005		- color:#fdfdfd;
	1004	+ color:@state-open;
	1005	+ text-align:center;
	1006	+ line-height:20px;
	1007	+ font-size:16px;
	1008	+ font-weight:bold;
	1009	+ vertical-align: middle;
1006	1010
1007		- &.closed {border: 1px solid @state-closed;}
1008		- &.changed {border: 1px solid @state-changed;}
1009		- &.rejected {border: 1px solid @state-rejected;}
1010		- &.warning {border : 1px solid @state-warning;}
1011		-
1012		- span {
1013		- background:@state-open;
1014		- width:26px;
1015		- height:26px;
1016		- .border-radius(50%);
1017		- display:inline-block;
1018		- font-size:15px;
1019		- text-align : center;
1020		-
1021		- &.closed {background: @state-closed;}
1022		- &.changed {background: @state-changed;}
1023		- &.rejected {background: @state-rejected;}
1024		- &.warning {background : @state-warning;}
1025		-
1026		- i { vertical-align:middle;width:auto;height:auto;}
1027		- }
	1011	+ &.closed {border: 4px solid @state-closed; color:@state-closed;}
	1012	+ &.changed {border: 4px solid @state-changed;color:@state-changed}
	1013	+ &.rejected {border: 4px solid @state-rejected;color:@state-rejected}
	1014	+ &.warning {border : 4px solid @state-warning;color:@state-warning}
1028	1015
1029	1016	}
1030	1017

...	...	@@ -131,11 +131,11 @@
131	131	@yobi-btn-disabled-hover : #cacfd2;
132	132
133	133	// State color
134		-@state-open: @yobi-green-dark;
135		-@state-closed: @yobi-red-dark;
136		-@state-rejected: @yobi-orange-dark;
137		-@state-warning: @yobi-yello-dark;
138		-@state-changed: @yobi-blue-dark;
	134	+@state-open: #b6da54;
	135	+@state-closed: #fd6956;
	136	+@state-rejected: #fd8658;
	137	+@state-warning: #fcc666;
	138	+@state-changed: #65c9df;
139	139
140	140	@primary : @orange;
141	141	@secondary : @blue2;

...	...	@@ -53,7 +53,7 @@
53	53	<li class="notification-stream">
54	54	@defining(User.find.byId(noti.senderId)){ user =>
55	55	<div class="stream-type @notifycationIcon(noti.eventType,noti.newValue)">
56		- <span class="@notifycationIcon(noti.eventType,noti.newValue)"><i class="yobicon-@notifycationIcon(noti.eventType,noti.newValue)"></i></span>
	56	+ <i class="yobicon-@notifycationIcon(noti.eventType,noti.newValue)"></i>
57	57	</div>
58	58	<div class="stream-desc" data-target="message-@noti.id" data-toggle="learnmore">
59	59	<div class="stream-info">

Delete comment