_lx-position-and-size-icons.scss

/*
# LexaVideo Copyright information - do not remove this copyright notice
# Copyright (C) 2015 - Alexander Marquardt
#
# LexaVideo -  a fully responsive web-app featuring real-time browser-based video conferencing and text chat.
#
# Original author: Alexander Marquardt
#
# A demo version of LexaVideo can be seen at http://www.chatsurfing.com
#
# Please consider contributing your enhancements and modifications to the LexaVideo community.
# Git source code repository: https://github.com/alexander-marquardt/lexavideo
#
# Licensed 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.
*/

/* NOTE: Any classes that extend icons *must* start with "icon-lx" - see the _styles.scss file for the
         associated selectors */


// The following will contain the video camera and the "x" together - used for positioning
// of the camera and the "x" icons relative to each other.
.cl-camera-access-denied-wrapper-cfg {
  vertical-align: middle;
  display:inline-block;
  position:relative;
  height: 1em;
  width: 1.5em
}

// The video camera icon
.icon-lx-video-camera-line-cfg {
  color:#888888;
  position:absolute;
  bottom: -0.15em;
  font-size:1.5em;
  @extend .icon-lx-video-camera-line;
}

// The "x" that will be placed over the video camera icon
.icon-lx-close-over-video-camera-line-cfg {
  color: $deep-red;
  position:absolute;
  left:0.9em;
  bottom: -0.4em;
  font-size:0.7em;
  @extend .icon-lx-x-symbol;
}

.cl-lx-call-control-wrapper-cfg {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  height: 1em;
  width: 1em;
}


%call-control-icon-common {
  position: absolute;
  font-size: 1.5em;
  bottom: 0em;
  left: 50%;
  top: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em; //relative to the new font-size of 2em

}

// Hangup phone icon
.icon-lx-phone-hang-up-cfg {
  @extend %call-control-icon-common;
  @extend .icon-lx-phone-hang-up;
  margin-top: -0.60em;
  margin-left: -0.35em;
}


.icon-lx-microphone-cfg {
  @extend %call-control-icon-common;
  margin-left: -0.3em; //relative to the new font-size of 3em
  @extend .icon-lx-microphone;
}

.icon-lx-panel-bubble {
  @extend %call-control-icon-common;
  margin-top: -0.55em;
  margin-left: -0.55em; //relative to the new font-size of 3em
}


.icon-lx-video-camera-filled-cfg {
  @extend %call-control-icon-common;
  margin-top: -0.55em;
  @extend .icon-lx-video-camera-filled;
}

.icon-lx-volume-high-cfg {
  @extend %call-control-icon-common;
  @extend .icon-lx-volume-high;
}

.icon-lx-thin-forward-slash-cfg {
  @extend %call-control-icon-common;
  margin-top: -0.55em;
  @extend .icon-lx-thin-forward-slash;
}

.icon-lx-thick-forward-slash-cfg {
  color: $btn-gray-bg;
  margin-top: -0.55em;
  @extend %call-control-icon-common;
  @extend .icon-lx-thick-forward-slash;
}

.btn-gray {
  @include button-variant($btn-default-color, $btn-gray-bg, $btn-gray-border);
}

.btn-gray-light {
  @include button-variant($btn-default-color, $btn-gray-light-bg, $btn-gray-light-border);
}

.icon-lx-start-video-camera-wrapper-cfg {
  @extend .cl-lx-call-control-wrapper-cfg;
  width: 2em;
  margin-left: -0.5em;
}

.icon-lx-start-video-camera-cfg {
  @extend %call-control-icon-common;
  @extend .icon-lx-video-camera-filled;
  top: 40%;
  font-size: 1.5em;
}

.icon-lx-deny-start-video-camera-thick-forward-slash-cfg {
  @extend %call-control-icon-common;
  @extend .icon-lx-thick-forward-slash;
  top: 40%;
  font-size: 1.5em;
}

.icon-lx-deny-start-video-camera-thin-forward-slash-cfg {
  color: white;
  @extend %call-control-icon-common;
  @extend .icon-lx-thin-forward-slash;
  top: 40%;
  font-size: 1.5em;
}


.btn-primary .icon-lx-deny-start-video-camera-thick-forward-slash-cfg {
  color: $brand-primary;
}

.btn-primary:hover .icon-lx-deny-start-video-camera-thick-forward-slash-cfg {
  color: darken($brand-primary, 10%);
}

.btn-danger .icon-lx-deny-start-video-camera-thick-forward-slash-cfg {
  color: $brand-danger;
}

.btn-danger:hover .icon-lx-deny-start-video-camera-thick-forward-slash-cfg {
  color: darken($brand-danger, 10%);
}