diff options
author | Wouter Admiraal <wouter.admiraal@sonarsource.com> | 2021-08-19 12:49:11 +0200 |
---|---|---|
committer | sonartech <sonartech@sonarsource.com> | 2021-08-20 20:03:09 +0000 |
commit | 6f17541395dcedb52fe54e7755be95f2e5941086 (patch) | |
tree | ce3d742aee2af87e018c193c97eea5e7fc81a4e5 /server/sonar-web/src/main/js/components/controls/RadioCard.css | |
parent | 4ce76b5cde3ee915a6c45bfa452e0c7c61c642a5 (diff) | |
download | sonarqube-6f17541395dcedb52fe54e7755be95f2e5941086.tar.gz sonarqube-6f17541395dcedb52fe54e7755be95f2e5941086.zip |
SONAR-15297 Move all code from sonar-ui-common back to respective sonar-web folders
Diffstat (limited to 'server/sonar-web/src/main/js/components/controls/RadioCard.css')
-rw-r--r-- | server/sonar-web/src/main/js/components/controls/RadioCard.css | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/server/sonar-web/src/main/js/components/controls/RadioCard.css b/server/sonar-web/src/main/js/components/controls/RadioCard.css new file mode 100644 index 00000000000..f51fe41c930 --- /dev/null +++ b/server/sonar-web/src/main/js/components/controls/RadioCard.css @@ -0,0 +1,134 @@ +/* + * 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. + */ +.radio-card { + display: flex; + flex-direction: column; + width: 450px; + min-height: 210px; + background-color: #fff; + border: solid 1px var(--barBorderColor); + border-radius: 3px; + box-sizing: border-box; + margin-right: calc(2 * var(--gridSize)); + transition: all 0.2s ease; +} + +.radio-card.animated { + height: 0; + border-width: 0; + overflow: hidden; +} + +.radio-card.animated.open { + height: 210px; + border-width: 1px; +} + +.radio-card.highlight { + box-shadow: var(--defaultShadow); +} + +.radio-card:last-child { + margin-right: 0; +} + +.radio-card:focus { + outline: none; +} + +.radio-card-vertical { + width: 100%; + min-height: auto; +} + +.radio-card-actionable { + cursor: pointer; +} + +.radio-card-actionable:not(.disabled):hover { + box-shadow: var(--defaultShadow); + transform: translateY(-2px); +} + +.radio-card-actionable.selected { + border-color: var(--darkBlue); +} + +/* + * Disabled transform property because it moves the element to a new stacking context + * creating z-index conflicts with other components. + * This is a problem with a vertical list of RadioCards where a select might be above another RadioCard + */ +.radio-card-actionable.radio-card-vertical:not(.disabled):hover { + box-shadow: none; + transform: none; +} + +.radio-card-actionable.radio-card-vertical:not(.selected):not(.disabled):hover { + border-color: var(--lightBlue); +} + +.radio-card-actionable.selected .radio-card-recommended { + border: solid 1px var(--darkBlue); + border-top: none; +} + +.radio-card-actionable.disabled { + cursor: not-allowed; + background-color: var(--disableGrayBg); + border-color: var(--disableGrayBorder); +} + +.radio-card-actionable.disabled h2, +.radio-card-actionable.disabled ul { + color: var(--disableGrayText); +} + +.radio-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: calc(2 * var(--gridSize)) calc(2 * var(--gridSize)) 0; +} + +.radio-card-body { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0 calc(2 * var(--gridSize)) calc(2 * var(--gridSize)); +} + +.radio-card-body .alert { + margin-bottom: 0; +} + +.radio-card-recommended { + position: relative; + padding: 6px calc(var(--gridSize) * 2); + left: -1px; + bottom: -1px; + width: 450px; + color: #fff; + background-color: var(--blue); + border-radius: 0 0 3px 3px; + box-sizing: border-box; + font-size: var(--smallFontSize); +} |