| $chart-list-title-height: 90px; |
| |
| #explore-container { |
| position: relative; |
| margin-left: $chart-nav-width; |
| z-index: 10; |
| background-color: $clr-lightest; |
| } |
| |
| #chart-demo { |
| position: absolute; |
| top: 50px; |
| left: $chart-nav-width; |
| right: 0; |
| bottom: 0; |
| overflow: hidden; |
| |
| iframe { |
| width: 100%; |
| height: 100%; |
| border: none; |
| } |
| } |
| |
| .chart-list-panel { |
| padding: 30px 15px 30px 15px; |
| |
| h3 { |
| margin-bottom: 20px; |
| border-bottom: 1px solid #ccc; |
| padding-bottom: 5px; |
| margin-top: 50px; |
| } |
| |
| .chart { |
| width: 100%; |
| max-width: 350px; |
| margin: 0 auto; |
| margin-bottom: 30px; |
| |
| border-radius: 4px; |
| background: #fff; |
| -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; |
| } |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .chart-list-panel .chart .chart-link { |
| .chart-hover { |
| opacity: 1; |
| position: static; |
| color: $clr-dark; |
| margin-top: 0; |
| height: auto; |
| |
| .chart-title { |
| border-top: none; |
| color: $clr-contrast; |
| margin-top: 20px; |
| margin-bottom: 0; |
| } |
| |
| .chart-subtitle { |
| display: none; |
| } |
| |
| .chart-title:before, .chart-subtitle:after { |
| display: none; |
| } |
| } |
| |
| &:hover .chart-hover-bg { |
| display: none; |
| } |
| } |
| |
| #explore-container { |
| margin-left: 0; |
| } |
| #chart-demo { |
| left: 0; |
| } |
| } |