A Pen by Beibit Sakhanov on CodePen.
Created
April 20, 2022 06:41
-
-
Save bsakhanov/335be63dec1b93ff508a9e1191e00fc2 to your computer and use it in GitHub Desktop.
Card grid category v1 - Uikit 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- UIkit CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" /> | |
| <!-- UIkit JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script> | |
| <!-- UIkit SECTION --> | |
| <div class="uk-section uk-section-default"> | |
| <div class="uk-container"> | |
| <div class="uk-margin uk-grid-match uk-grid-collapse uk-child-width-1-4@l uk-text-center" uk-grid> | |
| <!-- UIkit CARD 1 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="far fa-newspaper fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="far fa-newspaper fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Actuality</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Actuality various</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 2 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-ribbon fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-ribbon fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Charity</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Charitable organization</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 3 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fab fa-joomla fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fab fa-joomla fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">CMS</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Content Management System</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 4 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="far fa-comment-dots fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="far fa-comment-dots fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Dating</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Online dating service</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 5 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-code fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-code fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Developer</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Developing</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 6 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-cogs fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-cogs fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Framework</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Framework for developing</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 7 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-server fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-server fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Host</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Web hosting service</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 8 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-film fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-film fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Movie</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Online movie service</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 9 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-cogs fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-cogs fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Framework</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Framework for developing</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 10 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fab fa-joomla fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fab fa-joomla fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">CMS</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Content Management System</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 11 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-code fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-code fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Developer</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Developing</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD 12 --> | |
| <div class="uk-visible-toggle" tabindex="-1"> | |
| <div class="uk-margin uk-card uk-card-default uk-card-hover"> | |
| <!-- UIkit CARD BODY --> | |
| <div class="uk-card-body"> | |
| <a class="uk-link-reset uk-position-cover" href="#"></a> | |
| <div class="uk-flex uk-flex-center"> | |
| <span class="uk-icon default"><i class="fas fa-server fa-3x"></i></span> | |
| <span class="uk-icon hover"><i class="fas fa-server fa-3x"></i></span> | |
| </div> | |
| <h3 class="uk-card-title uk-margin">Host</h3> | |
| </div> | |
| <!-- UIkit CARD FOOTER DEFAULT --> | |
| <div class="uk-card-footer default"> | |
| <p>Web hosting service</p> | |
| </div> | |
| <!-- UIkit CARD FOOTER HOVER --> | |
| <div class="uk-card-footer uk-hidden-hover"> | |
| <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> | |
| <div class="uk-navbar-center uk-navbar-item"> | |
| <ul class="uk-navbar-nav"> | |
| <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li> | |
| <li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li> | |
| <li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UIkit CARD --> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Card Default */ | |
| .uk-card-default { | |
| background: #fbfbfb !important; | |
| box-shadow: 1px 1px 5px rgba(0,0,0,0.4) !important; | |
| border-top: 5px solid transparent; | |
| border-left: 1px solid rgba(0,0,0,0.1); | |
| border-right: 1px solid rgba(0,0,0,0.1); | |
| border-bottom: 1px solid rgba(0,0,0,0.1); | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| } | |
| /* Card Default Hover */ | |
| .uk-card-default.uk-card-hover:hover { | |
| background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 100%) !important; | |
| box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1) !important; | |
| border-top: 5px solid #ec483b; | |
| border-left: 0; | |
| border-right: 0; | |
| border-bottom: 0; | |
| z-index: 1; | |
| transform: scale(1.1); | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| } | |
| /* Card Body */ | |
| .uk-card-body { | |
| padding: 20px 20px !important; | |
| } | |
| /* Desktop and bigger */ | |
| @media (min-width: 1200px) { | |
| .uk-card-body { | |
| padding: 20px 20px !important; | |
| } | |
| } | |
| /* Card Title */ | |
| .uk-card-default .uk-card-title { | |
| color: #666 !important; | |
| } | |
| /* Card Title Hover */ | |
| .uk-card-default.uk-card-hover:hover .uk-card-title { | |
| color: #666 !important; | |
| } | |
| /* Card Icon */ | |
| .uk-card-default.uk-card-hover span.hover { | |
| display: none; | |
| } | |
| .uk-card-default.uk-card-hover span.default { | |
| display: inherit; | |
| color: #1e87f0; | |
| } | |
| /* Card Icon Hover */ | |
| .uk-card-default.uk-card-hover:hover span.hover { | |
| display: inherit; | |
| color: #ec483b; | |
| } | |
| .uk-card-default.uk-card-hover:hover span.default { | |
| display: none; | |
| } | |
| /* Card Footer */ | |
| .uk-card-footer { | |
| background: linear-gradient(to bottom, #ececec 0%, #f5f5f5 100%) !important; | |
| padding: 15px 15px !important; | |
| } | |
| /* Desktop and bigger */ | |
| @media (min-width: 1200px) { | |
| .uk-card-footer { | |
| padding: 15px 15px !important; | |
| } | |
| } | |
| .uk-card-default.uk-card-hover:hover .uk-card-footer { | |
| background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 100%) !important; | |
| } | |
| /* Card Footer Text */ | |
| .uk-section-default .uk-card-default .uk-card-footer p { | |
| text-align: center; | |
| font-size: 0.75rem; | |
| line-height: 150%; | |
| margin: 10px 0; | |
| letter-spacing: 0.5px; | |
| } | |
| /* Card Footer Default */ | |
| .uk-card-default.uk-card-hover div.default { | |
| display: inherit; | |
| padding: 5px 5px !important; | |
| height: 41px; | |
| } | |
| .uk-card-default.uk-card-hover:hover div.default { | |
| display: none; | |
| } | |
| /* Card Navbar Item */ | |
| li { | |
| display: inline; | |
| list-style: none; | |
| padding-right: 20px; | |
| } | |
| .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle { | |
| min-height: 0px !important; | |
| padding: 0 0px !important; | |
| } | |
| /* Card Tooltip */ | |
| [data-tooltip] { | |
| cursor: pointer; | |
| position: relative; | |
| /********** Default Behavior ********* */ | |
| /********** Timeout Variant ********* */ | |
| /********** Tooltip Sizes ********* */ | |
| /********** Top Tooltip ********* */ | |
| /********** Right Tooltip ********* */ | |
| /********** Bottom Tooltip ********* */ | |
| /********** Left Tooltip ********* */ | |
| } | |
| [data-tooltip]:before, [data-tooltip]:after { | |
| position: absolute; | |
| visibility: hidden; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.15s cubic-bezier(0.5, 1, 0.25, 1); | |
| z-index: 1; | |
| } | |
| [data-tooltip]:before { | |
| padding: 5px; | |
| width: 50px; | |
| border-radius: 3px; | |
| background: #666; | |
| color: #fff; | |
| content: attr(data-tooltip); | |
| text-align: center; | |
| font-size: 14px; | |
| font-weight: normal; | |
| line-height: 1.2; | |
| } | |
| [data-tooltip]:after { | |
| border: 8px solid transparent; | |
| width: 0; | |
| content: ""; | |
| font-size: 0; | |
| line-height: 0; | |
| } | |
| [data-tooltip]:hover:before, [data-tooltip]:hover:after { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| [data-tooltip].tooltip-top:before { | |
| bottom: 100%; | |
| left: 50%; | |
| margin-bottom: 5px; | |
| transform: translateX(-50%); | |
| } | |
| [data-tooltip].tooltip-top:after { | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-top: 8px solid #666; | |
| border-bottom: none; | |
| } | |
| [data-tooltip].tooltip-top:hover:before, [data-tooltip].tooltip-top:hover:after { | |
| transform: translateX(-50%) translateY(-5px); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment