@3t-transform/threeteeui 0.0.16 → 0.0.18

package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js

@@ -1,13 +1,13 @@
-export default {
-  title: 'Atoms/Checkbox',
-  component: 'tttx-checkbox',
-};
+export default {
+  title: 'Atoms/Checkbox',
+  component: 'tttx-checkbox',
+};
 const Template = ({ value }) => `
 <tttx-checkbox
   ${value ? 'value="true"' : ''}
 ></tttx-checkbox>
-`;
-export const Default = Template.bind({});
-Default.args = {
-  value: false,
-};
+`;
+export const Default = Template.bind({});
+Default.args = {
+  value: false,
+};

package/dist/collection/components/molecules/tttx-form/tttx-form.css

@@ -173,8 +173,11 @@ input:focus {
 }
 
 .button {
+  font-family: Roboto, serif;
+  box-sizing: border-box;
   height: 36px;
-  padding: 8px 16px;
+  min-width: 36px;
+  padding: 0;
   margin: 0;
   background: transparent;
   color: #212121;
@@ -188,31 +191,112 @@ input:focus {
   font-weight: 400;
 }
 
+.button-content {
+  display: block;
+  padding: 0 16px;
+}
+
+.icon-left, .icon-right {
+  margin-top: 4px;
+}
+
+.iconleft {
+  padding-left: 8px;
+}
+
+.iconleft .button-content {
+  padding-left: 4px;
+}
+
+.iconright {
+  padding-right: 8px;
+}
+
+.iconright .button-content {
+  padding-right: 4px;
+}
+
+.notext {
+  padding: 0 6px;
+}
+
 .button:hover {
-  background: #f0f0f0;
+  background: rgba(17, 17, 17, 0.1);
+  border: 1px solid #D5D5D5;
 }
 
 .button:active {
-  background: #e3e3e3;
+  background: rgba(17, 17, 17, 0.2);
+  border: 1px solid #D5D5D5;
 }
 
-.primary-blue {
+.primary {
   background: #1479c6;
   border: 1px solid #1479c6;
   color: white;
 }
 
-.primary-blue:hover {
-  background: #1169ba;
+.primary:hover {
+  background: #146EB3;
+  border: 1px solid #146EB3;
 }
 
-.primary-blue:active {
-  background: #0951a8;
+.primary:active {
+  background: #1464A2;
+  border: 1px solid #1464A2;
 }
 
-.secondary-white {
-  background: white;
-  border: 1px solid #212121;
+.borderless {
+  background: transparent;
+  border: none;
+  color: #212121;
+}
+
+.borderless:hover {
+  background: rgba(17, 17, 17, 0.1);
+  border: none;
+}
+
+.borderless:active {
+  background: rgba(17, 17, 17, 0.2);
+  border: none;
+}
+
+.danger {
+  background: #DC0000;
+  border: 1px solid #DC0000;
+  color: white;
+}
+
+.danger:hover {
+  background: #C60000;
+  border: 1px solid #C60000;
+}
+
+.danger:active {
+  background: #B00000;
+  border: 1px solid #B00000;
+}
+
+.disabled {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+.disabled:hover {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+.disabled:active {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
 }
 
 :host {