urfu-ui-kit-vanilla 1.0.40 → 1.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/main.css +72 -0
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "UrFU UI-Kit for Vanilla Web",
4
4
  "license": "UNLICENSED",
5
5
  "private": false,
6
- "version": "1.0.40",
6
+ "version": "1.0.41",
7
7
  "type": "module",
8
8
  "scripts": {
9
9
  "start": "vite serve playground",
package/src/main.css CHANGED
@@ -2997,6 +2997,78 @@ button {
2997
2997
  .u-collapsible-menu-action-hide ~ .u-collapsible-menu-body .u-collapsible-menu-list {
2998
2998
  visibility: hidden;
2999
2999
  }
3000
+ .u-card {
3001
+ position: relative;
3002
+ background-color: #fff;
3003
+ display: flex;
3004
+ flex-direction: column;
3005
+ flex-wrap: wrap;
3006
+ height: 100%;
3007
+ justify-content: space-between;
3008
+ min-height: 188px;
3009
+ padding: 20px;
3010
+ color: #1e4391;
3011
+ font-size: 24px;
3012
+ font-weight: 600;
3013
+ line-height: 28px;
3014
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%231E4391'/%3E%3C/svg%3E");
3015
+ background-repeat: no-repeat;
3016
+ background-position: bottom 20px left 20px;
3017
+ }
3018
+ .u-card:hover {
3019
+ background-color: #2951B6;
3020
+ color: #FFFFFF;
3021
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%23FFF'/%3E%3C/svg%3E");
3022
+ }
3023
+ .u-card:hover .u-card-action {
3024
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%23FFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
3025
+ }
3026
+ .u-card-action {
3027
+ cursor: pointer;
3028
+ position: absolute;
3029
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%231E4391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%231E4391' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
3030
+ background-repeat: no-repeat;
3031
+ height: 16px;
3032
+ width: 16px;
3033
+ bottom: 20px;
3034
+ right: 20px;
3035
+ }
3036
+ .u-card-second {
3037
+ position: relative;
3038
+ background-color: #2951B6;
3039
+ display: flex;
3040
+ flex-direction: column;
3041
+ color: #fff;
3042
+ flex-wrap: wrap;
3043
+ height: 100%;
3044
+ justify-content: space-between;
3045
+ min-height: 188px;
3046
+ padding: 20px;
3047
+ font-size: 24px;
3048
+ font-weight: 600;
3049
+ line-height: 28px;
3050
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%23FFF'/%3E%3C/svg%3E");
3051
+ background-repeat: no-repeat;
3052
+ background-position: bottom 20px left 20px;
3053
+ }
3054
+ .u-card-second:hover {
3055
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%23FF2D7F'/%3E%3C/svg%3E");
3056
+ background-color: #fff;
3057
+ color: #1e4391;
3058
+ }
3059
+ .u-card-second:hover .u-card-second-action {
3060
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%23FF2D7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%23FF2D7F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
3061
+ }
3062
+ .u-card-second-action {
3063
+ cursor: pointer;
3064
+ position: absolute;
3065
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%23FFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
3066
+ background-repeat: no-repeat;
3067
+ height: 16px;
3068
+ width: 16px;
3069
+ bottom: 20px;
3070
+ right: 20px;
3071
+ }
3000
3072
  .bg-gradient-main {
3001
3073
  background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
3002
3074
  }