mirror of
https://github.com/ubicloud/ubicloud.git
synced 2025-10-06 23:01:56 +08:00
a4bc4a36c4
This adds a "New Private Subnet" option to the Private Subnet select box. When chosen, the "Private Subnet Name" input displays. When filled out correctly, it creates the virtual machine in the newly created private subnet. This uses a CSS approach instead of a Javascript approach for handling the display of the "Private Subnet Name" input when the "New Private Subnet" option is selected. This type of CSS is now widely supported by browsers: https://caniuse.com/css-has
41 lines
1.1 KiB
CSS
41 lines
1.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom styles */
|
|
@layer components {
|
|
.radio-small-card {
|
|
@apply flex items-center justify-center rounded-md sm:flex-1 cursor-pointer focus:outline-none;
|
|
@apply ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50 peer-focus-visible:ring-2 peer-focus-visible:ring-orange-600;
|
|
@apply peer-focus-visible:ring-offset-2 peer-checked:bg-orange-600 peer-checked:text-white peer-checked:hover:bg-orange-700;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.mask-sweep {
|
|
@apply inline-block animate-sweep;
|
|
-webkit-mask: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%) 0 0 / 200% 100%;
|
|
mask: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%) 0 0 / 200% 100%;
|
|
}
|
|
|
|
@keyframes sweep {
|
|
to {
|
|
-webkit-mask-position: -200% 0;
|
|
mask-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
.animate-sweep {
|
|
animation: sweep 1.6s linear infinite;
|
|
}
|
|
}
|
|
|
|
#creation-form {
|
|
#new-private-subnet-name {
|
|
display: none;
|
|
}
|
|
|
|
&:has(select#private_subnet_id option[value^=new-]:checked) #new-private-subnet-name {
|
|
display: block;
|
|
}
|
|
}
|