Browse Source

Primary and Secondary button styles have been aggregated

master
ChiefRed 3 years ago
parent
commit
82b8b84349
4 changed files with 220 additions and 55 deletions
  1. +137
    -0
      src/assets/styles/.index.css
  2. +81
    -0
      src/assets/styles/index.tailwind.css
  3. +1
    -27
      src/components/controls/ButtonPrimary.jsx
  4. +1
    -28
      src/components/controls/ButtonSecondary.jsx

+ 137
- 0
src/assets/styles/.index.css View File

@@ -25214,6 +25214,143 @@ p {
display: none !important;
}

.btn-primary {
-webkit-appearance: none;
appearance: none;
display: flex;
position: relative;
width: 100%;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-width: 0;
border-radius: 0.375rem;
--border-opacity: 1;
border-color: #333684;
border-color: rgba(51, 54, 132, var(--border-opacity));
--bg-opacity: 1;
background-color: #333684;
background-color: rgba(51, 54, 132, var(--bg-opacity));
--text-opacity: 1;
color: #fff;
color: rgba(255, 255, 255, var(--text-opacity));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
--bg-opacity: 1;
background-color: #6c6fc6;
background-color: rgba(108, 111, 198, var(--bg-opacity));
}

.btn-primary:focus {
--bg-opacity: 1;
background-color: #6c6fc6;
background-color: rgba(108, 111, 198, var(--bg-opacity));
outline: 0;
}

.btn-primary:active {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--bg-opacity: 1;
background-color: #333684;
background-color: rgba(51, 54, 132, var(--bg-opacity));
--transform-scale-x: .98;
--transform-scale-y: .98;
}

.btn-primary:disabled {
--bg-opacity: 1;
background-color: #333684;
background-color: rgba(51, 54, 132, var(--bg-opacity));
opacity: 0.5;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--transform-scale-x: 1;
--transform-scale-y: 1;
cursor: not-allowed;
}

.btn-secondary {
-webkit-appearance: none;
appearance: none;
display: flex;
position: relative;
width: 100%;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-width: 2px;
border-radius: 0.375rem;
--border-opacity: 1;
border-color: #333684;
border-color: rgba(51, 54, 132, var(--border-opacity));
--bg-opacity: 1;
background-color: #fff;
background-color: rgba(255, 255, 255, var(--bg-opacity));
--text-opacity: 1;
color: #333684;
color: rgba(51, 54, 132, var(--text-opacity));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-secondary:hover {
--bg-opacity: 1;
background-color: #6c6fc6;
background-color: rgba(108, 111, 198, var(--bg-opacity));
--text-opacity: 1;
color: #fff;
color: rgba(255, 255, 255, var(--text-opacity));
}

.btn-secondary:focus {
--bg-opacity: 1;
background-color: #6c6fc6;
background-color: rgba(108, 111, 198, var(--bg-opacity));
outline: 0;
}

.btn-secondary:active {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--bg-opacity: 1;
background-color: #6c6fc6;
background-color: rgba(108, 111, 198, var(--bg-opacity));
--transform-scale-x: .98;
--transform-scale-y: .98;
}

.btn-secondary:disabled {
--bg-opacity: 1;
background-color: #fff;
background-color: rgba(255, 255, 255, var(--bg-opacity));
opacity: 0.5;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--transform-scale-x: 1;
--transform-scale-y: 1;
cursor: not-allowed;
}

@media (min-width: 640px) {
.sm\:container {
width: 100%;

+ 81
- 0
src/assets/styles/index.tailwind.css View File

@@ -50,4 +50,85 @@ p {

.grecaptcha-badge {
display: none !important;
}

.btn-primary {
@apply appearance-none;
@apply flex;
@apply relative;
@apply w-full;
@apply py-3;
@apply border-0;
@apply rounded-md;
@apply border-primary-800;
@apply bg-primary-800;
@apply text-white;
@apply truncate;
@apply cursor-pointer;
@apply transform;
@apply shadow-md;
}

.btn-primary:hover {
@apply bg-primary-500;
}

.btn-primary:focus {
@apply bg-primary-500;
@apply outline-none;
}

.btn-primary:active {
@apply shadow-inner;
@apply bg-primary-800;
@apply scale-98;
}

.btn-primary:disabled {
@apply bg-primary-800;
@apply opacity-50;
@apply shadow-md;
@apply scale-100;
@apply cursor-not-allowed;
}

.btn-secondary {
@apply appearance-none;
@apply flex;
@apply relative;
@apply w-full;
@apply py-3;
@apply border-2;
@apply rounded-md;
@apply border-primary-800;
@apply bg-white;
@apply text-primary-800;
@apply truncate;
@apply cursor-pointer;
@apply transform;
@apply shadow-md;
}

.btn-secondary:hover {
@apply bg-primary-500;
@apply text-white;
}

.btn-secondary:focus {
@apply bg-primary-500;
@apply outline-none;
}

.btn-secondary:active {
@apply shadow-inner;
@apply bg-primary-500;
@apply scale-98;
}

.btn-secondary:disabled {
@apply bg-white;
@apply opacity-50;
@apply shadow-md;
@apply scale-100;
@apply cursor-not-allowed;
}

+ 1
- 27
src/components/controls/ButtonPrimary.jsx View File

@@ -5,33 +5,7 @@ function PrimaryButton(props) {
return <>
<button
type={type||'button'}
className="
appearance-none
flex
relative
w-full
py-3
border-0
rounded-md
border-primary-800
bg-primary-800
text-white
truncate
cursor-pointer
transform
shadow-md
hover:bg-primary-500
focus:bg-primary-500
focus:outline-none
active:shadow-inner
active:bg-primary-800
active:scale-98
disabled:bg-primary-800
disabled:opacity-50
disabled:shadow-md
disabled:scale-100
disabled:cursor-not-allowed
"
className="btn-primary"
onClick={action}
disabled={disabled}
aria-disabled={disabled}

+ 1
- 28
src/components/controls/ButtonSecondary.jsx View File

@@ -5,34 +5,7 @@ function ButtonSecondary(props) {
return <>
<button
type={type||'button'}
className="
appearance-none
flex
relative
w-full
py-3
border-2
rounded-md
border-primary-800
bg-white
text-primary-800
truncate
cursor-pointer
transform
shadow-md
hover:bg-primary-500
hover:text-white
focus:bg-primary-500
focus:outline-none
active:shadow-inner
active:bg-primary-500
active:scale-98
disabled:bg-white
disabled:opacity-50
disabled:shadow-md
disabled:scale-100
disabled:cursor-not-allowed
"
className="btn-secondary"
onClick={action}
disabled={disabled}
>

Loading…
Cancel
Save