| /** |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| @import "_variables"; |
| |
| $edit-child-background: #2E2E2E; |
| $edit-background-border: #5C5C5C; |
| |
| $dialog-1x-width: 340px; |
| $dialog-2x-width: 680px; |
| $dialog-4x-width: 1380px; |
| |
| .metron-slider-pane-details |
| { |
| display: inline-block; |
| float: right; |
| word-wrap: break-word; |
| height: auto; |
| min-height: 100%; |
| position: absolute; |
| |
| top: 0; |
| z-index: 9; |
| background: $edit-child-background; |
| border: 1px solid $edit-background-border; |
| |
| .close-button |
| { |
| font-size: 26px; |
| cursor: pointer; |
| } |
| } |
| |
| .metron-slider-pane-editable |
| { |
| @extend .metron-slider-pane-details; |
| |
| height: auto; |
| background: $eden; |
| padding-bottom: 70px; |
| border-left: 1px solid $blue-mine; |
| } |
| |
| @media only screen and (min-width: 500px) { |
| .dialog1x { |
| width: $dialog-1x-width; |
| } |
| .dialog2x { |
| width: $dialog-2x-width; |
| } |
| } |
| |
| @media only screen and (min-width: 2020px) { |
| .dialog1x { |
| width: $dialog-2x-width; |
| } |
| .dialog2x { |
| width: $dialog-4x-width; |
| } |
| } |
| |
| @mixin keyframes($animation-name, $start, $end) { |
| @-webkit-keyframes #{$animation-name} { |
| 0% { |
| --webkit-transform: translateX(#{$start}); |
| } |
| 100% { |
| -webkit-transform: translateX(#{$end}); |
| } |
| } |
| @-moz-keyframes #{$animation-name} { |
| 0% { |
| -moz-transform: translateX(#{$start}); |
| } |
| 100% { |
| -moz-transform: translateX(#{$end}); |
| } |
| } |
| @-ms-keyframes #{$animation-name} { |
| 0% { |
| -ms-transform: translateX(#{$start}); |
| } |
| 100% { |
| -ms-transform: translateX(#{$end}); |
| } |
| } |
| @-o-keyframes #{$animation-name} { |
| 0% { |
| -o-transform: translateX(#{$start}); |
| } |
| 100% { |
| -o-transform: translateX(#{$end}); |
| } |
| } |
| @keyframes #{$animation-name} { |
| 0% { |
| transform: translateX(#{$start}); |
| } |
| 100% { |
| transform: translateX(#{$end}); |
| } |
| } |
| } |
| |
| @mixin animation($name, $duration, $function) |
| { |
| -moz-animation: #{$name} #{$duration} #{$function}; |
| -webkit-animation: #{$name} #{$duration} #{$function}; |
| animation: #{$name} #{$duration} #{$function}; |
| } |
| |
| @include keyframes("keyframe-dialog-rtl", "320px", "0px") |
| |
| .load-right-to-left{ |
| @include animation("keyframe-dialog-rtl", "0.5s", "linear"); |
| |
| right: 0px; |
| float: right; |
| } |
| |
| @include keyframes("keyframe-dialog-ltr", "-320px", "0px") |
| |
| .load-left-to-right{ |
| @include animation("keyframe-dialog-ltr", "0.5s", "linear") |
| } |