feat(radio): added simple styles

src/lib-dev/radio/module.ts

@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -9,25 +9,9 @@ import { McRadioModule } from '../../lib/radio';
 /* tslint:disable:no-trailing-whitespace */
 @Component({
     selector: 'app',
-    styles: [`
-        .example-radio-group {
-            display: inline-flex;
-            flex-direction: column;
-        }
-        
-        .example-radio-button {
-            margin-bottom: 10px;
-        }
-        
-        .example-selected-value {
-            margin: 15px 0;
-        }
-    `],
+    styleUrls: ['theme.css'],
+    encapsulation: ViewEncapsulation.None,
     template: `
-        <mc-radio-group>
-            <mc-radio-button value="1">Option 1</mc-radio-button>
-            <mc-radio-button value="2">Option 2</mc-radio-button>
-        </mc-radio-group>
 
         <br/><br/>
 
@@ -48,7 +32,7 @@ export class DemoComponent {
         'Apple',
         'Banana',
         'Tomato',
-        'Blackberry'
+        'Крякать как уточка'
     ];
 }
 

src/lib-dev/radio/theme.scss

@@ -0,0 +1,14 @@
+.example-radio-group {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.example-radio-button {
+    margin-bottom: 10px;
+}
+
+.example-selected-value {
+    margin: 15px 0;
+}
+
+@import '../../lib/core/theming/prebuild/default-theme';

src/lib/core/_core.scss

@@ -8,7 +8,7 @@
 // @import 'grid/grid';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
-@mixin mat-core($typography-config: null) {
+@mixin mc-core($typography-config: null) {
 
     @include mosaic-typography($typography-config);
     @include cdk-a11y();

src/lib/core/theming/prebuild/default-theme.scss

@@ -1,15 +1,14 @@
-@import '../all-theme';
-
-
-// Include all typography for the components.
-@include mosaic-typography();
-
-
-// Define a theme.
-$primary: mc-palette($mc-blue, 500, 600, 600);
-$second: mc-palette($mc-grey, 40, 60, 100);
-
-$theme: mc-light-theme($primary, $second);
-
-// Include all theme styles for the components.
-@include mosaic-theme($theme);
+@import '../all-theme';
+
+
+// Include all typography for the components.
+@include mc-core();
+
+// Define a theme.
+$primary: mc-palette($mc-blue, 500, 600, 600);
+$second: mc-palette($mc-grey, 40, 60, 100);
+
+$theme: mc-light-theme($primary, $second);
+
+// Include all theme styles for the components.
+@include mosaic-theme($theme);

src/lib/radio/_radio-theme.scss

@@ -1,8 +1,47 @@
+@import '../core/theming/theming';
 @import '../core/styles/typography/typography-utils';
 
 
+@mixin _mc-radio-color($palette) {
+
+    .mc-radio-outer-circle {
+        border-color: mc-color($palette, 300);
+    }
+}
+
 @mixin mc-radio-theme($theme) {
 
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+    $warn: map-get($theme, warn);
+
+    .mc-radio-button {
+
+        &.mc-primary {
+            @include _mc-radio-color($primary);
+        }
+
+        &.mc-second {
+            @include _mc-radio-color($second);
+
+            &.mc-radio-checked .mc-radio-outer-circle {
+                border-color: mc-color($primary, 600);
+            }
+
+            &.mc-radio-checked .mc-radio-inner-circle {
+                background-color: mc-color($primary, 500);
+
+                &:before {
+                    background-color: white;
+                }
+            }
+
+        }
+
+        &.mc-warn {
+            @include _mc-radio-color($warn);
+        }
+    }
 }
 
 @mixin mc-radio-typography($config) {

src/lib/radio/radio.component.ts

@@ -291,6 +291,7 @@ export const _McRadioButtonMixinBase =
     selector: 'mc-radio-button',
     templateUrl: 'radio.component.html',
     styleUrls: ['radio.css'],
+    inputs: ['color', 'tabIndex'],
     encapsulation: ViewEncapsulation.None,
     exportAs: 'mcRadioButton',
     host: {
@@ -300,7 +301,7 @@ export const _McRadioButtonMixinBase =
         '[class.mc-radio-disabled]': 'disabled',
         '(focus)': '_inputElement.nativeElement.focus()'
     },
-    changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class McRadioButton extends _McRadioButtonMixinBase
     implements OnInit, AfterViewInit, OnDestroy, CanColor, HasTabIndex {

src/lib/radio/radio.scss

@@ -1,10 +1,10 @@
 
-$mc-radio-size: 20px !default;
+$mc-radio-size: 16px !default;
 // Padding between input toggles and their labels
 $mc-toggle-padding: 8px !default;
 
 // Top-level host container.
-.mat-radio-button {
+.mc-radio-button {
     display: inline-block;
 }
 
@@ -28,6 +28,46 @@ $mc-toggle-padding: 8px !default;
     flex-shrink: 0;
 }
 
+// The outer circle for the radio, always present.
+.mc-radio-outer-circle {
+    box-sizing: border-box;
+    height: $mc-radio-size;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: $mc-radio-size;
+    border: {
+        width: 1px;
+        style: solid;
+        radius: 50%;
+    }
+}
+
+// The inner circle for the radio, shown when checked.
+.mc-radio-inner-circle {
+    border-radius: 50%;
+    box-sizing: border-box;
+    height: $mc-radio-size;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: $mc-radio-size;
+
+    .mc-radio-checked & {
+
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            margin-left: 5px;
+            margin-top: 5px;
+            border-radius: 50%;
+        }
+    }
+}
+
 // Text label next to radio.
 .mc-radio-label-content {
     display: inline-block;
@@ -41,3 +81,7 @@ $mc-toggle-padding: 8px !default;
         padding-left: 0;
     }
 }
+
+.mc-radio-disabled, .mc-radio-disabled .mc-radio-label {
+    cursor: default;
+}