iotmapmanager/css/tabs.css

Manage markers, clusters, user marker or paths on IotMaps

/*
* Software Name : Iot Map Component
* SPDX-FileCopyrightText: Copyright (c) Orange SA
* SPDX-License-Identifier: MIT
*
* This software is distributed under the MIT license,
* the text of which is available at https://opensource.org/license/MIT/
* or see the "LICENSE" file for more details.
*
* Software description: web library for interactive maps providing Orange branded reusable markers, tabs, clusters and paths
*/

/* tabs.css */

/* Markers TABS */
.iotmap-marker-unselected > .iotmap-tab-top {
  position: absolute;
  background-color: white;
  left: 0px;
  top: -20px;
  width: 30px;
  height: 35px;
  border-radius: 6px 6px 0px 0px;
  z-index: 7;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.4);
  color: black;
  font-size: 16px;
  font-family: 'Helvetica Neue', 'helvetica';
  font-weight: bold;
  line-height:20px;
  text-align: center;
  visibility: visible;
}

.iotmap-marker-unselected > .iotmap-tab-top-big {
  position: absolute;
  background-color: white;
  left: -5px;
  top: -20px;
  width: 40px;
  height: 20px;
  border-radius: 6px 6px 0px 0px;
  font-size: 16px;
  font-family: 'Helvetica Neue', 'helvetica';
  font-weight: bold;
  line-height:20px;
  text-align: center;
  z-index: 30;
  visibility: visible;
}


.iotmap-marker-unselected > .iotmap-tab-top-big-left {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: rotate(-18.44deg);
  transform-origin: left bottom;
  left: 0px;
  top: -5px;
  border-radius: 5px 0px 0px 1px;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.4);
  background-color: white;
  z-index: 7;
  visibility: visible;
}

.iotmap-marker-unselected > .iotmap-tab-top-big-right {
  width: 20px;
  height: 20px;
  position: absolute;
  transform: rotate(18.44deg);
  transform-origin: right bottom;
  top: -5px;
  left: 10px;
  border-radius: 0px 5px 1px 0px;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.4);
  background-color: white;
  z-index: 7;
  visibility: visible;
}

.iotmap-marker-selected > .iotmap-tab-top, .iotmap-tab-top-big-right, .iotmap-tab-top-big-left, .iotmap-tab-top-big {
  overflow: hidden;
  font-size: 1px;
  visibility: hidden;
}


/* Clusters TABS */
.iotmap-clustericon > .iotmap-tab-top {
  position: absolute;
  background-color: white;
  left: 10px;
  top: -18px;
  width: 30px;
  height: 25px;
  border-radius: 6px 6px 0px 0px;
  z-index: 7;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.4);
  color: black;
  font-size: 16px;
  font-family: 'Helvetica Neue', 'helvetica';
  font-weight: bold;
  line-height:20px;
  text-align: center;
  visibility: visible;
}
.iotmap-clustericon > .iotmap-tab-top-big {
  position: absolute;
  background-color: white;
  left: 0px;
  top: -18px;
  width: 50px;
  height: 25px;
  border-radius: 6px 6px 0px 0px;
  z-index: 7;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.4);
  color: black;
  font-size: 16px;
  font-family: 'Helvetica Neue', 'helvetica';
  font-weight: bold;
  line-height:20px;
  text-align: center;

  visibility: visible;
}
.iotmap-clustericon > .iotmap-tab-top-big-left {
  position: absolute;
  background-color: white;
  left: 0px;
  top: 7px;
  width: 10px;
  height: 20px;
  border-radius: 0px 0px 30px 0px;
  z-index: 7;

  visibility: visible;
}
.iotmap-clustericon > .iotmap-tab-top-big-right {
  position: absolute;
  background-color: white;
  right: -50px;
  top: 7px;
  width: 10px;
  height: 20px;
  border-radius: 0px 0px 0px 30px;
  z-index: 7;
  visibility: visible;
}

.iotmap-clustericon:hover > .iotmap-tab-top,
.iotmap-clustericon:hover > .iotmap-tab-top-big,
.iotmap-clustericon:hover > .iotmap-tab-top-big-left,
.iotmap-clustericon:hover > .iotmap-tab-top-big-right {
  visibility: hidden;
  font-size: 1px;
}