| | |
| | | $cycle-size01: 16px; |
| | | $cycle-size02: 6px; |
| | | $normal-color: #00CC99; |
| | | $shadow-color: #00CCa9; |
| | | $warn-color: #FFCC33; |
| | | $warn-shadow-color: #FFCbe3; |
| | | $danger-color: #FF3300; |
| | | $dange-shadowr-color: #FF3310; |
| | | @mixin light-status ($cycle-bg) { |
| | | em { |
| | | background: $cycle-bg; |
| | | i { |
| | | background: $cycle-bg - 30; |
| | | background: mix($cycle-bg, #000030, 0.5); |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | @keyframes shine-normal { |
| | | 0% { |
| | | box-shadow: 0 0 5px $normal-color + 10; |
| | | box-shadow: 0 0 5px $shadow-color; |
| | | } |
| | | 25% { |
| | | box-shadow: 0 0 10px $normal-color + 10; |
| | | box-shadow: 0 0 10px $shadow-color; |
| | | } |
| | | 50% { |
| | | box-shadow: 0 0 15px $normal-color + 10; |
| | | box-shadow: 0 0 15px $shadow-color; |
| | | } |
| | | 100% { |
| | | box-shadow: 0 0 20px $normal-color + 10; |
| | | box-shadow: 0 0 20px $shadow-color; |
| | | } |
| | | } |
| | | @keyframes shine-warn { |
| | | 0% { |
| | | box-shadow: 0 0 5px $warn-color - 50; |
| | | box-shadow: 0 0 5px $warn-shadow-color; |
| | | } |
| | | 25% { |
| | | box-shadow: 0 0 10px $warn-color - 50; |
| | | box-shadow: 0 0 10px $warn-shadow-color; |
| | | } |
| | | 50% { |
| | | box-shadow: 0 0 15px $warn-color - 50; |
| | | box-shadow: 0 0 15px $warn-shadow-color; |
| | | } |
| | | 100% { |
| | | box-shadow: 0 0 20px $warn-color - 50; |
| | | box-shadow: 0 0 20px $warn-shadow-color; |
| | | } |
| | | } |
| | | @keyframes shine-danger { |
| | | 0% { |
| | | box-shadow: 0 0 5px $danger-color + 10; |
| | | box-shadow: 0 0 5px $dange-shadowr-color; |
| | | } |
| | | 25% { |
| | | box-shadow: 0 0 10px $danger-color + 10; |
| | | box-shadow: 0 0 10px $dange-shadowr-color; |
| | | } |
| | | 50% { |
| | | box-shadow: 0 0 15px $danger-color + 10; |
| | | box-shadow: 0 0 15px $dange-shadowr-color; |
| | | } |
| | | 100% { |
| | | box-shadow: 0 0 20px $danger-color + 10; |
| | | box-shadow: 0 0 20px $dange-shadowr-color; |
| | | } |
| | | } |
| | | </style> |