Mercurial > hg > dml-open-vis
annotate src/DML/MainVisBundle/Resources/assets/bem-blocks/notification.less @ 0:493bcb69166c
added public content
author | Daniel Wolff |
---|---|
date | Tue, 09 Feb 2016 20:54:02 +0100 |
parents | |
children |
rev | line source |
---|---|
Daniel@0 | 1 @import "../config.less"; |
Daniel@0 | 2 |
Daniel@0 | 3 .notification { |
Daniel@0 | 4 position: relative; |
Daniel@0 | 5 padding-top: 10px; |
Daniel@0 | 6 cursor: default; |
Daniel@0 | 7 z-index: @z-index_notifications + 1; |
Daniel@0 | 8 |
Daniel@0 | 9 |
Daniel@0 | 10 &_state_pre-shown { |
Daniel@0 | 11 } |
Daniel@0 | 12 |
Daniel@0 | 13 &_state_shown { |
Daniel@0 | 14 } |
Daniel@0 | 15 |
Daniel@0 | 16 &_state_pre-hidden { |
Daniel@0 | 17 |
Daniel@0 | 18 } |
Daniel@0 | 19 |
Daniel@0 | 20 &_state_hidden { |
Daniel@0 | 21 |
Daniel@0 | 22 } |
Daniel@0 | 23 |
Daniel@0 | 24 // ================================== |
Daniel@0 | 25 &__body { |
Daniel@0 | 26 .font_small(); |
Daniel@0 | 27 |
Daniel@0 | 28 position: absolute; |
Daniel@0 | 29 bottom: 0; |
Daniel@0 | 30 right: 0; |
Daniel@0 | 31 |
Daniel@0 | 32 background: #eee; |
Daniel@0 | 33 border: 1px solid #ccc; |
Daniel@0 | 34 border-top-left-radius: @--border-radius; |
Daniel@0 | 35 border-bottom-left-radius: @--border-radius; |
Daniel@0 | 36 width: @notification--width; |
Daniel@0 | 37 z-index: @z-index_notifications + 2; |
Daniel@0 | 38 } |
Daniel@0 | 39 |
Daniel@0 | 40 &_state_shown &__body { |
Daniel@0 | 41 } |
Daniel@0 | 42 |
Daniel@0 | 43 // ================================== |
Daniel@0 | 44 &__closer { |
Daniel@0 | 45 position: absolute; |
Daniel@0 | 46 right: 0; |
Daniel@0 | 47 top: 0; |
Daniel@0 | 48 bottom: 0; |
Daniel@0 | 49 width: @notification--closer-width; |
Daniel@0 | 50 |
Daniel@0 | 51 background: #F5F5F5; |
Daniel@0 | 52 color: #ccc; |
Daniel@0 | 53 cursor: default; |
Daniel@0 | 54 z-index: @z-index_notifications + 3; |
Daniel@0 | 55 } |
Daniel@0 | 56 &__closer::before { |
Daniel@0 | 57 content: "x"; |
Daniel@0 | 58 display: block; |
Daniel@0 | 59 margin-top: 6px; |
Daniel@0 | 60 text-align: center; |
Daniel@0 | 61 } |
Daniel@0 | 62 &__closer:hover { |
Daniel@0 | 63 color: #999; |
Daniel@0 | 64 background: #fff; |
Daniel@0 | 65 } |
Daniel@0 | 66 // ttl = time to live |
Daniel@0 | 67 &_ttl_5 &__closer::before {content: "5"} |
Daniel@0 | 68 &_ttl_4 &__closer::before {content: "4"} |
Daniel@0 | 69 &_ttl_3 &__closer::before {content: "3"} |
Daniel@0 | 70 &_ttl_2 &__closer::before {content: "2"} |
Daniel@0 | 71 &_ttl_1 &__closer::before {content: "1"} |
Daniel@0 | 72 &_ttl_0 &__closer::before {content: "0"} |
Daniel@0 | 73 |
Daniel@0 | 74 &_ttl-frozen:hover &__closer::before { |
Daniel@0 | 75 content: "x" !important; |
Daniel@0 | 76 } |
Daniel@0 | 77 |
Daniel@0 | 78 // Things look differently for warning messages |
Daniel@0 | 79 &_type_warning &__body { |
Daniel@0 | 80 background: #FFEED0; |
Daniel@0 | 81 } |
Daniel@0 | 82 &_type_warning &__closer { |
Daniel@0 | 83 background: #FFF8F5; |
Daniel@0 | 84 } |
Daniel@0 | 85 &_type_warning &__closer:hover { |
Daniel@0 | 86 color: #CA9; |
Daniel@0 | 87 } |
Daniel@0 | 88 |
Daniel@0 | 89 // Things look differently for error messages |
Daniel@0 | 90 &_type_error &__body { |
Daniel@0 | 91 background: #FFD5D5; |
Daniel@0 | 92 } |
Daniel@0 | 93 &_type_error &__closer { |
Daniel@0 | 94 background: #FFF5F5; |
Daniel@0 | 95 } |
Daniel@0 | 96 &_type_error &__closer:hover { |
Daniel@0 | 97 color: #C88; |
Daniel@0 | 98 } |
Daniel@0 | 99 |
Daniel@0 | 100 // ================================== |
Daniel@0 | 101 &__content { |
Daniel@0 | 102 padding: 6px 10px; |
Daniel@0 | 103 margin-right: @notification--closer-width; |
Daniel@0 | 104 } |
Daniel@0 | 105 |
Daniel@0 | 106 &_no-padding &__content { |
Daniel@0 | 107 padding: 0px; |
Daniel@0 | 108 } |
Daniel@0 | 109 |
Daniel@0 | 110 &__content b { |
Daniel@0 | 111 font-weight: bold; |
Daniel@0 | 112 } |
Daniel@0 | 113 } |