| $chart-list-title-height: 90px; |
| |
| @mixin themeGradientColor($start, $end) { |
| background: $start; /* Old browsers */ |
| background: -moz-linear-gradient(-45deg, lighten($start, 20%) 0%, $start 50%, $end 51%, lighten($end, 20%) 100%); /* FF3.6-15 */ |
| background: -webkit-linear-gradient(-45deg, lighten($start, 20%) 0%,$start 50%, $end 51%, lighten($end, 20%) 100%); /* Chrome10-25,Safari5.1-6 */ |
| background: linear-gradient(135deg, lighten($start, 20%) 0%,$start 50%, $end 51%, lighten($end, 20%) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
| } |
| |
| #toolbar { |
| height: 30px; |
| position: fixed; |
| margin-top: 20px; |
| width: 500px; |
| right: 0px; |
| z-index: 200; |
| } |
| |
| #theme { |
| float: right; |
| margin-right: 30px; |
| |
| &>span { |
| vertical-align: middle; |
| display: inline-block; |
| margin-right: 10px; |
| font-size: 16px; |
| font-weight: bold; |
| } |
| |
| a { |
| cursor: pointer; |
| display: inline-block; |
| vertical-align: middle; |
| display: inline-block; |
| width: 30px; |
| height: 30px; |
| margin: 0px 5px; |
| border-radius: 2px; |
| |
| box-sizing: content-box; |
| |
| background: #fff; |
| |
| span { |
| display: inline-block; |
| width: 26px; |
| height: 26px; |
| margin-left: 2px; |
| margin-top: 2px; |
| } |
| |
| &:hover { |
| box-shadow: 0px 0px 8px rgba(0,0,0,0.1); |
| } |
| |
| &.selected { |
| border: 1px solid #e43c59; |
| } |
| } |
| |
| a.default { |
| span { |
| @include themeGradientColor(#c23531, #2f4554) |
| } |
| } |
| |
| a.light { |
| span { |
| @include themeGradientColor(#37A2DA, #ffd85c) |
| } |
| } |
| |
| a.dark { |
| background: #333; |
| span { |
| @include themeGradientColor(#dd6b66, #759aa0) |
| } |
| } |
| } |
| |
| #toolbar #theme { |
| padding: 4px 10px; |
| background: #fff; |
| border-radius: 5px; |
| box-shadow: 0 0 15px rgba(0,0,0,0.1); |
| border: 1px solid #aaa; |
| } |
| |
| #toolbar #theme.dark { |
| background: #222; |
| color: #fff; |
| } |
| |
| .popover-title { |
| color: #000 |
| } |
| |
| .theme-palette { |
| color: #000; |
| |
| font-size: 18px; |
| |
| span { |
| width: 20px; |
| height: 20px; |
| margin-left: 3px; |
| display: inline-block; |
| } |
| } |
| |
| .chart-list-panel { |
| margin: 30px 15px 30px 15px; |
| |
| h3 { |
| margin-bottom: 20px; |
| } |
| .chart-type-head span { |
| font-size: 20px; |
| padding-left: 10px; |
| color: #999; |
| font-weight: normal; |
| } |
| |
| .chart { |
| width: 100%; |
| max-width: 350px; |
| margin: 0 auto; |
| margin-bottom: 30px; |
| |
| border-radius: 2px; |
| background-color: $clr-lightest; |
| -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
| -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
| |
| .chart-link { |
| position: relative; |
| display: block; |
| |
| .chart-area { |
| width: 100%; |
| height: 100%; |
| padding: 8px; |
| } |
| |
| .chart-title { |
| color: $clr-primary; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| |
| padding: 10px 10px 2px 10px; |
| margin: 0; |
| font-weight: normal; |
| font-size: 16px; |
| } |
| } |
| |
| .chart-info { |
| padding: 5px 0; |
| |
| font-weight: bold; |
| |
| .chart-icon { |
| float: right; |
| |
| .chart-delete { |
| display: none; |
| |
| transition: 1s; |
| } |
| } |
| } |
| |
| &:hover .chart-info .chart-icon .chart-delete { |
| display: block; |
| |
| text-decoration: none; |
| } |
| } |
| } |