/* * SonarQube * Copyright (C) 2009-2021 SonarSource SA * mailto:info AT sonarsource DOT com * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 3 of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ .button.boolean-toggle { display: inline-block; vertical-align: middle; width: 48px; height: var(--controlHeight); padding: 1px; border: 1px solid var(--gray80); border-radius: var(--controlHeight); box-sizing: border-box; background-color: #fff; cursor: pointer; transition: all 0.3s ease; } .button.boolean-toggle:hover { background-color: #fff; } .button.boolean-toggle:focus { border-color: var(--blue); background-color: #f6f6f6; } .boolean-toggle-handle { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border: 1px solid var(--gray80); border-radius: 22px; box-sizing: border-box; background-color: #f6f6f6; transition: transform 0.3s cubic-bezier(0.87, -0.41, 0.19, 1.44), border 0.3s ease; } .boolean-toggle-handle > * { opacity: 0; transition: opacity 0.3s ease; } .button.boolean-toggle-on { border-color: var(--darkBlue); background-color: var(--darkBlue); color: var(--darkBlue); } .button.boolean-toggle-on:hover { background-color: var(--darkBlue); } .button.boolean-toggle-on:focus { background-color: var(--darkBlue); } .button.boolean-toggle-on .boolean-toggle-handle { border-color: #f6f6f6; transform: translateX(var(--controlHeight)); } .button.boolean-toggle-on .boolean-toggle-handle > * { opacity: 1; }