diff options
Diffstat (limited to 'src/app/modules/app-starter/app-starter.component.css')
-rw-r--r-- | src/app/modules/app-starter/app-starter.component.css | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/src/app/modules/app-starter/app-starter.component.css b/src/app/modules/app-starter/app-starter.component.css new file mode 100644 index 0000000..8ec276c --- /dev/null +++ b/src/app/modules/app-starter/app-starter.component.css @@ -0,0 +1,122 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + +.card-img-top { + width: 60%; + height: 5vw; + object-fit: contain; +} + +.card-deck > div { + display: flex; + flex: 1 0 0; + flex-direction: column; +} + +.card-deck > div:not(:last-child) { + margin-right: 15px; +} + +.card-deck { + width: 90%; + margin-left: 2%; +} + +.card-deck > div:not(:first-child) { + margin-left: 15px; +} + +.my-group-title { + color: var(--primary); +} + +.card { + border-radius: 20px; + cursor: pointer; + transition: 0.4s; + min-width: 200px; + max-width: 200px; + min-height: 250px; + max-height: 250px; + text-align: center; + margin-right: 2.25rem; +} + +.card-body { + padding-bottom: 0; +} + +.card-title { + min-height: 87px; + font-size: 14px; +} + +/* Works together with bootstraps responsive image class +https://stackoverflow.com/questions/53721711/how-to-set-responsive-images-max-width-bootstrap-4#53723494 +*/ +.img-max { + max-width: 115px; + width: 100%; +} + +.card:hover { + transform: scale(1.1, 1.1); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.disabled-card:hover { + transform: none !important; + box-shadow: none !important; + transition: none !important; +} + +a, +a:hover { + color: #262626; + text-decoration: none; +} + +a:hover { + cursor: pointer; +} + +.nav-tabs, +.nav-links { + border-bottom: 1px solid #b2b2b2; +} + +.nav-link { + background-color: transparent; +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: var(--primary); + background-color: #fff; + border-color: #b2b2b2 #b2b2b2 #fff; +} + +.nav-link:focus { + border-style: none; +} + +/* I will leave this for future purpose in case we will have disabled tiles in the Portal */ +/* .disabled-tiles { + opacity: 0.5; + cursor: not-allowed !important; +} */ |